/* ============================================================
   app.css — extracted from index.html
   Block order below is the ORIGINAL document order and is
   load-bearing: later blocks override earlier ones.
   ============================================================ */

/* ===== [1/13] (unnamed block 1) ===== */
:root{
    --bg:#10241b; --panel:#1b3d2d; --panel-2:#17301f; --border:#4f8a6d; --text:#f5fbf8; --text-dim:#d6e6dd;
    --primary:#4dedaa; --primary-dim:rgba(77,237,170,.16); --primary-ink:#04140c;
    --green:#4ade80; --green-bg:rgba(74,222,128,.13);
    --amber:#fbbf24; --amber-bg:rgba(251,191,36,.13);
    --red:#f87171; --red-bg:rgba(248,113,113,.13);
    --radius:14px;
    --surface-1:#132a20; --surface-2:#102319; --track:#1c3a2b; --muted-accent:#6f9781;
    --panel-translucent:rgba(10,28,20,.88); --overlay-strong:rgba(10,28,20,.96);
    --placeholder:#7fa08d; --shadow:rgba(0,0,0,.28);
    --chart-grid:rgba(132,176,155,.24); --chart-dose-line:rgba(214,230,221,.45);
  }

  /* ---------- Light theme ---------- */
  [data-theme="light"]{
    --bg:#f3f8f5; --panel:#ffffff; --panel-2:#eef5f1; --border:#d7e5dd; --text:#122019; --text-dim:#5c7669;
    --primary:#0f9d6e; --primary-dim:rgba(15,157,110,.12); --primary-ink:#ffffff;
    --green:#158a5c; --green-bg:rgba(21,138,92,.12);
    --amber:#a5690a; --amber-bg:rgba(217,141,15,.14);
    --red:#c0392b; --red-bg:rgba(192,57,43,.12);
    --surface-1:#f0f5f2; --surface-2:#e8f0ea; --track:#e2ece6; --muted-accent:#9fb6a9;
    --panel-translucent:rgba(255,255,255,.86); --overlay-strong:rgba(255,255,255,.97);
    --placeholder:#8aa79a; --shadow:rgba(20,45,35,.12);
    --chart-grid:rgba(15,157,110,.14); --chart-dose-line:rgba(20,45,35,.28);
  }
  [data-theme="light"] body{background:radial-gradient(circle at 75% -10%,rgba(15,157,110,.06),transparent 34%),var(--bg);}
  [data-theme="light"] select{color-scheme:light;}
  [data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{filter:none;}
  [data-theme="light"] .modal-card{box-shadow:0 24px 60px var(--shadow);}
  [data-theme="light"] .more-menu{box-shadow:0 16px 32px var(--shadow);}
  *{box-sizing:border-box;}
  html{overflow-x:clip;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:clip;}
  header{background:var(--panel);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:50;}
  header .brand-mark{font-size:19px;margin:0;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:9px;color:var(--text);}
  header .brand-mark .logo-icon{color:var(--primary);display:inline-flex;}
  nav{display:flex;gap:4px;flex-wrap:wrap;}
  nav button{border:none;background:transparent;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-dim);}
  nav button.active{background:var(--primary-dim);color:var(--primary);}
  main{max-width:1180px;margin:0 auto;padding:22px 20px 60px;}
  .tab{display:none;}
  .tab.active{display:block;}
  .subtab{display:none;}
  .subtab.active{display:block;}
  .subnav{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:4px;margin-bottom:18px;gap:2px;flex-wrap:wrap;position:sticky;top:var(--subnav-top,64px);z-index:8;-webkit-transform:translateZ(0);transform:translateZ(0);}
  .subnav button{flex:1;min-width:110px;border:0;background:transparent;color:var(--text-dim);border-radius:6px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap;}
  .subnav button.active{background:var(--primary-dim);color:var(--primary);}
  .grid{display:grid;gap:16px;}
  .stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
  .stat-card .label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:600;margin-bottom:6px;}
  .stat-card .value{font-size:26px;font-weight:700;}
  .section-title{font-size:15px;font-weight:700;margin:26px 0 10px;display:flex;align-items:center;justify-content:space-between;}
  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  th{text-align:left;color:var(--text-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--border);}
  td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;}
  .pill.ok{background:var(--green-bg);color:var(--green);}
  .pill.warn{background:var(--amber-bg);color:var(--amber);}
  .pill.bad{background:var(--red-bg);color:var(--red);}
  .pill.due{background:var(--primary-dim);color:var(--primary);}
  .pill.within{background:rgba(94,216,255,.16);color:#08718c;}
  .pill.average{background:rgba(183,148,246,.18);color:#7048a9;}
  .pill.unknown{background:rgba(148,163,184,.18);color:var(--text-dim);}
  .progress{background:var(--track);border-radius:6px;height:8px;width:100%;overflow:hidden;}
  .progress > div{background:var(--primary);height:100%;}
  .btn{background:var(--primary);color:var(--primary-ink);border:none;padding:9px 16px;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;}
  .btn.secondary{background:var(--primary-dim);color:var(--primary);}
  .btn.danger{background:var(--red-bg);color:var(--red);}
  .btn.small{padding:5px 10px;font-size:12px;}
  .btn:disabled{opacity:.5;cursor:not-allowed;}
  input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;}
  form .field{margin-bottom:12px;}
  form label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:4px;}
  input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface-1);color:var(--text);font-family:inherit;}
  input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface-1) inset;box-shadow:0 0 0 1000px var(--surface-1) inset;caret-color:var(--text);transition:background-color 5000s ease-in-out 0s;}
  input:autofill{color:var(--text);background:var(--surface-1);}
  td input[type=text],td input[type=number],td input[type=date],td select{padding:5px 8px;font-size:13px;border-radius:6px;}
  textarea{resize:vertical;}
  input::placeholder,textarea::placeholder{color:var(--placeholder);}
  input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);}
  select{color-scheme:dark;}
  .row{display:grid;gap:12px;}
  .row>*{min-width:0;}
  .row.cols-2{grid-template-columns:1fr 1fr;}
  .row.cols-3{grid-template-columns:1fr 1fr 1fr;}
  .row.cols-4{grid-template-columns:1fr 1fr 1fr 1fr;}
  @media(max-width:700px){.row.cols-2,.row.cols-3,.row.cols-4{grid-template-columns:1fr;}}
  .muted{color:var(--text-dim);font-size:13px;}
  .empty{padding:24px;text-align:center;color:var(--text-dim);font-size:13.5px;}
  .split{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;}
  .split>div{min-width:0;}
  /* Mixed Vials needs two date columns plus status/qty in the narrower side of the split, so it
     gets the larger share here; it also drops into stacked cards sooner than other tables so it
     never has to horizontally scroll inside that squeeze zone. */
  @media(min-width:901px){#tab-inventory .split{grid-template-columns:.85fr 1.15fr;}}
  @media(max-width:1060px){
    #table-mixed,#table-mixed tbody,#table-mixed tfoot,#table-mixed tr,#table-mixed td{display:block;width:100%;min-width:0;}
    #table-mixed thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
    #table-mixed tr{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
    #table-mixed tr:last-child{margin-bottom:0;}
    #table-mixed td{border-bottom:1px solid rgba(255,255,255,.06);padding:8px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;}
    #table-mixed td:last-child{border-bottom:none;}
    #table-mixed td:before{content:attr(data-label);color:var(--text-dim);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;text-align:left;flex:0 0 auto;padding-top:2px;}
    #table-mixed td.cell-actions{flex-direction:column;align-items:stretch;text-align:left;}
    #table-mixed td.cell-actions:before{margin-bottom:8px;}
    #table-mixed td input[type="text"],#table-mixed td input[type="date"],#table-mixed td input[type="number"]{width:100%;}
  }
  .split>*{min-width:0;}
  @media(max-width:900px){.split{grid-template-columns:1fr;}}
  .calc-box{background:var(--primary-dim);border-radius:10px;padding:14px 16px;margin-top:6px;}
  .calc-box .calc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px;}
  .calc-box .calc-row b{font-weight:700;}
  .calc-box .calc-blend-label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);font-weight:700;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
  /* Reusable syringe draw visual — a horizontal barrel with tick marks and a filled section up
     to the computed draw amount, plus a readout above and a legend below. Shared by the in-app
     calculator and the standalone calculator pages. */
  .syringe-visual{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:14px;}
  .syringe-readout{background:var(--panel-2);border-radius:10px;padding:14px;text-align:center;margin-bottom:22px;}
  .syringe-readout-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;}
  .syringe-readout-value{font-size:26px;font-weight:800;margin-top:4px;color:var(--text);}
  .syringe-readout-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
  .syringe-diagram{position:relative;padding-top:22px;padding-bottom:22px;margin:0 16px;}
  .syringe-marker{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--red);white-space:nowrap;text-align:center;line-height:1.3;}
  .syringe-marker:after{content:"";display:block;margin:2px auto 0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--red);}
  .syringe-barrel{display:flex;align-items:stretch;}
  .syringe-plunger{width:14px;background:var(--surface-2);border:1px solid var(--border);border-right:none;border-radius:4px 0 0 4px;flex:none;}
  .syringe-track{position:relative;flex:1;height:34px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;}
  .syringe-fill{position:absolute;left:0;top:0;bottom:0;background:var(--red);opacity:.82;transition:width .15s ease;}
  .syringe-needle{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:16px solid var(--surface-2);flex:none;align-self:center;filter:drop-shadow(1px 0 0 var(--border));}
  .syringe-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--border);}
  .syringe-tick-label{position:absolute;bottom:-17px;transform:translateX(-50%);font-size:9px;color:var(--text-dim);}
  .syringe-legend{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;font-size:11px;color:var(--text-dim);flex-wrap:wrap;text-align:center;}
  .syringe-legend .syringe-dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;margin-right:5px;vertical-align:middle;}
  .syringe-overcap{margin-top:10px;font-size:12px;color:var(--red);text-align:center;}
  @media(max-width:480px){.syringe-diagram{margin:0 6px;}.syringe-readout-value{font-size:22px;}}
  /* Dashboard "Active Vials" cards — a small vial icon with a liquid fill level, one per
     active cycle, linking through to Inventory. */
  .active-vials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:6px;}
  .vial-card{display:flex;align-items:center;gap:14px;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;}
  .vial-card:hover{border-color:var(--primary);}
  .vial-card-icon{flex:none;}
  .vial-card-body{flex:1;min-width:0;}
  .vial-card-head{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;margin-bottom:6px;}
  .vial-card-head .vial-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  .vial-fill-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:5px;}
  .vial-fill-bar-inner{height:100%;background:var(--red);border-radius:999px;}
  .vial-fill-text{font-size:12px;color:var(--text-dim);}
  .vial-fill-text b{color:var(--text);}
  .vial-fill-sub{font-size:11px;color:var(--text-dim);margin-top:3px;}
  .vial-fill-sub.warn{color:var(--amber);}
  .mode-toggle{display:flex;gap:8px;margin-top:2px;}
  .mode-btn{flex:1;background:var(--surface-1);border:1px solid var(--border);border-radius:8px;padding:10px 10px;color:var(--text-dim);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s ease;text-align:center;}
  .mode-btn:hover{border-color:var(--primary);color:var(--text);}
  .mode-btn.active{background:var(--primary-dim);border-color:var(--primary);color:var(--primary);}
  .blend-check{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-dim);margin:8px 0 4px;cursor:pointer;}
  .blend-check input{width:15px;height:15px;flex:none;cursor:pointer;margin:0;}
  .blend-check:hover{color:var(--text);}
  .blend-comp-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
  .blend-comp-row>input{min-width:0;}
  .blend-comp-row .blend-comp-name{flex:1.3;}
  .blend-comp-row .blend-comp-mg{flex:1;}
  .blend-comp-row .blend-comp-remove{flex:none;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;padding:4px 6px;line-height:1;}
  .blend-comp-row .blend-comp-remove:hover{color:var(--red);}
  .add-compound-btn{background:none;border:1px dashed var(--border);border-radius:8px;color:var(--primary);font-weight:700;font-size:12.5px;padding:8px 10px;width:100%;cursor:pointer;font-family:inherit;margin-top:2px;}
  .add-compound-btn:hover{border-color:var(--primary);}
  .compound-breakdown{margin-top:6px;font-size:12px;color:var(--text-dim);}
  .compound-breakdown b{color:var(--text);font-weight:700;}
  .add-toggle-card{margin-bottom:12px;padding:14px 16px;}
  .add-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:0;margin:0;color:var(--primary);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
  .add-toggle:hover{filter:brightness(1.1);}
  .add-toggle .add-toggle-chev{color:var(--text-dim);transition:transform .15s ease;font-weight:400;}
  .add-toggle[aria-expanded="true"] .add-toggle-chev{transform:rotate(180deg);}
  .add-toggle-body{margin-top:14px;}
  #inventory-count{font-weight:600;}
  input[readonly]{opacity:.7;cursor:not-allowed;}
  .dose-time-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px;}
  .bulk-day{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
  .catalog-group{background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;}
  .catalog-group>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:9px;}
  .catalog-group>summary::-webkit-details-marker{display:none;}
  .catalog-group>summary:after{content:"+";margin-left:auto;color:var(--text-dim);font-size:16px;}
  .catalog-group[open]>summary:after{content:"−";}
  .catalog-group-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .catalog-group-count{font-weight:500;color:var(--text-dim);font-size:12px;}
  .catalog-group-body{padding:0 14px 12px;overflow-x:auto;}
  .catalog-group-body .bulk-dose-row{min-width:760px;}
  .bulk-day.paused{opacity:.55;}
  .bulk-day-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .bulk-dose-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(100,151,127,.18);}
  .bulk-dose-row:first-of-type{margin-top:6px;padding-top:0;border-top:none;}
  .bulk-dose-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;}
  .bulk-dose-detail{margin:8px 0 2px 26px;display:none;}
  .bulk-dose-detail.open{display:block;}
  .bulk-dose-detail textarea{width:100%;font-size:12.5px;padding:6px 8px;background:var(--surface-1);border:1px solid var(--border);border-radius:8px;color:var(--text);resize:vertical;}
  .weekday-picker{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
  .weekday-picker label{display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:var(--text-dim);width:34px;font-weight:600;}
  .weekday-picker input{width:16px;height:16px;margin-top:3px;}
  .link-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .disclaimer{margin-top:34px;padding:14px 16px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);border-radius:10px;font-size:12.5px;color:var(--amber);}
  .icon-btn{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:15px;}
  .icon-btn:hover{color:var(--red);}
  footer.hint{text-align:center;color:var(--text-dim);font-size:12px;margin-top:30px;}
  .badge-count{background:var(--red);color:#fff;font-size:10px;border-radius:999px;padding:1px 6px;margin-left:4px;}
  #reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start;}
  .lock-screen{position:fixed;inset:0;background:var(--bg);z-index:1000;display:block;overflow:auto;padding:0;}
  .lock-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;width:100%;max-width:340px;text-align:center;}
  .lock-logo{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--primary);font-weight:800;font-size:19px;margin-bottom:16px;}
  .lock-card input[type=password]{margin-bottom:10px;text-align:center;}
  .password-toggle{display:flex!important;align-items:center;gap:7px;margin:0 0 12px!important;color:var(--text-dim)!important;font-size:12px!important;font-weight:600!important;cursor:pointer;}
  .password-toggle input{width:15px!important;height:15px!important;margin:0!important;flex:0 0 auto;}
  .auth-password-hint{color:var(--text-dim);font-size:11.5px;line-height:1.45;margin:-3px 0 12px;}
  .lock-remember{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--text-dim);margin:2px 0 14px;cursor:pointer;}
  .lock-remember input{width:15px;height:15px;}
  .public-shell{width:100%;max-width:1180px;margin:0 auto;padding:24px 22px 56px;}
  .public-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:54px;}
  .public-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:850;letter-spacing:.01em;}
  .public-brand svg{color:var(--primary);}
  .public-topbar-links{display:flex;gap:18px;align-items:center;}
  .public-topbar-links a,.policy-link{color:var(--text-dim);text-decoration:none;font-size:13px;font-weight:650;cursor:pointer;}
  .public-topbar-links a:hover,.policy-link:hover{color:var(--primary);}
  .top-login{color:var(--primary);text-decoration:none;font-size:13px;font-weight:650;cursor:pointer;}
  .top-login:hover{color:var(--text);}
  .public-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:60px;align-items:center;}
  .hero-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--primary);background:var(--primary-dim);border:1px solid rgba(61,220,151,.24);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:750;margin-bottom:18px;}
  .hero-copy h2{font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px;max-width:760px;}
  .hero-copy>p{font-size:18px;line-height:1.65;color:var(--text-dim);max-width:690px;margin:0;}
  .hero-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:700px;}
  .hero-point{background:rgba(14,26,21,.72);border:1px solid var(--border);border-radius:10px;padding:13px 14px;font-size:13.5px;font-weight:650;}
  .hero-point span{color:var(--primary);margin-right:7px;}
  .auth-tabs{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:4px;margin-bottom:18px;}
  .auth-tabs button{flex:1;border:0;background:transparent;color:var(--text-dim);border-radius:6px;padding:8px;cursor:pointer;font-weight:700;}
  .auth-tabs button.active{background:var(--primary-dim);color:var(--primary);}
  .auth-note{font-size:11.5px;line-height:1.5;color:var(--text-dim);margin:14px 0 0;}
  .public-section{margin-top:82px;}
  .public-section h3{font-size:30px;letter-spacing:-.025em;margin:0 0 10px;text-align:center;}
  .public-section-lead{color:var(--text-dim);text-align:center;max-width:650px;margin:0 auto 28px;line-height:1.6;}
  .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .feature-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
  .feature-card b{display:block;margin-bottom:7px;}
  .feature-card p{color:var(--text-dim);font-size:13.5px;line-height:1.55;margin:0;}
  .price-card{max-width:460px;margin:0 auto;background:var(--panel);border:1px solid rgba(61,220,151,.36);border-radius:16px;padding:26px;box-shadow:0 18px 60px var(--shadow);}
  .price-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:14px 0 18px;}
  .price{font-size:34px;font-weight:850;letter-spacing:-.03em;}
  .price-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px;color:var(--text-dim);font-size:13.5px;}
  .price-list li:before{content:"✓";color:var(--primary);font-weight:800;margin-right:9px;}
  .public-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--border);margin-top:70px;padding-top:22px;color:var(--text-dim);font-size:12px;}
  .public-footer-links{display:flex;gap:16px;flex-wrap:wrap;}
  .modal-backdrop{position:fixed;inset:0;background:rgba(1,7,4,.8);z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
  .modal-backdrop.open{display:flex;}
  .modal-card{width:100%;max-width:720px;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:0 24px 80px var(--shadow);}
  .modal-card h2{margin:0 0 12px;}
  .modal-card h3{font-size:15px;margin:22px 0 6px;}
  .modal-card p,.modal-card li{color:var(--text-dim);font-size:13.5px;line-height:1.65;}
  .modal-head{display:flex;align-items:start;justify-content:space-between;gap:20px;}
  .onboarding-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
  .onboarding-choice{border:1px solid var(--border);background:var(--surface-1);color:var(--text);border-radius:10px;padding:16px;cursor:pointer;text-align:left;}
  .onboarding-choice:hover{border-color:var(--primary);}
  .onboarding-choice b{display:block;margin-bottom:5px;}
  .onboarding-choice span{display:block;color:var(--text-dim);font-size:12px;line-height:1.45;}
  .guide-intro{background:linear-gradient(145deg,rgba(61,220,151,.12),rgba(61,220,151,.03));border:1px solid rgba(61,220,151,.3);border-radius:12px;padding:16px 18px;margin:14px 0 18px;}
  .guide-intro p{margin:5px 0 0;}
  .guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .guide-step{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:16px;}
  .guide-step-head{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
  .guide-number{width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:850;flex:0 0 auto;}
  .guide-step h3{margin:0;font-size:14px;}
  .guide-step p{margin:0;}
  .guide-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;}
  .guide-actions .link-row{margin:0;}
  .guide-download{text-decoration:none;display:inline-block;}
  .plan-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
  .growth-form{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .growth-form .wide{grid-column:span 2;}
  .growth-kpi-sub{font-size:11px;color:var(--text-dim);margin-top:5px;}
  .admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;}.admin-status{font-size:12px;color:var(--text-dim);}.admin-section{margin-top:18px}.admin-section>summary{cursor:pointer;font-size:16px;font-weight:800;padding:18px 20px;list-style:none}.admin-section>summary::-webkit-details-marker{display:none}.admin-section>summary:after{content:"+";float:right;color:var(--primary)}.admin-section[open]>summary:after{content:"−"}.admin-section-content{padding:0 20px 20px}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.admin-actions .btn{padding:6px 9px;font-size:11px}.table-wrap{overflow:auto}.admin-search{max-width:340px}.admin-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.admin-form-grid .span-2{grid-column:span 2}.admin-json{min-height:170px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.announcement-banner{display:none;max-width:1240px;margin:18px auto 0;padding:13px 18px;border:1px solid rgba(66,227,160,.3);border-radius:12px;background:var(--panel);color:var(--text)}.announcement-banner.show{display:flex;justify-content:space-between;align-items:center;gap:15px}.announcement-banner.warning{border-color:rgba(251,191,36,.45)}.announcement-banner.urgent{border-color:rgba(248,113,113,.5)}
  .admin-monitor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 18px}.admin-monitor-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-1);min-height:108px}.admin-monitor-card .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:800}.admin-monitor-card .value{font-size:28px;font-weight:900;line-height:1.1;margin:8px 0 5px}.admin-monitor-card .detail{font-size:12px;color:var(--text-dim);line-height:1.35}.admin-monitor-card.warn{border-color:rgba(251,191,36,.5)}.admin-monitor-card.bad{border-color:rgba(248,113,113,.55)}.admin-monitor-card.ok{border-color:rgba(66,227,160,.4)}.admin-monitor-card button{margin-top:10px}.admin-monitor-list{display:grid;gap:8px}.admin-monitor-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1)}.admin-monitor-item .muted{font-size:12px}.admin-monitor-empty{padding:14px;border:1px dashed var(--border);border-radius:10px;color:var(--text-dim)}
  @media(max-width:900px){.admin-monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.admin-monitor-grid{grid-template-columns:1fr}}
  .admin-status{color:var(--text-dim)}.admin-section,.admin-section>summary{color:var(--text)}.admin-section-content{color:var(--text)}.admin-section label{color:var(--text-dim)}.admin-section td{color:var(--text)}.announcement-banner,.announcement-banner #app-announcement-title{color:var(--text)}.announcement-banner #app-announcement-message{color:var(--text-dim)}
  [data-theme="light"] .admin-status,[data-theme="light"] .admin-section,[data-theme="light"] .admin-section>summary,[data-theme="light"] .admin-section-content,[data-theme="light"] .admin-section label,[data-theme="light"] .admin-section td,[data-theme="light"] .admin-section th,[data-theme="light"] .admin-section p,[data-theme="light"] .admin-profile-card,[data-theme="light"] .admin-profile-card h2,[data-theme="light"] .admin-profile-card h3,[data-theme="light"] .admin-profile-card b,[data-theme="light"] .admin-profile-card span,[data-theme="light"] .admin-profile-email{color:var(--text);}.admin-section th{color:var(--text-dim);}.admin-section td,.admin-section th{border-color:var(--border);}.admin-section .muted,[data-theme="light"] .admin-section .muted,[data-theme="light"] .admin-profile-card .muted{color:var(--text-dim);}.admin-section input,.admin-section select,.admin-section textarea{color:var(--text);background:var(--surface-1);border-color:var(--border);}[data-theme="light"] .admin-section .table-wrap.responsive-cards tr{background:var(--surface-1);border-color:var(--border);}[data-theme="light"] .admin-section .table-wrap.responsive-cards td{border-color:var(--border);}
  .admin-profile-card{max-width:980px}.admin-profile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.admin-profile-email{font-size:13px;color:var(--text-dim);overflow-wrap:anywhere}.admin-profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.admin-profile-stat{background:var(--panel-2);border:1px solid var(--border);border-radius:11px;padding:13px}.admin-profile-stat span{display:block;color:var(--text-dim);font-size:11px;margin-bottom:5px}.admin-profile-stat b{font-size:18px}.admin-profile-sections{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-profile-panel{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:15px}.admin-profile-panel h3{margin:0 0 11px}.admin-profile-list{display:grid;gap:8px}.admin-profile-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.055);padding-bottom:7px;font-size:12.5px}.admin-profile-row span{color:var(--text-dim)}.admin-profile-row b{text-align:right;overflow-wrap:anywhere}.admin-profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  /* Toast notifications */
  .toast-container{position:fixed;top:16px;right:16px;z-index:4000;display:flex;flex-direction:column;gap:10px;max-width:380px;pointer-events:none;}
  .toast{pointer-events:auto;background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;padding:12px 12px 12px 14px;box-shadow:0 16px 40px var(--shadow);font-size:13.5px;line-height:1.45;display:flex;align-items:flex-start;gap:10px;animation:toast-in .2s ease-out;}
  .toast.success{border-left-color:var(--green);}
  .toast.error{border-left-color:var(--red);}
  .toast .toast-icon{flex:0 0 auto;font-weight:800;margin-top:1px;}
  .toast.success .toast-icon{color:var(--green);}
  .toast.error .toast-icon{color:var(--red);}
  .toast .toast-msg{flex:1;color:var(--text);overflow-wrap:anywhere;}
  .toast .toast-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:2px;line-height:1;flex:0 0 auto;}
  .toast .toast-close:hover{color:var(--text);}
  .toast.closing{animation:toast-out .16s ease-in forwards;}
  @keyframes toast-in{from{opacity:0;transform:translateY(-6px) translateX(10px);}to{opacity:1;transform:translateY(0) translateX(0);}}
  @keyframes toast-out{from{opacity:1;}to{opacity:0;transform:translateX(12px);}}
  @media(max-width:700px){.toast-container{left:10px;right:10px;top:10px;max-width:none;}}
  /* Busy / disabled state for in-flight admin actions */
  .btn.is-busy{opacity:.6;cursor:wait !important;}
  .btn:disabled{cursor:not-allowed;}
  /* Tag chips shown in the customer table */
  .tag-chip-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
  .tag-chip{display:inline-block;background:var(--primary-dim);color:var(--primary);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:700;}
  .cell-sub{color:var(--text-dim);font-size:11.5px;margin-top:2px;}
  .payment-warning-flag{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-size:11px;font-weight:700;margin-top:4px;}
  /* Filter / bulk toolbars in the Admin Center */
  .admin-filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .admin-bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
  @media(max-width:700px){
    .admin-filter-bar,.admin-bulk-bar{gap:8px;}
    .admin-filter-bar>*,.admin-bulk-bar>select{width:100%;}
    .admin-search{max-width:none;}
    .admin-profile-actions{flex-direction:column;}
    .admin-profile-actions .btn{width:100%;}
  }
  /* Responsive card layout for wide admin tables on small screens */
  @media(max-width:760px){
    .table-wrap.responsive-cards table,.table-wrap.responsive-cards tbody,.table-wrap.responsive-cards tfoot,.table-wrap.responsive-cards tr,.table-wrap.responsive-cards td{display:block;width:100%;min-width:0;}
    .table-wrap.responsive-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
    .table-wrap.responsive-cards tr{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px;}
    .table-wrap.responsive-cards tr:last-child{margin-bottom:0;}
    .table-wrap.responsive-cards td{border-bottom:1px solid rgba(255,255,255,.06);padding:8px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;}
    .table-wrap.responsive-cards td:last-child{border-bottom:none;}
    .table-wrap.responsive-cards td:before{content:attr(data-label);color:var(--text-dim);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;text-align:left;flex:0 0 auto;padding-top:2px;}
    .table-wrap.responsive-cards td.cell-actions{flex-direction:column;align-items:stretch;text-align:left;}
    .table-wrap.responsive-cards td.cell-actions:before{margin-bottom:8px;}
    .table-wrap.responsive-cards td.cell-actions .admin-actions{justify-content:flex-start;width:100%;}
    .table-wrap.responsive-cards td.cell-actions .admin-actions .btn{flex:1 1 calc(50% - 6px);}
    .table-wrap.responsive-cards td.cell-account{text-align:left;flex-direction:column;align-items:flex-start;}
    .table-wrap.responsive-cards td.cell-account:before{margin-bottom:4px;}
    .table-wrap.responsive-cards .tag-chip-row{justify-content:flex-start;}
  }
  #plan-gate-title{font-size:28px;letter-spacing:-.025em;margin:0 0 10px;}
  .site-picker,.chip-picker{display:flex;flex-wrap:wrap;gap:6px;}
  .chip{border:1px solid var(--border);background:var(--surface-1);color:var(--text-dim);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:650;cursor:pointer;}
  .chip.active{background:var(--primary-dim);color:var(--primary);border-color:rgba(61,220,151,.4);}
  .chip.side-effect.active{background:var(--amber-bg);color:var(--amber);border-color:rgba(251,191,36,.4);}
  .chip.no-reaction.active{background:var(--green-bg);color:var(--green);border-color:rgba(74,222,128,.4);}
  .log-chip-btn{background:var(--primary-dim);color:var(--primary);border:none;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;}
  .log-chip-btn.empty-log{background:transparent;color:var(--text-dim);border:1px dashed var(--border);}
  .countdown-cell{font-variant-numeric:tabular-nums;font-weight:650;font-size:12.5px;}
  .countdown-cell.overdue{color:var(--red);}
  .countdown-cell.soon{color:var(--amber);}
  .countdown-cell[title]{border-bottom:1px dotted var(--text-dim);cursor:help;}
  #photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;}
  .photo-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .photo-card .photo-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface-1);display:block;}
  .photo-card .photo-meta{padding:7px 8px;}
  .photo-card .photo-date{font-weight:700;font-size:11px;}
  .photo-card .photo-caption{color:var(--text-dim);font-size:10.5px;margin-top:2px;}
  .photo-card .photo-actions{display:flex;justify-content:flex-end;padding:0 6px 6px;}
  @media(max-width:700px){
    #photo-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;}
    .photo-card .photo-meta{padding:5px 6px;}
    .photo-card .photo-date{font-size:9.5px;}
    .photo-card .photo-caption{font-size:9px;}
    .photo-card .photo-actions{padding:0 4px 4px;}
    .photo-card .icon-btn{width:22px;height:22px;font-size:11px;}
  }
  /* Reusable floating prev/next arrow row for dashboard panels (progress snapshot, today,
     daily check-in, adherence trend) — mirrors the existing dashboard-lab-carousel pattern. */
  .panel-nav-carousel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;}
  .panel-nav-arrow{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface-1);color:var(--text);font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .panel-nav-arrow:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
  .panel-nav-arrow:disabled{opacity:.35;cursor:default;}
  .panel-nav-today{border:1px solid var(--border);background:var(--surface-1);color:var(--text-dim);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;}
  .panel-nav-today:hover{border-color:var(--primary);color:var(--primary);}
  .photo-dropzone{border:1.5px dashed var(--border);border-radius:12px;padding:26px 16px;text-align:center;cursor:pointer;}
  .photo-dropzone:hover{border-color:var(--primary);}
  .photo-dropzone.dragover{border-color:var(--primary);background:var(--primary-dim);}
  @media(max-width:900px){
    .public-grid{grid-template-columns:1fr;gap:34px}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-points{margin-left:auto;margin-right:auto}.lock-card{margin:0 auto}.feature-grid{grid-template-columns:1fr 1fr}.guide-grid{grid-template-columns:1fr}
  }
  @media(max-width:700px){
    header{padding:12px 14px;display:block}header .brand-mark{margin-bottom:10px}nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}nav button{white-space:nowrap;padding:8px 11px}#sync-status{display:none}main{padding:16px 12px 50px}.stats{grid-template-columns:1fr 1fr}.card{padding:14px;overflow-x:auto;}.section-title{margin-top:20px}.table-wrap:not(.responsive-cards) table{min-width:520px}.public-shell{padding:18px 16px 38px}.public-topbar{margin-bottom:36px}.public-topbar-links a:not(.top-login){display:none}.public-grid{gap:28px}.hero-copy h2{font-size:40px}.hero-copy>p{font-size:16px}.hero-points,.feature-grid{grid-template-columns:1fr}.public-section{margin-top:58px}.public-footer{align-items:flex-start;flex-direction:column}.onboarding-actions{grid-template-columns:1fr}.modal-card{padding:20px}.price-row{align-items:flex-start;flex-direction:column}
  }
  @media(max-width:700px){.growth-form{grid-template-columns:1fr 1fr}.growth-form .wide{grid-column:span 2}}
  @media(max-width:700px){.admin-profile-grid,.admin-profile-sections{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.admin-profile-grid,.admin-profile-sections{grid-template-columns:1fr}}
  @media(max-width:480px){#calc-mode-toggle.mode-toggle{flex-direction:column;}#calc-mode-toggle .mode-btn{width:100%;}}
  @media(max-width:560px){.photo-dropzone{padding:20px 12px}#progress-measurement-form .link-row .btn{width:100%}.mini-chart{min-width:220px}}
  .cal-weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px;font-size:11px;font-weight:700;color:var(--text-dim);text-align:center;text-transform:uppercase;letter-spacing:.03em;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px;}
  .cal-cell{position:relative;aspect-ratio:1/1;border:1px solid var(--border);border-radius:9px;background:var(--surface-1);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;font-family:inherit;}
  .cal-cell:hover{border-color:var(--primary);}
  .cal-cell.empty{visibility:hidden;cursor:default;border:none;background:none;}
  .cal-cell.cal-today{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;}
  .cal-daynum{font-size:12.5px;font-weight:700;}
  .cal-dot{width:7px;height:7px;border-radius:999px;background:var(--text-dim);}
  .cal-cell.cal-full .cal-dot{background:var(--green);}
  .cal-cell.cal-pending .cal-dot{background:var(--primary);}
  .cal-cell.cal-missed .cal-dot{background:var(--red);}
  .cal-note-flag{position:absolute;top:3px;right:4px;font-size:9px;color:var(--text-dim);}
  .cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--text-dim);align-items:center;}
  .cal-legend span{display:inline-flex;align-items:center;gap:5px;}
  .cal-dot-sample{width:8px;height:8px;border-radius:999px;display:inline-block;background:var(--text-dim);}
  .cal-dot-sample.cal-full{background:var(--green);}
  .cal-dot-sample.cal-pending{background:var(--primary);}
  .cal-dot-sample.cal-missed{background:var(--red);}
  .cal-legend-note{font-size:11px;}
  .calendar-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}.calendar-view-toggle{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:9px;}.calendar-view-toggle .btn{box-shadow:none;border:0;}.calendar-view-toggle .btn.active{background:var(--primary-dim);color:var(--primary);}
  .calendar-week-detail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px;}.calendar-week-day{min-height:230px;background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;}.calendar-week-day:hover{border-color:var(--primary);}.calendar-week-day.today{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;}.calendar-week-day-head{display:flex;justify-content:space-between;align-items:center;gap:5px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--border);}.calendar-week-day-head b{font-size:12px;}.calendar-week-day-head span{font-size:11px;color:var(--text-dim);}.calendar-dose-item{font-size:11.5px;padding:8px 7px;border-radius:8px;background:var(--panel);border-left:3px solid var(--primary);margin-top:6px;}.calendar-dose-item.done{border-left-color:var(--green);opacity:.75;}.calendar-dose-item.missed{border-left-color:var(--red);}.calendar-dose-item b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.calendar-dose-item span{display:block;color:var(--text-dim);font-size:10px;margin-top:2px;}.calendar-agenda{display:grid;gap:8px;margin-top:16px;}.calendar-agenda-day{display:grid;grid-template-columns:115px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--border);}.calendar-agenda-date{font-weight:800;font-size:13px;}.calendar-agenda-date span{display:block;font-size:11px;color:var(--text-dim);font-weight:500;margin-top:3px;}.calendar-agenda-items{display:grid;gap:6px;}.calendar-agenda-empty{color:var(--text-dim);font-size:12.5px;padding:18px 0;}.app-week-strip{position:sticky;top:var(--app-week-top,64px);left:0;right:0;z-index:22;display:flex;align-items:center;gap:8px;padding:8px max(14px,calc((100vw - 1240px)/2));background:var(--overlay-strong);border-bottom:1px solid var(--border);box-shadow:0 12px 30px var(--shadow);}.app-week-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;flex:1;min-width:0;}.app-week-day{border:1px solid var(--border);background:var(--surface-1);color:var(--text);border-radius:8px;min-width:0;padding:6px 4px;text-align:center;cursor:pointer;font:inherit;}.app-week-day:hover{border-color:var(--primary);}.app-week-day.today{border-color:var(--primary);background:var(--primary-dim);}.app-week-day.selected{box-shadow:0 0 0 1px var(--primary) inset;}.app-week-day .dow{display:block;color:var(--text-dim);font-size:9px;text-transform:uppercase;}.app-week-day .day{display:block;font-size:13px;font-weight:800;margin-top:2px;}.app-week-day .activity{display:block;color:var(--primary);font-size:9px;min-height:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.app-week-nav,.app-week-today{flex:0 0 auto;border:1px solid var(--border);background:var(--surface-1);color:var(--text);border-radius:8px;cursor:pointer;font:inherit;font-weight:800;}.app-week-nav{width:32px;height:34px;font-size:22px;line-height:1;}.app-week-today{height:34px;padding:0 9px;font-size:10px;}.app-week-nav:hover,.app-week-today:hover{border-color:var(--primary);color:var(--primary);}
  #lab-trend-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}  .lab-reference-chart{margin-top:8px}.lab-reference-chart svg{width:100%;height:auto;display:block;overflow:visible}.lab-chart-legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:10.5px;color:var(--text-dim)}.lab-chart-legend span{display:inline-flex;gap:5px;align-items:center}.lab-chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.lab-chart-legend .range-dot{background:rgba(94,216,255,.75)}.lab-chart-legend .trend-dot{background:var(--primary)}.lab-personal-insight{margin-top:12px;border:1px solid color-mix(in srgb,var(--primary) 48%,var(--border));border-radius:12px;padding:12px 13px;background:color-mix(in srgb,var(--primary) 4%,var(--panel));}.lab-personal-insight-head{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12px;color:var(--text)}.lab-personal-insight-head .sparkle{font-size:15px;color:var(--primary)}.lab-personal-insight-summary{font-size:11px;line-height:1.55;color:var(--text-dim);margin:8px 0 0}.lab-personal-insight details{margin-top:7px}.lab-personal-insight summary{cursor:pointer;list-style:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}.lab-personal-insight summary::-webkit-details-marker{display:none}.lab-personal-insight-more{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);font-size:10.5px;line-height:1.5;color:var(--text-dim)}.lab-personal-insight-updated{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.lab-personal-insight-updated::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block}#lab-trend-cards .lab-trend-card{margin:0;padding:14px 16px;border-radius:12px;box-shadow:none;}#lab-trend-cards .lab-trend-card .trend-current strong{font-size:25px;}#lab-trend-cards .lab-trend-card .trend-chart.compact{height:120px;margin-top:2px;}#lab-trend-cards .lab-trend-card .levels-stat-row{padding-top:8px;gap:8px;}#lab-trend-cards .lab-trend-card .levels-stat-row b{font-size:12px;}#lab-trend-cards .lab-trend-card .levels-note{font-size:10.5px;margin-top:7px;}
  .lab-trend-card.lab-status-optimal{background:linear-gradient(145deg,rgba(70,227,160,.16),var(--panel));border-color:rgba(70,227,160,.8)!important;}
  .lab-trend-card.lab-status-within{background:linear-gradient(145deg,rgba(94,216,255,.13),var(--panel));border-color:rgba(94,216,255,.72)!important;}
  .lab-trend-card.lab-status-average{background:linear-gradient(145deg,rgba(183,148,246,.13),var(--panel));border-color:rgba(183,148,246,.66)!important;}
  .lab-trend-card.lab-status-out{background:linear-gradient(145deg,rgba(248,113,113,.14),var(--panel));border-color:rgba(248,113,113,.78)!important;}
  .lab-trend-card.lab-status-unknown{background:linear-gradient(145deg,rgba(148,163,184,.1),var(--panel));border-color:rgba(148,163,184,.48)!important;}
  #dashboard-lab-panel .response-card.dashboard-lab-status-optimal{background:linear-gradient(145deg,rgba(70,227,160,.15),var(--panel));border-color:rgba(70,227,160,.7);}
  #dashboard-lab-panel .response-card.dashboard-lab-status-within{background:linear-gradient(145deg,rgba(94,216,255,.12),var(--panel));border-color:rgba(94,216,255,.62);}
  #dashboard-lab-panel .response-card.dashboard-lab-status-average{background:linear-gradient(145deg,rgba(183,148,246,.12),var(--panel));border-color:rgba(183,148,246,.58);}
  #dashboard-lab-panel .response-card.dashboard-lab-status-out{background:linear-gradient(145deg,rgba(248,113,113,.13),var(--panel));border-color:rgba(248,113,113,.7);}
  .lab-status-legend{display:flex;gap:8px;flex-wrap:wrap;margin:-3px 0 12px;}.lab-status-legend span{font-size:11px;padding:5px 8px;border-radius:999px;border:1px solid var(--border);}.lab-status-legend .optimal{color:#08784b;background:rgba(70,227,160,.18);border-color:rgba(70,227,160,.55);}.lab-status-legend .within{color:#08718c;background:rgba(94,216,255,.15);border-color:rgba(94,216,255,.5);}.lab-status-legend .average{color:#7048a9;background:rgba(183,148,246,.16);border-color:rgba(183,148,246,.5);}.lab-status-legend .out{color:#a72d2d;background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.5);}
  .lab-range-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.lab-range-label{font-weight:700;color:var(--text);}.lab-status-source{font-size:10.5px;color:var(--text-dim);}
  .lab-context-note{font-size:11px;color:var(--text-dim);line-height:1.45;margin-top:7px;}.lab-context-note b{color:var(--text);}
  .lab-range-provenance{font-size:10.5px;color:var(--text-dim);margin-top:5px;}.lab-range-provenance strong{color:var(--text);}
  .lab-history-panel{margin-top:14px;overflow:hidden;}.lab-history-panel summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:800;display:flex;justify-content:space-between;align-items:center;}.lab-history-panel summary::-webkit-details-marker{display:none;}.lab-history-panel summary:after{content:"+";color:var(--primary);font-size:18px;}.lab-history-panel[open] summary:after{content:"−";}.lab-history-panel .table-wrap{border-top:1px solid var(--border);}
  .lab-compare-panel .trend-chart{height:300px;}.lab-compare-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}.lab-compare-actions .btn{font-size:11px;padding:6px 9px;}
  .dashboard-compact-grid,.dashboard-trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;}.dashboard-compact-grid>*,.dashboard-trend-grid>*{min-width:0;}.dashboard-trend-grid .response-card{height:100%;min-height:100%;}.dashboard-compact-grid .response-card{height:100%;min-height:156px;}
  #dashboard-lab-panel .response-card{cursor:default;}#dashboard-lab-panel .response-card:hover{transform:none;}
  .trend-overlay-picker{margin:8px 0 5px;}.trend-overlay-picker summary{cursor:pointer;color:var(--primary);font-size:10.5px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:8px;align-items:center;}.trend-overlay-picker summary::-webkit-details-marker{display:none;}.trend-overlay-picker summary:after{content:"+";font-size:15px;}.trend-overlay-picker[open] summary:after{content:"−";}.trend-overlay-picker summary span{color:var(--text-dim);font-weight:600;margin-left:auto;}.trend-overlay-picker .chip-picker{margin:7px 0 2px;max-height:145px;overflow:auto;padding:2px;}
  .trend-range-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:14px 0 9px;}.trend-range-controls label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);}.trend-range-controls>label{display:flex;align-items:center;gap:9px;}.trend-range-controls select,.trend-range-controls input{width:auto;min-width:110px;padding:6px 8px;font-size:11px;margin-top:0;}.trend-range-custom{display:flex;gap:9px;flex-wrap:wrap;}.trend-range-controls .trend-range-custom label{display:flex;flex-direction:column;gap:3px;}
  @media(max-width:1050px){#lab-trend-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:700px){.calendar-toolbar-actions{width:100%;justify-content:space-between;}.calendar-week-detail{grid-template-columns:1fr;}.calendar-week-day{min-height:0;}.calendar-week-day:not(.today){display:block;}.calendar-agenda-day{grid-template-columns:1fr;gap:6px;}.app-week-strip{top:58px;padding:7px 8px;gap:4px;}.app-week-day{padding:5px 2px;}.app-week-day .dow{font-size:8px;}.app-week-day .day{font-size:12px;}.app-week-nav{width:27px;}.app-week-today{padding:0 6px;font-size:9px;}.dashboard-compact-grid,.dashboard-trend-grid{grid-template-columns:1fr;}#lab-trend-cards{grid-template-columns:1fr;}}
  @media(max-width:480px){.cal-daynum{font-size:11px;}.cal-weekday-row{font-size:9.5px;}}
  @media(max-width:480px){#adherence-trend-chart .mini-bar-value{display:none;}.mini-chart{gap:3px;}.mini-bar{max-width:18px;}}
  @media(max-width:480px){
    .dose-time-row{grid-template-columns:1fr;align-items:stretch;}
    .stats{grid-template-columns:1fr 1fr;gap:10px;}
    .stat-card .value{font-size:22px;}
    .stat-card{padding:12px 14px;}
    table{font-size:12.5px;}
    .table-wrap:not(.responsive-cards) table{min-width:480px;}
    th,td{padding:7px 8px;}
    .lock-card{padding:22px 18px;}
    .price-card{padding:18px;}
    .price{font-size:28px;}
    .modal-card{padding:16px;}
    .feature-card{padding:16px;}
    header .brand-mark{font-size:17px;}
    nav button{padding:7px 9px;font-size:13px;}
    .public-section h3, #plan-gate-title{font-size:24px;}
    .hero-copy h2{font-size:30px;}
    .row.cols-2, .row.cols-3, .row.cols-4{gap:16px;}
  }

  /* 2026 premium visual refresh — brighter theme */
  body{background:radial-gradient(circle at 75% -10%,rgba(30,142,96,.13),transparent 34%),var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.005em;}
  header{background:var(--panel-translucent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:rgba(86,135,112,.2);padding:16px max(24px,calc((100vw - 1240px)/2));-webkit-transform:translateZ(0);transform:translateZ(0);}
  header .brand-mark{font-size:20px;letter-spacing:-.025em;}
  .header-actions{display:flex;align-items:center;gap:10px;}.header-logout{padding:8px 13px;font-size:12px;white-space:nowrap;box-shadow:none;}
  .more-nav{position:relative;}
  .more-menu{display:none;position:absolute;right:0;top:calc(100% + 9px);min-width:175px;padding:7px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 38px var(--shadow);z-index:30;}
  .more-nav.open .more-menu{display:grid;gap:3px;}
  .more-menu button{width:100%;text-align:left;justify-content:flex-start;padding:10px 12px;}
  .more-menu .menu-divider{height:1px;background:var(--border);margin:4px 2px;}
  #more-nav-toggle.active{color:var(--primary);background:var(--primary-soft);}
  #tabnav>button.active,#more-nav-toggle.active{color:var(--primary-ink);background:var(--primary);box-shadow:0 0 0 1px rgba(77,237,170,.35),0 5px 16px rgba(77,237,170,.14);}
  .mobile-nav{display:none;}
  .mobile-more-backdrop{display:none;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
  .mobile-more-backdrop.open{display:block;}
  .mobile-more-sheet{position:absolute;left:10px;right:10px;bottom:82px;max-height:calc(100dvh - 105px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:17px;padding:8px;box-shadow:0 24px 70px var(--shadow);}
  .mobile-more-head{display:flex;justify-content:space-between;align-items:center;padding:10px 11px 8px;font-size:13px;font-weight:800;}
  .mobile-more-sheet button{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:var(--text);padding:13px 12px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer;}
  .mobile-more-sheet button:hover,.mobile-more-sheet button:focus{background:var(--primary-dim);color:var(--primary);outline:none;}
  .mobile-more-sheet .mobile-more-danger{color:var(--red);border-top:1px solid var(--border);border-radius:0 0 10px 10px;margin-top:4px;}
  .quick-add{position:fixed;right:22px;bottom:22px;z-index:24;}
  .quick-add-toggle{border:0;border-radius:999px;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:14px;padding:13px 17px;box-shadow:0 12px 30px var(--shadow);cursor:pointer;}
  .quick-add-menu{display:none;position:absolute;right:0;bottom:calc(100% + 9px);width:220px;max-height:calc(100vh - 120px);overflow:auto;padding:7px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 38px var(--shadow);}
  .quick-add.open .quick-add-menu{display:grid;gap:3px;}
  .quick-add-menu button{border:0;background:transparent;color:var(--text);text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:650;}
  .quick-add-menu button:hover{background:var(--primary-dim);color:var(--primary);}
  .quick-add-menu .menu-divider{height:1px;background:var(--border);margin:4px 2px;}
  .nav-alert{display:none;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--amber);color:#171005;font-size:10px;font-weight:850;align-items:center;justify-content:center;vertical-align:middle;}
  .nav-alert.show{display:inline-flex;}
  .nav-alert-dismiss{display:none;align-items:center;justify-content:center;width:17px;height:17px;margin-left:2px;border-radius:50%;color:var(--text-dim);font-size:13px;font-weight:900;line-height:1;cursor:pointer;vertical-align:middle;}
  .nav-alert-dismiss.show{display:inline-flex;}
  .nav-alert-dismiss:hover{background:var(--primary-dim);color:var(--primary);}
  .mobile-nav .nav-alert-dismiss{width:15px;height:15px;font-size:12px;}
  .app-breadcrumb{max-width:1180px;margin:10px auto -8px;padding:0 20px;color:var(--text-dim);font-size:12px;font-weight:650;}
  .app-breadcrumb b{color:var(--text);}
  .search-label{display:block;font-size:12px;font-weight:700;color:var(--text-dim);margin:0 0 6px;}
  input[type="search"]{width:100%;}
  .empty .btn{margin-top:10px;}
  .feedback-fab{position:fixed;left:18px;bottom:22px;z-index:70;border:1px solid var(--primary);background:var(--primary);color:#062017;border-radius:999px;padding:10px 14px;font-weight:800;box-shadow:0 10px 24px var(--shadow);cursor:pointer;}.feedback-fab:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .onboarding-consent{display:flex;align-items:flex-start;gap:9px;padding:12px 13px;margin:14px 0;border:1px solid var(--border);border-radius:11px;background:var(--surface-1);font-size:12.5px;line-height:1.45;cursor:pointer;}.onboarding-consent input{width:auto;margin-top:3px;flex:0 0 auto;}
  nav{gap:2px;} nav button{padding:9px 13px;border-radius:10px;color:var(--text-dim);} nav button:hover{color:var(--text);background:rgba(255,255,255,.035)}
  nav button.active{background:rgba(66,227,160,.1);box-shadow:inset 0 0 0 1px rgba(66,227,160,.12);}
  main{max-width:1240px;padding:34px 24px 80px;}
  .card{background:var(--panel);border-color:var(--border);border-radius:16px;padding:20px 22px;box-shadow:0 18px 50px var(--shadow);}
  .stat-card{position:relative;overflow:hidden;}.stat-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-45px;background:rgba(66,227,160,.06);}
  .stat-card .label{font-size:11px;letter-spacing:.09em;}.stat-card .value{font-size:30px;letter-spacing:-.04em;}
  .section-title{font-size:17px;letter-spacing:-.015em;margin-top:32px;}
  .btn{padding:11px 18px;border-radius:10px;font-weight:780;box-shadow:0 8px 24px rgba(66,227,160,.1);transition:.18s ease;}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
  .btn.secondary{box-shadow:inset 0 0 0 1px rgba(66,227,160,.13);}
  input,select,textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 12px;color:var(--text)!important;-webkit-text-fill-color:var(--text);font-family:inherit;}input::placeholder,textarea::placeholder{color:var(--placeholder)!important;-webkit-text-fill-color:var(--placeholder);opacity:1}select option{background:var(--surface-2);color:var(--text)} input:focus,select:focus,textarea:focus{border-color:rgba(66,227,160,.7);box-shadow:0 0 0 3px rgba(66,227,160,.08);outline:none;}
  th{padding:12px 12px;font-size:10.5px;letter-spacing:.08em;}td{padding:13px 12px;}tbody tr{transition:.15s ease;}tbody tr:hover{background:rgba(66,227,160,.025);}
  .pill{padding:4px 10px;font-size:10.5px;letter-spacing:.03em;}.progress{height:7px;background:var(--track);}
  .public-shell{max-width:1240px;padding:0 28px 72px;}
  .trial-strip{width:100vw;position:relative;left:50%;margin-left:-50vw;padding:13px 20px;text-align:center;color:var(--primary);font-size:13px;font-weight:700;background:rgba(28,118,79,.18);border-bottom:1px solid rgba(66,227,160,.2);}
  .public-topbar{height:76px;margin:0;border-bottom:1px solid rgba(92,133,113,.18);}
  .public-brand{font-size:20px;letter-spacing:-.025em;}.public-topbar-links{gap:30px;}.public-topbar-links a{font-size:13px;}
  .public-topbar-links .top-login{background:var(--primary);color:var(--primary-ink);padding:12px 20px;border-radius:10px;}
  .public-grid{min-height:670px;grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr);gap:74px;padding:70px 0 56px;position:relative;}
  .public-grid:before{content:"";position:absolute;inset:0 42% 0 -20%;background:radial-gradient(circle,rgba(25,126,83,.12),transparent 68%);pointer-events:none;}
  .hero-copy,.lock-card{position:relative;z-index:1}.hero-kicker{text-transform:uppercase;letter-spacing:.14em;padding:8px 15px;border-color:rgba(66,227,160,.28);}
  .hero-copy h2{font-size:clamp(47px,5.4vw,76px);line-height:.99;letter-spacing:-.055em;margin-bottom:25px;}.hero-copy h2 em{font-style:normal;color:var(--primary);}
  .hero-copy>p{font-size:18px;line-height:1.75;max-width:660px;}.hero-points{gap:10px;margin-top:30px;}.hero-point{background:transparent;border:0;padding:5px 0;color:var(--text-dim);font-weight:600;}
  .lock-card{max-width:420px;padding:30px;border-radius:18px;background:var(--panel);border-color:var(--border);box-shadow:0 35px 90px var(--shadow);text-align:left;}
  .lock-logo{justify-content:flex-start;font-size:16px;margin-bottom:20px;}.lock-card input[type=password]{text-align:left;}.auth-tabs{background:var(--surface-2);border-color:var(--border);border-radius:11px;padding:5px;}.auth-tabs button{padding:10px;}
  .public-section{margin-top:0;padding:100px 0;border-top:1px solid rgba(83,132,109,.2);}.public-section:first-of-type{border-top:0;padding-top:70px;}.public-section h3{font-size:clamp(34px,4vw,50px);letter-spacing:-.045em;}.public-section-lead{font-size:16px;max-width:720px;}
  .feature-grid{gap:18px;}.feature-card{min-height:175px;padding:26px;border-radius:16px;background:var(--panel);border-color:var(--border);}.feature-card b{font-size:17px;margin-bottom:12px;}.feature-card p{font-size:14px;line-height:1.7;}.feature-card:hover{border-color:rgba(66,227,160,.4);transform:translateY(-2px);transition:.2s ease;}
  .benefit-heading{text-align:left!important;max-width:780px;line-height:1.03;}.benefit-lead{text-align:left;margin-left:0;max-width:660px;}
  .feature-spotlight{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;margin-top:34px;}
  .feature-spotlight-copy,.feature-forecast,.benefit-card{background:var(--panel);border:1px solid var(--border);border-radius:13px;}
  .feature-spotlight-copy{padding:34px;}.feature-spotlight-copy h4{font-size:21px;margin:18px 0 10px;}.feature-spotlight-copy p,.benefit-card p{color:var(--text-dim);font-size:13.5px;line-height:1.7;margin:0;}
  .feature-tag{display:inline-block;background:var(--primary);color:var(--primary-ink);border-radius:999px;padding:6px 11px;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
  .feature-forecast{padding:28px 30px;display:flex;flex-direction:column;justify-content:center;}.forecast-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px dashed rgba(100,156,130,.28);font-size:12.5px;color:var(--text-dim);}.forecast-row:last-child{border:0}.forecast-row strong{color:var(--text);}.forecast-row:last-child strong{color:var(--primary);}
  .fc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:6px;}
  .fc-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-dim);}
  .fc-field input{background:var(--surface-1);border:1px solid rgba(100,156,130,.35);border-radius:7px;color:var(--text);font-size:13px;padding:7px 9px;width:100%;font-family:inherit;}
  .fc-field input:focus{outline:none;border-color:var(--primary);}
  .benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;}.benefit-card{padding:28px;min-height:168px;}.benefit-icon{width:28px;height:28px;color:var(--primary);margin-bottom:20px;}.benefit-card h4{font-size:17px;margin:0 0 10px;}.feature-spotlight-copy:hover,.feature-forecast:hover,.benefit-card:hover{border-color:rgba(66,227,160,.48);transition:.2s ease;}
  .how-section{padding:100px 0;}.how-section h3,.faq-section h3{text-align:center;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.04em;margin:14px 0 34px;}.center-kicker{display:table;margin:0 auto 20px;}
  .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}.how-card{position:relative;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:27px 25px;cursor:pointer;color:var(--text);}.how-card:hover{border-color:rgba(66,227,160,.55);transform:translateY(-2px);transition:.2s ease;}.how-card:not(:last-child):after{content:"→";position:absolute;right:-18px;top:50%;color:var(--primary);font-weight:800;z-index:2;}.how-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--primary-ink);font-weight:900;margin-bottom:22px;}.how-card h4{font-size:16px;margin:0 0 10px;}.how-card p{font-size:13px;line-height:1.7;color:var(--text-dim);margin:0;}.how-card .how-link{display:block;color:var(--primary);font-size:11px;font-weight:800;margin-top:17px;}
  .faq-section{padding:100px 0 38px;max-width:820px;margin-left:auto;margin-right:auto;}.faq-list{display:grid;gap:10px;}.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;}.faq-item summary{cursor:pointer;list-style:none;padding:18px 20px;font-size:14px;font-weight:750;display:flex;justify-content:space-between;gap:20px;}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--primary);font-size:18px;line-height:1;}.faq-item[open] summary:after{content:"−"}.faq-item p{color:var(--text-dim);font-size:13.5px;line-height:1.7;margin:0;padding:0 20px 19px;}.final-cta{text-align:center;padding:95px 20px 40px;border-top:1px solid rgba(83,132,109,.2);}.final-cta h3{font-size:clamp(32px,4vw,48px);letter-spacing:-.045em;margin:0 0 12px;}.final-cta p{color:var(--text-dim);margin:0 0 25px;}.final-cta .btn{font-size:14px;padding:14px 25px;}.cta-notes{font-size:11px!important;margin-top:17px!important;}
  .price-card{border-radius:18px;padding:30px;background:var(--panel);box-shadow:0 24px 80px var(--shadow);}.price{font-size:40px;}
  .public-footer{padding-top:28px;margin-top:100px;}
  .modal-card{background:var(--panel);border-radius:18px;}
  @media(max-width:900px){.public-grid{min-height:auto;padding:54px 0;grid-template-columns:1fr;}.hero-copy{text-align:left}.hero-copy>p,.hero-points{margin-left:0;margin-right:0}.lock-card{max-width:560px;margin:0}.public-topbar-links a:not(.top-login){display:none}.feature-grid{grid-template-columns:1fr 1fr}.feature-spotlight{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr}.how-card:not(:last-child):after{content:"↓";right:50%;top:auto;bottom:-21px}}
  @media(max-width:700px){header{padding:13px 14px}header .brand-mark{padding-right:82px}.header-actions{position:absolute;right:12px;top:10px}.header-logout{padding:7px 11px}.public-shell{padding:0 18px 48px}.trial-strip{font-size:11px}.public-grid{padding-top:42px}.hero-copy h2{font-size:43px}.hero-copy>p{font-size:16px}.feature-grid{grid-template-columns:1fr}.public-section{padding:70px 0}.public-section:first-of-type{padding-top:42px}.card{padding:17px}.growth-form,.admin-form-grid{grid-template-columns:1fr 1fr}.admin-form-grid .span-2{grid-column:span 2}.benefit-grid{grid-template-columns:1fr}.feature-spotlight-copy,.feature-forecast,.benefit-card{padding:23px}}
  @media(max-width:700px){
    header #tabnav{display:none;}
    main{padding-bottom:105px;}
    .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:8px;right:8px;bottom:8px;z-index:25;background:var(--overlay-strong);border:1px solid var(--border);border-radius:16px;padding:6px;box-shadow:0 12px 38px var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-transform:translateZ(0);transform:translateZ(0);}
    .mobile-nav button{border:0;background:transparent;color:var(--text-dim);padding:9px 3px;border-radius:10px;font-size:11px;font-weight:750;cursor:pointer;}
    .mobile-nav button.active{background:var(--primary);color:var(--primary-ink);}
    .quick-add{right:16px;bottom:82px;}
  }
  .mini-chart-title{font-size:12px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:26px;}
  .cost-trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-bottom:10px;}
  .cost-trend-head .mini-chart-title{margin-bottom:0;}
  .cost-trend-total{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;flex:0 0 auto;padding-top:1px;}
  .mini-chart{display:flex;align-items:flex-end;gap:6px;height:90px;padding:0 2px;}
  .mini-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;}
  .mini-bar{width:100%;max-width:26px;background:var(--primary);border-radius:4px 4px 0 0;position:relative;min-height:2px;}
  .mini-bar.mini-bar-empty{background:var(--border);}
  .mini-bar-value{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:var(--text-dim);white-space:nowrap;}
  .mini-bar-label{margin-top:6px;font-size:10.5px;color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .mini-bar-sublabel{margin-top:1px;font-size:9px;color:var(--text-dim);opacity:.65;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .mini-chart-empty{font-size:13px;color:var(--text-dim);padding:8px 0;}
  #wellness-trend-charts{display:grid;grid-template-columns:1fr;gap:12px;}.wellness-trend-item{min-width:0;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}.wellness-trend-chart-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;}.wellness-trend-chart-scroll .mini-chart{min-width:720px;}

  /* Estimated Levels (PK), Lab tracking, wellness marker picker */
  .levels-card{margin-bottom:16px;}
  .levels-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .levels-stat-row{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;}
  .levels-stat-row div{min-width:80px;}
  .levels-stat-row b{font-size:16px;}
  .levels-note{font-size:12px;color:var(--text-dim);margin-top:8px;}
  .wellness-marker-option{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;padding:4px 0;}
  .wellness-marker-option input{width:auto;}

  /* Reactive overview: compact, data-driven cards inspired by the clarity of modern trackers */
  .response-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;}
  .response-card{position:relative;min-height:184px;padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:15px;overflow:hidden;cursor:pointer;transition:.18s ease;}
  .response-card:hover{transform:translateY(-2px);border-color:rgba(77,237,170,.55);}
  .response-card-label{font-size:9.5px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);}
  .response-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:8px;}
  .response-card-title{font-size:15px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .response-card-value{font-size:31px;font-weight:850;letter-spacing:-.045em;margin:13px 0 2px;}
  .response-card-sub{font-size:11.5px;color:var(--text-dim);}
  .response-card-footer{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 2px;background:var(--panel);border-top:1px solid rgba(111,159,136,.22);font-size:10.5px;color:var(--text-dim);}
  .response-card-link{border:0;background:none;color:var(--text-dim);padding:0;font:inherit;font-size:10.5px;cursor:pointer;}.response-card-link:hover{color:var(--primary);}
  .dashboard-lab-carousel{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;gap:6px;align-items:center;margin-top:10px;}
  .dashboard-lab-arrow{width:30px;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface-1);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
  .dashboard-lab-arrow:hover,.dashboard-lab-arrow:focus{background:var(--primary-dim);color:var(--primary);border-color:var(--primary);outline:none;}
  .response-spark{height:34px;display:flex;align-items:flex-end;gap:3px;margin-top:9px;}
  .response-spark i{display:block;flex:1;min-width:3px;max-width:18px;border-radius:3px 3px 1px 1px;background:linear-gradient(#4dedaa,#238b61);opacity:.9;}
  .response-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
  .response-chip{font-size:10px;color:var(--text-dim);border:1px solid rgba(122,165,145,.3);border-radius:999px;padding:4px 7px;background:rgba(255,255,255,.025);}
  .signal-panel{border-color:rgba(77,237,170,.32);background:linear-gradient(145deg,rgba(11,34,24,.98),rgba(6,23,16,.98));}
  .signal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
  .signal-row{display:grid;grid-template-columns:8px 1fr auto;align-items:start;gap:10px;padding:12px 0;border-top:1px solid var(--border);}
  .signal-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);margin-top:6px;box-shadow:0 0 12px rgba(255,186,74,.35);}
  .signal-row.good .signal-dot{background:var(--primary);box-shadow:0 0 12px rgba(77,237,170,.35);}
  .signal-row.info .signal-dot{background:#5ed8ff;box-shadow:0 0 12px rgba(94,216,255,.35);}
  .signal-copy{font-size:13.5px;line-height:1.48;}
  .signal-meta{font-size:10.5px;color:var(--text-dim);margin-top:3px;}
  [data-theme="light"] .signal-panel{background:linear-gradient(145deg,var(--panel),var(--panel-2));border-color:rgba(15,157,110,.32);}
  [data-theme="light"] .signal-panel .signal-row{border-color:var(--border);}
  [data-theme="light"] .signal-panel .signal-dot{box-shadow:0 0 10px rgba(15,157,110,.2);}
  .history-toolbar{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(5,minmax(125px,auto));gap:10px;align-items:end;margin-bottom:10px;}
  .today-overview{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:16px;margin-top:18px;align-items:start;}
  .today-panel{background:var(--panel);border:1px solid var(--border);border-radius:17px;padding:20px;}
  .today-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
  .today-panel-kicker{font-size:9.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;}
  .today-panel-title{font-size:19px;font-weight:850;letter-spacing:-.025em;}
  .level-selector{width:auto;max-width:230px;padding:8px 10px;font-size:12px;}
  .level-current{display:flex;align-items:end;gap:8px;margin:4px 0 8px;}.level-current strong{font-size:35px;line-height:1;letter-spacing:-.055em}.level-current span{font-size:11px;color:var(--text-dim);margin-bottom:3px}
  .level-line-chart{width:100%;height:190px;display:block;overflow:visible}.level-grid-line{stroke:var(--chart-grid);stroke-width:1}.level-area{fill:url(#level-area-gradient)}.level-line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.level-point{fill:var(--primary);stroke:var(--panel);stroke-width:3}.level-axis-label{fill:var(--text-dim);font-size:9px}.level-chart-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(100,151,127,.2);font-size:11px;color:var(--text-dim)}
  .trend-current{display:flex;align-items:baseline;gap:8px;margin:2px 0 2px;}.trend-current strong{font-size:32px;line-height:1;letter-spacing:-.05em}.trend-current span{font-size:11.5px;color:var(--text-dim)}
  .trend-delta{font-size:12.5px;color:var(--text-dim);margin-bottom:10px;}
  .trend-chart{width:100%;height:190px;display:block;overflow:visible;margin-top:4px;}
  .trend-chart.compact{height:110px;margin-top:0;}
  .trend-grid-line{stroke:var(--chart-grid);stroke-width:1}
  .trend-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .trend-chart.compact .trend-line{stroke-width:2;}
  .trend-point{stroke:var(--panel);stroke-width:3}
  .trend-chart.compact .trend-point{stroke-width:2;}
  .trend-axis-label{fill:var(--text-dim);font-size:9px}
  .trend-dose-line{stroke:var(--chart-dose-line);stroke-width:1;stroke-dasharray:3,3;}
  .trend-dose-label{fill:var(--text-dim);font-size:8px;font-weight:600;}
  .trend-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(100,151,127,.2);}
  .dose-period+.dose-period{margin-top:18px}.dose-period-label{font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.dose-stack{display:grid;gap:8px}.today-dose{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:11px;align-items:center;background:rgba(255,255,255,.025);border:1px solid rgba(104,154,131,.22);border-radius:12px;padding:11px 12px;transition:.16s ease}.today-dose:hover{border-color:rgba(77,237,170,.45);background:rgba(77,237,170,.035)}.today-dose.done{opacity:.65}.today-dose-accent{height:100%;min-height:42px;border-radius:99px;background:var(--primary)}.today-dose.done .today-dose-accent{background:var(--muted-accent)}.today-dose-name{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.today-dose-meta{font-size:10.5px;color:var(--text-dim);margin-top:3px}.today-dose-action{display:flex;align-items:center;gap:7px}.today-dose-action input{width:21px;height:21px;accent-color:var(--primary)}
  @media(max-width:900px){.response-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:1100px){.history-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.history-toolbar>div:first-child{grid-column:1/-1}}
  @media(max-width:900px){.today-overview{grid-template-columns:1fr}}
  @media(max-width:600px){.response-grid{grid-template-columns:1fr}.response-card{min-height:170px}.history-toolbar{grid-template-columns:1fr}.history-toolbar select{width:100%!important}.today-panel{padding:15px}.level-line-chart{height:160px}.trend-chart:not(.compact){height:160px}.level-selector{max-width:180px}}

  /* site-wide disclaimer bar + floating social rail */
  .disclaimer-bar{position:sticky;top:0;z-index:60;background:var(--surface-2);color:var(--text);text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:9px 16px;border-bottom:1px solid var(--border);}
  .disclaimer-bar b{color:var(--primary);font-weight:700;}
  @media(max-width:700px){.disclaimer-bar{font-size:10.5px;padding:8px 10px;}}
  .social-rail{position:fixed;top:50%;right:18px;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px;}
  .social-rail a{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);background:var(--panel);transition:.15s ease;}
  .social-rail a:hover{color:var(--primary);border-color:var(--primary);}
  .social-rail svg{width:16px;height:16px;}
  @media(max-width:900px){.social-rail{display:none;}}

  .age-gate{position:fixed;inset:0;z-index:2000;background:rgba(4,20,12,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;}
  .age-gate-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 80px var(--shadow);}
  .age-gate-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:16px;margin-bottom:20px;color:var(--text);}
  .age-gate-brand svg{color:var(--primary);}
  .age-gate-card h2{font-size:19px;margin:0 0 10px;}
  .age-gate-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0 0 22px;}
  .age-gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .age-gate-actions button{border:none;border-radius:8px;padding:12px 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
  .age-gate-yes{background:var(--primary);color:var(--primary-ink);}
  .age-gate-yes:hover{filter:brightness(1.08);}
  .age-gate-no{background:transparent;color:var(--text-dim);border:1px solid var(--border);}
  .age-gate-no:hover{color:var(--text);border-color:var(--text-dim);}
  .age-gate-blocked{font-size:13.5px;color:var(--text-dim);line-height:1.6;}
  .age-gate-blocked a{color:var(--primary);}

  /* Extra mobile tightening — layered after the visual refresh above so it actually wins the cascade */
  @media(max-width:480px){
    .card{padding:14px;}
    .section-title{font-size:14px;margin:20px 0 8px;}
    main{padding:16px 14px 78px;}
    .stat-card .value{font-size:20px;}
    .mini-chart-title{margin-bottom:18px;}
  }

  /* Mobile navigation lives at the top and remains available while scrolling. */
  @media(max-width:700px){
    header{position:relative;top:auto;}
    .mobile-nav{
      position:sticky;
      top:0;
      left:auto;
      right:auto;
      bottom:auto;
      z-index:70;
      margin:0;
      padding:7px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left));
      border-width:1px 0;
      border-radius:0;
      box-shadow:0 10px 28px var(--shadow);
      -webkit-transform:translateZ(0);
      transform:translateZ(0);
    }
    .mobile-nav button{min-width:0;padding:10px 2px;}
    .mobile-more-sheet{
      top:calc(58px + env(safe-area-inset-top));
      bottom:auto;
      max-height:calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overscroll-behavior:contain;
    }
    .quick-add{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
    .feedback-fab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
    #tab-track>.subnav{
      display:flex;
      flex-wrap:nowrap;
      gap:6px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-snap-type:x proximity;
      scrollbar-width:none;
      padding:5px;
      -webkit-overflow-scrolling:touch;
    }
    #tab-track>.subnav::-webkit-scrollbar{display:none;}
    #tab-track>.subnav button{
      flex:0 0 auto;
      min-width:max-content;
      padding:10px 15px;
      font-size:12px;
      scroll-snap-align:start;
    }
  }


  .progress-history-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:9px}
  .progress-history-nav .pager-center{font-size:11px;color:var(--text-dim);text-align:center;flex:1;min-width:160px}
  .progress-history-nav button[disabled]{opacity:.4;cursor:not-allowed}
  .progress-edit-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
  .progress-edit-btn{white-space:nowrap}
  .progress-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .progress-edit-grid .full{grid-column:1/-1}
  @media(max-width:700px){.progress-edit-grid{grid-template-columns:1fr}.progress-edit-grid .full{grid-column:auto}}


  .pk-interactive-chart{position:relative;touch-action:pan-y}
  .pk-interactive-chart svg{cursor:crosshair}
  .pk-chart-tooltip{
    position:fixed;z-index:8;pointer-events:none;min-width:190px;max-width:270px;
    padding:9px 10px;border:1px solid var(--border);border-radius:10px;
    background:color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:11px;line-height:1.35;color:var(--text);
    transform:none;
  }
  .pk-chart-tooltip[hidden]{display:none}
  .pk-chart-tooltip-time{font-weight:800;margin-bottom:6px}
  .pk-chart-tooltip-row{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:3px 0}
  .pk-chart-tooltip-name{display:flex;align-items:center;gap:6px;min-width:0}
  .pk-chart-tooltip-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .pk-chart-tooltip-value{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
  .pk-chart-tooltip-note{margin-top:6px;padding-top:5px;border-top:1px solid var(--border);color:var(--text-dim);font-size:9.5px}
  .pk-chart-help{font-size:10.5px;color:var(--text-dim);margin:5px 0 0}
  @media(max-width:600px){.pk-chart-tooltip{min-width:165px;max-width:220px;font-size:10px}}


  .pk-zoom-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:5px 0 2px}
  .pk-zoom-toolbar .pk-zoom-label{font-size:10px;color:var(--text-dim);margin-right:2px}
  .pk-zoom-toolbar button{min-width:34px}


  .pk-mini-zoom{display:flex;align-items:center;gap:5px;margin-left:auto}
  .pk-mini-zoom button{min-width:32px}


  .pk-long-range-note{font-size:10.5px;color:var(--text-dim);margin:5px 0 0}


  #levels-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    align-items:start;
  }
  #levels-cards > .card{
    margin:0 !important;
    min-width:0;
  }
  #levels-cards .levels-card-chart,
  #levels-cards .trend-chart{
    width:100%;
  }
  @media(max-width:1200px){
    #levels-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media(max-width:900px){
    #levels-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:620px){
    #levels-cards{grid-template-columns:1fr;}
  }


  #levels-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
  }
  .levels-selector-card{
    border:1px solid var(--border);
    border-radius:12px;
    padding:11px 12px;
    background:var(--panel);
    min-width:0;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .levels-selector-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));}
  .levels-selector-card.selected{
    border-color:var(--primary);
    background:color-mix(in srgb,var(--primary) 7%,var(--panel));
  }
  .levels-selector-top{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
  .levels-selector-name{font-weight:800;font-size:13px;line-height:1.2}
  .levels-selector-meta{font-size:10.5px;color:var(--text-dim);margin-top:4px;line-height:1.35}
  .levels-selector-current{font-size:17px;font-weight:900;margin-top:9px;line-height:1}
  .levels-selector-current span{font-size:9.5px;font-weight:500;color:var(--text-dim);margin-left:3px}
  .levels-selector-check{width:18px;height:18px;flex:0 0 auto;margin:0}
  #levels-deep-dive-workspace{margin-top:14px}
  .levels-deep-dive-card{padding:15px}
  .levels-deep-dive-empty{padding:28px 16px;text-align:center;color:var(--text-dim)}
  .levels-selection-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
  .levels-selection-count{font-size:11px;color:var(--text-dim)}
  @media(max-width:1200px){#levels-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:850px){#levels-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:560px){#levels-cards{grid-template-columns:1fr;}}


  #levels-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
    align-items:stretch;
  }
  .levels-selector-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:84px;
    padding:10px 11px;
  }
  .levels-selector-main{
    min-width:0;
    flex:1 1 auto;
  }
  .levels-selector-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .levels-selector-name{
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .levels-selector-meta{
    font-size:9.5px;
    line-height:1.3;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .levels-selector-bottom{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:7px;
    flex-wrap:wrap;
  }
  .levels-selector-current{
    font-size:15px;
    margin:0;
    white-space:nowrap;
  }
  .levels-selector-current span{
    font-size:9px;
    margin-left:3px;
  }
  .levels-selector-card .pill{
    font-size:9px;
    padding:4px 7px;
    white-space:nowrap;
  }
  .levels-selector-check{
    width:17px;
    height:17px;
    margin:0;
    flex:0 0 auto;
  }
  @media(max-width:1200px){
    #levels-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media(max-width:850px){
    #levels-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:560px){
    #levels-cards{grid-template-columns:1fr;}
  }


  .progress-overview-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 0 6px;
  }
  .progress-overview-toolbar .muted{font-size:10.5px}
  .progress-lane-pager{
    display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 2px;
  }
  .progress-lane-pager span{font-size:10.5px;color:var(--text-dim)}
  .progress-lane-chart svg{width:100%;height:auto;display:block}
  .progress-group-summary{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;
  }
  .progress-group-summary .card{padding:9px 10px}
  @media(max-width:720px){.progress-group-summary{grid-template-columns:1fr}}


  .progress-overlay-selector{
    margin-top:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden;
  }
  .progress-overlay-selector-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
    padding:9px 10px;border-bottom:1px solid var(--border);
  }
  .progress-overlay-selector-head strong{font-size:11px}
  .progress-overlay-selector-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .progress-overlay-table-wrap{max-height:260px;overflow:auto}
  .progress-overlay-table{width:100%;border-collapse:collapse;font-size:11px}
  .progress-overlay-table th{
    position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;
    padding:7px 9px;border-bottom:1px solid var(--border);font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim)
  }
  .progress-overlay-table td{padding:7px 9px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
  .progress-overlay-table tr:last-child td{border-bottom:0}
  .progress-overlay-table tr.selected{background:color-mix(in srgb,var(--primary) 6%,var(--panel))}
  .progress-overlay-table label{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0}
  .progress-overlay-table input{margin:0}
  .progress-overlay-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
  .progress-overlay-group{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
  .progress-overlay-latest{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
  .progress-view-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 0 5px;
  }
  .progress-view-zoom{display:flex;align-items:center;gap:5px}
  .progress-view-zoom .label{font-size:10px;color:var(--text-dim);margin-right:2px}
  .progress-view-zoom button.active{background:var(--primary);color:white;border-color:var(--primary)}
  .progress-overlaid-chart-note{font-size:10.5px;color:var(--text-dim);margin-top:5px}


  .progress-chart-interactive{position:relative}
  .progress-chart-interactive svg{cursor:crosshair}
  .progress-chart-tooltip{
    position:fixed;z-index:9999;pointer-events:none;min-width:190px;max-width:280px;
    padding:9px 10px;border:1px solid var(--border);border-radius:10px;
    background:color-mix(in srgb,var(--panel) 97%,transparent);
    box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:11px;line-height:1.35;color:var(--text);
  }
  .progress-chart-tooltip[hidden]{display:none}
  .progress-chart-tooltip-time{font-weight:800;margin-bottom:6px}
  .progress-chart-tooltip-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:3px 0}
  .progress-chart-tooltip-name{display:flex;align-items:center;gap:6px;min-width:0}
  .progress-chart-tooltip-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .progress-chart-tooltip-value{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .progress-chart-crosshair{stroke:var(--text-dim);stroke-width:1;stroke-dasharray:3 3;opacity:.7}


  .dashboard-selector-table{
    width:100%;border-collapse:collapse;font-size:11px;
  }
  .dashboard-selector-table-wrap{
    max-height:250px;overflow:auto;border:1px solid var(--border);border-radius:10px;margin:8px 0;
  }
  .dashboard-selector-table th{
    position:sticky;top:0;z-index:2;background:var(--panel);
    padding:7px 9px;text-align:left;border-bottom:1px solid var(--border);
    font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);
  }
  .dashboard-selector-table td{padding:7px 9px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
  .dashboard-selector-table tr:last-child td{border-bottom:0}
  .dashboard-selector-table tr.selected{background:color-mix(in srgb,var(--primary) 6%,var(--panel))}
  .dashboard-selector-table label{display:flex;align-items:center;gap:7px;cursor:pointer;margin:0}
  .dashboard-selector-table input{margin:0}
  .dashboard-selector-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
  .dashboard-selector-latest{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .dashboard-time-zoom{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:7px 0}
  .dashboard-time-zoom .label{font-size:10px;color:var(--text-dim);margin-right:2px}
  .dashboard-time-zoom .window{font-size:10px;color:var(--text-dim);min-width:82px;text-align:center}


  .dashboard-bubble-selector{
    max-height:250px;
    overflow:auto;
    padding:8px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    margin:8px 0;
  }
  .dashboard-bubble-group{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
  }
  .dashboard-bubble{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--border);
    background:var(--surface-1);
    color:var(--text-dim);
    border-radius:999px;
    padding:7px 10px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    line-height:1;
    white-space:nowrap;
  }
  .dashboard-bubble:hover{
    border-color:var(--primary);
    color:var(--primary);
  }
  .dashboard-bubble.active{
    background:color-mix(in srgb,var(--primary) 10%,var(--surface-1));
    color:var(--primary);
    border-color:color-mix(in srgb,var(--primary) 65%,var(--border));
  }
  .dashboard-bubble .dot{
    width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto;
  }
  .dashboard-bubble .value{
    font-size:9.5px;
    font-weight:600;
    color:inherit;
    opacity:.8;
  }
  .dashboard-bubble-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }
  .dashboard-bubble-head strong{font-size:11px}


  .dashboard-bubble-selector{
    max-height:230px;
    overflow:auto;
    padding:8px 9px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    margin:8px 0;
  }
  .dashboard-bubble-selected{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:7px 0 8px;
    margin-bottom:7px;
    border-bottom:1px solid var(--border);
  }
  .dashboard-bubble-selected:empty{display:none}
  .dashboard-bubble-group-block{margin-top:8px}
  .dashboard-bubble-group-block:first-child{margin-top:0}
  .dashboard-bubble-group-label{
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-dim);
    margin:0 0 5px;
  }
  .dashboard-bubble-group{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }
  .dashboard-bubble{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid var(--border);
    background:var(--surface-1);
    color:var(--text-dim);
    border-radius:999px;
    padding:6px 9px;
    font-size:10.5px;
    font-weight:700;
    cursor:pointer;
    line-height:1;
    white-space:nowrap;
    max-width:100%;
  }
  .dashboard-bubble:hover{
    border-color:var(--primary);
    color:var(--primary);
  }
  .dashboard-bubble.active{
    background:color-mix(in srgb,var(--primary) 10%,var(--surface-1));
    color:var(--primary);
    border-color:color-mix(in srgb,var(--primary) 65%,var(--border));
  }
  .dashboard-bubble .dot{
    width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto;
  }
  .dashboard-bubble .value{display:none}
  .dashboard-bubble-selected .dashboard-bubble{
    padding:6px 9px;
    font-size:10.5px;
  }
  .dashboard-bubble-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }
  .dashboard-bubble-head strong{font-size:11px}
  .dashboard-bubble-hint{font-size:9.5px;color:var(--text-dim)}


  /* Labs page: same interaction model as Levels Deep Dive */
  #lab-trend-cards{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:12px !important;
  }
  .lab-selector-card{
    display:block;
    min-width:0;
    margin:0 !important;
    padding:10px 11px !important;
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:12px;
    background:var(--panel);
    cursor:pointer;
    box-shadow:none !important;
    transition:border-color .15s ease,background .15s ease,transform .15s ease;
  }
  .lab-selector-card:hover{border-color:var(--primary)}
  .lab-selector-card.selected{
    border-color:var(--primary);
    background:color-mix(in srgb,var(--primary) 7%,var(--panel));
  }
  .lab-selector-top{
    display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  }
  .lab-selector-name{
    font-size:13px;font-weight:800;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .lab-selector-meta{
    margin-top:4px;font-size:9.5px;line-height:1.25;color:var(--text-dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .lab-selector-bottom{
    display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;margin-top:8px;
  }
  .lab-selector-current{
    font-size:15px;font-weight:900;line-height:1;white-space:nowrap;
  }
  .lab-selector-current span{
    font-size:8.5px;font-weight:500;color:var(--text-dim);margin-left:3px;
  }
  .lab-selector-card .pill{
    font-size:8.5px;padding:4px 6px;white-space:nowrap;
  }
  .lab-selector-check{
    width:17px;height:17px;margin:0;flex:0 0 auto;
  }
  .lab-deep-dive-card{padding:15px !important}
  .lab-deep-dive-empty{
    padding:28px 16px;text-align:center;color:var(--text-dim);
  }
  .lab-selected-chips{
    display:flex;flex-wrap:wrap;gap:6px;margin:9px 0;
  }
  @media(max-width:1200px){#lab-trend-cards{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
  @media(max-width:850px){#lab-trend-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
  @media(max-width:560px){#lab-trend-cards{grid-template-columns:1fr !important;}}


  /* Safe Labs reorder: keep original DOM intact, only change visual order when Labs is active */
  #tab-labs.active{
    display:flex !important;
    flex-direction:column;
  }
  #tab-labs.active > :nth-child(3){order:1;}  /* Lab Trends heading */
  #tab-labs.active > :nth-child(4){order:2;}  /* status legend */
  #tab-labs.active > :nth-child(5){order:3;}  /* context summary */
  #tab-labs.active > :nth-child(6){order:4;}  /* Labs Deep Dive */
  #tab-labs.active > :nth-child(7){order:5;}  /* marker selector cards */
  #tab-labs.active > :nth-child(1){order:6;margin-top:16px;} /* Log a Lab Value */
  #tab-labs.active > :nth-child(2){order:7;}  /* Import Lab CSV */
  #tab-labs.active > :nth-child(8){order:8;}  /* clinician targets */
  #tab-labs.active > :nth-child(9){order:9;}  /* Lab History */

  #tab-labs.active > :nth-child(3){
    margin-top:0;
  }


  /* Dashboard standardization: the three primary analytic panels share one layout system */
  #dashboard-level-panel,
  #dashboard-weight-panel,
  #dashboard-lab-panel > .response-card{
    box-sizing:border-box;
    border-radius:16px !important;
  }

  #dashboard-level-panel,
  #dashboard-weight-panel,
  #dashboard-lab-panel > .response-card{
    padding:18px !important;
  }

  #dashboard-level-panel .today-panel-head,
  #dashboard-weight-panel .today-panel-head,
  #dashboard-lab-panel .today-panel-head{
    min-height:46px;
    margin-bottom:10px;
    align-items:flex-start;
  }

  #dashboard-level-panel .today-panel-kicker,
  #dashboard-weight-panel .today-panel-kicker,
  #dashboard-lab-panel .today-panel-kicker{
    font-size:9px;
    letter-spacing:.09em;
  }

  #dashboard-level-panel .today-panel-title,
  #dashboard-weight-panel .today-panel-title,
  #dashboard-lab-panel .today-panel-title{
    font-size:18px;
    line-height:1.15;
  }

  .dashboard-panel-section{
    margin-top:10px;
  }

  .dashboard-panel-controls{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin:8px 0;
  }

  .dashboard-panel-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }

  .dashboard-panel-count{
    font-size:10px;
    color:var(--text-dim);
    white-space:nowrap;
  }

  /* All selector areas have the same footprint, even when many items are selected. */
  #dashboard-level-panel .dashboard-bubble-selector,
  #dashboard-weight-panel .dashboard-bubble-selector,
  #dashboard-lab-panel .dashboard-bubble-selector{
    max-height:132px !important;
    min-height:44px;
    overflow:auto;
    margin:7px 0 10px !important;
    padding:7px 8px 8px !important;
  }

  #dashboard-level-panel .chip-picker{
    margin:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Keep selected bubbles from consuming the entire panel. */
  #dashboard-weight-panel .dashboard-bubble-selected,
  #dashboard-lab-panel .dashboard-bubble-selected{
    padding:3px 0 7px;
    margin-bottom:6px;
  }

  #dashboard-level-panel .chip,
  #dashboard-weight-panel .dashboard-bubble,
  #dashboard-lab-panel .dashboard-bubble{
    min-height:25px;
    padding:5px 8px;
    font-size:10px;
  }

  /* Controls look and align the same across trend panels. */
  #dashboard-weight-panel .trend-range-controls,
  #dashboard-lab-panel .trend-range-controls{
    margin:8px 0 5px;
  }

  #dashboard-weight-panel .dashboard-time-zoom,
  #dashboard-lab-panel .dashboard-time-zoom{
    min-height:29px;
    margin:5px 0 7px;
  }

  /* Chart regions have a predictable reading area. */
  .dashboard-chart-stage{
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:5px;
  }

  #dashboard-level-panel .pk-chart-wrap,
  #dashboard-weight-panel .progress-chart-interactive,
  #dashboard-lab-panel .progress-chart-interactive{
    width:100%;
  }

  #dashboard-weight-panel .progress-chart-interactive svg,
  #dashboard-lab-panel .progress-chart-interactive svg{
    width:100%;
    min-height:185px;
  }

  /* Dense summaries and legends scroll locally instead of stretching cards vertically. */
  .dashboard-summary-strip{
    max-height:42px;
    overflow:auto;
    font-size:10.5px !important;
    line-height:1.5;
    margin:6px 0 !important;
  }

  #dashboard-weight-panel .trend-legend,
  #dashboard-lab-panel .trend-legend,
  #dashboard-weight-panel .level-chart-meta + .trend-legend,
  #dashboard-lab-panel .level-chart-meta + .trend-legend{
    max-height:72px;
    overflow:auto;
  }

  #dashboard-weight-panel .level-chart-meta,
  #dashboard-lab-panel .level-chart-meta,
  #dashboard-level-panel .level-chart-meta{
    margin-top:8px;
    padding-top:8px;
    font-size:9.5px;
    line-height:1.35;
  }

  /* Make action buttons consistently compact. */
  #dashboard-level-panel .btn.small,
  #dashboard-weight-panel .btn.small,
  #dashboard-lab-panel .btn.small{
    min-height:27px;
    padding:5px 9px;
  }

  @media(max-width:720px){
    #dashboard-level-panel,
    #dashboard-weight-panel,
    #dashboard-lab-panel > .response-card{
      padding:14px !important;
    }

    .dashboard-panel-controls{
      align-items:flex-start;
      flex-direction:column;
    }

    .dashboard-panel-actions{
      width:100%;
    }

    #dashboard-level-panel .dashboard-bubble-selector,
    #dashboard-weight-panel .dashboard-bubble-selector,
    #dashboard-lab-panel .dashboard-bubble-selector{
      max-height:150px !important;
    }

    .dashboard-chart-stage{min-height:190px;}
  }


  /* Dashboard top area uses two independent vertical columns.
     This removes the large blank row created when the Levels card is much
     taller than Scheduled Doses. */
  .dashboard-top-columns{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
    gap:16px;
    margin-top:18px;
    align-items:start;
  }

  .dashboard-top-column{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
  }

  .dashboard-top-column > .today-panel{
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* The old grid containers are no longer used for these four cards. */
  .today-overview,
  .dashboard-compact-grid{
    margin-top:0;
  }

  @media(max-width:900px){
    .dashboard-top-columns{
      grid-template-columns:1fr;
    }
  }


  /* Compact 2x2 dashboard top section */
  .dashboard-top-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
    align-items:start;
  }

  .dashboard-top-grid > .today-panel{
    min-width:0;
    padding:14px !important;
  }

  /* Shrink Today in your system so the first row stays balanced */
  .dashboard-level-card #dashboard-level-panel .today-panel-head{
    margin-bottom:7px;
    min-height:38px;
  }

  .dashboard-level-card #dashboard-level-panel .today-panel-title{
    font-size:16px;
  }

  .dashboard-level-card #dashboard-level-panel .dashboard-bubble-head{
    margin-bottom:4px;
  }

  .dashboard-level-card #dashboard-level-panel .dashboard-bubble-hint{
    display:none;
  }

  .dashboard-level-card #dashboard-level-panel .dashboard-bubble-selector{
    max-height:70px !important;
    min-height:0 !important;
    padding:5px 6px !important;
    margin:4px 0 6px !important;
  }

  .dashboard-level-card #dashboard-level-panel .chip{
    min-height:22px;
    padding:4px 7px;
    font-size:9.5px;
  }

  .dashboard-level-card #dashboard-level-panel .level-current{
    margin:3px 0 5px;
  }

  .dashboard-level-card #dashboard-level-panel .level-current strong{
    font-size:28px;
  }

  .dashboard-level-card #dashboard-level-panel .dashboard-chart-stage{
    min-height:145px;
    margin-top:2px;
  }

  .dashboard-level-card #dashboard-level-panel .pk-chart-wrap svg{
    max-height:145px;
  }

  .dashboard-level-card #dashboard-level-panel .level-chart-meta{
    margin-top:5px;
    padding-top:5px;
    font-size:8.75px;
  }

  /* Keep the smaller cards visually aligned in row two */
  .dashboard-checkin-card,
  .dashboard-progress-card{
    min-height:150px;
  }

  @media(max-width:900px){
    .dashboard-top-grid{
      grid-template-columns:1fr;
    }
  }


  /* Six primary dashboard cards in exactly two rows on desktop */
  .dashboard-main-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
    align-items:start;
  }

  .dashboard-main-grid > .today-panel{
    min-width:0;
    width:100%;
    box-sizing:border-box;
    padding:13px !important;
  }

  /* Keep each card compact enough for the 3-column layout */
  .dashboard-main-grid .today-panel-head{
    min-height:34px !important;
    margin-bottom:6px !important;
  }

  .dashboard-main-grid .today-panel-title{
    font-size:15px !important;
  }

  .dashboard-main-grid .today-panel-kicker{
    font-size:8px !important;
    margin-bottom:3px !important;
  }

  .dashboard-main-grid .btn.small{
    min-height:24px !important;
    padding:4px 7px !important;
    font-size:9px !important;
  }

  .dashboard-main-grid .dashboard-bubble-head{
    margin-bottom:3px !important;
  }

  .dashboard-main-grid .dashboard-bubble-hint{
    display:none;
  }

  .dashboard-main-grid .dashboard-bubble-selector{
    max-height:78px !important;
    min-height:0 !important;
    padding:5px 6px !important;
    margin:4px 0 6px !important;
  }

  .dashboard-main-grid .dashboard-bubble,
  .dashboard-main-grid .chip{
    min-height:21px !important;
    padding:4px 6px !important;
    font-size:8.8px !important;
  }

  .dashboard-main-grid .dashboard-panel-count{
    font-size:8.5px !important;
  }

  .dashboard-main-grid .trend-range-controls{
    margin:5px 0 3px !important;
    gap:6px !important;
  }

  .dashboard-main-grid .trend-range-controls label{
    font-size:8px !important;
  }

  .dashboard-main-grid .trend-range-controls select,
  .dashboard-main-grid .trend-range-controls input{
    min-width:90px !important;
    padding:4px 6px !important;
    font-size:9px !important;
  }

  .dashboard-main-grid .dashboard-time-zoom{
    margin:3px 0 5px !important;
    min-height:24px !important;
    gap:4px !important;
    font-size:8.5px !important;
  }

  .dashboard-main-grid .dashboard-chart-stage{
    min-height:138px !important;
    margin-top:2px !important;
  }

  .dashboard-main-grid .progress-chart-interactive svg,
  .dashboard-main-grid .pk-chart-wrap svg{
    max-height:145px !important;
    min-height:0 !important;
  }

  .dashboard-main-grid .level-current strong,
  .dashboard-main-grid .response-card-value{
    font-size:26px !important;
  }

  .dashboard-main-grid .level-chart-meta,
  .dashboard-main-grid .response-card-footer{
    font-size:8.5px !important;
    margin-top:4px !important;
    padding-top:5px !important;
  }

  .dashboard-main-grid .dashboard-summary-strip{
    max-height:28px !important;
    font-size:8.8px !important;
    line-height:1.35 !important;
  }

  .dashboard-main-grid .trend-legend{
    max-height:48px !important;
    overflow:auto !important;
  }

  .dashboard-main-grid .response-card{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* Second row cards need the same compact footprint */
  .dashboard-progress-card,
  .dashboard-weight-card,
  .dashboard-lab-card{
    min-height:0 !important;
  }

  @media(max-width:1180px){
    .dashboard-main-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  @media(max-width:720px){
    .dashboard-main-grid{
      grid-template-columns:1fr;
    }
  }


  /* Multi-series dashboard charts use stacked lanes like Today in your system. */
  .dashboard-main-grid .dashboard-lane-stage{
    min-height:0 !important;
    height:auto !important;
    justify-content:flex-start !important;
  }
  .dashboard-main-grid .dashboard-lane-stage .progress-lane-chart svg{
    max-height:none !important;
    height:auto !important;
    width:100% !important;
    min-height:0 !important;
  }
  .dashboard-main-grid .progress-lane-chart{
    width:100%;
  }
  .dashboard-main-grid .progress-lane-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:5px 0 2px;
    font-size:8.5px;
    color:var(--text-dim);
  }


  #dashboard-lab-panel .dashboard-lab-carousel-nav{
    display:grid;
    grid-template-columns:30px 1fr 30px;
    align-items:center;
    gap:8px;
  }
  #dashboard-lab-panel .lab-personal-insight{
    margin-top:8px;
    padding:9px 10px;
    border-radius:10px;
  }
  #dashboard-lab-panel .lab-personal-insight-head{font-size:10.5px}
  #dashboard-lab-panel .lab-personal-insight-summary{
    font-size:9.5px;
    line-height:1.45;
    margin-top:5px;
  }
  #dashboard-lab-panel .lab-personal-insight details{margin-top:5px}
  #dashboard-lab-panel .lab-personal-insight summary{font-size:9px}
  #dashboard-lab-panel .lab-personal-insight-more{font-size:9px}
  #dashboard-lab-panel .lab-personal-insight-updated{font-size:8px}


  /* Dashboard layout: fixed two-column rows with equal-height cards */
  .dashboard-main-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
  }

  .dashboard-main-grid > .today-panel{
    height:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:flex;
    flex-direction:column;
  }

  .dashboard-main-grid > .today-panel > div{
    flex:1 1 auto;
    min-width:0;
  }

  /* Let each row equalize to the taller card without forcing all rows
     to share one global height. */
  .dashboard-main-grid{
    grid-auto-rows:auto;
  }

  /* Keep paired cards visually balanced */
  .dashboard-level-card,
  .dashboard-schedule-card,
  .dashboard-checkin-card,
  .dashboard-progress-card,
  .dashboard-weight-card,
  .dashboard-lab-card{
    width:100%;
  }

  /* Preserve compact spacing while allowing shorter cards to fill the row */
  .dashboard-schedule-card #dashboard-period-schedule,
  .dashboard-checkin-card #dashboard-checkin-panel,
  .dashboard-progress-card #dashboard-progress-snapshot{
    height:100%;
  }

  @media(max-width:720px){
    .dashboard-main-grid{
      grid-template-columns:1fr !important;
    }
  }


  #dashboard-checkin-panel .dashboard-checkin-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    margin:6px 0 8px;
  }
  #dashboard-checkin-panel .dashboard-checkin-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:7px;
  }
  #dashboard-checkin-panel .dashboard-checkin-field{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px;
    gap:7px;
    align-items:center;
    padding:6px 7px;
    border:1px solid var(--border);
    border-radius:9px;
    background:color-mix(in srgb,var(--panel) 94%,var(--border));
  }
  #dashboard-checkin-panel .dashboard-checkin-field label{
    font-size:9.5px;
    font-weight:750;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #dashboard-checkin-panel .dashboard-checkin-field select{
    min-width:0;
    width:100%;
    padding:5px 6px;
    font-size:9px;
    margin:0;
  }
  #dashboard-checkin-panel .dashboard-marker-editor{
    display:none;
    margin-top:8px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-1);
  }
  #dashboard-checkin-panel .dashboard-marker-editor.open{display:block}
  #dashboard-checkin-panel .dashboard-marker-options{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:6px;
  }
  #dashboard-checkin-panel .dashboard-marker-option{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:9px;
    cursor:pointer;
    background:var(--panel);
  }
  #dashboard-checkin-panel .dashboard-marker-option input{margin:0}
  #dashboard-checkin-panel .dashboard-marker-option.active{
    border-color:var(--primary);
    color:var(--primary);
    background:color-mix(in srgb,var(--primary) 8%,var(--panel));
  }
  #dashboard-checkin-panel .dashboard-marker-editor-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:7px;
  }
  @media(max-width:980px){
    #dashboard-checkin-panel .dashboard-checkin-fields{grid-template-columns:1fr}
  }


  /* Daily Check-in: prevent fields from being clipped by the compact dashboard card */
  .dashboard-checkin-card{
    overflow:visible !important;
  }

  #dashboard-checkin-panel,
  #dashboard-checkin-panel > .response-card{
    overflow:visible !important;
    height:auto !important;
    min-height:0 !important;
  }

  #dashboard-checkin-panel .dashboard-checkin-fields{
    margin-bottom:10px !important;
  }

  #dashboard-checkin-panel .dashboard-checkin-field{
    min-height:44px;
  }

  #dashboard-checkin-panel .response-spark,
  #dashboard-checkin-panel .mini-chart,
  #dashboard-checkin-panel svg{
    margin-top:8px;
  }

  #dashboard-checkin-panel .response-card-footer{
    position:static !important;
    margin-top:10px !important;
    padding-top:8px !important;
    clear:both;
  }

  /* Keep all selected markers visible before the footer. */
  #dashboard-checkin-panel .dashboard-checkin-fields{
    max-height:none !important;
    overflow:visible !important;
  }

  @media(max-width:980px){
    #dashboard-checkin-panel .dashboard-checkin-fields{
      grid-template-columns:1fr !important;
    }
  }


  #dashboard-progress-snapshot .dashboard-progress-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin:10px 0;
  }
  #dashboard-progress-snapshot .dashboard-progress-action{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-1);
    color:var(--text);
    font-size:10px;
    font-weight:800;
    cursor:pointer;
  }
  #dashboard-progress-snapshot .dashboard-progress-action:hover{
    border-color:var(--primary);
    color:var(--primary);
  }
  #dashboard-progress-snapshot .dashboard-progress-quick-form{
    display:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:8px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:10px;
    background:color-mix(in srgb,var(--panel) 95%,var(--border));
  }
  #dashboard-progress-snapshot .dashboard-progress-quick-form.open{display:grid}
  #dashboard-progress-snapshot .dashboard-progress-quick-form .field{min-width:0}
  #dashboard-progress-snapshot .dashboard-progress-quick-form label{
    font-size:8.5px;
    margin-bottom:3px;
  }
  #dashboard-progress-snapshot .dashboard-progress-quick-form input{
    width:100%;
    min-width:0;
    padding:6px 7px;
    font-size:10px;
    margin:0;
  }
  #dashboard-progress-snapshot .dashboard-progress-quick-form .quick-progress-save{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin-top:1px;
  }
  #dashboard-progress-snapshot .dashboard-progress-latest{
    padding-top:8px;
    margin-top:8px;
    border-top:1px solid var(--border);
  }
  @media(max-width:800px){
    #dashboard-progress-snapshot .dashboard-progress-quick-form{
      grid-template-columns:1fr;
    }
  }


  #notification-resolution-body .notification-resolution-summary{
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-1);
  }
  #notification-resolution-body .notification-resolution-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    border-bottom:1px solid var(--border);
    font-size:12px;
  }
  #notification-resolution-body .notification-resolution-row:last-child{border-bottom:0}
  #notification-history [data-notification-history-id]{
    cursor:pointer;
    border-radius:9px;
    padding-left:8px !important;
    padding-right:8px !important;
  }
  #notification-history [data-notification-history-id]:hover{
    background:var(--surface-1);
  }


  .progress-chart-tooltip{
    z-index:99999 !important;
    pointer-events:none;
  }
  .lab-reference-chart .progress-chart-crosshair{
    stroke:var(--text-dim);
    stroke-width:1;
    stroke-dasharray:3 3;
  }
  .lab-reference-trend-svg{
    cursor:crosshair;
  }


  #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
    padding:16px 18px !important;
    border-radius:14px;
    box-shadow:none;
  }
  #lab-compare-chart .dashboard-style-lab .today-panel-head{
    margin-bottom:8px;
    min-height:0;
  }
  #lab-compare-chart .dashboard-style-lab .today-panel-kicker{
    font-size:8.5px;
    margin-bottom:3px;
  }
  #lab-compare-chart .dashboard-style-lab .today-panel-title{
    font-size:17px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-value{
    display:flex;
    align-items:baseline;
    gap:7px;
    margin:6px 0 1px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-value strong{
    font-size:31px;
    line-height:1;
    letter-spacing:-.045em;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-value span{
    color:var(--text-dim);
    font-size:11px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-sub{
    font-size:10.5px;
    color:var(--text-dim);
    margin:2px 0 8px;
  }
  #lab-compare-chart .dashboard-style-lab .progress-chart-interactive{
    margin-top:4px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-reference-chart .trend-chart{
    height:190px !important;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-stats{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:9px 0 5px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-stat{
    border:1px solid var(--border);
    background:var(--surface-1);
    border-radius:999px;
    padding:5px 8px;
    font-size:9.5px;
    color:var(--text-dim);
  }
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-stat b{
    color:var(--text);
    font-size:10px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-range-note{
    font-size:9.5px;
    margin:7px 0 0;
  }
  #lab-compare-chart .dashboard-style-lab .lab-range-provenance,
  #lab-compare-chart .dashboard-style-lab .lab-status-source{
    font-size:9.5px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-personal-insight{
    margin-top:9px;
    padding:10px 11px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-personal-insight-head{
    font-size:10.5px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-personal-insight-summary{
    font-size:10px;
    line-height:1.45;
    margin-top:5px;
  }
  #lab-compare-chart .dashboard-style-lab .lab-personal-insight summary,
  #lab-compare-chart .dashboard-style-lab .lab-personal-insight-more{
    font-size:9.5px;
  }


  /* Match single-marker Labs Deep Dive colors to the dashboard Blood Work card */
  #lab-compare-chart .dashboard-style-lab.lab-status-optimal{
    background:linear-gradient(145deg,rgba(70,227,160,.15),var(--panel)) !important;
    border-color:rgba(70,227,160,.70) !important;
  }
  #lab-compare-chart .dashboard-style-lab.lab-status-within{
    background:linear-gradient(145deg,rgba(94,216,255,.12),var(--panel)) !important;
    border-color:rgba(94,216,255,.62) !important;
  }
  #lab-compare-chart .dashboard-style-lab.lab-status-average{
    background:linear-gradient(145deg,rgba(183,148,246,.12),var(--panel)) !important;
    border-color:rgba(183,148,246,.58) !important;
  }
  #lab-compare-chart .dashboard-style-lab.lab-status-out{
    background:linear-gradient(145deg,rgba(248,113,113,.13),var(--panel)) !important;
    border-color:rgba(248,113,113,.70) !important;
  }
  #lab-compare-chart .dashboard-style-lab.lab-status-unknown{
    background:var(--panel) !important;
    border-color:var(--border) !important;
  }

  /* Use the same pale dashboard surfaces for secondary elements */
  #lab-compare-chart .dashboard-style-lab .lab-dashboard-stat{
    background:color-mix(in srgb,var(--panel) 92%,var(--border)) !important;
    border-color:rgba(111,159,136,.22) !important;
  }

  #lab-compare-chart .dashboard-style-lab .lab-personal-insight{
    background:color-mix(in srgb,var(--primary) 3%,var(--panel)) !important;
    border-color:rgba(111,159,136,.24) !important;
  }

  /* Keep the chart's reference-band treatment subtle like the dashboard */
  #lab-compare-chart .dashboard-style-lab .lab-reference-chart{
    background:transparent !important;
  }



  @media(max-width:700px){
    #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
      padding-left:28px !important;
      padding-right:28px !important;
    }
    #lab-compare-chart .lab-deep-dive-nav{
      left:5px;
      right:5px;
    }
    #lab-compare-chart .lab-deep-dive-nav button{
      width:30px;
      height:36px;
    }
  }


  /* Lab Deep Dive marker navigation: arrows on the left/right edges of the panel */
  #lab-compare-chart .lab-deep-dive-nav{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    pointer-events:none !important;
    z-index:5 !important;
    padding:0 10px !important;
  }

  #lab-compare-chart .lab-deep-dive-nav button{
    pointer-events:auto !important;
    width:38px !important;
    height:46px !important;
    border:1px solid var(--border) !important;
    border-radius:12px !important;
    background:color-mix(in srgb,var(--panel) 94%,transparent) !important;
    color:var(--text) !important;
    font-size:24px !important;
    line-height:1 !important;
    cursor:pointer !important;
    box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #lab-compare-chart .lab-deep-dive-nav button:hover,
  #lab-compare-chart .lab-deep-dive-nav button:focus{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    outline:none !important;
  }

  #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
    position:relative !important;
    padding-left:28px !important;
    padding-right:28px !important;
  }

  @media(max-width:700px){
    #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
      padding-left:28px !important;
      padding-right:28px !important;
    }

    #lab-compare-chart .lab-deep-dive-nav{
      padding:0 5px !important;
    }

    #lab-compare-chart .lab-deep-dive-nav button{
      width:32px !important;
      height:40px !important;
      font-size:21px !important;
    }
  }


  #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
    position:relative !important;
    padding-left:28px !important;
    padding-right:28px !important;
  }

  #lab-compare-chart .lab-deep-dive-nav{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:0 8px !important;
    margin:0 !important;
    pointer-events:none !important;
    z-index:8 !important;
  }

  #lab-compare-chart .lab-deep-dive-nav button{
    pointer-events:auto !important;
    width:42px !important;
    height:50px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:26px !important;
    line-height:1 !important;
    background:color-mix(in srgb,var(--panel) 96%,transparent) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  }

  #lab-compare-chart .lab-deep-dive-nav button:hover,
  #lab-compare-chart .lab-deep-dive-nav button:focus{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    background:var(--primary-dim) !important;
    outline:none !important;
  }

  /* Keep arrows clear of the heading area visually */
  #lab-compare-chart .lab-deep-dive-nav{
    height:100%;
  }

  @media(max-width:700px){
    #lab-compare-chart .lab-deep-dive-card.dashboard-style-lab{
      padding-left:28px !important;
      padding-right:28px !important;
    }
    #lab-compare-chart .lab-deep-dive-nav{
      padding:0 4px !important;
    }
    #lab-compare-chart .lab-deep-dive-nav button{
      width:34px !important;
      height:42px !important;
      font-size:22px !important;
      border-radius:11px !important;
    }
  }


  #levels-deep-dive-workspace .levels-deep-dive-card{
    position:relative !important;
    padding-left:28px !important;
    padding-right:28px !important;
  }
  #levels-deep-dive-workspace .levels-deep-dive-nav{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:0 8px !important;
    pointer-events:none !important;
    z-index:8 !important;
  }
  #levels-deep-dive-workspace .levels-deep-dive-nav button{
    pointer-events:auto !important;
    width:42px !important;
    height:50px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:26px !important;
    line-height:1 !important;
    background:color-mix(in srgb,var(--panel) 96%,transparent) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  }
  #levels-deep-dive-workspace .levels-deep-dive-nav button:hover,
  #levels-deep-dive-workspace .levels-deep-dive-nav button:focus{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    background:var(--primary-dim) !important;
    outline:none !important;
  }
  @media(max-width:700px){
    #levels-deep-dive-workspace .levels-deep-dive-card{
      padding-left:28px !important;
      padding-right:28px !important;
    }
    #levels-deep-dive-workspace .levels-deep-dive-nav{ padding:0 4px !important; }
    #levels-deep-dive-workspace .levels-deep-dive-nav button{
      width:34px !important;
      height:42px !important;
      font-size:22px !important;
      border-radius:11px !important;
    }
  }


  #measurement-weight-chart .progress-deep-dive-card{
    position:relative !important;
    padding:16px 18px 18px !important;
    padding-left:28px !important;
    padding-right:28px !important;
    border-radius:14px;
    box-shadow:none;
    background:var(--panel);
  }
  #measurement-weight-chart .progress-deep-dive-nav{
    position:absolute !important;
    top:50% !important;
    left:0 !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:0 8px !important;
    pointer-events:none !important;
    z-index:8 !important;
    margin:0 !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav button{
    pointer-events:auto !important;
    width:42px !important;
    height:50px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:26px !important;
    line-height:1 !important;
    background:color-mix(in srgb,var(--panel) 96%,transparent) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav button:hover,
  #measurement-weight-chart .progress-deep-dive-nav button:focus{
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    background:var(--primary-dim) !important;
    outline:none !important;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-head{
    margin-bottom:8px;
    min-height:0;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-kicker{
    font-size:8.5px;
    margin-bottom:3px;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-title{
    font-size:17px;
  }
  #measurement-weight-chart .progress-metric-position{
    font-size:10px;
    color:var(--text-dim);
    margin-top:3px;
  }
  #measurement-weight-chart .progress-dashboard-value{
    display:flex;
    align-items:baseline;
    gap:7px;
    margin:6px 0 1px;
  }
  #measurement-weight-chart .progress-dashboard-value strong{
    font-size:31px;
    line-height:1;
    letter-spacing:-.045em;
  }
  #measurement-weight-chart .progress-dashboard-value span{
    color:var(--text-dim);
    font-size:11px;
  }
  #measurement-weight-chart .progress-dashboard-sub{
    font-size:10.5px;
    color:var(--text-dim);
    margin:2px 0 8px;
  }
  #measurement-weight-chart .progress-selected-chips{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:8px 0 10px;
  }
  #measurement-weight-chart .progress-summary-note{
    font-size:10px;
    margin-top:8px;
  }
  #measurement-weight-chart .progress-deep-dive-empty{
    padding:22px 8px;
    text-align:center;
    color:var(--text-dim);
    font-size:12px;
  }
  #measurement-weight-chart .progress-deep-dive-card .level-chart-meta{
    margin-top:8px;
  }
  @media(max-width:700px){
    #measurement-weight-chart .progress-deep-dive-card{
      padding-left:28px !important;
      padding-right:28px !important;
    }
    #measurement-weight-chart .progress-deep-dive-nav{
      padding:0 4px !important;
    }
    #measurement-weight-chart .progress-deep-dive-nav button{
      width:34px !important;
      height:42px !important;
      font-size:22px !important;
      border-radius:11px !important;
    }
  }


  #tab-inventory .inventory-entry-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:end;
  }
  #tab-inventory .inventory-name-field{grid-column:span 2;}
  #tab-inventory .inventory-calc-note{
    margin:10px 0 12px;
    padding:9px 11px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-1);
    color:var(--text-dim);
    font-size:11px;
  }
  #tab-inventory .inventory-calc-note b{color:var(--text);}
  #tab-inventory #inv-mg[readonly]{
    background:color-mix(in srgb,var(--surface-1) 90%,var(--border));
    font-weight:800;
  }
  #tab-inventory .inventory-container-label{
    display:block;
    font-size:10px;
    color:var(--text-dim);
    margin-top:3px;
  }
  @media(max-width:900px){
    #tab-inventory .inventory-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    #tab-inventory .inventory-name-field{grid-column:1/-1;}
  }
  @media(max-width:560px){
    #tab-inventory .inventory-entry-grid{grid-template-columns:1fr;}
    #tab-inventory .inventory-name-field{grid-column:auto;}
  }


  .dashboard-layout-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:16px 0 -2px;
  }
  .dashboard-layout-toolbar-title{
    font-size:11px;
    font-weight:800;
    color:var(--text);
  }
  .dashboard-layout-toolbar-hint{
    font-size:9.5px;
    margin-top:2px;
  }
  .dashboard-layout-toolbar-actions{
    display:flex;
    gap:7px;
    align-items:center;
    flex-wrap:wrap;
  }

  .dashboard-main-grid > [data-dashboard-widget]{
    position:relative;
    transition:border-color .15s ease, transform .15s ease, opacity .15s ease;
  }

  .dashboard-main-grid.dashboard-layout-editing > [data-dashboard-widget]{
    border-style:dashed !important;
    border-color:color-mix(in srgb,var(--primary) 62%,var(--border)) !important;
    padding-top:45px !important;
  }

  .dashboard-widget-editor{
    display:none;
    position:absolute;
    top:7px;
    left:8px;
    right:8px;
    height:30px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    z-index:20;
    padding:0 3px;
  }

  .dashboard-layout-editing .dashboard-widget-editor{
    display:flex;
  }

  .dashboard-widget-drag{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:9px;
    font-weight:800;
    color:var(--text-dim);
    cursor:grab;
    user-select:none;
  }

  .dashboard-widget-drag:active{cursor:grabbing}

  .dashboard-widget-grip{
    font-size:17px;
    letter-spacing:-3px;
    line-height:1;
    color:var(--primary);
  }

  .dashboard-widget-editor-actions{
    display:flex;
    gap:4px;
  }

  .dashboard-widget-move{
    width:28px;
    height:26px;
    min-height:26px;
    padding:0 !important;
    border-radius:8px;
    font-size:13px !important;
  }

  .dashboard-layout-editing [data-dashboard-widget]{
    cursor:default;
  }

  .dashboard-layout-editing [data-dashboard-widget].dashboard-widget-dragging{
    opacity:.45;
    transform:scale(.985);
  }

  .dashboard-layout-editing [data-dashboard-widget].dashboard-widget-drop-target{
    outline:2px solid var(--primary);
    outline-offset:3px;
  }

  @media(max-width:720px){
    .dashboard-layout-toolbar{
      align-items:flex-start;
    }
    .dashboard-layout-toolbar-actions{
      width:100%;
    }
    .dashboard-main-grid.dashboard-layout-editing > [data-dashboard-widget]{
      padding-top:46px !important;
    }
  }


  #dashboard-active-vials-card.dashboard-active-vials-prominent{
    margin-bottom:14px;
  }
  #dashboard-active-vials-card.dashboard-active-vials-prominent .mini-chart-title{
    margin-bottom:9px;
  }


  .health-metrics-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .health-overview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}
  .health-metric-card{border:1px solid var(--border);background:var(--surface-1);border-radius:12px;padding:11px;text-align:left;color:var(--text);cursor:pointer;min-width:0}
  .health-metric-card:hover,.health-metric-card.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,var(--surface-1))}
  .health-metric-card .name{font-size:10px;font-weight:800;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .health-metric-card .value{font-size:19px;font-weight:900;margin-top:6px;line-height:1.05}
  .health-metric-card .sub{font-size:8.5px;color:var(--text-dim);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .health-customize-panel{margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-1);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .health-customize-panel[hidden]{display:none!important}
  .health-customize-panel label,.connected-health-metric-picker label,.connected-health-options label{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text-dim)}
  .health-deep-dive-wrap{margin-top:15px;padding-top:14px;border-top:1px solid var(--border)}
  .health-deep-card{position:relative!important;padding-left:62px!important;padding-right:62px!important}
  .health-deep-nav{position:absolute!important;top:50%!important;left:0!important;right:0!important;transform:translateY(-50%)!important;display:flex!important;justify-content:space-between!important;padding:0 8px!important;pointer-events:none!important;z-index:8!important}
  .health-deep-nav button{pointer-events:auto!important;width:38px!important;height:46px!important;border-radius:12px!important;border:1px solid var(--border)!important;background:var(--panel)!important;color:var(--text)!important;font-size:24px!important}
  .health-deep-nav button:hover{border-color:var(--primary)!important;color:var(--primary)!important}
  .health-deep-value{display:flex;align-items:baseline;gap:7px;margin:5px 0 3px}
  .health-deep-value strong{font-size:30px}
  .health-deep-value span{font-size:11px;color:var(--text-dim)}
  .health-deep-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:9px}
  .health-deep-stat{border:1px solid var(--border);border-radius:9px;padding:7px 8px;background:var(--surface-1);font-size:9px;color:var(--text-dim)}
  .health-deep-stat b{display:block;color:var(--text);font-size:11px;margin-bottom:2px}
  .health-source-badge{font-size:8.5px;padding:3px 6px;border:1px solid var(--border);border-radius:999px;color:var(--text-dim);white-space:nowrap}
  .health-log-details summary{cursor:pointer;font-weight:800;font-size:12px}
  .connected-health-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
  .connected-health-platform{display:flex;justify-content:space-between;align-items:center;gap:9px;border:1px solid var(--border);border-radius:11px;padding:11px;background:var(--surface-1)}
  .connected-health-platform b{font-size:12px}.connected-health-platform .muted{font-size:9.5px;margin-top:2px}
  .connected-health-metric-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:8px}
  .connected-health-options{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
  @media(max-width:1100px){.health-overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.health-customize-panel,.connected-health-metric-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:720px){.health-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-customize-panel,.connected-health-metric-picker,.connected-health-platforms{grid-template-columns:1fr}.health-deep-card{padding-left:48px!important;padding-right:48px!important}.health-deep-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}


  .health-personal-insight{margin-top:12px}
  .lab-health-bridge-note{
    margin-top:10px;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-1);
    color:var(--text-dim);
    font-size:10.5px;
    line-height:1.5;
  }
  .lab-health-bridge-note b{color:var(--text)}


  .lab-related-health{
    margin-top:12px;
    border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));
    border-radius:12px;
    padding:12px 13px;
    background:color-mix(in srgb,var(--primary) 2%,var(--panel));
  }
  .lab-related-health-head{
    display:flex;
    align-items:center;
    gap:7px;
    font-weight:800;
    font-size:12px;
    color:var(--text);
  }
  .lab-related-health-head .sparkle{color:var(--primary);font-size:14px}
  .lab-related-health-copy{
    color:var(--text-dim);
    font-size:10.5px;
    line-height:1.5;
    margin:7px 0 10px;
  }
  .lab-related-health-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .lab-related-health-item{
    border:1px solid var(--border);
    background:var(--surface-1);
    border-radius:10px;
    padding:9px 10px;
    min-width:0;
  }
  .lab-related-health-item-head{
    display:flex;
    justify-content:space-between;
    gap:7px;
    align-items:center;
    font-size:9.5px;
  }
  .lab-related-health-item-head span{
    color:var(--text-dim);
    font-size:8px;
    white-space:nowrap;
  }
  .lab-related-health-item-value{
    font-size:18px;
    font-weight:900;
    margin-top:5px;
  }
  .lab-related-health-item-value small{
    font-size:9px;
    color:var(--text-dim);
    font-weight:700;
  }
  .lab-related-health-item-copy{
    margin-top:5px;
    color:var(--text-dim);
    font-size:9px;
    line-height:1.45;
  }
  .lab-related-health-footer{
    color:var(--text-dim);
    font-size:8.5px;
    margin-top:9px;
  }
  .dashboard-related-health{
    margin-top:8px;
    border-top:1px solid var(--border);
    padding-top:7px;
  }
  .dashboard-related-health summary{
    cursor:pointer;
    font-size:9px;
    font-weight:800;
    color:var(--text);
  }
  .dashboard-related-health-body{
    display:grid;
    gap:6px;
    margin-top:6px;
  }
  .dashboard-related-health-body div{
    display:grid;
    gap:2px;
    padding:6px 7px;
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:8px;
  }
  .dashboard-related-health-body b{font-size:8.5px}
  .dashboard-related-health-body span,.dashboard-related-health-body p{
    margin:0;
    font-size:8px;
    line-height:1.4;
    color:var(--text-dim);
  }
  @media(max-width:720px){
    .lab-related-health-grid{grid-template-columns:1fr}
  }


