/* CarePoint · Material Design 3 theme (Roboto + Material Symbols, light & dark). */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/roboto-latin.woff2) format("woff2"); }
@font-face { font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-display: block; src: url(/fonts/material-symbols-rounded.woff2) format("woff2"); }

:root {
  /* M3 tonal palette generated from teal #006A60 */
  --md-primary: #006a60; --md-on-primary: #ffffff; --md-primary-container: #9ef2e4; --md-on-primary-container: #00201c;
  --md-secondary: #4a635f; --md-secondary-container: #cce8e2; --md-on-secondary-container: #05201c;
  --md-tertiary: #456179; --md-tertiary-container: #cce5ff; --md-on-tertiary-container: #001e31;
  --md-error: #ba1a1a; --md-error-container: #ffdad6; --md-on-error-container: #410002;
  --md-surface: #f4fbf8; --md-surface-dim: #d5dbd9; --md-sc-lowest: #ffffff; --md-sc-low: #eff5f2; --md-sc: #e9efec; --md-sc-high: #e3eae7; --md-sc-highest: #dde4e1;
  --md-on-surface: #171d1b; --md-on-surface-variant: #3f4946; --md-outline: #6f7976; --md-outline-variant: #bec9c5;
  --md-inverse-surface: #2b3230; --md-inverse-on-surface: #ecf2ef; --md-inverse-primary: #53dbc9;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px 1px rgba(0,0,0,.08);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.2), 0 2px 6px 2px rgba(0,0,0,.1);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.2);

  /* App tokens mapped onto the Material roles */
  --bg: var(--md-surface); --panel: var(--md-sc-lowest); --panel-2: var(--md-sc-low); --text: var(--md-on-surface); --muted: var(--md-on-surface-variant); --line: var(--md-outline-variant);
  --primary: var(--md-primary); --primary-2: #00897b; --primary-soft: var(--md-secondary-container); --on-primary: var(--md-on-primary);
  --danger: var(--md-error); --danger-soft: var(--md-error-container); --warn: #8a5100; --warn-soft: #ffdcbd; --ok: #006e2c; --ok-soft: #c3f0c6;
  --info: #0b57d0; --info-soft: #d3e3fd; --violet: #6750a4; --violet-soft: #eaddff;
  --radius: 16px; --shadow: var(--md-elev-1);
  --side: 272px; --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --md-primary: #53dbc9; --md-on-primary: #003731; --md-primary-container: #005048; --md-on-primary-container: #74f8e5;
  --md-secondary: #b1ccc6; --md-secondary-container: #334b47; --md-on-secondary-container: #cce8e2;
  --md-tertiary: #adcae6; --md-tertiary-container: #2d4960; --md-on-tertiary-container: #cce5ff;
  --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
  --md-surface: #0e1513; --md-surface-dim: #0e1513; --md-sc-lowest: #090f0e; --md-sc-low: #171d1b; --md-sc: #1b2120; --md-sc-high: #252b2a; --md-sc-highest: #303635;
  --md-on-surface: #dde4e1; --md-on-surface-variant: #bec9c5; --md-outline: #899390; --md-outline-variant: #3f4946;
  --md-inverse-surface: #dde4e1; --md-inverse-on-surface: #2b3230; --md-inverse-primary: #006a60;
  --md-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
  --bg: var(--md-surface); --panel: var(--md-sc-low); --panel-2: var(--md-sc); --primary-2: #74f8e5; --primary-soft: var(--md-secondary-container);
  --warn: #ffb870; --warn-soft: #4a2800; --ok: #7edb8e; --ok-soft: #0f3d1c; --info: #a8c7fa; --info-soft: #0a305f; --violet: #d0bcff; --violet-soft: #4f378b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 400 14px/1.43 var(--font); letter-spacing: .01em; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.3; font-weight: 400; letter-spacing: 0; }
h1 { font-size: 28px; line-height: 36px; } h2 { font-size: 18px; font-weight: 500; } h3 { font-size: 16px; font-weight: 500; letter-spacing: .01em; } h4 { font-size: 14px; font-weight: 500; }
b, strong { font-weight: 500; }
small, .muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* Material Symbols */
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; vertical-align: middle; user-select: none; width: 1em; overflow: hidden; }
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.ms.lg { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Layout: navigation drawer + top app bar */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { background: var(--md-sc-low); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 12px; }
:root[data-theme="dark"] .side { background: var(--md-sc-low); }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 12px 16px; font-weight: 500; font-size: 15px; line-height: 1.25; }
.brand .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--md-primary); color: var(--md-on-primary); display: grid; place-items: center; flex-shrink: 0; }
.brand .logo .ms { font-size: 24px; }
.brand small { display: block; font-weight: 400; font-size: 12px; letter-spacing: .03em; }
.nav { flex: 1; }
.nav .sec { font-size: 14px; font-weight: 500; color: var(--muted); padding: 18px 16px 8px; letter-spacing: .01em; }
.nav a { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 24px; color: var(--muted); font-weight: 500; font-size: 14px; position: relative; overflow: hidden; }
.nav a:hover { text-decoration: none; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.nav a.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.nav a.active .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.nav a .ico { width: 24px; display: grid; place-items: center; }
.nav a .ico .ms { font-size: 22px; width: auto; }
.nav a .badge { margin-left: auto; }
.nav a .count { margin-left: auto; background: var(--md-error); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 500; display: grid; place-items: center; }
:root[data-theme="dark"] .nav a .count { color: #690005; }
.side-foot { padding: 12px 8px 4px; font-size: 12px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 10px 24px; height: 72px; background: var(--bg); position: sticky; top: 0; z-index: 20; transition: background .2s, box-shadow .2s; }
.top.scrolled { background: var(--md-sc); }
.top .search { flex: 1; max-width: 560px; position: relative; min-width: 0; }
.top .search input { width: 100%; height: 48px; border-radius: 24px; border: 0; background: var(--md-sc-high); padding: 0 20px 0 52px; font-size: 15px; }
.top .search input:focus { outline: 2px solid var(--primary); outline-offset: 0; background: var(--md-sc-high); }
.top .search::before { content: "search"; font-family: "Material Symbols Rounded"; font-size: 24px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }
.top .spacer { flex: 1; }
.top .who { text-align: right; line-height: 1.2; }
.top .who b { font-weight: 500; }
.top .who small { display: block; text-transform: capitalize; }
.top .menu-btn { display: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 20px; border: 0; background: transparent; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; }
.icon-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.icon-btn .ms { font-size: 24px; width: auto; }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); display: grid; place-items: center; font-weight: 500; font-size: 16px; border: 0; cursor: pointer; font-family: var(--font); }
.page { padding: 8px 24px 32px; max-width: 1440px; width: 100%; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 20px; }
.page-head h1 { margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards & surfaces */
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; border: 0; }
:root[data-theme="dark"] .card { box-shadow: none; }
.card + .card { margin-top: 16px; }
.grid > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.stat { display: flex; flex-direction: column; gap: 4px; background: var(--md-sc-low); box-shadow: none; }
:root[data-theme="dark"] .stat { background: var(--md-sc); }
.stat .label { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.stat .value { font-size: 30px; line-height: 38px; font-weight: 400; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12px; color: var(--muted); }
.stat.link { cursor: pointer; transition: background .15s; } .stat.link:hover { background: var(--md-sc-high); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.between { justify-content: space-between; }

/* Buttons: filled, tonal, outlined, text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 20px; border: 1px solid var(--md-outline); background: transparent; color: var(--primary); font: 500 14px/1 var(--font); letter-spacing: .01em; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .15s; }
.btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .15s; z-index: -1; pointer-events: none; }
.btn:hover { text-decoration: none; } .btn:hover::after { opacity: .08; } .btn:active::after { opacity: .12; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .38; cursor: not-allowed; color: var(--text); } .btn:disabled::after { opacity: 0; }
.btn .ms { font-size: 18px; width: auto; margin-left: -4px; }
.btn.primary { background: var(--md-primary); border-color: transparent; color: var(--md-on-primary); }
.btn.primary:hover { box-shadow: var(--md-elev-1); }
.btn.tonal { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.btn.danger { color: var(--md-error); border-color: var(--md-outline); }
.btn.danger.filled { background: var(--md-error); color: #fff; border-color: transparent; }
.btn.ghost { border-color: transparent; background: transparent; padding: 0 12px; }
.btn.sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 16px; }
.btn.ghost.sm { padding: 0 10px; }
.btn.lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 26px; }
.btn.ai { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-color: transparent; }
.fab { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 16px; border: 0; background: var(--md-primary-container); color: var(--md-on-primary-container); font: 500 14px var(--font); box-shadow: var(--md-elev-3); cursor: pointer; position: relative; overflow: hidden; }
.fab .ms { font-size: 24px; width: auto; }
.fab:hover { text-decoration: none; filter: brightness(.97); }
.fab.top-fab { height: 40px; border-radius: 12px; box-shadow: var(--md-elev-1); padding: 0 16px 0 12px; }

/* Ripple */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .18; pointer-events: none; animation: ripple .5s ease-out forwards; z-index: -1; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Text fields (outlined) */
input, select, textarea { font: 400 15px/1.4 var(--font); color: var(--text); background: transparent; border: 1px solid var(--md-outline); border-radius: 8px; padding: 10px 14px; min-height: 44px; width: 100%; transition: border-color .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
select option { background: var(--panel); color: var(--text); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; accent-color: var(--primary); }
input[type=date], input[type=time] { min-height: 44px; }
label.f { display: block; }
label.f > span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 6px 2px; letter-spacing: .03em; }
label.f:focus-within > span { color: var(--primary); }
.form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.form .full { grid-column: 1 / -1; }
.check { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }

/* Data tables */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--panel); white-space: nowrap; position: sticky; top: 0; letter-spacing: .03em; }
tr.click { cursor: pointer; } tr.click:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
td.actions { white-space: nowrap; text-align: right; }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* Badges & chips */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; background: var(--md-sc-high); color: var(--muted); white-space: nowrap; border: 0; letter-spacing: .02em; }
.badge .ms { font-size: 16px; width: auto; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger, .badge.critical, .badge.major, .badge.contraindicated { background: var(--danger-soft); color: var(--danger); } .badge.info { background: var(--info-soft); color: var(--info); }
.badge.moderate { background: var(--warn-soft); color: var(--warn); }
.badge.violet { background: var(--violet-soft); color: var(--violet); } .badge.primary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.badge.solid-danger { background: var(--md-error); color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.alert { border-radius: 12px; padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--md-sc-low); border: 0; }
.alert + .alert { margin-top: 8px; }
.alert.critical, .alert.contraindicated, .alert.major { background: var(--danger-soft); color: var(--md-on-error-container); }
:root[data-theme="dark"] .alert.critical, :root[data-theme="dark"] .alert.contraindicated, :root[data-theme="dark"] .alert.major { color: var(--md-on-error-container); }
.alert.warn, .alert.moderate { background: var(--warn-soft); }
.alert.info, .alert.minor { background: var(--info-soft); }
.alert .ic { font-size: 18px; line-height: 1.2; }
.alert b { display: block; }

.ai-box { background: linear-gradient(180deg, color-mix(in srgb, var(--violet-soft) 70%, var(--panel)), var(--panel) 80%); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); }
:root[data-theme="dark"] .ai-box { box-shadow: none; }
.ai-box .ai-title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; color: var(--violet); margin-bottom: 8px; }
.ai-box pre { white-space: pre-wrap; font: inherit; margin: 0; }
.spark { font-size: 15px; }

