@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0f;
  --bg2:#111118;
  --surface:#16161f;
  --surface2:#1e1e2a;
  --surface3:#28283a;
  --text:#e8e8f0;
  --text2:#8888a0;
  --text3:#5a5a72;
  --border:#22223a;
  --border-hover:#33335a;
  --primary:#00d4aa;
  --primary-dim:rgba(0,212,170,.12);
  --primary-glow:0 0 20px rgba(0,212,170,.15);
  --accent:#7c5cfc;
  --accent-dim:rgba(124,92,252,.12);
  --success:#00d4aa;
  --error:#ff4757;
  --error-dim:rgba(255,71,87,.1);
  --warning:#ffa502;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-lg:0 8px 32px rgba(0,0,0,.4);
  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

::selection{background:var(--primary);color:#0a0a0f;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:820px;margin:0 auto;padding:0 24px;}

/* ===== HEADER ===== */
.header{
  padding:16px 0;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(10,10,15,.75);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;}

.logo{
  font-size:1.15rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.logo span{color:var(--primary);}

.theme-btn{
  background:var(--surface2);border:none;border-radius:var(--radius-sm);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text2);transition:color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.theme-btn:hover{color:var(--text);background:var(--surface3);transform:scale(1.05);}
.icon-moon,.icon-sun{display:none;}
html:not(.dark) .icon-moon{display:block;}
html.dark .icon-sun{display:block;}

/* ===== HERO ===== */
.main{flex:1;padding:32px 0;}
.hero{text-align:center;padding:32px 0 24px;}
.hero h1{
  font-size:2rem;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--text) 30%,var(--primary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.15;
}
.hero .subtitle{
  color:var(--text2);font-size:1rem;
  max-width:560px;margin:10px auto 0;
}

/* ===== SEARCH FORM ===== */
.search-form{margin-top:28px;}
.input-group{
  display:flex;gap:0;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  overflow:hidden;
}
.input-group:focus-within{
  border-color:var(--primary);
  box-shadow:var(--primary-glow);
}
.url-input{
  flex:1;border:none;outline:none;padding:15px 18px;
  font-size:.95rem;font-family:var(--font);
  background:transparent;color:var(--text);
}
.url-input::placeholder{color:var(--text3);font-weight:400;}

.clear-btn{
  display:none;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text3);
  padding:0 12px;cursor:pointer;transition:color .2s;
}
.clear-btn:hover{color:var(--text);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 24px;border:none;border-radius:0;
  font-size:.9rem;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:opacity .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap;
}
.btn-primary{
  background:var(--primary);color:#0a0a0f;
}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:var(--primary-glow);}
.btn-primary svg{flex-shrink:0;}

/* ===== LOADING ===== */
.loading-section{text-align:center;padding:48px 0;color:var(--text2);}
.spinner{
  width:32px;height:32px;border:2.5px solid var(--surface3);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .6s linear infinite;margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-section p{font-size:.9rem;}

/* ===== ERROR ===== */
.error-section{padding:0 0 20px;}
.error-box{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;background:var(--error-dim);
  border:1px solid rgba(255,71,87,.2);
  border-radius:var(--radius);color:var(--error);font-size:.9rem;
}

/* ===== RESULT CARD ===== */
.result-section{padding:0 0 20px;}
.video-card{
  display:flex;gap:20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;
  transition:border-color .2s var(--ease);
}
.video-card:hover{border-color:var(--border-hover);}
.video-thumb{
  position:relative;flex-shrink:0;width:200px;
  border-radius:var(--radius);overflow:hidden;
}
.video-thumb img{width:100%;display:block;background:var(--surface2);}
.duration-badge{
  position:absolute;bottom:6px;right:6px;
  background:rgba(0,0,0,.85);color:#fff;
  padding:2px 8px;border-radius:4px;
  font-size:.75rem;font-weight:600;font-family:var(--mono);
  letter-spacing:.02em;
}
.video-info{flex:1;min-width:0;}
.video-info h2{
  font-size:1.05rem;font-weight:700;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.3;
}
.author-link{
  color:var(--primary);text-decoration:none;font-size:.85rem;
  font-weight:500;
}
.author-link:hover{text-decoration:underline;}

/* ===== FORMATS ===== */
.formats-section,.subs-section{margin-top:20px;}
.formats-section h3,.subs-section h3{
  font-size:.8rem;font-weight:600;margin-bottom:12px;
  color:var(--text3);text-transform:uppercase;letter-spacing:.06em;
}

.format-btn,.subs-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);text-align:left;color:var(--text);
  gap:8px;
}
.format-btn:hover,.subs-btn:hover{
  border-color:var(--border-hover);background:var(--surface2);
  transform:translateY(-1px);
}
.format-btn:active{transform:translateY(0);}
.format-left,.subs-left{display:flex;align-items:center;gap:10px;min-width:0;}
.format-left .format-icon{color:var(--text3);flex-shrink:0;display:flex;}

.format-label{font-weight:600;font-size:.9rem;}
.format-meta{color:var(--text2);font-size:.78rem;margin-top:1px;}

