/* Aspetto v4 — «Grafite e ottone».
   Lo studio di registrazione come riferimento: grafite, ottone, carta da musica.
   Il colore resta sui dati (funzioni armoniche, note, step); la cornice è calma.
   Un solo gesto forte: i titoli delle sezioni, in corsivo come le indicazioni di tempo di una partitura,
   poggiano su un pentagramma. Questo file si carica dopo lo stile di base di index.html e lo sostituisce. */

:root{
  /* sera: grafite neutra, ottone */
  --bg:#17181A; --side:#121314; --panel:#1F2023; --panel-2:#28292D; --deep:#101112; --hover:#33353A;
  --ink:#ECECEC; --ink-2:#B9BABE; --ink-3:#9FA1A6; --line:#2E3034;
  --accent:#E2BC63; --accent-ink:#17181A; --play:#4DB99A; --play-ink:#0F1C17;
  --fn-t:#4DB99A; --fn-s:#E98F3E; --fn-d:#E2695A; --fn-x:#A58CE6;
  --fn-t-dim:#204740; --fn-s-dim:#4F3619; --fn-d-dim:#4F2722; --fn-x-dim:#352E58;
  --key-w:#ECECEC; --key-b:#0C0C0D; --cell:#1F2023; --cell-b:#1A1B1D;
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px; --r-sm:8px; --r-lg:18px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 18px 48px rgba(0,0,0,.55);
  --ok:#4DB99A; --warn:#E9A23B; --danger:#E2695A; --danger-ink:#F08E7F; --focus:#E2BC63;
  --staff:#2E3034;
  --side-w:232px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  /* giorno: carta pentagrammata fredda, inchiostro, ottone brunito */
  --bg:#F3F4F6; --side:#FBFBFC; --panel:#FFFFFF; --panel-2:#ECEEF2; --deep:#E6E9EE; --hover:#DFE3EA;
  --ink:#1B1D22; --ink-2:#474D59; --ink-3:#596070; --line:#D6DAE2;
  --accent:#8A5C0E; --accent-ink:#FFFFFF; --play:#17705E; --play-ink:#FFFFFF;
  --fn-t:#17705E; --fn-s:#A6550F; --fn-d:#B23E2E; --fn-x:#5E44B8;
  --fn-t-dim:#C6E6DC; --fn-s-dim:#F6DCC0; --fn-d-dim:#F5D0C9; --fn-x-dim:#DDD4F6;
  --key-w:#FFFFFF; --key-b:#1B1D22; --cell:#E8EBF0; --cell-b:#DCE0E7;
  --shadow-1:0 1px 2px rgba(27,29,34,.06); --shadow-2:0 18px 48px rgba(27,29,34,.16);
  --ok:#17705E; --warn:#A06A0E; --danger:#B23E2E; --danger-ink:#A33626; --focus:#8A5C0E;
  --staff:#D6DAE2;
  color-scheme:light;
}

/* testo */
body{font-size:15px;line-height:1.55;font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:0}
h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:2.75rem;line-height:1.05;font-optical-sizing:auto}
h3,h4{font-family:var(--f-body);font-weight:600}
h3{font-size:1.18rem} h4{font-size:1.02rem}
.group-title{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.5rem}
.label,.fld>span{color:var(--ink-2);font-weight:500;letter-spacing:.01em}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* il pentagramma: cinque linee sotto il titolo di ogni sezione */
.view-head{position:relative;padding-bottom:26px;margin-bottom:22px;
  background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 5px) left bottom/100% 21px no-repeat}
.view-head h2{max-width:22ch}
.view-head p{color:var(--ink-2)}

/* menu laterale */
.side{background:var(--side);border-right:1px solid var(--line);padding:var(--s4) var(--s2) var(--s3)}
.side .brand{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:1.6rem;padding:2px 10px 14px;gap:10px;letter-spacing:-.01em}
.brand svg{width:30px;height:30px}
.nav-btn{position:relative;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;min-height:40px;padding:8px 12px}
.nav-btn:hover{background:color-mix(in srgb,var(--panel-2) 70%,transparent);color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.nav-btn[aria-current="page"]::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-btn[aria-current="page"] svg{stroke:var(--accent)}
.side-foot{border-top:1px solid var(--line)}
.side.mini .nav-btn[aria-current="page"]::before{left:-8px}

/* barra in alto */
.top{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:10px;padding-bottom:10px}
.search input{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 56px 9px 36px}
.search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.search svg{left:13px}
.search kbd{border-radius:999px;padding:1px 7px;background:var(--panel-2);border-color:var(--line)}
.results{border-radius:var(--r);border:1px solid var(--line)}
.actbar .act-proj{background:var(--panel);border-color:var(--line)}
.ai-activity{background:var(--panel);border:1px solid var(--line);border-radius:999px}

/* comandi: tasti di una console, piatti, con un filo di luce in alto */
.btn{border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow-1);font-weight:600;padding:7px 14px;transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:none;background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.btn.hot{background:var(--play);border-color:var(--play);color:var(--play-ink)}
.btn.ghost{background:none;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--line)}
.btn.sm{padding:4px 10px;border-radius:7px}
.btn.danger{color:var(--danger-ink)}

