/* =============================================================
   吴师兄 · 算法可视化设计系统 (Web 版)
   源自 algo-video-skill 的「深空蓝 + 橙」视觉规范，
   从录屏线性播放改造为网页可交互。全站统一用这一套。
   ============================================================= */
:root{
  --bg:#ffffff;        /* 明亮白底 */
  --bg2:#f1f4f9;       /* 浅灰(代码/轨道) */
  --card:#ffffff;      /* 卡片 */
  --card-top:#f7f9fc;  /* 卡片层顶 */
  --line:#e4e8f0;      /* 描边线 */
  --ink:#1b2230;       /* 主文字 */
  --soft:#5a6678;      /* 软文字 */
  --soft2:#9aa6b6;
  --orange:#F97316;    /* 主橙·强调  <span class=em> */
  --orange-d:#EA6A1F;
  --green:#16A34A;     /* 成功绿  <span class=ok> */
  --red:#EF4444;       /* 危险红  <span class=bad> */
  --blue:#2563EB;      /* 指针蓝 */
  --purple:#7C3AED;
  --shadow:0 8px 26px rgba(27,34,48,.08);
  --shadow-sm:0 2px 8px rgba(27,34,48,.06);
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,-apple-system,system-ui,sans-serif;
  --r:14px;
}
/* 深色主题：覆盖设计系统变量（橙/绿/红/蓝在深色上仍可用，不改） */
html[data-theme="dark"]{
  --bg:#0e1622; --bg2:#172234; --card:#151f2e; --card-top:#1b2738; --line:#27344a;
  --ink:#e7eef7; --soft:#9fb0c5; --soft2:#6b7c93;
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 2px 10px rgba(0,0,0,.35);
}
html[data-theme="dark"] .nav{background:rgba(14,22,34,.82)}
html[data-theme="dark"] body.bg-grid{background-image:
  radial-gradient(circle at 18% -10%, rgba(249,115,22,.10), transparent 38%),
  radial-gradient(circle at 92% -5%, rgba(37,99,235,.10), transparent 42%)}
html[data-theme="dark"] .btn.pri,html[data-theme="dark"] .brand .logo{color:#1a1206}
html{transition:background-color .2s,color .2s}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.75;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
body.bg-grid{
  background-image:
    radial-gradient(circle at 18% -10%, rgba(249,115,22,.05), transparent 38%),
    radial-gradient(circle at 92% -5%, rgba(37,99,235,.05), transparent 42%);
  background-attachment:fixed;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--orange)}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.em{color:var(--orange);font-weight:700}
.ok{color:var(--green);font-weight:700}
.bad{color:var(--red);font-weight:700}
.ptr{color:var(--blue);font-weight:700}
.mono{font-family:var(--mono)}

/* ---------- 站点顶栏 ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:60px;max-width:1320px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink);flex:0 0 auto}
.brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--orange),var(--orange-d));display:grid;place-items:center;color:#1a1206;font-weight:900;font-size:15px}
.brand small{color:var(--soft);font-weight:500;font-size:13px}
.nav .links{display:flex;gap:3px;margin-left:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav .links a{color:var(--soft);font-weight:600;font-size:14px;padding:6px 10px;border-radius:9px;white-space:nowrap}
.nav .links a:hover,.nav .links a.on{color:var(--ink);background:var(--card)}
.nav .right{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;border-radius:10px;padding:9px 18px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:.15s}
.btn:hover{border-color:var(--orange);color:var(--ink)}
.btn.pri{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#1a1206;border:0}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:13px}

/* ---------- 徽章 ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--soft);background:var(--card-top)}
.tag.easy{color:var(--green);border-color:rgba(22,163,74,.4)}
.tag.mid{color:var(--orange);border-color:rgba(249,115,22,.4)}
.tag.hard{color:var(--red);border-color:rgba(239,68,68,.4)}
.tag.free{color:var(--green);border-color:rgba(22,163,74,.4)}
.tag.vip{color:#1a1206;background:linear-gradient(135deg,var(--orange),var(--orange-d));border:0}

/* =============================================================
   可视化播放器 (.av-*)
   ============================================================= */
.av{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.av-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card-top);border-bottom:1px solid var(--line)}
.av-head .ptag{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--orange);border:1px solid rgba(249,115,22,.4);border-radius:7px;padding:2px 9px}
.av-head .ttl{font-weight:700;font-size:15px}
.av-head .wm{margin-left:auto;font-size:12px;color:var(--soft2);font-weight:600}
.av-head .wm b{color:var(--orange)}

