:root{
  --bg:#070A12;
  --bg-soft:#0E1324;
  --card:rgba(16,20,38,0.86);
  --card-strong:rgba(22,28,52,0.92);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --text:#F1F5FF;
  --muted:#9BA7C2;
  --muted2:#6B7A9A;
  --accent:#FF0A2B;
  --accent2:#FF4D1A;
  --accent-glow:rgba(255,10,43,0.38);
  --success:#00D492;
  --radius:20px;
  --shadow:0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(255,10,43,0.18), transparent 60%),
    radial-gradient(1100px 600px at 90% 0%, rgba(60,80,220,0.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(0,212,146,0.08), transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace}
.small{font-size:12px}
.muted{color:var(--muted)}
.center{text-align:center}
button,input{font:inherit}
*:focus-visible{outline:2px solid #FF0A2B; outline-offset:2px; border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important}}
.bg-blobs{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:0.38}
.b1{width:620px;height:420px;background:radial-gradient(circle at 30% 30%, #FF0A2B, #7A0010); top:-120px; left:-140px}
.b2{width:720px;height:520px;background:radial-gradient(circle at 30% 30%, #3045FF, #0A0E2E); top:6%; right:-200px; opacity:0.22}
.b3{width:520px;height:520px;background:radial-gradient(circle at 30% 30%, #00D492, #042B22); bottom:-140px; left:28%; opacity:0.14}
.b4{width:400px;height:400px;background:radial-gradient(circle at 30% 30%, #FF7A00, #331500); bottom:10%; right:10%; opacity:0.1}
.app-shell{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:26px 18px 40px}
.header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px}
.header-left{display:flex; gap:14px; align-items:center}
.logo-wrap{position:relative; display:flex; align-items:center}
.prex-logo{width:62px;height:62px; border-radius:18px; object-fit:cover; border:1px solid rgba(255,255,255,0.12); box-shadow:0 12px 36px rgba(0,0,0,0.5), 0 0 20px rgba(255,10,43,0.18); background:#0B0F1A; padding:2px}
.yt-badge{position:absolute; bottom:-6px; right:-10px; display:flex; align-items:center; gap:4px; background:#0B0F1A; border:1px solid var(--border); padding:2px 6px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:-0.02em; box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.yt-badge span{color:#fff}
.yt-badge svg{flex:0 0 auto}
.brand-text{margin-left:8px}
.title{margin:0; font-size:24px; font-weight:900; letter-spacing:-0.03em; line-height:1}
.title .accent{background:linear-gradient(135deg, #FF0A2B, #FF7A00); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.subtitle{margin:4px 0 0; color:var(--muted); font-size:12px; font-weight:500}
.header-right{display:flex; align-items:center; gap:10px}
.status-dot{width:10px;height:10px;border-radius:50%; background:#6B7280; box-shadow:0 0 0 6px rgba(107,114,128,0.15); transition:all .3s}
.status-dot.ok{background:var(--success); box-shadow:0 0 0 6px rgba(0,212,146,0.18)}
.status-dot.warn{background:#F5A524; box-shadow:0 0 0 6px rgba(245,165,36,0.18)}
.status-text{font-size:12px; color:var(--muted); max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.main{display:flex; flex-direction:column; gap:16px}
.legal-notice{display:flex; gap:8px; align-items:center; justify-content:center; margin:0; color:var(--muted); font-size:11px; opacity:0.9}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.glass{background:linear-gradient(180deg, rgba(18,24,46,0.88), rgba(10,14,32,0.93)); backdrop-filter:blur(18px) saturate(1.25)}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.card-title{margin:0; font-size:13px; font-weight:800; letter-spacing:-0.01em; text-transform:uppercase}
.card-title.big{font-size:14px; letter-spacing:-0.02em}
.card-hint{color:var(--muted2); font-size:11px}
.url-card.hero{padding:26px 22px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.12); box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,10,43,0.18), 0 0 40px rgba(255,10,43,0.12)}
.hero-glow{position:absolute; inset:-1px; background:radial-gradient(700px 220px at 50% 0%, rgba(255,10,43,0.16), transparent 70%), radial-gradient(500px 180px at 80% 100%, rgba(60,80,255,0.10), transparent 70%); pointer-events:none}
.centered-hero{text-align:center}
.centered-head{flex-direction:column; align-items:center; text-align:center; gap:6px; margin-bottom:16px}
.highlight-title{font-size:18px!important; font-weight:900!important; letter-spacing:-0.03em!important; background:linear-gradient(135deg, #fff 30%, #FFB3C0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 8px rgba(255,10,43,0.35));}
.input-wrap{position:relative; flex:1; display:flex; align-items:center; background:rgba(0,0,0,0.5); border:1.5px solid rgba(255,255,255,0.10); border-radius:16px; padding:0 14px; transition:border-color .2s, box-shadow .2s, background .2s; min-height:56px}
.input-wrap:focus-within{border-color:rgba(255,10,43,0.55); box-shadow:0 0 0 5px rgba(255,10,43,0.14), 0 8px 24px rgba(255,10,43,0.18); background:rgba(10,10,20,0.6)}
.input-icon{color:var(--muted)}
#url-input{flex:1; background:transparent; border:0; color:var(--text); padding:16px 12px; outline:none; min-width:0; font-weight:600; font-size:15px; letter-spacing:-0.01em}
#url-input::placeholder{color:var(--muted2); font-weight:500; font-size:14px}
.clear-btn{background:rgba(255,255,255,0.08); border:0; color:var(--muted); width:24px;height:24px;border-radius:50%; cursor:pointer; display:grid; place-items:center}
.url-row{display:flex; gap:10px; align-items:center}
.btn{appearance:none; border:1px solid var(--border); background:rgba(255,255,255,0.06); color:var(--text); padding:12px 15px; border-radius:12px; font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .14s, background .2s, border-color .2s, box-shadow .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px); border-color:var(--border-strong); background:rgba(255,255,255,0.09)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,0.06)}
.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent2)); border-color:transparent; box-shadow:0 12px 28px var(--accent-glow); color:white}
.btn-primary:hover{filter:brightness(1.06); box-shadow:0 16px 34px var(--accent-glow)}
.btn-primary:disabled{opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn-convert{padding:13px 18px; font-weight:800; letter-spacing:-0.01em}
.btn-download{margin-top:14px}
.btn-large{width:100%; justify-content:center; padding:15px 16px; font-size:15px; border-radius:14px}
.btn-sm{padding:8px 10px; font-size:12px; border-radius:10px}
.icon-btn{width:36px;height:36px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.06); color:var(--text); display:grid; place-items:center; cursor:pointer}
.field-error{margin-top:10px; background:rgba(255,10,43,0.12); border:1px solid rgba(255,10,43,0.3); color:#FFC2C8; padding:10px 12px; border-radius:10px; font-size:13px}
.banner{margin-top:12px; padding:10px 12px; border-radius:10px; font-size:13px; border:1px solid var(--border)}
.banner.warn{background:rgba(245,165,36,0.12); border-color:rgba(245,165,36,0.3); color:#FDE68A}
.analyzing{padding:18px}
.analyzer{display:flex; gap:14px; align-items:center}
.loader{width:26px;height:26px;border-radius:50%; border:3px solid rgba(255,255,255,0.14); border-top-color:var(--accent); animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{animation:spin 0.7s linear infinite}
.hidden{display:none!important}
/* Premium combined media card: title + thumb unified */
#video-card{display:flex; flex-direction:column; gap:14px; max-width:640px; margin:0 auto; background:transparent; border:none; padding:0; box-shadow:none}
.media-card{padding:18px; text-align:center; border:1px solid var(--border-strong); background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(16,20,38,0.92)); backdrop-filter:blur(18px); position:relative; overflow:hidden}
.media-card::before{content:""; position:absolute; inset:0; background:radial-gradient(500px 200px at 50% 0%, rgba(255,10,43,0.08), transparent 70%); pointer-events:none}
.media-title-block{position:relative; z-index:1; margin-bottom:14px}
.title-badge{display:inline-flex; align-items:center; gap:6px; background:rgba(255,10,43,0.14); border:1px solid rgba(255,10,43,0.28); color:#FFB3C0; font-size:10px; font-weight:800; letter-spacing:0.06em; padding:5px 10px; border-radius:999px; margin-bottom:10px; text-transform:uppercase}
.premium-title{font-size:20px!important; font-weight:900!important; background:linear-gradient(135deg, #fff 20%, #FFD7E0 60%, #FFB3C0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 10px rgba(255,10,43,0.25)); line-height:1.25!important; letter-spacing:-0.02em!important}
.stat-dot-mini{width:6px;height:6px; border-radius:50%; background:var(--success); display:inline-block; vertical-align:middle; margin:0 4px; box-shadow:0 0 8px rgba(0,212,146,0.5)}
.title-card{padding:18px; text-align:center; border:1px solid var(--border-strong); background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(16,20,38,0.9)); backdrop-filter:blur(16px)}
.thumb-card{padding:12px; display:flex; justify-content:center; border:1px solid var(--border); background:rgba(11,15,26,0.85)}
.thumb-wrap{position:relative; width:100%; max-width:420px; max-height:240px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#0B0F1A; border:1px solid var(--border); flex-shrink:0; box-shadow:0 14px 32px rgba(0,0,0,0.5); margin:0 auto; display:block}
.thumb-wrap img{width:100%;height:100%;object-fit:contain; display:block; background:#0B0F1A}
.thumb-shine{position:absolute; inset:0; background:linear-gradient(180deg, transparent 65%, rgba(0,0,0,0.45)); pointer-events:none}
.duration-badge{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,0.86); color:white; font-size:11px; padding:4px 7px; border-radius:7px; font-weight:800; font-family:'JetBrains Mono',monospace; border:1px solid rgba(255,255,255,0.15)}
.video-title{margin:0; font-size:18px; font-weight:900; line-height:1.35; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 6px rgba(0,0,0,0.4)}
.video-channel{margin:8px 0 0; color:#D0D8EF; font-size:13px; font-weight:600}
.video-stats{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:10px; color:var(--muted); font-size:12px; flex-wrap:wrap}
#video-id{display:none!important}
.format-box{padding:18px; border:1px solid var(--border-strong); background:linear-gradient(180deg, rgba(18,24,46,0.92), rgba(10,14,32,0.96))}
.divider{display:none}
.options{padding:16px 18px 18px; max-width:640px; margin:0 auto; width:100%}
.options-title{margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--text)}
.format-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.format-card{position:relative; border:1px solid rgba(255,255,255,0.1); background:rgba(14,20,42,0.72); border-radius:16px; padding:14px 10px; cursor:pointer; transition:all .2s cubic-bezier(.2,.8,.2,1); text-align:center; overflow:hidden; color:var(--text)}
.format-card:hover{transform:translateY(-3px) scale(1.02); border-color:rgba(255,255,255,0.2); background:rgba(24,32,62,0.92); box-shadow:0 12px 28px rgba(0,0,0,0.35)}
.format-card.premium{border:1px solid rgba(255,215,0,0.18); background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(14,20,42,0.78))}
.format-card.premium:hover{border-color:rgba(255,215,0,0.32); box-shadow:0 12px 28px rgba(0,0,0,0.4), 0 0 16px rgba(255,215,0,0.12)}
.format-card.premium.active{border-color:#FFD700; background:linear-gradient(135deg, rgba(255,10,43,0.22), rgba(40,28,60,0.95)); box-shadow:0 14px 32px rgba(255,10,43,0.28), 0 0 20px rgba(255,215,0,0.18)}
.format-card.active{border-color:rgba(255,10,43,0.7); background:linear-gradient(135deg, rgba(255,10,43,0.2), rgba(24,32,62,0.95)); box-shadow:0 10px 24px rgba(255,10,43,0.22)}
.format-card.disabled{opacity:0.42; cursor:not-allowed; transform:none; background:rgba(10,14,28,0.55); color:var(--muted)}
.format-card.disabled:hover{transform:none}
.audio-grid .format-card{border-style:dashed}
.audio-grid .format-card.active{border-style:solid; border-color:#00D492; background:linear-gradient(135deg, rgba(0,212,146,0.18), rgba(14,20,42,0.9)); box-shadow:0 10px 24px rgba(0,212,146,0.18)}
.fmt-top{display:flex; flex-direction:column; gap:4px; align-items:center}
.fmt-label{font-size:15px; font-weight:900; letter-spacing:-0.02em; color:var(--text)}
.fmt-badge{font-size:9px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.12); padding:4px 7px; border-radius:999px; color:#E6EBFF}
.format-card.active .fmt-badge{background:var(--accent); color:white; border-color:transparent}
.audio-grid .format-card.active .fmt-badge{background:#00D492; color:#05140F}
.fmt-meta{margin-top:6px; font-size:11px; color:#C9D4F5; font-weight:600; line-height:1.2}
.format-card.disabled .fmt-meta{color:var(--muted2)}
.fmt-check{position:absolute; top:8px; right:8px; width:18px;height:18px;border-radius:50%; background:var(--accent); color:white; display:none; place-items:center; font-size:11px; font-weight:900; box-shadow:0 2px 8px rgba(255,10,43,0.4)}
.audio-grid .fmt-check{background:#00D492}
.format-card.active .fmt-check{display:grid}
.hint{margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.4; text-align:center}
.progress-card{padding:18px}
.progress-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.progress-title{margin:0; font-size:14px; font-weight:850}
.status-pill{font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; background:rgba(255,255,255,0.08); border:1px solid var(--border); padding:6px 9px; border-radius:999px; color:var(--muted)}
.status-pill.downloading{color:#FDE68A; border-color:rgba(245,165,36,0.35); background:rgba(245,165,36,0.14)}
.status-pill.complete{color:#A7F3D0; border-color:rgba(0,212,146,0.35); background:rgba(0,212,146,0.14)}
.progress-bar-wrap{display:flex; gap:12px; align-items:center}
.progress-bar{flex:1; height:10px; background:rgba(0,0,0,0.4); border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); width:0; transition:width .35s ease}
.progress-percent{font-family:'JetBrains Mono',monospace; font-weight:800; font-size:13px; min-width:48px; text-align:right}
.progress-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.stat{background:rgba(0,0,0,0.28); border:1px solid var(--border); border-radius:12px; padding:10px 12px}
.stat-label{font-size:10px; color:var(--muted); font-weight:700; display:block; text-transform:uppercase; letter-spacing:0.05em}
.stat-value{font-size:13px; font-weight:800; margin-top:2px; display:block; word-break:break-all}
.progress-actions{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap}
.path{word-break:break-all}
.success{padding:22px; text-align:center}
.success-icon{width:56px;height:56px; border-radius:50%; background:rgba(0,212,146,0.14); border:1px solid rgba(0,212,146,0.3); display:grid; place-items:center; margin:0 auto 12px; color:var(--success)}
.success h3{margin:0; font-size:18px; font-weight:900}
.success p{margin:6px 0 0; color:var(--muted); font-size:13px}
.success .file{margin:10px auto 0; background:rgba(0,0,0,0.35); border:1px solid var(--border); padding:8px 10px; border-radius:10px; font-family:'JetBrains Mono',monospace; font-size:12px; max-width:100%; word-break:break-all}
.success-actions{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
.error{padding:18px}
.error h3{margin:0; font-size:15px; font-weight:850; color:#FFC2C8}
.error p{margin:6px 0 0; color:#FFC2C8; opacity:0.9; font-size:13px}
.error pre{white-space:pre-wrap; word-break:break-all; background:rgba(0,0,0,0.35); border:1px solid var(--border); padding:10px; border-radius:10px; max-height:220px; overflow:auto; font-size:11px}
.history-card .history-list{display:flex; flex-direction:column; gap:8px}
.history-list .empty{margin:0; color:var(--muted); font-size:13px; padding:12px; background:rgba(0,0,0,0.22); border:1px dashed var(--border); border-radius:12px; text-align:center}
.history-item{display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--border); background:rgba(0,0,0,0.22); border-radius:12px}
.history-item .h-title{margin:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.history-item .h-sub{margin:2px 0 0; color:var(--muted); font-size:11px}
.history-foot{margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.footer{display:flex; gap:8px; justify-content:center; color:var(--muted2); font-size:11px; margin-top:10px; flex-wrap:wrap}
.footer .sep{opacity:0.5}
.drawer{position:fixed; inset:0; z-index:20; display:flex; justify-content:flex-end}
.drawer.hidden{display:none!important}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(2px)}
.drawer-panel{position:relative; width:min(420px, 92vw); height:100%; border-left:1px solid var(--border); padding:18px; overflow:auto}
.drawer-head{display:flex; align-items:center; justify-content:space-between}
.drawer-head h2{margin:0; font-size:16px; font-weight:900}
.debug{border:1px solid var(--border); border-radius:10px; padding:10px; background:rgba(0,0,0,0.22)}
.debug pre{white-space:pre-wrap; word-break:break-all; max-height:260px; overflow:auto; background:rgba(0,0,0,0.3); border:1px solid var(--border); padding:8px; border-radius:8px}
@media(max-width:760px){.format-grid{grid-template-columns:repeat(2,1fr)}.video-layout{flex-direction:column}.thumb-wrap{width:100%}.progress-stats{grid-template-columns:1fr}.url-row{flex-direction:column; align-items:stretch}.header{flex-direction:column; align-items:flex-start}.header-right{width:100%; justify-content:space-between}}