:root {
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", Menlo, monospace;

  --bar: #111315;
  --bar-text: #e8e9ea;
  --side: #2b2e31;
  --side-2: #383b3f;
  --side-3: #1f2124;
  --side-text: #cfd2d5;
  --side-dim: #999ea3;

  --bg: #ffffff;
  --bg-2: #f4f5f6;
  --line: #d8dbde;
  --text: #24282c;
  --dim: #626970;
  --blue: #5da9dd;
  --blue-text: #0f2a3d;
  --gray-head: #b4b9be;
  --gray-text: #24282c;
  --accent: #0b6db3;
  --hover: rgba(11, 109, 179, .28);

  --cmd: #0f5cab;      --cmd-bg: #dcebfb;
  --sub: #4b2fa3;      --sub-bg: #e9e4fa;
  --flag: #b4470a;     --flag-bg: #ffe9d6;
  --value: #866100;    --value-bg: #fdf3c9;
  --arg: #17702f;      --arg-bg: #dff5e3;
  --var: #7c21c0;      --var-bg: #f2e5fc;
  --subst: #0c6b85;    --subst-bg: #dcf2f8;
  --op: #b81a3e;       --op-bg: #fde3e8;
  --redir: #0a7468;    --redir-bg: #d3f4ee;
  --kw: #b0176e;       --kw-bg: #fbe2f0;
  --glob: #92620a;     --glob-bg: #fbeed0;
  --assign: #6029c2;   --assign-bg: #ece6fb;
  --string: #47505a;   --string-bg: #eceef0;
  --re: #04745a;       --re-bg: #d5f3e9;
  --comment: #6b7280;  --comment-bg: #f0f1f2;
  --unknown: #b42318;  --unknown-bg: #fdeaea;
  --group: #47505a;    --group-bg: #f4f5f6;
}

