/* MocTel Statistiques — "Clair pro" (owner's choice 2026-10-29): light by default, a dark version on the
   ☾ / ☀ switch (top bar, remembered per browser). --amber is the accent (blue here); --warn stays amber. */

:root {
  --bg-0: #F5F7FB; --bg-1: #FFFFFF; --bg-2: #F1F4F9; --bg-3: #E7ECF4; --border: #E1E6EF;
  --text-0: #0F172A; --text-1: #334155; --text-2: #64748B; --text-3: #A3AEC2;
  --amber: #2563EB; --amber-glow: rgba(37, 99, 235, 0.10);
  --cyan: #0EA5E9; --red: #E11D48; --green: #059669; --blue: #60A5FA; --violet: #7C3AED;
  --warn: #F59E0B;
  --font-ui: 'Inter', system-ui, sans-serif; --font-head: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --radius: 10px; --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.06);
  --card-border: transparent; --on-accent: #fff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg-0: #0B1220; --bg-1: #111A2E; --bg-2: #16213A; --bg-3: #1E2B47; --border: #24324F;
  --text-0: #E8EEF9; --text-1: #B7C3D9; --text-2: #7F8DA8; --text-3: #4D5B78;
  --amber: #3B82F6; --amber-glow: rgba(59, 130, 246, 0.16);
  --cyan: #38BDF8; --red: #FB7185; --green: #34D399; --blue: #60A5FA; --violet: #A78BFA;
  --warn: #FBBF24;
  --shadow: 0 8px 24px rgba(0,0,0,.28);
  --card-border: rgba(255,255,255,.05); --on-accent: #fff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg-0); color: var(--text-1); font: 14px/1.5 var(--font-ui); }
