/* scope: shared */
/* SwabodhiniCare styles. Tokens come from docs/mockups/mockups.css.
   Light is the default for everyone; dark applies only when chosen in Settings (data-theme="dark"). */

:root {
  --paper: #EEF3F1;
  --surface: #FFFFFF;
  --surface-2: #F5F8F7;
  --ink: #16252D;
  --ink-2: #4A5B63;
  --line: #C9D5D2;
  --primary: #0F5C6E;
  --on-primary: #FFFFFF;
  --primary-soft: #DCECEF;
  --marigold: #E8A317;
  --marigold-soft: #FCEFCF;
  --on-marigold: #3D2A00;
  --ok: #1F7A4D;
  --on-ok: #FFFFFF;
  --ok-soft: #DDF1E6;
  --warn: #8F5200;
  --warn-soft: #FBEBD2;
  --bad: #B3261E;
  --bad-soft: #F9DEDC;

  --f-head: "Mukta Malar", "Noto Sans Tamil", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Noto Sans Tamil", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --tap: 56px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0D1618;
  --surface: #15222A;
  --surface-2: #1B2B33;
  --ink: #E4EDEF;
  --ink-2: #A6B8BE;
  --line: #2E424A;
  --primary: #62C3D6;
  --on-primary: #06262E;
  --primary-soft: #173A43;
  --marigold: #F2B84B;
  --marigold-soft: #3A2E12;
  --on-marigold: #1E1500;
  --ok: #5DCB93;
  --on-ok: #062415;
  --ok-soft: #153526;
  --warn: #F0B35A;
  --warn-soft: #3A2A12;
  --bad: #FF8A80;
  --bad-soft: #3D1B1A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.125rem / 1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

:root[lang="ta"] body { font-size: 1.1875rem; line-height: 1.7; }

h1, h2, h3 { font-family: var(--f-head); line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.muted { color: var(--ink-2); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- Page frame ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }

.demo-banner {
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 2px dashed var(--warn);
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}

/* The bar may take a second line. Its three items are text that cannot shrink — a name and two
   buttons — and in Tamil, at phone width, they need more room than the screen has: on a 390px phone
   the row came to 396px and pushed the whole page sideways. Wrapping is what the bar does instead of
   overflowing, at whatever width the words in the chosen language happen to need. The buttons keep to
   the right on the line they wrap onto, as the wordmark's own auto margin has put them on the line
   above, so they read as one column of actions. */
.app-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.wordmark { font: 800 1.2rem/1 var(--f-head); color: var(--ink); margin-right: auto; text-decoration: none; }
.wordmark b { color: var(--primary); }
.app-bar .btn-small { white-space: nowrap; }

/* On a phone the bar's own words are made to fit: Tamil is the longer of the two languages, and at
   390px its three items came to 396px — the whole page then slid sideways on every screen. These
   sizes are what Tamil needs, with a little room to spare; wrapping above is what happens if some
   later wording still does not fit. */
@media (max-width: 440px) {
  .app-bar { gap: 6px; padding-inline: 12px; }
  .wordmark { font-size: 1rem; }
  .app-bar .btn-small { font-size: 0.95rem; padding-inline: 8px; }
}

.screen {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.screen h1 { font-size: 1.75rem; font-weight: 800; }
.screen h2 { font-size: 1.35rem; font-weight: 700; }

.brand { display: grid; gap: 4px; }
.brand h1 { font-size: 2.1rem; }
.brand h1 b { color: var(--primary); }

/* ---------- Buttons ---------- */
.btn {
  min-height: var(--tap);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.btn[disabled] { opacity: 0.6; cursor: progress; }
/* Disabled for another reason than a wait: a button on a file this person may only read is not
   working, it is not theirs to press. setBusy marks the ones that are working with data-idle-text. */
.btn[disabled]:not([data-idle-text]) { cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-outline { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.btn-ok { background: var(--ok); color: var(--on-ok); }
.btn-warn { background: var(--surface); color: var(--warn); border-color: var(--warn); }
.btn-bad { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn-block { width: 100%; }
.btn-small { min-height: 48px; font-size: 1rem; padding-inline: 14px; }

.link-btn {
  min-height: 48px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}

/* ---------- Fields ---------- */
form { display: flex; flex-direction: column; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-weight: 700; }
.req { font-weight: 400; color: var(--ink-2); font-size: 0.95em; }
.hint { font-size: 0.95rem; color: var(--ink-2); }

.input, .select {
  min-height: var(--tap);
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 10px 14px;
  font-size: 1.1rem;
}
.input:focus, .select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-weight: 700; font-size: 1rem; }

.with-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* ---------- Choice buttons ---------- */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  min-height: var(--tap);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 8px 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
}
.choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.choice[aria-pressed="true"]::before { content: "✓"; font-weight: 800; color: var(--primary); }

/* ---------- Messages ---------- */
.alert {
  display: flex;
  gap: 10px;
  align-items: start;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-weight: 700;
}
.alert-bad { background: var(--bad-soft); color: var(--bad); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.note {
  display: flex; gap: 10px; align-items: start;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 1rem;
}

/* ---------- Panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.facts { margin: 0; display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 0.95rem; color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Bottom navigation ---------- */
.bottom-nav {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a {
  min-height: 64px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
}
.bottom-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

/* ---------- Form steps ---------- */
.progress { display: grid; gap: 8px; }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.progress-label { font-weight: 700; color: var(--primary); }
.ticks { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.ticks span { height: 8px; border-radius: 4px; background: var(--line); }
.ticks .done { background: var(--primary); }
.ticks .now { background: var(--marigold); }
.save-status { font-weight: 700; font-size: 0.95rem; color: var(--ink-2); }
.save-status[data-state="saved"] { color: var(--ok); }
.save-status[data-state="error"], .save-status[data-state="conflict"] { color: var(--bad); }
.app-ref { font-size: 0.9rem; color: var(--ink-2); }
/* Demo aid: fills the whole form, so it sits apart from the questions and stays easy to ignore. */
.demo-fill { margin: 6px 0 14px; border-style: dashed; color: var(--ink-2); }

/* The moves that are not part of filling the form in (application.html, main spec §5): withdrawing a
   draft the family has dropped, and reopening an admitted file. Quiet links below the questions, so
   neither is a thumb's width from Save & Next; only one of them is ever drawn, and only for somebody
   the workflow would let take it. */
.file-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.questions { display: flex; flex-direction: column; gap: 20px; }
.q { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; padding-bottom: 0; }
.q > .label, .q > label { font-weight: 700; }
.choices.three { grid-template-columns: repeat(3, 1fr); }
.choices.list { grid-template-columns: 1fr; }
.choices.list .choice { justify-content: flex-start; text-align: left; padding-inline: 16px; }
.dob { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
textarea.input { min-height: 120px; resize: vertical; }
.derived {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  background: var(--primary-soft); border-radius: var(--r-sm); padding: 6px 12px; font-weight: 700;
}
.consent { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; font-size: 1rem; }
.check { display: flex; gap: 12px; align-items: center; min-height: var(--tap); font-weight: 700; cursor: pointer; }
.check input { width: 28px; height: 28px; flex-shrink: 0; accent-color: var(--primary); }
.flag {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-weight: 700; font-size: 0.95rem; border-radius: var(--r-sm); padding: 4px 10px;
  background: var(--warn-soft); color: var(--warn);
}
.flag-bad { background: var(--bad-soft); color: var(--bad); }

.action-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ---------- The status banner (application.html, main spec §5) ---------- */
/* What the file's own screen says about where it stands, above the questions: the status stamp and,
   when a decision left a reason on the routing slip, who took it and what they said. The words wear
   the warn tone a send-back wears, because that is the news they are usually carrying — and the bad
   tone when a rejection is what is being quoted. The sections to fix below reuse the overview's list,
   and only a file that was sent back has any. */
.status-banner { display: grid; gap: 12px; }
.status-banner .banner {
  display: grid;
  gap: 6px;
  background: var(--warn-soft);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.status-banner .banner-title { font-weight: 700; color: var(--warn); }
.status-banner .banner-comment { overflow-wrap: anywhere; }
.status-banner[data-status="REJECTED"] .banner { background: var(--bad-soft); }
.status-banner[data-status="REJECTED"] .banner-title { color: var(--bad); }

/* ---------- All steps ---------- */
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sec-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.sec-list .node {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.9rem var(--f-mono);
  border: 2px solid var(--line);
}
.sec-list [data-state="done"] .node { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.sec-list [data-state="incomplete"] button { border: 2px solid var(--warn); }
.sec-state { font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.sec-list [data-state="done"] .sec-state { color: var(--ok); }
.sec-list [data-state="incomplete"] .sec-state { color: var(--warn); }

/* ---------- Application cards (home) ---------- */
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.app-card {
  display: grid;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
}
.app-card:hover { border-color: var(--primary); }
.app-card-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.app-who { display: grid; gap: 2px; }
.app-name { font: 700 1.2rem/1.25 var(--f-head); }
.app-sub { color: var(--ink-2); font-size: 1rem; }
.stamp {
  display: inline-block;
  font: 600 0.8rem/1.2 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 4px 8px;
  transform: rotate(-2deg);
  white-space: nowrap;
}
:root[lang="ta"] .stamp { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.stamp[data-status="RETURNED"] { color: var(--warn); }
.stamp[data-status="ADMITTED"] { color: var(--ok); }
.stamp[data-status="REJECTED"], .stamp[data-status="WITHDRAWN"] { color: var(--bad); }
.stamp-turn { color: var(--on-marigold); background: var(--marigold-soft); }
.stamp-ok { color: var(--ok); }
.stamp-warn { color: var(--warn); }
.stamp-bad { color: var(--bad); }

/* ---------- Queue (home, main spec §7 R1) ---------- */
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.queue { display: grid; gap: 12px; }
.queue-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.queue-num {
  font: 800 4.2rem/0.9 var(--f-head);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.queue-label { font: 700 1.2rem/1.3 var(--f-head); }

/* ---------- Review screen (main spec §5, §12) ---------- */
.review-body { display: grid; gap: 20px; }
.applicant { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.thumb {
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font: 800 1.4rem var(--f-head);
}
.back-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-weight: 700; color: var(--primary); text-decoration: none; min-height: 48px;
}
.flags { display: grid; gap: 6px; justify-items: start; }

/* The full routing slip: one row per step, joined by the line between the numbered nodes. */
.slip { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.slip li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.slip li:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line);
}
.slip li.is-done:not(:last-child)::before { background: var(--ok); }
.slip .node {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.95rem var(--f-mono);
  border: 3px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.slip .is-done .node { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.slip .is-now .node { border-color: var(--marigold); background: var(--marigold-soft); color: var(--on-marigold); }
.slip-body { display: grid; gap: 4px; padding-top: 4px; }
.slip-role { font-weight: 700; }
.slip-meta { font-size: 0.95rem; color: var(--ink-2); }
.slip-note { margin: 4px 0 0; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 1rem; }

/* Decision buttons: the strongest one takes the whole width when there is an odd number of them,
   so Approve is never shoulder to shoulder with Reject (the mockup's S6 bar). */
.action-bar.decisions { grid-template-columns: 1fr 1fr; }
.action-bar.decisions > .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.action-bar.decisions > .btn { padding-inline: 10px; }

/* Confirmations before every action, in plain words (main spec §12): a sheet over a dimmed screen. */
.scrim { position: fixed; inset: 0; background: rgb(13 22 24 / 55%); display: flex; align-items: flex-end; }
.sheet {
  width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 24px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 14px;
}
.sheet h3 { font-size: 1.4rem; font-weight: 800; }
.sheet .btns { display: grid; gap: 10px; }

/* The four-step route (routing-slip.js): four segments, then where the file is. */
.track { display: grid; gap: 6px; }
.track-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.track-bar span { height: 10px; border-radius: 5px; background: var(--line); }
.track-bar .done { background: var(--ok); }
.track-bar .now { background: var(--marigold); }
.track-text { font-size: 0.95rem; color: var(--ink-2); }

/* ---------- The Director's decision (main spec §5, §10.1) ---------- */
/* The number, as the mockup's S7 and D1 set it: the one thing on this screen that is read digit by
   digit, so it is the largest text on it and never wraps mid-number on a narrow phone. */
.reg-no { font-size: 1.3rem; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
/* Where the signature will be stamped. Dashed, because nothing is in it yet: the signature image is
   M7, and the box says so rather than showing a place-holder that could be mistaken for one. */
.sig-box {
  display: grid; gap: 8px; padding: 14px;
  border: 2px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.sig-name { font-weight: 700; }
/* D1: what the Director sees straight after signing. */
.success { justify-items: center; text-align: center; }
.success .note { text-align: left; }
/* The confirmation takes focus when it appears so it is read out; the ring would only outline a
   block of text that is already the only thing on the screen. */
.success:focus { outline: none; }
.big-check {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok);
  font: 800 2rem/1 var(--f-head);
}

/* The consent signature pad (M7a). touch-action: none, or the page scrolls under the parent's
   finger instead of drawing. */
.sign { display: flex; flex-direction: column; gap: 10px; }
.sign-hint { color: var(--ink-2); margin: 0; }
.sign-pad {
  touch-action: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  background: #fff;
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  cursor: crosshair;
}
.sign-pad.is-readonly { cursor: default; opacity: 0.7; }
.sign-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sign-state { font-weight: 700; color: var(--ok); margin: 0; }
.sign-state.is-stale { color: var(--bad); }

/* Reports screen (main spec §7): the filter grid and the table/bar-chart output. */
.report-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-filters .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
.report-out { margin-top: 16px; }
.report-out-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.report-out-head h2 { margin: 0; font-size: 1.05rem; }
.report-summary { color: var(--ink-2); font-size: 0.95rem; margin: 0 0 10px; }
.report-out h3 { margin: 0 0 8px; font-size: 0.95rem; }
.table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.report-table th, .report-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.report-table th { color: var(--ink-2); font-weight: 700; background: var(--surface-2); }
.report-table td { color: var(--ink); }
.bar-chart { display: grid; gap: 8px; margin-bottom: 16px; }
.bar-row { display: grid; grid-template-columns: 7rem 1fr 2rem; align-items: center; gap: 8px; }
.bar-label { color: var(--ink-2); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 14px; background: var(--primary-soft); border-radius: 7px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 7px; min-width: 2px; }
.bar-count { color: var(--ink); font-size: 0.85rem; text-align: right; }
@media (max-width: 480px) {
  .report-filters { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 6rem 1fr 2rem; }
}

/* ---------- Admin ---------- */
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.admin-head h2 { margin: 0; font-size: 1.05rem; }
.staff-form { display: grid; gap: 10px; }
.staff-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.temp-password { display: grid; gap: 8px; padding: 14px; background: var(--ok-soft); border-radius: var(--r-lg); }
.temp-password-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--ok); }
.temp-password code { font-family: var(--f-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.pager .page-info { color: var(--ink-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .staff-form .row { grid-template-columns: 1fr; }
}