html {
  forced-color-adjust: none;
  font-family: "Segoe UI", Candara, sans-serif;
}

html[data-theme="light"],
html.theme-light {
  color-scheme: only light;
  background-color: #e7e3d9;
  color: #24312c;
  --paper: #e7e3d9;
  --ink: #24312c;
  --muted: #4e5b54;
  --line: #d5d0c4;
  --card: #f3f0e8;
  --teal: #0b6a56;
  --teal-dark: #084e3e;
  --on-accent: #ffffff;
  --amber: #8a7048;
  --rose: #8d6161;
  --ok: #e4ece7;
  --ok-ink: #1d4a3d;
  --wait: #efe6d4;
  --wait-ink: #5c4728;
  --off: #f1e6e2;
  --off-ink: #6d3030;
  --header: rgba(243, 240, 232, 0.94);
  --input: #f7f5ef;
  --dropdown: #f7f5ef;
  --stat: #e9e4da;
  --shadow: 0 14px 32px rgba(72, 66, 54, 0.07);
  --tone-grey: #e3dfd4;
  --tone-grey-line: #cbc4b6;
  --tone-arrived: #efe7d0;
  --tone-arrived-line: #8ea0b3;
  --tone-green: #e3eee7;
  --tone-green-line: #7ea392;
  --tone-red: #f3e8e4;
  --tone-red-line: #c9a39e;
  --timer: #f7f5ef;
  --overlay: rgba(72, 66, 54, 0.28);
  --call: #0c7a48;
  --danger: #9d2424;
  --danger-ink: #fff8f6;
  --accent-shadow: rgba(11, 106, 86, 0.28);
  --glow: rgba(125, 160, 140, 0.18);
}

html[data-theme="dark"],
html.theme-dark {
  color-scheme: only dark;
  background-color: #10161b;
  color: #e7f3ee;
  --paper: #10161b;
  --ink: #e7f3ee;
  --muted: #b7c6be;
  --line: #2d3940;
  --card: #182127;
  --teal: #5ef2dc;
  --teal-dark: #bffff4;
  --on-accent: #04211c;
  --amber: #e6cb98;
  --rose: #f0b8b8;
  --ok: #1a3330;
  --ok-ink: #d8fff6;
  --wait: #332c1c;
  --wait-ink: #ffe7bf;
  --off: #3a2628;
  --off-ink: #ffd4d4;
  --header: rgba(16, 22, 27, 0.92);
  --input: #121a1f;
  --dropdown: #1d272e;
  --stat: #121a20;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  --tone-grey: #1b242b;
  --tone-grey-line: #36434b;
  --tone-arrived: #243044;
  --tone-arrived-line: #95b0d4;
  --tone-green: #16302b;
  --tone-green-line: #7dcec2;
  --tone-red: #352428;
  --tone-red-line: #e3b0b0;
  --timer: #10181d;
  --overlay: rgba(5, 8, 10, 0.66);
  --call: #5ef2dc;
  --danger: #ff8b8b;
  --danger-ink: #2a0808;
  --accent-shadow: rgba(94, 242, 220, 0.16);
  --glow: rgba(94, 242, 220, 0.18);
}

