/* ============================================================
   THEME — edit this file to reskin the whole dashboard (colors,
   fonts, spacing). Every page links this one file, so a change
   here applies everywhere at once.
   ============================================================ */
:root {
  /* Colors — same violet/pink/cyan gradient brand as the marketing homepage */
  --color-bg: #0a0a14;
  --color-surface: rgba(255, 255, 255, 0.055);
  --color-surface-strong: rgba(255, 255, 255, 0.09);
  --color-line: rgba(255, 255, 255, 0.1);
  --color-ink: #f4f3fb;
  --color-muted: #a5a2c2;
  --color-accent: #ec4899;
  --color-accent-ink: #ffffff; /* text/icon color placed ON TOP of an accent fill */
  --color-accent-grad: linear-gradient(
    135deg,
    #7c3aed,
    #ec4899 55%,
    #06b6d4
  ); /* for primary CTA fills */
  --color-good: #34d399;
  --color-warn: #f5a623;
  --color-critical: #ef4444;
  --color-warn-ink: #1a1204; /* text/icon placed ON a warn-coloured fill */

  /* Ambient background glow — same radial blend as the marketing homepage,
     put on body { background: var(--bg-glow) } so glass surfaces have
     something to show through. */
  --bg-glow:
    radial-gradient(
      600px 400px at 15% 10%,
      rgba(124, 58, 237, 0.35),
      transparent 60%
    ),
    radial-gradient(
      700px 500px at 85% 20%,
      rgba(236, 72, 153, 0.28),
      transparent 60%
    ),
    radial-gradient(
      600px 500px at 50% 90%,
      rgba(6, 182, 212, 0.22),
      transparent 60%
    ),
    var(--color-bg);
  --backdrop-blur: blur(10px);
  /* Explicit floor height for the top nav bar, shared by the marketing
     homepage's .nav and the app pages' .app-nav__inner — without this the
     bar's height depends on whatever happens to be in the right-hand slot
     (CTA buttons vs. an account avatar pill vs. nothing while logged out),
     which is exactly what drifted out of sync before. */
  --nav-height: 73px;

  /* Fonts — swap any of these to change the whole site's typeface */
  --font-display:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-body: var(--font-display);
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;

  --radius: 16px;
}

/* ============================================================
   PERSISTENT TOP NAV — shared by every logged-in app page
   (dashboard, optimize, video detail). Sticks to the top of the
   viewport while scrolling; account-nav.js wires up its behavior.
   ============================================================ */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 20, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.app-nav__inner {
  max-width: 1160px;
  margin: 0 auto;
  min-height: var(--nav-height);
  box-sizing: border-box;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.app-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
  text-decoration: none;
  flex-shrink: 0;
}
.app-nav__brand svg {
  width: 30px;
  height: 30px;
}
.app-nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
}
.app-nav__links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.app-nav__links a:hover,
.app-nav__links a.active {
  color: var(--color-ink);
}

.whoami {
  position: relative;
  flex-shrink: 0;
}
.account-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  font-size: 0.8rem;
  font-family: inherit;
  color: var(--color-muted);
  cursor: pointer;
}
.account-trigger:hover {
  border-color: var(--color-line);
  background: var(--color-surface);
}
.account-trigger img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.account-trigger .name {
  color: var(--color-ink);
}
.account-trigger .chevron {
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}
.account-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 240px;
  background: color-mix(in srgb, var(--color-bg) 92%, white 8%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  padding: 0.5rem;
  z-index: 30;
}
.account-dropdown__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 0.4rem;
}
.account-dropdown__header img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-dropdown__name {
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.account-dropdown__email {
  color: var(--color-muted);
  font-size: 0.72rem;
}
.account-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.account-dropdown__item:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.account-dropdown__item--danger:hover {
  background: color-mix(in srgb, var(--color-critical) 12%, transparent);
  color: var(--color-critical);
}
.account-dropdown__divider {
  border-top: 1px solid var(--color-line);
  margin: 0.4rem 0;
}

/* Shown when YouTube has rejected the stored refresh token and the dashboard's
   figures have silently stopped updating. Deliberately prominent: stale
   analytics presented as current are worse than an obvious warning. */
.reconnect-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warn) 45%, transparent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.reconnect-banner__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-warn);
  color: var(--color-warn-ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reconnect-banner__body { flex: 1; min-width: 220px; }
.reconnect-banner__body strong { color: var(--color-ink); font-size: 0.9rem; }
.reconnect-banner__body p {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.reconnect-banner__action {
  flex-shrink: 0;
  background: var(--color-warn);
  color: var(--color-warn-ink);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
}
.reconnect-banner__action:hover { filter: brightness(1.08); text-decoration: none; }