/* ============================================================================
   AKMS V1 frontend candidate — shared foundation styles ("Sổ tay" design)
   Owner of this file: foundation (Fable 5.1). Screen files add ONLY screen-scoped
   selectors prefixed with their screen id (e.g. .st-, .cf-). Tokens live here.
   Screen-only typography per BR-ui-typography-screen-print-scope-current-20260821:
   Lexend 500/700 for text, Intel One Mono 500/700 for numbers, letter-spacing 0em,
   no synthetic bold. No paper/PDF output is styled by this file.
   ========================================================================== */

.ak-screen {
  /* palette — warm parchment surface, one amber brand hue, four status hues */
  --ak-bg: #F5F1E8;
  --ak-bg-2: #EDE7D9;
  --ak-surface: #FFFFFF;
  --ak-surface-2: #FBF8F1;
  --ak-ink: #1A1612;
  --ak-ink-2: #4A4238;
  --ak-muted: #6F6657;
  --ak-line: #DCD2BC;
  --ak-line-2: #ECE5D3;
  --ak-brand: #9A4B00;
  --ak-brand-2: #7A3A00;
  --ak-brand-soft: #FBF1E2;
  --ak-brand-line: #E4C89A;
  --ak-ok: #166534;      --ak-ok-bg: #DCFCE7;   --ak-ok-line: #A7E3BC;
  --ak-warn: #B45309;    --ak-warn-bg: #FEF3C7; --ak-warn-line: #F5D58A;
  --ak-danger: #B91C1C;  --ak-danger-bg: #FEE2E2; --ak-danger-line: #F3B4B4;
  --ak-info: #075985;    --ak-info-bg: #E0F2FE; --ak-info-line: #8CD1F7;
  --ak-deep: #4C1D95;    --ak-deep-bg: #EDE9FE; --ak-deep-line: #C4B5FD;
  --ak-focus: #2563EB;
  /* geometry */
  --ak-tap: 48px;
  --ak-radius: 14px;
  --ak-radius-sm: 10px;
  --ak-gutter: 12px;
  --ak-max: 880px;
  --ak-shadow: 0 1px 2px rgba(26, 22, 18, .06), 0 6px 20px -8px rgba(26, 22, 18, .18);
  --ak-shadow-lg: 0 18px 50px -12px rgba(26, 22, 18, .35);
  /* type */
  --ak-font: 'Lexend', sans-serif;
  --ak-num: 'Intel One Mono', monospace;
  --ak-fs-1: 13px;
  --ak-fs-2: 14px;
  --ak-fs-3: 16px;
  --ak-fs-4: 18px;
  --ak-fs-5: 22px;

  font-family: var(--ak-font);
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-synthesis: none;
  letter-spacing: 0em;
  line-height: 1.45;
  color: var(--ak-ink);
  background: var(--ak-bg);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body.ak-screen {
  margin: 0;
  min-height: 100dvh;
  font-size: var(--ak-fs-3);
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(154, 75, 0, .18);
}
.ak-screen input, .ak-screen button, .ak-screen select, .ak-screen textarea, .ak-screen optgroup, .ak-screen label {
  font-family: inherit; font-synthesis: none; -webkit-font-synthesis: none; letter-spacing: 0em;
}
.ak-screen button { font-weight: 700; }
.ak-screen b, .ak-screen strong { font-weight: 700; }
.ak-screen h1, .ak-screen h2, .ak-screen h3 { line-height: 1.3; margin: 0; font-weight: 700; }
.ak-screen .ak-num, .ak-screen .ak-money, .ak-screen .ak-code,
.ak-screen code, .ak-screen kbd, .ak-screen pre,
.ak-screen input[type="tel"], .ak-screen input[inputmode="numeric"], .ak-screen input[inputmode="decimal"],
.ak-screen input[data-ak="money"], .ak-screen input[data-ak="qty"], .ak-screen input[data-ak="int"] {
  font-family: var(--ak-num);
}
.ak-screen .ak-unit { font-family: var(--ak-font); }
.ak-screen span.ak-num, .ak-screen span.ak-money, .ak-screen span.ak-code, .ak-screen b.ak-num { line-height: 1; }

/* ---- a11y helpers -------------------------------------------------------- */
.ak-skip { position: absolute; left: -9999px; top: 8px; background: var(--ak-ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.ak-skip:focus { left: 8px; }
.ak-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 2px; }

/* ---- app shell ----------------------------------------------------------- */
#ak-app { display: flex; flex-direction: column; min-height: 100dvh; }
#ak-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--ak-brand); color: #fff;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(var(--ak-gutter), env(safe-area-inset-right, 0px)) 8px max(var(--ak-gutter), env(safe-area-inset-left, 0px));
  box-shadow: 0 2px 10px rgba(110, 53, 0, .28);
}
#ak-bar .ak-bar-in { max-width: var(--ak-max); margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ak-brand { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--ak-brand); font-weight: 700; font-size: 15px; flex: none; }
#ak-bar h1 { font-size: var(--ak-fs-4); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-bar-who { font-size: var(--ak-fs-1); opacity: .92; white-space: nowrap; max-width: 44%; overflow: hidden; text-overflow: ellipsis; }
#ak-nav { background: var(--ak-bg); padding: 8px max(var(--ak-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--ak-gutter), env(safe-area-inset-left, 0px)); }
#ak-nav:empty { display: none; }
.ak-nav-row { max-width: var(--ak-max); margin: 0 auto; display: flex; gap: 6px; align-items: stretch; }
.ak-nav-btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; border: 2px solid var(--ak-line); border-radius: 12px; background: var(--ak-surface); color: var(--ak-ink);
  padding: 7px 4px; min-height: 58px; font-weight: 700; font-size: var(--ak-fs-1); line-height: 1.15; text-align: center; cursor: pointer;
  transition: transform .07s ease, background-color .12s ease;
}
.ak-nav-btn:active { transform: translateY(1px) scale(.985); background: var(--ak-bg-2); }
.ak-nav-btn.is-cur { border-color: var(--ak-brand); background: var(--ak-brand-soft); color: var(--ak-brand-2); }
.ak-nav-btn .ak-ic { width: 22px; height: 22px; }
.ak-nav-btn.ak-nav-bell { flex: 0 0 56px; position: relative; }
.ak-nav-btn.ak-nav-bell[hidden] { display: none; }
.ak-badge-dot { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ak-danger); color: #fff; font-size: 11px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1; font-family: var(--ak-num); }
.ak-badge-dot.is-on { display: flex; }
#ak-main { flex: 1; max-width: var(--ak-max); width: 100%; margin: 0 auto; padding: 10px max(var(--ak-gutter), env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(var(--ak-gutter), env(safe-area-inset-left, 0px)); outline: none; }
.ak-ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -4px; }
.ak-ic svg { width: 100%; height: 100%; display: block; }

