:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --bg-body:#0d1117;
  --bg-card:#161b22;
  --bg-card-hover:#1c2128;
  --bg-panel:#1f242c;
  --bg-input:#0e131a;
  --border-color:#30363d;
  --border-hover:#484f58;
  --text-primary:#f0f6fc;
  --text-secondary:#8b949e;
  --text-muted:#6e7681;
  --primary:#6366f1;
  --primary-hover:#4f46e5;
  --primary-glow:rgba(99,102,241,0.25);
  --success:#10b981;
  --success-bg:rgba(16,185,129,0.15);
  --danger:#ef4444;
  --danger-bg:rgba(239,68,68,0.15);
  --warning:#f59e0b;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.5);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-full:9999px;
  --transition:all 0.2s ease-in-out;
}
[data-theme="light"]{
  --bg-body:#f8fafc;
  --bg-card:#ffffff;
  --bg-card-hover:#f1f5f9;
  --bg-panel:#f8fafc;
  --bg-input:#f1f5f9;
  --border-color:#e2e8f0;
  --border-hover:#cbd5e1;
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --primary:#4f46e5;
  --primary-hover:#4338ca;
  --primary-glow:rgba(79,70,229,0.18);
  --success:#059669;
  --success-bg:rgba(5,150,105,0.12);
  --danger:#dc2626;
  --danger-bg:rgba(220,38,38,0.12);
  --warning:#d97706;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,0.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background-color:var(--bg-body);
  color:var(--text-primary);
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  transition:background-color 0.3s ease,color 0.3s ease;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:var(--transition)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.app-container{max-width:1240px;margin:0 auto;padding:0 20px;width:100%}

/* Header & Navigation */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(22,27,34,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-color);
  transition:var(--transition);
}
[data-theme="light"] .site-header{background:rgba(255,255,255,0.92)}
.header-container{
  max-width:1240px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand-logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-icon{
  width:36px;
  height:36px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.logo-icon svg{width:22px;height:22px}
.logo-text{display:flex;flex-direction:column}
.logo-name{font-family:var(--font-display);font-size:1.125rem;font-weight:800;letter-spacing:-0.02em}
.logo-badge{font-size:0.6875rem;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}

.desktop-nav{display:none}
@media(min-width:992px){
  .desktop-nav{display:block}
}
.nav-list{display:flex;align-items:center;list-style:none;gap:4px}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:0.9375rem;
  font-weight:500;
  color:var(--text-secondary);
  border-radius:var(--radius-sm);
  background:none;
  border:none;
  cursor:pointer;
  transition:var(--transition);
}
.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-card-hover)}
.chevron-icon{width:16px;height:16px;transition:transform 0.2s ease}

/* Dropdown Menu - EXACT top: 100% REQUIRED RULE */
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  z-index:1100;
  min-width:680px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:18px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;
  pointer-events:none;
}
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.nav-item.has-dropdown:hover .chevron-icon{transform:rotate(180deg)}
.dropdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dropdown-col-title{
  font-size:0.75rem;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:0.06em;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border-color);
}
.dropdown-link{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:0.875rem;
  color:var(--text-secondary);
  transition:var(--transition);
}
.dropdown-link:hover,.dropdown-link.active{
  background:var(--bg-card-hover);
  color:var(--primary);
  transform:translateX(2px);
}
.dropdown-link strong{display:block;font-weight:600;color:var(--text-primary);font-size:0.875rem;line-height:1.2}
.dropdown-link small{font-size:0.75rem;color:var(--text-muted);display:block;margin-top:2px}
.link-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}

/* Header Actions */
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle-btn{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  width:38px;
  height:38px;
  border-radius:var(--radius-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);
}
.theme-toggle-btn:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}
.theme-toggle-btn svg{width:18px;height:18px}
[data-theme="dark"] .sun-icon{display:block}
[data-theme="dark"] .moon-icon{display:none}
[data-theme="light"] .sun-icon{display:none}
[data-theme="light"] .moon-icon{display:block}