@media(max-width:760px){
  /* -------------------------------------------------------
     MOBILE DENSITY SYSTEM
     Lists stay compact. Details open on demand.
     ------------------------------------------------------- */
  .tab{padding-left:10px!important;padding-right:10px!important}
  .card{border-radius:10px}
  .section-title{font-size:14px;margin-top:14px;margin-bottom:8px}
  .muted{line-height:1.35}
  .btn{min-height:36px;padding:8px 10px}
  .btn.small{min-height:30px;padding:5px 8px}
  .icon-btn{width:32px;height:32px}
  .field{margin-bottom:9px}
  .field label{font-size:10.5px;margin-bottom:4px}
  input,select,textarea{padding:8px 9px;font-size:12px}
  .row.cols-2,.row.cols-3,.row.cols-4{gap:8px}

  /* Compact generic responsive table cards. */
  .table-wrap.responsive-cards .mobile-dense-table tr{
    position:relative;
    padding:7px 9px 8px!important;
    margin-bottom:7px!important;
    border-radius:9px!important;
    cursor:pointer;
  }
  .table-wrap.responsive-cards .mobile-dense-table td{
    padding:4px 0!important;
    gap:8px!important;
    font-size:11px;
    line-height:1.3;
    border-bottom:0!important;
  }
  .table-wrap.responsive-cards .mobile-dense-table td:before{
    font-size:8.5px!important;
    padding-top:1px!important;
    letter-spacing:.02em!important;
  }
  .table-wrap.responsive-cards .mobile-dense-table td:first-child{
    font-weight:800;
    font-size:12px;
  }
  .table-wrap.responsive-cards .mobile-dense-table td:first-child:after{
    content:"›";
    margin-left:auto;
    color:var(--text-dim);
    font-size:18px;
    line-height:1;
    transform:rotate(90deg);
    transition:transform .12s ease;
  }
  .table-wrap.responsive-cards .mobile-dense-table tr.mobile-expanded td:first-child:after{
    transform:rotate(-90deg);
  }

  /* Default dense tables: first three fields only until tapped. */
  .table-wrap.responsive-cards .mobile-dense-table tbody tr:not(.mobile-expanded) td:nth-child(n+4){
    display:none!important;
  }

  /* Inventory needs name + remaining + containers + status at a glance. */
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(4),
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(6){
    display:none!important;
  }
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(5){
    display:flex!important;
  }
  #table-inventory input[type="number"]{
    width:72px!important;
    min-width:72px!important;
    padding:5px 6px!important;
  }
  #table-inventory .inventory-container-label{font-size:8.5px!important}
  #table-inventory .cell-actions{
    gap:6px!important;
    flex-direction:row!important;
    flex-wrap:wrap;
    align-items:center!important;
  }
  #table-inventory .cell-actions:before{width:100%;margin-bottom:1px!important}

  /* Side-effect history: date, compound, site, effect are useful at-a-glance. */
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(4){display:flex!important}
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none!important}

  /* Progress history: date + weight + waist + body fat. DEXA/details on tap. */
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(4){display:flex!important}
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none!important}

  /* Mixed vials: include status in collapsed state. */
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(4){display:flex!important}
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none!important}

  /* Lab history is already short, keep date/lab/value visible. */
  #table-labs tbody tr:not(.mobile-expanded) td:nth-child(n+4){display:none!important}

  /* Active cycles on Dashboard. */
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(3){display:flex!important}
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(n+4){display:none!important}

  /* Cost forecast: enough information without four stacked rows per compound. */
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(3){display:flex!important}
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(n+4){display:none!important}

  /* Health history: date + metric + value collapsed. */
  #health-history-table tbody tr:not(.mobile-expanded) td:nth-child(n+4){display:none!important}

  /* Cycle Builder saved cycles: one short summary, details/actions on demand. */
  #cycles-list .mobile-cycle-summary{
    padding:9px 10px!important;
    margin-bottom:7px!important;
  }
  .mobile-cycle-summary-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .mobile-cycle-name{
    font-size:12.5px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-cycle-date{
    font-size:9px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:2px;
  }
  .mobile-cycle-header-actions{flex:none}
  .mobile-cycle-toggle{
    min-height:26px!important;
    padding:4px 7px!important;
    font-size:9px!important;
  }
  .mobile-cycle-details{display:none}
  .mobile-cycle-summary.mobile-expanded .mobile-cycle-details{
    display:block;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
  }
  .mobile-cycle-dose-lines{font-size:10.5px;line-height:1.4}
  .mobile-cycle-cost{font-size:9.5px!important;margin-top:6px}
  .mobile-cycle-actions{display:flex;gap:5px;justify-content:flex-end;margin-top:8px}

  /* Active Vials: horizontal swipe strip instead of vertical wall. */
  #dashboard-active-vials-card{
    padding:10px 11px!important;
    overflow:hidden;
  }
  #dashboard-active-vials-card .mini-chart-title{font-size:11px!important;margin-bottom:6px!important}
  .active-vials-grid{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-top:4px!important;
    padding-bottom:2px;
  }
  .active-vials-grid::-webkit-scrollbar{display:none}
  .active-vials-grid .vial-card{
    flex:0 0 min(82vw,300px)!important;
    scroll-snap-align:start;
    padding:9px 10px!important;
    gap:9px!important;
    border-radius:10px!important;
  }
  .vial-card-icon svg{width:25px!important;height:auto!important}
  .vial-card-head{font-size:11px!important;margin-bottom:4px!important}
  .vial-fill-text{font-size:9.5px!important}
  .vial-fill-sub{font-size:8.5px!important;margin-top:2px!important}
  .vial-fill-bar{height:4px!important;margin-bottom:4px!important}

  /* Dashboard cards become more compact without shrinking tap targets excessively. */
  .dashboard-layout-toolbar{margin-top:10px!important}
  .dashboard-layout-toolbar-hint{display:none}
  .dashboard-main-grid{gap:9px!important;margin-top:10px!important}
  .dashboard-main-grid > .today-panel{
    padding:10px!important;
    border-radius:10px!important;
  }
  .dashboard-main-grid .today-panel-head{
    min-height:28px!important;
    margin-bottom:4px!important;
  }
  .dashboard-main-grid .today-panel-title{font-size:13px!important}
  .dashboard-main-grid .today-panel-kicker{font-size:7.5px!important}
  .dashboard-main-grid .dashboard-bubble-selector{
    max-height:58px!important;
    padding:4px!important;
  }
  .dashboard-main-grid .dashboard-bubble,
  .dashboard-main-grid .chip{
    min-height:20px!important;
    padding:3px 5px!important;
    font-size:8px!important;
  }
  .dashboard-main-grid .dashboard-chart-stage{min-height:125px!important}
  .dashboard-main-grid .pk-chart-wrap svg{max-height:125px!important}
  .dashboard-checkin-fields{gap:5px!important}
  #dashboard-checkin-panel .dashboard-checkin-field{padding:5px 6px!important}

  /* Labs selector is a dense 2-column index. The deep dive remains detailed. */
  #lab-trend-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #lab-trend-cards .lab-selector-card{
    padding:8px!important;
    border-radius:9px!important;
    min-width:0;
  }
  #lab-trend-cards .lab-selector-name{font-size:10px!important}
  #lab-trend-cards .lab-selector-meta{font-size:8px!important}
  #lab-trend-cards .lab-selector-current{font-size:15px!important}
  #lab-trend-cards .pill{font-size:7px!important;padding:3px 5px!important}
  .lab-compare-panel{padding:10px!important}
  .lab-deep-dive-card{padding-left:28px!important;padding-right:28px!important}
  .lab-related-health-grid{grid-template-columns:1fr!important}

  /* Health metric favorites remain scan-friendly. */
  .health-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .health-metric-card{padding:8px!important;border-radius:9px!important}
  .health-metric-card .name{font-size:9px!important}
  .health-metric-card .value{font-size:16px!important;margin-top:4px!important}
  .health-metric-card .sub{font-size:7.5px!important;margin-top:3px!important}
  .health-deep-card{padding-left:46px!important;padding-right:46px!important}

  /* Progress photos: fixed 2-column browse grid instead of giant photos. */
  #photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .photo-card .photo-meta{padding:5px 6px!important}
  .photo-card .photo-date{font-size:9px!important}
  .photo-card .photo-caption{font-size:8px!important;line-height:1.25}

  /* Calendar week is a swipeable day strip rather than seven stacked day cards. */
  .calendar-week-detail{
    display:flex!important;
    overflow-x:auto!important;
    gap:8px!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .calendar-week-detail::-webkit-scrollbar{display:none}
  .calendar-week-day{
    flex:0 0 min(82vw,320px)!important;
    min-height:0!important;
    scroll-snap-align:start;
    padding:9px!important;
  }
  .calendar-dose-item{padding:6px!important;font-size:10px!important}
  .calendar-dose-item b{font-size:10.5px!important}
  .calendar-dose-item span{font-size:8.5px!important}
  .calendar-agenda-day{
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:8px!important;
    padding:8px 0!important;
  }

  /* Horizontal controls should scroll rather than wrap into tall blocks. */
  .subnav{
    overflow-x:auto;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }
  .subnav::-webkit-scrollbar{display:none}
  .subnav button{white-space:nowrap;flex:0 0 auto}
  .chip-picker,.site-picker{
    gap:4px!important;
  }
  .chip{padding:5px 8px!important;font-size:10px!important}

  /* Alerts and response/signal rows use less vertical space. */
  #alerts-panel{padding:8px 10px!important}
  #alerts-panel > *{margin-top:5px!important;margin-bottom:5px!important}
  .signal-row{padding:8px!important;gap:7px!important}
  .signal-copy{font-size:10px!important;line-height:1.35!important}
  .signal-meta{font-size:8.5px!important}

  /* Settings: dense cards and multi-option sections, while controls stay readable. */
  #tab-settings > .card{padding:11px 12px!important;margin-top:10px!important}
  #tab-settings .section-title{margin-top:0!important}
  .connected-health-platforms{gap:7px!important}
  .connected-health-platform{padding:8px!important}
  .connected-health-metric-picker{gap:5px!important}
}