.format-right,.subs-right{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.format-size{color:var(--text3);font-size:.82rem;font-family:var(--mono);}

.format-badge{
  font-size:.65rem;font-weight:700;padding:4px 9px;
  border-radius:5px;text-transform:uppercase;
  letter-spacing:.04em;font-family:var(--mono);
}
.format-badge.video{
  background:var(--accent-dim);color:var(--accent);
  border:1px solid rgba(124,92,252,.2);
}
.format-badge.combined{
  background:var(--primary-dim);color:var(--primary);
  border:1px solid rgba(0,212,170,.2);
}
.format-badge.audio{
  background:rgba(255,165,2,.1);color:var(--warning);
  border:1px solid rgba(255,165,2,.2);
}
.format-badge.sub{
  background:var(--primary-dim);color:var(--primary);
  border:1px solid rgba(0,212,170,.2);cursor:pointer;
  font-size:.6rem;
}
.format-badge.sub:hover{opacity:.8;}

.format-group-title{
  font-size:.75rem;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  padding:16px 0 8px;margin-top:8px;
  border-top:1px solid var(--border);font-family:var(--mono);
}
.format-group-title:first-child{border-top:none;margin-top:0;}

.audio-lang-label{
  font-size:.78rem;font-weight:600;color:var(--accent);
  padding:6px 4px 4px;letter-spacing:.03em;
}
.audio-lang-selector{
  display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 12px;
}
.audio-lang-btn{
  padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text2);font-size:.82rem;
  font-weight:500;font-family:var(--font);cursor:pointer;
  transition:all .2s var(--ease);
}
.audio-lang-btn:hover{border-color:var(--accent);color:var(--text);}
.audio-lang-btn.active{
  background:var(--accent-dim);color:var(--accent);
  border-color:var(--accent);
}
.audio-lang-hint{font-size:.75rem;color:var(--text3);margin-bottom:8px;}

/* ===== SUBS ===== */
.subs-section{margin-top:8px;}
.subs-grid{display:flex;flex-direction:column;gap:6px;}
.subs-left .subs-lang{font-weight:600;font-size:.88rem;}
.subs-left .subs-type{color:var(--text2);font-size:.78rem;}
.subs-right .format-badge.sub{padding:4px 10px;font-size:.65rem;}

/* ===== PROGRESS ===== */
.progress-section{padding:0 0 20px;}
.progress-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;
}
.progress-info{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;font-size:.9rem;
}
#progressPercent{
  font-weight:700;font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.progress-bar{
  width:100%;height:6px;background:var(--surface2);
  border-radius:99px;overflow:hidden;
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:99px;transition:width .3s var(--ease);
}
.progress-details{
  display:flex;justify-content:space-between;margin-top:10px;
  color:var(--text3);font-size:.82rem;font-family:var(--mono);
}
.progress-error{
  margin-top:12px;padding:10px 14px;
  background:var(--error-dim);border:1px solid rgba(255,71,87,.2);
  border-radius:var(--radius);color:var(--error);font-size:.85rem;
}

/* ===== FEATURES ===== */
.features-section{
  background:var(--bg2);padding:56px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin:40px 0;
}
.section-title{
  font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:32px;
  letter-spacing:-.02em;
}
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.feature-card{
  text-align:center;padding:28px 20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.feature-card:hover{
  border-color:var(--border-hover);transform:translateY(-2px);
}
.feature-icon{
  width:44px;height:44px;margin:0 auto 12px;display:flex;
  align-items:center;justify-content:center;
  background:var(--primary-dim);border-radius:var(--radius);
  color:var(--primary);
}
.feature-card h3{font-size:.95rem;font-weight:700;margin-bottom:6px;}
.feature-card p{font-size:.82rem;color:var(--text2);line-height:1.5;}

/* ===== HOWTO ===== */
.howto-section{padding:48px 0;}
.steps{display:flex;flex-direction:column;gap:20px;max-width:580px;margin:0 auto;}
.step{display:flex;gap:16px;align-items:flex-start;}
.step-num{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--primary-dim);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;font-family:var(--mono);
  border:1px solid rgba(0,212,170,.15);
}
.step h3{font-size:.95rem;font-weight:700;margin-bottom:3px;}
.step p{font-size:.82rem;color:var(--text2);line-height:1.5;}

/* ===== FAQ ===== */
.faq-section{padding:0 0 48px;}
.faq-list{display:flex;flex-direction:column;gap:6px;max-width:700px;margin:0 auto;}
.faq-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .2s var(--ease);
}
.faq-item:hover{border-color:var(--border-hover);}
.faq-item.open{border-color:var(--primary-dim);}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:transparent;border:none;
  color:var(--text);font-size:.88rem;font-weight:600;cursor:pointer;
  text-align:left;transition:background .2s var(--ease);
  font-family:var(--font);
}
.faq-question:hover{background:var(--surface2);}
.faq-arrow{
  font-size:.65rem;transition:transform .25s var(--ease);
  color:var(--text3);flex-shrink:0;
}
.faq-item.open .faq-arrow{transform:rotate(180deg);}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease),padding .35s var(--ease);
  padding:0 18px;
}
.faq-item.open .faq-answer{
  max-height:800px;padding:0 18px 16px;
}
.faq-answer p{font-size:.82rem;color:var(--text2);line-height:1.6;}
.faq-answer a{color:var(--primary);}

