*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;background:#F5F0EB;color:#2C3E50;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.heading{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:0.04em;color:#1A2A3A}
:root{--bg:#F5F0EB;--card:#FFFFFF;--surface:#F0EBE3;--input:#EDE8E1;--text:#2C3E50;--text2:#5D6D7E;--muted:#95A5A6;--accent:#1A3A5C;--white:#1A2A3A;--border:#DDD5CC;--border2:#C8BFB6;--green:#22cc66;--r:10px;--rs:6px}
a{color:var(--accent);text-decoration:none}

/* Layout */
.app{max-width:430px;margin:0 auto;min-height:100vh;position:relative}
.header{background:rgba(245,240,235,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(0,0,0,0.04)}
.header-logo{display:flex;align-items:center;gap:10px}
.logo-img{width:36px;height:36px;border-radius:8px;object-fit:contain}
.logo-box{width:36px;height:36px;border-radius:8px;background:rgba(26,58,92,0.08);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:12px;color:var(--accent);letter-spacing:0.08em}
.header-title{font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--accent);letter-spacing:0.06em}
.page{padding:16px;padding-bottom:60px;display:none}
.page.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.02)}
.card-link{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s}
.card-link:hover{border-color:var(--border2);box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/* Section */
.section-title{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--accent);letter-spacing:0.06em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.section-label{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--accent);letter-spacing:0.12em;margin-top:20px;margin-bottom:10px}
.body-text{font-size:15px;color:var(--text);line-height:1.7;margin-bottom:10px}
.muted{color:var(--muted);font-size:12px}
.label{display:block;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:6px}

/* Buttons */
.pill-row{display:flex;gap:6px;margin-bottom:12px}
.pill{flex:1;padding:10px 0;border-radius:var(--rs);border:1px solid var(--border);background:var(--input);color:var(--muted);font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.04em;cursor:pointer;transition:all .15s;text-align:center}
.pill.active{border-color:var(--accent);background:rgba(26,58,92,0.08);color:var(--accent)}

/* Input */
.input{width:100%;padding:11px 14px;background:var(--input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,58,92,0.08)}
.search-input::placeholder{color:var(--muted);font-size:14px}

/* Unit toggle */
.unit-toggle{display:flex;border-radius:var(--rs);overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.unit-btn{padding:10px 14px;border:none;background:var(--input);color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;min-width:48px}
.unit-btn.active{background:var(--accent);color:#fff}

/* Results */
.result-box{background:var(--surface);border-radius:var(--rs);padding:20px;text-align:center}
.big-num{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--white);line-height:1}
.big-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px}
.info-bar{background:rgba(26,58,92,0.04);border-radius:var(--rs);padding:12px;margin-top:8px;text-align:center}

/* Tabs */
.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--border);overflow-x:auto;padding:0 4px}
.tab{flex:1;min-width:60px;padding:14px 6px 12px;border:none;border-bottom:2.5px solid transparent;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;cursor:pointer;white-space:nowrap;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color .15s}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.tab-icon{font-size:16px;line-height:1}

/* Protocol cards */
/* Dose Info Chips */
.dose-info-chip{flex:1;display:flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px}
.dose-info-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:2px}
.dose-info-val{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--accent);letter-spacing:0.04em}

.dose-card{background:var(--surface);border-radius:var(--r);padding:16px;margin-bottom:10px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.02)}
.dose-card h4{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--white);letter-spacing:0.04em;margin-bottom:10px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.stat-value{font-size:14px;font-weight:500;color:var(--text)}

/* Mechanism & stack cards */
.mech-card{margin-bottom:14px;padding-left:12px;border-left:2px solid var(--border2)}
.mech-title{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--white);letter-spacing:0.04em;margin-bottom:2px}
.mech-desc{font-size:14px;color:var(--text2);line-height:1.6}
.stack-card{background:rgba(26,58,92,0.03);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);padding:16px;margin-bottom:10px}

/* Video callout */
.video-card{background:rgba(26,58,92,0.03);border:1px solid var(--border);border-radius:var(--r);padding:14px;display:flex;align-items:center;gap:14px;margin-bottom:12px;cursor:pointer;transition:border-color .2s}
.video-card:hover{border-color:var(--border2)}
.play-btn{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}