/* ===== 09/08 unified deep-dive graph layout ===== */
/* Deep-dive SVGs use a wide viewBox. These wrappers must follow content height,
   otherwise legends and notes escape the box and overlap the next section. */
#measurement-weight-chart .deep-dive-chart-stage,
#lab-compare-chart .deep-dive-chart-stage,
#levels-deep-dive-chart,
#measurement-weight-chart .progress-chart-interactive,
#lab-compare-chart .progress-chart-interactive,
#levels-deep-dive-chart .pk-chart-wrap,
#levels-deep-dive-chart .pk-interactive-chart,
#levels-deep-dive-chart [data-pk-svg-host]{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

#measurement-weight-chart .progress-chart-interactive,
#lab-compare-chart .progress-chart-interactive,
#levels-deep-dive-chart .pk-chart-wrap{
  position:relative !important;
  contain:layout !important;
  padding-bottom:12px !important;
  margin-bottom:16px !important;
}

#measurement-weight-chart .progress-chart-interactive svg.trend-chart,
#lab-compare-chart .progress-chart-interactive svg.trend-chart,
#levels-deep-dive-chart svg.trend-chart{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:220px !important;
  max-height:420px !important;
  aspect-ratio:auto !important;
}

#measurement-weight-chart .trend-legend,
#lab-compare-chart .trend-legend,
#levels-deep-dive-chart .trend-legend,
#measurement-weight-chart .level-chart-meta,
#lab-compare-chart .level-chart-meta,
#levels-deep-dive-workspace .level-chart-meta,
#measurement-weight-chart .comparison-unavailable,
#lab-compare-chart .comparison-unavailable,
#levels-deep-dive-workspace .comparison-unavailable,
#measurement-weight-chart .levels-note,
#lab-compare-chart .levels-note,
#levels-deep-dive-workspace .levels-note{
  position:relative !important;
  inset:auto !important;
  clear:both !important;
  float:none !important;
  height:auto !important;
  max-height:none !important;
}

