@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700 900;
}

:root {
  --blue: #00205b;
  --green: #009f4d;
  --red: #be0027;
  --grey: #6a737b;
  --ink: #101820;
  --muted: #6a737b;
  --line: #d9dde1;
  --paper: #f4f7f8;
  --panel: #ffffff;
  --soft-blue: #eef3fb;
  --soft-green: #ebf8f1;
  --shadow: 0 20px 60px rgba(0, 32, 91, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
.landing-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), #176b78 60%, var(--green));
}
.landing-shell {
  width: min(980px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: center;
  padding: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 24px 70px rgba(0, 20, 55, .28);
}
.landing-brand { padding: 18px; }
.landing-eyebrow { margin: 0 0 10px; color: var(--green); font-weight: 900; letter-spacing: .12em; }
.landing-shell h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); }
.landing-login { padding: 28px; border-radius: 10px; background: var(--soft-blue); }
.landing-login h2 { margin-bottom: 18px; }
.landing-login .button, .landing-login .generate-button { width: 100%; text-align: center; }
.landing-login .closed-banner { margin-bottom: 12px; font-size: .8rem; }
.landing-login input { width: 100%; }
.landing-login p { margin-bottom: 12px; }
.landing-login label { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 800; }
.landing-login .stack-form { gap: 8px; }
.landing-login .stack-form button { margin-top: 4px; }
.landing-login-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.landing-login-actions button { width: 100%; }
@media (max-width: 720px) {
  .landing-shell { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .landing-brand { padding: 10px; text-align: center; }
}
@media (max-width: 420px) { .landing-login-actions { grid-template-columns: 1fr; } }
.permission-denied { max-width: 620px; margin: 10vh auto; padding: 36px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); }
.permission-denied h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.permission-denied p:not(.eyebrow) { color: var(--grey); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1.02; }
h2 { font-size: clamp(1.15rem, 1.5vw, 1.6rem); }

