:root {
  --bg:#0f1115; 
  --panel:#171923;
  --muted:#2a2f3a; 
  --text:#e8eef7;
  --acc:#67e8f9; 
  --btn:#222736;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial;
  color:var(--text);
  background:linear-gradient(180deg,#0e1014,#0b0d12);
}
header {
  padding:18px 20px;
  display:flex; 
  gap:12px; 
  align-items:center; 
  justify-content:space-between;
  background:var(--panel); 
  border-bottom:1px solid #222;
}
header h1 { 
  font-size:clamp(18px,2.6vw,22px); 
  margin:0; 
  font-weight:700; 
}
.app {
  display:grid; 
  grid-template-columns:1fr; 
  gap:16px; 
  padding:18px;
  max-width:1200px; 
  margin:0 auto;
}
@media(min-width:980px){ 
  .app{ grid-template-columns:360px 1fr; 
    align-items:start; } 
  }
.card {
  background:var(--panel); 
  border:1px solid #222735; 
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card .inner { 
  padding:16px; 
}
.controls { 
  display:grid; 
  gap:10px; 
}
label { 
  font-size:12px; 
  opacity:.9; 
}
input[type="file"], select, button {
  width:100%; 
  background:var(--btn); 
  color:var(--text);
  border:1px solid var(--muted); 
  border-radius:10px; 
  padding:10px 12px; 
  font-size:14px;
}
button { 
  cursor:pointer; 
  transition:.2s transform; 
}
button:hover { 
  transform:translateY(-1px); 
}
.btn-row { 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:10px; 
}
.btn-row-3 { 
  display:grid; 
  grid-template-columns:1fr 1fr 1fr; 
  gap:10px; 
}
.note { 
  font-size:12px; 
  opacity:.8; 
}
canvas { 
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:14px; 
}
.footer {
  padding:10px 16px; 
  font-size:12px; 
  opacity:.75;
  display:flex; 
  justify-content:space-between; 
  align-items:center;
}
.brand { 
  opacity:.7; 
}
.toggle { 
  display:flex; 
  align-items:center; 
  gap:8px; 
}