/* Step */
.step{display:flex;gap:12px;margin-bottom:14px}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.step-text{font-size:15px;color:var(--text);line-height:1.6;padding-top:3px}

/* Detail row */
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.detail-row .dl{font-size:12px;color:var(--muted)}
.detail-row .dv{font-size:12px;color:var(--text);text-align:right;max-width:60%}

/* Research link */
.research-link{display:block;background:var(--surface);border-radius:var(--rs);padding:14px;margin-bottom:8px;border:1px solid var(--border);border-left:3px solid var(--accent);text-decoration:none;transition:border-color .2s}
.research-link:hover{border-color:var(--border2)}
.research-link h4{font-size:13px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:4px}
.research-link span{font-size:11px;color:var(--accent)}

/* Bullet */
.bullet{display:flex;gap:10px;margin-bottom:8px}
.bullet-dot{color:var(--accent);font-size:8px;margin-top:5px;flex-shrink:0}

/* Disclaimer */
.disclaimer-box{background:var(--surface);border-radius:var(--rs);padding:14px;border-left:3px solid var(--border2)}
.disclaimer-box p{font-size:13px;color:var(--text2);line-height:1.7}
.disclaimer-box strong{color:var(--text)}

/* Back button */
.back-btn{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0;margin-bottom:8px;font-family:'DM Sans',sans-serif}
.share-btn{background:none;border:1px solid var(--border);border-radius:20px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;padding:6px 14px;cursor:pointer;transition:all .15s;white-space:nowrap}
.share-btn:hover{border-color:var(--border2);color:var(--text)}

/* Syringe Visualization */
.syringe-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;margin:1rem auto 0.5rem}
.syringe-svg{width:140px;height:auto}
.syringe-label{font-family:'DM Sans',sans-serif;font-size:0.75rem;letter-spacing:0.08em;color:var(--text2);text-transform:uppercase;text-align:center;font-weight:500}
.syringe-sublabel{font-size:0.75rem;color:var(--muted);text-align:center;margin-top:0.2rem}

/* Upcoming badge */
.soon-badge{background:rgba(26,58,92,0.06);border-radius:12px;padding:3px 10px;font-size:10px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.08em}

/* Protocol Add Button (replaces stack-toggle) */
.protocol-add-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:none;color:var(--muted);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;font-weight:300;line-height:1}
.protocol-add-btn.saved{background:rgba(192,192,192,0.12);border-color:rgba(192,192,192,0.3);color:var(--accent);font-size:15px}

/* Today's Protocol Dashboard */
.protocol-dashboard{margin-bottom:16px}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.dash-progress{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0.02em}
.dash-progress.complete{color:var(--green)}
.dash-progress-bar{height:3px;background:var(--surface);border-radius:2px;margin-bottom:12px;overflow:hidden}
.dash-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;transition:width .4s ease}

/* Protocol Cards */
.protocol-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:0;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.02)}
.protocol-card-top{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px 8px;cursor:pointer;gap:10px}
.protocol-card-name{font-size:18px;letter-spacing:0.04em;margin:0}
.protocol-card-dose{font-size:12px;color:var(--text2);margin-top:2px}
.protocol-card-hint{font-size:10px;color:var(--accent);margin-top:4px;font-weight:500;letter-spacing:0.02em;opacity:0.7}
.protocol-card-right{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;padding-top:2px}
.protocol-edit-icon{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);cursor:pointer;transition:all .2s;padding:0}
.protocol-edit-icon:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.protocol-card-chevron{color:var(--muted);font-size:10px;transition:transform .25s ease;flex-shrink:0}
.protocol-card-chevron.open{transform:rotate(180deg);color:var(--accent)}
.protocol-checks{display:flex;gap:8px;padding:4px 16px 12px}
.check-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .2s;flex:1;justify-content:center}
.check-btn.done{background:rgba(34,204,102,0.1);border-color:rgba(34,204,102,0.3)}
.check-circle{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:all .2s;flex-shrink:0}
.check-btn.done .check-circle{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.check-label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.06em}
.check-btn.done .check-label{color:var(--green)}
.proto-edit-btn{background:none;border:1px solid var(--border);border-radius:var(--rs);color:var(--text2);font-size:11px;cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;padding:8px 14px;font-family:'DM Sans',sans-serif;transition:all .15s;font-weight:600}
.proto-edit-btn:active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Expanded Protocol Card */
.protocol-card.expanded{border-color:var(--border2)}
.protocol-card-detail{padding:0 16px 16px;animation:fadeIn .2s ease}
.protocol-syringe-section{background:var(--surface);border-radius:var(--rs);padding:16px;margin-bottom:12px;text-align:center}
.protocol-syringe-stats{display:flex;justify-content:center;gap:32px;margin-bottom:4px}
.protocol-stat{text-align:center}
.protocol-stat-num{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--white);line-height:1}
.protocol-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px}
.protocol-card-btns{display:flex;gap:8px;align-items:center}
.proto-view-btn{flex:1;padding:10px;border:1px solid var(--border);border-radius:var(--rs);background:rgba(26,58,92,0.04);color:var(--text);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center}
.proto-view-btn:hover{border-color:var(--border2);background:rgba(26,58,92,0.06)}

