:root{
  --bg:#0e1116; --ink:#f3f6ff; --muted:#96a0b5; --card:#171b23; --accent:#7bdff6; --accent2:#f6ae2d; --accent3:#c084fc; --good:#2ecc71; --bad:#e74c3c;
  --ring:0 0 0 2px rgba(123,223,246,.25), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0d1015 0%,#0b0e13 100%);
  color:var(--ink); font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; flex-direction:column;
}

.topbar{
  display:flex; align-items:center; gap:16px; padding:10px 14px; border-bottom:1px solid #1f2430;
  position:sticky; top:0; background:#0f1320; z-index:10;
}
.topbar h1{font-size:18px; margin:0; letter-spacing:.3px}
.mode-switch{margin-left:auto; display:flex; gap:8px}
.mode-switch .tab{
  background:#1a2030; color:#cfe3ff; border:1px solid #242a3a; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.mode-switch .tab.active{outline:2px solid #7bdff6; background:#162032}
.actions{display:flex; gap:8px}
.actions button{
  background:#1f2637; color:#e8f1ff; border:1px solid #283149; padding:8px 12px; border-radius:8px; cursor:pointer;
}
.actions button:hover{filter:brightness(1.1)}

.app{flex:1; display:grid; grid-template-columns: 320px 1fr 320px; gap:12px; padding:12px; min-height:0}
.panel{
  background:var(--card); border:1px solid #1f2430; border-radius:12px; padding:12px; box-shadow:var(--ring); min-height:0; overflow:auto;
}
.panel h2{margin:6px 0 10px; font-size:16px}
.picker{margin-bottom:12px}
.picker h3{margin:8px 0; font-size:14px; color:var(--muted)}
.swatches{display:grid; grid-template-columns: repeat(4, 1fr); gap:6px}
.swatch{
  background:#22283a; border:1px solid #2a334a; border-radius:8px; padding:6px; cursor:pointer; text-align:center; font-size:12px;
}
.swatch:hover{outline:2px solid #38466a}

.stage{
  display:flex; align-items:center; justify-content:center; min-width:0; min-height:0;
}
#stage{
  background:#fff; width:100%; height:100%; max-width:720px; max-height:960px; border-radius:12px; border:1px solid #dde3f5; box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.toolrow{display:flex; gap:8px; margin-bottom:8px}
.tool{
  background:#1f2637; border:1px solid #2b3450; color:#dbe7ff; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.tool.active{outline:2px solid var(--accent2); background:#2a3147}
.row{display:flex; align-items:center; gap:8px; margin:8px 0}
.row label{min-width:90px; color:#cdd8f6; font-size:14px}
input[type="color"]{width:36px; height:36px; border:none; background:transparent; padding:0; cursor:pointer}
input[type="range"]{flex:1}

.palette{display:grid; grid-template-columns: repeat(6, 1fr); gap:6px}
.swatchColor{
  width:100%; aspect-ratio:1/1; border-radius:8px; border:1px solid rgba(255,255,255,.15); cursor:pointer;
}

.foot{padding:8px 14px; border-top:1px solid #1f2430; color:#aeb8d6; background:#0f1320}
button{transition:transform .06s ease}
button:active{transform:scale(.98)}

@media (max-width: 1100px){
  .app{grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .panel.left{order:1}
  .stage{order:2}
  .panel.right{order:3}
}