/* ============================================
   World-Debrid · Aurora Globe Design System
   v1 · 2026-05 · feat/graphic-refresh
   ============================================ */

:root {
  /* Backgrounds */
  --aurora-bg-base: #050616;
  --aurora-bg-elevated: #0a0e27;
  --aurora-bg-card: #0f1428;
  --aurora-bg-card-hover: #131a35;

  /* Signature aurora colors */
  --aurora-teal: #14b8a6;
  --aurora-violet: #a855f7;
  --aurora-pink: #ec4899;
  --aurora-cream: #fef3c7;

  /* Text */
  --aurora-text-primary: #e0f2fe;
  --aurora-text-secondary: rgba(224, 242, 254, 0.75);
  --aurora-text-muted: rgba(224, 242, 254, 0.55);
  --aurora-text-faint: rgba(224, 242, 254, 0.35);

  /* Borders */
  --aurora-border-subtle: rgba(168, 85, 247, 0.15);
  --aurora-border-aurora: rgba(20, 184, 166, 0.3);
  --aurora-border-hover: rgba(20, 184, 166, 0.5);

  /* Composite gradients */
  --aurora-gradient: linear-gradient(135deg, #14b8a6 0%, #a855f7 50%, #ec4899 100%);
  --aurora-gradient-soft: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
  --aurora-gradient-text: linear-gradient(135deg, #e0f2fe 0%, #14b8a6 30%, #a855f7 65%, #ec4899 100%);

  /* Typography (clamp fluid) */
  --aurora-fs-eyebrow: clamp(11px, 0.85vw, 12px);
  --aurora-fs-body-sm: clamp(13px, 1vw, 14px);
  --aurora-fs-body: clamp(15px, 1.1vw, 16px);
  --aurora-fs-lead: clamp(18px, 1.4vw, 22px);
  --aurora-fs-tagline: clamp(24px, 2.2vw, 36px);
  --aurora-fs-h3: clamp(22px, 1.8vw, 28px);
  --aurora-fs-h2: clamp(40px, 5vw, 72px);
  --aurora-fs-h1: clamp(56px, 9vw, 132px);

  /* Spacing scale */
  --aurora-space-1: 4px;
  --aurora-space-2: 8px;
  --aurora-space-3: 12px;
  --aurora-space-4: 16px;
  --aurora-space-5: 20px;
  --aurora-space-6: 24px;
  --aurora-space-8: 32px;
  --aurora-space-10: 40px;
  --aurora-space-12: 48px;
  --aurora-space-16: 64px;
  --aurora-space-20: 80px;
  --aurora-space-24: 96px;
  --aurora-space-32: 128px;

  /* Radius */
  --aurora-radius-sm: 6px;
  --aurora-radius-md: 12px;
  --aurora-radius-lg: 20px;
  --aurora-radius-xl: 28px;
  --aurora-radius-pill: 999px;

  /* Motion */
  --aurora-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aurora-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aurora-duration-fast: 150ms;
  --aurora-duration-base: 250ms;
  --aurora-duration-slow: 400ms;

  /* Layout */
  --aurora-topbar-height: 64px;
  --aurora-container-max: 1320px;
}

/* ============================================
   GLOBALS
   ============================================ */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* Light theme triggers light-mode UA defaults (scrollbars, native form controls) */
html:has(body[data-theme="arc"]) { color-scheme: light; }

/* Reset legacy top-banner padding compensation from styles.css
   (legacy body had padding-top: 80px to clear a position:fixed banner
   that no longer exists in the aurora refresh). */
body {
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--aurora-fs-body);
  line-height: 1.55;
  color: var(--aurora-text-primary);
  background: var(--aurora-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Clash Display', 'Switzer', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--aurora-text-primary);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--aurora-duration-fast) var(--aurora-ease-out);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: rgba(20, 184, 166, 0.3);
  color: var(--aurora-text-primary);
}

/* ============================================
   ATMOSPHERE: bands + starfield
   ============================================ */

.aurora-bands {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-band {
  position: absolute;
  width: 200%;
  height: 60vh;
  opacity: 0.55;
  filter: blur(0px);
  animation: aurora-drift-1 52s ease-in-out infinite alternate;
}

.aurora-band-1 {
  top: 8vh;
  left: -50%;
}

.aurora-band-2 {
  top: 55vh;
  left: -50%;
  animation: aurora-drift-2 64s ease-in-out infinite alternate-reverse;
}

@keyframes aurora-drift-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(25%); }
}

@keyframes aurora-drift-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.aurora-starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(2px 2px at 85% 25%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.45), transparent 50%),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.4), transparent 50%);
  background-size: 100% 100%;
  animation: aurora-twinkle 12s ease-in-out infinite;
}

@keyframes aurora-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Reduced motion */
.aurora-reduce-motion .aurora-band,
.aurora-reduce-motion .aurora-starfield,
.aurora-reduce-motion .aurora-marquee-track {
  animation: none !important;
}

.aurora-reduce-motion .aurora-hero-globe animate,
.aurora-reduce-motion .aurora-hero-globe animateMotion,
.aurora-reduce-motion .aurora-hero-globe animateTransform {
  display: none;
}

.aurora-reduce-motion .aurora-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Content layer above atmosphere */
.aurora-content,
.top-banner,
.aurora-topbar,
main,
footer {
  position: relative;
  z-index: 2;
}

/* ============================================
   TOPBAR
   ============================================ */

.aurora-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 39, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--aurora-border-subtle);
}

.aurora-topbar-inner {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: 14px var(--aurora-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aurora-space-6);
  height: var(--aurora-topbar-height);
}

.aurora-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  color: var(--aurora-text-primary);
  transition: opacity var(--aurora-duration-fast);
}

.aurora-brand:hover {
  opacity: 0.9;
}

.aurora-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.aurora-middot {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin: 0 0.05em;
}

.aurora-nav {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-5);
}

.aurora-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-2);
}

/* ============================================
   CUSTOM LANGUAGE DROPDOWN (aurora-styled)
   ============================================
   Progressive enhancement note: we could opt into the new
   `appearance: base-select` CSS spec for modern Chrome (118+)
   via `@supports (appearance: base-select)` to style the native
   <select> directly with `::picker(select)`, `option`,
   `option::checkmark`. Browser support is still narrow, so we
   ship a JS-driven custom dropdown for cross-browser consistency
   and keep the native <select> visually hidden as a no-JS / form
   submission fallback. */

.aurora-language {
  position: relative;
}

.aurora-language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  font-family: 'Switzer', sans-serif;
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-language-trigger:hover,
.aurora-language-trigger:focus-visible,
.aurora-language-trigger[aria-expanded="true"] {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-language-trigger-icon {
  font-size: 12px;
  color: var(--aurora-teal);
}

.aurora-language-trigger-chevron {
  font-size: 10px;
  transition: transform var(--aurora-duration-fast);
}

.aurora-language-trigger[aria-expanded="true"] .aurora-language-trigger-chevron {
  transform: rotate(180deg);
}

.aurora-language-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-aurora);
  border-radius: var(--aurora-radius-md);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.6);
  list-style: none;
  margin: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
}

.aurora-language-menu[hidden] {
  display: none;
}

.aurora-language-menu li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--aurora-radius-sm);
  cursor: pointer;
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  transition: background var(--aurora-duration-fast), color var(--aurora-duration-fast);
}

.aurora-language-menu li:hover,
.aurora-language-menu li:focus,
.aurora-language-menu li.is-focused {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-language-menu li[aria-selected="true"] {
  background: rgba(20, 184, 166, 0.18);
  color: var(--aurora-teal);
}

.aurora-language-menu li[aria-selected="true"].is-focused,
.aurora-language-menu li[aria-selected="true"]:hover {
  background: rgba(20, 184, 166, 0.26);
}

.aurora-language-option-flag {
  font-size: 16px;
  line-height: 1;
}

.aurora-language-option-label {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
}

.aurora-language-option-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--aurora-text-muted);
}

/* Hide native select but keep it accessible / submittable / no-JS fallback */
.aurora-language-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aurora-theme-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}

.aurora-theme-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.aurora-theme-toggle-track {
  position: relative;
  width: 64px;
  height: 30px;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  transition: background var(--aurora-duration-base), border-color var(--aurora-duration-base);
}

.aurora-theme-toggle-track:hover {
  border-color: var(--aurora-border-aurora);
}

.aurora-theme-toggle-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: color var(--aurora-duration-base), opacity var(--aurora-duration-base), filter var(--aurora-duration-base);
}

.aurora-theme-toggle-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}

/* Toggle icons — the icon NOT covered by the thumb is bright (it represents
   the destination = the mode you can switch to). The icon under the thumb can
   stay muted since it's visually covered by the gradient thumb anyway. */

/* DARK mode (default, unchecked): thumb is on the RIGHT (over moon).
   → Sun (LEFT) is fully visible → bright cream with glow.
   → Moon (RIGHT) is hidden under the thumb → muted. */
.aurora-theme-toggle-icon-light {
  color: #fef3c7;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(254, 243, 199, 0.7));
}
.aurora-theme-toggle-icon-dark {
  color: rgba(224, 242, 254, 0.4);
  opacity: 0.6;
}

/* LIGHT mode (checked, body[data-theme="arc"]): thumb is on the LEFT (over sun).
   → Moon (RIGHT) is fully visible → strong violet.
   → Sun (LEFT) is hidden under the thumb → muted. */
body[data-theme="arc"] .aurora-theme-toggle-icon-light {
  color: rgba(10, 14, 39, 0.35);
  opacity: 0.6;
  filter: none;
}
body[data-theme="arc"] .aurora-theme-toggle-icon-dark {
  color: #7c3aed;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.45));
}

/* Default (unchecked = dark mode): thumb on the RIGHT, over the moon (= current mode). */
.aurora-theme-toggle-thumb {
  position: absolute;
  top: 50%;
  left: calc(100% - 20px - 5px);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--aurora-gradient);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
  transition: left var(--aurora-duration-base) var(--aurora-ease-spring), background var(--aurora-duration-base);
  z-index: 1;
}

/* Checked (light mode): thumb on the LEFT, over the sun (= current mode). */
.aurora-theme-toggle-input:checked ~ .aurora-theme-toggle-track .aurora-theme-toggle-thumb {
  left: 5px;
}

/* Focus state */
.aurora-theme-toggle-input:focus-visible ~ .aurora-theme-toggle-track {
  outline: 2px solid var(--aurora-teal);
  outline-offset: 2px;
}

/* Legacy class names (kept for backward compat with any inline markup) */
.aurora-toggle-track {
  width: 56px;
  height: 32px;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  font-size: 12px;
  color: var(--aurora-text-muted);
}
.aurora-icon-light { color: var(--aurora-cream); }

.aurora-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aurora-nav-link,
.aurora-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--aurora-radius-pill);
  font-size: var(--aurora-fs-body-sm);
  font-weight: 500;
  color: var(--aurora-text-secondary);
  transition: color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-nav-link:hover { color: var(--aurora-text-primary); background: rgba(255,255,255,0.04); }
.aurora-nav-link.is-active { color: var(--aurora-teal); background: rgba(20, 184, 166, 0.1); }

.aurora-nav-login {
  color: var(--aurora-teal);
}

.aurora-nav-cta {
  background: var(--aurora-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.aurora-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(168, 85, 247, 0.45);
}

/* ---------- User avatar + dropdown (logged-in desktop) ---------- */
.aurora-nav-user-wrap {
  position: relative;
  list-style: none;
}

.aurora-nav-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-nav-user:hover,
.aurora-nav-user:focus-visible,
.aurora-nav-user[aria-expanded="true"] {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-text-primary);
  outline: none;
}

.aurora-nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--aurora-gradient);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 4px 14px rgba(168, 85, 247, 0.25);
  overflow: hidden;
}
.aurora-nav-user-avatar .aurora-globe-mark {
  width: 100%;
  height: 100%;
  filter: brightness(1.1);
}

.aurora-nav-user-chevron {
  font-size: 11px;
  transition: transform var(--aurora-duration-fast);
  color: var(--aurora-text-muted);
}
.aurora-nav-user[aria-expanded="true"] .aurora-nav-user-chevron {
  transform: rotate(180deg);
  color: var(--aurora-teal);
}

.aurora-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-aurora);
  border-radius: var(--aurora-radius-md);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.6);
  z-index: 200;
  /* Animate in */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--aurora-duration-fast) var(--aurora-ease-out),
              transform var(--aurora-duration-fast) var(--aurora-ease-out);
}
.aurora-user-dropdown[hidden] {
  display: none;
}
.aurora-user-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.aurora-user-dropdown-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--aurora-border-subtle);
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aurora-user-dropdown-email {
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  font-weight: 600;
  color: var(--aurora-text-primary);
  word-break: break-all;
  line-height: 1.25;
}
.aurora-user-dropdown-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-teal);
}

.aurora-user-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.aurora-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--aurora-radius-sm);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  transition: background var(--aurora-duration-fast), color var(--aurora-duration-fast);
}
.aurora-user-dropdown-item:hover,
.aurora-user-dropdown-item:focus-visible {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-text-primary);
  outline: none;
}
.aurora-user-dropdown-item .aurora-icon {
  color: var(--aurora-teal);
  flex-shrink: 0;
}

.aurora-user-dropdown-divider {
  height: 1px;
  background: var(--aurora-border-subtle);
  margin: 4px 0;
  list-style: none;
}

.aurora-user-dropdown-danger {
  color: var(--aurora-pink);
}
.aurora-user-dropdown-danger .aurora-icon {
  color: var(--aurora-pink);
}
.aurora-user-dropdown-danger:hover,
.aurora-user-dropdown-danger:focus-visible {
  background: rgba(236, 72, 153, 0.12);
  color: #f9a8d4; /* pink-300, more readable */
}

/* Mobile-only / desktop-only toggles for the dual-rendered logged-in nav */
.aurora-nav-mobile-only { display: none; }
.aurora-nav-desktop-only { display: inline-flex; }

@media (max-width: 980px) {
  .aurora-nav-link span,
  .aurora-nav-cta span { display: none; }
  .aurora-nav-links { gap: 2px; }
  /* Don't hide the user-avatar's chevron — it's not a label */
}

@media (max-width: 640px) {
  .aurora-topbar-inner { padding: 10px var(--aurora-space-4); gap: var(--aurora-space-3); }
  .aurora-wordmark { font-size: 18px; }
  .aurora-language { display: none; }
}

/* ============================================
   FOOTER
   ============================================ */

.aurora-footer {
  margin-top: var(--aurora-space-24);
  padding: var(--aurora-space-16) 0 0;
  border-top: 1px solid var(--aurora-border-subtle);
}

.aurora-footer-inner {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: 0 var(--aurora-space-6) var(--aurora-space-12);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2.5fr;
  gap: 110px;
}

.aurora-footer-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.025em;
  color: var(--aurora-text-primary);
  display: inline-block;
  margin-bottom: var(--aurora-space-3);
}

.aurora-footer-tagline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  margin: 0 0 var(--aurora-space-4);
}

.aurora-footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  margin: 0;
}

.aurora-footer-cols {
  display: grid;
  /* 4 colonnes : PRODUIT / HEBERGEURS / AIDE / LEGAL (sprint BIBLE T2 a ajoute la 4e col) */
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.aurora-footer-col h4 {
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-4);
  padding-left: 8px;
}

.aurora-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: var(--aurora-space-3);
}

.aurora-footer-col a {
  color: var(--aurora-text-muted);
  font-size: var(--aurora-fs-body-sm);
  transition: color var(--aurora-duration-fast);
}

