/*! omnIA 1.2.0 · template grafico unico delle applicazioni
 *
 * Struttura: fascia superiore nera (marchio in negativo, menu con sottovoci in tendina, menu utente)
 * e contenuti in forma morbida (pannelli arrotondati, ombre leggere, pulsanti a pillola).
 * Tema chiaro/scuro: attributo data-mode="light|dark" su <html>, impostato da js/omnia-tema-head.js e js/omnia.js.
 *
 * Regole del marchio:
 * - "omnIA": "omn" leggero, "IA" sempre maiuscolo, pesante, gradiente rosso→arancio, doppia scintilla;
 * - nomi delle app come da registro (es. "EasyPlan" con E e P maiuscole);
 * - palette: bianco, nero, rosso aziendale #D42725 (azioni e indicatori); il gradiente è solo per omnIA;
 * - ogni logo esiste in positivo (scritte nere) e negativo (scritte bianche): nella fascia nera sempre negativo.
 *
 * Markup di riferimento: esempi/*.html · istruzioni: GUIDA.md
 */

/* ---------- caratteri (file locali, licenza OFL in fonts/) ---------- */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- token: tema chiaro ---------- */
:root{
  color-scheme: light;
  --bg:#F3F1F1; --surface:#FFFFFF; --surface-2:#F6F4F4; --ink:#1D1B1E; --ink-2:#5E5A60; --ink-3:#7A757B; --line:#ECE8E8; --line-strong:#DCD7D7;
  --brand:#D42725; --brand-ink:#D42725; --brand-soft:#FCE9E8; --on-brand:#FFFFFF; --link:#C3211F;
  --cta-bg:#D42725; --cta-ink:#FFFFFF; --cta-hover:#BC201E; --focus:#D42725; --focus-ring:rgba(212,39,37,.22); --ctl-accent:#D42725;
  --ok:#1D7349; --ok-soft:#E2F2E9; --warn:#8F5600; --warn-soft:#FDF0D5; --info:#28598A; --info-soft:#E4EDF7; --danger:#A3151A; --danger-soft:#FBE3E3; --muted:#5E6068; --muted-soft:#EDECEC;
  --band:#17171A; --band-ink:#FFFFFF; --band-ink-2:rgba(255,255,255,.7); --band-hover:rgba(255,255,255,.08); --band-field:rgba(255,255,255,.09); --band-line:rgba(255,255,255,.12);
  --row-hover:#FBF9F9; --prog:#D42725; --track:#F0ECEC; --toast-ic:#6FD3A0;
  --radius:16px; --radius-sm:12px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(40,20,20,.04),0 12px 32px -14px rgba(40,20,20,.16);
  --pop-shadow:0 2px 8px rgba(40,20,20,.06),0 24px 48px -16px rgba(40,20,20,.28);
  --font-ui:"Onest","Segoe UI",system-ui,sans-serif;
  --font-display:"Onest","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
  --font-logo:"Outfit","Segoe UI",system-ui,sans-serif;

  /* marchio in positivo */
  --lk-ink:#111111; --lk-tile:#111111; --lk-tile-ink:#FFFFFF; --lk-red:#EF3A34; --ia-a:#D42725; --ia-b:#EE7A1C; --ia-fill:url(#omnia-ia-pos);
  --az-pos:block; --az-neg:none;
}

