:root{
  --bg:#0f1115;
  --bg-elev:#161922;
  --bg-elev-2:#1e222e;
  --border:#2a2f3d;
  --text:#e6e8ee;
  --text-dim:#9aa1b2;
  --accent:#6ee7b7;
  --accent-2:#7dd3fc;
  --danger:#f87171;
  --radius:10px;
  --mono:"SF Mono","Cascadia Code","Fira Code",Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
}
[data-theme="light"]{
  --bg:#f5f6f8;
  --bg-elev:#ffffff;
  --bg-elev-2:#eceef2;
  --border:#dde1e8;
  --text:#1a1d24;
  --text-dim:#5b6272;
  --accent:#059669;
  --accent-2:#0284c7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg-elev);
  flex:0 0 auto;
}
a.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.2px;
  color:var(--text);
}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.topbar-links{display:flex;gap:14px;align-items:center}
.topbar-links a{
  font-size:13px;
  color:var(--text-dim);
  transition:color .15s;
}
.topbar-links a:hover{color:var(--text)}
.toggle-btn{
  border:1px solid var(--border);
  background:var(--bg-elev-2);
  color:var(--text);
  width:64px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
  font-size:12.5px;
  font-family:var(--sans);
}
.toggle-btn:hover{border-color:var(--accent-2)}
main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto}

/* Landing page */
.hero{
  max-width:980px;
  margin:0 auto;
  padding:64px 24px 24px;
  text-align:center;
}
.hero h1{
  font-size:clamp(28px,4vw,44px);
  margin:0 0 12px;
  background:linear-gradient(135deg,var(--text),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
}
.hero p{color:var(--text-dim);font-size:16px;max-width:560px;margin:0 auto}
.cards{
  max-width:980px;
  margin:40px auto 80px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  transition:transform .15s,border-color .15s;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent-2)}
.card .badge{
  width:38px;height:38px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  font-family:var(--mono);
  font-weight:700;
  color:var(--accent);
  background:var(--bg-elev-2);
}
.card h3{margin:0;font-size:17px}
.card p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.5}
.card .go{
  margin-top:auto;
  font-size:12.5px;
  color:var(--accent);
  font-weight:600;
}

/* Toolbar shared by tool pages */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:var(--bg-elev);
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
  flex-wrap:wrap;
}
select,button.btn{
  background:var(--bg-elev-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 10px;
  font-size:13px;
  cursor:pointer;
  font-family:var(--sans);
}
button.btn:hover{border-color:var(--accent-2)}
button.btn.primary{border-color:var(--accent);color:var(--accent)}
.spacer{flex:1}
.tag{
  font-size:11.5px;
  color:var(--text-dim);
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  padding:3px 8px;
  border-radius:6px;
}

/* Layouts */
.split{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}
.split.vertical{flex-direction:column}
.pane{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  flex:1;
}
.pane + .pane{border-left:1px solid var(--border)}
.split.vertical .pane + .pane{border-left:none;border-top:1px solid var(--border)}
.pane-header{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text-dim);
  padding:6px 10px;
  background:var(--bg-elev);
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
}
.pane-body{flex:1;min-height:0}
iframe{width:100%;height:100%;border:0;background:#fff}
.CodeMirror{height:100% !important;font-family:var(--mono);font-size:13.5px}
#monaco-container{width:100%;height:100%}

[data-resizable]{display:flex;min-height:0}
[data-resizable][data-resize-direction="vertical"]{flex-direction:column}
.resize-handle{
  flex:0 0 6px;
  background:var(--border);
  cursor:col-resize;
  position:relative;
}
[data-resizable][data-resize-direction="vertical"] .resize-handle{cursor:row-resize}
.resize-handle:hover,.resize-handle:active{background:var(--accent-2)}
.resize-handle::after{
  content:"";
  position:absolute;
  inset:0;
}

.output-pane{background:var(--bg);font-family:var(--mono);font-size:12.5px;overflow:auto;padding:8px 12px}
.output-line{padding:3px 0;border-bottom:1px solid var(--border);white-space:pre-wrap;word-break:break-word}
.output-line:last-child{border-bottom:none}
.output-error{color:var(--danger)}
.output-warn{color:#facc15}
.output-log{color:var(--text)}

footer.note{
  padding:8px 14px;
  font-size:11.5px;
  color:var(--text-dim);
  text-align:center;
  border-top:1px solid var(--border);
  background:var(--bg-elev);
}
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 16px;
  border-radius:8px;
  font-size:13px;
  opacity:0;
  transition:opacity .18s,transform .18s;
  z-index:50;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
footer.note code{
  font-family:var(--mono);
  background:var(--bg-elev-2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
  font-size:11px;
}