.app-bar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 44px);
  background: var(--blue);
  color: #fff;
  border-bottom: 4px solid var(--green);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand { font-weight: 900; font-size: 1.2rem; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav a, .button, button, .generate-button, .ghost-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 46px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
nav a { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; }
.logout-link .logout-icon {
  display: none;
}
.queue-body .app-bar {
  min-height: 54px;
  justify-content: flex-end;
  padding: 8px clamp(14px, 3vw, 28px);
}
.queue-body .brand,
.queue-body .app-bar nav a:not(.logout-link) {
  display: none;
}
.queue-body .app-bar nav {
  margin-left: auto;
}
.queue-body .logout-link {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 9px;
  border-radius: 4px;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.queue-body .logout-link .logout-icon {
  display: block;
}
.queue-body .logout-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.room-body .app-bar {
  min-height: 54px;
  justify-content: flex-end;
  padding: 8px clamp(14px, 3vw, 28px);
}
.room-body .brand { display: none; }
.room-body .app-bar nav { margin-left: auto; }
.logout-form { margin: 0; }
.room-body .logout-link {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 9px;
  border-radius: 4px;
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.room-body .logout-link .logout-icon { display: block; }
.room-body .logout-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.button, button { background: #fff; color: var(--blue); }
.primary, button.primary, .generate-button { background: var(--green); color: #fff; border-color: var(--green); }
.ghost-button { background: #fff; color: var(--blue); border-color: rgba(0,32,91,.28); width: 100%; }
.generate-button { width: 100%; font-size: 1.05rem; }
.page { padding: clamp(18px, 3vw, 36px); max-width: 1440px; margin: 0 auto; }
.messages { padding: 10px clamp(16px, 4vw, 44px); }
.messages p { margin: 6px 0; padding: 10px 12px; background: var(--soft-green); border-left: 4px solid var(--green); }
.toolbar, .screen-head, .generator-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.actions, .card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.center { justify-content: center; }
.eyebrow, .mode-kicker { text-transform: uppercase; color: var(--grey); font-weight: 900; letter-spacing: .08em; margin: 0 0 8px; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dashboard-section-head { margin: 24px 0 10px; }
.dashboard-section-head h2 { margin: 0 0 4px; color: var(--blue); }
.dashboard-section-head p:not(.eyebrow) { margin: 0; color: var(--grey); font-size: .85rem; }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.metric-strip article, .service-card, .auth-panel, .queue-main, .side-panel, .current-room, .public-status, .data-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 32, 91, .06);
}
.metric-strip span { display: block; color: var(--muted); font-weight: 800; font-size: .85rem; }
.metric-strip b { display: block; font-size: clamp(1.7rem, 3vw, 3rem); margin-top: 4px; color: var(--blue); }
.service-card h2 { margin-bottom: 4px; color: var(--blue); }
.room-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.room-list a { border: 1px solid var(--line); padding: 8px 10px; border-radius: 6px; background: #f9fbfb; }
.room-body .page { max-width: 1280px; }
.operations-body .page { padding: 20px 24px; max-width: 1560px; }
.operations-body .toolbar { margin-bottom: 14px; }
.operations-body .toolbar h1 { margin-bottom: 4px; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.operations-body .toolbar p { margin-bottom: 0; font-size: .78rem; color: var(--grey); }
.operations-body .toolbar .button { min-height: 34px; padding: 7px 11px; font-size: .72rem; }
.operations-body .toolbar .actions { gap: 6px; align-items: center; }
.operations-body .toolbar .actions .button { border-radius: 5px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 3px 8px rgba(0, 32, 91, .08); }
.operations-body .toolbar .actions .button:not(.primary) { background: var(--soft-blue); border-color: #cbd8eb; }
.operations-body .app-bar { min-height: 54px; padding: 8px 24px; }
.operations-body .app-bar nav { gap: 5px; align-items: center; }
.operations-body .app-bar nav a { min-height: 34px; padding: 6px 10px; border-radius: 5px; font-size: .68rem; }
.operations-body .app-bar .logout-link { width: 34px; min-width: 34px; min-height: 34px; padding: 7px; border-radius: 5px; background: var(--red); border-color: var(--red); color: #fff; }
.operations-body .app-bar .logout-link .logout-icon { display: block; }
.operations-body .app-bar .logout-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.operations-body .metric-strip { gap: 8px; margin-bottom: 14px; }
.operations-body .metric-strip article { padding: 10px 12px; border-radius: 6px; }
.operations-body .metric-strip span { font-size: .68rem; }
.operations-body .metric-strip b { font-size: 1.35rem; }
.operations-body .dashboard-section-head { margin: 14px 0 8px; }
.operations-body .dashboard-section-head h2 { font-size: 1.05rem; }
.operations-body .dashboard-section-head p:not(.eyebrow) { font-size: .72rem; }
.operations-body .operations-service-heading { margin-top: 22px; }
.operations-body .service-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.operations-body .service-card { padding: 11px; border-radius: 6px; }
.operations-body .service-card h2 { margin-bottom: 3px; font-size: .9rem; }
.operations-body .service-card > p { margin-bottom: 8px; color: var(--grey); font-size: .68rem; }
.operations-body .card-actions { gap: 5px; }
.operations-body .card-actions a { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: .66rem; line-height: 1.1; text-align: center; }
.operations-body .card-actions a.primary { border-color: var(--green); }
.operations-body .room-list { gap: 4px; margin-top: 8px; }
.operations-body .room-list a { padding: 4px 6px; border-radius: 4px; font-size: .62rem; }
.room-body .screen-head h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 6px; }
.room-control-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 20px; align-items: start; }
.room-current-panel { min-height: 390px; display: flex; flex-direction: column; justify-content: center; }
.room-current-panel.is-empty { border-style: dashed; box-shadow: none; }
.room-token-number { color: var(--blue); font-size: clamp(4rem, 9vw, 8rem); line-height: 1; margin: 12px 0 18px; overflow-wrap: anywhere; }
.room-status { width: fit-content; margin-bottom: 24px; padding: 10px 14px; border-left: 5px solid var(--blue); background: var(--soft-blue); font-weight: 900; }
.room-status.in-service { border-color: var(--green); background: var(--soft-green); }
.room-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.room-actions form { margin: 0; }
.missed-button { color: var(--red); border-color: var(--red); }
.room-empty-title { color: var(--blue); font-size: 2rem; margin-bottom: 8px; }
.room-recent-outcome { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.room-recent-outcome span { color: var(--muted); font-size: .85rem; font-weight: 900; text-transform: uppercase; }
.room-recent-outcome b { color: var(--blue); font-size: 1.2rem; }
.room-recent-outcome strong { justify-self: end; }
.room-recent-outcome .missed { color: var(--red); }
.room-recent-outcome .completed { color: var(--green); }
.room-upcoming-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.room-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.room-panel-heading h2 { margin: 0; }
.room-panel-heading strong { display: grid; place-items: center; min-width: 42px; height: 42px; background: var(--blue); color: #fff; border-radius: 4px; }
.room-upcoming-panel .queue-row { align-items: center; }
.room-upcoming-panel .queue-row > div { display: flex; align-items: center; gap: 12px; }
.room-upcoming-panel .queue-row b { color: var(--blue); font-size: 1.3rem; }
.room-upcoming-panel .queue-row.is-next { border-left: 5px solid var(--green); background: var(--soft-green); }
.queue-rank { min-width: 40px; color: var(--muted); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.room-empty-queue { padding: 20px 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
.room-body .app-bar nav { align-items: center; }
.room-switch-link { min-height: 42px; padding: 9px 13px; }
.doctor-room-select { max-width: 980px; margin: 0 auto; }
.doctor-room-select > h1 { color: var(--blue); font-size: clamp(2.3rem, 5vw, 4rem); margin-bottom: 30px; }
.doctor-room-group { margin-bottom: 30px; }
.doctor-room-group h2 { color: var(--blue); }
.doctor-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.doctor-room-button { min-height: 112px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px; background: #fff; border: 2px solid var(--line); border-radius: 6px; }
.doctor-room-button:hover, .doctor-room-button:focus-visible { border-color: var(--green); outline: 3px solid rgba(0,159,77,.16); }
.doctor-room-button strong { color: var(--blue); font-size: 1.35rem; }
.doctor-room-button span { color: var(--muted); }
.doctor-console-body .page { max-width: none; min-height: calc(100vh - 58px); padding: 0; }
.doctor-console { min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.doctor-console-head { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(18px, 4vw, 48px); border-bottom: 1px solid var(--line); background: #fff; }
.doctor-console-head h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0; color: var(--blue); }
.waiting-count { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 900; }
.waiting-count strong { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--blue); border-radius: 4px; font-size: 1.35rem; }
.doctor-token-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.doctor-state, .next-token-label { margin: 0 0 10px; color: var(--muted); font-weight: 900; text-transform: uppercase; }
.doctor-token-stage h2 { max-width: 100%; margin: 0; color: var(--blue); font-size: clamp(6rem, 24vw, 18rem); line-height: .9; overflow-wrap: anywhere; }
.doctor-token-stage h2.no-token { color: var(--muted); }
.doctor-call-status { margin: 18px 0 0; color: var(--green); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 900; }
.doctor-next-form { margin-top: 24px; }
.doctor-next-form button, .doctor-token-stage > button { min-width: min(320px, 80vw); min-height: 64px; font-size: 1.3rem; }
.doctor-outcome-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px clamp(18px, 4vw, 48px); background: #fff; border-top: 1px solid var(--line); }
.doctor-outcome-bar form { margin: 0; }
.doctor-outcome-bar button { width: 100%; min-height: 72px; color: #fff; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.doctor-outcome-bar .serviced-button { background: var(--green); border-color: var(--green); }
.doctor-outcome-bar .missed-button { background: var(--red); border-color: var(--red); }
input, select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  font: inherit;
  background: #fff;
}

.login-body, .mode-body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(0,32,91,.98), rgba(0,32,91,.86) 52%, rgba(0,159,77,.92));
  color: #fff;
}
.login-body .mode-kicker, .mode-body .mode-kicker { color: rgba(255,255,255,.82); }
.mode-mobile .mode-kicker { color: var(--grey); }
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .55fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(22px, 5vw, 72px);
}
.login-brand h1 { font-size: clamp(3.2rem, 8vw, 7.2rem); max-width: 900px; margin-bottom: 18px; }
.login-brand p { font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(255,255,255,.82); max-width: 680px; }
.login-panel {
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow);
}
.login-panel h2 { color: var(--blue); font-size: 2rem; }
.stack-form p { margin-bottom: 14px; }
.stack-form label { display: block; font-weight: 900; color: var(--blue); margin-bottom: 6px; }
.login-links {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.login-links h3 {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 1rem;
}
.login-links a {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--blue);
  font-weight: 900;
  background: #f9fbfb;
}

.mode-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(18px, 3vw, 42px);
  gap: clamp(16px, 2vw, 28px);
}
.mode-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
}
.mode-hero h1 { margin: 0; font-size: clamp(3.2rem, 7vw, 7rem); }
.mode-subtitle { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.35rem); margin: 10px 0 0; }
.mode-clock {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 16px 24px;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 900;
  min-width: 180px;
  text-align: center;
}
.mode-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(16px, 2vw, 28px);
  min-height: 0;
}
.service-picker, .mode-confirm {
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,32,91,.08);
}
.service-picker {
  padding: clamp(16px, 2vw, 26px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.picker-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.picker-head h2, .mode-confirm h2 { color: var(--blue); margin: 6px 0 0; font-size: clamp(1.6rem, 2.6vw, 3rem); }
.step-badge {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.service-search { min-width: min(360px, 42vw); display: grid; gap: 7px; font-weight: 900; color: var(--blue); }
.mode-options { overflow: auto; padding-right: 4px; }
.service-options ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.service-options li { min-width: 0; }
.service-options label {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 2px solid #e3e7ea;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-weight: 900;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
}
.service-options label:has(input:checked) {
  border-color: var(--green);
  background: var(--soft-green);
  box-shadow: inset 0 0 0 2px rgba(0,159,77,.14);
}
.service-options input { width: 26px; min-width: 26px; min-height: 26px; accent-color: var(--green); }
.mode-confirm {
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mode-confirm p { color: var(--grey); font-weight: 700; line-height: 1.45; }
.mode-confirm select { min-height: 64px; font-size: 1.1rem; font-weight: 900; color: var(--blue); }
.mode-confirm .generate-button { min-height: 88px; font-size: 1.35rem; margin-top: auto; }
.mode-confirm .ghost-button { min-height: 58px; }
.mode-mobile .mode-shell { padding: 14px; background: #f7faf9; color: var(--ink); }
.mode-mobile.mode-body { background: #f7faf9; color: var(--ink); }
.mode-mobile .mode-hero { color: var(--blue); align-items: start; }
.mode-mobile .mode-subtitle { color: var(--grey); }
.mode-mobile .mode-clock { display: none; }
.mode-mobile .mode-form { grid-template-columns: 1fr; }
.mode-mobile .picker-head { flex-direction: column; align-items: stretch; }
.mode-mobile .service-search { min-width: 0; }
.mode-mobile .service-options ul { grid-template-columns: 1fr; }
.mode-mobile .service-options label { min-height: 72px; font-size: 1rem; }
.mode-mobile .mode-confirm { position: sticky; bottom: 10px; z-index: 3; box-shadow: 0 -12px 34px rgba(0,32,91,.12); }
.mode-mobile .mode-confirm .generate-button { min-height: 68px; }

.token-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(18px, 3vw, 42px);
  align-items: stretch;
  padding: clamp(18px, 4vw, 54px);
}
.token-card, .qr-panel {
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.token-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(24px, 5vw, 64px);
}
.token-card h1 { color: var(--blue); font-size: clamp(7rem, 20vw, 18rem); margin: 0; line-height: .88; }
.token-card h2 { color: var(--green); font-size: clamp(2.4rem, 6vw, 6rem); margin: 22px 0 8px; }
.destination-line { color: var(--grey); font-size: clamp(1.4rem, 2.4vw, 2.4rem); font-weight: 900; }
.token-meta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.token-meta span { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-weight: 900; color: var(--blue); }
.qr-panel {
  padding: clamp(18px, 3vw, 30px);
  display: grid;
  align-content: center;
  gap: 18px;
  text-align: center;
}
.qr-image {
  border: 2px solid var(--blue);
  width: min(280px, 70vw);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
}
.qr-panel p { color: var(--grey); font-weight: 800; }
.token-actions { display: grid; gap: 12px; }
.print-action, .next-action { min-height: 66px; }
.mode-mobile .token-stage { grid-template-columns: 1fr; padding: 14px; background: #f7faf9; }
.mode-mobile .token-card h1 { font-size: clamp(5rem, 28vw, 9rem); }
.mode-mobile .token-card h2 { font-size: clamp(1.8rem, 8vw, 3rem); }

.queue-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; }
.queue-row, .mini-row, .status-columns article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.queue-row small { display: block; color: var(--muted); margin-top: 4px; }
.queue-tabs {
  margin-bottom: 18px;
}
.queue-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.queue-tab-list {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.queue-tab-list label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--grey);
  cursor: pointer;
  font-weight: 900;
}
.queue-tab-list label b {
  min-width: 24px;
  border-radius: 20px;
  background: #e8eef1;
  color: var(--blue);
  text-align: center;
  padding: 2px 7px;
}
#tab-current:checked ~ .queue-tab-list label[for="tab-current"],
#tab-expected:checked ~ .queue-tab-list label[for="tab-expected"],
#tab-missed:checked ~ .queue-tab-list label[for="tab-missed"] {
  border-color: var(--line);
  background: #fff;
  color: var(--blue);
}
#tab-current:checked ~ .queue-tab-list label[for="tab-current"] b,
#tab-expected:checked ~ .queue-tab-list label[for="tab-expected"] b,
#tab-missed:checked ~ .queue-tab-list label[for="tab-missed"] b {
  background: var(--blue);
  color: #fff;
}
.queue-tab-panel {
  display: none;
}
#tab-current:checked ~ .current-panel,
#tab-expected:checked ~ .expected-panel,
#tab-missed:checked ~ .missed-panel,
#tab-missed:checked ~ .missed-panel {
  display: block;
}
.queue-search-form {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.queue-head-actions { display: flex; align-items: flex-start; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.add-queue-trigger { background: #fff; color: var(--blue); border-color: var(--blue); white-space: nowrap; }
.tab-intro { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.add-existing-form { display: grid; gap: 12px; }
.add-existing-form label { display: grid; gap: 5px; color: var(--blue); font-size: .86rem; font-weight: 900; }
.add-existing-form input[type="search"] { width: 100%; }
.token-search-line { display: flex; align-items: stretch; gap: 6px; }
.token-search-line input { min-width: 0; flex: 1; }
.token-search-button { min-height: 42px; padding: 8px 13px; background: var(--soft-blue); color: var(--blue); border-color: rgba(0,32,91,.25); }
.add-search-result { min-height: 20px; margin-top: -5px; font-size: .76rem; }
.found-token { color: var(--green); }
.not-found-token { color: var(--red); }
.add-existing-form fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.add-existing-form legend { padding: 0 4px; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.add-service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.add-service-group { min-width: 0; }
.add-service-group { border: 1px solid var(--line); border-radius: 6px; background: #fbfdfd; }
.add-service-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 10px; cursor: pointer; list-style: none; color: var(--blue); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.add-service-group summary::-webkit-details-marker { display: none; }
.add-service-group summary i { position: relative; width: 15px; height: 15px; border: 1px solid var(--blue); border-radius: 3px; }
.add-service-group summary i:before, .add-service-group summary i:after { content: ""; position: absolute; background: var(--blue); }
.add-service-group summary i:before { left: 3px; right: 3px; top: 6px; height: 1px; }
.add-service-group summary i:after { top: 3px; bottom: 3px; left: 6px; width: 1px; }
.add-service-group[open] summary { border-bottom: 1px solid var(--line); background: var(--soft-blue); }
.add-service-group[open] summary i:after { display: none; }
.add-service-list { padding: 7px 10px 9px; }
.add-service-list label { display: flex; align-items: center; gap: 8px; min-height: 27px; padding: 2px 0; color: var(--ink); font-size: .76rem; font-weight: 700; }
.add-service-list input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.add-service-list label span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.add-service-list label span:before { content: ""; display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid var(--grey); border-radius: 2px; background: #fff; }
.add-service-list input[type="checkbox"]:checked + span:before { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.add-service-list small { color: var(--muted); font-size: .72rem; }
.selected-queue-strip { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; margin: 0 0 10px; padding: 5px; border: 1px dashed rgba(0,32,91,.25); border-radius: 5px; background: #f8fbfc; }
.selected-queue-empty { color: var(--muted); font-size: .72rem; line-height: 18px; }
.selected-queue-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 6px; border: 1px solid rgba(0,159,77,.35); border-radius: 4px; background: var(--soft-green); color: var(--blue); font-size: .7rem; font-weight: 800; }
.selected-queue-chip button { min-width: 15px; width: 15px; min-height: 15px; height: 15px; padding: 0; border: 0; background: transparent; color: var(--red); font-size: .9rem; line-height: 1; }
.add-queue-modal[hidden] { display: none; }
.add-queue-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 14px; }
.add-queue-card { width: min(480px, 100%); }
.search-modal[hidden] { display: none; }
.search-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; }
.search-modal-backdrop { position: absolute; inset: 0; background: rgba(0,32,91,.48); backdrop-filter: blur(3px); }
.search-modal-card { position: relative; width: min(560px, 100%); max-height: min(720px, 90vh); overflow-y: auto; padding: 24px; border: 1px solid rgba(0,32,91,.2); border-top: 6px solid var(--green); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.search-modal-card h2 { color: var(--blue); }
.search-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; min-height: 34px; padding: 4px; border-radius: 50%; color: var(--red); border-color: rgba(190,0,39,.25); }
.search-token-heading { display: flex; align-items: center; gap: 10px; }
.search-token-heading h2 { margin: 0; color: var(--blue); }
.search-confirmed { padding: 4px 8px; border: 1px solid rgba(0,159,77,.35); border-radius: 999px; color: var(--green); background: var(--soft-green); font-size: .72rem; font-weight: 900; }
.search-alert { display: block; margin-top: 5px; padding: 6px 8px; border-radius: 4px; font-size: .72rem; line-height: 1.35; }
.search-alert-warning { border-left: 3px solid #c58b00; color: #765300; background: #fff7df; }
.search-alert-info { border-left: 3px solid var(--blue); color: var(--blue); background: var(--soft-blue); }
.display-status-panel {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
}
.display-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.display-status-head h2 {
  margin: 0;
}
.display-status-head strong {
  color: var(--blue);
  font-size: 1.35rem;
}
.display-token-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.display-token-list article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.display-token-list b {
  color: var(--blue);
  font-size: 1.2rem;
}
.display-token-list span,
.display-token-list small {
  min-width: 0;
  color: var(--grey);
  font-weight: 900;
  overflow-wrap: anywhere;
}
.display-token-list small {
  font-size: .78rem;
}
.compact-controls { display: grid; grid-template-columns: 80px minmax(160px, 1fr) auto; gap: 8px; align-items: center; }
.compact-controls input, .compact-controls select { min-height: 40px; }
.call-room-form {
  min-width: min(720px, 100%);
  display: grid;
  grid-template-columns: 150px minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(0,32,91,.18);
  border-radius: 8px;
  background: #fff;
}
.next-call-token {
  min-height: 58px;
  display: grid;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft-blue);
}
.next-call-token span {
  color: var(--grey);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.next-call-token b {
  color: var(--blue);
  font-size: 1.8rem;
  line-height: 1;
}
.call-room-form label {
  display: grid;
  gap: 5px;
  color: var(--blue);
  font-weight: 900;
}
.call-room-form select {
  min-height: 46px;
}
.queue-state,
.fixed-reason {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f9fbfb;
  color: var(--grey);
  font-weight: 900;
}
.active-token-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
}
.active-token-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.active-token-summary b {
  color: var(--blue);
  font-size: 1.15rem;
}
.room-assignment-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.room-assignment-form label {
  display: grid;
  gap: 5px;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 900;
}
.room-assignment-form select {
  min-height: 42px;
}
.room-assignment-form button {
  min-height: 42px;
  width: 100%;
}
.badge { background: #fff3cf; color: var(--red); border: 1px solid rgba(190,0,39,.25); border-radius: 999px; padding: 4px 8px; font-weight: 900; }
.muted { color: var(--muted); }
.inline-form { display: flex; gap: 8px; margin-bottom: 20px; }
.display-board { min-height: calc(100vh - 130px); text-align: center; }
.display-board h1 { font-size: clamp(3rem, 7vw, 7rem); margin-bottom: 0; color: var(--blue); }
.display-board h2 { font-size: clamp(1.4rem, 3vw, 3rem); color: var(--green); }
.calling-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.calling-grid article { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.calling-grid b { display: block; font-size: clamp(4rem, 10vw, 9rem); color: var(--blue); }
.recent-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 1.6rem; }
.display-body {
  min-height: 100vh;
  background: #f7faf9;
  overflow: hidden;
}
.display-index-body { min-height: 100vh; background: #f7faf9; }
.landing-public-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.landing-public-actions p { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }
.display-entry-button { display: block; width: 100%; text-align: center; background: var(--soft-green); color: var(--blue); border-color: rgba(0,159,77,.35); }
.display-index-body .page { max-width: 1180px; }
.display-index { padding: 5vh 0; }
.display-index-header { text-align: center; margin-bottom: 28px; }
.display-index-header h1 { color: var(--blue); margin: 4px 0 8px; }
.display-index-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.display-index-groups section { background: #fff; padding: 22px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,32,91,.08); }
.display-index-groups h2 { color: var(--green); margin-top: 0; }
.display-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.display-service-card { display: flex; flex-direction: column; gap: 5px; padding: 16px; color: var(--blue); background: #f4f8f7; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.display-service-card:hover, .display-service-card:focus { border-color: var(--green); background: var(--soft-green); }
.display-service-card small { color: var(--muted); }
@media (max-width: 760px) { .display-index-groups { grid-template-columns: 1fr; } }
.display-body .app-bar,
.display-body .messages {
  display: none;
}
.display-body .page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 0;
}
.department-display {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  color: var(--ink);
}
.display-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 5px solid var(--green);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 32, 91, .08);
}
.display-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.display-brand img,
.display-logo-placeholder {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: contain;
}
.display-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
  font-weight: 900;
  font-size: .9rem;
}
.display-brand strong {
  display: block;
  color: var(--blue);
  font-size: clamp(1.35rem, 2.1vw, 2.35rem);
  line-height: 1.05;
}
.display-brand span {
  display: block;
  margin-top: 5px;
  color: var(--grey);
  font-weight: 900;
  font-size: clamp(.95rem, 1.2vw, 1.25rem);
}
.display-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.display-logout {
  margin: 0;
}
.logout-icon-button {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.logout-icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
}
.logout-icon::before {
  content: "";
  position: absolute;
  inset: 3px 7px 3px 2px;
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 2px 0 0 2px;
}
.logout-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 9px;
  width: 12px;
  height: 2px;
  background: currentColor;
  box-shadow: 4px -4px 0 -1px currentColor, 4px 4px 0 -1px currentColor;
}
.display-grid {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 10px;
}
.main-token,
.queue-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 32, 91, .08);
}
.main-token {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(22px, 4vw, 58px);
}
.main-token p {
  margin: 0 0 16px;
  color: var(--green);
  font-size: clamp(1.4rem, 2.2vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
}
.main-token h1 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(7rem, 18vw, 18rem);
  line-height: .86;
}
.main-token strong {
  margin-top: 22px;
  color: var(--red);
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1;
}
.now-calling-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 32, 91, .08);
}
.now-calling-board h2 {
  margin: 0;
  color: var(--green);
  font-size: clamp(1.45rem, 2vw, 2.35rem);
  text-transform: uppercase;
}
.active-call-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.active-call-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  border: 3px solid rgba(0, 32, 91, .2);
  border-radius: 6px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}
.active-call-card b {
  min-width: 0;
  max-width: 100%;
  color: var(--blue);
  font-size: clamp(4.2rem, 9vw, 10rem);
  line-height: .88;
  overflow-wrap: anywhere;
}
.active-call-card span {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: clamp(1.25rem, 2.1vw, 2.45rem);
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.active-call-card.is-empty {
  grid-column: 1 / -1;
  min-height: 100%;
}
.queue-panel {
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.queue-panel h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: clamp(1.6rem, 2vw, 2.4rem);
}
.queue-panel ol {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.queue-panel li {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(92px, .65fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f9fbfb;
}
.queue-panel li span {
  color: var(--blue);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 900;
}
.queue-panel li small {
  min-width: 0;
  color: var(--grey);
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  font-weight: 900;
  overflow-wrap: anywhere;
}
.queue-panel .queue-empty {
  grid-template-columns: 1fr;
  color: var(--grey);
  font-weight: 900;
}
.active-strip {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.active-strip span {
  padding: 10px 14px;
  background: var(--soft-green);
  border: 1px solid rgba(0,159,77,.25);
  border-radius: 6px;
  color: var(--blue);
  font-weight: 900;
  white-space: nowrap;
}
.display-body.is-fullscreen .display-logout,
.display-body.is-fullscreen [data-fullscreen],
.display-body:fullscreen .display-logout,
.display-body:fullscreen [data-fullscreen] {
  display: none;
}
.current-room { text-align: center; }
.current-room h1 { font-size: clamp(5rem, 16vw, 12rem); margin: 0; color: var(--blue); }
.complete-form ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; text-align: left; }
.status-hero { background: var(--soft-green); border: 1px solid rgba(0,159,77,.25); border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.status-hero strong { display: block; font-size: 2rem; }
.public-status-body { background: #eaf3f2; background-image: linear-gradient(135deg, rgba(0,32,91,.06), transparent 45%); }
.public-status-body .page { max-width: 820px; padding-top: clamp(22px, 6vh, 68px); }
.public-status { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(0,32,91,.18); border-top: 8px solid var(--blue); border-radius: 14px; padding: clamp(22px, 5vw, 50px); box-shadow: 0 22px 60px rgba(0,32,91,.14); }
.public-status:before { content: ""; position: absolute; top: 0; right: 0; width: 150px; height: 8px; background: var(--green); }
.status-topline { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); }
.status-topline > span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.status-icon { display: inline-block; position: relative; width: 20px; height: 20px; flex: 0 0 20px; }
.icon-flow { border: 2px solid var(--green); border-radius: 5px; box-shadow: inset 0 0 0 3px #fff; background: var(--green); }
.icon-clock { border: 2px solid var(--blue); border-radius: 50%; }
.icon-clock:before { content: ""; position: absolute; left: 8px; top: 3px; width: 2px; height: 7px; background: var(--blue); }
.icon-clock:after { content: ""; position: absolute; left: 8px; top: 9px; width: 6px; height: 2px; transform: rotate(30deg); transform-origin: left center; background: var(--blue); }
.icon-pulse { border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(0,159,77,.13); }
.icon-pulse:after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.icon-location { width: 16px; height: 16px; margin-right: 8px; border: 2px solid var(--blue); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); vertical-align: -2px; }
.public-status h1 { margin: 0; color: var(--blue); font-size: clamp(4.2rem, 15vw, 7.4rem); line-height: .9; letter-spacing: .02em; }
.token-badge { display: inline-block; margin: 30px 0 12px; padding: 18px 26px 22px; border: 2px solid rgba(0,32,91,.16); border-radius: 12px; background: var(--soft-blue); box-shadow: inset 0 -4px 0 var(--green); }
.token-label { display: block; color: var(--green); font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
.status-thanks { max-width: 520px; color: var(--muted); margin: 24px auto 0; font-size: .78rem; line-height: 1.45; text-align: center; }
.status-hero { background: linear-gradient(120deg, var(--soft-green), #f7fcf9); border: 1px solid rgba(0,159,77,.32); border-left: 6px solid var(--green); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; }
.status-hero-label { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.status-hero strong { display: block; color: var(--blue); font-size: 2rem; margin-top: 8px; }
.status-hero p, .status-detail { margin: 6px 0 0; color: var(--muted); }
.status-columns { display: grid; gap: 12px; }
.status-columns article { display: block; padding: 18px; border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: 9px; background: #fff; box-shadow: 0 5px 16px rgba(0,32,91,.06); }
.status-destination-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-destination-head b { display: flex; align-items: center; color: var(--blue); font-size: 1.05rem; }
.status-destination-head span { font-size: .8rem; font-weight: 900; }
.status-pill { padding: 6px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.status-expected { color: #8b5b00; background: #fff7df; }
.status-waiting { color: var(--blue); background: var(--soft-blue); }
.status-called, .status-in_service { color: var(--green); background: var(--soft-green); }
.status-completed { color: var(--green); background: var(--soft-green); }
.status-detail strong { color: var(--blue); }
.status-validity { margin: 26px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }
.data-table { overflow-x: auto; }
.audit-subtitle { margin: 0; color: var(--grey); font-size: .8rem; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.audit-filters label { display: grid; gap: 4px; color: var(--grey); font-size: .72rem; font-weight: 800; }
.audit-filters input, .audit-filters select { min-height: 36px; padding: 6px 8px; font-size: .8rem; }
.audit-filters .button { min-height: 36px; padding: 8px 12px; font-size: .78rem; }
.audit-event { font-size: .74rem; font-weight: 800; white-space: nowrap; }
.audit-table table { min-width: 0; font-size: .68rem; }
.audit-table th { padding: 6px 8px; font-size: .58rem; letter-spacing: .03em; }
.audit-table td { padding: 6px 8px; line-height: 1.2; }
.audit-table .audit-event { font-size: .64rem; }
.analytics-table table { min-width: 0; font-size: .68rem; }
.analytics-table th { padding: 6px 8px; font-size: .58rem; }
.analytics-table td { padding: 6px 8px; line-height: 1.2; }
.audit-token-link { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: .72rem; font-weight: 900; text-decoration: underline; cursor: pointer; }
.audit-modal { width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 18px; border: 0; border-top: 4px solid var(--green); border-radius: 8px; color: var(--ink); }
.audit-modal::backdrop { background: rgba(0, 20, 55, .65); }
.audit-modal h2 { margin: 0 0 12px; font-size: 1.1rem; color: var(--blue); }
.audit-modal-events { max-height: 55vh; overflow: auto; margin-bottom: 12px; }
.audit-modal-events article { display: grid; grid-template-columns: 108px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .68rem; }
.audit-modal-events strong, .audit-modal-events span, .audit-modal-events time { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.audit-modal-events time, .audit-modal-events span { color: var(--grey); }
.audit-modal-events p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--grey); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 11px; }
th { color: var(--muted); font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 900px) {
  .app-bar, .toolbar, .screen-head { align-items: stretch; flex-direction: column; }
  .page { padding: 14px; }
  .login-shell, .mode-form, .token-stage, .queue-layout, .display-grid { grid-template-columns: 1fr; }
  .login-shell { align-items: stretch; }
  .mode-hero { flex-direction: column; align-items: stretch; }
  .picker-head { flex-direction: column; align-items: stretch; }
  .service-search { min-width: 0; }
  .inline-form { flex-direction: column; }
  .call-room-form { grid-template-columns: 1fr; }
  .active-call-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(96px, 1fr)); }
  nav a, .button, button { width: 100%; text-align: center; }
  .queue-row, .mini-row { align-items: stretch; flex-direction: column; }
  .compact-controls { grid-template-columns: 1fr; }
  .add-service-columns { grid-template-columns: 1fr; }
  .add-service-columns { gap: 7px; }
}

body.mode-kiosk {
  width: 100%;
  height: var(--viewport-height, 100vh);
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kiosk-fit {
  width: 100%;
  height: var(--viewport-height, 100vh);
  min-height: var(--viewport-height, 100vh);
  padding: 10px;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  gap: 8px;
}
.kiosk-fit .mode-form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 82px;
  grid-template-columns: 1fr;
  gap: 8px;
}
.kiosk-topbar {
  position: relative;
  z-index: 20;
  background: #fff;
  color: var(--blue);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  min-height: 58px;
  box-shadow: var(--shadow);
}
.kiosk-topbar strong {
  min-width: 0;
  line-height: 1.15;
  font-size: 1.25rem;
  font-weight: 900;
  white-space: nowrap;
}
.kiosk-topbar .service-search {
  min-width: 0;
  display: block;
  position: relative;
}
.kiosk-topbar input {
  display: block;
  width: 100%;
  min-height: 40px;
  line-height: 1.2;
  border-radius: 4px;
  padding-left: 14px;
}
.department-combobox { position: relative; }
.department-suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(420px, calc(100vh - 90px));
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0, 32, 91, .2);
}
.department-suggestions[hidden] { display: none; }
.department-suggestions button {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 2px;
  color: var(--blue);
  font-size: .82rem;
  text-align: left;
}
.department-suggestions button small {
  color: var(--grey);
  font-size: .68rem;
  font-weight: 700;
}
.department-suggestions button:hover,
.department-suggestions button.is-active {
  background: var(--soft-green);
  color: var(--green);
}
.empty-suggestion { margin: 0; padding: 10px; color: var(--grey); font-size: .85rem; }
.kiosk-topbar .mode-clock {
  min-width: 150px;
  padding: 8px;
  font-size: 1.45rem;
  white-space: nowrap;
  text-align: center;
  background: var(--soft-blue);
  color: var(--blue);
  border-color: transparent;
}
.kiosk-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
}
.kiosk-header-actions .mode-clock {
  width: 150px;
  flex: 0 0 150px;
  line-height: 1.1;
}
.kiosk-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 42px;
}
.icon-button,
.fullscreen-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 9px;
  border-radius: 4px;
}
.fullscreen-icon {
  width: 20px;
  height: 20px;
  display: block;
  background:
    linear-gradient(var(--blue), var(--blue)) left top / 7px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) left top / 2px 7px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right top / 7px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right top / 2px 7px no-repeat,
    linear-gradient(var(--blue), var(--blue)) left bottom / 7px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) left bottom / 2px 7px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 7px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 2px 7px no-repeat;
}
.kiosk-logout { margin: 0; }
.kiosk-logout button {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: none;
}
.is-fullscreen .kiosk-logout,
.is-fullscreen [data-fullscreen],
:fullscreen .kiosk-logout,
:fullscreen [data-fullscreen] { display: none; }
.kiosk-fit .service-picker {
  min-height: 0;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 4px;
  overflow: hidden;
}
.kiosk-fit .mode-options {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.service-columns {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.service-group {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
}
.service-group:first-child {
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
.service-group h2 {
  margin: 0;
  padding: 4px 6px 7px;
  color: var(--blue);
  font-size: .95rem;
  line-height: 1.1;
}
.service-group h2 span {
  color: var(--grey);
  font-size: .72rem;
  font-weight: 700;
}
.kiosk-fit .service-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kiosk-fit .service-group-list li {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.kiosk-fit .service-group-list label {
  height: 100%;
  min-height: 0;
  display: flex;
  padding: 2px 6px;
  gap: 8px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e5e8ea;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(.68rem, .85vw, .86rem);
  line-height: 1.08;
  overflow: hidden;
  cursor: pointer;
}
.kiosk-fit .service-group-list li.is-selected label {
  border-color: var(--green);
  background: var(--soft-green);
  box-shadow: inset 3px 0 0 var(--green);
}
.kiosk-fit .service-group-list input {
  width: 17px;
  min-width: 17px;
  min-height: 17px;
  accent-color: var(--green);
}
.kiosk-fit .service-group-list label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-group {
  padding: 10px 6px;
  color: var(--grey);
  font-size: .8rem;
}
.kiosk-actions {
  background: #fff;
  color: var(--blue);
  border-radius: 4px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 320px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}
.first-destination {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-weight: 900;
}
.first-destination select {
  min-height: 58px;
  font-weight: 900;
  color: var(--blue);
}
.kiosk-actions .generate-button {
  min-height: 58px;
  font-size: 1.2rem;
}
.generate-button:disabled {
  background: var(--grey);
  border-color: var(--grey);
  cursor: not-allowed;
}
.closed-banner {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 900;
}
.form-feedback[hidden] { display: none; }
.token-result-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 32px));
  max-width: 780px;
  max-height: calc(var(--viewport-height, 100vh) - 32px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-top: 6px solid var(--green);
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 32, 91, .34);
}
.token-result-modal:not([open]) { display: none; }
.token-result-modal::backdrop {
  background: rgba(0, 20, 55, .72);
}
.token-result-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  min-height: 360px;
}
.token-result-number {
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.token-result-number p {
  margin: 0 0 6px;
  color: var(--green);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}
.token-result-number h2 {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: clamp(5rem, 10vw, 8.5rem);
  line-height: .9;
}
.token-result-number strong {
  color: var(--blue);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.token-result-number > span {
  min-height: 24px;
  margin-top: 5px;
  color: var(--grey);
}
.token-result-number small {
  margin-top: 22px;
  color: var(--grey);
  font-weight: 700;
}
.token-result-qr {
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--soft-blue);
}
.token-result-qr img {
  width: 178px;
  height: 178px;
  background: #fff;
}
.token-result-qr p {
  margin: 12px 0 0;
  color: var(--grey);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}
.token-result-actions {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
}
.token-result-actions .ghost-button,
.token-result-actions .generate-button {
  min-height: 58px;
  border-radius: 4px;
}
.print-language-actions { display: flex; align-items: center; gap: 6px; }
.print-language-actions > span { color: var(--grey); font-size: .75rem; font-weight: 800; }
.print-language-actions .ghost-button { width: 78px; min-width: 78px; min-height: 58px; padding: 8px 6px; }
.reprint-button { font-size: 1.25rem; line-height: 1; }
.reprint-modal { width: min(420px, calc(100vw - 28px)); padding: 22px; border: 0; border-top: 4px solid var(--green); border-radius: 8px; }
.reprint-modal::backdrop { background: rgba(0, 20, 55, .65); }
.reprint-modal h2 { margin-bottom: 8px; font-size: 1.15rem; }
.reprint-close { position: absolute; top: 8px; right: 10px; min-height: 30px; width: 30px; padding: 0; border: 0; background: transparent; color: var(--grey); font-size: 1.5rem; line-height: 1; }
.reprint-modal p { color: var(--grey); font-size: .78rem; }
.reprint-modal input { width: 100%; margin: 5px 0 10px; }
.reprint-actions, .reprint-result > div { display: flex; gap: 8px; margin-top: 10px; }
.reprint-actions button, .reprint-result button { min-height: 38px; padding: 7px 12px; font-size: .75rem; }
.reprint-result { display: grid; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.reprint-result strong { color: var(--blue); font-size: 1.2rem; }
.reprint-result span { color: var(--grey); font-size: .8rem; }
.token-print-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.mode-mobile {
  overflow: auto;
}
.mode-mobile .kiosk-fit {
  height: auto;
  min-height: 100vh;
  padding: 10px;
  grid-template-rows: auto minmax(0, 1fr);
}
.mode-mobile .kiosk-fit .mode-form {
  height: auto;
  min-height: calc(100vh - 20px);
  grid-template-rows: minmax(0, 1fr) auto;
}
.mode-mobile .kiosk-topbar {
  grid-template-columns: 1fr;
}
.mode-mobile .kiosk-topbar .service-search {
  grid-template-columns: 1fr;
}
.mode-mobile .kiosk-fit .mode-options {
  overflow: visible;
}
.mode-mobile .service-columns {
  height: auto;
  grid-template-columns: 1fr;
  gap: 18px;
}
.mode-mobile .service-group {
  display: block;
}
.mode-mobile .service-group:first-child {
  padding-right: 0;
  padding-bottom: 18px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.mode-mobile .kiosk-fit .service-group-list {
  height: auto;
  display: grid;
  grid-auto-rows: 52px;
}
.mode-mobile .kiosk-actions {
  position: sticky;
  bottom: 0;
  grid-template-columns: 1fr;
}
.mode-mobile .first-destination {
  grid-template-columns: 1fr;
}
.mode-mobile .token-result-content {
  grid-template-columns: 1fr;
}
.mode-mobile .token-result-qr {
  display: none;
}
.mode-mobile .token-result-actions {
  grid-template-columns: 1fr;
}

@media (max-width: 1120px) {
  .kiosk-topbar {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: auto;
    min-height: 92px;
    padding-block: 8px;
  }

  .kiosk-topbar > .kiosk-brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .kiosk-topbar > .kiosk-header-actions {
    flex: 0 0 auto;
  }

  .kiosk-topbar > .service-search {
    flex: 0 0 100%;
    order: 3;
  }

  .kiosk-topbar .mode-clock {
    font-size: 1.2rem;
    padding-inline: 4px;
  }

  .kiosk-topbar .kiosk-controls {
    min-width: max-content;
  }

  .kiosk-header-actions .mode-clock {
    width: 150px;
    flex-basis: 150px;
  }

  .kiosk-fit {
    grid-template-rows: auto minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .room-control-layout { grid-template-columns: 1fr; }
  .room-current-panel { min-height: 300px; }
  .room-body .app-bar { flex-direction: row; align-items: center; }
  .room-body .app-bar nav { flex-wrap: nowrap; }
  .room-switch-link { width: auto; }
  .doctor-console-head { min-height: 76px; }
  .doctor-console-head h1 { font-size: 1.6rem; }
  .doctor-token-stage h2 { font-size: clamp(5.5rem, 32vw, 10rem); }
  .doctor-outcome-bar { gap: 10px; padding: 12px; }
  .doctor-outcome-bar button { min-height: 62px; padding: 10px; }
  .kiosk-topbar {
    grid-template-columns: 100px minmax(150px, 1fr) auto;
  }
  .kiosk-topbar .mode-clock { display: none; }
  .kiosk-controls button { width: auto; }
  .kiosk-fit .service-group-list label { font-size: .68rem; }
  .kiosk-actions {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .first-destination {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .mode-mobile .kiosk-topbar,
  .mode-mobile .kiosk-actions,
  .mode-mobile .first-destination {
    grid-template-columns: 1fr;
  }
  .token-result-content {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
  .token-result-number { padding: 24px; }
  .token-result-qr { padding: 18px; }
  .token-result-qr img { width: 150px; height: 150px; }
}