/* Khir · identità condivisa (navy, crema, oro) */
:root{
  --bg:#F6EFE1; --surface:#FFFBF2; --surface-2:#EEE2CA;
  --panel:#131E32; --panel-2:#1B2840; --panel-text:#F4EBDA; --panel-dim:#A9B2C7;
  --text:#131E32; --text-dim:#5B6479;
  --rule:rgba(19,30,50,.16);
  --accent:#8A6A2A; --accent-soft:#C6A46B; --field:#FFFDF7;
  --pos:#2E6B4E; --neg:#9E4529;
  --veil:linear-gradient(180deg,rgba(19,30,50,.88) 0%,rgba(19,30,50,.95) 60%,rgba(19,30,50,.98) 100%);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1828; --surface:#16223A; --surface-2:#1D2B46;
    --panel:#0A1220; --panel-2:#121D33; --panel-text:#F2E9D8; --panel-dim:#9AA4BA;
    --text:#F2E9D8; --text-dim:#A6AEC0; --rule:rgba(242,233,216,.18);
    --accent:#C6A46B; --accent-soft:#A98847; --field:#101A2C;
    --pos:#6FC39A; --neg:#E08A6A;
    --veil:linear-gradient(180deg,rgba(10,18,32,.9) 0%,rgba(10,18,32,.96) 60%,rgba(10,18,32,.99) 100%);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1828; --surface:#16223A; --surface-2:#1D2B46;
  --panel:#0A1220; --panel-2:#121D33; --panel-text:#F2E9D8; --panel-dim:#9AA4BA;
  --text:#F2E9D8; --text-dim:#A6AEC0; --rule:rgba(242,233,216,.18);
  --accent:#C6A46B; --accent-soft:#A98847; --field:#101A2C;
  --pos:#6FC39A; --neg:#E08A6A;
  --veil:linear-gradient(180deg,rgba(10,18,32,.9) 0%,rgba(10,18,32,.96) 60%,rgba(10,18,32,.99) 100%);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:"Newsreader",Georgia,serif;font-weight:500}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}
.wrap{max-width:52rem;margin:0 auto;padding-inline:1.25rem}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.hidden{display:none!important}

/* ---------- barra ---------- */
.appbar{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:.9rem;position:sticky;top:env(safe-area-inset-top,0px);z-index:4}
.appbar .inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;margin-right:auto;min-width:0}
.logo .mk{width:2.3rem;height:2.3rem;border:1px solid var(--accent-soft);border-radius:50%;flex:none;background:url("avatar.jpg") center 18%/cover}
.logo .nm{font-family:"Newsreader",Georgia,serif;font-size:1.1rem;line-height:1.15}
.logo .sb{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.appnav{display:flex;gap:1rem;font-size:.9rem;flex-wrap:wrap;align-items:center}
.appnav a,.appnav button{color:var(--text-dim);text-decoration:none;background:none;border:0;padding:0}
.appnav a.on{color:var(--text);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}
.appnav .out{color:var(--accent)}

main{padding-block:2.2rem 4rem}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
h2.big{font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.1}
.sub{color:var(--text-dim);margin:.6rem 0 0;max-width:58ch}

/* ---------- accesso ---------- */
.loginwrap{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding-block:3rem}
.loginwrap:before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--veil),url("hero.jpg");background-size:cover,cover;background-position:center,60% 18%;background-repeat:no-repeat}
.loginwrap > *{position:relative;z-index:1;width:100%}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:2rem 1.8rem;max-width:25rem;margin:0 auto}
.card .mk{width:3rem;height:3rem;border:1px solid var(--accent-soft);border-radius:50%;background:url("avatar.jpg") center 18%/cover;margin-bottom:1.2rem}
.card h1{font-size:1.5rem}
.card p.hint{color:var(--text-dim);font-size:.9rem;margin:.5rem 0 1.4rem}
label{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.35rem}
input[type=email],input[type=password],input[type=text]{width:100%;padding:.68rem .75rem;border:1px solid var(--rule);border-radius:3px;background:var(--field);color:var(--text);font:inherit;font-size:.95rem;margin-bottom:1rem}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cta{width:100%;background:var(--panel);color:var(--panel-text);border:0;border-radius:3px;padding:.8rem 1rem;font-weight:700;font-size:.95rem}
.cta:hover{background:var(--panel-2)}
.cta[disabled]{opacity:.6;cursor:default}
.linkbtn{background:none;border:0;color:var(--accent);font-size:.88rem;padding:0;text-decoration:underline}
.card .small{text-align:center;font-size:.86rem;color:var(--text-dim);margin:1rem 0 0}
.msg{margin:0 0 1rem;font-size:.9rem;padding:.7rem .8rem;border-radius:3px;border-left:3px solid}
.msg.err{border-color:var(--neg);background:rgba(158,69,41,.08);color:var(--text)}
.msg.ok{border-color:var(--pos);background:rgba(46,107,78,.1);color:var(--text)}

/* ---------- riepilogo ---------- */
.stats{margin-top:1.6rem;background:var(--panel);color:var(--panel-text);border-radius:4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.stats div{padding:1.1rem 1.2rem;border-left:1px solid rgba(198,164,107,.22)}
.stats div:first-child{border-left:0}
.stats .v{font-family:"Newsreader",Georgia,serif;font-size:1.9rem;line-height:1;color:var(--accent-soft);font-variant-numeric:tabular-nums}
.stats .k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-dim);margin-top:.5rem}

/* ---------- percorso ---------- */
.percorso{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.3rem 1.35rem;margin-top:1.6rem}
.percorso h3{font-size:1.25rem}
.percorso .hint{color:var(--text-dim);font-size:.9rem;margin:.3rem 0 0}
.bar{height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:.6rem}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}

.mods{margin-top:1.1rem;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.mod{background:var(--surface);padding:1rem 1.2rem;display:grid;grid-template-columns:2rem 1fr auto;gap:.9rem;align-items:start}
.mod .ring{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex:none}
.mod.done .ring{border-color:var(--pos);color:var(--pos)}
.mod.now .ring{border-color:var(--accent);background:var(--surface-2)}
.mod.lock{opacity:.6}
.mod h4{font-size:1.02rem;line-height:1.3}
.mod .meta{font-size:.85rem;color:var(--text-dim);margin-top:.2rem}
.mod .links{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.pill{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.07em;border:1px solid var(--rule);border-radius:999px;padding:.28rem .62rem;color:var(--text-dim);background:var(--field);text-decoration:none;display:inline-block}
a.pill:hover{border-color:var(--accent);color:var(--accent)}
.mod .fatto{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);background:var(--field);color:var(--text-dim);border-radius:999px;padding:.3rem .65rem;white-space:nowrap}
.mod .fatto[aria-pressed="true"]{border-color:var(--pos);color:var(--pos)}
.mod .chiuso{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);padding-top:.35rem;white-space:nowrap}

/* ---------- player ---------- */
.player{grid-column:1/-1;margin-top:.9rem;background:var(--panel);border-radius:4px;overflow:hidden}
.player .frame{position:relative;width:100%;aspect-ratio:16/9;max-width:100%;background:#000}
.player .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .sotto{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.7rem .9rem;color:var(--panel-dim);font-size:.84rem}
.player .sotto .stato{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-right:auto}
.player .sotto button{background:transparent;border:1px solid rgba(198,164,107,.5);color:var(--panel-text);border-radius:999px;padding:.3rem .75rem;font-size:.8rem}
.player .sotto button:hover{border-color:var(--accent-soft);color:var(--accent-soft)}
.mod .links button.pill{cursor:pointer}
.mod .links button.pill:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- tabella admin ---------- */
.tablewrap{overflow-x:auto;margin-top:1rem;border:1px solid var(--rule);border-radius:4px}
table{border-collapse:collapse;width:100%;min-width:32rem;background:var(--surface)}
th,td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--rule);font-size:.9rem;vertical-align:middle}
th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:400;background:var(--surface-2)}
tr:last-child td{border-bottom:0}
td .who{font-weight:700}
td .mail{color:var(--text-dim);font-size:.8rem;display:block;word-break:break-all}

.help{margin-top:2.4rem;background:var(--surface-2);border-radius:4px;padding:1.3rem 1.35rem}
.help h3{font-size:1.15rem;margin-bottom:.4rem}
.help p{margin:0;color:var(--text-dim);font-size:.94rem;max-width:50ch}

footer{margin-top:3rem;border-top:1px solid var(--rule);padding-top:1.1rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;line-height:1.8}
.vuoto{color:var(--text-dim);font-size:.95rem;margin-top:1.4rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}