/* Supply Tracker (protocol card) */
.supply-tracker{background:var(--surface);border-radius:var(--rs);padding:14px;margin-bottom:12px;border:1px solid var(--border)}
.supply-tracker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.supply-tracker-title{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--accent);letter-spacing:0.06em}
.supply-tracker-days{font-size:13px;font-weight:600;color:var(--green)}
.supply-tracker-days.low{color:#ff6666}
.supply-tracker-bar{height:4px;background:rgba(26,58,92,0.06);border-radius:2px;overflow:hidden;margin-bottom:8px}
.supply-tracker-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--accent));border-radius:2px;transition:width .4s ease}
.supply-tracker-fill.low{background:linear-gradient(90deg,#ff6666,#ff9944)}
.supply-tracker-range{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.supply-reorder{display:block;margin-top:10px;padding:10px;background:rgba(255,102,102,0.08);border:1px solid rgba(255,102,102,0.25);border-radius:var(--rs);color:#ff8866;font-size:13px;font-weight:500;text-align:center;text-decoration:none;transition:all .15s}
.supply-reorder:hover{background:rgba(255,102,102,0.14);border-color:rgba(255,102,102,0.4)}

/* Empty Protocol State */
.protocol-empty{text-align:center;padding:32px 24px;background:linear-gradient(135deg,var(--card) 0%,var(--surface) 100%);border:1px dashed var(--border2);border-radius:12px;margin-bottom:16px}
.protocol-empty-icon{font-size:32px;color:var(--border2);margin-bottom:8px}
.protocol-empty-title{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--accent);letter-spacing:0.06em;margin-bottom:4px}
.protocol-empty-sub{font-size:12px;color:var(--muted);line-height:1.6}
.protocol-empty-sub strong{color:var(--text)}

/* Protocol Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:200;display:flex;align-items:flex-end;justify-content:center;transition:background .3s ease;pointer-events:none}
.drawer-overlay.open{background:rgba(0,0,0,0.6);pointer-events:all}
.drawer-panel{width:100%;max-width:430px;background:var(--card);border-top:1px solid var(--border2);border-radius:16px 16px 0 0;padding:20px 20px 32px;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,.37,1.02);box-shadow:0 -4px 30px rgba(0,0,0,0.12)}
.drawer-overlay.open .drawer-panel{transform:translateY(0)}
.drawer-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 16px}
.drawer-title{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--white);letter-spacing:0.04em;margin-bottom:4px}
.drawer-save-btn{width:100%;padding:14px;border:none;border-radius:var(--rs);background:linear-gradient(135deg,var(--accent) 0%,#234B6E 100%);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.06em;cursor:pointer;transition:opacity .15s,box-shadow .15s;margin-bottom:8px;box-shadow:0 2px 10px rgba(26,58,92,0.25)}
.drawer-save-btn:active{opacity:0.8}
.drawer-remove-btn{width:100%;padding:12px;border:1px solid rgba(255,68,68,0.3);border-radius:var(--rs);background:rgba(255,68,68,0.08);color:#ff6666;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s}
.drawer-remove-btn:active{opacity:0.7}

/* Site link */
.site-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:rgba(26,58,92,0.03);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;text-decoration:none;transition:border-color .2s}
.site-link:hover{border-color:var(--border2)}

/* Supply Estimate */
.supply-box{background:var(--surface);border-radius:var(--rs);padding:16px;margin-top:12px;border:1px solid var(--border)}
.supply-title{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--accent);letter-spacing:0.06em;margin-bottom:4px}
.supply-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.supply-stat{background:rgba(26,58,92,0.03);border-radius:var(--rs);padding:12px;text-align:center;border:1px solid var(--border)}
.supply-num{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--white);line-height:1}
.supply-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px}
.supply-cycle{border-top:1px solid var(--border);padding-top:12px}
.supply-result{background:rgba(34,204,102,0.06);border:1px solid rgba(34,204,102,0.2);border-radius:var(--rs);padding:12px;text-align:center;font-size:13px;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.supply-result strong{color:#22cc66;font-size:18px;font-family:'Bebas Neue',sans-serif;letter-spacing:0.04em}

/* Getting Started Onboarding */
.onboard-card{background:linear-gradient(135deg,#fff 0%,var(--surface) 100%);border:1px solid var(--border2);border-radius:12px;padding:22px;margin-bottom:16px;position:relative;box-shadow:0 2px 12px rgba(0,0,0,0.06),0 6px 24px rgba(0,0,0,0.03)}
.onboard-header{display:flex;justify-content:space-between;align-items:flex-start}
.onboard-title{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--white);letter-spacing:0.04em;margin-bottom:2px}
.onboard-dismiss{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:0 0 0 8px;line-height:1}
.onboard-dismiss:hover{color:var(--text)}
.onboard-sub{font-size:12px;color:var(--text2);margin-bottom:14px}
.onboard-video{display:flex;align-items:center;gap:14px;background:rgba(26,58,92,0.04);border:1px solid var(--border);border-radius:var(--rs);padding:14px;margin-bottom:16px;text-decoration:none;transition:border-color .2s}
.onboard-video:hover{border-color:var(--border2)}
.onboard-steps{display:flex;gap:10px;margin-bottom:14px}
.onboard-step{flex:1;display:flex;align-items:flex-start;gap:8px;background:rgba(26,58,92,0.03);border-radius:var(--rs);padding:10px}
.onboard-step-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex-shrink:0}
.onboard-step-title{font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--white);letter-spacing:0.04em}
.onboard-step-desc{font-size:10px;color:var(--muted);line-height:1.4;margin-top:1px}
.onboard-tip{font-size:11px;color:var(--muted);text-align:center}
.onboard-tip strong{color:var(--text)}
.onboard-compact{display:flex;align-items:center;gap:12px;background:rgba(26,58,92,0.03);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;text-decoration:none;transition:border-color .2s}
.onboard-compact:hover{border-color:var(--border2)}

/* PWA Install Banner */
.install-banner{position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--card);border-top:1px solid var(--border2);padding:16px 16px 24px;transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,.37,1.02);max-width:430px;margin:0 auto}
.install-banner.show{transform:translateY(0)}
.install-content{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.install-icon{flex-shrink:0}
.install-text{flex:1}
.install-title{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--white);letter-spacing:0.04em}
.install-sub{font-size:12px;color:var(--text2);line-height:1.4;margin-top:2px}
.install-dismiss{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:0 0 0 8px;line-height:1;flex-shrink:0;align-self:flex-start}
.install-dismiss:hover{color:var(--text)}
.install-actions{display:flex;gap:8px}
.install-btn{flex:1;padding:14px;border:none;border-radius:var(--rs);background:var(--accent);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.06em;cursor:pointer;transition:opacity .15s}
.install-btn:active{opacity:0.8}
.install-ios-steps{background:rgba(26,58,92,0.04);border-radius:var(--rs);padding:12px 14px}
.install-ios-step{font-size:13px;color:var(--text2);line-height:1.8}
.install-ios-step strong{color:var(--white)}
.install-ios-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--accent);color:#fff;border-radius:4px;font-size:14px;font-weight:700;vertical-align:middle;margin:0 2px}