/* ---------- token: tema scuro ---------- */
:root[data-mode="dark"]{
  color-scheme: dark;
  --bg:#0E0D0F; --surface:#19171A; --surface-2:#221F23; --ink:#F2F0F3; --ink-2:#B3AEB5; --ink-3:#8A858C; --line:#2A272B; --line-strong:#3A363B;
  --brand-ink:#F0605C; --brand-soft:#3A1716; --link:#F0605C; --cta-hover:#E2332F; --focus:#F0605C; --focus-ring:rgba(240,96,92,.3); --ctl-accent:#E2332F;
  --ok:#5FC08E; --ok-soft:#14291E; --warn:#E5A84B; --warn-soft:#2E2210; --info:#7FB1E3; --info-soft:#14212F; --danger:#FF7A75; --danger-soft:#3A1416; --muted:#A3A5AC; --muted-soft:#242427;
  --band:#050505; --band-line:#2B2A2D;
  --row-hover:#1E1C1F; --prog:#F0605C; --track:#2A272B; --toast-ic:#1D7349;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.7);
  --pop-shadow:0 2px 8px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.85);
  /* marchio in negativo */
  --lk-ink:#FFFFFF; --lk-tile:#FFFFFF; --lk-tile-ink:#111111; --lk-red:#D42725; --ia-a:#F2403B; --ia-b:#FFA23E; --ia-fill:url(#omnia-ia-neg);
  --az-pos:none; --az-neg:block;
}

