/* Kho 4RAU — theo design-system/kho-4rau/MASTER.md (UI UX Pro Max: Flat Design, slate + green).
   Màu chỉ khai báo ở :root; component dùng token, không dùng mã màu trực tiếp. */
:root {
  --color-primary: #334155;
  --color-on-primary: #ffffff;
  --color-accent: #047857;          /* đậm hơn #059669 gốc để chữ trắng đạt 5,5:1 */
  --color-accent-hover: #065f46;
  --color-on-accent: #ffffff;
  --color-background: #f8fafc;
  --color-foreground: #0f172a;
  --color-card: #ffffff;
  --color-muted: #f1f5f9;
  --color-muted-foreground: #475569;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-ring: #2563eb;
  --color-destructive: #dc2626;
  --color-on-destructive: #ffffff;
  --row-hover: #f1f5f9;
  --row-selected: #ecfdf5;

  /* Trạng thái: luôn đi kèm chữ/biểu tượng, không chỉ dựa vào màu */
  --ok-fg: #047857;   --ok-bg: #d1fae5;
  --warn-fg: #92400e; --warn-bg: #fef3c7;
  --bad-fg: #b91c1c;  --bad-bg: #fee2e2;
  --info-fg: #1d4ed8; --info-bg: #dbeafe;
  --mute-fg: #475569; --mute-bg: #e2e8f0;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --radius: 8px;
  --radius-sm: 6px;
  --dur: 150ms;
  --font-sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: "Fira Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #0b1220; --color-on-primary: #e2e8f0;
    --color-accent: #34d399; --color-accent-hover: #6ee7b7; --color-on-accent: #052e1f;
    --color-background: #0b1220; --color-foreground: #e2e8f0; --color-card: #111a2b;
    --color-muted: #1a2539; --color-muted-foreground: #94a3b8;
    --color-border: #22304a; --color-border-strong: #33466a; --color-ring: #60a5fa;
    --color-destructive: #f87171; --color-on-destructive: #2a0606;
    --row-hover: #16223a; --row-selected: #0f2e26;
    --ok-fg: #6ee7b7; --ok-bg: #063d2e; --warn-fg: #fcd34d; --warn-bg: #3d2a06;
    --bad-fg: #fca5a5; --bad-bg: #4a1111; --info-fg: #93c5fd; --info-bg: #10284d;
    --mute-fg: #cbd5e1; --mute-bg: #263349;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-primary: #0b1220; --color-on-primary: #e2e8f0;
  --color-accent: #34d399; --color-accent-hover: #6ee7b7; --color-on-accent: #052e1f;
  --color-background: #0b1220; --color-foreground: #e2e8f0; --color-card: #111a2b;
  --color-muted: #1a2539; --color-muted-foreground: #94a3b8;
  --color-border: #22304a; --color-border-strong: #33466a; --color-ring: #60a5fa;
  --color-destructive: #f87171; --color-on-destructive: #2a0606;
  --row-hover: #16223a; --row-selected: #0f2e26;
  --ok-fg: #6ee7b7; --ok-bg: #063d2e; --warn-fg: #fcd34d; --warn-bg: #3d2a06;
  --bad-fg: #fca5a5; --bad-bg: #4a1111; --info-fg: #93c5fd; --info-bg: #10284d;
  --mute-fg: #cbd5e1; --mute-bg: #263349;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-background); color: var(--color-foreground);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--info-fg); }
.code { font-family: var(--font-mono); font-size: 0.92em; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Focus luôn nhìn thấy (WCAG 2.2) */
:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: var(--space-md); top: -60px; z-index: 50; background: var(--color-card); color: var(--color-foreground); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-sm); }