/* ---- surfaces ------------------------------------------------------------ */
.ak-card { background: var(--ak-surface); border: 1.5px solid var(--ak-line); border-radius: var(--ak-radius); box-shadow: var(--ak-shadow); }
.ak-card + .ak-card { margin-top: 10px; }
.ak-card-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1.5px solid var(--ak-line-2); }
.ak-card-h h2 { font-size: var(--ak-fs-3); color: var(--ak-brand-2); flex: 1; min-width: 0; }
.ak-card-b { padding: 12px 14px; }
.ak-section-title { font-size: var(--ak-fs-2); color: var(--ak-muted); font-weight: 700; margin: 14px 2px 6px; text-transform: none; }

/* ---- chips / status ------------------------------------------------------ */
.ak-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--ak-fs-1); font-weight: 700; background: var(--ak-surface-2); border: 1.5px solid var(--ak-line); color: var(--ak-ink-2); min-height: 30px; white-space: nowrap; }
.ak-chip .ak-num { font-size: inherit; }
.ak-chip.ok { color: var(--ak-ok); background: var(--ak-ok-bg); border-color: var(--ak-ok-line); }
.ak-chip.info { color: var(--ak-info); background: var(--ak-info-bg); border-color: var(--ak-info-line); }
.ak-chip.deep { color: var(--ak-deep); background: var(--ak-deep-bg); border-color: var(--ak-deep-line); }
.ak-chip.warn { color: var(--ak-warn); background: var(--ak-warn-bg); border-color: var(--ak-warn-line); }
.ak-chip.danger { color: var(--ak-danger); background: var(--ak-danger-bg); border-color: var(--ak-danger-line); }
.ak-chip[hidden] { display: none; }
.ak-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- buttons ------------------------------------------------------------- */
.ak-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ak-tap); padding: 0 16px; border-radius: 12px; border: 2px solid var(--ak-brand);
  background: var(--ak-brand); color: #fff; font-size: var(--ak-fs-3); font-weight: 700; cursor: pointer;
  text-decoration: none; box-shadow: 0 2px 0 var(--ak-brand-2); transition: transform .07s ease, filter .12s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ak-btn:active { transform: translateY(1px); box-shadow: none; filter: brightness(.94); }
