/* ============================================================
   YoutubeDownloader — UI stylesheet
   ============================================================ */

:root {
  --bg:            #f6f7fb;
  --bg-elev:       #ffffff;
  --bg-soft:       #f1f3f9;
  --border:        #e4e7f0;
  --border-strong: #d3d8e6;
  --text:          #101426;
  --text-dim:      #5b6480;
  --text-faint:    #8a92ab;

  --accent:        #ff2d55;
  --accent-2:      #7c3aed;
  --accent-soft:   rgba(255, 45, 85, .1);
  --ok:            #12b76a;
  --warn:          #f79009;
  --danger:        #e5484d;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(16, 20, 38, .06);
  --shadow:    0 4px 16px rgba(16, 20, 38, .07);
  --shadow-lg: 0 20px 48px -12px rgba(16, 20, 38, .18);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

html[data-theme="dark"] {
  --bg:            #0a0c14;
  --bg-elev:       #12151f;
  --bg-soft:       #171b28;
  --border:        #232838;
  --border-strong: #333a4f;
  --text:          #eef1f8;
  --text-dim:      #9aa3bd;
  --text-faint:    #6b748f;

  --accent-soft:   rgba(255, 45, 85, .16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, .7);
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; }

/* `hidden` must beat component display rules (e.g. .skeleton{display:flex}) */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.wrap {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 20px;
}

.bg-glow {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 620px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46% 44% at 22% 30%, rgba(255, 45, 85, .16), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(124, 58, 237, .16), transparent 70%);
  filter: blur(12px);
}

main { position: relative; z-index: 1; padding-bottom: 72px; }

::selection { background: var(--accent); color: #fff; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.02em;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(255, 45, 85, .35);
}

.brand-text { font-size: 16px; }
.brand-text span { color: var(--text-dim); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  white-space: nowrap;
}

.pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}

.pill-ok    { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.pill-ok .dot    { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.pill-bad   { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.pill-bad .dot   { background: var(--danger); }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }

.ico-moon { display: none; }
html[data-theme="dark"] .ico-sun  { display: none; }
html[data-theme="dark"] .ico-moon { display: block; }

/* ---------------- hero ---------------- */
.hero { padding: 56px 0 28px; text-align: center; }

.hero-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 5.2vw, 47px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.035em;
}

.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 0 auto 30px;
  max-width: 500px;
  color: var(--text-dim);
  font-size: 16px;
}

/* ---------------- search ---------------- */
.search-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}

.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-ico {
  display: grid;
  place-items: center;
  width: 34px;
  flex: none;
  color: var(--text-faint);
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15.5px;
  font-family: inherit;
}
.search-input::placeholder { color: var(--text-faint); }

.ghost-btn {
  flex: none;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-dim);
  font: 600 13.5px/1 inherit;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.ghost-btn:hover { color: var(--text); border-color: var(--border-strong); }

.primary-btn {
  position: relative;
  flex: none;
  height: 46px;
  min-width: 122px;
  padding: 0 22px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font: 700 14.5px/1 inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(255, 45, 85, .5);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), opacity .16s;
}
.primary-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(255, 45, 85, .6); }
.primary-btn:active:not(:disabled) { transform: translateY(0); }
.primary-btn:disabled { opacity: .65; cursor: not-allowed; }

.btn-spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.primary-btn.is-loading .btn-label  { visibility: hidden; }
.primary-btn.is-loading .btn-spinner { display: block; }

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

.search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 6px 4px;
  justify-content: center;
}

.hint-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 4px 11px;
  border-radius: 999px;
}