html[data-palette="sapphire"][data-theme="light"] {
  background-color: #e7edf4;
  color: #1c2836;
  --paper: #e7edf4; --ink: #1c2836; --muted: #4d5d72; --line: #d3dbe6; --card: #f3f6fa;
  --teal: #1d4f8a; --teal-dark: #163c6b; --on-accent: #f5f8fc;
  --amber: #7d6a3e; --rose: #8d6168;
  --ok: #e3ebf4; --ok-ink: #1d3a5c; --wait: #efe6d4; --wait-ink: #5c4728; --off: #f3e6e8; --off-ink: #6d3038;
  --header: rgba(243, 246, 250, 0.94); --input: #f7f9fc; --dropdown: #f7f9fc; --stat: #e7eef6;
  --shadow: 0 14px 32px rgba(40, 58, 84, 0.08);
  --tone-grey: #e4e9f0; --tone-grey-line: #c5d0de; --tone-arrived: #e7eef8; --tone-arrived-line: #8ea6c8;
  --tone-green: #e4eef6; --tone-green-line: #7f9cbc; --tone-red: #f6e8ea; --tone-red-line: #d2aeb4;
  --timer: #f7f9fc; --overlay: rgba(28, 40, 54, 0.28); --call: #1d4f8a; --danger: #9d2430; --danger-ink: #fff8f6;
  --accent-shadow: rgba(29, 79, 138, 0.28); --glow: rgba(90, 130, 180, 0.2);
}
html[data-palette="sapphire"][data-theme="dark"] {
  background-color: #0e1520; color: #e7eef8;
  --paper: #0e1520; --ink: #e7eef8; --muted: #b7c4d6; --line: #2a384c; --card: #172232;
  --teal: #8eb7f0; --teal-dark: #d6e6ff; --on-accent: #0c1828;
  --amber: #e6cb98; --rose: #f0b8c0;
  --ok: #1a2c40; --ok-ink: #d6e8ff; --wait: #332c1c; --wait-ink: #ffe7bf; --off: #3a2428; --off-ink: #ffd4d8;
  --header: rgba(14, 21, 32, 0.92); --input: #101826; --dropdown: #1b2838; --stat: #101a28;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
  --tone-grey: #17202c; --tone-grey-line: #33445c; --tone-arrived: #1c2c44; --tone-arrived-line: #95b0d4;
  --tone-green: #16283a; --tone-green-line: #8eb7f0; --tone-red: #351f28; --tone-red-line: #e3b0b8;
  --timer: #101826; --overlay: rgba(5, 8, 12, 0.66); --call: #8eb7f0; --danger: #ff8b96; --danger-ink: #2a080c;
  --accent-shadow: rgba(142, 183, 240, 0.18); --glow: rgba(142, 183, 240, 0.18);
}
html[data-palette="crimson"][data-theme="light"] {
  background-color: #f3ebe8; color: #3a2428;
  --paper: #f3ebe8; --ink: #3a2428; --muted: #6e5558; --line: #e4d4d0; --card: #f8f3f1;
  --teal: #8c3a45; --teal-dark: #6e2c36; --on-accent: #fff8f7;
  --amber: #8a6840; --rose: #8d454c;
  --ok: #f0e4e2; --ok-ink: #5c2430; --wait: #f3e6d4; --wait-ink: #5c4728; --off: #f6e0e2; --off-ink: #6d2430;
  --header: rgba(248, 243, 241, 0.94); --input: #fbf7f6; --dropdown: #fbf7f6; --stat: #f0e4e0;
  --shadow: 0 14px 32px rgba(90, 50, 54, 0.08);
  --tone-grey: #efe4e0; --tone-grey-line: #d8c4c0; --tone-arrived: #f6ebe4; --tone-arrived-line: #c4989c;
  --tone-green: #f3e6e4; --tone-green-line: #c48990; --tone-red: #f8e4e4; --tone-red-line: #d7a0a4;
  --timer: #fbf7f6; --overlay: rgba(58, 36, 40, 0.28); --call: #8c3a45; --danger: #8d242c; --danger-ink: #fff8f6;
  --accent-shadow: rgba(140, 58, 69, 0.26); --glow: rgba(180, 110, 120, 0.2);
}
html[data-palette="crimson"][data-theme="dark"] {
  background-color: #1a1214; color: #f6e8ea;
  --paper: #1a1214; --ink: #f6e8ea; --muted: #d2b8bc; --line: #3a282c; --card: #2a1c20;
  --teal: #e7a0ab; --teal-dark: #ffd4da; --on-accent: #2a1014;
  --amber: #e6cb98; --rose: #ffc0c6;
  --ok: #3a2428; --ok-ink: #ffd8de; --wait: #33281c; --wait-ink: #ffe7bf; --off: #3a2226; --off-ink: #ffd4d8;
  --header: rgba(26, 18, 20, 0.92); --input: #140e10; --dropdown: #24181c; --stat: #201418;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --tone-grey: #24181c; --tone-grey-line: #4a3438; --tone-arrived: #342028; --tone-arrived-line: #e3b0b8;
  --tone-green: #2c1a20; --tone-green-line: #e7a0ab; --tone-red: #3a2024; --tone-red-line: #f0b8c0;
  --timer: #140e10; --overlay: rgba(8, 4, 6, 0.66); --call: #e7a0ab; --danger: #ff8b96; --danger-ink: #2a080c;
  --accent-shadow: rgba(231, 160, 171, 0.16); --glow: rgba(231, 160, 171, 0.16);
}
html[data-palette="slate"][data-theme="light"] {
  background-color: #e8e9ec; color: #24282e;
  --paper: #e8e9ec; --ink: #24282e; --muted: #5c6370; --line: #d5d7dc; --card: #f4f5f6;
  --teal: #3d4654; --teal-dark: #2c3440; --on-accent: #f7f8f9;
  --amber: #7a6a48; --rose: #7a5c5c;
  --ok: #e6e8ec; --ok-ink: #2c3440; --wait: #efe6d4; --wait-ink: #5c4728; --off: #f1e6e4; --off-ink: #6d3030;
  --header: rgba(244, 245, 246, 0.94); --input: #f7f8f9; --dropdown: #f7f8f9; --stat: #e6e8ec;
  --shadow: 0 14px 32px rgba(40, 44, 52, 0.08);
  --tone-grey: #e4e6ea; --tone-grey-line: #c8ccd4; --tone-arrived: #e8ebf0; --tone-arrived-line: #9aa3b0;
  --tone-green: #e6e9ee; --tone-green-line: #8d97a6; --tone-red: #f3e8e6; --tone-red-line: #c9a8a4;
  --timer: #f7f8f9; --overlay: rgba(36, 40, 46, 0.28); --call: #3d4654; --danger: #8d3030; --danger-ink: #fff8f6;
  --accent-shadow: rgba(61, 70, 84, 0.24); --glow: rgba(120, 130, 145, 0.18);
}
html[data-palette="slate"][data-theme="dark"] {
  background-color: #121417; color: #eceff3;
  --paper: #121417; --ink: #eceff3; --muted: #b7bdc6; --line: #2c3138; --card: #1c1f24;
  --teal: #d5d8de; --teal-dark: #f4f6f8; --on-accent: #16181c;
  --amber: #e6cb98; --rose: #f0c0c0;
  --ok: #24282e; --ok-ink: #e8eef6; --wait: #2e2a20; --wait-ink: #ffe7bf; --off: #322426; --off-ink: #ffd4d4;
  --header: rgba(18, 20, 23, 0.92); --input: #101216; --dropdown: #22262c; --stat: #16191e;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  --tone-grey: #1a1d22; --tone-grey-line: #3a4048; --tone-arrived: #22262e; --tone-arrived-line: #b0b8c4;
  --tone-green: #1c2128; --tone-green-line: #d5d8de; --tone-red: #2c2224; --tone-red-line: #e3b0b0;
  --timer: #101216; --overlay: rgba(4, 5, 6, 0.68); --call: #d5d8de; --danger: #ff9a9a; --danger-ink: #2a0808;
  --accent-shadow: rgba(213, 216, 222, 0.12); --glow: rgba(213, 216, 222, 0.12);
}
html[data-palette="nordic"][data-theme="light"] {
  background-color: #e5eef0; color: #1a2e32;
  --paper: #e5eef0; --ink: #1a2e32; --muted: #4d666c; --line: #cfe0e3; --card: #f2f7f8;
  --teal: #0e6e78; --teal-dark: #0a555c; --on-accent: #f4fbfc;
  --amber: #7d6a40; --rose: #8a5e64;
  --ok: #e2f0f2; --ok-ink: #0e4a52; --wait: #efe6d4; --wait-ink: #5c4728; --off: #f3e6e6; --off-ink: #6d3030;
  --header: rgba(242, 247, 248, 0.94); --input: #f7fbfb; --dropdown: #f7fbfb; --stat: #e3eef0;
  --shadow: 0 14px 32px rgba(20, 70, 78, 0.08);
  --tone-grey: #e2ebed; --tone-grey-line: #c2d4d8; --tone-arrived: #e4f2f4; --tone-arrived-line: #7eb0b8;
  --tone-green: #e2f3f2; --tone-green-line: #6eaea8; --tone-red: #f6e8e6; --tone-red-line: #d2a8a4;
  --timer: #f7fbfb; --overlay: rgba(20, 46, 50, 0.28); --call: #0e6e78; --danger: #9d3030; --danger-ink: #fff8f6;
  --accent-shadow: rgba(14, 110, 120, 0.26); --glow: rgba(80, 170, 180, 0.2);
}
html[data-palette="nordic"][data-theme="dark"] {
  background-color: #0d1719; color: #e5f6f8;
  --paper: #0d1719; --ink: #e5f6f8; --muted: #b7d0d4; --line: #24383c; --card: #152226;
  --teal: #7ee0ea; --teal-dark: #d8fbff; --on-accent: #062226;
  --amber: #e6cb98; --rose: #f0b8b8;
  --ok: #143236; --ok-ink: #d8fbff; --wait: #332c1c; --wait-ink: #ffe7bf; --off: #3a2428; --off-ink: #ffd4d4;
  --header: rgba(13, 23, 25, 0.92); --input: #0c1416; --dropdown: #1a2a2e; --stat: #101c20;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --tone-grey: #152024; --tone-grey-line: #345054; --tone-arrived: #143038; --tone-arrived-line: #7ee0ea;
  --tone-green: #123034; --tone-green-line: #7ee0ea; --tone-red: #351f24; --tone-red-line: #e3b0b0;
  --timer: #0c1416; --overlay: rgba(4, 8, 10, 0.66); --call: #7ee0ea; --danger: #ff8b8b; --danger-ink: #2a0808;
  --accent-shadow: rgba(126, 224, 234, 0.16); --glow: rgba(126, 224, 234, 0.16);
}
html[data-palette="ochre"][data-theme="light"] {
  background-color: #f1eadc; color: #3a2e1c;
  --paper: #f1eadc; --ink: #3a2e1c; --muted: #6e5e48; --line: #e2d6c2; --card: #f7f3ea;
  --teal: #8a5a12; --teal-dark: #6d4610; --on-accent: #fffaf2;
  --amber: #8a5a12; --rose: #8d5550;
  --ok: #f0e6d4; --ok-ink: #5c3e14; --wait: #f6e6c4; --wait-ink: #5c4214; --off: #f6e4dc; --off-ink: #6d3030;
  --header: rgba(247, 243, 234, 0.94); --input: #fbf8f2; --dropdown: #fbf8f2; --stat: #efe4d2;
  --shadow: 0 14px 32px rgba(80, 56, 24, 0.08);
  --tone-grey: #efe6d6; --tone-grey-line: #d8c8ae; --tone-arrived: #f6ecd4; --tone-arrived-line: #c4a36a;
  --tone-green: #f3ead4; --tone-green-line: #c4a05a; --tone-red: #f6e6e0; --tone-red-line: #d2a898;
  --timer: #fbf8f2; --overlay: rgba(58, 46, 28, 0.28); --call: #8a5a12; --danger: #9d3030; --danger-ink: #fff8f6;
  --accent-shadow: rgba(138, 90, 18, 0.26); --glow: rgba(180, 140, 60, 0.2);
}
html[data-palette="ochre"][data-theme="dark"] {
  background-color: #16110c; color: #f6efe4;
  --paper: #16110c; --ink: #f6efe4; --muted: #d2c2aa; --line: #3a2e22; --card: #241c14;
  --teal: #e6b15a; --teal-dark: #ffe4b0; --on-accent: #24180a;
  --amber: #e6b15a; --rose: #f0c0b0;
  --ok: #2e2416; --ok-ink: #ffe4b0; --wait: #332818; --wait-ink: #ffe7bf; --off: #3a2420; --off-ink: #ffd4cc;
  --header: rgba(22, 17, 12, 0.92); --input: #120e0a; --dropdown: #2a2016; --stat: #1c1610;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  --tone-grey: #1e1812; --tone-grey-line: #4a3c2c; --tone-arrived: #2e2416; --tone-arrived-line: #e6b15a;
  --tone-green: #2a2014; --tone-green-line: #e6b15a; --tone-red: #321e18; --tone-red-line: #f0c0b0;
  --timer: #120e0a; --overlay: rgba(8, 6, 4, 0.68); --call: #e6b15a; --danger: #ff9a8a; --danger-ink: #2a1008;
  --accent-shadow: rgba(230, 177, 90, 0.16); --glow: rgba(230, 177, 90, 0.16);
}
html[data-palette="amethyst"][data-theme="light"] {
  background-color: #eee8f2; color: #2c2236;
  --paper: #eee8f2; --ink: #2c2236; --muted: #65586e; --line: #ddd2e6; --card: #f6f3f8;
  --teal: #6a3d86; --teal-dark: #532f69; --on-accent: #fbf8fd;
  --amber: #7d6840; --rose: #8a5870;
  --ok: #ece4f4; --ok-ink: #3e2458; --wait: #efe6d4; --wait-ink: #5c4728; --off: #f6e4ea; --off-ink: #6d3048;
  --header: rgba(246, 243, 248, 0.94); --input: #faf8fc; --dropdown: #faf8fc; --stat: #ebe4f2;
  --shadow: 0 14px 32px rgba(60, 40, 80, 0.08);
  --tone-grey: #e8e2ee; --tone-grey-line: #d0c4dc; --tone-arrived: #efe6f6; --tone-arrived-line: #b498c8;
  --tone-green: #ece4f4; --tone-green-line: #a888c0; --tone-red: #f6e6ec; --tone-red-line: #d2a8b8;
  --timer: #faf8fc; --overlay: rgba(44, 34, 54, 0.28); --call: #6a3d86; --danger: #9d3050; --danger-ink: #fff8f8;
  --accent-shadow: rgba(106, 61, 134, 0.26); --glow: rgba(150, 110, 180, 0.2);
}
html[data-palette="amethyst"][data-theme="dark"] {
  background-color: #14101a; color: #f4eafc;
  --paper: #14101a; --ink: #f4eafc; --muted: #d0c0dc; --line: #32283e; --card: #221a2c;
  --teal: #d2b0ea; --teal-dark: #f2e4ff; --on-accent: #1a1022;
  --amber: #e6cb98; --rose: #f0c0d4;
  --ok: #2a2036; --ok-ink: #f2e4ff; --wait: #332c1c; --wait-ink: #ffe7bf; --off: #3a2430; --off-ink: #ffd4e4;
  --header: rgba(20, 16, 26, 0.92); --input: #100c16; --dropdown: #2a2034; --stat: #1a1422;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  --tone-grey: #1c1624; --tone-grey-line: #463854; --tone-arrived: #2a2038; --tone-arrived-line: #d2b0ea;
  --tone-green: #241c32; --tone-green-line: #d2b0ea; --tone-red: #321c28; --tone-red-line: #f0c0d4;
  --timer: #100c16; --overlay: rgba(6, 4, 10, 0.68); --call: #d2b0ea; --danger: #ff9ac0; --danger-ink: #2a0818;
  --accent-shadow: rgba(210, 176, 234, 0.16); --glow: rgba(210, 176, 234, 0.16);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--glow), transparent 28rem),
    var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, var(--glow), transparent 24rem),
    var(--paper);
}

