/* BunnyVu "Aurora" design system.
   Loaded last on every page: remaps the older palette variables and restyles existing markup,
   so page scripts and class names stay unchanged. */

:root {
  --au-bg: #07060d;
  --au-bg-2: #0d0b17;
  --au-surface: rgba(255, 255, 255, 0.045);
  --au-surface-2: rgba(255, 255, 255, 0.07);
  --au-surface-solid: #14111f;
  --au-border: rgba(255, 255, 255, 0.09);
  --au-border-strong: rgba(196, 181, 253, 0.42);
  --au-text: #f5f3ff;
  --au-muted: #a7a3bd;
  --au-faint: #6f6a88;
  --au-violet: #8b5cf6;
  --au-pink: #ec4899;
  --au-cyan: #22d3ee;
  --au-green: #34d399;
  --au-amber: #fbbf24;
  --au-grad: linear-gradient(135deg, #8b5cf6 0%, #d946ef 52%, #ec4899 100%);
  --au-grad-cool: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 100%);
  --au-glow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 12px 40px -8px rgba(139, 92, 246, 0.45);
  --au-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --au-radius: 18px;
  --au-radius-sm: 12px;
  --au-blur: blur(18px) saturate(150%);
  --au-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Older variable names used throughout the page styles. */
  --ink: var(--au-text);
  --text: var(--au-text);
  --deep: var(--au-bg);
  --bg: var(--au-bg);
  --cream: var(--au-bg);
  --paper: var(--au-surface);
  --panel: var(--au-surface);
  --panel-2: var(--au-surface-2);
  --bg-elevated: var(--au-surface);
  --muted: var(--au-muted);
  --line: var(--au-border);
  --green: #c4b5fd;
  --mint: rgba(139, 92, 246, 0.12);
  --red: var(--au-pink);
  --red-soft: #f9a8d4;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: "Sora", "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

/* ---------- Base ---------- */
html { background: var(--au-bg); }
body {
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(236, 72, 153, 0.14), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--au-bg) !important;
  background-attachment: fixed !important;
  color: var(--au-text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28vmax 28vmax at 20% 30%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(24vmax 24vmax at 80% 60%, rgba(236, 72, 153, 0.11), transparent 70%);
  filter: blur(40px);
  animation: au-drift 26s ease-in-out infinite alternate;
}
@keyframes au-drift {
  to { transform: translate3d(4vmax, -3vmax, 0) rotate(8deg); }
}
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.35) transparent; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; }
a, button, input, select, summary { transition: color .2s var(--au-ease), background .25s var(--au-ease), border-color .25s var(--au-ease), box-shadow .25s var(--au-ease), transform .2s var(--au-ease), opacity .2s; }
:focus-visible { outline: 2px solid rgba(196, 181, 253, 0.8); outline-offset: 2px; }

