/* Antri-Online styles. Derived from docs/design/prototype.css (the approved wireframes, 9 Nov 2026). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2"); }
/* Antri-Online prototype styles, version 2 (light only, D-12).
   Visual language from the user's reference screenshot (9 Nov 2026), colours sampled from its pixels:
   screen bg #F1F3F7, card #FFFFFF, navy #012169, ink #1B1B1B, red #E10019, line #E4E8EC.
   Caption grey in the reference (#A7A6A9, 2.5:1) is used only for decoration; text uses #6B6E7B (5.1:1).
   Typeface: Plus Jakarta Sans (OFL), the closest free match to the reference's geometric sans. */

:root {
  --bg: #F1F3F7;
  --surface: #FFFFFF;
  --navy: #012169;
  --navy-hover: #0B2D80;
  --navy-soft: #E8EDF8;
  --navy-ring: rgba(1, 33, 105, 0.22);
  --ink: #1B1B1F;
  --ink-2: #3F414C;
  --muted: #6B6E7B;
  --faint: #A7A6A9;
  --line: #E4E8EC;
  --red: #E10019;
  --red-soft: #FDECEE;
  --green: #047857;
  --green-soft: #E6F5EE;
  --amber: #A15C07;
  --amber-soft: #FFF4E0;
  --r-sm: 10px;
  --r: 14px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --shadow: 0 1px 2px rgba(1, 33, 105, 0.04), 0 6px 20px rgba(1, 33, 105, 0.05);
  --shadow-lg: 0 24px 60px rgba(1, 33, 105, 0.18);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.ic { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--r-md); border: 0;
  font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--navy-ring); outline-offset: 2px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-secondary { background: var(--bg); color: var(--ink); }
.btn-outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-danger-soft { background: var(--red-soft); color: var(--red); }
.btn-danger { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--navy-hover); }
  .btn-secondary:hover { background: #E7EAF1; }
}
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 600ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- form ---------- */
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 18px; }
.label { font-size: 14px; font-weight: 700; color: var(--ink); }
.input, .select, .textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); font-size: 16px; font-weight: 500;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textarea { min-height: 100px; resize: vertical; }
.select { appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23012169' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--navy-ring); }
.is-invalid { border-color: var(--red); }
.placeholder { color: var(--muted); }
.help { font-size: 13px; color: var(--muted); }
.err { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--red); }

/* ---------- shared pieces ---------- */
.card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow); }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; }
.banner-error { background: var(--red-soft); color: var(--red); }
.banner-warn { background: var(--amber-soft); color: var(--amber); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag-navy { background: var(--navy-soft); color: var(--navy); }
.tag-green { background: var(--green-soft); color: var(--green); }
.tag-amber { background: var(--amber-soft); color: var(--amber); }
.tag-grey { background: var(--bg); color: var(--muted); }
.tag-red { background: var(--red-soft); color: var(--red); }
.logo-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; flex: none; overflow: hidden; }
.logo-circle img { width: 74%; height: 74%; object-fit: contain; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.ibox { width: 44px; height: 44px; border-radius: var(--r); background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; flex: none; font-weight: 800; }
.overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); display: grid; place-items: center; padding: 20px; z-index: 5; }
.dialog { width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 26px; }
.dialog h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dialog p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.dialog .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.steps { font-size: 12px; font-weight: 700; color: var(--muted); }
.sheet { background: var(--surface); border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 12px 20px 24px; margin: auto -20px -32px; box-shadow: 0 -4px 20px rgba(1,33,105,0.04); }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 14px; }
.sec { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); font-weight: 600; }

