:root {
  --bg: #071310;
  --panel: #10231f;
  --panel-2: #122a24;
  --text: #eef4f1;
  --muted: #9db5ad;
  --line: rgba(255,255,255,0.12);
  --accent: #c8a963;
  --accent-2: #4fb18a;
  --radius: 18px;
  --shadow: 0 16px 50px rgba(0,0,0,0.25);
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:linear-gradient(180deg,#06100e,#0a1b17 55%,#0c211c); color:var(--text); font-family:Inter,Arial,Helvetica,sans-serif; }
body { min-height:100vh; }
button,input,select { font:inherit; }
.app-shell { display:grid; grid-template-columns:430px 1fr; min-height:100vh; }
.sidebar { border-right:1px solid var(--line); background:rgba(5,16,14,.94); padding:24px; overflow-y:auto; }
.main-stage { padding:26px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.brand-kicker,.eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:800; }
.brand-block h1 { margin:6px 0 8px; font-size:30px; }
.brand-block h1 span { font-size:14px; color:var(--accent); vertical-align:top; }
.brand-block p { color:var(--muted); margin:0 0 18px; line-height:1.5; }
.tab-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.tab-btn { min-height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; }
.tab-btn.active { background:rgba(200,169,99,.16); color:var(--text); border-color:rgba(200,169,99,.45); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.panel { background:linear-gradient(180deg,rgba(19,39,35,.98),rgba(13,29,26,.99)); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.sidebar .panel { margin-bottom:18px; }
.panel h2 { margin:0 0 14px; font-size:18px; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.field { display:block; margin-bottom:14px; }
.field span { display:block; font-size:11px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.07em; }
.field input,.field select { width:100%; min-height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); color:var(--text); padding:10px 12px; font-size:14px; }
.field input[type=range] { min-height:auto; padding:0; accent-color:var(--accent); }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
button { min-height:44px; border-radius:12px; padding:0 14px; cursor:pointer; transition:.15s ease; }
button:hover { transform:translateY(-1px); }
.primary-btn { border:0; background:linear-gradient(135deg,#c8a963,#e2c985); color:#14231f; font-weight:800; }
.secondary-btn,.ghost-btn { border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.055); color:var(--text); }
.ghost-btn { color:var(--muted); }
.full-btn { width:100%; margin-top:10px; }
.info-box,.status-box { border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:var(--muted); padding:12px 13px; line-height:1.45; font-size:12px; margin-bottom:14px; }
.microcopy { color:var(--muted); font-size:12px; line-height:1.5; }
.model-form-section { display:none; }
.model-form-section.active { display:block; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.note { color:var(--muted); font-size:12px; line-height:1.5; margin-top:6px; }
.file-drop { display:flex; flex-direction:column; gap:4px; align-items:flex-start; border:1px dashed rgba(255,255,255,.18); border-radius:14px; padding:16px; background:rgba(255,255,255,.025); cursor:pointer; margin-bottom:12px; }
.file-drop input { display:none; }
.file-drop strong { color:var(--text); }
.file-drop span { color:var(--muted); font-size:12px; }
.switch-row { display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:13px; }
.playback-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:12px; }
.progress-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin:-6px 0 14px; }
.overlay-list { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.overlay-row { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:12px; padding:10px; }
.overlay-row-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px; }
.overlay-row-title { font-size:13px; font-weight:700; }
.overlay-row-meta { color:var(--muted); font-size:11px; }
.overlay-actions { display:flex; gap:6px; }
.overlay-actions button { min-height:32px; padding:0 9px; font-size:11px; }
.topline { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.topline h2 { margin:4px 0 0; font-size:28px; }
.top-pills { display:flex; flex-wrap:wrap; gap:8px; }
.top-pill,.count-badge { border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--muted); border-radius:999px; padding:7px 10px; font-size:12px; }
.stage-card { background:linear-gradient(180deg,#0d1f1b,#102420); border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow); padding:20px; display:flex; justify-content:center; align-items:center; min-height:68vh; overflow:hidden; }
#previewCanvas { width:min(100%,760px); height:auto; border-radius:20px; background:#0d1816; box-shadow:0 30px 90px rgba(0,0,0,.38); }
.library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.library-item { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; padding:13px; cursor:pointer; }
.library-item.active { border-color:rgba(200,169,99,.5); background:rgba(200,169,99,.08); }
.library-item strong { display:block; margin-bottom:5px; }
.library-item span { font-size:11px; color:var(--muted); }
.category-chip { display:inline-flex; width:max-content; margin-bottom:8px; border-radius:999px; padding:4px 7px; background:rgba(79,177,138,.12); color:#9bd5be; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
@media(max-width:1180px){ .app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line)} }
@media(max-width:680px){ .sidebar,.main-stage{padding:16px}.two-up,.form-grid-2,.playback-row{grid-template-columns:1fr}.topline{align-items:flex-start;flex-direction:column}.tab-bar{grid-template-columns:1fr 1fr}.stage-card{padding:10px} }