:root {
    --bg: #f4f5f7; --card: #ffffff; --ink: #0f172a; --muted: #64748b; --faint: #94a3b8;
    --line: #e2e8f0; --line2: #eef2f6;
    --accent: #1d4ed8; --accent-bg: #eff6ff; --accent-border: #bfdbfe;
    --major: #dc2626; --major-bg: #fef2f2; --major-border: #fecaca; --major-bar: #dc2626;
    --minor: #b45309; --minor-bg: #fffbeb; --minor-border: #fde68a; --minor-bar: #f59e0b;
    --none: #047857; --none-bg: #ecfdf5; --none-border: #a7f3d0; --none-bar: #10b981;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
    font-size: 14px; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 8px; border: 2px solid var(--bg); }
a { color: inherit; }

/* ---------- App bar ---------- */
.appbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
    justify-content: space-between; padding: 14px 32px; background: var(--card);
    border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-logo { height: 40px; width: auto; display: block; border-radius: 6px; }
.brand-sub { font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.appbar-right { display: flex; align-items: center; gap: 16px; }
.logout { font: 500 13px var(--sans); color: var(--muted); text-decoration: none; }
.logout:hover { color: var(--ink); }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: #fff;
    font: 600 12px var(--sans); display: flex; align-items: center; justify-content: center; }

.container { max-width: 1220px; margin: 0 auto; padding: 28px 32px 80px; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.page-title { margin: 0; font: 700 24px var(--sans); color: var(--ink); letter-spacing: -0.02em; }
.page-desc { margin: 6px 0 0; font: 400 14px var(--sans); color: var(--muted); }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans);
    color: #fff; background: var(--accent); border: none; padding: 10px 18px; border-radius: 10px;
    cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(29,78,216,0.5); }
.btn-primary:hover { filter: brightness(1.05); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--sans);
    color: var(--accent); text-decoration: none; margin-bottom: 16px; }
