@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:#6366F1;--secondary:#818CF8;--accent:#22D3EE;
  --bg:#0F172A;--surface:#1E293B;--surface2:#334155;
  --text:#E2E8F0;--text-dim:#94A3B8;--border:#334155;
  --radius:12px;--font:'Inter',system-ui,sans-serif;
}

html{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6}
body{min-height:100vh;display:flex;flex-direction:column}

.header{padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.header h1{font-size:1rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-actions{display:flex;gap:.3rem;flex-wrap:wrap}

.btn{padding:.35rem .7rem;border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font)}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--secondary)}
.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}.btn-ghost:hover{background:var(--surface);color:var(--text)}

.main{flex:1;display:grid;grid-template-columns:1fr 240px;gap:1rem;padding:1rem;max-width:960px;width:100%;margin:0 auto}

/* Canvas */
.canvas-area{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#000}
.canvas-area canvas{display:block;width:100%;height:auto}

/* Control points */
.cp{width:20px;height:20px;border-radius:50%;border:2px solid #fff;position:absolute;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.4);transform:translate(-50%,-50%);transition:box-shadow .15s;z-index:10}
.cp:hover{box-shadow:0 2px 12px rgba(99,102,241,.5)}
.cp:active{cursor:grabbing}

/* Controls sidebar */
.controls{display:flex;flex-direction:column;gap:.75rem}
.control-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem}
.control-group label{font-size:.72rem;font-weight:700;color:var(--text-dim);display:block;margin-bottom:.3rem}

.color-palette{display:flex;flex-wrap:wrap;gap:.3rem}
.color-swatch{width:32px;height:32px;border-radius:8px;border:2px solid var(--border);cursor:pointer;position:relative;transition:border-color .15s}
.color-swatch:hover{border-color:var(--primary)}
.color-swatch.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(99,102,241,.3)}
.color-swatch input[type=color]{opacity:0;position:absolute;inset:0;cursor:pointer;width:100%;height:100%}

.slider{width:100%;appearance:none;background:var(--surface2);height:6px;border-radius:3px;outline:none}
.slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--bg)}

.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.preset-btn{aspect-ratio:1.5;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .15s}
.preset-btn:hover{border-color:var(--primary)}

.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--surface);border:1px solid var(--primary);color:var(--primary);padding:.4rem .8rem;border-radius:8px;font-size:.72rem;font-weight:500;z-index:200;transform:translateY(80px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}
@media(max-width:768px){.main{grid-template-columns:1fr}}