.mobile-menu-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  padding:8px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  cursor:pointer;
}
@media(min-width:992px){.mobile-menu-btn{display:none}}
.mobile-menu-btn .bar{width:100%;height:2px;background-color:var(--text-primary);border-radius:2px;transition:var(--transition)}
.mobile-menu-btn.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.active .bar:nth-child(2){opacity:0}
.mobile-menu-btn.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile Drawer */
.mobile-drawer{
  display:none;
  position:fixed;
  top:62px;
  left:0;
  right:0;
  bottom:0;
  background:var(--bg-card);
  z-index:999;
  padding:20px;
  overflow-y:auto;
  border-top:1px solid var(--border-color);
}
.mobile-drawer.open{display:block}
.mobile-nav-group{margin-bottom:20px}
.mobile-group-title{font-size:0.75rem;text-transform:uppercase;color:var(--text-muted);font-weight:700;letter-spacing:0.06em;margin-bottom:8px}
.mobile-link{
  display:block;
  padding:10px 12px;
  font-size:0.9375rem;
  color:var(--text-secondary);
  border-radius:var(--radius-sm);
  margin-bottom:4px;
}
.mobile-link:hover,.mobile-link.active{background:var(--bg-card-hover);color:var(--primary)}

/* Breadcrumb Bar */
.breadcrumb-bar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  padding:8px 0;
  font-size:0.8125rem;
}
.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px;list-style:none}
.breadcrumb-item a{color:var(--text-secondary)}
.breadcrumb-item a:hover{color:var(--primary)}
.breadcrumb-item.active{color:var(--text-primary);font-weight:600}
.breadcrumb-separator svg{width:12px;height:12px;color:var(--text-muted)}

/* Hero Section */
.hero-section{padding:36px 0 48px;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(99,102,241,0.15),transparent)}
.hero-intro{text-align:center;max-width:820px;margin:0 auto 32px}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-full);
  font-size:0.8125rem;
  font-weight:600;
  color:var(--primary);
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--success);box-shadow:0 0 8px var(--success)}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,4.5vw,2.75rem);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-0.03em;
  margin-bottom:14px;
}
.gradient-text{
  background:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-subtitle{font-size:1.0625rem;color:var(--text-secondary);max-width:720px;margin:0 auto;line-height:1.6}

/* Toast Container */
.toast-container{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:380px;
  pointer-events:none;
}
.toast{
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-left:4px solid var(--primary);
  border-radius:var(--radius-md);
  padding:12px 16px;
  font-size:0.875rem;
  box-shadow:var(--shadow-lg);
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  animation:toastSlideIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
.toast.toast-success{border-left-color:var(--success)}
.toast.toast-danger{border-left-color:var(--danger)}
.toast.toast-warning{border-left-color:var(--warning)}
@keyframes toastSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Studio App Card */
.studio-wrapper{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.studio-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 20px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-color);
}
.toolbar-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-indicator{width:10px;height:10px;border-radius:50%;background:var(--text-muted)}
.status-indicator.ready{background:var(--success);box-shadow:0 0 8px var(--success)}
.status-indicator.busy{background:var(--warning);box-shadow:0 0 8px var(--warning)}
.status-text{font-size:0.875rem;font-weight:600}
.clip-count-pill,.total-duration-pill{
  font-size:0.75rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:var(--radius-full);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
}
.toolbar-actions{display:flex;align-items:center;gap:8px}

/* Studio Vertical Stack Layout (Optimized Full-Width - No Side Trimming) */
.studio-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:24px;
  width:100%;
  box-sizing:border-box;
}
.studio-left-panel,.studio-right-panel{
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Timeline Quick Bottom Actions */
.timeline-bottom-actions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:14px;
  border-top:1px solid var(--border-color);
}
.btn-merge-timeline{
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px var(--primary-glow);
}
.btn-merge-timeline:hover:not(:disabled){
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  transform:translateY(-2px);
}