/* contesti fissi del marchio: la fascia nera è sempre in negativo; .ctx-pos/.ctx-neg forzano un contesto */
.ctx-neg,.lk-neg,.appbar .brand,.appbar .ask-btn,.appbar__aziende{--lk-ink:#FFFFFF;--lk-tile:#FFFFFF;--lk-tile-ink:#111111;--lk-red:#D42725;--ia-a:#F2403B;--ia-b:#FFA23E;--ia-fill:url(#omnia-ia-neg);--az-pos:none;--az-neg:block}
.ctx-pos{--lk-ink:#111111;--lk-tile:#111111;--lk-tile-ink:#FFFFFF;--lk-red:#EF3A34;--ia-a:#D42725;--ia-b:#EE7A1C;--ia-fill:url(#omnia-ia-pos);--az-pos:block;--az-neg:none}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg);overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- marchio (lockup: pittogramma + nome app + omnIA) ---------- */
.lk{display:inline-flex;align-items:center;gap:.34em;line-height:1;font-family:var(--font-logo);white-space:nowrap}
.lk__icon{display:block;width:1.22em;height:1.22em;flex:none}
.lk__name{font-weight:700;letter-spacing:-.02em;color:var(--lk-ink)}
.lk__om{display:inline-flex;font-size:.74em}
.om2{position:relative;display:inline-flex;align-items:baseline;padding:.34em .5em 0 0;line-height:1;font-family:var(--font-logo)}
.om2__omn{font-weight:250;color:var(--lk-ink)}
.om2__ia{font-weight:800;background-image:linear-gradient(90deg,var(--ia-a),var(--ia-b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.om2__sp{position:absolute;top:0;right:-.06em;display:block;width:.6em;height:.6em}
.ai-mark{display:block;width:16px;height:16px;flex:none}

/* ---------- loghi delle società ---------- */
.aziende{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;--az-h:24px}
.az{display:inline-flex;align-items:center}
.az + .az{margin-left:14px;padding-left:14px;border-left:1px solid var(--az-sep,var(--line-strong))}
.az img{height:var(--az-h);width:auto;max-width:100%}
.az__pos{display:var(--az-pos,block)}
.az__neg{display:var(--az-neg,none)}
/* solo nei mockup: società senza logo definitivo */
.az--ph{height:var(--az-h);padding:0 10px;border:1px dashed currentColor;border-radius:4px;font:600 10.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;opacity:.65;white-space:nowrap}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid transparent;font-weight:600;font-size:13.5px;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn .ic{width:16px;height:16px}
.btn--primary{background:var(--cta-bg);color:var(--cta-ink)}
.btn--primary:hover{background:var(--cta-hover)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{background:var(--surface-2)}
.btn--ghost{background:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn--danger{background:var(--danger-soft);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:var(--on-brand)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn--primary:disabled:hover{background:var(--cta-bg)}
.btn--sm{height:32px;padding:0 12px;font-size:13px}
.btn--block{width:100%;height:44px;font-size:14.5px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--radius-pill);border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn--sm{width:30px;height:30px}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--dot-ring,var(--surface))}
.link{color:var(--link);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:inherit}
.link:hover{text-decoration:underline}

/* ---------- campi ---------- */
.input,.select,.textarea{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.textarea{height:auto;min-height:78px;padding:9px 12px;resize:vertical;line-height:1.45}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input[readonly]{background:var(--surface-2)}
.input--lg{height:44px}
/* codice monouso (OTP): un solo campo, cifre grandi e spaziate */
.input--code{height:56px;padding:0 12px;text-align:center;font:700 26px/1 var(--font-mono);letter-spacing:.45em;text-indent:.45em}
/* codice a caselle: resta un solo campo dentro .otp[data-omnia-otp]; omnia.js lo rende trasparente e disegna sotto una casella per cifra */
.otp{position:relative}
.otp__cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.otp__cell{display:grid;place-items:center;height:56px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);color:var(--ink);font:700 26px/1 var(--font-mono);transition:border-color .15s,box-shadow .15s}
.otp__cell.is-filled{border-color:var(--ink-3)}
.otp__cell.is-active{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
.otp__cell.is-active:empty::after{content:"";width:2px;height:26px;border-radius:1px;background:var(--focus);animation:otp-caret 1s steps(1) infinite}
@keyframes otp-caret{50%{opacity:0}}
.otp.otp--on .input,.otp.otp--on .input:focus{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;letter-spacing:0;text-indent:0;cursor:text}
.otp--on .input::selection{background:transparent}
.otp--on .input::placeholder{color:transparent}
.field--error .otp__cell{border-color:var(--danger)}
.field--error .otp__cell.is-active{box-shadow:0 0 0 3px var(--danger-soft)}
.select-wrap{position:relative;display:block;min-width:0}
.select-wrap > .ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field__row > label{font-weight:600;font-size:13px;color:var(--ink)}
.field__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.field__hint{font-size:12.5px;color:var(--ink-3)}
.field__err{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:500;color:var(--danger)}
.field__err .ic{width:15px;height:15px}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--danger)}
.input-ic{position:relative}
.input-ic > .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.input-ic > .input{padding-left:40px}
.input-ic > .input-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.form-grid .field--wide{grid-column:1/-1}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.check{display:inline-flex;gap:9px;align-items:center;cursor:pointer;font-size:13.5px}
/* casella di spunta disegnata dal kit: il fondo si colora e il segno di spunta compare con un piccolo rimbalzo */
.check input{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:18px;height:18px;flex:none;margin:0;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.check input::before{content:"";width:10px;height:10px;background:var(--on-brand);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.check input:hover:not(:checked){border-color:var(--ink-3)}
.check input:checked{background:var(--ctl-accent);border-color:var(--ctl-accent)}
.check input:checked::before{transform:scale(1)}
.check input:disabled{opacity:.45;cursor:not-allowed}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
/* interruttore: il fondo sfuma e la manopola scorre con un piccolo rimbalzo; mentre si preme si allarga */
.switch__track{position:relative;width:36px;height:20px;flex:none;border-radius:var(--radius-pill);background:var(--line-strong);transition:background-color .25s ease}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.4,.5,1),width .2s ease}
.switch:active .switch__track::after{width:20px}
.switch input:checked + .switch__track{background:var(--ctl-accent)}
.switch input:checked + .switch__track::after{transform:translateX(16px)}
.switch:active input:checked + .switch__track::after{transform:translateX(12px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- stati e messaggi ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;white-space:nowrap;background:var(--b-soft,var(--muted-soft));color:var(--b,var(--muted))}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--info{--b:var(--info);--b-soft:var(--info-soft)}
.badge--ok{--b:var(--ok);--b-soft:var(--ok-soft)}
.badge--warn{--b:var(--warn);--b-soft:var(--warn-soft)}
.badge--danger{--b:var(--danger);--b-soft:var(--danger-soft)}
.badge--muted{--b:var(--muted);--b-soft:var(--muted-soft)}
.badge--ink{--b:var(--ink);--b-soft:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.badge--plain::before{display:none}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);background:var(--a-soft);font-size:13.5px;color:var(--ink)}
.alert > .ic{color:var(--a);margin-top:1px}
.alert b{display:block;font-weight:700}
.alert ul{margin:4px 0 0;padding-left:18px}
.alert--info{--a:var(--info);--a-soft:var(--info-soft)}
.alert--ok{--a:var(--ok);--a-soft:var(--ok-soft)}
.alert--warn{--a:var(--warn);--a-soft:var(--warn-soft)}
.alert--danger{--a:var(--danger);--a-soft:var(--danger-soft)}
.toast{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--radius-pill);background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:500;box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.toast .ic{color:var(--toast-ic)}
.toast .link{color:inherit;text-decoration:underline;font-weight:600;margin-left:6px}
.toast-live{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;max-width:calc(100% - 32px);transform:translateX(-50%)}

/* ---------- elementi vari ---------- */
.tabs{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tab{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--ink)}
.tab.is-active,.tab[aria-current="page"]{background:var(--ink);color:var(--surface)}
.tab span{font-size:11.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tab.is-active span,.tab[aria-current="page"] span{color:var(--surface)}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--ink-3)}
.avatar{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;letter-spacing:.02em}
.avatar--lg{width:42px;height:42px;font-size:14px}
.avatar--xs{width:24px;height:24px;font-size:10px;background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-3)}

/* ==========================================================
   Shell applicativa: fascia nera, menu con tendine, menu utente
   ========================================================== */
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.appbar{position:relative;z-index:20;background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line);--dot-ring:var(--band);--az-sep:var(--band-line)}
.appbar__top{display:flex;align-items:center;gap:16px;padding:14px 32px 10px}
.menu-btn{display:none;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;cursor:pointer}
.menu-btn:hover{background:var(--band-hover)}
.brand{display:inline-flex;flex:none;color:inherit;text-decoration:none;font-size:21px}
.search{position:relative;flex:1 1 320px;max-width:420px;min-width:0}
.search > .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.search .input{padding-left:36px;padding-right:58px}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 11px/1 var(--font-mono);color:var(--ink-3);border:1px solid var(--line-strong);border-radius:999px;padding:3px 7px}
.appbar .search > .ic{color:var(--band-ink-2)}
.appbar .search .input{border-radius:var(--radius-pill);background:var(--band-field);border-color:transparent;color:var(--band-ink)}
.appbar .search .input::placeholder{color:var(--band-ink-2)}
.appbar .search kbd{color:var(--band-ink-2);border-color:var(--band-line)}
.appbar__actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.ask-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:var(--radius-pill);border:1px solid var(--band-line);background:var(--band-field);color:var(--band-ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap}
.ask-btn:hover,.ask-btn[aria-expanded="true"]{border-color:var(--band-ink-2)}
.ask-btn[aria-expanded="true"]{background:var(--band-hover)}
.appbar .icon-btn{color:var(--band-ink)}
.appbar .icon-btn:hover{background:var(--band-hover)}
.appbar__aziende{display:flex;align-self:stretch;align-items:center;padding-left:16px;border-left:1px solid var(--band-line);--az-h:24px}

/* menu utente */
.usermenu{position:relative}
.me{display:flex;align-items:center;gap:10px;padding:3px 10px 3px 3px;border:0;border-radius:var(--radius-pill);background:none;color:var(--band-ink);cursor:pointer;text-align:left}
.me:hover,.me[aria-expanded="true"]{background:var(--band-hover)}
.me .avatar{background:var(--band-ink);color:var(--band)}
.me__txt{display:flex;flex-direction:column;line-height:1.2;max-width:220px}
.me__txt b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me__txt small{font-size:12px;color:var(--band-ink-2)}
.me > .ic{width:15px;height:15px;color:var(--band-ink-2)}

/* menu principale */
.mainnav{padding:2px 24px 0}
.mainnav__list{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.mn{position:relative}
.mn__link{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border:0;border-radius:12px 12px 0 0;background:none;color:var(--band-ink-2);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.mn__link > .ic{width:16px;height:16px}
.mn__chev{width:14px!important;height:14px!important;opacity:.7;transition:transform .15s}
.mn.is-open .mn__chev{transform:rotate(180deg)}
.mn__link:hover,.mn.is-open > .mn__link{background:var(--band-hover);color:var(--band-ink)}
/* la voce corrente si unisce alla pagina: l'ombra copre la riga in fondo alla fascia, solo sotto la voce */
.mn.is-current > .mn__link{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--bg)}
.mn.is-current > .mn__link > .ic:first-child{color:var(--brand-ink)}

/* tendine (sottomenu e menu utente) */
.pop{position:absolute;z-index:30;padding:10px;background:var(--surface);color:var(--ink);border:0;border-radius:20px;box-shadow:var(--pop-shadow);text-align:left}
.pop--sub{top:calc(100% + 10px);left:0;width:350px;max-width:calc(100vw - 32px)}
.pop--wide{width:620px}
.pop--right{left:auto;right:0}
.sub__grid{display:grid;gap:2px}
.pop--wide .sub__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub__item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;padding:10px;border-radius:12px;color:var(--ink);text-decoration:none}
.sub__item:hover{background:var(--surface-2)}
.sub__item.is-current{background:var(--brand-soft)}
.sub__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--surface-2);color:var(--ink-2)}
.sub__ic .ic{width:17px;height:17px}
.sub__item.is-current .sub__ic{background:var(--surface);color:var(--brand-ink)}
.sub__item b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.sub__item small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.sub__count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700}
.sub__ai{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px 10px 4px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:600;text-decoration:none}
.sub__ai:hover{color:var(--ink)}
.pop--me{top:calc(100% + 10px);right:0;width:300px;padding:6px}
.me-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
.me-head .avatar{background:var(--ink);color:var(--surface)}
.me-head div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.me-head b{font-size:14.5px;overflow-wrap:anywhere}
.me-head small{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
.pop__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;text-align:left;cursor:pointer}
.pop__item:hover{background:var(--surface-2)}
.pop__item .ic{width:17px;height:17px;color:var(--ink-2)}
/* uscita dall'app (Esci): in rosso, per trovarla subito */
.pop__item--danger,.pop__item--danger .ic{color:var(--brand-ink);font-weight:600}
.pop__item--danger:hover{background:var(--brand-soft)}
.pop__sep{height:1px;margin:6px 4px;background:var(--line)}
.pop__group{display:flex;flex-direction:column;gap:8px;padding:6px 10px 8px}
.themeseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:14px;background:var(--surface-2)}
.themeseg button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:0;border-radius:11px;background:none;color:var(--ink-2);font-size:12px;font-weight:600;cursor:pointer}
.themeseg button:hover{color:var(--ink)}
.themeseg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.themeseg button[aria-checked="true"] .ic{color:var(--brand-ink)}
.pop__hint{font-size:12px;color:var(--ink-3)}

