html[data-theme="light"] {--po-canvas: #FFFFFF;
--po-surface: #FCFCFC;
--po-inset: #F6F6F6;
--po-ink: #202020;
--po-muted: #626262;
--po-line: #DEDEDE;
--po-accent: #75AEB8;
--po-on-accent: #252821;
--po-accent-hover: #6CA0A9;
--po-on-accent-hover: #252821;
--po-accent-text: #50767D;
--po-accent-soft: #ECF3F4;
--po-on-accent-soft: #4E747A;
--po-accent-ring: #65969E;
--po-accent-border: #65969E;}
html[data-theme="dark"] {--po-canvas: #080808;
--po-surface: #101010;
--po-inset: #171717;
--po-ink: #EEEEEE;
--po-muted: #B6B6B6;
--po-line: #2C2C2C;
--po-accent: #75AEB8;
--po-on-accent: #252821;
--po-accent-hover: #80B4BE;
--po-on-accent-hover: #252821;
--po-accent-text: #75AEB8;
--po-accent-soft: #20292B;
--po-on-accent-soft: #75AEB8;
--po-accent-ring: #75AEB8;
--po-accent-border: #75AEB8;}
/* Paper One syringe blue-green and shared DesignWelldone navigation, v14.4.0. */
html[data-theme] { --bg:var(--po-canvas); --bg2:var(--po-canvas); --panel:var(--po-surface); --panel2:var(--po-inset); --panel3:var(--po-inset); --line:var(--po-line); --line2:var(--po-line); --border:var(--po-line); --text:var(--po-ink); --muted:var(--po-muted); --muted2:var(--po-muted); --aqua:var(--po-accent); --cyan:var(--po-accent); --blue:var(--po-accent); --blue2:var(--po-accent); --teal:var(--po-accent); }
html[data-theme] body { background:var(--po-canvas)!important; color:var(--po-ink); padding-bottom:env(safe-area-inset-bottom); }
html[data-theme] .container { padding:0 20px 28px; gap:20px; }
.vialChrome { grid-column:1/-1; position:sticky; top:0; z-index:500; margin:0 -20px; background:var(--po-canvas); border-bottom:1px solid var(--po-line); }
html[data-theme] .vialChrome .header { display:flex; align-items:center; gap:12px; padding:10px 16px; margin:0; min-height:66px; background:var(--po-canvas); border:0; }
.vialWordmark { color:var(--po-ink); font-size:24px; letter-spacing:-.8px; font-weight:750; text-decoration:none; margin-right:auto; }
.vialIconButton { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:10px; color:var(--po-ink); background:transparent; border:0; border-radius:8px; cursor:pointer; }
.vialIconButton svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vialDestinations,.vialContext { display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; padding:0 20px; background:var(--po-inset); }
.vialDestinations button,.vialContext button { flex:0 0 auto; min-height:50px; padding:10px 0; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--po-muted); font:650 15px/1.3 inherit; font-family:inherit; font-size:15px; cursor:pointer; }
.vialDestinations button[aria-current],.vialContext button[aria-current] { color:var(--po-ink); border-bottom-color:var(--po-accent-ring); }
.vialContext { background:var(--po-canvas); border-top:1px solid var(--po-line); gap:24px; }
.vialContext button { font-size:14px; min-height:46px; font-weight:500; }
html[data-theme] #vialBackButton { position:static; }
html[data-theme] .tabbar { display:none!important; }
html[data-theme] :is(.homePanel,.trackerPanel,.inventoryPanel,.weightPanel,.historyPanel,.morePanel,.boardPanel,#mainContent) { margin-top:0; min-width:0; }
html[data-theme] :is(.moreGroup,.homeSection,.homeCompactStats button,.inputcard,.card,.historyCard,.vialCard,.protocolCard,.weightHistoryCard,.weightEntryCard,.trackerComposer,.protocolComposer,.emptyState,.stockCard,.boardMetric,.boardSection,.boardRecentRow) { background:var(--po-surface)!important; border-color:var(--po-line)!important; color:var(--po-ink); box-shadow:none; }
html[data-theme] :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background:var(--po-inset)!important; color:var(--po-ink)!important; border-color:var(--po-line)!important; border-radius:10px; }
html[data-theme] :is(.homePrimaryBtn,.heroBtn.primary,.vialActionBtn.primary,.protocolActionBtn.primary,.appUpdateBtn.primary,.boardActionButton.primary,.calcbtn,.savebtn) { background:var(--po-accent)!important; color:var(--po-on-accent)!important; border-color:var(--po-accent-border)!important; box-shadow:none; }
html[data-theme] :is(.homePrimaryBtn.secondary,.heroBtn:not(.primary),.vialActionBtn:not(.primary),.homeBoardButton,.boardActionButton:not(.primary),.weightEntrySaveBtn) { background:var(--po-inset)!important; color:var(--po-ink)!important; border-color:var(--po-line)!important; }
html[data-theme] :is(.screenEyebrow,.heroEyebrow,.dashLabel,.homeTextBtn,.moreGroupTitle,.todayDate,.sectiontitle,.unitlabel) { color:var(--po-muted)!important; }
html[data-theme] .moreRow { grid-template-columns:1fr 18px; padding:16px 18px; min-height:76px; border-top:1px solid var(--po-line); }
.moreRowIcon { display:none!important; }
html[data-theme] .moreStaticRow { padding:18px; gap:14px; }
.moreRow small,.moreStaticRow small { font-size:13px; line-height:1.5; }
html[data-theme] .themeToggle { position:static; display:inline-flex; gap:4px; width:max-content; padding:4px; background:var(--po-inset); border:1px solid var(--po-line); border-radius:999px; }
html[data-theme] .themeToggle button { min-height:40px; padding:8px 16px; border:0; border-radius:999px; color:var(--po-muted); background:transparent; }
html[data-theme] .themeToggle button.active { background:var(--po-accent); color:var(--po-on-accent); }
#vialNavigation { position:fixed; inset:0 auto 0 0; width:min(100%,420px); height:100dvh; max-width:100%; max-height:100dvh; padding:0; margin:0; border:0; border-right:1px solid var(--po-line); border-radius:0; background:var(--po-canvas); color:var(--po-ink); overscroll-behavior:contain; }
#vialNavigation::backdrop { background:#0008; }
body:has(#vialNavigation[open]) { overflow:hidden; }
.vialMenuHead { position:sticky; top:0; display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--po-line); background:var(--po-canvas); z-index:1; }
.vialMenuHead strong { flex:1; font-size:22px; }
.vialMenuPage { padding:12px 20px; }
.vialMenuPage[hidden],.vialIconButton[hidden] { display:none; }
.vialMenuLabel { padding:10px 0; color:var(--po-muted); font-size:13px; }
.vialMenuPage>button,.vialMenuPage>a { display:block; position:relative; width:100%; min-height:76px; padding:16px 28px 16px 0; border:0; border-bottom:1px solid var(--po-line); border-radius:0; background:transparent; color:var(--po-ink); text-align:left; text-decoration:none; font:650 18px/1.4 system-ui; cursor:pointer; }
.vialMenuPage small { display:block; margin-top:4px; color:var(--po-muted); font:400 14px/1.5 system-ui; }
.vialMenuPage button>span,.vialCompanyLink>span { position:absolute; right:0; top:24px; }
.vialMenuFoot { padding:12px 20px 28px; color:var(--po-muted); font-size:13px; }
html[data-theme] :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--po-accent-ring); outline-offset:3px; }
html[data-theme] #installArea { margin:0; }
html[data-theme] .footer { color:var(--po-muted); padding:20px 0; }
body.boardMode .vialChrome { display:none; }
@media(min-width:800px) { .vialChrome { margin:0 -20px; }.vialDestinations,.vialContext { gap:30px; }.vialMenuPage { padding-inline:24px; } }
@media(max-width:360px) { html[data-theme] .container { padding-inline:16px; }.vialChrome { margin-inline:-16px; }.vialDestinations { gap:20px; padding-inline:16px; }.vialDestinations button { font-size:14px; } }
html[data-theme] .themeToggle { background:var(--po-inset)!important; border-color:var(--po-line)!important; }
html[data-theme] .themeToggle button { background:transparent!important; color:var(--po-muted)!important; box-shadow:none!important; }
html[data-theme] .themeToggle button.active { background:var(--po-accent)!important; color:var(--po-on-accent)!important; }
body:not([data-vial-view="calculator"]):not([data-vial-view="nasal"]) aside { display:none; }
.moreRow:disabled { opacity:.65; cursor:default; }
html[data-theme] :is(.calc,.saveBtn:not(.secondarySave),.weightSaveBtn) { background:var(--po-accent)!important; color:var(--po-on-accent)!important; border-color:var(--po-accent-border)!important; box-shadow:none; }
html[data-theme] :is(.unitBtn.active,.syringe-choice.active,.tab.active) { background:var(--po-accent-soft)!important; color:var(--po-on-accent-soft)!important; border-color:var(--po-accent-border)!important; }