html[data-scene-bg="on"] body[data-scene],
html[data-theme="dark"][data-scene-bg="on"] body[data-scene] {
  background-color: #10201b;
  background-image: var(--scene-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.appearance-row {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.appearance-row label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
}

.appearance-row select,
.surface-select,
.scene-select {
  width: 100%;
  min-width: 0;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 0.4rem; }
button, input, select, textarea, a {
  font: inherit;
  color: var(--ink);
  forced-color-adjust: none;
}
label { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 650; }
.room-pair { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.45rem; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background-color: var(--input);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='1.2' y='1.2' width='19.6' height='19.6' rx='6' fill='%23f7f5ef' stroke='%23d5d0c6'/%3E%3Cpath d='M6.4 9.1 11 13.4 15.6 9.1' fill='none' stroke='%235c564c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.35rem 1.35rem;
}
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='1.2' y='1.2' width='19.6' height='19.6' rx='6' fill='%23222a32' stroke='%233a4550'/%3E%3Cpath d='M6.4 9.1 11 13.4 15.6 9.1' fill='none' stroke='%23d5dbe0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--on-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 30%, white), color-mix(in srgb, var(--paper) 75%, var(--line)));
  box-shadow:
    4px 4px 9px color-mix(in srgb, var(--ink) 14%, transparent),
    -3px -3px 8px color-mix(in srgb, white 78%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 45%, transparent);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
input[type="checkbox"]:checked {
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 70%, white), color-mix(in srgb, var(--teal) 64%, black));
  box-shadow:
    5px 5px 11px color-mix(in srgb, var(--ink) 18%, transparent),
    -3px -3px 8px color-mix(in srgb, white 50%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 28%, transparent);
  transform: translateY(-1px);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 0.32rem;
  height: 0.58rem;
  border: solid currentColor;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg) translate(-1px, -2px);
}
input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
html[data-theme="dark"] input[type="checkbox"] {
  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.4), -2px -2px 6px rgba(255, 255, 255, 0.05), inset 1px 1px 1px rgba(255, 255, 255, 0.08);
}
textarea { resize: vertical; }
button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--stat) 42%, white), color-mix(in srgb, var(--stat) 78%, var(--ink)));
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--ink) 18%, transparent),
    -4px -4px 12px color-mix(in srgb, white 72%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 42%, transparent);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  opacity: 1;
}
button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow:
    8px 9px 16px color-mix(in srgb, var(--ink) 22%, transparent),
    -4px -4px 12px color-mix(in srgb, white 72%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 48%, transparent);
}
button:not(:disabled):active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 7px color-mix(in srgb, var(--ink) 28%, transparent),
    inset -2px -2px 5px color-mix(in srgb, white 22%, transparent);
}
button:disabled,
button:disabled:hover,
button:disabled:active {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: auto;
}
#hover-tip {
  position: fixed;
  z-index: 90;
  max-width: 15rem;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  background: #24312c;
  color: #f7f5ef;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(36, 49, 44, 0.22);
}
#hover-tip[hidden] { display: none; }
html[data-theme="dark"] #hover-tip {
  background: #f3f0e8;
  color: #182127;
}
.primary,
.primary:hover,
.primary:active,
.primary:focus-visible {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 68%, white), color-mix(in srgb, var(--teal) 72%, black));
  box-shadow:
    6px 6px 14px color-mix(in srgb, var(--teal) 28%, transparent),
    -4px -4px 12px color-mix(in srgb, white 55%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 32%, transparent);
  opacity: 1;
}
.primary:hover,
.primary:active,
.primary:focus-visible {
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal-dark) 55%, white), color-mix(in srgb, var(--teal-dark) 78%, black));
}
.primary:disabled,
.primary:disabled:hover { box-shadow: none; transform: none; }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .nav-button.is-active {
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.45),
    -3px -3px 8px rgba(255, 255, 255, 0.06),
    inset 1px 1px 1px rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] button:not(.primary),
