/* Finance Ops — structure + three reference-locked themes.
   Structure: hierarchy first (attention block → hero numbers → tables with status rows).
   Themes (body[data-theme]): signal = Runway lock (warm light, amber CTA);
   pult = Fey lock (near-black, orange highlight, blue interaction);
   bloki = Brex lock (paper white, soft-gray bands, orange CTA, midnight attention panel).
   Functional colors (income / due-soon / overdue) are a domain layer, defined per theme. */

:root {
  --font: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --side: 216px;
  --r-card: 12px; --r-btn: 8px; --r-input: 4px; --r-tag: 6px;
  --shadow-card: none; --shadow-hero: none;
  --h1-font: var(--font); --h1-weight: 600; --h1-size: 28px; --h1-track: -0.02em;
  --nav-active-bg: transparent;
}

/* ---------- THEME: signal (Runway) ---------- */
body[data-theme="signal"] {
  --canvas: #f8f7f5; --surface: #ffffff; --surface-2: #f3f1ed; --band: #efede8;
  --ink: #261b07; --ink-2: #61594a; --ink-3: #9b9387; --rule: #e3dfd5; --rule-soft: #ede9e2;
  --cta: #f9a600; --cta-ink: #261b07; --cta-hover: #e89b01;
  --link: #261b07; --nav-active: #261b07;
  --pos: #1a7f37; --warn: #b45309; --warn-bg: #f8da9d; --neg: #b42318; --neg-bg: #fde2dc;
  --soon-row: #fff7e3; --overdue-row: #fdeceb; --hi: #261b07;
  --shadow-card: rgba(38,27,7,0.06) 0 4px 8px 0;
  --shadow-hero: inset rgba(255,255,255,0.56) 0 2px 4px 0, rgba(38,27,7,0.06) 0 4px 8px 0, rgba(38,27,7,0.18) 0 1px 2px 0;
  --input-bg: #ffffff;
}
/* ---------- THEME: pult (Fey) ---------- */
body[data-theme="pult"] {
  --canvas: #0b0b0b; --surface: #131313; --surface-2: #191919; --band: #161616;
  --ink: #ffffff; --ink-2: #868f97; --ink-3: #5c636a; --rule: rgba(255,255,255,0.10); --rule-soft: rgba(255,255,255,0.06);
  --cta: #e6e6e6; --cta-ink: #000000; --cta-hover: #ffffff;
  --link: #479ffa; --nav-active: #479ffa;
  --pos: #4ebe96; --warn: #ffa16c; --warn-bg: rgba(255,161,108,0.14); --neg: #ff6b6b; --neg-bg: rgba(255,107,107,0.14);
  --soon-row: rgba(255,161,108,0.07); --overdue-row: rgba(255,107,107,0.08); --hi: #ffa16c;
  --r-card: 16px; --r-btn: 99px; --r-input: 6px; --r-tag: 6px;
  --shadow-hero: rgba(0,0,0,0.8) 0 0 44px 0;
  --input-bg: #0b0b0b;
}
/* ---------- THEME: bloki (Brex) ---------- */
body[data-theme="bloki"] {
  --canvas: #ffffff; --surface: #ffffff; --surface-2: #f3f3f7; --band: #f3f3f7;
  --ink: #000000; --ink-2: #60646c; --ink-3: #8b8d98; --rule: #b9bbc6; --rule-soft: #e4e5ea;
  --cta: #ff5900; --cta-ink: #ffffff; --cta-hover: #e65000;
  --link: #000000; --nav-active: #ff5900;
  --pos: #1a7f37; --warn: #c2410c; --warn-bg: #ffe8dc; --neg: #b42318; --neg-bg: #fde2dc;
  --soon-row: #fff3ec; --overdue-row: #fdeceb; --hi: #000710;
  --dark: #000710; --dark-ink: #ffffff; --dark-ink-2: #b9bbc6; --dark-rule: rgba(255,255,255,0.14);
  --r-card: 12px; --r-btn: 8px; --r-input: 0px; --r-tag: 10px;
  --h1-font: var(--serif); --h1-weight: 500; --h1-size: 34px; --h1-track: 0;
  --input-bg: transparent;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, .strong { font-weight: 600; }
.emph { font-weight: 600; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; background: linear-gradient(to right, var(--band) 0, var(--band) var(--side), var(--canvas) var(--side)); }
body[data-theme="pult"] .shell { background: var(--canvas); }
.side {
  background: var(--band); border-right: 1px solid var(--rule-soft); padding: 28px 18px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 28px;
}
body[data-theme="pult"] .side { background: var(--canvas); border-right-color: var(--rule); }
.brand { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; }
.brand .name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; }
body[data-theme="bloki"] .brand .name { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.brand .sub { color: var(--ink-2); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  padding: 8px 10px; color: var(--ink-2); border-radius: var(--r-btn); font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.nav a::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: transparent; }
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
.nav a.active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-card); }
.nav a.active::before { background: var(--nav-active); }
body[data-theme="pult"] .nav a.active { background: var(--surface-2); color: #fff; }
.side .foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); padding-left: 10px; }
.side .foot a { color: var(--ink-2); } .side .foot a:hover { color: var(--ink); }
.main { padding: 28px 40px 72px; max-width: 1240px; width: 100%; min-width: 0; }
.topbar { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; background: var(--canvas); }
  .side { display: none; }
  .topbar { display: block; position: sticky; top: 0; background: var(--canvas); z-index: 5; border-bottom: 1px solid var(--rule-soft); }
  .topbar .row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; }
  .topbar .name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
  .topbar nav { display: flex; gap: 2px; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 8px 10px; white-space: nowrap; color: var(--ink-2); border-bottom: 2px solid transparent; font-weight: 500; }
  .topbar nav a.active { color: var(--ink); border-bottom-color: var(--nav-active); }
  .main { padding: 18px 16px 64px; }
}

