@font-face{font-family:'Anton';src:url(../fonts/anton-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Yellowtail';src:url(../fonts/yellowtail-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:400;src:url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:500;src:url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:700;src:url(../fonts/dm-sans-latin-700-normal.woff2) format('woff2');font-display:swap}
/* Tema claro (por defecto) y oscuro: se elige con el botón de Inicio; js/tema.js lo aplica antes de pintar. Mismo patrón que Alright Equipo. */
:root{color-scheme:light;--navh:calc(78px + env(safe-area-inset-bottom));--bg:#F7F4EE;--page:#E9E4DA;--card:#FFFFFF;--card2:#F1ECE3;--line:#E6E0D5;--line2:#DCD5C8;--tx:#1A1714;--soft:#4A453E;--mut:#6E675C;--dim:#8A8378;--red:#D62828;--coral:#C8352B;
  --borde:#D3CCBF;--chip:#ECE6DC;--rosa-bg:#FBE9E7;--rosa-l:#F2C9C4;--barra:#FFFFFF;--tachado:#B3AC9F;--inv:#1A1714;--inv-tx:#F7F4EE;--sh:247,244,238;--sombra:rgba(40,30,20,.18);--velo:rgba(20,16,12,.45);--demo-bg:#FFF1D6;--demo-tx:#8a5a00;--marco:#E6E0D5;--sw-off:#CFC8BC;--suave:#F1ECE3;
  --papel:#FFFFFF;--papel-l:#D3CCBF}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0E0E0E;--page:#000;--card:#1A1A1A;--card2:#161616;--line:#262626;--line2:#2A2A2A;--tx:#F5F1EA;--soft:#CFC8BC;--mut:#A39C90;--dim:#8A8378;--red:#D62828;--coral:#FF5A4D;
  --borde:#3A3631;--chip:#262626;--rosa-bg:#1E1212;--rosa-l:#3A1D1D;--barra:#141414;--tachado:#5C564C;--inv:#F5F1EA;--inv-tx:#0E0E0E;--sh:14,14,14;--sombra:rgba(0,0,0,.5);--velo:rgba(0,0,0,.6);--demo-bg:#3A2A06;--demo-tx:#FFB547;--marco:#222;--sw-off:#3A3631;--suave:#0E0E0E;
  --papel:#F5F1EA;--papel-l:transparent}
.tema-btn{height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line2);background:var(--card2);color:var(--tx);font-size:13px;font-weight:700;white-space:nowrap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--page);color:var(--tx);font-family:'DM Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--coral)}
h1{margin:0;font-family:'Anton',sans-serif;font-weight:400;font-size:34px;line-height:1.1;text-transform:uppercase}
p{margin:0}
#app{position:relative;max-width:480px;height:100vh;height:100dvh;margin:0 auto;background:var(--bg);overflow:hidden}
#view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(var(--navh) + 24px);scroll-behavior:auto}
#view.flush{padding:0 0 0}
#view.nonav{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
#view.cta{padding-bottom:calc(var(--navh) + 96px)}
.kick{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--coral)}
.mut{color:var(--mut)}.soft{color:var(--soft)}
.col{display:flex;flex-direction:column}.gap8{gap:8px}.gap10{gap:10px}.gap14{gap:14px}.gap16{gap:16px}
.row{display:flex;align-items:center}.sb{justify-content:space-between}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;border-radius:14px;border:none;background:var(--red);color:#fff;font-size:17px;font-weight:700;text-decoration:none;width:100%}
.btn.sec{background:transparent;border:1px solid var(--borde);color:var(--tx);height:52px;font-size:16px}
.btn.cream{background:var(--inv);color:var(--inv-tx)}
.btn.small{height:40px;border-radius:10px;background:var(--chip);color:var(--tx);font-size:14px}
.btn[disabled]{opacity:.45}
.lnk{background:none;border:none;color:var(--soft);font-size:14px;font-weight:700;text-decoration:underline;padding:8px;align-self:center}
.circ{width:44px;height:44px;border-radius:22px;border:1px solid var(--line2);background:var(--card2);color:var(--tx);display:flex;align-items:center;justify-content:center;flex:none;text-decoration:none;position:relative}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--rosa-bg);border:1px solid var(--rosa-l);font-size:13px;font-weight:700}
.dot{width:8px;height:8px;border-radius:4px;background:var(--coral)}
.sec-t{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
/* bienvenida */
.welcome{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.welcome .bg{position:absolute;inset:0;width:100%;height:62%;object-fit:cover}
.welcome .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--sh),.25) 0%,rgba(var(--sh),.1) 25%,var(--bg) 62%)}
.welcome .logo{position:absolute;top:calc(env(safe-area-inset-top) + 34px);left:50%;transform:translateX(-50%);width:170px}
.welcome .wb{position:relative;padding:20px 20px calc(env(safe-area-inset-bottom) + 22px);display:flex;flex-direction:column;gap:12px}
.welcome h1{font-size:44px;line-height:1.02}
.welcome .gift{align-self:flex-start;display:flex;align-items:center;gap:8px;background:var(--red);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700}
.made{position:absolute;right:20px;top:calc(env(safe-area-inset-top) + 40px);font-family:'Yellowtail',cursive;font-size:20px;color:var(--coral)}
/* tabs */
#tabs{position:absolute;left:0;right:0;bottom:0;height:var(--navh);padding:8px 8px calc(env(safe-area-inset-bottom) + 6px);background:var(--barra);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
#tabs[hidden]{display:none}
#tabs button{background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dim);font-size:11px;font-weight:700;padding:0}
#tabs button.on{color:var(--tx)}
#tabs button.on svg{stroke:var(--coral)}
#tabs .mid{justify-content:flex-end}
#tabs .mid span{width:52px;height:52px;margin-top:-26px;border-radius:26px;background:var(--red);border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;color:#fff}
#tabs .mid.on span{border-color:var(--tx)}
#tabs .mid.on svg{stroke:#fff}
/* inicio */
.res-img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
.passport{background:var(--red);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#fff;border:none;text-align:left;width:100%}
.passport .t{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;letter-spacing:.3px}
.sellos12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.sellos12 i{display:block;height:20px;border-radius:10px;border:1.5px solid rgba(255,255,255,.55)}
.sellos12 i.on{background:#fff;border-color:#fff}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--tx);font-size:15px;font-weight:700;text-align:left}
.mes{position:relative;height:100px;border-radius:18px;overflow:hidden;width:100%;border:none;padding:0;text-align:left;color:var(--tx)}
.mes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mes .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--sh),.92) 0%,rgba(var(--sh),.6) 55%,rgba(var(--sh),0) 100%)}
.mes .tx{position:absolute;left:16px;top:12px;bottom:12px;width:220px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.yt{font-family:'Yellowtail',cursive;font-size:22px;color:var(--coral)}
.anton22{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;line-height:1.1}
.install{display:flex;gap:12px;align-items:center;background:var(--rosa-bg);border:1px solid var(--rosa-l);border-radius:16px;padding:12px 14px}
.install p{flex:1;font-size:13px;line-height:1.4;color:var(--soft)}
.install button{height:36px;padding:0 14px;border-radius:10px;border:none;background:var(--red);color:#fff;font-weight:700}
.install .x{background:none;color:var(--mut);padding:0 6px;font-size:20px}
/* locales */
.lcard{display:flex;gap:14px;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-align:left;width:100%;color:var(--tx)}
.lcard.fav{border:1.5px solid var(--red)}
.lcard img{width:88px;height:88px;border-radius:12px;object-fit:cover;flex:none}
/* reservar */
.hero{position:relative;height:200px;margin:calc(-1 * (env(safe-area-inset-top) + 18px)) -20px 14px;padding-top:env(safe-area-inset-top)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--sh),.5) 0%,rgba(var(--sh),.1) 40%,var(--bg) 100%)}
.hero .back{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:20px;background:rgba(var(--sh),.7);border:none}
.hero .ti{position:absolute;left:20px;bottom:6px;display:flex;flex-direction:column;gap:2px}
.hero h1{font-size:30px}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px 10px 16px}
.stepper .v{font-size:18px;font-weight:700}
.rb{width:44px;height:44px;border-radius:22px;border:1px solid var(--borde);background:var(--suave);color:var(--tx);font-size:22px}
.rb.p{background:var(--red);border-color:var(--red);color:#fff}
.days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.day{height:60px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.day small{font-size:11px;font-weight:500}.day b{font-size:18px}
.day.on{background:var(--red);border-color:var(--red);color:#fff}
.hours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hour{height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:15px;font-weight:700}
.hour.on{background:var(--inv);color:var(--inv-tx);border-color:var(--tx)}
.hour[disabled]{color:var(--tachado);text-decoration:line-through}
.dash{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px dashed var(--borde);background:none;color:var(--tx);text-align:left;width:100%;font-size:14px;font-weight:700}
.dash span{flex:1}
/* confirmación */
.okc{width:84px;height:84px;border-radius:42px;background:var(--red);display:flex;align-items:center;justify-content:center;margin:6px auto 0}
.ticket{background:var(--papel);color:#0E0E0E;border:1px solid var(--papel-l);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:14px}
.ticket .l{display:flex;gap:12px;align-items:center}
.ticket img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.ticket .n{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase}
.ticket .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px dashed #BDB7AB;padding-top:12px}
.ticket .g span{display:block;font-size:11px;color:#5C564C}.ticket .g b{font-size:17px}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.45;color:var(--soft)}
/* escanear */
.scan{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 20px calc(var(--navh) + 16px)}
.scan .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.45)}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan>*:not(.bg):not(video){position:relative}
.frame{align-self:center;width:230px;height:230px;position:relative;margin:4px 0}
.frame i{position:absolute;width:44px;height:44px;border:4px solid var(--tx)}
.frame i:nth-child(1){left:0;top:0;border-right:none;border-bottom:none;border-radius:14px 0 0 0}
.frame i:nth-child(2){right:0;top:0;border-left:none;border-bottom:none;border-radius:0 14px 0 0}
.frame i:nth-child(3){left:0;bottom:0;border-right:none;border-top:none;border-radius:0 0 0 14px}
.frame i:nth-child(4){right:0;bottom:0;border-left:none;border-top:none;border-radius:0 0 14px 0}
.frame b{position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--coral);box-shadow:0 0 12px var(--coral)}
.manual{background:rgba(var(--sh),.88);border:1px solid var(--line2);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.inp{height:48px;border-radius:12px;border:1px solid var(--borde);background:var(--suave);padding:0 14px;font-size:16px;width:100%}
.inp:focus{outline:2px solid var(--coral);outline-offset:1px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soft)}
/* carta */
.chead{position:sticky;top:0;z-index:5;margin:calc(-1 * (env(safe-area-inset-top) + 18px)) -20px 0;padding:calc(env(safe-area-inset-top) + 18px) 20px 8px;background:var(--bg)}
.tabsx{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:4px 0 2px;scrollbar-width:none}
.tabsx::-webkit-scrollbar{display:none}
.tabsx button{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-size:14px;font-weight:700}
.tabsx button.on{background:var(--inv);color:var(--inv-tx);border-color:var(--tx)}
.dish{display:flex;gap:12px;padding:10px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.dish.has{border-color:var(--red)}
.dish img{width:92px;height:92px;border-radius:12px;object-fit:cover;flex:none;align-self:flex-start}
.dish .nm{font-size:16px;font-weight:700;line-height:1.2}
.dish .ds{font-size:13px;line-height:1.35;color:var(--mut)}
.tagsel{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--inv-tx);background:var(--inv);padding:3px 8px;border-radius:999px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.opt .pr{font-size:15px;font-weight:700}.opt .pr small{font-weight:500;color:var(--mut);font-size:12px;margin-right:6px}
.add{width:40px;height:40px;border-radius:20px;border:none;background:var(--red);color:#fff;font-size:22px;line-height:1}
.qty{display:flex;align-items:center;gap:4px;background:var(--suave);border-radius:20px;padding:2px}
.qty button{width:36px;height:36px;border-radius:18px;border:none;background:var(--chip);font-size:20px}
.qty button.p{background:var(--red);color:#fff}
.qty span{min-width:22px;text-align:center;font-size:16px;font-weight:700}
#cta{position:absolute;left:16px;right:16px;bottom:calc(var(--navh) + 12px);z-index:8}
#cta:empty{display:none}
.ctab{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 18px;border-radius:16px;background:var(--red);color:#fff;border:none;width:100%;box-shadow:0 10px 30px var(--sombra);font-size:16px;font-weight:700}
.ctab .n{min-width:28px;height:28px;border-radius:14px;background:#fff;color:var(--red);display:inline-flex;align-items:center;justify-content:center;font-size:14px;margin-right:10px}
/* cuenta */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--card)}
.seg button{height:40px;border-radius:10px;border:none;background:transparent;color:var(--soft);font-size:14px;font-weight:700}
.seg button.on{background:var(--inv);color:var(--inv-tx)}
.lines{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ln{width:100%;display:flex;align-items:center;gap:12px;padding:0 14px;min-height:44px;border:none;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:var(--tx)}
.ln.off{color:var(--mut)}
.ln .bx{width:22px;height:22px;border-radius:6px;border:2px solid var(--tachado);display:flex;align-items:center;justify-content:center;flex:none}
.ln.on .bx{background:var(--red);border-color:var(--red)}
.ln .nm{flex:1;font-size:15px}.ln .pr{font-size:15px;font-weight:700}
.ln.paid{opacity:.45}.ln.paid .nm{text-decoration:line-through}
.tot{display:flex;justify-content:space-between;padding:12px 14px;font-size:14px;color:var(--mut)}
.tips{display:flex;gap:6px}
.tips button{height:36px;min-width:52px;padding:0 10px;border-radius:18px;border:1px solid var(--line2);background:var(--card);font-size:13px;font-weight:700}
.tips button.on{background:var(--inv);color:var(--inv-tx);border-color:var(--tx)}
.demo{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;background:var(--demo-bg);color:var(--demo-tx);border-radius:999px;padding:4px 10px}
/* pagado */
.check{width:64px;height:64px;border-radius:32px;border:2px solid var(--borde);display:flex;align-items:center;justify-content:center;margin:0 auto}
.big{font-family:'Anton',sans-serif;font-size:56px;line-height:1}
.sello-c{background:var(--red);color:#fff;border-radius:20px;padding:16px;display:flex;gap:14px;align-items:center}
.sello-c img{width:92px;height:92px;object-fit:contain;flex:none;background:var(--tx);border-radius:46px;padding:8px}
.stars{display:flex;gap:6px;justify-content:center}
.stars button{width:44px;height:44px;border:none;background:transparent;color:var(--tachado);padding:0}
.stars button.on{color:var(--coral)}
.stars button.on svg{fill:var(--coral)}
/* premios */
.pass{background:var(--papel);color:#0E0E0E;border:1px solid var(--papel-l);border-radius:22px;padding:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.pass .m{position:absolute;right:8px;top:6px;width:96px;opacity:.95}
.pass .t{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;line-height:1.05}
.pass .k{font-size:11px;font-weight:700;letter-spacing:1.2px;color:#B3171F;text-transform:uppercase}
.mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mm{aspect-ratio:1;border-radius:50%;border:1.5px dashed #BDB7AB;color:#5C564C;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;text-transform:uppercase}
.mm.pz{border-color:#B3171F}
.mm.on{background:var(--red);border:1.5px solid var(--red);color:#fff}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;border-top:1px dashed #BDB7AB;padding-top:10px}
.meta:first-of-type{border-top:2px dashed #BDB7AB}
.meta .n{font-size:11px;font-weight:700;border-radius:999px;background:#E4E0D7;color:#3A3631;padding:3px 9px}
.meta b{flex:1}
.meta button{border:none;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:6px 12px}
.meta .st{font-size:12px;color:#5C564C;font-weight:700}
/* perfil */
.avatar{width:64px;height:64px;border-radius:32px;background:var(--red);display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:24px;flex:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.stats b{display:block;font-family:'Anton',sans-serif;font-size:24px;font-weight:400}
.stats span{font-size:12px;color:var(--mut)}
.list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.li{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:48px;border:none;border-bottom:1px solid var(--line);background:transparent;width:100%;text-align:left;font-size:15px;color:var(--tx)}
.li:last-child{border-bottom:none}
.li span:first-child{flex:1}.li .v{color:var(--mut);font-size:14px}
.sw{width:48px;height:28px;border-radius:14px;background:var(--sw-off);position:relative;flex:none;transition:.15s}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;background:#fff;transition:.15s}
.li[aria-checked=true] .sw{background:var(--red)}
.li[aria-checked=true] .sw i{left:23px}
/* sheet / toast */
#sheet{position:absolute;inset:0;z-index:30;display:none}
#sheet.open{display:block}
#sheet .bk{position:absolute;inset:0;background:var(--velo)}
#sheet .pn{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow-y:auto;background:var(--barra);border-radius:22px 22px 0 0;border-top:1px solid var(--line2);padding:18px 20px calc(env(safe-area-inset-bottom) + 22px);display:flex;flex-direction:column;gap:12px}
#sheet h2{margin:0;font-family:'Anton',sans-serif;font-weight:400;font-size:26px;text-transform:uppercase}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--soft)}
.chk input{width:22px;height:22px;accent-color:var(--red);flex:none;margin:0}
.err{font-size:13px;color:var(--coral);min-height:0}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--borde);border-top-color:var(--coral);animation:sp 0.8s linear infinite;margin:10px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.pm{display:flex;align-items:center;gap:12px;height:54px;border-radius:14px;border:1px solid var(--borde);background:var(--suave);font-size:16px;font-weight:700;padding:0 16px;width:100%;text-align:left}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 16px);transform:translate(-50%,-20px);background:var(--inv);color:var(--inv-tx);font-size:14px;font-weight:700;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:40;max-width:88%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:520px){#app{border-left:1px solid var(--marco);border-right:1px solid var(--marco)}}