@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/caveat-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/eb-garamond-normal-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/outfit-latin.woff2') format('woff2');
}

:root {
  --bg: #f3ead7;
  --paper: #fbf3e2;
  --paper-2: #fff9eb;
  --ink: #2a1d18;
  --ink-70: rgba(42, 29, 24, .70);
  --ink-50: rgba(42, 29, 24, .50);
  --ink-40: rgba(42, 29, 24, .38);
  --ink-20: rgba(42, 29, 24, .18);
  --hair: rgba(42, 29, 24, .14);
  --rust: #c66942;
  --rust-lt: rgba(198, 105, 66, .12);
  --rust-ink: #fff7ec;
  --sage: #7a8a6b;
  --sage-lt: rgba(122, 138, 107, .13);
  --plum: #6a4a55;
  --plum-lt: rgba(106, 74, 85, .12);
  --mustard: #c4953b;
  --mst-lt: rgba(196, 149, 59, .13);
  --sh-sm: 0 6px 18px -10px rgba(42, 29, 24, .28);
  --sh-md: 0 14px 34px -16px rgba(42, 29, 24, .38);
  --sh-rust: 0 10px 22px -10px rgba(198, 105, 66, .48);
  --serif: 'EB Garamond', Garamond, serif;
  --hand: 'Caveat', cursive;
  --sans: 'Outfit', system-ui, sans-serif;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.scatter { position: fixed; inset: 0; pointer-events: none; z-index: 0; width: 100%; height: 100%; }
.s-sage { fill: var(--sage); opacity: .18; }
.s-mst { fill: var(--mustard); opacity: .18; }
.s-plum { fill: var(--plum); opacity: .14; }
.s-rust { fill: var(--rust); opacity: .18; }
.s-ar { stroke: var(--rust); fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .32; }
.s-as { stroke: var(--sage); fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .32; }

.page { position: relative; z-index: 1; min-height: 100vh; }
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card {
  width: 100%;
  max-width: 410px;
  background: var(--paper);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 42px 38px;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.login-logo { height: 46px; width: auto; margin-bottom: 12px; }
.login-eyebrow, .panel-kicker {
  font-family: var(--hand);
  color: var(--rust);
  margin: 0;
  line-height: 1;
}
.login-eyebrow { font-size: 29px; transform: rotate(-1.5deg); display: inline-block; }
.login-title {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  letter-spacing: 0;
}
.login-title em { color: var(--rust); }
.login-sub { font-family: var(--serif); font-size: 17px; color: var(--ink-70); margin: 10px 0 0; }
.login-form, .stack-form { display: flex; flex-direction: column; gap: 14px; }

.app-screen { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(251, 243, 226, .92);
  border-right: 1px solid var(--hair);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  backdrop-filter: blur(12px);
}
.sidebar-logo { width: 112px; height: auto; margin-bottom: 18px; }
.sidebar-school { font-family: var(--serif); font-size: 30px; line-height: 1; }
.sidebar-sub { color: var(--ink-50); font-size: 13px; margin-top: 5px; font-weight: 600; }
.sidebar-nav, .sidebar-ft { display: flex; flex-direction: column; gap: 7px; }
.sidebar-nav { flex: 1; }
.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  min-height: 43px;
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background .14s, border-color .14s, color .14s;
}
.nav-btn:hover { background: var(--paper-2); border-color: var(--hair); }
.nav-btn.active { background: var(--rust-lt); border-color: rgba(198, 105, 66, .24); color: var(--rust); }
.ni { width: 18px; text-align: center; color: currentColor; }
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--rust);
  color: var(--rust-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.app-main { min-width: 0; display: flex; flex-direction: column; }
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 82px;
  background: rgba(243, 234, 215, .86);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 32px;
  backdrop-filter: blur(12px);
}
.panel-kicker { font-size: 23px; }
.panel-title { font-family: var(--serif); font-size: 34px; font-weight: 500; margin: 4px 0 0; letter-spacing: 0; }
.top-bar-actions, .form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-content { padding: 28px 32px 44px; }
.panel { display: none; }
.panel.active { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .1s, box-shadow .14s, background .14s, border-color .14s, color .14s;
  white-space: nowrap;
  min-height: 48px;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--rust); color: var(--rust-ink); box-shadow: var(--sh-rust); }