html[data-theme="dark"] button:not(.primary):hover,
html[data-theme="dark"] button:not(.primary):active,
html[data-theme="dark"] .danger,
html[data-theme="dark"] .danger:hover,
html[data-theme="dark"] .danger:active,
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .ghost:hover,
html[data-theme="dark"] .call,
html[data-theme="dark"] .download-link {
  box-shadow: none;
}
html[data-theme="dark"] .primary:active {
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.55), inset -2px -2px 5px rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] #close-shift,
html[data-theme="light"] #close-shift:hover,
html[data-theme="light"] #close-shift:active,
html[data-theme="light"] #open-reset,
html[data-theme="light"] #open-reset:hover,
html[data-theme="light"] #open-reset:active,
#show-doctor-form,
#show-doctor-form:hover,
#show-doctor-form:active,
#doctor-filter-clear,
#doctor-filter-clear:hover,
#doctor-filter-clear:active,
html[data-theme="dark"] #show-doctor-form,
html[data-theme="dark"] #show-doctor-form:hover,
html[data-theme="dark"] #show-doctor-form:active,
html[data-theme="dark"] #doctor-filter-clear,
html[data-theme="dark"] #doctor-filter-clear:hover,
html[data-theme="dark"] #doctor-filter-clear:active {
  box-shadow: none;
  transform: none;
}
.danger,
.danger:hover,
.danger:active,
.danger:focus-visible {
  color: var(--danger-ink);
  border-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 62%, white), color-mix(in srgb, var(--danger) 78%, black));
  opacity: 1;
}
.danger:hover,
.danger:active,
.danger:focus-visible { filter: none; }
.call,
.call:hover,
.call:active,
.call:focus-visible {
  color: var(--on-accent);
  border-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--call) 62%, white), color-mix(in srgb, var(--call) 78%, black));
  opacity: 1;
}
.call:hover,
.call:active,
.call:focus-visible { background: linear-gradient(145deg, color-mix(in srgb, var(--teal-dark) 55%, white), color-mix(in srgb, var(--teal-dark) 80%, black)); }
.ghost {
  color: var(--ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--stat) 42%, white), color-mix(in srgb, var(--stat) 78%, var(--ink)));
}
.ghost:hover,
.ghost:active,
.ghost:focus-visible {
  background-color: var(--stat);
  color: var(--ink);
  border-color: var(--teal);
  opacity: 1;
}
.text-button { background-color: transparent; color: var(--teal); padding-left: 0; }
.text-button:hover,
.text-button:active { color: var(--teal-dark); opacity: 1; }
.company-mark {
  display: block;
  height: 44px;
  width: auto;
  max-width: 140px;
  margin: 0 0 0.85rem;
  justify-self: start;
  object-fit: contain;
}
.company-mark-rail { height: 36px; margin: 0 0 0.45rem; }
.eyebrow {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--teal);
  font-weight: 700;
}
.hint { color: var(--muted); margin: 0.25rem 0 0; }
.banner, .note-banner {
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
}
.banner { background: var(--off); color: var(--off-ink); }
.note-banner { background: var(--wait); color: var(--wait-ink); }