/* ---------- page head & type helpers ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-family: var(--h1-font); font-weight: var(--h1-weight); font-size: var(--h1-size); letter-spacing: var(--h1-track); line-height: 1.1; text-wrap: balance; }
.page-head .lede { color: var(--ink-2); margin-top: 6px; max-width: 60ch; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.num.big { font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12px; }
.pos { color: var(--pos); } .warn { color: var(--warn); } .neg { color: var(--neg); }
.right { text-align: right; } .nowrap { white-space: nowrap; }
.serif { font-family: var(--serif); }

/* ---------- ATTENTION block (hero) ---------- */
.attention {
  background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-hero);
  margin-bottom: 24px; overflow: hidden;
}
body[data-theme="bloki"] .attention { background: var(--dark); color: var(--dark-ink); border-color: var(--dark); }
body[data-theme="bloki"] .attention .meta { color: var(--dark-ink-2); }
body[data-theme="bloki"] .attention .muted, body[data-theme="bloki"] .attention .sub { color: var(--dark-ink-2); }
body[data-theme="bloki"] .attention a { color: var(--dark-ink); }
.attention-head { display: flex; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; flex-wrap: wrap; }
.hero-num { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--hi); }
body[data-theme="bloki"] .hero-num { color: var(--dark-ink); }
.attention .sub { color: var(--ink-2); margin-top: 8px; }
.hero-side { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.hero-kv { display: flex; flex-direction: column; gap: 4px; }
.hero-kv .val { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.attention-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
body[data-theme="bloki"] .attention-list { border-top-color: var(--dark-rule); }
.att {
  display: grid; grid-template-columns: 120px 1fr auto auto; gap: 16px; align-items: center;
  padding: 10px 24px; border-bottom: 1px solid var(--rule-soft); border-left: 4px solid transparent;
}
body[data-theme="bloki"] .att { border-bottom-color: var(--dark-rule); }
.att:last-child { border-bottom: 0; }
.att.soon { border-left-color: var(--warn); background: var(--soon-row); }
.att.overdue { border-left-color: var(--neg); background: var(--overdue-row); }
body[data-theme="bloki"] .att.soon { background: rgba(255,89,0,0.12); border-left-color: #ff5900; }
body[data-theme="bloki"] .att.overdue { background: rgba(255,80,80,0.16); border-left-color: #ff6b6b; }
.att-when { display: flex; flex-direction: column; line-height: 1.2; }
.att-day { font-weight: 600; font-variant-numeric: tabular-nums; }
.att-days { font-size: 12px; color: var(--ink-2); }
.att.soon .att-days { color: var(--warn); font-weight: 600; } .att.overdue .att-days { color: var(--neg); font-weight: 600; }
body[data-theme="bloki"] .att.soon .att-days { color: #ffb088; } body[data-theme="bloki"] .att.overdue .att-days { color: #ff8a8a; }
.att-what { display: flex; flex-direction: column; min-width: 0; }
.att-what a, .att-what .strong { font-weight: 600; }
.att-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.att.empty-att { display: block; color: var(--ink-2); padding: 16px 24px; }
@media (max-width: 900px) {
  .attention-head { padding: 18px 16px 14px; }
  .hero-num { font-size: 36px; }
  .hero-side { gap: 18px; }
  .att { grid-template-columns: 76px 1fr auto; padding: 10px 14px; gap: 10px; }
  .att form { grid-column: 2 / -1; justify-self: start; }
  .att-amount { font-size: 16px; }
}

/* ---------- metrics (secondary) ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.metric { padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.metric .val { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric .val.sm { font-size: 18px; }
.metric .note { font-size: 12px; color: var(--ink-2); }
@media (max-width: 900px) { .metrics { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* ---------- panels ---------- */
.panel { border: 1px solid var(--rule-soft); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.main > * + .section, .main > * + .split, .panel + .panel { margin-top: 24px; }
.split > .panel { margin-top: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.panel-head h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; gap: 8px; align-items: baseline; }
.panel-head h2 .count { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.panel-head .sum { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.panel-body { padding: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split > .panel + .panel { margin-top: 16px; }
  .table-wrap td:first-child, .table-wrap td:nth-child(2) { white-space: nowrap; }
  .cell-stack { min-width: 150px; }
  .cell-stack .small { white-space: normal; max-width: 260px; }
}

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule-soft); }
th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; background: var(--band); white-space: nowrap; }
body[data-theme="pult"] th { background: var(--surface-2); }
th.emph { color: var(--ink); }
tbody tr:hover { background: var(--surface-2); }
td.emph { font-weight: 600; font-size: 15px; }
tbody tr.group td { padding: 14px 12px 6px; border-bottom: 1px solid var(--rule); background: var(--surface); font-weight: 600; }
tbody tr.group:hover { background: var(--surface); }
.group-net { font-weight: 700; font-size: 15px; }
tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 10px; font-weight: 600; }
body[data-theme="pult"] tfoot td { border-top-color: var(--rule); }
td:first-child, th:first-child { padding-left: 18px; }
td:last-child, th:last-child { padding-right: 18px; }
.row-link { cursor: pointer; }
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-stack .small { color: var(--ink-2); }
td.method { min-width: 150px; max-width: 200px; white-space: normal; line-height: 1.3; }
td.desc { max-width: 340px; }
td.desc .cell-stack .small { overflow-wrap: anywhere; }
/* status rows */
tr.row-soon td { background: var(--soon-row); }
tr.row-soon td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
tr.row-overdue td { background: var(--overdue-row); }
tr.row-overdue td:first-child { box-shadow: inset 4px 0 0 var(--neg); }
tr.row-zero td, tr.row-paused td, tr.row-paid td { color: var(--ink-3); }
tr.row-zero td .strong, tr.row-paused td input, tr.row-paid td input { color: var(--ink-3); font-weight: 400; }
tr.row-paid td:first-child { box-shadow: inset 4px 0 0 var(--pos); }

/* ---------- tags / pills ---------- */
.tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-tag); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag.soon { background: var(--warn-bg); color: var(--warn); }
.tag.overdue { background: var(--neg-bg); color: var(--neg); }
.tag.ok { background: var(--surface-2); color: var(--ink-2); font-weight: 500; }
.tag.quiet { background: transparent; color: var(--ink-3); font-weight: 400; padding-left: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--rule); font-size: 12px; color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.pill.fill { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.pill.warn { color: var(--warn); border-color: currentColor; } .pill.neg { color: var(--neg); border-color: currentColor; } .pill.pos { color: var(--pos); border-color: currentColor; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--ink-3); display: inline-block; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-btn); cursor: pointer; color: var(--ink); white-space: nowrap; line-height: 1.4; font-weight: 500; }
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); padding: 7px 16px; }
.btn.primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover { color: var(--ink); border-color: var(--rule); }
.btn.sm { padding: 3px 10px; font-size: 12px; }
.btn.danger:hover { color: var(--neg); border-color: var(--neg); }
.btn:disabled { opacity: .5; cursor: default; }
body[data-theme="bloki"] .attention .btn { background: transparent; color: #fff; border-color: var(--dark-rule); }
body[data-theme="bloki"] .attention .btn:hover { border-color: #fff; }

input[type=text], input[type=number], input[type=date], input[type=url], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--rule); background: var(--input-bg); border-radius: var(--r-input); outline: none; min-width: 0; color: var(--ink);
}
body[data-theme="bloki"] input[type=text], body[data-theme="bloki"] input[type=number], body[data-theme="bloki"] input[type=date],
body[data-theme="bloki"] input[type=url], body[data-theme="bloki"] input[type=search], body[data-theme="bloki"] input[type=password] { border-width: 0 0 1px; padding-left: 2px; padding-right: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--link); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-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% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
body[data-theme="pult"] select option { background: #131313; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--cta); margin: 0; vertical-align: -2px; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; }
body[data-theme="pult"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
td input[type=number], td input[type=date], td input[type=text], td select { padding: 4px 8px; border-color: transparent; background: transparent; }
td input:hover, td select:hover { border-color: var(--rule); }
td input:focus, td select:focus { border-color: var(--link); background: var(--input-bg); }
td input[type=number] { text-align: right; width: 100px; }
td input[type=date] { width: 138px; }
td input[type=text].w-sm { width: 110px; } td input[type=text].w-md { width: 180px; }
td input.strong { font-weight: 600; }
td input.note-input { width: 220px; font-size: 12px; color: var(--ink-2); padding: 2px 6px; margin-left: -6px; }
td input.note-input:not(:focus):placeholder-shown { opacity: .55; }
td select { width: auto; padding-right: 24px; }
td.emph input[type=number] { font-weight: 600; font-size: 15px; }

details.disclosure { margin-top: 16px; }
details.disclosure > summary { cursor: pointer; list-style: none; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "+"; width: 16px; display: inline-block; text-align: center; color: var(--ink-3); }
details.disclosure[open] > summary::before { content: "−"; }
details.disclosure > summary:hover { color: var(--ink); }
details.disclosure .panel { margin-top: 10px; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters select, .filters input { width: auto; padding: 5px 10px; }
.filters select { padding-right: 30px; }
.filters input[type=search] { min-width: 200px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a { padding: 3px 10px; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink-2); font-size: 12px; font-weight: 500; }
.chips a.active { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.chips a:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
body[data-theme="pult"] .chips a.active { background: var(--link); border-color: var(--link); color: #fff; }

/* ---------- flash / misc ---------- */
.flashes { position: fixed; right: 20px; top: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.flash { background: var(--ink); color: var(--canvas); padding: 10px 14px; font-size: 13px; border-radius: var(--r-btn); border-left: 3px solid var(--pos); animation: fade 6s forwards; }
.flash.error { border-left-color: var(--neg); }
@keyframes fade { 0%,80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 900px) { .flashes { left: 12px; right: 12px; top: auto; bottom: 16px; max-width: none; } }
.empty { padding: 36px 18px; text-align: center; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.bar { height: 4px; background: var(--surface-2); position: relative; border-radius: 2px; }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 2px; }
body[data-theme="pult"] .bar > span { background: var(--link); }
.sheet-link { display: inline-flex; align-items: center; gap: 6px; }
hr.rule { border: 0; border-top: 1px solid var(--rule-soft); margin: 20px 0; }
.prose { max-width: 62ch; color: var(--ink-2); } .prose p + p { margin-top: 8px; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login .box { width: 100%; max-width: 320px; border: 1px solid var(--rule-soft); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.login input { font-size: 24px; letter-spacing: 0.4em; text-align: center; padding: 12px; }