/* Sentinel — design tokens and shared components.
   Visual language lifted from Sentinel.dc.html (turn 2): light LPN app, dark admin console. */

@font-face {
  font-family: 'Qurova';
  src: url('../fonts/Qurova-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #14161A;
  --ink-2: #3D434E;
  --ink-3: #5B6270;
  --muted: #6B7280;
  --faint: #9AA1AD;
  --faint-2: #A2A8B4;
  --faint-3: #BFC4CD;
  --hair: #E6E9ED;
  --hair-2: #EDEFF2;
  --hair-3: #F2F4F6;
  --chip: #F1F3F6;
  --chip-2: #F4F6F8;
  --paper: #fff;
  --canvas: #F5F7F9;
  --amber: #C98A21;
  --amber-ink: #8A6112;
  --amber-ink-2: #7A5410;
  --amber-bg: #FBF0DC;
  --amber-bg-2: #FDFAF3;
  --amber-line: #F0E1C0;
  --red: #D4503E;
  --red-ink: #9E3A2B;
  --red-ink-2: #7C3226;
  --red-bg: #FDF6F5;
  --red-line: #F0DCD7;
  --green: #3E7A63;
  --green-bg: #E3F0EA;
  --mint: #4FBFA0;
  --violet: #7B74E8;
  --violet-deep: #4A45C9;
  --violet-bg: #EEEDFB;
  --violet-line: #DEDCF7;
  --sans: 'Helvetica Neue', Helvetica, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  /* admin (dark) */
  --d-bg: #0B0C0E;
  --d-panel: #0E1013;
  --d-card: #131519;
  --d-raise: #1C2027;
  --d-raise-2: #16191E;
  --d-ink: #F4F5F7;
  --d-ink-2: #C3C9D2;
  --d-ink-3: #9BA3AF;
  --d-muted: #7A8290;
  --d-faint: #5E6672;
  --d-hair: rgba(255,255,255,.07);
  --d-hair-2: rgba(255,255,255,.12);
  --d-accent: #B6B1F4;
  --d-red: #E8998A;
  --d-red-2: #B08B84;
  --d-red-bg: #1A1216;
  --d-red-line: #3A211C;
  --d-amber: #D9BE86;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
button { font-family: var(--sans); cursor: pointer; }
input, select, textarea { font-family: var(--sans); }
a { color: var(--violet-deep); text-decoration: none; }

.screen { flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: var(--canvas); }
.screen.dark { background: var(--d-bg); color: var(--d-ink); }

/* ---------- top bar (LPN) ---------- */
.topbar {
  height: 60px; flex: none; background: var(--paper); border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; padding: 0 20px; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--ink);
  display: flex; align-items: center; justify-content: center; position: relative; top: -2px;
}
.brand-mark i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; }
.brand-name { font: 400 19px/1 'Qurova', var(--sans); }
.screen.dark .brand-mark { background: var(--d-ink); }
.screen.dark .brand-mark i { border-color: var(--d-bg); }