/* Tabs (primary) */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 14px 16px 12px; color: var(--muted); font-weight: 500; white-space: nowrap; position: relative; }
.tabs a:hover { text-decoration: none; background: color-mix(in srgb, var(--text) 6%, transparent); }
.tabs a.active { color: var(--primary); }
.tabs a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

.timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 18px; }
.timeline .ev { position: relative; padding-bottom: 18px; }
.timeline .ev::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--panel); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* Dialogs & snackbars */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--md-sc-high); border-radius: 28px; width: 100%; max-width: 640px; box-shadow: var(--md-elev-3); animation: pop .2s cubic-bezier(.2, 0, 0, 1); }
:root[data-theme="dark"] .modal { background: var(--md-sc-high); }
.modal.wide { max-width: 940px; }
.modal-head { display: flex; align-items: center; padding: 20px 24px 8px; }
.modal-head h2 { margin: 0; font-size: 22px; font-weight: 400; }
.modal-head .x { margin-left: auto; }
.modal-body { padding: 12px 24px 16px; }
.modal-body .card { background: var(--md-sc-low); box-shadow: none; }
.modal-foot { padding: 8px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-foot .btn:not(.primary):not(.danger) { border-color: transparent; }
#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: 14px 18px; border-radius: 6px; box-shadow: var(--md-elev-3); max-width: 560px; animation: up .2s ease; font-size: 14px; }
.toast.err { background: var(--md-error); color: #fff; }
:root[data-theme="dark"] .toast.err { color: #690005; }
@keyframes up { from { transform: translateY(12px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }

/* Autocomplete (menu) */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--md-sc); border-radius: 12px; box-shadow: var(--md-elev-2); max-height: 340px; overflow-y: auto; margin-top: 4px; padding: 6px 0; }
.ac-list .opt { padding: 10px 16px; cursor: pointer; }
.ac-list .opt:hover, .ac-list .opt.on { background: color-mix(in srgb, var(--text) 8%, transparent); }

/* Charts */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 10px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 6px; position: relative; height: 100%; }
.bars .b i { display: block; border-radius: 3px 3px 0 0; }
.bars .b .p { background: var(--primary); } .bars .b .c { background: var(--md-tertiary); }
.bars .b:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--panel); padding: 4px 8px; border-radius: 6px; font-size: 11px; white-space: pre; z-index: 5; }
.bar-labels { display: flex; gap: 4px; font-size: 10.5px; color: var(--muted); }
.bar-labels span { flex: 1; text-align: center; min-width: 6px; overflow: hidden; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.meter { height: 6px; border-radius: 3px; background: var(--md-sc-highest); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); }

/* Calendar */
.cal { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; background: var(--panel); max-height: 72vh; }
.cal .col-h { position: sticky; top: 0; background: var(--panel-2); padding: 8px; border-bottom: 1px solid var(--line); font-weight: 600; z-index: 2; border-left: 1px solid var(--line); }
.cal .t { padding: 0 6px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); height: 44px; }
.cal .cell { border-top: 1px solid var(--line); border-left: 1px solid var(--line); height: 44px; padding: 2px; position: relative; }
.cal .cell.off { background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 6px, var(--panel) 6px, var(--panel) 12px); }
.cal .cell.free { cursor: pointer; } .cal .cell.free:hover { background: var(--primary-soft); }
.cal .cell.free:hover::after { content: "+ Book"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--primary); font-weight: 600; font-size: 12px; }
.appt { border-radius: 8px; padding: 3px 8px; font-size: 12px; line-height: 1.25; cursor: pointer; border-left: 4px solid var(--primary); background: var(--md-secondary-container); color: var(--md-on-secondary-container); overflow: hidden; height: 100%; }
.appt.s-completed { opacity: .6; } .appt.s-cancelled, .appt.s-no_show { opacity: .45; text-decoration: line-through; }
.appt.s-checked_in { background: var(--warn-soft); border-color: var(--warn); }
.appt.s-in_consult { background: var(--info-soft); border-color: var(--info); }