/* Right-side overflow contains options, never another destination catalog. */
#vialOptions { position:fixed; inset:auto; top:var(--options-top,76px); right:var(--options-right,16px); width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - var(--options-top,76px) - 12px); overflow-y:auto; margin:0; padding:18px; border:1px solid var(--po-line); border-radius:14px; background:var(--po-surface); color:var(--po-ink); box-shadow:0 10px 32px #0003; }
#vialOptions h2 { margin:0 0 12px; color:var(--po-muted); font-size:13px; font-weight:600; }
.vialOptionsAppearance { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 18px; border-bottom:1px solid var(--po-line); }
#vialOptions>button { display:block; width:100%; min-height:48px; padding:14px 0; border:0; border-bottom:1px solid var(--po-line); border-radius:0; color:var(--po-ink); background:transparent; text-align:left; font:500 15px/1.5 system-ui; cursor:pointer; }
#vialOptions>button[hidden] { display:none; }
#vialOptions>button:last-child { border-bottom:0; padding-bottom:4px; }
.vialAppearanceShortcut { min-height:44px; width:max-content; padding:8px 14px; background:var(--po-inset); color:var(--po-ink); border:1px solid var(--po-line); border-radius:10px; font:inherit; cursor:pointer; }
@media(max-width:360px) { html[data-theme] .vialChrome .header { gap:6px; padding-inline:12px; }.vialWordmark { font-size:22px; } }
/* Retire legacy mobile padding that previously clipped the shared header. */
@media(max-width:640px) {
  html[data-theme] .container { padding:0 20px 28px!important; }
  html[data-theme] .vialChrome .header { margin:0!important; padding:10px 16px!important; }
}
@media(max-width:360px) {
  html[data-theme] .container { padding-inline:16px!important; }
  html[data-theme] .vialChrome .header { padding-inline:12px!important; }
}