/* Floating Sticky Merge Action Bar */
.floating-merge-bar{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:900;
  width:calc(100% - 32px);
  max-width:680px;
  background:rgba(22,27,34,0.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--primary);
  box-shadow:0 10px 30px rgba(0,0,0,0.5),0 0 20px var(--primary-glow);
  border-radius:var(--radius-lg);
  padding:10px 16px;
  animation:floatingSlideUp 0.3s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .floating-merge-bar{
  background:rgba(255,255,255,0.95);
}
@keyframes floatingSlideUp{from{transform:translate(-50%,100%);opacity:0}to{transform:translate(-50%,0);opacity:1}}

.floating-bar-content{display:flex;align-items:center;justify-content:space-between;gap:12px}
.floating-bar-info{display:flex;align-items:center;gap:10px}
.floating-pulse-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 10px var(--success);
  animation:pulseDot 1.5s infinite;
}
@keyframes pulseDot{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,0.7)}70%{transform:scale(1);box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.floating-text-group{display:flex;flex-direction:column}
.floating-text-group strong{font-size:0.875rem;color:var(--text-primary);line-height:1.2}
.floating-sub{font-size:0.75rem;color:var(--text-secondary)}
.floating-bar-actions{display:flex;align-items:center;gap:8px}
.btn-merge-floating{
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 10px var(--primary-glow);
}

/* Buttons System */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  font-size:0.9375rem;
  font-weight:600;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--transition);
  user-select:none;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-sm{padding:6px 12px;font-size:0.8125rem}
.btn-sm svg{width:14px;height:14px}
.btn-lg{padding:14px 24px;font-size:1.0625rem}
.btn-block{width:100%}