.progress-lane-density{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 7px;
  font-size:10px;
  color:var(--muted);
}
.progress-lane-density > div{display:flex;gap:5px;}
.progress-lane-density .btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.progress-lane-scroll{
  position:relative;
  width:100%;
  max-height:480px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
.progress-lane-scroll .deep-dive-chart-stage,
.progress-lane-scroll .dashboard-chart-stage,
.progress-lane-scroll .progress-chart-interactive{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  contain:none !important;
}
.progress-lane-scroll .progress-lane-chart svg{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
.progress-lane-sticky-axis{
  position:sticky;
  z-index:5;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:7px 18px 7px 15%;
  border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(6px);
  color:var(--muted);
  font-size:9px;
}
.progress-lane-sticky-axis span:nth-child(2){text-align:center;}
.progress-lane-sticky-axis span:last-child{text-align:right;}

@media(max-width:760px){
  #measurement-weight-chart .progress-chart-interactive svg.trend-chart,
  #lab-compare-chart .progress-chart-interactive svg.trend-chart,
  #levels-deep-dive-chart svg.trend-chart{
    min-height:250px !important;
    max-height:340px !important;
  }
  .progress-lane-scroll{max-height:370px;}
  .progress-lane-sticky-axis{padding-left:22%;padding-right:10px;}
}

/* Extra narrow phones */
@media(max-width:420px){
  .tab{padding-left:8px!important;padding-right:8px!important}
  .active-vials-grid .vial-card,
  .calendar-week-day{flex-basis:86vw!important}
  #lab-trend-cards{grid-template-columns:1fr 1fr!important}
}


  .levels-no-log-state{
    margin-top:12px;
    padding:18px 16px;
    border:1px dashed color-mix(in srgb,var(--primary) 55%,var(--border));
    border-radius:12px;
    background:color-mix(in srgb,var(--primary) 4%,var(--panel));
    text-align:center;
  }
  .levels-no-log-state b{display:block;font-size:14px;color:var(--text)}
  .levels-no-log-state p{
    max-width:620px;
    margin:7px auto 12px;
    color:var(--text-dim);
    font-size:11px;
    line-height:1.5;
  }
  @media(max-width:760px){
    .levels-no-log-state{padding:13px 10px;margin-top:8px}
    .levels-no-log-state b{font-size:12px}
    .levels-no-log-state p{font-size:9.5px;line-height:1.45}
  }


@media(max-width:760px){
  /* New Cycle Builder mobile compression: keep the same functionality,
     but reduce vertical footprint by using dense two-column rows and
     hiding secondary preview content until requested. */
  #tab-builder > .split{
    display:block!important;
  }

  #tab-builder > .split > .card:first-child{
    padding:9px 10px!important;
    margin-bottom:10px!important;
  }

  #tab-builder > .split > .card:first-child > .section-title{
    font-size:13px!important;
    margin:0 0 7px!important;
  }

  #cycle-form{
    display:block;
  }

  /* Force the builder's paired inputs to remain side-by-side on phones. */
  #cycle-form .row.cols-2{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin-bottom:0!important;
  }

  #cycle-form .field{
    margin-bottom:6px!important;
    min-width:0;
  }

  #cycle-form .field label{
    font-size:8.75px!important;
    line-height:1.15!important;
    margin-bottom:3px!important;
  }

  #cycle-form input,
  #cycle-form select{
    min-height:30px!important;
    height:30px!important;
    padding:5px 7px!important;
    font-size:10.5px!important;
    border-radius:7px!important;
  }

  #cycle-form input[type="date"],
  #cycle-form input[type="time"]{
    font-size:9.5px!important;
  }

  #cycle-form .blend-check{
    margin:4px 0 0!important;
    gap:5px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  #cycle-form .blend-check input{
    width:13px!important;
    height:13px!important;
    min-height:13px!important;
  }

  /* The unit helper is redundant once the Dose Unit selector is visible. */
  #f-unit-help-label,
  #f-unit-help{
    display:none!important;
  }

  /* Hide the now-empty helper field so Price can use the row efficiently. */
  #f-unit-help-label + #f-unit-help{
    display:none!important;
  }

  /* Blend editor remains available, just denser. */
  #f-blend-fields-wrap{
    padding:7px!important;
    margin-bottom:6px!important;
    border-radius:8px!important;
  }
  #f-blend-fields-wrap > .muted{
    font-size:8px!important;
    line-height:1.25!important;
  }
  #f-blend-fields .blend-comp-row{
    gap:5px!important;
    margin-bottom:5px!important;
  }
  #f-blend-fields .blend-comp-row input{
    height:28px!important;
  }

  /* Dose section is the tallest part of the builder, so compress it substantially. */
  #cycle-form > .field:has(#dose-times){
    margin-top:2px!important;
    margin-bottom:5px!important;
  }
  #cycle-form > .field:has(#dose-times) > label{
    font-size:9.5px!important;
    font-weight:800!important;
  }

  #dose-times .dose-time-block{
    padding:7px!important;
    margin-bottom:6px!important;
    border-radius:8px!important;
  }

  #dose-times .dose-time-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px!important;
    gap:5px!important;
  }

  #dose-times .row.cols-2{
    gap:5px!important;
    margin-top:6px!important;
  }

  #dose-times .dt-fixed-wrap{
    margin-top:6px!important;
  }

  #dose-times .dt-titration-wrap{
    margin-top:6px!important;
  }

  #dose-times .dt-titration-wrap > label{
    font-size:8px!important;
    line-height:1.25!important;
    margin-bottom:4px!important;
  }

  #dose-times .weekday-picker{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:3px!important;
    margin-top:6px!important;
  }

  #dose-times .weekday-picker label{
    min-width:0!important;
    padding:4px 1px!important;
    font-size:7.5px!important;
    text-align:center!important;
    border-radius:6px!important;
  }

  #dose-times .weekday-picker input{
    width:11px!important;
    height:11px!important;
    min-height:11px!important;
    margin-top:2px!important;
  }

  #dose-times .icon-btn{
    width:28px!important;
    height:28px!important;
    min-height:28px!important;
    font-size:11px!important;
  }

  #add-dose-time{
    min-height:27px!important;
    padding:4px 7px!important;
    font-size:8.5px!important;
    margin-top:1px!important;
  }

  /* Keep the calculation preview available, but collapsed by default on mobile. */
  .mobile-cycle-preview-toggle{
    display:block!important;
    width:100%;
    min-height:28px!important;
    font-size:8.5px!important;
    margin:4px 0 0!important;
  }

  #calc-preview{
    display:none!important;
    margin-top:5px!important;
    padding:7px 8px!important;
  }

  #calc-preview.mobile-preview-open{
    display:block!important;
  }

  #calc-preview .calc-row{
    padding:3px 0!important;
    font-size:8.5px!important;
    line-height:1.25!important;
  }

  #calc-preview .calc-blend-label{
    font-size:8px!important;
    margin-top:4px!important;
  }

  .cycle-submit-row{
    margin-top:7px!important;
    gap:6px!important;
  }

  .cycle-submit-row .btn{
    min-height:32px!important;
    padding:6px 9px!important;
    font-size:10px!important;
  }

  /* Keep All Cycles visually separate without wasting another screen. */
  #tab-builder > .split > div:last-child > .section-title{
    font-size:12px!important;
    margin:8px 0 5px!important;
  }

  #cycles-search{
    height:30px!important;
    min-height:30px!important;
    margin-bottom:6px!important;
    font-size:10px!important;
  }

  label[for="cycles-search"]{
    font-size:8.5px!important;
    margin-bottom:3px!important;
  }
}