/* 舞台 — 固定大小, 切换/播放时不变, 按钮位置恒定; 内容自动缩放到刚好放下, 不滚动 */
.av-stage{position:relative;height:440px;padding:44px 24px 24px;display:flex;flex-direction:column;overflow:hidden;
  background:
    linear-gradient(rgba(27,34,48,.04) 1px,transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg,rgba(27,34,48,.04) 1px,transparent 1px) 0 0/40px 100%,
    var(--bg);
}
.stage-body{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.av-stage .step-title{position:absolute;top:14px;left:24px;font-weight:800;font-size:16px;color:var(--ink)}
.av-stage .step-state{position:absolute;top:14px;right:24px;font-family:var(--mono);font-size:13px;color:var(--orange);font-weight:700}
.av-fade{animation:avfade .4s ease}
@keyframes avfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 讲解条 — 固定高度, 防止文案长短不一把控制栏顶上顶下 */
.av-caption{padding:16px 22px;background:var(--card-top);border-top:1px solid var(--line);font-size:15.5px;color:var(--ink);height:96px;overflow:auto;line-height:1.7}
.av-caption .lead{display:inline-block;font-size:12px;font-weight:800;color:var(--orange);margin-right:8px;letter-spacing:.04em}

/* 控制条 */
.av-ctl{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);background:var(--card)}
.av-ctl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card-top);color:var(--ink);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.12s}
.av-ctl button:hover{border-color:var(--orange);color:var(--orange)}
.av-ctl button:disabled{opacity:.35;cursor:not-allowed}
.av-ctl button.play{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#1a1206;border:0}
.av-ctl .prog{flex:1;height:7px;background:var(--bg2);border-radius:999px;overflow:hidden;cursor:pointer}
.av-ctl .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-d));transition:width .3s}
.av-ctl .count{font-family:var(--mono);font-size:13px;color:var(--soft);min-width:64px;text-align:right}
.av-dots{display:flex;gap:5px;padding:0 18px 12px}
.av-dots i{flex:1;height:4px;border-radius:2px;background:var(--line);cursor:pointer;transition:.15s}
.av-dots i.done{background:var(--orange-d)}
.av-dots i.on{background:var(--orange)}

/* ---------- 模板: ICON_QUOTE ---------- */
.tpl-quote{text-align:center;max-width:640px}
.tpl-quote .ic{font-size:54px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.tpl-quote .body{font-size:26px;font-weight:800;line-height:1.5;margin:14px 0 6px}
.tpl-quote .sub{font-family:var(--mono);font-size:13px;color:var(--soft2);letter-spacing:.12em}

/* ---------- 模板: TITLE / PROBLEM ---------- */
.tpl-title{text-align:center}
.tpl-title .t-tag{font-family:var(--mono);color:var(--orange);font-size:13px;font-weight:700;letter-spacing:.15em}
.tpl-title .t-main{font-size:40px;font-weight:900;margin:10px 0 4px}
.tpl-title .t-sub{font-family:var(--mono);color:var(--soft);letter-spacing:.18em;font-size:14px}
.tpl-prob{max-width:680px;width:100%}
.tpl-prob .label{font-size:12px;font-weight:800;color:var(--orange);letter-spacing:.05em}
.tpl-prob .text{font-size:18px;margin:8px 0 16px;line-height:1.7}
.tpl-prob .ex{background:var(--card-top);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-family:var(--mono);font-size:14px}
.tpl-prob .ex .k{color:var(--soft)}
.tpl-prob .ex .v{color:var(--ink)}

/* ---------- 模板: ARRAY / TWOSUM ---------- */
.tpl-array{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.av-result{font-family:var(--mono);font-weight:800;color:var(--green);font-size:15px;border:1px solid rgba(22,163,74,.4);border-radius:8px;padding:5px 14px;background:rgba(22,163,74,.08)}
.arr-zone{display:flex;gap:46px;align-items:flex-start;flex-wrap:nowrap;justify-content:center}
.arr-box{position:relative;padding-top:46px}
.cells{display:flex;gap:10px}
.cell{width:60px;height:60px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-size:22px;font-weight:700;
  background:var(--card-top);border:2px solid var(--line);color:var(--ink);transition:.35s ease;position:relative}
.cell .idx{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--soft2);font-family:var(--mono);font-weight:600}
.cell.visited{border-color:rgba(37,99,235,.55);color:var(--blue);background:rgba(37,99,235,.08)}
.cell.cur{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.18);color:var(--orange)}
.cell.match{border-color:var(--green);background:rgba(22,163,74,.14);color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.cell.dim{opacity:.45}
.cell.l{border-color:var(--purple);color:var(--purple)}
.cell.r{border-color:var(--blue);color:var(--blue)}
/* 指针 */
.ptr-tag{position:absolute;top:6px;height:30px;display:flex;flex-direction:column;align-items:center;transition:transform .4s cubic-bezier(.5,1.4,.5,1);pointer-events:none}
.ptr-tag b{font-family:var(--mono);font-size:13px;font-weight:800;line-height:1}
.ptr-tag.i b{color:var(--orange)} .ptr-tag.i:after{border-top-color:var(--orange)}
.ptr-tag.l b{color:var(--purple)} .ptr-tag.l:after{border-top-color:var(--purple)}
.ptr-tag.r b{color:var(--blue)} .ptr-tag.r:after{border-top-color:var(--blue)}
.ptr-tag:after{content:"";margin-top:3px;border:6px solid transparent;border-top:8px solid var(--orange)}
/* 公式 */
.formula{font-family:var(--mono);font-size:17px;background:var(--card-top);border:1px solid var(--line);border-radius:10px;padding:10px 18px}
/* hash 面板 */
.hash{min-width:150px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card-top)}
.hash .h-h{font-size:12px;font-weight:800;color:var(--orange);padding:7px 12px;border-bottom:1px solid var(--line);letter-spacing:.05em}
.hash .h-row{display:flex;justify-content:space-between;gap:18px;padding:7px 13px;font-family:var(--mono);font-size:14px;border-bottom:1px dashed var(--line)}
.hash .h-row:last-child{border-bottom:0}
.hash .h-row .hk{color:var(--ink)} .hash .h-row .hv{color:var(--soft)}
.hash .h-row.added{background:rgba(249,115,22,.14);animation:pulseO .8s ease}
.hash .h-row.added .hk{color:var(--orange)}
.hash .h-row.hit{background:rgba(22,163,74,.16);animation:pulseG .8s ease}
.hash .h-row.hit .hk{color:var(--green)}
.hash .h-empty{padding:14px;color:var(--soft2);font-size:13px;text-align:center}
@keyframes pulseO{0%{box-shadow:inset 0 0 0 2px var(--orange)}100%{box-shadow:none}}
@keyframes pulseG{0%{box-shadow:inset 0 0 0 2px var(--green)}100%{box-shadow:none}}

