:root{--bg:#08090b;--panel:#111215;--panel2:#17191d;--line:#26282d;--muted:#8f939e;--text:#f7f7f8;--accent:#f5c86e;--accent2:#ffe4ad;--danger:#ff6b6b;--radius:18px;--shadow:0 24px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}body{overflow:hidden}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.boot{position:fixed;inset:0;z-index:100;background:#08090b;display:flex;align-items:center;justify-content:center;gap:16px;transition:opacity .55s ease,visibility .55s}.boot.hide{opacity:0;visibility:hidden}.boot-mark,.brand-mark{display:grid;place-items:center;background:linear-gradient(145deg,#ffe2a5,#eaae4f);color:#17100a;border-radius:14px;font-family:"Anek Gujarati";font-weight:800}.boot-mark{width:58px;height:58px;font-size:34px;box-shadow:0 0 50px rgba(245,200,110,.2)}.boot-copy{display:flex;flex-direction:column;gap:4px}.boot-copy b{font-size:17px}.boot-copy span{font-size:12px;color:var(--muted)}
.app-shell{height:100vh;display:flex;flex-direction:column}.topbar{height:66px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:rgba(8,9,11,.92);backdrop-filter:blur(20px)}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:38px;height:38px;font-size:24px;border-radius:10px}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:10px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:8px}
button,.primary,.ghost,.mini{border:0;color:inherit;cursor:pointer}.ghost,.mini{background:#17191d;border:1px solid #292c31;border-radius:10px}.ghost{padding:9px 12px;font-size:12px}.primary{background:linear-gradient(135deg,#f7d892,#eab451);color:#17100a;font-weight:800;padding:10px 15px;border-radius:11px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary:hover,.magic:hover{filter:brightness(1.04)}.full{width:100%}.mini{font-size:11px;padding:7px 9px}
.workspace{display:grid;grid-template-columns:76px 340px minmax(420px,1fr);height:calc(100vh - 66px);min-height:0}.rail{border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:6px;background:#0c0d0f}.rail-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;background:transparent;border-radius:12px;color:#7f838d;font-size:9px}.rail-btn span{font-size:17px;font-weight:800}.rail-btn.active{background:#1a1c20;color:var(--accent2)}
.panel-wrap{border-right:1px solid var(--line);min-height:0;background:var(--panel);overflow:hidden}.panel{display:none;height:100%;overflow:auto;padding:18px 16px 30px}.panel.active{display:block}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#303238;border-radius:8px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.panel-title h2{font-size:18px;margin:0 0 4px}.panel-title p{font-size:11px;color:var(--muted);margin:0;line-height:1.45}.upload-card{height:126px;border:1px dashed #383b42;background:linear-gradient(145deg,#14161a,#0f1013);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;text-align:left}.upload-card:hover{border-color:#6d6048}.upload-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#23252b;color:var(--accent2);font-size:22px}.upload-card b,.upload-card span{display:block}.upload-card b{font-size:13px}.upload-card span{font-size:10px;color:var(--muted);margin-top:4px}.media-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.media-meta>div{background:#17191d;border:1px solid #23262b;padding:10px;border-radius:11px}.media-meta span,.media-meta b{display:block}.media-meta span{font-size:9px;color:var(--muted);margin-bottom:4px}.media-meta b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-meta>div:first-child{grid-column:1/-1}
.section-card,.export-card{background:linear-gradient(155deg,#181a1f,#111316);border:1px solid #292c32;border-radius:16px;padding:14px;margin-top:12px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.section-heading b,.section-heading span{display:block}.section-heading b{font-size:12px}.section-heading div>span{font-size:9px;color:var(--muted);margin-top:3px}.local-badge{font-size:8px!important;letter-spacing:.08em;color:#b7f1cc!important;background:#183424;border:1px solid #285d3e;padding:5px 7px;border-radius:99px}label{display:block;font-size:10px;color:#b5b8c0;margin:11px 0 0}label .hint{color:#686d78;float:right}select,input[type=text],input[type=number],textarea{width:100%;margin-top:6px;background:#0c0d10;border:1px solid #2a2d33;color:#f2f2f3;border-radius:9px;padding:9px 10px;outline:none;font-size:11px}select:focus,input:focus,textarea:focus{border-color:#6a5b40}.magic{width:100%;margin-top:12px;border:1px solid #9d7434;background:linear-gradient(135deg,#ffd98b,#dca448);color:#17100a;font-weight:800;padding:11px;border-radius:11px}.micro{font-size:9px;line-height:1.5;color:#727680;margin:9px 0 0}.progress{margin-top:10px}.progress-bar{height:6px;background:#26282e;border-radius:99px;overflow:hidden}.progress-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#dca448,#ffe3ab);transition:width .3s}.progress span{display:block;margin-top:6px;color:#9c9fa8;font-size:9px}
.caption-toolbar{display:flex;gap:6px;margin-bottom:12px}.chip{background:#17191d;border:1px solid #2b2e34;color:#8f939d;padding:6px 9px;font-size:9px;border-radius:99px}.chip.active{color:#18110a;background:var(--accent);border-color:var(--accent)}.caption-toolbar .mini{margin-left:auto}.empty-state{border:1px dashed #2d3036;border-radius:13px;padding:22px 14px;text-align:center;font-size:10px;line-height:1.5;color:#696e78}.segment-list,.word-list{display:flex;flex-direction:column;gap:7px}.segment-row,.word-row{border:1px solid #272a30;background:#15171b;border-radius:12px;padding:9px}.segment-row.active{border-color:#8b6836;box-shadow:inset 0 0 0 1px #8b6836}.segment-top{display:flex;gap:6px;align-items:center}.segment-text{width:100%;font-family:"Anek Gujarati",Inter;font-weight:600}.time-input{width:62px!important;padding:6px!important;margin:0!important;font-size:9px!important}.segment-actions{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.segment-actions span{font-size:8px;color:#777b85}.icon-btn{background:transparent;color:#797d87;padding:3px}.emphasis-select{width:110px!important;margin:0!important;padding:5px!important;font-size:8px!important}.word-row{display:grid;grid-template-columns:1fr 58px 58px 26px;gap:5px;align-items:center}.word-row input{margin:0;padding:6px;font-family:"Anek Gujarati"}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preset{background:#15171b;border:1px solid #292c32;border-radius:12px;padding:8px 6px;color:#a5a8b0}.preset.active{border-color:#a47a3c;background:#1c1812}.preset-preview{height:82px;border-radius:9px;background:#28231f;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:"Anek Gujarati";font-size:10px;line-height:1.05;margin-bottom:7px}.preset-preview b{font-family:Oswald,Inter;font-size:17px;color:#f3cf8d;text-shadow:1px 1px #392b22}.preset-preview.clean{background:#e9e9e7;color:#171717}.preset-preview.clean b{color:#171717;text-shadow:none}.preset-preview.karaoke{background:#16221d}.preset-preview.karaoke b{color:#9ff1be;text-shadow:none}.preset strong{font-size:8px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin-top:8px}input[type=range]{width:100%;accent-color:#e3b35e;margin-top:7px}input[type=color]{width:100%;height:35px;background:#0d0e10;border:1px solid #2b2d33;border-radius:8px;margin-top:6px;padding:2px}.toggle-row{display:flex;gap:8px;align-items:flex-start;border-top:1px solid #26292e;padding-top:11px;margin-top:13px}.toggle-row input{margin-top:2px;accent-color:#e6b657}.toggle-row b,.toggle-row small{display:block}.toggle-row b{font-size:10px;color:#d7d9de}.toggle-row small{color:#777b85;line-height:1.4;margin-top:3px}.upload-small{border:1px dashed #34373e;border-radius:12px;padding:13px;display:flex;align-items:center;gap:8px;cursor:pointer}.upload-small span{font-size:20px;color:#e7bb69}.upload-small b{font-size:10px}.quality-pill{padding:14px;border-radius:12px;background:radial-gradient(circle at top right,#3c2f1b,#15171a 55%);border:1px solid #403720;text-align:center}.quality-pill b,.quality-pill span{display:block}.quality-pill b{font-size:18px;color:#f3cc86}.quality-pill span{font-size:10px;color:#9e9f9e;margin-top:4px}
.stage-area{min-width:0;display:grid;grid-template-rows:42px minmax(0,1fr) 48px 116px;background:radial-gradient(circle at 50% 35%,#202226 0%,#0d0e11 52%,#090a0c 100%)}.stage-top{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.04)}.status-dot{display:flex;align-items:center;gap:7px;font-size:9px;color:#8f939c}.status-dot i{width:6px;height:6px;border-radius:50%;background:#555}.status-dot.ready i{background:#6de69a;box-shadow:0 0 10px rgba(109,230,154,.4)}.zoom-label{font-size:9px;color:#666b74}.stage-wrap{min-height:0;display:grid;place-items:center;padding:12px}.phone-stage{height:min(100%,640px);aspect-ratio:9/16;background:#0b0b0c;border-radius:9px;overflow:hidden;position:relative;box-shadow:0 25px 70px rgba(0,0,0,.5);border:1px solid #2a2c31}.phone-stage video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.checker{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#121316 25%,#15171a 25%,#15171a 50%,#121316 50%,#121316 75%,#15171a 75%);background-size:28px 28px;color:#70747d}.checker div{font-size:14px;font-weight:700;color:#aaaeb7}.checker span{font-size:9px;margin-top:5px}.caption-overlay{position:absolute;left:5%;right:5%;top:68%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none;font-family:"Anek Gujarati";font-weight:800;line-height:.98;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}.caption-overlay .small-line{color:#fff;font-size:.48em;-webkit-text-stroke:.025em #33271f;text-shadow:.025em .025em 0 #33271f}.caption-overlay .big-line{color:#f4d49a;font-family:Oswald,"Anek Gujarati";font-size:1em;font-weight:700;font-style:italic;-webkit-text-stroke:.038em #33271f;text-shadow:.035em .035em 0 #33271f}.caption-overlay.simple{display:block;color:#fff;-webkit-text-stroke:.035em #111;text-shadow:.03em .03em 0 #111}.caption-overlay.anim-pop{animation:captionPop .23s cubic-bezier(.2,1.45,.4,1)}.caption-overlay.anim-bounce{animation:captionBounce .34s ease}.caption-overlay.anim-rise{animation:captionRise .28s ease}.logo-overlay{position:absolute;width:16%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}.logo-overlay.top-right{top:4%;right:4%}.logo-overlay.top-left{top:4%;left:4%}.logo-overlay.bottom-right{bottom:4%;right:4%}.logo-overlay.bottom-left{bottom:4%;left:4%}.cta-overlay{position:absolute;left:50%;transform:translateX(-50%);max-width:90%;padding:5px 10px;border-radius:99px;background:rgba(10,10,11,.76);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);font-size:8px;font-weight:700;white-space:nowrap}.cta-overlay.bottom{bottom:5%}.cta-overlay.top{top:5%}.safe-guides{position:absolute;inset:0;pointer-events:none}.safe-guides i{position:absolute;border-color:rgba(255,255,255,.18);border-style:dashed}.safe-top{left:5%;right:5%;top:9%;border-top-width:1px}.safe-bottom{left:5%;right:14%;bottom:12%;border-top-width:1px}.safe-right{top:8%;bottom:12%;right:12%;border-left-width:1px}
@keyframes captionPop{0%{transform:translateY(-50%) scale(.72);opacity:.2}100%{transform:translateY(-50%) scale(1);opacity:1}}@keyframes captionBounce{0%{transform:translateY(-60%) scale(.9)}55%{transform:translateY(-46%) scale(1.04)}100%{transform:translateY(-50%) scale(1)}}@keyframes captionRise{0%{transform:translateY(-35%);opacity:0}100%{transform:translateY(-50%);opacity:1}}
.transport{display:flex;align-items:center;gap:8px;padding:0 15px;border-top:1px solid #1f2125;border-bottom:1px solid #1e2024;background:#0d0e10}.transport button{width:30px;height:30px;border-radius:9px;background:#181a1e;color:#c5c7cc}.transport .play{background:#e5b45c;color:#17100a;font-size:12px}.transport span{font-size:8px;color:#777b85}.transport input{flex:1;min-width:40px}.timeline{position:relative;background:#0b0c0e;overflow:hidden;padding:18px 10px 8px 68px}.timeline-ruler{position:absolute;left:68px;right:10px;top:3px;height:14px;color:#545860;font-size:7px;display:flex;justify-content:space-between}.timeline-track{height:35px;position:relative;margin-bottom:5px;border-radius:5px;background:#15171b;border:1px solid #202329}.track-label{position:absolute;left:-60px;top:11px;font-size:7px;color:#5e626b;letter-spacing:.08em}.video-track .track-fill{position:absolute;inset:3px;background:repeating-linear-gradient(90deg,#2b313c 0,#2b313c 14px,#242a33 14px,#242a33 28px);border-radius:3px}.caption-clips{position:absolute;inset:3px}.caption-clip{position:absolute;top:0;bottom:0;min-width:3px;background:#735a33;border:1px solid #b78a48;border-radius:3px;overflow:hidden;color:#f6dfba;font-family:"Anek Gujarati";font-size:7px;padding:4px;white-space:nowrap}.playhead{position:absolute;top:0;bottom:0;left:68px;width:1px;background:#f2cb84;pointer-events:none}.playhead:before{content:"";position:absolute;top:0;left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #f2cb84}
.result-dialog{border:1px solid #34363d;background:#131519;color:#f5f5f6;border-radius:18px;padding:28px;width:min(360px,90vw);box-shadow:var(--shadow);text-align:center}.result-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.dialog-x{position:absolute;right:10px;top:8px;background:transparent;color:#858993;font-size:22px}.success-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#193824;color:#8af0ad;border:1px solid #2f6643}.result-dialog h3{margin:0 0 6px;font-size:17px}.result-dialog p{font-size:10px;color:#8d919b;line-height:1.5;margin:0 0 15px}.toast{position:fixed;right:18px;bottom:18px;z-index:200;background:#181a1e;border:1px solid #373a42;border-radius:11px;padding:10px 13px;font-size:10px;color:#e7e7e9;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:none}.toast.error{border-color:#693636;color:#ffc1c1}
@media(max-width:1000px){.workspace{grid-template-columns:64px 300px minmax(360px,1fr)}.panel-wrap{font-size:90%}}@media(max-width:760px){body{overflow:auto}.app-shell{height:auto;min-height:100vh}.topbar{position:sticky;top:0;z-index:20}.brand small{display:none}.top-actions .ghost{display:none}.workspace{height:auto;display:grid;grid-template-columns:56px 1fr}.rail{grid-row:1;grid-column:1;position:sticky;top:66px;height:calc(100vh - 66px);z-index:10}.panel-wrap{grid-column:2;grid-row:1;min-height:520px;border-right:0}.stage-area{grid-column:1/-1;grid-row:2;min-height:760px;grid-template-rows:42px 520px 48px 116px}.panel{min-height:520px}.phone-stage{height:490px}.top-actions .primary{padding:9px 11px}.preset-grid{grid-template-columns:1fr 1fr}.preset:last-child{display:none}}@media(max-width:430px){.brand strong{font-size:12px}.brand-mark{width:34px;height:34px}.workspace{grid-template-columns:52px 1fr}.panel{padding:14px 12px}.control-grid{grid-template-columns:1fr}.stage-area{min-height:690px;grid-template-rows:38px 460px 46px 116px}.phone-stage{height:435px}.top-actions{gap:4px}.topbar{padding:0 10px}.preset-preview{height:70px}.transport{padding:0 8px}.timeline{padding-left:55px}.timeline-ruler{left:55px}.track-label{left:-48px}.playhead{left:55px}}