/* ---- Cookie config inside FAQ ---- */
.cookie-section{margin-top:10px;}
.cookie-toggle-btn{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 14px;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--text2);width:100%;text-align:left;display:flex;
  justify-content:space-between;align-items:center;
  transition:background .2s var(--ease),color .2s var(--ease);font-family:var(--font);
}
.cookie-toggle-btn:hover{background:var(--surface3);color:var(--text);}
.cookie-toggle-btn.open .faq-arrow{transform:rotate(180deg);}
.cookie-panel{padding:10px 0 0;}
.cookie-help{font-size:.78rem;color:var(--text2);margin-bottom:8px;line-height:1.5;}
.cookie-help a{color:var(--primary);}
.cookie-input{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg2);color:var(--text);
  font-family:var(--mono);font-size:.78rem;resize:vertical;
}
.cookie-input:focus{outline:none;border-color:var(--primary);}
.cookie-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.cookie-actions{display:flex;gap:8px;margin:10px 0;}
.btn-small{padding:8px 14px;font-size:.78rem;border-radius:var(--radius-sm);}
.btn-secondary{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--surface3);color:var(--text);}
#cookieStatus{font-size:.78rem;font-weight:600;}

/* ===== SEO SECTION ===== */
.seo-section{padding:0 0 48px;}
.seo-content{max-width:700px;margin:0 auto;}
.seo-content p{
  font-size:.85rem;color:var(--text2);margin-bottom:14px;line-height:1.7;
}
.seo-content p:last-child{margin-bottom:0;}
.seo-content strong{color:var(--text);font-weight:600;}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--border);
  padding:36px 0 28px;color:var(--text3);font-size:.82rem;
  margin-top:auto;
}
.footer-content{
  display:flex;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:20px;
}
.footer-brand strong{
  color:var(--text);display:block;margin-bottom:4px;font-size:.9rem;
}
.footer-brand p{line-height:1.5;max-width:320px;}
.footer-links{display:flex;flex-direction:column;gap:3px;text-align:right;}
.footer-links span{line-height:1.5;}
.footer-links a{color:var(--primary);text-decoration:none;font-weight:500;}
.footer-links a:hover{text-decoration:underline;}
.footer-copy{
  text-align:center;font-size:.75rem;opacity:.5;
  border-top:1px solid var(--border);padding-top:16px;
}

/* ===== NAVIGATION ===== */
.nav{display:flex;align-items:center;gap:4px;}
.nav-link{
  color:var(--text2);text-decoration:none;font-size:.82rem;font-weight:500;
  padding:6px 12px;border-radius:var(--radius-sm);transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--text);background:var(--surface2);}
.nav-link.active{color:var(--primary);background:var(--primary-dim);}

/* ===== LEGAL PAGES ===== */
.page-section{padding:24px 0 48px;}
.page-title{
  font-size:1.75rem;font-weight:800;letter-spacing:-.03em;
  margin-bottom:32px;background:linear-gradient(135deg,var(--text) 30%,var(--primary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.legal-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;
}
.legal-card h2{
  font-size:1.1rem;font-weight:700;margin-bottom:12px;color:var(--primary);
}
.legal-card p{font-size:.88rem;color:var(--text2);line-height:1.7;margin-bottom:8px;}
.legal-card p:last-child{margin-bottom:0;}
.legal-list{
  padding-left:20px;font-size:.88rem;color:var(--text2);line-height:1.8;
  margin:8px 0;
}
.legal-list li{margin-bottom:4px;}
.contact-email{
  text-align:center;padding:16px 0;font-size:1.1rem;
}
.email-link{
  color:var(--primary);text-decoration:none;font-weight:600;
  font-family:var(--mono);font-size:1.05rem;
}
.email-link:hover{text-decoration:underline;}
.legal-card a{color:var(--primary);}
.legal-card ol{padding-left:20px;margin:8px 0;}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero h1{font-size:1.5rem;}
  .video-card{flex-direction:column;}
  .video-thumb{width:100%;}
  .btn{padding:14px 16px;}
  .input-group{flex-wrap:wrap;}
  .input-group .btn{border-radius:0;width:100%;justify-content:center;}
  .clear-btn{padding:0 8px;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .footer-content{flex-direction:column;text-align:center;}
  .footer-links{text-align:center;}
  .hero .subtitle{font-size:.92rem;}
}
@media(max-width:640px){
  .nav{gap:2px;}
  .nav-link{font-size:.75rem;padding:4px 8px;}
}
@media(max-width:480px){
  .hero h1{font-size:1.25rem;}
  .container{padding:0 16px;}
  .features-grid{grid-template-columns:1fr;}
  .section-title{font-size:1.1rem;}
  .nav{gap:2px;}
  .nav-link{font-size:.7rem;padding:3px 6px;}
}