.aurora-footer-col a:hover {
  color: var(--aurora-teal);
}

.aurora-marquee {
  overflow: hidden;
  border-top: 1px solid var(--aurora-border-subtle);
  border-bottom: 1px solid var(--aurora-border-subtle);
  padding: var(--aurora-space-4) 0;
  position: relative;
}

.aurora-marquee::before,
.aurora-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.aurora-marquee::before { left: 0; background: linear-gradient(90deg, var(--aurora-bg-base), transparent); }
.aurora-marquee::after { right: 0; background: linear-gradient(270deg, var(--aurora-bg-base), transparent); }

.aurora-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-6);
  animation: aurora-marquee 50s linear infinite;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.25em;
  color: var(--aurora-text-muted);
}

.aurora-marquee.paused .aurora-marquee-track { animation-play-state: paused; }

.aurora-marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aurora-violet);
}
.aurora-marquee-dot:nth-of-type(3n+1) { background: var(--aurora-teal); }
.aurora-marquee-dot:nth-of-type(3n+2) { background: var(--aurora-pink); }

@keyframes aurora-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.aurora-footer-baseline {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: var(--aurora-space-6) var(--aurora-space-6) var(--aurora-space-10);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--aurora-space-4);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-muted);
}

.aurora-footer-baseline a { color: var(--aurora-text-muted); }
.aurora-footer-baseline a:hover { color: var(--aurora-teal); }

@media (max-width: 1280px) {
  .aurora-footer-inner { gap: 80px; }
}

@media (max-width: 980px) {
  .aurora-footer-inner { grid-template-columns: 1fr; gap: var(--aurora-space-10); }
  .aurora-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--aurora-space-8); }
}

@media (max-width: 640px) {
  .aurora-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   HERO
   ============================================ */

.aurora-content {
  position: relative;
  z-index: 2;
}

.aurora-hero {
  position: relative;
  min-height: calc(80vh - var(--aurora-topbar-height));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 38px var(--aurora-space-6) 32px;
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  overflow: visible;
  --aurora-fs-h1: clamp(45px, 7.2vw, 106px);
  --aurora-fs-tagline: clamp(19px, 1.76vw, 29px);
  --aurora-fs-lead: clamp(14px, 1.12vw, 18px);
  --aurora-fs-eyebrow: clamp(9px, 0.68vw, 10px);
}

/* Pages SEO content (uptobox, meilleur-debrideur, vs-debrid-link, changelog) :
   hero contient seulement eyebrow + H1 + lead, pas de globe/chips/CTA. Le min-height
   80vh laisse alors un trou vide avant la 1re section .aurora-article. */
.aurora-hero:has(.aurora-hero-title-page) {
  min-height: auto;
  padding-bottom: var(--aurora-space-12);
}

.aurora-hero-globe {
  position: absolute;
  right: -30px;
  top: 40px;
  width: 432px;
  height: 432px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 80px rgba(168, 85, 247, 0.25));
}
.aurora-hero-globe svg { width: 100%; height: 100%; }

.aurora-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.aurora-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  text-transform: uppercase;
  margin-bottom: var(--aurora-space-5);
}

.aurora-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 10px var(--aurora-teal);
  animation: aurora-pulse 2s ease-in-out infinite;
}

@keyframes aurora-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.aurora-hero-title {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: var(--aurora-fs-h1);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 var(--aurora-space-4);
  text-wrap: balance;
  color: var(--aurora-text-primary);
}

/* Variante reduite pour les pages SEO sub-content (uptobox, vs-debrid-link,
   meilleur-debrideur, etc.) — clamp entre fs-h2 (72px max) et fs-h1 (132px max).
   La home garde fs-h1 pour son wordmark hero, les pages content prennent une
   taille plus mesuree pour eviter le wrapping cauchemardesque sur titre long. */
.aurora-hero-title-page {
  font-family: 'Clash Display', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 var(--aurora-space-4);
  text-wrap: balance;
  color: var(--aurora-text-primary);
  max-width: 920px;
}

.aurora-hero-title-accent {
  background: var(--aurora-gradient-text);
  background-size: 140% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aurora-grad-shift 14s ease-in-out infinite;
}

@keyframes aurora-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.aurora-hero-tagline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-tagline);
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.aurora-hero-tagline em {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.aurora-hero-lead {
  font-size: var(--aurora-fs-lead);
  font-weight: 500;
  color: var(--aurora-text-secondary);
  max-width: 520px;
  margin: 0 0 var(--aurora-space-8);
  line-height: 1.5;
}

/* USP chips — value-prop visibility for "débrideur gratuit / sans inscription" SEO (S2D-05) */
.aurora-hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--aurora-space-2);
  padding: 0;
  margin: calc(0px - var(--aurora-space-4)) 0 var(--aurora-space-6);
  max-width: 520px;
}

.aurora-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.06);
  color: var(--aurora-text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.aurora-hero-chips li span[aria-hidden] {
  color: var(--aurora-teal);
  font-weight: 700;
}

.aurora-hero-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 8px 16px;
  border-radius: var(--aurora-radius-pill);
  border: 1px solid var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.06);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  margin: var(--aurora-space-6) 0 0;
  width: max-content;
  max-width: 100%;
}

.aurora-hero-notice i {
  color: var(--aurora-teal);
  font-size: 14px;
}

.aurora-hero-notice a {
  color: var(--aurora-teal);
  text-decoration: underline;
  text-decoration-color: rgba(20, 184, 166, 0.4);
  font-weight: 600;
  margin-left: 4px;
}

.aurora-hero-notice a:hover {
  text-decoration-color: var(--aurora-teal);
  color: #5eead4;
}

/* Reveal animation */
.aurora-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: aurora-reveal 0.7s var(--aurora-ease-out) forwards;
}

@keyframes aurora-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .aurora-hero-globe { width: 420px; height: 420px; right: -60px; opacity: 0.7; }
}
@media (max-width: 768px) {
  .aurora-hero-globe { position: relative; right: auto; top: 0; width: 280px; height: 280px; margin: 0 auto var(--aurora-space-6); opacity: 0.6; }
  .aurora-hero { min-height: auto; padding-bottom: var(--aurora-space-12); }
  .aurora-hero-inner { max-width: 100%; }
}

/* ============================================
   CONSOLE (debrid tool) — Task 3.2
   Ported from previews/.../direction-3-v5-aurora-globe.html
   with `aurora-` prefix.
   ============================================ */

.aurora-console {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 20, 40, 0.92), rgba(10, 14, 39, 0.96));
  backdrop-filter: blur(24px);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 26px;
  padding: 12px 14px 22px;
  margin-top: var(--aurora-space-6);
  box-shadow:
    0 20px 60px rgba(5, 6, 22, 0.55),
    0 0 0 1px rgba(20, 184, 166, 0.05),
    0 -1px 0 rgba(168, 85, 247, 0.18) inset;
  overflow: hidden;
}

.aurora-console::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.55), transparent 30%, transparent 70%, rgba(236, 72, 153, 0.55));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.aurora-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 14px 12px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  margin-bottom: 14px;
}

.aurora-console-dots { display: flex; gap: 6px; }
.aurora-console-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(224, 242, 254, 0.18);
}
.aurora-console-dot-pink   { background: rgba(236, 72, 153, 0.7);   box-shadow: 0 0 8px rgba(236, 72, 153, 0.4); }
.aurora-console-dot-violet { background: rgba(254, 243, 199, 0.7);  box-shadow: 0 0 8px rgba(254, 243, 199, 0.4); }
.aurora-console-dot-teal   { background: rgba(20, 184, 166, 0.7);   box-shadow: 0 0 8px rgba(20, 184, 166, 0.4); }

.aurora-console-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-console-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-teal);
}

.aurora-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora-teal);
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.9);
  animation: aurora-pulse 2s ease-in-out infinite;
}

.aurora-console-body { padding: 0 14px; }

/* Tabs ----------------------------------------- */
.aurora-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  background: rgba(5, 6, 22, 0.5);
  border-radius: 13px;
  border: 1px solid var(--aurora-border-subtle);
}

/* Target both .aurora-tab (new) and legacy `.toggle-btn` (already dual-classed) */
.aurora-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.25s var(--aurora-ease-out);
  letter-spacing: -0.005em;
  position: relative;
}
.aurora-tab i { font-size: 14px; }
.aurora-tab:hover { color: var(--aurora-text-primary); }

/* Active state: legacy script.js applies `.active`, aurora.js may also apply `.is-active`. */
.aurora-tab.active,
.aurora-tab.is-active {
  background: rgba(20, 184, 166, 0.12);
  color: var(--aurora-teal);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.25), 0 4px 16px rgba(20, 184, 166, 0.15);
}

.aurora-tab-badge {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--aurora-gradient);
  border-radius: 50%;
  margin-left: 4px;
}

/* Form label / row / input ---------------------- */
.aurora-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  margin-bottom: 8px;
}
.aurora-form-label i { color: var(--aurora-teal); font-size: 12px; }

.aurora-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.aurora-form-row-actions { margin-top: 12px; }

.aurora-form-input {
  flex: 1;
  min-width: 260px;
  padding: 14px 20px;
  background: rgba(5, 6, 22, 0.6);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 13px;
  color: var(--aurora-text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: all 0.25s var(--aurora-ease-out);
}
.aurora-form-input::placeholder { color: var(--aurora-text-muted); }
.aurora-form-input:-webkit-autofill,
.aurora-form-input:-webkit-autofill:hover,
.aurora-form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(5, 6, 22, 0.95) inset, 0 0 0 1px var(--aurora-border-subtle);
  box-shadow: 0 0 0 1000px rgba(5, 6, 22, 0.95) inset, 0 0 0 1px var(--aurora-border-subtle);
  -webkit-text-fill-color: var(--aurora-text-primary);
  caret-color: var(--aurora-text-primary);
}
.aurora-form-input:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15), 0 0 28px rgba(20, 184, 166, 0.2);
  background: rgba(5, 6, 22, 0.85);
}
.aurora-form-textarea {
  width: 100%;
  min-height: 140px;
  font-family: 'JetBrains Mono', monospace;
  resize: vertical;
  margin-bottom: 0;
}

/* Submit button (signature) --------------------- */
.aurora-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  background: var(--aurora-gradient);
  color: #0a0e27;
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s var(--aurora-ease-spring);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35);
  font-family: 'Switzer', sans-serif;
  letter-spacing: -0.01em;
}
.aurora-form-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  transition: transform 0.55s var(--aurora-ease-out);
}
.aurora-form-submit:hover::before { transform: translateX(100%); }
.aurora-form-submit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 15px;
  background: var(--aurora-gradient);
  opacity: 0;
  z-index: -1;
  filter: blur(16px);
  transition: opacity 0.35s var(--aurora-ease-out);
}
.aurora-form-submit:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5);
  color: #0a0e27;
}
.aurora-form-submit:hover::after { opacity: 0.7; }
.aurora-form-submit:active { transform: translateY(-1px) scale(1); }
.aurora-form-submit i { transition: transform 0.3s var(--aurora-ease-spring); font-size: 14px; }
.aurora-form-submit:hover i { transform: translateX(4px); }

.aurora-form-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(15, 20, 40, 0.5);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: 13px;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--aurora-ease-out);
}
.aurora-form-secondary:hover {
  color: var(--aurora-teal);
  border-color: var(--aurora-border-aurora);
  background: rgba(20, 184, 166, 0.05);
}

/* Meta footer ----------------------------------- */
.aurora-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aurora-text-faint);
  flex-wrap: wrap;
}
.aurora-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aurora-meta-item strong {
  color: var(--aurora-teal);
  font-weight: 500;
}
.aurora-meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aurora-violet);
}
.aurora-meta-dot-teal { background: var(--aurora-teal); }

/* Mode sections (legacy: only the .active one shows) */
.aurora-console .mode-section {
  display: none;
}
.aurora-console .mode-section.active {
  display: block;
}

@media (max-width: 768px) {
  .aurora-console { padding: 10px 8px 18px; border-radius: 20px; }
  .aurora-console::before { border-radius: 20px; }
  .aurora-console-body { padding: 0 6px; }
  .aurora-tab span { font-size: 12px; }
  .aurora-form-input { min-width: 100%; }
  .aurora-form-meta { font-size: 9.5px; gap: 8px; }
  .aurora-tabs .aurora-tab span { display: none; }
  .aurora-tabs .aurora-tab { gap: 0; padding: 10px; }
  .aurora-tabs .aurora-tab i { font-size: 16px; }
  .mode-toggle.aurora-tabs { flex-direction: row !important; }
}

/* ============================================
   FEATURES — asymmetric 12-col grid (Phase 3b)
   ============================================ */

.aurora-features {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-24) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-features-head {
  text-align: center;
  margin-bottom: var(--aurora-space-16);
}

.aurora-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--aurora-teal);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--aurora-space-3);
}

.aurora-features-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 720px;
  margin: 0 auto var(--aurora-space-4);
}

.aurora-features-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aurora-features-subline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  max-width: 520px;
  margin: 0 auto;
}

.aurora-features-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--aurora-space-6);
  align-items: start;
}

.aurora-feature-span-3 { grid-column: span 3; }
.aurora-feature-span-4 { grid-column: span 4; }
.aurora-feature-span-5 { grid-column: span 5; }
.aurora-feature-span-6 { grid-column: span 6; }

.aurora-feature {
  position: relative;
  padding: var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring),
              border-color var(--aurora-duration-base),
              box-shadow var(--aurora-duration-base);
  overflow: hidden;
}

.aurora-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-feature:hover {
  transform: translateY(-3px);
  border-color: var(--aurora-border-aurora);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.15);
}

.aurora-feature-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(168, 85, 247, 0.06));
}

.aurora-feature-featured::before {
  opacity: 0.85;
  height: 1.5px;
}

.aurora-feature-num {
  position: absolute;
  top: var(--aurora-space-5);
  right: var(--aurora-space-6);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.15em;
  color: var(--aurora-text-muted);
}

.aurora-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--aurora-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--aurora-space-5);
}

.aurora-tint-teal   { background: rgba(20, 184, 166, 0.15); color: var(--aurora-teal); }
.aurora-tint-violet { background: rgba(168, 85, 247, 0.15); color: var(--aurora-violet); }
.aurora-tint-pink   { background: rgba(236, 72, 153, 0.15); color: var(--aurora-pink); }

.aurora-feature h3 {
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  margin: 0 0 var(--aurora-space-3);
  letter-spacing: -0.02em;
}

.aurora-feature p {
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.aurora-feature-featured h3 { font-size: calc(var(--aurora-fs-h3) * 1.1); }
.aurora-feature-featured p  { font-size: var(--aurora-fs-body); }
.aurora-feature-featured .aurora-feature-icon { width: 56px; height: 56px; font-size: 22px; }

@media (max-width: 1024px) {
  .aurora-features-grid { grid-template-columns: repeat(6, 1fr); }
  .aurora-feature-span-3 { grid-column: span 3; }
  .aurora-feature-span-4 { grid-column: span 3; }
  .aurora-feature-span-5 { grid-column: span 6; }
  .aurora-feature-span-6 { grid-column: span 6; }
}

@media (max-width: 640px) {
  .aurora-features-grid { grid-template-columns: 1fr; }
  .aurora-features-grid > * { grid-column: 1 / -1; }
}

/* ============================================
   REFERRAL — gradient backdrop + orbital viz (Phase 3b)
   ============================================ */

.aurora-referral {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-12) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-referral-inner {
  background:
    radial-gradient(ellipse 80% 100% at 20% 50%, rgba(168, 85, 247, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(236, 72, 153, 0.2), transparent 60%),
    var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-xl);
  padding: var(--aurora-space-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aurora-space-10);
  align-items: center;
  overflow: hidden;
  position: relative;
}

.aurora-eyebrow-pink { color: var(--aurora-pink); }

.aurora-referral-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: var(--aurora-space-3) 0 var(--aurora-space-5);
}

