:root{
  --brand:#d4af37;
  --brand-dark:#b89425;
  --brand-soft:rgba(212,175,55,.14);
  --ink:#0f1115;
  --muted:#667085;
  --line:#e7e9ee;
  --soft:#f8f9fb;
  --card:rgba(255,255,255,.78);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--soft);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.app-layout{display:flex;min-height:100vh;background:linear-gradient(180deg,#fff 0%,#f8f9fb 100%)}
.sidebar-vertical{position:fixed;inset:0 auto 0 0;width:260px;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;z-index:100}
.main-content{margin-left:260px;min-height:100vh;width:calc(100% - 260px);background:transparent}
.site-header{height:70px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px);border-bottom:1px solid rgba(15,17,21,.06);display:flex;align-items:center;justify-content:flex-end;padding:0 28px;position:sticky;top:0;z-index:80;box-shadow:0 8px 30px rgba(15,17,21,.03)}
.sidebar-link,.sidebar-vertical nav a,.sidebar-vertical>div a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;font-size:13px;font-weight:850;color:#6b7280;transition:.18s}
.sidebar-vertical a:hover,.sidebar-vertical a.active{background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));color:#111;border:1px solid rgba(212,175,55,.18)}
.badge{font-size:11px;font-weight:900;color:#111;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(255,255,255,.9));border:1px solid rgba(212,175,55,.22);padding:8px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}

/* PIONX studio layout */
.studio-page{min-height:calc(100vh - 70px);padding:28px;background:
  radial-gradient(circle at 18% 8%,rgba(212,175,55,.17),transparent 34%),
  radial-gradient(circle at 85% 20%,rgba(15,17,21,.055),transparent 30%),
  linear-gradient(180deg,#fff 0%,#f8f9fb 100%)}
.studio-form{width:100%;max-width:1440px;margin:0 auto;padding-bottom:110px}
.studio-hero-panel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:26px;align-items:stretch;margin-bottom:26px}
.studio-copy{min-height:520px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);border:1px solid rgba(15,17,21,.06);border-radius:30px;padding:34px;box-shadow:0 22px 70px rgba(15,17,21,.06);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.studio-copy:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 20% 15%,rgba(212,175,55,.18),transparent 38%);pointer-events:none}
.studio-copy>*{position:relative}
.eyebrow{width:max-content;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 13px;border-radius:999px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.18);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:950;color:#7a5d11}
.studio-copy h1{font-size:clamp(38px,5vw,72px);line-height:.95;letter-spacing:-.065em;margin:0 0 18px;font-weight:950;color:#101114}
.studio-copy p{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 26px;max-width:620px;font-weight:600}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.workspace{height:auto;overflow:visible;background:transparent;padding:0;display:block}
.studio-canvas{min-height:520px;height:100%;background:rgba(255,255,255,.86);border:1px solid rgba(15,17,21,.07);border-radius:30px;box-shadow:0 26px 90px rgba(15,17,21,.09);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.studio-canvas:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,175,55,.08),transparent 35%,rgba(15,17,21,.025));pointer-events:none}
.canvas-empty{text-align:center;max-width:500px;padding:42px;position:relative;z-index:1}.canvas-empty i{font-size:46px;color:#c5a23a;margin-bottom:18px}.canvas-empty h2{font-size:30px;line-height:1.05;margin:0 0 12px;font-weight:950;letter-spacing:-.045em}.canvas-empty p{color:var(--muted);font-size:14px;line-height:1.75;font-weight:600}
.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.control-card{background:var(--card);backdrop-filter:blur(14px);border:1px solid rgba(15,17,21,.065);border-radius:24px;padding:20px;box-shadow:0 14px 44px rgba(15,17,21,.045);transition:.22s ease;min-height:100%}
.control-card:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.42);box-shadow:0 22px 54px rgba(15,17,21,.075)}
.control-card-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}.control-icon{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(255,255,255,.9));border:1px solid rgba(212,175,55,.22);display:flex;align-items:center;justify-content:center;color:#8c6b16}.control-card h3{margin:0;font-size:16px;font-weight:950;letter-spacing:-.025em}.control-card p{margin:3px 0 0;color:#98a2b3;font-size:11px;font-weight:800}
.input-field,.select-field,textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.8);border-radius:16px;padding:12px 14px;font-size:13px;font-weight:700;color:#101114;outline:none;transition:.16s}.input-field:focus,.select-field:focus,textarea:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(212,175,55,.13)}textarea{min-height:132px;resize:vertical}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.field:last-child{margin-bottom:0}.field label{font-size:10px;font-weight:950;letter-spacing:.11em;text-transform:uppercase;color:#98a2b3}
.btn-primary{width:100%;min-height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,#d4af37,#f2d77b);color:#080808;font-size:13px;font-weight:950;cursor:pointer;box-shadow:0 14px 34px rgba(212,175,55,.28);transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:9px}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 44px rgba(212,175,55,.36)}.btn-primary-inline{width:auto;padding:0 24px}.btn-secondary-inline{min-height:48px;border:1px solid var(--line);border-radius:16px;background:#fff;color:#111;font-size:13px;font-weight:950;cursor:pointer;padding:0 20px;display:inline-flex;align-items:center;gap:9px;transition:.18s}.btn-secondary-inline:hover{border-color:rgba(212,175,55,.55);transform:translateY(-1px)}
.btn-group{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:#f4f5f7;border:1px solid var(--line);padding:5px;border-radius:16px;overflow:auto}.btn-option{border:0;border-radius:12px;background:transparent;color:#6b7280;min-height:36px;padding:0 10px;font-size:11px;font-weight:950;cursor:pointer;white-space:nowrap}.btn-option.active{background:#fff;color:#7a5d11;box-shadow:0 5px 16px rgba(15,17,21,.08);border:1px solid rgba(212,175,55,.22)}.seg-3{grid-template-columns:repeat(3,1fr);grid-auto-flow:unset}.seg-4{grid-template-columns:repeat(4,1fr);grid-auto-flow:unset}
.drop-zone{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:linear-gradient(180deg,#fff,#f8f9fb);border:2px dashed #d9dde5;border-radius:22px;overflow:hidden;cursor:pointer;transition:.18s}.drop-zone:hover{border-color:var(--brand);background:#fffaf0}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.upload-copy{text-align:center;color:#98a2b3;font-size:12px;font-weight:850}.upload-copy i{display:block;font-size:26px;margin-bottom:10px;color:#c5a23a}.result-image{max-width:100%;height:auto;border-radius:24px;box-shadow:0 18px 60px rgba(15,17,21,.16);position:relative;z-index:1}.loading{position:absolute;inset:0;background:rgba(255,255,255,.84);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:10}.spinner{width:44px;height:44px;border-radius:50%;border:4px solid rgba(212,175,55,.18);border-top-color:var(--brand);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.render-dock{position:fixed;left:288px;right:28px;bottom:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border:1px solid rgba(15,17,21,.08);box-shadow:0 18px 70px rgba(15,17,21,.12);border-radius:22px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:75}.render-dock strong{display:block;font-size:13px;font-weight:950}.render-dock span{display:block;font-size:11px;font-weight:700;color:#98a2b3;margin-top:2px}.render-dock .btn-primary{width:240px}.no-scrollbar::-webkit-scrollbar{width:0;height:0}

/* Legacy compatibility */
.tool-layout{display:block}.control-panel{background:transparent}.tool-title{display:none}

@media(max-width:1180px){.studio-hero-panel{grid-template-columns:1fr}.studio-copy{min-height:auto}.studio-canvas{min-height:460px}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:920px){
  .sidebar-vertical{display:none}
  .main-content{margin-left:0;width:100%}
  .site-header{display:flex;padding:0 16px;justify-content:space-between}
  .site-header:before{content:"PIONX";font-weight:950;letter-spacing:-.05em;color:var(--brand)}
  .studio-page{padding:16px}
  .control-grid{grid-template-columns:1fr}
  .render-dock{left:10px;right:10px;bottom:10px;padding:10px}
  .render-dock>div{display:none}
  .render-dock .btn-primary{width:100%}
  .studio-hero-panel{gap:16px}
  .studio-copy,.studio-canvas,.control-card{border-radius:22px}
  .studio-copy h1{font-size:32px}
  .studio-copy{padding:24px}
  .studio-copy:after{display:none}
}

/* PIONX luxury UI fix: cinematic hero + dark/light studio modes */
.theme-toggle{border:0;cursor:pointer;font-family:inherit}
.studio-page{position:relative;overflow:hidden}
.studio-page:before{content:"";position:fixed;inset:70px 0 auto 260px;height:420px;pointer-events:none;background:radial-gradient(circle at 78% 32%,rgba(212,175,55,.20),transparent 34%),radial-gradient(circle at 24% 8%,rgba(255,255,255,.85),transparent 30%);z-index:0}.studio-form{position:relative;z-index:1}.studio-copy{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.62));box-shadow:0 30px 100px rgba(15,17,21,.08), inset 0 1px 0 rgba(255,255,255,.9)}.studio-copy:after{content:"ARCHITECTURAL AI";position:absolute;right:-42px;bottom:22px;font-size:68px;line-height:1;font-weight:950;letter-spacing:-.08em;color:rgba(15,17,21,.035);white-space:nowrap}.studio-canvas{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(248,249,251,.74));box-shadow:0 35px 110px rgba(15,17,21,.12), inset 0 1px 0 rgba(255,255,255,.95)}.preview-stage{position:relative;width:100%;height:100%;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f5f6f8 47%,#fff9e8 100%)}.preview-stage:before{content:"";position:absolute;inset:34px;border:1px solid rgba(212,175,55,.18);border-radius:28px}.preview-glow{position:absolute;width:520px;height:520px;border-radius:999px;background:radial-gradient(circle,rgba(212,175,55,.28),rgba(212,175,55,.08) 36%,transparent 66%);filter:blur(8px);transform:translate(110px,-40px)}.preview-card{position:relative;z-index:1;width:min(76%,620px);min-height:330px;border-radius:34px;padding:32px;background:linear-gradient(145deg,rgba(16,17,20,.92),rgba(38,39,44,.78)),radial-gradient(circle at 72% 28%,rgba(212,175,55,.38),transparent 33%);border:1px solid rgba(212,175,55,.28);box-shadow:0 36px 90px rgba(15,17,21,.32);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.preview-card:before{content:"";position:absolute;inset:38px 38px 94px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}.preview-card:after{content:"";position:absolute;right:46px;top:76px;width:260px;height:140px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(212,175,55,.35));clip-path:polygon(6% 64%,42% 28%,61% 48%,81% 22%,96% 62%,96% 78%,6% 78%);opacity:.9;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))}.preview-card span{position:relative;z-index:2;width:max-content;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:#f2d77b;border:1px solid rgba(212,175,55,.34);border-radius:999px;padding:8px 11px;background:rgba(212,175,55,.10)}.preview-card h2{position:relative;z-index:2;margin:18px 0 8px;color:#fff;font-size:34px;line-height:1.02;letter-spacing:-.06em;font-weight:950}.preview-card p{position:relative;z-index:2;margin:0;color:rgba(255,255,255,.68);font-size:13px;font-weight:700}.floating-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;border-radius:999px;padding:11px 14px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border:1px solid rgba(212,175,55,.24);box-shadow:0 14px 40px rgba(15,17,21,.12);font-size:11px;font-weight:950;color:#111}.floating-chip i{color:#9b781b}.chip-a{left:8%;top:18%}.chip-b{right:9%;top:20%}.chip-c{left:14%;bottom:18%}.control-grid{margin-top:4px}.control-card{position:relative;overflow:hidden}.control-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent);opacity:.55}.render-dock{box-shadow:0 22px 80px rgba(15,17,21,.16), inset 0 1px 0 rgba(255,255,255,.9)}

body[data-theme="dark"]{--ink:#f6f2e8;--muted:#a9adba;--line:rgba(255,255,255,.10);--soft:#0e0f12;--card:rgba(25,26,31,.72);background:#0e0f12;color:#f6f2e8}body[data-theme="dark"] .app-layout{background:radial-gradient(circle at 18% 0%,rgba(212,175,55,.12),transparent 32%),linear-gradient(180deg,#0e0f12,#14151a)}body[data-theme="dark"] .sidebar-vertical,body[data-theme="dark"] .site-header,body[data-theme="dark"] .render-dock{background:rgba(14,15,18,.76);border-color:rgba(255,255,255,.10);box-shadow:0 18px 70px rgba(0,0,0,.36)}body[data-theme="dark"] .studio-page{background:radial-gradient(circle at 18% 8%,rgba(212,175,55,.15),transparent 34%),radial-gradient(circle at 85% 20%,rgba(255,255,255,.045),transparent 30%),linear-gradient(180deg,#0e0f12,#15161b)}body[data-theme="dark"] .studio-copy,body[data-theme="dark"] .control-card{background:linear-gradient(145deg,rgba(27,28,34,.82),rgba(18,19,23,.66));border-color:rgba(255,255,255,.10);box-shadow:0 24px 80px rgba(0,0,0,.34)}body[data-theme="dark"] .studio-copy h1,body[data-theme="dark"] .control-card h3,body[data-theme="dark"] .render-dock strong{color:#fff}body[data-theme="dark"] .studio-canvas{background:linear-gradient(145deg,rgba(24,25,30,.92),rgba(15,16,20,.88));border-color:rgba(255,255,255,.10);box-shadow:0 35px 110px rgba(0,0,0,.42)}body[data-theme="dark"] .preview-stage{background:linear-gradient(135deg,#111217 0%,#191a20 47%,#271f11 100%)}body[data-theme="dark"] .badge,body[data-theme="dark"] .btn-secondary-inline,body[data-theme="dark"] .input-field,body[data-theme="dark"] .select-field,body[data-theme="dark"] textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:#fff}body[data-theme="dark"] .btn-group{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}body[data-theme="dark"] .btn-option{color:#a9adba}body[data-theme="dark"] .btn-option.active{background:rgba(212,175,55,.16);color:#f2d77b;border-color:rgba(212,175,55,.32)}body[data-theme="dark"] .drop-zone{background:linear-gradient(180deg,#191a20,#111217);border-color:rgba(255,255,255,.14)}body[data-theme="dark"] .floating-chip{background:rgba(20,21,25,.72);color:#fff;border-color:rgba(212,175,55,.28)}body[data-theme="dark"] .sidebar-vertical a:hover,body[data-theme="dark"] .sidebar-vertical a.active{color:#fff;background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.06));border-color:rgba(212,175,55,.22)}body[data-theme="dark"] .sidebar-vertical a{color:#a9adba}

@media(max-width:920px){.studio-page:before{left:0;inset:0 0 auto 0}.preview-card{width:86%;min-height:280px}.floating-chip{display:none}.preview-stage{min-height:420px}}

/* Video AI PIONX control system */
.video-ai-page{padding:18px 22px 110px}.video-studio-form{max-width:1700px}.video-workspace{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;min-height:calc(100vh - 118px)}.video-control-panel{background:rgba(255,255,255,.84);border:1px solid rgba(15,17,21,.07);border-radius:24px;box-shadow:0 18px 60px rgba(15,17,21,.07);overflow:hidden;position:relative}.video-panel-scroll{height:calc(100vh - 128px);overflow-y:auto;padding:16px 16px 120px}.video-tool-head{padding:10px 4px 14px}.video-tool-head h1{font-size:26px;line-height:1;margin:8px 0 8px;font-weight:950;letter-spacing:-.05em}.video-tool-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;font-weight:700}.video-section{background:rgba(255,255,255,.74);border:1px solid rgba(15,17,21,.06);border-radius:18px;padding:14px;margin-bottom:14px;box-shadow:0 10px 30px rgba(15,17,21,.035)}.section-title,.motion-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-title h3,.motion-title h3{margin:0;font-size:13px;font-weight:950;color:#1b1d22}.section-title p{margin:3px 0 0;font-size:10px;font-weight:800;color:#98a2b3}.section-title>span{font-size:10px;font-weight:900;color:#98a2b3}.section-title i,.motion-title i{color:#98a2b3;font-size:13px}.video-drop-zone{aspect-ratio:16/9;border-radius:16px}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preset-card{border:2px dashed rgba(15,17,21,.11);background:#fff;border-radius:14px;min-height:92px;padding:9px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;cursor:pointer;transition:.18s}.preset-card:hover{transform:translateY(-1px);border-color:rgba(212,175,55,.38);background:rgba(212,175,55,.06)}.preset-card.active{border-style:solid;border-color:rgba(212,175,55,.8);background:rgba(212,175,55,.13);box-shadow:0 12px 28px rgba(212,175,55,.12)}.preset-emoji{font-size:24px;line-height:1}.preset-card strong{font-size:11px;font-weight:950;color:#222}.preset-card small{font-size:9px;font-weight:800;color:#98a2b3;line-height:1.3}.active-movement-box{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,#d4af37,#f2d77b);box-shadow:0 14px 34px rgba(212,175,55,.22);margin-bottom:14px;color:#111}.active-movement-box span{display:block;font-size:10px;font-weight:900;opacity:.7}.active-movement-box strong{display:block;font-size:13px;font-weight:950;margin-top:3px}.active-movement-box button{width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.26);cursor:pointer;color:#111}.or-divider{position:relative;text-align:center;margin:16px 0}.or-divider:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(15,17,21,.1)}.or-divider span{position:relative;background:#f8f9fb;padding:0 10px;color:#98a2b3;font-size:10px;font-weight:950;letter-spacing:.08em}.video-hint{text-align:center;margin:0 0 14px;color:#98a2b3;font-size:11px;font-weight:800}.motion-title{margin-bottom:10px;justify-content:flex-start}.motion-title span{width:5px;height:18px;background:var(--brand);border-radius:999px}.motion-title i{margin-left:auto}.motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.motion-btn{border:1px solid rgba(15,17,21,.09);background:#fff;border-radius:13px;min-height:74px;padding:9px 8px;text-align:left;cursor:pointer;transition:.16s;color:#475467}.motion-btn div{display:flex;align-items:center;gap:6px}.motion-btn i{font-size:13px;color:#667085}.motion-btn strong{font-size:10.5px;font-weight:950;line-height:1.15}.motion-btn small{display:block;margin-top:5px;font-size:9px;font-weight:800;color:#98a2b3;line-height:1.25}.motion-btn .check{margin-left:auto;display:none}.motion-btn.active{background:linear-gradient(135deg,#d4af37,#f2d77b);border-color:rgba(212,175,55,.85);color:#111;box-shadow:0 12px 28px rgba(212,175,55,.18)}.motion-btn.active i,.motion-btn.active small{color:#111}.motion-btn.active .check{display:inline-flex}.motion-btn.disabled{opacity:.42;cursor:not-allowed;background:#f2f3f5;color:#98a2b3}.settings-section .field{margin-bottom:12px}.prompt-section textarea+textarea{margin-top:10px;min-height:92px}.video-preview-panel{min-width:0}.video-canvas{min-height:calc(100vh - 128px);height:100%;border-radius:24px}.video-empty-state{text-align:center;max-width:680px;padding:42px;position:relative;z-index:1}.video-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.2);font-size:11px;font-weight:950;color:#8c6b16}.video-empty-state h2{font-size:clamp(38px,5vw,70px);line-height:.95;margin:20px 0 14px;font-weight:950;letter-spacing:-.07em}.video-empty-state p{font-size:15px;line-height:1.8;color:var(--muted);font-weight:700;margin:0 auto 22px;max-width:540px}.payload-preview{display:inline-flex;max-width:100%;padding:12px 14px;border-radius:14px;background:rgba(15,17,21,.05);border:1px solid rgba(15,17,21,.07);font-size:12px;font-weight:800;color:#667085;overflow:auto}.result-video{width:100%;height:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:24px;background:#050505;position:relative;z-index:2}.video-render-dock .btn-primary{width:260px}
body[data-theme="dark"] .video-control-panel,body[data-theme="dark"] .video-section{background:rgba(24,25,30,.74);border-color:rgba(255,255,255,.09)}body[data-theme="dark"] .section-title h3,body[data-theme="dark"] .motion-title h3,body[data-theme="dark"] .preset-card strong{color:#fff}body[data-theme="dark"] .preset-card,body[data-theme="dark"] .motion-btn{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);color:#d0d5dd}body[data-theme="dark"] .preset-card.active,body[data-theme="dark"] .motion-btn.active{background:linear-gradient(135deg,#d4af37,#f2d77b);color:#111}body[data-theme="dark"] .motion-btn.disabled{background:rgba(255,255,255,.04);color:#667085}body[data-theme="dark"] .or-divider span{background:#14151a}body[data-theme="dark"] .payload-preview{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:#d0d5dd}
@media(max-width:1180px){.video-workspace{grid-template-columns:1fr}.video-panel-scroll{height:auto;overflow:visible}.video-canvas{min-height:520px}.video-render-dock{left:28px}}
@media(max-width:920px){
  .video-ai-page{padding:14px 14px 100px}
  .video-workspace{grid-template-columns:1fr;display:block}
  .video-control-panel{margin-bottom:20px}
  .preset-grid,.motion-grid{grid-template-columns:repeat(2,1fr)}
  .video-canvas{min-height:400px}
  .video-empty-state h2{font-size:32px}
  .video-render-dock{left:10px;right:10px}
  .video-render-dock .btn-primary{width:100%}
}
@media(max-width:480px){
  .preset-grid,.motion-grid{grid-template-columns:1fr}
  .video-canvas{min-height:320px}
}

/* Video AI cinematic controls */
.video-ai-page .video-hero-panel .studio-copy p{max-width:720px}
.video-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.video-preset{border:1px dashed rgba(148,163,184,.55);background:rgba(255,255,255,.72);border-radius:16px;padding:13px 10px;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:.2s ease;color:inherit}
.video-preset span{font-size:24px;line-height:1}.video-preset strong{font-size:13px}.video-preset small{font-size:11px;opacity:.7;line-height:1.25}.video-preset:hover{transform:translateY(-1px);border-color:var(--brand-primary,#d4af37)}.video-preset.active{border-style:solid;background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.06));box-shadow:0 12px 30px rgba(0,0,0,.08);border-color:var(--brand-primary,#d4af37)}
.btn-option.is-disabled,.btn-option:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}
.diagnostic-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}.diagnostic-toolbar span{font-size:12px;font-weight:700;color:var(--brand-primary,#d4af37)}
.diagnostic-box{min-height:220px;max-height:360px;overflow:auto;border:1px solid rgba(148,163,184,.35);border-radius:16px;background:#050505;color:#d7f9d1;padding:16px;font-size:12px;line-height:1.55;white-space:pre-wrap}
.result-video{width:100%;height:100%;object-fit:contain;border-radius:22px;background:#050505}
@media(max-width:900px){.video-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.video-preset-grid{grid-template-columns:1fr}.diagnostic-box{font-size:11px}}

/* PIONX prompt debug panel */
.prompt-debug{margin:18px;padding:16px;border-radius:18px;background:#0b1220;color:#d7e1f5;text-align:left;max-width:100%;overflow:auto}
.prompt-debug h3{margin:10px 0 8px;color:#fff;font-size:14px}
.prompt-debug pre{white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px}

/* Production delivery additions */
.progress-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#101114;font-weight:900;text-align:center}.progress-wrap span{font-size:13px;color:#667085}.prompt-debug{margin-top:18px;width:100%;max-width:980px;text-align:left;background:#fff;border:1px solid rgba(15,17,21,.08);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(15,17,21,.08);position:relative;z-index:2}.prompt-debug h3{margin:12px 0 8px;font-size:14px;font-weight:950;color:#101114}.prompt-debug pre{white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;background:#0b1220;color:#d7e1f5;border-radius:14px;padding:14px;font-size:12px;line-height:1.6}.result-video{width:100%;max-height:78vh;border-radius:24px;box-shadow:0 18px 60px rgba(15,17,21,.16);position:relative;z-index:1;background:#000}.btn-secondary-inline{border:1px solid rgba(15,17,21,.12);background:#fff;color:#101114;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.btn-secondary-inline:hover{border-color:#c5a23a;color:#9b7a17}

.mobile-toggle { display: none; font-size: 24px; cursor: pointer; color: var(--brand); padding: 8px; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; display: none; backdrop-filter: blur(4px); }
@media(max-width:920px) {
  .mobile-toggle { display: block; }
  .sidebar-vertical { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex !important; }
  .sidebar-open .sidebar-vertical { transform: translateX(0); }
  .sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-open { overflow: hidden; }
  .site-header { gap: 12px; }
}

@media(max-width:600px) {
  .m-hide { display: none; }
  .site-header { padding: 0 12px; }
  .badge { padding: 6px 10px; font-size: 11px; }
}
.sidebar-vertical { box-shadow: 20px 0 60px rgba(0,0,0,0.1); }

@media(max-width:920px) {
  .sidebar-vertical { 
    position: fixed !important; 
    left: 0 !important; 
    top: 0 !important; 
    bottom: 0 !important; 
    width: 280px !important; 
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 20px 0 80px rgba(0,0,0,0.3) !important;
  }
  .site-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    height: 64px !important;
    position: sticky !important;
    top: 0 !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 50 !important;
    width: 100% !important;
    left: 0 !important;
  }
  .site-header:before { display: none !important; }
  .mobile-toggle { order: -1; margin-right: auto; }
}
body.sidebar-open { overflow: hidden !important; }
.sidebar-backdrop { z-index: 999 !important; }