/* ============================================================
   TOKEN — ricostruiti a mano per essere identici all'anteprima
   ============================================================ */
:root{
  --surface-2:#ffffff;
  --surface-1:#f7f6f3;
  --surface-0:#f0eee9;

  --text-primary:#1a1a18;
  --text-secondary:#6b6a64;
  --text-muted:#9b9a92;

  --border:rgba(26,26,24,.10);
  --border-strong:rgba(26,26,24,.16);
  --border-stronger:rgba(26,26,24,.34);

  --bg-accent:#d8e7f9;
  --text-accent:#17549e;
  --border-accent:rgba(23,84,158,.22);

  --bg-success:#e6f2d9;
  --text-success:#3b6d11;
  --bg-warning:#faeeda;
  --text-warning:#854f0b;
  --bg-danger:#fcebeb;
  --text-danger:#a32d2d;
  --bg-purple:#e8e6fb;
  --text-purple:#4b41ad;
  --bg-teal:#dcf2ea;
  --text-teal:#0f6e56;

  --radius:8px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --nav-h:calc(58px + env(safe-area-inset-bottom));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--surface-2);
  color:var(--text-primary);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* iOS colora di azzurro il testo dei bottoni senza sfondo, come fossero link.
   Azzeriamo l'aspetto nativo e imponiamo il colore: chi vuole altro lo dichiara. */
button{
  font-family:inherit;cursor:pointer;
  color:var(--text-primary);
  -webkit-text-fill-color:currentColor;
  -webkit-appearance:none;appearance:none;
}
a{color:inherit;text-decoration:none;-webkit-text-fill-color:currentColor}