/* ---------- 模板: BARS (柱状图 + 栈 + 水) ---------- */
.tpl-bars{width:100%;display:flex;gap:30px;align-items:flex-end;justify-content:center}
.bars-zone{position:relative;display:flex;gap:8px;align-items:flex-end;padding-top:44px;border-bottom:2px solid var(--line)}
.bar{width:42px;position:relative;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#c4cfe2,#aab8d2);transition:.35s;display:flex;align-items:flex-start;justify-content:center}
.bar .bv{position:absolute;top:-22px;font-family:var(--mono);font-size:13px;color:var(--soft);font-weight:700}
.bar .bi{position:absolute;bottom:-24px;font-family:var(--mono);font-size:12px;color:var(--soft2)}
.bar.cur{background:linear-gradient(180deg,var(--orange),var(--orange-d))}
.bar.instk{background:linear-gradient(180deg,#7ba0e6,#5d86dd)}
.col .water{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(37,99,235,.42),rgba(37,99,235,.42) 6px,rgba(37,99,235,.24) 6px,rgba(37,99,235,.24) 12px);border-top:2px solid var(--blue);transition:.35s;border-radius:3px 3px 0 0}
.bars-ptr{position:absolute;top:8px;transition:transform .4s cubic-bezier(.5,1.4,.5,1);font-family:var(--mono);font-weight:800;color:var(--orange);font-size:13px}
.stack-panel{min-width:120px;border:1px solid var(--line);border-radius:11px;background:var(--card-top);align-self:stretch}
.stack-panel .s-h{font-size:12px;font-weight:800;color:var(--blue);padding:7px 12px;border-bottom:1px solid var(--line)}
.stack-panel .s-item{padding:8px 13px;font-family:var(--mono);font-size:14px;border-bottom:1px dashed var(--line);color:var(--ink);animation:avfade .3s ease}
.stack-panel .s-empty{padding:14px;color:var(--soft2);font-size:13px;text-align:center}

/* ---------- 模板: CODE ---------- */
.tpl-code{width:100%;max-width:720px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:var(--mono)}
.tpl-code .c-h{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--card-top);border-bottom:1px solid var(--line);font-size:13px;color:var(--soft);font-weight:700}
.tpl-code .c-h .dot{width:11px;height:11px;border-radius:50%}
.tpl-code .lines{padding:12px 0;font-size:13.5px;line-height:1.85;overflow:auto;max-height:300px}
.tpl-code .ln{display:flex;padding:0 16px;white-space:pre;transition:.2s}
.tpl-code .ln .no{color:var(--soft2);width:30px;flex:0 0 30px;text-align:right;margin-right:16px;user-select:none}
.tpl-code .ln.hl{background:rgba(249,115,22,.13);box-shadow:inset 3px 0 0 var(--orange)}
.tpl-code .ln.hl .no{color:var(--orange)}
.tpl-code{color:var(--ink)}
.tpl-code .cmt{color:#6e7781} .tpl-code .kw{color:#cf222e} .tpl-code .fn{color:#8250df} .tpl-code .str{color:#0a7d33} .tpl-code .num{color:#0550ae}

/* ---------- 模板: COMPLEXITY ---------- */
.tpl-cx{display:flex;gap:20px;flex-wrap:nowrap;justify-content:center}
.cx-block{background:var(--card-top);border:1px solid var(--line);border-radius:12px;padding:18px 24px;min-width:220px}
.cx-block .l{font-size:12px;color:var(--soft);font-weight:700;letter-spacing:.05em}
.cx-block .v{font-family:var(--mono);font-size:34px;font-weight:800;color:var(--orange);margin:4px 0}
.cx-block .d{font-size:13px;color:var(--soft)}

.av-ctl .speed{width:auto;padding:0 12px;font-family:var(--mono);font-size:13px;font-weight:700}

/* ---------- 模板: LINKED_LIST ---------- */
.tpl-list{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.list-line{display:flex;flex-direction:column;align-items:center;gap:3px}
.list-label{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--soft);align-self:flex-start;margin-left:6px}
.ltail-cyc{font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--orange);border:1.5px dashed var(--orange);border-radius:8px;padding:6px 10px;align-self:center;background:rgba(249,115,22,.06)}
.list-row{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;justify-content:center}
.lnode-wrap{position:relative;padding-top:30px}
.lptrs{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;gap:4px;height:26px}
.lptr{font-family:var(--mono);font-size:12px;font-weight:800}
.lptr.prev{color:var(--purple)} .lptr.cur{color:var(--orange)} .lptr.nxt,.lptr.next{color:var(--blue)}
.lnode{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:22px;font-weight:700;background:var(--card-top);border:2px solid var(--line);transition:.35s}
.lnode.done{border-color:var(--green);color:var(--green);background:rgba(22,163,74,.1)}
.lnode.removed{opacity:.32;border-style:dashed;border-color:var(--soft2);color:var(--soft2);background:transparent;text-decoration:line-through;transform:scale(.82)}
.larrow{font-size:24px;color:var(--soft);transition:.3s;font-weight:700}
.larrow.rev{color:var(--orange)} .larrow.none{color:var(--soft2)}
.lnull{font-family:var(--mono);font-size:13px;color:var(--soft2);border:1px dashed var(--line);border-radius:8px;padding:6px 10px;align-self:center}

/* ---------- 模板: TREE ---------- */
.tpl-tree{width:100%;display:flex;gap:24px;align-items:flex-start;justify-content:center}
.tree-board{flex:1;max-width:540px}
.tnode circle{fill:var(--card-top);stroke:var(--line);stroke-width:2;transition:.3s}
.tnode text{fill:var(--ink);font-family:var(--mono);font-size:15px;font-weight:700}
.tnode.visiting circle{fill:rgba(249,115,22,.18);stroke:var(--orange);stroke-width:3}
.tnode.visiting text{fill:var(--orange)}
.tnode.visited circle{fill:rgba(37,99,235,.14);stroke:var(--blue)}
.tnode.visited text{fill:var(--blue)}
.tnode.done circle{fill:rgba(22,163,74,.14);stroke:var(--green)}
.tnode.done text{fill:var(--green)}
.tree-panel{min-width:120px;border:1px solid var(--line);border-radius:11px;background:var(--card-top);align-self:center}
.tree-panel .s-h{font-size:12px;font-weight:800;color:var(--blue);padding:7px 12px;border-bottom:1px solid var(--line)}
.tree-panel .s-item{padding:7px 13px;font-family:var(--mono);font-size:14px;border-bottom:1px dashed var(--line);animation:avfade .3s ease}
.tree-panel .s-empty{padding:14px;color:var(--soft2);font-size:13px;text-align:center}

/* ---------- 模板: DP_TABLE ---------- */
.tpl-dp{display:flex;flex-direction:column;align-items:center}
.dp-tbl{display:inline-block;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dp-row{display:flex}
.dp-cell{width:54px;height:48px;display:grid;place-items:center;font-family:var(--mono);font-size:17px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);transition:.3s}
.dp-cell.hdr{background:var(--card-top);color:var(--soft);font-size:14px;font-weight:700}
.dp-cell.corner{background:var(--card)}
.dp-cell.cur{background:rgba(249,115,22,.2);color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange)}
.dp-cell.dep{background:rgba(37,99,235,.16);color:var(--blue)}
.dp-cell.done{color:var(--ink)}