/* Shared typography, identity, and remaining legacy blue panels. */
html[data-theme] body,html[data-theme] :is(button,input,select,textarea) {font-family:Arial,Helvetica,system-ui,sans-serif!important}
.vialIdentityIcon {--paper-light:url("./icons/paper-one/vial-light.svg");--paper-dark:url("./icons/paper-one/vial-dark.svg");width:28px;height:28px}
.vialWordmark {display:flex;align-items:center;gap:8px;font-weight:700}
.homePrimaryBtn {display:flex;align-items:center;justify-content:center;gap:8px}
html[data-theme] :is(.trackerSummaryCard,.trackerComposer,.trackerNotesCard,.todayHero,.weightHeroCard,.weightTrendCard,.boardCard,.todayStatCard,.stockStat,.vialStat,.dayLogCard,.logCard,.protocolCard,.inventoryHeader,.trackerHeader,.historyHeader,.boardVialRow,.boardStockRow) {background:var(--po-surface)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important;box-shadow:none}
html[data-theme] :is(.dateNavBtn,.todayBtn,.viewToggle,.viewToggle button,.filterBtn) {background:var(--po-inset)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important}
html[data-theme] :is(.trackerSummaryCard,.todayStatCard,.stockStat,.vialStat) strong {color:var(--po-ink)!important}
html[data-theme] .viewToggle button.active {background:var(--po-accent-soft)!important;color:var(--po-on-accent-soft)!important}
html[data-theme] .homePrimaryBtn:hover {background:var(--po-accent-hover)!important;color:var(--po-on-accent-hover)!important}
html[data-theme] .homePrimaryBtn.secondary:hover {background:var(--po-accent-soft)!important;color:var(--po-on-accent-soft)!important}
@media(max-width:360px) {.vialWordmark {font-size:20px;gap:6px}.vialWordmark .vialIdentityIcon {width:24px;height:24px}.homePrimaryBtn {font-size:14px;gap:6px}}