/* corpo: colonna unica; l'assistente omnIA (.assist) si apre sopra, allineato a .main */
.app__body{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;padding:20px 24px 0}
.main{min-width:0;display:flex;flex-direction:column;gap:20px;padding:0 0 32px}
.main--narrow{width:100%;max-width:880px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.pagehead__txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.pagehead__actions{display:flex;flex-wrap:wrap;gap:8px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .ic{width:13px;height:13px}
.h1{display:flex;align-items:baseline;gap:10px;font-family:var(--font-display);font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.h1__count{font-size:15px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:0}
.h2{font-family:var(--font-display);font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.005em}
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}

/* indicatori */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.kpi__label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.kpi__value{font-family:var(--font-display);font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi__value small{font-size:.55em;font-weight:600;margin-left:2px;color:var(--ink-2)}
.kpi__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.kpi__bar{display:block;height:5px;border-radius:99px;background:var(--track);overflow:hidden}
.kpi__bar i{display:block;height:100%;background:var(--prog);border-radius:inherit}
.delta{font-weight:700;color:var(--ok)}
.flag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--radius-pill);background:var(--danger-soft);color:var(--danger);font-size:11.5px;font-weight:700}
.flag .ic{width:12px;height:12px;stroke-width:2.2}

/* pannelli e tabelle */
.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.panel__body{display:flex;flex-direction:column;gap:14px;padding:20px}
.panel__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 0}
.tablebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 16px 6px}
.tablebar__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.tablebar__tools .search{flex:0 0 220px}
.tablebar__tools .search .input{height:34px;padding-right:12px}
.tablebar__tools .select-wrap{width:180px}
.tablebar__tools .select{height:34px}
/* position:relative tiene dentro lo scorrimento anche gli elementi assoluti (es. .sr nelle intestazioni) */
.table-wrap{position:relative;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{padding:10px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover{background:var(--row-hover)}
.table tbody tr:last-child td{border-bottom:0}
.table tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600;color:var(--ink-2)}
.num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-title{font-weight:600;color:var(--ink);white-space:nowrap}
.cell-sub{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap}
.person{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.prog{display:flex;align-items:center;gap:10px;min-width:120px}
.prog__bar{flex:1;height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.prog__bar i{display:block;height:100%;border-radius:inherit;background:var(--prog)}
.prog--late .prog__bar i{background:var(--danger)}
.prog__val{width:36px;text-align:right;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.due--warn{color:var(--warn);font-weight:600}
.due--late{color:var(--danger);font-weight:700}
.dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:14px}
.dl dt{color:var(--ink-3);font-weight:500}
.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;text-align:center;color:var(--ink-3)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;font-size:13px;color:var(--ink-2)}
.pager__btns{display:flex;gap:4px}
.pg{min-width:32px;height:32px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-2);cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums;text-decoration:none}
.pg .ic{width:15px;height:15px}
.pg.is-active,.pg[aria-current="page"]{background:var(--ink);color:var(--surface);font-weight:700}
.pg--gap{background:none;cursor:default}

/* assistente omnIA: popup sopra i contenuti, con lo stesso margine di .main (in alto a destra); lo apre .ask-btn[data-omnia-assist] */
.assist{position:absolute;top:20px;right:24px;z-index:15;width:400px;max-width:calc(100% - 48px);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;padding:20px;background:var(--surface);border-radius:22px;box-shadow:var(--pop-shadow);transform-origin:top right;animation:assist-in .2s cubic-bezier(.2,.8,.3,1)}
@keyframes assist-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.assist__head{display:flex;align-items:center;gap:10px}
.assist__head > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.assist__head .lk__om{font-size:20px}
.assist__head small{font-size:12px;color:var(--ink-3)}
.assist__head .badge{margin-left:auto}
.assist__logo{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:14px;background:var(--brand-soft)}
.assist__logo .ai-mark{width:19px;height:19px}
.assist__chips{display:flex;flex-wrap:wrap;gap:6px}
.assist__chat{display:flex;flex-direction:column;gap:10px}
.msg{padding:10px 12px;border-radius:16px;font-size:13.5px;line-height:1.5}
.msg--user{align-self:flex-end;max-width:88%;background:var(--brand);color:var(--on-brand);border-bottom-right-radius:6px}
.msg--ai{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-bottom-left-radius:6px}
.msg--ai ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.msg--ai .code{color:var(--ink)}
.assist__ask{display:flex;gap:6px}
.assist__ask .input{flex:1;min-width:0;height:42px;border-radius:var(--radius-pill)}
.assist__send{display:grid;place-items:center;width:42px;height:42px;flex:none;border:0;border-radius:var(--radius-pill);background:var(--cta-bg);color:var(--cta-ink);cursor:pointer}
.assist__send .ic{width:16px;height:16px}
.assist__feed{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.feed li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;font-size:13px}
.feed__ic{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.feed__ic .ic{width:15px;height:15px}
.feed time{font-size:12px;color:var(--ink-3)}

/* piè di pagina: solo nome dell'app e versione, in una pillola centrata (come i loghi sotto la card di accesso) */
.foot{display:flex;justify-content:center;padding:4px 24px 24px}
.foot__app{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 9px 0 8px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow);font-size:13px;color:var(--ink-2)}
.foot__icon{width:20px;height:20px;flex:none}
.foot__app b{font-weight:600;color:var(--ink)}
.foot__ver{padding:3px 8px;border-radius:var(--radius-pill);background:var(--surface-2);font:600 11.5px/1.2 var(--font-mono);color:var(--ink-3)}

/* pannello del menu su telefono (generato da omnia.js a partire dal menu principale) */
.drawer{position:fixed;inset:0;z-index:35}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer__panel{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(320px,86vw);padding:14px 14px 16px max(14px,env(safe-area-inset-left,0px));background:var(--surface);color:var(--ink);border-radius:0 22px 22px 0;box-shadow:var(--pop-shadow);overflow-y:auto}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.drawer__head .brand{font-size:19px}
.dnav{display:flex;flex-direction:column;gap:2px;padding:10px 0}
.dnav__top,.dnav summary{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;list-style:none}
.dnav summary::-webkit-details-marker{display:none}
.dnav summary .mn__chev{margin-left:auto}
.dnav details[open] summary .mn__chev{transform:rotate(180deg)}
.dnav__top:hover,.dnav summary:hover{background:var(--surface-2)}
.dnav .is-current > summary,.dnav__top.is-current{color:var(--brand-ink)}
.dnav__sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px 38px}
.dnav__sub a{padding:8px 10px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-size:14px}
.dnav__sub a:hover{background:var(--surface-2);color:var(--ink)}
.dnav__sub a.is-current{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.drawer__foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}