/* ---------- struttura ---------- */
#app{
  max-width:520px;
  margin:0 auto;
  padding:0 20px;
  padding-top:calc(20px + env(safe-area-inset-top));
  padding-bottom:calc(var(--nav-h) + 24px);
  min-height:100vh;
}
.screen{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* ---------- intestazione ---------- */
.eyebrow-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--text-muted);text-transform:uppercase}
.sync{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.sync .dot{width:6px;height:6px;border-radius:50%;background:var(--text-success)}
.sync.off .dot{background:var(--text-muted)}

h1.greet{margin:0;font-size:26px;font-weight:600;letter-spacing:-.4px}
p.sub{margin:3px 0 0;font-size:14px;color:var(--text-secondary)}

/* ---------- riga data ---------- */
.dayrow{display:flex;align-items:center;gap:14px;padding:18px 0 14px}
.datecard{
  width:64px;height:64px;flex-shrink:0;border-radius:16px;background:var(--bg-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-accent);
}
.datecard .dow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.datecard .num{font-size:25px;font-weight:600;line-height:1.15}
.datecard .mon{font-size:11px}
.dayinfo{flex:1;min-width:0}
.dayinfo .title{margin:0;font-size:15px;font-weight:600}
.dayinfo .route{margin:3px 0 8px;font-size:13px;color:var(--text-secondary)}
.progress{display:flex;gap:3px}
.progress span{height:3px;flex:1;border-radius:2px;background:var(--border-strong)}
.progress span.on{background:var(--text-accent)}

/* ---------- banner ---------- */
.banner{
  display:block;width:100%;text-align:left;border:0;margin:6px 0 20px;
  border-radius:16px;padding:15px;background:var(--bg-accent);color:var(--text-accent);
  transition:transform .12s ease;
}
.banner:active{transform:scale(.985)}
.banner.t-traghetto{background:var(--bg-teal);color:var(--text-teal)}
.banner.t-auto{background:var(--bg-purple);color:var(--text-purple)}
.banner.t-hotel{background:var(--bg-warning);color:var(--text-warning)}
.banner.t-avviso{background:var(--bg-danger);color:var(--text-danger)}
.banner.t-prenotazione{background:var(--bg-success);color:var(--text-success)}
.banner .bhead{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.banner .bhead i{font-size:19px}
.banner .blabel{font-size:12px;letter-spacing:1.8px;font-weight:600}
.banner .bmeta{margin-left:auto;font-size:11px}
.banner .brow{display:flex;align-items:center;gap:12px}
.banner .code{margin:0;font-size:24px;font-weight:600;letter-spacing:.5px}
.banner .time{margin:1px 0 0;font-size:13px}
.banner .mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.banner .dur{font-size:10px;letter-spacing:.5px}
.banner .line{width:100%;display:flex;align-items:center;gap:3px}
.banner .line .o{width:5px;height:5px;border-radius:50%;border:1px solid currentColor}
.banner .line .f{width:5px;height:5px;border-radius:50%;background:currentColor}
.banner .line .d{flex:1;border-top:1px dashed currentColor;opacity:.5}
.banner .line i{font-size:15px}
.banner .bfoot{
  margin-top:14px;padding-top:11px;border-top:.5px solid currentColor;
  display:flex;align-items:center;justify-content:space-between;font-size:12px;
}
.banner .bfoot .go{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.banner .btext{margin:0;font-size:14px;line-height:1.45}

.sechead{margin:0 0 14px;font-size:11px;letter-spacing:1.6px;color:var(--text-muted);text-transform:uppercase}

/* ---------- card generiche ---------- */
.card{
  display:block;width:100%;text-align:left;background:var(--surface-2);color:var(--text-primary);
  border:.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;
}
.card.tap{transition:transform .12s ease}
.card.tap:active{transform:scale(.99)}
.card .ct{margin:0;font-size:15px;font-weight:600;color:var(--text-primary)}
.card .cs{margin:3px 0 0;font-size:13px;color:var(--text-secondary)}
.card .cx{margin:8px 0 0;font-size:12px;color:var(--text-muted)}
.daycard{display:flex;align-items:center;gap:14px}
.daycard .mini{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
.daycard .mini .n{font-size:17px;font-weight:600}
.daycard .mini .m{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.daycard.today .mini{background:var(--bg-accent);color:var(--text-accent)}
.daycard.today .mini .m{color:var(--text-accent)}
.daycard.past{opacity:.5}

.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}
.pill i{font-size:13px}

/* ---------- Viaggio: le giornate a fisarmonica ---------- */
.dwrap{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  margin-bottom:10px;overflow:hidden;
}
.dhead{
  display:flex;align-items:center;gap:14px;width:100%;padding:14px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.dhead:active{background:var(--surface-1)}
.dhead .mini{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  color:var(--text-primary);
}
.dhead .mini .n{font-size:17px;font-weight:600;color:inherit}
.dhead .mini .m{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.dwrap.today .mini{background:var(--bg-accent);color:var(--text-accent)}
.dwrap.today .mini .m{color:var(--text-accent)}
.dwrap.past .dhead{opacity:.55}
.dhead .info{flex:1;min-width:0}
.dhead .info .t{margin:0;font-size:15px;font-weight:600;color:var(--text-primary)}
.dhead .info .s{margin:3px 0 0;font-size:13px;color:var(--text-secondary)}
.chev{flex-shrink:0;font-size:18px;color:var(--text-muted);transition:transform .25s ease}
.dwrap.open .chev{transform:rotate(90deg)}

.dpane{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1)}
.dpane .inner{border-top:.5px solid var(--border);padding:6px 0}
@media (prefers-reduced-motion:reduce){.dpane,.chev{transition:none}}

.act{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;
  background:none;border:0;text-align:left;
}
.act:active{background:var(--surface-1)}
.act .h{width:40px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.act .ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.act .ic i{font-size:17px}
.act .txt{flex:1;min-width:0}
.act .tt{display:block;font-size:14px;color:var(--text-primary);line-height:1.35}
.act .ad{display:block;font-size:12px;color:var(--text-secondary);line-height:1.35}
.act .go{flex-shrink:0;font-size:16px;color:var(--text-muted)}
.act .only{
  display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}
.vuoto{padding:14px;font-size:13px;color:var(--text-muted);text-align:center}

/* ---------- Oggi: la giornata in corso ---------- */
.oggi{margin:0 -4px}
.riga{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 4px 11px 18px;background:none;border:0;text-align:left;
  color:var(--text-primary);
}
.riga:active{background:var(--surface-1);border-radius:10px}
.riga .h{width:42px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.riga .ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.riga .ic i{font-size:17px}
.riga .txt{flex:1;min-width:0}
.riga .tt{display:block;font-size:14px;color:var(--text-primary);line-height:1.35}
.riga .ad{display:block;font-size:12px;color:var(--text-secondary);line-height:1.35}
.riga .go{flex-shrink:0;font-size:16px;color:var(--text-muted)}
.riga .only{
  display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}

/* quello che è già successo resta lì, ma si fa da parte */
.riga.passata{opacity:.42}

/* quello che sta succedendo adesso: pallino nel margine, così gli orari
   restano incolonnati al pixel, e nome e orario un po' più marcati */
.riga.adesso .tt{font-weight:600}
.riga.adesso .h{color:var(--text-primary)}
.blip{
  position:absolute;left:0;top:50%;margin-top:-4px;
  width:8px;height:8px;border-radius:50%;
  animation:blip 1.6s ease-in-out infinite;
}
@keyframes blip{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.72)}
}
@media (prefers-reduced-motion:reduce){.blip{animation:none}}

/* il pallino prende il colore dell'attività: viola per l'auto, rosso per la cena */
.blip.tp-generico{background:var(--text-secondary)}
.blip.tp-special{background:#b07908}
.blip.tp-ristorante{background:#a32d2d}
.blip.tp-alloggio{background:#17549e}
.blip.tp-volo{background:#1b7fa8}
.blip.tp-auto{background:#4b41ad}
.blip.tp-traghetto{background:#0f6e56}

/* i sette tipi di attività */
.tp-generico{background:var(--surface-0)}   .tp-generico i{color:var(--text-secondary)}
.tp-special{background:#faeeda}             .tp-special i{color:#b07908}
.tp-ristorante{background:#fbe9e9}          .tp-ristorante i{color:#a32d2d}
.tp-alloggio{background:#d8e7f9}            .tp-alloggio i{color:#17549e}
.tp-volo{background:#e4f2fa}                .tp-volo i{color:#1b7fa8}
.tp-auto{background:#ebe8fa}                .tp-auto i{color:#4b41ad}
.tp-traghetto{background:#dcf2ea}           .tp-traghetto i{color:#0f6e56}

/* ---------- empty ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty i{font-size:32px;display:block;margin-bottom:12px;opacity:.5}
.empty p{margin:0;font-size:14px}

/* ---------- countdown ---------- */
.countdown{
  border-radius:16px;background:var(--surface-0);padding:24px;text-align:center;margin:6px 0 20px;
}
.countdown .n{margin:0;font-size:44px;font-weight:600;letter-spacing:-1px;line-height:1}
.countdown .l{margin:6px 0 0;font-size:13px;color:var(--text-secondary)}

/* ---------- overlay biglietto ---------- */
.sheet{
  position:fixed;inset:0;z-index:60;background:var(--surface-2);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));
  animation:up .3s cubic-bezier(.22,1,.36,1);
}
@keyframes up{from{transform:translateY(3%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet-inner{max-width:520px;margin:0 auto}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sheet-top button{background:none;border:0;padding:4px;color:var(--text-secondary);font-size:22px;line-height:1}

.pass{border:.5px solid var(--border);border-radius:16px;overflow:hidden}
.pass-top{padding:16px;background:var(--bg-accent);color:var(--text-accent)}
.pass.t-traghetto .pass-top{background:var(--bg-teal);color:var(--text-teal)}
.pass-top .r1{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:12px}
.pass-top .r1 .n{letter-spacing:1.4px;font-weight:600}
.pass-top .r2{display:flex;align-items:flex-end;justify-content:space-between}
.pass-top .r2 .big{margin:0;font-size:32px;font-weight:600;letter-spacing:1px;line-height:1}
.pass-top .r2 .sm{margin:5px 0 0;font-size:12px}
.pass-top .r2 i{font-size:20px;padding-bottom:12px}
.perf{position:relative;height:1px;background:var(--surface-2)}
.perf .l,.perf .r{position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--surface-1)}
.perf .l{left:-8px}.perf .r{right:-8px}
.perf .d{position:absolute;left:14px;right:14px;top:0;border-top:1px dashed var(--border-strong)}
.pass-body{padding:18px 16px 16px}
.lab{margin:0 0 3px;font-size:11px;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase}
.val{margin:0;font-size:17px;font-weight:600}
.pax{margin:0 0 18px;font-size:19px;font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.passfoot{margin-top:18px;padding-top:14px;border-top:.5px solid var(--border);display:flex;justify-content:space-between}
.passfoot .val{font-size:14px;font-weight:400}
.mono{font-family:var(--font-mono)}
.barcode{margin-top:20px;display:flex;gap:1.5px;align-items:flex-end;height:52px}
.barcode span{height:100%}
.barcode span.b{background:var(--text-primary)}
.bcode{margin:8px 0 0;text-align:center;font-size:11px;letter-spacing:2px;color:var(--text-muted)}
.offnote{margin:20px 0 0;text-align:center;font-size:12px;color:var(--text-muted)}
.offnote i{font-size:14px;vertical-align:-2px;margin-right:4px}

/* ---------- strisciolina offline ---------- */
#offline{
  position:fixed;left:0;right:0;top:0;z-index:80;
  background:var(--surface-0);color:var(--text-secondary);
  font-size:12px;text-align:center;
  padding:calc(6px + env(safe-area-inset-top)) 12px 6px;
  border-bottom:.5px solid var(--border);
  transform:translateY(-100%);transition:transform .25s ease;
}
#offline.show{transform:none}
#offline i{font-size:13px;vertical-align:-2px;margin-right:5px}

/* ---------- menu in basso ---------- */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:.5px solid var(--border);
  display:flex;
  padding:9px 0 calc(9px + env(safe-area-inset-bottom));
}
#nav button{
  flex:1;background:none;border:0;padding:0;color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
#nav button i{font-size:21px}
#nav button span{font-size:11px}
#nav button.on{color:var(--text-accent)}
#nav button.on span{font-weight:600}

/* ============================================================
   PANNELLO HOST
   ============================================================ */
#app.host{max-width:640px;padding-bottom:40px;overflow-x:hidden}
.h-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.h-top h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.3px}

/* le schede restano appiccicate in alto mentre scorri i moduli lunghi */
.h-tabs{
  position:sticky;top:0;z-index:10;
  display:flex;gap:6px;overflow-x:auto;
  margin:0 -20px 18px;padding:10px 20px 12px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--border);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.h-tabs::-webkit-scrollbar{display:none}
.h-tabs button{
  flex-shrink:0;background:var(--surface-0);border:0;border-radius:20px;
  padding:8px 15px;font-size:14px;color:var(--text-secondary);white-space:nowrap;
}
.h-tabs button.on{background:var(--text-primary);color:var(--surface-2);font-weight:500}

.h-card{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:12px;overflow:hidden;
}
.h-card h3{margin:0 0 2px;font-size:15px;font-weight:600}
.h-card .h-sub{margin:0 0 14px;font-size:12px;color:var(--text-muted)}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

.f{margin-bottom:12px;min-width:0}
.f label{
  display:block;font-size:10px;letter-spacing:.7px;line-height:1.4;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;
}
.f input,.f select,.f textarea{
  display:block;width:100%;min-width:0;max-width:100%;
  font-family:inherit;font-size:16px;color:var(--text-primary);
  background:var(--surface-1);border:.5px solid var(--border);border-radius:var(--radius);
  padding:10px 11px;outline:none;
}
/* iOS dà agli input di data una larghezza minima enorme: la annulliamo */
.f input[type=datetime-local],.f input[type=date],.f input[type=time]{
  -webkit-appearance:none;appearance:none;text-align:left;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--text-accent);background:var(--surface-2)}
.f textarea{resize:vertical;min-height:64px}

/* minmax(0,...) è ciò che impedisce alle colonne di gonfiarsi oltre la card */
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:420px){.f3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- Host: le giornate a fisarmonica ---------- */
.hchev{flex-shrink:0;font-size:17px;color:var(--text-muted);transition:transform .22s ease}
.on .hchev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.hchev{transition:none}}

.gwrap{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  margin-bottom:10px;overflow:hidden;
}
.ghead{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.ghead:active{background:var(--surface-1)}
.ghead .mini{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
.ghead .mini .n{font-size:16px;font-weight:600}
.ghead .mini .m{font-size:9px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.ghead .info{flex:1;min-width:0}
.ghead .info .t{display:block;font-size:14px;font-weight:600;line-height:1.35}
.ghead .info .s{display:block;font-size:12px;color:var(--text-muted)}
.gbody{border-top:.5px solid var(--border);padding:14px}

/* ---------- Host: le attività a fisarmonica, dentro la giornata ---------- */
.awrap{border:.5px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.ahead{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.ahead:active{background:var(--surface-1)}
.ahead .h{width:38px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.ahead .ic{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.ahead .ic i{font-size:15px}
.ahead .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abody{border-top:.5px solid var(--border);padding:12px;background:var(--surface-1)}
.abody .f input,.abody .f select{background:var(--surface-2)}
.eyeb{margin:0 0 10px;font-size:10px;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase}
.btn{
  background:var(--text-primary);color:var(--surface-2);border:0;border-radius:var(--radius);
  padding:10px 16px;font-size:14px;font-weight:500;
}
.btn:active{opacity:.85}
.btn.ghost{background:var(--surface-0);color:var(--text-primary)}
.btn.danger{background:var(--bg-danger);color:var(--text-danger)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5}
.switch{position:relative;width:44px;height:26px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;z-index:2}
.switch .tr{position:absolute;inset:0;border-radius:20px;background:var(--border-strong);transition:background .2s}
.switch .kn{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked ~ .tr{background:var(--text-success)}
.switch input:checked ~ .kn{transform:translateX(18px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-0);border-radius:20px;padding:6px 12px;font-size:13px}
.chip input{margin:0}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);z-index:90;
  background:var(--text-primary);color:var(--surface-2);font-size:13px;
  padding:10px 18px;border-radius:24px;transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.toast.show{transform:translate(-50%,0)}
.login{max-width:340px;margin:15vh auto 0}
.login h1{margin:0 0 6px;font-size:24px;font-weight:600}
.login p{margin:0 0 24px;font-size:14px;color:var(--text-secondary)}
.err{margin:10px 0 0;font-size:13px;color:var(--text-danger)}
.h-note{font-size:12px;color:var(--text-muted);margin:0 0 16px;line-height:1.6}