:root{
  --ink:#1b1a17; --muted:#6b6558; --faint:#9a9384;
  --surface:#fdfcfa; --surface-2:#f5f2ec; --surface-3:#ece7dd;
  --border:#e2ddd0; --accent:#8a5a2b; --accent-ink:#fff; --accent-soft:#f2e4d2;
  --amber:#96631a; --amber-soft:#fbf0dd;
  --good:#3f7a4f; --good-soft:#e5f1e6; --bad:#a83c3c; --bad-soft:#fbe8e6;
  --shadow: 0 1px 3px rgba(30,25,15,0.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f1ede4; --muted:#b3ab9b; --faint:#7d7666;
    --surface:#1b1914; --surface-2:#23211a; --surface-3:#2c2921;
    --border:#3a362c; --accent:#d7a468; --accent-ink:#1b1914; --accent-soft:#3a2e1d;
    --amber:#e0a94f; --amber-soft:#2c220f;
    --good:#6fbd7f; --good-soft:#1c2a1e; --bad:#e08080; --bad-soft:#2c1c1c;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --ink:#f1ede4; --muted:#b3ab9b; --faint:#7d7666;
  --surface:#1b1914; --surface-2:#23211a; --surface-3:#2c2921;
  --border:#3a362c; --accent:#d7a468; --accent-ink:#1b1914; --accent-soft:#3a2e1d;
  --amber:#e0a94f; --amber-soft:#2c220f;
  --good:#6fbd7f; --good-soft:#1c2a1e; --bad:#e08080; --bad-soft:#2c1c1c;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{ background:var(--surface); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; }
h1,h2,h3{ font-family:"Fraunces",serif; font-weight:600; margin:0 0 8px; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); }
a{ color:var(--accent); }

.btn{ border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 14px; font-size:13px; font-weight:500; }
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:0.5; cursor:default; }

.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:28px; box-shadow:var(--shadow); }
.auth-card h1{ font-size:22px; margin-bottom:4px; }
.auth-card p.sub{ color:var(--muted); font-size:12.5px; margin:0 0 20px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.field input, .field select{ width:100%; }
.field-hint{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
.auth-toggle{ margin-top:14px; font-size:12.5px; color:var(--muted); text-align:center; }
.error-text{ color:var(--bad); font-size:12.5px; margin:8px 0; }

.topnav{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.tn-logo{ display:flex; align-items:center; gap:8px; font-family:"Fraunces",serif; font-weight:600; font-size:17px; }
.brand-mark{ width:26px; height:26px; border-radius:7px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:"IBM Plex Mono",monospace; }
.tn-right{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }

.app-body{ display:flex; min-height:calc(100vh - 53px); }
.side-nav{ width:190px; border-right:1px solid var(--border); background:var(--surface-2); padding:14px 10px; flex-shrink:0; }
.side-nav-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--muted); margin-bottom:2px; }
.side-nav-item.active{ background:var(--surface-3); color:var(--ink); font-weight:500; }
.content{ padding:24px 28px 64px; flex:1; min-width:0; }
.narrow{ max-width:640px; }

.breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }

.card{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.doc-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.doc-icon{ font-size:18px; }
.doc-name{ font-weight:500; }
.doc-meta{ font-size:11.5px; color:var(--muted); }
.doc-type-tag{ font-size:11px; color:var(--muted); background:var(--surface-3); border-radius:99px; padding:3px 9px; white-space:nowrap; }

table.data-table, table.review-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th, table.review-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); padding:0 10px 8px; border-bottom:1px solid var(--border); }
table.data-table td, table.review-table td{ padding:10px; border-bottom:1px solid var(--border); vertical-align:top; }
table.data-table tbody tr{ cursor:pointer; }
table.data-table tbody tr:hover{ background:var(--surface-2); }

.chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; border-radius:99px; padding:3px 9px; background:var(--surface-3); color:var(--muted); }
.chip.tag-verified{ background:var(--good-soft); color:var(--good); }
.chip.tag-unverified{ background:var(--amber-soft); color:var(--amber); }
.dot{ width:7px; height:7px; border-radius:99px; display:inline-block; }
.dot.good{ background:var(--good); } .dot.amber{ background:var(--amber); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{ border:none; background:none; padding:10px 12px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; }
.tab-btn.active{ color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.tab-count{ margin-left:5px; font-size:10.5px; background:var(--surface-3); border-radius:99px; padding:1px 6px; }

.metric-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:10px; }
.m-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.m-value{ font-size:14.5px; margin-bottom:8px; }
.m-src{ font-size:11.5px; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:6px; }

.summary-block{ padding:16px; margin-bottom:12px; }
.citation-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; border-radius:99px; padding:3px 9px; background:var(--surface-3); color:var(--muted); margin:6px 6px 0 0; cursor:pointer; }

.conflict-card{ padding:16px; margin-bottom:12px; }
.cf-versions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.cf-version{ border:1px solid var(--border); border-radius:8px; padding:10px; }
.cf-doc{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px; }
blockquote{ margin:6px 0 0; padding:8px 10px; border-left:3px solid var(--border); font-size:12.5px; color:var(--muted); }

.integration-note{ padding:14px 16px; margin-bottom:20px; background:var(--amber-soft); border-radius:10px; color:var(--amber); font-size:12.5px; }
.stepper{ display:flex; align-items:center; margin-bottom:16px; }
.step-item{ display:flex; align-items:center; gap:8px; border:none; background:none; color:var(--muted); font-size:12.5px; padding:6px 4px; }
.step-dot{ width:22px; height:22px; border-radius:99px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--muted); }
.step-item.current{ color:var(--ink); font-weight:600; } .step-item.current .step-dot{ background:var(--accent); color:var(--accent-ink); }
.step-item.done .step-dot{ background:var(--good); color:#fff; }
.step-line{ flex:1; height:2px; background:var(--border); min-width:20px; margin:0 4px; }
.step-line.done{ background:var(--good); }
.rule-card{ padding:16px; margin-bottom:12px; }
.rule-head{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.progress-track{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-bottom:4px; }
.progress-fill{ height:100%; background:var(--accent); border-radius:99px; }
.progress-label{ font-size:11.5px; color:var(--muted); margin-bottom:10px; }
.tx-add-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tx-add-row input{ flex:1; min-width:110px; }

.section-title{ font-size:13px; font-weight:600; margin:18px 0 10px; }
.dropzone{ border:1.5px dashed var(--border); border-radius:12px; padding:28px; text-align:center; color:var(--muted); font-size:13px; }
.dropzone.drag{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.upload-row{ display:flex; align-items:center; gap:10px; }
.spinner{ width:22px; height:22px; border-radius:99px; border:3px solid var(--border); border-top-color:var(--accent); animation:spin 0.8s linear infinite; margin:0 auto 12px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.progress-box{ text-align:center; padding:48px 20px; }
.pg-step{ font-weight:500; margin-bottom:6px; }
.pg-note{ color:var(--muted); font-size:12.5px; max-width:420px; margin:0 auto; }
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:64px 20px; color:var(--muted); }
.es-icon{ font-size:28px; }

@media (max-width:760px){
  .app-body{ flex-direction:column; }
  .side-nav{ width:100%; display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); }
  .cf-versions{ grid-template-columns:1fr; }
}