:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;

  --color-bg: #f4f2ec;
  --color-surface: #fbfaf7;
  --color-surface-2: #ffffff;
  --color-offset: #ece9e1;
  --color-divider: #e0dcd2;
  --color-border: #cfcabe;
  --color-text: #1d1b16;
  --color-text-muted: #5b5850;
  --color-text-faint: #8d897f;
  --color-primary: #0b6468;
  --color-primary-hover: #084c50;
  --color-primary-soft: #d6e6e3;
  --color-dupe: #a2441c;
  --color-dupe-soft: #f3e1d6;
  --color-ok: #3c6e1f;
  --color-ok-soft: #dde8d3;
  --color-warn: #8a5a00;
  --color-warn-soft: #f1e5c6;
  --c-isbn: #1f5f93;
  --c-title: #0b6468;
  --c-author: #6c3aa8;
  --c-year: #a87400;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --shadow-sm: 0 1px 2px rgb(40 30 10 / .06);
  --shadow-md: 0 6px 18px rgb(40 30 10 / .08);
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: 180ms cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] {
  --color-bg: #151513;
  --color-surface: #1c1c19;
  --color-surface-2: #22221e;
  --color-offset: #262622;
  --color-divider: #2e2e29;
  --color-border: #3d3c36;
  --color-text: #e9e7e1;
  --color-text-muted: #aeaba2;
  --color-text-faint: #807d75;
  --color-primary: #5fb3b3;
  --color-primary-hover: #7cc6c4;
  --color-primary-soft: #1f3a3a;
  --color-dupe: #e98b5f;
  --color-dupe-soft: #3e2a20;
  --color-ok: #8fc46a;
  --color-ok-soft: #26331f;
  --color-warn: #e3b448;
  --color-warn-soft: #3a3120;
  --c-isbn: #6fa8dc;
  --c-title: #5fb3b3;
  --c-author: #b48ae6;
  --c-year: #e3b448;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 6px 18px rgb(0 0 0 / .35);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}
svg{flex-shrink:0}
[hidden]{display:none!important}
.mono,.kpi-v,output,.isbn,td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-rows:auto 1fr;height:100dvh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.mark{width:32px;height:32px;color:var(--color-primary)}
.brand h1{font-size:var(--text-lg);font-weight:650;letter-spacing:-.01em}
.sub{margin:0;font-size:var(--text-xs);color:var(--color-text-muted)}
.top-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:340px 1fr;min-height:0}
.panel{overflow-y:auto;overscroll-behavior:contain;background:var(--color-surface);border-right:1px solid var(--color-divider);padding:var(--space-4) var(--space-5) var(--space-10)}
.main{overflow-y:auto;overscroll-behavior:contain;padding:var(--space-5) var(--space-6) var(--space-12);min-width:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:.5rem .85rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);font-size:var(--text-sm);font-weight:550;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn svg,.icon-btn svg,.search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover:not(:disabled){border-color:var(--color-text-faint)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
[data-theme="dark"] .btn.primary{color:#0d1716}
.btn.primary:hover{background:var(--color-primary-hover)}
.btn.full{width:100%;justify-content:center;margin-top:var(--space-2)}
.btn.small{padding:.25rem .55rem;font-size:var(--text-xs)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);cursor:pointer}

/* ---------- panel ---------- */
.block{padding-bottom:var(--space-5);margin-bottom:var(--space-4);border-bottom:1px solid var(--color-divider)}
.block:last-child{border-bottom:0}
.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.block h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:650;color:var(--color-text-muted)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--color-offset);border-radius:var(--radius-md);padding:3px;gap:3px;margin-bottom:var(--space-3)}
.seg-btn{border:0;background:transparent;padding:.4rem;border-radius:calc(var(--radius-md) - 2px);font-size:var(--text-sm);font-weight:550;cursor:pointer;color:var(--color-text-muted)}
.seg-btn.active{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm)}
.drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;padding:var(--space-5) var(--space-4);border:1.5px dashed var(--color-border);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);transition:border-color var(--ease),background var(--ease)}
.drop svg{width:24px;height:24px;fill:none;stroke:var(--color-primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop small{color:var(--color-text-muted);font-size:var(--text-xs)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop.over,.drop:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}
textarea{width:100%;resize:vertical;font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);line-height:1.5}
.note{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}
.msg{font-size:var(--text-xs);margin:var(--space-2) 0 0;color:var(--color-text-muted);min-height:1em}
.msg.err{color:var(--color-dupe)}
.msg.ok{color:var(--color-ok)}
.mapping h3{font-size:var(--text-sm);font-weight:600;margin:var(--space-4) 0 var(--space-2)}
.map-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3);align-items:center;font-size:var(--text-sm)}
.map-grid label{color:var(--color-text-muted)}
select{width:100%;padding:.4rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);font-size:var(--text-sm)}