.aurora-referral-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aurora-referral-body {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--aurora-space-6);
  max-width: 480px;
}

.aurora-referral-body strong {
  color: var(--aurora-cream);
  font-weight: 600;
}

.aurora-referral-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
}

.aurora-referral-viz {
  position: relative;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aurora-referral-svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .aurora-referral-inner { grid-template-columns: 1fr; padding: var(--aurora-space-8); }
  .aurora-referral-viz { height: 280px; }
}

/* ============================================
   HOSTERS — 60/40 head + 5-col pills grid (Phase 3b)
   ============================================ */

.aurora-hosters {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-24) auto 0;
  padding: 0 var(--aurora-space-6);
}

.aurora-hosters-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--aurora-space-10);
  align-items: end;
  margin-bottom: var(--aurora-space-12);
}

.aurora-pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid var(--aurora-border-aurora);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-4);
}

.aurora-hosters-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.aurora-hosters-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aurora-hosters-subline {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  text-align: right;
  margin: 0;
}

.aurora-hosters-pills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--aurora-space-3);
}

.aurora-host-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--aurora-radius-md);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  transition: border-color var(--aurora-duration-fast);
}

.aurora-host-pill:hover { border-color: var(--aurora-border-aurora); }

.aurora-host-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@media (max-width: 980px) {
  .aurora-hosters-inner { grid-template-columns: 1fr; }
  .aurora-hosters-subline { text-align: left; }
  .aurora-hosters-pills { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .aurora-hosters-pills { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   GENERIC PAGE HEAD (reused by plans / extensions / content / legal)
   ============================================ */
.aurora-page-head {
  max-width: var(--aurora-container-max);
  margin: var(--aurora-space-12) auto var(--aurora-space-16);
  padding: 0 var(--aurora-space-6);
  text-align: center;
}

/* ============================================
   PLANS
   ============================================ */
.aurora-plans {
  max-width: var(--aurora-container-max);
  margin: 0 auto var(--aurora-space-20);
  padding: 0 var(--aurora-space-6);
}

.aurora-plans-head {
  text-align: center;
  margin-bottom: var(--aurora-space-12);
}

.aurora-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aurora-space-6);
  align-items: stretch;
}

.aurora-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--aurora-space-8) var(--aurora-space-6) var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring),
              border-color var(--aurora-duration-base),
              box-shadow var(--aurora-duration-base);
}

.aurora-plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--aurora-border-aurora);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.15);
}

.aurora-plan-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(20, 184, 166, 0.08));
  border-color: rgba(20, 184, 166, 0.35);
}
.aurora-plan-featured::before {
  opacity: 0.95;
  height: 1.5px;
}

.aurora-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-gradient);
  color: #0a0e27;
  font-family: 'Switzer', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
  z-index: 2;
}
.aurora-plan-badge i { font-size: 11px; }

.aurora-plan-head {
  margin-bottom: var(--aurora-space-5);
  text-align: center;
}

.aurora-plan-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--aurora-text-secondary);
}

.aurora-plan-duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-plan-renewal {
  color: var(--aurora-teal);
  font-weight: 500;
}

.aurora-plan-price {
  text-align: center;
  margin-bottom: var(--aurora-space-5);
  padding-bottom: var(--aurora-space-5);
  border-bottom: 1px solid rgba(168, 85, 247, 0.12);
}

.aurora-plan-amount {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.aurora-plan-period {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-plan-description {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--aurora-cream);
  text-align: center;
  margin-bottom: var(--aurora-space-4);
  line-height: 1.45;
}

.aurora-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--aurora-space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.aurora-plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--aurora-text-secondary);
  font-family: 'Switzer', sans-serif;
}

.aurora-plan-features li i {
  color: var(--aurora-teal);
  font-size: 12px;
  flex-shrink: 0;
}

.aurora-plan-features li.aurora-plan-bonus i { color: var(--aurora-cream); }
.aurora-plan-features li.aurora-plan-bonus { color: var(--aurora-cream); }

.aurora-plan-card .aurora-form-submit {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Status banner shown for already-subscribed / guest users (centered above grid) */
.aurora-plans-status {
  max-width: 760px;
  margin: 0 auto var(--aurora-space-12);
  padding: 0 var(--aurora-space-6);
}

@media (max-width: 1024px) {
  .aurora-plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .aurora-plans-grid { grid-template-columns: 1fr; }
  .aurora-plan-amount { font-size: 38px; }
}

/* ============================================
   EXTENSIONS PAGE
   ============================================ */

.aurora-extensions-cards {
  max-width: var(--aurora-container-max);
  margin: 0 auto var(--aurora-space-24);
  padding: 0 var(--aurora-space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--aurora-space-6);
}

.aurora-extensions-browser {
  text-align: center;
  padding: var(--aurora-space-10) var(--aurora-space-8);
}

.aurora-extensions-browser-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--aurora-space-5);
  font-size: 32px;
}

.aurora-extensions-version {
  margin: 0 auto var(--aurora-space-4);
  display: inline-flex;
}

.aurora-extensions-browser h3 {
  margin-bottom: var(--aurora-space-3);
}

.aurora-extensions-browser p {
  margin-bottom: var(--aurora-space-6);
}

.aurora-extensions-browser .aurora-form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  margin: 0 auto;
}

/* Install steps */
.aurora-install-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aurora-space-5);
}

.aurora-install-step {
  position: relative;
  padding: var(--aurora-space-8) var(--aurora-space-6) var(--aurora-space-6);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring), border-color var(--aurora-duration-base);
}

.aurora-install-step:hover {
  transform: translateY(-3px);
  border-color: var(--aurora-border-aurora);
}

.aurora-install-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
}

.aurora-install-num {
  font-family: 'Clash Display', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: var(--aurora-space-4);
}

.aurora-install-step h3 {
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  margin: 0 0 var(--aurora-space-3);
}

.aurora-install-step p {
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .aurora-extensions-cards { grid-template-columns: 1fr; }
  .aurora-install-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .aurora-install-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ARTICLE (long-form content pages)
   ============================================ */

.aurora-article {
  max-width: 880px;
  margin: var(--aurora-space-8) auto var(--aurora-space-24);
  padding: 0 var(--aurora-space-6);
}

.aurora-article-body {
  font-size: var(--aurora-fs-body);
  line-height: 1.7;
  color: var(--aurora-text-secondary);
}

.aurora-article-body h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-16) 0 var(--aurora-space-5);
  text-wrap: balance;
}

.aurora-article-body h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-10) 0 var(--aurora-space-4);
}

.aurora-article-body h4 {
  font-family: 'Switzer', sans-serif;
  font-size: calc(var(--aurora-fs-body) * 1.1);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-6) 0 var(--aurora-space-3);
}

.aurora-article-body p {
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body ul,
.aurora-article-body ol {
  padding-left: var(--aurora-space-6);
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body li {
  margin: 0 0 var(--aurora-space-2);
}

.aurora-article-body a {
  color: var(--aurora-teal);
  text-decoration: underline;
  text-decoration-color: rgba(20, 184, 166, 0.4);
  transition: text-decoration-color var(--aurora-duration-fast);
}

.aurora-article-body a:hover {
  text-decoration-color: var(--aurora-teal);
}

/* Exclude CTA buttons from generic article-body link styling
   (sinon le texte hérite du teal et devient invisible sur le gradient aurora) */
.aurora-article-body a.aurora-form-submit,
.aurora-article-body a.aurora-form-secondary,
.aurora-article-body a.btn-primary,
.aurora-article-body a.btn-secondary {
  color: #0a0e27;
  text-decoration: none;
}
.aurora-article-body a.aurora-form-secondary {
  color: var(--aurora-text-primary, #e0f2fe);
}
.aurora-article-body a.aurora-form-submit:hover,
.aurora-article-body a.aurora-form-secondary:hover {
  text-decoration: none;
}

.aurora-article-body pre,
.aurora-article-body code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-sm);
}

/* Eyebrow pill au-dessus des H2 d'article (coherence visuelle avec hero sections).
   Quand l'eyebrow est immediatement suivi d'un H2, on reset le margin-top du H2
   pour eviter un gap enorme (var(--aurora-space-16) par defaut = trop pour cette
   combinaison eyebrow + titre adjacent). */
.aurora-article-body > .aurora-pill-eyebrow {
  margin-bottom: var(--aurora-space-3);
}
.aurora-article-body > .aurora-pill-eyebrow + h2 {
  margin-top: 0;
}

/* Articles consecutifs : reduire le bottom margin de .aurora-article quand suivis
   d'un autre article pour eviter une accumulation de space-24 entre 5 sections. */
.aurora-article + .aurora-article {
  margin-top: calc(var(--aurora-space-12) * -1);
}

/* Details/summary pour FAQ — pattern utilise par uptobox/vs-debrid-link.
   Style minimal Aurora : border hairline + hover teal subtle. */
.aurora-article-body details {
  border-top: 1px solid var(--aurora-border-subtle);
  padding: var(--aurora-space-4) 0;
}
.aurora-article-body details:last-of-type {
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-article-body summary {
  cursor: pointer;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: calc(var(--aurora-fs-body) * 1.05);
  color: var(--aurora-text-primary);
  list-style: none;
  position: relative;
  padding-right: var(--aurora-space-6);
  transition: color var(--aurora-duration-fast);
}
.aurora-article-body summary::-webkit-details-marker { display: none; }
.aurora-article-body summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  color: var(--aurora-teal);
  transition: transform var(--aurora-duration-fast);
  font-weight: 400;
}
.aurora-article-body details[open] summary::after {
  content: '−';
}
.aurora-article-body summary:hover {
  color: var(--aurora-teal);
}
.aurora-article-body details p {
  margin-top: var(--aurora-space-3);
  margin-bottom: 0;
}

/* Changelog entries — timeline minimaliste, date en JetBrains Mono pour signal
   precision/datestamp, titre Clash Display, hairline subtle entre entries. */
.aurora-changelog-entry {
  padding: var(--aurora-space-6) 0;
  border-top: 1px solid var(--aurora-border-subtle);
}
.aurora-changelog-entry:first-of-type {
  border-top: none;
  padding-top: 0;
}
.aurora-changelog-date {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.1em;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-2);
}
.aurora-changelog-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-3);
  line-height: 1.2;
  text-wrap: balance;
}
.aurora-changelog-desc {
  margin: 0;
  color: var(--aurora-text-secondary);
  line-height: 1.7;
}

/* Chips d'hosters pour la section SEO home — variante compacte des aurora-host-pill */
.aurora-seo-host-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aurora-space-2);
  margin-top: var(--aurora-space-4);
}
.aurora-seo-host-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  text-decoration: none;
  transition: border-color var(--aurora-duration-fast), color var(--aurora-duration-fast);
}
.aurora-seo-host-chip:hover {
  border-color: var(--aurora-border-aurora);
  color: var(--aurora-teal);
  text-decoration: none;
}
.aurora-seo-host-chip-all {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  color: var(--aurora-teal);
  font-size: var(--aurora-fs-body-sm);
  text-decoration: none;
  font-weight: 500;
}
.aurora-seo-host-chip-all:hover {
  text-decoration: underline;
}

.aurora-article-body code {
  padding: 2px 6px;
  font-size: 0.92em;
}

.aurora-article-body pre {
  padding: var(--aurora-space-4);
  overflow-x: auto;
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body pre code {
  background: transparent;
  border: none;
  padding: 0;
}

.aurora-article-body strong {
  color: var(--aurora-text-primary);
  font-weight: 600;
}

.aurora-article-body em {
  font-style: italic;
}

.aurora-article-body blockquote {
  border-left: 2px solid var(--aurora-teal);
  padding-left: var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-5);
  color: var(--aurora-text-secondary);
  font-style: italic;
}

.aurora-article-body hr {
  border: none;
  border-top: 1px solid var(--aurora-border-subtle);
  margin: var(--aurora-space-10) 0;
}

.aurora-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--aurora-space-5);
}

.aurora-article-body th,
.aurora-article-body td {
  text-align: left;
  padding: var(--aurora-space-3) var(--aurora-space-4);
  border-bottom: 1px solid var(--aurora-border-subtle);
}

.aurora-article-body th {
  font-weight: 600;
  color: var(--aurora-text-primary);
  background: var(--aurora-bg-elevated);
}

/* Article-embedded <details>/<summary> accordion */
.aurora-article-body details {
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-4) var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-3);
  transition: border-color var(--aurora-duration-fast);
}
.aurora-article-body details[open] {
  border-color: var(--aurora-border-aurora);
}
.aurora-article-body summary {
  font-weight: 600;
  color: var(--aurora-text-primary);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.aurora-article-body summary::-webkit-details-marker { display: none; }
.aurora-article-body summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  color: var(--aurora-teal);
  transition: transform var(--aurora-duration-fast);
}
.aurora-article-body details[open] summary::after {
  content: '−';
}

/* Article-embedded form fields (fallback for raw inputs inside .aurora-article-body).
   Does NOT redefine .aurora-form-input — that signature class lives above. */
.aurora-article-body input[type="text"],
.aurora-article-body input[type="email"],
.aurora-article-body input[type="password"],
.aurora-article-body input[type="url"],
.aurora-article-body textarea,
.aurora-article-body select {
  width: 100%;
  padding: 14px var(--aurora-space-4);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  font-family: inherit;
  font-size: var(--aurora-fs-body);
  transition: border-color var(--aurora-duration-fast);
}

.aurora-article-body input:focus,
.aurora-article-body textarea:focus,
.aurora-article-body select:focus {
  outline: none;
  border-color: var(--aurora-teal);
}

.aurora-article-body textarea {
  min-height: 120px;
  resize: vertical;
}

/* Full-width submit variant for embedded forms (e.g. /support contact form) */
.aurora-form-submit-full {
  width: 100%;
  justify-content: center;
}

/* Article section title (used as standalone <h2> outside .aurora-article-body) */
.aurora-article-section-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  text-align: center;
  margin: var(--aurora-space-16) auto var(--aurora-space-6);
  max-width: 720px;
  text-wrap: balance;
}
.aurora-article-section-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================
   AUTH (login + register)
   ============================================ */

.aurora-auth-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--aurora-topbar-height) - 200px);
}

.aurora-auth {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aurora-space-10) var(--aurora-space-6);
}

.aurora-auth-card {
  width: 100%;
  max-width: 460px;
  padding: var(--aurora-space-10);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-xl);
  text-align: center;
  box-shadow: 0 30px 80px rgba(5, 6, 22, 0.45);
}

.aurora-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  margin-bottom: var(--aurora-space-6);
  color: var(--aurora-text-primary);
  text-decoration: none;
}

.aurora-auth-brand .aurora-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aurora-auth-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--aurora-text-primary);
  margin: 0 0 var(--aurora-space-2);
}

.aurora-auth-subtitle {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-muted);
  margin: 0 0 var(--aurora-space-8);
  font-style: normal;
}
.aurora-auth-subtitle em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
}