/* ARRAY 扩展: mid 指针 + 窗口高亮 */
.cell.midc{border-color:#0d9488;color:#0d9488;box-shadow:0 0 0 3px rgba(13,148,136,.16)}
.cell.inwin{background:rgba(249,115,22,.10)}
.ptr-tag.m b{color:#0d9488} .ptr-tag.m:after{border-top-color:#0d9488}

/* ---------- 模板: STACK (括号匹配等) ---------- */
.tpl-stack{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%}
.stk-stream{display:flex;gap:8px;flex-wrap:nowrap}
.stk-ch{width:46px;height:46px;border-radius:10px;border:2px solid var(--line);background:var(--card-top);display:grid;place-items:center;font-family:var(--mono);font-size:22px;font-weight:700;transition:.25s}
.stk-ch.done{opacity:.4}
.stk-ch.cur{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.16)}
.stk-main{display:flex;gap:30px;align-items:flex-end;min-height:160px}
.stk-col{display:flex;flex-direction:column;gap:0;min-width:96px;border:2px solid var(--line);border-radius:10px;padding:8px;background:var(--card-top)}
.stk-cap{font-size:12px;font-weight:700;color:var(--soft);text-align:center;margin-bottom:8px}
.stk-items{display:flex;flex-direction:column-reverse;gap:6px;min-height:48px}
.stk-item{width:64px;height:40px;border-radius:8px;background:#dbe6fb;border:2px solid var(--blue);color:var(--blue);display:grid;place-items:center;font-family:var(--mono);font-size:20px;font-weight:700;animation:avfade .25s ease}
.stk-item.top{background:rgba(249,115,22,.16);border-color:var(--orange);color:var(--orange-d)}
.stk-empty{color:var(--soft2);font-size:13px;padding:14px;text-align:center}
.stk-badge{font-weight:800;font-size:15px;padding:8px 16px;border-radius:10px;border:2px solid var(--line);background:var(--card-top)}
.stk-badge.ok{color:var(--green);border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.08)}
.stk-badge.bad{color:var(--red);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)}

