:root{
    --bg:#0F1113;
    --surface:#181B1F;
    --surface2:#20242A;
    --surface3:#282D34;
    --border:#2B3037;
    --text:#F3F5F7;
    --text-dim:#9AA1AA;
    --text-faint:#5C636C;
    --accent:#C6FF3D;
    --accent-dim:#7A9127;
    --accent2:#4DD0E1;
    --warn:#FF6B6B;
    --warmup:#FFB020;
    --drop:#B388FF;
    --radius:16px;
    --radius-sm:10px;
    font-size:16px;
  }
  html[data-theme="light"]{
    --bg:#F3F4F6;--surface:#FFFFFF;--surface2:#EDEFF2;--surface3:#E3E6EA;--border:#D8DCE1;
    --text:#14171A;--text-dim:#5B6470;--text-faint:#98A2AD;
    --accent:#6FA30A;--accent-dim:#4C7A08;--accent2:#0E8FA0;
    --warn:#D6293B;--warmup:#B8790A;--drop:#7C4DFF;
  }
  html[data-theme="amoled"]{
    --bg:#000000;--surface:#0D0D0D;--surface2:#161616;--surface3:#1F1F1F;--border:#282828;
  }
  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:#C6FF3D;
  }
  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;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;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(15,17,19,0));padding:20px 20px 10px;display:flex;align-items:center;justify-content:space-between;}
  header.topbar .title{font-size:22px;font-weight:800;letter-spacing:-.02em;}
  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(198,255,61,.14);color:var(--accent);}
  .pill.accent2{background:rgba(77,208,225,.14);color:var(--accent2);}
  .pill.warmup{background:rgba(255,176,32,.14);color:var(--warmup);}
  .pill.drop{background:rgba(179,136,255,.14);color:var(--drop);}
  .pill.warn{background:rgba(255,107,107,.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:#10130A;}
  .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:#10130A;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(198,255,61,.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(24,27,31,.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);}
  .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:#10130A;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-size:19px;font-weight:800;}
  .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(198,255,61,.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:85vh;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;}
  .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;}
  .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:#10130A;}
  .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-size:30px;font-weight:900;letter-spacing:-.03em;margin:0 0 2px;}
  .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:#10130A;}
  .autherr{background:rgba(255,107,107,.12);color:var(--warn);border:1px solid rgba(255,107,107,.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);}}

  /* 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-size:21px;
      font-weight:900;
      letter-spacing:-.03em;
      padding:6px 14px 22px;
      color:var(--text);
    }
    .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:80vh;
    }
    .authwrap{
      max-width:460px;
      justify-content:center;
    }
  }