.aurora-auth-form {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.aurora-auth-form .aurora-form-label {
  margin-top: var(--aurora-space-5);
  margin-bottom: var(--aurora-space-2);
}
.aurora-auth-form .aurora-form-label:first-child {
  margin-top: 0;
}

.aurora-auth-form .aurora-form-input {
  width: 100%;
  min-width: 0;
  padding: 14px var(--aurora-space-4);
  background: var(--aurora-bg-base);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: border-color var(--aurora-duration-fast), box-shadow var(--aurora-duration-fast), background var(--aurora-duration-fast);
}

.aurora-auth-form .aurora-form-input:focus {
  outline: none;
  border-color: var(--aurora-teal);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
  background: rgba(5, 6, 22, 0.85);
}

.aurora-form-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--aurora-text-muted);
  font-family: 'Switzer', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.aurora-auth-form .aurora-form-submit-full {
  margin-top: var(--aurora-space-6);
}

.aurora-auth-meta {
  margin-top: var(--aurora-space-6);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-muted);
  line-height: 1.8;
  text-align: center;
}
.aurora-auth-meta a,
.aurora-auth-meta-link {
  color: var(--aurora-teal);
  text-decoration: none;
}
.aurora-auth-meta a:hover,
.aurora-auth-meta-link:hover {
  text-decoration: underline;
}

.aurora-form-error {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-pink);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-4);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.aurora-form-error i { margin-top: 3px; flex-shrink: 0; }
.aurora-form-error a { color: var(--aurora-teal); text-decoration: underline; }

.aurora-form-success {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--aurora-radius-md);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-teal);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-4);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.aurora-form-success i { margin-top: 3px; flex-shrink: 0; }

@media (max-width: 480px) {
  .aurora-auth-card { padding: var(--aurora-space-6); }
}

/* ============================================
   BANNED PAGE
   ============================================ */

.aurora-banned {
  min-height: calc(100vh - var(--aurora-topbar-height) - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--aurora-space-12) var(--aurora-space-6);
}

.aurora-banned-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: var(--aurora-space-10);
  background: var(--aurora-bg-elevated);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: var(--aurora-radius-xl);
}

.aurora-banned-inner .aurora-features-title {
  margin: var(--aurora-space-4) 0 var(--aurora-space-2);
}

.aurora-banned-message {
  font-size: var(--aurora-fs-lead);
  color: var(--aurora-text-secondary);
  margin: var(--aurora-space-6) 0;
  font-style: italic;
  line-height: 1.6;
}

.aurora-banned-meta-list {
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  padding: var(--aurora-space-4) var(--aurora-space-5);
  margin: 0 0 var(--aurora-space-6);
}

.aurora-banned-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--aurora-space-3) 0;
  border-bottom: 1px solid var(--aurora-border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-body-sm);
}

.aurora-banned-meta-row:last-child { border-bottom: none; }

.aurora-banned-meta-row dt {
  color: var(--aurora-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.aurora-banned-meta-row dd {
  margin: 0;
  color: var(--aurora-cream);
  font-weight: 600;
}

.aurora-banned-type-permanent { color: #ef4444; }
.aurora-banned-type-temporary { color: #f59e0b; }

.aurora-banned-contact-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: var(--aurora-text-primary);
  margin: var(--aurora-space-6) 0 var(--aurora-space-2);
  font-size: var(--aurora-fs-body);
}

.aurora-banned-contact-msg {
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  margin-bottom: var(--aurora-space-5);
}

.aurora-banned-cta {
  display: inline-flex !important;
  width: auto !important;
}

@media (max-width: 480px) {
  .aurora-banned-inner { padding: var(--aurora-space-6); }
  .aurora-banned-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aurora-space-1);
  }
}

/* ============================================
   USAGE STATUS PILL (legacy markup, aurora skin)
   Used on plans.php for guest/free/premium banners
   ============================================ */

.usage-status {
  background: rgba(20, 184, 166, 0.06) !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 10px 18px !important;
  max-width: max-content !important;
  width: auto !important;
  gap: var(--aurora-space-3) !important;
  font-family: 'Switzer', sans-serif;
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  backdrop-filter: none !important;
}

.usage-status.premium {
  background: rgba(254, 243, 199, 0.07) !important;
  border-color: rgba(254, 243, 199, 0.35) !important;
}

.subscription-time-remaining {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
  color: var(--aurora-text-primary) !important;
}
.subscription-time-remaining strong {
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: 1.1rem;
  font-weight: 700;
}

.usage-status.free {
  background: rgba(20, 184, 166, 0.08) !important;
  border-color: var(--aurora-border-aurora) !important;
}

.usage-status.guest {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.usage-status .status-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  background: transparent !important;
}

.usage-status.guest .status-icon {
  color: var(--aurora-violet) !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

/* Suspended state — freemium temporarily disabled.
   Single icon (ban) recolored aurora-pink to signal blocked action
   without going off-brand red. Text uses the same hue.
   The inline `aurora-status-suspended` class is also applied to other
   warning texts (e.g. "Limite mensuelle atteinte"). */
.usage-status.is-suspended {
  background: rgba(236, 72, 153, 0.08) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
}
.usage-status.is-suspended .status-icon {
  color: var(--aurora-pink) !important;
  background: rgba(236, 72, 153, 0.15) !important;
}
.aurora-status-suspended {
  color: var(--aurora-pink);
  font-weight: 600;
}

.usage-status.free .status-icon {
  color: var(--aurora-teal) !important;
  background: rgba(20, 184, 166, 0.15) !important;
}

.usage-status.premium .status-icon {
  color: var(--aurora-cream) !important;
  background: rgba(254, 243, 199, 0.15) !important;
}

.usage-status .status-content,
.usage-status .status-text,
.usage-status > div:not(.status-icon) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aurora-plans-status {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--aurora-space-10);
  padding: 0 var(--aurora-space-6);
}

/* ============================================
   LEGACY MARKUP OVERRIDES
   ---
   These rules neutralize legacy styles.css and
   recurring-subscriptions.css rules that bleed
   through on logged-in pages. The legacy class
   names (.btn-primary, .toggle-btn, .plan-btn,
   .recurring-badge, .points-badge-inline, etc.)
   are still in the markup because their PHP/JS
   hooks depend on them. We don't remove them —
   we restyle them aurora.

   Confirmed leaks audited 2026-05-11:
   - styles.css: .btn-primary, .toggle-btn,
     .plan-btn, .points-badge-inline,
     .points-badge, .current-points-info,
     .mode-toggle, [data-theme="arc"] variants
     (yellow #ffcc00, cream #e3dbcb)
   - recurring-subscriptions.css: .recurring-badge
     (green gradient #10b981/#059669)

   Targets pages where markup retains legacy
   classes: index.php (home plans grid + tabs +
   form submit), plans.php (status badges).
   ============================================ */

/* ---- Buttons: filled primary CTAs ---- */
/* Targets:
   - index.php "Débrider le lien/les liens/le torrent" (.aurora-form-submit.btn-primary)
   - index.php home plans grid CTA (.btn-primary.plan-btn) — no aurora class, pure legacy
   - plans.php JS-injected dialog confirm (.btn-primary.dialog-confirm)
   - auth/* CTAs (.btn-primary.auth-btn-submit) — neutralizes [data-theme="arc"] yellow */
.aurora-form-submit.btn-primary,
.btn-primary.plan-btn,
button.btn-primary,
a.btn-primary,
[data-theme="arc"] .btn-primary,
[data-theme="arc"] .btn-primary:hover {
  background: var(--aurora-gradient) !important;
  color: #0a0e27 !important;
  border: none !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  padding: 14px 26px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35) !important;
  clip-path: none !important;
  transition: transform var(--aurora-duration-fast) var(--aurora-ease-spring),
              box-shadow var(--aurora-duration-fast) var(--aurora-ease-out) !important;
}
.aurora-form-submit.btn-primary:hover,
.btn-primary.plan-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5) !important;
  color: #0a0e27 !important;
}
.aurora-form-submit.btn-primary:active,
.btn-primary.plan-btn:active,
button.btn-primary:active,
a.btn-primary:active {
  transform: translateY(-1px) !important;
}

/* Kill the arc-theme ::before/::after chevron pseudo-elements that
   would otherwise paint a black arrow strip on the left edge of any
   .btn-primary when [data-theme="arc"] is the body's persisted theme. */
[data-theme="arc"] .btn-primary::before,
[data-theme="arc"] .btn-primary::after {
  display: none !important;
  content: none !important;
}

/* Icons inside legacy primary buttons (e.g. shopping-cart on plan-btn,
   sign-in on auth buttons) — force them to inherit the new color so the
   arc-theme black/#1a1a1a leftover doesn't show through. */
.btn-primary i,
.plan-btn i {
  color: inherit !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* ---- Tabs: legacy .toggle-btn dual-classed with .aurora-tab ---- */
/* Targets index.php tabs: "Lien unique / Liens multiples / Torrent".
   Markup is <button class="toggle-btn aurora-tab active" ...>. The
   [data-theme="arc"] rules paint a cream #e3dbcb active state — we
   force aurora teal tint regardless of persisted theme. */
.aurora-tab.toggle-btn,
[data-theme="arc"] .toggle-btn {
  background: transparent !important;
  color: var(--aurora-text-secondary) !important;
  border: 1px solid transparent !important;
  border-left-width: 1px !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--aurora-radius-md) !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.aurora-tab.toggle-btn.active,
.aurora-tab.toggle-btn[aria-selected="true"],
[data-theme="arc"] .toggle-btn.active,
[data-theme="arc"] .toggle-btn[data-mode="single"].active,
[data-theme="arc"] .toggle-btn[data-mode="multiple"].active,
[data-theme="arc"] .toggle-btn[data-mode="torrent"].active {
  background: rgba(20, 184, 166, 0.15) !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  color: var(--aurora-teal) !important;
  box-shadow: none !important;
}
.aurora-tab.toggle-btn:hover:not(.active):not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--aurora-text-primary) !important;
  border-color: var(--aurora-border-subtle) !important;
}
.aurora-tab.toggle-btn.active i,
[data-theme="arc"] .toggle-btn.active i {
  color: inherit !important;
}

/* ---- Mode toggle wrapper around tabs ---- */
.mode-toggle.aurora-tabs,
.mode-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 8px !important;
}

/* ---- Recurring badge: green-yellow gradient → aurora gradient ---- */
/* Targets:
   - index.php home plans grid: <div class="recurring-badge"> (line 549)
   - auth/account.php: <span class="recurring-badge-inline">
   recurring-subscriptions.css paints linear-gradient(#10b981, #059669) +
   pulse-badge animation. We neutralize background/color, keep the icon
   rotation animation. */
.recurring-badge,
.recurring-badge-inline {
  background: var(--aurora-gradient) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 5px 14px !important;
  border-radius: var(--aurora-radius-pill) !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  animation: none !important;
}
.recurring-badge i,
.recurring-badge-inline i {
  color: inherit !important;
  /* Keep the existing rotate-icon animation defined in recurring-subscriptions.css
     — it's an icon-level animation and already aurora-compatible. */
}

/* ---- Points pill: yellow → aurora cream tint ---- */
/* Targets:
   - plans.php top-of-page status block (.points-badge-inline) — both premium
     and free branches (lines 159 & 189)
   - index.php home plans bottom (.current-points-info > .points-badge) (line 612)
   - styles.css defines .points-badge twice with #ffd700/#FFD700-#FFA500
     gradient — both targeted here. */
.points-badge-inline,
.points-badge,
.current-points-info .points-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(254, 243, 199, 0.08) !important;
  border: 1px solid rgba(254, 243, 199, 0.3) !important;
  border-radius: var(--aurora-radius-pill) !important;
  color: var(--aurora-text-primary) !important;
  padding: 8px 16px !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.points-badge-inline i,
.points-badge i,
.current-points-info .points-badge i {
  color: var(--aurora-cream) !important;
  font-size: 14px !important;
}
.points-badge-inline strong,
.points-badge strong,
.current-points-info .points-badge strong {
  color: var(--aurora-cream) !important;
  font-weight: 700 !important;
  font-size: var(--aurora-fs-body-sm) !important;
}

/* Free-status variant keeps the same aurora cream identity (was yellow
   in styles.css lines 1134-1143). */
.usage-status.free .points-badge-inline {
  background: rgba(254, 243, 199, 0.08) !important;
  border: 1px solid rgba(254, 243, 199, 0.3) !important;
}
.usage-status.free .points-badge-inline i,
.usage-status.free .points-badge-inline strong {
  color: var(--aurora-cream) !important;
}

/* ---- Plan prices (legacy gold → aurora gradient) ---- */
/* Targets the home logged-in legacy plans block (.features-container
   .plans-grid > .plan-card) where styles.css paints .price-amount
   #FFD700 / #ffd700 at multiple specificities:
   - styles.css:3212 .price-amount { color: #FFD700 }
   - styles.css:3449 .subscription-plan-card .price-amount { color: #ffd700 }
   - styles.css:3585 .features-container .plan-card .price-amount { color: #ffd700 }
   We force aurora-gradient text fill at every specificity tier including
   the persisted [data-theme="arc"] body variant. Also retypeset period. */
.plan-price,
.price-amount,
.plan-card .price,
.plan-card .price-value,
.subscription-plan-price,
[data-theme="arc"] .plan-price,
[data-theme="arc"] .price-amount {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: 'Clash Display', sans-serif !important;
  font-weight: 800 !important;
  font-size: 44px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

.plan-price-period,
.price-period,
.plan-card .period {
  color: var(--aurora-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

/* ---- Compte Gratuit / Compte Premium status pill ---- */
/* Targets index.php usage-status-container > .usage-status.{free,premium,guest}.
   The legacy .status-info / .status-label / .status-detail structure
   stacks awkwardly (bold "Compte Gratuit" + lightweight "Restant ce
   mois : 1"). We re-typeset to: mono uppercase eyebrow + Switzer body,
   wrapped in a tight inline-flex pill. Per-variant label color shift
   keeps the status semantic (teal=free, violet=guest, cream=premium). */
.usage-status .status-info {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
}
.usage-status .status-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--aurora-teal) !important;
  font-weight: 600 !important;
}
.usage-status.guest .status-label { color: var(--aurora-violet) !important; }
.usage-status.premium .status-label { color: var(--aurora-cream) !important; }
.usage-status .status-detail {
  font-family: 'Switzer', sans-serif !important;
  font-size: 13px !important;
  color: var(--aurora-text-secondary) !important;
  font-weight: 400 !important;
}
.usage-status .status-detail strong {
  color: var(--aurora-text-primary) !important;
  font-weight: 600 !important;
}

/* Re-tighten the pill itself: flex row, single line height */
.usage-status {
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  max-width: max-content !important;
}
.usage-status .status-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  flex-shrink: 0;
}

/* ---- Glass card wrapper (legacy gray box) ---- */
/* The legacy .glass-card wraps the logged-in plans block on home + plans page.
   We strip its background/border so the inner aurora components render flush
   on the aurora atmosphere, not inside a gray rectangle. */
.glass-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--aurora-space-8) 0 !important;
  margin-bottom: 0 !important;
}
.glass-card:hover {
  border-color: transparent !important;
}
.glass-card::before,
.glass-card::after {
  display: none !important;
}