.presets{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}
.chip-btn{flex:1;padding:.35rem .5rem;border-radius:999px;border:1px solid var(--color-border);background:transparent;font-size:var(--text-xs);font-weight:600;cursor:pointer}
.chip-btn.active{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}
.group{border:1px solid var(--color-divider);border-radius:var(--radius-md);margin-bottom:var(--space-2);background:var(--color-surface-2)}
.group summary{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);cursor:pointer;font-size:var(--text-sm);font-weight:600;list-style:none}
.group summary::-webkit-details-marker{display:none}
.group summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--color-text-muted);border-bottom:1.5px solid var(--color-text-muted);transform:rotate(45deg);transition:transform var(--ease)}
.group[open] summary::after{transform:rotate(-135deg)}
.group-body{padding:0 var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
.dot{width:8px;height:8px;border-radius:50%}
.d-isbn{background:var(--c-isbn)}.d-title{background:var(--c-title)}.d-author{background:var(--c-author)}.d-year{background:var(--c-year)}.d-rule{background:var(--color-text-muted)}
.tog{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-sm);cursor:pointer}
.tog input{margin:.2rem 0 0;accent-color:var(--color-primary);width:15px;height:15px;flex-shrink:0}
.field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}
.slider-top{display:flex;justify-content:space-between;font-size:var(--text-sm)}
.slider-top output{font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}
.slider input{width:100%;accent-color:var(--color-primary)}
.hint{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ---------- empty ---------- */
.empty{max-width:420px;margin:12vh auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.empty svg{width:64px;height:64px;fill:none;stroke:var(--color-text-faint);stroke-width:2}
.empty h2{font-size:var(--text-lg)}
.empty p{margin:0;color:var(--color-text-muted)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.kpi{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.kpi-l{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em}
.kpi.accent{background:var(--color-dupe-soft);border-color:transparent}
.kpi.accent .kpi-v{color:var(--color-dupe)}
.kpi.warn .kpi-v{color:var(--color-warn)}

/* ---------- insights ---------- */
.insights{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4);min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}
.card-head h3{font-size:var(--text-sm);font-weight:600}
.meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.hist{position:relative;height:120px;display:flex;align-items:flex-end;gap:2px;border-bottom:1px solid var(--color-border)}
.hist .bar{flex:1;display:flex;flex-direction:column-reverse;min-width:0;height:100%}
.hist .seg-m{background:var(--color-dupe);border-radius:2px 2px 0 0}
.hist .seg-n{background:var(--color-border)}
.hist .thr{position:absolute;top:-6px;bottom:0;width:0;border-left:2px dashed var(--color-text)}
.hist .thr span{position:absolute;top:-4px;left:4px;font-size:var(--text-xs);font-family:var(--font-mono);background:var(--color-surface);padding:0 3px;white-space:nowrap}
.hist-axis{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-faint);font-family:var(--font-mono);margin-top:var(--space-1)}
.legend{display:flex;gap:var(--space-4);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:var(--space-1)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px}
.sw-match{background:var(--color-dupe)}.sw-near{background:var(--color-border)}.sw-line{border-left:2px dashed var(--color-text);width:2px;height:12px;border-radius:0}
.reason-bars{display:flex;flex-direction:column;gap:var(--space-3)}
.rb-top{display:flex;justify-content:space-between;font-size:var(--text-sm);margin-bottom:4px}
.rb-top b{font-family:var(--font-mono);font-weight:600}
.rb-track{height:8px;background:var(--color-offset);border-radius:99px;overflow:hidden}
.rb-fill{height:100%;border-radius:99px;transition:width 400ms cubic-bezier(.16,1,.3,1)}

/* ---------- workspace ---------- */
.workspace{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);min-width:0}
.tabs{display:flex;gap:var(--space-1);padding:var(--space-2) var(--space-3) 0;border-bottom:1px solid var(--color-divider);overflow-x:auto}
.tab{border:0;background:none;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:550;color:var(--color-text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:var(--space-2);align-items:center}
.tab.active{color:var(--color-text);border-bottom-color:var(--color-primary)}
.count{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--color-offset);padding:1px 6px;border-radius:99px}
.toolbar{display:flex;gap:var(--space-2);padding:var(--space-3);align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--color-divider)}
.toolbar select{width:auto}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2)}
.search svg{color:var(--color-text-faint)}
.search input{border:0;background:transparent;padding:.4rem 0;flex:1;min-width:0;font-size:var(--text-sm);outline:none}
.view{padding:var(--space-3)}