/* Gradient text accents */
.hero h1 em, .section-intro h2 em, .final-cta h2 em, .welcome h1 span, .page-heading h1 span, .page-heading h1 em,
.room-list-heading h1 span, .auth-shell h1 em, body > main h1 em, #title em {
  font-family: var(--display) !important;
  font-style: normal;
  background: var(--au-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ---------- Brand & header ---------- */
.brand { font-family: var(--display); letter-spacing: 0.08em; color: var(--au-text); }
.brand-mark {
  background: var(--au-grad) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px -4px rgba(217, 70, 239, 0.6);
  font-family: var(--display);
}
.site-header {
  background: rgba(10, 8, 18, 0.55) !important;
  border-bottom: 1px solid var(--au-border) !important;
  backdrop-filter: var(--au-blur);
  -webkit-backdrop-filter: var(--au-blur);
}
.nav-links a, .header-links a, .quiet-link { color: var(--au-muted); font-weight: 500; }
.nav-links a:hover, .header-links a:hover, .quiet-link:hover { color: var(--au-text); }

/* ---------- Buttons ---------- */
.button-dark, .header-cta, .tracker-action, .tracker-form button, .tool-form button, .page-heading .search button,
.room-history-search button, .room-list-search button, .search-form button, .self-tracker-button.primary {
  position: relative;
  border: 0 !important;
  border-radius: var(--au-radius-sm) !important;
  background: var(--au-grad) !important;
  background-size: 160% 160% !important;
  color: #fff !important;
  font-family: var(--sans);
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px -10px rgba(217, 70, 239, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.button-dark:hover, .header-cta:hover, .tracker-action:hover, .tracker-form button:hover, .tool-form button:hover,
.page-heading .search button:hover, .room-history-search button:hover, .room-list-search button:hover, .search-form button:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -10px rgba(217, 70, 239, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.button-dark:active, .header-cta:active, .tracker-action:active, .tracker-form button:active, .tool-form button:active,
.room-history-search button:active, .room-list-search button:active, .search-form button:active, .button:active { transform: translateY(0) scale(0.98); }
button:disabled { opacity: 0.55; cursor: progress; transform: none !important; }

.button-outline, .self-tracker-button, .room-filter-button, .section-heading button {
  border: 1px solid var(--au-border-strong) !important;
  border-radius: var(--au-radius-sm) !important;
  background: rgba(139, 92, 246, 0.08) !important;
  color: #e9e3ff !important;
}
.button-outline:hover, .self-tracker-button:hover, .room-filter-button:hover {
  background: rgba(139, 92, 246, 0.18) !important;
  box-shadow: var(--au-glow);
}
.section-heading button { padding: 6px 12px; font: 600 11px var(--sans) !important; }
.tracker-action.active { background: rgba(52, 211, 153, 0.12) !important; color: var(--au-green) !important; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.4) !important; }

/* ---------- Glass surfaces ---------- */
.panel, .metric, .service-grid button, .quick-actions button, .tracker-result-card, .private-tracker, .room-card,
.room-detail-card, .room-person, .feature-card, .price-card, .online-card, .person-card, .steps-grid article,
.faq-list details, .auth-shell, .room-list-search, .stats {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid var(--au-border) !important;
  border-radius: var(--au-radius) !important;
  box-shadow: var(--au-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: var(--au-blur);
  -webkit-backdrop-filter: var(--au-blur);
  color: var(--au-text);
}
.service-grid button:hover, .quick-actions button:hover, .room-card:hover, .room-card:focus-visible, .feature-card:hover,
.price-card:hover, .metric:hover, .room-detail-card:hover, .person-card:hover {
  border-color: var(--au-border-strong) !important;
  box-shadow: var(--au-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-3px);
}
.service-grid button, .quick-actions button, .room-card, .feature-card, .price-card, .metric, .room-detail-card, .person-card {
  transition: transform .3s var(--au-ease), border-color .3s var(--au-ease), box-shadow .3s var(--au-ease);
}

/* Featured cards get an animated gradient border. */
.private-tracker, .price-featured, .feature-green {
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
}
.private-tracker::before, .price-featured::before, .feature-green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--au-angle, 0deg), #8b5cf6, #ec4899, #22d3ee, #8b5cf6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: au-spin 8s linear infinite;
}
@property --au-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes au-spin { to { --au-angle: 360deg; } }
.private-tracker {
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(139, 92, 246, 0.25), transparent 70%),
    radial-gradient(500px 200px at 100% 100%, rgba(236, 72, 153, 0.18), transparent 70%),
    rgba(20, 17, 31, 0.7) !important;
}
.feature-green, .price-featured {
  background:
    radial-gradient(500px 240px at 0% 0%, rgba(139, 92, 246, 0.32), transparent 70%),
    radial-gradient(400px 240px at 100% 100%, rgba(236, 72, 153, 0.22), transparent 70%),
    rgba(20, 17, 31, 0.75) !important;
  color: var(--au-text) !important;
}
.feature-green p, .price-featured ul, .price-featured .price span { color: #ddd6fe !important; }
.popular { background: var(--au-grad) !important; color: #fff !important; border-radius: 999px; padding: 4px 10px; box-shadow: 0 6px 18px -6px rgba(236, 72, 153, 0.8); }

/* ---------- Inputs ---------- */
.search input, .tool-form input, .tracker-form input, .tracker-form select, .room-history-search input, .search-form input,
.room-filter-panel select, .auth-shell input {
  border: 1px solid var(--au-border) !important;
  border-radius: var(--au-radius-sm) !important;
  background: rgba(7, 6, 13, 0.55) !important;
  color: var(--au-text) !important;
  font-family: var(--sans);
  font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.search input::placeholder, .tool-form input::placeholder, .tracker-form input::placeholder, .room-history-search input::placeholder,
.search-form input::placeholder, .room-list-search input::placeholder { color: var(--au-faint); }
.search input:focus, .tool-form input:focus, .tracker-form input:focus, .tracker-form select:focus, .room-history-search input:focus,
.search-form input:focus, .auth-shell input:focus {
  border-color: rgba(167, 139, 250, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  outline: 0;
}
.search { border: 0 !important; background: transparent !important; }
.search input { padding: 11px 14px; }
.room-list-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 14px; }
.tracker-form select option { background: var(--au-surface-solid); }

/* ---------- Typography helpers ---------- */
.kicker, .nav-label, .group-label, .metric-label, .private-kicker, .eyebrow, .section-number, .price-label, .tracker-history-title,
.chart-header, .breadcrumb {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #b4a9e6 !important;
}

/* ---------- Dashboard ---------- */
.dashboard-shell { background: transparent !important; }
.sidebar {
  background: rgba(10, 8, 18, 0.6) !important;
  border-right: 1px solid var(--au-border) !important;
  backdrop-filter: var(--au-blur);
  -webkit-backdrop-filter: var(--au-blur);
}
.side-nav button {
  border-radius: 10px !important;
  border-left: 0 !important;
  color: var(--au-muted) !important;
  font-size: 13px !important;
  font-weight: 500;
}
.side-nav button:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--au-text) !important; }
.side-nav button.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.28), rgba(236, 72, 153, 0.12)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35), 0 8px 24px -12px rgba(139, 92, 246, 0.9);
}
.feature-group-note { margin: 22px 10px 6px !important; color: #b4a9e6 !important; font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; }
.side-nav button[data-feature] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-nav button[data-feature] strong { font-weight: 500; }
.side-nav button[data-feature] span, .side-nav button[data-feature]:not(.is-soon) b { display: none; }
.side-nav button[data-feature].is-soon { opacity: 0.6; }
.side-nav button[data-feature].is-soon b {
  flex: none; padding: 2px 7px; border-radius: 999px; background: rgba(236, 72, 153, 0.12);
  color: #f9a8d4; font: 500 9px var(--mono); white-space: nowrap;
}
.feature-status { color: var(--au-green) !important; font-family: var(--mono) !important; }
.feature-status.soon { color: #f9a8d4 !important; }
.service-grid .feature-card-soon { border-style: dashed !important; }
.section-heading button { white-space: nowrap; }
.sidebar-foot { border-top-color: var(--au-border) !important; font-family: var(--mono) !important; font-size: 10px !important; color: var(--au-faint) !important; }
.sidebar-foot strong { font-family: var(--display) !important; font-size: 18px !important; background: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.dashboard-main { font-size: 14px; }
.icon-button, .avatar-button, .mobile-menu {
  border: 1px solid var(--au-border) !important;
  background: var(--au-surface) !important;
  backdrop-filter: var(--au-blur);
  color: var(--au-text) !important;
}
.icon-button:hover, .mobile-menu:hover { border-color: var(--au-border-strong) !important; box-shadow: var(--au-glow); }
.avatar-button { background: var(--au-grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px -6px rgba(217, 70, 239, 0.8); }
.welcome h1, .page-heading h1, .room-list-heading h1 { font-family: var(--display); font-weight: 700 !important; letter-spacing: -0.04em !important; }
.metric { padding: 22px !important; }
.metric strong {
  font-family: var(--display);
  font-size: 32px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #fff, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.metric small { color: var(--au-green) !important; font-family: var(--mono) !important; font-size: 10.5px !important; }
.quick-actions button { font-size: 13px !important; font-weight: 600; padding: 16px !important; }
.quick-actions span {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(139, 92, 246, 0.16); color: #ddd6fe !important; font-size: 15px !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}
.service-grid strong { font-family: var(--display); font-size: 17px !important; font-weight: 600 !important; }
.service-grid span { color: var(--au-muted) !important; font-size: 13px !important; }
.service-grid b { color: #c4b5fd !important; font-family: var(--mono) !important; font-size: 10.5px !important; }
.private-tracker h2 { font-size: 22px !important; font-weight: 700 !important; }
.private-tracker p { font-size: 13px !important; color: var(--au-muted) !important; }
.private-stats strong { color: #fff !important; font-family: var(--display); font-size: 18px !important; }
.private-stats span { font-family: var(--mono) !important; font-size: 10px !important; }
.section-heading h2 { font-size: 16px !important; font-weight: 600 !important; }
.chart-area { background: repeating-linear-gradient(to bottom, transparent 0, transparent 46px, rgba(255, 255, 255, 0.05) 47px) !important; }
.chart-path { background: var(--au-grad) !important; filter: drop-shadow(0 0 8px rgba(217, 70, 239, 0.7)); }
.chart-dot { background: #fff !important; box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.35), 0 0 16px rgba(217, 70, 239, 0.9) !important; }
.activity { background: transparent !important; border-radius: 0 !important; border-top: 1px solid var(--au-border) !important; font-size: 13px !important; }
.activity-icon { background: rgba(139, 92, 246, 0.16) !important; color: #ddd6fe !important; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3); }
.activity span, .activity time { font-family: var(--mono) !important; font-size: 10.5px !important; }
.room-table { background: transparent !important; }
.room-table th, .room-table td { border-top-color: var(--au-border) !important; font-size: 12px !important; }
.room-table td:first-child { font-size: 13px !important; }
.room-table tr:hover td { background: rgba(139, 92, 246, 0.06); }
.room-status { background: var(--au-green) !important; box-shadow: 0 0 10px var(--au-green); }
.room-status.quiet { background: var(--au-faint) !important; box-shadow: none; }

/* Tracker */
.tracker-result-card { gap: 8px !important; padding: 18px !important; font-family: var(--sans); font-size: 13px; }
.tracker-result-card strong { font-family: var(--display) !important; font-size: 18px !important; color: #fff !important; }
.tracker-result-card span:first-of-type { color: var(--au-green) !important; font-weight: 600; }
.history-row { border-top-color: var(--au-border) !important; font-family: var(--mono) !important; font-size: 11px !important; padding: 9px 0 !important; }
.history-row strong { color: #ddd6fe !important; }
.form-note { color: var(--au-faint) !important; font-family: var(--sans) !important; font-size: 12px !important; }
.tracker-form label, .tool-form label { font-family: var(--mono) !important; font-size: 10.5px !important; letter-spacing: 0.12em; color: #b4a9e6 !important; }

/* Modals */
.modal-backdrop, .room-detail-backdrop { background: rgba(5, 4, 10, 0.6) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-backdrop.open .tracker-modal, .room-detail-backdrop.open .room-detail-dialog { animation: au-pop .35s var(--au-ease); }
@keyframes au-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.tracker-modal, .room-detail-dialog {
  background: linear-gradient(180deg, rgba(28, 23, 44, 0.92), rgba(14, 11, 24, 0.94)) !important;
  border: 1px solid var(--au-border-strong) !important;
  border-radius: 22px !important;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
.modal-close, .room-detail-close { color: var(--au-muted) !important; border-radius: 10px; }
.modal-close:hover, .room-detail-close:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; }
.room-detail-banner { border-radius: 22px 22px 0 0; }
.room-detail-tabs button.active, .room-list-tabs button.active { border-bottom-color: transparent !important; color: #fff !important; box-shadow: inset 0 -2px 0 #d946ef; }
.room-detail-tabs button, .room-list-tabs button { font-size: 13px !important; }
.room-detail-summary, .room-detail-tabs, .room-list-toolbar { border-color: var(--au-border) !important; }

/* Room cards & lists */
.room-card { cursor: pointer; }
.room-card-cover { background-color: #1d1530 !important; }
.room-card-copy strong { font-size: 12px !important; }
.room-card-meta, .room-card-tag, .room-card-occupancy { font-family: var(--mono) !important; font-size: 9.5px !important; }
.room-card-tag { background: rgba(7, 6, 13, 0.55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 999px; }
.room-list-search { padding: 8px !important; border-radius: 999px !important; }
.room-list-search button { border-radius: 999px !important; }
.room-list-status, .room-history-status, .room-detail-status, .room-history-summary, .status-line {
  font-family: var(--mono) !important; font-size: 11px !important; color: var(--au-muted) !important;
}
.room-person { border-radius: 14px !important; }
.room-person-presence { color: var(--au-green) !important; }
.room-person-avatar, .room-profile-avatar, .tracked-avatar, .room-history-event > img:first-child, .room-detail-chat-message img {
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45);
}
.room-snapshot-row, .room-history-event { border-color: var(--au-border) !important; }
.room-detail-empty-image, .room-person-outfit { background: rgba(255, 255, 255, 0.03) !important; }

/* Mobile nav */
.mobile-nav { background: rgba(10, 8, 18, 0.75) !important; border-top: 1px solid var(--au-border) !important; backdrop-filter: var(--au-blur); -webkit-backdrop-filter: var(--au-blur); }
.mobile-nav button.active { color: #f0abfc !important; text-shadow: 0 0 12px rgba(217, 70, 239, 0.8); }
@media (max-width: 620px) {
  .sidebar { background: rgba(10, 8, 18, 0.92) !important; }
}

/* ---------- Landing page ---------- */
.hero { background: transparent !important; }
.hero h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.055em !important; }
.hero-text, .feature-card p, .steps-grid p, .final-cta p { color: var(--au-muted) !important; }
.pulse-dot, .status-dot { background: var(--au-green) !important; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18), 0 0 14px rgba(52, 211, 153, 0.8) !important; animation: au-pulse 2.2s ease-in-out infinite; }
@keyframes au-pulse { 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.06), 0 0 18px rgba(52, 211, 153, 0.9); } }
.hero-note { color: var(--au-faint) !important; }
.hero-note i { background: var(--au-violet) !important; }
.hero-art img { filter: drop-shadow(0 30px 60px rgba(139, 92, 246, 0.35)) !important; }
.feature-icon {
  background: rgba(139, 92, 246, 0.16) !important;
  color: #ddd6fe;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3);
}
.feature-card h3, .price-card h3 { font-family: var(--display); }
.mini-signal i { background: var(--au-grad) !important; }
.feature-main, .pricing-section { background: transparent !important; }
.price strong { font-family: var(--display); }
.price-card li::before { color: #c4b5fd !important; }
.faq-list summary { font-weight: 600; }
.faq-list summary span { color: #f0abfc !important; }
.site-footer { border-top: 1px solid var(--au-border) !important; color: var(--au-muted); }

/* ---------- Auth pages ---------- */
.auth-shell { padding: clamp(26px, 4vw, 44px) !important; border-radius: 24px !important; }
.discord-button {
  border: 0 !important;
  border-radius: var(--au-radius-sm) !important;
  background: linear-gradient(135deg, #5865f2, #7c3aed) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 32px -10px rgba(88, 101, 242, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.discord-button:hover { transform: translateY(-1px); box-shadow: 0 18px 44px -10px rgba(88, 101, 242, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; }
.discord-button:active { transform: scale(0.98); }
.divider { color: var(--au-faint) !important; }
.helper, .auth-links { color: var(--au-muted) !important; }
.auth-links a { color: #ddd6fe !important; }

/* ---------- Live tracker page ---------- */
.premium-label {
  border: 0 !important;
  border-radius: 999px;
  padding: 7px 14px !important;
  background: var(--au-grad) !important;
  color: #fff !important;
  font-family: var(--mono) !important;
  box-shadow: 0 8px 22px -8px rgba(217, 70, 239, 0.85);
}
.search-form button { padding: 0 26px !important; }
.tracker-overview, .section { border-bottom-color: var(--au-border) !important; }
.tracked-name strong { font-family: var(--display); font-size: 18px !important; }
.state-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--au-border); }
.state-pill.online { color: var(--au-green) !important; background: rgba(52, 211, 153, 0.1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35); }
.state-pill.online::before { background: var(--au-green) !important; box-shadow: 0 0 10px var(--au-green); }
.tracker-meta strong { font-family: var(--display) !important; font-size: 14px !important; }
.room-fact strong { font-size: 14px !important; }
.danger-note { border-radius: var(--au-radius-sm); border: 1px solid rgba(251, 191, 36, 0.25) !important; background: rgba(251, 191, 36, 0.06) !important; color: #fde68a !important; padding: 12px 14px; }

/* Data-source notice injected by page scripts when results are cached or a source is offline. */
.au-notice {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--au-radius-sm); border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.07); color: #fde68a; font: 12px var(--sans);
}
.au-notice::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--au-amber); box-shadow: 0 0 10px var(--au-amber); }

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