/* ========================================
   DSA Visual — Complete Design System
   ======================================== */
:root{
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --sidebar-w:272px;
  --ctrl-h:64px;
  --info-h:50px;
  --mob-h:52px;
  --fast:150ms cubic-bezier(.4,0,.2,1);
  --base:250ms cubic-bezier(.4,0,.2,1);
  --smooth:400ms cubic-bezier(.16,1,.3,1);
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-full:9999px;
}
/* Dark */
[data-theme="dark"]{
  --bg0:#08080d;--bg1:#0f0f18;--bg2:#16162a;--bg3:#1c1c34;
  --glass:rgba(15,15,24,.88);--glass2:rgba(28,28,52,.9);
  --t1:#e6e4f0;--t2:#9d9bb0;--t3:#6b697e;--ta:#a78bfa;
  --accent:#a78bfa;--accent2:#c4b5fd;--accentDim:rgba(167,139,250,.12);
  --accentGlow:rgba(167,139,250,.28);
  --danger:#f87171;--dangerDim:rgba(248,113,113,.12);
  --success:#4ade80;--successDim:rgba(74,222,128,.12);
  --warn:#fbbf24;--warnDim:rgba(251,191,36,.12);
  --info:#60a5fa;--infoDim:rgba(96,165,250,.12);
  --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.12);
  --borderAccent:rgba(167,139,250,.3);
  --shadow:0 2px 8px rgba(0,0,0,.5);--shadowLg:0 8px 32px rgba(0,0,0,.6);
  --canvasBg:#0b0b14;
  --barDef:#4a4870;--barCmp:#fbbf24;--barSwap:#f87171;--barSorted:#4ade80;
  --barPivot:#c084fc;--barFound:#4ade80;--barSearch:#60a5fa;
  --barRange:rgba(96,165,250,.18);--barWindow:rgba(167,139,250,.15);
  --nodeDef:#4a4870;--nodeVisit:#a78bfa;--nodeCur:#fbbf24;--nodeQ:#60a5fa;
  --edgeDef:#3a3860;--edgeAct:#a78bfa;
  --dsDef:#4a4870;--dsNew:#4ade80;--dsRem:#f87171;--dsPtr:#fbbf24;
}
[data-theme="light"]{
  --bg0:#f5f4fa;--bg1:#ffffff;--bg2:#edeaf5;--bg3:#e2dff0;
  --glass:rgba(255,255,255,.88);--glass2:rgba(237,234,245,.9);
  --t1:#1a1a2e;--t2:#555570;--t3:#8888a0;--ta:#7c3aed;
  --accent:#7c3aed;--accent2:#6d28d9;--accentDim:rgba(124,58,237,.08);
  --accentGlow:rgba(124,58,237,.18);
  --danger:#ef4444;--dangerDim:rgba(239,68,68,.08);
  --success:#22c55e;--successDim:rgba(34,197,94,.08);
  --warn:#f59e0b;--warnDim:rgba(245,158,11,.08);
  --info:#3b82f6;--infoDim:rgba(59,130,246,.08);
  --border:rgba(0,0,0,.07);--border2:rgba(0,0,0,.14);
  --borderAccent:rgba(124,58,237,.25);
  --shadow:0 2px 8px rgba(0,0,0,.06);--shadowLg:0 8px 32px rgba(0,0,0,.1);
  --canvasBg:#edeaf5;
  --barDef:#b0adc4;--barCmp:#f59e0b;--barSwap:#ef4444;--barSorted:#22c55e;
  --barPivot:#8b5cf6;--barFound:#22c55e;--barSearch:#3b82f6;
  --barRange:rgba(59,130,246,.12);--barWindow:rgba(124,58,237,.1);
  --nodeDef:#b0adc4;--nodeVisit:#8b5cf6;--nodeCur:#f59e0b;--nodeQ:#3b82f6;
  --edgeDef:#d0cde0;--edgeAct:#8b5cf6;
  --dsDef:#b0adc4;--dsNew:#22c55e;--dsRem:#ef4444;--dsPtr:#f59e0b;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);background:var(--bg0);color:var(--t1);
  overflow:hidden;height:100vh;display:flex;transition:background var(--base),color var(--base)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t3);border-radius:var(--r-full)}

/* ---- Sidebar ---- */
.sidebar{width:var(--sidebar-w);height:100vh;background:var(--bg1);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  flex-shrink:0;position:relative;z-index:100;transition:transform var(--smooth),background var(--base)}
.sidebar-header{padding:20px 20px 12px}
.logo-link{text-decoration:none;color:inherit;display:block}
.logo{font-weight:700;font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.logo-accent{background:linear-gradient(135deg,var(--accent),#c084fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-tagline{font-size:.65rem;color:var(--t3);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
.logo-sm{font-size:1.15rem}

.sidebar-search{padding:0 12px 8px}
.search-input{width:100%;font-family:var(--font-sans);font-size:.8rem;padding:8px 12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--t1);outline:none;transition:border var(--fast)}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--t3)}

