/* Ultimate Video Editor — Nebula Glassmorphism */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#060a14;
  --bg2:#0b1226;
  --card:#0f1a33cc;
  --card2:#131e3fcc;
  --glass:rgba(255,255,255,0.06);
  --glass2:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.12);
  --text:#eaf0ff;
  --muted:#8a97b8;
  --muted2:#5e6b8a;
  --accent:#7c3cff;
  --accent2:#00d4ff;
  --grad:linear-gradient(135deg,#7c3cff 0%,#00d4ff 100%);
  --grad2:linear-gradient(135deg,#ff3b9a 0%,#7c3cff 50%,#00d4ff 100%);
  --success:#00e6a0;
  --danger:#ff3b6e;
  --warning:#ffb020;
  --radius:16px;
  --radius2:20px;
  --shadow:0 20px 60px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3);
}
[data-theme="light"]{
  --bg:#eef1ff;
  --bg2:#e6e9ff;
  --card:rgba(255,255,255,0.85);
  --card2:rgba(248,249,255,0.9);
  --glass:rgba(15,26,51,0.06);
  --glass2:rgba(15,26,51,0.08);
  --border:rgba(15,26,51,0.08);
  --border2:rgba(15,26,51,0.12);
  --text:#0f1a33;
  --muted:#5e6b8a;
  --muted2:#8a97b8;
  --shadow:0 20px 60px rgba(15,26,51,0.08), 0 8px 20px rgba(15,26,51,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(800px 600px at 15% 10%, rgba(124,60,255,0.18), transparent 60%),
    radial-gradient(900px 700px at 85% 15%, rgba(0,212,255,0.12), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(255,59,154,0.08), transparent 60%),
    linear-gradient(180deg, #060a14 0%, #0a0f1e 100%);
  z-index:-2;
}
[data-theme="light"] body::before{
  background:
    radial-gradient(800px 600px at 15% 10%, rgba(124,60,255,0.10), transparent 60%),
    radial-gradient(900px 700px at 85% 15%, rgba(0,212,255,0.08), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(255,59,154,0.06), transparent 60%),
    linear-gradient(180deg, #eef1ff 0%, #e6e9ff 100%);
}
.grid-bg{
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:40px 40px;
  mask:radial-gradient(ellipse at center, black 40%, transparent 80%);
  z-index:-1;
  pointer-events:none;
}

/* Overlay */
.overlay{
  position:fixed;inset:0;
  background:rgba(6,10,20,0.85);
  backdrop-filter:blur(16px);
  display:grid;place-items:center;
  z-index:100;
  transition:opacity .4s, visibility .4s;
}
.overlay.hide{ opacity:0; visibility:hidden; pointer-events:none; }
[data-theme="light"] .overlay{ background:rgba(238,241,255,0.85); }
.overlay-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 32px;
  text-align:center;
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  max-width:420px;width:90%;
}
.overlay-card h2{ font-family:'Space Grotesk',sans-serif;font-size:22px;margin-bottom:8px; }
.overlay-card p{ font-size:13px;color:var(--muted);line-height:1.5; }
.overlay-hint{ margin-top:16px;font-size:11px;color:var(--muted2)!important; }
.spinner{
  width:48px;height:48px;margin:0 auto 16px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.progress-track{ height:8px;background:rgba(255,255,255,0.08);border-radius:999px;overflow:hidden;margin-top:16px; }
.progress-bar{ height:100%;background:var(--grad);border-radius:999px;transition:width .3s;width:0%; }

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(20px) saturate(1.4);
  background:rgba(6,10,20,0.7);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
}
[data-theme="light"] .topbar{ background:rgba(255,255,255,0.75); }
.brand{display:flex;align-items:center;gap:14px}
.logo{ width:42px;height:42px;border-radius:12px; background:var(--grad); display:grid;place-items:center; box-shadow:0 8px 20px rgba(124,60,255,0.35); }
.logo svg{width:22px;height:22px;fill:none;stroke:white;stroke-width:2}
.brand h1{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.02em}
.brand h1 span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand p{font-size:11px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;margin-top:1px}
.top-actions{display:flex;align-items:center;gap:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(255,176,32,0.15);color:var(--warning);border:1px solid rgba(255,176,32,0.25)}
.badge.ok{ background:rgba(0,230,160,0.12);color:var(--success);border-color:rgba(0,230,160,0.2); }

/* Buttons */
.btn{
  appearance:none;border:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;
  padding:10px 18px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s;
  text-decoration:none;
}
.btn-primary{background:var(--grad);color:white;box-shadow:0 8px 20px rgba(124,60,255,0.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(124,60,255,0.4)}
.btn-ghost{background:var(--glass);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass2);border-color:var(--border2)}
.btn-danger{background:rgba(255,59,110,0.12);color:var(--danger);border:1px solid rgba(255,59,110,0.2)}
.theme-toggle{ width:42px;height:42px;border-radius:999px; display:grid;place-items:center; border:1px solid var(--border2); background:linear-gradient(135deg, rgba(124,60,255,0.15), rgba(0,212,255,0.12)); color:var(--text); cursor:pointer; transition:all .2s; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.theme-toggle:hover{ background:linear-gradient(135deg, rgba(124,60,255,0.22), rgba(0,212,255,0.18)); border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 16px rgba(124,60,255,0.25); }
.theme-toggle svg{width:20px;height:20px; stroke-width:2.2; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
[data-theme="light"] .theme-toggle{ background:#ffffff; border-color:rgba(15,26,51,0.12); color:#0f1a33; box-shadow:0 4px 12px rgba(15,26,51,0.08); }
[data-theme="light"] .theme-toggle:hover{ background:#f8f9ff; border-color:var(--accent); }

/* Layout */
.wrap{max-width:1440px;margin:0 auto;padding:24px 20px 40px;display:grid;grid-template-columns:1.35fr 0.85fr;gap:20px}
@media(max-width:1100px){.wrap{grid-template-columns:1fr}}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius:20px;
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
[data-theme="light"] .card{ background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); }
.card-pad{padding:18px}
.card-head{ display:flex;align-items:center;justify-content:space-between; padding:16px 18px;border-bottom:1px solid var(--border); }
.card-head h3{font-family:'Space Grotesk',sans-serif;font-size:14px}
.card-head .count{font-size:12px;color:var(--muted);background:var(--glass);padding:6px 10px;border-radius:999px;border:1px solid var(--border)}

/* Upload */
.upload-zone{
  border:1.5px dashed rgba(124,60,255,0.35);
  background:linear-gradient(135deg, rgba(124,60,255,0.08), rgba(0,212,255,0.06));
  border-radius:16px;padding:20px;
  display:flex;align-items:center;gap:14px;
  transition:all .2s;
  margin:18px;
}
.upload-zone.dragover{border-color:var(--accent);background:rgba(124,60,255,0.14);transform:scale(1.01)}
.upload-icon{width:48px;height:48px;border-radius:12px;background:var(--grad);display:grid;place-items:center;flex-shrink:0;font-size:22px}
.upload-zone b{font-size:14px}
.upload-zone p{font-size:12px;color:var(--muted)}
@media(max-width:600px){ .upload-zone{ flex-direction:column;text-align:center; } }

/* Video */
.video-wrap{
  position:relative;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  margin:0 18px 18px;
  aspect-ratio:16/9;
  display:grid;place-items:center;
}
.video-wrap video{ width:100%;height:100%;object-fit:contain;background:#000; }
.crop-overlay{
  position:absolute;inset:0;
  background:transparent;
  pointer-events:none; /* allow clicks outside box to reach video play button */
}
.crop-box{
  position:absolute;
  border:2px solid #00d4ff;
  background:rgba(0,212,255,0.12);
  box-shadow:0 0 0 9999px rgba(0,0,0,0.45);
  cursor:move;
  pointer-events:auto;
}
.crop-box .handle{
  position:absolute;width:12px;height:12px;
  background:white;border:2px solid #00d4ff;border-radius:50%;
}
.handle.tl{ top:-6px;left:-6px;cursor:nw-resize; }
.handle.tr{ top:-6px;right:-6px;cursor:ne-resize; }
.handle.bl{ bottom:-6px;left:-6px;cursor:sw-resize; }
.handle.br{ bottom:-6px;right:-6px;cursor:se-resize; }
.handle.tm{ top:-6px;left:50%;transform:translateX(-50%);cursor:n-resize; }
.handle.bm{ bottom:-6px;left:50%;transform:translateX(-50%);cursor:s-resize; }
.handle.ml{ top:50%;left:-6px;transform:translateY(-50%);cursor:w-resize; }
.handle.mr{ top:50%;right:-6px;transform:translateY(-50%);cursor:e-resize; }

/* Timeline */
.timeline-card{ padding:18px; border-top:1px solid var(--border); }
.timeline-head{ display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.timeline-head b{font-family:'Space Grotesk',sans-serif;font-size:13px}
.timeline-head span{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.range-wrap{ position:relative;height:44px;display:grid;place-items:center; }
.range-track{ position:relative;width:100%;height:10px;background:rgba(255,255,255,0.08);border-radius:999px; }
.range-fill{ position:absolute;top:0;bottom:0;background:var(--grad);border-radius:999px; }
.range-wrap input[type="range"]{
  position:absolute;top:50%;transform:translateY(-50%);
  width:100%;appearance:none;background:transparent;pointer-events:none;
  height:44px;
}
.range-wrap input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;
  background:white;border:2px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  pointer-events:auto;cursor:ew-resize;
}
.range-wrap input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:white;border:2px solid var(--accent);
  pointer-events:auto;cursor:ew-resize;
}
.time-inputs{ display:grid;grid-template-columns:1fr 1fr 0.8fr;gap:10px;margin-top:12px; }
.time-inputs label{ font-size:11px;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:6px; }
.time-inputs input{ background:rgba(0,0,0,0.25);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none; }
[data-theme="light"] .time-inputs input{ background:rgba(255,255,255,0.7); }
.time-inputs input:focus{ border-color:rgba(124,60,255,0.5); }
.timeline-actions{ display:flex;gap:8px;margin-top:12px; }
.timeline-actions .btn{ flex:1;justify-content:center; }

/* Controls */
.controls-col{ display:flex;flex-direction:column;gap:16px; }
.tabs{ display:flex;gap:6px;padding:12px 12px 0;flex-wrap:wrap; }
.tab{
  flex:1;min-width:80px;
  padding:10px 12px;border-radius:999px;
  background:transparent;border:1px solid transparent;
  color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .18s;
  text-align:center;
}
.tab:hover{ background:var(--glass);color:var(--text); }
.tab.active{ background:var(--grad);color:white;border-color:transparent;box-shadow:0 4px 12px rgba(124,60,255,0.25); }
.tab-pane{ display:none;padding:18px; }
.tab-pane.active{ display:block; }
.pane-head h3{font-family:'Space Grotesk',sans-serif;font-size:15px;margin-bottom:4px}
.pane-head p{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.field{ display:flex;flex-direction:column;gap:6px;margin-bottom:12px; }
.field label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.field input{
  background:rgba(0,0,0,0.25);border:1px solid var(--border);
  border-radius:10px;padding:11px 12px;color:var(--text);font-size:13px;outline:none;width:100%;
}
.field select{
  background:#ffffff;border:1px solid var(--border2);
  border-radius:10px;padding:11px 12px;color:#0f1a33;font-size:13px;outline:none;width:100%;
  cursor:pointer;
}
.field select option{ background:#ffffff;color:#0f1a33; }
[data-theme="light"] .field input{ background:rgba(255,255,255,0.7); }
[data-theme="light"] .field select{ background:#ffffff;color:#0f1a33; }
.field input:focus, .field select:focus{ border-color:rgba(124,60,255,0.5); }
.field.row{ flex-direction:row;gap:10px; }
.field.row label{ flex:1; }
.hint{ font-size:11px;color:var(--muted2);margin-top:8px;font-family:'JetBrains Mono',monospace;line-height:1.4; }
.hint code{ background:rgba(0,0,0,0.3);padding:2px 6px;border-radius:6px;border:1px solid var(--border); }
.check{ display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px;cursor:pointer; }
.check input{ width:16px;height:16px;accent-color:var(--accent); }

/* Status */
.status{ display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.status .dot{ width:8px;height:8px;border-radius:50%; }
.log{
  max-height:120px;overflow:auto;
  background:rgba(0,0,0,0.25);border:1px solid var(--border);border-radius:10px;
  padding:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  white-space:pre-wrap;word-break:break-all;
  display:none;
}
.log.show{ display:block; }

/* Preview col */
.preview-col{ display:flex;flex-direction:column;gap:16px; }

/* Toast */
.toast-wrap{position:fixed;bottom:18px;right:18px;z-index:99;display:flex;flex-direction:column;gap:10px}
.toast{
  min-width:280px;max-width:360px;
  background:#0f1a33;border:1px solid var(--border2);
  border-radius:14px;padding:14px 16px;
  display:flex;gap:12px;align-items:flex-start;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  animation:slideIn .3s;
}
@keyframes slideIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast.ok{border-left:3px solid var(--success)}
.toast.err{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--accent2)}
.toast b{font-size:13px;display:block}
.toast p{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
[data-theme="light"] .toast{ background:#ffffff; }

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(15,26,51,0.15)}