/* Thème OctoFan : palette du hub appliquée aux 4 outils (html:root passe devant les :root propres à chaque outil) */
html:root { --of-accent: #C8A740; --bg: #070710; --bg2: #0c0c1a; --bg3: #111124; --bg4: #16162e; --border: #252545; --border2: #34345e;
  --gold: #C8A740; --gold2: #FFD700; --gold3: #f0d080; --text: #d8cdb8; --dim: #7a7a9a; --dim2: #4a4a6a; }
html[data-of-tool="conso"]:root    { --of-accent: #5fbf6a; }
html[data-of-tool="database"]:root { --of-accent: #b06ae8; }
html[data-of-tool="builder"]:root  { --of-accent: #6a93e8; --panel: #0c0c1a; --panel2: #111124; --text-dim: #7a7a9a; --gold2: #f0d080; }
html[data-of-tool="raid"]:root     { --of-accent: #e0a050; --panel: #0c0c1a; --panel2: #111124; --raid: #e0a050; --raid-glow: rgba(224,160,80,.35); }
/* fond commun */
html[data-of-tool] body { background-color: var(--bg) !important; background-image: radial-gradient(ellipse 70% 55% at 18% -5%,rgba(95,80,160,.16) 0%,transparent 60%), radial-gradient(ellipse 65% 50% at 85% 105%,rgba(40,90,170,.13) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 50% 50%,rgba(200,167,64,.05) 0%,transparent 70%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.013'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; background-attachment: fixed; }
/* en-tête commun : même dégradé, liseré de la couleur de l'outil */
html[data-of-tool] header, html[data-of-tool] .app-header { background: linear-gradient(180deg, #0f0b18 0%, #08080f 100%) !important; border-bottom: 2px solid var(--of-accent) !important; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
/* logo commun : dégradé doré du hub */
@keyframes of-shimmer { to { background-position: 220% center; } }
html[data-of-tool] .logo, html[data-of-tool] .logo-title { background: linear-gradient(100deg, #8a6a20 0%, #FFD700 28%, #fff4c0 42%, #FFD700 56%, #8a6a20 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: of-shimmer 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { html[data-of-tool] .logo, html[data-of-tool] .logo-title { animation: none; } }
/* barre commune : l'onglet actif prend la couleur de l'outil */
html[data-of-tool] #of-bar a.of-tool.active { background: var(--of-accent); border-color: var(--of-accent); color: #08080f; }
html[data-of-tool] #of-bar { border-bottom-color: var(--of-accent); }

/* petits écrans : la barre commune tient dans la largeur */
@media (max-width: 560px) {
  #of-bar { padding: 0 8px; gap: 4px; }
  #of-bar .of-lg-long, #of-bar .of-chip .of-nm, #of-bar .of-chip .of-cls { display: none; }
  #of-bar a.of-hub { padding: 0 8px; letter-spacing: .3px; }
  #of-bar .of-sep { margin: 0 2px; }
  #of-bar .of-login { padding: 0 9px; }
}

/* liseré de l'en-tête des outils : neutre (la couleur de l'outil reste sur la ligne de la barre commune) */
html[data-of-tool] header, html[data-of-tool] .app-header { border-bottom: 1px solid var(--border2) !important; }

/* le compte (connexion, profil) est dans la barre commune : pas de doublon dans les en-têtes des outils */
html[data-of-tool] #authBtn, html[data-of-tool] #auth-btn { display: none !important; }

/* Conso : titre d'accueil plus discret (le nom est déjà dans l'en-tête), liste des consommables bornée */
html[data-of-tool="conso"] .import-hero { padding: 6px 0 18px; }
html[data-of-tool="conso"] .import-hero h1 { font-size: clamp(26px, 4vw, 40px); }
html[data-of-tool="conso"] #conso-list-apropos { max-height: 70vh; overflow: auto; padding-right: 6px; }
@media (max-width: 900px) { html[data-of-tool="conso"] #page-import { padding: 14px 4px; } }
/* la pastille FR/EN ne masque plus la fin des pages qui défilent */
html[data-of-tool="conso"] body, html[data-of-tool="database"] body, html[data-of-tool="account"] body { padding-bottom: 56px; }

/* bannières : la description remplace le nom (déjà dans la barre du haut) */
html[data-of-tool="builder"] .logo-sub, html[data-of-tool="database"] .logo-sub, html[data-of-tool="conso"] .logo-sub {
  font-size: 13px; font-weight: 700; letter-spacing: 1.6px; color: var(--gold3, #f0d080); text-transform: uppercase; margin-top: 0;
}
html[data-of-tool="raid"] .logo-title { font-size: 15px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; animation: none; }

/* talents : la fenêtre commence sous la barre commune, les 3 arbres se réduisent puis s'empilent sur petit écran */
html[data-of-tool="builder"] .talent-overlay { inset: var(--of-bar, 40px) 0 0 0; padding: 14px 10px 24px; }
html[data-of-tool="builder"] .talent-modal { width: 1040px; max-width: 100%; box-sizing: border-box; }
html[data-of-tool="builder"] .talent-trees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html[data-of-tool="builder"] .talent-tree-col { min-width: 0; padding: 10px 6px 12px; }
html[data-of-tool="builder"] .tt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px 6px; justify-content: stretch; }
html[data-of-tool="builder"] .tt-cell { width: 100%; max-width: 46px; height: auto; aspect-ratio: 1 / 1; }
html[data-of-tool="builder"] .talent-head .th-title { min-width: 0; }
@media (max-width: 820px) {
  html[data-of-tool="builder"] .talent-trees { grid-template-columns: 1fr; }
  html[data-of-tool="builder"] .tt-grid { grid-template-columns: repeat(4, 50px); justify-content: center; }
  html[data-of-tool="builder"] .tt-cell { width: 46px; height: 46px; }
}