/* CS chips (reference: AT&T / Network chips) */
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cs-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--bg); min-width: 0; }
.cs-chip .ibox { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); font-size: 14px; }
.cs-chip small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.cs-chip b { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.cs-chip .name { display: block; font-size: 13px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.cs-chip .none { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- member phone page (.m-) ---------- */
.m-page { min-height: 100%; padding: 20px 20px 32px; background: var(--bg); display: flex; flex-direction: column; }
.m-wrap { max-width: 480px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m-top small { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.m-top h1 { margin-top: 2px; font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.m-date { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); font-weight: 500; }
.m-form { padding: 20px; }
.m-form .btn { margin-top: 22px; }
.ticket { background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 20px 22px 22px; position: relative; overflow: hidden; }
.ticket .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ticket .lbl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }
.ticket .st { background: rgba(255,255,255,0.14); color: #fff; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.ticket .st.called { background: #10B981; color: #04281C; }
.ticket .big { font-size: 96px; font-weight: 800; line-height: 1; margin: 14px 0 16px; }
.ticket .who { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.3; }
.ticket .what { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; overflow-wrap: anywhere; }
.ticket .when { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16); display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 600; }
.ahead { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.ahead b { font-size: 36px; font-weight: 800; color: var(--navy); min-width: 44px; }
.ahead span { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.ahead span small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.m-status { padding: 24px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.ic-wrap { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; }
.m-status h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.m-status p { color: var(--muted); font-size: 15px; }
.m-hint { font-size: 13px; color: var(--muted); text-align: center; margin-top: 14px; }
.call-pop { width: 100%; max-width: 350px; background: var(--green); color: #fff; border-radius: var(--r-2xl); padding: 28px 22px 22px; text-align: center; box-shadow: var(--shadow-lg); }
.call-pop .bell { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; }
.call-pop .no { margin-top: 14px; font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.88); }
.call-pop .msg { margin-top: 4px; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.call-pop .btn { margin-top: 22px; background: #fff; color: var(--green); }

/* ---------- kiosk page (.k-) : light, fits any kiosk monitor ----------
   Drawn for 1440 x 900. --k is one design pixel scaled to the screen: the smaller of width / 1440 and
   height / 900, so the whole page fits the screen's tighter side at any size (Q4, 10 Nov 2026).
   Fields and buttons never go below 64 px (NFR-3) and text never below a readable size, whatever --k is. */
.page-kiosk { --k: min(100vw / 1440, 100dvh / 900); }
.k-page { display: grid; grid-template-columns: calc(560 * var(--k)) minmax(0, 1fr); min-height: 100dvh; background: var(--bg); }
.k-side { padding: calc(40 * var(--k)) calc(48 * var(--k)); display: flex; flex-direction: column; gap: calc(18 * var(--k)); min-width: 0; }
.k-side .logo-circle { width: max(56px, calc(104 * var(--k))); height: max(56px, calc(104 * var(--k))); }
.k-side small { font-size: max(14px, calc(20 * var(--k))); color: var(--muted); font-weight: 600; }
.k-side h1 { font-size: max(26px, calc(52 * var(--k))); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.k-side .date { font-size: max(14px, calc(20 * var(--k))); color: var(--muted); font-weight: 500; }
.k-today { margin-top: auto; background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: calc(24 * var(--k)) calc(26 * var(--k)); }
.k-today h2 { font-size: max(13px, calc(15 * var(--k))); font-weight: 700; color: rgba(255,255,255,0.72); }
.k-today ul { list-style: none; margin: calc(12 * var(--k)) 0 0; padding: 0; display: grid; gap: calc(10 * var(--k)); }
.k-today li { display: flex; align-items: center; gap: calc(12 * var(--k)); font-size: max(16px, calc(22 * var(--k))); font-weight: 700; }
.k-today li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); flex: none; }
.k-main { display: grid; place-items: center; padding: calc(24 * var(--k)) calc(56 * var(--k)) calc(24 * var(--k)) 0; min-width: 0; }
.k-form { width: 100%; max-width: calc(720 * var(--k)); padding: calc(32 * var(--k)) calc(40 * var(--k)); border-radius: var(--r-2xl); }
.k-form h2 { font-size: max(22px, calc(30 * var(--k))); font-weight: 800; margin-bottom: calc(18 * var(--k)); letter-spacing: -0.02em; }
.k-form .banner { margin-bottom: calc(16 * var(--k)) !important; padding: calc(14 * var(--k)) calc(18 * var(--k)); font-size: max(14px, calc(17 * var(--k))); }
.k-form .field { gap: max(6px, calc(8 * var(--k))); }
.k-form .label { font-size: max(16px, calc(20 * var(--k))); }
.k-form .input, .k-form .select, .k-form .textarea { min-height: max(64px, calc(72 * var(--k))); font-size: max(18px, calc(24 * var(--k))); padding: calc(16 * var(--k)) calc(22 * var(--k)); border-radius: var(--r-lg); }
.k-form .select { padding-right: max(48px, calc(60 * var(--k))); background-position: right calc(22 * var(--k)) center; background-size: max(20px, calc(28 * var(--k))); }
.k-form .textarea { min-height: max(80px, calc(100 * var(--k))); }
.k-form .field + .field { margin-top: calc(20 * var(--k)); }
.k-form .err { font-size: max(15px, calc(18 * var(--k))); }
.k-form .btn { margin-top: calc(24 * var(--k)); min-height: max(64px, calc(80 * var(--k))); font-size: max(18px, calc(24 * var(--k))); border-radius: var(--r-lg); }
.k-form .btn svg { width: max(22px, calc(28 * var(--k))); height: max(22px, calc(28 * var(--k))); }
.k-done { text-align: center; display: grid; gap: calc(16 * var(--k)); justify-items: center; min-width: 0; }
.k-done .tag { font-size: max(15px, calc(18 * var(--k))); padding: calc(8 * var(--k)) calc(16 * var(--k)); }
.k-done .tag svg { width: max(16px, calc(20 * var(--k))); height: max(16px, calc(20 * var(--k))); }
.k-done .ticket { width: calc(520 * var(--k)); max-width: 100%; text-align: left; padding: calc(20 * var(--k)) calc(22 * var(--k)) calc(22 * var(--k)); }
.k-done .ticket .lbl { font-size: max(12px, calc(13 * var(--k))); }
.k-done .ticket .big { font-size: calc(180 * var(--k)); margin: calc(14 * var(--k)) 0 calc(16 * var(--k)); }
.k-done .ticket .who { font-size: max(16px, calc(22 * var(--k))); }
.k-done .ticket .what { font-size: max(14px, calc(16 * var(--k))); }
.k-done .ticket .when { font-size: max(13px, calc(15 * var(--k))); margin-top: calc(14 * var(--k)); padding-top: calc(12 * var(--k)); }
.k-done h2 { font-size: max(24px, calc(38 * var(--k))); font-weight: 800; letter-spacing: -0.02em; margin-top: calc(8 * var(--k)); }
.k-done p { font-size: max(15px, calc(18 * var(--k))); color: var(--muted); font-weight: 600; }
.k-bar { width: calc(420 * var(--k)); max-width: 100%; height: max(6px, calc(8 * var(--k))); border-radius: 99px; background: var(--line); overflow: hidden; }
.k-bar i { display: block; height: 100%; width: 62%; background: var(--navy); border-radius: 99px; }
.k-blocked { max-width: calc(640 * var(--k)); padding: calc(44 * var(--k)); text-align: center; display: grid; gap: calc(16 * var(--k)); justify-items: center; }
.k-blocked .ic-wrap { width: max(56px, calc(72 * var(--k))); height: max(56px, calc(72 * var(--k))); }
.k-blocked .ic-wrap svg { width: max(24px, calc(32 * var(--k))); height: max(24px, calc(32 * var(--k))); }
.k-blocked h2 { font-size: max(22px, calc(30 * var(--k))); font-weight: 800; }
.k-blocked p { font-size: max(16px, calc(20 * var(--k))); color: var(--muted); }
/* A portrait kiosk screen (drawn for 900 x 1600): the side panel becomes a header above the form, and
   today's purposes sit in a row that wraps. */
@media (orientation: portrait) {
  .page-kiosk { --k: min(100vw / 900, 100dvh / 1600); }
  .k-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .k-side { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(28 * var(--k)); row-gap: calc(8 * var(--k)); padding: calc(40 * var(--k)) calc(48 * var(--k)) 0; }
  .k-side .logo-circle { grid-row: 1 / span 2; }
  .k-side .date { grid-column: 2; }
  .k-today { grid-column: 1 / -1; margin-top: calc(16 * var(--k)); }
  .k-today ul { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)) calc(28 * var(--k)); }
  .k-main { padding: calc(32 * var(--k)) calc(48 * var(--k)); }
  /* As wide as the header above it: a portrait screen is narrow, so the width is not spare. */
  .k-form { max-width: none; }
}

/* ---------- thermal ticket (.t-) : printed black on white ---------- */
.t-ticket { width: 80mm; padding: 4mm 4mm 6mm; background: #fff; color: #000; font-family: var(--font); text-align: center; }
.t-ticket.w58 { width: 58mm; }
.t-ticket .logo { width: 30mm; height: 30mm; margin: 0 auto; display: block; object-fit: contain; filter: grayscale(1) contrast(12); }
.t-ticket .org { margin-top: 2mm; font-size: 13px; font-weight: 800; }
.t-ticket .lbl { margin-top: 3mm; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
.t-ticket .big { font-size: 88px; font-weight: 800; line-height: 1; margin: 1mm 0 2mm; }
.t-ticket hr { border: 0; border-top: 1px dashed #000; margin: 3mm 0; }
.t-ticket dl { margin: 0; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 1mm 3mm; font-size: 13px; }
.t-ticket dt { font-weight: 800; }
.t-ticket dd { margin: 0; overflow-wrap: anywhere; }
.t-ticket .foot { margin-top: 3mm; font-size: 12px; }

/* ---------- TV page (.tv-) : 1920 x 1080, light (D-12) ---------- */
.tv-page { width: 1920px; height: 1080px; background: var(--bg); color: var(--ink); display: grid; grid-template-rows: 140px 1fr 92px; position: relative; overflow: hidden; }
.tv-head { display: flex; align-items: center; gap: 24px; padding: 0 64px; }
.tv-head .logo-circle { width: 96px; height: 96px; }
.tv-head small { display: block; font-size: 24px; color: var(--muted); font-weight: 600; }
.tv-head strong { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; }
.tv-head .clock { margin-left: auto; text-align: right; }
.tv-head .clock b { display: block; font-size: 60px; font-weight: 800; line-height: 1; }
.tv-head .clock span { font-size: 24px; color: var(--muted); font-weight: 600; }
.tv-main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; padding: 8px 64px 32px; min-height: 0; }
.tv-now { background: var(--navy); color: #fff; border-radius: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; min-width: 0; }
.tv-now .lbl { font-size: 32px; font-weight: 700; color: rgba(255,255,255,0.72); letter-spacing: 0.02em; }
.tv-now .big { font-size: 300px; font-weight: 800; line-height: 1; margin: 16px 0 28px; }
.tv-now .name { font-size: 110px; font-weight: 800; line-height: 1.05; margin: 32px 0 40px; overflow-wrap: anywhere; max-width: 100%; letter-spacing: -0.03em; }
.tv-now .name.long { font-size: 76px; }
.tv-now .to { background: #fff; color: var(--navy); font-size: 62px; font-weight: 800; padding: 16px 48px; border-radius: 28px; }
.tv-now .empty { font-size: 60px; font-weight: 700; color: rgba(255,255,255,0.82); margin-top: 28px; }
.tv-cs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 28px; min-width: 0; }
.tv-card { background: var(--surface); border-radius: 32px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow); position: relative; min-width: 0; outline: 5px solid transparent; outline-offset: -5px; }
.tv-card.on { outline-color: var(--navy); }
.tv-card.on::after { content: ''; position: absolute; top: 24px; right: 24px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); }
.tv-card small { font-size: 34px; font-weight: 700; color: var(--muted); }
.tv-card b { font-size: 136px; font-weight: 800; line-height: 1.05; color: var(--navy); }
.tv-card .name { font-size: 44px; font-weight: 800; line-height: 1.12; margin-top: 18px; color: var(--navy); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-card .dash { font-size: 40px; color: var(--muted); font-weight: 700; margin-top: 20px; }
.tv-foot { display: flex; align-items: center; gap: 24px; padding: 0 64px; font-size: 28px; color: var(--muted); font-weight: 600; background: var(--surface); }
.tv-foot b { color: var(--ink); }
.tv-foot .right { margin-left: auto; }
.tv-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); display: grid; place-items: center; z-index: 5; }
.tv-overlay .box { background: var(--surface); border-radius: 36px; padding: 56px 72px; text-align: center; display: grid; gap: 18px; justify-items: center; box-shadow: var(--shadow-lg); }
.tv-overlay .box .ibox { width: 104px; height: 104px; border-radius: 50%; }
.tv-overlay .box b { font-size: 50px; font-weight: 800; letter-spacing: -0.02em; }
.tv-overlay .box span { font-size: 28px; color: var(--muted); font-weight: 600; }
.tv-lost { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 28px; font-weight: 700; padding: 14px 32px; border-radius: 20px; z-index: 4; }

/* ---------- staff pages (.s-) : desktop 1440, light ---------- */
.s-page { min-height: 900px; background: var(--bg); position: relative; }
.s-top { height: 72px; background: var(--surface); display: flex; align-items: center; gap: 22px; padding: 0 28px; box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 4; } /* stays in view while the page scrolls (user, 10 Nov 2026) */
.s-top .logo-circle { width: 44px; height: 44px; box-shadow: none; background: var(--bg); }
.s-top .app { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.s-nav { display: flex; gap: 6px; }
.s-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r); font-size: 15px; font-weight: 700; color: var(--muted); text-decoration: none; }
.s-nav a.on { color: var(--navy); background: var(--navy-soft); }
.s-user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.s-user .who { text-align: right; line-height: 1.25; }
.s-user .who small { display: block; color: var(--muted); font-weight: 500; }
.s-cs { background: var(--navy); color: #fff; font-weight: 800; padding: 8px 14px; border-radius: var(--r-sm); font-size: 14px; }
.s-body { padding: 28px; }
.s-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.s-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; }
.s-head .stats { display: flex; gap: 18px; font-size: 14px; color: var(--muted); font-weight: 600; }
.s-head .stats b { color: var(--ink); font-weight: 800; }
.s-head .grow { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.s-grid { display: grid; grid-template-columns: 440px 1fr; gap: 22px; align-items: start; }
.s-grid > :first-child { position: sticky; top: 16px; }
.s-serve { padding: 24px; }
.s-serve .cap { display: flex; justify-content: space-between; align-items: center; }
.s-serve .cap h2 { font-size: 14px; font-weight: 700; color: var(--muted); }
.s-serve .ticket { margin-top: 14px; }
.s-serve .ticket .big { font-size: 88px; margin: 10px 0 12px; }
.s-serve .desc { margin-top: 12px; padding: 12px 14px; background: var(--bg); border-radius: var(--r); font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.s-serve .meta { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; }
.s-serve .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.s-serve .acts .btn-lg { grid-column: 1 / -1; min-height: 60px; font-size: 17px; }
.s-serve .none { padding: 28px 0 8px; text-align: center; color: var(--muted); font-size: 16px; font-weight: 600; display: grid; gap: 10px; justify-items: center; }
.s-others { padding: 18px 20px; margin-top: 16px; }
.s-others h2 { font-size: 14px; font-weight: 700; color: var(--muted); }
.s-list { overflow: hidden; }
.s-list .cap { display: flex; align-items: center; gap: 10px; padding: 20px 22px 12px; }
.s-list .cap h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.rows { list-style: none; margin: 0; padding: 0 10px 10px; }
.rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px auto; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r-md); }
.rows li + li { box-shadow: 0 -1px 0 var(--bg); }
.rows .ibox { width: 64px; height: 52px; font-size: 18px; border-radius: var(--r); }
.rows .t { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.3; }
.rows .s { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .r { text-align: right; }
.rows .r b { display: block; font-size: 15px; font-weight: 800; }
.rows .r small { font-size: 13px; color: var(--muted); font-weight: 500; }
.rows .btn { min-height: 44px; font-size: 14px; padding: 0 14px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--bg); vertical-align: middle; font-weight: 500; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .no { font-size: 16px; font-weight: 800; }
.tbl .nm { font-weight: 700; min-width: 180px; overflow-wrap: anywhere; }
.tbl .ds { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .r { text-align: right; }
.tbl .btn { min-height: 44px; font-size: 14px; padding: 0 14px; }
.empty-state { padding: 56px 20px; text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center; font-weight: 500; }
.empty-state b { color: var(--ink); font-size: 17px; font-weight: 800; }
.s-pick { max-width: 900px; margin: 48px auto; text-align: center; }
.s-pick h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.s-pick p { margin-top: 6px; color: var(--muted); font-weight: 500; }
.s-pick .grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-btn { min-height: 160px; border-radius: var(--r-xl); border: 0; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; gap: 10px; cursor: pointer; transition: transform 160ms var(--ease-out); }
.cs-btn:active { transform: scale(0.97); }
.cs-btn .ibox { width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.cs-btn b { font-size: 22px; font-weight: 800; }
.cs-btn small { font-size: 14px; color: var(--muted); font-weight: 600; }
.cs-btn.busy small { color: var(--amber); }
.s-login { min-height: 900px; display: grid; place-items: center; background: var(--bg); }
.s-login .card { width: 440px; padding: 36px; border-radius: var(--r-2xl); }
.s-login .logo-circle { width: 76px; height: 76px; margin: 0 auto 16px; background: var(--bg); box-shadow: none; }
.s-login h1 { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.s-login p.sub { text-align: center; color: var(--muted); margin: 4px 0 26px; font-weight: 500; }
.s-login .btn { margin-top: 26px; }
.tiles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 10px; }
.tile .ibox { width: 36px; height: 36px; border-radius: 50%; }
.tile small { font-size: 13px; color: var(--muted); font-weight: 600; }
.tile b { font-size: 28px; font-weight: 800; line-height: 1; }
.statusbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sched .card { overflow: visible; }
.sched h2 { font-size: 18px; font-weight: 800; padding: 20px 22px 10px; display: flex; gap: 10px; align-items: center; }
.sched .row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 12px 22px; position: relative; }
.sched .row + .row { box-shadow: 0 -1px 0 var(--bg); }
.sched .row.today { background: var(--navy-soft); }
.sched .day { font-weight: 800; font-size: 15px; }
.sched .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 4px 6px 4px 12px; border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 700; }
.sched .row.today .chip { background: var(--surface); }
.chip .x { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); }
.sched .add { min-height: 44px; font-size: 13px; padding: 0 12px; color: var(--navy); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.sched .row.today .add { background: var(--surface); }
.sched .closed { font-size: 14px; color: var(--muted); font-weight: 500; }
/* D-25: a closed day. The toggle sits at the end of the row, the tag and note replace the purposes. */
.sched .row { grid-template-columns: 96px 1fr auto; }
.sched .day-toggle { min-height: 44px; font-size: 13px; padding: 0 12px; background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.sched .row.is-closed .day { color: var(--muted); }
.sched .row.is-closed .tag { font-size: 13px; }
.sched .off-note { font-size: 13px; color: var(--muted); font-weight: 500; }
/* Today's row is tinted: grey there measured 4.32 to 1, the darker ink gives 8.6 to 1 (as DF-13). */
.sched .row.today .off-note, .sched .row.today.is-closed .day { color: var(--ink-2); }
.p-poster .jadwal .tutup { color: var(--red-text); font-weight: 800; }
/* On today's tinted row the grey text measured 4.32 to 1. The darker ink gives 8.6 to 1. */
.sched .row.today .closed { color: var(--ink-2); }
.dd { position: absolute; top: 56px; left: 120px; z-index: 3; width: 280px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; }
.dd label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; }
.dd label.on { background: var(--navy-soft); }
.dd .box { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; }
.dd label.on .box { background: var(--navy); box-shadow: none; color: #fff; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.set { padding: 22px 24px; }
.set h2 { font-size: 17px; font-weight: 800; }
.set p.d { font-size: 14px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.set .row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; background: var(--bg); border-radius: var(--r-md); overflow: hidden; }
.stepper button { width: 48px; height: 48px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.stepper b { width: 56px; text-align: center; font-size: 20px; font-weight: 800; }
.radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; background: var(--bg); border-radius: var(--r-md); font-weight: 700; cursor: pointer; }
.radio.on { background: var(--navy-soft); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.radio .dot2 { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--faint); }
.radio.on .dot2 { box-shadow: inset 0 0 0 6px var(--navy); }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); font-weight: 700; text-decoration: none; }

/* ---------- A4 poster (.p-) ---------- */
.p-poster { width: 210mm; height: 297mm; overflow: hidden; background: #fff; padding: 12mm 16mm; display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-poster .logo { width: 26mm; height: 26mm; object-fit: contain; }
.p-poster h1 { margin-top: 3mm; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.p-poster .sub { margin-top: 2mm; font-size: 19px; color: var(--muted); font-weight: 600; }
.p-poster .qr { margin-top: 5mm; padding: 5mm; background: #fff; border-radius: 8mm; box-shadow: inset 0 0 0 3px var(--navy); }
.p-poster .qr img { width: 70mm; height: 70mm; display: block; }
.p-poster .url { margin-top: 4mm; font-size: 24px; font-weight: 800; color: var(--navy); }
.p-poster .kiosk { margin-top: 1mm; font-size: 16px; color: var(--muted); font-weight: 500; }
.p-poster .jadwal { margin-top: auto; width: 100%; padding-top: 5mm; }
.p-poster .jadwal h2 { font-size: 22px; font-weight: 800; }
.p-poster .jadwal p { font-size: 14px; color: var(--muted); margin-top: 1mm; font-weight: 500; }
.p-poster table { width: 100%; margin-top: 3mm; border-collapse: separate; border-spacing: 0; font-size: 14px; text-align: left; border-radius: 4mm; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.p-poster th { background: var(--navy); color: #fff; padding: 2.2mm 3mm; font-size: 14px; }
.p-poster td { border-top: 1px solid var(--line); padding: 1.9mm 3mm; vertical-align: top; font-weight: 500; }
.p-poster td:first-child { font-weight: 800; width: 22mm; }

/* ---------- gallery only ---------- */
.gal { padding: 32px; background: #D9DEEA; display: grid; gap: 40px; justify-items: start; }
.gal > h2 { font-size: 22px; font-weight: 800; }
.gal .item { display: grid; gap: 10px; }
.gal .item > p { font: 700 14px/1.3 var(--font); color: var(--ink-2); }
.frame { position: relative; overflow: hidden; background: var(--bg); box-shadow: 0 2px 10px rgba(15,23,42,0.12); }
.frame.phone { width: 390px; display: flex; flex-direction: column; }
.frame.phone > .m-page { flex: 1; }
.frame.desk { width: 1440px; }
.frame.tv { width: 1920px; }
.frame.paper { width: auto; background: #fff; }
.frame.a4 { width: 210mm; background: #fff; }

/* ---------- review pass v2 fixes ---------- */
.ahead .ibox { width: 56px; height: 56px; font-size: 24px; border-radius: var(--r-md); }                     /* D2 */
.ticket .what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* D3 */
.mini { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }                            /* D5 */
.mini li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); background: var(--bg); font-size: 15px; font-weight: 700; }
.mini .ibox { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); font-size: 13px; }
.mini li > b { margin-left: auto; font-size: 17px; font-weight: 800; }
.mini li > .none { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
/* contrast: #E10019 on #FDECEE is 4.37:1 (fails AA for small text). Text on soft red uses #C80017 (5.31:1). */
:root { --red-text: #C80017; }
.banner-error, .btn-danger-soft, .tag-red, .err { color: var(--red-text); }

/* ---------- walkthrough 2 changes ---------- */
/* E2: TV without footer */
.tv-page { grid-template-rows: 140px 1fr; }
.tv-main { padding-bottom: 56px; }

/* E1: settings, reference pattern (tiles + list rows + auto save) */
.set2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.qtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.qtile { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 16px; text-decoration: none; color: var(--ink); min-height: 124px; align-content: space-between; }
.qtile .ibox { width: 44px; height: 44px; border-radius: 50%; }
.qtile b { display: block; font-size: 16px; font-weight: 800; }
.qtile small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
.slist { padding: 6px 0 10px; }
.slist > h2, .ulist > .cap h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.slist > h2 { padding: 16px 22px 8px; }
.srow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 22px; }
.srow + .srow { box-shadow: 0 -1px 0 var(--bg); }
.srow .ibox { width: 44px; height: 44px; border-radius: var(--r); }
.srow .t, .urow .t { font-size: 15px; font-weight: 800; }
.srow .s, .urow .s { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
.seg { display: inline-flex; background: var(--bg); border-radius: var(--r-md); padding: 4px; gap: 4px; }
.seg button { min-height: 44px; min-width: 78px; border: 0; border-radius: 12px; background: transparent; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--navy); box-shadow: var(--shadow); }
.subrow { margin: 0 22px 12px 80px; background: var(--bg); border-radius: var(--r-md); padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 12px; }
.subrow .t { font-size: 14px; font-weight: 700; }
.subrow .s { font-size: 12px; color: var(--muted); font-weight: 500; }
.btn-text-red { background: transparent; color: var(--red-text); }
.ulist .cap { display: flex; align-items: center; gap: 10px; padding: 20px 22px 10px; }
.urow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; gap: 14px; align-items: center; padding: 12px 22px; }
.urow + .urow { box-shadow: 0 -1px 0 var(--bg); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.urow.off .avatar { background: var(--bg); color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); }
.state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state.off { color: var(--muted); }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.toast { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-md); font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow-lg); z-index: 4; }
.dialog.wide { max-width: 540px; }
.dialog .lead { margin-top: 4px; color: var(--muted); font-size: 14px; }
.dialog form, .dialog .fields { margin-top: 20px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { border-radius: var(--r-md); background: var(--bg); padding: 14px; display: grid; gap: 4px; text-align: left; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; }
.role.on { background: var(--navy-soft); box-shadow: inset 0 0 0 2px var(--navy); }
.role b { font-size: 15px; font-weight: 800; }
.role span { font-size: 13px; color: var(--muted); font-weight: 500; }
.pw { position: relative; }
.pw .input { padding-right: 56px; }
.pw .iconbtn { position: absolute; right: 6px; top: 6px; background: transparent; }
.dialog .actions.full .btn { flex: 1; }

/* E3, E4: posters */
.p-poster.qronly .qr { margin-top: 10mm; padding: 7mm; }
.p-poster.qronly .qr img { width: 125mm; height: 125mm; }
.p-poster.qronly .url { margin-top: 7mm; font-size: 30px; }
.p-poster.qronly .kiosk { font-size: 18px; margin-top: 2mm; }
.p-poster.qronly h1 { font-size: 46px; margin-top: 6mm; }
.p-poster.qronly .logo { width: 32mm; height: 32mm; }
.pchoose { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; }
.pcard { padding: 22px; display: grid; grid-template-columns: 238px 1fr; gap: 22px; align-items: start; }
.pv { width: 238px; height: 337px; overflow: hidden; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); background: #fff; }
.pv > .p-poster { transform: scale(0.3); transform-origin: top left; }
.pcard h2 { font-size: 18px; font-weight: 800; }
.pcard p { margin-top: 6px; font-size: 14px; color: var(--muted); font-weight: 500; }
.pcard .btn { margin-top: 18px; }
/* E5: transform does not shrink layout, so the 794 px poster overflowed its 238 px preview. zoom shrinks layout too. */
.pv > .p-poster { transform: none; zoom: 0.3; }
/* E7: muted text on navy-soft was 4.32:1 */
.role.on span { color: var(--ink-2); }

/* ---------- real pages (not in the prototype gallery) ---------- */
html, body { height: 100%; }
body.page-member { background: var(--bg); }
.page-member .m-page { min-height: 100dvh; }
.page-staff .s-page, .page-staff .s-login { min-height: 100dvh; }
body.page-tv { background: var(--bg); overflow: hidden; }
.tv-stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.hidden { display: none !important; }
/* A dialog taller than the window (Tambah akun is 684 px, a 1366x768 laptop at 125% leaves about 600 px) scrolls
   inside the dimmed layer instead of losing its buttons below the screen. A dialog that fits stays centred. */
.overlay.fixed { position: fixed; overflow-y: auto; place-items: safe center; }
.toast.fixed { position: fixed; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.call-pop, .dialog { animation: pop-in 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .call-pop, .dialog { animation: none; } }
.tv-now.flash { animation: tv-flash 1200ms var(--ease-out); }
@keyframes tv-flash { 0% { box-shadow: 0 0 0 0 rgba(1,33,105,0.55); } 100% { box-shadow: 0 0 0 40px rgba(1,33,105,0); } }

/* ---------- Jadwal page (WD-6) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button.chip { border: 0; font-family: inherit; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
button.chip:active { transform: scale(0.97); }
button.chip:focus-visible, .dd label:has(input:focus-visible) { outline: 3px solid var(--navy-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  button.chip:hover .x { background: var(--red-soft); color: var(--red-text); }
  .dd label:hover { background: var(--bg); }
  .dd label.on:hover { background: var(--navy-soft); }
}
.dd { transform-origin: top left; animation: dd-in 150ms var(--ease-out); }
.dd label { cursor: pointer; }
@keyframes dd-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd { animation: none; } }
@media (max-width: 1180px) { .sched { grid-template-columns: 1fr; } }
/* Staff top bar at laptop widths: nothing wraps to two lines, a long name is cut with an ellipsis. */
.s-top .app, .s-nav a, .s-user .btn, .s-cs { white-space: nowrap; }
.s-user .who b { display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) {
  .s-top { gap: 12px; padding: 0 16px; }
  .s-top .app { display: none; }
  .s-nav a { padding: 0 12px; }
}

/* ---------- Kiosk thermal print (FR-11, P-1) ---------- */
#print { display: none; }
#print.measure { display: block; position: absolute; left: -10000px; top: 0; }
@media print {
  body.page-kiosk { background: #fff; }
  body.page-kiosk > *:not(#print) { display: none !important; }
  body.page-kiosk #print { display: block; position: static; }
  .t-ticket { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Riwayat page (WD-5) ---------- */
.h-sel { width: 360px; max-width: 100%; }
.h-ended { margin: -4px 0 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.h-table { overflow-x: auto; }
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(4, 1fr); } .set2 { grid-template-columns: 1fr; } }
/* Toast: neutral shadow (the navy one glowed under the dark pill) and a short entrance from below. */
.toast.fixed { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: toast-in 200ms var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast.fixed { animation: none; } }

/* ---------- Posters (WD-7, WD-7b, WD-7c) ---------- */
.p-poster .qr svg { width: 70mm; height: 70mm; display: block; }
.p-poster.qronly .qr svg { width: 125mm; height: 125mm; }
.pv iframe { width: 794px; height: 1123px; border: 0; transform: scale(0.3); transform-origin: 0 0; pointer-events: none; background: #fff; }
@media print { body.page-poster { background: #fff; } }