:root {
  --black: #111111;
  --panel: #181818;
  --panel-soft: #202020;
  --white: #f7f7f5;
  --muted: #a5a5a0;
  --line: rgba(247, 247, 245, 0.13);
  --bronze: #a78a5a;
  --danger: #d57a73;
  --success: #89aa8f;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { color-scheme: dark; }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--white); font-family: Inter, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  position: sticky; top: 0; z-index: 20; min-height: 66px; display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 3rem); background: rgba(17,17,17,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: .8rem; min-width: 0; text-decoration: none; }
.brand-mark { position: relative; display: inline-block; width: 25px; aspect-ratio: 1; flex: 0 0 auto; color: var(--bronze); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); }
.brand-mark::before { inset:0; background:currentColor; }
.brand-mark::after { inset:2px; background:var(--black); }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:.76rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase; }
.version-badge { color: var(--bronze); border: 1px solid rgba(167,138,90,.42); padding: .43rem .65rem; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:.5rem; }
.module-nav { display:flex; align-items:center; gap:.25rem; }
.module-nav a { padding:.7rem .75rem; color:var(--muted); text-decoration:none; font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid transparent; }
.module-nav a:hover,.module-nav a.active { color:var(--white); border-color:var(--bronze); }

.icon-button { width: 38px; height: 38px; display:grid; place-items:center; border:1px solid var(--line); background:transparent; color:var(--white); text-decoration:none; }
.icon-button:hover { border-color:var(--bronze); color:var(--bronze); }
.icon-button svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }

.app-shell { width:min(1180px, calc(100% - clamp(2rem, 6vw, 6rem))); margin:0 auto; padding:clamp(2.3rem, 6vw, 5rem) 0; }
.expense-workspace .app-shell { width:min(2100px, calc(100% - clamp(1.5rem, 3vw, 3rem))); }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.eyebrow { margin:0 0 .8rem; color:var(--bronze); font-size:.7rem; font-weight:700; letter-spacing:.35em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.2rem,5vw,4.4rem); font-weight:400; line-height:1.02; }
h2 { margin-bottom:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:400; }
.intro { max-width:42rem; color:var(--muted); line-height:1.7; }

