:root{
 --bg:#07101b;--bg2:#0b1524;--panel:#0d1829;--panel2:#122138;--line:#263b59;
 --text:#edf4ff;--muted:#94a7c3;--blue:#65a7ff;--cyan:#51d7e4;--green:#55dda0;
 --yellow:#ffd166;--red:#ff7086;--purple:#bd8cff;--orange:#f59e5b;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -12%,#1b3455,#07101b 48%,#050913 100%);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
header{position:sticky;top:0;z-index:50;background:#07101dec;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.brand h1{margin:0;font-size:20px;letter-spacing:.2px}.brand h1 b{color:var(--blue)}.brand p{margin:2px 0 0;color:var(--muted);font-size:11px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab,.btn{background:#12233a;color:#dce9ff;border:1px solid #365275;border-radius:8px;padding:8px 10px}.tab.active,.btn.primary{background:#1c5898;border-color:#5b94d1}.btn.good{background:#194f3b;border-color:#52a57d}.btn.warn{background:#5e4717;border-color:#967831}.btn.danger{background:#54202b;border-color:#8d394b}
.layout{display:grid;grid-template-columns:255px 1fr;min-height:calc(100vh - 67px)}
aside{background:#091321;border-right:1px solid var(--line);padding:11px;overflow:auto}.group{margin-bottom:15px}.group h3{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#6e83a2;margin:0 0 5px}.alg{display:block;width:100%;text-align:left;background:transparent;color:#c8d5e9;border:1px solid transparent;border-radius:7px;padding:7px 8px;margin:2px 0}.alg.active{background:#17365c;border-color:#365f8f;color:white}.alg:hover{background:#122037}
main{max-width:1650px;width:100%;padding:15px;margin:auto}.toolbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px}.toolbar label{font-size:11px;color:var(--muted)}input,select,textarea{background:#07111f;color:white;border:1px solid #304865;border-radius:7px;padding:7px}.grow{flex:1}.range{accent-color:var(--blue)}
.grid{display:grid;grid-template-columns:1.45fr .9fr;gap:12px;margin-top:12px}.card{background:linear-gradient(180deg,#0e192a,#0b1523);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}.full{grid-column:1/-1}.card h2{font-size:13px;margin:0 0 8px}.card h3{font-size:11px;margin:12px 0 5px;color:#cfdaeb}
#visual{height:450px;border:1px solid #1e314c;border-radius:10px;background:linear-gradient(#091321,#091522);display:flex;align-items:center;justify-content:center;overflow:auto;position:relative}
.bars{height:365px;display:flex;align-items:flex-end;gap:4px;padding:28px 10px}.bar{position:relative;width:28px;min-width:10px;border-radius:5px 5px 2px 2px;background:linear-gradient(#67a8ff,#2e5f9e);transition:height .12s,transform .12s;cursor:pointer}.bar .v{position:absolute;top:-18px;width:100%;text-align:center;font-size:9px}.bar.compare{background:var(--red);outline:2px solid var(--red)}.bar.write{background:#b97720;outline:2px solid var(--yellow)}.bar.sorted{background:#268655}.bar.current{outline:2px solid var(--blue)}.bar.pivot{background:#6d4193;outline:2px solid var(--purple)}.bar.target{outline:3px solid var(--cyan)}
.kpis{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.kpi{font-size:10px;background:#07111f;border:1px solid #263a56;border-radius:7px;padding:6px 8px;color:var(--muted)}.kpi b{color:#fff}.legend{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:10px;margin-top:6px}.dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:3px}
.explain{color:#c6d3e7;line-height:1.6}.explain strong{color:white}.hint{font-size:10px;color:var(--muted);margin-top:6px}.log{height:165px;overflow:auto;background:#050a12;border:1px solid #1c2a40;border-radius:7px;padding:8px;font:10px/1.5 ui-monospace,monospace;color:#aebbd0}.log div{margin-bottom:3px}
pre{margin:0;background:#050a12;border:1px solid #1c2a40;border-radius:7px;padding:9px;overflow:auto;max-height:270px;color:#dce7ff;font:10px/1.5 ui-monospace,monospace}
.stepbar{display:flex;align-items:center;gap:6px;margin-top:7px}.stepbar input{flex:1}.chip{display:inline-block;padding:4px 6px;border-radius:99px;background:#12243c;border:1px solid #2d4d70;color:#c2d3e9;font-size:10px}.tag{display:inline-block;padding:3px 6px;border-radius:6px;background:#132841;border:1px solid #2f527a;color:#9fcaff;font-size:9px}
.ds{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;padding:45px}.node{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#22476f;border:2px solid #5b86bc}.node.hot{background:#75452b;border-color:var(--yellow)}.node.done{background:#246d4c;border-color:var(--green)}.node.top{box-shadow:0 0 0 3px var(--blue)}.link{width:26px;height:2px;background:#5a7195}.queue .node{border-radius:8px}
.tree{position:relative;width:820px;min-width:720px;height:390px}.tree svg{position:absolute;inset:0;width:100%;height:100%}.tree line{stroke:#5b7394;stroke-width:1.5}.tnode{position:absolute;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#22476f;border:2px solid #5b86bc;font-size:11px}.tnode.hot{background:#75452b;border-color:var(--yellow)}
.matrixwrap{padding:14px;overflow:auto;max-width:100%}.matrix{border-collapse:collapse;font-size:10px}.matrix th,.matrix td{border:1px solid #30445e;padding:6px 8px;text-align:center;min-width:32px}.matrix th{background:#14243a;color:#bacbe0}.matrix td.hot{background:#735027;color:white}.matrix td.done{background:#21553f}
.string{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;padding:30px}.char{width:32px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#1a2e49;border:1px solid #385476;font:14px ui-monospace,monospace}.char.hot{background:#75452b;border-color:var(--yellow)}.char.match{background:#245f4a;border-color:var(--green)}
.bits{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:40px}.bit{width:27px;height:52px;display:flex;align-items:center;justify-content:center;background:#162944;border:1px solid #35506f;border-radius:6px;font:18px ui-monospace,monospace}.bit.one{background:#204f3f;border-color:#4ca37c}.bit.hot{outline:2px solid var(--yellow)}
.board{display:grid;grid-template-columns:repeat(12,26px);grid-auto-rows:26px;gap:2px;background:#182641;padding:5px}.sq{background:#0e1a2d;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:13px}.sq.q{background:#214e84}.sq.attack{background:#6c323e}.sq.queen{background:#278054}.sq.path{background:#ad7d1e}.sq.wall{background:#02050a}
.gridboard{display:grid;grid-template-columns:repeat(32,18px);grid-auto-rows:18px;gap:1px;background:#172139;padding:4px}.cell{background:#0d1726}.cell.wall{background:#020409}.cell.start{background:#29a86c}.cell.goal{background:#cb5368}.cell.open{background:#376aa0}.cell.visited{background:#28476f}.cell.path{background:#ffd166}
.canvas{background:#091322;border:1px solid #243750;border-radius:8px;max-width:100%;height:auto}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rule{background:#08111d;border:1px solid #22354d;border-radius:7px;padding:8px;margin:5px 0}.fact{display:inline-block;background:#1b3d31;border:1px solid #34765c;color:#c7f4df;border-radius:6px;padding:4px 6px;font-size:10px;margin:2px}
@media(max-width:1000px){header{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr}aside{display:flex;gap:16px;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.group{min-width:170px}.grid{grid-template-columns:1fr}}