@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Abhaya+Libre:wght@500;700&family=Noto+Serif+Sinhala:wght@400;700&family=Yatra+One&display=swap";:root{--bg-primary:#080b11;--bg-secondary:#0f1624b3;--bg-tertiary:#19233a80;--border-glow:#00f2fe26;--border-glow-active:#4facfe66;--text-main:#f3f4f6;--text-muted:#9ca3af;--color-primary:#00f2fe;--color-secondary:#4facfe;--color-accent:#a855f7;--glass-shadow:0 8px 32px 0 #00000080;--glass-blur:blur(12px);--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--sub-font-family:"Abhaya Libre", serif;--sub-color:#fff;--sub-bg:#000000a6;--sub-size:24px;--sub-outline:2px #000;--sub-weight:700}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);background-image:radial-gradient(circle at 10% 20%,#00f2fe0d 0%,#0000 40%),radial-gradient(circle at 90% 80%,#a855f70d 0%,#0000 40%);background-attachment:fixed;min-height:100vh;font-family:Outfit,sans-serif;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff05}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--color-secondary)}.app-container{flex-direction:column;gap:1.5rem;max-width:1400px;min-height:100vh;margin:0 auto;padding:1.5rem;display:flex}.glass-panel{background:var(--bg-secondary);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-glow);box-shadow:var(--glass-shadow);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .3s,box-shadow .3s}.glass-panel:hover{border-color:#00f2fe40}.glass-panel.active{border-color:var(--border-glow-active);box-shadow:0 0 20px #4facfe26}.app-header{justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.brand{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;display:flex}.brand-sinhala{opacity:.8;-webkit-text-fill-color:var(--text-muted);font-size:1rem;font-weight:400}.header-controls{align-items:center;gap:1rem;display:flex}.app-grid{flex:1;grid-template-columns:1.4fr 1fr;gap:1.5rem;display:grid}@media (width<=1024px){.app-grid{grid-template-columns:1fr}}.left-column{flex-direction:column;gap:1.5rem;display:flex}.right-column{flex-direction:column;display:flex}.player-container{aspect-ratio:16/9;border-radius:var(--radius-lg);border:1px solid var(--border-glow);background-color:#000;width:100%;position:relative;overflow:hidden}.player-video{object-fit:contain;width:100%;height:100%}.subtitle-overlay-container{pointer-events:none;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;bottom:8%;left:5%;right:5%}.subtitle-overlay-text{font-family:var(--sub-font-family);color:var(--sub-color);background-color:var(--sub-bg);font-size:var(--sub-size);border-radius:var(--radius-sm);text-align:center;white-space:pre-wrap;word-break:break-word;line-height:1.4;font-weight:var(--sub-weight);text-shadow:-1px -1px 0 var(--sub-outline), 1px -1px 0 var(--sub-outline), -1px 1px 0 var(--sub-outline), 1px 1px 0 var(--sub-outline);padding:.35em .85em}.upload-container{border:2px dashed var(--border-glow);border-radius:var(--radius-lg);cursor:pointer;background:#0f162466;flex-direction:column;justify-content:center;align-items:center;min-height:350px;padding:3rem 1.5rem;transition:all .3s;display:flex}.upload-container:hover{border-color:var(--color-primary);background:#0f162499;box-shadow:0 0 25px #00f2fe14}.upload-icon{width:64px;height:64px;color:var(--color-primary);opacity:.8;margin-bottom:1.5rem}.upload-title{margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.upload-subtitle{color:var(--text-muted);font-size:.875rem}.tabs-container{border-bottom:1px solid var(--border-glow);gap:1.5rem;margin-bottom:1rem;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.75rem 0;font-size:.95rem;font-weight:500;transition:color .3s;position:relative}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--color-primary);font-weight:600}.tab-btn.active:after{content:"";background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));height:2px;box-shadow:0 0 8px var(--color-primary);position:absolute;bottom:-1px;left:0;right:0}.sub-editor-panel{flex-direction:column;height:520px;display:flex}.sub-list{flex-direction:column;flex:1;gap:.75rem;padding-right:.5rem;display:flex;overflow-y:auto}.sub-item{background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid #ffffff08;gap:.75rem;padding:.85rem;transition:all .2s;display:flex}.sub-item:hover,.sub-item.active{background:#19233acc;border-color:#00f2fe40}.sub-item.active{border-color:var(--color-primary);box-shadow:0 0 10px #00f2fe0d}.sub-item-meta{flex-direction:column;justify-content:space-between;min-width:90px;display:flex}.sub-time{color:var(--color-primary);border-radius:var(--radius-sm);text-align:center;background:#00f2fe14;padding:.2rem .4rem;font-family:monospace;font-size:.75rem}.sub-btn-play{cursor:pointer;width:28px;height:28px;color:var(--text-main);background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;transition:all .2s;display:flex}.sub-btn-play:hover{background:var(--color-primary);color:#000}.sub-textarea{border-radius:var(--radius-sm);color:var(--text-main);resize:none;background:#0003;border:1px solid #ffffff0f;flex:1;height:54px;padding:.5rem;font-family:Outfit,Noto Serif Sinhala,sans-serif;font-size:.95rem;line-height:1.4;transition:border-color .2s}.sub-textarea:focus{border-color:var(--color-primary);outline:none}.sub-actions{flex-direction:column;justify-content:center;display:flex}.sub-btn-delete{color:#ef444480;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:.25rem;transition:all .2s}.sub-btn-delete:hover{color:#ef4444;background:#ef444414}.editor-footer-actions{justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;display:flex}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-size:.9rem;font-weight:500;transition:all .3s;display:flex}.btn-primary{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);color:#020617;font-weight:600;box-shadow:0 4px 15px #00f2fe33}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00f2fe59}.btn-primary:disabled{opacity:.5;box-shadow:none;cursor:not-allowed;transform:none}.btn-secondary{color:var(--text-main);background:#ffffff0d;border:1px solid #ffffff14}.btn-secondary:hover{background:#ffffff1a;border-color:#ffffff26}.waveform-panel{flex-direction:column;gap:.75rem;display:flex}.waveform-header{justify-content:space-between;align-items:center;display:flex}.waveform-container{border-radius:var(--radius-md);background:#0000004d;border:1px solid #ffffff0a;padding:.5rem}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#020617d9;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--border-glow-active);border-radius:var(--radius-lg);background:#0f172a;width:100%;max-width:500px;padding:2rem;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;position:relative;box-shadow:0 10px 40px #000c}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;transition:color .2s}.modal-close:hover{color:var(--text-main)}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.form-label{color:var(--text-muted);font-size:.875rem;font-weight:500}.form-input{border-radius:var(--radius-md);color:var(--text-main);background:#0000004d;border:1px solid #ffffff14;padding:.65rem .85rem;font-family:inherit;font-size:.95rem;transition:border-color .2s}.form-input:focus{border-color:var(--color-primary);outline:none}.styling-panel{flex-direction:column;gap:1.25rem;padding:.5rem;display:flex}.styling-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}.styling-option{flex-direction:column;gap:.5rem;display:flex}.color-picker-wrapper{align-items:center;gap:.75rem;display:flex}.color-circle{cursor:pointer;border:2px solid #fff3;border-radius:50%;width:32px;height:32px;position:relative;overflow:hidden}.color-circle input[type=color]{opacity:0;cursor:pointer;width:50px;height:50px;position:absolute;top:-10px;left:-10px}input[type=range]{-webkit-appearance:none;background:var(--bg-tertiary);border-radius:5px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--color-primary);border-radius:50%;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.trimmer-bar{background:var(--bg-tertiary);border-radius:var(--radius-md);align-items:center;gap:1rem;padding:.75rem;font-size:.875rem;display:flex}.trimmer-inputs{align-items:center;gap:.5rem;display:flex}.trimmer-inputs input{text-align:center;width:70px}.speed-control{align-items:center;gap:.5rem;display:flex}.speed-badge{color:var(--color-accent);border-radius:var(--radius-sm);cursor:pointer;background:#a855f71f;padding:.2rem .5rem;font-size:.75rem;font-weight:600}.loader-overlay{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;height:100%;display:flex}.spinner{border:4px solid #00f2fe1a;border-left-color:var(--color-primary);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin;box-shadow:0 0 15px #00f2fe1a}.progress-bar-container{background:var(--bg-tertiary);border-radius:10px;width:250px;height:6px;position:relative;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));width:0%;height:100%;box-shadow:0 0 8px var(--color-primary);transition:width .3s}.status-text{font-size:1.05rem;font-weight:500}.sub-status-text{color:var(--text-muted);text-align:center;max-width:300px;font-size:.85rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}