/* Same tokens as ui/app.css. No shared import: style-src is 'self' and these pages link this file only. */
:root {
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --sidebar: #F2F2F4;
  --border: #E6E6EA;
  --border-strong: #D4D4DA;
  --text: #18181B;
  --text-2: #52525B;
  --text-3: #8A8A93;
  --accent: #3E5BD8;
  --accent-hover: #2F49B8;
  --accent-soft: #EEF1FD;
  --focus: #3E5BD8;
  --on-accent: #FFFFFF;
  --neg: #B42318;
  --neg-soft: #FDF0EE;
  --pos: #1F7A4D;
  --warn: #8A5A00;
  --warn-soft: #FFF6E0;
  --chamlis: #5B3FA8;
  --chamlis-soft: #F3EEFC;
  --hover: rgba(24, 24, 27, .05);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --lh: 1.45;
  --lh-tight: 1.25;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s-hair: 2px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --ring: 2px;
  --ring-soft: 3px;
  --rule: 2px;
  --row-h: 36px;
  --ctl-h: 32px;
  --ctl-h-touch: 44px;
  --nav-h: 30px;
  --badge-h: 18px;
  --badge-px: 6px;
  --chip-h: 22px;
  --seg-h: 26px;
  --seg-h-touch: 36px;
  --topbar-h: 52px;
  --sidebar-w: 232px;
  --drawer-w: 480px;
  --content-max: 1200px;
  --search-w: 240px;
  --split-amt: 110px;
  --col-date: 104px;
  --col-amt: 128px;
  --col-cat: 200px;
  --col-payee: 28%;
  --col-payee-min: 200px;
  --select-max: 240px;
  --copy-h: 24px;
  --textarea-min: 96px;
  --login-max: 28rem;
  --shadow-pop: 0 8px 24px rgba(24, 24, 27, .10), 0 1px 2px rgba(24, 24, 27, .06);
  --shadow-line: 0 0 0 1px var(--border);
  --shadow-seg: 0 0 0 1px var(--border), 0 1px 1px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/var(--lh) var(--font);
}
.card {
  width: 100%;
  max-width: var(--login-max);
  margin: 0;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.mark { margin: 0 0 var(--s3); font-weight: 600; font-size: var(--fs-md); }
h1 { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-tight); margin: 0 0 var(--s4); }
#status { min-height: 1em; margin: 0 0 var(--s3); color: var(--text-2); font-size: var(--fs-sm); }
#status:empty { margin: 0; }
label.field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 500;
}
input {
  width: 100%;
  height: var(--ctl-h);
  padding: 0 var(--s2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 var(--ring-soft) var(--accent-soft); }
button.primary {
  width: 100%;
  height: var(--ctl-h);
  margin-top: var(--s4);
  padding: 0 var(--s3);
  border-radius: var(--r);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}
button.primary:hover { background: var(--accent-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: var(--accent); }
.back { margin: var(--s3) 0 0; font-size: var(--fs-sm); }
:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring); }
@media (max-width: 860px) {
  input, button.primary { height: var(--ctl-h-touch); font-size: var(--fs-lg); }
}