/* Regulatory Badges */
.reg-badge{display:inline-block;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:4px 10px;border:1px solid;border-radius:20px;background:rgba(26,58,92,0.03)}
.reg-badge-sm{display:inline-block;font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;padding:2px 8px;border:1px solid;border-radius:12px;background:rgba(26,58,92,0.03);margin-left:auto;flex-shrink:0;white-space:nowrap}
.reg-status-box{background:var(--surface);border-radius:var(--rs);padding:14px;border-left:3px solid var(--accent);margin-top:8px}
.reg-status-box p{font-size:12px;color:var(--text2);line-height:1.6}

/* Category Tags */
.cat-tag{display:inline-block;font-size:10px;font-weight:500;color:var(--muted);background:rgba(26,58,92,0.04);border:1px solid var(--border);border-radius:12px;padding:3px 10px;letter-spacing:0.02em}

/* Category Sections (Home) */
.cat-section{margin-bottom:20px}
.cat-section-header{display:flex;align-items:center;gap:8px;padding:4px 0 10px}
.cat-section-icon{font-size:18px;line-height:1}
.cat-section-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.06em;flex:1}
.cat-section-count{font-size:11px;color:var(--muted);font-weight:500;background:var(--surface);border-radius:12px;padding:2px 10px}

/* Compound Cards (Home) */
.compound-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s;display:flex}
.compound-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06)}
.compound-card:active{box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.compound-card-accent{width:4px;flex-shrink:0;border-radius:var(--r) 0 0 var(--r)}
.compound-card-body{flex:1;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;min-width:0}
.compound-card-info{flex:1;min-width:0}
.compound-card-name{font-size:20px;letter-spacing:0.04em}
.compound-card-full{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compound-card-dose{font-size:12px;color:var(--text2);margin-top:4px}
.compound-card-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:12px}

/* Category Filter */
.filter-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-pills{display:flex;gap:8px;padding-bottom:14px;white-space:nowrap}
.filter-pill{padding:8px 16px;border-radius:24px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.filter-pill.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(26,58,92,0.2)}

/* Timeline — What to Expect */
.timeline-item{display:flex;gap:14px;margin-bottom:14px;padding-left:4px;position:relative}
.timeline-item::before{content:'';position:absolute;left:0;top:0;bottom:-14px;width:2px;background:var(--border2)}
.timeline-item:last-child::before{display:none}
.timeline-time{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--accent);letter-spacing:0.04em;min-width:80px;flex-shrink:0;padding-left:12px}
.timeline-desc{font-size:14px;color:var(--text2);line-height:1.6}

