:root{--navy:#0c1b33;--navy-mid:#162e50;--navy-light:#254a70;--navy-pale:#edf2ff;--navy-mist:#f5f7fa;--gold:#436bf2;--gold-light:#a6c5fa;--gold-pale:#edf2ff;--ink:#13233b;--stone:#64748b;--cream:#f5f7fa;--radius:22px;--radius-sm:12px;--border:#e8ecf0;--shadow:0 5px 22px #152b4510;--shadow-lg:0 16px 55px #152b4529;--topbar-bg:#f5f7fa;--nav-bg:#0c1b33}
html{background:var(--bg)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.5}button,input,select,textarea{font:inherit}button,[role=button],a{touch-action:manipulation}button:focus-visible,a:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7aa0ff;outline-offset:3px}button{min-height:44px}button:disabled{cursor:wait;opacity:.55}.section-title,.sheet-title,.chart-title,.topbar-brand{font-family:inherit;letter-spacing:-.035em}.section-title{font-size:29px;font-weight:650;margin-bottom:4px}.section-subtitle{font-size:13px;color:var(--text-sub);margin-bottom:25px}.card,.chart-container,.stat-card{border:1px solid var(--border);box-shadow:none;border-radius:22px;background:var(--surface)}.card,.chart-container{padding:24px}.stats-grid{gap:16px;margin:20px 0}.stat-card{padding:22px}.stat-value{font-size:30px;letter-spacing:-1px}.stat-label{font-size:12px;font-weight:500}.stat-icon{color:#6682a7}.btn-navy,.btn-gold{background:var(--navy);color:white;border-radius:12px}.btn-navy:hover,.btn-gold:hover{background:var(--navy-light);color:white}.btn-outline{border-radius:12px}.navy-eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:var(--text-sub);margin-bottom:9px}.navy-hero{background:#102744;color:#edf4ff;border-radius:25px;display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:30px;padding:35px}.navy-hero .navy-eyebrow{color:#aec4df}.navy-hero h1{font-size:32px;line-height:1.25;font-weight:550;letter-spacing:-1px;margin:14px 0}.navy-hero h1 em{font-family:Georgia,serif;font-weight:400;color:#bdd1eb}.navy-hero p:not(.navy-eyebrow){max-width:480px;font-size:12px;color:#b4c7df;line-height:1.7}.navy-checkin{border:0;padding:12px 18px;color:#183558;background:#fff;border-radius:12px;font-weight:650;margin-top:24px;display:inline-flex;gap:16px;align-items:center}.navy-ring{--progress:0%;width:165px;height:165px;background:radial-gradient(closest-side,#142f50 85%,transparent 87%),conic-gradient(#90b2df var(--progress),#254366 0);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.navy-ring strong{font-size:38px;letter-spacing:-2px;font-weight:400}.navy-ring small{font-size:8px;letter-spacing:1px;color:#aac3e4}.nav-brand{font-size:24px;font-weight:650;color:white;padding:15px 14px 40px;letter-spacing:-1px}.nav-brand small{display:block;letter-spacing:2px;font-size:9px;opacity:.5;margin-top:5px}.login-title{font-family:inherit;letter-spacing:-1px;font-size:32px}.login-card{background:#162e50}.login-register{color:#c1d4ee;width:100%;border:0;background:none;font-size:12px;margin-top:12px}.login-help{font-size:11px;line-height:1.6;color:#a9bed8;margin-top:8px}.login-input{font-family:inherit}.login-wa{color:#bbcee6}.login-footer a{color:white;cursor:pointer}.topbar-brand{color:var(--text);font-size:21px}.topbar-brand small{color:var(--text-sub)}.topbar{background:var(--bg);border-bottom:1px solid var(--border);box-shadow:none;height:78px}.topbar-logo img{display:none}.mode-pill{background:var(--surface);color:var(--text);border:1px solid var(--border);min-height:44px;display:flex;align-items:center}.dark-toggle{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;width:44px}.avatar{background:#e8eef7;color:#35517b;border-radius:13px}.nav-item{font-family:inherit;border:0;text-align:left;white-space:normal;line-height:1.3}.nav-item.active{background:#254060;color:white}.injection-hero{background:#162e50}.patient-card{border-radius:16px;box-shadow:none;padding:18px;border:1px solid var(--border)}.patient-name{font-family:inherit;font-weight:650}.doctor-header{margin-bottom:25px}.doc-metrics{gap:16px}.doc-metric{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px}.doc-metric-val{color:var(--text);font-size:30px}.filter-chip{min-height:44px}.form-input,.form-select{font-size:16px;min-height:46px}.initial-pin-form{margin:25px 0;padding:22px;border:1px solid var(--border);border-radius:16px}.initial-pin-form p{font-size:12px;color:var(--text-sub);margin:9px 0}.initial-pin-form input{display:block;width:100%;min-height:46px;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg);color:var(--text)}[data-theme=dark]{--topbar-bg:#0c1b33;--bg:#0c1b33;--surface:#162e50;--border:#2a4567;--text:#edf3fc;--text-sub:#a9bdd5;--navy-pale:#254060;--navy-mist:#10243e}[data-theme=dark] .btn-navy{background:#254a70}
@media(min-width:901px){#app{padding-left:225px}.topbar{left:225px;padding:0 35px;width:calc(100% - 225px)}.nav{position:fixed;inset:0 auto 0 0;width:225px;height:100vh;display:flex;flex-direction:column;align-items:stretch;gap:6px;background:#0c1b33;padding:22px 18px;z-index:80;border:0}.nav-item{color:#adc0d5;font-size:13px;min-height:48px;flex:none;border-radius:12px;padding:13px 16px}.section{max-width:1400px;margin:0 auto;padding:30px 35px 45px}.bottom-sheet{left:auto!important;right:0!important;top:0!important;bottom:0!important;width:min(650px,75vw)!important;max-height:100dvh!important;border-radius:22px 0 0 22px!important;transform:translateX(110%)!important;padding:28px!important}.bottom-sheet.open{transform:translateX(0)!important}.sheet-handle{display:none}.toast{left:calc(50% + 112px)}}
@media(max-width:900px){#app{padding-bottom:85px}.topbar{padding:0 18px;height:70px}.topbar-brand{font-size:18px}.topbar-right{gap:8px}.nav-brand{display:none}.nav{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;min-height:68px;padding:7px 6px max(8px,env(safe-area-inset-bottom));display:flex;gap:3px;background:var(--surface);border-top:1px solid var(--border);z-index:80;overflow:visible}.nav-item{min-width:0;flex:1;padding:9px 3px;font-size:10px;text-align:center;border-radius:10px;min-height:48px;color:var(--text-sub)}.nav-item.active{background:var(--navy-pale);color:var(--navy-light)}.section{padding:22px 18px;max-width:100%;width:100%}.navy-hero{grid-template-columns:minmax(0,1fr) 125px;gap:12px;padding:25px}.navy-ring{width:125px;height:125px}.navy-ring strong{font-size:31px}.navy-hero h1{font-size:27px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-card{padding:18px;min-width:0}.stat-value{font-size:27px}.section-title{font-size:26px}.bottom-sheet{max-height:94dvh!important}.doc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-container{padding:20px;min-width:0}.topbar-logo{min-width:0}.patient-meta{overflow-wrap:anywhere}.patient-name{overflow-wrap:anywhere}.toast{max-width:calc(100vw - 30px)}}
@media(max-width:480px){.navy-hero{display:block;padding:26px}.navy-ring{float:right;width:108px;height:108px;margin-top:-95px;opacity:.9}.navy-hero p:not(.navy-eyebrow){padding-right:0;max-width:220px}.navy-checkin{position:relative;z-index:1}.topbar-brand small{font-size:8px}.mode-pill{font-size:10px;padding:8px}.topbar-right{gap:5px}.section{padding:22px 14px}.stats-grid{gap:10px}.stat-card{padding:15px}.login-card{padding:22px}#login-screen{padding:24px;overflow:auto;justify-content:safe center}.nav-item{font-size:9px}}
body[data-role=doctor] #main-nav .nav-item:not(.doctor-only){display:none}body[data-role=doctor] .nav-item.doctor-only{display:flex!important}body[data-role=doctor] .navy-hero{display:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
html[data-theme=dark]{--success:#8fd6b5;--success-pale:#153b35;--warn:#ffaaaa;--warn-pale:#48262d;--gold:#aec5ff;--gold-pale:#213a60}
.nav-item{background:transparent}.nav-item.active{background:#254060}@media(max-width:900px){.nav-item.active{background:var(--navy-pale)}}
.doctor-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;background:none;color:var(--text);padding:0;border-radius:0}.doctor-header h2{font:650 28px/1.25 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.8px;margin:0}.doctor-header p{grid-column:1/-1;color:var(--text-sub);order:3}.doctor-header>button{position:static!important;grid-column:2;grid-row:1;color:var(--text)!important;background:var(--surface)!important;border:1px solid var(--border)!important}.doc-metric-val{font-family:inherit;font-weight:650}.doc-metric{text-align:left}.doc-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.filter-chip{background:var(--surface)}
@media(max-width:900px){.doc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.doctor-header{grid-template-columns:1fr}.doctor-header h2{font-size:25px}.doctor-header>button{grid-column:1;grid-row:3;justify-self:start}.doctor-header p{order:0}.navy-ring{float:none;margin:22px 0 0}.navy-hero p:not(.navy-eyebrow){max-width:none}}
.navy-reason-dialog{margin:auto;width:min(440px,calc(100vw - 32px));border:1px solid var(--border);border-radius:20px;padding:24px;background:var(--surface);color:var(--text)}.navy-reason-dialog::backdrop{background:#0c1b3399}.navy-reason-dialog h2{font-size:21px;margin-bottom:14px}.navy-reason-dialog label{display:block;margin-bottom:8px}.navy-reason-dialog textarea{width:100%;min-height:100px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text)}.navy-reason-dialog form>div{display:flex;gap:12px;margin-top:15px}.navy-reason-dialog button{flex:1;border-radius:10px;padding:10px;border:1px solid var(--border)}
[data-theme=dark] #view-list-btn,[data-theme=dark] #view-analytics-btn,[data-theme=dark] #view-activity-btn{color:var(--text)!important}[data-theme=dark] [style*="color:var(--navy)"],[data-theme=dark] [style*="color: var(--navy)"]{color:var(--text)!important}

/* Keep the installed iOS app's controls below the system status bar.
   The safe inset is part of the header height, not taken from its 70px row. */
:root {
  --mj-safe-top: env(safe-area-inset-top, 0px);
  --mj-safe-left: env(safe-area-inset-left, 0px);
  --mj-safe-right: env(safe-area-inset-right, 0px);
  --mj-header-height: 78px;
  --mj-header-gutter: 35px;
}
.topbar {
  height: calc(var(--mj-header-height) + var(--mj-safe-top));
  padding: var(--mj-safe-top) max(var(--mj-header-gutter), var(--mj-safe-right)) 0 max(var(--mj-header-gutter), var(--mj-safe-left));
}
.topbar-right { flex-shrink: 0; }
@media (max-width: 900px) {
  :root { --mj-header-height: 70px; --mj-header-gutter: 18px; }
}