.btn-primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 4px 14px var(--primary-glow);transform:translateY(-1px)}
.btn-success{background:var(--success);color:#fff;border-color:transparent}
.btn-success:hover:not(:disabled){background:#059669;box-shadow:0 4px 14px rgba(16,185,129,0.35);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-color)}
.btn-secondary:hover:not(:disabled){background:var(--border-color);border-color:var(--border-hover)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border-color)}
.btn-ghost:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text-primary)}
.btn-outline-primary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline-primary:hover:not(:disabled){background:var(--primary);color:#fff}
.btn-outline-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-outline-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-ghost-danger{background:transparent;color:var(--danger);border-color:transparent}
.btn-ghost-danger:hover:not(:disabled){background:var(--danger-bg)}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* Dropzone */
.file-input-hidden{display:none}
.upload-dropzone{
  border:2px dashed var(--border-color);
  border-radius:var(--radius-lg);
  padding:32px 20px;
  text-align:center;
  background:var(--bg-panel);
  cursor:pointer;
  transition:var(--transition);
}
.upload-dropzone:hover,.upload-dropzone.dragover{
  border-color:var(--primary);
  background:rgba(99,102,241,0.04);
}
.dropzone-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
}
.dropzone-icon svg{width:28px;height:28px}
.dropzone-title{font-size:1.125rem;font-weight:700;margin-bottom:6px}
.dropzone-desc{font-size:0.875rem;color:var(--text-secondary);margin-bottom:16px}
.dropzone-buttons{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.dropzone-hint{font-size:0.75rem;color:var(--text-muted)}

/* Timeline & Clips List */
.panel-heading{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
}
.panel-heading svg{width:18px;height:18px;color:var(--primary)}
.timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.timeline-controls-hint small{font-size:0.75rem;color:var(--text-muted)}
.timeline-empty{
  border:1px dashed var(--border-color);
  border-radius:var(--radius-md);
  padding:30px 20px;
  text-align:center;
  color:var(--text-muted);
  font-size:0.875rem;
}
.empty-icon{font-size:2rem;margin-bottom:8px}

.clips-list{display:flex;flex-direction:column;gap:12px}
.clip-item{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:var(--transition);
  position:relative;
}
.clip-item.dragging{opacity:0.4;border-color:var(--primary)}
.clip-item.drag-over{border-color:var(--primary);transform:translateY(2px)}
.clip-main-row{display:flex;align-items:center;gap:12px}
.clip-drag-handle{
  cursor:grab;
  color:var(--text-muted);
  padding:4px;
  display:flex;
  align-items:center;
}
.clip-drag-handle:active{cursor:grabbing}
.clip-drag-handle svg{width:18px;height:18px}
.clip-thumb-box{
  width:80px;
  height:50px;
  border-radius:var(--radius-sm);
  background:#000;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}
.clip-thumb-box canvas,.clip-thumb-box video{width:100%;height:100%;object-fit:cover}
.clip-order-badge{
  position:absolute;
  top:2px;
  left:2px;
  background:rgba(0,0,0,0.75);
  color:#fff;
  font-size:0.625rem;
  font-weight:700;
  padding:1px 5px;
  border-radius:3px;
}
.clip-meta-box{flex:1;min-width:0}
.clip-filename{font-size:0.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-sub-info{font-size:0.75rem;color:var(--text-secondary);display:flex;gap:8px;margin-top:2px}
.clip-actions-group{display:flex;align-items:center;gap:4px}
.btn-icon{
  background:transparent;
  border:none;
  color:var(--text-secondary);
  padding:6px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
}
.btn-icon:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.btn-icon.btn-icon-danger:hover{background:var(--danger-bg);color:var(--danger)}
.btn-icon svg{width:16px;height:16px}

/* Clip Trim & Volume Options */
.clip-tools-drawer{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  font-size:0.75rem;
}
@media(min-width:600px){
  .clip-tools-drawer{grid-template-columns:1.5fr 1fr 1fr}
}
.clip-tool-field label{display:block;margin-bottom:3px;color:var(--text-secondary);font-weight:600}
.clip-trim-inputs{display:flex;align-items:center;gap:6px}
.clip-trim-inputs input{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border-color);
  border-radius:4px;
  padding:4px 6px;
  font-size:0.75rem;
  color:var(--text-primary);
}

/* Audio Mixer Card */
.card-box{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:16px;
}
.audio-mixer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.audio-title-group{display:flex;align-items:center;gap:8px;font-size:0.9375rem;font-weight:600}
.audio-title-group svg{width:18px;height:18px;color:var(--primary)}
.audio-state-tag{font-size:0.6875rem;padding:2px 8px;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-muted)}
.audio-state-tag.active{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.section-subtext{font-size:0.8125rem;color:var(--text-secondary);margin-bottom:12px}
.audio-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.audio-controls-group{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.audio-info-badge{font-size:0.8125rem;font-weight:600;color:var(--primary)}
.slider-row{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--text-secondary)}

/* Custom Sliders & Form Controls */
.custom-range{
  width:100%;
  height:6px;
  border-radius:3px;
  background:var(--border-color);
  outline:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.custom-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--primary);
  cursor:pointer;
  box-shadow:0 0 6px var(--primary-glow);
  transition:transform 0.1s;
}
.custom-range::-webkit-slider-thumb:hover{transform:scale(1.2)}

.toggle-switch{
  position:relative;
  display:inline-block;
  width:36px;
  height:20px;
  flex-shrink:0;
}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;
  cursor:pointer;
  top:0;left:0;right:0;bottom:0;
  background-color:var(--border-color);
  transition:0.2s;
  border-radius:20px;
}
.toggle-slider:before{
  position:absolute;
  content:"";
  height:14px;
  width:14px;
  left:3px;
  bottom:3px;
  background-color:#fff;
  transition:0.2s;
  border-radius:50%;
}
.toggle-switch input:checked + .toggle-slider{background-color:var(--primary)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(16px)}

/* Preview Player Card */
.preview-player-card{display:flex;flex-direction:column;gap:12px}
.player-header{display:flex;align-items:center;justify-content:space-between}
.player-badges{display:flex;align-items:center;gap:6px}
.aspect-badge,.res-badge{
  font-size:0.75rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
}
.preview-viewport-wrapper{
  width:100%;
  max-width:880px;
  margin:0 auto 12px;
  background:#000;
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
}
.aspect-16-9{aspect-ratio:16/9;max-height:495px}
.aspect-9-16{aspect-ratio:9/16;max-height:480px;margin:0 auto}
.aspect-1-1{aspect-ratio:1/1;max-height:450px;margin:0 auto}
.aspect-4-5{aspect-ratio:4/5;max-height:480px;margin:0 auto}
.aspect-21-9{aspect-ratio:21/9;max-height:380px}

