:root {
  color-scheme: dark;
  --bg: #09111f;
  --panel: #111b2e;
  --panel-2: #17243d;
  --line: #2c426d;
  --text: #f4f7ff;
  --muted: #9db0d3;
  --blue: #4ea6ff;
  --orange: #ff9a3c;
  --green: #52d67f;
  --purple: #c267ff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: linear-gradient(180deg, #08101d, #101b31); color: var(--text); }
.app-shell { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }
.sidebar, .editor { padding: 20px; }
.sidebar { border-right: 1px solid var(--line); background: rgba(8,16,29,.72); }
.sidebar-header { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
button, input { border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
button { padding: 12px 16px; cursor: pointer; font-weight: 700; }
button.primary { background: #245fe3; }
button.danger { background: #7c2744; }
input { padding: 10px 12px; width: 100%; }
.level-list { display:flex; flex-direction:column; gap:10px; }
.level-item { padding: 12px; background: var(--panel); border:1px solid var(--line); border-radius: 14px; cursor:pointer; }
.level-item.active { outline: 2px solid #6ca8ff; }
.level-item small { display:block; color: var(--muted); margin-top:6px; }
.toolbar { display:grid; grid-template-columns: 2fr repeat(4, minmax(100px, 140px)); gap:14px; margin-bottom: 18px; }
.field-group { display:flex; flex-direction:column; gap:8px; }
.field-group label { color: var(--muted); font-size: 14px; }
.legend { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:16px; color: var(--muted); }
.legend .hint { margin-left:auto; }
.cell { width:18px; height:18px; display:inline-block; border-radius:50%; border:1px solid rgba(255,255,255,.15); vertical-align:middle; margin-right:8px; background: transparent; }
.cell.blue, .grid-cell.blue { background: var(--blue); }
.cell.orange, .grid-cell.orange { background: var(--orange); }
.cell.green, .grid-cell.green { background: var(--green); }
.cell.purple, .grid-cell.purple { background: var(--purple); }
.grid-wrap { background: var(--panel); border:1px solid var(--line); border-radius: 18px; padding: 18px; overflow:auto; }
.level-grid { display:grid; gap:8px; justify-content:start; }
.grid-cell { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background: transparent; cursor:pointer; }
.actions { display:flex; gap:12px; margin: 18px 0 24px; }
.format-box { background: var(--panel); border:1px solid var(--line); border-radius: 18px; padding: 18px; }
pre { overflow:auto; background:#09111f; padding:16px; border-radius:14px; border:1px solid var(--line); color:#d2e2ff; }
@media (max-width: 1100px) { .app-shell { grid-template-columns: 1fr; } .toolbar { grid-template-columns: 1fr 1fr; } .legend .hint { width:100%; margin-left:0; } }