/* Outfit variable (400-800) — offline, descargada de Google Fonts */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:400 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+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:400 800; font-display:swap;
  src:url('fonts/outfit-latinext.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;
}

:root{
  --bg:#0a0e1a; --glass:rgba(255,255,255,.07); --glass-strong:rgba(20,28,55,.72);
  --stroke:rgba(255,255,255,.12); --shine:rgba(255,255,255,.09);
  --txt:#f2f5ff; --muted:rgba(242,245,255,.62); --faint:rgba(242,245,255,.38);
  --accent:#7dd3fc; --accent2:#c4b5fd;
  --grad-text:linear-gradient(180deg,#ffffff 10%,#bcd7ff 55%,#d9c2ff 100%);
  --grad-btn:linear-gradient(135deg,#38bdf8,#818cf8);
  --r:22px; --r-s:16px; --pad:20px; --touch:48px;
  --font:'Outfit',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.32,.9,.3,1);
  /* Springs estilo Apple: base sin rebote (deslizamientos), bounce con leve
     sobreimpulso (entradas / press). JS los reemplaza por linear() con física
     real si el navegador lo soporta; estos bezier son el fallback offline. */
  --spring:cubic-bezier(.32,.72,0,1);
  --spring-bounce:cubic-bezier(.34,1.36,.64,1);
  --spring-slide:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{height:100dvh;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--txt);font-family:var(--font);max-width:480px;margin:0 auto;padding:0 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#vista-hoy{flex:1;min-height:0;display:flex;flex-direction:column;touch-action:pan-y}
/* tira de días Lun–Vie */
/* tira de días unificada (segmented iOS): una sola barra, día visto en azul */
#day-strip{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px;margin-bottom:10px;background:var(--glass);border:1px solid var(--stroke);border-radius:18px;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 var(--shine)}
/* indicador deslizante: una sola píldora azul que viaja al día visto, nunca desaparece.
   Viaja con resorte (sin rebote: solo deslizamiento + atenuación del texto). */
#day-strip-ind{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:13px;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 14px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;pointer-events:none;transition:left .55s var(--spring-slide),width .55s var(--spring-slide),opacity .3s ease}
#day-strip-ind.on{opacity:1}
#day-strip button{position:relative;z-index:1;min-height:58px;border:1.5px solid transparent;border-radius:13px;background:transparent;color:var(--txt);cursor:pointer;font-family:var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:transform .5s var(--spring-bounce),border-color .3s ease}
#day-strip button:active{transform:scale(.9)}
#day-strip .dow{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:capitalize;transition:color .3s ease}
#day-strip .dnum{font-size:12px;font-weight:600;color:var(--faint);transition:color .3s ease}
#day-strip button.today .dow{color:var(--accent)}
/* día real en vista previa: contorno discontinuo, visible incluso sobre la píldora vista */
#day-strip button.today{border:1.5px dashed rgba(125,211,252,.8)}
#day-strip button.sel.today{border-color:rgba(255,255,255,.9)}
#day-strip button.sel.today .dow,#day-strip button.sel.today .dnum{color:#fff}
#day-strip button.sel .dow,#day-strip button.sel .dnum{color:#fff}
/* cambio de etiqueta corta→larga al previsualizar (Mié→Miércoles): pop con
   resorte, solo transform/opacity. Se dispara al recrear el nodo .dow. */
@keyframes labelpop{0%{opacity:0;transform:translateY(5px) scale(.82)}55%{opacity:1;transform:translateY(-1px) scale(1.045)}100%{opacity:1;transform:none}}
#day-strip .dow.swap{animation:labelpop .5s var(--spring-bounce) both}
#bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 60% at 50% -10%,#1b2450 0%,var(--bg) 60%)}
#bg-orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 14s ease-in-out infinite alternate}
#bg-orbs span:first-child{width:280px;height:280px;background:#3b5bff55;top:-60px;left:-60px}
#bg-orbs span:last-child{width:240px;height:240px;background:#a855f755;bottom:-40px;right:-40px;animation-delay:-7s}
@keyframes drift{to{transform:translate(24px,18px) scale(1.06)}}

.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--stroke);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 var(--shine)}
.glass-strong{background:var(--glass-strong);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--stroke);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 1px 0 var(--shine)}

/* entrada con resorte: atenuación + desplazamiento + escala con leve sobreimpulso */
@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.96)}55%{opacity:1;transform:translateY(-3px) scale(1.008)}75%{transform:translateY(1px) scale(.999)}100%{opacity:1;transform:none}}
/* las tarjetas animan por Web Animations API (resorte JS); pista de render */
.hero,.postre,.descanso{will-change:transform,opacity}
.app-header{animation:rise .65s var(--spring-bounce) both}
.hero{animation:rise .65s var(--spring-bounce) .06s both}
.descanso{animation:rise .65s var(--spring-bounce) .06s both}
#day-strip{animation:rise .65s var(--spring-bounce) .03s both}