.ak-btn.sec { background: var(--ak-surface); color: var(--ak-brand-2); border-color: var(--ak-brand-line); box-shadow: none; }
.ak-btn.ghost { background: transparent; color: var(--ak-ink-2); border-color: var(--ak-line); box-shadow: none; }
.ak-btn.danger { background: var(--ak-danger); border-color: var(--ak-danger); box-shadow: 0 2px 0 #7F1D1D; }
.ak-btn.danger.soft { background: var(--ak-danger-bg); color: var(--ak-danger); border-color: var(--ak-danger-line); box-shadow: none; }
.ak-btn.ok.soft { background: var(--ak-ok-bg); color: var(--ak-ok); border-color: var(--ak-ok-line); box-shadow: none; }
.ak-btn.sm { min-height: 40px; padding: 0 12px; font-size: var(--ak-fs-2); border-radius: 10px; }
.ak-btn.block { width: 100%; }
.ak-btn:disabled, .ak-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: grayscale(.25); transform: none; box-shadow: none; }
.ak-btn .ak-ic { width: 20px; height: 20px; }
.ak-btn.is-busy { position: relative; color: transparent !important; }
.ak-btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); border-top-color: #fff; animation: ak-spin .8s linear infinite; }
.ak-btn.sec.is-busy::after, .ak-btn.ghost.is-busy::after { border-color: rgba(154,75,0,.3); border-top-color: var(--ak-brand); }
@keyframes ak-spin { to { transform: rotate(360deg); } }
.ak-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ak-actions > .ak-btn { flex: 1; }

