:root{--bg:#080a0e;--panel:#12161b;--border:#30343a;--text:#f3efe7;--muted:#99938a;--accent:#c49a68;--cool:#8da4b5;--shadow:0 28px 70px rgba(0,0,0,.44)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#07090d}
body{background:radial-gradient(circle at 12% 0,#1c1d1c 0,transparent 32%),#07090d}
.site-nav{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.065);background:#080b0f}
.nav-brand{font-weight:800;color:#fff;text-decoration:none}
.site-nav nav{display:flex;gap:8px}.site-nav nav a{color:#b9b4ab;text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.07)}
.site-nav nav a.active{color:#fff;background:rgba(196,154,104,.08);border-color:rgba(196,154,104,.38)}
.app-shell{height:calc(100vh - 62px);display:grid;grid-template-columns:390px minmax(0,1fr);gap:18px;padding:18px;overflow:hidden}
.sidebar,.workspace{border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,#13171b,#0d1115);box-shadow:var(--shadow)}
.sidebar{height:100%;min-height:0;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:#a77d50 rgba(196,154,104,.06)}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:#a77d50;border-radius:999px}.sidebar::-webkit-scrollbar-track{background:transparent}
.workspace{height:100%;min-height:0;overflow:hidden;padding:20px;display:flex;flex-direction:column}
.brand-block{padding:2px 2px 14px}.brand-block h1{margin:0;font-size:21px}.brand-block p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.eyebrow{display:block;margin-bottom:5px;color:#caa16c;font-size:10px;font-weight:850;letter-spacing:.16em}
.panel-section{position:relative;margin-bottom:12px;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.018)}
.main-card{padding-top:17px;background:linear-gradient(180deg,rgba(196,154,104,.055),rgba(255,255,255,.015));border-color:rgba(196,154,104,.16)}
label{display:grid;gap:6px;margin-bottom:12px;color:#e9e4db;font-size:12px}
select,input[type="text"],input[type="number"],button{width:100%;min-height:42px;border:1px solid #39404a;border-radius:12px;background:#0a0f14;color:#f2eee7;padding:9px 12px;font-size:12px}
select{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23E8E0D2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
button{cursor:pointer;transition:.18s ease}button:hover{transform:translateY(-1px);border-color:#595e63}
button.primary{font-weight:850;color:#101216;border-color:transparent;background:linear-gradient(135deg,#c9aa82,#90a9bb)}
button.secondary-action{margin-top:8px;color:#d4cec4;background:#0b1015}
.new-design{margin-top:2px;min-height:46px}
.step{position:absolute;left:-8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#b88e5f;color:#0b0d10;font-size:10px;font-weight:900}
.main-card>.step:nth-of-type(1){top:22px}.main-card>.step:nth-of-type(2){top:101px}.main-card>.step:nth-of-type(3){top:180px}
.unique-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;color:var(--muted);font-size:11px}
.mini-btn{width:auto;min-height:auto;padding:6px 9px;font-size:10px;border-radius:9px}
.simple-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0}.simple-toggle span{display:grid;gap:2px}.simple-toggle strong{font-size:14px}.simple-toggle small{color:var(--muted);font-size:10px}
.simple-toggle input{width:38px;height:21px;accent-color:#b88e5f}
.text-fields{margin-top:14px}.text-fields.hidden{display:none}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h2{margin:0;font-size:15px}
.badge{font-size:9px;letter-spacing:.12em;color:#d1b893;border:1px solid rgba(209,184,147,.28);border-radius:999px;padding:5px 8px}
.output-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.output-row label{margin-bottom:7px}
.export-main{min-height:46px}
.export-progress{margin-top:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.02)}.export-progress.hidden{display:none}
.progress-head{display:flex;justify-content:space-between;margin-bottom:7px;color:#cfc8bd;font-size:11px}.progress-track{height:8px;border-radius:999px;overflow:hidden;background:#282e34}.progress-fill{width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#c59d6a,#8ba4b6);transition:width .12s linear}
.tiny-settings{margin:4px 2px 0;border:0}.tiny-settings>summary{cursor:pointer;list-style:none;width:max-content;color:#89837b;font-size:11px}.tiny-settings>summary::-webkit-details-marker{display:none}.tiny-settings-body{margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.015)}
.settings-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.settings-actions button{min-height:36px;padding:7px;font-size:10px}
.engine-controls{display:none!important}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 auto;margin-bottom:14px}.topbar h2{margin:0;font-size:23px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}.pill{padding:8px 12px;border:1px solid rgba(255,255,255,.085);border-radius:999px;background:rgba(255,255,255,.03);color:#d8d4cc;font-size:12px}.loop-pill{color:#bad0c3;border-color:rgba(186,208,195,.25)}
.canvas-wrap{flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;padding:22px;border:1px solid rgba(255,255,255,.055);border-radius:18px;background:radial-gradient(circle at top,rgba(190,160,120,.055),transparent 38%),rgba(255,255,255,.008)}
canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:18px;background:#090c10;box-shadow:0 24px 56px rgba(0,0,0,.5)}
@media(max-width:1050px){.app-shell{grid-template-columns:340px minmax(0,1fr)}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr;padding:10px}.workspace{display:none}.sidebar{padding:16px}.site-nav{padding:0 12px}.site-nav nav a{padding:7px 9px}.settings-actions{grid-template-columns:1fr}}

/* Motion Subject */
#motionSubject option:disabled{color:#595d62}
.main-card label:has(#motionSubject){margin-top:-1px}