/* Very narrow phones still keep 2-up fields, but trim labels further. */
@media(max-width:390px){
  #cycle-form .field label{font-size:8px!important}
  #cycle-form input,#cycle-form select{font-size:9.75px!important;padding-left:6px!important;padding-right:6px!important}
}


@media(min-width:761px){
  .mobile-cycle-preview-toggle{display:none!important}
}


@media(max-width:760px){
  /* Dashboard top section approved mobile layout:
     6 KPI cards across, Active Vials across, then Scheduled Doses, then Today in your system. */

  #tab-dashboard > .grid.stats{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:4px!important;
    margin-bottom:8px!important;
  }

  #tab-dashboard > .grid.stats > .stat-card{
    min-width:0!important;
    padding:6px 3px!important;
    border-radius:8px!important;
    text-align:center!important;
  }

  #tab-dashboard > .grid.stats > .stat-card .label{
    font-size:6.8px!important;
    line-height:1.08!important;
    min-height:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    letter-spacing:0!important;
  }

  #tab-dashboard > .grid.stats > .stat-card .value{
    font-size:14px!important;
    line-height:1.05!important;
    margin-top:3px!important;
    white-space:nowrap;
  }

  #tab-dashboard > .grid.stats > .stat-card #stat-next-dose,
  #tab-dashboard > .grid.stats > .stat-card #stat-cost-per-dose{
    font-size:11px!important;
  }

  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{
    font-size:6.2px!important;
    line-height:1.05!important;
    margin-top:2px!important;
    min-height:7px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Four tracked vials fit side-by-side instead of becoming a vertical/swipe wall. */
  #dashboard-active-vials-card{
    margin-top:8px!important;
    margin-bottom:8px!important;
    padding:8px!important;
  }

  #dashboard-active-vials-card .mini-chart-title{
    font-size:9.5px!important;
    margin-bottom:5px!important;
  }

  #dashboard-active-vials .active-vials-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }

  #dashboard-active-vials .vial-card{
    min-width:0!important;
    width:100%!important;
    padding:6px 4px!important;
    gap:3px!important;
    border-radius:8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    text-align:center!important;
  }

  #dashboard-active-vials .vial-card-icon{
    display:none!important;
  }

  #dashboard-active-vials .vial-card-head{
    justify-content:center!important;
    gap:3px!important;
    font-size:7.8px!important;
    line-height:1.1!important;
    margin-bottom:4px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #dashboard-active-vials .vial-card-head .vial-dot{
    width:5px!important;
    height:5px!important;
  }

  #dashboard-active-vials .vial-fill-bar{
    height:4px!important;
    margin-bottom:3px!important;
  }

  #dashboard-active-vials .vial-fill-text{
    font-size:6.8px!important;
    line-height:1.15!important;
  }

  #dashboard-active-vials .vial-fill-sub{
    font-size:6.2px!important;
    line-height:1.1!important;
    margin-top:2px!important;
    max-height:14px;
    overflow:hidden;
  }

  /* Mobile dashboard order below Active Vials. Desktop/custom ordering remains untouched. */
  #dashboard-main-grid{
    display:grid!important;
  }
  #dashboard-main-grid [data-dashboard-widget="schedule"]{order:1!important}
  #dashboard-main-grid [data-dashboard-widget="levels"]{order:2!important}
  #dashboard-main-grid [data-dashboard-widget="checkin"]{order:3!important}
  #dashboard-main-grid [data-dashboard-widget="progress"]{order:4!important}
  #dashboard-main-grid [data-dashboard-widget="trends"]{order:5!important}
  #dashboard-main-grid [data-dashboard-widget="labs"]{order:6!important}
}

@media(max-width:390px){
  #tab-dashboard > .grid.stats{gap:3px!important}
  #tab-dashboard > .grid.stats > .stat-card{padding:5px 2px!important}
  #tab-dashboard > .grid.stats > .stat-card .label{font-size:6.2px!important}
  #tab-dashboard > .grid.stats > .stat-card .value{font-size:12.5px!important}
  #tab-dashboard > .grid.stats > .stat-card #stat-next-dose,
  #tab-dashboard > .grid.stats > .stat-card #stat-cost-per-dose{font-size:10px!important}
  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{font-size:5.7px!important}

  #dashboard-active-vials .active-vials-grid{gap:4px!important}
  #dashboard-active-vials .vial-card{padding:5px 3px!important}
  #dashboard-active-vials .vial-card-head{font-size:7.1px!important}
  #dashboard-active-vials .vial-fill-text{font-size:6.3px!important}
  #dashboard-active-vials .vial-fill-sub{font-size:5.8px!important}
}

/* ===== [2/13] dashboard-final-two-column-override ===== */
  /* FINAL dashboard layout override */
  #tab-dashboard .dashboard-main-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    gap:14px !important;
    align-items:stretch !important;
    width:100% !important;
  }

  #tab-dashboard .dashboard-main-grid > .today-panel{
    grid-column:auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:100% !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
  }

  /* Pair cards explicitly so nothing inherited can make them span both columns. */
  #tab-dashboard .dashboard-level-card{grid-column:1 !important;grid-row:1 !important;}
  #tab-dashboard .dashboard-schedule-card{grid-column:2 !important;grid-row:1 !important;}
  #tab-dashboard .dashboard-checkin-card{grid-column:1 !important;grid-row:2 !important;}
  #tab-dashboard .dashboard-progress-card{grid-column:2 !important;grid-row:2 !important;}
  #tab-dashboard .dashboard-weight-card{grid-column:1 !important;grid-row:3 !important;}
  #tab-dashboard .dashboard-lab-card{grid-column:2 !important;grid-row:3 !important;}

  /* Only collapse on genuinely narrow screens. */
  @media(max-width:760px){
    #tab-dashboard .dashboard-main-grid{
      grid-template-columns:1fr !important;
    }
    #tab-dashboard .dashboard-main-grid > .today-panel{
      grid-column:1 !important;
      grid-row:auto !important;
    }
  }

/* ===== [3/13] dashboard-mobile-approved-final ===== */
@media(max-width:760px){
  /* 6 dashboard KPIs across one row */
  #tab-dashboard > .grid.stats{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:4px !important;
    margin-bottom:8px !important;
  }
  #tab-dashboard > .grid.stats > .stat-card{
    min-width:0 !important;
    padding:6px 3px !important;
    border-radius:8px !important;
    text-align:center !important;
  }
  #tab-dashboard > .grid.stats > .stat-card .label{
    font-size:6.8px !important;
    line-height:1.05 !important;
    min-height:15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    letter-spacing:0 !important;
  }
  #tab-dashboard > .grid.stats > .stat-card .value{
    font-size:14px !important;
    line-height:1.05 !important;
    margin-top:3px !important;
    white-space:nowrap !important;
  }
  #tab-dashboard #stat-next-dose,
  #tab-dashboard #stat-cost-per-dose{
    font-size:10.5px !important;
  }
  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{
    font-size:5.8px !important;
    line-height:1.05 !important;
    margin-top:2px !important;
    min-height:7px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Active Vials, 4 across */
  #dashboard-active-vials-card{
    margin-top:8px !important;
    margin-bottom:8px !important;
    padding:8px !important;
  }
  #dashboard-active-vials-card .mini-chart-title{
    font-size:9.5px !important;
    margin-bottom:5px !important;
  }
  #dashboard-active-vials .active-vials-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  #dashboard-active-vials .vial-card{
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
    padding:6px 4px !important;
    gap:3px !important;
    border-radius:8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:center !important;
  }
  #dashboard-active-vials .vial-card-icon{
    display:none !important;
  }
  #dashboard-active-vials .vial-card-head{
    justify-content:center !important;
    gap:3px !important;
    font-size:7.8px !important;
    line-height:1.1 !important;
    margin-bottom:4px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #dashboard-active-vials .vial-card-head .vial-dot{
    width:5px !important;
    height:5px !important;
  }
  #dashboard-active-vials .vial-fill-bar{
    height:4px !important;
    margin-bottom:3px !important;
  }
  #dashboard-active-vials .vial-fill-text{
    font-size:6.8px !important;
    line-height:1.15 !important;
  }
  #dashboard-active-vials .vial-fill-sub{
    font-size:6.1px !important;
    line-height:1.1 !important;
    margin-top:2px !important;
    max-height:14px !important;
    overflow:hidden !important;
  }

  /* Approved top-down mobile dashboard order */
  #tab-dashboard .dashboard-main-grid{
    grid-template-columns:1fr !important;
  }
  #tab-dashboard .dashboard-main-grid > .today-panel{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="schedule"]{order:1 !important;}
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="levels"]{order:2 !important;}
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="checkin"]{order:3 !important;}
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="progress"]{order:4 !important;}
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="trends"]{order:5 !important;}
  #tab-dashboard .dashboard-main-grid [data-dashboard-widget="labs"]{order:6 !important;}
}

/* ===== [4/13] dashboard-mobile-top-readable ===== */
@media (max-width: 760px){
  /* Make the dashboard top easier to read on phones. */
  #tab-dashboard .stats{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  #tab-dashboard .stat-card{
    padding:10px 10px !important;
    min-height:86px !important;
    border-radius:14px !important;
  }

  #tab-dashboard .stat-card .label{
    font-size:8px !important;
    line-height:1.15 !important;
    margin-bottom:6px !important;
    letter-spacing:.05em !important;
  }

  #tab-dashboard .stat-card .value{
    font-size:18px !important;
    line-height:1.05 !important;
    font-weight:800 !important;
  }

  #tab-dashboard .stat-card .sub,
  #tab-dashboard .stat-today-progress-sub,
  #tab-dashboard .stat-next-dose-sub,
  #tab-dashboard .stat-streak-sub{
    font-size:8px !important;
    line-height:1.2 !important;
    margin-top:4px !important;
  }

  /* Active vials: show as a clean 2x2 grid instead of ultra-tiny cards. */
  #dashboard-active-vials-card{
    padding:12px !important;
  }

  #dashboard-active-vials-card .mini-chart-title{
    font-size:11px !important;
    margin-bottom:8px !important;
  }

  #tab-dashboard .active-vials-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    overflow:visible !important;
    margin-top:6px !important;
    padding-bottom:0 !important;
  }

  #tab-dashboard .active-vials-grid .vial-card{
    min-width:0 !important;
    padding:9px !important;
    gap:8px !important;
    border-radius:12px !important;
  }

  #tab-dashboard .active-vials-grid .vial-card-icon{
    transform:scale(.88);
    transform-origin:left center;
  }

  #tab-dashboard .active-vials-grid .vial-card-head{
    font-size:10px !important;
    line-height:1.15 !important;
    gap:6px !important;
    margin-bottom:5px !important;
  }

  #tab-dashboard .active-vials-grid .vial-fill-bar{
    height:5px !important;
    margin-bottom:4px !important;
  }

  #tab-dashboard .active-vials-grid .vial-fill-text{
    font-size:9px !important;
    line-height:1.2 !important;
  }

  #tab-dashboard .active-vials-grid .vial-fill-sub{
    font-size:8px !important;
    line-height:1.2 !important;
    margin-top:2px !important;
  }

  /* The dashboard layout block does not need so much air on mobile. */
  #tab-dashboard .dashboard-layout-card,
  #tab-dashboard [data-dashboard-layout-card]{
    padding:10px 12px !important;
  }
}

@media (max-width: 420px){
  #tab-dashboard .stats{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  #tab-dashboard .stat-card{
    padding:9px 8px !important;
    min-height:82px !important;
  }

  #tab-dashboard .stat-card .label{
    font-size:7.5px !important;
  }

  #tab-dashboard .stat-card .value{
    font-size:17px !important;
  }

  #tab-dashboard .active-vials-grid .vial-card-head{
    font-size:9.5px !important;
  }

  #tab-dashboard .active-vials-grid .vial-fill-text{
    font-size:8.5px !important;
  }

  #tab-dashboard .active-vials-grid .vial-fill-sub{
    font-size:7.5px !important;
  }
}