/* Timing Callout */
.timing-callout{display:flex;align-items:flex-start;gap:12px;background:rgba(26,58,92,0.03);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:14px}
.timing-icon{font-size:20px;flex-shrink:0;line-height:1}
.timing-title{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--white);letter-spacing:0.04em;margin-bottom:2px}
.timing-text{font-size:14px;color:var(--text2);line-height:1.6}

/* Cycle Rationale */
.cycle-box{background:var(--surface);border-radius:var(--rs);padding:14px;border-left:3px solid var(--accent)}
.cycle-box p{font-size:14px;color:var(--text2);line-height:1.7}

/* Protocol Timeline Progress */
.proto-timeline{background:var(--surface);border-radius:var(--rs);padding:14px;margin-bottom:12px;border:1px solid var(--border)}
.proto-timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.proto-timeline-title{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--accent);letter-spacing:0.06em}
.proto-timeline-day{font-size:12px;font-weight:600;color:var(--text2)}
.proto-tl-item{display:flex;gap:12px}
.proto-tl-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:16px}
.proto-tl-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--border2);background:var(--card);flex-shrink:0;transition:all .2s}
.proto-tl-line{width:2px;flex:1;background:var(--border);min-height:20px}
.proto-tl-item.past .proto-tl-dot{background:var(--accent);border-color:var(--accent)}
.proto-tl-item.past .proto-tl-line{background:var(--accent)}
.proto-tl-item.active .proto-tl-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(34,204,102,0.4)}
.proto-tl-item.active .proto-tl-line{background:linear-gradient(to bottom,var(--green),var(--border))}
.proto-tl-content{padding-bottom:14px;flex:1}
.proto-tl-time{font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--text);letter-spacing:0.04em;margin-bottom:1px}
.proto-tl-desc{font-size:13px;color:var(--text2);line-height:1.5}
.proto-tl-item.future .proto-tl-time{color:var(--muted)}
.proto-tl-item.future .proto-tl-desc{color:var(--muted)}
.proto-tl-item.active .proto-tl-time{color:var(--green)}
.proto-tl-you{font-size:11px;font-weight:600;color:var(--green);margin-top:3px;text-transform:uppercase;letter-spacing:0.08em}
.proto-tl-nudge{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;font-weight:500}
.proto-tl-nudge.complete{color:var(--green)}

