/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --bg:           #edeaf7;
  --surface:      #ffffff;
  --surface-alt:  #e5e1f4;
  --border:       #cbc4e8;
  --text:         #2a2444;
  --text-muted:   #7a72a0;
  --accent:       #7c6fc2;
  --accent-hover: #6a5db0;
  --danger:       #bf5f79;
  --success:      #57a078;
  --warn:         #be8d48;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Shape */
  --radius-sm: 7px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Elevation */
  --shadow: 0 2px 8px color-mix(in srgb, var(--accent) 10%, transparent),
            0 0 0 1px var(--border);

  /* Typography */
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;

  /* Motion */
  --transition: .15s ease;
}

[data-theme="dark"] {
  --bg:           #1a1628;
  --surface:      #252038;
  --surface-alt:  #302b48;
  --border:       #443c60;
  --text:         #e8e2f8;
  --text-muted:   #9890be;
  --accent:       #a497e0;
  --accent-hover: #b5aaec;
  --danger:       #d98aa8;
  --success:      #6dbf90;
  --warn:         #d4a86a;
  --shadow: 0 2px 10px rgba(0, 0, 0, .45),
            0 0 0 1px var(--border);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

html {
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
}

body { min-height: 100vh; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ──────────────────────────────────────────────────────────────── */

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 13px var(--space-5);
  max-width: 900px;
  margin: 0 auto;
}

.logo {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.3px;
  flex-shrink: 0;
}

.metrics {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1;
}

.metric {
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;

  & span { font-weight: 600; color: var(--text); }
  &.active span { color: var(--accent); }
  &.failed  span { color: var(--danger); }
  &.success span { color: var(--success); }
}

.theme-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--text-muted);
  font-size: .85rem;
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
  transition: background var(--transition);

  &:hover { background: var(--surface-alt); }

  & span {
    padding: 2px 5px;
    border-radius: 4px;
    transition: background var(--transition), color var(--transition);

    &.active { background: var(--accent); color: #fff; }
  }
}

/* ── Main ────────────────────────────────────────────────────────────────── */

main {
  padding: var(--space-6) var(--space-5) 48px;
  max-width: 900px;
  margin: 0 auto;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* ── Form controls ───────────────────────────────────────────────────────── */

:is(input[type="text"], input[type="url"], input[type="password"], select, textarea) {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;

  &:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

select { cursor: pointer; }

textarea {
  resize: vertical;
  min-height: 88px;
  font-size: .9rem;
  font-family: var(--font-mono);
}

label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  padding: 9px var(--space-4);
  transition: background var(--transition), opacity var(--transition);
  white-space: nowrap;

  &:disabled { opacity: .45; cursor: not-allowed; }
}

.btn-primary {
  background: var(--accent);
  color: #fff;

  &:hover:not(:disabled) { background: var(--accent-hover); }
}

.btn-secondary {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);

  &:hover:not(:disabled) {
    background: color-mix(in srgb, var(--border) 50%, var(--surface-alt));
  }
}

.btn-danger {
  background: var(--danger);
  color: #fff;

  &:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 80%, black);
  }
}

.btn-sm { padding: 6px var(--space-3); font-size: .82rem; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 5px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  font-size: .9rem;
  transition: color var(--transition), background var(--transition);

  &:hover { color: var(--text); background: var(--surface-alt); }
  &.danger:hover { color: var(--danger); }
  &.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

/* ── Add-URL row ─────────────────────────────────────────────────────────── */

.add-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);

  & input { flex: 1; }
}

.add-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);

  & .field { display: flex; flex-direction: column; }
}

/* ── Advanced section ────────────────────────────────────────────────────── */

details.advanced {
  margin-top: var(--space-4);

  & > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
    padding: 2px 0;

    &::-webkit-details-marker { display: none; }

    &::before {
      content: '▸';
      font-size: .7rem;
      transition: transform var(--transition);
      display: inline-block;
    }
  }

  &[open] > summary::before { transform: rotate(90deg); }

  & > div { margin-top: var(--space-3); }

  & > summary + .advanced-section-header {
    margin-top: var(--space-3);
    padding-top: 0;
    border-top: none;
  }
}

.advanced-section-header {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.section-help-link {
  display: block;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
  opacity: .7;
  transition: opacity var(--transition);

  &:hover { opacity: 1; }
}

/* ── Error banner ────────────────────────────────────────────────────────── */

.error-banner {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border));
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: .9rem;
  margin-bottom: var(--space-4);
  padding: 9px 13px;
}

/* ── Cookies ─────────────────────────────────────────────────────────────── */

input[type="file"] { display: none; }

.cookie-file-pick { margin-bottom: var(--space-2); }

.cookie-domains-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
  margin: var(--space-3) 0 var(--space-2);
}

.cookie-domain-list + .btn { margin-top: var(--space-2); }

.cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cookie-status {
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.cookie-domain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cookie-domain-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .875rem;

  & span {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .85em;
  }
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;

  &.active { background: var(--success); }
}

/* ── Section toolbar ─────────────────────────────────────────────────────── */

.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-6) 0 var(--space-3);
}

/* ── Section heading ─────────────────────────────────────────────────────── */

.section-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: var(--space-6) 0 var(--space-3);
}

/* ── Download list ───────────────────────────────────────────────────────── */

.dl-list { display: flex; flex-direction: column; gap: var(--space-2); }

.dl-item {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

.dl-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dl-title {
  flex: 1;
  font-size: .95rem;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.35;

  & a { color: var(--text); }
  & a:hover { color: var(--accent); text-decoration: none; }
  & .badge { margin-right: var(--space-2); }
}

.dl-actions { display: flex; gap: var(--space-1); flex-shrink: 0; }

.dl-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-muted);
}

.dl-meta-badge { margin-left: auto; opacity: .7; }

.subtitle-list {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);

  & .dl-meta { margin-top: var(--space-1); }
}

/* ── Progress ────────────────────────────────────────────────────────────── */

.progress-wrap {
  height: 5px;
  background: var(--surface-alt);
  border-radius: 99px;
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-1);
}

.progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;

  &.running   { background: var(--accent); }
  &.queued    { background: var(--border);  width: 100% !important; }
  &.finished  { background: var(--success); width: 100% !important; }
  &.error     { background: var(--danger);  width: 100% !important; }
  &.canceled  { background: var(--border);  width: 100% !important; }
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.badge-finished { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-error    { background: color-mix(in srgb, var(--danger)  15%, transparent); color: var(--danger);  }

/* ── Source link ─────────────────────────────────────────────────────────── */

.source-link {
  font-size: .82rem;
  color: var(--text-muted);
  margin-left: auto;
  opacity: .65;
  transition: opacity var(--transition);

  &:hover { opacity: 1; text-decoration: underline; }
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}

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

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty {
  color: var(--text-muted);
  font-size: .9rem;
  padding: 28px 0;
  text-align: center;
}

/* ── Log panel ───────────────────────────────────────────────────────────── */

.log-panel {
  margin-top: var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;

  & pre {
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text);
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-3);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .add-row { flex-wrap: wrap; }
  .add-row input { width: 100%; }
  .metrics { gap: var(--space-2); }
  .metric  { font-size: .78rem; }
}

/* Login page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
}

.login-page main { max-width: 360px; width: 100%; }

.login-logo {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.3px;
  text-align: center;
  margin-bottom: var(--space-6);
}

.field { margin-bottom: var(--space-4); }