/* ---------- 模板: GRID (岛屿/矩阵) ---------- */
.tpl-grid{display:flex;gap:26px;align-items:center;justify-content:center}
.grid-board{display:inline-flex;flex-direction:column;gap:5px}
.grid-row{display:flex;gap:5px}
.grid-cell{width:46px;height:46px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:16px;font-weight:700;transition:.3s;border:2px solid transparent}
.grid-cell.water{background:#eaf1fb;color:#9bb4d8}
.grid-cell.land{background:#cfe8d6;color:#1a7f44}
.grid-cell.cur{background:var(--orange);color:#fff;border-color:var(--orange-d);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.grid-cell.visiting{background:#ffd9a8;color:var(--orange-d);border-color:var(--orange)}
.grid-cell.visited{background:#c7d2e8;color:#5a6fa0}
.grid-cell.sunk{background:#dbe2ee;color:#aab4c6}
.grid-panel{min-width:120px;border:1px solid var(--line);border-radius:11px;background:var(--card-top);overflow:hidden}
.grid-count{padding:10px 14px;font-size:14px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.grid-count b{color:var(--orange);font-size:18px;font-family:var(--mono)}
.grid-panel .s-h{font-size:12px;font-weight:800;color:var(--blue);padding:7px 12px;border-bottom:1px solid var(--line)}
.grid-panel .s-item{padding:6px 13px;font-family:var(--mono);font-size:13px;border-bottom:1px dashed var(--line);animation:avfade .3s ease}
.grid-panel .s-empty{padding:12px;color:var(--soft2);font-size:13px;text-align:center}

/* ---------- 模板: BACKTRACK (回溯/排列/组合) ---------- */
.tpl-bt{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:560px}
.bt-lab{font-size:12px;font-weight:800;color:var(--soft);align-self:flex-start;margin-top:6px}
.bt-choices{display:flex;gap:10px}
.bt-choice{width:48px;height:48px;border-radius:10px;border:2px solid var(--line);background:var(--card-top);display:grid;place-items:center;font-family:var(--mono);font-size:20px;font-weight:700;transition:.25s}
.bt-choice.used{opacity:.35;background:var(--bg2)}
.bt-choice.pick{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.bt-path{display:flex;align-items:center;gap:6px;min-height:42px;flex-wrap:wrap}
.bt-node{width:40px;height:40px;border-radius:9px;background:rgba(249,115,22,.14);border:2px solid var(--orange);color:var(--orange-d);display:grid;place-items:center;font-family:var(--mono);font-weight:700;animation:avfade .25s ease}
.bt-arrow{color:var(--soft2)}
.bt-empty{color:var(--soft2);font-size:13px}
.bt-res{display:flex;flex-wrap:wrap;gap:8px;min-height:34px;align-self:flex-start}
.bt-perm{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--green);background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);border-radius:7px;padding:4px 10px;animation:avfade .3s ease}

/* ---------- CODE: 多语言 tab ---------- */
.tpl-code .c-hint{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--orange);white-space:nowrap;animation:hintpulse 1.8s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.55}50%{opacity:1}}
.tpl-code .c-tabs{display:flex;gap:5px;margin-left:10px;flex-wrap:wrap}
.tpl-code .c-tab{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--soft);background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:3px 11px;cursor:pointer;transition:.15s}
.tpl-code .c-tab:hover{color:var(--orange);border-color:var(--orange)}
.tpl-code .c-tab.on{color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-d));border-color:var(--orange-d)}

