/* ---------------------------------------------------------------
   YouTube Downloader — single page styles
   Dark by default. One accent colour. No framework.
   --------------------------------------------------------------- */

:root {
  --bg: #0b0d12;
  --surface: #14171f;
  --surface-2: #1b1f2a;
  --border: #262b38;
  --text: #e8eaf0;
  --text-dim: #9aa3b5;
  --accent: #ff3d3d;
  --accent-hover: #ff5555;
  --ok: #35c07a;
  --warn: #ffb02e;
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* ---------- hero ---------- */

.hero { text-align: center; margin-bottom: 28px; }

.hero__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  background: linear-gradient(180deg, #fff 30%, #b9c0d0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__sub { color: var(--text-dim); margin: 0; font-size: 17px; }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* ---------- search ---------- */

.search { margin-bottom: 18px; }

.search__row { display: flex; gap: 10px; }

#url {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

#url::placeholder { color: #5d6577; }

#url:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 61, .13);
}

#fetch-btn, .download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .08s, opacity .15s;
}

#fetch-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0 24px;
}

#fetch-btn:hover:not(:disabled) { background: #232836; }

.download-btn {
  width: 100%;
  background: var(--accent);
  padding: 15px;
  font-size: 16px;
  margin-top: 18px;
}

.download-btn:hover:not(:disabled) { background: var(--accent-hover); }

#fetch-btn:active:not(:disabled),
.download-btn:active:not(:disabled) { transform: scale(.985); }

#fetch-btn:disabled, .download-btn:disabled { opacity: .55; cursor: not-allowed; }

.hint { color: var(--warn); font-size: 13px; margin: 10px 0 0; }

/* ---------- supported platform chips ---------- */

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.platforms li {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 11px;
}

.platforms li:first-child { color: var(--ok); border-color: rgba(53, 192, 122, .3); }

/* ---------- spinner ---------- */

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- alerts ---------- */

.alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  border: 1px solid;
}

.alert--error {
  background: rgba(255, 61, 61, .09);
  border-color: rgba(255, 61, 61, .35);
  color: #ffb3b3;
}

.alert--info {
  background: rgba(53, 192, 122, .09);
  border-color: rgba(53, 192, 122, .35);
  color: #9fe6c0;
}

/* ---------- result ---------- */

.result { margin-bottom: 18px; }

.result__head { display: flex; gap: 16px; align-items: flex-start; }

.result__thumb {
  width: 168px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  flex-shrink: 0;
}

.result__meta { min-width: 0; flex: 1; }

.result__meta h2 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result__by {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0;
}

.dot { margin: 0 6px; opacity: .5; }

/* ---------- format picker ---------- */

.picker { margin-top: 20px; }

.picker label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

#format {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

#format:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 61, .13);
}

.picker__note {
  color: var(--text-dim);
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 20px;
}

/* ---------- progress ---------- */

.progress { margin-top: 16px; }

.progress__bar {
  height: 7px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #ff8a3d);
  border-radius: 99px;
  transition: width .2s ease;
}

.progress__text {
  color: var(--text-dim);
  font-size: 13px;
  margin: 9px 0 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- content sections ---------- */

.steps, .faq { margin-top: 34px; }

.steps h2, .faq h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.steps ol { margin: 0; padding-left: 22px; color: var(--text-dim); }

.steps li { margin-bottom: 7px; }

.steps strong { color: var(--text); font-weight: 600; }

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}

.faq details:first-of-type { border-top: 1px solid var(--border); }

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.faq details[open] summary::after { content: '−'; }

.faq details p {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 9px 0 2px;
}

/* ---------- ad slots ---------- */

/* These containers exist as insertion points. Monetag injects its own ads
   independently (see the tag in index.html), so these stay empty unless you
   paste an ad unit into one. An empty slot collapses to nothing rather than
   showing a dead placeholder box: a visitor seeing "ADVERTISEMENT" with no
   ad in it looks broken, and it wastes vertical space.

   Once a real unit (an <ins> or <iframe>) is inside, the slot sizes itself
   to the ad automatically. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ad-slot:empty {
  display: none;
}

.ad-slot--leaderboard {
  max-width: 780px;
  margin: 20px auto 0;
  min-height: 90px;
}

.ad-slot--incard {
  margin-top: 20px;
  min-height: 90px;
}

.ad-slot--inline { min-height: 100px; margin-top: 18px; }

.ad-slot--anchor {
  min-height: 60px;
  margin: 0 20px 20px;
  max-width: 740px;
}

@media (min-width: 800px) {
  .ad-slot--anchor { display: none; }
}

/* ---------- playlist ---------- */