/* ---- Legacy "Devenez Premium !" heading inside .glass-card ---- */
.glass-card .features-header,
.glass-card .plans-header {
  text-align: center !important;
  margin-bottom: var(--aurora-space-10) !important;
}
.glass-card .features-header h2,
.glass-card .plans-header h2,
.glass-card h2.features-title {
  font-family: 'Clash Display', sans-serif !important;
  font-size: var(--aurora-fs-h2) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--aurora-text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--aurora-text-primary) !important;
  text-shadow: none !important;
  margin: 0 0 var(--aurora-space-3) !important;
}
.glass-card .features-header h2 .fa-gem,
.glass-card .plans-header h2 .fa-gem {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.glass-card .features-header p,
.glass-card .plans-header p,
.glass-card .features-subtitle {
  font-family: 'Tobias', 'Switzer', serif !important;
  font-style: italic !important;
  font-size: var(--aurora-fs-lead) !important;
  color: var(--aurora-text-secondary) !important;
  margin: 0 !important;
}

/* ---- Bottom "Points actuels XX" pill ---- */
/* Targets index.php:612 .current-points-info wrapping a .points-badge.
   styles.css:3660 gives it a top-divider layout; we promote the wrapper
   itself to a compact aurora cream pill so it reads as a single chip
   instead of a fragmented bordered block. The inner .points-badge is
   already overridden above — these rules govern the outer wrapper. */
.current-points-info {
  background: rgba(254, 243, 199, 0.06) !important;
  border: 1px solid rgba(254, 243, 199, 0.25) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 8px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--aurora-text-secondary) !important;
  max-width: max-content !important;
  margin: var(--aurora-space-8) auto 0 !important;
  border-top: none !important;
}
.current-points-info i {
  color: var(--aurora-cream) !important;
}
.current-points-info strong {
  color: var(--aurora-cream) !important;
  font-weight: 700 !important;
}
.current-points-info::before,
.current-points-info::after {
  content: none !important;
}

/* Hide redundant "current-points-label" text if any — keep just icon + number */
.current-points-info .points-amount,
.current-points-info > span {
  color: inherit !important;
}

/* ============================================================
   ACCOUNT PAGE (auth/account.php) — aurora dashboard
   ============================================================ */

.aurora-account-main {
  max-width: var(--aurora-container-max);
  margin: 0 auto;
  padding: var(--aurora-space-8) var(--aurora-space-6);
}

.aurora-account-hero {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-5);
  padding: var(--aurora-space-8);
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(168,85,247,0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  margin-bottom: var(--aurora-space-8);
}
.aurora-account-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  display: block;
  margin-bottom: var(--aurora-space-2);
}
.aurora-account-hero-title {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--aurora-space-2);
  color: var(--aurora-text-primary);
}
.aurora-account-hero-title em {
  font-family: 'Tobias', 'Switzer', serif;
  font-style: italic;
  font-weight: 500;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aurora-account-hero-sub {
  font-size: var(--aurora-fs-body);
  color: var(--aurora-text-secondary);
  margin: 0;
}
@media (max-width: 640px) {
  .aurora-account-hero { flex-direction: column; text-align: center; }
}

.aurora-account-section {
  margin-bottom: var(--aurora-space-8);
  padding: var(--aurora-space-8);
  background: var(--aurora-bg-elevated);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
}

.aurora-account-section-title {
  font-family: 'Clash Display', sans-serif;
  font-size: var(--aurora-fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--aurora-space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-3);
  color: var(--aurora-text-primary);
}
.aurora-account-section-title i { color: var(--aurora-teal); font-size: 18px; }
.aurora-account-section-sub {
  margin-top: var(--aurora-space-8);
}

.aurora-account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aurora-space-4);
}
@media (max-width: 980px) { .aurora-account-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .aurora-account-grid { grid-template-columns: 1fr; } }

.aurora-account-info-card {
  padding: var(--aurora-space-4) var(--aurora-space-5);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aurora-account-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aurora-account-info-label i { color: var(--aurora-teal); }
.aurora-account-info-value {
  font-size: var(--aurora-fs-body);
  font-weight: 600;
  color: var(--aurora-text-primary);
  word-break: break-word;
}
.aurora-account-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--aurora-radius-pill);
  font-size: 13px;
  width: max-content;
  font-weight: 600;
}
.aurora-account-badge-active   { background: rgba(20,184,166,0.12); color: var(--aurora-teal); }
.aurora-account-badge-free     { background: rgba(168,85,247,0.12); color: var(--aurora-violet); }
.aurora-account-badge-expired,
.aurora-account-badge-cancelled { background: rgba(236,72,153,0.12); color: var(--aurora-pink); }
.aurora-account-badge-pending  { background: rgba(254,243,199,0.10); color: var(--aurora-cream); }
.aurora-account-points {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--aurora-radius-pill);
  background: rgba(254,243,199,0.10);
  color: var(--aurora-cream);
  font-weight: 700;
  width: max-content;
}

.aurora-account-referral {
  text-align: center;
  padding: var(--aurora-space-6);
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(168,85,247,0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  margin-bottom: var(--aurora-space-4);
}
.aurora-account-referral-icon {
  font-size: 32px;
  color: var(--aurora-violet);
  margin-bottom: var(--aurora-space-3);
  display: block;
}
.aurora-account-referral p { margin: 0 0 var(--aurora-space-5); color: var(--aurora-text-secondary); }
.aurora-account-referral strong { color: var(--aurora-cream); }

.aurora-account-upgrade,
.aurora-account-cta-row {
  text-align: center;
  margin-top: var(--aurora-space-5);
}

.aurora-account-form {
  max-width: 480px;
  display: flex;
  flex-direction: column;
}

/* Password section — 2-col grid on desktop : form left, security tips right.
   Stacks on tablet / mobile so the form stays full-width. */
.aurora-account-password-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--aurora-space-10);
  align-items: start;
}
.aurora-account-password-grid .aurora-account-form {
  max-width: none;
}

.aurora-account-password-tips {
  background: linear-gradient(160deg, rgba(20, 184, 166, 0.06), rgba(168, 85, 247, 0.06));
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-lg);
  padding: var(--aurora-space-6);
  position: relative;
  overflow: hidden;
}
.aurora-account-password-tips::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--aurora-space-5);
  right: var(--aurora-space-5);
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.6;
}

.aurora-account-password-tips-head {
  display: inline-flex;
  align-items: center;
  gap: var(--aurora-space-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aurora-teal);
  margin-bottom: var(--aurora-space-4);
}
.aurora-account-password-tips-head .aurora-icon {
  color: var(--aurora-teal);
}

.aurora-account-password-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aurora-space-3);
}
.aurora-account-password-tips-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--aurora-space-3);
  font-size: var(--aurora-fs-body-sm);
  color: var(--aurora-text-secondary);
  line-height: 1.55;
}
.aurora-account-password-tips-list li .aurora-icon {
  color: var(--aurora-teal);
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .aurora-account-password-grid {
    grid-template-columns: 1fr;
    gap: var(--aurora-space-6);
  }
}
.aurora-account-form .aurora-form-label {
  margin-top: var(--aurora-space-5);
  margin-bottom: var(--aurora-space-2);
}
.aurora-account-form .aurora-form-label:first-of-type { margin-top: 0; }
.aurora-form-hint {
  font-size: 12px;
  color: var(--aurora-text-muted);
  margin: 4px 0 0;
  font-family: 'JetBrains Mono', monospace;
}

.aurora-account-danger {
  border-color: rgba(236,72,153,0.25);
}
.aurora-account-danger-title { color: var(--aurora-pink); }
.aurora-account-danger-title i { color: var(--aurora-pink); }
.aurora-account-danger p { color: var(--aurora-text-secondary); margin: 0 0 var(--aurora-space-5); }
.aurora-account-danger-block {
  display: flex;
  align-items: center;
  gap: var(--aurora-space-3);
  padding: var(--aurora-space-4);
  background: rgba(236,72,153,0.08);
  border: 1px solid rgba(236,72,153,0.25);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-secondary);
}
.aurora-account-danger-block i { color: var(--aurora-pink); font-size: 18px; }

.aurora-form-submit-danger {
  background: rgba(236,72,153,0.12) !important;
  color: var(--aurora-pink) !important;
  border: 1px solid rgba(236,72,153,0.4) !important;
  box-shadow: none !important;
}
.aurora-form-submit-danger::after { display: none !important; }
.aurora-form-submit-danger:hover {
  background: rgba(236,72,153,0.2) !important;
  box-shadow: 0 6px 18px rgba(236,72,153,0.25) !important;
}

.aurora-form-submit-ghost {
  background: transparent !important;
  color: var(--aurora-violet) !important;
  border: 1px solid rgba(168,85,247,0.4) !important;
  box-shadow: none !important;
}
.aurora-form-submit-ghost::after { display: none !important; }
.aurora-form-submit-ghost:hover {
  background: rgba(168,85,247,0.1) !important;
  color: var(--aurora-violet) !important;
}

.aurora-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aurora-space-5);
}
@media (max-width: 640px) { .aurora-account-stats { grid-template-columns: 1fr; } }

.aurora-account-stat {
  padding: var(--aurora-space-6);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aurora-space-2);
  text-align: center;
}
.aurora-account-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: var(--aurora-space-2);
}
.aurora-tint-cream { background: rgba(254,243,199,0.15); color: var(--aurora-cream); }
.aurora-account-stat-value {
  font-family: 'Clash Display', sans-serif;
  font-size: 36px;
  font-weight: 800;
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.aurora-account-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
}

.aurora-account-history { min-height: 60px; color: var(--aurora-text-secondary); }
.aurora-account-history .loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aurora-space-3);
  padding: var(--aurora-space-6);
  color: var(--aurora-text-muted);
}
.aurora-account-history .no-history,
.aurora-account-history .error-message {
  text-align: center;
  padding: var(--aurora-space-4);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-secondary);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  margin: 0;
}
.aurora-account-history .error-message {
  background: rgba(236,72,153,0.08);
  border-color: rgba(236,72,153,0.25);
  color: var(--aurora-pink);
}
.aurora-account-history .payment-history-table {
  overflow-x: auto;
  border-radius: var(--aurora-radius-md);
  border: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--aurora-fs-body-sm);
}
.aurora-account-history .payment-history-table th {
  background: var(--aurora-bg-card);
  padding: var(--aurora-space-3) var(--aurora-space-4);
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-text-muted);
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table td {
  padding: var(--aurora-space-3) var(--aurora-space-4);
  color: var(--aurora-text-primary);
  border-bottom: 1px solid var(--aurora-border-subtle);
}
.aurora-account-history .payment-history-table tr:last-child td { border-bottom: none; }
.aurora-account-history .payment-history-table code.transaction-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--aurora-text-muted);
}

/* Modal de suppression — couches aurora light overrides */
#deleteAccountModal { backdrop-filter: blur(8px); }
#deleteAccountModal > div {
  background: var(--aurora-bg-elevated) !important;
  border-color: rgba(236,72,153,0.4) !important;
  border-radius: var(--aurora-radius-lg) !important;
}
#deleteAccountConfirmInput {
  font-family: 'JetBrains Mono', monospace !important;
  background: var(--aurora-bg-card) !important;
  color: var(--aurora-text-primary) !important;
  border-color: rgba(236,72,153,0.4) !important;
}

/* ============================================
   AURORA LIGHT THEME
   Toggle: body[data-theme="arc"]
   Activated by the sun/moon button in the topbar.
   Selector base is body[data-theme="arc"] because script.js / inline
   header.php toggle sets data-theme on document.body.
   ============================================ */
body[data-theme="arc"] {
  /* Backgrounds — inverted */
  --aurora-bg-base: #f5f7fb;
  --aurora-bg-elevated: #ffffff;
  --aurora-bg-card: #f1f4fa;
  --aurora-bg-card-hover: #e8edf6;

  /* Aurora signature — slightly desaturated for light bg */
  --aurora-teal: #0d9488;
  --aurora-violet: #7c3aed;
  --aurora-pink: #db2777;
  --aurora-cream: #b45309;

  /* Text — inverted */
  --aurora-text-primary: #0a0e27;
  --aurora-text-secondary: rgba(10, 14, 39, 0.75);
  --aurora-text-muted: rgba(10, 14, 39, 0.55);
  --aurora-text-faint: rgba(10, 14, 39, 0.35);

  /* Borders — darker hairlines on light */
  --aurora-border-subtle: rgba(10, 14, 39, 0.08);
  --aurora-border-aurora: rgba(13, 148, 136, 0.3);
  --aurora-border-hover: rgba(13, 148, 136, 0.5);

  /* Composite gradients — adjusted for light */
  --aurora-gradient: linear-gradient(135deg, #0d9488 0%, #7c3aed 50%, #db2777 100%);
  --aurora-gradient-soft: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(124, 58, 237, 0.1), rgba(219, 39, 119, 0.1));
  --aurora-gradient-text: linear-gradient(135deg, #0a0e27 0%, #0d9488 30%, #7c3aed 65%, #db2777 100%);
}

/* Selection — readable on light */
body[data-theme="arc"] ::selection {
  background: rgba(13, 148, 136, 0.25);
  color: var(--aurora-text-primary);
}

/* Atmosphere: stars become invisible on white; bands need lower opacity */
body[data-theme="arc"] .aurora-band {
  opacity: 0.25;
  mix-blend-mode: multiply;
}

body[data-theme="arc"] .aurora-starfield {
  display: none;
}

/* Topbar — translucent white instead of translucent deep-space */
body[data-theme="arc"] .aurora-topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-language-trigger,
body[data-theme="arc"] .aurora-toggle-track {
  background: rgba(10, 14, 39, 0.04) !important;
  color: var(--aurora-text-secondary) !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}

body[data-theme="arc"] .aurora-nav-link {
  color: var(--aurora-text-secondary);
}

body[data-theme="arc"] .aurora-nav-link:hover {
  background: rgba(13, 148, 136, 0.08) !important;
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-nav-link.is-active {
  background: rgba(13, 148, 136, 0.12) !important;
  color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-nav-cta {
  background: var(--aurora-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* Language dropdown menu — light surface */
body[data-theme="arc"] .aurora-language-menu {
  background: #fff;
  border-color: rgba(13, 148, 136, 0.3);
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.12);
}

body[data-theme="arc"] .aurora-language-menu li:hover,
body[data-theme="arc"] .aurora-language-menu li:focus,
body[data-theme="arc"] .aurora-language-menu li.is-focused {
  background: rgba(13, 148, 136, 0.08);
  color: var(--aurora-text-primary);
}

body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"] {
  background: rgba(13, 148, 136, 0.15);
  color: var(--aurora-teal);
}

body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"].is-focused,
body[data-theme="arc"] .aurora-language-menu li[aria-selected="true"]:hover {
  background: rgba(13, 148, 136, 0.22);
}

/* Console — flip the hard-coded dark gradient to a light surface */
body[data-theme="arc"] .aurora-console {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 251, 0.96));
  border-color: rgba(10, 14, 39, 0.1);
  box-shadow:
    0 20px 60px rgba(10, 14, 39, 0.1),
    0 0 0 1px rgba(13, 148, 136, 0.05),
    0 -1px 0 rgba(124, 58, 237, 0.18) inset;
}

body[data-theme="arc"] .aurora-console-bar {
  background: rgba(10, 14, 39, 0.02);
  border-bottom-color: rgba(124, 58, 237, 0.12);
}

/* Console tabs — light surface */
body[data-theme="arc"] .aurora-tabs {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-tab.active,
body[data-theme="arc"] .aurora-tab.is-active {
  background: rgba(13, 148, 136, 0.12);
  color: var(--aurora-teal);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.25), 0 4px 16px rgba(13, 148, 136, 0.12);
}

/* Form inputs — white surface, dark text */
body[data-theme="arc"] .aurora-form-input,
body[data-theme="arc"] .aurora-form-textarea {
  background: #fff !important;
  border-color: rgba(10, 14, 39, 0.15) !important;
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-form-input:focus,
body[data-theme="arc"] .aurora-form-textarea:focus {
  background: #fff !important;
  border-color: var(--aurora-teal) !important;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15), 0 0 28px rgba(13, 148, 136, 0.12) !important;
}

body[data-theme="arc"] .aurora-form-input::placeholder,
body[data-theme="arc"] .aurora-form-textarea::placeholder {
  color: rgba(10, 14, 39, 0.4) !important;
}

body[data-theme="arc"] .aurora-form-secondary {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.1);
  color: var(--aurora-text-secondary);
}