/* ---------- BARS 扩展: 排序(比较/变暗) ---------- */
.bar.cmp{background:linear-gradient(180deg,var(--orange),var(--orange-d))}
.bar.done{background:linear-gradient(180deg,#7dd39b,#16A34A)}
.bar.dim{opacity:.32}

/* ---------- TREE 扩展: 堆上浮下沉/路径 ---------- */
.tnode.cur circle{fill:rgba(249,115,22,.2);stroke:var(--orange);stroke-width:3} .tnode.cur text{fill:var(--orange-d)}
.tnode.swap circle{fill:rgba(124,58,237,.16);stroke:var(--purple);stroke-width:3} .tnode.swap text{fill:var(--purple)}
.tnode.cmp circle{fill:rgba(37,99,235,.14);stroke:var(--blue)} .tnode.cmp text{fill:var(--blue)}
.tnode.path circle{fill:rgba(22,163,74,.16);stroke:var(--green)} .tnode.path text{fill:var(--green)}

/* ---------- 模板: QUEUE (队列, 含环形) ---------- */
.tpl-queue{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.q-row{display:flex;gap:8px;flex-wrap:nowrap}
.q-cell{position:relative;width:54px;height:54px;border-radius:10px;border:2px solid var(--line);background:var(--card-top);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.3s}
.q-cell.empty{background:var(--bg2);border-style:dashed}
.q-cell .q-v{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--ink)}
.q-cell .q-i{position:absolute;bottom:-20px;font-family:var(--mono);font-size:12px;color:var(--soft2)}
.q-cell.is-front{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.q-cell.is-rear{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.16)}
.q-cell.is-front.is-rear{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.q-tag{position:absolute;top:-22px;font-family:var(--mono);font-size:11px;font-weight:800}
.q-tag.front{color:var(--blue)} .q-tag.rear{color:var(--orange);top:-22px}
.q-cell.is-front.is-rear .q-tag.front{left:2px} .q-cell.is-front.is-rear .q-tag.rear{right:2px}
.q-note{font-size:13px;color:var(--soft);margin-top:14px} .q-note.wrap{color:var(--blue);font-weight:600}

/* ---------- 模板: GRAPH (图) ---------- */
.tpl-graph{display:flex;gap:24px;align-items:center;justify-content:center;width:100%}
.g-board{flex:1;max-width:540px}
.gedge{stroke:#c4cfe2;stroke-width:2.5} .gedge.on{stroke:var(--orange);stroke-width:4}
.gw{fill:var(--soft);font-family:var(--mono);font-size:13px;font-weight:700}
.gnode circle{fill:var(--card-top);stroke:var(--line);stroke-width:2;transition:.3s}
.gnode text{fill:var(--ink);font-family:var(--mono);font-size:15px;font-weight:700}
.gnode.start circle{fill:rgba(249,115,22,.18);stroke:var(--orange);stroke-width:3} .gnode.start text{fill:var(--orange-d)}
.gnode.visiting circle{fill:rgba(249,115,22,.2);stroke:var(--orange);stroke-width:3} .gnode.visiting text{fill:var(--orange-d)}
.gnode.frontier circle{fill:rgba(37,99,235,.14);stroke:var(--blue)} .gnode.frontier text{fill:var(--blue)}
.gnode.done circle{fill:rgba(22,163,74,.16);stroke:var(--green)} .gnode.done text{fill:var(--green)}
.g-panel{min-width:130px;border:1px solid var(--line);border-radius:11px;background:var(--card-top);align-self:center}
.g-panel .s-h{font-size:12px;font-weight:800;color:var(--blue);padding:7px 12px;border-bottom:1px solid var(--line)}
.g-panel .s-item{padding:7px 13px;font-family:var(--mono);font-size:13px;border-bottom:1px dashed var(--line);animation:avfade .3s ease}
.g-panel .s-empty{padding:12px;color:var(--soft2);font-size:13px;text-align:center}

/* ---------- 模板: HASH (哈希桶 + 拉链) ---------- */
.tpl-hash{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hs-fn{font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--card-top);border:1px solid var(--line);border-radius:9px;padding:8px 16px}
.hs-grid{display:flex;flex-direction:column;gap:6px;width:100%;max-width:460px}
.hs-bucket{display:flex;align-items:center;gap:10px;transition:.3s;border-radius:9px;padding:3px}
.hs-bucket.hot{background:rgba(249,115,22,.08)}
.hs-idx{flex:0 0 34px;height:38px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-weight:800;color:var(--soft)}
.hs-bucket.hot .hs-idx{border-color:var(--orange);color:var(--orange)}
.hs-chain{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hs-node{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--blue);background:#dbe6fb;border:1.5px solid var(--blue);border-radius:7px;padding:5px 11px}
.hs-node.flash{color:var(--orange-d);background:rgba(249,115,22,.16);border-color:var(--orange);animation:pulseO .8s ease}
.hs-arr{color:var(--soft2)}
.hs-empty{color:var(--soft2);font-size:13px}

/* ---------- 模板: PITFALLS (易错点) ---------- */
.tpl-pit{width:100%;max-width:640px;display:flex;flex-direction:column;gap:12px}
.pit-row{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;padding:12px 16px;background:var(--card-top)}
.pit-x{color:var(--red);font-weight:700;font-size:14.5px;font-family:var(--mono)}
.pit-o{color:var(--green);font-weight:700;font-size:14.5px;font-family:var(--mono);margin-top:4px}
.pit-why{color:var(--soft);font-size:13px;margin-top:6px}

/* ---------- 模板: PRACTICE (练习) ---------- */
.tpl-prac{width:100%;max-width:540px;text-align:center;border:2px dashed var(--orange);border-radius:16px;padding:26px 28px;background:rgba(249,115,22,.04)}
.prac-badge{display:inline-block;background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;font-weight:800;font-size:12px;padding:4px 14px;border-radius:999px;letter-spacing:.05em}
.prac-prob{font-size:22px;font-weight:900;margin:14px 0 6px}
.prac-tag{font-size:13px;color:var(--blue);font-weight:700}
.prac-hint{font-size:14px;color:var(--ink);background:var(--card-top);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:14px 0;text-align:left}
.prac-hint b{color:var(--orange)}
.prac-cta{font-size:13.5px;color:var(--soft);font-weight:600}

/* ---------- 模板: QUIZ (动手小测) ---------- */
.tpl-quiz{width:100%;max-width:600px;display:flex;flex-direction:column;gap:12px}
.qz-q{font-size:18px;font-weight:800;line-height:1.6;color:var(--ink)}
.qz-badge{display:inline-block;background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;font-weight:800;font-size:12px;padding:3px 12px;border-radius:999px;margin-right:10px;vertical-align:middle;letter-spacing:.03em}
.qz-opts{display:flex;flex-direction:column;gap:9px}
.qz-opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card-top);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s;font-family:var(--sans)}
.qz-opt:hover:not(.done){border-color:var(--orange);background:rgba(249,115,22,.05)}
.qz-opt .qz-key{flex:0 0 26px;height:26px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:13px;color:var(--soft)}
.qz-opt.done{cursor:default}
.qz-opt.right{border-color:var(--green);background:rgba(22,163,74,.1);color:var(--green)}
.qz-opt.right .qz-key{background:var(--green);border-color:var(--green);color:#fff}
.qz-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.08);color:var(--red)}
.qz-opt.wrong .qz-key{background:var(--red);border-color:var(--red);color:#fff}
.qz-exp{font-size:14px;line-height:1.7;border-radius:11px;padding:12px 15px;animation:avfade .3s ease}
.qz-exp.ok{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.3);color:var(--ink)}
.qz-exp.bad{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.3);color:var(--ink)}
.qz-exp b{margin-right:6px}.qz-exp.ok b{color:var(--green)}.qz-exp.bad b{color:var(--red)}

/* ---------- 模板: COMPARE (并列对比) ---------- */
.tpl-compare{width:100%;max-width:660px;display:flex;flex-direction:column;gap:8px}
.cmp-row{display:grid;grid-template-columns:96px 1fr 1fr;gap:8px;align-items:stretch}
.cmp-head .cmp-c{font-weight:800;font-size:16px;text-align:center;padding:10px}
.cmp-head .cmp-c.a{color:var(--blue)} .cmp-head .cmp-c.b{color:var(--orange)}
.cmp-dim{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--soft);background:var(--card-top);border:1px solid var(--line);border-radius:9px;padding:8px 6px;text-align:center}
.cmp-c{font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 14px;display:flex;align-items:center;line-height:1.55}
.cmp-head .cmp-c.a{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.3)}
.cmp-head .cmp-c.b{background:rgba(249,115,22,.06);border-color:rgba(249,115,22,.3)}