/* ==========================================================
   Login: fascia nera in alto, card arrotondata sovrapposta
   ========================================================== */
.auth{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh}
.auth__theme{position:absolute;top:16px;right:max(16px,env(safe-area-inset-right,0px));z-index:2;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--band-line);border-radius:999px;background:var(--band-field);color:var(--band-ink);cursor:pointer}
.auth__hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:64px 24px 150px;background:var(--band);color:var(--band-ink);text-align:center}
.auth__hero .lk{font-size:40px}
.auth__tagline{max-width:44ch;font-size:18px;color:var(--band-ink-2);text-wrap:balance}
.auth__main{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;margin-top:-112px;padding:0 16px 40px}
.auth__card{position:relative;width:100%;max-width:440px;display:flex;flex-direction:column;gap:22px;padding:32px;background:var(--surface);border-radius:28px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.auth__form{display:flex;flex-direction:column;gap:16px}
.auth__title{font-family:var(--font-display);font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.auth__sub{margin-top:-8px;color:var(--ink-2)}
.auth .input{height:46px;border-radius:var(--radius-pill)}
.auth .input--code{height:56px;border-radius:14px}
.auth .btn--block{height:48px}
.auth__note{font-size:12.5px;color:var(--ink-3)}
.auth__resend{font-size:13px;color:var(--ink-2)}
/* logo della società sotto la card: solo il logo, senza etichette */
.auth__aziende{display:flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}
.auth__legal{font-size:12px;color:var(--ink-3);text-align:center}
.back-link{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--ink-2);font-weight:600;font-size:13px;text-decoration:none;cursor:pointer}
.back-link .ic{width:15px;height:15px}

/* ==========================================================
   Errore 404: fascia nera nella metà alta, numero gigante a cavallo del bordo
   ========================================================== */
/* --err-n è il corpo del numero, --err-top la sua distanza dall'alto. Il bordo della fascia (--err-edge) passa a metà delle cifre:
   in Outfit, con interlinea 0,8, le cifre stanno tra 0,07 e 0,77 del corpo.
   I 4 sono bianchi con mix-blend-mode:difference e diventano scuri da soli dove escono dalla fascia: nessun antenato di .err__num
   deve creare un contesto di sovrapposizione (z-index, transform, opacity, filter), altrimenti restano bianchi anche sul chiaro. */
.err{--err-n:clamp(150px,min(27vw,40vh),380px);--err-top:clamp(84px,13vh,128px);--err-edge:calc(var(--err-top) + var(--err-n) * .42);position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow-x:clip}
.err__band{position:absolute;left:0;right:0;top:0;height:var(--err-edge);background:var(--band);border-bottom:1px solid var(--band-line)}
.err__top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px max(28px,env(safe-area-inset-right,0px)) 0 max(28px,env(safe-area-inset-left,0px))}
.err__theme{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--band-line);border-radius:var(--radius-pill);background:var(--band-field);color:var(--band-ink);cursor:pointer;transition:background .15s,border-color .15s}
.err__theme:hover{background:var(--band-hover);border-color:var(--band-ink-2)}
/* position:relative senza z-index: la colonna si disegna sopra la fascia senza isolare le cifre */
.err__main{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4.5vh,40px);padding:var(--err-top) max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.err__num{display:flex;font:200 var(--err-n)/.8 var(--font-logo);letter-spacing:-.01em;user-select:none}
/* le cifre entrano dal basso, poi seguono un poco il mouse (--err-mx e --err-my li imposta omnia.js) */
.err__num > span{display:block;translate:calc(var(--err-mx,0) * var(--err-k) * 1px) calc(var(--err-my,0) * var(--err-k) * .6px);transition:translate .5s cubic-bezier(.2,.8,.3,1);animation:err-in .9s cubic-bezier(.2,.8,.3,1) both}
.err__num > span:nth-child(1){--err-k:-22;animation-delay:.05s}
.err__num > span:nth-child(2){--err-k:14;animation-delay:.16s}
.err__num > span:nth-child(3){--err-k:-22;animation-delay:.27s}
.err__d{color:var(--band-ink);mix-blend-mode:difference}
.err__zero{font-weight:800;color:var(--brand);text-shadow:0 .06em .2em color-mix(in srgb,var(--brand) 40%,transparent)}
@keyframes err-in{from{opacity:0;transform:translateY(.14em)}}
.err__txt{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;text-align:center;animation:err-up .8s .4s cubic-bezier(.2,.8,.3,1) both}
@keyframes err-up{from{opacity:0;transform:translateY(14px)}}
.err__title{font-family:var(--font-display);font-size:clamp(28px,3.2vw,40px);line-height:1.08;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.err__p{font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.err__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.err__actions .btn{height:46px;padding:0 22px;font-size:14.5px}
.err__foot{display:flex;justify-content:center;padding:0 16px 26px}
/* tema scuro: fascia e fondo sono quasi dello stesso nero, quindi la parte bassa parte più chiara e sfuma, e il bordo è un filo rosso */
:root[data-mode="dark"] .err{background:linear-gradient(var(--surface-2) 0 var(--err-edge),var(--bg) 92%)}
:root[data-mode="dark"] .err__band{border-bottom:2px solid var(--brand);box-shadow:0 1px 18px color-mix(in srgb,var(--brand) 30%,transparent)}

/* ---------- adattamento allo schermo ---------- */
@media (max-width:1180px){
  .me__txt{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ask-btn span:last-child{display:none}
}
@media (max-width:760px){
  .menu-btn{display:inline-grid}
  .appbar__top{gap:6px;padding:10px 16px}
  .appbar .search,.mainnav,.appbar__aziende{display:none}
  .brand{font-size:17px}
  .me > .ic{display:none}
  .me{padding:3px}
  .app__body{padding:16px 16px 0}
  .assist{top:16px;right:16px;max-width:calc(100% - 32px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)}
  .foot{padding:0 16px 16px}
  .h1{font-size:24px}
  .kpi{padding:14px}
  .kpi__value{font-size:26px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .tablebar__tools,.tablebar__tools .search{width:100%;flex:1 1 100%}
  .tablebar__tools .select-wrap{flex:1 1 140px;width:auto}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .dl dd{margin-bottom:8px}
  .pop--me{width:min(300px,calc(100vw - 24px))}
  .auth__hero{padding:56px 16px 130px}
  .auth__hero .lk{font-size:30px}
  .auth__card{padding:24px 20px}
  .auth .input{height:44px}
  .err{--err-top:80px}
  .err__top{padding:14px 16px 0}
  .err__p{font-size:15px}
  .err__actions{flex-direction:column;align-self:stretch}
}