:root{
  --bg:#0a0e17;
  --panel:#0f1428;
  --border:#1a2142;
  --text:#e9eefc;
  --muted:#9aa4c7;
  --primary:#00e6f6; /* align to site */
  --success:#16a34a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 70% 0%, #101727 0%, #0a0e17 60%, #090f1c 100%);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.app{display:grid; grid-template-columns: 380px 1fr; min-height:100vh}

aside.panel{
  background:linear-gradient(180deg, #0f1428 0%, #0b1020 100%);
  border-right:1px solid var(--border);
  padding:24px 24px 32px 24px;
}

.logo{width:40px; height:auto}
header{display:flex; align-items:center; gap:12px}
header h1{font-size:20px; margin:0; font-weight:800}
.sub{margin:4px 0 0 52px; color:var(--muted); font-size:12px}

.form{margin-top:16px; display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:8px}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row{display:flex; gap:8px; align-items:center}
label{font-size:12px; color:var(--muted)}
input, select{
  background:#0b1020;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

.btn{
  background:#141a33;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{border-color:#2a3568}
.btn.primary{background:var(--primary); border-color:transparent; font-weight:700}
.btn.success{background:var(--success); border-color:transparent; font-weight:700}
.btn.outline{background:transparent}

.actions{display:flex; gap:12px}

/* tips removed in simplified UI */

main.stage{display:flex; align-items:center; justify-content:center; padding:24px}
.canvas-wrap{background:#0b1020; border:1px solid var(--border); padding:16px; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
canvas{display:block; image-rendering: -webkit-optimize-contrast; max-width:100%; height:auto}
main.stage{overflow:auto; display:flex; align-items:flex-start; justify-content:center}
.canvas-wrap{display:inline-block}

@media (max-width: 1000px){
  .app{grid-template-columns:1fr}
  aside.panel{border-right:0; border-bottom:1px solid var(--border)}
}