/* POS */
.pos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.pos .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; }
.pos .prod { border: 0; border-radius: 12px; padding: 12px 14px; cursor: pointer; background: var(--md-sc-low); text-align: left; font: inherit; color: inherit; position: relative; overflow: hidden; transition: background .15s, box-shadow .15s; }
.pos .prod:hover { background: var(--md-sc-high); }
.pos .prod .n { font-weight: 500; font-size: 15px; }
.pos .prod .p { font-weight: 500; font-size: 16px; color: var(--primary); }
.pos .cart { position: sticky; top: 84px; }
.pos .cart-line { display: grid; grid-template-columns: 1fr 104px 84px 32px; gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pos .cart-line input { padding: 4px 6px; min-height: 32px; text-align: center; border-radius: 8px; }
.pos .total { font-size: 32px; line-height: 40px; font-weight: 400; }
.qty-ctl { display: flex; align-items: center; gap: 2px; }
.qty-ctl button { width: 30px; height: 32px; border: 0; background: var(--md-sc-high); border-radius: 16px; cursor: pointer; color: var(--text); font: 500 15px var(--font); }
.qty-ctl button:hover { background: var(--md-sc-highest); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-hero { background: radial-gradient(120% 90% at 0% 0%, #00897b 0%, #006a60 45%, #00423b 100%); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.06); }
.login-hero h1 { font-size: 40px; line-height: 48px; margin-bottom: 14px; }
.login-hero li .ms { color: #9ef2e4; }
.login-hero ul { padding: 0; list-style: none; margin: 20px 0 0; display: grid; gap: 10px; }
.login-hero li { display: flex; gap: 10px; opacity: .95; }
.login-form { display: grid; place-items: center; padding: 32px 16px; background: var(--bg); }
.login-card { width: 100%; max-width: 420px; padding: 32px; border-radius: 28px; }
.login-card h2 { font-size: 28px; font-weight: 400; margin-bottom: 20px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-grid .btn { flex-direction: column; align-items: flex-start; padding: 10px 16px; height: auto; border-radius: 12px; color: var(--text); gap: 2px; }
.demo-grid .btn small { font-weight: 400; }

.rx-line { display: grid; grid-template-columns: minmax(160px, 2fr) 1fr 1fr 1fr 70px minmax(110px, 1.2fr) 30px; gap: 6px; margin-bottom: 6px; align-items: center; }
.rx-head { font-size: 12px; color: var(--muted); font-weight: 500; }
.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.chip { display: inline-flex; gap: 6px; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--md-outline-variant); background: transparent; cursor: pointer; color: var(--text); font: 500 13px var(--font); letter-spacing: .01em; position: relative; overflow: hidden; }
.chip:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.chip.on, .chip[aria-pressed=true] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.chip .ms { font-size: 18px; width: auto; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.slot-grid button { height: 36px; border-radius: 8px; border: 1px solid var(--md-outline-variant); background: transparent; cursor: pointer; font: 500 13px var(--font); color: var(--text); }
.slot-grid button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.slot-grid button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.sugg button { text-align: left; border: 1px solid var(--md-outline-variant); background: transparent; border-radius: 12px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--text); }
.sugg button:hover, .sugg button.on { border-color: var(--violet); background: var(--violet-soft); }

/* POS mobile cart bar */
.pos-bar { display: none; }
@media (max-width: 1100px) {
  .pos-bar { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; justify-content: space-between; align-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: 16px; padding: 16px 20px; box-shadow: var(--md-elev-3); border: 0; font: 500 16px var(--font); cursor: pointer; }
  .pos-bar.empty-cart { display: none; }
  .pos .results { max-height: none; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-side, .pos { grid-template-columns: 1fr; } .pos .cart { position: static; } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--side), 86vw); transform: translateX(-105%); transition: transform .25s cubic-bezier(.2, 0, 0, 1); z-index: 60; box-shadow: var(--md-elev-3); border-radius: 0 16px 16px 0; background: var(--md-sc-low); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 55; }
  .side.open { transform: none; }
  .top .menu-btn { display: inline-flex; }
  .page { padding: 8px 16px 24px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .top .who, .hide-sm { display: none !important; }
  .top { padding: 8px 12px; gap: 6px; height: 64px; }
  .top .search input { height: 44px; padding-left: 46px; }
  .top .search::before { left: 13px; }
  h1 { font-size: 24px; line-height: 32px; }
  .login-wrap { grid-template-columns: 1fr; } .login-hero { padding: 28px 20px; } .login-hero ul { display: none; }
  .table-wrap > table { min-width: 780px; }
  td .mono, td.mono { white-space: nowrap; }
  .rx-line { grid-template-columns: 1fr 1fr; } .rx-line > :first-child { grid-column: 1 / -1; } .rx-head { display: none; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr 1fr; } .stat .value { font-size: 22px; line-height: 28px; } .card { padding: 16px; } .table-wrap { margin: 0 -16px; padding: 0 16px; } }
@media print { .side, .top, .no-print { display: none !important; } .app { display: block; } .card { box-shadow: none; } }

/* ---- Premium: offline pill, charts, heatmap, scribe, scanner ---- */
.net { border: 0; background: var(--md-sc-high); color: var(--text); border-radius: 8px; height: 32px; padding: 0 12px; font: 500 13px var(--font); cursor: pointer; white-space: nowrap; }
.net::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ok); vertical-align: 1px; }
.net.off { background: var(--danger-soft); border-color: transparent; color: var(--danger); } .net.off::before { background: var(--danger); }
.net.wait { background: var(--warn-soft); border-color: transparent; color: var(--warn); } .net.wait::before { background: var(--warn); }
.net.bad { background: var(--danger-soft); color: var(--danger); } .net.bad::before { background: var(--danger); }
svg.chart { width: 100%; height: 190px; display: block; overflow: visible; }
svg.chart .grid-l { stroke: var(--line); stroke-width: 1; }
svg.chart .ref-l { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 4 4; opacity: .6; }
svg.chart .ax { fill: var(--muted); font-size: 11px; font-family: var(--font); }
svg.chart .ref-t { fill: var(--danger); opacity: .8; }
svg.chart circle { stroke: var(--panel); stroke-width: 1.5; }
.hm-wrap { max-height: 520px; }
table.hm td, table.hm th { padding: 4px 6px; }
table.hm td:first-child { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hm-h { text-align: center; font-size: 12px; min-width: 46px; }
.hm-c { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; border-radius: 4px; }
.hm-red { background: rgb(220 38 38 / var(--a, .8)); color: #fff; }
.hm-yellow { background: rgb(234 179 8 / var(--a, .8)); color: #3a2a00; }
.hm-green { background: rgb(22 163 74 / calc(var(--a, .8) * .45)); color: var(--text); }
.hm-expired { background: repeating-linear-gradient(45deg, #7f1d1d, #7f1d1d 4px, #991b1b 4px, #991b1b 8px); color: #fff; }
.legend i.hm-red, .legend i.hm-yellow, .legend i.hm-green, .legend i.hm-expired { --a: .85; }
.hm-tot td { border-top: 2px solid var(--line); font-size: 12px; }
.sug-list { display: grid; gap: 8px; }
.sug { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--md-sc-low); flex-wrap: wrap; }
.sug-main { flex: 1; min-width: 240px; }
.sug-act { display: flex; gap: 6px; flex-wrap: wrap; }
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.season { border: 0; border-radius: 12px; padding: 10px 12px; background: var(--md-sc-low); display: grid; gap: 2px; }
.season svg { width: 100%; }
.scribe { border-color: var(--violet); background: linear-gradient(180deg, var(--violet-soft), var(--panel) 70%); }
.drop { display: grid; place-items: center; text-align: center; min-height: 220px; border: 2px dashed var(--md-outline-variant); border-radius: 16px; cursor: pointer; padding: 12px; background: var(--md-sc-low); font-size: 15px; }
.drop:hover { border-color: var(--primary); }
.qr-box { background: #fff; padding: 8px; border-radius: 8px; width: 180px; line-height: 0; }
.qr-box svg { width: 100%; height: auto; }
.pay-row { display: grid; grid-template-columns: 1fr 120px 32px; gap: 6px; margin-top: 6px; align-items: center; }
.promo { color: var(--danger); font-weight: 600; }
.alt-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
@media (max-width: 720px) { .top .net { padding: 3px 8px; } }
.legend { flex-wrap: wrap; }

/* ---- Safety Shield ---- */
#live-alerts { position: fixed; top: 84px; right: 20px; z-index: 150; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px)); }
.live-alert { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: var(--md-sc-high); color: var(--text); box-shadow: var(--md-elev-3); animation: slide .3s cubic-bezier(.2, 0, 0, 1); border-left: 6px solid var(--md-outline); }
.live-alert.contraindicated, .live-alert.major { border-left-color: var(--md-error); }
.live-alert.moderate { border-left-color: var(--warn); }
.live-alert .la-ic { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); flex-shrink: 0; }
.live-alert.moderate .la-ic { background: var(--warn-soft); color: var(--warn); }
.live-alert .la-ic .ms { font-size: 22px; width: auto; }
.live-alert .la-over { font-size: 12px; font-weight: 500; color: var(--danger); letter-spacing: .02em; margin-bottom: 2px; }
.live-alert b { font-size: 15px; }
.live-alert small { display: block; color: var(--muted); margin-top: 4px; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.sh-alert { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); border-left: 6px solid var(--md-outline-variant); }
:root[data-theme="dark"] .sh-alert { box-shadow: none; }
.sh-alert + .sh-alert { margin-top: 12px; }
.sh-alert.contraindicated, .sh-alert.major { border-left-color: var(--md-error); }
.sh-alert.moderate { border-left-color: var(--warn); }
.sh-alert.resolved { opacity: .7; border-left-color: var(--ok); }
.sh-alert .sh-ic { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); flex-shrink: 0; }
.sh-alert.moderate .sh-ic { background: var(--warn-soft); color: var(--warn); }
.sh-alert.resolved .sh-ic { background: var(--ok-soft); color: var(--ok); }
.sh-alert .sh-ic .ms { font-size: 24px; width: auto; }
.sh-main { flex: 1; min-width: 0; }
.sh-title { font-size: 16px; font-weight: 500; margin: 8px 0 2px; }
.sh-action { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--md-sc-low); }
.sh-action .ms { color: var(--primary); }
.sh-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.sh-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sh-meta .ms { font-size: 16px; width: auto; }
.sh-meta .on { color: var(--ok); }
.sh-card .card-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.sh-card .card-head h2 .ms { color: var(--primary); font-size: 22px; width: auto; }
.sh-mini { display: flex; gap: 12px; padding: 12px; border-radius: 12px; color: var(--text); align-items: flex-start; }
.sh-mini:hover { background: var(--md-sc-low); text-decoration: none; }
.sh-mini > .ms { width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; flex-shrink: 0; background: var(--warn-soft); color: var(--warn); font-size: 20px; }
.sh-mini.major > .ms, .sh-mini.contraindicated > .ms { background: var(--danger-soft); color: var(--danger); }
.sh-banner { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); }
.sh-banner.major { background: var(--danger-soft); }
.sh-banner > .row .ms { color: var(--danger); }
.sh-line { margin-top: 6px; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.adh-bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin: 8px 0 6px; }
.adh-bars i { flex: 1; border-radius: 4px 4px 0 0; min-width: 4px; background: var(--ok); opacity: .85; }
.adh-bars i.warn { background: var(--warn); } .adh-bars i.bad { background: var(--md-error); }
.sched { display: grid; gap: 6px; }
.sched-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--md-sc-low); }
.qa { padding: 12px 14px; border-radius: 12px; background: var(--md-sc-low); margin-bottom: 8px; }
.qa .row { gap: 8px; margin-bottom: 4px; }
.qa-reply { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.scan-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--md-sc-low); margin-bottom: 8px; flex-wrap: wrap; }
.scan-row.duplicate { background: var(--danger-soft); }
.alert > .ms { font-size: 20px; width: auto; margin-top: 1px; flex-shrink: 0; }

