:root {
  --bg-grad: linear-gradient(135deg,#0b1020 0%,#0f172a 55%,#111827 100%);
  --panel: rgba(17,24,39,.94);
  --ink: #e5e7eb;
  --heading: #cbd5e1;
  --heading-strong: #e2e8f0;
  --muted: #94a3b8;
  --placeholder: #64748b;
  --line: #263244;
  --border: #334155;
  --border-soft: #243044;
  --brand: #38bdf8;
  --brand-soft: #bae6fd;
  --accent-soft: #93c5fd;
  --good: #22c55e; --good-ink:#86efac; --good-border:#14532d;
  --warn: #f59e0b; --warn-ink:#fcd34d; --warn-border:#713f12;
  --bad: #ef4444; --bad-ink:#fca5a5; --bad-border:#7f1d1d;
  --info-ink: #bae6fd; --info-border:#0369a1;
  --input: #0b1020;
  --surface-1: #0b1020;
  --surface-2: #172033;
  --surface-3: #080d1a;
  --code-ink: #bae6fd;
  --mark-bg: #fde68a;
  --mark-ink: #111827;
  --btn-primary: linear-gradient(135deg,#0284c7,#2563eb);
  --btn-primary-border: #38bdf8;
  --btn-primary-ink: #ffffff;
  --table-head-bg: #162033;
  --shadow: 0 20px 50px rgba(0,0,0,.25);
}
:root[data-theme="light"] {
  --bg-grad: linear-gradient(135deg,#eef2f9 0%,#f8fafc 55%,#ffffff 100%);
  --panel: rgba(255,255,255,.92);
  --ink: #1e293b;
  --heading: #334155;
  --heading-strong: #0f172a;
  --muted: #64748b;
  --placeholder: #94a3b8;
  --line: #dbe3ef;
  --border: #cbd5e1;
  --border-soft: #e2e8f0;
  --brand: #0284c7;
  --brand-soft: #0369a1;
  --accent-soft: #2563eb;
  --good: #16a34a; --good-ink:#166534; --good-border:#bbf7d0;
  --warn: #d97706; --warn-ink:#92400e; --warn-border:#fde68a;
  --bad: #dc2626; --bad-ink:#991b1b; --bad-border:#fecaca;
  --info-ink: #0369a1; --info-border:#bae6fd;
  --input: #ffffff;
  --surface-1: #f1f5f9;
  --surface-2: #e2e8f0;
  --surface-3: #eef2f7;
  --code-ink: #0369a1;
  --mark-bg: #fde047;
  --mark-ink: #111827;
  --table-head-bg: #eef2f7;
  --shadow: 0 12px 30px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-grad: linear-gradient(135deg,#eef2f9 0%,#f8fafc 55%,#ffffff 100%);
    --panel: rgba(255,255,255,.92);
    --ink: #1e293b;
    --heading: #334155;
    --heading-strong: #0f172a;
    --muted: #64748b;
    --placeholder: #94a3b8;
    --line: #dbe3ef;
    --border: #cbd5e1;
    --border-soft: #e2e8f0;
    --brand: #0284c7;
    --brand-soft: #0369a1;
    --accent-soft: #2563eb;
    --good: #16a34a; --good-ink:#166534; --good-border:#bbf7d0;
    --warn: #d97706; --warn-ink:#92400e; --warn-border:#fde68a;
    --bad: #dc2626; --bad-ink:#991b1b; --bad-border:#fecaca;
    --info-ink: #0369a1; --info-border:#bae6fd;
    --input: #ffffff;
    --surface-1: #f1f5f9;
    --surface-2: #e2e8f0;
    --surface-3: #eef2f7;
    --code-ink: #0369a1;
    --mark-bg: #fde047;
    --mark-ink: #111827;
    --table-head-bg: #eef2f7;
    --shadow: 0 12px 30px rgba(15,23,42,.08);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:16px; }
body { margin:0; background:var(--bg-grad); color:var(--ink); font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.45; }
header { border-bottom:1px solid var(--line); background:var(--panel); backdrop-filter:blur(14px); }
.wrap { max-width:1180px; margin:0 auto; padding:22px; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { flex:0 0 58px; width:58px; height:58px; border-radius:14px; border:1px solid var(--border); background:linear-gradient(135deg,var(--surface-1),var(--surface-2)); display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.22); }
.logo svg { display:block; width:44px; height:44px; }
.logoSecondary { padding:7px; box-sizing:border-box; object-fit:contain; }
.brandText { min-width:0; }
.brandName { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
h1 { margin:0; font-size:clamp(34px,5vw,52px); letter-spacing:.02em; line-height:1; }
.tagline { color:var(--brand-soft); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.subtitle { margin-top:7px; max-width:880px; }
p { margin:0; color:var(--muted); }
main { max-width:1180px; margin:0 auto; padding:22px; display:grid; gap:16px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.grid.detectors { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.cardHead { padding:16px 18px; border-bottom:1px solid var(--line); }
.cardHead h2 { margin:0; font-size:20px; }
.cardHead p { margin-top:4px; font-size:14px; }
.cardBody { padding:18px; display:grid; gap:12px; }
label { display:block; font-size:12px; font-weight:800; color:var(--heading); margin:0 0 6px; }
textarea,input,select { width:100%; min-height:44px; background:var(--input); border:1px solid var(--border); color:var(--ink); border-radius:11px; padding:10px 11px; font:inherit; }
textarea { min-height:210px; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--placeholder); }
.toolbar,.split { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar { margin-top:14px; }
.jumpNav { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.jumpNav .jumpLabel { color:var(--heading); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; margin-right:4px; }
.jumpNav a { color:var(--ink); text-decoration:none; border:1px solid var(--border); background:var(--surface-1); border-radius:999px; padding:8px 11px; font-size:13px; font-weight:750; }
.jumpNav a:hover, .jumpNav a:focus { border-color:var(--brand); color:var(--brand-soft); outline:none; }
button { border:1px solid var(--border); background:var(--surface-2); color:var(--ink); padding:10px 13px; border-radius:11px; font-weight:700; cursor:pointer; min-height:42px; }
button:hover { border-color:var(--muted); transform:translateY(-1px); }
.primary { background:var(--btn-primary); border-color:var(--btn-primary-border); color:var(--btn-primary-ink); }
.ghost { background:transparent; }
.toolsMenu { position:relative; border:none; background:transparent; border-radius:0; overflow:visible; }
.toolsMenu summary { list-style:none; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--ink); padding:10px 13px; border-radius:11px; font-weight:700; min-height:42px; display:inline-flex; align-items:center; }
.toolsMenu summary::-webkit-details-marker { display:none; }
.toolsMenu summary:hover { border-color:var(--muted); }
.toolsMenu[open] summary { border-color:var(--brand); color:var(--brand-soft); }
.toolsMenuPanel { position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:260px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:grid; gap:4px; }
.toolsMenuPanel a { display:block; padding:9px 11px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:650; }
.toolsMenuPanel a:hover, .toolsMenuPanel a:focus { background:var(--surface-1); color:var(--brand-soft); outline:none; }
.detectBox { display:grid; gap:8px; background:var(--surface-1); border:1px solid var(--line); border-radius:13px; padding:12px; min-height:92px; }
.detectBox.good { border-left:5px solid var(--good); }
.detectBox.warn { border-left:5px solid var(--warn); }
.detectBox.bad { border-left:5px solid var(--bad); }
.detectBox.info { border-left:5px solid var(--brand); }
.propsBox { display:grid; gap:8px; background:var(--surface-1); border:1px solid var(--line); border-left:5px solid var(--accent-soft); border-radius:13px; padding:12px; }
.propsBox pre { margin:0; overflow:auto; background:var(--surface-3); border:1px solid var(--border); border-radius:10px; padding:10px; color:var(--code-ink); font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.detectTitle { font-weight:850; color:var(--heading-strong); }
.detectMeta { display:flex; gap:7px; flex-wrap:wrap; }
code { background:var(--surface-3); border:1px solid var(--border); border-radius:8px; padding:2px 6px; color:var(--code-ink); white-space:normal; overflow-wrap:anywhere; }
.detectNotes,.small { color:var(--muted); font-size:12px; }
.pill { display:inline-flex; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:850; border:1px solid var(--border); margin-left:6px; }
.pill.good { color:var(--good-ink); border-color:var(--good-border); }
.pill.warn { color:var(--warn-ink); border-color:var(--warn-border); }
.pill.bad { color:var(--bad-ink); border-color:var(--bad-border); }
.pill.info { color:var(--info-ink); border-color:var(--info-border); }
.list { display:grid; gap:8px; }
.item { border:1px solid var(--border-soft); background:var(--surface-1); border-radius:11px; padding:10px; }
.item strong { display:block; margin-bottom:4px; }
.columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.highlightBox { background:var(--surface-1); border:1px solid var(--line); border-radius:13px; padding:12px; min-height:60px; white-space:pre-wrap; word-break:break-word; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink); }
mark { background:var(--mark-bg); color:var(--mark-ink); border-radius:3px; padding:0 2px; }
details { border:1px solid var(--line); border-radius:13px; background:var(--surface-1); overflow:hidden; }
summary { cursor:pointer; padding:12px 14px; font-weight:800; color:var(--heading); }
.tableWrap { overflow:auto; border-top:1px solid var(--line); max-height:420px; }
table { width:100%; border-collapse:collapse; min-width:860px; }
th,td { border-bottom:1px solid var(--border-soft); padding:9px 10px; text-align:left; vertical-align:top; font-size:13px; }
th { position:sticky; top:0; background:var(--table-head-bg); color:var(--heading); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
@media(max-width:860px) {
  .wrap, main { padding:14px; }
  .brand { align-items:flex-start; }
  .logo { width:50px; height:50px; flex-basis:50px; border-radius:12px; }
  .logo svg { width:38px; height:38px; }
  .grid,.grid.detectors,.columns { grid-template-columns:1fr; }
  textarea { min-height:180px; }
  .jumpNav { padding:10px; gap:7px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .jumpNav .jumpLabel { flex:0 0 auto; }
  .jumpNav a { flex:0 0 auto; white-space:nowrap; padding:8px 10px; }
  .split button { flex:1 1 130px; }
  .detectMeta { display:grid; gap:6px; }
}