#previewCanvas{width:100%;height:100%;object-fit:contain}
.preview-overlay-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text-muted);
  text-align:center;
  padding:20px;
  background:rgba(0,0,0,0.6);
}
.preview-overlay-placeholder svg{width:48px;height:48px;opacity:0.4}
.preview-loading-spinner{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-size:0.875rem;
}
.spinner{
  width:32px;
  height:32px;
  border:3px solid rgba(255,255,255,0.2);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.player-controls{
  max-width:880px;
  margin:0 auto;
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.scrub-bar-container{position:relative;width:100%;height:8px;display:flex;align-items:center}
.timeline-slider{
  width:100%;
  height:6px;
  background:transparent;
  outline:none;
  -webkit-appearance:none;
  cursor:pointer;
  z-index:2;
  position:relative;
}
.timeline-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--primary);
  cursor:pointer;
  box-shadow:0 0 4px rgba(0,0,0,0.5);
}
.timeline-progress-fill{
  position:absolute;
  left:0;
  top:1px;
  height:6px;
  background:var(--primary);
  border-radius:3px;
  pointer-events:none;
  z-index:1;
}

.player-button-row{display:flex;align-items:center;justify-content:space-between}
.left-controls,.right-controls{display:flex;align-items:center;gap:6px}
.player-btn{
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);
}
.player-btn:hover:not(:disabled){background:var(--bg-card-hover);color:var(--primary)}
.player-btn:disabled{opacity:0.4;cursor:not-allowed}
.player-btn svg{width:16px;height:16px}
.time-display{font-size:0.8125rem;font-variant-numeric:tabular-nums;color:var(--text-secondary);margin-left:6px}

/* Settings Form */
.settings-form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-row-2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.form-row-2{grid-template-columns:1fr 1fr}}
.form-label{font-size:0.8125rem;font-weight:600;color:var(--text-secondary)}
.form-control{
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:9px 12px;
  font-size:0.875rem;
  color:var(--text-primary);
  outline:none;
  transition:var(--transition);
}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}

.merge-action-box{margin-top:16px;text-align:center}
.btn-merge-main{
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  font-size:1.125rem;
  padding:16px;
  box-shadow:0 4px 20px var(--primary-glow);
}
.btn-merge-main:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);transform:translateY(-2px)}
.action-caption{font-size:0.75rem;color:var(--text-muted);margin-top:8px}

/* Real-Time Progress Card */
.progress-card{background:var(--bg-panel);border-color:var(--primary)}
.progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.progress-title-group{display:flex;align-items:center;gap:10px}
.spinner-sm{
  width:18px;
  height:18px;
  border:2px solid var(--border-color);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.progress-title{font-size:0.9375rem;font-weight:700}
.progress-percent{font-size:1.25rem;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.progress-bar-track{
  width:100%;
  height:10px;
  background:var(--bg-input);
  border:1px solid var(--border-color);
  border-radius:5px;
  overflow:hidden;
  margin-bottom:10px;
}
.progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  transition:width 0.15s ease;
}
.progress-meta-row{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--text-secondary);margin-bottom:12px}
.btn-cancel-merge{margin-top:4px}