body[data-theme="arc"] .aurora-form-secondary:hover {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.3);
  color: var(--aurora-teal);
}

/* Auth card shadow — softer on light */
body[data-theme="arc"] .aurora-auth-card {
  box-shadow: 0 30px 80px rgba(10, 14, 39, 0.1);
}

body[data-theme="arc"] .aurora-auth-form .aurora-form-input:focus {
  background: #fff;
}

/* Feature cards — soft surface, soft hover shadow */
body[data-theme="arc"] .aurora-feature {
  background: var(--aurora-bg-elevated);
  border-color: var(--aurora-border-subtle);
}

body[data-theme="arc"] .aurora-feature:hover {
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-feature-featured {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(124, 58, 237, 0.06));
}

/* Tint chips — keep accent but lift opacity for legibility on white */
body[data-theme="arc"] .aurora-tint-teal   { background: rgba(13, 148, 136, 0.12); color: var(--aurora-teal); }
body[data-theme="arc"] .aurora-tint-violet { background: rgba(124, 58, 237, 0.12); color: var(--aurora-violet); }
body[data-theme="arc"] .aurora-tint-pink   { background: rgba(219, 39, 119, 0.12); color: var(--aurora-pink); }

/* Footer + marquee — soft borders, fade gradients keyed to bg-base var */
body[data-theme="arc"] .aurora-footer {
  background: transparent;
  border-top-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-marquee {
  border-top-color: rgba(10, 14, 39, 0.08);
  border-bottom-color: rgba(10, 14, 39, 0.08);
}

body[data-theme="arc"] .aurora-marquee::before {
  background: linear-gradient(90deg, var(--aurora-bg-base), transparent);
}

body[data-theme="arc"] .aurora-marquee::after {
  background: linear-gradient(270deg, var(--aurora-bg-base), transparent);
}

/* Hero eyebrow — keep teal accent but lighter background */
body[data-theme="arc"] .aurora-eyebrow {
  background: rgba(13, 148, 136, 0.08);
}

/* New pill theme toggle — light-theme adjustments */
body[data-theme="arc"] .aurora-theme-toggle-track {
  background: rgba(10, 14, 39, 0.04);
  border-color: rgba(10, 14, 39, 0.1);
}

body[data-theme="arc"] .aurora-theme-toggle-track:hover {
  border-color: var(--aurora-border-aurora);
}

/* ============================================
   PLAN CARDS — light theme visibility fix
   Legacy .plan-card / .subscription-plan-card / .features-container .plan-card
   use rgba(255,255,255,0.08-0.12) backgrounds + backdrop-filter that disappear
   on the cream Arc background. The legacy yellow-tinted hover box-shadow
   (0 15px 40px rgba(255,215,0,0.3)) creates a halo glow.
   This block neutralizes both in light mode.
   ============================================ */
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .subscription-plan-card,
body[data-theme="arc"] .features-container .plan-card {
  background: var(--aurora-bg-elevated) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  box-shadow: 0 4px 16px rgba(10, 14, 39, 0.06) !important;
}

body[data-theme="arc"] .aurora-plan-card:hover,
body[data-theme="arc"] .plan-card:hover,
body[data-theme="arc"] .subscription-plan-card:hover,
body[data-theme="arc"] .features-container .plan-card:hover {
  background: var(--aurora-bg-elevated) !important;
  border-color: var(--aurora-border-aurora) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.12) !important;
}

body[data-theme="arc"] .aurora-plan-featured,
body[data-theme="arc"] .plan-card.featured,
body[data-theme="arc"] .plan-card.recurring,
body[data-theme="arc"] .subscription-plan-card.featured,
body[data-theme="arc"] .subscription-plan-card.recurring {
  background: linear-gradient(135deg, var(--aurora-bg-elevated), rgba(13, 148, 136, 0.04)) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
}

/* Kill any legacy yellow halo / pseudo-element decorations on plan cards in light mode */
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .subscription-plan-card {
  filter: none !important;
}
body[data-theme="arc"] .plan-card::before,
body[data-theme="arc"] .plan-card::after,
body[data-theme="arc"] .subscription-plan-card::before,
body[data-theme="arc"] .subscription-plan-card::after {
  display: none !important;
}

/* Ensure text inside plan cards is dark and readable in light mode */
body[data-theme="arc"] .aurora-plan-card,
body[data-theme="arc"] .plan-card,
body[data-theme="arc"] .subscription-plan-card,
body[data-theme="arc"] .aurora-plan-card *:not(.aurora-plan-amount):not(.aurora-plan-badge),
body[data-theme="arc"] .plan-card .plan-name,
body[data-theme="arc"] .plan-card .plan-description,
body[data-theme="arc"] .plan-card .plan-features li,
body[data-theme="arc"] .plan-card .plan-features .feature,
body[data-theme="arc"] .plan-card .price-period,
body[data-theme="arc"] .subscription-plan-card .plan-name,
body[data-theme="arc"] .subscription-plan-card .plan-description,
body[data-theme="arc"] .subscription-plan-card .plan-features .feature-item,
body[data-theme="arc"] .subscription-plan-card .plan-features li,
body[data-theme="arc"] .subscription-plan-card .price-period,
body[data-theme="arc"] .features-container .plan-card .plan-name,
body[data-theme="arc"] .features-container .plan-card .plan-description,
body[data-theme="arc"] .features-container .plan-card .plan-features .feature,
body[data-theme="arc"] .features-container .plan-card .price-period {
  color: var(--aurora-text-primary) !important;
}

/* Keep the price amount in the aurora gradient (already styled, but ensure it survives !important text-color above) */
body[data-theme="arc"] .plan-card .price-amount,
body[data-theme="arc"] .subscription-plan-card .price-amount,
body[data-theme="arc"] .features-container .plan-card .price-amount,
body[data-theme="arc"] .aurora-plan-amount {
  background: var(--aurora-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ============================================
   AURORA SVG ICONS
   ============================================ */

.aurora-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.aurora-icon-large { width: 24px; height: 24px; }
.aurora-icon-xl { width: 32px; height: 32px; }

/* In contexts where FA icons had specific tinting, make SVG icons inherit */
.aurora-feature-icon .aurora-icon { width: 20px; height: 20px; }
.aurora-feature-featured .aurora-feature-icon .aurora-icon { width: 24px; height: 24px; }
.aurora-extensions-browser-icon .aurora-icon { width: 32px; height: 32px; }
.aurora-account-stat-icon .aurora-icon { width: 18px; height: 18px; }

/* Spinning utility (matches Font Awesome fa-spin behavior for inline spinners) */
.aurora-icon.fa-spin,
.aurora-icon.spin {
  animation: aurora-icon-spin 1s linear infinite;
}
@keyframes aurora-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   LIGHT THEME COHERENCE SWEEP
   Visibility fixes for body[data-theme="arc"]:
     1. Hero globe — warmer halo + bumped stroke contrast on light bg
     2. Plan duration pills (.plan-duration, .aurora-plan-duration, etc.)
     3. "Abonnement Mensuel" duration wrap fix (single line w/ separator)
     4. Legacy yellow (#ffd700) badges / halos neutralized to aurora teal
     5. White-on-white surfaces lifted to readable cards
   ============================================ */

/* --- 1. Hero globe — boost halo + stroke contrast on cream bg --- */
body[data-theme="arc"] .aurora-hero-globe {
  filter:
    drop-shadow(0 0 60px rgba(124, 58, 237, 0.45))
    drop-shadow(0 0 20px rgba(13, 148, 136, 0.2));
  opacity: 0.92;
}

/* Boost wireframe stroke opacity so latitude/longitude ellipses read on white.
   We can't change the gradient hexes (they come from the SVG defs) but we can
   raise stroke-opacity on every wireframe element. The gradient stops include
   teal/violet/pink which already contrast against cream — just need them denser. */
body[data-theme="arc"] .aurora-hero-globe > g > circle,
body[data-theme="arc"] .aurora-hero-globe > g > ellipse,
body[data-theme="arc"] .aurora-hero-globe > g > line {
  stroke-opacity: 1 !important;
  stroke-width: 1.6;
}
body[data-theme="arc"] .aurora-hero-globe > g[stroke] path {
  stroke-opacity: 1 !important;
}

/* --- 2. Plan duration pills — legible on light bg ---
   Targets: .plan-duration (legacy index.php), .aurora-plan-duration (plans.php),
   .subscription-plan-card .plan-duration, .features-container .plan-card .plan-duration.
   Original styles use color: #FFD700 (legacy) or rgba(255,255,255,0.7) (white) which
   vanish on cream. Force a tinted aurora pill. */
body[data-theme="arc"] .plan-duration,
body[data-theme="arc"] .aurora-plan-duration,
body[data-theme="arc"] .subscription-plan-card .plan-duration,
body[data-theme="arc"] .features-container .plan-card .plan-duration {
  background: rgba(13, 148, 136, 0.1) !important;
  color: var(--aurora-text-secondary) !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
  border-radius: var(--aurora-radius-pill) !important;
  padding: 4px 14px !important;
}

/* --- 3. "Abonnement Mensuel" / recurring plan: single-line duration with separator.
   Legacy .plan-duration uses flex-direction: column which stacks "30 jours" and
   "Renouvellement auto" vertically. Force them inline on a single readable row.
   The renewal text already starts with " - " in the markup so the rendered output
   becomes "30 jours - Renouvellement auto". */
body[data-theme="arc"] .plan-card .plan-duration {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 6px;
  min-height: 0 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body[data-theme="arc"] .plan-card .plan-duration .renewal-info {
  white-space: nowrap;
}

/* Also normalize the aurora-plan-duration block on plans.php (the recurring one
   has both "X jours" and "Renouvellement auto" spans). Keep them inline. */
body[data-theme="arc"] .aurora-plan-duration .aurora-plan-renewal {
  white-space: nowrap;
}

/* --- 4. Legacy yellow (#ffd700) accents — re-tinted to aurora cream/teal ---
   These currently glow visibly even on light bg (since #ffd700 is a saturated
   color, not transparent white). User asked to kill the yellow halo aesthetic. */
body[data-theme="arc"] .usage-status.premium {
  background: rgba(180, 83, 9, 0.1) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}
body[data-theme="arc"] .usage-status.premium .status-icon,
body[data-theme="arc"] .points-badge-inline i,
body[data-theme="arc"] .points-badge-inline strong,
body[data-theme="arc"] .points-info strong,
body[data-theme="arc"] .points-badge i,
body[data-theme="arc"] .subscription-plan-card .plan-features .bonus-feature i,
body[data-theme="arc"] .plan-card .feature.bonus-feature i {
  color: var(--aurora-cream) !important;
}
body[data-theme="arc"] .subscription-time-remaining,
body[data-theme="arc"] .points-badge-inline,
body[data-theme="arc"] .usage-status.free .points-badge-inline,
body[data-theme="arc"] .points-info,
body[data-theme="arc"] .points-badge {
  background: rgba(180, 83, 9, 0.08) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .points-plan,
body[data-theme="arc"] .subscription-plan-card.plan-points,
body[data-theme="arc"] .plan-card.plan-points {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.06), rgba(13, 148, 136, 0.04)) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}
body[data-theme="arc"] .subscription-plan-card.plan-points:hover,
body[data-theme="arc"] .plan-card.plan-points:hover {
  border-color: rgba(13, 148, 136, 0.4) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.1) !important;
}
/* Yellow hover halo on plain plan cards (.features-container .plan-card:hover)
   becomes a soft aurora teal glow. */
body[data-theme="arc"] .features-container .plan-card:hover {
  background: var(--aurora-bg-elevated) !important;
  box-shadow: 0 18px 40px rgba(13, 148, 136, 0.1) !important;
}

/* --- 5. White-translucent surfaces — lift to readable cards in light mode ---
   These rgba(255,255,255,0.x) backgrounds become invisible on white. */
body[data-theme="arc"] .features-container .plan-card,
body[data-theme="arc"] .subscription-plan-card {
  background: var(--aurora-bg-elevated) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}
body[data-theme="arc"] .features-container .plan-card .plan-name,
body[data-theme="arc"] .subscription-plan-card .plan-name {
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .status-icon {
  background: rgba(10, 14, 39, 0.04) !important;
  color: var(--aurora-text-secondary) !important;
}
body[data-theme="arc"] .subscription-time-remaining {
  color: var(--aurora-text-primary) !important;
}

/* ============================================
   TOAST NOTIFICATIONS (aurora skin over legacy .notification-container)
   ============================================ */

.notification-container {
  background: var(--aurora-bg-elevated) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-md) !important;
  padding: 14px 18px !important;
  box-shadow: 0 18px 40px rgba(5, 6, 22, 0.5) !important;
  color: var(--aurora-text-primary) !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 420px !important;
  min-width: 280px !important;
  position: fixed !important;
  top: 84px !important;
  right: 24px !important;
  z-index: 9999 !important;
  transform: translateX(120%) !important;
  transition: transform var(--aurora-duration-base) var(--aurora-ease-spring) !important;
}

.notification-container.show {
  transform: translateX(0) !important;
}

.notification-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--aurora-gradient);
  border-radius: var(--aurora-radius-md) var(--aurora-radius-md) 0 0;
}

/* Per-type accent — colored left border indicator */
.notification-container.success {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-teal) !important;
}
.notification-container.success::before {
  background: var(--aurora-teal);
}
.notification-container.success .notification-icon {
  color: var(--aurora-teal) !important;
  background: rgba(20, 184, 166, 0.15) !important;
}

.notification-container.error {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-pink) !important;
}
.notification-container.error::before {
  background: var(--aurora-pink);
}
.notification-container.error .notification-icon {
  color: var(--aurora-pink) !important;
  background: rgba(236, 72, 153, 0.15) !important;
}

.notification-container.warning {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-cream) !important;
}
.notification-container.warning::before {
  background: var(--aurora-cream);
}
.notification-container.warning .notification-icon {
  color: var(--aurora-cream) !important;
  background: rgba(254, 243, 199, 0.15) !important;
}

.notification-container.info {
  background: var(--aurora-bg-elevated) !important;
  border-left: 3px solid var(--aurora-violet) !important;
}
.notification-container.info::before {
  background: var(--aurora-violet);
}
.notification-container.info .notification-icon {
  color: var(--aurora-violet) !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

.notification-container .notification-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--aurora-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
}

.notification-container .notification-message {
  flex: 1 !important;
  color: var(--aurora-text-primary) !important;
}

.notification-container .notification-message p,
.notification-container .notification-message strong,
.notification-container .notification-message span {
  color: inherit !important;
  margin: 0 !important;
  font-family: 'Switzer', sans-serif !important;
  font-size: var(--aurora-fs-body-sm) !important;
}

.notification-container .notification-close {
  background: transparent !important;
  border: none !important;
  color: var(--aurora-text-muted) !important;
  cursor: pointer !important;
  padding: 4px !important;
  font-size: 14px !important;
  transition: color var(--aurora-duration-fast) !important;
}
.notification-container .notification-close:hover {
  color: var(--aurora-text-primary) !important;
}

