/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080810;
  --bg2:       #10101e;
  --bg3:       #16162a;
  --bg4:       #1e1e35;
  --card:      rgba(18, 18, 36, 0.85);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --accent:    #7c3aed;
  --accent2:   #9d5cf6;
  --accent3:   #c084fc;
  --gold:      #f59e0b;
  --green:     #10b981;
  --red:       #ef4444;
  --text:      #f1f5f9;
  --text2:     #94a3b8;
  --text3:     #64748b;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 20px 60px rgba(0,0,0,0.6);
  --glow:      0 0 40px rgba(124,58,237,0.25);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
}

.bg-blob {
  position: fixed; border-radius: 50%; filter: blur(80px);
  pointer-events: none; opacity: 0.18; animation: float 8s ease-in-out infinite;
}
.blob-1 { width:500px;height:500px;background:radial-gradient(circle,#7c3aed,#4f46e5);top:-150px;left:-150px;animation-delay:0s; }
.blob-2 { width:400px;height:400px;background:radial-gradient(circle,#ec4899,#7c3aed);top:40%;right:-100px;animation-delay:-3s; }
.blob-3 { width:350px;height:350px;background:radial-gradient(circle,#0ea5e9,#7c3aed);bottom:0;left:30%;animation-delay:-6s; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);} }

.page-wrap {
  width:100%; max-width:720px; padding:32px 16px 48px;
  display:flex; flex-direction:column; gap:16px;
}

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.logo { display:flex; align-items:center; gap:14px; }
.logo-icon {
  width:48px;height:48px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:white; box-shadow:0 4px 20px rgba(124,58,237,0.4);
}
.logo-icon svg { width:24px;height:24px; }
.logo-title { font-size:22px;font-weight:800;color:var(--text);line-height:1; }
.logo-sub { font-size:11px;color:var(--text2);margin-top:3px; }
.header-badge {
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--green);
  background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);
  padding:5px 12px;border-radius:999px;
}
.dot { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;}50%{opacity:0.4;} }

/* Card */
.card {
  background:var(--card); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border2); border-radius:24px; padding:32px;
  box-shadow:var(--shadow),var(--glow); display:flex; flex-direction:column; gap:24px;
}

/* Section */
.section { display:flex;flex-direction:column;gap:10px; }
.section-label {
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--accent3);text-transform:uppercase;letter-spacing:0.05em;
}

/* URL */
.url-wrap {
  display:flex;align-items:center;gap:8px;background:var(--bg3);
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:4px 4px 4px 14px;transition:border-color 0.2s,box-shadow 0.2s;
}
.url-wrap:focus-within { border-color:var(--accent2);box-shadow:0 0 0 3px rgba(124,58,237,0.2); }
.url-input { flex:1;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);min-width:0; }
.url-input::placeholder { color:var(--text3); }
.paste-text-btn {
  background:transparent;border:none;color:var(--text2);font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;padding:0 12px;cursor:pointer;
  transition:color 0.2s;flex-shrink:0;
}
.paste-text-btn:hover { color:var(--text); }
.icon-btn {
  width:36px;height:36px;background:var(--bg4);border:1px solid var(--border);
  border-radius:8px;color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background 0.2s,color 0.2s;flex-shrink:0;
}
.icon-btn:hover { background:var(--border2);color:var(--text); }
.paste-btn {
  height:36px;padding:0 12px;background:var(--bg4);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;
  font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background 0.2s,color 0.2s,border-color 0.2s;flex-shrink:0;
}
.paste-btn:hover { background:var(--border2);border-color:var(--accent2);color:white; }
.fetch-btn {
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;border:none;
  border-radius:8px;padding:0 18px;height:36px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:opacity 0.2s,transform 0.1s;flex-shrink:0;
}
.fetch-btn:hover { opacity:0.9;transform:translateY(-1px); }
.fetch-btn:disabled,
.fetch-btn.disabled {
  background: #334155 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  transform: none !important;
}