/* ---------- 模板: GRAPH (拓扑排序) ---------- */
.tpl-graph{display:flex;gap:24px;align-items:center;justify-content:center;width:100%}
.graph-board{flex:1;max-width:520px}
.gnode circle{fill:var(--card-top);stroke:var(--line);stroke-width:2;transition:.3s}
.gnode text{fill:var(--ink);font-family:var(--mono);font-size:15px;font-weight:700}
.gnode.queued circle{fill:rgba(249,115,22,.16);stroke:var(--orange);stroke-width:3}
.gnode.queued text{fill:var(--orange-d)}
.gnode.done circle{fill:rgba(22,163,74,.14);stroke:var(--green)}
.gnode.done text{fill:var(--green)}
.gdeg{fill:var(--soft);font-size:11px;font-family:var(--mono)}
.graph-panel{min-width:120px;border:1px solid var(--line);border-radius:11px;background:var(--card-top);overflow:hidden;align-self:center}
.graph-panel .s-h{font-size:12px;font-weight:800;color:var(--blue);padding:7px 12px;border-bottom:1px solid var(--line)}
.graph-panel .s-item{padding:6px 13px;font-family:var(--mono);font-size:13px;border-bottom:1px dashed var(--line);animation:avfade .3s ease}
.graph-panel .s-empty{padding:10px;color:var(--soft2);font-size:13px;text-align:center}
.graph-panel .g-order{padding:8px 13px;font-family:var(--mono);font-size:13px;color:var(--green);font-weight:700}