/* ---- forms --------------------------------------------------------------- */
.ak-field { margin: 0 0 12px; }
.ak-field > label, .ak-field > .ak-label { display: flex; align-items: center; gap: 6px; font-size: var(--ak-fs-2); font-weight: 700; color: var(--ak-ink); margin: 0 0 5px; }
.ak-field .ak-req { color: var(--ak-danger); }
.ak-field .ak-hint { font-weight: 500; color: var(--ak-muted); font-size: var(--ak-fs-1); }
.ak-input, .ak-select, .ak-textarea {
  width: 100%; border: 2px solid var(--ak-line); border-radius: 11px; padding: 0 12px; min-height: var(--ak-tap);
  font-size: var(--ak-fs-3); background: var(--ak-surface); color: var(--ak-ink); font-weight: 500;
}
.ak-textarea { min-height: 80px; padding: 10px 12px; line-height: 1.35; resize: vertical; }
.ak-input:focus, .ak-select:focus, .ak-textarea:focus { outline: none; border-color: var(--ak-brand); box-shadow: 0 0 0 3px rgba(154, 75, 0, .16); }
.ak-input[aria-invalid="true"], .ak-textarea[aria-invalid="true"] { border-color: var(--ak-danger); }
.ak-input:disabled, .ak-select:disabled, .ak-textarea:disabled { background: var(--ak-surface-2); color: var(--ak-muted); cursor: not-allowed; }
.ak-readonly { min-height: var(--ak-tap); display: flex; align-items: center; padding: 0 12px; border: 2px dashed var(--ak-line); border-radius: 11px; background: var(--ak-surface-2); color: var(--ak-ink-2); font-size: var(--ak-fs-3); font-weight: 700; }
.ak-check { min-height: var(--ak-tap); display: flex; align-items: center; gap: 10px; border: 2px solid var(--ak-line); border-radius: 11px; background: var(--ak-surface); padding: 9px 12px; cursor: pointer; font-size: 15px; font-weight: 700; }
.ak-check input { width: 24px; height: 24px; flex: none; accent-color: var(--ak-brand); margin: 0; }
.ak-check:has(input:checked) { border-color: var(--ak-brand); background: var(--ak-brand-soft); }
.ak-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.ak-radio { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ak-tap); padding: 0 14px; border: 2px solid var(--ak-line); border-radius: 11px; background: var(--ak-surface); cursor: pointer; font-size: 15px; font-weight: 700; }
.ak-radio input { width: 22px; height: 22px; flex: none; accent-color: var(--ak-brand); margin: 0; }
.ak-radio:has(input:checked) { border-color: var(--ak-brand); background: var(--ak-brand-soft); }
.ak-radio:focus-within, .ak-check:focus-within { box-shadow: 0 0 0 3px rgba(154, 75, 0, .16); }
fieldset.ak-field { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
fieldset.ak-field legend { display: flex; align-items: center; gap: 6px; font-size: var(--ak-fs-2); font-weight: 700; margin: 0 0 5px; padding: 0; }
.ak-ferr { color: var(--ak-danger); font-size: var(--ak-fs-1); font-weight: 700; min-height: 18px; margin: 4px 2px 10px; display: flex; align-items: flex-start; gap: 5px; }
.ak-ferr:empty { min-height: 0; margin: 0; }
.ak-two { display: flex; gap: 10px; }
.ak-two > .ak-field { flex: 1; min-width: 0; }
.ak-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; min-height: var(--ak-tap); }
.ak-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ak-switch .ak-sw { width: 54px; height: 32px; border-radius: 16px; background: #C9BE9F; position: relative; transition: background .15s; flex: 0 0 auto; }
.ak-switch .ak-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ak-switch input:checked + .ak-sw { background: var(--ak-ok); }
.ak-switch input:checked + .ak-sw::after { left: 26px; }
.ak-switch input:focus-visible + .ak-sw { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 2px; }
.ak-switch.is-disabled { cursor: not-allowed; opacity: .55; }
.ak-switch .ak-sw-tv { font-weight: 700; font-size: var(--ak-fs-2); min-width: 40px; }

/* ---- states: loading / empty / error ------------------------------------- */
.ak-skel { position: relative; overflow: hidden; background: var(--ak-bg-2); border-radius: 10px; min-height: 16px; }
.ak-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ak-shimmer 1.2s infinite; }
@keyframes ak-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ak-skel::after, .ak-btn.is-busy::after { animation: none; } }
.ak-skel-card { background: var(--ak-surface); border: 1.5px solid var(--ak-line-2); border-radius: var(--ak-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ak-empty { padding: 36px 14px; text-align: center; color: var(--ak-muted); font-size: 15.5px; font-weight: 700; }
.ak-empty .ak-ic { width: 44px; height: 44px; opacity: .55; margin-bottom: 8px; }
.ak-empty p { margin: 6px 0 0; font-weight: 500; font-size: var(--ak-fs-2); }
.ak-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--ak-radius); border: 1.5px solid var(--ak-danger-line); background: var(--ak-danger-bg); color: var(--ak-danger); font-weight: 700; margin: 10px 0; }
.ak-banner.warn { border-color: var(--ak-warn-line); background: var(--ak-warn-bg); color: var(--ak-warn); }
.ak-banner.info { border-color: var(--ak-info-line); background: var(--ak-info-bg); color: var(--ak-info); }
.ak-banner .ak-banner-t { flex: 1; min-width: 0; }
.ak-banner p { margin: 4px 0 0; font-weight: 500; font-size: var(--ak-fs-2); color: var(--ak-ink-2); }
.ak-banner .ak-btn { flex: none; }
.ak-status { font-size: var(--ak-fs-1); font-weight: 700; min-height: 16px; margin-left: auto; white-space: nowrap; color: var(--ak-muted); }
.ak-status.ok { color: var(--ak-ok); }
.ak-status.err { color: var(--ak-danger); }