/* Injection Countdown (non-daily) */
.countdown-section{padding:4px 16px 12px}
.countdown-log-btn{width:100%;padding:12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.countdown-log-btn.active{background:rgba(34,204,102,0.1);border-color:rgba(34,204,102,0.3);color:var(--green);font-weight:600;animation:pulseGlow 2s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(34,204,102,0)}50%{box-shadow:0 0 12px 2px rgba(34,204,102,0.15)}}
.countdown-log-icon{font-size:16px}
.countdown-bar-wrap{text-align:center}
.countdown-bar{height:4px;background:rgba(26,58,92,0.06);border-radius:2px;overflow:hidden;margin-bottom:10px}
.countdown-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),rgba(34,204,102,0.6));border-radius:2px;transition:width .4s ease}
.countdown-info{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}
.countdown-last,.countdown-next{font-weight:500}
.countdown-days{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--accent);letter-spacing:0.04em;margin-top:4px}

/* Missed Dose Banner */
.missed-dose-banner{background:rgba(255,102,102,0.06);border:1px solid rgba(255,102,102,0.2);border-radius:var(--r);padding:14px;margin-bottom:12px}
.missed-dose-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.missed-dose-icon{font-size:18px}
.missed-dose-title{font-family:'Bebas Neue',sans-serif;font-size:16px;color:#ff8866;letter-spacing:0.04em}
.missed-dose-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:rgba(26,58,92,0.03);border-radius:var(--rs);margin-bottom:4px;cursor:pointer;transition:background .15s}
.missed-dose-item:hover{background:rgba(26,58,92,0.06)}
.missed-dose-item:last-child{margin-bottom:0}
.missed-dose-name{font-weight:600;font-size:14px;color:var(--text)}
.missed-dose-detail{font-size:12px;color:var(--muted)}

/* Compound Hero */
.compound-hero{background:var(--card);border-bottom:1px solid var(--border);padding:20px 16px 16px}
.hero-brand{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);margin-bottom:2px;font-weight:500}
.hero-name{font-size:36px;letter-spacing:-0.5px;margin-bottom:2px}
.hero-fullname{color:var(--muted);font-size:12px;margin-bottom:8px}
.hero-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.hero-quick-info{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-qi-item{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--rs);padding:10px 12px;border:1px solid var(--border)}
.hero-qi-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.hero-qi-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:1px}
.hero-qi-val{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}