a { color: var(--amber); }
button, select, input { font: inherit; color: var(--text-0); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.muted { color: var(--text-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Top bar */
.top { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 56px; box-shadow: 0 1px 0 var(--border);
       background: var(--bg-1); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.brand { color: var(--text-0); font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.brand b { color: var(--amber); }
.top .spacer { flex: 1; }
.top .who { color: var(--text-2); font-size: 13px; }
.btn { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; }
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--amber); color: var(--on-accent); border-color: var(--amber); font-weight: 600; }
a.btn { text-decoration: none; color: var(--text-0); display: inline-block; }
.btn.small { padding: 3px 9px; font-size: 13px; }
select, input[type=date] { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 8px; }

/* Tabs */
.tabs { display: flex; gap: 4px; padding: 0 20px; background: var(--bg-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { padding: 12px 14px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--text-0); border-bottom-color: var(--amber); font-weight: 600; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; }
.filters .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.filters .seg button { background: var(--bg-2); border: 0; padding: 5px 11px; cursor: pointer; color: var(--text-1); }
.filters .seg button.on { background: var(--amber-glow); color: var(--amber); }

main { padding: 0 20px 40px; max-width: 1400px; }
.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 14px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.card { background: var(--bg-1); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 16px; min-width: 0; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 4px; font-size: 15px; color: var(--text-0); font-weight: 600; font-family: var(--font-head); }
.card .sub { margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.kpi .label { color: var(--text-2); font-size: 12.5px; }
.kpi .value { color: var(--text-0); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-head); }
.kpi .hint { color: var(--text-2); font-size: 12.5px; }
.kpi .value.bad, td.bad, .rate.bad { color: var(--red); }
.kpi .value.warn, .rate.warn { color: var(--warn); }
.kpi .value.good, .rate.good { color: var(--green); }
td.bad { font-weight: 600; }
.rate { font-size: 12px; font-weight: 600; }
span.good { color: var(--green); } span.bad { color: var(--red); font-weight: 600; }
.trend { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.trend.up { color: var(--green); } .trend.down { color: var(--red); }
label.day { display: inline-flex; gap: 4px; align-items: center; color: var(--text-1); }
input[type=time] { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button { background: var(--bg-2); border: 0; padding: 5px 11px; cursor: pointer; white-space: nowrap; color: var(--text-1); }
.seg button.on { background: var(--amber-glow); color: var(--amber); }
.chart { position: relative; height: 260px; }
.map { height: 420px; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); }
.map .leaflet-popup-content { font-family: var(--font-ui); }
:root[data-theme="dark"] .map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); }
@media (max-width: 640px) { .map { height: 320px; } }
.notice { background: var(--amber-glow); border: 1px solid var(--amber); color: var(--text-0); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.error { color: var(--red); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--text-2); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
table.rows tr[data-ext] { cursor: pointer; }
table.rows tr[data-ext]:hover td { background: var(--bg-2); }
table.rows tr.sel td { background: var(--amber-glow); }
.scroll { overflow-x: auto; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.bar { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; display: flex; min-width: 80px; }
.bar span { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; margin-top: 8px; }

/* Hour × day heat map */
.heat { border-collapse: separate; border-spacing: 2px; }
.heat td, .heat th { padding: 0; border: 0; text-align: center; font-size: 11px; }
.heat td { width: 26px; height: 22px; border-radius: 3px; background: var(--bg-3); color: var(--text-0); }
.heat th { color: var(--text-2); font-weight: 400; padding: 0 4px; }
.heat.zoom { width: 100%; table-layout: fixed; }
.heat.zoom th:first-child { width: 34px; }
.heat.zoom td { width: auto; }
@media (max-width: 700px) { .heat.zoom th { font-size: 10px; padding: 0; } .heat.zoom th.odd { visibility: hidden; } }
.heat-lens .lp { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -2px 0 8px; font-size: 12px; color: var(--text-1); }
.heat-lens .lp:empty { display: none; }
.heat.zoom td { cursor: pointer; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease; }
.heat.zoom td.hot { transform: scale(1.3); box-shadow: 0 0 0 2px var(--text-0), 0 4px 10px rgba(0,0,0,.25); position: relative; z-index: 1; }
.heat-lens { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; padding: 10px 12px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.22);
  opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.86); will-change: transform, opacity;
  transition: opacity .2s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.heat-lens.on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); }
.heat-lens.snap { transition: none; }
.heat-lens td { transition: background-color .25s ease, box-shadow .25s ease; }
.heat-lens th { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .heat-lens, .heat-lens td, .heat.zoom td { transition: opacity .15s ease; }
}
.heat-lens .lh { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; white-space: nowrap; }
.heat-lens .lh b { color: var(--text-0); font-size: 14px; text-transform: capitalize; }
.heat-lens .lh span { color: var(--amber); font-weight: 600; font-size: 14px; }
.heat-lens table { border-collapse: separate; border-spacing: 3px; width: auto; }
.heat-lens td, .heat-lens th { padding: 0; border: 0; text-align: center; }
.heat-lens td { width: 44px; height: 34px; border-radius: 6px; background: var(--bg-3); color: var(--text-0); font-size: 14px; font-weight: 600;
  text-shadow: 0 0 3px var(--bg-1), 0 0 3px var(--bg-1); }
.heat-lens th { color: var(--text-2); font-weight: 400; font-size: 12px; padding: 0 4px; }
.heat-lens th.cur { color: var(--text-0); font-weight: 700; }
.heat-lens td.cur { box-shadow: 0 0 0 2px var(--text-0); font-size: 16px; }

/* Sign-in / pick a company */
.center { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: 100%; max-width: 380px; text-align: center; }
.login h1 { color: var(--text-0); font-size: 22px; margin: 0 0 6px; }
.login label { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 14px 0; color: var(--text-2); }
.pick { list-style: none; padding: 0; margin: 0; text-align: left; max-height: 60vh; overflow: auto; }
.pick a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text-0); }
.pick a:hover { background: var(--bg-2); }

/* Company picker (combobox) */
.tpick { position: relative; text-align: left; }
.tpick input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; }
.tpick input:focus { outline: none; border-color: var(--amber); }
.top-pick { width: 260px; }
.tpick-list { list-style: none; margin: 4px 0 0; padding: 4px; background: var(--bg-1); border: 1px solid var(--border);
              border-radius: var(--radius); max-height: 340px; overflow: auto; }
.tpick-list:not(.inline) { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.35); min-width: 300px; }
.tpick-list.inline { max-height: 55vh; }
.tpick-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text-0); }
.tpick-list li.on, .tpick-list li[data-i]:hover { background: var(--amber-glow); }
.tpick-list li.empty { cursor: default; color: var(--text-2); }
@media (max-width: 640px) { .top-pick { width: auto; flex: 1; min-width: 0; } .tpick-list:not(.inline) { min-width: 0; } }

/* "Voir comme" (impersonation) */
#viewas, #theme { display: inline-grid; place-items: center; padding: 5px 8px; }
#viewas svg, #theme svg { width: 15px; height: 15px; display: block; }
body:has(.imp-banner) #viewas { color: var(--warn); border-color: var(--warn); }
.imp-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px;
              background: var(--warn); color: #1a1300; font-size: 13px; font-weight: 600; }
