:root {
    --bg:#f4f7fb;
    --card:#fff;
    --accent:#4CAF50;
    --danger:#f44336;
    --muted:#666;
    --border:#d0d6e0;
    --font: "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font); background:var(--bg); color:#111; padding:16px;}
.container{max-width:1100px;margin:0 auto; display:flex; flex-direction:column; gap:18px;}
.panel{background:var(--card); border:1px solid #e6ebf3; border-radius:10px; padding:14px; box-shadow:0 8px 24px rgba(20,40,80,0.04);}
.section-title{ font-weight:700; margin:0 0 6px 0; font-size:18px;}
.row{ display:flex; gap:12px; align-items:flex-start; }
.left-col{flex:1; min-width:280px;}
.right-col{width:300px; flex-shrink:0;}
label{display:block; font-weight:600; margin-top:8px; margin-bottom:6px;}
input[type=text], select{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); font-size:15px; }
button{ padding:9px 12px; border-radius:8px; border:none; background:var(--accent); color:white; font-weight:700; cursor:pointer; }
button.secondary{ background:#6c757d; }
.controls{ display:flex; gap:8px; margin-top:10px; }
.controls button{ flex:1; }
.small-note{ font-size:13px; color:var(--muted); margin-top:8px; }

.viz-box{ background:#fff; border-radius:8px; padding:12px; border:1px solid #e8eef8; }
.stack-container{
    width:100%;
    min-height:180px;
    max-height:360px;
    overflow:auto;
    border-radius:8px;
    border:2px dashed #dfe7f3;
    padding:8px;
    display:flex;
    flex-direction: column-reverse;
    gap:4px;
    background:#fbfeff;
}

.stack-row{ display:flex; align-items:center; justify-content:flex-start; }

.col-middle{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    border-left:1px solid #c9d1df;
    border-right:1px solid #c9d1df;
    padding:4px;
    min-height:36px;
}

.stack-item{
    background:var(--accent);
    color:#fff;
    padding:4px 8px;
    border-radius:6px;
    font-weight:700;
    min-width:36px;
    max-width:100px;
    text-align:center;
    transition:transform .18s ease, background .12s ease;
    word-break:break-word;
    font-size:14px;
}

.stack-item.highlight{ background:var(--danger); transform:scale(1.06); }

.col-index{
    width:36px;
    text-align:center;
    font-size:13px;
    padding-left:2px;
    border-left:1px solid #c9d1df;
    color:#222;
}

.output-line{ min-height:40px; border-radius:6px; background:#fff; padding:8px; border:1px dashed #dfeee6; margin-top:8px; font-weight:700; }
.step-desc{ margin-top:8px; background:#f5f8ff; border:1px solid #e2eaff; padding:8px; border-radius:6px; font-size:14px; min-height:44px; }
@media (max-width:980px){ .row{ flex-direction:column; } .right-col{ width:100%; } }