.back-link:hover { text-decoration: underline; }

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.kpi-num { font: 700 26px var(--sans); color: var(--ink); }
.kpi-label { font: 500 10px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.kpi.major { background: var(--major-bg); border-color: var(--major-border); }
.kpi.major .kpi-num, .kpi.major .kpi-label { color: var(--major); }
.kpi.minor .kpi-num { color: var(--minor); }
.kpi.none .kpi-num { color: var(--none); }

/* ---------- Card ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.table-card { padding: 18px 22px 8px; }

/* ---------- Filter bar ---------- */
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dropdown { position: relative; }
.dd-btn { display: flex; align-items: center; gap: 8px; font: 500 12px var(--sans); color: var(--ink);
    background: #fff; border: 1px solid var(--line); padding: 8px 12px; border-radius: 9px;
    cursor: pointer; text-decoration: none; }
.dd-btn:hover { border-color: #cbd5e1; }
.dd-label { font: 500 10px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; }
.dd-value { font-weight: 600; }
.dd-caret { color: var(--faint); font-size: 9px; }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 200px; max-height: 300px; overflow: auto; background: #fff; border: 1px solid var(--line);
    border-radius: 11px; box-shadow: 0 16px 40px -12px rgba(15,23,42,0.28); padding: 5px; }
.dropdown.open .dd-menu { display: block; }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 8px 10px; border-radius: 7px; cursor: pointer; text-decoration: none; }
.dd-item:hover { background: #f1f5f9; }
.dd-item.active { background: var(--accent-bg); }
.dd-item-label { font: 500 13px var(--sans); color: #334155; }
.dd-item-count { font: 500 11px var(--mono); color: var(--faint); }
.dd-search { width: 100%; font: 400 12px var(--sans); color: #334155; background: #f8fafc;
    border: 1px solid var(--line); padding: 7px 10px; border-radius: 7px; outline: none; margin-bottom: 5px; }
.dd-search:focus { border-color: #cbd5e1; }
.search { flex: 1; min-width: 0; font: 400 12px var(--sans); color: #334155; background: #fff;
    border: 1px solid var(--line); padding: 9px 12px; border-radius: 9px; outline: none; }
.search:focus { border-color: #cbd5e1; }
.result-count { font: 500 11px var(--mono); color: var(--faint); white-space: nowrap; }

/* ---------- Lead list ---------- */
.lead-head { display: flex; gap: 12px; padding: 0 4px 10px; border-bottom: 1px solid var(--line); }
.lead-head .h-spacer { width: 3px; }
.lead-head .h-main { flex: 1; }
.lead-head span:not(.h-spacer) { font: 600 10px var(--mono); color: var(--faint);
    text-transform: uppercase; letter-spacing: 0.08em; }
.lead-row { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line2);
    cursor: pointer; text-decoration: none; color: inherit; }
.lead-row:hover { background: #f8fafc; }
.sev-bar { width: 3px; border-radius: 2px; align-self: stretch; }
.lead-main { flex: 1; min-width: 0; }
.lead-line1 { display: flex; align-items: center; gap: 9px; }
.sev-pill { font: 600 10px var(--mono); padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.lead-id { font: 500 12px var(--mono); color: var(--ink); white-space: nowrap; }
.lead-name { font: 400 13px var(--sans); color: #475569; white-space: nowrap; }
.lead-tarif { font: 400 12px var(--sans); color: var(--faint); white-space: nowrap; }
.abw-badge { margin-left: auto; font: 600 11px var(--mono); min-width: 22px; height: 22px;
    padding: 0 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid; }
.lead-summary { margin-top: 5px; font: 400 13px var(--sans); color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* severity theming */
.s-major .sev-bar, .sev-bar.s-major { background: var(--major-bar); }
.s-minor .sev-bar, .sev-bar.s-minor { background: var(--minor-bar); }
.s-none  .sev-bar, .sev-bar.s-none  { background: var(--none-bar); }
.sev-pill.s-major { color: var(--major); background: var(--major-bg); }
.sev-pill.s-minor { color: var(--minor); background: var(--minor-bg); }
.sev-pill.s-none  { color: var(--none);  background: var(--none-bg); }
.abw-badge.s-major { color: var(--major); background: var(--major-bg); border-color: var(--major-border); }
.abw-badge.s-minor { color: var(--minor); background: var(--minor-bg); border-color: var(--minor-border); }
.abw-badge.s-none  { color: var(--none);  background: var(--none-bg);  border-color: var(--none-border); }
.empty { color: var(--muted); padding: 24px 4px; font-size: 13px; }

/* ---------- Detail ---------- */
.detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-title { margin: 0; font: 700 26px var(--sans); color: var(--ink); letter-spacing: -0.02em; }
.detail-badge { font: 600 11px var(--mono); padding: 5px 11px; border-radius: 999px; border: 1px solid; }
.detail-badge.s-major { color: var(--major); background: var(--major-bg); border-color: var(--major-border); }
.detail-badge.s-minor { color: var(--minor); background: var(--minor-bg); border-color: var(--minor-border); }
.detail-badge.s-none  { color: var(--none);  background: var(--none-bg);  border-color: var(--none-border); }
.detail-sub { font: 400 14px var(--sans); color: var(--muted); }

.alert { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; background: var(--minor-bg);
    border: 1px solid var(--minor-border); border-left: 4px solid var(--minor-bar); border-radius: 10px;
    font: 400 14px var(--sans); color: #92400e; line-height: 1.5; }

.audio { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.audio-icon { width: 34px; height: 34px; border-radius: 999px; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.audio-meta { flex: none; }
.audio-meta-title { font: 600 12px var(--sans); color: var(--ink); }
.audio-meta-sub { font: 500 10px var(--mono); color: var(--faint); margin-top: 1px; }
.audio audio { flex: 1; height: 34px; min-width: 200px; }

.cols { display: flex; gap: 20px; margin-top: 20px; align-items: flex-start; }
.col-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-right { width: 380px; flex: none; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.panel-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.panel-title { font: 700 13px var(--sans); color: var(--ink); }
.panel-note { margin-left: auto; font: 400 12px var(--sans); color: var(--faint); }
.count-pill { font: 600 10px var(--mono); color: var(--major); background: var(--major-bg);
    padding: 3px 8px; border-radius: 999px; }
.panel-tag { font: 500 10px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* discrepancies */
.disc-headrow { display: grid; grid-template-columns: 150px 1fr 1fr; padding: 10px 20px;
    border-bottom: 1px solid var(--line2); background: #f8fafc; }
.disc-headrow span { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.disc-headrow .h-feld { color: var(--faint); }
.disc-headrow .h-ein { color: var(--major); }
.disc-headrow .h-heard { color: var(--none); }
.disc-row { padding: 14px 20px; border-bottom: 1px solid var(--line2); }
.disc-grid { display: grid; grid-template-columns: 150px 1fr 1fr; align-items: start; }
.disc-field { font: 500 12px var(--mono); color: #334155; }
.disc-entered { font: 400 13px var(--sans); color: var(--major); line-height: 1.5; padding-right: 16px; }
.disc-heard { font: 400 13px var(--sans); color: var(--none); line-height: 1.5; padding-right: 8px; }
.disc-hint { margin-top: 8px; font: 400 12px var(--sans); color: #92400e; background: var(--minor-bg);
    border-radius: 7px; padding: 6px 10px; display: inline-block; }
.disc-row.uncertain { background: #fffdf5; }
.tag-uncertain { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font: 700 10px var(--mono); color: var(--minor); background: #fff; border: 1px solid var(--minor-border);
    text-transform: uppercase; letter-spacing: 0.03em; }

/* curated data */
.curated { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px 16px; }
.curated-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; }
.raw-toggle { font: 500 12px var(--sans); color: var(--accent); cursor: pointer; background: none; border: none; }
.curated-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.group-title { font: 600 10px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.kv { display: flex; flex-direction: column; gap: 7px; font: 400 13px var(--sans); }
.kv-row { display: flex; justify-content: space-between; gap: 12px; }
.kv-k { color: var(--faint); }
.kv-v { color: var(--ink); text-align: right; }
.kv-v.mono { font: 400 12px var(--mono); }
.kv-v.flag { color: var(--major); }
.raw-grid { display: none; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid var(--line2); }
.raw-grid.show { display: grid; }
.raw-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; }
.raw-k { font: 400 12px var(--mono); color: var(--faint); }
.raw-v { font: 400 12px var(--mono); color: #475569; text-align: right; word-break: break-word; }

/* transcript */
.transcript-body { padding: 16px 18px; font: 400 13px var(--sans); color: #475569;
    line-height: 1.75; max-height: 560px; overflow: auto; white-space: pre-wrap; }
.transcript-empty { color: var(--faint); font-style: italic; }

/* ---------- Pipeline ---------- */
.warn { background: var(--minor-bg); border: 1px solid var(--minor-border); color: #8a4b00;
    padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.warn code { background: #ffe9d3; padding: 1px 5px; border-radius: 4px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
    display: flex; flex-direction: column; }
.step-head { display: flex; align-items: center; gap: 10px; }
.step-num { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-bg); color: var(--accent);
    font: 600 12px var(--mono); display: flex; align-items: center; justify-content: center; }
.step-title { font: 700 15px var(--sans); color: var(--ink); }
.step-desc { margin: 12px 0 20px; font: 400 13px var(--sans); color: var(--muted); line-height: 1.55; flex: 1; }
.step-btn { font: 600 13px var(--sans); color: #fff; background: var(--ink); border: none;
    padding: 11px; border-radius: 10px; cursor: pointer; width: 100%; }
.step-btn:hover { background: #1e293b; }
.step-btn:disabled { opacity: .5; cursor: not-allowed; }
.runlog { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; }
.runlog h2 { margin: 0 0 10px; font: 700 14px var(--sans); }
.runlog pre { margin: 0; background: #0f172a; color: #cbd5e1; padding: 12px; border-radius: 8px;
    font: 400 12px var(--mono); line-height: 1.5; overflow-x: auto; white-space: pre-wrap; }

.foot { margin-top: 40px; text-align: center; font: 400 12px var(--mono); color: #b6bdc7; }
code { background: #eef0f3; padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }

@media (max-width: 900px) {
    .kpis, .steps { grid-template-columns: repeat(2, 1fr); }
    .cols { flex-direction: column; }
    .col-right { width: 100%; }
    .curated-grid { grid-template-columns: 1fr; }
    .container { padding: 20px; }
    .appbar { padding: 12px 20px; }
}