:root{
  --bg:#12131c;
  --panel:#1a1c28;
  --panel2:#20222f;
  --border:#2b2e40;
  --text:#c9d1e0;
  --dim:#6b7189;
  --cyan:#56d4c9;
  --green:#7ee787;
  --amber:#e3b341;
  --pink:#ff6ac1;
  --red:#ff6b6b;
  --active:#2d3350;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --disp:'Bricolage Grotesque', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(86,212,201,.08), transparent),
    radial-gradient(900px 500px at 0% 110%, rgba(255,106,193,.06), transparent),
    var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
}
#root{height:100%;}
.app{display:flex;flex-direction:column;min-height:100vh;}

/* header */
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  background:linear-gradient(180deg,#171926,#13151f);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:baseline;gap:8px;}
.berry{font-size:20px;}
.title{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:-.5px;color:#fff;}
.cursor{color:var(--green);animation:blink 1s steps(2,start) infinite;font-weight:800;}
@keyframes blink{to{opacity:0;}}
.subtitle{color:var(--dim);font-size:12.5px;}
.header-right{display:flex;gap:10px;align-items:center;}
.ex-select{
  background:var(--panel2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:12.5px;cursor:pointer;
}
.help-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--panel2);color:var(--cyan);font-weight:800;cursor:pointer;font-size:15px;
}
.help-btn:hover{border-color:var(--cyan);}

/* split */
.split{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 20px;min-height:0;}
.pane{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;min-height:340px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.pane-head{
  padding:8px 14px;font-size:11.5px;color:var(--dim);letter-spacing:1px;text-transform:lowercase;
  border-bottom:1px solid var(--border);background:var(--panel2);
}

/* editor */
.editor-wrap{flex:1;display:flex;overflow:auto;background:#15161f;min-height:220px;}
.gutter{
  padding:12px 6px 12px 12px;text-align:right;color:#40465e;user-select:none;
  font-size:13px;line-height:1.55;border-right:1px solid var(--border);
}
.gnum{padding-right:6px;}
.gline-active{color:var(--amber);font-weight:800;}
.code-area{
  flex:1;background:transparent;color:#a6e6dd;border:none;outline:none;resize:none;
  font-family:var(--mono);font-size:13px;line-height:1.55;padding:12px 14px;
  white-space:pre;overflow:auto;caret-color:var(--green);tab-size:2;
}

/* toolbar */
.toolbar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--panel2);flex-wrap:wrap;}
.tb{
  border:1px solid var(--border);background:#262a3c;color:var(--text);
  border-radius:8px;padding:8px 14px;font-family:var(--mono);font-size:13px;cursor:pointer;
  transition:transform .08s ease,border-color .15s ease,background .15s ease;
}
.tb:hover{transform:translateY(-1px);}
.tb:active{transform:translateY(0);}
.tb-compile:hover{border-color:var(--cyan);color:var(--cyan);}
.tb-run{background:linear-gradient(180deg,#1f5c3a,#164a2d);border-color:#2c7a4d;color:var(--green);font-weight:600;}
.tb-run:hover{background:linear-gradient(180deg,#256e46,#1a5535);}
.tb-step:hover{border-color:var(--amber);color:var(--amber);}
.tb-reset:hover{border-color:var(--red);color:var(--red);}

/* tabs */
.tabbar{display:flex;border-bottom:1px solid var(--border);background:var(--panel2);}
.tab{
  flex:0 0 auto;padding:10px 16px;background:transparent;border:none;color:var(--dim);
  font-family:var(--mono);font-size:12.5px;cursor:pointer;border-bottom:2px solid transparent;
  position:relative;
}
.tab:hover{color:var(--text);}
.tab-active{color:var(--cyan);border-bottom-color:var(--cyan);}
.tab-badge{
  margin-left:6px;background:var(--red);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;
}
.tab-body{flex:1;overflow:auto;padding:0;min-height:200px;}

/* output console */
.console{
  margin:0;padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.6;
  color:var(--green);white-space:pre-wrap;word-break:break-word;min-height:100%;
  background:#0e0f16;
}
.muted{color:var(--dim);}
.pad{padding:16px;}

/* disasm */
.disasm{padding:6px 0;font-size:12.5px;}
.dis-row{
  display:grid;grid-template-columns:60px 70px 1fr 50px;gap:8px;padding:3px 16px;
  align-items:center;
}
.dis-active{background:var(--active);border-left:3px solid var(--amber);}
.dis-addr{color:var(--dim);}
.dis-op{color:var(--cyan);font-weight:600;}
.dis-arg{color:var(--amber);}
.dis-line{color:#454b63;text-align:right;font-size:11px;}

/* vm state */
.vmstate{padding:16px;}
.regs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px;}
.reg{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px;}
.reg-k{display:block;color:var(--dim);font-size:11px;margin-bottom:4px;}
.reg-v{display:block;color:var(--pink);font-size:16px;font-weight:600;}
.stack-title{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.stack-view{display:flex;flex-direction:column;gap:3px;}
.stack-cell{display:flex;justify-content:space-between;padding:6px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;}
.stack-top{border-color:var(--green);background:#1b2a20;}
.sc-i{color:var(--dim);font-size:11px;}
.sc-v{color:var(--text);}

/* errors */
.errlist{padding:12px 16px;}
.err-row{color:var(--red);padding:6px 0;font-size:13px;border-bottom:1px solid rgba(255,107,107,.12);}

/* status bar */
.statusbar{
  display:flex;align-items:center;gap:12px;padding:8px 22px;
  border-top:1px solid var(--border);background:#0f1017;font-size:12px;
}
.st-dot{width:9px;height:9px;border-radius:50%;background:var(--dim);}
.st-ok{background:var(--green);box-shadow:0 0 8px var(--green);}
.st-err{background:var(--red);box-shadow:0 0 8px var(--red);}
.st-idle{background:var(--dim);}
.st-text{color:var(--text);}
.st-meta{color:var(--dim);margin-left:auto;}
.st-meta+.st-meta{margin-left:12px;}

/* footer */
.foot{padding:12px 22px;color:var(--dim);font-size:11.5px;border-top:1px solid var(--border);background:#0d0e15;}
.foot a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan);}
.foot a:hover{color:var(--green);border-color:var(--green);}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(6,7,12,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);font-family:var(--disp);font-weight:700;font-size:17px;color:#fff;}
.modal-x{background:none;border:none;color:var(--dim);font-size:24px;cursor:pointer;line-height:1;}
.modal-x:hover{color:var(--red);}
.modal-body{padding:16px 18px;font-size:13px;line-height:1.7;}
.modal-body code{background:var(--panel2);padding:1px 6px;border-radius:4px;color:var(--cyan);font-size:12px;}
.modal-body ul{padding-left:20px;}
.modal-body li{margin-bottom:6px;}

/* toast */
.toast{
  position:fixed;bottom:60px;left:50%;transform:translateX(-50%);
  background:#1f2333;border:1px solid var(--cyan);color:var(--cyan);
  padding:10px 18px;border-radius:24px;font-size:13px;z-index:60;
  box-shadow:0 8px 30px rgba(0,0,0,.4);animation:toastin .3s ease;
}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* responsive */
@media(max-width:820px){
  .split{grid-template-columns:1fr;}
  .topbar{grid-template-columns:1fr;gap:6px;padding:12px 16px;}
  .subtitle{grid-column:1;}
  .header-right{grid-column:1;}
  .pane{min-height:280px;}
}