/* VINGE Control Center — identità del sito (docs/brand/vinge-tokens.json) sopra app.css.
   Solo grafica: nessuna regola cambia il funzionamento. Fallback senza blur e con movimento ridotto. */
:root{--bg:#16191F;--panel:#1F232B;--panel2:#262B34;--line:#383E4A;--ink:#F7F4EE;--muted:#C9CCD3;--faint:#9AA0AC;
--accent:#F4C542;--accent2:#D9FF63;--ok:#7BD88F;--warn:#F4A259;--bad:#FF7A7A;--demo:#B8C2D6;--r:18px;
--glass:linear-gradient(160deg,rgba(38,43,52,.78),rgba(31,35,43,.62));--glass-line:rgba(247,244,238,.09);
--shadow:inset 0 1px 0 rgba(247,244,238,.05),0 24px 60px -30px rgba(0,0,0,.65);--ease:cubic-bezier(.2,.7,.1,1);
--side-c:76px;--side-o:252px}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(1100px 700px at 85% -10%,#262B34,transparent 60%),var(--bg);background-attachment:fixed}
code,.chip,.legend,.count,[data-src],.foot{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Font del brand (Space Grotesk/Mono) non caricati: la CSP del Control Center non ha font-src. Da decidere. */
:focus-visible{outline-color:var(--accent2)}
::selection{background:var(--accent);color:#1F232B}
.skip{background:var(--accent);color:#1F232B}
.btn{border-radius:999px;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1F232B;box-shadow:0 10px 30px -14px rgba(244,197,66,.6)}
.btn.primary:hover{background:#FFD45C;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.card{background:var(--glass);border-color:var(--glass-line);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}}
.num,.timeline li::before{background:var(--accent);color:#1F232B}
.input,select,input:not([type=checkbox]):not([type=radio]),textarea{border-radius:12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(217,255,99,.16)}

/* ---- Sidebar flottante in vetro: compatta, si espande al passaggio o resta aperta col pulsante ---- */
.logo-sym{width:30px;height:30px;flex:none}
.brand b{color:var(--accent)}
.side-pin{display:none}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar{background:rgba(22,25,31,.86)}
.sidebar nav a{border-radius:12px;transition:background .2s,color .2s}
.sidebar nav a[aria-current="true"],.sidebar nav a.on{background:linear-gradient(90deg,rgba(244,197,66,.22),rgba(244,197,66,.05));color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.sidebar nav a .ico{color:var(--faint)}.sidebar nav a:hover .ico,.sidebar nav a.on .ico{color:var(--accent)}
@media(min-width:900px){
  body{grid-template-columns:calc(var(--side-c) + 24px) minmax(0,1fr);transition:grid-template-columns .45s var(--ease)}
  body.side-pinned{grid-template-columns:calc(var(--side-o) + 24px) minmax(0,1fr)}
  .sidebar{position:sticky;top:12px;margin:12px;height:calc(100vh - 24px);width:var(--side-c);border:1px solid var(--glass-line);border-radius:24px;padding:16px 12px;
    background:linear-gradient(175deg,rgba(38,43,52,.88),rgba(31,35,43,.92));backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:var(--shadow);overflow:hidden;transition:width .4s var(--ease),box-shadow .4s;z-index:20}
  .sidebar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px 160px at 30% 0%,rgba(244,197,66,.16),transparent 70%)}
  .sidebar:hover,.sidebar:focus-within,body.side-pinned .sidebar{width:var(--side-o)}
  .sidebar:hover:not(.pinned),.sidebar:focus-within:not(.pinned){box-shadow:var(--shadow),24px 0 60px -20px rgba(0,0,0,.6)}
  .brand{padding:2px 9px;min-height:36px}
  .brand-t,.lbl,.who{opacity:0;transition:opacity .25s;white-space:nowrap}
  .sidebar:hover .brand-t,.sidebar:hover .lbl,.sidebar:hover .who,.sidebar:focus-within .brand-t,.sidebar:focus-within .lbl,.sidebar:focus-within .who,
  body.side-pinned .brand-t,body.side-pinned .lbl,body.side-pinned .who{opacity:1;transition-delay:.12s}
  .sidebar nav a{gap:14px;padding:10px 16px;font-size:14.5px;position:relative}
  .side-pin{display:grid;place-items:center;position:absolute;right:12px;top:18px;width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-line);background:rgba(22,25,31,.6);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .25s,transform .35s var(--ease)}
  .side-pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
  .sidebar:hover .side-pin,.sidebar:focus-within .side-pin,body.side-pinned .side-pin{opacity:1}
  .side-pin[aria-pressed="true"]{transform:rotate(180deg);color:var(--accent)}
  .side-foot{flex-wrap:nowrap}
  /* tooltip quando la barra è compatta e navigata da tastiera */
  .sidebar:not(:hover) nav a:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--panel2);border:1px solid var(--line);padding:4px 10px;border-radius:8px;font-size:13px;white-space:nowrap}
}
@media(max-width:899px){
  .lbl{display:inline}.sidebar nav a .ico{width:18px;height:18px}
  .sidebar{border-bottom-color:var(--glass-line)}
}
.topbar h1{font-size:28px;letter-spacing:-.03em}

/* ---- Control Room (sezione chiara) con i colori del brand ---- */
#room{--panel:#F7F4EE;--panel2:#EFEBE2;--line:#DDD7CA;--ink:#1F232B;--muted:#4A505C;--faint:#6A707C;--accent:#B8860B}
#room a,#room .linkish{color:#7A5A00}
#room .btn.primary{background:#1F232B;border-color:#1F232B;color:#F7F4EE}
#room.card{background:#F7F4EE;backdrop-filter:none}

/* ---- Login ---- */
body.login{background:radial-gradient(900px 600px at 70% 20%,rgba(52,58,70,.9),transparent 60%),#16191F;overflow:hidden;position:relative}
.login-bg{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
.login-bg img{width:min(110vw,980px);opacity:.06;transform:translateX(18%) rotate(-8deg);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(14%) translateY(-3%) rotate(-4deg)}}
.login-card{position:relative;max-width:420px;padding:34px 30px 26px;border-radius:28px;border:1px solid var(--glass-line);
  background:linear-gradient(155deg,rgba(38,43,52,.82),rgba(31,35,43,.7));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(247,244,238,.07),0 50px 120px -40px rgba(0,0,0,.8);animation:cardIn .7s var(--ease) both}
.login-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(244,197,66,.55),transparent 35%,transparent 70%,rgba(247,244,238,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-sym{width:44px;height:44px}
.login-k{margin:0;font:400 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.login-card h1{font-size:34px;letter-spacing:-.035em;margin:0 0 6px}
.login-lead{color:var(--muted);margin:0 0 22px;font-size:15px}
.login-form{display:grid;gap:14px;margin-top:0}
.lf{display:grid;gap:6px;min-width:0}
.login-card label{font-size:13px;color:var(--muted)}
.login-card input{padding:13px 14px;background:rgba(22,25,31,.7);border-radius:12px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.pw{position:relative}
.pw input{padding-right:50px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.pw-toggle:hover{color:var(--ink);background:rgba(247,244,238,.06)}
.pw-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pw-toggle[aria-pressed="false"] .pw-off{display:none}
.login-card .alert{margin:0;padding:10px 12px;border-radius:12px;background:rgba(255,122,122,.1);border:1px solid rgba(255,122,122,.35);color:#FFB3B3;font-size:14px;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.login-go{margin-top:6px;min-height:50px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(31,35,43,.3);border-top-color:#1F232B;animation:spin .7s linear infinite}
.login-form.busy .spin{display:block}.login-form.busy .login-go{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.fine{color:var(--faint);margin-top:22px}.fine a{color:var(--muted)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.login-card,.card,.sidebar{background:var(--panel)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}