.auth-layout { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card, .panel, .opd-card, .manage-card, .doctor-bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.auth-card { width: min(440px, 100%); padding: 1.6rem; }
.auth-card form, .panel form, .panel { display: grid; gap: 0.8rem; }
.panel { padding: 1rem 1.1rem 1.15rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  height: 4.25rem;
  min-height: 4.25rem;
  padding: 0 1.1rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--teal) 18%, transparent), transparent 26rem),
    var(--header);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  box-shadow: 0 10px 28px rgba(20, 28, 24, 0.06);
  backdrop-filter: blur(10px);
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 2.5rem;
  flex: 1 1 auto;
}
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  flex: 0 0 auto;
  color: var(--muted);
}
.brand-logo img {
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.logo-placeholder {
  width: 38px;
  height: 38px;
  display: block;
}
.brand-logo.has-logo .logo-placeholder {
  display: none !important;
}
.brand {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}
.nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
}
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  border-radius: 14px;
  padding: 0.48rem 0.72rem;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  background: linear-gradient(145deg, color-mix(in srgb, var(--stat) 42%, white), color-mix(in srgb, var(--stat) 78%, var(--ink)));
  box-shadow:
    4px 4px 10px color-mix(in srgb, var(--ink) 14%, transparent),
    -3px -3px 8px color-mix(in srgb, white 55%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 35%, transparent);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.nav-button:hover {
  transform: translateY(-1px);
}
.nav-button.is-active {
  animation: nav-settle 240ms ease;
}
@keyframes nav-settle {
  from { transform: translateY(3px); opacity: 0.7; }
  to { transform: none; opacity: 1; }
}
a.nav-button:hover,
a.nav-button:active,
a.nav-button:focus-visible,
.more-button:hover,
.more-button:focus-visible {
  text-decoration: none;
  color: var(--ink);
  opacity: 1;
}
.nav-button.is-active,
.nav-button.is-active:hover,
.nav-button.is-active:active,
.nav-button.is-active:focus-visible,
html[data-theme="light"] .nav-button.is-active,
html[data-theme="light"] .nav-button.is-active:hover,
html[data-theme="light"] .nav-button.is-active:focus-visible,
html[data-theme="dark"] .nav-button.is-active,
html[data-theme="dark"] .nav-button.is-active:hover,
html[data-theme="dark"] .nav-button.is-active:active,
html[data-theme="dark"] .nav-button.is-active:focus-visible {
  color: var(--on-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 68%, white), color-mix(in srgb, var(--teal) 72%, black));
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    4px 4px 10px color-mix(in srgb, var(--teal) 30%, transparent),
    inset 1px 1px 1px color-mix(in srgb, white 28%, transparent);
  text-decoration: none;
  opacity: 1;
}
.more-wrap { position: relative; flex: 0 0 auto; }
.more-caret { margin-left: 0.28rem; font-size: 0.78rem; line-height: 1; }
.more-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 11.5rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(20, 28, 24, 0.12);
  z-index: 45;
}
html[data-theme="light"] .more-menu {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.9);
}
html[data-theme="dark"] .more-menu {
  background: rgba(22, 28, 34, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
}
.more-menu .nav-button { width: 100%; justify-content: flex-start; }
.header-actions { margin-left: 0.45rem; display: flex; align-items: center; flex-wrap: nowrap; gap: 0.55rem; flex: 0 0 auto; }
.desk-menu { display: none; }
.currency-picker { margin: 0; }
.currency-picker select,
.billing-tools select,
.token-form [data-currency-select] {
  min-width: 6.2rem;
  width: auto;
}
.billing-tools { display: flex; align-items: end; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }
.billing-tools label { min-width: 8rem; }
.billing-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.billing-metrics .metric-card strong { font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.billing-metrics .hint { margin: 0.35rem 0 0; }
.walkin-button { font-weight: 800; padding: 0.7rem 1rem; white-space: nowrap; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.metric-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.9rem 1rem;
}
.metric-card span { color: var(--muted); font-size: 0.92rem; }
.metric-card strong { display: block; margin-top: 0.3rem; font-size: 1.45rem; }
.profile-wrap { position: relative; }
.avatar {
  width: 2.55rem;
  height: 2.55rem;
  min-width: 2.55rem;
  padding: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--on-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}
.profile-avatar { width: 3rem; height: 3rem; min-width: 3rem; }
.profile-drawer {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(380px, calc(100vw - 1.25rem));
  max-height: min(78vh, 760px);
  overflow: auto;
  background: var(--dropdown);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 1rem 1.05rem 1.1rem;
  display: grid;
  gap: 0.8rem;
  z-index: 50;
}
.drawer-head, .profile-identity { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.profile-identity { justify-content: flex-start; }
.profile-identity h2 { font-size: 1.05rem; }
.profile-identity p, .profile-drawer .hint { margin: 0.12rem 0; }
#profile-role { color: var(--teal); font-weight: 700; font-size: 0.86rem; }
#profile-email { color: var(--muted); overflow-wrap: anywhere; }
.icon-button { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; }
.brand-form { display: grid; gap: 0.7rem; }
.logo-drop {
  display: grid;
  gap: 0.25rem;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 0.75rem 0.8rem;
  background: color-mix(in srgb, var(--stat) 70%, transparent);
  cursor: pointer;
}
.logo-drop.is-over { border-color: var(--teal); background: var(--stat); }
.logo-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.theme-panel { display: grid; gap: 0.65rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.swatch {
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.swatch.is-active { border-color: var(--ink); }
.swatch[data-palette="emerald"] { background: #0b6a56; }
.swatch[data-palette="sapphire"] { background: #1d4f8a; }
.swatch[data-palette="crimson"] { background: #8c3a45; }
.swatch[data-palette="slate"] { background: #3d4654; }
.swatch[data-palette="nordic"] { background: #0e6e78; }
.swatch[data-palette="ochre"] { background: #8a5a12; }
.swatch[data-palette="amethyst"] { background: #6a3d86; }
.dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(320px, 80vw);
  background: var(--dropdown);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
  z-index: 40;
}

.page { padding: 1.2rem clamp(1rem, 2vw, 2rem) 3rem; }
.section-head, .row, .row-actions, .doctor-bar, .identity {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}
.section-head { align-items: end; margin-bottom: 0.9rem; }
.identity { justify-content: flex-start; }
.stack { display: grid; gap: 0.75rem; }
.doctor-bar { padding: 0.9rem 1rem; }
.doctor-bar h3, .manage-card h3 { margin: 0; font-size: 1.05rem; }
.doctor-meta { display: block; color: var(--muted); margin-top: 0.2rem; }

.badge, .pill {
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  background: var(--stat);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  width: fit-content;
}
.badge.is-on, .pill.is-ok { background: var(--ok); color: var(--ok-ink); }
.badge.is-wait, .pill.is-wait { background: var(--wait); color: var(--wait-ink); }
.badge.is-off, .pill.is-bad { background: var(--off); color: var(--off-ink); }

.opd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.opd-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.opd-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opd-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layout-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.layout-switch span,
.layout-switch button,
.layout-switch button:hover,
.layout-switch button:active,
.layout-switch button:focus-visible {
  box-shadow: none;
  transform: none;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.layout-switch button.is-active,
.layout-switch button.is-active:hover,
.layout-switch button.is-active:active {
  background: var(--teal);
  color: var(--on-accent);
  border-color: var(--teal);
  box-shadow: none;
  transform: none;
}
.section-head h2,
.section-head .hint {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.28rem 0.7rem;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.section-head .hint { margin-top: 0.35rem; }
.opd-grid.is-compact .opd-stats,
.opd-grid.is-compact .opd-spec,
.opd-grid.is-compact .opd-meta,
.opd-grid.is-compact .opd-actions .ghost { display: none; }
.opd-grid.is-compact .opd-card { padding: 0.75rem 0.85rem; gap: 0.55rem; }
.opd-grid.is-compact .avatar-lg { width: 2.15rem; height: 2.15rem; font-size: 0.72rem; }
.opd-grid.is-compact .token-value { font-size: 2.1rem; }
.opd-card {
  padding: 1rem 1rem 0.9rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  border-width: 1px;
  border-left-width: 4px;
  background: var(--card);
  container-type: inline-size;
  container-name: opd;
}
.opd-card.tone-grey { border-left-color: var(--tone-grey-line); }
.opd-card.tone-arrived { border-left-color: var(--tone-arrived-line); }
.opd-card.tone-green { border-left-color: var(--tone-green-line); }
.opd-card.tone-red { border-left-color: var(--tone-red-line); }
.opd-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}
.opd-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
}
.opd-id { min-width: 0; }
.opd-kicker {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 650;
}
.opd-name {
  margin: 0;
  font-size: clamp(1.15rem, 4cqi, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.opd-spec {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opd-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
}
.opd-meta p {
  margin: 0;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 12px;
  background: var(--stat);
  border: 1px solid var(--line);
}
.opd-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.opd-meta strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opd-live { display: grid; gap: 0.5rem; }
.opd-serving,
.opd-closed {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--teal) 8%, var(--stat));
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
}
.opd-closed { color: var(--muted); font-weight: 650; }
.opd-serving p { margin: 0; }
.token-value {
  color: var(--teal);
  font-size: clamp(4.4rem, 7vw, 6rem);
  line-height: 0.86;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  margin: 0.1rem 0 0;
  letter-spacing: -0.04em;
}
html[data-theme="dark"] .token-value {
  color: var(--teal);
  text-shadow: 0 0 28px var(--glow);
}
.serving-line {
  margin: 0;
  color: var(--ink);
  font-weight: 750;
  font-size: clamp(1.15rem, 4.2cqi, 1.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.serving-status,
.in-room-line {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
}
.in-room-line { color: var(--teal); }
.opd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.opd-stat {
  margin: 0;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 12px;
  background: var(--stat);
  border: 1px solid var(--line);
}
.opd-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.opd-stat strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opd-stat strong.stat-name { white-space: normal; overflow-wrap: anywhere; }
.opd-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.opd-actions .next-button,
.opd-actions .primary { grid-column: 1 / -1; }
.opd-actions button {
  width: 100%;
  white-space: normal;
  line-height: 1.25;
  min-height: 2.45rem;
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
  font-size: 0.84rem;
}
.opd-actions .ghost { padding: 0.45rem 0.7rem; font-size: 0.84rem; }
.delay-line {
  margin: 0;
  color: var(--rose);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rose) 12%, var(--stat));
  border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
}
.consult-timer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  background: var(--timer);
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  font-size: 0.92rem;
}
.consult-timer strong {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}
.consult-timer strong.is-over { color: var(--rose); }
.next-button { width: 100%; border-radius: 14px; padding: 0.72rem 0.9rem; font-size: 0.95rem; letter-spacing: 0.01em; }
.shift-editor, .shift-stack { display: grid; gap: 0.65rem; }
.shift-row, .shift-line {
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem;
}
.shift-line { grid-template-columns: 1fr auto; align-items: end; }
.record-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.record-toggle [data-role="now-clock"] { font-weight: 700; }
.track { display: grid; gap: 0.15rem; }
.track-line { margin: 0; font-size: 0.86rem; }
.timing-card { align-items: stretch; display: grid; gap: 0.75rem; padding: 1rem; container-type: inline-size; container-name: timing; }
.timing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.timing-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.timing-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timing-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timing-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
}
.timing-id { min-width: 0; }
.timing-id h3 { overflow-wrap: anywhere; }
.timing-card .doctor-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timing-card .shift-stack { display: grid; gap: 0.55rem; }
.timing-card .shift-line {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.55rem;
  background: var(--stat);
}
.shift-title { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.shift-title span { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 650; }
.day-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.day-chip {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--line);
}
.day-chip.is-on { color: var(--ok-ink); background: var(--ok); border-color: transparent; }
.shift-hours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: end;
}
.shift-hours label { display: grid; gap: 0.2rem; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.timing-foot { display: flex; justify-content: flex-end; }
@container timing (max-width: 420px) {
  .shift-hours { grid-template-columns: 1fr; }
  .timing-head { grid-template-columns: auto minmax(0, 1fr); }
  .timing-head .badge { grid-column: 1 / -1; }
}
.queue-panel {
  display: grid;
  gap: 0.55rem;
  background: var(--stat);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.75rem 0.8rem;
}
.queue-panel > button { width: 100%; }
.queue-next { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; align-items: baseline; font-size: 0.95rem; }
.queue-next strong { font-size: 1.35rem; color: var(--teal); line-height: 1; }
.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.queue-list li {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
}
.queue-list strong { color: var(--teal); min-width: 2.2rem; }
.queue-list em { color: var(--rose); font-style: normal; font-weight: 700; }
.missed-block { display: grid; gap: 0.4rem; }
.missed-label {
  margin: 0;
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.missed-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  background: var(--stat);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  font-size: 0.95rem;
}
.missed-chip button { padding: 0.45rem 0.75rem; }
.start-prompt {
  background: var(--wait);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  display: grid;
  gap: 0.55rem;
}
.start-prompt ul { margin: 0; padding-left: 1.1rem; }
.start-prompt li { margin: 0.15rem 0; }

.doctor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.55rem;
  align-items: end;
  margin-bottom: 0.9rem;
  padding-bottom: 0.2rem;
}
.doctor-toolbar label,
.doctor-toolbar .layout-switch,
.doctor-toolbar .ghost {
  flex: 0 0 auto;
}
.doctor-toolbar label { min-width: 9.2rem; margin: 0; }
.doctor-toolbar .search-field { min-width: 16rem; }
.search-input {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 0.55rem;
}
.search-input svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--muted); }
.search-input input { border: 0; background: transparent; padding-left: 0; min-width: 12rem; }
.doctor-toolbar .layout-switch { margin-bottom: 0.15rem; }
.doctor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.doctor-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doctor-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doctor-grid.is-compact .doctor-tags { display: none; }
@media (min-width: 821px) {
  .doctor-grid.is-compact .doctor-shift,
  .doctor-grid.is-compact .doctor-delay,
  .doctor-grid.is-compact .doctor-foot { display: none; }
  .doctor-grid.is-compact .doctor-desk { gap: 0.55rem; }
}
.doctor-extra { display: grid; gap: 0.85rem; }
.status-dot {
  width: 1.44rem;
  height: 1.44rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.status-dot.is-available { background: #1f9d55; }
.status-dot.is-busy { background: #d64545; }
.status-dot.is-away { background: #d6a21e; }
.status-dot.is-off { background: #5c6770; }
.presence-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.doctor-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; }
.doctor-tags span, .mini-tag {
  background: var(--stat);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.manage-card { padding: 1rem; display: grid; gap: 0.75rem; align-content: start; }
.doctor-desk {
  padding: 1.05rem 1.1rem 0.95rem;
  gap: 0.85rem;
}
.doctor-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}
.doctor-id { min-width: 0; }
.doctor-desk h3 {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.doctor-desk .doctor-meta {
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doctor-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
.doctor-facts div {
  background: var(--stat);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.55rem 0.7rem 0.6rem;
  min-width: 0;
}
.doctor-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.doctor-facts dd {
  margin: 0.15rem 0 0;
  font-weight: 720;
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}
.doctor-shift { display: grid; gap: 0.45rem; }
.doctor-desk .record-toggle {
  width: 100%;
  justify-content: space-between;
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
}
.doctor-desk .desk-hint {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal) 10%, var(--stat));
  color: var(--ink);
  font-weight: 650;
}
.doctor-flow,
.doctor-delay {
  display: grid;
  gap: 0.55rem;
}
.desk-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flow-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.flow-step { display: grid; gap: 0.35rem; justify-items: start; align-content: start; }
.flow-index {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 750;
  background: var(--stat);
  color: var(--muted);
  border: 1px solid var(--line);
}
.flow-step.is-current .flow-index {
  background: var(--teal);
  color: var(--on-accent);
  border-color: var(--teal);
}
.flow-actions button {
  width: 100%;
  white-space: normal;
  line-height: 1.2;
  padding: 0.62rem 0.45rem;
  font-size: 0.84rem;
  border-radius: 14px;
}
.emergency-row { margin-top: 0.35rem; }
.emergency-row button { width: 100%; }
.doctor-delay {
  padding: 0.75rem;
  border-radius: 16px;
  background: var(--stat);
  border: 1px solid var(--line);
}
.delay-fields {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.55rem;
}
.delay-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }
.delay-actions button { flex: 1 1 8rem; }
.doctor-foot { display: flex; justify-content: flex-end; }
.avatar-lg {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: var(--on-accent);
  font-weight: 700;
  flex: none;
  object-fit: cover;
}
.stats { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; color: var(--muted); margin: 0; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.switch input { width: auto; }

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table th {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.table-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.table-actions button { padding: 0.4rem 0.7rem; }
.tracker-code { margin-top: 0.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.02em; opacity: 0.85; }

.days { border: 1px solid var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.7rem; }
.days label { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.days input { width: auto; }
.empty { border: 1px dashed var(--line); border-radius: 16px; padding: 1.2rem; color: var(--muted); background: transparent; }
.status-list { display: grid; gap: 0.7rem; margin: 0; }
.status-list div { display: grid; gap: 0.2rem; }
.status-list dt { color: var(--muted); font-size: 0.78rem; }
.status-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.qr-row { display: flex; gap: 1rem; align-items: center; }
.qr-row img { width: 148px; height: 148px; background: white; border-radius: 12px; border: 1px solid var(--line); }
.download-link { display: inline-block; text-decoration: none; border-radius: 999px; padding: 0.7rem 1rem; }
.log-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 0.85rem; }
.log-card pre { white-space: pre-wrap; margin: 0.4rem 0 0; font: inherit; }
.reply {
  white-space: pre-wrap;
  background: #17211e;
  color: #f4f7f5;
  border-radius: 14px;
  padding: 0.9rem;
  margin: 0;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--overlay);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal .panel { width: min(520px, 100%); max-height: min(92vh, 820px); overflow: auto; }

.token-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 0.9rem; align-items: start; }
.token-board {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.token-board .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.token-scope {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 700;
}
.token-scope span { color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.token-scope select {
  width: 13.5rem;
  max-width: 100%;
  flex: 0 1 13.5rem;
  margin: 0;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  padding-left: 0.9rem;
}
.check { display: flex; align-items: center; gap: 0.5rem; }
.check input { width: auto; }
.token-table { min-width: 980px; }
.priority-tag { color: var(--rose); font-weight: 700; }
.auth-tools { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.auth-tools .eyebrow { margin: 0; }
.theme-controls { display: flex; align-items: center; gap: 0.45rem; }
.theme-controls select,
.theme-palette {
  width: auto;
  min-width: 12.5rem;
  border-radius: 999px;
  padding: 0.45rem 2.9rem 0.45rem 0.95rem;
  background-color: var(--stat);
}
.theme-toggle { background: var(--stat); color: var(--ink); border: 1px solid var(--line); }
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: min(420px, calc(100vw - 2rem));
  background: var(--teal-dark);
  color: var(--on-accent);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}
#print-slip, #print-recon { display: none; }
.print-recon table { width: 100%; border-collapse: collapse; margin: 0.8rem 0 1rem; }
.print-recon th, .print-recon td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid #ccc; font-size: 0.82rem; }
.control-form { display: grid; gap: 0; }
.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  padding-bottom: 0.4rem;
}
.control-card {
  background: color-mix(in srgb, var(--card) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, white);
  border-radius: 18px;
  padding: 1rem 1.05rem 1.05rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.8rem;
  align-content: start;
  backdrop-filter: blur(8px);
}
.control-card h3 { margin: 0; font-size: 1.08rem; letter-spacing: -0.02em; }
.card-kicker {
  margin: 0 0 0.15rem;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.control-field { display: grid; gap: 0.28rem; }
label.control-field.check { display: grid; align-items: start; }
.control-field.check span { display: flex; align-items: center; gap: 0.5rem; font-weight: 650; }
.control-field .hint { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.control-bar {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  align-items: center;
  padding: 0.9rem 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-top: 1px solid var(--line);
}
.alert-panel p { margin: 0.4rem 0 1rem; line-height: 1.45; }
.look-menu { position: relative; }
.look-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.45rem 0.9rem;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
}
.look-menu > summary::-webkit-details-marker { display: none; }
.look-panel { display: grid; gap: 0.65rem; margin-top: 0.55rem; }
.look-menu:not(.look-menu-inline) .look-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  min-width: 16.5rem;
  margin-top: 0;
  padding: 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.look-panel .theme-controls,
.look-panel .appearance-row,
.account-currency { display: grid; gap: 0.35rem; }
.look-panel select,
.account-currency select { width: 100%; min-width: 0; }
html[data-theme="dark"] .site-header button,
html[data-theme="dark"] .site-header button:hover,
html[data-theme="dark"] .site-header button:active,
html[data-theme="dark"] .site-header .nav-button,
html[data-theme="dark"] .site-header .nav-button:hover,
html[data-theme="dark"] .site-header .nav-button:active,
html[data-theme="dark"] .site-header .nav-button.is-active,
html[data-theme="dark"] .site-header .nav-button.is-active:hover,
html[data-theme="dark"] .site-header .nav-button.is-active:active,
html[data-theme="dark"] .site-header .primary,
html[data-theme="dark"] .site-header .primary:hover,
html[data-theme="dark"] .site-header .primary:active {
  box-shadow: none;
  transform: none;
}
.doctor-more { display: none; }
.filter-menu > summary { display: none; }
@media (min-width: 821px) {
  .filter-menu > .filters { display: grid !important; }
  .filter-menu > .doctor-toolbar { display: flex !important; }
}

@media print {
  body { background: white !important; color: black !important; }
  body.printing-slip > *:not(#print-slip),
  body.printing-recon > *:not(#print-recon) { display: none !important; }
  body.printing-slip #print-slip,
  body.printing-recon #print-recon {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: auto;
    max-width: none;
    padding: 8mm;
    color: black !important;
    background: white !important;
    font-family: "Segoe UI", sans-serif;
  }
  body.printing-slip #print-slip { width: 80mm; }
  body.printing-slip.paper-58 #print-slip { width: 58mm; }
  .print-slip h1, .print-recon h1, .print-recon h2 { font-size: 1.25rem; color: black; }
  .slip-kicker { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; }
  .slip-token { font-size: 2.4rem; font-weight: 800; margin: 0.2rem 0; }
  .slip-tracker { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; margin: 0.15rem 0 0.45rem; }
  .print-slip p, .print-recon p { margin: 0.2rem 0; white-space: pre-wrap; color: black; }
  .print-slip img { width: 28mm; height: 28mm; }
  .print-recon table, .print-recon th, .print-recon td { color: black; }
}

@media (max-width: 900px) {
  .brand { max-width: 9rem; }
  .walkin-button { padding: 0.55rem 0.75rem; }
  .nav-button { padding: 0.4rem 0.55rem; }
  .opd-grid, .filters, .section-head, .doctor-bar, .row, .qr-row, .token-layout { display: grid; justify-content: stretch; }
  .opd-grid, .opd-grid[data-cols], .doctor-grid, .doctor-grid[data-cols], .filters, .token-layout, .metric-grid, .control-grid, .timing-grid, .timing-grid[data-cols] { grid-template-columns: 1fr; }
  .token-scope { align-items: stretch; flex-direction: column; }
  .token-scope select { width: 100%; flex-basis: auto; }
  .doctor-toolbar { display: flex; flex-wrap: nowrap; }
  .billing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .site-header { z-index: 80; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .desk-menu {
    display: inline-grid;
    place-items: center;
    position: relative;
    z-index: 90;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    flex: 0 0 auto;
  }
  .site-header .brand { display: none; }
  .site-header .nav {
    position: fixed;
    z-index: 70;
    top: 0;
    left: 0;
    width: min(18.5rem, 88vw);
    height: 100vh;
    margin: 0;
    padding: 4.4rem 0.85rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    background: var(--card);
    overflow: auto;
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    box-shadow: var(--shadow);
  }
  body.desk-nav-open .site-header .nav { transform: translateX(0); }
  body.desk-nav-open .desk-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 20, 0.35);
    z-index: 65;
  }
  .site-header .nav .nav-button { width: 100%; text-align: left; }
  .header-actions { margin-left: auto; }
  .qr-row > div { display: grid; gap: 0.75rem; justify-items: start; }
  .site-header .profile-drawer { z-index: 2; }
  .filter-menu {
    margin: 0 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    padding: 0.45rem 0.7rem 0.55rem;
  }
  .filter-menu > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
  }
  .filter-menu > summary::-webkit-details-marker { display: none; }
  .filter-menu:not([open]) > .filters,
  .filter-menu:not([open]) > .doctor-toolbar { display: none !important; }
  .filter-menu[open] > .filters,
  .filter-menu[open] > .doctor-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    flex-wrap: wrap;
    overflow: visible;
    margin: 0.65rem 0 0.15rem;
  }
  .metric-grid,
  .billing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.65rem;
  }
  .metric-card { padding: 0.45rem 0.55rem; border-radius: 12px; }
  .metric-card span { font-size: 0.72rem; }
  .metric-card strong,
  .billing-metrics .metric-card strong { font-size: 0.95rem; margin-top: 0.08rem; }
  .doctor-more { display: inline-flex; width: 100%; justify-content: center; }
  .doctor-desk { padding: 0.7rem; gap: 0.4rem; }
  .doctor-desk:not(.is-open) .doctor-extra,
  .doctor-desk:not(.is-open) .doctor-meta,
  .doctor-desk:not(.is-open) .avatar-lg,
  .doctor-desk:not(.is-open) .presence-badge { display: none; }
  .doctor-desk.is-open .doctor-extra,
  .doctor-grid.is-compact .doctor-desk.is-open .doctor-extra { display: contents; }
  .opd-card { padding: 0.55rem 0.65rem; }
}

@media (max-width: 640px) {
  .walkin-button { padding: 0.55rem 0.7rem; }
  .flow-actions, .doctor-facts, .delay-fields { grid-template-columns: 1fr; }
}
@container opd (max-width: 340px) {
  .opd-actions { grid-template-columns: 1fr; }
  .opd-meta { grid-template-columns: 1fr; }
}
.inactive-chip {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--off);
  color: var(--off-ink);
  vertical-align: middle;
}

@container opd (min-width: 560px) {
  .opd-live:has(.consult-timer) {
    grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 0.7fr);
    align-items: stretch;
  }
  .consult-timer { flex-direction: column; align-items: flex-start; justify-content: center; }
}