/* ---------- 模板: UNION_FIND (并查集) ---------- */
.tpl-uf{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.uf-board{width:100%;max-width:540px}
.uf-panel .uf-count{font-size:15px;font-weight:700;color:var(--ink)}
.uf-panel .uf-count b{color:var(--orange);font-family:var(--mono);font-size:22px;margin-left:8px}

/* ---------- 模板: DUAL_STACK (双栈) ---------- */
.tpl-dstk{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.dstk-wrap{display:flex;gap:40px;align-items:flex-end}
.dstk-col{display:flex;flex-direction:column;min-width:110px;border:2px solid var(--line);border-radius:10px;padding:8px;background:var(--card-top)}
.dstk-cap{font-size:12px;font-weight:800;color:var(--blue);text-align:center;margin-bottom:8px}
.dstk-items{display:flex;flex-direction:column-reverse;gap:6px;min-height:48px}
.dstk-item{min-width:64px;height:38px;padding:0 10px;border-radius:8px;background:#dbe6fb;border:2px solid var(--blue);color:var(--blue);display:grid;place-items:center;font-family:var(--mono);font-size:16px;font-weight:700;animation:avfade .25s ease}
.dstk-item.top{background:rgba(249,115,22,.16);border-color:var(--orange);color:var(--orange-d)}
.dstk-note{font-size:14px;color:var(--soft);font-weight:600;text-align:center;max-width:560px}

/* GRID 额外状态: 腐烂橘子 */
.grid-cell.fresh{background:#cfe8d6;color:#1a7f44}
.grid-cell.rotten{background:#f6c9a8;color:#9a4a14}
.grid-cell.empty{background:#eef1f5;color:#c2c9d4}
.grid-cell.justrot{background:var(--orange);color:#fff;border-color:var(--orange-d);box-shadow:0 0 0 3px rgba(249,115,22,.2)}

/* GRAPH 带权 / GRID 生命游戏 状态 */
.gw{fill:var(--orange-d);font-size:12px;font-family:var(--mono);font-weight:700}
.grid-cell.alive{background:#cfe8d6;color:#1a7f44}
.grid-cell.dead{background:#eef1f5;color:#aab4c6}
.grid-cell.born{background:var(--green);color:#fff;border-color:#0f7a37;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.grid-cell.dying{background:#f6c9a8;color:#9a4a14;border-color:var(--orange)}

/* ---------- 模板: HASH_GROUP (哈希分组) ---------- */
.tpl-hg{width:100%;max-width:600px;display:flex;flex-direction:column;gap:8px}
.hg-lab{font-size:12px;font-weight:800;color:var(--soft);margin-top:4px}
.hg-inputs{display:flex;gap:8px;flex-wrap:wrap}
.hg-in{padding:6px 12px;border-radius:8px;border:2px solid var(--line);background:var(--card-top);font-family:var(--mono);font-size:15px;font-weight:700;transition:.25s}
.hg-in.cur{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.16)}
.hg-in.done{opacity:.45}
.hg-buckets{display:flex;gap:10px;flex-wrap:wrap}
.hg-bucket{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--card-top);min-width:120px}
.hg-bucket.hl{border-color:var(--orange);box-shadow:0 0 0 2px rgba(249,115,22,.15)}
.hg-key{font-size:11px;font-family:var(--mono);color:var(--blue);margin-bottom:6px}
.hg-items{display:flex;gap:6px;flex-wrap:wrap}
.hg-item{font-family:var(--mono);font-size:14px;font-weight:700;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:var(--green);border-radius:6px;padding:2px 8px;animation:avfade .25s ease}

@media(max-width:760px){
  .nav .links{display:none}
  .cell{width:46px;height:46px;font-size:18px}
  .av-stage{padding:38px 12px 20px}
  .tpl-bars{flex-direction:column;align-items:center;gap:16px}
  .stack-panel,.tree-panel{align-self:stretch}
  .tpl-tree{flex-direction:column;align-items:center}
  .arr-zone{gap:20px}
  .dp-cell{width:42px;height:40px;font-size:14px}
}