/* ═══════════════════════════════════════════════════════════════
   viz-core.css  —  Shared dark-theme styles for all DSA viz pages
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:       #0d1117;
  --bg2:      #161b22;
  --bg3:      #21262d;
  --border:   #30363d;
  --text:     #e6edf3;
  --muted:    #8b949e;
  --blue:     #388bfd;
  --blue-bg:  #1f3d6e;
  --green:    #3fb950;
  --grn-bg:   #1a3d2b;
  --yellow:   #d29922;
  --yel-bg:   #3d2e00;
  --orange:   #f0883e;
  --red:      #f78166;
  --purple:   #bc8cff;
  --pur-bg:   #2d1f6e;
  --cyan:     #79c0ff;
  --font-mono:'Consolas','Courier New',monospace;
}

*  { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── Page header ── */
.vp-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vp-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.vp-back:hover { color: var(--cyan); }
.vp-title { font-size: 1.3rem; font-weight: 700; color: var(--cyan); }
.vp-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diff-badge {
  font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase;
}
.diff-badge.easy   { background: #3fb95022; color: var(--green); border: 1px solid var(--green); }
.diff-badge.medium { background: #d2992222; color: var(--yellow); border: 1px solid var(--yellow); }
.diff-badge.hard   { background: #f7816622; color: var(--red); border: 1px solid var(--red); }
.lc-badge {
  font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; background: #f0883e22;
  color: var(--orange); border: 1px solid var(--orange);
}
.tag-badge {
  font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; background: var(--pur-bg);
  color: var(--purple); border: 1px solid var(--purple);
}

/* ── Layout ── */
.vp-body {
  display: flex;
  gap: 18px;
  padding: 18px 28px;
  max-width: 1380px;
  margin: 0 auto;
}
.vp-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vp-right { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }

/* ── Cards ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.card-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); margin-bottom: 12px;
}

/* ── Example picker ── */
.ex-card { padding: 12px 18px; }
.ex-row  { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-btn  {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
  padding: 6px 12px; font-size: 0.78rem;
  font-family: var(--font-mono); cursor: pointer;
  transition: all 0.2s;
}
.ex-btn:hover  { border-color: var(--blue); color: var(--text); }
.ex-btn.active { border-color: var(--blue); background: var(--blue-bg); color: var(--cyan); }

/* ── Array visualization ── */
.av-root { position: relative; }
.av-label-row, .av-idx-row, .av-cell-row { display: flex; gap: var(--av-gap, 8px); }
.av-idx { width: var(--av-cw, 60px); text-align: center; font-size: 0.65rem; color: var(--muted); font-family: var(--font-mono); padding-bottom: 3px; }
.av-cell {
  width: var(--av-cw, 60px);
  height: var(--av-ch, 60px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; font-family: var(--font-mono);
  border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg3); color: var(--text);
  transition: all 0.35s ease; position: relative;
  user-select: none;
}
.av-cell.current   { border-color: var(--blue);   background: var(--blue-bg); color: var(--cyan);   transform: translateY(-4px); box-shadow: 0 8px 20px #388bfd44; }
.av-cell.match     { border-color: var(--green);  background: var(--grn-bg);  color: var(--green);  transform: translateY(-4px); box-shadow: 0 8px 20px #3fb95044; animation: cellPop 0.4s ease; }
.av-cell.secondary { border-color: var(--purple); background: var(--pur-bg);  color: var(--purple); transform: translateY(-4px); }
.av-cell.window    { border-color: var(--orange); background: #f0883e18; color: var(--orange); }
.av-cell.visited   { border-color: var(--border); background: var(--bg2); color: var(--muted); opacity: 0.65; }
.av-cell.bad       { border-color: var(--red);    background: #f7816622; color: var(--red); }
.av-cell.highlight { border-color: var(--yellow); background: var(--yel-bg); color: var(--yellow); }

@keyframes cellPop { 0%{transform:translateY(-4px) scale(1)} 40%{transform:translateY(-6px) scale(1.1)} 100%{transform:translateY(-4px) scale(1)} }

/* Pointer arrows */
.av-ptr-row     { position: relative; height: 38px; }
.av-ptr-top-row { position: relative; height: 38px; }
.av-ptr {
  position: absolute; top: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  transition: left 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none; z-index: 2;
}
/* Top-row pointers: anchor to bottom so arrow touches the cell */
.av-ptr-top-row .av-ptr { top: auto; bottom: 0; }
.av-ptr-arr  { font-size: 1rem; line-height: 1; }
.av-ptr-lbl  { font-size: 0.63rem; font-family: var(--font-mono); white-space: nowrap; }
.ptr-blue    { color: var(--blue); }
.ptr-green   { color: var(--green); }
.ptr-orange  { color: var(--orange); }
.ptr-purple  { color: var(--purple); }
.ptr-yellow  { color: var(--yellow); }
.ptr-red     { color: var(--red); }
.ptr-cyan    { color: var(--cyan); }

/* Second array (result / comparison) */
.av-result-row .av-cell { background: var(--bg2); border-color: #30363d; }
.av-result-row .av-cell.filled { border-color: var(--green); background: var(--grn-bg); color: var(--green); animation: cellPop 0.3s ease; }

/* ── HashMap ── */
.hm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hm-title  { font-family: var(--font-mono); font-size: 0.8rem; color: var(--purple); }
.hm-count  { font-size: 0.7rem; color: var(--muted); }
.hm-grid   { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px; }
.hm-empty  { color: var(--muted); font-size: 0.8rem; font-style: italic; font-family: var(--font-mono); padding: 8px 0; }
.hm-entry  {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 11px;
  font-family: var(--font-mono); font-size: 0.85rem;
  transition: all 0.3s ease;
}
.hm-entry.srch  { border-color: var(--yellow); background: var(--yel-bg); box-shadow: 0 0 10px #d2992244; animation: hmPulse 0.35s; }
.hm-entry.hit   { border-color: var(--green); background: var(--grn-bg); box-shadow: 0 0 14px #3fb95055; }
.hm-entry.added { border-color: var(--blue); background: var(--blue-bg); animation: hmPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.hm-key { color: var(--cyan); }
.hm-arr { color: var(--muted); }
.hm-val { color: var(--orange); }
@keyframes hmPulse { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes hmPop   { 0%{transform:scale(0.4);opacity:0} 70%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }

/* ── Formula / info box ── */
.formula-box {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 15px; min-height: 44px;
  font-family: var(--font-mono); font-size: 0.88rem;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  transition: all 0.3s;
}
.fm   { color: var(--muted); }
.fn   { color: var(--text); font-weight: 600; }
.fr   { color: var(--orange); font-weight: 700; font-size: 1rem; }
.fst  { font-family: -apple-system,sans-serif; font-size: 0.72rem; padding: 2px 9px; border-radius: 20px; margin-left: auto; }
.fst.searching { background: #d2992222; color: var(--yellow); border: 1px solid var(--yellow); animation: blink 0.7s ease-in-out infinite; }
.fst.nfound    { background: #f7816622; color: var(--red); border: 1px solid var(--red); }
.fst.found     { background: var(--grn-bg); color: var(--green); border: 1px solid var(--green); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Tracker boxes (for tracking vars like minPrice, maxProfit, etc.) ── */
.tracker-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tracker-box {
  flex: 1; min-width: 120px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  font-family: var(--font-mono); text-align: center;
  transition: all 0.35s;
}
.tracker-box.updated { border-color: var(--green); background: var(--grn-bg); animation: hmPop 0.4s ease; }
.tracker-lbl { font-size: 0.65rem; color: var(--muted); margin-bottom: 4px; }
.tracker-val { font-size: 1.2rem; font-weight: 700; color: var(--cyan); }

/* ── Result banner ── */
.result-banner {
  display: none; background: var(--grn-bg);
  border: 1px solid var(--green); border-radius: 10px;
  padding: 13px 16px; align-items: center; gap: 12px;
  animation: slideIn 0.35s ease;
}
.result-banner.show { display: flex; }
.res-icon { font-size: 1.5rem; }
.res-h3   { color: var(--green); font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; }
.res-p    { color: var(--muted); font-size: 0.8rem; }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ── Step card ── */
.step-card { }
.step-hdr  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.step-title { font-size: 0.95rem; font-weight: 700; color: var(--text); transition: color 0.3s; }
.step-title.found { color: var(--green); }
.step-title.done  { color: var(--cyan); }
.step-ctr   { font-size: 0.7rem; color: var(--muted); font-family: var(--font-mono); background: var(--bg3); padding: 2px 9px; border-radius: 20px; }
.prog-bar   { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.prog-fill  { height: 100%; background: var(--blue); border-radius: 2px; transition: width 0.3s ease; }
.step-desc  { font-size: 0.85rem; color: var(--muted); line-height: 1.75; white-space: pre-line; }

/* ── Controls ── */
.ctrl-card  { padding: 11px 16px; }
.ctrl-row   { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 8px 14px;
  font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
  font-weight: 500; display: flex; align-items: center; gap: 5px;
}
.btn:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-bg); color: var(--cyan); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn.play   { background: var(--blue-bg); border-color: var(--blue); color: var(--cyan); min-width: 92px; justify-content: center; }
.btn.play.paused { background: var(--yel-bg); border-color: var(--yellow); color: var(--yellow); }
.btn.reset  { color: var(--muted); }
.speed-grp  { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.speed-lbl  { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
input[type=range] {
  -webkit-appearance: none; width: 88px; height: 4px;
  border-radius: 2px; background: var(--border); outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: var(--blue); cursor: pointer;
}

/* ── Code panel ── */
.code-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cp-header  { background: var(--bg3); padding: 9px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.cp-title   { font-size: 0.78rem; color: var(--muted); }
.java-badge { background: #f0883e22; color: var(--orange); border: 1px solid var(--orange); border-radius: 4px; padding: 1px 7px; font-size: 0.65rem; font-weight: 700; }
.cp-body    { padding: 10px 12px; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.95; overflow-x: auto; overflow-y: auto; max-height: 480px; }
.cp-line    { display: flex; align-items: flex-start; padding: 0 5px; border-radius: 4px; transition: all 0.3s; border-left: 3px solid transparent; min-width: max-content; }
.cp-line.on         { background: #388bfd1a; border-left-color: var(--blue); }
.cp-line.on.is-found{ background: #3fb9501a; border-left-color: var(--green); }
.cp-ln   { color: #484f58; margin-right: 12px; user-select: none; min-width: 14px; text-align: right; font-size: 0.72rem; flex-shrink: 0; }
.cp-code { white-space: pre; flex: 1; }
.cp-copy-btn {
  font-size: 0.65rem; font-weight: 600; padding: 2px 9px;
  border-radius: 4px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--muted); transition: all 0.2s;
}
.cp-copy-btn:hover  { border-color: var(--blue); color: var(--cyan); }
.cp-copy-btn.copied { border-color: var(--green); color: var(--green); }
.cp-lang-tabs { display: flex; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.cp-lang-btn  { font-size: 0.65rem; font-weight: 700; padding: 2px 10px; background: var(--bg2); border: none; color: var(--muted); cursor: pointer; transition: all 0.2s; }
.cp-lang-btn + .cp-lang-btn { border-left: 1px solid var(--border); }
.cp-lang-btn.active         { background: var(--blue-bg); color: var(--cyan); }
.cp-lang-btn:hover:not(.active) { color: var(--text); }
/* syntax colours */
.ck { color: #ff7b72; }
.ct { color: #ffa657; }
.cs { color: #a5d6ff; }
.cn { color: #79c0ff; }
.cc { color: #8b949e; font-style: italic; }
.cm { color: #8b949e; }

/* ── Algo info card ── */
.algo-list  { display: flex; flex-direction: column; gap: 9px; }
.al         { display: flex; gap: 10px; align-items: flex-start; }
.al-num     { width: 20px; height: 20px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--muted); flex-shrink: 0; margin-top: 1px; }
.al.on .al-num  { background: var(--blue-bg); border-color: var(--blue); color: var(--cyan); }
.al-txt     { font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
.al.on .al-txt  { color: var(--text); }
.al-txt code { font-family: var(--font-mono); font-size: 0.88em; }
.cplx-row   { display: flex; gap: 8px; margin-top: 12px; }
.cplx       { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; text-align: center; }
.cplx-l     { font-size: 0.6rem; color: var(--muted); margin-bottom: 3px; }
.cplx-v     { font-size: 0.92rem; font-weight: 700; font-family: var(--font-mono); }
.time-c  { color: var(--orange); }
.space-c { color: var(--purple); }

/* ── Why card ── */
.why-p { font-size: 0.78rem; color: var(--muted); line-height: 1.75; }

/* ── Tree SVG ── */
.tree-svg-wrap { width: 100%; overflow-x: auto; }
.tree-svg-wrap svg { display: block; margin: 0 auto; }
.tree-node-circle { fill: var(--bg3); stroke: var(--border); stroke-width: 2; transition: all 0.4s; }
.tree-node-circle.current { fill: var(--blue-bg); stroke: var(--blue); }
.tree-node-circle.match   { fill: var(--grn-bg); stroke: var(--green); }
.tree-node-circle.path    { fill: var(--pur-bg); stroke: var(--purple); }
.tree-node-circle.visited { fill: var(--bg2); stroke: var(--border); opacity: 0.6; }
.tree-node-text { fill: var(--text); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.tree-edge { stroke: var(--border); stroke-width: 2; fill: none; transition: stroke 0.4s; }
.tree-edge.highlight { stroke: var(--purple); stroke-width: 3; }

/* ── Linked List (enhanced) ── */
.ll-container { overflow-x: auto; padding-bottom: 4px; }
.ll-main-row  { display: flex; align-items: flex-end; gap: 0; flex-wrap: nowrap; }

/* Each node column: badge area on top, node box on bottom */
.ll-node-col  { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }

/* Fixed-height badge area so all nodes align at the same baseline */
.ll-badge-area {
  height: 52px; min-width: 10px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 2px; padding-bottom: 4px;
}

/* Named pointer badge with ↓ indicator pointing at the node */
.ll-badge      { display: flex; flex-direction: column; align-items: center;
                 font-size: 0.6rem; font-family: var(--font-mono); font-weight: 700;
                 padding: 1px 6px; border-radius: 3px; line-height: 1.3; white-space: nowrap; }
.ll-badge-down { font-size: 0.65rem; line-height: 1; }
.ll-badge-blue   { background: var(--blue-bg);  color: var(--cyan);   border: 1px solid var(--blue); }
.ll-badge-orange { background: #3d2e00;          color: var(--orange); border: 1px solid var(--orange); }
.ll-badge-green  { background: var(--grn-bg);   color: var(--green);  border: 1px solid var(--green); }
.ll-badge-purple { background: var(--pur-bg);   color: var(--purple); border: 1px solid var(--purple); }
.ll-badge-red    { background: #f7816622;        color: var(--red);    border: 1px solid var(--red); }
.ll-badge-yellow { background: var(--yel-bg);   color: var(--yellow); border: 1px solid var(--yellow); }
.ll-badge-cyan   { background: var(--blue-bg);  color: var(--cyan);   border: 1px solid var(--cyan); }
.ll-badge-muted  { background: var(--bg3);      color: var(--muted);  border: 1px solid var(--border); }

/* Two-compartment node box: [val | →] */
.ll-box {
  display: flex; align-items: stretch;
  height: 46px; min-width: 52px;
  border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg3); color: var(--text);
  font-family: var(--font-mono); font-weight: 700;
  transition: all 0.35s; overflow: hidden; flex-shrink: 0;
}
.ll-val-part { display: flex; align-items: center; justify-content: center;
               min-width: 38px; padding: 0 8px; font-size: 1rem; }
.ll-ptr-sep  { width: 1px; background: var(--border); flex-shrink: 0; transition: background 0.3s; }
.ll-ptr-part { display: flex; align-items: center; justify-content: center;
               padding: 0 6px; font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }

.ll-box.current   { border-color: var(--blue);   background: var(--blue-bg); color: var(--cyan); }
.ll-box.current   .ll-ptr-sep  { background: var(--blue); }
.ll-box.current   .ll-ptr-part { color: var(--blue); }
.ll-box.match     { border-color: var(--green);  background: var(--grn-bg);  color: var(--green); }
.ll-box.match     .ll-ptr-sep  { background: var(--green); }
.ll-box.match     .ll-ptr-part { color: var(--green); }
.ll-box.secondary { border-color: var(--purple); background: var(--pur-bg);  color: var(--purple); }
.ll-box.secondary .ll-ptr-sep  { background: var(--purple); }
.ll-box.secondary .ll-ptr-part { color: var(--purple); }
.ll-box.highlight { border-color: var(--yellow); background: var(--yel-bg);  color: var(--yellow); }
.ll-box.visited   { opacity: 0.55; }
.ll-box.removed   { opacity: 0.3; text-decoration: line-through; color: var(--red); border-color: var(--red); }

/* Connector arrows between nodes — padding-bottom centers at midpoint of 46px node */
.ll-conn-wrap { display: flex; align-items: center; padding-bottom: 23px; flex-shrink: 0; }
.ll-conn      { color: var(--muted); font-size: 1.15rem; padding: 0 4px;
                transition: color 0.3s, transform 0.3s; line-height: 1; }
.ll-conn.changed  { color: var(--orange); animation: llChanged 0.5s ease; }
.ll-conn.new-link { color: var(--green);  animation: llNewLink 0.5s ease; }
@keyframes llChanged  { 0%{color:var(--red);transform:scale(1.8)}  100%{color:var(--orange);transform:scale(1)} }
@keyframes llNewLink  { 0%{color:var(--cyan);transform:scale(1.8)} 100%{color:var(--green);transform:scale(1)} }

/* Null terminator column */
.ll-null-col    { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ll-null-spacer { height: 52px; }
.ll-null        { color: var(--muted); font-family: var(--font-mono); font-size: 0.82rem;
                  height: 46px; display: flex; align-items: center; padding: 0 6px; }

/* Legacy rows — hidden, kept for backward compat */
.ll-ptr-row { display: none !important; }
.ll-ptr     { display: none !important; }

/* ── Matrix grid ── */
.mat-wrap  { overflow-x: auto; }
.mat-outer { display: inline-grid; gap: 3px; }
.mat-grid  { display: inline-grid; gap: 3px; } /* legacy alias */

/* Row / col header labels */
.mat-corner { }
.mat-ch {
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  color: var(--muted); padding-bottom: 2px;
}
.mat-rh {
  display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  color: var(--muted); padding-right: 3px;
}

/* Data cell */
.mat-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.mat-cell.current   { border-color: var(--blue);   background: var(--blue-bg);  color: var(--cyan); }
.mat-cell.secondary { border-color: var(--orange);  background: #f0883e18;       color: var(--orange); }
.mat-cell.match     { border-color: var(--green);  background: var(--grn-bg);   color: var(--green); }
.mat-cell.bad       { border-color: var(--red);    background: #e8515122;        color: var(--red); }
.mat-cell.visited   { background: #2d1f6e44; border-color: var(--purple); color: var(--purple); opacity: 0.8; }
.mat-cell.path      { border-color: var(--orange); background: #f0883e18; color: var(--orange); }
.mat-cell.zero-out  { opacity: 0.3; }
.mat-cell.wall      { background: var(--bg); border-color: var(--border); color: var(--muted); }

/* Value-changed flash */
.mat-cell.mat-changed { animation: matChanged 0.6s ease; }
@keyframes matChanged {
  0%   { background: #d2992255; border-color: var(--yellow); color: var(--yellow); transform: scale(1.18); }
  60%  { background: #d2992222; border-color: var(--yellow); color: var(--yellow); transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Position badge */
.mat-pos {
  margin-top: 8px; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  display: none; width: fit-content;
}

/* ── DP table ── */
.dp-wrap    { overflow-x: auto; }
.dp-table   { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; }
.dp-table th, .dp-table td {
  border: 1px solid var(--border); padding: 6px 10px;
  text-align: center; min-width: 38px;
  transition: all 0.35s;
}
.dp-table th { background: var(--bg3); color: var(--muted); font-weight: 600; }
.dp-table td { background: var(--bg2); color: var(--muted); }
.dp-table td.computing { background: var(--blue-bg); border-color: var(--blue); color: var(--cyan); }
.dp-table td.computed  { background: var(--bg3); color: var(--text); }
.dp-table td.result    { background: var(--grn-bg); border-color: var(--green); color: var(--green); font-weight: 700; }
.dp-table td.path      { background: var(--pur-bg); border-color: var(--purple); color: var(--purple); }

/* ── Stack ── */
.stack-wrap { display: flex; gap: 20px; align-items: flex-end; }
.stack-col  { display: flex; flex-direction: column-reverse; gap: 5px; min-width: 80px; }
.stack-item {
  height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700;
  border-radius: 7px; border: 2px solid var(--border);
  background: var(--bg3); color: var(--text);
  transition: all 0.35s;
}
.stack-item.pushed  { border-color: var(--blue);  background: var(--blue-bg); color: var(--cyan); animation: hmPop 0.4s ease; }
.stack-item.popped  { border-color: var(--red);   background: #f7816622;      color: var(--red); opacity: 0.5; }
.stack-item.top     { border-color: var(--green); background: var(--grn-bg);  color: var(--green); }
.stack-empty { color: var(--muted); font-size: 0.78rem; font-style: italic; padding: 8px 0; text-align: center; font-family: var(--font-mono); }
.stack-label { font-size: 0.7rem; color: var(--muted); text-align: center; margin-top: 4px; }

/* ── Graph SVG ── */
.graph-svg-wrap { width: 100%; overflow: hidden; }
.graph-svg-wrap svg { display: block; margin: 0 auto; }
.graph-node-circle { fill: var(--bg3); stroke: var(--border); stroke-width: 2; transition: all 0.4s; }
.graph-node-circle.visited  { fill: var(--pur-bg); stroke: var(--purple); }
.graph-node-circle.current  { fill: var(--blue-bg); stroke: var(--blue); animation: graphNodeBlink 1.2s ease-in-out infinite; }
.graph-node-circle.queued   { fill: var(--yel-bg); stroke: var(--yellow); }
.graph-node-circle.result   { fill: var(--grn-bg); stroke: var(--green); }
@keyframes graphNodeBlink {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(58, 186, 234, 0.8)); stroke-width: 2; }
  50%      { filter: drop-shadow(0 0 14px rgba(58, 186, 234, 1)); stroke-width: 3; }
}
.graph-node-text { fill: var(--text); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.graph-edge { stroke: var(--border); stroke-width: 2; fill: none; transition: stroke 0.4s; }
.graph-edge.active { stroke: var(--blue); stroke-width: 3; }
.graph-edge.visited { stroke: var(--purple); }
.graph-edge-weight { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }

/* Graph node color legend */
.graph-legend {
  display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; padding: 10px 14px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.72rem; color: var(--muted);
}
.graph-legend-item { display: flex; align-items: center; gap: 6px; }
.graph-legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; flex-shrink: 0; }
.graph-legend-dot.unvisited { background: var(--bg2); border-color: var(--border); }
.graph-legend-dot.processing { background: var(--blue-bg); border-color: var(--blue); animation: graphNodeBlink 1.2s ease-in-out infinite; }
.graph-legend-dot.queued { background: var(--yel-bg); border-color: var(--yellow); }
.graph-legend-dot.visited { background: var(--pur-bg); border-color: var(--purple); }
.graph-legend-dot.result { background: var(--grn-bg); border-color: var(--green); }

/* ── Custom test case input ── */
.ex-custom-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ex-custom-label {
  font-size: 0.75rem; font-weight: 600; color: var(--muted); flex-shrink: 0;
}
.ex-custom-input {
  flex: 1; min-width: 160px; max-width: 400px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 5px 10px; outline: none; transition: border-color 0.2s;
}
.ex-custom-input:focus { border-color: var(--blue); }
.ex-custom-input::placeholder { color: var(--muted); }
.ex-custom-run {
  background: var(--blue-bg); border: 1px solid var(--blue);
  color: var(--cyan); border-radius: 6px;
  padding: 5px 14px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.ex-custom-run:hover { background: #2a4d8e; }
.ex-custom-err {
  font-size: 0.75rem; color: var(--red); font-family: var(--font-mono);
}

/* ── Example button with output ── */
.ex-input  { color: var(--text); }
.ex-arrow  { color: var(--muted); margin: 0 4px; font-size: 0.75rem; }
.ex-output { color: var(--green); font-weight: 700; font-family: var(--font-mono); }

/* ── Problem / Question card ── */
.q-stmt {
  font-size: 0.88rem; line-height: 1.75; color: var(--text);
  margin-bottom: 14px;
}
.q-example {
  margin-top: 10px; padding: 10px 14px;
  background: var(--bg3); border-radius: 7px;
  border-left: 3px solid var(--border);
}
.q-ex-label {
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.q-io {
  font-size: 0.82rem; line-height: 1.9; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline;
}
.q-label { font-weight: 600; color: var(--muted); flex-shrink: 0; }
.q-io code {
  font-family: var(--font-mono); background: var(--bg2);
  padding: 1px 7px; border-radius: 4px; color: var(--text);
  font-size: 0.82rem; border: 1px solid var(--border);
}
.q-note { font-size: 0.8rem; color: var(--text); }
.q-constraints {
  margin-top: 12px; font-size: 0.78rem; color: var(--muted);
  line-height: 1.7; font-family: var(--font-mono);
}

/* ── Step logic / explanation box (readable step-by-step) ── */
.logic-box {
  font-size: 0.86rem; line-height: 1.8; min-height: 80px;
}
.logic-box strong { color: var(--cyan); }
.logic-box br { margin-bottom: 0.3em; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .vp-body { flex-direction: column; padding: 12px 14px; }
  .vp-right { width: 100%; }
  .av-cell  { width: 48px !important; height: 48px !important; font-size: 0.95rem !important; }
  .av-idx   { width: 48px !important; }
}