:root{
  color-scheme: dark;
  --bg:#0f1115; --panel:#171a21; --muted:#9aa3ad; --text:#e5e7eb;
  --accent:#22d3ee; --border:#2a2f3a;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --vh: 1vh; /* set by JS for mobile */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:#111827; border-bottom:1px solid var(--border);
  padding:.8rem 1rem; display:flex; gap:.4rem; align-items:center;
}
.muted{color:var(--muted)}

/* Layout */
.wrap{max-width:1100px; margin:0 auto; padding:10px 12px 78px;}

/* Settings panel (collapsible) */
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.settings-summary{
  list-style:none; cursor:pointer; padding:.9rem 1rem; font-weight:700;
  outline:none; display:flex; align-items:center; gap:.5rem;
}
.settings[open] .settings-summary{border-bottom:1px solid var(--border)}
.settings-grid{
  display:grid; gap:10px; padding:10px; grid-template-columns:1fr 1fr;
}
@media (max-width:680px){ .settings-grid{grid-template-columns:1fr} }

.control{display:flex; flex-direction:column; gap:.35rem; color:var(--muted)}
.control select, .control input[type="number"]{
  appearance:none; width:100%;
  background:#0b0f16; color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:.65rem .7rem;
  font:inherit;
}
.switch{flex-direction:row; align-items:center; gap:.6rem}
.switch input{width:1.2rem; height:1.2rem}

/* Editor area fills screen height minus top + action bar */
.editor{
  margin-top:10px;
  height: calc((var(--vh) * 100) - 56px - 64px - 74px); /* viewport - topbar - settings approx - actionbar */
}
@media (min-width:681px){ .editor{height: calc((var(--vh) * 100) - 56px - 74px);} }

#code{
  width:100%; height:100%; resize:none;
  background:#0b0f16; color:#e5e7eb;
  border:1px solid var(--border); border-radius:12px;
  padding:14px; font:14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}

/* Sticky bottom action bar sized for thumbs */
.actionbar{
  position:fixed; left:0; right:0; bottom:0;
  background:#111827; border-top:1px solid var(--border);
  padding:10px 12px calc(10px + var(--safe-b));
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; z-index:30;
}
.actionbar button{
  height:48px; border-radius:12px; border:1px solid var(--border);
  background:#171a21; color:var(--text); font-weight:700; letter-spacing:.2px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.actionbar button:active{transform:translateY(1px)}
.actionbar button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Desktop tweaks */
@media (min-width:900px){
  .actionbar{position:sticky; bottom:auto; top:0; grid-template-columns:auto auto auto; justify-content:end}
  .wrap{padding-bottom:20px}
  .actionbar button{min-width:120px}
}