/* Light theme adjustments */
body[data-theme="arc"] .notification-container {
  background: #ffffff !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  box-shadow: 0 18px 40px rgba(10, 14, 39, 0.15) !important;
}
body[data-theme="arc"] .notification-container .notification-message {
  color: var(--aurora-text-primary) !important;
}
body[data-theme="arc"] .notification-container.success .notification-icon { background: rgba(13, 148, 136, 0.12) !important; color: #0d9488 !important; }
body[data-theme="arc"] .notification-container.error .notification-icon { background: rgba(219, 39, 119, 0.12) !important; color: #db2777 !important; }
body[data-theme="arc"] .notification-container.warning .notification-icon { background: rgba(180, 83, 9, 0.12) !important; color: #b45309 !important; }
body[data-theme="arc"] .notification-container.info .notification-icon { background: rgba(124, 58, 237, 0.12) !important; color: #7c3aed !important; }

/* Mobile responsive */
@media (max-width: 640px) {
  .notification-container {
    top: auto !important;
    bottom: 20px !important;
    right: 16px !important;
    left: 16px !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ============================================
   REFERRAL PAGE
   ============================================ */

.aurora-referral-link-row {
  display: flex;
  gap: var(--aurora-space-3);
  align-items: stretch;
  margin-bottom: var(--aurora-space-3);
}

.aurora-referral-link-input {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--aurora-fs-body-sm);
  background: var(--aurora-bg-card) !important;
  color: var(--aurora-text-secondary) !important;
}

.aurora-account-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--aurora-radius-md);
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: var(--aurora-text-secondary);
  font-size: var(--aurora-fs-body-sm);
  margin: 0;
}
.aurora-account-hint .aurora-icon {
  color: var(--aurora-violet);
  flex-shrink: 0;
}

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

.aurora-referral-list-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--aurora-space-4);
  align-items: center;
  padding: var(--aurora-space-4);
  background: var(--aurora-bg-card);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
}

.aurora-referral-list-name {
  font-weight: 600;
  color: var(--aurora-text-primary);
}

.aurora-referral-list-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--aurora-text-muted);
  letter-spacing: 0.08em;
}

.aurora-referral-list-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--aurora-radius-pill);
  white-space: nowrap;
}
.aurora-referral-list-status-pending {
  background: rgba(254, 243, 199, 0.1);
  color: var(--aurora-cream);
  border: 1px solid rgba(254, 243, 199, 0.25);
}
.aurora-referral-list-status-converted {
  background: rgba(168, 85, 247, 0.1);
  color: var(--aurora-violet);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.aurora-referral-list-status-rewarded {
  background: rgba(20, 184, 166, 0.1);
  color: var(--aurora-teal);
  border: 1px solid rgba(20, 184, 166, 0.25);
}

@media (max-width: 640px) {
  .aurora-referral-link-row { flex-direction: column; }
  .aurora-referral-list-item { grid-template-columns: 1fr; gap: var(--aurora-space-2); }
}

/* ============================================
   DEBRID RESULT BLOCKS (success / error)
   Rendered by assets/script.js -> displayResults()
   into #responseOutput inside the aurora console.
   Real classes (from script.js):
     .result-item / .result-item.error / .result-item.success
     .result-header, .result-title, .success-icon, .error-icon
     .result-details, .detail-row, .detail-label, .detail-value, .error-text
     .download-link-container, .download-link
     .action-buttons, .action-btn, .download-btn, .play-btn, .vlc-btn, .cast-btn
     .results-header, .results-icon, .results-title, .results-list
     .result-number, .result-content, .result-filename, .original-link
   ============================================ */

/* Base result item — success default (no modifier) + success modifier */
.aurora-content .result-item {
  background: var(--aurora-bg-card) !important;
  border: 1px solid rgba(20, 184, 166, 0.3) !important;
  border-left: 3px solid var(--aurora-teal) !important;
  border-radius: var(--aurora-radius-md) !important;
  padding: var(--aurora-space-5) !important;
  color: var(--aurora-text-primary) !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.aurora-content .result-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--aurora-gradient);
  opacity: 0.5;
  pointer-events: none;
}

/* Error variant — pink-leaning */
.aurora-content .result-item.error {
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
  border-left: 3px solid var(--aurora-pink) !important;
}
.aurora-content .result-item.error::before {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
}

/* Header (icon + title row) */
.aurora-content .result-item .result-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-3) !important;
  margin: 0 0 var(--aurora-space-4) 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.aurora-content .result-item .result-title {
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: var(--aurora-text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Icons (emoji-based ✅ ❌) — wrap in a chip */
.aurora-content .result-item .success-icon,
.aurora-content .result-item .error-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--aurora-radius-md) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.aurora-content .result-item .success-icon {
  background: rgba(20, 184, 166, 0.15) !important;
  color: var(--aurora-teal) !important;
  border: 1px solid rgba(20, 184, 166, 0.3) !important;
}
.aurora-content .result-item .error-icon {
  background: rgba(236, 72, 153, 0.15) !important;
  color: var(--aurora-pink) !important;
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
}

/* Detail rows */
.aurora-content .result-item .result-details {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aurora-content .result-item .detail-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.aurora-content .result-item .detail-label {
  color: var(--aurora-text-secondary) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.aurora-content .result-item .detail-value {
  color: var(--aurora-text-primary) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  word-break: break-all !important;
  background: transparent !important;
  padding: 0 !important;
}

.aurora-content .result-item .error-text {
  color: var(--aurora-pink) !important;
  font-weight: 500 !important;
  font-family: 'Switzer', sans-serif !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* Long technical strings (URLs) keep mono + break-all; readable error
   messages use Switzer for natural reading. */
.aurora-content .result-item .detail-row .detail-value:not(.error-text) {
  word-break: break-all !important;
}

/* SINGLE result blocks (header on top, details below) — stack vertical.
   Legacy styles.css:1828 forces .result-item.success/error to display:flex
   row, which side-by-sides the header and details and squeezes the title
   into a too-narrow column (wraps word-by-word). Override only when the
   markup is a single-result (no .result-number child). */
.aurora-content .result-item:not(:has(> .result-number)) {
  display: block !important;
  gap: 0 !important;
}

/* MULTI result blocks (number + content side by side) — keep row layout. */
.aurora-content .result-item:has(> .result-number) {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--aurora-space-3) !important;
  align-items: flex-start !important;
}

/* Force the header to a single readable row even if the legacy stylesheet
   tries to constrain it to a narrow column. The icon stays compact, the
   title can flow on as many words as it needs. */
.aurora-content .result-item .result-header {
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
}
.aurora-content .result-item .result-title {
  white-space: normal !important;
  word-break: normal !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Kill the legacy scroll on the response output container.
   styles.css:610 sets `max-height: 430px; overflow-y: auto;` which leaves a
   permanent scrollbar even when the content fits. */
.aurora-content #responseOutput,
.aurora-content .response-output,
#responseOutput,
.response-output {
  max-height: none !important;
  overflow: visible !important;
}

/* The big download-link box (clickable URL pill-card) */
.aurora-content .result-item .download-link-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aurora-content .result-item .download-link {
  display: block !important;
  background: var(--aurora-bg-elevated) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-sm) !important;
  padding: var(--aurora-space-3) var(--aurora-space-4) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-teal) !important;
  word-break: break-all !important;
  text-decoration: none !important;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast) !important;
}

.aurora-content .result-item .download-link:hover {
  background: var(--aurora-bg-card-hover) !important;
  border-color: var(--aurora-border-aurora) !important;
  color: var(--aurora-teal) !important;
  text-decoration: none !important;
}

/* Action buttons row */
.aurora-content .result-item .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--aurora-space-3) !important;
  margin: var(--aurora-space-4) 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.aurora-content .result-item .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: var(--aurora-radius-pill) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid var(--aurora-border-aurora) !important;
  background: rgba(20, 184, 166, 0.1) !important;
  color: var(--aurora-teal) !important;
  transition: transform var(--aurora-duration-fast), background var(--aurora-duration-fast), border-color var(--aurora-duration-fast), box-shadow var(--aurora-duration-fast) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.aurora-content .result-item .action-btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(20, 184, 166, 0.18) !important;
  border-color: var(--aurora-teal) !important;
}

.aurora-content .result-item .action-btn i {
  color: inherit !important;
  font-size: 14px !important;
}

/* SVG aurora icons rendered by script.js wdIcon(). They live inside the
   chips/labels/buttons defined above, so they must inherit the parent
   color and never override the chip-internal centering. */
.aurora-content .result-item .action-btn .aurora-icon,
.aurora-content .result-item .success-icon .aurora-icon,
.aurora-content .result-item .error-icon .aurora-icon,
.aurora-content .results-icon .aurora-icon {
  color: inherit !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Detail labels carry an aurora-icon next to their text — align it inline. */
.aurora-content .result-item .detail-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.aurora-content .result-item .detail-label .aurora-icon {
  color: var(--aurora-violet) !important;
  flex-shrink: 0 !important;
}
.aurora-content .result-item.error .detail-label .aurora-icon {
  color: var(--aurora-pink) !important;
}

/* Results header chip — make the SVG glow violet like the legacy 📊. */
.aurora-content .results-icon {
  color: var(--aurora-violet) !important;
}

/* ============================================
   TORRENT RENDER — aurora SVG icon overrides
   The legacy styles.css block (.torrent-results, .torrent-header, etc.)
   still owns the layout / backgrounds; we only normalise the dynamic
   SVG icons that script.js now injects via wdIcon().
   ============================================ */
.torrent-header h3 .aurora-icon,
.torrent-info span .aurora-icon,
.torrent-file-item .file-info > .aurora-icon,
.torrent-status-header .aurora-icon,
.torrent-history-title .aurora-icon {
  color: var(--aurora-violet) !important;
  vertical-align: -3px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

.torrent-file-item .btn-download .aurora-icon,
.torrent-file-item .btn-copy-link .aurora-icon,
.torrent-file-item .btn-play .aurora-icon,
.torrent-history-actions .btn-history-view .aurora-icon,
.torrent-history-actions .btn-history-resume .aurora-icon,
.torrent-history-actions .btn-history-delete .aurora-icon {
  color: inherit !important;
  vertical-align: -3px !important;
  flex-shrink: 0 !important;
}

/* Status icons inside the history list keep their semantic color via the
   inline style on .torrent-status-icon; the SVG must inherit it. */
.torrent-history-item .torrent-status-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
}
.torrent-history-item .torrent-status-icon .aurora-icon {
  color: inherit !important;
}

/* ============================================
   MINI SPINNER — replaces fa-spinner fa-spin
   in dynamically-built buttons (Stripe purchase, etc.). Pure CSS so it
   works regardless of font-awesome being present or not.
   ============================================ */
.wd-mini-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wd-mini-spinner-rotate 0.8s linear infinite;
  vertical-align: -3px;
  margin-right: 6px;
  opacity: 0.85;
}
@keyframes wd-mini-spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wd-mini-spinner { animation-duration: 2s; }
}

/* ============================================
   VIDEO.JS CAST BUTTON — host the aurora SVG inside the player toolbar
   ============================================ */
.vjs-cast-button .vjs-icon-placeholder { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.vjs-cast-button .aurora-icon { color: #fff !important; }
.vjs-cast-button:hover .aurora-icon { color: var(--aurora-teal, #14b8a6) !important; }

/* Primary download button — solid teal */
.aurora-content .result-item .action-btn.download-btn {
  background: var(--aurora-teal) !important;
  color: #050616 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

.aurora-content .result-item .action-btn.download-btn:hover {
  background: #18cdb8 !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35) !important;
  transform: translateY(-1px) !important;
}

.aurora-content .result-item .action-btn.download-btn i {
  color: #050616 !important;
}

/* Play / VLC / Cast buttons keep the outlined aurora-teal look (inherits .action-btn) */
.aurora-content .result-item .action-btn.play-btn,
.aurora-content .result-item .action-btn.vlc-btn,
.aurora-content .result-item .action-btn.cast-btn {
  background: rgba(20, 184, 166, 0.1) !important;
  color: var(--aurora-teal) !important;
  border-color: var(--aurora-border-aurora) !important;
}

.aurora-content .result-item .action-btn.cast-btn-disabled,
.aurora-content .result-item .action-btn.cast-btn-disabled:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--aurora-text-muted) !important;
  border-color: var(--aurora-border-subtle) !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* ============================================
   MULTI-RESULT LAYOUT (results > 1)
   ============================================ */
.aurora-content .results-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-3) !important;
  padding: var(--aurora-space-4) var(--aurora-space-5) !important;
  margin: 0 0 var(--aurora-space-3) 0 !important;
  background: var(--aurora-bg-card) !important;
  border: 1px solid var(--aurora-border-subtle) !important;
  border-radius: var(--aurora-radius-md) !important;
  color: var(--aurora-text-primary) !important;
}

.aurora-content .results-icon {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border-radius: var(--aurora-radius-sm) !important;
  font-size: 16px !important;
}

.aurora-content .results-title {
  font-family: 'Switzer', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-primary) !important;
  letter-spacing: 0 !important;
}

.aurora-content .results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
}

.aurora-content .result-item.success,
.aurora-content .result-item.error {
  display: flex !important;
  gap: var(--aurora-space-3) !important;
  align-items: flex-start !important;
}

.aurora-content .result-item .result-number {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-muted) !important;
  min-width: 24px !important;
  padding-top: 2px !important;
  background: transparent !important;
}

.aurora-content .result-item .result-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--aurora-space-3) !important;
  min-width: 0 !important;
}

.aurora-content .result-item .result-filename {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-2) !important;
  font-family: 'Switzer', sans-serif !important;
  font-weight: 500 !important;
  color: var(--aurora-text-primary) !important;
  word-break: break-all !important;
}

.aurora-content .result-item .original-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--aurora-space-2) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--aurora-fs-body-sm) !important;
  color: var(--aurora-text-secondary) !important;
  word-break: break-all !important;
}

/* ============================================
   LIGHT THEME (arc) ADJUSTMENTS
   ============================================ */
body[data-theme="arc"] .aurora-content .result-item {
  background: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  border-left-color: var(--aurora-teal) !important;
  color: var(--aurora-text-primary) !important;
  box-shadow: 0 1px 3px rgba(10, 14, 39, 0.04) !important;
}

body[data-theme="arc"] .aurora-content .result-item.error {
  border-color: rgba(236, 72, 153, 0.35) !important;
  border-left-color: var(--aurora-pink) !important;
}

body[data-theme="arc"] .aurora-content .result-item .result-title,
body[data-theme="arc"] .aurora-content .result-item .detail-value,
body[data-theme="arc"] .aurora-content .result-item .result-filename {
  color: var(--aurora-text-primary) !important;
}

body[data-theme="arc"] .aurora-content .result-item .detail-label,
body[data-theme="arc"] .aurora-content .result-item .original-link,
body[data-theme="arc"] .aurora-content .result-item .result-number {
  color: var(--aurora-text-secondary) !important;
}

body[data-theme="arc"] .aurora-content .result-item .download-link {
  background: #f7f8fb !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
  color: #0d8576 !important;
}