/* ── Khung ── */
.top {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center;
  padding: 10px var(--space-lg); background: var(--color-primary); color: var(--color-on-primary);
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-border);
}
.brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: 17px; margin-right: auto; }
.brand .logo { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; }
.tag { font-weight: 500; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; opacity: .85; }
.tools { display: contents; }
.top .tools > summary { display: none; list-style: none; }
.tools > summary::-webkit-details-marker { display: none; }
.tools-body { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
.ctl { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.top .ctl select, .top .ctl input { background: rgba(255,255,255,.1); color: inherit; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-sm); padding: 6px 8px; min-height: 36px; }
.top select option { color: #0f172a; background: #ffffff; }
.top .ctl input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.top .btn-top { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm); padding: 6px 10px; min-height: 36px; cursor: pointer; transition: background var(--dur) ease; }
.top .btn-top:hover { background: rgba(255,255,255,.12); }

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 57px); }
nav.side { background: var(--color-card); border-right: 1px solid var(--color-border); padding: var(--space-md) var(--space-sm); }
nav.side .sep { font-size: 13px; font-weight: 700; color: var(--color-muted-foreground); padding: var(--space-md) 12px 6px; }
nav.side .sep:first-child { padding-top: 0; }
nav.side button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 12px; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-foreground);
  transition: background var(--dur) ease, color var(--dur) ease;
}
nav.side button:hover { background: var(--row-hover); }
nav.side button[aria-current="page"] { background: var(--row-selected); color: var(--ok-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); }
nav.side .label { flex: 1; }
/* Nhóm lớn → mục nhỏ */
.menu-btn { display: none !important; }
.nav-group { margin-bottom: 2px; }
nav.side .nav-sec { font-weight: 600; }
nav.side .nav-sec .chev { display: inline-flex; color: var(--color-muted-foreground); transition: transform var(--dur) ease; }
nav.side .nav-sec[aria-expanded="true"] .chev { transform: rotate(90deg); }
.nav-group.cur > .nav-sec { color: var(--ok-fg); }
.nav-subs { margin: 2px 0 6px 22px; padding-left: 8px; border-left: 2px solid var(--color-border); }
nav.side .nav-subs button { min-height: 40px; padding: 8px 10px; font-size: 14.5px; }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--color-muted-foreground); margin-bottom: 6px; }
.crumb .icon { width: 14px; height: 14px; }
.crumb b { color: var(--color-foreground); font-weight: 600; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--space-md); }
.steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--color-muted); color: var(--color-muted-foreground); font-weight: 600; font-size: 14px; }
.steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--color-card); border: 1px solid var(--color-border-strong); font-size: 13px; }
.steps li.cur { background: var(--warn-bg); color: var(--warn-fg); }
.steps li.done { background: var(--ok-bg); color: var(--ok-fg); }
.steps li.done span, .steps li.cur span { border-color: currentColor; }
.todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.todo-item { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 56px; cursor: pointer; color: inherit; font: inherit; transition: background var(--dur) ease, transform 100ms ease-out; }
.todo-item:hover { background: var(--row-hover); }
.todo-item:active { transform: scale(0.98); }
.todo-n { min-width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.todo-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.todo-t small { color: var(--color-muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.link { cursor: pointer; transition: border-color var(--dur) ease, transform 100ms ease-out; }
.kpi.link:hover { border-color: var(--color-accent); }
.kpi.link:active { transform: scale(0.98); }
.cell-in.changed { border-color: #d97706 !important; box-shadow: 0 0 0 2px rgba(217,119,6,.25); }
main:focus { outline: none; }
.count { background: var(--color-destructive); color: var(--color-on-destructive); border-radius: 99px; font-size: 12px; font-weight: 700; padding: 0 7px; line-height: 20px; min-width: 22px; text-align: center; }

main { padding: var(--space-lg) var(--space-lg) 64px; min-width: 0; max-width: 1480px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; text-wrap: balance; }
h2, h3 { text-wrap: balance; }
p, .note, .sub { text-wrap: pretty; }
.btn:active:not(:disabled), .chip:active, nav.side button:active { transform: scale(0.97); }
.btn, .chip { transition: transform 100ms ease-out, background var(--dur) ease, border-color var(--dur) ease; }
h2 { font-size: 17px; line-height: 1.3; margin: 0 0 var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
h3 { font-size: 15px; margin: 0 0 6px; }
.sub { color: var(--color-muted-foreground); margin: 0; font-size: 15px; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
.filters label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--color-muted-foreground); }

.panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md) 20px; margin-bottom: var(--space-md); }
.panel > .note:first-of-type { margin-top: -2px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-md); align-items: start; }
.grid2 > .panel { margin-bottom: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.split > .panel { margin-bottom: 0; }
@media (min-width: 1180px) { .split { grid-template-columns: minmax(470px, 5fr) minmax(0, 7fr); } }
.stack-gap > * + * { margin-top: var(--space-md); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.row.end { justify-content: flex-end; }
.note { color: var(--color-muted-foreground); font-size: 14px; margin: 4px 0 12px; }
.muted { color: var(--color-muted-foreground); }
.small { font-size: 13px; }
.legend { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

/* ── KPI ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: var(--space-md); }
.kpi { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px var(--space-md); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.kpi .ki { grid-row: span 3; width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-muted); color: var(--color-muted-foreground); }
.kpi.warn .ki { background: var(--warn-bg); color: var(--warn-fg); }
.kpi.bad .ki { background: var(--bad-bg); color: var(--bad-fg); }
.kpi.ok .ki { background: var(--ok-bg); color: var(--ok-fg); }
.kpi .l { color: var(--color-muted-foreground); font-size: 13px; }
.kpi .v { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .h { color: var(--color-muted-foreground); font-size: 13px; }

/* ── Biểu đồ cột ngang (xếp giảm dần, ghi số trực tiếp) ── */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars li { display: grid; grid-template-columns: minmax(92px, max-content) 1fr 72px; gap: 10px; align-items: center; font-size: 14px; }
.bars li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.bars .bt { height: 14px; background: var(--color-muted); border-radius: 4px; overflow: hidden; }
.bars .bf { display: block; height: 100%; background: var(--color-accent); border-radius: 4px; }
.bars .bv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Bảng ── */
.tbl-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.tbl-wrap.tall { max-height: 70vh; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; white-space: nowrap; }
tr:last-child > td { border-bottom: 0; }
th { font-size: 12.5px; color: var(--color-muted-foreground); font-weight: 600; background: var(--color-muted); position: sticky; top: 0; z-index: 1; }
td.n, th.n { text-align: right; }
td.wrap { white-space: normal; min-width: 220px; }
tr.click { cursor: pointer; transition: background var(--dur) ease; }
tr.click:hover > td { background: var(--row-hover); }
tr.sel > td { background: var(--row-selected); }
tr.group > td { background: transparent; color: var(--color-foreground); font-size: 15px; font-weight: 700; padding-top: 16px; }
.sticky-col { position: sticky; left: 0; background: var(--color-card); z-index: 2; box-shadow: 1px 0 0 var(--color-border); }
th.sticky-col { z-index: 3; background: var(--color-muted); }
.row-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; font-weight: 600; }

/* ── Nhãn trạng thái ── */
.b { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.b .icon { width: 13px; height: 13px; }
.b.ok { color: var(--ok-fg); background: var(--ok-bg); }
.b.warn { color: var(--warn-fg); background: var(--warn-bg); }
.b.bad { color: var(--bad-fg); background: var(--bad-bg); }
.b.info { color: var(--info-fg); background: var(--info-bg); }
.b.mute { color: var(--mute-fg); background: var(--mute-bg); }

/* ── Nút & ô nhập ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--color-accent); color: var(--color-on-accent); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 8px 14px; min-height: 40px; cursor: pointer; font-weight: 600;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.btn:hover { background: var(--color-accent-hover); }
.btn.sec { background: var(--color-card); color: var(--color-foreground); border-color: var(--color-border-strong); font-weight: 500; }
.btn.sec:hover { background: var(--row-hover); }
.btn.danger { background: var(--color-destructive); color: var(--color-on-destructive); }
.btn.danger:hover { filter: brightness(.92); }
.btn.sm { padding: 3px 10px; min-height: 30px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { border: 1px solid var(--color-border-strong); background: var(--color-card); border-radius: 99px; padding: 6px 14px; min-height: 36px; cursor: pointer; font-size: 14px; transition: background var(--dur) ease; }
.chip:hover { background: var(--row-hover); }
.chip[aria-pressed="true"] { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }

input[type=number], input[type=text], input[type=date], input[type=file], select, textarea {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 6px 8px; min-height: 36px;
  background: var(--color-card); transition: border-color var(--dur) ease;
}
input:hover, select:hover { border-color: var(--color-muted-foreground); }
input[type=number] { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
input[type=file] { padding: 4px; max-width: 260px; }
input[aria-invalid="true"] { border-color: var(--bad-fg); box-shadow: 0 0 0 1px var(--bad-fg); }
input.wide { width: min(100%, 300px); }
.cell-in { width: 76px !important; }
.changed { border-color: var(--warn-fg) !important; box-shadow: 0 0 0 1px var(--warn-fg); }
.field { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.field > span { font-weight: 600; }
.field input { width: 100%; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { width: 18px; height: 18px; }

.err-row > td { background: var(--bad-bg); }
.err-msg { color: var(--bad-fg); font-size: 13px; white-space: normal; margin-top: 2px; }
.err-summary { border: 2px solid var(--bad-fg); background: var(--bad-bg); color: var(--bad-fg); border-radius: var(--radius); padding: 12px var(--space-md); margin-bottom: 12px; }
.err-summary ul { margin: 4px 0 0; padding-left: 20px; }
.err-summary a { color: inherit; font-weight: 600; }

/* ── Thông báo ── */
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px var(--space-md); border-radius: var(--radius); margin-bottom: var(--space-md); white-space: pre-line; border: 1px solid transparent; }
.flash .icon { margin-top: 2px; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash.err { background: var(--bad-bg); color: var(--bad-fg); }
.flash.warn { background: var(--warn-bg); color: var(--warn-fg); }
.flash .grow { flex: 1; }

.msg { border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); background: var(--color-card); border-radius: var(--radius-sm); padding: 10px 14px; margin: 8px 0; white-space: pre-line; font-size: 14px; }
.msg .to { font-size: 13px; font-weight: 700; color: var(--ok-fg); margin-bottom: 2px; }
.hist { margin: 0; padding-left: 18px; color: var(--color-muted-foreground); font-size: 14px; }
.hist li + li { margin-top: 2px; }
.fillcell { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.fillcell .meta { font-size: 11.5px; color: var(--color-muted-foreground); }
.empty { color: var(--color-muted-foreground); padding: var(--space-md) 0; }

/* ── Hộp thoại ── */
dialog.dlg { border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-lg); width: min(92vw, 460px); background: var(--color-card); color: var(--color-foreground); box-shadow: 0 20px 25px rgba(0,0,0,.18); }
dialog.dlg::backdrop { background: rgba(15, 23, 42, .5); }
dialog.dlg h2 { font-size: 18px; }
dialog.dlg p { margin: 0 0 12px; color: var(--color-muted-foreground); white-space: pre-line; }

/* ── Điện thoại & máy tính bảng ── */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-flex !important; }
  nav.side { display: none; min-width: 0; border-right: 0; border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow, 0 8px 24px rgba(15,23,42,.12)); }
  .shell.nav-open nav.side { display: block; }
  .shell.nav-open main { display: none; }
  main { padding: var(--space-md) var(--space-md) 48px; }
  .top { position: static; padding: 10px var(--space-md); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand .tag { display: none; }
  .tools { display: block; flex: 1 1 100%; }
  .top .tools > summary { display: flex; cursor: pointer; justify-content: center; }
  .tools[open] > summary { margin-bottom: var(--space-sm); }
  .tools-body { gap: var(--space-sm); }
  .top .ctl { flex: 1 1 100%; justify-content: space-between; }
  .top .ctl select, .top .ctl input { flex: 1; min-height: 44px; }
  .top .btn-top { min-height: 44px; flex: 1; justify-content: center; }
  .btn { min-height: 44px; }
  input[type=number], input[type=text], input[type=date], select { min-height: 44px; font-size: 16px; }
  h1 { font-size: 21px; }
  .panel { padding: 14px; }
  .bars li { grid-template-columns: 70px 1fr 64px; }

  /* Bảng dạng thẻ cho link tiệm (mỗi món 1 thẻ) */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-bottom: 1px solid var(--color-border); padding: 10px 12px; }
  table.stack tr.group { padding: 12px 12px 4px; border-bottom: 0; }
  table.stack td { border: 0; padding: 4px 0; white-space: normal; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  table.stack td:first-child { display: block; text-align: left; font-weight: 600; }
  table.stack td[data-label]::before { content: attr(data-label); color: var(--color-muted-foreground); font-size: 14px; text-align: left; }
  table.stack td:empty { display: none; }
  table.stack input[type=number] { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Đăng nhập (khi có máy chủ) */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-md); background: var(--color-background); }
.auth-card { width: min(420px, 100%); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 24px; box-shadow: 0 8px 30px rgba(15,23,42,.08); }
.auth-card .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px; }
.auth-card .brand .logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-accent); }
.auth-card h1 { font-size: 22px; }
.auth-card .field { display: grid; gap: 6px; margin: 14px 0 0; }
.auth-card .field input { width: 100%; min-height: 46px; font-size: 16px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 18px; min-height: 48px; }
.auth-card .err-msg { margin-top: 12px; }
.top .who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.top a.btn-top { text-decoration: none; }