.err {
  margin: 18px auto 0;
  max-width: 620px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

/* ---------------- skeleton ---------------- */
.skeleton {
  display: flex;
  gap: 20px;
  margin-top: 26px;
  padding: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.sk-media {
  width: 240px; height: 135px;
  flex: none;
  border-radius: var(--radius);
}

.sk-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sk-line { height: 14px; border-radius: 6px; }
.sk-line.w70 { width: 70%; }
.sk-line.w40 { width: 40%; height: 12px; }
.sk-row { height: 44px; border-radius: var(--radius-sm); margin-top: 2px; }

.sk-media, .sk-line, .sk-row {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 37%, var(--bg-soft) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- search results ---------------- */
.results { margin-top: 34px; }

.section-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: -.01em;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.result-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.result-item:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.ri-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-soft); }
.ri-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ri-dur {
  position: absolute;
  right: 7px; bottom: 7px;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
}

.ri-body { padding: 11px 12px 13px; }

.ri-title {
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ri-meta { font-size: 12px; color: var(--text-faint); }

/* ---------------- video card ---------------- */
.video-card {
  margin-top: 30px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: rise .35s var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.video-head {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.thumb-wrap {
  position: relative;
  width: 248px;
  flex: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16/9;
}

.thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.duration {
  position: absolute;
  right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .84);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
}

.video-meta { min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.video-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.meta-sep { color: var(--text-faint); }

.meta-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.mini-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}

.text-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  width: fit-content;
}
.text-link:hover { color: var(--accent); }

/* ---------------- tabs ---------------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--border);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 600 14px/1 inherit;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .18s var(--ease);
}
.tab:hover { color: var(--text); background: var(--bg-soft); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }

.tab-count {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-faint);
}
.tab.is-active .tab-count { background: var(--accent-soft); color: var(--accent); }

/* ---------------- format rows ---------------- */
.format-panel { padding: 14px 20px 20px; }

.format-list { display: flex; flex-direction: column; gap: 8px; }

.fmt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.fmt:hover { border-color: var(--border-strong); background: var(--bg-soft); }

.fmt-q {
  flex: none;
  min-width: 74px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.fmt-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-faint);
}

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}
.tag-hot { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.tag-ok  { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: transparent; color: var(--ok); }

.fmt-size {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 76px;
  text-align: right;
}

.dl-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 118px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font: 700 13px/1 inherit;
  cursor: pointer;
  transition: transform .16s var(--ease), filter .16s var(--ease), opacity .16s;
}
.dl-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.dl-btn:disabled { opacity: .6; cursor: progress; }

/* other rows while one download is running */
.dl-btn.is-waiting { opacity: .35; cursor: not-allowed; }
.dl-btn.is-done { background: var(--ok); }

.dl-btn .mini-spin {
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.note {
  margin: 4px 20px 20px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 9%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  font-size: 12.5px;
  color: var(--text-dim);
}
.note strong { color: var(--text); }

/* Stronger variant for the "quality was capped by YouTube" notice. The plain
   .note is already amber, so this uses the danger colour to stand apart. */
.note-warn {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  line-height: 1.55;
}
.note-warn code {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  font-size: 12px;
}


/* ---------------- features ---------------- */
.features {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.feature {
  padding: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.feature:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.feat-ico { font-size: 22px; margin-bottom: 10px; }

.feature h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.feature p  { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

/* ---------------- footer ---------------- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 22px 0;
  background: var(--bg-elev);
}

.footer-inner {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------------- toasts ---------------- */
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 36px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: toastIn .28s var(--ease);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.toast.is-out { animation: toastOut .25s var(--ease) forwards; }

@keyframes toastOut {
  to { opacity: 0; transform: translateX(24px) scale(.96); }
}

.toast-ico {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
}
.toast.ok  .toast-ico { background: color-mix(in srgb, var(--ok) 15%, transparent);     color: var(--ok); }
.toast.bad .toast-ico { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

.toast-body { flex: 1; min-width: 0; }

.toast-title {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-msg { font-size: 12.5px; color: var(--text-dim); }

.toast-bar {
  margin-top: 8px;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}

.toast-bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: indet 1.15s ease-in-out infinite;
}

@keyframes indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}

/* ---------------- responsive ---------------- */
@media (max-width: 720px) {
  .hero { padding: 36px 0 22px; }

  .search-row { flex-wrap: wrap; }
  .search-ico { display: none; }
  .search-input { flex: 1 1 100%; height: 44px; padding-inline: 6px; }
  .ghost-btn { flex: 1; }
  .primary-btn { flex: 2; min-width: 0; }

  .video-head { flex-direction: column; }
  .thumb-wrap { width: 100%; }

  .skeleton { flex-direction: column; }
  .sk-media { width: 100%; height: 170px; }

  .fmt { flex-wrap: wrap; gap: 10px; }
  .fmt-q { min-width: 60px; }
  .fmt-size { min-width: auto; margin-left: auto; }
  .dl-btn { flex: 1 1 100%; min-width: 0; }

  .toast-stack { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

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