.imp-banner .tag { background: rgba(0,0,0,.15); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.imp-banner .btn { background: #fff; color: #1a1300; border-color: transparent; }
dialog.viewas { width: min(440px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); color: var(--text-1); }
dialog.viewas::backdrop { background: rgba(0,0,0,.45); }
dialog.viewas h2 { margin: 0 0 6px; font-size: 18px; color: var(--text-0); }
dialog.viewas input[type=search] { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; }
dialog.viewas .va-ro { display: flex; gap: 8px; align-items: center; margin: 10px 0 6px; color: var(--text-2); font-size: 13px; }
dialog.viewas .tpick-list { max-height: 300px; }
dialog.viewas .tpick-list li { padding: 0; cursor: default; }
dialog.viewas .tpick-list li.muted { padding: 7px 10px; }
.va-user { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 7px 10px;
           background: none; border: 0; border-radius: 6px; color: var(--text-0); font: inherit; cursor: pointer; }
.va-user:hover:not(:disabled) { background: var(--amber-glow); }
.va-user .muted { font-size: 12px; }
.va-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 640px) {
  .top { padding: 0 12px; gap: 10px; }
  .top .who { display: none; }
  .tabs, .filters, main { padding-left: 12px; padding-right: 12px; }
  .cols-2 { grid-template-columns: 1fr; }
  .kpi .value { font-size: 22px; }
}

/* Recording player (MtRecPlayer from cc.moctel.com): this site's tokens on its --rp-* variables. */
.rp {
  --rp-surface: var(--bg-1); --rp-surface-2: var(--bg-3); --rp-line: var(--border);
  --rp-ink: var(--text-0); --rp-ink-soft: var(--text-1); --rp-muted: var(--text-2);
  --rp-accent: var(--amber); --rp-on-accent: #111; --rp-ch1: var(--amber); --rp-ch2: var(--cyan); --rp-danger: var(--red);
  --rp-font: var(--font-ui); --rp-mono: var(--font-mono);
}
html.rp-docked-open main { padding-bottom: 200px; }
.btn.play { padding: 2px 8px; }

/* Report (PDF): a white printable document, whatever the theme */
.report-bar { display: flex; gap: 10px; align-items: center; padding: 12px 20px; background: var(--bg-1); border-bottom: 1px solid var(--border); }
.report { --text-0: #111; --text-1: #222; --text-2: #666; --border: #ddd; --bg-3: #eee; --amber: #c48a00;
  --green: #16a36a; --red: #d92445; --blue: #2f7bd9; --violet: #7c5cd6; --cyan: #00a383;
  background: #fff; color: #222; max-width: 980px; margin: 18px auto; padding: 28px 34px; border-radius: 8px; box-shadow: 0 2px 16px rgba(0,0,0,.15); }
.report h1 { margin: 2px 0; font-size: 24px; color: #111; }
.report h2 { font-size: 14px; margin: 0 0 8px; color: #111; text-transform: uppercase; letter-spacing: .04em; }
.report section { margin-top: 18px; break-inside: avoid; }
.report .rh { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #c48a00; padding-bottom: 10px; }
.report .rh .brand { font-weight: 700; } .report .rh .brand b { color: #c48a00; }
.report .rkpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.report .rkpis.three { grid-template-columns: repeat(3, 1fr); }
.report .rk { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; }
.report .rk .label { font-size: 11px; color: #666; } .report .rk .value { font-size: 20px; font-weight: 700; color: #111; }
.report .rk .value.bad { color: #d92445; }
.report .findings { margin: 10px 0 0; padding-left: 18px; } .report .findings li { margin: 2px 0; }
.report .rchart { height: 200px; }
.report .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.report table { font-size: 12.5px; } .report th, .report td { padding: 4px 6px; }
.report .small { font-size: 12px; } .report footer { margin-top: 22px; text-align: right; }
.report .heat td { width: 20px; height: 17px; font-size: 10px; }
@media print {
  @page { size: letter; margin: 12mm; }
  :root, html, body, #app { background: #fff !important; color-scheme: light; }
  .report .rkpis { grid-template-columns: repeat(3, 1fr) !important; }
  .report .rkpis.three { grid-template-columns: repeat(3, 1fr) !important; }
  .report .split { grid-template-columns: 1fr 1fr !important; }
  .no-print, .top, .tabs, .filters { display: none !important; }
  .report { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 760px) { .report .rkpis { grid-template-columns: repeat(2, 1fr); } .report .split { grid-template-columns: 1fr; } .report { padding: 16px; } }

.btn.edit { padding: 0 6px; font-size: 12px; opacity: .55; margin-left: 4px; }
.btn.edit:hover { opacity: 1; }
@media print { .btn.edit { display: none; } }


/* Theme switch */
.btn.theme { padding: 4px 9px; font-size: 15px; line-height: 1; }
.rp { --rp-on-accent: #fff; }

/* One number: history + each call step by step (drawer on the right) */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--amber-glow); }
dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(560px, 100vw); padding: 0; border: 0;
                border-left: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); overflow: auto; }
dialog.drawer::backdrop { background: rgba(0,0,0,.35); }
dialog.drawer header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 6px;
                       position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
dialog.drawer h2 { margin: 0; font-size: 22px; color: var(--text-0); }
dialog.drawer header p { margin: 4px 0 0; font-size: 13px; }
.num-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 20px 10px; }
#num-body { padding: 0 20px 24px; }
#slot-body { padding: 4px 20px 24px; }
.kpi.drill { cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.kpi.drill:hover, .kpi.drill:focus-visible { border-color: var(--amber); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
#slot-body h3 { margin: 18px 0 6px; font-size: 14px; color: var(--text-0); }
#slot-body table { font-size: 13px; }
#slot-body td, #slot-body th { white-space: nowrap; }
#slot-dlg h2::first-letter, .slot-k span::first-letter { text-transform: uppercase; }
#slot-body .bar { min-width: 0; }
.slot-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.slot-k div { background: var(--bg-2); border-radius: var(--radius); padding: 8px 10px; }
.slot-k span { display: block; font-size: 12px; color: var(--text-2); }
.slot-k b { font-size: 20px; color: var(--text-0); }
.srow { display: grid; grid-template-columns: 64px 1fr 32px; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 0; }
.srow b { text-align: right; color: var(--text-0); font-weight: 600; }
.chart-tip { min-width: 190px; max-width: 280px; }
.chart-tip .lh b { text-transform: none; } .chart-tip .lh b::first-letter { text-transform: uppercase; }
.chart-tip .ct { display: grid; gap: 4px; font-size: 13px; }
.chart-tip .ct div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 6px; }
.chart-tip .ct span { color: var(--text-1); } .chart-tip .ct b { color: var(--text-0); font-variant-numeric: tabular-nums; }
.heat-lens .lf { margin-top: 8px; font-size: 11.5px; color: var(--text-2); text-align: center; }
.heat-lens .lf:empty { display: none; }
#num-body .sub { margin: 4px 0 12px; }
.small { font-size: 12.5px; }
.ntl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.nrow { border-bottom: 1px solid var(--border); }
.nrow .line { display: grid; grid-template-columns: 18px 150px 1fr 1fr 64px; white-space: nowrap; gap: 8px; align-items: center; width: 100%; padding: 9px 4px;
              background: none; border: 0; color: var(--text-1); font: inherit; font-size: 13px; text-align: left; }
.nrow.in .line { cursor: pointer; }
.nrow.in .line:hover, .nrow.open .line { background: var(--amber-glow); }
.nrow .dir { font-weight: 700; color: var(--text-2); }
.nrow.out .dir { color: var(--amber); }
.nrow .num { text-align: right; }
.nrow .detail:empty { display: none; }
.nrow .detail { padding: 6px 4px 14px 30px; }
.story { list-style: none; margin: 4px 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.story li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 4px 0; font-size: 13px; }
.story li::before { content: ''; position: absolute; left: -19px; top: 10px; width: 8px; height: 8px; border-radius: 50%;
                    background: var(--bg-1); border: 2px solid var(--text-3); }
.story .when { color: var(--text-2); font-size: 12px; }
.story li.ev-key .what { font-weight: 600; color: var(--text-0); }
.story li.ev-answered::before { border-color: var(--green); background: var(--green); }
.story li.ev-end::before { border-color: var(--text-0); background: var(--text-0); }
.story li.ev-end.o-missed::before, .story li.ev-end.o-ivr_hangup::before, .story li.ev-end.o-service_failed::before { border-color: var(--warn); background: var(--warn); }
.story li.ev-end .what { font-weight: 600; color: var(--text-0); }
@media (max-width: 640px) { .nrow .line { grid-template-columns: 16px 1fr 1fr; } .nrow .line > :nth-child(4), .nrow .line > :nth-child(5) { display: none; } .nrow .line { white-space: normal; } }

/* ── mt-routers additions ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--text-2); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); }
td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.scroll table { min-width: 640px; }
.scroll { overflow-x: auto; }
.tabs a span.on { color: var(--amber); font-weight: 600; }
.tabs { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
a { color: inherit; text-decoration: none; }
select { background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }