/* Yak platform, redesign of 12 Nov 2026 (Astra: _from_astra/web_redesign/DESIGN_SPEC.md).
   Company colours come from the page's theme variables (--c-*), and the derived ones (--d-*, --r-*) are
   computed in yakp/theme.py with the same formulas the iPhone app uses. Yak's own pages use Yak's palette. */

/* ------------------------------------------------------------------ tokens --- */
:root {
  /* Yak defaults (also the company defaults until a theme is set) */
  --c-primary: #D9B26F; --c-on-primary: #16130C; --c-bg: #0C1A17; --c-surface: #12261F; --c-text: #F4ECDD;
  --c-soft: #AEB8AE; --c-turn: #F0A45B; --c-ok: #A4D8BB; --c-warn: #EBA58C;
  --font-head: "El Messiri", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", -apple-system, system-ui, sans-serif;
  --d-quiet: #1E2E24; --d-nav: #2A3729; --d-line: #36463D; --d-input-line: #696E66; --d-strong-line: #6C756B;
  --d-pressed: #CDA869; --d-pressed-2: #2A3729; --d-ok-fill: #21382F; --d-warn-fill: #28332A;
  --d-turn-mid: #F1B275; --d-turn-inner: #F2C18F; --d-turn-fg: #16130C; --d-disabled: #363F2D;
  --d-disabled-fg: #787F74; --d-soft: #AEB8AE; --d-soft-bg: #AEB8AE; --d-danger: #EBA58C; --d-focus: #D9B26F;
  --d-ok-ink: #A4D8BB; --d-warn-ink: #EBA58C; --d-scrim: rgba(22, 19, 12, .55); --d-shadow-rgb: 22, 19, 12;
  --radius: 18px; --r-base: 18px; --r-input: 14px; --r-small: 12px; --r-tag: 8px; --r-hero: 28px; --r-inner: 24px;
  --r-sheet: 26px;

  /* Type scale: phone under 600 (spec section 2) */
  --t-ticket: 120px; --t-turn: 52px; --t-welcome: 33px; --t-title: 32px; --t-section: 28px; --t-support: 18px;
  --t-body: 16px; --t-input: 16px; --t-button: 17px; --t-label: 14px; --t-note: 13px; --t-table: 15px; --t-kpi: 36px;
  --gutter: 20px; --panel-pad: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 389px) { :root { --t-welcome: 30px; --t-turn: 48px; } }
@media (min-width: 600px) {
  :root { --t-ticket: 112px; --t-turn: 64px; --t-welcome: 40px; --t-title: 34px; --t-section: 30px; --t-body: 17px;
    --t-input: 17px; --t-button: 18px; --t-table: 16px; --t-kpi: 40px; --gutter: 32px; --panel-pad: 24px; }
}
@media (min-width: 1024px) { :root { --t-turn: 72px; --t-welcome: 48px; --t-title: 36px; --t-section: 32px; --t-kpi: 48px; } }
@media (min-width: 1280px) {
  :root { --t-ticket: 128px; --t-turn: 80px; --t-welcome: 58px; --t-body: 16px; --t-input: 16px; --t-button: 16px;
    --t-table: 15px; --gutter: 40px; }
}

/* ------------------------------------------------------------------ base --- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--c-bg); }
body {
  margin: 0; min-height: 100dvh; background: var(--c-bg); color: var(--c-text);
  font: 400 var(--t-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 3px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.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; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Layout helpers kept from before */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.center { text-align: center; }
.grow { flex: 1; }
.screen { width: 100%; max-width: 520px; min-height: 100dvh; margin-inline: auto; display: flex; flex-direction: column; gap: 24px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px); }
.screen--wide { max-width: 1312px; }
@media (min-width: 1024px) { .screen { padding-top: 40px; } }

/* ------------------------------------------------------------------ type --- */
.display { font: 600 var(--t-welcome)/1.35 var(--font-head); overflow-wrap: anywhere; }
.display--md { font: 600 var(--t-section)/1.4 var(--font-head); }
.title { font: 600 var(--t-section)/1.4 var(--font-body); }
.support { font: 600 var(--t-support)/1.4 var(--font-body); }
.lead { color: var(--d-soft-bg); font-size: var(--t-body); line-height: 1.6; }
.panel .lead { color: var(--d-soft); }
.label { color: var(--d-soft-bg); font-size: var(--t-label); font-weight: 500; line-height: 1.45; }
.panel .label { color: var(--d-soft); }
.note { color: var(--d-soft-bg); font-size: var(--t-note); line-height: 1.6; }
.panel .note { color: var(--d-soft); }

/* ------------------------------------------------------------------ surfaces --- */
.panel { background: var(--c-surface); border-radius: var(--r-base); padding: var(--panel-pad); }
.panel--tight { padding: 16px; }
.panel--line { border: 1px solid var(--d-line); }
.divider { height: 1px; background: var(--d-line); border: 0; margin: 4px 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px; border-radius: var(--r-tag);
  font-size: var(--t-note); line-height: 1.4; background: var(--d-quiet); color: var(--d-soft); width: fit-content; white-space: nowrap; }
.tag--ok { background: var(--d-ok-fill); color: var(--d-ok-ink); }
.tag--warn { background: var(--d-warn-fill); color: var(--d-warn-ink); }

/* ------------------------------------------------------------------ fields --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.input, .select, .textarea {
  width: 100%; min-height: 56px; border-radius: var(--r-input); border: 1px solid var(--d-input-line); background: var(--c-bg);
  padding: 0 16px; font-size: var(--t-input); line-height: 1.45; color: var(--c-text);
}
.select { padding-inline-end: 44px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px; background-repeat: no-repeat; background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; }
[dir=rtl] .select { background-position: 16px 50%, 22px 50%; }
.textarea { padding: 16px; min-height: 112px; resize: vertical; }
.input::placeholder { color: var(--d-soft-bg); opacity: 1; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 3px; }
.input[aria-invalid=true] { border-color: var(--c-warn); }
.input:disabled { background: var(--d-disabled); color: var(--d-disabled-fg); }

/* Service choice: radio at inline-start, 60 high */
.choices { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px;
  border-radius: var(--r-base); border: 1px solid var(--d-line); background: var(--c-surface); cursor: pointer; }
.choice input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%;
  border: 2px solid var(--d-soft); background: transparent; display: grid; place-items: center; }
.choice input:checked { border-color: var(--c-primary); background: var(--c-primary); box-shadow: inset 0 0 0 0 var(--c-surface); }
.choice:has(input:checked) { border: 1.5px solid var(--c-primary); background: var(--d-quiet); }
.choice:has(input:focus-visible) { outline: 2px solid var(--d-focus); outline-offset: 3px; }
.choice:has(input:disabled) { opacity: .55; cursor: default; }
.choice input:disabled { border-color: var(--d-disabled-fg); }

/* ------------------------------------------------------------------ buttons --- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 60px; padding: 8px 20px; border: 0; border-radius: var(--r-base); background: var(--c-primary);
  color: var(--c-on-primary); font: 600 var(--t-button)/1.4 var(--font-body); text-decoration: none; text-align: center;
  transition: transform .12s var(--ease), background-color .12s;
}
.btn:active:not(:disabled) { transform: scale(.985); background: var(--d-pressed); }
.btn:disabled { background: var(--d-disabled); color: var(--d-disabled-fg); cursor: default; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor;
  border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn--ghost, .btn--secondary { background: var(--d-quiet); color: var(--c-text); min-height: 56px; }
.btn--ghost:active:not(:disabled), .btn--secondary:active:not(:disabled) { background: var(--d-pressed-2); }
.btn--quiet { background: transparent; color: var(--d-soft-bg); min-height: 44px; width: auto; }
.btn--quiet:active:not(:disabled) { background: var(--d-quiet); }
.btn--danger { background: var(--c-surface); border: 1px solid var(--c-warn); color: var(--d-danger); min-height: 56px; }
.btn--danger:active:not(:disabled) { background: var(--d-warn-fill); }
.btn--small { min-height: 44px; width: auto; padding: 8px 16px; border-radius: var(--r-small); font-size: 15px; }
.btn--auto { width: auto; }
.linkbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; background: none;
  border: 0; border-radius: var(--r-small); color: var(--d-soft-bg); font-weight: 600; font-size: var(--t-button); align-self: center; }
.linkbtn:active { background: var(--d-quiet); }
.langbtn { flex: none; min-width: 88px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--r-small);
  background: var(--d-quiet); color: var(--c-text); font-weight: 600; font-size: 17px; }

/* Wallet: Apple's own badge artwork when present (static/wallet), never redrawn */
.wallet { display: inline-flex; align-self: center; min-height: 48px; padding: 4.8px; border-radius: 10px; }
.wallet img { height: 48px; width: auto; min-width: 140px; }
.btn--wallet { background: #000; color: #fff; border: 1px solid #555; min-height: 48px; width: auto; min-width: 200px;
  border-radius: 10px; align-self: center; font-size: 17px; }

/* ------------------------------------------------------------------ toast, sheet --- */
.toast { position: fixed; inset-inline: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--dock-h, 0px)); z-index: 60;
  width: min(calc(100vw - 32px), 480px); margin-inline: auto; min-height: 48px; padding: 14px 16px; border-radius: var(--r-small);
  background: var(--c-text); color: var(--c-bg); font-weight: 500; font-size: 15.5px; text-align: center;
  box-shadow: 0 4px 16px rgba(var(--d-shadow-rgb), .08); opacity: 0; transform: translateY(12px);
  transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: none; }
