/* style.css — all styling */
:root{
  color-scheme: dark;
  --bg:#0c1117; --panel:#141b24; --panel-2:#1a232e; --border:#26303c; --fg:#e6edf3; --muted:#8a97a7;
  --accent:#3b82f6; --accent-2:#60a5fa; --canvas-bg:#070a0f; --canvas-area-bg:#0e141c;
  --grid-minor:rgba(255,255,255,0.11); --grid-major:rgba(255,255,255,0.30); --grid-border:rgba(96,165,250,0.85);
  --shadow:0 10px 32px rgba(0,0,0,0.45); --radius:12px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#eef2f8; --panel:#ffffff; --panel-2:#f3f6fb; --border:#e2e8f0; --fg:#0f172a; --muted:#5b6779;
    --accent:#2563eb; --accent-2:#1d4ed8; --canvas-bg:#dbe2ec; --canvas-area-bg:#ffffff;
    --grid-minor:rgba(15,23,42,0.13); --grid-major:rgba(15,23,42,0.34); --grid-border:rgba(37,99,235,0.9);
    --shadow:0 10px 32px rgba(15,23,42,0.12);
  }
}
html[data-theme="light"]{
  color-scheme: light;
  --bg:#eef2f8; --panel:#ffffff; --panel-2:#f3f6fb; --border:#e2e8f0; --fg:#0f172a; --muted:#5b6779;
  --accent:#2563eb; --accent-2:#1d4ed8; --canvas-bg:#dbe2ec; --canvas-area-bg:#ffffff;
  --grid-minor:rgba(15,23,42,0.13); --grid-major:rgba(15,23,42,0.34); --grid-border:rgba(37,99,235,0.9);
  --shadow:0 10px 32px rgba(15,23,42,0.12);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,0.10), transparent 60%), var(--bg);
  color:var(--fg); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
.app{ display:flex; flex-direction:column; height:100vh; }

/* topbar */
.topbar{ display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff; font-size:20px; box-shadow:0 4px 14px rgba(59,130,246,0.4); }
.brand-text h1{ margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; }
.brand-text p{ margin:0; font-size:12px; color:var(--muted); }
.sizes{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.size-btn{ background:var(--panel-2); border:1px solid var(--border); color:var(--fg);
  padding:6px 10px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.size-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.size-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.top-actions{ display:flex; gap:8px; align-items:center; }
.ghost,.ghost-small{ background:var(--panel-2); border:1px solid var(--border); color:var(--fg);
  border-radius:8px; cursor:pointer; font-weight:600; transition:.15s; }
.ghost{ padding:7px 12px; font-size:13px; }
.ghost-small{ padding:5px 9px; font-size:12px; }
.ghost:hover,.ghost-small:hover{ border-color:var(--accent); color:var(--accent-2); }
.ghost.icon{ padding:7px 10px; font-size:14px; }

/* stage */
.stage{ flex:1; display:flex; min-height:0; }
.rail{ width:228px; flex:0 0 228px; background:var(--panel); border-right:1px solid var(--border);
  padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:18px; }
.section{ display:flex; flex-direction:column; gap:8px; }
.label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.palette{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.swatch{ aspect-ratio:1; border:2px solid transparent; border-radius:7px; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); transition:transform .12s, border-color .12s; }
.swatch:hover{ transform:scale(1.08); }
.swatch.active{ border-color:var(--accent-2); box-shadow:0 0 0 2px var(--accent), inset 0 0 0 1px rgba(0,0,0,0.25); transform:scale(1.05); }
.brushes{ display:flex; flex-wrap:wrap; gap:6px; }
.brush{ display:flex; align-items:center; gap:7px; background:var(--panel-2); border:1px solid var(--border);
  color:var(--fg); padding:6px 9px; border-radius:8px; cursor:pointer; min-width:54px; transition:.15s; }
.brush:hover{ border-color:var(--accent); }
.brush.active{ border-color:var(--accent); background:rgba(59,130,246,0.15); }
.brush-dot{ background:var(--fg); border-radius:50%; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,0.2); }
.brush-n{ font-size:12px; font-weight:600; color:var(--muted); }
.brush.active .brush-n{ color:var(--fg); }
.tools{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.tool{ display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--panel-2);
  border:1px solid var(--border); color:var(--fg); padding:9px 4px; border-radius:9px; cursor:pointer;
  font-size:11px; font-weight:600; transition:.15s; }
.tool .ic{ font-size:17px; line-height:1; }
.tool:hover{ border-color:var(--accent); transform:translateY(-1px); }
.tool.active{ border-color:var(--accent); background:rgba(59,130,246,0.18); color:var(--accent-2); }
.hint{ margin-top:auto; }
.hint p{ margin:2px 0; font-size:11px; color:var(--muted); }
kbd{ background:var(--panel-2); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px;
  padding:1px 5px; font-size:10px; font-family:ui-monospace,Menlo,monospace; color:var(--fg); }

/* canvas */
.canvas-wrap{ flex:1; position:relative; min-width:0; background:
  repeating-conic-gradient(transparent 0 25%, rgba(255,255,255,0.015) 0 50%) 0 0/24px 24px,
  var(--canvas-bg); }
#grid{ display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.zoom-controls{ position:absolute; left:14px; bottom:14px; display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:var(--shadow); }
.zoom-controls button{ width:30px; height:30px; display:grid; place-items:center; background:var(--panel-2);
  border:1px solid var(--border); color:var(--fg); border-radius:7px; cursor:pointer; font-size:16px; font-weight:700; transition:.15s; }
.zoom-controls button:hover{ border-color:var(--accent); color:var(--accent-2); }
#zoomLabel{ font-size:12px; font-weight:600; color:var(--muted); min-width:54px; text-align:center; font-variant-numeric:tabular-nums; }
.status{ position:absolute; right:14px; bottom:14px; background:var(--panel); border:1px solid var(--border);
  color:var(--muted); font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; box-shadow:var(--shadow);
  font-variant-numeric:tabular-nums; }

/* responsive */
@media (max-width:760px){
  .topbar{ padding:8px 10px; gap:10px; }
  .brand-text p{ display:none; }
  .sizes{ order:3; width:100%; margin-left:0; }
  .top-actions{ margin-left:auto; }
  .stage{ flex-direction:column; }
  .rail{ flex-basis:auto; width:100%; height:auto; flex-direction:row; overflow-x:auto; padding:10px; gap:14px; border-right:none; border-bottom:1px solid var(--border); }
  .rail .section{ flex:0 0 auto; min-width:150px; }
  .hint{ display:none; }
  .palette{ grid-template-columns:repeat(8,1fr); }
}
@media (max-width:420px){
  .brand-text h1{ font-size:14px; }
  .size-btn{ padding:5px 7px; font-size:11px; }
  .ghost{ padding:6px 9px; font-size:12px; }
}