/* ===== [5/13] dashboard-mobile-top-balanced ===== */
@media (max-width:760px){
  /* Keep the 6 stats readable, but remove the extra vertical dead space. */
  #tab-dashboard .stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #tab-dashboard .stat-card{
    min-height:62px !important;
    padding:7px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  #tab-dashboard .stat-card .label{
    font-size:7.7px !important;
    line-height:1.05 !important;
    margin-bottom:4px !important;
  }

  #tab-dashboard .stat-card .value{
    font-size:17px !important;
    line-height:1 !important;
  }

  #tab-dashboard .stat-card .growth-kpi-sub{
    font-size:7.1px !important;
    line-height:1.1 !important;
    margin-top:3px !important;
    min-height:0 !important;
  }

  #tab-dashboard #stat-next-dose,
  #tab-dashboard #stat-cost-per-dose{
    font-size:15px !important;
  }

  /* Restore Active Vials to the previous compact 4-across layout. */
  #dashboard-active-vials-card{
    padding:9px 10px !important;
  }

  #dashboard-active-vials-card .mini-chart-title{
    font-size:10px !important;
    margin-bottom:6px !important;
  }

  #dashboard-active-vials .active-vials-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
  }

  #dashboard-active-vials .vial-card{
    min-width:0 !important;
    width:100% !important;
    padding:6px 4px !important;
    gap:3px !important;
    border-radius:8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:center !important;
  }

  #dashboard-active-vials .vial-card-icon{
    display:none !important;
  }

  #dashboard-active-vials .vial-card-head{
    justify-content:center !important;
    gap:3px !important;
    font-size:7.8px !important;
    line-height:1.1 !important;
    margin-bottom:4px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #dashboard-active-vials .vial-card-head .vial-dot{
    width:5px !important;
    height:5px !important;
  }

  #dashboard-active-vials .vial-fill-bar{
    height:4px !important;
    margin-bottom:3px !important;
  }

  #dashboard-active-vials .vial-fill-text{
    font-size:6.8px !important;
    line-height:1.15 !important;
  }

  #dashboard-active-vials .vial-fill-sub{
    font-size:6.1px !important;
    line-height:1.1 !important;
    margin-top:2px !important;
    max-height:14px !important;
    overflow:hidden !important;
  }
}

@media (max-width:420px){
  #tab-dashboard .stat-card{
    min-height:58px !important;
    padding:6px 7px !important;
  }

  #tab-dashboard .stat-card .label{
    font-size:7.2px !important;
  }

  #tab-dashboard .stat-card .value{
    font-size:16px !important;
  }

  #tab-dashboard #stat-next-dose,
  #tab-dashboard #stat-cost-per-dose{
    font-size:14px !important;
  }

  #tab-dashboard .stat-card .growth-kpi-sub{
    font-size:6.6px !important;
  }
}

/* ===== [6/13] dashboard-mobile-top-scale-150 ===== */
@media(max-width:760px){
  #tab-dashboard > .grid.stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card{
    min-height:90px !important;
    padding:10px 11px !important;
    border-radius:13px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .label{
    font-size:11px !important;
    line-height:1.08 !important;
    margin-bottom:6px !important;
    min-height:0 !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .value{
    font-size:24px !important;
    line-height:1.02 !important;
    margin-top:0 !important;
  }

  #tab-dashboard #stat-next-dose,
  #tab-dashboard #stat-cost-per-dose{
    font-size:20px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{
    font-size:9px !important;
    line-height:1.15 !important;
    margin-top:5px !important;
    min-height:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

@media(max-width:420px){
  #tab-dashboard > .grid.stats > .stat-card{
    min-height:84px !important;
    padding:9px 9px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .label{
    font-size:10px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .value{
    font-size:22px !important;
  }

  #tab-dashboard #stat-next-dose,
  #tab-dashboard #stat-cost-per-dose{
    font-size:18px !important;
  }

  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{
    font-size:8px !important;
  }
}

/* ===== [7/13] track-daily-log-mobile-final ===== */
@media(max-width:760px){

  /* Keep the top week strip and Track subnav as-is. Tighten only the Daily Log area. */
  #daily-log-panel{
    padding:10px !important;
    margin-top:0 !important;
  }

  #daily-log-panel > div:first-child{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:7px !important;
  }

  #daily-log-panel .section-title{
    margin:0 !important;
    font-size:14px !important;
  }

  #daily-log-panel > div:first-child > div:last-child{
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) 30px auto !important;
    gap:4px !important;
    align-items:center !important;
    min-width:0 !important;
  }

  #log-prev-day,
  #log-next-day{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:8px !important;
  }

  #log-date-picker{
    height:30px !important;
    min-height:30px !important;
    min-width:0 !important;
    padding:4px 7px !important;
    font-size:10.5px !important;
  }

  #log-today-btn{
    height:30px !important;
    min-height:30px !important;
    padding:4px 8px !important;
    font-size:9px !important;
  }

  #log-summary{
    margin:7px 0 6px !important;
    font-size:10px !important;
  }

  /* Replace the giant mobile card layout with compact dose rows. */
  #daily-log-panel .table-wrap.responsive-cards{
    overflow:visible !important;
  }

  #table-daily-log,
  #table-daily-log tbody{
    display:block !important;
    width:100% !important;
  }

  #table-daily-log thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }

  #table-daily-log tbody tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    grid-template-areas:
      "name status taken"
      "dose time taken"
      "effects effects effects";
    column-gap:8px !important;
    row-gap:3px !important;
    align-items:center !important;
    padding:8px 9px !important;
    margin-bottom:7px !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    background:var(--surface-1) !important;
    width:100% !important;
  }

  #table-daily-log tbody td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    text-align:left !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  #table-daily-log tbody td:before{
    display:none !important;
    content:none !important;
  }

  #table-daily-log tbody td:nth-child(1){
    grid-area:taken !important;
    align-self:center !important;
    justify-self:end !important;
  }

  #table-daily-log tbody td:nth-child(1) input[type="checkbox"]{
    width:21px !important;
    height:21px !important;
    margin:0 !important;
  }

  #table-daily-log tbody td:nth-child(2){
    grid-area:name !important;
    font-size:11.5px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #table-daily-log tbody td:nth-child(3){
    grid-area:dose !important;
    font-size:9px !important;
    color:var(--text-dim) !important;
  }

  #table-daily-log tbody td:nth-child(3):before{
    display:inline !important;
    content:"Dose " !important;
    color:var(--text-faint) !important;
    font-size:7px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
  }

  #table-daily-log tbody td:nth-child(4){
    grid-area:time !important;
    text-align:right !important;
    font-size:9px !important;
    color:var(--text-dim) !important;
  }

  #table-daily-log tbody td:nth-child(4):before{
    display:inline !important;
    content:"Time " !important;
    color:var(--text-faint) !important;
    font-size:7px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
  }

  #table-daily-log tbody td:nth-child(5){
    grid-area:effects !important;
    margin-top:2px !important;
    min-height:0 !important;
  }

  #table-daily-log tbody td:nth-child(5) .log-chip-btn{
    width:100% !important;
    min-height:24px !important;
    padding:4px 7px !important;
    font-size:8px !important;
    line-height:1.1 !important;
    text-align:center !important;
  }

  #table-daily-log tbody td:nth-child(6){
    grid-area:status !important;
    justify-self:end !important;
  }

  #table-daily-log tbody td:nth-child(6) .pill{
    padding:3px 6px !important;
    font-size:7.5px !important;
    white-space:nowrap !important;
  }

  /* Keep the rest of the Active Cycles page from ballooning under the log. */
  #daily-log-panel > .field{
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  #log-notes{
    min-height:44px !important;
    height:44px !important;
    padding:6px 7px !important;
    font-size:10px !important;
  }

  #wellness-checkin-fields{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:7px !important;
  }

  #wellness-checkin-fields .field{
    margin:0 !important;
    min-width:0 !important;
  }

  #wellness-checkin-fields label{
    font-size:8px !important;
  }

  #wellness-checkin-fields select{
    min-height:30px !important;
    height:30px !important;
    padding:4px 5px !important;
    font-size:9px !important;
  }

  /* Slightly reduce dead space between Track breadcrumb/subnav and the log card. */
  #tab-activecycles{
    padding-top:0 !important;
  }
}

@media(max-width:390px){
  #table-daily-log tbody tr{
    padding:7px 8px !important;
  }

  #table-daily-log tbody td:nth-child(2){
    font-size:11px !important;
  }
}

/* ===== [8/13] mobile-appwide-density-final ===== */
@media(max-width:760px){

  /* =========================================================
     APP-WIDE RULE: lists are compact, details expand on tap.
     ========================================================= */

  .table-wrap.responsive-cards{
    overflow:visible !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table,
  .table-wrap.responsive-cards table.mobile-dense-table tbody{
    display:block !important;
    width:100% !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table thead{
    position:absolute !important;
    width:1.5px !important;
    height:1.5px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr{
    display:grid !important;
    width:100% !important;
    padding:12px 13.5px !important;
    margin:0 0 9px !important;
    border:1.5px solid var(--border) !important;
    border-radius:15px !important;
    background:var(--surface-1) !important;
    gap:4.5px 12px !important;
    cursor:pointer !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody td{
    min-width:0 !important;
    width:auto !important;
    padding:0 !important;
    border:0 !important;
    font-size:14.25px !important;
    line-height:1.25 !important;
    text-align:left !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody td:before{
    display:none !important;
    content:none !important;
  }

  /* Expanded records become a compact label/value detail sheet. */
  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded{
    display:block !important;
    padding:13.5px 15px !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded td{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:15px !important;
    padding:7.5px 0 !important;
    border-bottom:1.5px solid color-mix(in srgb,var(--border) 65%,transparent) !important;
    text-align:right !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded td:last-child{
    border-bottom:0 !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded td:before{
    display:block !important;
    content:attr(data-label) !important;
    flex:0 0 129px !important;
    color:var(--text-dim) !important;
    font-size:11.25px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.03em !important;
    text-align:left !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded td.cell-actions{
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:wrap !important;
  }

  .table-wrap.responsive-cards table.mobile-dense-table tbody tr.mobile-expanded td.cell-actions:before{
    width:129px !important;
    flex:0 0 129px !important;
  }

  /* ---------------------------------------------------------
     INVENTORY
     Peptide + remaining + containers + status, all in ~2 lines.
     --------------------------------------------------------- */
  #table-inventory tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1.45fr) minmax(99px,.65fr) minmax(108px,.75fr) auto !important;
    grid-template-areas:"name remain containers status" !important;
    align-items:center !important;
  }

  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:name !important;display:block !important}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:remain !important;display:block !important}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:containers !important;display:block !important}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(4){display:none !important}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(5){grid-area:status !important;display:block !important}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(6){display:none !important}

  #table-inventory tbody tr:not(.mobile-expanded) input{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:1.5px 0 !important;
    min-height:0 !important;
    height:auto !important;
    font-size:14.25px !important;
    font-weight:700 !important;
  }

  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1) input{
    font-size:15.75px !important;
    font-weight:800 !important;
  }

  #table-inventory tbody tr:not(.mobile-expanded) .inventory-container-label{
    display:block !important;
    font-size:10.2px !important;
    line-height:1.15 !important;
    margin-top:1.5px !important;
  }

  #table-inventory tbody tr:not(.mobile-expanded) .compound-breakdown{
    display:none !important;
  }

  #table-inventory tbody tr:not(.mobile-expanded) .pill{
    font-size:10.5px !important;
    padding:4.5px 7.5px !important;
    white-space:nowrap !important;
  }

  /* ---------------------------------------------------------
     MIXED VIALS
     Name + mixed date + discard status, detailed fields on tap.
     --------------------------------------------------------- */
  #table-mixed tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1.35fr) minmax(108px,.7fr) minmax(117px,.8fr) auto !important;
    grid-template-areas:"name mixed discard status" !important;
    align-items:center !important;
  }

  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:name !important;display:block !important}
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:mixed !important;display:block !important}
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:discard !important;display:block !important}
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(4){grid-area:status !important;display:block !important}
  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none !important}

  #table-mixed tbody tr:not(.mobile-expanded) input{
    border:0 !important;
    background:transparent !important;
    padding:1.5px 0 !important;
    min-height:0 !important;
    height:auto !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  #table-mixed tbody tr:not(.mobile-expanded) td:nth-child(1) input{
    font-size:15px !important;
    font-weight:800 !important;
  }

  #table-mixed tbody tr:not(.mobile-expanded) .pill{
    font-size:10.2px !important;
    padding:4.5px 7.5px !important;
    white-space:nowrap !important;
  }

  #table-mixed tbody tr:not(.mobile-expanded) .muted{
    display:none !important;
  }

  /* ---------------------------------------------------------
     ADMINISTRATION HISTORY
     Date + peptide + site + reaction/effect in one compact row.
     --------------------------------------------------------- */
  #table-side-effects tbody tr:not(.mobile-expanded){
    grid-template-columns:93px minmax(0,1fr) minmax(111px,.8fr) auto !important;
    grid-template-areas:"date peptide site effects" !important;
    align-items:center !important;
  }
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:date !important;display:block !important;font-size:12.75px !important}
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:peptide !important;display:block !important;font-size:15.75px !important;font-weight:800 !important}
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:site !important;display:block !important;font-size:12px !important;color:var(--text-dim) !important}
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(4){grid-area:effects !important;display:block !important;text-align:right !important}
  #table-side-effects tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none !important}
  #table-side-effects tbody tr:not(.mobile-expanded) .pill{
    font-size:10.2px !important;
    padding:4.5px 7.5px !important;
  }

  /* History filters should not become six full-width stacked controls. */
  #tab-activecycles .history-toolbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:9px !important;
    padding-bottom:4.5px !important;
    scrollbar-width:none !important;
  }
  #tab-activecycles .history-toolbar::-webkit-scrollbar{display:none}
  #tab-activecycles .history-toolbar > div{
    flex:0 0 168px !important;
    min-width:168px !important;
  }
  #tab-activecycles .history-toolbar > div:first-child{
    flex-basis:225px !important;
  }
  #tab-activecycles .history-toolbar label{
    font-size:10.5px !important;
    margin-bottom:3px !important;
  }
  #tab-activecycles .history-toolbar input,
  #tab-activecycles .history-toolbar select{
    height:42px !important;
    min-height:42px !important;
    padding:6px 7.5px !important;
    font-size:12px !important;
  }

  /* ---------------------------------------------------------
     PROGRESS MEASUREMENT HISTORY
     Date + weight + waist + body fat. DEXA/notes/actions expand.
     --------------------------------------------------------- */
  #progress-measurements-table tbody tr:not(.mobile-expanded){
    grid-template-columns:97.5px repeat(3,minmax(0,1fr)) !important;
    grid-template-areas:"date weight waist bodyfat" !important;
    align-items:center !important;
  }
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:date !important;display:block !important;font-size:12.75px !important}
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:weight !important;display:block !important;font-size:15px !important;font-weight:800 !important}
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:waist !important;display:block !important;font-size:13.5px !important}
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(4){grid-area:bodyfat !important;display:block !important;font-size:13.5px !important}
  #progress-measurements-table tbody tr:not(.mobile-expanded) td:nth-child(n+5){display:none !important}

  #progress-measurements-pager{
    padding:9px 0 !important;
    gap:7.5px !important;
  }
  #progress-measurements-pager .btn{
    min-height:42px !important;
    padding:6px 10.5px !important;
    font-size:12px !important;
  }
  #progress-measurements-pager .pager-center{
    font-size:11.25px !important;
  }

  /* Progress import/export controls become a horizontally scrollable tool row. */
  #tab-photos .link-row:has(#progress-import-csv-btn){
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:7.5px !important;
    scrollbar-width:none !important;
  }
  #tab-photos .link-row:has(#progress-import-csv-btn)::-webkit-scrollbar{display:none}
  #tab-photos .link-row:has(#progress-import-csv-btn) .btn{
    flex:0 0 auto !important;
    min-height:42px !important;
    padding:6px 10.5px !important;
    font-size:12px !important;
  }

  /* ---------------------------------------------------------
     HEALTH HISTORY
     Date + metric + value. Source/notes/delete expand.
     --------------------------------------------------------- */
  #health-history-table tbody tr:not(.mobile-expanded){
    grid-template-columns:111px minmax(0,1fr) auto !important;
    grid-template-areas:"date metric value" !important;
    align-items:center !important;
  }
  #health-history-table tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:date !important;display:block !important;font-size:12.75px !important}
  #health-history-table tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:metric !important;display:block !important;font-size:15.75px !important;font-weight:800 !important}
  #health-history-table tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:value !important;display:block !important;font-size:15px !important;font-weight:800 !important;text-align:right !important}
  #health-history-table tbody tr:not(.mobile-expanded) td:nth-child(n+4){display:none !important}

  /* ---------------------------------------------------------
     LAB HISTORY
     Date + marker + result on one row.
     --------------------------------------------------------- */
  #table-labs tbody tr:not(.mobile-expanded){
    grid-template-columns:105px minmax(0,1fr) auto !important;
    grid-template-areas:"date lab value" !important;
    align-items:center !important;
  }
  #table-labs tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:date !important;display:block !important;font-size:12.75px !important}
  #table-labs tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:lab !important;display:block !important;font-size:15.75px !important;font-weight:800 !important}
  #table-labs tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:value !important;display:block !important;font-size:15px !important;font-weight:800 !important;text-align:right !important}
  #table-labs tbody tr:not(.mobile-expanded) td:nth-child(4){display:none !important}

  /* ---------------------------------------------------------
     COST FORECAST
     Peptide + doses + cost, projected spend expands.
     --------------------------------------------------------- */
  #table-cost-forecast tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1.3fr) auto auto !important;
    grid-template-areas:"name doses cost" !important;
    align-items:center !important;
  }
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:name !important;display:block !important;font-size:15.75px !important;font-weight:800 !important}
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:doses !important;display:block !important;font-size:13.5px !important;color:var(--text-dim) !important}
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:cost !important;display:block !important;font-size:14.25px !important;font-weight:700 !important;text-align:right !important}
  #table-cost-forecast tbody tr:not(.mobile-expanded) td:nth-child(4){display:none !important}

  /* ---------------------------------------------------------
     DASHBOARD ACTIVE CYCLES
     Keep the table scan-friendly if there are many cycles.
     --------------------------------------------------------- */
  #table-cycles tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1fr) auto minmax(120px,.7fr) !important;
    grid-template-areas:"name days progress" !important;
    align-items:center !important;
  }
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(1){grid-area:name !important;display:block !important;font-size:15.75px !important;font-weight:800 !important}
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(2){grid-area:days !important;display:block !important;font-size:12.75px !important}
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(3){grid-area:progress !important;display:block !important}
  #table-cycles tbody tr:not(.mobile-expanded) td:nth-child(4){display:none !important}
  #table-cycles .progress{height:6px !important}

  /* ---------------------------------------------------------
     FORMS / DETAIL SECTIONS THAT SHOULD START COLLAPSED OR DENSE
     --------------------------------------------------------- */
  #tab-photos details.card:has(#progress-measurement-form){
    padding:15px 16.5px !important;
  }
  #tab-photos details.card:has(#progress-measurement-form) > summary{
    font-size:15.75px !important;
  }

  .health-log-details{
    margin-top:12px !important;
  }
  .health-log-details > summary{
    font-size:15px !important;
  }

  .lab-history-panel > summary{
    padding:15px 18px !important;
    font-size:15.75px !important;
  }

  /* Inventory search + low-stock filter stay on one compact row. */
  #tab-inventory > .split > div:first-child > .row.cols-2{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:9px !important;
    align-items:end !important;
  }
  #inventory-search{
    min-height:45px !important;
    height:45px !important;
    font-size:14.25px !important;
  }
  #inventory-lowstock-only{
    width:21px !important;
    height:21px !important;
  }

  /* Generic section spacing in list-heavy areas. */
  #tab-inventory .section-title,
  #tab-activecycles .section-title,
  #tab-photos .section-title,
  #tab-labs .section-title{
    margin-top:18px !important;
    margin-bottom:9px !important;
  }

  /* Keep touch actions usable even though the record itself is dense. */
  table.mobile-dense-table .btn.small{
    min-height:42px !important;
    padding:6px 10.5px !important;
    font-size:12px !important;
  }
  table.mobile-dense-table .icon-btn{
    width:42px !important;
    height:42px !important;
    font-size:16.5px !important;
  }
}

/* Narrowest phones get slightly tighter type, but same information density. */
@media(max-width:390px){
  #table-inventory tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1.25fr) 87px 96px auto !important;
  }
  #table-side-effects tbody tr:not(.mobile-expanded){
    grid-template-columns:82.5px minmax(0,1fr) 102px auto !important;
  }
  #progress-measurements-table tbody tr:not(.mobile-expanded){
    grid-template-columns:87px repeat(3,minmax(0,1fr)) !important;
  }
}

/* ===== [9/13] mobile-density-pass-2 ===== */
@media(max-width:760px){

  /* LABS */
  #tab-labs .lab-compare-panel,
  #tab-labs .lab-deep-dive-card{
    padding:12px !important;
  }
  #tab-labs .lab-deep-dive-empty{
    min-height:90px !important;
    padding:14px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }
  #tab-labs .trend-range-controls,
  #tab-labs .dashboard-time-zoom{
    gap:6px !important;
    margin:5px 0 !important;
  }
  #tab-labs .dashboard-time-zoom .label,
  #tab-labs .trend-range-controls label{
    font-size:9px !important;
  }
  #lab-trend-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #lab-trend-cards .lab-selector-card{
    min-height:76px !important;
    padding:8px 9px !important;
  }
  #lab-trend-cards .lab-selector-name{
    font-size:10px !important;
    line-height:1.1 !important;
  }
  #lab-trend-cards .lab-selector-meta{
    font-size:7.5px !important;
  }
  #lab-trend-cards .lab-selector-current{
    font-size:15px !important;
  }

  /* LEVELS */
  #levels-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #levels-cards .levels-selector-card{
    min-height:82px !important;
    padding:8px 9px !important;
    border-radius:10px !important;
  }
  #levels-cards .levels-selector-name{
    font-size:11px !important;
    line-height:1.1 !important;
  }
  #levels-cards .levels-selector-meta{
    font-size:7.5px !important;
    line-height:1.2 !important;
    min-height:18px !important;
  }
  #levels-cards .levels-selector-current{
    font-size:15px !important;
    line-height:1 !important;
  }
  #levels-cards .levels-selector-current span{
    font-size:6.5px !important;
  }
  #levels-cards .pill{
    font-size:6.5px !important;
    padding:3px 5px !important;
  }
  #levels-cards input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
  }

  /* PROGRESS SELECTOR */
  #tab-photos .dashboard-bubble-selector,
  #tab-photos .metric-selector,
  #tab-photos [class*="selector"]:has(.chip){
    max-height:150px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    padding:7px !important;
    border-radius:10px !important;
  }
  #tab-photos .dashboard-bubble-selector .chip,
  #tab-photos .metric-selector .chip{
    min-height:26px !important;
    padding:5px 8px !important;
    font-size:9px !important;
  }

  /* INJECTION SITE ROTATION */
  #site-rotation-panel .site-rotation-cycle{
    padding:8px 0 !important;
    margin:0 !important;
  }
  #site-rotation-panel .site-rotation-empty{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    align-items:center !important;
  }
  #site-rotation-panel .site-rotation-empty .site-rotation-cycle-head{
    display:contents !important;
  }
  #site-rotation-panel .site-rotation-empty b{
    font-size:10.5px !important;
  }
  #site-rotation-panel .site-rotation-empty .muted{
    font-size:7.5px !important;
    white-space:nowrap !important;
  }
  #site-rotation-panel .site-rotation-empty > .muted{
    grid-column:1/-1 !important;
    font-size:7px !important;
    margin-top:0 !important;
  }
  #site-rotation-panel .site-rotation-active{
    padding:9px 0 !important;
  }

  /* PEPTIDE CATALOG */
  #peptide-catalog-groups{
    display:grid !important;
    gap:8px !important;
  }
  #peptide-catalog-groups .catalog-group,
  #peptide-catalog-groups > .card{
    border-radius:11px !important;
    overflow:hidden !important;
  }
  #peptide-catalog-groups .catalog-row,
  #peptide-catalog-groups [data-catalog-id]{
    min-height:44px !important;
    padding:6px 8px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    align-items:center !important;
  }
  #peptide-catalog-groups .catalog-row:not(.mobile-expanded) select,
  #peptide-catalog-groups .catalog-row:not(.mobile-expanded) .catalog-meta,
  #peptide-catalog-groups [data-catalog-id]:not(.mobile-expanded) select,
  #peptide-catalog-groups [data-catalog-id]:not(.mobile-expanded) .catalog-meta{
    display:none !important;
  }
  #peptide-catalog-groups .catalog-row:not(.mobile-expanded) input[type="text"],
  #peptide-catalog-groups [data-catalog-id]:not(.mobile-expanded) input[type="text"]{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    min-height:0 !important;
    height:auto !important;
    font-size:11px !important;
    font-weight:800 !important;
  }
  #peptide-catalog-groups .catalog-row.mobile-expanded,
  #peptide-catalog-groups [data-catalog-id].mobile-expanded{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:8px !important;
  }
  #peptide-catalog-groups .catalog-row.mobile-expanded input[type="text"],
  #peptide-catalog-groups .catalog-row.mobile-expanded select,
  #peptide-catalog-groups [data-catalog-id].mobile-expanded input[type="text"],
  #peptide-catalog-groups [data-catalog-id].mobile-expanded select{
    min-height:34px !important;
    height:34px !important;
    font-size:9.5px !important;
    padding:5px 7px !important;
  }

  /* CALCULATOR FORM */
  #tab-calculator .split{
    display:block !important;
  }
  #tab-calculator .card{
    padding:11px !important;
  }
  #tab-calculator .field{
    margin-bottom:8px !important;
  }
  #tab-calculator .field label{
    font-size:9px !important;
    margin-bottom:3px !important;
  }
  #tab-calculator input,
  #tab-calculator select{
    min-height:34px !important;
    height:34px !important;
    padding:5px 7px !important;
    font-size:10px !important;
  }
  #tab-calculator .row.cols-2{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  #tab-calculator p.muted{
    font-size:8.5px !important;
    line-height:1.3 !important;
  }
  #tab-calculator #calc-standard-mode .segmented,
  #tab-calculator .calc-mode-grid{
    gap:5px !important;
  }

  /* CALCULATOR CONVERSION TABLE */
  #calc-reference-table.mobile-compact-conversion{
    display:table !important;
    width:100% !important;
    table-layout:fixed !important;
  }
  #calc-reference-table.mobile-compact-conversion thead{
    display:table-header-group !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    clip:auto !important;
  }
  #calc-reference-table.mobile-compact-conversion tbody{
    display:table-row-group !important;
  }
  #calc-reference-table.mobile-compact-conversion tr{
    display:table-row !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
  }
  #calc-reference-table.mobile-compact-conversion th,
  #calc-reference-table.mobile-compact-conversion td{
    display:table-cell !important;
    padding:7px 6px !important;
    border-bottom:1px solid var(--border) !important;
    font-size:9.5px !important;
    text-align:right !important;
  }
  #calc-reference-table.mobile-compact-conversion th{
    font-size:7.5px !important;
    text-transform:uppercase !important;
    color:var(--text-dim) !important;
  }
  #calc-reference-table.mobile-compact-conversion th:first-child,
  #calc-reference-table.mobile-compact-conversion td:first-child{
    text-align:left !important;
  }
  #calc-reference-table.mobile-compact-conversion td:before{
    display:none !important;
    content:none !important;
  }

  /* SAVED CYCLES */
  #cycles-list .mobile-cycle-summary{
    padding:7px 9px !important;
    margin-bottom:6px !important;
    min-height:48px !important;
  }
  #cycles-list .mobile-cycle-name{
    font-size:10.5px !important;
  }
  #cycles-list .mobile-cycle-date{
    font-size:7.5px !important;
  }
  #cycles-list .mobile-cycle-toggle{
    min-height:28px !important;
    padding:4px 7px !important;
    font-size:8px !important;
  }

  /* COST FORECAST */
  #table-cost-forecast tbody tr:not(.mobile-expanded){
    min-height:44px !important;
  }
}

@media(max-width:390px){
  #levels-cards,
  #lab-trend-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ===== [10/13] deep-dive-graph-system-final ===== */
  /*
    Deep-dive graph system:
    - Dashboard remains a compact summary surface.
    - Levels, Labs, Progress and Health use expansive charts.
    - Tooltips remain interactive and viewport-safe.
  */
  .deep-dive-chart-stage{
    width:100%;
    min-height:330px;
    margin-top:8px;
  }

  .deep-dive-chart-stage .progress-chart-interactive,
  #levels-deep-dive-chart .pk-chart-wrap,
  #lab-compare-chart .progress-chart-interactive,
  #health-deep-dive .progress-chart-interactive,
  #measurement-weight-chart .progress-chart-interactive{
    width:100%;
    overflow:visible !important;
  }

  .deep-dive-chart-stage svg,
  #levels-deep-dive-chart svg,
  #lab-compare-chart .progress-chart-interactive svg,
  #health-deep-dive .progress-chart-interactive svg{
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
  }

  /* Tooltip cards are fixed-position in JS, so no parent should clip them. */
  .progress-chart-tooltip,
  .pk-chart-tooltip{
    position:fixed !important;
    z-index:100000 !important;
    max-width:min(300px,calc(100vw - 20px)) !important;
    box-sizing:border-box !important;
  }

  /* Labs single-marker rule from older CSS capped chart at 190px. Remove that cap. */
  #lab-compare-chart .dashboard-style-lab .lab-reference-chart .trend-chart{
    height:auto !important;
    min-height:340px !important;
    max-height:none !important;
  }

  /* Progress secondary charts are now actual analytical charts rather than sparklines. */
  #measurement-waist-chart,
  #measurement-bodyfat-chart,
  #measurement-leanmass-chart,
  #measurement-fatmass-chart,
  #measurement-bmd-chart{
    min-height:285px;
  }

  #measurement-waist-chart .trend-chart,
  #measurement-bodyfat-chart .trend-chart,
  #measurement-leanmass-chart .trend-chart,
  #measurement-fatmass-chart .trend-chart,
  #measurement-bmd-chart .trend-chart{
    height:auto !important;
    min-height:285px !important;
    max-height:none !important;
  }

  @media(max-width:760px){
    .deep-dive-chart-stage{
      min-height:320px !important;
    }

    #levels-deep-dive-chart{
      min-height:330px !important;
      overflow:visible !important;
    }

    #levels-deep-dive-chart .pk-chart-wrap,
    #levels-deep-dive-chart .pk-chart-wrap svg{
      min-height:330px !important;
      max-height:none !important;
      height:auto !important;
    }

    #lab-compare-chart .progress-chart-interactive,
    #lab-compare-chart .lab-reference-chart{
      min-height:330px !important;
      overflow:visible !important;
    }

    #lab-compare-chart .dashboard-style-lab .lab-reference-chart .trend-chart,
    #lab-compare-chart .trend-chart{
      min-height:330px !important;
      max-height:none !important;
      height:auto !important;
    }

    #health-deep-dive .progress-chart-interactive,
    #health-deep-dive .trend-chart{
      min-height:320px !important;
      max-height:none !important;
      height:auto !important;
    }

    #measurement-weight-chart .deep-dive-chart-stage,
    #measurement-weight-chart .progress-chart-interactive{
      min-height:330px !important;
    }

    #measurement-weight-chart .trend-chart,
    #measurement-weight-chart .progress-lane-chart svg{
      min-height:320px !important;
      max-height:none !important;
      height:auto !important;
    }

    #measurement-waist-chart,
    #measurement-bodyfat-chart,
    #measurement-leanmass-chart,
    #measurement-fatmass-chart,
    #measurement-bmd-chart{
      min-height:270px !important;
    }

    #measurement-waist-chart .trend-chart,
    #measurement-bodyfat-chart .trend-chart,
    #measurement-leanmass-chart .trend-chart,
    #measurement-fatmass-chart .trend-chart,
    #measurement-bmd-chart .trend-chart{
      min-height:270px !important;
      max-height:none !important;
      height:auto !important;
    }

    .progress-chart-tooltip,
    .pk-chart-tooltip{
      min-width:180px !important;
      max-width:min(270px,calc(100vw - 16px)) !important;
      font-size:10.5px !important;
      line-height:1.3 !important;
      padding:9px 10px !important;
    }

    /* Controls stay compact so the extra room goes to the graph itself. */
    #levels-deep-dive .trend-range-controls,
    #lab-compare-chart .trend-range-controls,
    #health-deep-dive .trend-range-controls,
    #measurement-weight-chart .trend-range-controls,
    #levels-deep-dive .dashboard-time-zoom,
    #lab-compare-chart .dashboard-time-zoom,
    #measurement-weight-chart .dashboard-time-zoom{
      gap:5px !important;
      margin:5px 0 !important;
    }

    /* Explicitly preserve compact Dashboard charts. */
    #tab-dashboard .dashboard-main-grid .dashboard-chart-stage{
      min-height:138px !important;
      max-height:155px !important;
      overflow:hidden !important;
    }

    #tab-dashboard .dashboard-main-grid .progress-chart-interactive svg,
    #tab-dashboard .dashboard-main-grid .pk-chart-wrap svg,
    #tab-dashboard #dashboard-lab-panel .trend-chart{
      min-height:0 !important;
      max-height:145px !important;
      height:auto !important;
    }
  }