.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); margin-bottom:2.5rem; }
.summary { padding:1.2rem; border-right:1px solid var(--line); }
.summary:last-child { border-right:0; }
.summary span { display:block; color:var(--muted); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.summary strong { display:block; margin-top:.75rem; font-size:1.4rem; font-weight:500; }

.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.76rem 1rem; border:1px solid var(--line); background:transparent; color:var(--white); text-decoration:none; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.button:hover { border-color:var(--bronze); color:var(--bronze); }
.button.primary { border-color:var(--bronze); background:var(--bronze); color:var(--black); }
.button.danger { color:var(--danger); }
.button.small { min-height:36px; padding:.55rem .7rem; font-size:.63rem; }
.button:disabled { opacity:.45; cursor:not-allowed; }

.invoice-list { border-top:1px solid var(--line); }
.invoice-row { display:grid; grid-template-columns:1.15fr .8fr .8fr .85fr 1.4fr; align-items:center; gap:1rem; padding:1rem .2rem; border-bottom:1px solid var(--line); }
.invoice-row.header { color:var(--muted); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.invoice-id strong { display:block; font-size:.95rem; }
.invoice-id span { display:block; margin-top:.25rem; color:var(--muted); font-size:.8rem; }
.status { display:inline-flex; width:fit-content; padding:.33rem .55rem; border:1px solid var(--line); color:var(--muted); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; }
.status.sent,.status.paid { color:var(--success); border-color:rgba(137,170,143,.4); }
.status.draft { color:var(--bronze); border-color:rgba(167,138,90,.4); }
.status.scheduled { color:#d8b978; border-color:rgba(216,185,120,.45); }
.status.to_verify { color:var(--danger); border-color:rgba(213,122,115,.45); }
.status.validated,.status.added,.status.invoiced { color:var(--success); border-color:rgba(137,170,143,.4); }
.row-actions { display:flex; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; }
.empty { padding:4rem 1rem; border:1px solid var(--line); text-align:center; color:var(--muted); }

.notice { margin:0 0 1.25rem; padding:.9rem 1rem; border:1px solid var(--line); color:var(--muted); line-height:1.5; }
.notice.success { color:var(--success); border-color:rgba(137,170,143,.45); }
.notice.error { color:var(--danger); border-color:rgba(213,122,115,.45); }
.notice.info { color:var(--white); border-color:rgba(167,138,90,.45); }
.notice.draft-notice { color:var(--white); border-color:var(--bronze); background:rgba(167,138,90,.08); }
.notice.draft-notice strong { color:var(--bronze); }

.editor-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:2rem; }
.panel { border:1px solid var(--line); padding:clamp(1.1rem,3vw,2rem); background:rgba(255,255,255,.015); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.panel-title h2 { font-size:1.55rem; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
label { display:grid; gap:.5rem; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
label.full,.full { grid-column:1/-1; }
input,select,textarea { width:100%; min-height:46px; border:1px solid var(--line); border-radius:0; padding:.75rem .85rem; background:#141414; color:var(--white); outline:none; }
textarea { min-height:105px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--bronze); }
.locked input,.locked textarea { opacity:.7; }
.totals { display:grid; gap:.9rem; }
.total-line { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); color:var(--muted); }
.total-line.grand { color:var(--white); font-size:1.15rem; }
.meta-list { display:grid; gap:.8rem; margin:1.5rem 0; }
.meta-list div { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.84rem; }
.meta-list strong { color:var(--white); font-weight:500; text-align:right; }
.action-stack { display:grid; gap:.7rem; }
.action-stack .button { width:100%; }
.legal-note { margin-top:1.5rem; color:var(--muted); font-size:.78rem; line-height:1.7; }

.auth-body { min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--black); }
.auth-shell { width:min(460px,100%); border:1px solid var(--line); padding:clamp(1.4rem,5vw,3rem); }
.install-shell { width:min(760px,100%); }
.auth-brand { display:flex; align-items:center; gap:.8rem; margin-bottom:3rem; font-size:.75rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; }
.auth-shell h1 { margin-bottom:1rem; font-size:clamp(2rem,8vw,3.4rem); }
.auth-shell form { margin-top:2rem; }
.version { margin:2rem 0 0; color:var(--muted); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }

.settings-note { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; line-height:1.65; }
code { color:var(--bronze); overflow-wrap:anywhere; }
.mobile-only { display:none; }

.filter-bar,.bulk-bar { display:flex; align-items:end; gap:.75rem; flex-wrap:wrap; padding:1rem; border:1px solid var(--line); margin-bottom:1rem; }
.filter-bar label,.bulk-bar label { min-width:150px; flex:1; }
.bulk-bar { position:sticky; top:66px; z-index:10; background:rgba(17,17,17,.97); }
.check-label { display:flex; grid-template-columns:auto 1fr; align-items:center; justify-content:start; gap:.7rem; }
.check-label input { width:18px; min-height:18px; accent-color:var(--bronze); }
.expense-table-wrap { overflow:auto; border:1px solid var(--line); }
.expense-table { width:100%; min-width:1850px; border-collapse:collapse; font-size:.76rem; }
.expense-table th { position:sticky; top:0; z-index:2; background:var(--panel); color:var(--muted); font-size:.62rem; letter-spacing:.12em; text-align:left; text-transform:uppercase; }
.expense-table th,.expense-table td { padding:.8rem .65rem; border-bottom:1px solid var(--line); vertical-align:top; }
.expense-table td { overflow-wrap:anywhere; }
.expense-table tbody tr:hover { background:rgba(255,255,255,.025); }
.expense-table .number { white-space:nowrap; text-align:right; }
.expense-table input[type=checkbox] { width:17px; min-height:17px; accent-color:var(--bronze); }
.duplicate-row { box-shadow:inset 3px 0 var(--danger); }
.doc-link { display:block; max-width:160px; color:var(--bronze); overflow-wrap:anywhere; margin-bottom:.35rem; }
.review-item { display:grid; grid-template-columns:minmax(320px,1fr) minmax(420px,1fr); gap:1.5rem; margin-bottom:2rem; min-height:620px; }
.document-pane { position:sticky; top:82px; height:calc(100vh - 110px); min-height:560px; border:1px solid var(--line); background:#0a0a0a; }
.document-pane iframe,.document-pane img { width:100%; height:100%; border:0; object-fit:contain; }
.document-links { position:absolute; inset:auto 1rem 1rem 1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.extraction-pane { min-width:0; }
.candidate-list { display:grid; gap:1rem; margin-top:1rem; }
.candidate-card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:0; padding:1rem; border:1px solid var(--line); }
.candidate-card legend { padding:0 .45rem; color:var(--bronze); font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.candidate-card .full { grid-column:1/-1; }
.candidate-card label.uncertain { color:var(--danger); }
.candidate-card label.uncertain input { border-color:rgba(213,122,115,.65); }
.save-candidates { width:100%; margin-top:1rem; }
.batch-review-bar { position:sticky; top:66px; z-index:12; display:grid; grid-template-columns:minmax(220px,1fr) auto auto; align-items:center; gap:1rem; margin-bottom:1.5rem; padding:1rem; border:1px solid rgba(167,138,90,.55); background:rgba(17,17,17,.97); }
.batch-review-bar div { display:grid; gap:.25rem; }
.batch-review-bar strong { font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:400; }
.batch-review-bar span { color:var(--muted); font-size:.78rem; }
.delete-expense-form { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.ocr-progress { color:var(--muted); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.upload-zone { display:grid; gap:1rem; padding:2rem; border:1px dashed rgba(167,138,90,.55); text-align:center; }
.upload-zone p { color:var(--muted); }
.split-fields { display:grid; grid-template-columns:1fr .55fr; gap:.5rem; }
.linked-expenses { margin-top:2rem; }
.compact-table { border-top:1px solid var(--line); }
.compact-row { display:grid; grid-template-columns:.8fr 1.4fr 1fr 1fr auto auto; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); }

@media (max-width:900px) {
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary:nth-child(2) { border-right:0; }
  .summary:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .invoice-row { grid-template-columns:1fr .8fr .8fr 1.3fr; }
  .invoice-row > :nth-child(3) { display:none; }
  .editor-grid { grid-template-columns:1fr; }
  .review-item { grid-template-columns:1fr; }
  .document-pane { position:relative; top:auto; height:65vh; min-height:420px; }
  .compact-row { grid-template-columns:1fr 1.4fr 1fr auto; }
  .compact-row > :nth-child(4) { display:none; }
}

@media (max-width:620px) {
  .topbar { grid-template-columns:minmax(0,1fr) auto; gap:.7rem; padding:.7rem 1rem; }
  .brand-name { max-width:9rem; font-size:.67rem; letter-spacing:.25em; }
  .module-nav { grid-row:2; grid-column:1; }
  .module-nav a { padding:.5rem .55rem; }
  .version-badge { grid-row:2; grid-column:2; justify-self:end; padding:.3rem .5rem; }
  .app-shell { width:calc(100% - 2rem); padding:2.2rem 0 4rem; }
  .page-heading { display:grid; align-items:start; }
  .page-heading .button { width:100%; }
  .summary-grid { grid-template-columns:1fr 1fr; }
  .summary strong { font-size:1.05rem; }
  .invoice-row,.invoice-row.header { grid-template-columns:1fr auto; gap:.8rem; }
  .invoice-row.header { display:none; }
  .invoice-row > :nth-child(2),.invoice-row > :nth-child(3) { display:none; }
  .invoice-row .row-actions { grid-column:1/-1; justify-content:stretch; }
  .invoice-row .row-actions .button { flex:1; }
  .form-grid { grid-template-columns:1fr; }
  label.full,.full { grid-column:auto; }
  .mobile-only { display:inline-flex; }
  .expense-summary { grid-template-columns:1fr 1fr; }
  .filter-bar>* { width:100%; flex-basis:100%; }
  .bulk-bar { top:112px; display:grid; grid-template-columns:1fr; }
  .candidate-card { grid-template-columns:1fr; }
  .candidate-card .full { grid-column:auto; }
  .review-item { min-height:0; }
  .document-pane { min-height:360px; height:55vh; }
  .compact-row { grid-template-columns:1fr auto; }
  .compact-row > :nth-child(1),.compact-row > :nth-child(4) { display:none; }
  .batch-review-bar { position:relative; top:auto; grid-template-columns:1fr; }
  .batch-review-bar .button { width:100%; }
}