html[data-theme] :is(.homeTextBtn,.homeList button,.homeVialGrid button) {background:var(--po-inset)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important;box-shadow:none}
html[data-theme] {--aqua:var(--po-accent-text);--cyan:var(--po-accent-text);--blue:var(--po-accent-text);--blue2:var(--po-accent-text);--teal:var(--po-accent-text)}
html[data-theme] :is(.specs,.verify,.tips,.detail,.results,.roadmapCard,.dashCard,.metric,.spec,.homeHero,.weekDay,.protocolSection) {background:var(--po-surface)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important;box-shadow:none}
html[data-theme] :is(.vialRemainingBlock,.drawbox,.bigresult,.recommend,.reference) {background:var(--po-inset)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important}
html[data-theme] :is(.historyActionBtn.primary,.quickAction.primary,.stockActionBtn.primary) {background:var(--po-accent)!important;color:var(--po-on-accent)!important;border-color:var(--po-accent-border)!important;box-shadow:none}
html[data-theme] :is(.saveBtn:not(.secondarySave),.historyActionBtn.primary,.quickAction.primary,.stockActionBtn.primary):hover {background:var(--po-accent-hover)!important;color:var(--po-on-accent-hover)!important}

html[data-theme] .homeBoardButton {display:inline-flex;align-items:center;justify-content:center;gap:0;padding:10px 14px}

/* Equivalent panels use one surface; only actual controls receive state fills. */
html[data-theme] :is(.drawbox,.bigresult,.recommend,.warning,.reference,.vialRemainingBlock,.sidebar) {background:var(--po-surface)!important;border-color:var(--po-line)!important;color:var(--po-ink)!important;box-shadow:none}
html[data-theme] .refrow {background:transparent!important;border-radius:0;border-bottom:1px solid var(--po-line)}
html[data-theme] :is(.syringe-choice,.unitBtn) {background:var(--po-surface)!important;color:var(--po-ink)!important;border-color:var(--po-line)!important;box-shadow:none}
html[data-theme] :is(.syringe-choice.active,.unitBtn.active) {background:var(--po-accent-soft)!important;color:var(--po-on-accent-soft)!important;border-color:var(--po-accent-border)!important}
html[data-theme] .syringe-choice :is(strong,span) {color:inherit!important}
html[data-theme] :is(.drawlabel,.drawval,.bigresult .rval,.bigresult .rlabel,.bigresult .runit,.refrow span:nth-child(2)) {color:var(--po-accent-text)!important;text-shadow:none}
html[data-theme] :is(.metric .mval,.refrow span:first-child,.refrow span:last-child) {color:var(--po-ink)!important}
html[data-theme] :is(.hint,.mlabel,.munit,.rsub,.syringe-label,.label) {color:var(--po-muted)!important}
html[data-theme="dark"] .warning :is(strong,p) {color:#E4BB62!important}
html[data-theme="light"] .warning :is(strong,p) {color:#805B00!important}
/* Theme changes should not leave isolated dark fills fading over a light page. */
html[data-theme] :is(.inputcard,.syringe-choice,.unitBtn) {transition:none}