/* ===== [11/13] mobile-levels-rotation-history-cleanup ===== */
  .levels-selector-card-clean{
    min-height:0 !important;
    padding:10px 11px !important;
  }
  .levels-selector-title-stack{min-width:0;}
  .levels-selector-status-line{
    margin-top:2px;
    color:var(--text-dim);
    font-size:10.5px;
    line-height:1.25;
  }
  .levels-selector-meta-row{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    margin-top:7px;
  }
  .levels-meta-pill{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    background:var(--surface-1);
    border:1px solid var(--border);
    font-size:10px;
    font-weight:700;
    color:var(--text-dim);
    max-width:100%;
  }
  .levels-selector-bottom-clean{
    margin-top:8px !important;
    align-items:flex-end !important;
  }
  .site-rotation-card-clean{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-1);
    padding:12px 13px;
  }
  .site-rotation-head-clean{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
  }
  .site-rotation-name{
    font-size:16px;
    font-weight:850;
    line-height:1.15;
  }
  .site-rotation-meta{
    margin-top:3px;
    font-size:11.5px;
    color:var(--text-dim);
  }
  .site-rotation-next-pill{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:7px 9px;
    border-radius:12px;
    background:color-mix(in srgb,var(--primary) 9%,var(--panel));
    border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
    min-width:135px;
  }
  .site-rotation-next-pill span{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-dim);
    font-weight:800;
  }
  .site-rotation-next-pill b{font-size:12px;line-height:1.2;}
  .site-rotation-bars-clean{
    display:grid;
    gap:7px;
    margin-top:11px;
  }
  .site-rotation-bar-row{
    display:grid;
    grid-template-columns:minmax(100px,132px) 1fr auto;
    gap:8px;
    align-items:center;
    font-size:12px;
  }
  .site-rotation-bar-row b{font-size:12px;color:var(--text-dim);font-weight:800;}
  .site-rotation-foot-clean,
  .site-rotation-empty-clean{
    margin-top:10px;
    font-size:11px;
    line-height:1.4;
    color:var(--text-dim);
  }
  @media(max-width:760px){
    .levels-selector-card-clean .levels-selector-name{
      font-size:15px !important;
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
      line-height:1.2 !important;
    }
    .levels-selector-card-clean .levels-selector-status-line{font-size:11px;}
    .levels-selector-card-clean .levels-meta-pill{font-size:10px;}
    .levels-selector-card-clean .levels-selector-current{font-size:15px !important;margin-top:0 !important;}
    .levels-selector-card-clean .levels-selector-current span{display:inline-block;margin-left:4px;font-size:10px !important;}
    .site-rotation-card-clean{padding:11px 12px;}
    .site-rotation-name{font-size:15px;}
    .site-rotation-meta{font-size:11px;}
    .site-rotation-next-pill{min-width:0;width:100%;padding:7px 8px;}
    .site-rotation-bar-row{grid-template-columns:88px 1fr 26px;font-size:11.5px;gap:7px;}

    #table-side-effects tbody tr{
      padding:8px 10px 9px !important;
      border-radius:12px !important;
      margin-bottom:8px !important;
    }
    #table-side-effects tbody td{
      padding:3px 0 !important;
      font-size:11px !important;
    }
    #table-side-effects tbody td[data-label="Date"]{
      font-size:12.5px !important;
      font-weight:850 !important;
    }
    #table-side-effects tbody td[data-label="Peptide / Blend"]{
      font-size:14px !important;
      font-weight:850 !important;
      line-height:1.15 !important;
    }
    #table-side-effects tbody td[data-label="Site"]{
      font-size:12px !important;
      color:var(--text-dim) !important;
    }
    #table-side-effects .pill{
      padding:4px 7px !important;
      font-size:10px !important;
    }
    #table-side-effects .log-chip-btn{
      padding:5px 9px !important;
      font-size:11px !important;
      border-radius:999px !important;
    }
  }

/* ===== [12/13] full-audit-implementation-final ===== */
.dashboard-nav-card,[data-dashboard-widget][data-dashboard-nav]{cursor:pointer;transition:transform .14s ease,border-color .14s ease}.dashboard-nav-card:hover,[data-dashboard-widget][data-dashboard-nav]:hover{border-color:color-mix(in srgb,var(--primary) 48%,var(--border))}.dashboard-nav-card:active,[data-dashboard-widget][data-dashboard-nav]:active{transform:scale(.995)}.dashboard-nav-card:focus-visible,[data-dashboard-widget][data-dashboard-nav]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.previous-site-summary{display:grid}.previous-site-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,1fr) auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--border)}.previous-site-row:last-child{border-bottom:0}.previous-site-compound{font-weight:850}.previous-site-date{color:var(--text-dim);font-size:11px;text-align:right}
.cycle-group{border:1px solid var(--border);background:var(--panel);border-radius:13px;margin-bottom:9px;overflow:hidden}.cycle-group>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:11px 13px;font-weight:850;list-style:none}.cycle-group>summary::-webkit-details-marker{display:none}.cycle-group>summary:after{content:"⌄";color:var(--text-dim);font-size:14px;order:3}.cycle-group[open]>summary:after{content:"⌃"}.cycle-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:22px;padding:0 7px;border-radius:999px;background:var(--surface-1);border:1px solid var(--border);font-size:10px;color:var(--text-dim);margin-left:auto}.cycle-group-body{padding:0 8px 8px}.cycle-group-body .mobile-cycle-summary{margin:0 0 7px!important}.cycle-group-empty{padding:8px 5px 11px;color:var(--text-dim);font-size:11px}
.wellness-mini-card{border:1px solid var(--border);background:var(--surface-1);border-radius:12px;padding:10px 11px;text-align:left;color:var(--text);width:100%;min-width:0;cursor:pointer}.wellness-mini-head,.wellness-mini-foot{display:flex;justify-content:space-between;gap:6px;align-items:center}.wellness-mini-head span{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)}.wellness-mini-head b{font-size:14px}.wellness-mini-spark{height:62px;display:flex;align-items:flex-end;gap:4px;margin:8px 0 6px}.wellness-mini-spark i{display:block;flex:1;min-width:4px;border-radius:4px 4px 2px 2px;background:linear-gradient(var(--primary),color-mix(in srgb,var(--primary) 60%,var(--panel)));opacity:.9}.wellness-mini-empty{height:62px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:10px;margin:8px 0 6px}.wellness-mini-foot{font-size:8.5px;color:var(--text-dim)}
main,.card,.today-panel,.table-wrap,.subtab,.tab{max-width:100%;box-sizing:border-box}input,select,textarea,button{max-width:100%}body{padding-bottom:max(86px,calc(env(safe-area-inset-bottom) + 72px))}
@media(max-width:760px){#wellness-trend-charts{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}.wellness-mini-card{padding:8px 7px}.wellness-mini-head span{font-size:8.5px}.wellness-mini-head b{font-size:12px}.wellness-mini-spark{height:48px;gap:3px;margin:6px 0 5px}.wellness-mini-foot{font-size:7px;display:block;line-height:1.25}.wellness-mini-foot span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.previous-site-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px 9px;padding:9px 2px}.previous-site-compound{font-size:12px}.previous-site-value{font-size:11px;text-align:right}.previous-site-date{grid-column:1/-1;font-size:8.5px;text-align:right}.history-toolbar{display:flex!important;gap:6px!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:5px;scrollbar-width:none}.history-toolbar::-webkit-scrollbar{display:none}.history-toolbar>div{flex:0 0 125px!important;min-width:125px!important}.history-toolbar>div:first-child{flex-basis:180px!important;min-width:180px!important}.history-toolbar label{font-size:8px!important}.history-toolbar input,.history-toolbar select{height:34px!important;min-height:34px!important;font-size:10px!important}.cycle-group>summary{padding:10px 11px;font-size:12px}.cycle-group-count{height:20px;min-width:22px;font-size:9px}.mini-chart-empty,.empty,.levels-deep-dive-empty,.lab-deep-dive-empty,.progress-deep-dive-empty{min-height:0!important}#tab-dashboard,#tab-activecycles,#tab-photos,#tab-levels,#tab-labs,#tab-builder,#tab-calculator,#tab-inventory,#tab-peptides{padding-bottom:92px!important}}

/* ===== [13/13] (unnamed block 13) ===== */
  /* Final Levels-page override: dashboard-style horizontal tiles */
  #tab-levels #levels-cards{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    align-items:stretch !important;
  }
  #tab-levels #levels-cards > .levels-selector-card{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px 11px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
  }
  #tab-levels .levels-selector-main{width:100% !important;min-width:0 !important;}
  #tab-levels .levels-selector-top{
    display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;
  }
  #tab-levels .levels-selector-name{
    font-size:13px !important;line-height:1.2 !important;white-space:nowrap !important;
    overflow:hidden !important;text-overflow:ellipsis !important;
  }
  #tab-levels .levels-selector-meta{
    margin-top:4px !important;font-size:9.5px !important;line-height:1.25 !important;
    white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
  }
  #tab-levels .levels-selector-bottom{
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    gap:6px !important;margin-top:8px !important;flex-wrap:wrap !important;
  }
  #tab-levels .levels-selector-current{margin:0 !important;font-size:15px !important;line-height:1 !important;white-space:nowrap !important;}
  #tab-levels .levels-selector-current span{font-size:8.5px !important;}
  #tab-levels .levels-selector-card .pill{font-size:8.5px !important;line-height:1 !important;padding:4px 6px !important;white-space:nowrap !important;}

  @media(max-width:1200px){#tab-levels #levels-cards{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
  @media(max-width:820px){#tab-levels #levels-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
  @media(max-width:560px){#tab-levels #levels-cards{grid-template-columns:1fr !important;}}

/* ===== [14/14] levels: missing-strength callout ===== */
.levels-note-action{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--amber-bg);border:1px solid var(--amber);
  border-radius:8px;padding:10px 12px;
}
.levels-note-action .btn{flex:none;}

/* A hidden row must actually hide. Two rules outrank the UA [hidden] default here:
   .row{display:grid} and, under (max-width:760px), #cycle-form .row.cols-2{display:grid!important}
   — the latter needs matching specificity, hence the second selector. */
[hidden]{display:none!important;}
#cycle-form .row.cols-2[hidden]{display:none!important;}


/* ===== Levels deep-dive wide-chart hotfix 2026-09-07 ===== */
#tab-levels #levels-deep-dive-chart{
  width:100%;
  min-height:430px;
}
#tab-levels #levels-deep-dive-chart .pk-interactive-chart,
#tab-levels #levels-deep-dive-chart [data-pk-svg-host]{
  width:100%;
}
#tab-levels #levels-deep-dive-chart svg.trend-chart{
  width:100% !important;
  height:auto !important;
  min-height:390px;
  max-height:520px;
  display:block;
}
@media(max-width:760px){
  #tab-levels #levels-deep-dive-chart{min-height:330px;}
  #tab-levels #levels-deep-dive-chart svg.trend-chart{
    min-height:310px;
    max-height:390px;
  }
}

/* ===== coordinated density + deep-dive + inventory pass 2026-09-07 ===== */
/* Active Cycles: pair major sections down the desktop page to reduce vertical scrolling. */
.activecycles-pair-grid{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:14px;
  align-items:start;
  margin-top:12px;
}
.activecycles-pair-grid > *{min-width:0;margin-top:0 !important;}
.activecycles-panel-group{min-width:0;}
.activecycles-panel-group > .section-title{margin-top:0;}
.activecycles-history-grid .history-toolbar{margin-top:8px;}
.activecycles-manage-card{margin-top:14px !important;}
#tab-activecycles .card{padding-top:12px;padding-bottom:12px;}
#tab-activecycles .section-title{margin-bottom:7px;}
#tab-activecycles .table-wrap{margin-top:5px;}
#tab-activecycles td,#tab-activecycles th{padding-top:8px;padding-bottom:8px;}
#daily-log-panel .field{margin-top:9px !important;}
#daily-log-panel #wellness-checkin-fields{margin-top:8px !important;}

/* Desktop month view: fit a full 5-6 week month on a smaller laptop screen. */
@media(min-width:761px){
  #calendar-month-view .cal-weekday-row{margin-top:10px;gap:5px;font-size:10px;}
  #calendar-month-view .cal-grid{gap:5px;margin-top:6px;}
  #calendar-month-view .cal-cell{
    aspect-ratio:auto !important;
    min-height:76px;
    height:clamp(76px,10.2vh,102px);
    border-radius:8px;
    gap:2px;
    padding:3px;
  }
  #calendar-month-view .cal-daynum{font-size:11.5px;}
  #calendar-month-view .cal-dot{width:6px;height:6px;}
  #calendar-month-view .cal-note-flag{font-size:8px;}
  #tab-calendar .card{padding-top:12px;padding-bottom:12px;}
  #tab-calendar .cal-legend{margin-top:8px;font-size:10px;}
  #tab-calendar .muted{margin-top:7px !important;}
}

/* Make deep-dive plot area consume the card instead of sitting in a narrow center column. */
@media(min-width:761px){
  #lab-compare-chart .deep-dive-chart-stage,
  #measurement-weight-chart .deep-dive-chart-stage,
  #health-deep-dive .deep-dive-chart-stage{
    width:100% !important;
    min-height:360px !important;
  }
  #lab-compare-chart .progress-chart-interactive,
  #measurement-weight-chart .progress-chart-interactive,
  #health-deep-dive .progress-chart-interactive,
  #lab-compare-chart .lab-reference-chart{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  #lab-compare-chart svg.trend-chart,
  #lab-compare-chart .trend-chart,
  #measurement-weight-chart svg.trend-chart,
  #measurement-weight-chart .trend-chart,
  #health-deep-dive svg.trend-chart,
  #health-deep-dive .trend-chart{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:100% !important;
    height:360px !important;
    min-height:360px !important;
  }
  #measurement-weight-chart .progress-deep-dive-card{padding-left:28px !important;padding-right:28px !important;}
  #lab-compare-chart .lab-deep-dive-card{padding-left:28px !important;padding-right:28px !important;}
}

/* Health metric cards act as fast-add buttons. */
.health-metric-card{position:relative;}
.health-metric-card::after{
  content:"+ Add";
  position:absolute;
  right:9px;
  top:8px;
  font-size:8px;
  font-weight:800;
  color:var(--primary);
  opacity:.78;
}
.health-metric-card .name{padding-right:38px;}
.health-log-details[open]{scroll-margin-top:100px;}

/* Inventory cycle-link states and compound color references. */
.btn.active-link{background:var(--primary-dim)!important;color:var(--primary)!important;border-color:var(--primary)!important;}
.inventory-cycle-link{margin-top:5px;font-size:9px;font-weight:800;color:var(--primary);letter-spacing:.02em;}
.mixed-vial-name-row{display:flex;align-items:center;gap:7px;min-width:0;}
.mixed-vial-name-row input{min-width:0;flex:1;}
.mixed-vial-colors{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;}
.mixed-vial-colors i{display:block;width:8px;height:18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);}

/* Active vial details modal. */
.vial-details-modal{display:none;position:fixed;inset:0;z-index:100000;align-items:center;justify-content:center;padding:18px;}
.vial-details-modal.open{display:flex;}
.vial-details-backdrop{position:absolute;inset:0;background:rgba(8,20,16,.48);backdrop-filter:blur(5px);}
.vial-details-card{position:relative;width:min(680px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.24);}
.vial-details-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;}
.vial-details-head h3{margin:2px 0 5px;font-size:21px;}
.vial-detail-color-row{display:flex;gap:7px;flex-wrap:wrap;}
.vial-detail-color-row span{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:var(--text-dim);}
.vial-detail-color-row i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.vial-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px;}
.vial-detail-grid>div{background:var(--surface-1);border:1px solid var(--border);border-radius:11px;padding:10px;min-width:0;}
.vial-detail-grid span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:800;}
.vial-detail-grid b{display:block;margin-top:4px;font-size:12px;line-height:1.35;overflow-wrap:anywhere;}
.vial-reference-note{margin-top:11px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);}
.vial-reference-note b{display:block;font-size:10px;margin-bottom:4px;}
.vial-reference-note span{display:block;font-size:10px;line-height:1.5;color:var(--text-dim);}
.vial-details-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px;}

/* Global density pass: less vertical whitespace without making controls cramped. */
@media(min-width:761px){
  .subtab>.card{margin-bottom:12px;}
  .section-title{margin-top:16px;}
  .card{border-radius:13px;}
}

@media(max-width:1050px){
  .activecycles-pair-grid{grid-template-columns:1fr;gap:10px;}
}
@media(max-width:760px){
  .activecycles-pair-grid{display:block;margin-top:8px;}
  .activecycles-pair-grid>*+*{margin-top:10px !important;}
  .vial-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vial-details-card{padding:14px;border-radius:14px;}
  .health-metric-card::after{font-size:7px;right:7px;top:7px;}
  /* Mobile density: secondary info stays compact while touch targets remain usable. */
  main{padding-top:10px !important;}
  .card{padding-top:11px;padding-bottom:11px;}
  .section-title{margin-top:14px;}
  .health-deep-dive-wrap{margin-top:10px;padding-top:10px;}
  .trend-range-controls{margin-top:8px;margin-bottom:7px;gap:7px;}
}
@media(max-width:460px){.vial-detail-grid{grid-template-columns:1fr;}}


/* A builder row with one field hidden (pre-filled pens have no diluent) must collapse to a
   single column. #cycle-form .row.cols-2 sets grid-template-columns with !important under
   (max-width:760px), which an inline style cannot beat — hence the class. */
#cycle-form .row.cols-2.single-col{grid-template-columns:minmax(0,1fr)!important;}

/* Off-ladder dose advisory (pre-filled devices only). Advisory, never blocking — a
   compounded vial can legitimately hold a dose no pen delivers. */
.dose-ladder-note{
  margin-top:6px;font-size:11.5px;line-height:1.45;
  background:var(--amber-bg);border:1px solid var(--amber);color:var(--amber);
  border-radius:7px;padding:7px 9px;
}

/* ===== Pro depth layer on reference cards ===== */
.ref-depth{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;}
.ref-depth-head{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:8px;}
.ref-depth-row{margin-bottom:9px;}
.ref-depth-row > span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);font-weight:700;margin-bottom:2px;}
.ref-depth-row > p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text);}
.ref-depth-locked .ref-depth-preview{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.ref-depth-locked .ref-depth-preview span{font-size:11.5px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 9px;}


/* ===== 09/08 coordinated cleanup pass ===== */
/* Progress Deep Dive owns the full card width. Metric arrows sit above the plot so they never steal cursor space. */
#measurement-weight-chart .progress-deep-dive-card{
  padding-left:18px !important;
  padding-right:18px !important;
  overflow:visible !important;
}
#measurement-weight-chart .progress-deep-dive-nav{
  position:absolute !important;
  top:12px !important;
  right:14px !important;
  left:auto !important;
  transform:none !important;
  width:auto !important;
  display:flex !important;
  gap:6px !important;
  padding:0 !important;
  pointer-events:auto !important;
  z-index:12 !important;
}
#measurement-weight-chart .progress-deep-dive-nav button{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  font-size:22px !important;
}
#measurement-weight-chart .deep-dive-chart-stage,
#measurement-weight-chart .progress-chart-interactive,
#measurement-weight-chart .trend-chart,
#measurement-weight-chart svg.trend-chart{
  width:100% !important;
  max-width:none !important;
}
@media(min-width:761px){
  #measurement-weight-chart .progress-deep-dive-card{padding-left:18px !important;padding-right:18px !important;}
  #measurement-weight-chart .deep-dive-chart-stage{min-height:380px !important;}
  #measurement-weight-chart .trend-chart,#measurement-weight-chart svg.trend-chart{height:380px !important;min-height:380px !important;}
}
@media(max-width:760px){
  #measurement-weight-chart .progress-deep-dive-card{padding-left:12px !important;padding-right:12px !important;padding-top:58px !important;}
  #measurement-weight-chart .progress-deep-dive-nav{top:10px !important;right:10px !important;}
}

/* General trend visuals use the same line/area language as the rest of the app. */
.mini-trend-wrap{width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 0 0;}
.mini-trend-svg{display:block;width:100%;min-width:420px;height:170px;overflow:visible;}
.mini-trend-area{fill:color-mix(in srgb,var(--primary) 14%,transparent);stroke:none;}
.mini-trend-line{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.mini-trend-point circle{fill:var(--panel);stroke:var(--primary);stroke-width:2.2;}
.mini-trend-label{fill:var(--text-dim);font-size:10px;font-weight:700;}
.wellness-mini-spark{height:62px;margin:8px 0 6px;display:block;}
.wellness-mini-spark svg{width:100%;height:100%;display:block;overflow:visible;}
.wellness-spark-area{fill:color-mix(in srgb,var(--primary) 12%,transparent);stroke:none;}
.wellness-spark-line{fill:none;stroke:var(--primary);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
.wellness-mini-spark circle{fill:var(--panel);stroke:var(--primary);stroke-width:1.8;vector-effect:non-scaling-stroke;}

/* Dashboard vial selection stays in-place and only allows compatible cycle compounds. */
.dashboard-vial-picker-card{max-width:640px !important;}
.dashboard-vial-choice-list{display:grid;gap:8px;margin:14px 0;max-height:320px;overflow:auto;}
.dashboard-vial-choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--border);background:var(--surface-1);color:var(--text);border-radius:12px;padding:12px 13px;cursor:pointer;}
.dashboard-vial-choice:hover,.dashboard-vial-choice:focus{border-color:var(--primary);outline:none;}
.dashboard-vial-choice.selected{border-color:var(--primary);background:var(--primary-dim);}
.dashboard-vial-choice:disabled{opacity:.5;cursor:not-allowed;}
.dashboard-vial-choice-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.dashboard-vial-choice-main b{font-size:13px;}
.dashboard-vial-choice-main small{color:var(--text-dim);font-size:10.5px;}
.dashboard-vial-empty{padding:18px 8px !important;}
.dashboard-mix-new{border-top:1px solid var(--border);padding-top:12px;margin-top:8px;}
.dashboard-mix-new>summary{cursor:pointer;font-weight:800;color:var(--primary);font-size:12px;}
.dashboard-mix-new form{margin-top:12px;}
.inventory-cycle-link.incompatible{color:var(--text-dim);opacity:.7;}

/* ===== 09/08 deep-dive proportion + navigation polish ===== */
/* Shared desktop rule: wide plot, moderate height, useful context visible without a second screenful. */
@media (min-width: 761px){
  #measurement-weight-chart .progress-deep-dive-card,
  #levels-deep-dive-workspace .levels-deep-dive-card,
  #lab-compare-chart .lab-deep-dive-card{
    position:relative;
    overflow:visible !important;
  }

  /* Progress: true edge-to-edge plot inside safe gutters. */
  #measurement-weight-chart .progress-deep-dive-card{
    padding-left:22px !important;
    padding-right:22px !important;
  }
  #measurement-weight-chart .progress-chart-interactive,
  #measurement-weight-chart .deep-dive-chart-stage{
    width:100% !important;
    min-height:300px !important;
    max-height:330px !important;
    overflow:visible !important;
  }
  #measurement-weight-chart .trend-chart,
  #measurement-weight-chart svg.trend-chart{
    width:100% !important;
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
    overflow:visible !important;
  }

  /* Metric navigation belongs beside the graph, vertically centered. */
  #measurement-weight-chart .progress-deep-dive-nav,
  #levels-deep-dive-workspace .levels-deep-dive-nav,
  #lab-compare-chart .lab-deep-dive-nav{
    position:absolute !important;
    inset:50% 0 auto 0 !important;
    transform:translateY(-50%) !important;
    width:100% !important;
    padding:0 8px !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    pointer-events:none !important;
    z-index:15 !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav button,
  #levels-deep-dive-workspace .levels-deep-dive-nav button,
  #lab-compare-chart .lab-deep-dive-nav button{
    pointer-events:auto !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
    box-shadow:0 8px 24px rgba(20,65,52,.10);
  }

  /* Levels was too tall. Keep the 30-day shape readable and pull stats into the same viewport. */
  #levels-deep-dive-chart{
    min-height:0 !important;
    height:auto !important;
    margin-top:8px !important;
  }
  #levels-deep-dive-chart .pk-chart-wrap,
  #levels-deep-dive-chart .pk-interactive-chart,
  #levels-deep-dive-chart svg.trend-chart,
  #levels-deep-dive-chart [data-pk-svg-host]{
    min-height:0 !important;
    max-height:310px !important;
    height:auto !important;
  }
  #levels-deep-dive-workspace .levels-stat-row{
    margin-top:8px !important;
    padding-top:9px !important;
  }

  /* Labs: compact the chart so stats + personalized insight read as part of the deep dive. */
  #lab-compare-chart .progress-chart-interactive,
  #lab-compare-chart .lab-reference-chart{
    min-height:0 !important;
    max-height:300px !important;
    overflow:visible !important;
  }
  #lab-compare-chart .dashboard-style-lab .lab-reference-chart .trend-chart,
  #lab-compare-chart .trend-chart{
    min-height:0 !important;
    height:285px !important;
    max-height:300px !important;
  }
  #lab-compare-chart .lab-dashboard-stats{
    margin-top:10px !important;
  }
  #lab-compare-chart .lab-insight,
  #lab-compare-chart .lab-insight-card,
  #lab-compare-chart [class*="insight"]{
    font-size:12px;
    line-height:1.5;
  }
  #lab-compare-chart .lab-insight-card,
  #lab-compare-chart .lab-related-health,
  #lab-compare-chart .lab-personalized-insight{
    padding:14px 16px !important;
  }

  /* Keep primary selectors available, but reduce the wall-of-chips effect. */
  #tab-progress .dashboard-bubble-head,
  #tab-labs .trend-range-controls{
    position:sticky;
    top:76px;
    z-index:24;
    background:color-mix(in srgb,var(--page) 94%,transparent);
    backdrop-filter:blur(8px);
    border-radius:10px;
  }
  #tab-progress .dashboard-bubble-selector{
    max-height:118px;
    overflow:auto;
    padding-right:4px;
    scrollbar-width:thin;
  }
  #tab-labs #lab-trend-cards{
    max-height:154px;
    overflow:auto;
    align-content:start;
    scrollbar-width:thin;
  }

  /* Secondary utility controls should not visually compete with the selected metric. */
  #measurement-weight-chart [data-progress-deep-clear],
  #levels-deep-dive-workspace [data-levels-clear],
  #lab-compare-chart [data-lab-deep-clear]{
    opacity:.82;
    font-weight:700;
  }
}

/* More forgiving chart interaction targets without making the dots visually huge. */
.progress-chart-interactive svg,
.pk-interactive-chart svg{touch-action:pan-y;}
.trend-point{stroke:transparent;stroke-width:12px;paint-order:stroke fill;pointer-events:all;}

/* Match tooltip language across Progress, Levels and Labs. */
.progress-chart-tooltip,.pk-chart-tooltip{
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:0 12px 34px rgba(22,56,46,.14) !important;
}

@media (max-width:760px){
  /* Mobile keeps independent sizing and side arrows without covering top controls. */
  #measurement-weight-chart .progress-deep-dive-nav,
  #levels-deep-dive-workspace .levels-deep-dive-nav,
  #lab-compare-chart .lab-deep-dive-nav{
    top:50% !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    justify-content:space-between !important;
    padding:0 4px !important;
    pointer-events:none !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav button,
  #levels-deep-dive-workspace .levels-deep-dive-nav button,
  #lab-compare-chart .lab-deep-dive-nav button{pointer-events:auto !important;}
}