/* Result Card */
.result-card{
  border:2px solid var(--success);
  box-shadow:0 10px 30px rgba(16,185,129,0.25);
  animation:resultPopIn 0.35s cubic-bezier(0.16,1,0.3,1);
  background:var(--bg-panel);
}
@keyframes resultPopIn{
  from{transform:translateY(-8px) scale(0.98);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.result-title-group{display:flex;align-items:center;gap:12px}
.success-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--success);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 16px rgba(16,185,129,0.5);
}
.success-icon svg{width:24px;height:24px}
.result-title{font-size:1.1875rem;font-weight:800;color:var(--text-primary)}
.result-sub{font-size:0.8125rem;color:var(--text-secondary)}
.badge-success{
  font-size:0.75rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:var(--radius-full);
  background:var(--success-bg);
  color:var(--success);
  border:1px solid var(--success);
}
.result-video-wrapper{
  width:100%;
  max-width:880px;
  margin:0 auto 16px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
}
.result-video-wrapper video{width:100%;max-height:480px;display:block;object-fit:contain;margin:0 auto}
.result-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:16px;
}
@media(min-width:600px){
  .result-meta-grid{grid-template-columns:repeat(4,1fr)}
}
.meta-item{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  text-align:center;
}
.meta-label{font-size:0.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;display:block}
.meta-val{font-size:0.875rem;font-weight:700;color:var(--text-primary);margin-top:2px}
.result-actions-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media(min-width:600px){
  .result-actions-grid{grid-template-columns:1.5fr 1.2fr 1.1fr 0.8fr}
}
.btn-download-action{
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px rgba(16,185,129,0.35);
}
.btn-download-action:hover{
  background:linear-gradient(135deg,#059669 0%,#047857 100%);
  transform:translateY(-2px);
}

/* Tools Showcase Grid Section */
.tools-grid-section{
  padding:60px 0;
  background:var(--bg-card);
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
.section-header{max-width:760px;margin:0 auto 36px}
.text-center{text-align:center}
.section-eyebrow{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:8px;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.5vw,2.25rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin-bottom:12px;
}
.section-subtitle{font-size:0.9375rem;color:var(--text-secondary);line-height:1.6}

.tools-showcase-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:576px){.tools-showcase-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.tools-showcase-grid{grid-template-columns:repeat(3,1fr)}}

.tool-card{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:var(--transition);
}
.tool-card:hover{
  border-color:var(--primary);
  background:var(--bg-card-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.tool-card-icon{font-size:1.75rem;flex-shrink:0}
.tool-card-info{flex:1;min-width:0}
.tool-name{font-size:0.9375rem;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.tool-desc{font-size:0.75rem;color:var(--text-secondary);line-height:1.4}
.tool-arrow{font-size:1.125rem;color:var(--text-muted);transition:var(--transition)}
.tool-card:hover .tool-arrow{color:var(--primary);transform:translateX(4px)}

/* Features Section */
.features-section{padding:70px 0}
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media(min-width:600px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.features-grid{grid-template-columns:repeat(4,1fr)}}

.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:var(--transition);
}
.feature-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.feature-icon-wrapper{
  width:48px;
  height:48px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.feature-icon-wrapper svg{width:24px;height:24px}
.gradient-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.gradient-purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.gradient-pink{background:linear-gradient(135deg,#ec4899,#be185d)}
.gradient-emerald{background:linear-gradient(135deg,#10b981,#047857)}
.gradient-amber{background:linear-gradient(135deg,#f59e0b,#b45309)}
.gradient-indigo{background:linear-gradient(135deg,#6366f1,#4338ca)}
.gradient-cyan{background:linear-gradient(135deg,#06b6d4,#0e7490)}
.gradient-rose{background:linear-gradient(135deg,#f43f5e,#be123c)}

.feature-title{font-size:1.0625rem;font-weight:700}
.feature-desc{font-size:0.875rem;color:var(--text-secondary);line-height:1.6}

/* How It Works Section */
.how-it-works-section{
  padding:70px 0;
  background:var(--bg-card);
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
.steps-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media(min-width:600px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.steps-grid{grid-template-columns:repeat(4,1fr)}}

.step-card{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:var(--transition);
}
.step-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.step-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:0.6875rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:var(--primary-glow);
  color:var(--primary);
  padding:3px 10px;
  border-radius:var(--radius-full);
  margin-bottom:14px;
}
.step-icon{font-size:2rem;margin-bottom:12px}
.step-title{font-size:1.0625rem;font-weight:700;margin-bottom:8px}
.step-desc{font-size:0.875rem;color:var(--text-secondary);line-height:1.6}

/* SEO Article Section */
.seo-article-section{padding:70px 0}
.article-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  box-shadow:var(--shadow-md);
}
.article-header{margin-bottom:20px}
.article-title{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,3vw,1.85rem);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.02em;
}
.article-content{display:flex;flex-direction:column;gap:16px;font-size:0.9375rem;color:var(--text-secondary);line-height:1.7}
.article-content p strong{color:var(--text-primary)}

/* FAQ Accordion Section */
.faq-section{
  padding:70px 0;
  background:var(--bg-card);
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
.faq-accordion-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:var(--transition);
}
.faq-item:hover{border-color:var(--border-hover)}
.faq-question{
  width:100%;
  background:transparent;
  border:none;
  padding:18px 20px;
  text-align:left;
  font-size:0.9375rem;
  font-weight:700;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.faq-chevron{width:18px;height:18px;color:var(--text-muted);transition:transform 0.25s ease;flex-shrink:0}
.faq-item.active .faq-chevron{transform:rotate(180deg);color:var(--primary)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease-out;
}
.faq-answer-inner{
  padding:0 20px 18px;
  font-size:0.875rem;
  color:var(--text-secondary);
  line-height:1.65;
}
.faq-answer-inner strong{color:var(--text-primary)}

/* CTA Section */
.cta-section{padding:70px 0}
.cta-card{
  background:linear-gradient(135deg,rgba(99,102,241,0.12) 0%,rgba(168,85,247,0.12) 100%),var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:50px 30px;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.cta-content{max-width:680px;margin:0 auto}
.cta-badge{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--primary);
  margin-bottom:12px;
}
.cta-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.25rem);
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:-0.02em;
}
.cta-desc{font-size:1rem;color:var(--text-secondary);margin-bottom:28px;line-height:1.6}
.cta-buttons{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.btn-cta-primary{
  background:var(--primary);
  color:#fff;
  padding:14px 28px;
  font-size:1rem;
  font-weight:700;
  border-radius:var(--radius-md);
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 4px 16px var(--primary-glow);
}
.btn-cta-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-cta-primary svg,.btn-cta-secondary svg{width:20px;height:20px}
.btn-cta-secondary{
  background:var(--bg-panel);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  padding:14px 28px;
  font-size:1rem;
  font-weight:700;
  border-radius:var(--radius-md);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-cta-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px)}

/* Footer */
.site-footer{
  background:var(--bg-card);
  border-top:1px solid var(--border-color);
  padding:60px 0 24px;
  font-size:0.875rem;
  margin-top:auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-bottom:40px;
}
@media(min-width:576px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}}

.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand-name{font-family:var(--font-display);font-size:1.25rem;font-weight:800}
.footer-tagline{font-size:0.8125rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}
.footer-legal-links{font-size:0.8125rem;color:var(--text-muted)}
.footer-legal-links a:hover{color:var(--primary)}

.footer-col-title{
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-primary);
  margin-bottom:14px;
}
.footer-link-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-link-list a{color:var(--text-secondary);font-size:0.8125rem;transition:var(--transition)}
.footer-link-list a:hover{color:var(--primary);padding-left:3px}

.footer-bottom{
  border-top:1px solid var(--border-color);
  padding-top:24px;
  font-size:0.75rem;
  color:var(--text-muted);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.trademark-disclaimer p{line-height:1.5}
.copyright-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom-links{display:flex;align-items:center;gap:8px}
.footer-bottom-links a:hover{color:var(--primary)}

/* Cookie Banner */
.cookie-banner{
  position:fixed;
  bottom:20px;
  left:20px;
  right:20px;
  max-width:540px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  box-shadow:var(--shadow-lg);
  z-index:9999;
  display:none;
  animation:toastSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.show{display:block}
.cookie-content{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cookie-icon{font-size:1.75rem;flex-shrink:0}
.cookie-text{flex:1;min-width:240px;font-size:0.8125rem;color:var(--text-secondary);line-height:1.5}
.cookie-text a{color:var(--primary);text-decoration:underline}
.cookie-actions{display:flex;align-items:center;gap:8px}

/* Mobile Responsiveness & Overflow Protection */
@media(max-width:768px){
  .app-container{padding:0 14px}
  .studio-toolbar{padding:10px 14px}
  .studio-grid{padding:14px;gap:16px}
  .hero-section{padding:24px 0 36px}
  .tools-grid-section,.features-section,.how-it-works-section,.seo-article-section,.faq-section,.cta-section{padding:48px 0}
}