:root{--bg:#08080b;--panel:#121216;--line:#292933;--text:#f4f2f7;--muted:#aaa6b5;--purple:#8b20ff;--pink:#ff1494;--cyan:#10d9f4;--green:#00bd7a;--gold:#f2a800;--red:#e90055;--radius:18px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 0,#21102d 0,#08080b 28%,#060609 100%);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text);min-height:100vh}.app-shell{width:min(100%,760px);margin:auto;padding:12px 10px 40px}.topbar{height:60px;border:1px solid #321e42;border-radius:16px;background:#100c14;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;box-shadow:0 0 20px #6e13ff22}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:43px;height:43px;border-radius:12px;background:linear-gradient(135deg,#2b0a5a,#c83aff);display:grid;place-items:center;font-size:20px;box-shadow:0 0 16px #8b20ff99}.brand strong{font-size:20px;letter-spacing:-.4px}.brand span{margin-left:8px;background:linear-gradient(#ffd24b,#e89000);color:#190f00;font-weight:900;border-radius:7px;padding:4px 8px;font-size:12px}.api-status{border:1px solid #008b68;background:#062a24;color:#66ffd1;border-radius:20px;padding:8px 13px;font-weight:700}.nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0}.nav-grid button,.panel button,.panel select,.panel input{font:inherit}.nav-grid button{min-height:38px;border:1px solid #3b3b43;background:#19191e;color:#eee;border-radius:11px;font-weight:800}.nav-grid button:nth-child(2),.nav-grid button:nth-child(8){border-color:#a92cff;background:#361066;box-shadow:0 0 10px #7b16ff33}.nav-grid button:nth-child(4){border-color:#9b3eff;background:#3b1762}.nav-grid button:nth-child(5){border-color:#008f6a;background:#062f28}.nav-grid button:nth-child(6){border-color:#a76c00;background:#3a2505}.nav-grid button:nth-child(7){border-color:#7b0030;background:#410018}.nav-grid button:nth-child(8){border-color:#00bddd;background:#082a35}.nav-grid b{font-size:10px;background:#6121ff;padding:2px 5px;border-radius:8px}.panel{background:linear-gradient(180deg,#151519,#0e0e12);border:1px solid #303038;border-radius:var(--radius);padding:12px;margin:8px 0;box-shadow:0 0 0 1px #000 inset}.panel-head,.row,.music-row,.control-head,.voice-head,.export-row{display:flex;align-items:center;gap:8px}.panel-head{justify-content:space-between}.panel h3,.section-title{font-size:14px;letter-spacing:.5px;color:#bdb8c6;margin:0}.head-actions{display:flex;gap:6px}.panel button{border:1px solid #41414a;background:#26262c;color:#fff;border-radius:11px;padding:8px 11px;font-weight:800}.pink{background:linear-gradient(100deg,#9e17ff,#ff0c8f)!important;border-color:#ff2cb4!important}.gold{background:#291d0c!important;border-color:#c98a14!important;color:#ffd66a!important}.purple{background:linear-gradient(100deg,#7319ff,#ae19ff)!important;border-color:#b550ff!important}.green{background:linear-gradient(100deg,#008f62,#00b77a)!important;border-color:#00e0a0!important}.orange{background:linear-gradient(100deg,#ff4c1d,#ffab00)!important;color:white!important;border:0!important}.ghost{opacity:.45}.row{margin:8px 0}.toggle-label,.duration{display:flex;align-items:center;gap:7px;border:1px solid #383842;border-radius:10px;padding:7px 9px;color:#bbb}.toggle-label input{display:none}.toggle-label i{width:28px;height:15px;background:#333;border-radius:20px;position:relative}.toggle-label i:after{content:'';position:absolute;width:11px;height:11px;left:2px;top:2px;border-radius:50%;background:#aaa}.toggle-label input:checked+i{background:#7818e8}.toggle-label input:checked+i:after{left:15px;background:#fff}.duration{flex:1}.duration input{width:100%;background:none;border:0;outline:0;color:#fff}.script-panel textarea{width:100%;height:92px;resize:vertical;border-radius:12px;border:1px solid #34343b;background:#1b1b20;color:#fff;padding:12px;outline:0}.wave{margin:8px 0;height:32px;border:1px solid #2d2d35;border-radius:10px;display:flex;align-items:center;padding:0 8px;background:#0b0b0e}.wave-bars{flex:1;height:18px;opacity:.55;background:repeating-linear-gradient(90deg,#3c314a 0 2px,transparent 2px 5px);mask-image:linear-gradient(90deg,transparent,#fff 8%,#fff 92%,transparent)}.wave b{color:#ff2a8f;font-size:12px}.music-row select,.three-cols select,.voice-head select{flex:1;background:#1b1b20;color:#fff;border:1px solid #db1767;border-radius:10px;padding:9px}.pink-outline{border-color:#b61b72!important}.section-title{margin-bottom:10px}.control-head{flex-wrap:wrap}.control-head b{margin-right:auto}.channel,.pill{background:#24242a;border-radius:18px;padding:6px 10px;font-size:12px}.channel i,.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ffd000;margin-right:4px}.mini-grid,.time-grid,.voice-grid{display:grid;gap:7px;margin-top:8px}.mini-grid{grid-template-columns:repeat(3,1fr)}.time-grid{grid-template-columns:repeat(3,1fr)}.time-grid button{padding:7px}.time-grid .active{background:#e80065;border-color:#ff4a98}.three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.three-cols div{display:flex;flex-direction:column;gap:6px}.three-cols label{font-size:12px;color:#aaa}.three-cols em{float:right;color:#f3c65c;font-style:normal}.voice-head{justify-content:space-between}.voice-head select{flex:0 0 145px;border-color:#8e2eff}.voice-grid{grid-template-columns:repeat(3,1fr)}.voice-grid .selected{background:#7521ff;border-color:#b566ff}.export-row{margin:8px 0}.quality{flex:0 0 32%;background:#063a30!important;border:1px solid #00ce9a!important;color:#65ffd6!important}.quality strong{font-size:14px}.export{flex:1;background:linear-gradient(90deg,#7618ff,#ff0c88);border:0!important;padding:15px!important;font-size:18px!important}.preview-panel video{width:100%;max-height:480px;border-radius:12px;background:#000;margin-top:8px}.file-name{font-size:12px;color:#aaa;padding-top:6px}.gallery-title b{font-size:23px}.gallery-title em{font-style:normal;background:#6f16ad;border-radius:16px;padding:5px 11px;color:#f5bfff}.gallery-title small{display:block;color:#aaa;margin-top:4px}.gallery-actions{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.filters{background:#09090b;border:1px solid #26262d;border-radius:14px;padding:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:#aaa}.filter.active{background:#5d14a0}.threshold{width:100%;background:#17171c;border:1px solid #333;border-radius:12px;padding:8px}.threshold b{color:#ffc21a;border:1px solid #b77e00;padding:2px 6px;border-radius:5px}.thresholds{display:flex;justify-content:space-between;font-size:10px;margin-top:8px;word-spacing:6px}.thresholds strong{background:#ffc21a;color:#111;border-radius:5px;padding:3px}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}.gallery-item{position:relative;aspect-ratio:1/1;border-radius:15px;overflow:hidden;border:2px solid #2b2b31;background:#111}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-item .num{position:absolute;left:7px;top:7px;background:#08080cdd;padding:4px 7px;border-radius:7px;font-weight:900}.gallery-item .actions{position:absolute;right:6px;top:6px;display:flex;gap:4px}.gallery-item .actions button{padding:5px 7px;border:0;background:#09090ddd}.gallery-item input{position:absolute;right:7px;bottom:7px;width:18px;height:18px}.modal{position:fixed;inset:0;background:#000b;display:none;place-items:center;padding:20px;z-index:20}.modal.show{display:grid}.modal-card{width:min(100%,420px);background:#17171d;border:1px solid #63309a;border-radius:18px;padding:20px;position:relative;box-shadow:0 20px 80px #000}.modal-card .close{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:25px}.modal-card input{width:100%;padding:12px;border-radius:10px;border:1px solid #3d3d45;background:#0d0d11;color:#fff;margin:12px 0}.wide{width:100%}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#6f1b9d;color:#fff;border:1px solid #c056ff;border-radius:13px;padding:11px 16px;opacity:0;pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:560px){.app-shell{padding:8px}.brand strong{font-size:18px}.api-status{font-size:11px}.nav-grid button{font-size:12px;padding:6px 4px}.panel{padding:10px}.panel-head{align-items:flex-start}.head-actions{flex-direction:column}.head-actions button{font-size:11px}.three-cols{grid-template-columns:1fr 1fr}.three-cols div:last-child{grid-column:span 2}.quality{font-size:10px}.export{font-size:16px!important}.voice-head select{flex-basis:125px}}