/* ---- sheet / dialog ------------------------------------------------------ */
.ak-scrim { position: fixed; inset: 0; background: rgba(20, 17, 13, .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.ak-scrim.centered { align-items: center; padding: 16px; }
.ak-sheet { background: var(--ak-bg); width: 100%; max-width: var(--ak-max); max-height: 92dvh; overflow-y: auto; border-radius: 18px 18px 0 0; box-shadow: var(--ak-shadow-lg); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.ak-sheet-h { position: sticky; top: 0; z-index: 2; background: var(--ak-brand); color: #fff; display: flex; align-items: center; gap: 8px; padding: 12px 12px; }
.ak-sheet-h h2 { flex: 1; font-size: 17px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ak-sheet-h .ak-x { border: 2px solid #fff; background: rgba(255,255,255,.14); color: #fff; width: 44px; height: 44px; border-radius: 10px; font-size: 22px; cursor: pointer; line-height: 1; flex: none; }
.ak-sheet-b { padding: 12px 12px 4px; }
.ak-dialog { background: var(--ak-surface); border-radius: 16px; width: 100%; max-width: 440px; padding: 18px; box-shadow: var(--ak-shadow-lg); font-size: var(--ak-fs-3); }
.ak-dialog h2 { font-size: 17px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ak-dialog .ak-dialog-body { margin-bottom: 14px; color: var(--ak-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ak-dialog .ak-dialog-body p { margin: 0 0 8px; }
.ak-dialog .ak-btn + .ak-btn { margin-top: 8px; }
.ak-secret { display: block; font-family: var(--ak-num); font-size: 15px; background: var(--ak-surface-2); border: 1.5px dashed var(--ak-line); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; margin: 6px 0 10px; color: var(--ak-ink); }

/* ---- toast --------------------------------------------------------------- */
#ak-toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 520px); }
.ak-toast { background: #1F1A12; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); animation: ak-toast-in .18s ease-out; max-width: 100%; overflow-wrap: anywhere; }
.ak-toast.ok { background: var(--ak-ok); }
.ak-toast.danger { background: var(--ak-danger); }
@keyframes ak-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- catalogue dialog ("Khác") + notifications --------------------------- */
.ak-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; overflow: auto; }
.ak-cat .ak-nav-btn { min-height: 66px; font-size: 12.5px; padding: 10px 6px; position: relative; }
.ak-cat .ak-nav-btn.soon { background: #F3F4F6; color: #6B7280; border-style: dashed; border-color: #C7C7C7; opacity: .65; cursor: not-allowed; }
.ak-cat .ak-nav-btn.soon:active { background: #F3F4F6; transform: none; }
.ak-cat .ak-badge-dot { top: 5px; right: 7px; }
.ak-notes { display: flex; flex-direction: column; gap: 6px; padding: 12px; overflow: auto; }
.ak-note { border-left: 4px solid var(--ak-line); background: var(--ak-surface-2); border-radius: 8px; padding: 8px 10px; }
.ak-note.unread { border-left-color: var(--ak-danger); background: var(--ak-danger-bg); }
.ak-note.lk { cursor: pointer; }
.ak-note .t { font-weight: 700; font-size: 13.5px; }
.ak-note .b { font-size: 12.5px; color: var(--ak-ink-2); margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ak-note .m { font-size: 11px; color: var(--ak-muted); margin-top: 2px; font-family: var(--ak-num); }
.ak-note-act { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--ak-line); }
.ak-note-act a { margin-left: auto; font-size: var(--ak-fs-1); color: var(--ak-info); text-decoration: none; font-weight: 700; }

/* ---- dev scenario panel (candidate-only) --------------------------------- */
#ak-dev { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 80; }
#ak-dev .ak-dev-fab { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ak-line); background: var(--ak-surface); color: var(--ak-ink-2); box-shadow: var(--ak-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#ak-dev .ak-dev-fab .ak-ic { width: 22px; height: 22px; }
#ak-dev .ak-dev-box { position: absolute; right: 0; bottom: 54px; width: min(320px, 92vw); background: var(--ak-surface); border: 1.5px solid var(--ak-line); border-radius: 14px; box-shadow: var(--ak-shadow-lg); padding: 12px; font-size: var(--ak-fs-1); }
#ak-dev .ak-dev-box[hidden] { display: none; }
#ak-dev h3 { font-size: var(--ak-fs-2); margin-bottom: 6px; }
#ak-dev p { margin: 0 0 8px; color: var(--ak-muted); }
#ak-dev .ak-dev-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#ak-dev .ak-dev-row .ak-btn { flex: 1; }
#ak-dev .ak-select { min-height: 40px; font-size: var(--ak-fs-2); }

/* ---- login (screen-scoped, kept in foundation because it is the shell's door) */
.lg-wrap { min-height: calc(100dvh - 60px); display: flex; align-items: center; justify-content: center; padding: 12px 0; }
.lg-card { width: 100%; max-width: 440px; background: var(--ak-surface); border: 1.5px solid var(--ak-line); border-radius: 22px; box-shadow: var(--ak-shadow-lg); padding: 28px 22px 22px; }
.lg-emblem { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.lg-emblem .ak-brand { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; background: var(--ak-brand); color: #fff; box-shadow: 0 6px 18px -6px rgba(154,75,0,.6); }
.lg-title { text-align: center; font-size: var(--ak-fs-5); color: var(--ak-brand-2); }
.lg-sub { text-align: center; color: var(--ak-muted); font-size: var(--ak-fs-2); margin: 4px 0 20px; }
.lg-form .ak-field label { color: var(--ak-brand-2); }

/* ---- placeholder (candidate group not built yet) ------------------------- */
.ph-card { padding: 22px 16px; text-align: center; }
.ph-card .ak-chip { margin-bottom: 10px; }
.ph-card h2 { font-size: var(--ak-fs-4); margin-bottom: 6px; }
.ph-card p { color: var(--ak-muted); margin: 0 0 6px; font-size: var(--ak-fs-2); }
.ph-code { font-family: var(--ak-num); font-size: var(--ak-fs-2); color: var(--ak-ink-2); background: var(--ak-surface-2); border: 1px dashed var(--ak-line); border-radius: 8px; padding: 4px 8px; display: inline-block; }

/* ---- responsive ---------------------------------------------------------- */
@media (min-width: 720px) {
  .ak-scrim { align-items: center; padding: 20px; }
  .ak-sheet { border-radius: 18px; max-width: 640px; max-height: 88dvh; }
  .ak-nav-btn { flex-direction: row; gap: 8px; min-height: 52px; font-size: var(--ak-fs-2); }
  .ak-cat { grid-template-columns: 1fr 1fr 1fr; }
  .ak-cat .ak-nav-btn { flex-direction: column; }
  #ak-main { padding-top: 14px; }
}
@media (max-width: 360px) {
  body.ak-screen { font-size: 15px; }
  #ak-bar h1 { font-size: 16.5px; }
  .ak-two { flex-direction: column; gap: 0; }
  .ak-radio { padding: 0 10px; font-size: 14px; gap: 6px; }
  .ak-nav-btn { font-size: 12px; padding: 6px 2px; }
}
@media print { #ak-bar, #ak-nav, #ak-dev, #ak-toasts { display: none !important; } }