:root{--bg:#101316;--panel:#181d21;--panel-2:#20262b;--text:#f5f3ee;--muted:#aeb7bd;--line:#303941;--accent:#e9b44c;--accent-2:#4fb7a5;--danger:#e06464;--ok:#6ed28f}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);letter-spacing:0;margin:0;font-family:Arial,Helvetica,sans-serif}button,input,textarea,select{font:inherit}input[type=checkbox]{width:auto}button{text-align:center;border:1px solid var(--line);background:var(--panel-2);min-height:38px;color:var(--text);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;display:inline-flex}.button-link{border:1px solid var(--line);background:var(--panel-2);min-height:38px;color:var(--text);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;text-decoration:none;display:inline-flex}button.primary{background:var(--accent);border-color:var(--accent);color:#1b160c;font-weight:700}button.danger{border-color:var(--danger);color:#fff3f3}button:disabled{cursor:wait;opacity:.65}input,textarea,select{border:1px solid var(--line);width:100%;color:var(--text);background:#0e1114;border-radius:6px;padding:10px 12px}textarea{resize:vertical;min-height:112px}.login-shell{background:radial-gradient(circle at 50% 0%, #4fb7a524, transparent 34%), var(--bg);place-items:center;min-height:100vh;padding:24px;display:grid}.login-panel{border:1px solid var(--line);background:var(--panel);border-radius:8px;gap:14px;width:min(440px,100%);padding:24px;display:grid}.login-panel h1{margin:0;font-size:24px}.login-panel p{color:var(--muted);margin:0;line-height:1.45}.login-panel label{color:var(--muted);gap:8px;font-size:13px;display:grid}.login-links{gap:14px;font-size:13px;display:flex}.login-links a{color:var(--accent)}.legal-page{max-width:820px;margin:48px auto;padding:0 24px;line-height:1.6}.legal-page h1{margin:0 0 20px;font-size:30px}.legal-page p{color:#dce3e6;font-size:16px}.app-shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);z-index:5;background:#12171a;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;font-size:20px;font-weight:800;display:flex}.brand-mark{background:var(--accent-2);color:#061311;border-radius:6px;place-items:center;width:34px;height:34px;display:grid}.tabs{flex-wrap:wrap;gap:8px;display:flex}.tabs button.active{border-color:var(--accent);color:var(--accent)}.layout{grid-template-columns:minmax(280px,420px) 1fr;gap:0;display:grid}.rail,.main{padding:20px}.rail{border-right:1px solid var(--line);background:#13181c;min-height:calc(100vh - 72px)}.section{border-bottom:1px solid var(--line);padding:18px 0}.section:first-child{padding-top:0}.section h2,.main h2{margin:0 0 12px;font-size:18px}.stack{gap:12px;display:grid}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;display:grid}.clip-card,.scene,.log-row,.publish-row{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:14px}.platform-grid{gap:10px;display:grid}.platform-row{grid-template-columns:130px minmax(180px,1fr) auto;align-items:center;gap:10px;display:grid}@media (max-width:720px){.platform-row{grid-template-columns:1fr}}.clip-card.selected{border-color:var(--accent)}.series-list{gap:8px;display:grid}.series-list button{justify-content:flex-start}.series-row{grid-template-columns:1fr auto auto;gap:6px;display:grid}.series-row>button:first-child{justify-content:flex-start}.series-row.selected>button:first-child{border-color:var(--accent);color:var(--accent)}.history-shell{grid-template-columns:minmax(180px,280px) 1fr;align-items:start;gap:14px;display:grid}.history-list{gap:8px;display:grid}.history-list button{text-align:left;justify-content:space-between}.history-list button.selected{border-color:var(--accent)}.history-series-list{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:14px}.inline-duration{align-items:center;gap:6px;width:auto;display:inline-flex}.inline-duration input{width:72px;padding:7px 9px}.clip-card>button{text-align:left;background:0 0;border:0;width:100%;padding:0;display:block}.clip-card h3{margin:0 0 8px;font-size:16px}.status{min-height:24px;color:var(--muted);background:#263039;border-radius:999px;align-items:center;padding:3px 9px;font-size:12px;display:inline-flex}.status.pending_review,.status.approved,.status.published,.status.success{color:var(--ok)}.status.failed,.status.rejected{color:var(--danger)}.status.review-demo{color:var(--accent);background:#e9b44c1f;border:1px solid #e9b44c73}.review-demo-box{background:#e9b44c1a;border:1px solid #e9b44c73;border-radius:8px;padding:12px}.review-demo-box p{color:var(--muted);margin:6px 0 0;font-size:13px;line-height:1.4}.muted{color:var(--muted)}.danger-text{color:#f99}.small{font-size:13px}.preview{grid-template-columns:minmax(240px,360px) 1fr;align-items:start;gap:18px;display:grid}video{aspect-ratio:9/16;border:1px solid var(--line);background:#07090a;border-radius:8px;width:100%}.mock-video{aspect-ratio:9/16;border:1px solid var(--line);background:#080b0d;border-radius:8px;width:100%;position:relative;overflow:hidden}.mock-frame{background:linear-gradient(#04060a2e,#0000 28%),radial-gradient(circle at 72% 30%,#3676a638,#0000 26%),linear-gradient(135deg,#101821,#1b202a 54%,#080b0f);position:absolute;inset:0}.mock-scene{opacity:0;align-content:end;gap:12px;padding:36px 28px 86px;animation:22s infinite mockSceneOne;display:grid;position:absolute;inset:0;transform:scale(1.02)}.mock-scene.scene-2{animation-name:mockSceneTwo}.mock-scene.scene-3{animation-name:mockSceneThree}.mock-art{position:absolute;inset:0;overflow:hidden}.mock-art:before,.mock-art:after{content:"";background:#ffffff0d;height:36%;position:absolute;left:-18%;right:-18%;transform:rotate(-5deg)}.mock-art:before{top:20%}.mock-art:after{background:#3c5f7e29;top:34%}.mock-art{border-top:42px solid #0000009e}.mock-art::marker{content:""}.moon,.tower,.light,.hero,.compass,.machine{display:block;position:absolute}.moon{background:#4495d2e6;border-radius:50%;width:76px;height:76px;top:132px;right:88px;box-shadow:0 0 58px #4495d280}.tower{clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);background:linear-gradient(90deg,#06090c,#1d2b32,#07090c);width:78px;height:500px;bottom:246px;left:46%}.light{background:#e9b44c;border-radius:50%;width:34px;height:34px;bottom:692px;left:49%;box-shadow:0 0 70px 34px #e9b44c57}.scene-1 .mock-art:before{content:"TEST KLIP - KAYIP RASATHANE";color:#f5f3eed6;letter-spacing:0;background:#000000b3;place-items:center;height:42px;font-size:16px;font-weight:800;display:grid;top:-42px;left:0;right:0;transform:none}.scene-1 .mock-art:after{height:360px;top:220px;left:12%;right:8%;transform:skewY(-6deg)}.hero,.compass,.machine{opacity:0}.scene-2 .mock-frame,.scene-2 .mock-art{background:radial-gradient(circle at 55% 44%,#e9b44c33,#0000 22%),repeating-linear-gradient(90deg,#0000 0 54px,#ffffff0a 54px 57px),linear-gradient(145deg,#151c24,#252630 58%,#090c10)}.scene-2 .moon,.scene-2 .tower,.scene-2 .light,.scene-2 .machine{opacity:0}.scene-2 .hero{opacity:1;background:linear-gradient(90deg,#10131a,#2f4151 54%,#0c0f14);border-radius:52px 52px 18px 18px;width:118px;height:350px;bottom:252px;left:30%;box-shadow:170px -28px 0 -18px #10161ef2,-34px 30px #0a0c1061}.scene-2 .hero:before{content:"";background:linear-gradient(#d9b088,#9b6d5f);border-radius:50%;width:72px;height:72px;position:absolute;top:-76px;left:30px;box-shadow:0 -18px 0 12px #151719}.scene-2 .compass{opacity:1;background:#00000047;border:8px solid #e9b44c;border-radius:50%;width:108px;height:108px;bottom:436px;left:57%;box-shadow:0 0 44px #e9b44c6b}.scene-2 .compass:before{content:"";clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);background:#e9b44c;width:18px;height:70px;position:absolute;top:12px;left:43px;transform:rotate(28deg)}.scene-3 .mock-art{background:radial-gradient(circle at 48% 54%,#e9b44c38,#0000 24%),repeating-linear-gradient(0deg,#0000 0 44px,#4fb7a50d 44px 47px),linear-gradient(#080b0f,#111b1f 48%,#272334)}.scene-3 .moon,.scene-3 .tower,.scene-3 .light,.scene-3 .hero,.scene-3 .compass{opacity:0}.scene-3 .machine{opacity:1;background:repeating-conic-gradient(from 12deg, #e9b44cf2 0 8deg, #111519f2 8deg 18deg);border:18px solid #e9b44cd1;border-radius:50%;height:330px;bottom:275px;left:15%;right:15%;box-shadow:0 0 80px #e9b44c4d}.scene-3 .machine:before{content:"";background:#111519;border:10px solid #4fb7a58c;border-radius:50%;position:absolute;inset:74px}.mock-scene span{color:var(--accent);font-size:14px;font-weight:700}.mock-scene strong{text-wrap:balance;background:#00000080;border-radius:6px;max-height:118px;padding:14px;font-size:clamp(11px,3.6cqw,20px);line-height:1.35;display:block;overflow:visible}.mock-video p{color:var(--muted);text-align:center;margin:0;font-size:12px;position:absolute;bottom:16px;left:18px;right:18px}@keyframes mockSceneOne{0%{opacity:0;transform:scale(1.03)translateY(12px)}3%,34%{opacity:1;transform:scale(1.08)translateY(0)}37%,to{opacity:0;transform:scale(1.1)translateY(-10px)}}@keyframes mockSceneTwo{0%,34%{opacity:0;transform:scale(1.03)translate(-12px)}38%,65%{opacity:1;transform:scale(1.08)translate(0)}69%,to{opacity:0;transform:scale(1.1)translate(12px)}}@keyframes mockSceneThree{0%,65%{opacity:0;transform:scale(1.03)translateY(12px)}69%,96%{opacity:1;transform:scale(1.08)translateY(0)}to{opacity:0;transform:scale(1.1)translateY(-10px)}}.thumbs{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.thumbs img{aspect-ratio:9/16;object-fit:cover;border:1px solid var(--line);border-radius:6px;width:100%}.scene p{margin:6px 0}.asset-panel{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:14px}.scene-upload-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.manual-scene{border-top:1px solid var(--line);grid-template-columns:minmax(260px,1fr) 170px;align-items:stretch;gap:12px;padding-top:12px;display:grid}.manual-scene .row{grid-column:1/-1}.scene-upload{border:1px dashed var(--line);cursor:pointer;background:#0e1114;border-radius:8px;align-content:center;justify-items:center;gap:8px;min-height:190px;padding:10px;display:grid;overflow:hidden}.scene-upload.compact{min-height:170px}.scene-upload span{font-size:13px;font-weight:700}.scene-upload em{color:var(--muted);font-size:13px;font-style:normal}.scene-upload img{aspect-ratio:9/16;object-fit:cover;border-radius:6px;width:100%}.scene-upload input{display:none}.code{color:#d8e1e5;border:1px solid var(--line);overflow-wrap:anywhere;background:#0e1114;border-radius:6px;padding:10px;font-size:12px}@media (max-width:980px){.layout,.preview,.history-shell,.manual-scene{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--line);min-height:auto}}