.sidebar-nav{flex:1;overflow-y:auto;padding:4px 8px 16px}
.nav-cat{margin-bottom:2px}
.nav-cat-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
  background:none;border:none;border-radius:var(--r-sm);color:var(--t2);
  font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--fast)}
.nav-cat-btn:hover{background:var(--accentDim);color:var(--t1)}
.nav-cat-btn .cat-icon{font-size:.9rem}
.nav-cat-btn .cat-arrow{margin-left:auto;font-size:.6rem;transition:transform var(--fast);color:var(--t3)}
.nav-cat.open .cat-arrow{transform:rotate(90deg)}
.nav-cat-btn .cat-count{font-family:var(--font-mono);font-size:.6rem;
  background:var(--bg2);color:var(--t3);padding:1px 6px;border-radius:var(--r-full);margin-left:4px}
.nav-items{display:none;padding:2px 0 4px}
.nav-cat.open .nav-items{display:block}
.nav-item{display:block;width:100%;padding:7px 12px 7px 30px;background:none;border:none;
  border-radius:var(--r-sm);color:var(--t2);font-family:var(--font-sans);font-size:.8rem;
  font-weight:420;text-align:left;cursor:pointer;transition:all var(--fast);position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--accentDim);color:var(--t1)}
.nav-item.active{background:var(--accentDim);color:var(--accent);font-weight:550}
.nav-item.active::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accentGlow)}
.nav-item.search-hidden{display:none}

.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between}
.sidebar-stats{font-family:var(--font-mono);font-size:.6rem;color:var(--t3)}

/* Theme Toggle */
.theme-toggle{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:6px 12px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:6px;
  transition:all var(--fast);color:var(--t2)}
.theme-toggle:hover{background:var(--bg3);border-color:var(--border2)}
.theme-toggle-sm{padding:6px 8px}
.theme-label{font-size:.7rem;font-weight:500}
[data-theme="dark"] .theme-icon-light{display:none}
[data-theme="dark"] .theme-icon-dark{display:inline}
[data-theme="light"] .theme-icon-dark{display:none}
[data-theme="light"] .theme-icon-light{display:inline}

/* Mobile */
.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:var(--mob-h);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);padding:0 14px;align-items:center;
  justify-content:space-between;z-index:200}
.mobile-menu-btn{background:none;border:none;cursor:pointer;padding:8px;
  display:flex;flex-direction:column;gap:4px}
.mobile-menu-btn span{display:block;width:20px;height:2px;background:var(--t1);border-radius:2px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}
.sidebar-overlay.visible{display:block}

/* ---- Main ---- */
.main-content{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.info-bar{height:var(--info-h);padding:0 20px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--border);
  background:var(--bg1);flex-shrink:0;transition:background var(--base);gap:12px}
.visualizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.algo-title{font-size:1.05rem;font-weight:650;letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.complexities { display: flex; gap: 6px; flex-shrink: 0; }
.complexity {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  padding: 3px 8px; border-radius: var(--r-full); letter-spacing: 0.01em; white-space: nowrap;
}
.complexity.time { background: var(--warnDim); color: var(--warn); }
.complexity.space { background: var(--infoDim); color: var(--info); }
.approach-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.approach-tab {
  background: var(--bg2); border: 1px solid var(--border); color: var(--t2);
  padding: 4px 10px; border-radius: var(--r-full); font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: all var(--base);
}
.approach-tab:hover { background: var(--hover); color: var(--t1); }
.approach-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.header-right { display: flex; justify-content: flex-end; }
.step-counter{font-family:var(--font-mono);font-size:.75rem;color:var(--t3);white-space:nowrap}

/* Problem Panel */
.problem-panel { padding: 12px 24px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.problem-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.problem-title { font-size: 0.85rem; font-weight: 600; color: var(--t1); }
.problem-link { font-size: 0.75rem; color: var(--accent); text-decoration: none; font-family: var(--font-mono); }
.problem-link:hover { text-decoration: underline; }
.problem-desc { font-size: 0.8rem; color: var(--t2); line-height: 1.5; margin: 0; }

/* Workspace */
.workspace{flex:1;display:flex;overflow:hidden;min-height:0; position:relative;}
.canvas-container{flex:1;display:flex;flex-direction:column;position:relative;
  background:var(--canvasBg);min-width:0;transition:background var(--base)}
#viz-canvas{flex:1;width:100%;display:block}
/* Step Info Panel */
.step-info-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  gap: 10px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}
.step-description {
  font-size: 1rem;
  color: var(--t1);
  font-weight: 600;
  line-height: 1.4;
}
.step-reasoning {
  font-size: 0.85rem;
  color: var(--t2);
  font-style: italic;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}
.step-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.state-pill {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.state-pill-key {
  color: var(--accent);
  font-weight: 700;
}
.state-pill-val {
  color: var(--t1);
  font-weight: 500;
}

/* Code Panel */
.code-panel{width:280px;background:var(--bg1);border-left:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
  transition:transform var(--smooth),background var(--base); position:relative;}
.code-panel.collapsed{transform: translateX(100%); position: absolute; right: 0; top: 0; bottom: 0; z-index: 5;}
.code-panel-header{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0; white-space:nowrap;}
.code-panel-title{font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.toggle-code-btn{background:var(--bg1);border:1px solid var(--border); border-right: none; color:var(--t3);cursor:pointer;
  padding:8px 4px;font-size:.7rem;transition:color var(--fast); border-radius: 4px 0 0 4px;
  position: absolute; right: 100%; top: 10px; z-index: 10; width: 20px; display: flex; justify-content: center; align-items: center; box-shadow: -2px 0 5px rgba(0,0,0,0.2);}
.toggle-code-btn:hover{color:var(--t1)}
.code-block{flex:1;overflow-y:auto;padding:12px 14px;font-family:var(--font-mono);
  font-size:.75rem;line-height:1.8;white-space:pre;color:var(--t2)}
.code-line{display:block;padding:1px 6px;border-radius:3px;transition:all var(--fast)}
.code-line.active{background:var(--accentDim);color:var(--accent);font-weight:500}


/* Controls */
.controls-bar{height:var(--ctrl-h);padding:0 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;border-top:1px solid var(--border);
  background:var(--bg1);flex-shrink:0;transition:background var(--base)}
.controls-left,.controls-right{display:flex;align-items:center;gap:10px}
.controls-center{display:flex;align-items:center;gap:4px}

.ctrl-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--t1);font-family:var(--font-sans);font-size:.78rem;font-weight:500;
  padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:5px;transition:all var(--fast)}
.ctrl-btn:hover{background:var(--bg3);border-color:var(--border2);transform:translateY(-1px)}
.ctrl-btn:active{transform:translateY(0)}
.ctrl-btn-play{background:var(--accent);border-color:var(--accent);color:#fff;
  padding:9px 16px;border-radius:var(--r-lg);box-shadow:0 0 16px var(--accentGlow)}
.ctrl-btn-play:hover{background:var(--accent2);border-color:var(--accent2);
  box-shadow:0 0 28px var(--accentGlow)}
.ctrl-btn-play.playing{animation:none}
.ctrl-btn-secondary{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em}
.ctrl-btn-accent{background:var(--accentDim);border-color:var(--borderAccent);color:var(--accent)}
.ctrl-btn-accent:hover{background:var(--accent);color:#fff}
.ctrl-btn-danger{background:var(--dangerDim);border-color:rgba(248,113,113,.25);color:var(--danger)}
.ctrl-btn-danger:hover{background:var(--danger);color:#fff}

.input-group{display:flex;align-items:center;gap:6px}
.input-label{font-family:var(--font-mono);font-size:.65rem;color:var(--t3);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.range-input{width:72px;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--bg2);border-radius:var(--r-full);outline:none;cursor:pointer}
.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 4px var(--accentGlow)}
.range-value{font-family:var(--font-mono);font-size:.7rem;color:var(--t2);min-width:20px}
.text-input{font-family:var(--font-mono);font-size:.78rem;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r-sm);color:var(--t1);
  padding:5px 8px;width:60px;outline:none;transition:all var(--fast)}
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentDim)}
.text-input-sm{width:56px}
.text-input::placeholder{color:var(--t3)}

.hidden{display:none!important}
.ds-ops{display:flex;gap:5px}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 12px var(--accentGlow)}50%{box-shadow:0 0 24px var(--accentGlow)}}
.ctrl-btn-play:not(.playing){animation:pulse-glow 2.5s ease-in-out infinite}

/* Responsive */
@media(max-width:1100px){.code-panel{width:240px}}
@media(max-width:900px){
  .workspace { flex-direction: column; }
  .code-panel { width: 100% !important; border-left: none; border-top: 1px solid var(--border); max-height: 35vh; }
  .code-panel.collapsed { transform: translateY(100%); position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; border-top: none; }
  .toggle-code-btn { left: auto; right: 20px; top: -32px; border-radius: 4px; box-shadow: 0 -2px 5px rgba(0,0,0,0.2); border-bottom: none; width: 40px; height: 32px; }
  .controls-left .input-group:nth-child(n+3){display:none}
}
@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:150;box-shadow:var(--shadowLg)}
  .sidebar.open{transform:translateX(0)}
  .mobile-header{display:flex}
  .main-content{padding-top:var(--mob-h)}
  .controls-bar{flex-wrap:wrap;height:auto;padding:12px 12px;gap:12px}
  .controls-left,.controls-right{width:100%;justify-content:center; gap: 8px;}
  .controls-center{width:100%;justify-content:center}
  .step-info-panel{padding:10px; gap:6px;}
  .algo-title{font-size:.95rem}
  .step-description{font-size:.8rem}
}