/* Rekora Theme • Light/Dark adaptive tokens (extended) */
:root { --accent-alpha: 0.12; }
:root[data-theme="light"] {
  --primary-100:#2E2A26; --primary-200:#4C4944; --primary-300:#9A948B;
  --accent-100:#CBBBA0;  --accent-200:#7A6E58;  --accent-300:#E1DCCF;
  --bridge-neutral:#B7B3A8; --data-neutral:#9EA19B;
  --text-100:#2F2F2F; --text-200:#5B5854;
  --bg-100:#F6F4F1; --bg-200:#EAE7E3; --bg-300:#D0CBC5; --bg-400:#CEC9C2;
  --surf-100:#F4F6F8; --surf-200:#E8EBEF; --surf-300:#D3D8DE; --surf-400:#C2CAD3;
  --copper:#B59C7E; --dark-surface:#20201F;
  --accent-alpha:0.12;
}
:root[data-theme="dark"] {
  --primary-100:#C8C2B6; --primary-200:#9A948B; --primary-300:#5A564F;
  --accent-100:#CBBBA0;  --accent-200:#9A8B72;  --accent-300:#E1DCCF;
  --bridge-neutral:#ACA79B; --data-neutral:#8E928B;
  --text-100:#EAE7E3; --text-200:#BEB8AF;
  --bg-100:#0B0B0B; --bg-200:#141414; --bg-300:#1E1E1E; --bg-400:rgba(255,255,255,0.08);
  --surf-100:rgba(255,255,255,0.06); --surf-200:rgba(255,255,255,0.09); --surf-300:rgba(255,255,255,0.16); --surf-400:rgba(255,255,255,0.24);
  --copper:#B59C7E; --dark-surface:#181817;
  --accent-alpha:0.10;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"])  { color-scheme: light;} }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text-100);
  background:linear-gradient(180deg, var(--surf-100) 0px, var(--bg-100) 420px) fixed;
}
a{color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:var(--primary-200);color:#fff;border-bottom:1px solid rgba(0,0,0,0.2)}
:root[data-theme="dark"] .header{background:linear-gradient(180deg,#1A1918 0%,var(--dark-surface) 100%);border-bottom:1px solid rgba(225,220,207,0.18);box-shadow:0 8px 24px rgba(0,0,0,0.35)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:760;letter-spacing:.4px;color:var(--accent-300)}
.kicker{font-size:12px;color:var(--primary-300)}
.nav{display:flex;gap:16px;align-items:center}
.nav a{color:var(--accent-300);text-decoration:none;font-size:14px;opacity:.95;position:relative;padding-bottom:2px}
.nav a:hover{opacity:1}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--copper),transparent);opacity:calc(var(--accent-alpha) + 0.2)}
.controls{display:flex;gap:10px;align-items:center}
.select{padding:8px 10px;border-radius:8px;border:1px solid var(--surf-300);background:var(--surf-100);color:var(--text-100)}
.hero{padding:26px 0 8px}
.hero .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}
.hero h1{margin:8px 0 8px 0;color:var(--primary-100)}
.hero p{margin:0;color:var(--text-200)}
.hero .info{background:var(--surf-100);border:1px solid var(--surf-300);border-radius:12px;padding:16px}
:root[data-theme="dark"] .hero h1{color:var(--accent-300)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all .15s ease}
.btn-primary{background:var(--accent-100);color:#201a12;border-color:var(--accent-200)}
.btn-ghost{background:transparent;color:var(--primary-100);border-color:var(--primary-300)}
.btn-quiet{background:var(--surf-100);color:var(--text-100);border-color:var(--surf-300)}
.btn-primary:hover{filter:saturate(1.05) brightness(0.98);box-shadow:0 8px 24px rgba(181,156,126,var(--accent-alpha))}
.btn-ghost:hover{background:var(--accent-300)}
.btn-quiet:hover{background:var(--surf-200)}
:root[data-theme="dark"] .btn-ghost{color:var(--accent-300);border-color:rgba(225,220,207,0.18)}
:root[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,0.04)}
.card,.panel{background:var(--surf-100);border:1px solid var(--surf-300);border-radius:14px;overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease,background .15s ease}
.card .thumb{height:120px;background:var(--surf-200)}
.card .body{padding:14px}
.card h3{margin:0 0 6px 0;font-size:16px;color:var(--primary-100)}
.meta{color:var(--text-200);font-size:12px}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .panel{background:var(--surf-100);border-color:rgba(225,220,207,0.18)}
.card:hover,.panel:hover{box-shadow:0 10px 26px rgba(181,156,126,var(--accent-alpha));border-color:rgba(181,156,126,calc(var(--accent-alpha) + 0.08))}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--surf-300);text-align:left}
.table th{color:var(--primary-100);position:relative;background:var(--surf-100)}
.table th::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(181,156,126,var(--accent-alpha)),transparent)}
:root[data-theme="dark"] .table th,:root[data-theme="dark"] .table td{border-bottom-color:rgba(225,220,207,0.18)}
.table .status{font-weight:600;color:#201a12;background:var(--accent-300);padding:2px 8px;border-radius:999px;border:1px solid rgba(0,0,0,0.06)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:999px;background:var(--surf-200);border:1px solid var(--surf-300)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--surf-300);background:var(--surf-100)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:start}
code,kbd,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
pre{background:var(--bg-200);padding:12px;border-radius:10px;overflow:auto;border:1px solid var(--surf-300)}
.footer{margin:40px 0;padding:18px 0;color:var(--text-200);border-top:1px solid var(--surf-300)}
:root[data-theme="dark"] .footer{border-top-color:rgba(225,220,207,0.18)}
@media (max-width:900px){ .hero .grid{grid-template-columns:1fr} .grid2,.grid3{grid-template-columns:1fr} .kv{grid-template-columns:1fr} }
.searchbar{display:flex;gap:10px;background:var(--surf-100);border:1px solid var(--surf-300);padding:10px;border-radius:12px}
.searchbar input{flex:1;border:1px solid var(--surf-300);background:var(--bg-100);padding:10px 12px;border-radius:10px;color:var(--text-100)}
.filter-chip{padding:6px 10px;border-radius:14px;border:1px dashed var(--surf-300);background:var(--surf-100);font-size:12px}
.sidebar{position:sticky;top:74px;border:1px solid var(--surf-300);background:var(--surf-100);border-radius:12px;padding:12px;height:fit-content}
.sidebar h4{margin:6px 0 8px}
.checkbox{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:14px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:200}
.modal .sheet{width:min(860px,92vw);max-height:88vh;overflow:auto;background:var(--bg-100);border:1px solid var(--surf-300);border-radius:14px;padding:18px}
.modal.show{display:flex}
:where(button, a, input, select, textarea):focus-visible{outline:2px solid color-mix(in oklab, var(--accent-100), white 30%);outline-offset:2px}