@font-face{
    font-family:'Archivo';
    font-style:normal;
    font-weight:400 900;
    font-display:swap;
    src:url('../fonts/archivo-variable.woff2') format('woff2');
  }
  @font-face{
    font-family:'Big Shoulders';
    font-style:normal;
    font-weight:900;
    font-display:swap;
    src:url('../fonts/bigshoulders-900.woff2') format('woff2');
  }
  :root{
    /* Hierro cálido y tiza, no el negro-azulado + verde neón de siempre. El
       dorado no es un color más de la paleta: solo se usa en récords
       personales, en ningún otro sitio, para que cuando aparezca signifique
       algo. */
    --bg:#16140F;
    --surface:#211E17;
    --surface2:#2C2820;
    --surface3:#3A342A;
    --border:#433D30;
    --text:#EDE6D6;
    --text-dim:#A79C87;
    --text-faint:#6B6252;
    --accent:#9FB83A;
    --accent-dim:#6B7F28;
    --accent2:#4E8FA6;
    --warn:#D9483A;
    --warmup:#C98A2E;
    --drop:#9C7FC9;
    --gold:#D4A72C;
    --on-accent:#171507;
    --radius:16px;
    --radius-sm:10px;
    --font-body:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-display:'Big Shoulders',var(--font-body);
    font-size:16px;
  }
  html[data-theme="light"]{
    --bg:#F7F3EA;--surface:#FFFFFF;--surface2:#F0EAE0;--surface3:#E5DDCE;--border:#D8CFBC;
    --text:#1D1A12;--text-dim:#645A46;--text-faint:#9C9078;
    --accent:#6B8F1F;--accent-dim:#4C6A15;--accent2:#2E6E80;
    --warn:#B8402F;--warmup:#9C6A1E;--drop:#7A5FA8;--gold:#A6791E;
    --on-accent:#FBFAF6;
  }
  html[data-theme="amoled"]{
    --bg:#000000;--surface:#0C0B08;--surface2:#161410;--surface3:#201D16;--border:#2A2620;
  }
  html[data-theme="ocean"]{
    --bg:#0A1420;--surface:#102436;--surface2:#163247;--surface3:#1D4059;--border:#255068;
    --text:#EAF2FB;--text-dim:#9FB8CE;--text-faint:#5E7C93;
    --accent:#4DD0E1;--accent-dim:#2E8B9B;--accent2:#9FB83A;--gold:#D4A72C;
    --on-accent:#08131A;
  }
  html[data-theme="sepia"]{
    --bg:#F4ECE1;--surface:#FFFBF3;--surface2:#EFE3D2;--surface3:#E6D6BE;--border:#D9C6A8;
    --text:#2B2118;--text-dim:#6B5A45;--text-faint:#A08F73;
    --accent:#C97B3D;--accent-dim:#8A5426;--accent2:#3F8F7C;
    --warn:#C0392B;--warmup:#B8790A;--drop:#8B5FBF;--gold:#B8860B;
    --on-accent:#2B1E0F;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);transition:background-color .2s ease,color .2s ease;}
  body{-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
  #shell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--bg);box-shadow:0 0 60px rgba(0,0,0,.5);}
  header.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 70%,rgba(22,20,15,0));padding:20px 20px 10px;display:flex;align-items:center;justify-content:space-between;}
  header.topbar .title{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:-.01em;line-height:1;text-transform:uppercase;}
  header.topbar .sub{font-size:13px;color:var(--text-dim);margin-top:2px;font-weight:500;}
  header.topbar .back{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text);font-size:18px;cursor:pointer;border:1px solid var(--border);}
  main{flex:1;padding:0 16px 110px;overflow-x:hidden;}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
  .card-title{font-size:15px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;}
  .muted{color:var(--text-dim);}
  .faint{color:var(--text-faint);}
  .pill{display:inline-flex;align-items:center;gap:4px;background:var(--surface3);color:var(--text-dim);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
  .pill.accent{background:rgba(159,184,58,.14);color:var(--accent);}
  .pill.accent2{background:rgba(78,143,166,.14);color:var(--accent2);}
  .pill.warmup{background:rgba(201,138,46,.14);color:var(--warmup);}
  .pill.drop{background:rgba(156,127,201,.14);color:var(--drop);}
  .pill.warn{background:rgba(217,72,58,.14);color:var(--warn);}
  .btn{border:none;border-radius:var(--radius-sm);padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
  .btn-primary{background:var(--accent);color:var(--on-accent);}
  .btn-primary:active{opacity:.85;}
  .btn-primary:disabled{opacity:.5;}
  .btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
  .btn-block{width:100%;}
  .btn-sm{padding:8px 12px;font-size:13px;}
  .btn-icon{width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:16px;padding:0;cursor:pointer;}
  .btn-icon.danger{color:var(--warn);}
  .fab{position:fixed;bottom:96px;right:calc(50% - 240px + 20px);width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(159,184,58,.35);border:none;cursor:pointer;z-index:30;}
  @media (max-width:520px){.fab{right:20px;}}
  nav.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:25;background:rgba(33,30,23,.92);backdrop-filter:blur(14px);border-top:1px solid var(--border);}
  nav.tabbar .inner{max-width:480px;margin:0 auto;display:flex;padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
  nav.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:var(--text-faint);font-size:10.5px;font-weight:700;cursor:pointer;border:none;background:none;letter-spacing:.01em;}
  nav.tabbar .tab.active{color:var(--accent);}
  nav.tabbar .tab .ic{font-size:19px;line-height:1;}
  .exrow{border:1px solid var(--border);background:var(--surface2);border-radius:var(--radius);padding:14px;margin-bottom:12px;}
  .exrow .exhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
  .exrow .exname{font-weight:700;font-size:15.5px;}
  .exrow .excat{font-size:11.5px;color:var(--text-dim);margin-top:1px;}
  .setline{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border);}
  .setline:first-of-type{border-top:none;}
  .setline .idx{width:20px;color:var(--text-faint);font-size:12px;font-weight:700;}
  .setline .val{font-size:14.5px;font-weight:600;flex:1;}
  .setline .val b{font-weight:800;}
  .setline .rpe{font-size:12px;color:var(--text-dim);}
  .setline .del{background:none;border:none;color:var(--text-faint);font-size:18px;cursor:pointer;padding:4px 8px;}
  .setline .del:active{color:var(--warn);}
  .setline .edit{background:none;border:none;color:var(--text-faint);font-size:15px;cursor:pointer;padding:4px 6px;}
  .setline .edit:active{color:var(--accent);}
  .setline-edit{align-items:flex-start;}
  .setline-edit .editset{flex:1;}
  .addset{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-top:10px;align-items:end;}
  .addset .field{display:flex;flex-direction:column;gap:4px;}
  .addset label{font-size:10.5px;color:var(--text-faint);font-weight:700;text-transform:uppercase;}
  .addset input, select.styled{background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 8px;font-size:14px;width:100%;font-weight:600;}
  .addset input:focus, select.styled:focus{outline:none;border-color:var(--accent);}
  .typerow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
  .typechip{padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--border);background:var(--surface3);color:var(--text-dim);cursor:pointer;}
  .typechip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .notes-toggle{font-size:12.5px;color:var(--text-dim);margin-top:10px;cursor:pointer;display:inline-block;}
  textarea.notes{width:100%;background:var(--surface3);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px;font-size:13.5px;margin-top:8px;resize:vertical;min-height:52px;font-family:inherit;}
  .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .statgrid.cols-2{grid-template-columns:repeat(2,1fr);}
  .habitdots{display:flex;gap:4px;margin-top:6px;}
  .habitdots .d{display:flex;flex-direction:column;align-items:center;gap:3px;width:8px;}
  .habitdots .dot{width:8px;height:8px;border-radius:50%;}
  .habitdots .lbl{font-size:8px;color:var(--text-faint);font-weight:700;}
  .stat{background:var(--surface2);border-radius:var(--radius-sm);padding:12px 10px;text-align:center;}
  .stat .n{font-family:var(--font-display);font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;}
  .stat .l{font-size:10.5px;color:var(--text-dim);margin-top:2px;text-transform:uppercase;font-weight:700;letter-spacing:.02em;}
  .weekstrip{display:flex;gap:6px;justify-content:space-between;}
  .daychip{flex:1;text-align:center;padding:10px 2px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);}
  .daychip.trained{background:rgba(159,184,58,.13);border-color:var(--accent-dim);}
  .daychip.today{outline:2px solid var(--accent);}
  .daychip .d{font-size:10px;color:var(--text-faint);font-weight:700;text-transform:uppercase;}
  .daychip .n{font-size:14px;font-weight:800;margin-top:3px;}
  .daychip .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin:5px auto 0;visibility:hidden;}
  .daychip.trained .dot{visibility:visible;}
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:flex-end;justify-content:center;}
  .modal{background:var(--surface);width:100%;max-width:480px;border-radius:20px 20px 0 0;max-height:85%;display:flex;flex-direction:column;border:1px solid var(--border);border-bottom:none;}
  .modal .mhead{padding:16px 18px 8px;display:flex;justify-content:space-between;align-items:center;}
  .modal .mhead h3{margin:0;font-size:17px;}
  .modal .mbody{padding:0 18px 18px;overflow-y:auto;flex:1 1 auto;min-height:0;}
  .search{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 14px;font-size:14.5px;margin-bottom:12px;}
  .catgroup{margin-bottom:14px;}
  .catgroup h4{font-size:11.5px;text-transform:uppercase;color:var(--text-faint);letter-spacing:.04em;margin:0 0 8px;}
  .exoption{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--border);cursor:pointer;}
  .exoption:last-child{border-bottom:none;}
  .exoption .nm{font-weight:600;font-size:14.5px;}
  .exoption .cust{font-size:10px;color:var(--accent);font-weight:700;}
  .exoption.selected{background:var(--surface2);}
  .exoption.selected .nm:first-child{color:var(--accent);}
  .exoption.selected .nm:last-child{color:var(--accent);font-weight:800;}
  .themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;}
  .themeopt{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 6px;cursor:pointer;color:var(--text-dim);font-size:11.5px;font-weight:700;}
  .themeopt.on{border-color:var(--accent);color:var(--text);background:var(--surface3);}
  .themeswatch{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);overflow:hidden;}
  .themeswatch i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(0,0,0,.2);}
  .formfield{margin-bottom:12px;}
  .formfield label{display:block;font-size:12px;color:var(--text-dim);font-weight:700;margin-bottom:6px;}
  .formfield input, .formfield select{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:11px;border-radius:10px;font-size:14.5px;}
  .timerbar{position:fixed;left:0;right:0;bottom:78px;z-index:40;display:flex;justify-content:center;pointer-events:none;}
  .timerbox{pointer-events:auto;background:var(--surface3);border:1px solid var(--accent-dim);border-radius:999px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 20px rgba(0,0,0,.4);}
  .timerbox .tt{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;color:var(--accent);}
  .timerbox button{border:none;background:var(--surface2);color:var(--text);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;}
  .empty{text-align:center;padding:40px 20px;color:var(--text-dim);}
  .empty .ic{font-size:34px;margin-bottom:8px;}
  svg.chart{width:100%;display:block;}
  .exlink{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--border);}
  .exlink:first-child{border-top:none;}
  .barwrap{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:8px;}
  .bar{flex:1;background:var(--surface3);border-radius:4px 4px 0 0;position:relative;min-height:2px;}
  .bar.on{background:var(--accent);}
  .segrow{display:flex;background:var(--surface2);border-radius:10px;padding:3px;gap:3px;margin-bottom:14px;}
  .seg{flex:1;text-align:center;padding:8px 4px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--text-dim);cursor:pointer;}
  .seg.on{background:var(--accent);color:var(--on-accent);}
  .rowline{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border);}
  .rowline:first-child{border-top:none;}
  .toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--surface3);color:var(--text);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;z-index:60;border:1px solid var(--border);max-width:80%;text-align:center;}
  .authwrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:420px;margin:0 auto;}
  .authwrap .brand{font-family:var(--font-display);font-size:44px;font-weight:900;letter-spacing:-.01em;margin:0 0 2px;line-height:1;text-transform:uppercase;color:var(--accent);}
  .authtabs{display:flex;background:var(--surface2);border-radius:10px;padding:3px;margin:22px 0 18px;}
  .authtabs .t{flex:1;text-align:center;padding:9px;border-radius:8px;font-weight:700;font-size:13.5px;color:var(--text-dim);cursor:pointer;}
  .authtabs .t.on{background:var(--accent);color:var(--on-accent);}
  .autherr{background:rgba(217,72,58,.12);color:var(--warn);border:1px solid rgba(217,72,58,.3);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;}
  .loadingscreen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-dim);font-size:14px;}
  .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface3);border-top-color:var(--accent);animation:spin 0.8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- Motion ----------
     El lenguaje de movimiento sigue la misma idea que el resto del diseño:
     hierro y disciplina, no rebote de app de consumo. #content se reconstruye
     entero en cada cambio de estado (no hay parcheo del DOM), así que la
     entrada de contenido es deliberadamente corta y discreta: se nota sin
     cansar aunque se repita en cada toque. El único momento con permiso para
     lucirse es el PR (ver .toast.pr): el dorado ya estaba reservado a
     récords, así que cuando aparece ahora también se mueve distinto. */

  /* Transición nativa (View Transitions API) para el swap de #content: mismo
     timing que antes (.22s ease-out, sube 5px), pero sin el truco manual de
     quitar/poner clase + forzar reflow. Solo anima #content (view-transition-
     name propio); el resto de la página (topbar, tabbar) se sustituye al
     instante, sin crossfade, para que no "parpadee" en cada render(). Si el
     navegador no soporta la API (fallback en shell.js), la clase .pane-in de
     abajo sigue disponible como red de seguridad.
     Ver: MDN "Using the View Transitions API". */
  #content{view-transition-name:content;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
  ::view-transition-old(content){animation:content-view-out .12s ease-out both;}
  ::view-transition-new(content){animation:content-view-in .22s ease-out both;}
  @keyframes content-view-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
  @keyframes content-view-out{from{opacity:1;}to{opacity:0;}}

  /* Fallback manual para navegadores sin View Transitions API. */
  #content.pane-in{animation:pane-in .22s ease-out both;}
  @keyframes pane-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}

  /* Disco de plate: se asienta con un pequeño rebote metálico, como si
     acabara de caer en la barra. Aparece en la racha (Semana) y en cada
     récord personal (Progreso), así que se mantiene sutil a propósito. */
  .platering{animation:plate-in .45s cubic-bezier(.22,1.12,.36,1) both;}
  @keyframes plate-in{from{opacity:0;transform:scale(.72) rotate(-14deg);}to{opacity:1;transform:scale(1) rotate(0deg);}}

  /* Feedback táctil consistente en todo lo que se toca: un pequeño hundido,
     no un rebote. */
  .exoption,.typechip,.themeopt,[data-habit],.daychip,[data-planday],[data-day]{transition:transform .12s ease;}
  .exoption:active,.typechip:active,.themeopt:active,[data-habit]:active,.daychip:active,[data-planday]:active,[data-day]:active{transform:scale(.96);}
  nav.tabbar .tab{transition:transform .12s ease,color .15s ease;}
  nav.tabbar .tab:active{transform:scale(.96);}

  /* El FAB respira suavemente cuando el día está vacío, invitando a tocarlo;
     se apaga en cuanto hay algo registrado. */
  .fab.invite{animation:fab-pulse 2.4s ease-in-out infinite;}
  @keyframes fab-pulse{
    0%,100%{box-shadow:0 8px 24px rgba(159,184,58,.35),0 3px 0 rgba(0,0,0,.3);}
    50%{box-shadow:0 8px 24px rgba(159,184,58,.6),0 3px 0 rgba(0,0,0,.3),0 0 0 9px rgba(159,184,58,.14);}
  }

  /* Toast: entra con un pequeño golpe seco (no un deslizamiento suave), a
     juego con los botones "con peso" de arriba. */
  .toast{animation:toast-in .26s cubic-bezier(.22,1.4,.36,1) both;}
  @keyframes toast-in{from{opacity:0;transform:translate(-50%,10px) scale(.94);}to{opacity:1;transform:translate(-50%,0) scale(1);}}

  /* PR: el único momento dorado con permiso para lucirse. Un aro de choque
     y unas motas de tiza que salen disparadas del centro, como cuando te
     das una palmada de tiza antes de un intento máximo. */
  .toast.pr{
    border-color:var(--gold);
    background:color-mix(in srgb, var(--gold) 15%, var(--surface3));
    animation:toast-in .3s cubic-bezier(.22,1.5,.36,1) both, pr-ring .9s ease-out .04s both;
  }
  @keyframes pr-ring{
    0%{box-shadow:0 0 0 0 rgba(212,167,44,.55);}
    100%{box-shadow:0 0 0 20px rgba(212,167,44,0);}
  }
  .toast .speck{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--gold);opacity:0;animation:speck-burst .7s ease-out .05s both;}
  @keyframes speck-burst{
    0%{opacity:.9;transform:translate(0,0) scale(1);}
    100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3);}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    .spinner{animation-duration:.8s !important;animation-iteration-count:infinite !important;}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
  }

  /* Botones con algo de peso: un canto inferior, como si costara empujarlos,
     no una tarjeta plana de SaaS. */
  .btn-primary{box-shadow:0 3px 0 rgba(0,0,0,.28);}
  .btn-primary:active{box-shadow:0 1px 0 rgba(0,0,0,.28);transform:translateY(2px);}
  .fab{box-shadow:0 8px 24px rgba(159,184,58,.35),0 3px 0 rgba(0,0,0,.3);}
  .fab:active{transform:translateY(2px);box-shadow:0 4px 14px rgba(159,184,58,.3),0 1px 0 rgba(0,0,0,.3);}

  /* ---------- Anillo de disco: la firma visual de la app ----------
     Los números que de verdad importan (racha, récords) van enmarcados
     como si fueran el peso estampado en el canto de un disco de pesas.
     --ring-color decide el metal: verde para la racha, dorado para un
     récord. El dorado no se usa en ningún otro sitio de la app. */
  .platering{
    --ring-color:var(--accent);
    width:88px;height:88px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    background:
      radial-gradient(circle at 32% 26%, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),
      conic-gradient(from 220deg, color-mix(in srgb, var(--ring-color) 40%, var(--surface3)), var(--border), color-mix(in srgb, var(--ring-color) 40%, var(--surface3)));
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.35),
      inset 0 2px 5px rgba(255,255,255,.08),
      0 6px 16px rgba(0,0,0,.35);
  }
  .platering::before{
    content:'';position:absolute;inset:10px;border-radius:50%;
    background:var(--surface);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
  }
  .platering-gold{--ring-color:var(--gold);}
  .platering-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1;}
  .platering-n{font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--ring-color);font-variant-numeric:tabular-nums;}
  .platering-label{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-weight:700;margin-top:2px;}
  .platering-fire{font-size:15px;margin-bottom:-3px;}
  .platering-sm{width:52px;height:52px;}
  .platering-sm::before{inset:6px;}
  .platering-sm .platering-n{font-size:15px;}
  .platering-sm .platering-label{font-size:6.5px;margin-top:0;}

  .pr-row{display:flex;align-items:center;gap:12px;}
  .pr-info{flex:1;display:flex;flex-direction:column;min-width:0;}
  .pr-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pr-meta{text-align:right;font-size:13px;white-space:nowrap;}

  /* El wrapper es transparente en móvil: header/main/fab se comportan
     como hijos directos del flex-column de #shell, igual que antes. */
  .mainpane{display:contents;}
  .sidebrand{display:none;}

  /* ---------- Escritorio: barra lateral fija + columna de contenido centrada ---------- */
  @media (min-width:900px){
    body{background:var(--bg);}
    #shell{
      max-width:none;
      width:100%;
      margin:0;
      flex-direction:row;
      align-items:stretch;
      box-shadow:none;
    }
    .mainpane{
      display:flex;
      flex-direction:column;
      flex:1;
      min-width:0;
    }
    header.topbar{
      width:100%;
      max-width:920px;
      margin:0 auto;
      padding:32px 32px 14px;
    }
    main{
      max-width:920px;
      width:100%;
      margin:0 auto;
      padding:0 32px 60px;
    }
    nav.tabbar{
      position:sticky;
      top:0;
      left:auto;right:auto;bottom:auto;
      order:-1;
      flex:0 0 230px;
      width:230px;
      height:100vh;
      background:var(--surface);
      border-top:none;
      border-right:1px solid var(--border);
      backdrop-filter:none;
    }
    nav.tabbar .inner{
      max-width:none;
      width:100%;
      height:100%;
      flex-direction:column;
      align-items:stretch;
      padding:20px 14px calc(20px + env(safe-area-inset-bottom));
      gap:4px;
    }
    nav.tabbar .tab{
      flex:0 0 auto;
      flex-direction:row;
      justify-content:flex-start;
      gap:12px;
      padding:12px 14px;
      border-radius:10px;
      font-size:14px;
    }
    nav.tabbar .tab.active{background:var(--surface2);}
    nav.tabbar .tab .ic{font-size:19px;}
    .sidebrand{
      display:flex;
      align-items:center;
      gap:10px;
      font-family:var(--font-display);
      font-size:26px;
      font-weight:900;
      letter-spacing:-.01em;
      text-transform:uppercase;
      padding:6px 14px 22px;
      color:var(--accent);
    }
    .sidebrand img{width:30px;height:30px;border-radius:8px;flex-shrink:0;}
    .fab{
      right:40px;
      bottom:40px;
      left:auto;
    }
    .timerbar{
      left:230px;
      bottom:24px;
    }
    .modal-bg{align-items:center;}
    .modal{
      max-width:560px;
      border-radius:20px;
      border-bottom:1px solid var(--border);
      max-height:80%;
    }
    .authwrap{
      max-width:460px;
      justify-content:center;
    }
  }