[data-theme="dark"] {
  --bg: #1d2023;
  --bg-2: #25282c;
  --line: #3b4045;
  --text: #dfe2e5;
  --dim: #a0a6ac;
  --blue: #2f6f9e;
  --blue-text: #f1f7fb;
  --gray-head: #3c4146;
  --gray-text: #e6e8ea;
  --accent: #6cb6ec;
  --hover: rgba(108, 182, 236, .32);

  --cmd: #7cbcf5;      --cmd-bg: #17324b;
  --sub: #b3a2f5;      --sub-bg: #2b2650;
  --flag: #f5a56b;     --flag-bg: #43291a;
  --value: #e5c55a;    --value-bg: #3a3214;
  --arg: #7dd892;      --arg-bg: #173520;
  --var: #d197f7;      --var-bg: #35214a;
  --subst: #6dcde6;    --subst-bg: #143440;
  --op: #f7869d;       --op-bg: #481d28;
  --redir: #5fd9c6;    --redir-bg: #123a35;
  --kw: #f38ac6;       --kw-bg: #451e36;
  --glob: #e6b95a;     --glob-bg: #3b2f14;
  --assign: #b79cf7;   --assign-bg: #2c2452;
  --string: #b7bec5;   --string-bg: #2c3035;
  --re: #62d9b4;       --re-bg: #133a2e;
  --comment: #8f969d;  --comment-bg: #2a2d31;
  --unknown: #f6908a;  --unknown-bg: #472020;
  --group: #b7bec5;    --group-bg: #25282c;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--font); color: var(--text); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2 { margin: 0; font-weight: 500; }
code, pre, textarea { font-family: var(--mono); }
.spacer { flex: 1; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: var(--bar); color: var(--bar-text); flex: none; }
.logo { width: 26px; height: 26px; border-radius: 3px; background: var(--blue); color: #fff; font: 700 13px/26px var(--mono); text-align: center; }
.topbar h1 { font-size: 16px; }
.tagline { color: #92989e; font-size: 13px; }
.topbtn { background: #2b2e31; border: 0; border-radius: 3px; padding: 4px 10px; color: #d6d8da; font-size: 13px; }
.topbtn:hover { background: #3a3e42; }
.iconbtn { background: none; border: 0; color: #cfd2d5; font-size: 16px; padding: 2px 6px; }

/* ---------- layout ---------- */
.layout { flex: 1; min-height: 0; display: flex; }
.sidebar { width: 290px; flex: none; background: var(--side); color: var(--side-text); overflow-y: auto; }
.sidebar.collapsed { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* ---------- sidebar ---------- */
.menu-title { padding: 10px 14px; background: var(--side-2); font-weight: 500; color: #fff; }
.acc-item { border-bottom: 1px solid #3a3d41; }
.acc-head { display: flex; justify-content: space-between; width: 100%; padding: 8px 14px; background: none; border: 0; color: var(--side-text); text-align: left; font-size: 14px; }
.acc-head:hover { background: var(--side-2); color: #fff; }
.chev { transition: transform .12s; font-size: 16px; line-height: 1; }
.acc-item.open .chev { transform: rotate(90deg); }
.acc-body { display: none; padding: 4px 0 10px; background: var(--side-3); }
.acc-item.open .acc-body { display: block; }
.acc-group { padding: 8px 14px 2px; color: var(--side-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.side-item { display: block; width: 100%; padding: 5px 14px; background: none; border: 0; color: var(--side-text); text-align: left; font-size: 13px; }
.side-item:hover { background: var(--side-2); color: #fff; }
.side-item code { display: block; font-size: 12px; color: #9fd0f5; overflow-wrap: anywhere; }
.side-item small { display: block; font-size: 12px; color: var(--side-dim); line-height: 1.3; }
.refsearch { display: block; width: calc(100% - 28px); margin: 6px 14px; padding: 5px 8px; border: 1px solid #4a4e53; border-radius: 3px; background: #15171a; color: #eee; font: 13px var(--font); }
.help { padding: 6px 14px 12px; font-size: 13px; line-height: 1.5; }
.help p { margin: 6px 0; }
.help ul { margin: 6px 0; padding-left: 18px; }
.help a { color: #9fd0f5; }

/* ---------- panels ---------- */
.panel { background: var(--bg); }
.command-panel { flex: none; }
.explain-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 12px; flex: none; }
.panel-head h2 { font-size: 15px; }
.panel-head.blue { background: var(--blue); color: var(--blue-text); }
.panel-head.gray { background: var(--gray-head); color: var(--gray-text); flex-wrap: wrap; }
.headbtn { background: rgba(255, 255, 255, .28); border: 0; border-radius: 3px; padding: 2px 10px; font-size: 13px; color: inherit; }
.headbtn:hover { background: rgba(255, 255, 255, .45); }
[data-theme="dark"] .headbtn { background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .headbtn:hover { background: rgba(255, 255, 255, .24); }

/* ---------- editor ---------- */
.editor-wrap { max-height: 38vh; overflow-y: auto; background: var(--bg); }
.editor { position: relative; min-height: 64px; }
.layer { display: block; margin: 0; padding: 16px 14px; border: 0; width: 100%; font: 16px/1.7 var(--mono); letter-spacing: 0; tab-size: 8; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
pre.hl { position: relative; color: var(--text); min-height: 64px; }
pre.errs { position: absolute; inset: 0; color: transparent; pointer-events: none; }
pre.errs mark { background: none; color: transparent; text-decoration: underline wavy #e11d48 1.5px; text-underline-offset: 3px; }
textarea.layer { position: absolute; inset: 0; height: 100%; background: transparent; color: transparent; caret-color: var(--text); resize: none; outline: none; overflow: hidden; }
textarea.layer::placeholder { color: var(--dim); }
textarea.layer::selection { background: rgba(93, 169, 221, .4); color: transparent; }
.editor:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

.t { border-radius: 3px; }
.t-cmd { color: var(--cmd); font-weight: 700; }
.t-sub { color: var(--sub); font-weight: 700; }
.t-flag { color: var(--flag); }
.t-value { color: var(--value); }
.t-arg { color: var(--arg); }
.t-var { color: var(--var); background: var(--var-bg); }
.t-subst { background: var(--subst-bg); }
.t-op { color: var(--op); background: var(--op-bg); font-weight: 700; }
.t-redir { color: var(--redir); background: var(--redir-bg); }
.t-kw { color: var(--kw); font-weight: 700; }
.t-glob { color: var(--glob); background: var(--glob-bg); font-weight: 700; }
.t-assign { color: var(--assign); }
.t-string { color: var(--string); }
.t-re { color: var(--re); background: var(--re-bg); }
.t-relit { color: var(--arg); }
.t-comment { color: var(--comment); font-style: italic; }
.t-unknown, .t-unknownflag { color: var(--unknown); text-decoration: underline dotted 1.5px; text-underline-offset: 3px; }
.t.active { background: var(--hover); box-shadow: 0 0 0 1px var(--accent); }

.statusbar { display: flex; align-items: center; min-height: 26px; padding: 3px 14px; background: var(--bg-2); border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.status b { color: var(--text); font-weight: 500; }
.status .warn { color: var(--unknown); }
.errors { margin: 0; padding: 4px 14px 6px; list-style: none; background: var(--unknown-bg); color: var(--unknown); font-size: 13px; }
.errors button { background: none; border: 0; padding: 1px 0; color: inherit; text-align: left; text-decoration: underline dotted; }

/* ---------- breakdown ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.legend span { padding: 0 6px; border-radius: 3px; }
.explain { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 40px; }
.empty { color: var(--dim); padding: 8px 2px; }
.section-title { margin: 16px 0 8px; font-size: 13px; font-weight: 500; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.section-title:first-child { margin-top: 0; }

.steps { margin: 0 0 6px; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 3px 0 3px 26px; counter-increment: step; cursor: default; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); color: var(--dim); font-size: 11px; line-height: 16px; text-align: center; }
.steps code { color: var(--cmd); font-weight: 700; font-size: 13px; }
.steps .conn { color: var(--op); font-weight: 500; }
.steps .unk { color: var(--unknown); }
.steps .extra { color: var(--dim); }

.card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg); margin: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 10px; background: var(--cmd-bg); border-left: 4px solid var(--cmd); }
.card-head.unknown { background: var(--unknown-bg); border-left-color: var(--unknown); }
.card-head.group { background: var(--kw-bg); border-left-color: var(--kw); }
.card-head.note { background: var(--assign-bg); border-left-color: var(--assign); }
.card-head code { font-size: 14px; font-weight: 700; color: var(--cmd); }
.card-head.unknown code { color: var(--unknown); }
.card-head.group .title { font-weight: 500; color: var(--kw); }
.card-head.note .title { font-weight: 500; color: var(--assign); }
.card-head .desc { flex: 1 1 260px; min-width: 0; }
.badge { font-size: 11px; color: var(--dim); white-space: nowrap; }
.card-head a { font-size: 12px; white-space: nowrap; }
.card-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.card-body:empty { display: none; }

.row { border-left: 3px solid var(--line); border-radius: 2px; padding: 3px 8px; background: var(--bg-2); }
.row-main { display: flex; gap: 10px; align-items: baseline; }
.tok { flex: none; max-width: 42%; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.row-desc { flex: 1; min-width: 0; font-size: 13.5px; }
.row-desc b { font-weight: 500; }
.row-kids { margin: 4px 0 2px 8px; display: flex; flex-direction: column; gap: 3px; }
.row.active { box-shadow: 0 0 0 2px var(--accent); }
.row.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

.r-cmd { background: var(--cmd-bg); border-color: var(--cmd); } .r-cmd .tok { color: var(--cmd); }
.r-sub { background: var(--sub-bg); border-color: var(--sub); } .r-sub .tok { color: var(--sub); }
.r-flag { background: var(--flag-bg); border-color: var(--flag); } .r-flag .tok { color: var(--flag); }
.r-value { background: var(--value-bg); border-color: var(--value); } .r-value .tok { color: var(--value); }
.r-arg { background: var(--arg-bg); border-color: var(--arg); } .r-arg .tok { color: var(--arg); }
.r-var { background: var(--var-bg); border-color: var(--var); } .r-var .tok { color: var(--var); }
.r-subst { background: var(--subst-bg); border-color: var(--subst); } .r-subst .tok { color: var(--subst); }
.r-op { background: var(--op-bg); border-color: var(--op); } .r-op .tok { color: var(--op); }
.r-redir { background: var(--redir-bg); border-color: var(--redir); } .r-redir .tok { color: var(--redir); }
.r-kw { background: var(--kw-bg); border-color: var(--kw); } .r-kw .tok { color: var(--kw); }
.r-glob { background: var(--glob-bg); border-color: var(--glob); } .r-glob .tok { color: var(--glob); }
.r-assign { background: var(--assign-bg); border-color: var(--assign); } .r-assign .tok { color: var(--assign); }
.r-string { background: var(--string-bg); border-color: var(--string); } .r-string .tok { color: var(--string); }
.r-re, .r-relit { background: var(--re-bg); border-color: var(--re); } .r-re .tok, .r-relit .tok { color: var(--re); }
.r-comment { background: var(--comment-bg); border-color: var(--comment); } .r-comment .tok { color: var(--comment); font-style: italic; font-weight: 400; }
.r-unknown, .r-unknownflag { background: var(--unknown-bg); border-color: var(--unknown); } .r-unknown .tok, .r-unknownflag .tok { color: var(--unknown); }

.nested-blocks { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.blocks { display: flex; flex-direction: column; gap: 0; }
.link { display: flex; gap: 10px; align-items: baseline; margin: 0 0 0 18px; padding: 5px 0 5px 14px; border-left: 2px solid var(--line); font-size: 13px; border-radius: 0; }
.link code { color: var(--op); background: var(--op-bg); border-radius: 3px; padding: 0 6px; font-weight: 700; }
.link.active code { box-shadow: 0 0 0 2px var(--accent); }
.link .row-desc { color: var(--dim); }
.section { margin-bottom: 4px; }
.section .sect-body { margin: 4px 0 2px 14px; }

details.allopts { margin: 2px 2px 2px; font-size: 13px; }
details.allopts summary { cursor: pointer; color: var(--dim); padding: 2px 4px; }
details.allopts table { width: 100%; border-collapse: collapse; margin-top: 4px; }
details.allopts td { padding: 2px 8px 2px 4px; border-top: 1px solid var(--line); vertical-align: baseline; }
details.allopts td:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--flag); width: 34%; overflow-wrap: anywhere; }
details.allopts td.subn { color: var(--sub); }

/* ---------- tooltip ---------- */
.tooltip { position: fixed; z-index: 50; max-width: 400px; padding: 7px 10px; border-radius: 4px; background: #101214; color: #f0f1f2; font-size: 13px; line-height: 1.4; box-shadow: 0 3px 12px rgba(0, 0, 0, .35); pointer-events: none; }
.tooltip .tt-label { font-weight: 500; color: #9fd0f5; }
.tooltip .tt-path { margin-top: 3px; font-size: 12px; color: #9aa0a6; }

@media (max-width: 820px) {
  .sidebar { position: absolute; top: 44px; bottom: 0; left: 0; z-index: 20; }
  .tagline, .legend { display: none; }
  .layer { font-size: 15px; }
}