/* Video Preview */
.video-preview {
  display:flex;align-items:center;gap:14px;background:var(--bg3);
  border:1px solid var(--border2);border-radius:var(--radius-sm);padding:12px;
  animation:slide-in 0.3s ease;
}
@keyframes slide-in { from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);} }
.thumb { width:96px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0; }
.preview-title { font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.preview-meta { font-size:12px;color:var(--text2);margin-top:3px; }

/* Format Grid */
.format-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.fmt-card {
  position:relative;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:16px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  transition:border-color 0.2s,background 0.2s,transform 0.15s,box-shadow 0.2s;
  font-family:'Inter',sans-serif;
}
.fmt-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.fmt-card.active { border-color:var(--accent2);background:rgba(124,58,237,0.15);box-shadow:0 0 0 3px rgba(124,58,237,0.2),0 8px 24px rgba(0,0,0,0.3);transform:translateY(-2px); }
.fmt-card.fmt-audio.active { border-color:var(--green);background:rgba(16,185,129,0.1);box-shadow:0 0 0 3px rgba(16,185,129,0.2),0 8px 24px rgba(0,0,0,0.3); }
.fmt-badge { position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.05em; }
.badge-gold { background:rgba(245,158,11,0.2);color:var(--gold); }
.badge-purple { background:rgba(124,58,237,0.2);color:var(--accent3); }
.badge-green { background:rgba(16,185,129,0.2);color:var(--green); }
.fmt-icon { font-size:22px; }
.fmt-name { font-size:13px;font-weight:700;color:var(--text); }
.fmt-desc { font-size:10px;color:var(--text2); }

/* Download Button */
.dl-btn {
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,#a855f7 100%);
  color:white;border:none;border-radius:var(--radius-sm);padding:15px;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:700;cursor:pointer;
  transition:all 0.25s ease;
  box-shadow:0 4px 24px rgba(124,58,237,0.4);
}
.dl-btn:hover { transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,58,237,0.5); }
.dl-btn:active { transform:translateY(0); }
.dl-btn:disabled,
.dl-btn.disabled {
  background:#334155 !important;
  color:#94a3b8 !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:0.5 !important;
  transform:none !important;
}
.dl-btn.cancel { background:linear-gradient(135deg,#b91c1c,var(--red)); }

/* Progress */
.progress-section { display:flex;flex-direction:column;gap:8px; }
.progress-header { display:flex;justify-content:space-between;align-items:center; }
.status-text { font-size:13px;color:var(--text2); }
.pct-text { font-size:14px;font-weight:700;color:var(--accent3); }
.progress-track { height:8px;background:var(--bg3);border-radius:999px;overflow:hidden; }
.progress-bar { height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:999px;transition:width 0.4s ease;box-shadow:0 0 12px rgba(160,84,246,0.6); }
.speed-text { font-size:11px;color:var(--text3); }

/* Done Section */
.done-section {
  display:flex;align-items:center;gap:14px;background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.3);border-radius:var(--radius-sm);padding:16px;
}
.done-icon { font-size:28px;flex-shrink:0; }
.done-info { flex:1;min-width:0; }
.done-title { font-size:14px;font-weight:700;color:var(--green); }
.done-filename { font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.save-btn {
  display:flex;align-items:center;gap:7px;background:var(--green);color:white;
  border:none;border-radius:8px;padding:9px 16px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:opacity 0.2s,transform 0.15s;flex-shrink:0;
}
.save-btn:hover { opacity:0.9;transform:translateY(-1px); }

/* Features */
.features { display:flex;justify-content:center;gap:0;flex-wrap:wrap; }
.feature { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);padding:6px 18px;border-right:1px solid var(--border); }
.feature:last-child { border-right:none; }
.feature-icon { font-size:14px; }
.footer { text-align:center;font-size:11px;color:var(--text3); }

/* Spinner */
.btn-spinner { width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

.hidden { display:none !important; }