.playlist {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.playlist__head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.playlist__items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.playlist__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background .12s;
}

.playlist__item:hover { background: var(--surface-2); }

.playlist__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist__meta {
  color: var(--text-dim);
  font-size: 12.5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- advanced options ---------- */

.advanced { margin-top: 18px; padding: 0; }

.advanced__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 17px 20px;
  cursor: pointer;
  text-align: left;
}

.advanced__chevron { color: var(--text-dim); font-size: 13px; }

.advanced__body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

/* [hidden] loses to any `display` declaration, and this element sits inside
   layout rules that set one. State the collapsed case explicitly so the
   panel is reliably closed on first paint. */
.advanced__body[hidden] {
  display: none;
}

.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
}

.opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.opt label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
}

.opt select,
.opt input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 11px;
  width: 100%;
  min-width: 0;
}

.opt select:focus,
.opt input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 61, .13);
}

.opt input::placeholder { color: #5d6577; }

.opt-checks {
  border: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 16px;
}

.opt-checks legend {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  padding: 0;
  margin-bottom: 10px;
}

.opt-checks label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
}

.opt-checks input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.advanced__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.ghost-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .14s;
}

.ghost-btn:hover:not(:disabled) { background: #232836; }
.ghost-btn:disabled { opacity: .45; cursor: not-allowed; }

.advanced__about {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.advanced__about summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-dim);
}

.advanced__about p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 10px 0 0;
}

.advanced__about code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: #e8b9b9;
}

.ad-slot--anchor {
  min-height: 60px;
  margin: 0 20px 20px;
  max-width: 740px;
}

@media (min-width: 800px) {
  .ad-slot--leaderboard { margin-top: 20px; }
  .ad-slot--anchor { display: none; }
}

/* ---------- footer ---------- */

.foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: #6b7385;
  font-size: 12.5px;
  text-align: center;
}

.foot p { margin: 0; }

/* ---------- mobile ---------- */

@media (max-width: 560px) {
  .wrap { padding: 30px 16px 48px; }

  .search__row { flex-direction: column; }

  #fetch-btn { padding: 14px; }

  .result__head { flex-direction: column; }

  .result__thumb { width: 100%; }

  .result__meta h2 { -webkit-line-clamp: 4; }

  .ad-slot--anchor { margin-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- site catalogue ---------- */

.catalogue { margin-top: 34px; }

.catalogue__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  transition: background .14s;
}

.catalogue__toggle:hover { background: var(--surface-2); }

.catalogue__chevron { color: var(--text-dim); font-size: 13px; }

.catalogue__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 10px;
}

.catalogue__body {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}

.catalogue__body[hidden] { display: none; }

.catalogue__intro {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.catalogue__search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.catalogue__search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 61, .13);
}

.catalogue__search::placeholder { color: #5d6577; }

.cat-group { margin-bottom: 22px; }
.cat-group:last-of-type { margin-bottom: 0; }

.cat-group__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 5px;
}

.cat-group__title--works { color: var(--ok); }
.cat-group__title--login_required { color: var(--warn); }
.cat-group__title--blocked { color: #ff7a7a; }
.cat-group__title--untested { color: var(--text-dim); }

.cat-group__badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 8px;
  color: var(--text-dim);
}

.cat-group__hint {
  color: #6b7385;
  font-size: 12.5px;
  margin: 0 0 11px;
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
}

.cat-list li {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 0;
}

.cat-list li:hover { color: var(--text); }

.cat-more {
  color: #5d6577;
  font-size: 12px;
  font-style: italic;
  margin: 9px 0 0;
}

.catalogue__empty {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  padding: 20px 0 8px;
  margin: 0;
}

.catalogue__empty[hidden] { display: none; }

@media (max-width: 560px) {
  .cat-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .catalogue__body { padding: 16px 15px; }
  .catalogue__count { display: none; }
}