.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* etiqueta de vista previa: encima del día, pill ámbar que acompaña al punto del badge */
.preview-tag{margin:0 0 8px;display:flex;justify-content:center}
.preview-tag span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fde68a;background:rgba(251,191,36,.13);border:1px solid rgba(251,191,36,.42);padding:6px 12px;border-radius:999px}
.preview-tag span::before{content:'';width:6px;height:6px;border-radius:50%;background:#fbbf24;flex:none}
/* menú previsualizado: desaturado para denotar que no es hoy */
.hero.is-preview,.postre.is-preview{filter:saturate(.5) brightness(.93);transition:filter .35s ease}
.hero,.postre{transition:filter .35s ease}
/* encabezado estilo iOS: título grande a la izquierda, pill de semana + ajustes a la derecha */
.app-header{display:flex;justify-content:space-between;align-items:flex-end;margin:0;padding:20px 4px 12px;z-index:10}
.header-left{min-width:0}
.app-title{font-size:22px;font-weight:500;color:rgba(235,235,245,.55);letter-spacing:-.01em;line-height:1.1}
#vista-titulo{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
#fecha-actual{font-size:14px;font-weight:500;color:var(--muted);text-transform:capitalize;letter-spacing:.01em;margin-top:3px}
#vista-titulo,#fecha-actual,.badge,.badge-dot,.badge-txt{will-change:transform,opacity}
/* nodos en vuelo direccional (clase temporal puesta por JS durante el glide) */
.fx{will-change:transform,opacity}
/* perspectiva para el giro de tambor sutil (solo plano inclinado, sin vecinos) */
.hero,.postre{perspective:900px}
.header-right{display:flex;align-items:center;gap:8px;padding-bottom:4px;flex:none}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;min-height:44px;min-width:132px;border-radius:16px;font-size:17px;font-weight:600;font-family:var(--font);font-variant-numeric:tabular-nums;background:rgba(255,255,255,.16);border:none;color:var(--txt);cursor:pointer;transition:transform .5s var(--spring-bounce),background .2s}
.badge:hover{background:rgba(255,255,255,.22)}
.badge:active{transform:scale(.92)}
/* Punto de vista previa: reserva su espacio siempre (la caja no se mueve);
   solo entra con transform/opacity: escala .2→1 + sube 4px→0 con bounce,
   y el texto acompaña con un desliz sutil a la derecha. */