/* Public front page (landing.js) */
.lp { --lp-dark: #00201c; --lp-ink: #e8fffa; --lp-accent: #53dbc9; --lp-max: 1180px; background: var(--bg); color: var(--text); overflow-x: hidden; font-size: 15px; }
.lp-in { max-width: var(--lp-max); margin: 0 auto; padding: 0 24px; }
.lp h1, .lp h2 { letter-spacing: -.02em; }
.lp h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; font-weight: 500; margin-bottom: 14px; }
.lp h3 { font-size: 18px; margin-bottom: 6px; }
.lp p { color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.lp-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; margin-bottom: 14px; }
.lp-nav { position: fixed; inset: 0 0 auto; z-index: 30; transition: background .25s, box-shadow .25s, color .25s; color: #fff; }
.lp-nav .lp-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.lp-nav.solid { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); color: var(--text); }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: inherit; }
.lp-brand:hover { text-decoration: none; }
.lp-brand .logo { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #53dbc9, #00897b); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,137,123,.4); }
.lp-links { display: flex; gap: 26px; margin-left: 12px; }
.lp-links a { color: inherit; opacity: .85; font-weight: 500; }
.lp-links a:hover { opacity: 1; text-decoration: none; }
.lp-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lp-icon { width: 40px; height: 40px; border-radius: 20px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.lp-icon:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.lp-nav:not(.solid) .lp-signin { color: #fff; border-color: rgba(255,255,255,.5); }
.lp-nav:not(.solid) .lp-signin.primary { background: #fff; color: #00423b; }

.lp-hero { position: relative; overflow: hidden; color: var(--lp-ink); padding: 128px 0 96px; background: radial-gradient(90% 80% at 10% 0%, #00897b 0%, #00574f 38%, #00201c 100%); }
.lp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%); }
.lp-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }
.lp-glow.g1 { width: 520px; height: 520px; background: #1de9b6; right: -140px; top: -120px; opacity: .28; }
.lp-glow.g2 { width: 420px; height: 420px; background: #2979ff; left: 35%; bottom: -260px; opacity: .25; }
.lp-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.lp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-weight: 500; font-size: 13px; margin-bottom: 22px; }
.lp-pill .ms { color: var(--lp-accent); font-size: 18px; }
.lp-hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; font-weight: 600; margin-bottom: 20px; color: #fff; }
.lp-grad { background: linear-gradient(90deg, #74f8e5, #a7ffeb 40%, #82b1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: 18px; color: rgba(232,255,250,.82) !important; max-width: 560px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.lp-cta.center { justify-content: center; }
.lp-hero .btn.primary { background: linear-gradient(135deg, #64ffda, #1de9b6); color: #00201c; box-shadow: 0 10px 30px rgba(29,233,182,.35); }
.lp-hero .btn.primary:hover { box-shadow: 0 14px 36px rgba(29,233,182,.5); }
.lp-ghost { color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.lp-white { background: #fff !important; color: #00423b !important; border-color: transparent !important; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.lp-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: rgba(232,255,250,.85); }
.lp-ticks li { display: flex; align-items: center; gap: 6px; }
.lp-ticks .ms { color: var(--lp-accent); font-size: 18px; }
.lp-hero-art { position: relative; perspective: 1600px; }
.lp-frame { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); }
.lp-hero-art .lp-frame { transform: rotateY(-9deg) rotateX(4deg); transform-origin: left center; animation: lp-in 1s cubic-bezier(.2,.8,.2,1) both; }
.lp-frame img { display: block; width: 100%; height: auto; }
.lp-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #eef3f1; border-bottom: 1px solid #dde4e1; }
.lp-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .lp-bar i:nth-child(2) { background: #febc2e; } .lp-bar i:nth-child(3) { background: #28c840; }
.lp-bar span { margin-left: 10px; font-size: 11px; color: #6f7976; background: #fff; padding: 2px 12px; border-radius: 6px; }
.lp-float { position: absolute; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.96); color: #171d1b; box-shadow: 0 16px 40px rgba(0,0,0,.3); font-size: 13px; animation: lp-bob 6s ease-in-out infinite; }
.lp-float b { display: block; font-weight: 600; } .lp-float small { color: #3f4946; }
.lp-float > .ms { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.lp-float.f1 { left: -34px; top: 18%; } .lp-float.f1 > .ms { background: #ffdad6; color: #ba1a1a; }
.lp-float.f2 { right: -18px; top: 52%; animation-delay: -2s; } .lp-float.f2 > .ms { background: #eaddff; color: #6750a4; }
.lp-float.f3 { left: 14%; bottom: -28px; animation-delay: -4s; } .lp-float.f3 > .ms { background: #c3f0c6; color: #006e2c; }
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lp-in { from { opacity: 0; transform: rotateY(-18deg) rotateX(8deg) translateY(30px); } }

.lp-demo { position: relative; margin-top: -48px; padding-bottom: 24px; z-index: 2; }
.lp-demo > .lp-in { background: var(--panel); border-radius: 28px; padding: 40px; box-shadow: 0 24px 60px rgba(0,32,28,.16), 0 0 0 1px var(--line); }
.lp-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.lp-demo .lp-head { margin-bottom: 28px; }
.lp-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.lp-kicker .ms { font-size: 18px; }
.lp-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-role { border-radius: 20px; border: 1px solid var(--line); background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lp-role:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,32,28,.14); border-color: var(--primary); }
.lp-role-main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 14px 12px; padding: 20px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; position: relative; }
.lp-role-main:disabled { opacity: .6; cursor: progress; }
.lp-role-main:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 20px; }
.lp-role-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--md-primary-container), var(--md-secondary-container)); color: var(--md-on-primary-container); }
.lp-role-ic .ms { font-size: 26px; }
.lp-role-txt { grid-column: 1 / -1; display: grid; gap: 4px; }
.lp-role-txt b { font-size: 17px; } .lp-role-txt small { line-height: 1.45; }
.lp-role-go { position: absolute; right: 18px; top: 20px; width: 36px; height: 36px; border-radius: 18px; background: var(--md-primary); color: var(--md-on-primary); display: grid; place-items: center; transition: transform .2s; }
.lp-role:hover .lp-role-go { transform: translateX(3px); }
.lp-cred { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-top: 1px dashed var(--line); font-size: 13px; flex-wrap: wrap; }
.lp-cred > span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.lp-cred .ms { font-size: 16px; }
.lp-cred code { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; color: var(--text); background: var(--md-sc-high); padding: 1px 6px; border-radius: 6px; }
.lp-copy { margin-left: auto; width: 32px; height: 32px; border-radius: 16px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.lp-copy:hover { background: var(--md-sc-high); color: var(--primary); }
.lp-note { text-align: center; margin: 22px 0 0 !important; font-size: 14px; }
.lp-note .ms { font-size: 18px; margin-right: 4px; }

.lp-stats .lp-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 56px; padding-bottom: 16px; text-align: center; }
.lp-stats b { display: block; font-size: 44px; font-weight: 600; line-height: 1.1; background: linear-gradient(135deg, var(--primary), #2979ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stats span { color: var(--muted); }
.lp-sec { padding: 88px 0; }
.lp-alt { background: var(--md-sc-low); }
.lp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-feat { padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.lp-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,32,28,.1); }
.lp-feat p { font-size: 14px; margin: 0; }
.lp-feat-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); margin-bottom: 16px; }
.lp-feat-ic .ms { font-size: 24px; }
.lp-feat:nth-child(4n+2) .lp-feat-ic { background: var(--violet-soft); color: var(--violet); }
.lp-feat:nth-child(4n+3) .lp-feat-ic { background: var(--info-soft); color: var(--info); }
.lp-feat:nth-child(4n+4) .lp-feat-ic { background: var(--warn-soft); color: var(--warn); }
.lp-spot { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; margin-bottom: 80px; }
.lp-spot:last-child { margin-bottom: 0; }
.lp-spot.rev .lp-spot-txt { order: 2; }
.lp-spot h3 { font-size: 26px; line-height: 1.25; font-weight: 500; margin-bottom: 12px; }
.lp-spot ul, .lp-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.lp-spot li, .lp-list li { display: flex; gap: 10px; align-items: center; }
.lp-spot li .ms { width: 24px; height: 24px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 16px; }
.lp-list .ms { color: var(--primary); }
.lp-frame.sm { box-shadow: 0 24px 60px rgba(0,32,28,.18), 0 0 0 1px var(--line); }
.lp-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-phones { position: relative; height: 560px; }
.lp-phone { position: absolute; width: 250px; border-radius: 36px; padding: 10px; background: #111; box-shadow: 0 30px 70px rgba(0,0,0,.3); left: 8%; top: 0; z-index: 2; }
.lp-phone img { width: 100%; height: auto; display: block; border-radius: 28px; }
.lp-phone.back { left: auto; right: 8%; top: 60px; z-index: 1; transform: rotate(6deg); }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.lp-steps li { position: relative; padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.lp-steps p { margin: 0; font-size: 14px; }
.lp-step-n { position: absolute; right: 20px; top: 16px; font-size: 40px; font-weight: 700; color: var(--md-sc-highest); }
.lp-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-chips li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--md-sc-low); border: 1px solid var(--line); font-weight: 500; }
.lp-chips .ms { color: var(--primary); }
.lp-final { position: relative; overflow: hidden; text-align: center; padding: 96px 0; color: #fff; background: radial-gradient(80% 120% at 50% 0%, #00897b 0%, #00423b 60%, #00201c 100%); }
.lp-final h2 { color: #fff; position: relative; } .lp-final p { color: rgba(232,255,250,.8); position: relative; }
.lp-final .lp-glow.g1 { left: 50%; top: -300px; transform: translateX(-50%); }
.lp-foot { padding: 28px 0; border-top: 1px solid var(--line); }
.lp-foot .lp-in { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.lp-foot a:last-child { margin-left: auto; font-weight: 500; }
.lp-rv.pre { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.lp-rv.pre.in { opacity: 1; transform: none; }
:root[data-theme="dark"] .lp-demo > .lp-in { box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .lp-bar { background: #1b2120; border-color: #303635; } :root[data-theme="dark"] .lp-bar span { background: #252b2a; color: #bec9c5; }
:root[data-theme="dark"] .lp-stats b { background-image: linear-gradient(135deg, #53dbc9, #82b1ff); }
@media (prefers-reduced-motion: reduce) { .lp-float, .lp-hero-art .lp-frame { animation: none; } .lp-role, .lp-feat { transition: none; } }
@media (max-width: 1080px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 48px; } .lp-hero-art { max-width: 720px; margin: 0 auto; width: 100%; }
  .lp-roles, .lp-feats, .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-links { display: none; }
}
@media (max-width: 760px) {
  .lp-in { padding: 0 16px; }
  .lp-hero { padding: 100px 0 80px; }
  .lp-hero-art .lp-frame { transform: none; }
  .lp-float { padding: 8px 12px; font-size: 12px; } .lp-float.f1 { left: -6px; top: -18px; } .lp-float.f2 { right: -6px; top: 58%; } .lp-float.f3 { display: none; }
  .lp-demo > .lp-in { padding: 24px 16px; border-radius: 22px; }
  .lp-roles, .lp-feats, .lp-steps, .lp-chips { grid-template-columns: 1fr; }
  .lp-stats .lp-in { grid-template-columns: 1fr 1fr; gap: 24px; }
  .lp-spot, .lp-phone-grid, .lp-tech { grid-template-columns: 1fr; gap: 28px; }
  .lp-spot.rev .lp-spot-txt { order: 0; }
  .lp-sec { padding: 64px 0; }
  .lp-phones { height: 440px; } .lp-phone { width: 190px; left: 4%; } .lp-phone.back { right: 4%; top: 40px; }
  .lp-nav .lp-in { gap: 8px; } .lp-signin { padding: 0 14px; }
}
.lp-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); width: fit-content; max-width: 100%; }
.lp-quick > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13px; color: rgba(232,255,250,.85); margin-right: 2px; }
.lp-quick .ms { font-size: 16px; color: var(--lp-accent); }
.lp-quick button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: 500 13px var(--font); cursor: pointer; transition: background .15s, transform .15s; }
.lp-quick button:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.lp-quick button:disabled { opacity: .6; cursor: progress; }
/* Sign-in page: one-click demo and help */
.demo-box { border-radius: 20px; padding: 16px; background: linear-gradient(135deg, var(--md-primary-container), var(--md-secondary-container)); color: var(--md-on-primary-container); margin-bottom: 18px; }
.demo-box-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.demo-box-head > .ms { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--md-primary); color: var(--md-on-primary); }
.demo-box-head b { display: block; font-size: 16px; } .demo-box-head small { color: inherit; opacity: .8; }
.demo-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-role { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 10px; border-radius: 14px; border: 0; background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; box-shadow: var(--md-elev-1); transition: transform .15s, box-shadow .15s; }
.demo-role:hover { transform: translateY(-2px); box-shadow: var(--md-elev-2); }
.demo-role:disabled { opacity: .6; cursor: progress; }
.demo-role > span:nth-child(2) { flex: 1; min-width: 0; display: grid; } .demo-role b { font-size: 13px; } .demo-role small { color: var(--muted); font-size: 11.5px; font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; line-height: 1.35; }
.demo-role > .ms:last-child { color: var(--primary); font-size: 18px; }
.demo-role-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--md-primary-container); color: var(--md-on-primary-container); flex-shrink: 0; }
.demo-role-ic .ms { font-size: 18px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 4px 0 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-help { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--md-sc-low); color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-help > .ms { color: var(--primary); flex-shrink: 0; }
.login-help b { color: var(--text); } .login-help code { font-size: 12px; background: var(--md-sc-high); padding: 1px 5px; border-radius: 5px; }
@media (max-width: 420px) { .demo-roles { grid-template-columns: 1fr; } }

/* ---------- v3.2: collapsible sidebar + focus mode ---------- */
.app { transition: grid-template-columns .2s cubic-bezier(.2,0,0,1); }
.app.collapsed { grid-template-columns: 80px 1fr; }
.app.collapsed .side { padding: 12px 8px; overflow-x: hidden; }
.app.collapsed .brand { justify-content: center; padding: 8px 0 16px; }
.app.collapsed .brand > span:not(.logo), .app.collapsed .nav a .t, .app.collapsed .side-foot { display: none; }
.app.collapsed .nav .sec { font-size: 0; padding: 10px 0 4px; margin: 0 16px; border-top: 1px solid var(--line); }
.app.collapsed .nav .sec:first-child { border-top: 0; }
.app.collapsed .nav a { justify-content: center; padding: 0; height: 44px; border-radius: 22px; }
.app.collapsed .nav a .count { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.app.focus { grid-template-columns: 1fr; }
.app.focus .side, .app.focus .top { display: none; }
.app.focus .page { max-width: none; padding-top: 20px; }
.focus-exit { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; border: 0; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: 500 14px var(--font); cursor: pointer; box-shadow: var(--md-elev-3); }
.focus-exit kbd, .cmdk kbd, .cmdk-btn kbd { font: 500 11px var(--font); padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 14%, transparent); }
.cmdk-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 13px var(--font); cursor: pointer; white-space: nowrap; }
.cmdk-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.cmdk-btn .ms { font-size: 18px; width: auto; color: var(--primary); }
@media (max-width: 1100px) { .cmdk-btn { display: none; } }

/* ---------- Command bar ---------- */
.cmdk-bg { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.36); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; animation: fade .12s; backdrop-filter: blur(2px); }
.cmdk { width: 100%; max-width: 640px; background: var(--md-sc-high); border-radius: 24px; box-shadow: var(--md-elev-3); overflow: hidden; animation: pop .16s cubic-bezier(.2,0,0,1); }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cmdk-in .ms { color: var(--muted); font-size: 22px; width: auto; }
.cmdk-in input { flex: 1; border: 0; background: transparent; font-size: 17px; padding: 6px 0; outline: none; color: var(--text); }
.cmdk-in input:focus { outline: none; box-shadow: none; }
.cmdk-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 4px; }
.cmdk-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.cmdk-item > .ms { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--md-sc); color: var(--primary); font-size: 18px; flex-shrink: 0; }
.cmdk-item > span:not(.ms) { flex: 1; min-width: 0; display: grid; } .cmdk-item small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item.sel { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .cmdk-item:hover:not(.sel) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cmdk-foot kbd { margin-right: 2px; }

/* ---------- Patient peek drawer ---------- */
.peek-bg { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0); transition: background .2s; }
.peek-bg.open { background: rgba(0,0,0,.28); }
.peek { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--md-sc-low); box-shadow: var(--md-elev-3); border-radius: 24px 0 0 24px; transform: translateX(104%); transition: transform .24s cubic-bezier(.2,0,0,1); overflow-y: auto; }
.peek-bg.open .peek { transform: none; }
.peek-body { padding: 20px 22px 32px; }
.peek-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.peek-head h2 { font-size: 22px; font-weight: 400; margin: 0; }
.peek-head .icon-btn { margin-left: auto; align-self: flex-start; }
.peek-av { width: 52px; height: 52px; border-radius: 26px; background: var(--md-primary-container); color: var(--md-on-primary-container); display: grid; place-items: center; font-size: 19px; font-weight: 500; flex-shrink: 0; }
.peek-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.peek-sec { padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.peek-sec:last-child { border-bottom: 0; }
.peek-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.peek-sec h3 .ms { color: var(--primary); font-size: 20px; width: auto; }
.peek-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peek-list li { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--panel); }
.peek-list small, .peek-tl small { color: var(--muted); }
.peek-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.peek-tl li { display: grid; gap: 1px; position: relative; }
.peek-tl li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 5px; background: var(--primary); }
.peek-alert { padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); margin-bottom: 8px; display: grid; gap: 2px; }
.peek-alert.major, .peek-alert.contraindicated { background: var(--danger-soft); }
.peek-more { display: inline-block; margin: 2px 0 8px; font-weight: 500; }

/* ---------- Behind-schedule alerts ---------- */
.pace-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--warn-soft); color: var(--text); margin-bottom: 12px; border-left: 4px solid #e8a33d; }
.pace-alert > .ms { color: var(--warn); font-size: 24px; width: auto; }
.pace-alert > div { flex: 1; display: grid; } .pace-alert small { color: var(--muted); }
@media (max-width: 640px) { .pace-alert { flex-wrap: wrap; } .pace-alert > div { flex-basis: calc(100% - 40px); } .pace-alert .btn { margin-left: 36px; } }

/* ---------- Live queue board ---------- */
.q-help { font-size: 13px; margin: -4px 0 12px; line-height: 1.6; }
.q-help .ms { font-size: 18px; width: auto; vertical-align: -4px; }
.q-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.q-col { background: var(--md-sc-low); border-radius: 20px; padding: 12px; min-height: 120px; }
.q-col > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 4px 8px; }
.q-col > header small { width: 100%; }
.q-sub { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 4px 6px; }
.q-drop { display: grid; gap: 8px; min-height: 56px; border-radius: 14px; padding: 2px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: 2px; }
.is-dragging .q-drop { outline-color: var(--line); }
.q-drop.over { background: color-mix(in srgb, var(--primary) 8%, transparent); outline-color: var(--primary); }
.q-empty { display: grid; place-items: center; min-height: 52px; color: var(--muted); font-size: 13px; border-radius: 12px; }
.q-card { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 6px; border-radius: 14px; background: var(--panel); box-shadow: var(--md-elev-1); position: relative; }
.q-card + .q-card { margin-top: 0; }
.q-later .q-card, .q-col > .q-card { margin-bottom: 8px; }
.q-card[draggable="true"] { cursor: grab; }
.q-card.dragging { opacity: .45; }
.q-card.drop-before { box-shadow: 0 -3px 0 var(--primary), var(--md-elev-1); }
.q-card.in_consult { border-left: 4px solid var(--violet); }
.q-card.booked { box-shadow: none; border: 1px dashed var(--line); background: transparent; }
.q-grip { color: var(--muted); display: grid; place-items: center; } .q-grip .ms { font-size: 20px; width: auto; }
.q-main { flex: 1; min-width: 0; }
.q-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.q-tok { font: 600 12px var(--font); color: var(--muted); min-width: 22px; }
.q-name { font-weight: 500; color: var(--text); }
.q-eta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--ok); background: var(--ok-soft); padding: 1px 8px 1px 6px; border-radius: 10px; }
.q-eta .ms { font-size: 14px; width: auto; }
.q-eta.late { color: var(--warn); background: var(--warn-soft); }
.q-act { display: flex; align-items: center; gap: 4px; }
.icon-btn.sm { width: 32px; height: 32px; } .icon-btn.sm .ms { font-size: 20px; }
.q-later { margin-top: 10px; } .q-later summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px; list-style-position: inside; }
.q-later[open] summary { margin-bottom: 8px; }
.q-zones { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 920px; margin: 0 auto; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--md-sc-high) 92%, transparent); backdrop-filter: blur(8px); box-shadow: var(--md-elev-2); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .15s, transform .15s; }
.is-dragging .q-zones { opacity: 1; pointer-events: auto; transform: none; }
.q-zone { flex: 1; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 14px; border: 2px dashed var(--line); color: var(--muted); font-weight: 500; font-size: 13px; }
.q-zone.over { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* ---------- Safety Shield decision checkpoint ---------- */
.sh-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.sh-decide > b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.sh-escalation { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--info-soft); color: var(--text); font-size: 13px; display: flex; gap: 8px; }
.sh-escalation .ms { color: var(--info); }
.dec-med { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--md-sc-low); margin-bottom: 8px; }
.dec-med > div { flex: 1; display: grid; } .dec-med small { color: var(--muted); }

