:root{--navy:#0f2a43;--teal:#0e7c7b;--ink:#1c2733;--muted:#5a6b7a;--line:#dde5ea;--soft:#f4f8f9;--red:#b3261e;--amber:#9a6a00;--green:#146c2e;--panel:#ffffff}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);line-height:1.55;background:var(--soft)}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
header{background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding:13px 0;flex-wrap:wrap}
.mark{width:40px;height:40px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.brand{font-weight:700;color:var(--navy);font-size:17px}
.bar .who{margin-left:auto;color:var(--muted);font-size:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button,.btn{background:var(--teal);border:0;color:#fff;padding:9px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}
button.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;max-width:430px;margin:56px auto}
.card h1{color:var(--navy);font-size:22px;margin:0 0 4px}
.card p.sub{color:var(--muted);margin:0 0 18px;font-size:14.5px}
label{display:block;font-size:14px;font-weight:600;margin:12px 0 5px}
input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.err{color:var(--red);font-size:14px;min-height:20px;margin-top:10px}
main{padding:26px 0 40px}
h1.page{color:var(--navy);font-size:24px;margin:0 0 4px}
p.sub{color:var(--muted);margin:0 0 16px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:11px 13px;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--navy);background:var(--soft);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid var(--line)}
.pill.stat{color:#fff;background:var(--red);border-color:var(--red)}
.pill.critical{color:var(--red);border-color:var(--red)}
.pill.urgent{color:var(--amber);border-color:var(--amber)}
.pill.routine{color:var(--muted)}
.note{color:var(--muted);font-size:13.5px;margin-top:14px}
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:16px}
.count{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.count b{display:block;font-size:28px;color:var(--navy)}
.count span{color:var(--muted);font-size:14px}
@media (max-width:640px){table,thead,tbody,tr,th,td{display:block}thead{display:none}tr{border-bottom:1px solid var(--line);padding:8px 0}td{border:0;padding:4px 13px}}
/* Header controls — drawn line icons with visible text labels, in one
   consistent style on every device (no emoji). */
.hbtn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;line-height:1;padding:8px 9px;border-radius:9px;position:relative}
.hbtn svg{width:19px;height:19px;color:var(--brand,var(--teal));flex:none}
.hbtn:hover{background:rgba(14,124,123,.1);color:var(--navy)}
.hbtn.on{color:var(--teal);background:rgba(14,124,123,.15)}
:root[data-theme="dark"] .hbtn:hover{background:rgba(53,162,157,.18)}
:root[data-theme="dark"] .hbtn.on{background:rgba(53,162,157,.28)}
/* The theme trio sits in one segmented pill; the active one is filled. */
.themesw{display:inline-flex;gap:2px;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px}
.themesw .hbtn{padding:6px 8px;border-radius:99px}
.themesw .hbtn svg{width:17px;height:17px}
.themesw .hbtn.on{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(10,20,35,.18)}
:root[data-theme="dark"] .themesw .hbtn.on{background:rgba(53,162,157,.35);color:#fff;box-shadow:none}
/* Wide pages (worklist, studies, library) and the portal nav row */
.wrap.wide{max-width:1360px}
.pagenav{display:flex;gap:8px;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.pagenav a{padding:8px 15px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px;border:1px solid transparent}
.pagenav a:hover{border-color:var(--line)}
.pagenav a.on{background:var(--navy);color:#fff}
:root[data-theme="dark"] .pagenav a.on{background:var(--teal)}
/* Dark theme — the bootstrap script sets data-theme="dark" on <html>. */
:root[data-theme="dark"]{--navy:#cfe2f5;--teal:#35a29d;--ink:#e7eff6;--muted:#9db4c6;--line:#2b3e50;--soft:#0c1624;--amber:#ffca6a;--green:#7bd88f;--panel:#132539}
:root[data-theme="dark"] body{background:#0c1624}
:root[data-theme="dark"] header{background:#101f31}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .count,:root[data-theme="dark"] table{background:#132334}
:root[data-theme="dark"] th{background:#0e1c2c}
:root[data-theme="dark"] button.ghost{background:transparent;color:var(--teal)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:#0e1c2c;color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .ed{background:#0e1c2c!important;color:var(--ink)}
:root[data-theme="dark"] .mic{background:transparent}
:root[data-theme="dark"] .stat{background:#132334}
:root[data-theme="dark"] .mark{background:var(--teal)}
:root[data-theme="dark"] .pill.routine{color:var(--muted)}
:root[data-theme="dark"] .modalbox{background:#132334}
:root[data-theme="dark"] .docbar{background:#101f31}

/* Dark-theme surfaces: several pages carry light card styles of their own
   from before the theme system. In dark mode those surfaces follow the
   theme panel colour instead of staying white. Print sheets (the report
   document) are deliberately not listed: paper is white in both themes. */
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .acct,:root[data-theme="dark"] .libcard,
:root[data-theme="dark"] .doccard,:root[data-theme="dark"] details.guide,:root[data-theme="dark"] .card,
:root[data-theme="dark"] header{background:var(--panel)}
:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .editor{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .chip,:root[data-theme="dark"] .tab,:root[data-theme="dark"] .iconbtn,
:root[data-theme="dark"] .mic,:root[data-theme="dark"] .toolbar button{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .notice{background:color-mix(in srgb, var(--green) 12%, var(--panel))}
:root[data-theme="dark"] .banner,:root[data-theme="dark"] .sup{background:color-mix(in srgb, var(--amber) 14%, var(--panel))}
/* Show/Hide in password boxes: the word sits at the box's right edge.
   Wired onto every password box by theme.js (wirePwToggles). */
.pwwrap{position:relative;display:inline-block;width:100%}
.pwwrap>input{width:100%;padding-right:54px}
.pwtoggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--teal);font-size:13px;font-weight:600;cursor:pointer;padding:2px 4px}