/* side by side */
.sbs-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:var(--space-3);padding:0 var(--space-1) var(--space-2);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:650}
.sbs-head .l{color:var(--color-ok)}.sbs-head .r{color:var(--color-dupe)}
.cluster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-divider);border-radius:var(--radius-lg);margin-bottom:var(--space-3);background:var(--color-surface-2);content-visibility:auto;contain-intrinsic-size:0 220px}
.rec{border-radius:var(--radius-md);padding:var(--space-3);min-width:0}
.rec.canon{align-self:start;position:sticky;top:0}
.rec.canon{background:var(--color-ok-soft);border-left:3px solid var(--color-ok)}
.rec-title{font-weight:600;font-size:var(--text-base);overflow-wrap:anywhere}
.rec-author{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px;overflow-wrap:anywhere}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.facts b{color:var(--color-text);font-weight:550}
.isbn{font-size:var(--text-xs);overflow-wrap:anywhere}
.why{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-ok);font-weight:550}
.cl-meta{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono)}
.dupes{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.dupe{border:1px solid var(--color-divider);border-left:3px solid var(--color-dupe);border-radius:var(--radius-md);padding:var(--space-3);background:var(--color-surface);min-width:0}
.dupe-top{display:flex;justify-content:space-between;gap:var(--space-2);align-items:flex-start}
.dupe-top .acts{display:flex;gap:var(--space-1);flex-shrink:0}
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);margin-top:var(--space-2)}
.m{background:var(--color-offset);border-radius:var(--radius-sm);padding:4px 6px;min-width:0}
.m .ml{display:flex;align-items:center;gap:4px;font-size:.6875rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap}
.m .mv{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m.pass .mv::before{content:"✓ ";color:var(--color-ok)}
.m.fail .mv::before{content:"✕ ";color:var(--color-dupe)}
.m.na .mv{color:var(--color-text-faint)}
.reason{margin-top:var(--space-2);font-size:var(--text-xs);display:flex;gap:var(--space-2);align-items:baseline;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:99px;white-space:nowrap}
.tag.isbn{background:color-mix(in oklab,var(--c-isbn) 16%,transparent);color:var(--c-isbn)}
.tag.fuzzy{background:color-mix(in oklab,var(--c-title) 16%,transparent);color:var(--c-title)}
.tag.chain{background:var(--color-warn-soft);color:var(--color-warn)}
.tag.keep{background:var(--color-ok-soft);color:var(--color-ok)}
.tag.bad{background:var(--color-dupe-soft);color:var(--color-dupe)}
.reason-text{color:var(--color-text-muted)}
del.d{background:var(--color-dupe-soft);color:var(--color-dupe);text-decoration:none;border-radius:2px}
ins.d{background:color-mix(in oklab,var(--c-isbn) 20%,transparent);color:var(--c-isbn);text-decoration:none;border-radius:2px}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th{position:sticky;top:0;background:var(--color-offset);text-align:left;font-size:var(--text-xs);font-weight:650;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-2) var(--space-3);white-space:nowrap}
td{padding:var(--space-2) var(--space-3);border-top:1px solid var(--color-divider);vertical-align:top}
td.num{white-space:nowrap}
td .sm{display:block;font-size:var(--text-xs);color:var(--color-text-muted)}
.pair-cell{min-width:220px}
.more{display:flex;justify-content:center;padding:var(--space-3)}
.nores{padding:var(--space-10);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}

.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%,20px);background:var(--color-text);color:var(--color-bg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);opacity:0;pointer-events:none;transition:all var(--ease);z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1280px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
  .app{height:auto;min-height:100dvh}
  .layout{grid-template-columns:1fr}
  .panel{border-right:0;border-bottom:1px solid var(--color-divider);overflow:visible}
  .main{overflow:visible;padding:var(--space-4)}
  .insights{grid-template-columns:1fr}
}
@media (max-width:720px){
  .topbar{padding:var(--space-3) var(--space-4)}
  .top-actions .btn{flex:1;justify-content:center;font-size:var(--text-xs);padding:.45rem .5rem}
  .top-actions{width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cluster,.sbs-head{grid-template-columns:1fr}
  .sbs-head{display:none}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec.canon::before{content:"Retained canonical";display:block;font-size:.6875rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--color-ok);margin-bottom:4px}
  .dupes::before{content:"Filtered duplicates";font-size:.6875rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--color-dupe)}
  .toolbar select{flex:1}
  .dupe-top{flex-direction:column}
  .rec.canon{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
td .tag{white-space:normal;line-height:1.3;text-align:left;margin:1px 0}
td.why-cell{min-width:200px}