body[data-theme="arc"] .aurora-content .result-item .download-link:hover {
  background: #eef0f4 !important;
  border-color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn {
  background: rgba(20, 184, 166, 0.08) !important;
  color: #0d8576 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn:hover {
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: var(--aurora-teal) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn {
  background: var(--aurora-teal) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn:hover {
  background: #0d9488 !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.3) !important;
}

body[data-theme="arc"] .aurora-content .result-item .action-btn.download-btn i {
  color: #ffffff !important;
}

body[data-theme="arc"] .aurora-content .results-header {
  background: #ffffff !important;
  border-color: rgba(10, 14, 39, 0.1) !important;
}

body[data-theme="arc"] .aurora-content .result-item .success-icon {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #0d8576 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .error-icon {
  background: rgba(236, 72, 153, 0.12) !important;
  color: #be185d !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
}

body[data-theme="arc"] .aurora-content .result-item .error-text {
  color: #be185d !important;
}

/* ============================================
   RESPONSIVE / MOBILE LAYER (Aurora · 2026-05)
   Centralized < 640 / < 480 cascade — burger nav,
   hero stack, touch targets, form polish.
   ============================================ */

/* ---------- Burger button (hidden ≥ 640px) ---------- */
.aurora-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: rgba(15, 20, 40, 0.7);
  border: 1px solid var(--aurora-border-subtle);
  border-radius: var(--aurora-radius-md);
  color: var(--aurora-text-primary);
  cursor: pointer;
  transition: border-color var(--aurora-duration-fast), background var(--aurora-duration-fast);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 110;
}
.aurora-burger:hover,
.aurora-burger:focus-visible {
  border-color: var(--aurora-border-aurora);
  outline: none;
}
.aurora-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--aurora-text-primary);
  transition: transform var(--aurora-duration-base) var(--aurora-ease-out),
              opacity var(--aurora-duration-fast),
              width var(--aurora-duration-base);
  transform-origin: center;
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--aurora-teal);
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.aurora-burger[aria-expanded="true"] .aurora-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--aurora-teal);
}

/* Light theme — bars darker on cream background */
body[data-theme="arc"] .aurora-burger-bar {
  background: #0a0e27;
}

/* ---------- Drawer overlay ---------- */
.aurora-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 22, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--aurora-duration-base) var(--aurora-ease-out);
}
.aurora-nav-overlay[hidden] {
  display: none;
}
.aurora-nav-overlay.is-visible {
  opacity: 1;
}

/* When drawer is open, lock body scroll */
body.aurora-nav-open {
  overflow: hidden;
}

/* ---------- 640px — burger surfaces, drawer takes over ---------- */
@media (max-width: 640px) {
  /* The fixed nav drawer needs to escape the topbar's containing block.
     `backdrop-filter` on .aurora-topbar would otherwise pin position:fixed
     descendants to the topbar (~64px tall). The 85%-opaque background
     already reads as a frosted bar — dropping the blur here is invisible. */
  .aurora-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .aurora-burger {
    display: inline-flex;
  }

  /* Nav becomes a slide-in drawer from the right */
  .aurora-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--aurora-space-6);
    padding: calc(var(--aurora-topbar-height) + var(--aurora-space-4)) var(--aurora-space-5) var(--aurora-space-8);
    background: var(--aurora-bg-elevated);
    border-left: 1px solid var(--aurora-border-aurora);
    box-shadow: -20px 0 60px rgba(5, 6, 22, 0.7);
    transform: translateX(100%);
    transition: transform var(--aurora-duration-base) var(--aurora-ease-out);
    z-index: 100;
    overflow-y: auto;
  }
  .aurora-nav.is-open {
    transform: translateX(0);
  }

  /* Restore label text inside drawer (was hidden by 980px rule) */
  .aurora-nav-link span,
  .aurora-nav-cta span {
    display: inline !important;
  }

  /* Controls row at top of drawer — language + theme toggle stay side-by-side */
  .aurora-nav-controls {
    order: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--aurora-space-3);
    padding-top: var(--aurora-space-5);
    margin-top: auto;
    border-top: 1px solid var(--aurora-border-subtle);
  }
  .aurora-language {
    display: inline-flex; /* override the 640px hide rule above (line 608) */
    flex: 1;
  }
  .aurora-language-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
  }
  .aurora-language-menu {
    right: auto;
    left: 0;
    width: 100%;
    bottom: calc(100% + 6px);
    top: auto;
    max-height: 60vh;
  }

  /* Nav links — stack, full width, beefy tap area */
  .aurora-nav-links {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .aurora-nav-links li { width: 100%; }
  .aurora-nav-link,
  .aurora-nav-cta {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 16px;
    font-size: 15px;
    min-height: 48px;
    border-radius: var(--aurora-radius-md);
  }
  .aurora-nav-cta {
    justify-content: center;
    margin-top: var(--aurora-space-2);
  }

  /* Swap: hide desktop dropdown trigger, surface mobile-only items */
  .aurora-nav-desktop-only { display: none !important; }
  .aurora-nav-mobile-only { display: block; }

  .aurora-nav-divider {
    height: 1px;
    background: var(--aurora-border-subtle);
    margin: var(--aurora-space-3) 0;
    list-style: none;
  }

  /* Logout link — subtle danger tint */
  .aurora-nav-logout {
    color: var(--aurora-pink) !important;
  }
  .aurora-nav-logout .aurora-icon {
    color: var(--aurora-pink);
  }
  .aurora-nav-logout:hover {
    background: rgba(236, 72, 153, 0.1) !important;
    color: #f9a8d4 !important;
  }
}

/* ---------- Hero — proper vertical stack on tablet+phone ---------- */
@media (max-width: 768px) {
  .aurora-hero {
    padding: var(--aurora-space-8) var(--aurora-space-5) var(--aurora-space-8);
    align-items: center;
    text-align: center;
  }
  .aurora-hero-inner {
    max-width: 100%;
    margin: 0 auto;
  }
  .aurora-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .aurora-eyebrow {
    margin-bottom: var(--aurora-space-4);
  }
}

/* ---------- 480px cascade — small phones ---------- */
@media (max-width: 480px) {
  /* Hero globe — keep visible but smaller, no overflow */
  .aurora-hero-globe {
    width: 220px;
    height: 220px;
    margin: 0 auto var(--aurora-space-4);
    opacity: 0.5;
  }

  /* Hero typography compaction */
  .aurora-hero {
    padding: var(--aurora-space-6) var(--aurora-space-4) var(--aurora-space-8);
  }
  .aurora-hero-title  { font-size: clamp(40px, 13vw, 56px); }
  .aurora-hero-tagline { font-size: clamp(20px, 6.5vw, 26px); }
  .aurora-hero-lead { font-size: 15px; line-height: 1.45; margin-bottom: var(--aurora-space-6); }
  .aurora-eyebrow {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.14em;
  }

  /* Topbar — tighter padding, drop wordmark dot kerning */
  .aurora-topbar-inner {
    padding: 8px var(--aurora-space-4);
    gap: var(--aurora-space-3);
  }
  .aurora-wordmark { font-size: 17px; }
  .aurora-brand .aurora-globe-mark { width: 30px; height: 30px; }

  /* Theme toggle — compact width */
  .aurora-theme-toggle-track { width: 54px; height: 28px; padding: 0 6px; }
  .aurora-theme-toggle-thumb { width: 18px; height: 18px; left: calc(100% - 18px - 5px); }
  .aurora-theme-toggle-input:checked ~ .aurora-theme-toggle-track .aurora-theme-toggle-thumb { left: 5px; }

  /* Console — even tighter padding */
  .aurora-console { padding: 8px 6px 14px; border-radius: 18px; }
  .aurora-console::before { border-radius: 18px; }
  .aurora-console-bar { padding: 4px 8px 10px; gap: 8px; }
  .aurora-console-title { font-size: 10px; letter-spacing: 0.14em; }
  .aurora-console-status { font-size: 9.5px; letter-spacing: 0.12em; }
  .aurora-console-body { padding: 0 4px; }
  .aurora-tabs { gap: 4px; padding: 4px; }
  .aurora-tab { padding: 9px 10px; font-size: 12.5px; }

  /* Form — bigger labels + inputs */
  .aurora-form-label {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .aurora-form-input,
  .aurora-form textarea,
  textarea.aurora-form-input {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 12px 14px;
  }
  .aurora-form-submit {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 15px;
    min-height: 48px;
  }
  .aurora-form-meta { font-size: 9.5px; gap: 6px; flex-wrap: wrap; }

  /* Plans — slim cards on tiny phones */
  .aurora-plan-card {
    padding: var(--aurora-space-6) var(--aurora-space-5) var(--aurora-space-5);
  }
  .aurora-plan-amount { font-size: 36px; }
  .aurora-plan-name { font-size: 18px; }

  /* Features grid — tighter padding */
  .aurora-features {
    padding: 0 var(--aurora-space-4);
    margin-top: var(--aurora-space-16);
  }
  .aurora-features-head { margin-bottom: var(--aurora-space-10); }

  /* Referral viz — shorter on phones */
  .aurora-referral-inner { padding: var(--aurora-space-6); }
  .aurora-referral-viz { height: 220px; }
  .aurora-referral-title { font-size: clamp(28px, 8vw, 36px); }

  /* Hosters pills — single col is too wide visually; keep 2 col */
  .aurora-hosters-pills { gap: var(--aurora-space-2); }
  .aurora-host-pill { padding: 10px 12px; font-size: 13px; }

  /* Footer — single col, marquee slower & lighter */
  .aurora-footer-cols { grid-template-columns: 1fr; gap: var(--aurora-space-6); }
  .aurora-footer-inner { padding: 0 var(--aurora-space-4) var(--aurora-space-8); gap: var(--aurora-space-8); }
  .aurora-footer-wordmark { font-size: 28px; }
  .aurora-footer-tagline { font-size: 16px; }
  .aurora-marquee-track { gap: var(--aurora-space-4); font-size: 10px; letter-spacing: 0.2em; animation-duration: 70s; }
  .aurora-footer-baseline {
    padding: var(--aurora-space-5) var(--aurora-space-4) var(--aurora-space-8);
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aurora-space-3);
  }

  /* Container padding everywhere — global tightening */
  .aurora-plans,
  .aurora-extensions-cards,
  .aurora-hosters,
  .aurora-referral,
  .aurora-article,
  .aurora-page-head {
    padding-left: var(--aurora-space-4);
    padding-right: var(--aurora-space-4);
  }

  /* Article body — readable padding + h2 */
  .aurora-article-body h2 { font-size: clamp(26px, 7vw, 34px); }
  .aurora-article-body { font-size: 15px; }

  /* Page head — compact title */
  .aurora-page-head { margin: var(--aurora-space-8) auto var(--aurora-space-10); }
}

/* ---------- 360px — extreme phones (Galaxy S, old iPhones) ---------- */
@media (max-width: 360px) {
  .aurora-hero-globe { width: 180px; height: 180px; }
  .aurora-hero-title { font-size: 38px; }
  .aurora-wordmark { font-size: 16px; }
  .aurora-burger { width: 40px; height: 40px; }
  .aurora-theme-toggle-track { width: 50px; }
}

/* ---------- Touch-target safety (any width with coarse pointer) ----------
   Ensures buttons and links meet WCAG 2.5.5 (≥ 44px) on touch devices,
   without inflating the desktop UI. */
@media (hover: none) and (pointer: coarse) {
  .aurora-nav-link,
  .aurora-nav-cta,
  .aurora-language-trigger,
  .aurora-language-menu li,
  .aurora-footer-col a,
  .aurora-footer-baseline a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .aurora-theme-toggle-track {
    min-height: 32px;
  }
  .aurora-burger {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================================
   Console footer meta — statut utilisateur inline
   ============================================================================ */

/* Badge premium compacté quand intégré dans aurora-form-meta */
.aurora-form-meta .usage-status {
  padding: 0;
  gap: 8px;
  max-width: none;
  width: auto;
  flex-wrap: nowrap;
  border-radius: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.aurora-form-meta .status-icon {
  width: 26px;
  height: 26px;
  font-size: 1rem;
}
.aurora-form-meta .status-label {
  font-size: 0.72rem;
  line-height: 1.2;
}
.aurora-form-meta .status-detail {
  font-size: 0.65rem;
}
.aurora-form-meta .subscription-time-remaining {
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}
.aurora-form-meta .subscription-time-remaining strong {
  font-size: 0.9rem;
}

/* ============================================
   prefers-reduced-motion — 3-layer defense
   (prefers_reduced_motion_belt_and_braces, BIBLE v2.3)
   Layer 1 : @media query (this block).
   Layer 2 : .aurora-reduce-motion class injected by aurora.js (matchMedia
             listener — catches user toggle without reload).
   Layer 3 : SMIL pauseAnimations() — handled by aurora.js for <svg> nodes.
   Etat final VISIBLE (opacity 1, transform identity) — pas cache.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  /* Disable atmospheric drifts + twinkle + marquee */
  .aurora-drift,
  .aurora-drift-1,
  .aurora-drift-2,
  .aurora-marquee-track,
  .aurora-reveal,
  .aurora-reveal-active,
  [class*="aurora-globe"] {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Suppress spring hover transforms (bold-playful signature) */
  .aurora-nav-link:hover,
  .aurora-cta:hover,
  .aurora-feature-card:hover,
  .aurora-hoster-pill:hover,
  .auth-btn:hover {
    transform: none !important;
  }

  /* Keep final state VISIBLE — never opacity 0 / hidden */
  .aurora-reveal,
  .aurora-reveal-active {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Layer 2 : class-based fallback (aurora.js applies on matchMedia change).
   Mirrors the @media block above so iOS Safari + cross-browser quirks
   are caught regardless of how the preference is exposed. */
.aurora-reduce-motion .aurora-drift,
.aurora-reduce-motion .aurora-drift-1,
.aurora-reduce-motion .aurora-drift-2,
.aurora-reduce-motion .aurora-marquee-track,
.aurora-reduce-motion .aurora-reveal,
.aurora-reduce-motion .aurora-reveal-active,
.aurora-reduce-motion [class*="aurora-globe"] {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

.aurora-reduce-motion .aurora-nav-link:hover,
.aurora-reduce-motion .aurora-cta:hover,
.aurora-reduce-motion .aurora-feature-card:hover,
.aurora-reduce-motion .aurora-hoster-pill:hover,
.aurora-reduce-motion .auth-btn:hover {
  transform: none !important;
}

.aurora-reduce-motion .aurora-reveal,
.aurora-reduce-motion .aurora-reveal-active {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   dynamic_width_for_translated_ui + mobile_responsive_tile_icon_text_clamp
   Cesures intelligentes pour les langues longues (DE / RU / PL / NL) sur
   les boutons et tuiles. Combine avec scroll-margin-top pour les ancres.
   ============================================ */
.aurora-nav-link,
.auth-btn,
.btn-primary,
.aurora-form-submit,
.aurora-form-secondary {
  white-space: nowrap;
}

.aurora-feature-card,
.aurora-feature-card *,
.aurora-hoster-pill,
.aurora-pricing-card,
.plan-card,
.megamenu-item,
.footer-col-list a {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* scroll-margin-top pour les ancres sous topbar sticky (#faq-N, #art-N, etc.) */
:is(section, article, h1, h2, h3, h4)[id] {
  scroll-margin-top: 80px;
}

/* Print CSS (print_css_optimization) — clean layout pour legal/terms/guide */
@media print {
  .aurora-topbar,
  .aurora-footer,
  .aurora-marquee,
  .aurora-bands,
  .aurora-starfield,
  .aurora-burger,
  .aurora-language,
  .aurora-theme-toggle,
  .floating-shapes,
  button {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .aurora-content, .aurora-article-body, .glass-card {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  a { color: #1a73e8 !important; text-decoration: underline !important; }
}