:root{
  --bg:#0b0d12;
  --panel:#12151d;
  --text:#e6ecf2;
  --muted:#93a0b4;
  --accent:#4f8cff;
  --accent-2:#ff7043;
  --border:#1e2430;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}

.brand{font-weight:700;letter-spacing:.5px;margin-bottom:8px}

.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.controls label{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
select,input[type="range"],button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px}
select{padding:6px 8px}
input[type="range"]{accent-color:var(--accent)}
button{padding:8px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}

.controls__row{display:flex;gap:8px;align-items:center}
.slider{gap:8px}
.toggle{gap:6px}
.muted{color:var(--muted)}

.main{
  display:grid;grid-template-columns:1fr 1fr 320px;gap:12px;padding:12px;height:100vh;
}
.main--three-cols{grid-template-columns: 1fr 1fr 340px}
.view{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:12px;min-height:40vh}
.view__title{padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted)}
.canvas-wrap{flex:1;position:relative}
.canvas-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.view--overview .canvas-wrap canvas{pointer-events:auto}
.view--shot .canvas-wrap canvas{pointer-events:none}

.sidebar{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;overflow:auto}
.section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:rgba(255,255,255,0.02)}
.section__title{font-size:12px;color:var(--muted);letter-spacing:.4px}

/* footer removed for full-screen */

@media (max-width: 980px){
  .main{grid-template-columns:1fr;grid-auto-rows: minmax(300px, auto)}
  .sidebar{order:-1}
}