/* ===== 0908 mobile density + deep-dive polish pass ===== */
@media(max-width:760px){
  /* Keep the top Track sub-navigation fully visible without horizontal clipping. */
  #tab-track > .subnav{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    overflow:visible !important;
    padding:5px !important;
  }
  #tab-track > .subnav button{
    min-width:0 !important;
    width:100% !important;
    padding:10px 6px !important;
    font-size:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Make the dashboard denser while keeping it readable. */
  #tab-dashboard > .grid.stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  #tab-dashboard > .grid.stats > .stat-card{
    padding:10px 9px !important;
    border-radius:12px !important;
    min-height:72px !important;
  }
  #tab-dashboard > .grid.stats > .stat-card .label{
    font-size:8.5px !important;
    line-height:1.15 !important;
    min-height:auto !important;
    letter-spacing:.03em !important;
  }
  #tab-dashboard > .grid.stats > .stat-card .value{
    font-size:18px !important;
    margin-top:4px !important;
  }
  #tab-dashboard > .grid.stats > .stat-card #stat-next-dose,
  #tab-dashboard > .grid.stats > .stat-card #stat-cost-per-dose,
  #tab-dashboard > .grid.stats > .stat-card .growth-kpi-sub{
    font-size:8px !important;
    line-height:1.2 !important;
    min-height:0 !important;
  }

  #dashboard-active-vials-card{
    padding:10px !important;
    margin:8px 0 10px !important;
  }
  #dashboard-active-vials .active-vials-grid{
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:minmax(170px,78%) !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:1px 2px 4px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch;
  }
  #dashboard-active-vials .vial-card{
    scroll-snap-align:start;
    padding:10px 11px !important;
    gap:10px !important;
    border-radius:12px !important;
    flex-direction:row !important;
    text-align:left !important;
  }
  #dashboard-active-vials .vial-card-icon{display:block !important;}
  #dashboard-active-vials .vial-card-icon svg{width:26px !important;}
  #dashboard-active-vials .vial-card-head{
    justify-content:flex-start !important;
    font-size:11px !important;
    margin-bottom:5px !important;
  }
  #dashboard-active-vials .vial-fill-text{
    font-size:9px !important;
    line-height:1.25 !important;
  }
  #dashboard-active-vials .vial-fill-sub{
    font-size:8px !important;
    line-height:1.2 !important;
    max-height:none !important;
  }

  #tab-dashboard .dashboard-main-grid{
    gap:10px !important;
    margin-top:10px !important;
  }
  #tab-dashboard .dashboard-main-grid > .today-panel,
  #tab-dashboard .dashboard-main-grid .response-card,
  #tab-dashboard .today-panel{
    padding:12px !important;
    border-radius:14px !important;
  }
  #tab-dashboard .dashboard-main-grid .today-panel-head,
  #tab-dashboard .dashboard-main-grid .response-card-head{
    margin-bottom:8px !important;
    min-height:0 !important;
    gap:8px !important;
  }
  #tab-dashboard .dashboard-main-grid .today-panel-title,
  #tab-dashboard .dashboard-main-grid .response-card-title{
    font-size:14px !important;
  }
  #tab-dashboard .dashboard-main-grid .today-panel-kicker,
  #tab-dashboard .dashboard-main-grid .response-card-label{
    font-size:8px !important;
    margin-bottom:3px !important;
  }
  #tab-dashboard .dashboard-main-grid .panel-nav-carousel{
    margin:4px 0 8px !important;
    grid-template-columns:32px 1fr 32px !important;
    gap:6px !important;
  }
  #tab-dashboard .dashboard-main-grid .panel-nav-arrow{
    width:32px !important;
    height:32px !important;
  }

  .dose-period + .dose-period{margin-top:12px !important;}
  .dose-period-label{margin-bottom:6px !important; font-size:9px !important;}
  .dose-stack{gap:6px !important;}
  .today-dose{
    gap:8px !important;
    padding:9px 10px !important;
    border-radius:10px !important;
  }
  .today-dose-accent{min-height:34px !important;}
  .today-dose-name{font-size:12px !important;}
  .today-dose-meta{font-size:9px !important; margin-top:2px !important;}
  .today-dose-action{gap:6px !important;}
  .today-dose-action input{width:18px !important; height:18px !important;}

  #dashboard-checkin-panel .dashboard-checkin-toolbar,
  #dashboard-progress-snapshot .dashboard-progress-actions,
  #dashboard-progress-snapshot .dashboard-progress-latest,
  #dashboard-weight-panel .level-chart-meta,
  #dashboard-lab-panel .level-chart-meta,
  #dashboard-level-panel .level-chart-meta{
    margin-top:8px !important;
  }
  #dashboard-checkin-panel .dashboard-checkin-fields{
    gap:6px !important;
    margin-top:6px !important;
    margin-bottom:8px !important;
  }
  #dashboard-checkin-panel .dashboard-checkin-field{
    min-height:40px !important;
    padding:5px 7px !important;
    grid-template-columns:minmax(0,1fr) 104px !important;
  }
  #dashboard-checkin-panel .dashboard-checkin-field label{font-size:10px !important;}
  #dashboard-checkin-panel .dashboard-checkin-field select{font-size:9.5px !important; padding:4px 6px !important;}

  #dashboard-progress-snapshot .dashboard-progress-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:8px 0 !important;
  }
  #dashboard-progress-snapshot .dashboard-progress-action{
    min-height:34px !important;
    font-size:10px !important;
    border-radius:9px !important;
  }
  #dashboard-progress-snapshot .dashboard-progress-latest{
    padding-top:7px !important;
    margin-top:7px !important;
  }
  #dashboard-progress-snapshot .dashboard-progress-latest .muted,
  #dashboard-progress-snapshot .dashboard-progress-latest div,
  #dashboard-progress-snapshot .dashboard-progress-latest span{
    font-size:10px;
  }

  /* Change the Daily Check-In mini graph from chunky bars to a cleaner sparkline. */
  .response-spark.response-spark-line{
    height:34px !important;
    margin-top:7px !important;
  }
  .response-spark.response-spark-line svg{
    width:100%;
    height:100%;
    display:block;
  }
  .response-spark.response-spark-line .response-spark-area{
    fill:color-mix(in srgb,var(--primary) 14%,transparent);
  }
  .response-spark.response-spark-line .response-spark-line-path{
    fill:none;
    stroke:var(--primary);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .response-spark.response-spark-line .response-spark-dot{
    fill:var(--primary);
  }

  /* Deep-dive cards share one consistent structure and keep charts in view. */
  #measurement-weight-chart .progress-deep-dive-card,
  #levels-deep-dive-workspace .levels-deep-dive-card,
  #lab-compare-chart .lab-deep-dive-card{
    position:relative !important;
    padding:14px 14px 12px !important;
    border-radius:16px !important;
    overflow:visible !important;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-head,
  #levels-deep-dive-workspace .levels-deep-dive-card .today-panel-head,
  #lab-compare-chart .lab-deep-dive-card .today-panel-head{
    margin-bottom:10px !important;
    gap:8px !important;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-title,
  #levels-deep-dive-workspace .levels-deep-dive-card .today-panel-title,
  #lab-compare-chart .lab-deep-dive-card .today-panel-title{
    font-size:15px !important;
  }
  #measurement-weight-chart .progress-deep-dive-card .today-panel-kicker,
  #levels-deep-dive-workspace .levels-deep-dive-card .today-panel-kicker,
  #lab-compare-chart .lab-deep-dive-card .today-panel-kicker{
    font-size:8px !important;
    margin-bottom:4px !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav,
  #levels-deep-dive-workspace .levels-deep-dive-nav,
  #lab-compare-chart .lab-deep-dive-nav{
    top:52% !important;
    padding:0 2px !important;
    z-index:16 !important;
  }
  #measurement-weight-chart .progress-deep-dive-nav button,
  #levels-deep-dive-workspace .levels-deep-dive-nav button,
  #lab-compare-chart .lab-deep-dive-nav button{
    width:34px !important;
    height:46px !important;
    min-width:34px !important;
    border-radius:11px !important;
  }

  #levels-deep-dive-chart,
  #measurement-weight-chart .progress-chart-interactive,
  #lab-compare-chart .progress-chart-interactive,
  #lab-compare-chart .lab-reference-chart{
    margin-top:8px !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #levels-deep-dive-chart .pk-chart-wrap,
  #levels-deep-dive-chart .pk-interactive-chart,
  #levels-deep-dive-chart [data-pk-svg-host],
  #levels-deep-dive-chart svg.trend-chart,
  #measurement-weight-chart .progress-chart-interactive svg,
  #lab-compare-chart .progress-chart-interactive svg,
  #lab-compare-chart .lab-reference-chart svg{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }
  #levels-deep-dive-workspace .levels-stat-row,
  #lab-compare-chart .lab-dashboard-stats,
  #measurement-weight-chart .level-chart-meta{
    margin-top:10px !important;
    gap:8px !important;
  }
  #levels-deep-dive-workspace .levels-stat-row div,
  #lab-compare-chart .lab-dashboard-stat,
  #measurement-weight-chart .level-chart-meta span{
    font-size:10px !important;
    line-height:1.25 !important;
  }
  #levels-deep-dive-workspace .levels-stat-row b,
  #lab-compare-chart .lab-dashboard-stat b,
  #measurement-weight-chart .level-chart-meta b{
    font-size:12px !important;
  }
  #lab-compare-chart .lab-dashboard-value strong,
  #measurement-weight-chart .progress-dashboard-value strong{
    font-size:18px !important;
  }
  #lab-compare-chart .lab-dashboard-sub,
  #measurement-weight-chart .progress-dashboard-sub,
  #levels-deep-dive-workspace .trend-current span,
  #levels-deep-dive-workspace .levels-note,
  #lab-compare-chart .lab-range-note,
  #lab-compare-chart .lab-range-provenance,
  #lab-compare-chart .lab-status-source,
  #measurement-weight-chart .progress-summary-note{
    font-size:10px !important;
    line-height:1.35 !important;
  }

  .progress-chart-tooltip,
  .pk-chart-tooltip{
    max-width:min(240px,calc(100vw - 20px)) !important;
    font-size:10px !important;
  }

  .quick-add-toggle,
  .feedback-fab{
    box-shadow:0 10px 24px var(--shadow) !important;
  }
  .quick-add-toggle{
    padding:11px 14px !important;
    font-size:13px !important;
  }
  .feedback-fab{
    padding:9px 13px !important;
    font-size:13px !important;
  }
  main{
    padding-bottom:124px !important;
  }
}

@media(max-width:390px){
  #tab-track > .subnav button{font-size:10px !important; padding:9px 4px !important;}
  #tab-dashboard > .grid.stats{gap:6px !important;}
  #tab-dashboard > .grid.stats > .stat-card{padding:9px 8px !important;}
  #tab-dashboard > .grid.stats > .stat-card .value{font-size:16px !important;}
  #dashboard-active-vials .active-vials-grid{grid-auto-columns:minmax(156px,82%) !important;}
}

/* ===== 0908 modal viewport fix ===== */
.notification-deep-link-target{
  outline:3px solid var(--primary) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 7px var(--primary-dim),0 14px 34px var(--shadow) !important;
  animation:notification-target-pulse 1.1s ease-in-out 2;
}
@keyframes notification-target-pulse{50%{outline-offset:7px;}}

@media(max-width:760px){
  main{touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain;}
  .tab.app-swipe-enter-right{animation:app-swipe-in-right .22s ease-out both;}
  .tab.app-swipe-enter-left{animation:app-swipe-in-left .22s ease-out both;}
}
@keyframes app-swipe-in-right{from{opacity:.72;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes app-swipe-in-left{from{opacity:.72;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}

.vial-fill-compact{display:none;}
.notification-preference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;}
.notification-preference-grid label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;}
.notification-preference-grid input{width:auto;}
.notification-center-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.notification-center-item.read{opacity:.68;}
.notification-center-main{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:0;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit;}
.notification-center-main b{display:block;font-size:12.5px;}
.notification-center-main span span{display:block;color:var(--text-dim);font-size:11px;line-height:1.4;margin-top:2px;}
.notification-center-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--amber);}
.notification-center-dot.due{background:var(--red);}
.notification-center-dot.upcoming{background:var(--amber);}
.notification-center-actions{display:flex;align-items:center;gap:6px;}
.dashboard-wellness-trends{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border);}
.dashboard-wellness-trends-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.dashboard-wellness-trends-head span{font-size:9px;text-transform:none;letter-spacing:0;}
#dashboard-checkin-panel .dashboard-wellness-mini{display:block;width:100%;padding:10px 12px;text-align:left;cursor:pointer;}
#dashboard-checkin-panel .dashboard-wellness-mini svg{display:block;width:100%;height:58px;margin:5px 0 3px !important;overflow:visible;}
#dashboard-checkin-panel .dashboard-wellness-mini .wellness-mini-head{display:flex;justify-content:space-between;align-items:center;}
#dashboard-checkin-panel .dashboard-wellness-mini .wellness-mini-foot{display:flex;justify-content:space-between;gap:10px;}
@media(max-width:760px){
  .notification-preference-grid{grid-template-columns:1fr 1fr;}
  .notification-center-item{grid-template-columns:1fr;}
  .notification-center-actions{padding-left:18px;flex-wrap:wrap;}
  #dashboard-checkin-panel .dashboard-wellness-mini{padding:8px 9px;}
  #dashboard-checkin-panel .dashboard-wellness-mini svg{height:48px;}
  #dashboard-active-vials .active-vials-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-columns:auto !important;
    gap:7px !important;
    overflow:visible !important;
    padding:2px 0 3px !important;
  }
  #dashboard-active-vials .vial-card{
    min-width:0 !important;
    width:auto !important;
    min-height:116px !important;
    padding:8px 4px !important;
    gap:4px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    overflow:hidden !important;
  }
  #dashboard-active-vials .vial-card-delete{display:none !important;}
  #dashboard-active-vials .vial-card-icon{height:39px !important;display:flex !important;align-items:flex-end !important;justify-content:center !important;}
  #dashboard-active-vials .vial-card-icon svg{width:25px !important;max-height:39px !important;}
  #dashboard-active-vials .vial-card-body{width:100% !important;min-width:0 !important;}
  #dashboard-active-vials .vial-card-head{
    display:-webkit-box !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden !important;
    min-height:22px !important;
    margin:0 0 5px !important;
    font-size:8px !important;
    line-height:1.3 !important;
    text-align:center !important;
  }
  #dashboard-active-vials .vial-card-head .vial-dot{display:none !important;}
  #dashboard-active-vials .vial-fill-bar{height:4px !important;margin:0 2px 6px !important;}
  #dashboard-active-vials .vial-fill-full,
  #dashboard-active-vials .vial-fill-sub{display:none !important;}
  #dashboard-active-vials .vial-fill-compact{
    display:block !important;
    font-size:9px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
}

@media(max-width:760px){
  /* Mobile modals should use the screen instead of being squeezed into a short center box. */
  .modal-backdrop{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:8px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  .modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:16px !important;
    border-radius:16px !important;
    margin:0 !important;
    -webkit-overflow-scrolling:touch;
  }
  .modal-card .modal-head{
    position:sticky;
    top:-16px;
    z-index:4;
    background:var(--panel);
    padding:16px 0 10px;
    margin-top:-16px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  }

  .vial-details-modal{
    align-items:flex-start !important;
    padding:8px !important;
    overflow-y:auto !important;
  }
  .vial-details-card{
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:16px !important;
    padding:14px !important;
    margin:0 !important;
    -webkit-overflow-scrolling:touch;
  }
  .vial-details-head{
    position:sticky;
    top:-14px;
    z-index:5;
    background:var(--panel);
    padding:14px 0 10px;
    margin-top:-14px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  }
  .vial-details-actions{
    position:sticky;
    bottom:-14px;
    z-index:4;
    background:var(--panel);
    padding:10px 0 14px;
    margin-bottom:-14px;
    border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  }
}

/* 0908 Daily Check-In sparkline SVG fallback: prevent default black SVG fills. */
.response-spark.response-spark-line .response-spark-area{
  fill:var(--primary) !important;
  fill-opacity:.12 !important;
  stroke:none !important;
}
.response-spark.response-spark-line .response-spark-line-path{
  fill:none !important;
  stroke:var(--primary) !important;
}
.response-spark.response-spark-line .response-spark-dot{
  fill:var(--primary) !important;
}


/* Deep-dive selection clarity patch */
.comparison-chip-strip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;}
.comparison-chip-strip .chip{cursor:default;}
.comparison-unavailable{margin-top:10px;}
.levels-note{line-height:1.45;}
.trend-legend{margin-bottom:8px;}
.progress-chart-interactive + .level-chart-meta{margin-top:12px;}

/* ===== 09/08 deep-dive chart footer spacing fix ===== */
/* Reserve a clean footer zone below plot axes before legends, meta, and notes. */
#measurement-weight-chart .progress-chart-interactive,
#lab-compare-chart .progress-chart-interactive,
#levels-deep-dive-chart .pk-chart-wrap{
  margin-bottom:18px !important;
  padding-bottom:8px !important;
}

#measurement-weight-chart .progress-chart-interactive .trend-legend,
#lab-compare-chart .progress-chart-interactive .trend-legend,
#levels-deep-dive-chart .trend-legend{
  margin-top:18px !important;
  padding-top:10px !important;
  margin-bottom:12px !important;
  position:relative !important;
  z-index:2 !important;
}

#levels-deep-dive-chart .pk-chart-help{
  margin-top:10px !important;
  margin-bottom:8px !important;
  line-height:1.45 !important;
}

#measurement-weight-chart .level-chart-meta,
#lab-compare-chart .level-chart-meta,
#levels-deep-dive-workspace .level-chart-meta{
  clear:both !important;
  margin-top:16px !important;
  padding-top:12px !important;
  line-height:1.4 !important;
}

#measurement-weight-chart .comparison-unavailable,
#lab-compare-chart .comparison-unavailable,
#levels-deep-dive-workspace .comparison-unavailable{
  display:block !important;
  clear:both !important;
  margin-top:14px !important;
  padding-top:2px !important;
}

#measurement-weight-chart .levels-note,
#lab-compare-chart .levels-note,
#levels-deep-dive-workspace .levels-note{
  clear:both !important;
  margin-top:10px !important;
  margin-bottom:4px !important;
}

@media(max-width:760px){
  #measurement-weight-chart .progress-chart-interactive,
  #lab-compare-chart .progress-chart-interactive,
  #levels-deep-dive-chart .pk-chart-wrap{
    margin-bottom:14px !important;
    padding-bottom:6px !important;
  }
  #measurement-weight-chart .progress-chart-interactive .trend-legend,
  #lab-compare-chart .progress-chart-interactive .trend-legend,
  #levels-deep-dive-chart .trend-legend{
    margin-top:14px !important;
    margin-bottom:10px !important;
  }
}

/* Final graph flow guard. Keep last so legacy responsive rules cannot reapply
   fixed wrapper heights or narrow centered plots. */
#measurement-weight-chart .deep-dive-chart-stage,
#lab-compare-chart .deep-dive-chart-stage,
#levels-deep-dive-chart,
#measurement-weight-chart .progress-chart-interactive,
#lab-compare-chart .progress-chart-interactive,
#levels-deep-dive-chart .pk-chart-wrap,
#levels-deep-dive-chart .pk-interactive-chart,
#levels-deep-dive-chart [data-pk-svg-host]{
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
#measurement-weight-chart .progress-chart-interactive,
#lab-compare-chart .progress-chart-interactive,
#levels-deep-dive-chart .pk-chart-wrap{
  position:relative !important;
  contain:layout !important;
  box-sizing:border-box !important;
  padding-bottom:12px !important;
  margin-bottom:18px !important;
}
#measurement-weight-chart .progress-chart-interactive svg.trend-chart,
#lab-compare-chart .progress-chart-interactive svg.trend-chart,
#levels-deep-dive-chart svg.trend-chart{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:220px !important;
  max-height:420px !important;
}
.progress-lane-scroll .deep-dive-chart-stage,
.progress-lane-scroll .dashboard-chart-stage,
.progress-lane-scroll .progress-chart-interactive{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  contain:none !important;
}
.progress-lane-scroll .progress-lane-chart svg{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
#measurement-weight-chart .trend-legend,
#lab-compare-chart .trend-legend,
#levels-deep-dive-chart .trend-legend,
#measurement-weight-chart .level-chart-meta,
#lab-compare-chart .level-chart-meta,
#levels-deep-dive-workspace .level-chart-meta,
#measurement-weight-chart .comparison-unavailable,
#lab-compare-chart .comparison-unavailable,
#levels-deep-dive-workspace .comparison-unavailable,
#measurement-weight-chart .levels-note,
#lab-compare-chart .levels-note,
#levels-deep-dive-workspace .levels-note{
  position:relative !important;
  inset:auto !important;
  clear:both !important;
  float:none !important;
  height:auto !important;
  max-height:none !important;
}
@media(max-width:760px){
  #measurement-weight-chart .progress-chart-interactive svg.trend-chart,
  #lab-compare-chart .progress-chart-interactive svg.trend-chart,
  #levels-deep-dive-chart svg.trend-chart{
    min-height:250px !important;
    max-height:340px !important;
  }
}


/* ===== 09/08 chart edge + cursor-tooltip consistency pass ===== */
/* Fixed-position tooltips must be viewport-relative. Layout containment on an
   ancestor changes the containing block and makes the tooltip appear away from
   the cursor, especially on Labs. */
.progress-chart-interactive,
.pk-interactive-chart{
  contain:none !important;
}

.progress-chart-tooltip,
.pk-chart-tooltip{
  position:fixed !important;
  z-index:99999 !important;
  pointer-events:none !important;
  max-height:min(70vh,560px);
  overflow:hidden;
}

/* Let the plot itself reach the card edges while leaving headers, values,
   selectors, stats, and explanatory copy on their normal card padding. */
@media (min-width:761px){
  #measurement-weight-chart .progress-chart-interactive,
  #measurement-weight-chart .deep-dive-chart-stage,
  #lab-compare-chart .progress-chart-interactive,
  #lab-compare-chart .lab-reference-chart,
  #levels-deep-dive-chart .pk-interactive-chart,
  #levels-deep-dive-chart [data-pk-svg-host]{
    width:calc(100% + 24px) !important;
    max-width:none !important;
    margin-left:-12px !important;
    margin-right:-12px !important;
  }
}

@media (max-width:760px){
  #measurement-weight-chart .progress-chart-interactive,
  #measurement-weight-chart .deep-dive-chart-stage,
  #lab-compare-chart .progress-chart-interactive,
  #lab-compare-chart .lab-reference-chart,
  #levels-deep-dive-chart .pk-interactive-chart,
  #levels-deep-dive-chart [data-pk-svg-host]{
    width:calc(100% + 12px) !important;
    max-width:none !important;
    margin-left:-6px !important;
    margin-right:-6px !important;
  }
  .progress-chart-tooltip,
  .pk-chart-tooltip{
    max-height:58vh !important;
  }
}

header .brand-mark .logo-icon img,.public-brand img{display:block;object-fit:contain;}
header .brand-mark .logo-icon img{width:24px;height:24px;}
.public-brand{display:flex;align-items:center;gap:8px;}
.public-brand img{width:24px;height:24px;}

/* ===== 2026-09-09 FINAL Levels Deep Dive parity fix =====
   Levels now follows the same compact control + full-width chart proportions as Progress/Labs.
   These terminal overrides intentionally neutralize older Levels-only wide/tall hotfixes. */
#tab-levels #levels-range-controls{
  margin:0;
}
#tab-levels #levels-range-controls .trend-range-controls{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:8px 0 10px !important;
  padding:0 !important;
}
#tab-levels #levels-range-controls .trend-range-controls>label{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 !important;
}
#tab-levels #levels-range-controls select,
#tab-levels #levels-range-controls input{
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  min-height:34px !important;
  padding:5px 9px !important;
  margin:0 !important;
  font-size:11px !important;
}
#tab-levels .dashboard-bubble-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:0 !important;
  margin:8px 0 7px !important;
  padding:0 !important;
}
#tab-levels #levels-selector-actions>div{
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
#tab-levels #levels-selector-actions .btn{
  min-height:30px !important;
  height:30px !important;
  padding:4px 9px !important;
  font-size:10px !important;
}
#tab-levels #levels-cards.dashboard-bubble-selector{
  width:100% !important;
  max-height:154px !important;
  min-height:0 !important;
  overflow:auto !important;
  align-content:start !important;
  margin:0 0 12px !important;
  padding:8px !important;
  box-sizing:border-box !important;
}
#tab-levels #levels-deep-dive-workspace{
  width:100% !important;
  margin-top:12px !important;
}
#tab-levels #levels-deep-dive-workspace .levels-deep-dive-card{
  position:relative !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:15px 18px !important;
  overflow:visible !important;
}
#tab-levels #levels-deep-dive-chart{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:8px 0 0 !important;
  overflow:visible !important;
}
#tab-levels #levels-deep-dive-chart .pk-chart-wrap,
#tab-levels #levels-deep-dive-chart .pk-interactive-chart,
#tab-levels #levels-deep-dive-chart [data-pk-svg-host]{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding-bottom:10px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#tab-levels #levels-deep-dive-chart svg.trend-chart{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
}
#tab-levels #levels-deep-dive-workspace .levels-stat-row,
#tab-levels #levels-deep-dive-workspace .level-chart-meta,
#tab-levels #levels-deep-dive-workspace .levels-note{
  margin-top:9px !important;
}
@media(max-width:760px){
  #tab-levels #levels-range-controls .trend-range-controls{
    gap:6px !important;
    margin:6px 0 8px !important;
  }
  #tab-levels #levels-range-controls .trend-range-controls>label{
    width:auto !important;
    flex:0 1 auto !important;
  }
  #tab-levels #levels-range-controls select{
    max-width:170px !important;
  }
  #tab-levels .dashboard-bubble-head{
    align-items:flex-start !important;
    gap:8px !important;
  }
  #tab-levels .dashboard-bubble-hint{
    line-height:1.3 !important;
  }
  #tab-levels #levels-selector-actions>div{
    gap:4px !important;
  }
  #tab-levels #levels-selector-actions .btn{
    height:28px !important;
    min-height:28px !important;
    padding:3px 7px !important;
    font-size:9.5px !important;
  }
  #tab-levels #levels-cards.dashboard-bubble-selector{
    max-height:138px !important;
    padding:7px !important;
  }
  #tab-levels #levels-deep-dive-workspace .levels-deep-dive-card{
    padding:12px !important;
  }
  #tab-levels #levels-deep-dive-chart svg.trend-chart{
    height:285px !important;
    min-height:285px !important;
    max-height:285px !important;
  }
}

/* ===== 2026-09-10 dashboard completion pass ===== */
#tab-dashboard .dashboard-main-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:start !important;
}
#tab-dashboard .dashboard-main-grid > .today-panel{
  min-height:0 !important;
  height:auto !important;
  padding:14px !important;
}
#tab-dashboard .dashboard-today-card{
  grid-column:1 / -1 !important;
}
#tab-dashboard .dashboard-today-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:14px;
  align-items:start;
}
#tab-dashboard .dashboard-today-grid > div{min-width:0;}
#tab-dashboard .dashboard-today-grid .response-card{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#tab-dashboard #dashboard-checkin-panel,
#tab-dashboard #dashboard-progress-snapshot{
  min-height:0 !important;
  height:auto !important;
}
#tab-dashboard #dashboard-progress-snapshot{
  border-left:1px solid var(--border);
  padding-left:14px;
}
#tab-dashboard .dashboard-checkin-fields{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}
#tab-dashboard .dashboard-checkin-field label{font-size:9px !important;margin-bottom:3px !important;}
#tab-dashboard .dashboard-checkin-field select{min-height:34px !important;height:34px !important;padding:5px 8px !important;}
#tab-dashboard #dashboard-progress-snapshot .dashboard-progress-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  margin:8px 0 !important;
}
#tab-dashboard #dashboard-progress-snapshot .dashboard-progress-action{
  min-height:34px !important;
  padding:7px 9px !important;
}
#tab-dashboard #dashboard-progress-snapshot .dashboard-progress-latest{
  min-height:0 !important;
  padding:9px !important;
  margin-top:8px !important;
}
#tab-dashboard .dashboard-wellness-card,
#tab-dashboard .dashboard-health-card{
  min-height:0 !important;
}
.dashboard-metric-chip-row{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:7px 0 8px;
  scrollbar-width:thin;
}
.dashboard-metric-chip{
  flex:0 0 auto;
  min-height:28px !important;
  padding:4px 9px !important;
  font-size:10px !important;
}
.dashboard-metric-chip.active{
  border-color:var(--primary) !important;
  background:color-mix(in srgb,var(--primary) 12%,var(--surface-1)) !important;
  color:var(--text) !important;
}
.dashboard-shared-chart{
  width:100%;
  min-height:170px;
  margin-top:2px;
}
.dashboard-shared-chart svg{
  display:block;
  width:100%;
  height:180px;
  overflow:visible;
}
.dashboard-compact-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--border);
  color:var(--text-dim);
  font-size:9.5px;
}
.dashboard-health-values{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.dashboard-health-value{
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  background:var(--surface-1);
  min-width:0;
}
.dashboard-health-value span,
.dashboard-health-value small{display:block;color:var(--text-dim);font-size:9px;}
.dashboard-health-value b{display:block;font-size:16px;line-height:1.15;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dashboard-health-picker{
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-1);
}
.dashboard-health-picker.open{display:grid;}
.dashboard-health-picker .dashboard-marker-editor-foot{grid-column:1/-1;}
#tab-dashboard .dashboard-main-grid [data-dashboard-widget="today"]{order:3 !important;}
#tab-dashboard .dashboard-main-grid [data-dashboard-widget="wellness"]{order:4 !important;}
#tab-dashboard .dashboard-main-grid [data-dashboard-widget="health"]{order:5 !important;}
#tab-dashboard .dashboard-main-grid [data-dashboard-widget="trends"]{order:6 !important;}
#tab-dashboard .dashboard-main-grid [data-dashboard-widget="labs"]{order:7 !important;}
@media(max-width:900px){
  #tab-dashboard .dashboard-today-grid{grid-template-columns:1fr;}
  #tab-dashboard #dashboard-progress-snapshot{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:12px;}
  #tab-dashboard .dashboard-checkin-fields{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:760px){
  #tab-dashboard .dashboard-main-grid{grid-template-columns:1fr !important;gap:9px !important;}
  #tab-dashboard .dashboard-today-card{grid-column:auto !important;}
  #tab-dashboard .dashboard-main-grid > .today-panel{padding:11px !important;}
  #tab-dashboard .dashboard-checkin-fields{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .dashboard-shared-chart{min-height:150px;}
  .dashboard-shared-chart svg{height:158px;}
  .dashboard-health-values{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.dashboard-compact-select{width:auto!important;min-width:82px!important;height:30px!important;min-height:30px!important;padding:4px 7px!important;font-size:10px!important;}
.dashboard-today-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--border);}
.dashboard-today-section-head .muted{font-size:9.5px;}

/* ===== 2026-09-10 Deep Dive selector + tooltip parity hotfix ===== */
/* Labs and Levels use the same compact selected-pill row as Progress. */
#tab-labs #lab-trend-cards.dashboard-bubble-selector,
#tab-levels #levels-cards.dashboard-bubble-selector{
  display:block !important;
  grid-template-columns:none !important;
  max-height:154px !important;
  overflow:auto !important;
  padding:8px 9px 10px !important;
}
#tab-labs #lab-trend-cards .dashboard-bubble-selected,
#tab-levels #levels-cards .dashboard-bubble-selected{
  display:flex !important;
  width:100% !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:0 0 8px !important;
  margin:0 0 8px !important;
  border-bottom:1px solid var(--border) !important;
}
#tab-labs #lab-trend-cards .dashboard-bubble-selected .dashboard-bubble,
#tab-levels #levels-cards .dashboard-bubble-selected .dashboard-bubble{
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;
  padding:6px 9px !important;
  border-radius:999px !important;
  font-size:10.5px !important;
}
#tab-labs #lab-trend-cards .dashboard-bubble-group,
#tab-levels #levels-cards .dashboard-bubble-group{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
/* Selection already lives above the graph, so do not duplicate it under the deep-dive header. */
#lab-compare-chart .lab-selected-chips,
#levels-deep-dive-workspace .levels-selection-actions{
  display:none !important;
}
/* Body-portaled tooltips must stay close to the pointer and never inherit layout offsets. */
body > .progress-chart-tooltip,
body > .pk-chart-tooltip{
  position:fixed !important;
  margin:0 !important;
  transform:none !important;
  z-index:100000 !important;
  pointer-events:none !important;
}