.facility-pill {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 9px; background: var(--chip);
}
.facility-pill .door {
  width: 11px; height: 13px; border: 1.5px solid var(--ink-3); border-radius: 3px;
  border-top-left-radius: 6px; border-top-right-radius: 6px;
}
.facility-pill b { font: 500 12.5px var(--sans); }
.facility-pill .sep { width: 1px; height: 16px; background: #DDE1E7; }
.facility-pill .meta { font: 400 11px var(--mono); color: var(--muted); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.shift { text-align: right; line-height: 1.2; }
.shift b { font: 500 12px var(--sans); display: block; }
.shift span { font: 400 10.5px var(--mono); color: var(--faint); }
.who { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--hair-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #E4E7EC; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 500 11.5px var(--sans); color: var(--ink-3);
}
.who .nm b { font: 500 12px var(--sans); display: block; line-height: 1.2; }
.who .nm span { font: 400 10.5px var(--mono); color: var(--faint); }

.applink {
  height: 30px; padding: 0 11px; border: 1px solid var(--hair); border-radius: 8px;
  background: var(--paper); font: 500 11.5px var(--sans); color: var(--ink-3);
}
.screen.dark .applink { background: transparent; border-color: var(--d-hair-2); color: var(--d-ink-3); }

/* ---------- buttons ---------- */
.btn {
  height: 38px; padding: 0 16px; border: 1px solid #E1E5EA; border-radius: 10px;
  background: var(--paper); font: 500 12.5px var(--sans); color: var(--ink);
}
.btn.quiet { font-weight: 400; color: var(--ink-2); }
.btn.primary { border: 0; background: var(--ink); color: #fff; font: 500 13px var(--sans); padding: 0 18px; }
.btn.big { height: 46px; border-radius: 10px; font-size: 13px; }
.btn.big.primary { padding: 0 24px; font-size: 13.5px; }
.btn.sm { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12px; }
.btn.icon { width: 38px; padding: 0; font: 400 15px var(--sans); color: var(--ink-2); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.amberline { border: 1px solid #E0CFA6; background: transparent; color: var(--amber-ink-2); font-size: 12px; }

/* ---------- stat chips (rounds header) ---------- */
.statrow { display: flex; align-items: center; gap: 8px; }
.stat {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 15px;
  border: 1px solid var(--hair); border-radius: 11px; background: #FAFBFC;
}
.stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.stat .dot.open { background: transparent; border: 1.5px solid var(--faint); }
.stat .dot.dash { border-radius: 1px; height: 2px; background: #C7CCD4; border: 0; }
.stat b { font: 500 19px/1 var(--sans); letter-spacing: -.02em; }
.stat span { font: 400 12px var(--sans); color: var(--muted); }
.stat.warn { border-color: var(--amber-line); background: var(--amber-bg-2); }
.stat.warn .dot { background: var(--amber); }
.stat.warn b, .stat.warn span { color: var(--amber-ink); }
.stat.idle { background: var(--paper); border-color: var(--hair-2); }
.stat.idle b, .stat.idle span { color: var(--faint); }

.progress { height: 6px; border-radius: 3px; background: var(--hair-2); display: flex; overflow: hidden; }
.progress .done { background: var(--ink); }
.progress .flag { background: var(--amber); }

/* ---------- tabs / search ---------- */
.tabs { height: 38px; display: flex; align-items: center; padding: 3px; border-radius: 10px; background: var(--chip); gap: 2px; }
.tabs button {
  height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; font: 400 12.5px var(--sans); color: var(--muted);
}
.tabs button.on { background: var(--paper); font-weight: 500; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.search {
  height: 38px; flex: 1; max-width: 230px; border: 1px solid var(--hair); border-radius: 10px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #FAFBFC;
}
.search i { width: 12px; height: 12px; border: 1.5px solid var(--faint-2); border-radius: 50%; flex: none; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; font: 400 12.5px var(--sans); color: var(--ink); }
.search input::placeholder { color: var(--faint-2); }

/* ---------- rounds list ---------- */
.wing-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 9px; }
.wing-head .t { font: 600 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #8A909C; }
.wing-head .r { font: 400 10.5px var(--mono); color: var(--faint-3); }
.wing-head .line { flex: 1; height: 1px; background: var(--hair); }
.wing-head .n { font: 400 10.5px var(--mono); color: var(--faint); }

.roundcard { background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.rrow { display: flex; align-items: center; gap: 14px; padding: 10px 14px; min-height: 66px; border-bottom: 1px solid var(--hair-3); }
.rrow:last-child { border-bottom: 0; }
.rrow.dim { background: #FAFBFC; }
.rrow .room { width: 46px; flex: none; font: 500 15px var(--mono); color: var(--ink); }
.rrow.dim .room { color: var(--faint); }
.rrow .avatar { width: 34px; height: 34px; background: #EEF0F3; font-size: 12px; }
.rrow .idcol { width: 186px; flex: none; min-width: 0; }
.rrow .idcol b { font: 500 13.5px/1.3 var(--sans); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow.dim .idcol b { color: var(--faint); }
.rrow .idcol span { font: 400 10.5px/1.4 var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rrow .vitcol { width: 212px; flex: none; min-width: 0; }
.rrow .vitcol .v { font: 400 11.5px/1.35 var(--sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .vitcol .w { font: 400 10.5px/1.4 var(--mono); color: var(--faint); }
.rrow .note { flex: 1; min-width: 0; font: 400 11.5px var(--sans); color: var(--faint-3); }
.rrow .flagnote {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--amber-bg); border-radius: 8px; padding: 7px 10px;
}
.rrow .flagnote i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--amber); }
.rrow .flagnote span { font: 400 11.5px/1.35 var(--sans); color: var(--amber-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .donenote { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.rrow .donenote i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; }
.rrow .donenote i::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.rrow .donenote span { font: 400 11.5px var(--sans); color: var(--green); }
.rrow .due { width: 96px; flex: none; text-align: right; font: 400 11px var(--mono); color: var(--faint); }
.rrow .act { height: 40px; flex: none; padding: 0 16px; border: 0; border-radius: 9px; background: var(--ink); color: #fff; font: 500 12.5px var(--sans); }
.rrow .act.ghost { background: var(--paper); border: 1px solid #E1E5EA; color: var(--ink-2); }
.badge { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 7px; background: var(--chip); font: 500 11px var(--sans); color: var(--muted); flex: none; }

.footbar { min-height: 56px; flex: none; background: var(--paper); border-top: 1px solid var(--hair); display: flex; align-items: center; padding: 8px 20px; gap: 12px; flex-wrap: wrap; }
.footbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); flex: none; }
.footbar b { font: 500 12.5px var(--sans); }
.footbar span { font: 400 11.5px var(--sans); color: var(--muted); }

/* ---------- visit flow ---------- */
.stepper { margin: 0 auto; display: flex; align-items: center; gap: 6px; }
.stepper .gap { width: 16px; height: 1px; background: #DDE1E7; }
.step {
  height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border-radius: 8px; background: var(--chip); color: var(--muted); font: 400 12px var(--sans); border: 0;
}
.step .n { font: 500 10px var(--mono); opacity: .6; }
.step.on { background: var(--ink); color: #fff; font-weight: 500; }
.step.done { color: var(--green); font-weight: 500; }

.visit-body { flex: 1; min-height: 0; display: flex; }
.vpanel { background: var(--paper); padding: 16px; }
.vpanel.left { width: 252px; flex: none; border-right: 1px solid var(--hair); }
.vpanel.right { width: 284px; flex: none; border-left: 1px solid var(--hair); display: flex; flex-direction: column; }
.vmain { flex: 1; min-width: 0; padding: 18px 20px; overflow-y: auto; }

.photo-ph {
  height: 96px; border-radius: 10px; margin-bottom: 12px;
  background: repeating-linear-gradient(135deg, var(--chip), var(--chip) 6px, #E8EBEF 6px, #E8EBEF 12px);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.photo-ph span { font: 400 9.5px var(--mono); color: var(--faint); }
.allergy {
  display: flex; align-items: flex-start; gap: 8px; background: var(--red-bg);
  border: 1px solid var(--red-line); border-radius: 9px; padding: 9px 10px; margin-bottom: 12px;
}
.allergy i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--red); margin-top: 5px; }
.allergy .t { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); }
.allergy .v { font: 400 11.5px/1.45 var(--sans); color: var(--red-ink-2); margin-top: 2px; }
.microhead { font: 600 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint-2); margin-bottom: 7px; }
.dx { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.dx span { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; background: var(--chip); font: 500 10.5px var(--sans); color: var(--ink-2); }
.kv { display: flex; flex-direction: column; gap: 6px; font: 400 11.5px var(--sans); color: var(--ink-2); }
.kv > div { display: flex; justify-content: space-between; gap: 8px; }
.kv .n { font: 500 11.5px var(--mono); }
.rule { height: 1px; background: var(--hair-2); margin: 14px 0; }

.vitgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vt {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 13px;
  text-align: left; font-family: var(--sans); position: relative;
}
.vt.sel { border: 2px solid var(--ink); padding: 11px 12px; }
.vt.empty { border-style: dashed; border-color: #DDE1E7; }
.vt .lbl { display: flex; align-items: center; gap: 6px; font: 500 11px var(--sans); color: var(--muted); margin-bottom: 8px; }
.vt .lbl i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.vt .val { display: flex; align-items: baseline; gap: 5px; }
.vt .val b { font: 500 30px/1 var(--sans); letter-spacing: -.022em; font-weight: 500; }
.vt .val b.warn { color: var(--amber); }
.vt .val b.empty { color: #C7CCD4; }
.vt .val .u { font: 400 10.5px var(--mono); color: var(--faint); margin-left: 3px; }
.vt .delta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 10.5px var(--mono); color: var(--faint); }
.vt .delta.warn { color: var(--amber); }
.tri-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--amber); }
.tri-dn { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--faint); }
.flatline { width: 9px; height: 2px; border-radius: 1px; background: #C7CCD4; }

.callout {
  display: flex; gap: 12px; background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: 12px; padding: 14px 15px; margin-top: 14px;
}
.callout > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--amber); margin-top: 5px; }
.callout .h { font: 500 13px/1.4 var(--sans); color: var(--amber-ink-2); }
.callout .p { font: 400 11.5px/1.5 var(--sans); color: var(--amber-ink); margin-top: 4px; }
.callout .acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.callout .acts .btn { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 12px; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button {
  height: 54px; border: 1px solid var(--hair); border-radius: 10px; background: #FAFBFC;
  font: 400 19px var(--mono); color: var(--ink);
}
.keypad button.fn { background: var(--chip); font-size: 16px; color: var(--ink-2); }
.spark { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.spark > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.spark .bar { width: 100%; border-radius: 4px; background: var(--hair-2); }
.spark .bar.mid { background: #E4E7EC; }
.spark .bar.hot { background: var(--amber); }
.spark span { font: 400 9.5px var(--mono); color: var(--faint); }
.spark span.hot { color: var(--amber-ink); }

/* ---------- check-in ---------- */
.q { background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; }
.q.inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.q.unanswered { border-style: dashed; border-color: #DDE1E7; opacity: .8; }
.q .num { font: 500 10.5px var(--mono); color: var(--faint-3); flex: none; }
.q .prompt { font: 500 14px var(--sans); }
.q.unanswered .prompt { font-weight: 400; color: var(--faint); }
.q .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt {
  height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid transparent;
  border-radius: 10px; background: var(--chip-2); color: var(--ink-3); font: 400 13px var(--sans);
}
.opt.on { background: var(--ink); color: #fff; font-weight: 500; }
.opt.on.amber { background: var(--amber); }
.followup { border-left: 2px solid #E1E5EA; padding-left: 14px; display: flex; flex-direction: column; gap: 11px; margin-top: 13px; }
.followup .flabel { font: 500 11px var(--sans); color: var(--muted); margin-bottom: 7px; }
.scale { display: flex; gap: 4px; flex-wrap: wrap; }
.scale button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: var(--chip-2); font: 400 12.5px var(--mono); color: var(--faint);
}
.scale button.on { background: var(--ink); color: #fff; font-weight: 500; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chips button {
  height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 0;
  border-radius: 8px; background: var(--chip-2); color: var(--ink-3); font: 400 12px var(--sans);
}
.chips button.on { background: var(--ink); color: #fff; font-weight: 500; }
.q textarea {
  width: 100%; background: #FAFBFC; border: 1px solid var(--hair-2); border-radius: 9px;
  padding: 10px 12px; font: 400 12.5px/1.55 var(--sans); color: var(--ink-2); resize: vertical; min-height: 44px; outline: none;
}
.qbars { margin-left: auto; display: flex; gap: 4px; }
.qbars i { width: 20px; height: 4px; border-radius: 2px; background: #E1E5EA; }
.qbars i.on { background: var(--ink); }

.flagcard { border: 1px solid var(--amber-line); background: var(--amber-bg-2); border-radius: 10px; padding: 11px 12px; }
.flagcard .h { font: 500 12.5px/1.4 var(--sans); color: var(--amber-ink-2); }
.flagcard .s { font: 400 11px/1.5 var(--sans); color: var(--amber-ink); margin-top: 3px; }
.flagcard .done-line { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.flagcard .done-line i {
  width: 18px; height: 18px; border-radius: 5px; background: var(--ink); flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 500 10px var(--sans);
}
.flagcard .done-line span { font: 400 11.5px var(--sans); color: var(--ink-2); }
.flagcard .acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.flagcard .acts .btn { height: 32px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; }

.signbox {
  border: 1px solid var(--hair); border-radius: 10px; height: 66px; display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 8px; background: #FAFBFC; margin-bottom: 8px;
}
.signbox div { width: 80%; border-bottom: 1px solid #DDE1E7; text-align: center; font: 400 16px 'Qurova', var(--sans); color: var(--ink-3); padding-bottom: 2px; }

/* ---------- schedule ---------- */
.metric { background: var(--paper); border: 1px solid var(--hair); border-radius: 11px; padding: 10px 14px; min-width: 112px; }
.metric .l { font: 500 10.5px var(--sans); color: var(--muted); margin-bottom: 6px; }
.metric .v { font: 500 22px/1 var(--sans); letter-spacing: -.022em; }
.metric .v.good { color: var(--green); }
.timeline-row { display: flex; align-items: center; margin-bottom: 10px; }
.timeline-row .nurse { width: 108px; flex: none; }
.timeline-row .nurse b { font: 500 12.5px var(--sans); display: block; }
.timeline-row .nurse span { font: 400 10px var(--mono); color: var(--faint); }
.blocks { flex: 1; position: relative; display: flex; gap: 2px; height: 44px; align-items: stretch; min-width: 0; }
.blk { border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 500 9px var(--mono); flex: none; }
.blk.done { background: var(--ink); color: #fff; }
.blk.todo { background: var(--paper); border: 1px solid #DDE1E7; color: var(--ink-2); }
.blk.flag { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.blk.plan { background: var(--violet-bg); border: 1px solid var(--violet-line); color: var(--violet-deep); }
.blk.brk { background: repeating-linear-gradient(135deg, var(--chip), var(--chip) 3px, #E8EBEF 3px, #E8EBEF 6px); color: var(--faint); font-weight: 400; }
.blk.open { flex: 1; border: 1px dashed #DDE1E7; color: var(--faint-3); font-weight: 400; background: transparent; }
.nowline { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--red); border-radius: 1px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair-3); font: 400 10.5px var(--sans); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; }

.card { background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; }
.card .ch { font: 500 12.5px var(--sans); margin-bottom: 9px; }
.steps01 { display: flex; flex-direction: column; gap: 8px; font: 400 11.5px/1.5 var(--sans); color: var(--ink-2); }
.steps01 > div { display: flex; gap: 9px; }
.steps01 .n { font: 500 10px var(--mono); color: var(--faint-3); padding-top: 2px; flex: none; }

/* ---------- forms (add resident, care plan) ---------- */
.field .flabel { font: 500 11px var(--sans); color: var(--muted); margin-bottom: 6px; }
.field .fbox {
  min-height: 46px; border: 1px solid #DDE1E7; border-radius: 10px; display: flex; align-items: center;
  padding: 0 13px; font: 400 14px var(--sans); gap: 8px; background: var(--paper);
}
.field .fbox input, .field .fbox select {
  border: 0; outline: 0; width: 100%; font: 400 14px var(--sans); background: transparent; color: var(--ink);
}
.field .fbox.focus { border: 2px solid var(--ink); padding: 0 12px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
.tag { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: 500 12px var(--sans); }
.tag.ghost { background: var(--chip-2); color: var(--ink-3); font-weight: 400; }
.tag.danger { background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red-ink); }
.tag.danger i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

.planitem { background: #FAFBFC; border: 1px solid var(--hair-2); border-radius: 8px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; }
.planitem i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); flex: none; }
.planitem span { font: 400 12.5px var(--sans); color: var(--ink-2); flex: 1; }
.planitem .cad { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; background: var(--violet-bg); font: 500 10.5px var(--sans); color: var(--violet-deep); flex: none; }

/* ---------- admin (dark) ---------- */
.adminwrap { flex: 1; display: flex; min-height: 100vh; }
.sidenav { width: 214px; flex: none; background: var(--d-panel); border-right: 1px solid var(--d-hair); display: flex; flex-direction: column; padding: 18px 0; }
.sidenav .brandrow { padding: 0 16px 18px; display: flex; align-items: center; gap: 9px; }
.sidenav .adm { height: 19px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 5px; background: rgba(255,255,255,.09); font: 600 9px var(--mono); letter-spacing: .07em; color: var(--d-accent); }
.navitems { padding: 0 10px; display: flex; flex-direction: column; gap: 1px; }
.navitems a {
  height: 36px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; gap: 10px;
  font: 400 13px var(--sans); color: var(--d-ink-3);
}
.navitems a i { width: 5px; height: 5px; border-radius: 50%; background: #3E444F; flex: none; }
.navitems a .cnt { margin-left: auto; font: 400 11px var(--mono); color: var(--d-muted); }
.navitems a.on { background: var(--d-raise); color: var(--d-ink); font-weight: 500; }
.navitems a.on i { background: var(--d-accent); }
.sidenote { padding: 0 16px; font: 400 11px/1.6 var(--sans); color: var(--d-muted); }
.sidefoot { margin-top: auto; padding: 12px 16px 0; border-top: 1px solid var(--d-hair); display: flex; align-items: center; gap: 9px; }
.sidefoot .avatar { width: 28px; height: 28px; background: #232830; color: var(--d-ink-2); font-size: 11px; }
.sidefoot b { font: 500 12px var(--sans); display: block; line-height: 1.25; }
.sidefoot span { font: 400 10.5px var(--mono); color: var(--d-muted); }

.adminmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adminbar { min-height: 58px; flex: none; border-bottom: 1px solid var(--d-hair); display: flex; align-items: center; padding: 8px 22px; gap: 12px; flex-wrap: wrap; }
.adminbar h1 { margin: 0; font: 500 20px/1 var(--sans); letter-spacing: -.015em; }
.adminbar .sub { font: 400 11px var(--mono); color: var(--d-muted); padding-top: 5px; }
.adminbar .right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.dbtn { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--d-ink); color: var(--d-bg); font: 500 12.5px var(--sans); }
.dbtn.line { background: transparent; border: 1px solid var(--d-hair-2); color: var(--d-ink-2); font-weight: 500; font-size: 12px; }
.dbtn.quiet { background: transparent; border: 1px solid var(--d-hair-2); color: var(--d-ink-3); font-weight: 400; font-size: 12px; }

.dcard { background: var(--d-card); border: 1px solid var(--d-hair); border-radius: 12px; }
.dstat { background: var(--d-card); border: 1px solid var(--d-hair); border-radius: 11px; padding: 12px 14px; }
.dstat .l { font: 500 10.5px var(--sans); color: var(--d-muted); margin-bottom: 7px; }
.dstat .v { font: 500 26px/1 var(--sans); letter-spacing: -.022em; }
.dstat .v.bad { color: var(--d-red); }
.dstat .s { font: 400 10.5px var(--mono); color: var(--d-muted); }

.dtable-head {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 38px;
  border-bottom: 1px solid var(--d-hair); font: 600 9.5px var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--d-faint);
}
.dtable-row { display: flex; align-items: center; gap: 14px; padding: 0 16px; min-height: 62px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dtable-row:last-child { border-bottom: 0; }
.dbar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.dbar i { display: block; height: 6px; border-radius: 3px; background: var(--d-accent); }
.dbar i.bad { background: var(--red); }
.dchip { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.07); font: 500 11px var(--sans); color: var(--d-ink-3); border: 0; }
.dchip.bad { background: var(--d-red-line); color: var(--d-red); }
.dalert { display: flex; align-items: center; gap: 12px; background: var(--d-red-bg); border: 1px solid var(--d-red-line); border-radius: 12px; padding: 13px 16px; }
.dalert > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--red); }
.dalert .h { font: 500 12.5px var(--sans); color: var(--d-red); }
.dalert .p { font: 400 11.5px/1.5 var(--sans); color: var(--d-red-2); margin-top: 2px; }

.rolechip { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: rgba(255,255,255,.08); font: 500 10.5px var(--sans); color: var(--d-ink-2); }
.rolechip.hi { background: rgba(182,177,244,.15); color: var(--d-accent); }
.trainchip { height: 20px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 5px; background: rgba(201,138,33,.16); font: 500 10px var(--sans); color: var(--d-amber); flex: none; }
.trainchip i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }

.toggle { width: 30px; height: 18px; flex: none; border-radius: 9px; background: #2B313A; display: flex; align-items: center; padding: 0 2px; border: 0; }
.toggle i { width: 14px; height: 14px; border-radius: 50%; background: var(--d-faint); transition: transform .12s ease; }
.toggle.on { background: var(--d-accent); }
.toggle.on i { background: var(--d-bg); transform: translateX(12px); }
.togglerow { display: flex; align-items: center; gap: 10px; }
.togglerow span { font: 400 12px var(--sans); color: var(--d-ink-2); }
.togglerow.off span { color: var(--d-muted); }
/* light-theme toggle */
.screen:not(.dark) .toggle { background: #D8DCE2; }
.screen:not(.dark) .toggle i { background: #fff; }
.screen:not(.dark) .toggle.on { background: var(--ink); }

.dmicrohead { font: 600 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--d-faint); margin-bottom: 9px; }
.dkv { display: flex; flex-direction: column; gap: 9px; font: 400 12px var(--sans); color: var(--d-ink-2); }
.dkv > div { display: flex; justify-content: space-between; gap: 8px; }
.dkv .k { color: var(--d-muted); }
.dkv .n { font: 500 12px var(--mono); }
.dpill { height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 8px; border: 1px solid var(--d-hair-2); font: 500 12px var(--mono); color: var(--d-ink); }

.qitem { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 10px; border-radius: 9px; background: var(--d-raise-2); border: 1px solid transparent; text-align: left; width: 100%; }
.qitem.on { background: var(--d-raise); border-color: rgba(182,177,244,.35); }
.qitem .grip { display: flex; flex-direction: column; gap: 2px; flex: none; }
.qitem .grip i { width: 9px; height: 1.5px; background: #3E444F; display: block; }
.qitem .qt { flex: 1; min-width: 0; }
.qitem .qt b { font: 400 11.5px/1.3 var(--sans); color: var(--d-ink-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qitem.on .qt b { font-weight: 500; color: var(--d-ink); }
.qitem .qt span { font: 400 9.5px var(--mono); color: var(--d-muted); }
.qitem .flagdot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }

.modal-scrim { position: fixed; inset: 0; background: rgba(10,12,14,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--paper); border-radius: 14px; padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.modal h3 { margin: 0 0 8px; font: 500 16px var(--sans); }
.modal p { margin: 0 0 16px; font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 18px;
  font: 500 12.5px var(--sans); box-shadow: 0 8px 26px rgba(0,0,0,.28); z-index: 60;
  display: flex; align-items: center; gap: 10px;
}
.toast.hide { opacity: 0; transition: opacity .4s ease; }
.srcbadge { font: 400 10px var(--mono); color: var(--faint); }
.screen.dark .srcbadge { color: var(--d-faint); }

@media (max-width: 980px) {
  .rrow .vitcol { display: none; }
  .vpanel.left { display: none; }
  .sidenav { width: 64px; }
  .sidenav .brandrow .brand-name, .sidenav .adm, .navitems a span.t, .navitems a .cnt,
  .sidenote, .sidefoot .nm { display: none; }
}