/* superfici */
.panel,.card,.mix-col,.ai-out,.lab-panel,.daw-editor,.daw-transport,.lfbar,.meter-card,.board .bsec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.card{transition:border-color .12s}
.card:hover{background:var(--panel);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.ritem{border-radius:var(--r-sm)}
.ritem:hover{background:var(--panel);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.empty{background:none;border:1px dashed var(--line);border-radius:var(--r)}
.tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.tree .det-h:hover,.tree .song:hover{background:var(--panel-2)}
.tree .sel{background:color-mix(in srgb,var(--accent) 20%,var(--panel))!important}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.fact .v{font-family:var(--f-body);font-weight:600;font-size:1.65rem;letter-spacing:-.01em}
.fact .it{color:var(--ink-2)}
.instr,.media-card,.file,.ctrl-sec,.rowed.ins-r{background:var(--deep);border:1px solid var(--line)}
.notice{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.notice.warn{background:var(--fn-s-dim);border-color:color-mix(in srgb,var(--fn-s) 40%,transparent)}

/* etichette */
.chip{border-radius:999px;padding:2px 10px;background:var(--panel-2);border:1px solid transparent;color:var(--ink-2)}
button.chip:hover{border-color:var(--line);background:var(--hover)}
.chip.acc{background:color-mix(in srgb,var(--accent) 22%,var(--panel-2));color:var(--ink)}
.warn-chip{background:var(--warn);color:#17181A}

/* moduli */
.fld input,.fld select,.fld textarea,.inp{background:var(--deep);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input[type=range]{accent-color:var(--accent)}

/* schede (tab): la linea attiva è d'ottone */
.tabs{border-bottom:1px solid var(--line);gap:2px}
.tab{color:var(--ink-2);font-weight:500;padding:9px 14px;border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}

/* dialoghi */
.overlay{background:color-mix(in srgb,var(--deep) 70%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.modal-h h3{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.55rem}
.modal-f{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* assistente e chat */
.msg{border-radius:14px}
.msg.u{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.msg.a{background:var(--panel);border:1px solid var(--line)}
.composer{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2)}
.composer:focus-within{border-color:var(--accent)}
.ai-out h3,.ai-out h4{color:var(--ink);font-family:var(--f-display);font-style:italic;font-weight:500}
.ai-out h3{font-size:1.35rem} .ai-out h4{font-size:1.12rem}
.aip{background:var(--panel)}
.toast{background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 18px;box-shadow:var(--shadow-2)}

/* piano roll, step, griglie: i dati restano i protagonisti */
.roll,.pr-wrap,.proll{background:var(--deep);border:1px solid var(--line)}
.roll-col-on{outline-color:var(--accent)}
.step{border-radius:5px}
.step.beat{background:color-mix(in srgb,var(--ink) 12%,var(--cell))}
.step.now{box-shadow:0 0 0 2px var(--accent)}
.ch{border-radius:var(--r-sm)}
.ch .n{font-family:var(--f-body);font-weight:700}
.legend{color:var(--ink-2)}
.daw-arr,.daw-heads{border-color:var(--line)}
.daw-pos{background:var(--deep);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.pd-note{font-family:var(--f-display);font-style:italic;font-weight:500}
.progress,.ex-bar{background:var(--panel-2)}

/* piè di pagina */
.foot{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.foot .btn.ghost{color:var(--ink-2)}
.foot .btn.ghost:hover{color:var(--ink)}

@media (max-width:860px){
  .side{box-shadow:var(--shadow-2)}
  h2{font-size:2.1rem}
  .view-head{padding-bottom:24px}
  .top{padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* marchio: un pentagramma con una minima d'ottone */
.brand .st{stroke:var(--ink-3);opacity:.7}
.brand .nh{fill:var(--accent)}
.brand .sm{stroke:var(--accent)}