/* Protocol CTA Banner */
.proto-cta{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;transition:background 0.15s}
.proto-cta-add{background:linear-gradient(135deg,var(--accent) 0%,#234B6E 100%);border-bottom:1px solid rgba(0,0,0,0.1)}
.proto-cta-active{background:var(--surface);border-bottom:1px solid var(--border)}
.proto-cta-left{display:flex;align-items:center;gap:12px}
.proto-cta-plus{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.2);color:#fff;font-size:20px;font-weight:600;flex-shrink:0}
.proto-cta-check{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-size:16px;font-weight:700;flex-shrink:0}
.proto-cta-add .proto-cta-title{color:#fff;font-weight:600;font-size:14px}
.proto-cta-add .proto-cta-sub{color:rgba(255,255,255,0.7);font-size:12px;margin-top:1px}
.proto-cta-active .proto-cta-title{color:var(--text);font-weight:600;font-size:14px}
.proto-cta-active .proto-cta-sub{color:var(--muted);font-size:12px;margin-top:1px}
.proto-cta-arrow{font-size:22px;font-weight:300;opacity:0.6}
.proto-cta-add .proto-cta-arrow{color:#fff}
.proto-cta-active .proto-cta-arrow{color:var(--muted)}

/* Floating Calculator FAB */
.calc-fab{position:fixed;bottom:24px;right:24px;z-index:310;display:flex;align-items:center;gap:8px;padding:14px 20px;border:none;border-radius:50px;background:var(--accent);color:#fff;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 20px rgba(26,58,92,0.35),0 2px 8px rgba(0,0,0,0.1);transform:translateY(80px);opacity:0;transition:transform .3s cubic-bezier(.32,.72,.37,1.02),opacity .2s,box-shadow .2s;letter-spacing:0.02em}
.calc-fab.show{transform:translateY(0);opacity:1}
.calc-fab:active{box-shadow:0 2px 10px rgba(26,58,92,0.3);transform:translateY(1px)}
.calc-fab-icon{font-size:18px;line-height:1}
.calc-fab-label{white-space:nowrap}
@media(max-width:430px){.calc-fab{right:16px;bottom:20px}}

/* Share App Button & Card */
.share-app-btn{background:none;border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;transition:all .2s;white-space:nowrap}
.share-app-btn:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.share-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--accent) 0%,#234B6E 100%);border-radius:var(--r);padding:16px 18px;margin-top:20px;cursor:pointer;transition:opacity .2s}
.share-card:active{opacity:0.85}
.share-card-content{flex:1}
.share-card-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.04em;color:#fff;margin-bottom:2px}
.share-card-sub{font-size:12px;color:rgba(255,255,255,0.75);line-height:1.4}
.share-card-icon{font-size:22px;color:#fff;flex-shrink:0}

/* Add Compound Button */
.add-compound-btn{display:block;width:100%;padding:14px;border:2px dashed var(--border);border-radius:var(--r);background:transparent;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:0.06em;color:var(--accent);cursor:pointer;transition:all .2s;margin-top:10px}
.add-compound-btn:active{background:var(--surface);border-color:var(--accent)}

/* Compound Picker */
.picker-list{max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.picker-item{display:flex;align-items:center;width:100%;padding:0;border:1px solid var(--border);border-radius:var(--rs);background:var(--card);margin-bottom:8px;cursor:pointer;transition:border-color .2s;overflow:hidden;text-align:left}
.picker-item:active{border-color:var(--accent)}
.picker-item.in-protocol{background:var(--surface);opacity:0.7}
.picker-item-accent{width:4px;align-self:stretch;flex-shrink:0}
.picker-item-info{flex:1;padding:12px 14px;min-width:0}
.picker-item-name{display:block;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:0.04em;color:var(--text)}
.picker-item-full{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-item-status{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin-right:12px;border-radius:50%;font-size:16px;font-weight:700}
.picker-item:not(.in-protocol) .picker-item-status{background:var(--accent);color:#fff}
.picker-item.in-protocol .picker-item-status{background:var(--green);color:#fff;font-size:13px}

/* Export Button & Toast */
.export-btn{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap}
.export-btn:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.export-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent);color:#fff;padding:12px 24px;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;z-index:400;opacity:0;transition:opacity .3s,transform .3s;box-shadow:0 4px 20px rgba(26,58,92,0.35);pointer-events:none;max-width:85vw;text-align:center;line-height:1.4}
.export-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Dashboard action bar (Shop / Export / Backup / Import) */
.dash-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.dash-action-btn{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px 10px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.dash-action-btn:active{background:var(--accent);color:#fff;border-color:var(--accent)}
.dash-action-btn.dash-shop{background:rgba(26,58,92,0.08);border-color:rgba(26,58,92,0.25);color:var(--accent)}
.dash-action-btn.dash-shop:active{background:var(--accent);color:#fff}

/* Buy CTA (compound detail + calculator) */
.buy-cta{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(26,58,92,0.06),rgba(26,58,92,0.10));border:1px solid rgba(26,58,92,0.25);border-radius:var(--r);margin-top:12px;text-decoration:none;color:var(--accent);transition:all .15s;cursor:pointer}
.buy-cta:hover,.buy-cta:active{background:linear-gradient(135deg,rgba(26,58,92,0.10),rgba(26,58,92,0.18));border-color:var(--accent);transform:translateY(-1px);box-shadow:0 3px 10px rgba(26,58,92,0.12)}
.buy-cta-icon{font-size:22px;flex-shrink:0;line-height:1}
.buy-cta-text{flex:1;min-width:0}
.buy-cta-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.04em;color:var(--accent);margin:0;line-height:1.2}
.buy-cta-sub{font-size:11px;color:var(--muted);margin:2px 0 0 0;line-height:1.2}
.buy-cta-arrow{font-size:22px;color:var(--accent);flex-shrink:0;line-height:1;font-weight:300}
.buy-cta-calc{margin-top:14px}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}