:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #111114;
  --ink2: #45454a;
  --muted: #73737a;
  --line: #dedee3;
  --blue: #1769e0;
  --blue-d: #0f57c2;
  --green: #18864b;
  --green-bg: #edf8f1;
  --amber: #8a5b08;
  --amber-bg: #fff8e8;
  --indigo: #1769e0;
  --shadow: none;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  font-feature-settings: "kern";
}
*, *::before, *::after { box-sizing: border-box; }
button, input { font-family: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(23,105,224,.28); outline-offset: 3px; }

.app { max-width: none; padding-top: env(safe-area-inset-top); background: var(--bg); }
.top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(17,17,20,.11);
  border-color: rgba(17,17,20,.11);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-logo { display: block; object-fit: contain; object-position: left center; }
.narcosecure-logo { width: 80px; height: 52px; object-fit: contain; object-position: left center; }
.dispense-logo { width: 184px; height: 38px; }
.brand-context { padding-left: 16px; border-left: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge { border-radius: 8px; padding: 7px 10px; background: transparent; color: #7b5c20; font-size: 10px; font-weight: 650; letter-spacing: .04em; }

.body { grid-template-columns: minmax(0,1fr) 310px; min-width: 0; width: 100%; }
.main { justify-content: center; min-width: 0; padding: clamp(32px,5vw,72px); background: var(--bg); }
.main > * { width: min(100%,760px); margin-left: auto; margin-right: auto; }
.step-eyebrow { color: var(--blue); font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.step-title { margin: 10px auto 8px; font-size: clamp(32px,4vw,48px); font-weight: 650; letter-spacing: -.035em; }
.step-sub { max-width: 680px; color: var(--ink2); font-size: 17px; line-height: 1.48; }
.stage { flex: none; min-height: 0; margin-top: 34px; gap: 16px; }

.scan, .card, .line, .finish { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; background: var(--surface); }
.scan { min-height: 116px; padding: 22px 24px; gap: 18px; }
.scan:hover { border-color: #b8b8c0; }
.product-scan { width: 100%; color: inherit; text-align: left; }
.scan .ic, .line .ic { width: 54px; height: 54px; border-radius: 50%; background: #edf4ff; color: var(--blue); }
.scan .ic svg { width: 27px; height: 27px; }
.scan h3 { font-size: 18px; font-weight: 650; }
.scan p { color: var(--muted); }
.pulse { animation: none; }
.scan .go { color: var(--blue); }
.rx { padding: 22px 24px; }
.rx .who { margin-bottom: 18px; padding-bottom: 18px; }
.rx .who .av { background: #eeeef1; color: var(--ink); font-weight: 650; }
.rx .who .ok, .st.ok { color: var(--green); }
.f label { font-weight: 650; letter-spacing: .05em; }
.f .v { font-size: 19px; font-weight: 650; }
.note { border-color: #e2e2e7; border-radius: 12px; background: #f7f7f9; }
.note.phys { background: #f7f7f9; }
.note svg, .note.phys svg { color: var(--blue); }
.request-card .who { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.request-state { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--amber); font-size: 13px; font-weight: 650; }
.request-state span { width: 8px; height: 8px; border-radius: 50%; background: #d79019; animation: status-pulse 1.4s ease-in-out infinite; }
.status-copy { display: grid; gap: 5px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.status-copy b { font-size: 16px; font-weight: 650; }
.status-copy span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.unlock-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #b9ddc7; border-radius: 14px; background: var(--green-bg); color: var(--green); }
.unlock-banner > svg { width: 34px; height: 34px; flex: none; }
.unlock-banner div { display: grid; gap: 3px; }
.unlock-banner span { font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.unlock-banner b { color: var(--ink); font-size: 19px; font-weight: 650; }
@keyframes status-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.actions { margin-top: 18px; }
.btn { min-height: 54px; border-radius: 12px; padding: 15px 22px; font-size: 16px; font-weight: 650; }
.btn.primary { background: var(--blue); }
.btn.primary { color: #fff; }
.btn.primary:active { background: var(--blue-d); }
.btn.ghost { background: #e8e8ed; }

.record { min-width: 0; border-color: rgba(17,17,20,.11); background: #fbfbfc; padding: 24px; }
.record h4 { font-size: 12px; font-weight: 650; }
.record .loc { margin-bottom: 18px; }
.ev { border-color: #e9e9ed; }
.ev .d { box-shadow: none; width: 8px; height: 8px; }
.ev .line::before { width: 1px; background: #d9d9df; }
.ev .txt b { font-weight: 600; }
.reset { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }

.intro {
  padding: max(40px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(48px, env(safe-area-inset-left));
  gap: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
}
.intro .rev { top: max(24px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right)); color: #806229; font-size: 10px; font-weight: 650; letter-spacing: .05em; }
.welcome-logo { width: 190px; height: 144px; object-fit: contain; object-position: center; margin-bottom: 30px; }
.intro h1 { color: var(--ink); font-size: clamp(48px,7vw,76px); font-weight: 650; letter-spacing: -.045em; line-height: 1.02; }
.intro p { max-width: 660px; margin-top: 22px; color: var(--ink2); font-size: 17px; line-height: 1.55; }
.intro .legacy-detail { display: none; }
.intro .start { align-self: center; min-width: 180px; justify-content: center; margin-top: 34px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 650; }
.install-hint { margin-top: 18px; color: var(--muted); font-size: 12px; }
.powered-by { position: absolute; left: max(28px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.powered-by img { width: 104px; height: 28px; object-fit: contain; }

.dispense-page { overflow: auto; }
.dispense-page .app { min-height: 100vh; display: flex; flex-direction: column; max-width: none; }
.dispense-page .top { position: sticky; top: 0; z-index: 5; }
.dispense-page .main { width: min(100%,980px); margin: 0 auto; padding: 30px clamp(24px,5vw,56px) max(48px,env(safe-area-inset-bottom)); gap: 0; }
.dispense-page .fromns { margin-bottom: 22px; border: 1px solid #dcdce2; border-radius: 12px; background: #fff; color: var(--ink2); }
.dispense-page #lines { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.dispense-page .line { margin: 0; padding: 20px 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.dispense-page .line:last-child { border-bottom: 0; }
.dispense-page .line .hd { display: flex; align-items: center; gap: 14px; }
.dispense-page .line .ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #edf4ff; color: var(--blue); }
.dispense-page .line .ic svg { width: 24px; height: 24px; }
.dispense-page .line .nm { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dispense-page .line .nm b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; font-weight: 650; }
.dispense-page .line .nm > span { color: var(--muted); font-size: 12px; }
.dispense-page .line .st { flex: none; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.dispense-page .line .st svg { width: 17px; height: 17px; }
.dispense-page .nsbadge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber); font-size: 9px; font-weight: 650; line-height: 1; }
.dispense-page .nsbadge svg { width: 12px; height: 12px; flex: none; }
.dispense-page .line .body { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid #ececf0; }
.dispense-page .line.open .body { display: block; }
.dispense-page .line .btn.big { width: auto; min-height: 44px; margin: 16px 0 0 60px; padding: 11px 18px; }
.dispense-page .finish { display: none; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; border: 1px solid #cfe6d7; border-radius: 16px; background: #fff; padding: 34px; text-align: center; }
.dispense-page .finish.show { display: flex; }
.dispense-page .finish .big { width: 62px; height: 62px; }
.dispense-page .finish .big svg { width: 32px; height: 32px; }
.dispense-page .finish .btn.big { width: auto; min-width: 320px; }

[hidden] { display: none !important; }
.page-kicker { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.presence { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ececf0; color: var(--ink); font-size: 13px; font-weight: 700; }
.cps-page .btn, .dispense-page .btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }
.cps-page .btn svg, .dispense-page .btn svg { width: 18px; height: 18px; }

/* CPS pharmacist authorization */
.cps-page { min-height: 100%; overflow: auto; }
.cps-shell { min-height: 100vh; background: var(--bg); }
.cps-logo { width: 124px; height: 34px; }
.cps-user, .workstation-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cps-user div, .workstation-user div { display: grid; gap: 2px; text-align: right; }
.cps-user b, .workstation-user b { font-size: 13px; }
.cps-user small, .workstation-user small { color: var(--muted); font-size: 11px; }
.cps-layout { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: calc(100vh - 72px); }
.cps-nav { padding: 28px 18px; border-right: 1px solid var(--line); background: #fbfbfc; }
.nav-label { padding: 0 12px 12px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-item { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink2); text-align: left; font: 600 13px inherit; cursor: default; }
.nav-item.active { background: #eaf2ff; color: #125bc5; }
.nav-count { float: right; min-width: 22px; padding: 3px 7px; border-radius: 999px; background: var(--blue); color: #fff; text-align: center; font-size: 10px; }
.shift-card { display: grid; gap: 5px; margin-top: 34px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.shift-card span, .shift-card small { color: var(--muted); font-size: 11px; }
.shift-card b { font-size: 14px; }
.cps-page main { min-width: 0; padding: 54px clamp(34px,6vw,88px); }
.cps-content { width: min(100%,930px); margin: 0 auto; }
.cps-content h1, .workstation-main h1 { margin: 8px 0 8px; color: var(--ink); font-size: clamp(32px,4vw,46px); font-weight: 650; letter-spacing: -.035em; }
.page-lead, .worklist-heading p, .order-title-row p { margin: 0; color: var(--muted); font-size: 16px; }
.review-card { margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.review-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.review-head > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.review-head small { grid-column: 2; color: var(--muted); }
.priority-dot { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: #d28b14; }
.request-id { padding: 7px 10px; border-radius: 7px; background: #f0f0f3; font-size: 12px; font-weight: 700; }
.review-grid { display: grid; grid-template-columns: 1.4fr .7fr; gap: 24px 42px; padding: 28px 24px; }
.review-grid div, .decision-summary div { display: grid; gap: 6px; }
.review-grid label, .operator-row label, .decision-summary label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.review-grid strong { font-size: 19px; font-weight: 650; }
.review-grid strong small { color: var(--ink2); font-size: 13px; }
.operator-row { display: flex; align-items: center; gap: 13px; margin: 0 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.operator-row > div { display: grid; gap: 3px; }
.operator-row small { color: var(--muted); font-size: 12px; }
.verified { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; font-weight: 700; }
.verified svg { width: 17px; height: 17px; }
.clinical-note { display: flex; gap: 13px; margin: 0 24px 24px; padding: 16px; border-radius: 12px; background: #f4f7fb; }
.clinical-note > svg { width: 20px; color: var(--blue); flex: none; }
.clinical-note div { display: grid; gap: 4px; }
.clinical-note span { color: var(--ink2); font-size: 13px; line-height: 1.45; }
.decision-bar { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line); background: #fafafd; }
.success-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 80px; text-align: center; }
.success-mark { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 26px; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.success-mark svg { width: 42px; height: 42px; }
.decision-summary { width: min(100%,760px); display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: left; }
.decision-summary div { padding: 22px; border-right: 1px solid var(--line); }
.decision-summary div:last-child { border-right: 0; }
.decision-summary b { font-size: 14px; }
.return-queue { margin-top: 22px; }

/* DispenseSecure local workstation */
.workstation-main { width: min(100%,1180px); margin: 0 auto; padding: 48px clamp(32px,5vw,72px) 70px; }
.worklist-heading, .order-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.worklist-stat, .order-progress { display: grid; min-width: 92px; text-align: right; }
.worklist-stat b, .order-progress b { font-size: 28px; line-height: 1; }
.worklist-stat span, .order-progress span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.filter-row { display: flex; gap: 8px; margin: 30px 0 16px; }
.filter { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink2); font: 600 12px inherit; }
.filter.active { border-color: #b8cff3; background: #eef4ff; color: #125bc5; }
.filter span { margin-left: 6px; color: var(--muted); }
.order-list { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.order-card { position: relative; display: grid; grid-template-columns: 150px minmax(220px,1fr) minmax(260px,1.1fr) auto; align-items: center; gap: 22px; min-height: 108px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.order-card:last-child { border-bottom: 0; }
.order-card.identified { background: #fcfdff; }
.order-accent { display: none; }
.order-id, .order-lines, .identity-state { display: grid; gap: 4px; }
.order-id span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.order-id b { font-size: 20px; }
.order-id small, .order-lines span, .identity-state small { color: var(--muted); font-size: 12px; }
.order-lines b, .identity-state b { font-size: 13px; }
.identity-state { grid-template-columns: 34px 1fr; align-items: center; }
.identity-state div { display: grid; gap: 4px; }
.status-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.status-check svg { width: 17px; height: 17px; }
.muted-order { grid-template-columns: 150px 1fr auto; color: #66666d; }
.quiet-status { color: var(--muted); font-size: 12px; font-weight: 650; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px; padding: 0; border: 0; background: transparent; color: var(--blue); font: 650 13px inherit; cursor: pointer; }
.back-link svg { width: 17px; height: 17px; }
.order-title-row { margin-bottom: 28px; }
.dispense-page .fromns { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 17px 18px; }
.dispense-page .fromns > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.dispense-page .fromns > span svg { width: 18px; height: 18px; }
.dispense-page .fromns div { display: grid; gap: 4px; }
.dispense-page .fromns div span { color: var(--muted); font-size: 12px; }
.dispense-page .fromns strong { color: var(--green); font-size: 12px; }
.controlled-line { background: #fcfdff; }
.count-result { display: grid; grid-template-columns: 100px 1fr 190px; align-items: center; gap: 22px; }
.count-number { font-size: 36px; font-weight: 700; }
.count-number small { color: var(--muted); font-size: 16px; }
.verified-copy { display: flex; align-items: center; gap: 10px; color: var(--green); }
.verified-copy > svg { width: 22px; height: 22px; }
.verified-copy span { display: grid; gap: 2px; }
.verified-copy small { color: var(--muted); font-size: 11px; }
.standard-result { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 13px; }
.standard-result svg { width: 18px; height: 18px; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: #c8703f; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }

@media (display-mode: standalone) { .install-hint { display: none; } }
@media (orientation: portrait), (max-width: 900px) {
  .narcosecure-page .body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(180px,34vh); }
  .narcosecure-page .main { padding: 38px 40px 28px; }
  .narcosecure-page .record { max-height: none; border-left: 0; border-top: 1px solid var(--line); padding: 14px 40px max(16px,env(safe-area-inset-bottom)); }
  .narcosecure-page .record .loc { margin-bottom: 10px; }
  /* wrap the chain-of-custody events into rows so every event stays on-screen
     for filming (no horizontal scroll that pushes proof events off-frame) */
  .narcosecure-page .log { display: flex; flex-flow: row wrap; align-content: flex-start; gap: 4px 24px; min-width: 0; max-width: 100%; overflow: hidden; }
  .narcosecure-page .ev { flex: 0 1 calc(33.333% - 18px); min-width: 0; border-bottom: 0; border-right: 0; padding: 7px 0; align-items: center; }
  .narcosecure-page .ev .line { align-self: center; }
  .narcosecure-page .ev .line::before { display: none; }
  .step-title { font-size: clamp(32px,5vw,44px); }
}
@media (max-width: 650px) {
  .top { min-height: 64px; padding-left: 16px; padding-right: 16px; }
  .brand-context, .badge { display: none; }
  .narcosecure-logo { width: 72px; }
  .dispense-logo { width: 158px; }
  .narcosecure-page .main { padding: 28px 20px 20px; }
  .narcosecure-page .record { padding-left: 20px; padding-right: 20px; }
  .grid { grid-template-columns: 1fr; }
  .resid { flex-direction: column; align-items: stretch; }
  .intro { padding-left: 24px; padding-right: 24px; }
  .intro .rev { left: 20px; right: 20px; text-align: center; }
  .welcome-logo { width: 180px; }
  .powered-by { display: none; }
  .dispense-page .main { padding-left: 16px; padding-right: 16px; }
  .dispense-page .line .hd { align-items: flex-start; }
  .dispense-page .line .st { font-size: 0; }
  .dispense-page .line .st svg { width: 20px; height: 20px; }
  .dispense-page .line .btn.big { width: 100%; margin-left: 0; }
  .dispense-page .finish .btn.big { min-width: 0; width: 100%; }
}