.offline { position: fixed; top: 0; inset-inline: 0; background: var(--d-warn-fill); color: var(--d-warn-ink); text-align: center;
  font-size: var(--t-note); padding: 6px; z-index: 50; }
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: var(--d-scrim); }
.sheet__body { width: 100%; max-width: 520px; max-height: 85dvh; overflow: auto; background: var(--c-surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 32px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; gap: 12px; position: relative; box-shadow: 0 12px 40px rgba(var(--d-shadow-rgb), .2); }
.sheet__body::before { content: ""; position: absolute; top: 8px; inset-inline: 0; margin-inline: auto; width: 48px; height: 4px;
  border-radius: 2px; background: var(--d-line); }
@media (min-width: 600px) { .sheet { align-items: center; } .sheet__body { width: min(480px, calc(100vw - 48px));
  border-radius: var(--r-sheet); } .sheet__body::before { display: none; } }

/* ------------------------------------------------------------------ customer header --- */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.hdr__logo { display: flex; align-items: center; height: 44px; max-width: 151px; }
.hdr__logo img, .brandlogo { max-height: 44px; max-width: 151px; width: auto; object-fit: contain; }
.hdr--line { padding-bottom: 24px; border-bottom: 1px solid var(--d-line); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.brandname { font: 700 22px/1.2 var(--font-head); color: var(--c-primary); }

/* ------------------------------------------------------------------ customer: join --- */
.join { display: flex; flex-direction: column; gap: 32px; }
.join__welcome { display: flex; flex-direction: column; gap: 16px; padding-top: 64px; }
.join__welcome .rule { display: none; }
.hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-base); background: var(--d-quiet); }
.join__welcome:has(.hero) { padding-top: 24px; }
@media (min-width: 1024px) and (min-height: 600px) {
  .join__welcome:has(.hero) { padding: 32px; justify-content: flex-start; gap: 24px; }
  .join__welcome .hero { aspect-ratio: 16 / 9; border-radius: var(--r-inner); }
  .join__welcome:has(.hero) .display { font-size: min(var(--t-welcome), 44px); }
}
.join__form { display: flex; flex-direction: column; gap: 24px; }
.join__form .note { margin-top: -8px; }
@media (min-width: 1024px) and (min-height: 600px) {
  .screen--join { max-width: 1312px; }
  .join { display: grid; grid-template-columns: minmax(400px, 608px) minmax(400px, 456px); justify-content: space-between;
    align-items: stretch; gap: 64px; padding-top: 16px; }
  .join__welcome { background: var(--c-surface); border-radius: var(--r-hero); padding: 80px 64px; justify-content: center; gap: 32px; min-height: 560px; }
  .join__welcome .rule { display: block; height: 2px; width: 100%; background: var(--c-primary); border: 0; margin-top: 32px; }
  .join__form { justify-content: center; }
}
@media (min-width: 1280px) { .join { gap: 96px; } }

/* ------------------------------------------------------------------ customer: ticket --- */
.tk { display: flex; flex-direction: column; gap: 32px; }
.tk__main { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 32px; }
.tk__number { font: 700 var(--t-ticket)/1.15 var(--font-head); color: var(--c-primary); font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -.01em; }
.tk__number.is-4 { font-size: min(var(--t-ticket), 96px); }
.tk__number.is-5 { font-size: min(var(--t-ticket), 80px); }
.tk__ahead { font: 600 var(--t-section)/1.4 var(--font-body); }
.tk__side { display: flex; flex-direction: column; gap: 24px; }
.facts { display: grid; grid-template-columns: 1fr minmax(170px, 1.1fr); gap: 16px; background: var(--c-surface);
  border-radius: var(--r-base); padding: 16px 24px; min-height: 94px; align-items: center; }
.fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact b { font: 600 20px/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
@media (max-width: 389px) { .facts { grid-template-columns: 1fr; } }
.alertbox { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.alertbox .support { color: var(--c-text); }
.alertbox p { color: var(--d-soft); font-size: 15.5px; }
.alertbox--on { flex-direction: row; align-items: flex-start; gap: 12px; }
.tk .linkbtn { margin-top: 8px; }
@media (min-width: 1280px) {
  .screen--ticket { max-width: 1040px; }
  .tk { display: grid; grid-template-columns: 560px 360px; justify-content: center; gap: 40px; align-items: start; padding-top: 48px; }
  .tk__main { padding-top: 0; background: var(--c-surface); border-radius: var(--r-hero); padding: 48px 32px; }
}

/* ------------------------------------------------------------------ customer: your turn --- */
body.is-turn { background: var(--c-turn); }
.turnscreen { position: fixed; inset: 0; z-index: 20; overflow: auto; background: var(--c-turn); color: var(--d-turn-fg);
  display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); }
.turn__wrap { width: 100%; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.turn__logo { background: var(--c-bg); border-radius: var(--r-small); padding: 8px 10px; display: flex; align-items: center; }
.turn__logo img { max-height: 44px; max-width: 151px; object-fit: contain; }
.turnscreen .langbtn { background: var(--c-bg); color: var(--c-text); }
.turn__outer { flex: 1; min-height: 360px; background: var(--d-turn-mid); border-radius: var(--r-hero); padding: 16px; display: flex; }
.turn__inner { flex: 1; min-width: 0; overflow: hidden; background: var(--d-turn-inner); border-radius: var(--r-inner); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 40px 20px; text-align: center; }
.turntitle { font: 700 var(--t-turn)/1.25 var(--font-head); white-space: nowrap; }
.turnscreen .tk__number { color: var(--d-turn-fg); }
.turn__body { font: 600 var(--t-section)/1.4 var(--font-body); }
.turn__dock { min-height: 76px; display: flex; }
.turn__dock .btn, .turn__sent { flex: 1; min-height: 76px; background: var(--c-bg); color: var(--c-text); border-radius: var(--r-base); font-size: 20px; }
.turn__sent { display: flex; align-items: center; justify-content: center; padding: 12px 20px; text-align: center; font-weight: 500; }

/* ------------------------------------------------------------------ customer: finished --- */
.finish { width: 100%; max-width: 440px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; text-align: center; padding-top: 48px; }
.finish .display { font-size: var(--t-section); }
.finish .btn:first-of-type { margin-top: 16px; }

/* ------------------------------------------------------------------ customer: card --- */
.cardpage { display: flex; flex-direction: column; gap: 24px; }
.member { background: var(--c-surface); border-radius: var(--r-base); padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.member--line { border: 1px solid var(--d-line); }
.member__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.member__name { font: 600 var(--t-section)/1.4 var(--font-head); overflow-wrap: anywhere; }
.balance-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.balance { font: 700 48px/1.15 var(--font-head); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.value { display: flex; flex-direction: column; gap: 2px; }
.value b { font: 500 19px/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: 23px; flex-wrap: wrap; padding-top: 8px; }
.dots.is-many { gap: 12px; }
.dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--c-primary); flex: none; }
.dot.is-on { background: var(--c-primary); }
.qrsec { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.qrbox { background: #fff; border-radius: var(--r-small); padding: 12px; width: 240px; max-width: 100%; }
.qrbox svg, svg.segno { width: 100%; height: auto; display: block; }
.hist { display: flex; flex-direction: column; gap: 16px; }
.hist__title { font: 600 var(--t-section)/1.4 var(--font-body); }
.history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--d-line); font-size: 16px; }
.history li .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history li .what small { font-size: var(--t-note); color: var(--d-soft-bg); }
.history li b { font-weight: 600; color: var(--c-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.history li.is-empty { color: var(--d-soft-bg); }
.cardpage .linkbtn.danger { color: var(--d-danger); }
.cardjoin__promise { background: var(--c-surface); border-radius: var(--r-base); padding: var(--panel-pad); display: flex; flex-direction: column; gap: 12px; }
.cardjoin__promise p { color: var(--d-soft); }
.cardjoin__promise .rule { color: var(--c-text); font-weight: 500; }
@media (min-width: 1024px) {
  .screen--card { max-width: 1200px; }
  .cardpage { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 32px; align-items: start; }
  .cardpage__start { display: flex; flex-direction: column; gap: 24px; }
  .hist { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; }
  .hist .history li { border-color: var(--d-line); }
  .hist li .what small { color: var(--d-soft); }
}

/* ------------------------------------------------------------------ Yak home --- */
.home { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; }
.home__lockup { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.home__lockup img { width: min(280px, 60vw); height: auto; }
.home__services { display: grid; grid-template-columns: 1fr; gap: 24px; }
.svc { border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 24px; min-height: 320px; overflow: hidden; }
.svc h2 { font: 600 var(--t-section)/1.3 var(--font-body); }
.svc--dark { background: #12261F; color: #F4ECDD; }
.svc--light { background: #FFF8F0; color: #2E1F14; }
.svc__mini { border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.svc--dark .svc__mini { background: #FFF8F0; color: #2E1F14; }
.svc--light .svc__mini { background: #FFFFFF; border: 1px solid #E8DED4; align-items: stretch; text-align: start; }
.svc__num { font: 700 72px/1.1 var(--font-head); color: #B5532A; font-variant-numeric: tabular-nums; }
.svc__dots { display: flex; gap: 10px; }
.svc__dots span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #B5532A; }
.svc__dots span.on { background: #B5532A; }
@media (min-width: 1024px) {
  .home { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); align-items: center; gap: 48px; padding-top: 56px; }
  .home__lockup img { width: min(360px, 100%); }
  .home__services { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ staff --- */
.staffpage { max-width: 1366px; }
.shdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-bottom: 16px;
  border-bottom: 1px solid var(--d-line); }
.shdr__id { display: flex; align-items: center; gap: 24px; min-width: 0; }
.shdr__id img { max-height: 48px; max-width: 170px; width: auto; object-fit: contain; }
.shdr__ctx { display: flex; align-items: center; gap: 8px; }
.shdr__ctx .who, .shdr__id .branch { color: var(--d-soft-bg); font-size: 17px; white-space: nowrap; }
.shdr__ctx .btn--quiet { min-height: 48px; font-size: 17px; color: var(--c-text); }
.shdr__ctx .langbtn { min-height: 48px; }
.ctxrow { display: none; }
.tabs { display: flex; gap: 8px; min-height: 56px; align-items: center; overflow-x: auto; }
.tabs a, .tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 144px;
  padding: 8px 20px; border: 0; border-radius: var(--r-small); background: none; color: var(--c-text); font: 600 18px/1.3 var(--font-body);
  text-decoration: none; white-space: nowrap; }
.tabs .is-on { background: var(--d-nav); }
@media (max-width: 599px) { .tabs a, .tabs button { flex: 1; min-width: 0; padding: 8px; } }

.pairbox { width: 100%; max-width: 480px; margin: 48px auto 0; }
.pairbox .input { text-align: center; font-size: 28px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.pairbox .btn { min-height: 64px; }
.who__title { text-align: center; font: 600 var(--t-title)/1.3 var(--font-body); padding-top: 48px; }
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; padding: 32px 0; }
.people button { width: 284px; min-height: 252px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  border-radius: var(--r-hero); border: 1px solid var(--d-line); background: var(--c-surface); color: var(--c-text); font: 600 32px/1.3 var(--font-body); }
.people .initial { width: 88px; height: 88px; border-radius: 50%; background: var(--d-quiet); color: var(--c-primary); display: grid;
  place-items: center; font: 600 40px/1 var(--font-body); }
@media (max-width: 899px) { .people button { width: calc(50% - 16px); min-width: 240px; } }
@media (max-width: 599px) { .people { gap: 12px; } .people button { width: 100%; min-height: 104px; flex-direction: row; justify-content: flex-start;
  padding: 0 24px; gap: 20px; font-size: 24px; border-radius: var(--r-base); } .people .initial { width: 56px; height: 56px; font-size: 24px; } }

.pinbox { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 32px; }
.pinbox h1 { font: 600 var(--t-title)/1.3 var(--font-body); }
.pindots { display: flex; gap: 14px; justify-content: center; }
.pindots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-primary); }
.pindots span.is-on { background: var(--c-primary); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 320px; max-width: 100%; direction: ltr; }
.pad button { min-height: 72px; border-radius: var(--r-base); border: 1px solid var(--d-line); background: var(--c-surface);
  color: var(--c-text); font: 600 28px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.pad button:active { background: var(--d-quiet); }

/* Queue tab: landscape, with serving at logical start and waiting at end */
.qctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.qctl .select { flex: 0 1 608px; width: auto; min-width: 0; }
.qctl .row { flex: none; flex-wrap: nowrap; }
.qctl .row { gap: 16px; }
.qgrid { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 612fr); gap: 24px; align-items: stretch; }
.serve { display: flex; flex-direction: column; gap: 16px; }
.serve__card { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; min-height: 332px; text-align: center; }
.serve__num { font: 700 var(--t-ticket)/1.15 var(--font-head); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.serve__name { font: 600 var(--t-section)/1.4 var(--font-body); overflow-wrap: anywhere; }
.btn--next { min-height: 76px; border-radius: var(--r-base); font-size: 20px; }
.serve__more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.serve__more .btn { min-height: 58px; }
.wait { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; display: flex; flex-direction: column; gap: 8px; min-height: 506px; }
.wait__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
.wait__head b { color: var(--c-primary); font: 600 24px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.waitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: auto; }
.waitlist li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 64px; padding: 8px 16px;
  border-bottom: 1px solid var(--d-line); font-size: 18px; }
.waitlist li:first-child { background: var(--d-quiet); border-radius: var(--r-small); border-bottom-color: transparent; }
.waitlist li b { color: var(--c-primary); font: 600 22px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.waitlist li span { overflow-wrap: anywhere; }
.waitlist li .rm { width: auto; min-height: 44px; padding: 0 14px; font-size: 15px; color: var(--d-soft); }
.waitlist li.is-empty { display: block; color: var(--d-soft); background: none; }
/* Landscape: the waiting list scrolls inside its panel, level with the serving column */
@media (min-width: 1024px) {
  .wait { height: 506px; min-height: 0; }
  .waitlist { flex: 1; min-height: 0; }
}
@media (min-width: 1300px) and (min-height: 1000px) { .wait { height: 640px; } }
/* Portrait iPad and narrow windows: stack serving, waiting, then the action dock */
@media (max-width: 1023px) {
  .qgrid { grid-template-columns: 1fr; }
  .serve { display: contents; }
  .serve__card { order: 1; min-height: 300px; }
  .wait { order: 2; min-height: 0; }
  .waitlist li { min-height: 50px; }
  .qdock { order: 3; }
  /* Portrait dock (m15): call again, absent, then the wide Next at the far end */
  .qdock { display: grid; grid-template-columns: minmax(0, 138fr) minmax(0, 138fr) minmax(0, 448fr); gap: 16px; }
  .qdock .serve__more { display: contents; }
  .qdock .btn { min-height: 76px; }
  .qdock .btn--next { order: 3; }
}
@media (max-width: 699px) {
  .serve__card { min-height: 240px; }
  .serve__num { font-size: 96px; }
  .qdock { grid-template-columns: 1fr 1fr; }
  .qdock .btn--next { grid-column: 1 / -1; order: 0; }
  .qdock .serve__more .btn { min-height: 56px; order: 1; }
  .qctl { flex-wrap: wrap; }
  .qctl .select { flex: 1 1 100%; }
}

/* Cards tab */
.scard { display: grid; grid-template-columns: minmax(0, 468fr) minmax(0, 624fr); gap: 24px; align-items: start; }
.sbal { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.sbal__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sbal__name { font: 600 var(--t-section)/1.4 var(--font-head); overflow-wrap: anywhere; }
.sbal__big { font: 700 80px/1.15 var(--font-head); color: var(--c-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sact { display: flex; flex-direction: column; gap: 24px; }
.sact .panel { display: flex; flex-direction: column; gap: 24px; }
.sact .input { min-height: 64px; font-size: 24px; font-variant-numeric: tabular-nums; }
.sact .btn { min-height: 64px; }
.scan { max-width: 640px; }
@media (max-width: 899px) {
  .scard { grid-template-columns: 1fr; }
  .sbal { min-height: 0; }
  .sbal__big { font-size: 56px; }
}

/* Codes tab */
.codegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.codecard { background: var(--c-surface); border-radius: var(--r-base); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.codecard .qrbox { width: 260px; }
.codecard .row { justify-content: center; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.codecard .row .btn { min-height: 56px; width: 100%; }
.codecard .url { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
button.qrbox { border: 0; cursor: zoom-in; }
@media (max-width: 1100px) { .codegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .codegrid { grid-template-columns: 1fr; } }
.qrfull { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; background: var(--c-bg); }
.qrbox--big { width: min(560px, calc(100vw - 48px), calc(100dvh - 240px)); min-width: 240px; }

/* Split View widths 507–678: compact header with a context row */
@media (max-width: 699px) {
  .shdr { min-height: 56px; }
  .shdr__id .branch, .shdr__ctx .who, .shdr__ctx .btn--quiet { display: none; }
  .ctxrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--d-soft-bg); }
}

/* ------------------------------------------------------------------ inside the Yak app (compact header) --- */
html.in-app .hdr, html.in-app .shdr { min-height: 56px; }
html.in-app .shdr { padding-bottom: 8px; }
html.in-app .shdr__id .branch, html.in-app .shdr__ctx .who, html.in-app .shdr__ctx .btn--quiet { display: none; }
html.in-app .ctxrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--d-soft-bg); }
html.in-app .screen { padding-top: 8px; }

/* ------------------------------------------------------------------ owner (Yak palette) --- */
body.owner {
  --c-bg: #0C1A17; --c-surface: #12261F; --c-text: #F4ECDD; --c-primary: #D9B26F; --c-on-primary: #16130C; --c-soft: #AEB8AE;
  --d-quiet: #1A342B; --d-nav: #1A342B; --d-focus: #F3DCA6; --d-soft: #AEB8AE; --d-soft-bg: #AEB8AE;
  --font-head: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --r-base: 16px; --r-input: 10px; --r-small: 10px; --r-hero: 16px; --r-tag: 8px;
  --side: 244px;
}
body.owner .btn { min-height: 48px; padding: 8px 16px; font-size: 16px; }
body.owner .btn--small { min-height: 44px; }
body.owner .input, body.owner .select { min-height: 48px; }
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100dvh; }
.side { background: #07110F; display: flex; flex-direction: column; gap: 8px; padding: 32px 16px 24px; position: sticky; top: 0; height: 100dvh; overflow: auto; }
.side__brand { display: flex; align-items: center; gap: 16px; padding: 0 8px; text-decoration: none; }
.side__brand .mark { height: 40px; width: auto; }
.side__brand .word { height: 40px; width: auto; }
.side__label { color: #AEB8AE; font-size: 15px; padding: 8px 8px 24px; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side a.nav { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; color: #F4ECDD; text-decoration: none;
  font-size: 17px; border-inline-start: 3px solid transparent; }
.side a.nav.is-on { background: #1A342B; color: #D9B26F; font-weight: 600; border-inline-start-color: #D9B26F; }
.side a.nav:hover { background: rgba(26, 52, 43, .55); }
.side .spacer { flex: 1; min-height: 24px; }
.side .util { border-top: 1px solid #23372F; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.side .util a.nav, .side .util button.nav { color: #AEB8AE; font-size: 16px; }
.side button.nav { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; background: none; border: 0;
  border-inline-start: 3px solid transparent; text-align: start; }
.omain { padding: 28px 40px 48px; min-width: 0; }
.omain__inner { max-width: 1360px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-bottom: 24px; border-bottom: 1px solid #23372F; }
.tbar .select { width: 320px; max-width: 100%; }
.ptitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ptitle h1 { font: 600 var(--t-title)/1.3 var(--font-body); }
.ohead { display: none; }
@media (max-width: 1279px) { body.owner { --side: 220px; } .omain { padding: 24px 32px 40px; } }
@media (max-width: 1023px) {
  .shell { display: block; }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); z-index: 70; transform: translateX(-105%);
    transition: transform .2s var(--ease); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
  [dir=rtl] .side { transform: translateX(105%); }
  body.drawer-open .side { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(7, 17, 15, .55); }
  .ohead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
  .ohead .menu { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 10px;
    background: #1A342B; color: #F4ECDD; padding: 8px 14px; font-weight: 600; }
  .ohead .mark { height: 36px; width: auto; }
  .tbar { padding-bottom: 16px; }
  .tbar .langbtn, .tbar .tag { display: none; }
  .tbar .select { width: 100%; }
  .omain { padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 40px; }
}

/* Owner content */
.secgrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1244px) { .secgrid { grid-template-columns: 1fr 1fr; } }
.hdr--wide { }
@media (min-width: 1024px) { .screen--join .hdr, .screen--card .hdr, .screen--ticket .hdr { padding-bottom: 24px; border-bottom: 1px solid var(--d-line); min-height: 56px; } }
.ownergrid { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 552fr); gap: 32px; align-items: start; }
@media (max-width: 1199px) { .ownergrid { grid-template-columns: 1fr; } }
.ostack { display: flex; flex-direction: column; gap: 32px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.formgrid--2 { grid-template-columns: 1fr 1fr; }
.formgrid .span2 { grid-column: 1 / -1; }
@media (max-width: 899px) { .formrow { grid-template-columns: 1fr !important; } .formrow .btn { width: 100%; } }
@media (max-width: 599px) { .formgrid--2 { grid-template-columns: 1fr; } }
.colour { display: flex; align-items: center; gap: 10px; }
.colour input[type=color] { flex: none; width: 48px; height: 48px; border: 1px solid var(--d-input-line); border-radius: 10px; background: none; padding: 2px; }
.colour .input { font-family: ui-monospace, Consolas, monospace; font-size: 16px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ptool { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ptool .select { width: auto; min-height: 44px; }
.pcanvas { background: #07110F; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.frame { border-radius: 22px; overflow: hidden; background: #000; position: relative; flex: none; direction: ltr; }
[dir=rtl] .select[dir=ltr] { background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; }
.kpiwrap { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .kpiwrap { gap: 24px; } }
@media (max-width: 599px) {
  .kpiwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpiwrap > .kpis { display: contents; }
  .dashfilters { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
  .dashfilters .select { min-width: 0 !important; width: 100% !important; }
}
.frame iframe { border: 0; display: block; transform-origin: 0 0; }
.frame__label { color: #AEB8AE; font-size: 14px; direction: ltr; }
.secret { font: 700 34px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: var(--c-primary); }
.thumb { max-height: 70px; width: auto; background: repeating-conic-gradient(#444 0 25%, #333 0 50%) 0 0 / 16px 16px; border-radius: 8px; }
.slotrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--d-line); }
@media (max-width: 599px) { .slotrow { grid-template-columns: 1fr auto; } .slotrow .thumb { grid-row: span 2; } }

/* Tables: 48 header, 56 rows, a bounded scroll area */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-table); }
table.data th, table.data td { text-align: start; padding: 0 16px; border-bottom: 1px solid var(--d-line); vertical-align: middle; }
table.data th { height: 48px; color: var(--d-soft); font-weight: 500; font-size: 14px; position: sticky; top: 0; background: var(--c-surface); }
table.data td { height: 56px; }
table.data td.n, table.data th.n { text-align: end; font-variant-numeric: tabular-nums; }
table.data tr.big td { height: 68px; }
table.data td.acts { white-space: nowrap; text-align: end; }
table.data td.acts > * + * { margin-inline-start: 8px; }
table.data td.acts .btn { min-height: 48px; }
table.data td .strong { font-weight: 600; font-size: 18px; }
/* A cell's own label, shown only when the table stacks into cards on a phone (its header is hidden then) */
.cell-label { display: none; }
@media (max-width: 599px) {
  table.cards .cell-label { display: block; margin-bottom: 4px; }
  table.cards, table.cards thead, table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards tr { border-bottom: 1px solid var(--d-line); padding: 12px 0; }
  table.cards td { height: auto; border: 0; padding: 4px 0; }
  table.cards td.acts { text-align: start; padding-top: 8px; white-space: normal; }
  table.cards td.acts > * { margin: 4px 8px 4px 0; }
}

/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kpis--more { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--c-surface); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; min-height: 144px; }
.kpis--more .kpi { min-height: 110px; padding: 16px 20px; }
.kpi b { font: 600 var(--t-kpi)/1.25 var(--font-body); color: var(--c-text); font-variant-numeric: tabular-nums; }
.kpis--more .kpi b { font-size: 32px; color: var(--c-primary); }
.kpi .unit { color: var(--d-soft); font-size: 14px; }
@media (max-width: 1279px) { .kpis--more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .kpis, .kpis--more { grid-template-columns: 1fr 1fr; gap: 12px; } .kpi, .kpis--more .kpi { min-height: 112px; padding: 16px; }
  .kpi b { color: var(--c-primary); } }
.chart { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; direction: ltr; }
.chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; color: var(--d-soft); font-size: 13px; text-align: end; }
.chart__plot { position: relative; height: 220px; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; align-items: end;
  background-image: linear-gradient(var(--d-line) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 0; border-bottom: 1px solid var(--d-line); }
.chart__plot button { position: relative; height: 100%; min-height: 44px; display: flex; align-items: flex-end; justify-content: center;
  border: 0; background: none; padding: 0; }
.chart__plot button span.bar { width: 100%; max-width: 32px; border-radius: 4px 4px 0 0; background: var(--c-primary); }
.chart__plot button span.bar.zero { height: 2px !important; background: var(--d-line); }
.chart__plot button em { position: absolute; inset-inline: 0; text-align: center; font-style: normal; font-size: 13px; font-weight: 600; padding-bottom: 4px; }
.chart__plot button span.bar { position: relative; }
.chart__plot button:focus-visible, .chart__plot button:hover { background: rgba(217, 178, 111, .08); border-radius: 4px; }
.chart__x { grid-column: 2; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; color: var(--d-soft); font-size: 13px; text-align: center; }
.chart__wrap { overflow-x: auto; }
@media (max-width: 599px) { .chart__wrap .chart { min-width: 640px; } }

/* ------------------------------------------------------------------ designer view --- */
body.designer [data-spec] { outline: 1px dashed #ff4fd8; outline-offset: 2px; position: relative; }
body.designer [data-spec]::after {
  content: attr(data-spec); position: absolute; inset-inline-start: 0; top: -1.6em; z-index: 5; white-space: nowrap;
  font: 600 11px/1.4 ui-monospace, monospace; color: #fff; background: #c2189b; padding: 1px 6px; border-radius: 4px; direction: ltr;
}
body.designer img[data-spec] { outline-width: 2px; }

/* ------------------------------------------------------------------ posters (unchanged physical sizes) --- */
@page { margin: 0; }
.poster { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 22mm 18mm; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; text-align: center; background: var(--c-bg); color: var(--c-text); }
.poster.a5 { width: 148mm; min-height: 210mm; padding: 14mm 12mm; }
.poster img.posterlogo { max-height: 34mm; width: auto; }
.poster .qr { background: #fff; padding: 8mm; border-radius: 8mm; width: 120mm; }
.poster.a5 .qr { width: 86mm; }
.poster .qr img { width: 100%; image-rendering: pixelated; }
.poster .display { font-family: var(--font-head); }
@media print { .noprint { display: none !important; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ------------------------------------------------------------------ owner: important questions --- */
/* The subscription question (subscriptions review, finding 4; the creator, 13 Nov: "make it look like an
   important decision"): a gold frame and a warm tint on the dark panel, the new last day in gold, a strong
   red-orange Yes beside a plain Cancel, and a red line only when the change pauses the service at once. */
.confirmbox { display: grid; gap: 16px; padding: 20px; border: 2px solid #D9B26F; border-radius: var(--r-base);
  background: linear-gradient(180deg, rgba(217, 178, 111, .16), rgba(217, 178, 111, .05)); }
.confirmbox[hidden] { display: none; }
.confirmbox.is-danger { border-color: #E5533D; background: linear-gradient(180deg, rgba(229, 83, 61, .18), rgba(229, 83, 61, .05)); }
.confirmbox__title { margin: 0; font-size: 20px; font-weight: 700; color: #F3DCA6; }
.confirmrows { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.confirmrows > div { background: #0C1A17; border-radius: var(--r-small); padding: 10px 14px; }
.confirmrows dt { color: var(--d-soft); font-size: 14px; }
.confirmrows dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--c-text); }
.confirmrows .is-new dd { color: #F3DCA6; }
.confirmrows dd.is-bad { color: #FF9A85; }
.confirmwarn { margin: 0; padding: 12px 14px; border-radius: var(--r-small); background: #4A1A14; color: #FFD9CF;
  border-inline-start: 5px solid #E5533D; font-weight: 600; }
.confirmbox__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.confirmbox__ask { margin: 0; flex: 1 1 100%; font-size: 18px; font-weight: 700; color: var(--c-text); }
.btn--confirm { background: #C2412D; color: #FFFFFF; }
.btn--confirm:active:not(:disabled) { background: #9E3221; }
.btn--confirm:focus-visible { outline: 3px solid #F3DCA6; outline-offset: 2px; }

/* Yak's owner first page: key and backup warnings (batch 4 review, finding 6). */
.health { gap: 8px; margin-bottom: 16px; border: 2px solid #E5533D; background: rgba(229, 83, 61, .10); }
.health p { margin: 0; }

/* The privacy link at the end of every customer page (the page itself is on the front door). Both languages
   are in the page; the one matching <html lang> shows, so the instant language switch needs no script. */
.legal { margin: auto 0 0; padding-top: 8px; text-align: center; font-size: var(--t-note); line-height: 1.6; }
.legal a { color: var(--d-soft-bg); display: inline-block; padding: 12px 8px; text-underline-offset: 3px; }
.legal a:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; border-radius: 6px; }
html[lang="ar"] .legal__en, html[lang="en"] .legal__ar { display: none; }