:root{
  --black:#0A0A0A;
  --charcoal:#1C1C1C;
  --charcoal-2:#262626;
  --gold:#FCB315;
  --gold-dark:#D89400;
  --paper:#F5F3EE;
  --paper-2:#FFFFFF;
  --ink:#141414;
  --ink-soft:#6B6B6B;
  --line:#E7E5E1;
  --error:#C9463C;
}

*{box-sizing:border-box;min-width:0;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

html,body{margin:0;padding:0;width:100%;max-width:100%;overflow-x:hidden;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
img,input,button{max-width:100%;}
a{color:inherit;}
button{font-family:inherit;}

.skip-link{
  position:absolute;top:-100px;left:12px;z-index:1000;
  background:var(--gold);color:var(--black);
  padding:10px 16px;border-radius:4px;
  font-family:'Oswald',sans-serif;font-weight:600;text-decoration:none;
}
.skip-link:focus{top:12px;}

/* ---------- Header ---------- */
.site-header{background:var(--black);border-bottom:3px solid var(--gold);}
.header-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:8px 16px;
  padding:12px 16px;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;}
.brand-logo{height:32px;width:auto;}
.brand-word{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;
  letter-spacing:0.02em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.brand-word span{color:var(--gold);}
.tool-tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dark);border-radius:999px;
  padding:5px 12px;
}

/* ---------- Hero ---------- */
.hero{background:var(--black);padding:48px 20px 32px;}
.hero-inner{max-width:720px;margin:0 auto;text-align:center;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 10px;font-weight:600;
}
.eyebrow-dark{color:var(--gold);}
.hero-title{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(32px,7vw,54px);letter-spacing:0.01em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;line-height:1.05;
}
.hero-title span{color:var(--gold);}

/* ---------- Tab bar ---------- */
.tabbar{
  display:flex;justify-content:center;gap:6px;
  background:var(--black);padding:0 20px 18px;
  border-bottom:1px solid var(--charcoal-2);
}
.tab-btn{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:0.03em;text-transform:uppercase;
  background:transparent;color:var(--ink-soft,#9A9A9A);
  border:2px solid transparent;border-radius:999px;
  padding:9px 22px;cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.tab-btn{color:#9A9A9A;}
.tab-btn:hover{color:#fff;}
.tab-btn.is-active{background:var(--gold);color:var(--black);}
.tab-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- Tool section ---------- */
.section{padding:44px 20px 72px;}
.section-inner{max-width:900px;margin:0 auto;}
.section-inner-narrow{max-width:560px;}

.dropzone{
  background:var(--paper-2);
  border:2px dashed #C9C5BB;border-radius:12px;
  padding:48px 20px;text-align:center;cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--gold-dark);outline:none;}
.dropzone.dragover{border-color:var(--gold-dark);background:#FBF3DE;}
.dropzone-icon{width:34px;height:34px;color:var(--gold-dark);margin-bottom:10px;}
.dropzone-title{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;
  text-transform:uppercase;letter-spacing:0.01em;color:var(--black);margin:0 0 6px;
}
.dropzone-sub{font-size:13.5px;color:var(--ink-soft);margin:0;}

.status-line{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);
  min-height:1.4em;margin:14px 2px 0;
}

.results-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:28px 0 16px;
}
.results-count{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;
}
.results-actions{display:flex;gap:10px;}

.btn{
  display:inline-block;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.03em;text-transform:uppercase;text-decoration:none;
  border-radius:999px;padding:10px 18px;text-align:center;
  border:2px solid transparent;cursor:pointer;
}
.btn-gold{background:var(--gold);color:var(--black);}
.btn-gold:hover{background:var(--gold-dark);}
.btn-outline-dark{background:transparent;color:var(--black);border-color:#C9C5BB;}
.btn-outline-dark:hover{border-color:var(--gold-dark);color:var(--gold-dark);}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:transparent;}
.btn-ghost:hover{color:var(--error);}
.btn-small{font-size:12px;padding:8px 15px;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

.results-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:20px;
}
.result-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
}
.result-preview{
  width:100%;aspect-ratio:16/9;background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.result-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.result-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.25);border-top-color:var(--gold);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.result-error-icon{color:var(--error);font-family:'IBM Plex Mono',monospace;font-size:12px;padding:0 16px;text-align:center;}

.result-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.result-name{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--black);margin:0;word-break:break-all;line-height:1.3;
}
.result-meta{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin:0;line-height:1.5;
}
.result-meta.is-error{color:var(--error);}

.result-rename{
  display:flex;align-items:center;gap:1px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:7px 9px;
}
.rename-prefix,.rename-suffix{white-space:nowrap;color:var(--ink-soft);}
.rename-input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:inherit;color:var(--ink);padding:0 1px;
}
.rename-input:focus{color:var(--black);}

.result-download{margin-top:auto;text-align:center;}

.empty-hint{
  font-size:13.5px;color:var(--ink-soft);text-align:center;padding:20px 0 0;font-style:italic;
}

/* ---------- Download tab ---------- */
.download-form{
  display:flex;flex-direction:column;gap:16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:28px 24px;
}
.field-label{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.text-input{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink);outline:none;
  transition:border-color .15s;
}
.text-input:focus{border-color:var(--gold-dark);}

.format-toggle{display:flex;gap:18px;flex-wrap:wrap;}
.format-toggle input[type="radio"]{accent-color:var(--gold-dark);width:16px;height:16px;}
.format-toggle label{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
  cursor:pointer;
}

.quality-group{display:flex;flex-direction:column;gap:8px;}
.select-input{
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  padding:11px 14px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236B6B6B" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center;
  background-size:14px;
  color:var(--ink);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:border-color .15s;
}
.select-input:focus{border-color:var(--gold-dark);}

.video-card{
  display:flex;gap:16px;margin-top:24px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:16px;align-items:flex-start;
}
.video-thumb{
  width:140px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  background:var(--charcoal);flex-shrink:0;
}
.video-info{display:flex;flex-direction:column;gap:6px;min-width:0;}
.video-title{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
  color:var(--black);margin:0;line-height:1.3;
}
.video-channel{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin:0;
}
.video-source-link{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold-dark);
  text-decoration:none;margin:2px 0 4px;
}
.video-source-link:hover{text-decoration:underline;}
.video-dl-btn{align-self:flex-start;}

@media (min-width:700px){
  .section{padding:56px 32px 88px;}
  .dropzone{padding:64px 20px;}
}
@media (max-width:480px){
  .video-card{flex-direction:column;}
  .video-thumb{width:100%;}
}