:root {
  color-scheme: light dark;

  /* Light */
  --bg-light:#f6f8fb; --panel-light:#ffffff; --text-light:#0f172a; --muted-light:#64748b;
  --line-light:#e6eaf0; --line-strong-light:#d7dee7; --accent-light:#2563eb;
  --pill-bg-light:#eef2f7; --tooltip-bg-light:#111827; --tooltip-fg-light:#ffffff;

  /* Dark */
  --bg-dark:#0b1020; --panel-dark:#0f172a; --text-dark:#e5e7eb; --muted-dark:#9aa4b2;
  --line-dark:#1f2937; --line-strong-dark:#334155; --accent-dark:#60a5fa;
  --pill-bg-dark:#111827; --tooltip-bg-dark:#111827; --tooltip-fg-dark:#ffffff;
}

/* Thème courant via data-theme */
html[data-theme="light"]{
  --bg:var(--bg-light); --panel:var(--panel-light); --text:var(--text-light); --muted:var(--muted-light);
  --line:var(--line-light); --line-strong:var(--line-strong-light); --accent:var(--accent-light);
  --pill-bg:var(--pill-bg-light); --pill-border:var(--line-strong-light);
  --tooltip-bg:var(--tooltip-bg-light); --tooltip-fg:var(--tooltip-fg-light);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);
  --thead-from:#f7fafc; --thead-to:#eef2f7;
  --row-alt:#fbfdff; --row-hover:#f4f7fc; --btn-bg:#ffffff; --btn-hover:#f1f5f9; --badge-bg:#ffffff;
}
html[data-theme="dark"]{
  --bg:var(--bg-dark); --panel:var(--panel-dark); --text:var(--text-dark); --muted:var(--muted-dark);
  --line:var(--line-dark); --line-strong:var(--line-strong-dark); --accent:var(--accent-dark);
  --pill-bg:var(--pill-bg-dark); --pill-border:var(--line-strong-dark);
  --tooltip-bg:var(--tooltip-bg-dark); --tooltip-fg:var(--tooltip-fg-dark);
  --shadow:0 1px 2px rgba(0,0,0,.25),0 6px 20px rgba(0,0,0,.35);
  --thead-from:#0f172a; --thead-to:#111827;
  --row-alt:#0d1426; --row-hover:#121b31; --btn-bg:#121a2e; --btn-hover:#17223d; --badge-bg:#0f172a;
}

/* Base */
body {
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--text);
}
.wrap { max-width:1100px; margin:0 auto; padding:28px 16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }

/* Header */
.hdr { margin-bottom:16px; }
.title { font-weight:800; font-size:28px; margin:0; display:flex; align-items:center; gap:10px; }
.muted { color:var(--muted); }
.controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.btn {
  border:1px solid var(--line-strong); border-radius:10px; padding:8px 12px;
  background:var(--btn-bg); color:var(--text); cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.btn:hover { background:var(--btn-hover); }
.btn:active { transform:translateY(1px); }
.small { font-size:12px; }
.error { color:#ef4444; }

/* Table */
.table-wrap { overflow:auto; border-radius:14px; }
.tbl { width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(var(--thead-from), var(--thead-to));
  border-bottom:1px solid var(--line-strong);
  padding:12px 14px; text-align:left; white-space:nowrap;
  cursor:pointer; user-select:none;
}
tbody td{
  padding:12px 14px; border-bottom:1px solid var(--line);
  background:var(--panel); vertical-align:middle; white-space:nowrap;
}
tbody tr:nth-child(2n) td { background:var(--row-alt); }
tbody tr:hover td { background:var(--row-hover); }

.right { text-align:right; }

.sortable { display:inline-flex; align-items:center; gap:6px; }
.sort-icon { opacity:.35; font-size:12px; transition:opacity .15s ease, transform .15s ease; }
th.active .sort-icon { opacity:1; color:var(--accent); }
th.active.asc .sort-icon { transform:rotate(180deg); }

.filename { color:var(--accent); text-decoration:none; font-weight:600; }
.filename:hover { text-decoration:underline; }

/* Hashes */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:999px;
  border:1px solid var(--pill-border); background:var(--pill-bg);
  cursor:pointer; user-select:none; transition:background .15s ease;
}
.pill:hover { background: color-mix(in oklab, var(--pill-bg), #ffffff 6%); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }

/* Footer */
.ftr { margin-top:18px; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.link { color:var(--accent); text-decoration:none; }
.link:hover { text-decoration:underline; }

/* Tooltip copie */
.tooltip{
  position:fixed; z-index:50; padding:6px 10px; border-radius:8px;
  background:var(--tooltip-bg); color:var(--tooltip-fg); font-size:12px;
  transform:translate(-50%,-120%); pointer-events:none;
  opacity:0; transition:opacity .12s ease;
}
.tooltip.show { opacity:1; }

/* Fallback pref-système si pas de localStorage */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){ color-scheme: dark; }
}