.btn-primary:hover:not(:disabled) { background: #b35a36; }
.btn-sage { background: var(--sage); color: var(--rust-ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); }
.btn-ghost:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); }
.btn-danger { background: transparent; color: #b6361a; border: 1.5px solid rgba(182, 54, 26, .3); }
.btn-sm { padding: 7px 14px; font-size: 13px; min-height: 34px; }
.btn-full { width: 100%; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-label .opt { font-weight: 400; font-size: 12px; color: var(--ink-40); margin-left: auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); flex-shrink: 0; }
.dot.sage { background: var(--sage); }
.dot.plum { background: var(--plum); }
.dot.mst { background: var(--mustard); }
.field input, .field select, .field textarea {
  background: var(--paper-2);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  width: 100%;
  appearance: none;
  outline: none;
  transition: border-color .13s, box-shadow .13s;
  min-height: 50px;
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.5; font-size: 16px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(122, 138, 107, .2);
}
.sel-wrap, .filter-sel-wrap { position: relative; display: block; }
.sel-wrap::after, .filter-sel-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-50);
  border-bottom: 2px solid var(--ink-50);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.sel-wrap select { padding-right: 36px; }
.filter-sel {
  background: var(--paper);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 8px 32px 8px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  appearance: none;
  outline: none;
  cursor: pointer;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-msg { font-size: 13px; padding: 10px 14px; border-radius: var(--r-sm); display: none; margin-bottom: 14px; }
.form-msg.err { display: block; color: #b6361a; background: rgba(182, 54, 26, .08); border: 1px solid rgba(182, 54, 26, .2); }
.form-msg.ok { display: block; color: #2e5f3b; background: var(--sage-lt); border: 1px solid rgba(122, 138, 107, .3); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge-draft, .badge-batched { background: var(--ink-20); color: var(--ink-70); border: 1px solid var(--hair); }
.badge-pend, .badge-ready { background: var(--mst-lt); color: #7a5c18; border: 1px solid rgba(196, 149, 59, .28); }
.badge-appr, .badge-approved, .badge-exported, .badge-matched { background: var(--sage-lt); color: #4a5e3d; border: 1px solid rgba(122, 138, 107, .28); }
.badge-info, .badge-parsed { background: var(--plum-lt); color: var(--plum); border: 1px solid rgba(106, 74, 85, .24); }
.badge-rej, .badge-exception { background: var(--rust-lt); color: var(--rust); border: 1px solid rgba(198, 105, 66, .24); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric {
  background: var(--paper);
  border: 1.5px solid var(--hair);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--sh-sm);
  text-align: left;
  cursor: pointer;
}
.metric:hover { border-color: rgba(198, 105, 66, .38); }
.metric-label { color: var(--ink-50); font-size: 13px; font-weight: 700; }
.metric strong { display: block; font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1; margin-top: 8px; }
.dash-grid, .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.invoices-grid { grid-template-columns: minmax(330px, 42%) minmax(0, 1fr); }
.surface {
  background: rgba(251, 243, 226, .9);
  border: 1.5px solid var(--hair);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--sh-sm);
}
.section-hd { display: flex; justify-content: space-between; gap: 14px; align-items: start; margin-bottom: 16px; }
.section-hd h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 2px 0 0; letter-spacing: 0; }
.list-stack { display: flex; flex-direction: column; gap: 10px; }
.list-item {
  background: var(--paper-2);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 13px;
  display: grid;
  gap: 10px;
}
.list-item.clickable { cursor: pointer; }
.list-item.clickable:hover { border-color: rgba(198, 105, 66, .34); }
.item-top { display: flex; gap: 10px; align-items: start; justify-content: space-between; }
.item-title { font-weight: 800; color: var(--ink); }
.item-sub { color: var(--ink-50); font-size: 13px; }
.item-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { color: var(--ink-50); padding: 18px; text-align: center; border: 1.5px dashed var(--hair); border-radius: var(--r-sm); }
.review-empty { color: var(--ink-50); padding: 18px; text-align: center; }
.review-block { display: grid; gap: 14px; }
.review-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact { background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 10px; }
.fact span { display: block; font-size: 11px; color: var(--ink-50); font-weight: 800; text-transform: uppercase; }
.fact strong { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.match-list { display: grid; gap: 9px; }
.match-option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border: 1.5px solid var(--hair);
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.check-row input { width: 18px; height: 18px; }
.data-table-wrap { overflow: auto; border-radius: var(--r-sm); border: 1px solid var(--hair); }
.data-table { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--paper-2); }
.data-table th, .data-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hair); }
.data-table th { font-size: 12px; color: var(--ink-50); text-transform: uppercase; }
.info-stack { display: grid; gap: 9px; }
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--plum);
  background: var(--plum-lt);
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 12px;
}

@media (max-width: 980px) {
  .app-screen { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .sidebar-nav, .sidebar-ft { flex-direction: row; flex-wrap: wrap; }
  .nav-btn { flex: 1 1 180px; }
  .metric-grid, .dash-grid, .work-grid, .invoices-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .login-card { padding: 32px 24px; }
  .app-content, .top-bar { padding-left: 18px; padding-right: 18px; }
  .form-row, .form-row.three, .review-facts { grid-template-columns: 1fr; }
  .top-bar { align-items: flex-start; flex-direction: column; }
  .metric strong { font-size: 34px; }
}