/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #0f172a; color: #e6eef8; }

/* Layout */
.app { display: grid; grid-template-columns: 320px 1fr; gap: 16px; height: 100vh; padding: 16px; }

/* Responsive */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 10px; }
  .sidebar { order: -1; width: 100%; display:flex; }
}

.sidebar { background: linear-gradient(180deg,#0b1220,#0f1a2b); border-radius: 12px; padding: 16px; width: 320px; display:flex; flex-direction:column; gap:12px; box-shadow: 0 6px 18px rgba(2,6,23,0.6); }
.title { font-weight:700; font-size:18px; letter-spacing:0.2px; }
.controls { display:flex; flex-direction:column; gap:10px; }

.row { display:flex; gap:8px; align-items:center; }
.label { font-size:13px; color:#b9c6d9; width:110px; }

/* Color swatches */
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:6px; border:2px solid rgba(255,255,255,0.06); cursor:pointer; box-shadow: 0 2px 6px rgba(2,6,23,0.5); }
.swatch.active { outline:3px solid rgba(255,255,255,0.12); }

input[type=range] { width:100%; }
input[type=color] { height:40px; width:60px; border:none; background:transparent; }

.btns { display:flex; gap:8px; flex-wrap:wrap; }
button { background:#0b1220; color:#e6eef8; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
button.secondary { background:transparent; border:1px solid rgba(255,255,255,0.06); }
button.danger { background:#ff4d4f; color:white; }

.canvas-wrap { background: linear-gradient(180deg,#071226,#081427); border-radius:12px; padding:12px; display:flex; flex-direction:column; }
.topbar { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.board { background:white; border-radius:8px; overflow:hidden; flex:1; position:relative; display:flex; }
canvas { display:block; width:100%; height:100%; touch-action: none; }

.tips { font-size:12px; color:#9fb0ca; }
.footer { margin-top:8px; font-size:12px; color:#8fa6c1; text-align:right; }

/* Small helpers */
.flex { display:flex; }
.center { align-items:center; }
.space { justify-content:space-between; }