/* ---------- Pastel status badges; stark red / amber only for critical clinical or money problems ---------- */
:root { --pastel-blue: #e3edfd; --pastel-blue-t: #2d5aa8; --pastel-green: #def5e2; --pastel-green-t: #23703a; --pastel-violet: #efe7fd; --pastel-violet-t: #5f4a9a;
  --pastel-teal: #dcf3ef; --pastel-teal-t: #1d6b62; --pastel-sand: #f7efd9; --pastel-sand-t: #77612a; --pastel-rose: #fbe7ea; --pastel-rose-t: #9b3b4b; --pastel-grey: #eceff1; --pastel-grey-t: #5a6470;
  --alarm-red: #c62828; --alarm-amber: #e65100; }
:root[data-theme="dark"] { --pastel-blue: #1d2b42; --pastel-blue-t: #adc8f5; --pastel-green: #1b3323; --pastel-green-t: #9ad9a8; --pastel-violet: #2c2540; --pastel-violet-t: #cdbcf5;
  --pastel-teal: #18332f; --pastel-teal-t: #93d8cc; --pastel-sand: #352d18; --pastel-sand-t: #e3cf98; --pastel-rose: #3a2228; --pastel-rose-t: #f2b3be; --pastel-grey: #2a2f34; --pastel-grey-t: #b5bec8;
  --alarm-red: #ff6b5e; --alarm-amber: #ffa040; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pastel-blue: #1d2b42; --pastel-blue-t: #adc8f5; --pastel-green: #1b3323; --pastel-green-t: #9ad9a8; --pastel-violet: #2c2540; --pastel-violet-t: #cdbcf5;
  --pastel-teal: #18332f; --pastel-teal-t: #93d8cc; --pastel-sand: #352d18; --pastel-sand-t: #e3cf98; --pastel-rose: #3a2228; --pastel-rose-t: #f2b3be; --pastel-grey: #2a2f34; --pastel-grey-t: #b5bec8;
  --alarm-red: #ff6b5e; --alarm-amber: #ffa040; } }
.badge { background: var(--pastel-grey); color: var(--pastel-grey-t); }
.badge.info { background: var(--pastel-blue); color: var(--pastel-blue-t); }
.badge.ok { background: var(--pastel-green); color: var(--pastel-green-t); }
.badge.violet { background: var(--pastel-violet); color: var(--pastel-violet-t); }
.badge.teal { background: var(--pastel-teal); color: var(--pastel-teal-t); }
.badge.warn, .badge.moderate, .badge.sand { background: var(--pastel-sand); color: var(--pastel-sand-t); }
.badge.danger, .badge.rose { background: var(--pastel-rose); color: var(--pastel-rose-t); }
.badge.primary { background: var(--pastel-teal); color: var(--pastel-teal-t); }
/* Reserved: needs action now */
.badge.critical, .badge.contraindicated, .badge.major, .badge.solid-danger, .badge.alarm { background: var(--alarm-red); color: #fff; font-weight: 600; }
.badge.amber { background: var(--alarm-amber); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .badge.critical, :root[data-theme="dark"] .badge.contraindicated, :root[data-theme="dark"] .badge.major, :root[data-theme="dark"] .badge.solid-danger, :root[data-theme="dark"] .badge.alarm, :root[data-theme="dark"] .badge.amber { color: #1a0000; }
.sc-live { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--pastel-violet); color: var(--pastel-violet-t); font-size: 13.5px; }
.sc-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--alarm-red); flex-shrink: 0; animation: scpulse 1.2s ease-in-out infinite; }
@keyframes scpulse { 50% { opacity: .3; transform: scale(.8); } }
.sc-live[hidden], .focus-exit[hidden] { display: none; }

/* ---------- v3.3 stock grid ---------- */
table.zebra tbody tr:nth-child(even):not(.drawer-row) > td { background: color-mix(in srgb, var(--text) 3%, transparent); }
table.zebra tbody tr:not(.drawer-row):hover > td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.stock-grid tr.open > td { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.stock-grid td { vertical-align: middle; }
.m-cell { display: flex; align-items: center; gap: 10px; }
.qty-cell { display: flex; align-items: center; gap: 6px; min-width: 190px; }
.qv { flex: 1; display: grid; gap: 4px; min-width: 96px; }
.qbtn { width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 16px/1 var(--font); cursor: pointer; display: grid; place-items: center; opacity: .55; transition: opacity .15s, background .15s; }
tr:hover .qbtn, .qbtn:focus-visible { opacity: 1; } .qbtn:hover { background: var(--md-secondary-container); }
.sbar { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: visible; }
.sbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #2e9d57; }
.sbar.near i { background: #e2a72e; } .sbar.crit i, .sbar.out i { background: var(--alarm-red); }
.sbar.crit, .sbar.out { animation: sbpulse 1.6s ease-in-out infinite; }
@keyframes sbpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--alarm-red) 18%, transparent); } }
.sbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); opacity: .6; border-radius: 1px; }
.exp-note { color: var(--alarm-red); } .promo-note { color: var(--pastel-green-t); display: inline-flex; align-items: center; gap: 2px; } .promo-note .ms { font-size: 14px; width: auto; }
.cd { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 8px; font: 600 12px var(--mono, ui-monospace, monospace); background: var(--pastel-grey); color: var(--pastel-grey-t); white-space: nowrap; }
.cd .ms { font-size: 15px; width: auto; }
.cd-hot { background: #b3123b; color: #fff; } .cd-dead { background: #3a3a3a; color: #fff; }
:root[data-theme="dark"] .cd-hot { background: #ff5c7d; color: #2a0010; } :root[data-theme="dark"] .cd-dead { background: #ddd; color: #111; }
.price-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.spark-btn { border: 0; background: transparent; padding: 2px; border-radius: 6px; cursor: pointer; display: grid; } .spark-btn:hover { background: var(--md-secondary-container); }
.spark polyline { fill: none; stroke: var(--primary); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.spark.up polyline { stroke: var(--alarm-amber); } .spark.down polyline { stroke: #2e9d57; }
.rack-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; border: 1px dashed var(--line); background: transparent; color: var(--text); border-radius: 8px; padding: 2px 8px 2px 4px; font: 600 12px var(--font); cursor: pointer; }
.rack-btn .ms { font-size: 16px; width: auto; color: var(--primary); } .rack-btn:hover { border-style: solid; border-color: var(--primary); }
.chev { color: var(--muted); margin-left: 6px; display: inline-grid; vertical-align: middle; }
tr.flash-ok > td { animation: flashok 1.6s ease-out; }
@keyframes flashok { 0%, 30% { background: color-mix(in srgb, #2e9d57 38%, transparent); } 100% { background: transparent; } }
.drawer-row > td { padding: 0 8px 12px !important; background: transparent !important; }
.batch-drawer { border-radius: 14px; background: var(--md-sc-low); padding: 12px 14px; border: 1px solid var(--line); animation: pop .15s; }
.bd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bd-table { width: 100%; } .bd-table th { font-size: 12px; } .bd-table tr.past td { opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.chip-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 500 13px var(--font); cursor: pointer; }
.fchip .ms { font-size: 18px; width: auto; color: var(--muted); }
.fchip .n { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--pastel-grey); color: var(--pastel-grey-t); }
.fchip.expiring .ms, .fchip.out .ms { color: var(--alarm-red); } .fchip.low .ms { color: var(--alarm-amber); } .fchip.cold .ms { color: var(--info); }
.fchip:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.fchip.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; } .fchip.on .ms { color: inherit; }
.scan-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-radius: 16px; margin-bottom: 12px; background: var(--md-sc-low); border: 1px solid var(--line); transition: background .2s, border-color .2s; font-size: 13.5px; }
.scan-dot { width: 10px; height: 10px; border-radius: 5px; background: #2e9d57; box-shadow: 0 0 0 0 #2e9d5766; animation: scanpulse 2s infinite; }
@keyframes scanpulse { 70% { box-shadow: 0 0 0 8px #2e9d5700; } }
.scan-bar.hit { background: color-mix(in srgb, #2e9d57 18%, var(--panel)); border-color: #2e9d57; }
.scan-bar.miss { background: color-mix(in srgb, var(--alarm-red) 14%, var(--panel)); border-color: var(--alarm-red); } .scan-bar.miss .scan-dot { background: var(--alarm-red); }
.cold-strip { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cold-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; background: var(--panel); color: var(--text); font-size: 12.5px; text-decoration: none; border: 1px solid var(--line); }
.cold-chip.breach { border-color: var(--alarm-red); }
.cold-dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; background: #2e9d57; box-shadow: 0 0 0 3px #2e9d5722; }
.cold-dot.breach { background: var(--alarm-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alarm-red) 25%, transparent); animation: sbpulse 1.4s infinite; }
.cold-dot.offline { background: #9e9e9e; box-shadow: none; }
.cosign { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pastel-rose); color: var(--pastel-rose-t); }
.cosign > .ms { font-size: 28px; width: auto; } .cosign > div { display: grid; }
.floor { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--md-sc); margin: 6px 0 14px; }
.floor-door { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; justify-content: center; border-bottom: 2px dashed var(--line); padding-bottom: 6px; }
.aisle { display: flex; gap: 4px; align-items: center; opacity: .55; } .aisle.on { opacity: 1; }
.aisle-l { width: 26px; font-weight: 700; color: var(--muted); display: grid; place-items: center; } .aisle.on .aisle-l { color: var(--primary); }
.shelf { flex: 1; height: 30px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.shelf.hit { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; animation: sbpulse 1.4s infinite; box-shadow: 0 0 0 0 transparent; }
.aisle.fridge .shelf { background: var(--pastel-blue); color: var(--pastel-blue-t); }
.cold-card .card-head { gap: 12px; align-items: center; }
.cold-light { width: 18px; height: 18px; border-radius: 9px; background: #2e9d57; box-shadow: 0 0 0 5px #2e9d5726, 0 0 14px #2e9d5799; flex-shrink: 0; }
.cold-light.breach { background: var(--alarm-red); box-shadow: 0 0 0 5px color-mix(in srgb, var(--alarm-red) 22%, transparent), 0 0 14px var(--alarm-red); animation: sbpulse 1.4s infinite; }
.cold-light.offline { background: #9e9e9e; box-shadow: none; }
.cold-now { margin-left: auto; text-align: right; display: grid; } .cold-now b { font-size: 26px; font-weight: 400; }
@media (max-width: 820px) { .scan-bar .muted { flex-basis: 100%; } .cold-strip { margin-left: 0; } .qty-cell { min-width: 160px; } }
@media (max-width: 640px) { .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .fchip { flex-shrink: 0; } .chip-sep { flex-shrink: 0; } }