.badge-dot{width:7px;height:7px;border-radius:50%;background:#fbbf24;flex:none;opacity:0;transform:translateY(4px) scale(.2);transition:transform .55s var(--spring-bounce),opacity .3s ease}
.badge.is-preview .badge-dot{opacity:1;transform:translateY(0) scale(1)}
.badge-txt{display:inline-block;transform:translateX(-5px);transition:transform .55s var(--spring-slide)}
.badge.is-preview .badge-txt{transform:translateX(0)}
.icon-btn{width:var(--touch);height:var(--touch);border-radius:50%;border:1px solid var(--stroke);background:var(--glass);color:var(--txt);display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--spring-bounce),background .2s,border-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn:active{transform:scale(.88)}
.icon-btn svg{width:22px;height:22px}
.icon-btn-sm{width:42px;height:42px;background:rgba(255,255,255,.1);border:none}
.icon-btn-sm svg{width:20px;height:20px}

/* HERO — texto estilo wallpaper iOS: blanco glossy con degradado */
.hero{padding:26px var(--pad);text-align:center;margin-bottom:10px;position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,rgba(125,211,252,.14),transparent 70%);pointer-events:none}
#hoy-plato{font-size:clamp(32px,9vw,40px);font-weight:800;line-height:1.1;margin:10px 0 12px;letter-spacing:-.02em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 12px rgba(125,211,252,.25));text-wrap:balance}
@media (max-height:700px){
  .hero{padding:18px var(--pad)}
  #hoy-plato{font-size:clamp(28px,8vw,32px)}
  #day-strip button{min-height:50px}
}
.acomp-row{display:flex;align-items:center;justify-content:center;gap:6px}
.acomp-row svg{width:14px;height:14px;opacity:.5}
#hoy-acomp{font-size:13px;font-weight:500;color:var(--faint);opacity:.6;letter-spacing:.02em}
/* postre a ancho completo */
.postre{padding:22px var(--pad);text-align:center;margin-bottom:16px}
.postre-head{display:flex;align-items:center;justify-content:center;gap:8px}
.postre-head svg{width:18px;height:18px;color:var(--accent)}
#hoy-postre{font-size:23px;font-weight:700;margin-top:8px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-h2{font-size:22px;font-weight:800;letter-spacing:-.01em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* descanso */
.descanso{padding:32px var(--pad);text-align:center}
.descanso-icon{width:64px;height:64px;margin:0 auto 8px;display:grid;place-items:center;border-radius:22px;
  background:linear-gradient(135deg,#1e293b,#334155);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--shine),0 8px 24px rgba(0,0,0,.4)}
.descanso-icon svg{width:34px;height:34px;color:#a5c4ff}
.descanso h2{font-size:28px;margin:8px 0 4px}
.descanso p{color:var(--muted);margin-bottom:16px;font-weight:500}

/* botones con icono */
.btn-primary,.btn-glass{min-height:var(--touch);width:100%;border-radius:18px;font-size:17px;font-weight:700;font-family:var(--font);cursor:pointer;border:1px solid var(--stroke);margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .5s var(--spring-bounce),filter .2s,background .2s}
.btn-primary{background:var(--grad-btn);color:#060a18;border:none;box-shadow:0 6px 24px rgba(56,189,248,.35)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-glass{background:var(--glass);color:var(--txt);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.btn-glass:hover{background:rgba(255,255,255,.11)}
.btn-primary:active,.btn-glass:active{transform:scale(.95)}
/* press estilo iOS: la caída es rápida (0.15 s) y la suelta vuelve con el
   resorte de 0.4 s definido en la base — caída ágil, retorno elástico */
.badge:active,.icon-btn:active,.btn-primary:active,.btn-glass:active,.tab:active,#week-list button:active,#semana-selector button:active,#sheet-weeks button:active,#day-strip button:active{transition-duration:.15s}
.btn-primary svg,.btn-glass svg{width:20px;height:20px}

/* bottom-sheet */
#sheet-backdrop{position:fixed;inset:0;background:rgba(3,6,18,.6);backdrop-filter:blur(4px);z-index:20;opacity:0;transition:opacity .28s}
#sheet-backdrop[hidden]{display:none}
#sheet-backdrop:not([hidden]){opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;max-width:480px;margin:0 auto;border-radius:26px 26px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .55s var(--spring-slide);max-height:82dvh;overflow:auto}
.sheet.open{transform:none}
.sheet.open #week-list li{animation:rise .55s var(--spring-bounce) both}
.sheet.open #week-list li:nth-child(2){animation-delay:.05s}
.sheet.open #week-list li:nth-child(3){animation-delay:.1s}
.sheet.open #week-list li:nth-child(4){animation-delay:.15s}
.sheet.open #week-list li:nth-child(5){animation-delay:.2s}
/* tirador del sheet: zona de arrastre con cursor claro y pan-x para no
   pelear con el scroll interno (el dedo manda en vertical) */
.grabber{position:relative;width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.3);margin:6px auto 12px;cursor:grab;touch-action:pan-x}
.grabber::after{content:'';position:absolute;inset:-12px -40px}
.grabber:active{cursor:grabbing}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;touch-action:pan-x}
#sheet-sub{color:var(--muted);font-size:14px;font-weight:500;text-align:center;margin:2px 0 10px}
#sheet-weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
#sheet-weeks button{min-height:48px;border-radius:14px;font-size:17px;font-weight:800;font-family:var(--font);border:1px solid var(--stroke);background:var(--glass);color:var(--txt);cursor:pointer;transition:transform .5s var(--spring-bounce),background .2s,border-color .2s,box-shadow .2s}
#sheet-weeks button:hover{background:rgba(255,255,255,.11)}
#sheet-weeks button:active{transform:scale(.9)}
#sheet-weeks button.sel{background:var(--grad-btn);color:#060a18;border-color:transparent;box-shadow:0 4px 18px rgba(56,189,248,.4)}
#sheet-weeks button.is-actual:not(.sel){border-color:var(--accent)}
#btn-sheet-hoy{margin-top:12px}
#week-list{list-style:none;padding:0;display:grid;gap:10px}
#week-list button{width:100%;min-height:64px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--stroke);background:var(--glass);color:var(--txt);cursor:pointer;font-size:15px;font-family:var(--font);transition:transform .5s var(--spring-bounce),background .2s,border-color .2s}
#week-list button:hover{background:rgba(255,255,255,.1)}
#week-list button:active{transform:scale(.96)}
#week-list button.hoy{border-color:var(--accent);background:linear-gradient(135deg,#38bdf822,#a78bfa22)}
#week-list button.sel{background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(167,139,250,.24))}
#week-list .dia{font-weight:700;text-transform:capitalize;display:block;letter-spacing:.01em}
#week-list .plato{color:var(--muted);font-size:14px;font-weight:500;display:block}
#week-list .postre-mini{color:var(--faint);font-size:12px;font-weight:500;display:flex;align-items:center;gap:5px;margin-top:2px}
#week-list .postre-mini svg{width:13px;height:13px}
#week-list .chev{color:var(--faint);flex:none}
#week-list .chev svg{width:20px;height:20px;display:block}

/* dialogs */
dialog{background:var(--glass-strong);color:var(--txt);border:1px solid var(--stroke);border-radius:var(--r);padding:24px 20px;width:min(92vw,420px);max-height:calc(100dvh - 32px);overflow:auto;margin:auto;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-family:var(--font)}
dialog[open]{animation:pop .45s var(--spring-bounce) both}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.92)}55%{opacity:1;transform:translateY(-2px) scale(1.015)}75%{transform:translateY(1px) scale(.998)}100%{opacity:1;transform:none}}
dialog::backdrop{background:rgba(3,6,18,.7);backdrop-filter:blur(6px)}
dialog h2{margin-bottom:14px;text-align:center}
.tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.tab{flex:1;min-height:var(--touch);border-radius:10px;border:none;background:transparent;color:var(--muted);font-weight:700;font-family:var(--font);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .22s,color .22s,transform .5s var(--spring-bounce)}
.tab svg{width:17px;height:17px}
.tab.active{background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(167,139,250,.25));color:var(--txt);box-shadow:inset 0 1px 0 var(--shine)}
.tab:active{transform:scale(.94)}
#semana-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
#semana-selector button{min-height:60px;border-radius:14px;font-size:20px;font-weight:800;font-family:var(--font);border:1px solid var(--stroke);background:var(--glass);color:var(--txt);cursor:pointer;transition:transform .5s var(--spring-bounce),background .2s,box-shadow .2s}
#semana-selector button:hover{background:rgba(255,255,255,.11)}
#semana-selector button:active{transform:scale(.9)}
#semana-selector button.sel{background:var(--grad-btn);color:#060a18;border:none;box-shadow:0 4px 18px rgba(56,189,248,.4);animation:selpop .45s var(--spring-bounce)}
@keyframes selpop{0%{transform:scale(.88)}55%{transform:scale(1.04)}75%{transform:scale(.99)}100%{transform:scale(1)}}
dialog .preview{color:var(--muted);text-align:center;margin-bottom:14px;font-size:15px;font-weight:500}
dialog .preview strong{color:var(--txt)}
dialog label{display:grid;gap:8px;font-size:15px;font-weight:600;margin-bottom:12px}
.select-wrap{position:relative}
.select-wrap::after{content:'';position:absolute;right:14px;top:50%;width:10px;height:10px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
dialog select{width:100%;min-height:52px;border-radius:14px;background:rgba(14,21,48,.9);color:var(--txt);border:1px solid var(--stroke);padding:0 38px 0 14px;font-size:16px;font-weight:600;font-family:var(--font);appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
dialog select:hover{border-color:rgba(125,211,252,.4)}
dialog select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.2)}
dialog select option{background:#0e1530}
dialog .btn-primary{margin-top:8px}

/* resultado autodetección */
#detectar-resultado{min-height:28px;display:flex;justify-content:center;margin-top:12px}
.detect-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:700;animation:pop .45s var(--spring-bounce) both}
.detect-pill svg{width:17px;height:17px;flex:none}
.detect-pill.ok{background:linear-gradient(135deg,rgba(52,211,153,.25),rgba(56,189,248,.25));border:1px solid rgba(52,211,153,.45);color:#a7f3d0}
.detect-pill.amb{background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(249,115,22,.22));border:1px solid rgba(251,191,36,.45);color:#fde68a}
.detect-pill.none{background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--muted);font-weight:600}
#btn-volver-hoy{margin-top:14px;font-size:15px;min-height:44px}
.ic{flex:none}
/* foco visible solo con teclado (con ratón no se pega): acento del proyecto */
button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ayuda de instalación iOS dentro de ajustes */
.instalar-ayuda{color:var(--muted);font-size:14px;font-weight:500;text-align:center;margin:2px 4px 0}
/* toast de actualización: fijo abajo, lenguaje glass, solo transform/opacity */
.toast-update{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;max-width:448px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--glass-strong);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--stroke);border-radius:var(--r-s);box-shadow:0 12px 40px rgba(0,0,0,.5),inset 0 1px 0 var(--shine);transform:translateY(16px);opacity:0;transition:transform .45s var(--spring-slide),opacity .3s ease}
.toast-update.on{transform:none;opacity:1}
.toast-update p{flex:1;font-size:15px;font-weight:600}
.toast-update .btn-primary{width:auto;flex:none;margin-top:0;padding:0 18px;min-height:44px;font-size:15px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}