:root{
  --bg:#f4f1ea;
  --panel:#ffffff;
  --panel2:#faf8f3;
  --ink:#2b2622;
  --muted:#7d7469;
  --line:#e3ddd1;
  --accent:#5b4636;
  --accent2:#8a6d3b;
  --bar:#b04a3a;
  --chip:#efeadf;
  --sel:#5b4636;
  --sel-ink:#ffffff;
  --radius:10px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1a18;
    --panel:#26231f;
    --panel2:#211e1b;
    --ink:#ece7df;
    --muted:#a79c8d;
    --line:#3a352f;
    --accent:#cbb08a;
    --accent2:#d8b56a;
    --bar:#e08a6f;
    --chip:#332e28;
    --sel:#cbb08a;
    --sel-ink:#1c1a18;
    --shadow:0 1px 3px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#1c1a18; --panel:#26231f; --panel2:#211e1b; --ink:#ece7df; --muted:#a79c8d;
  --line:#3a352f; --accent:#cbb08a; --accent2:#d8b56a; --bar:#e08a6f; --chip:#332e28;
  --sel:#cbb08a; --sel-ink:#1c1a18; --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
}

/* ---- Header ---- */
.topbar{background:var(--panel); border-bottom:1px solid var(--line); padding:10px 16px; box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.logo{font-size:20px; color:var(--accent)}
.topbar h1{font-size:17px; margin:0; font-weight:700; letter-spacing:.2px}
.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.ctrl{display:flex; flex-direction:column; font-size:11px; color:var(--muted); gap:3px; text-transform:uppercase; letter-spacing:.5px}
.ctrl.grow{flex:1 1 220px; min-width:180px}
select,input[type="search"],input[type="text"]{
  font-size:15px; color:var(--ink); background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-width:150px;
  text-transform:none; letter-spacing:normal;
}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* ---- Body ---- */
.corpo{flex:1 1 auto; min-height:0; display:flex; gap:12px; padding:12px 16px}
.lista-wrap{flex:0 0 300px; display:flex; flex-direction:column; min-height:0}
.conteggio{font-size:12px; color:var(--muted); padding:2px 4px 6px}
.lista{flex:1 1 auto; overflow:auto; list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
.lista li{padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px}
.lista li:last-child{border-bottom:0}
.lista li:hover{background:var(--panel2)}
.lista li.sel{background:var(--sel); color:var(--sel-ink)}

.dettaglio{flex:1 1 auto; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px}
.dettaglio h2{margin:0 0 2px; font-size:22px}
.dettaglio .cat{color:var(--accent2); font-style:italic; font-size:13px; margin-bottom:14px}
.dettaglio .sez{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:16px 0 6px}
.dettaglio .verbi{font-style:italic}
.resa{display:flex; gap:10px; align-items:baseline; padding:3px 0}
.resa .bar{color:var(--bar); font-family:ui-monospace,Consolas,monospace; font-size:13px; letter-spacing:1px; white-space:nowrap}
.resa .txt{font-size:16px}
.resa .nota{color:var(--muted); font-style:italic; font-size:13px; margin-left:6px}
.onoma{color:var(--muted)}
.vuoto{color:var(--muted); font-style:italic}

/* ---- Footer online ---- */
.online{background:var(--panel); border-top:1px solid var(--line); padding:10px 16px}
.online-row{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.risorse{margin-top:8px}
.btn{font-size:14px; padding:9px 12px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line)}
.btn.res{background:var(--chip); color:var(--ink); border:1px solid var(--line)}
.btn.res:hover{border-color:var(--accent)}
.hint{color:var(--muted); font-size:12px; font-style:italic; margin:8px 0 0}

/* ---- Status ---- */
.stato{background:var(--panel2); border-top:1px solid var(--line); color:var(--muted); font-size:12px; padding:5px 16px}

/* ---- Mobile ---- */
@media (max-width:760px){
  .corpo{flex-direction:column; padding:10px 12px}
  .lista-wrap{flex:0 0 auto; max-height:32vh}
  .dettaglio{flex:1 1 auto}
  .topbar{padding:10px 12px}
  .online{padding:10px 12px}
  .btn.res{flex:1 1 44%}
}