/* ==========================================================================
   CHAOS MEN GUILD ROSTER & TRACKER — STYLESHEET
   --------------------------------------------------------------------------
   Design rules (keep these when extending):
   • Sharp aesthetic: containers, panels, icons, inputs use --radius (0).
     ONLY buttons (--radius-btn) and pills (--radius-pill) are rounded,
     so rounding always signals "this is clickable".
   • Strong lines between sections: use --line-strong for section/panel
     separators and --line for rows inside a section.
   • Color harmony: on/off states are complementary (--hue-on / --hue-off,
     identical saturation). Related accents stay analogous.
   • Icons: --icon for every roster icon; --icon-sec (half size) for
     secondary professions only.

   Sections:
    1. Tokens & base          9. Character roster table
    2. Layout & cards        10. Hover tooltip
    3. Buttons               11. Modals (patch notes, edit)
    4. Toggle pills          12. Raid & Campfire planner
    5. Hero & launch strip   13. Footer
    6. Guild poll            14. Responsive
    7. Character breakdown
    8. Add character form
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'LifeCraft';
  src: url('/fonts/LifeCraft.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Friz Quadrata';
  src: url('/fonts/FrizQuadrata.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. TOKENS & BASE (IRON-BOUND LEDGER — OBSIDIAN & FORGED GOLD)
   ========================================================================== */
:root {
  /* ==========================================================================
     BARRENS SAVANNA TWILIGHT & FORGED BRONZE — CANONICAL DESIGN TOKENS
     ========================================================================== */
  --bg-abyss: #080706;
  --bg-basalt: #100e0c;
  --bg-panel: #161310;
  --bg-elevated: #1f1a15;
  --bg-input: #050403;

  --text-ivory: #f6f4ee;
  --text-parchment: #d6cbb8;
  --text-dust: #9a8f7e;

  --border-earth: #2c241b;
  --border-bronze: #473621;

  --gold-barrens: #d4a44c;
  --gold-crest: #f2c96d;
  --ember-savanna: #e07a2e;
  --crimson-horde: #b91c1c;

  /* Mapped Legacy & Component Aliases */
  --bg-root: var(--bg-abyss);
  --bg-void: var(--bg-abyss);
  --bg-surface: var(--bg-basalt);
  --bg-obsidian: var(--bg-basalt);
  --bg-card: var(--bg-panel);
  --bg-card-hover: var(--bg-elevated);

  --line: var(--border-earth);
  --line-strong: var(--border-bronze);

  --text-primary: var(--text-ivory);
  --text-secondary: var(--text-parchment);
  --text-muted: var(--text-dust);

  --gold-primary: var(--gold-barrens);
  --gold-bright: var(--gold-crest);
  --accent-gold: #ffd100;
  --horde-crimson: var(--crimson-horde);
  --accent-horde: #b30000;
  --alliance-cobalt: #2563eb;
  --neon-green: #22c55e;
  --neon-cyan: var(--gold-barrens);
  --neon-amber: var(--ember-savanna);
  --neon-red: #ef4444;

  /* On / Off harmony (complementary hues, matched saturation) */
  --hue-on: 142;
  --hue-off: 355;
  --harmony-s: 65%;
  --harmony-l: 48%;
  --color-on: hsl(var(--hue-on), var(--harmony-s), var(--harmony-l));
  --color-off: hsl(var(--hue-off), var(--harmony-s), 55%);
  --on-bg: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.14);
  --on-bg-hover: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.22);
  --on-border: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.5);
  --on-border-hover: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.75);
  --on-glow: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.18);
  --off-bg: hsla(var(--hue-off), var(--harmony-s), 55%, 0.10);
  --off-bg-hover: hsla(var(--hue-off), var(--harmony-s), 55%, 0.18);
  --off-border: hsla(var(--hue-off), var(--harmony-s), 55%, 0.35);
  --off-border-hover: hsla(var(--hue-off), var(--harmony-s), 55%, 0.6);
  /* Partial state sits on the analogous path between on and off */
  --color-partial: hsl(42, 82%, 55%);

  /* Shape tokens: sharp right-angled square aesthetic across containers, buttons, and pills */
  --radius: 0;
  --radius-btn: 0px;
  --radius-pill: 0px;

  /* Icons */
  --icon: 28px;
  --icon-sec: 14px;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.65);
  --shadow-card: 0 8px 25px -4px rgba(0, 0, 0, 0.8);

  --font-display: 'Cinzel', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  margin: 0;
  background-color: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

button { font-family: var(--font-sans); }

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   2. LAYOUT & CARDS
   ========================================================================== */
.page-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 24px 48px;
}

.xp-shell > .page-container,
.logs-shell > .page-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.page-container > section,
.page-container > div {
  margin-bottom: 8px;
}

.page-container > header.hero-card {
  margin-bottom: 4px !important;
}

.card {
  --accent: var(--neon-cyan);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 4px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.15;
}

.section-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
  max-width: 100%;
}

.wow-header-icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.card-body { padding: 16px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 255, 136, 0.08);
  color: var(--neon-green);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.sharp-pill {
  background: rgba(0, 240, 255, 0.08);
  color: var(--neon-cyan);
  border-color: rgba(0, 240, 255, 0.3);
}

.cell-muted {
  color: var(--text-muted);
  font-size: 11px;
}

/* ==========================================================================
   3. BUTTONS  (rounded = clickable)
   ========================================================================== */
.btn-toggle-poll,
.btn-toggle-enlist {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--toggle-accent);
  border-radius: var(--radius-btn);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn-toggle-poll { --toggle-accent: var(--neon-amber); }
.btn-toggle-enlist { --toggle-accent: var(--neon-green); }

.btn-toggle-poll:hover,
.btn-toggle-enlist:hover,
.btn-toggle-poll.is-active,
.btn-toggle-enlist.is-open {
  background: var(--bg-card-hover);
  border-color: var(--toggle-accent);
  color: var(--toggle-accent);
}

.btn-toggle-enlist.is-open { --toggle-accent: var(--neon-cyan); }

.poll-toggle-symbol { font-size: 14px; }
.poll-toggle-text { line-height: 1; }

.poll-toggle-chip {
  background: rgba(255, 183, 3, 0.15);
  border: 1px solid rgba(255, 183, 3, 0.35);
  color: var(--neon-amber);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.enlist-toggle-symbol {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.btn-patch-notes {
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-patch-notes:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
}

.patch-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

.btn-close-poll,
.btn-close-enlist,
.modal-close-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s ease;
}

.btn-close-poll:hover,
.btn-close-enlist:hover,
.modal-close-btn:hover {
  border-color: var(--color-off);
  color: var(--color-off);
  background: var(--off-bg);
}

.btn-primary-neon {
  background: var(--neon-green);
  color: #000;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.12s ease;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
}

.btn-primary-neon:hover {
  background: #2aff9d;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.5);
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.planner-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-add-roster,
.btn-reset-session {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add-roster {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.btn-add-roster:hover {
  background: rgba(16, 185, 129, 0.24);
  border-color: rgba(16, 185, 129, 0.85);
  color: #fff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.btn-add-roster:active {
  transform: translateY(1px);
}

.btn-reset-session {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.btn-reset-session:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.btn-reset-session:active {
  transform: translateY(1px);
}

.btn-pill-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
}

.btn-chevron {
  display: inline-block;
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

/* ==========================================================================
   4. TOGGLE PILLS  (shared on/off control: roster filters, raid size)
   ========================================================================== */
.pill-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.toggle-pill,
.sec-prof-checkbox-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--text-secondary);
}

.toggle-pill:hover,
.sec-prof-checkbox-chip:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.45);
  color: #fff;
}

.toggle-pill:active,
.sec-prof-checkbox-chip:active {
  transform: translateY(1px);
}

.toggle-pill.active,
.sec-prof-checkbox-chip:has(input:checked) {
  background: rgba(0, 240, 255, 0.14);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.28);
}

.toggle-pill.active:hover,
.sec-prof-checkbox-chip:has(input:checked):hover {
  background: rgba(0, 240, 255, 0.22);
  border-color: #67e8f9;
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.45);
}

/* Distinct thematic accents for roster filter pills */
#filterAlliance.active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.75);
  color: #60a5fa;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.32);
}

#filterAlliance.active:hover {
  background: rgba(59, 130, 246, 0.26);
  border-color: #93c5fd;
  color: #fff;
}

#filterHorde.active {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.75);
  color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.32);
}

#filterHorde.active:hover {
  background: rgba(239, 68, 68, 0.26);
  border-color: #fca5a5;
  color: #fff;
}

#filterPvP.active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.75);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

#filterPvP.active:hover {
  background: rgba(245, 158, 11, 0.26);
  border-color: #fde68a;
  color: #fff;
}

#filterPvE.active {
  background: rgba(0, 240, 255, 0.14);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.28);
}

.toggle-pill--icon {
  padding-left: 5px;
}

.toggle-pill-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: filter 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.toggle-pill:not(.active) .toggle-pill-icon {
  filter: grayscale(0.65);
  opacity: 0.75;
}

.toggle-pill.active .toggle-pill-icon {
  filter: none;
  opacity: 1;
  border-color: currentColor;
}

/* ==========================================================================
   5. HERO & LAUNCH STRIP
   ========================================================================== */
.hero-card {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-top: 1px solid rgba(212, 164, 76, 0.35);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
}

.hero-banner-container {
  position: relative;
  width: 100%;
  height: 240px;
  background: #070709;
  overflow: hidden;
}

.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

.hero-banner-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-video {
    display: none !important;
  }
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(7, 7, 9, 0.08) 0%, rgba(7, 7, 9, 0.52) 100%),
    linear-gradient(180deg, rgba(7, 7, 9, 0.32) 0%, rgba(7, 7, 9, 0.12) 48%, rgba(7, 7, 9, 0.88) 100%);
  pointer-events: none;
}

.hero-banner-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
  padding: 0;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
}

.hero-guild-title {
  font-family: 'LifeCraft', 'Friz Quadrata', 'Cinzel', Georgia, serif;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  color: #f6f4ee;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(8, 6, 4, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.98);
}

/* 50% Compact Hero Banner on All Non-Roster Pages */
.hero-card.hero-banner-compact .hero-banner-container,
.hero-banner-container.hero-banner-compact {
  height: 120px !important;
  min-height: 120px !important;
}

.hero-card.hero-banner-compact .hero-guild-title,
.hero-banner-container.hero-banner-compact .hero-guild-title {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem) !important;
  letter-spacing: 0.12em !important;
  padding-left: 0.12em !important;
  text-align: center;
  padding-right: 12px;
}

@media (max-width: 768px) {
  .hero-card.hero-banner-compact .hero-banner-container,
  .hero-banner-container.hero-banner-compact {
    height: 75px !important;
    min-height: 75px !important;
  }
}

.launch-strip {
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.96) 0%, rgba(16, 14, 12, 0.98) 100%);
  border: 1px solid var(--border-bronze, #473621);
  border-left: 3px solid var(--gold-barrens, #d4a44c);
  border-right: 3px solid var(--gold-barrens, #d4a44c);
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.launch-strip-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.launch-date-text {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-ivory, #f6f4ee);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.launch-strip-center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}

.launch-strip-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.countdown-pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--gold-barrens, #d4a44c);
  box-shadow: 0 0 8px var(--gold-barrens, #d4a44c);
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.countdown-bar-digits {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cd-chip {
  background: var(--bg-abyss, #080706);
  border: 1px solid var(--border-bronze, #473621);
  border-radius: var(--radius-btn);
  padding: 5px 11px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.65);
}

.cd-num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold-crest, #f2c96d);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: center;
  min-width: 26px;
}

.cd-lbl {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-barrens, #d4a44c);
  text-transform: uppercase;
}

.cd-sep {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-barrens, #d4a44c);
  opacity: 0.7;
}

.square-quick-link {
  width: 28px;
  height: 28px;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.15s ease;
}

.square-quick-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.square-quick-link:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.square-quick-link.discord-link { color: #5865F2; }

.square-quick-link.discord-link:hover {
  border-color: #5865F2;
  background: rgba(88, 101, 242, 0.15);
  color: #ffffff;
}

.discord-icon-svg { display: block; }

/* ==========================================================================
   6. GUILD POLL
   ========================================================================== */
.poll-toggle-bar,
.enlist-toggle-bar {
  display: flex;
  justify-content: flex-start;
}

.guild-poll-section { --accent: var(--neon-amber); }

.poll-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poll-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.poll-badge-icon { font-size: 16px; }

.poll-main-title { color: #ffffff; }

.poll-status-chip {
  background: rgba(0, 255, 150, 0.12);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 7px;
}

.poll-header-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.poll-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-voters-chip {
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.35);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-amber);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}

.poll-grid-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
}

.poll-vote-box,
.poll-results-box {
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.poll-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}

.poll-box-num {
  background: var(--neon-cyan);
  color: #0b0f14;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.poll-form-group { margin-bottom: 12px; }

.poll-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.poll-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.poll-label-row .poll-label { margin-bottom: 0; }

.poll-label-req {
  color: var(--color-off);
  font-weight: 900;
}

.poll-label-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}

.poll-badge-tz {
  font-size: 10px;
  font-weight: 700;
  color: var(--neon-green);
  background: rgba(0, 255, 150, 0.1);
  padding: 1px 6px;
}

.poll-input,
.poll-select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.poll-input:focus,
.poll-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

.poll-days-selector {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.poll-day-btn {
  background: #11161d;
  border: 1px solid #232c37;
  border-radius: var(--radius-btn);
  color: #94a3b8;
  padding: 6px 2px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
  user-select: none;
}

.poll-day-btn:hover {
  border-color: #3b4859;
  color: #e2e8f0;
}

.poll-day-btn.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.35);
}

.poll-day-btn .day-check {
  font-size: 9px;
  opacity: 0;
  color: var(--neon-cyan);
  transition: opacity 0.15s;
}

.poll-day-btn.active .day-check { opacity: 1; }
.poll-day-btn .day-name { line-height: 1; }

.poll-time-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.poll-time-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.time-sublabel {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.time-arrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 14px;
}

.poll-server-time-preview {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 8px;
  border-left: 2px solid var(--neon-cyan);
}

.poll-server-time-preview strong {
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}

.poll-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-poll-submit {
  background: linear-gradient(180deg, #c41e3a 0%, #871023 100%);
  border: 1px solid #ff4d6d;
  border-radius: var(--radius-btn);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 10px rgba(196, 30, 58, 0.4);
}

.btn-poll-submit:hover {
  background: linear-gradient(180deg, #d62846 0%, #9e142c 100%);
  box-shadow: 0 0 15px rgba(255, 77, 109, 0.6);
}

.btn-poll-submit:disabled { opacity: 0.6; cursor: wait; }

.poll-user-status {
  font-size: 11px;
  color: var(--color-on);
  background: var(--on-bg);
  border: 1px solid var(--on-border);
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.poll-summary-subgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poll-subgroup-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}

.subgroup-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}

.poll-bars-container,
.poll-times-rank-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.poll-bar-item {
  display: grid;
  grid-template-columns: 36px 1fr 68px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.bar-day-name {
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.bar-day-name.is-top { color: var(--neon-amber); }

.bar-track {
  background: #11161f;
  border: 1px solid #1f2733;
  height: 12px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  transition: width 0.4s ease;
}

.bar-fill.is-top {
  background: linear-gradient(90deg, #d48b00, var(--neon-amber));
  box-shadow: 0 0 8px rgba(255, 183, 3, 0.4);
}

.bar-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.bar-meta strong { color: #ffffff; }
.bar-meta.is-top strong { color: var(--neon-amber); }

.time-rank-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #10151c;
  border: 1px solid #1f2733;
  padding: 6px 10px;
  font-size: 11px;
}

.time-rank-badge.rank-1 {
  border-left: 3px solid #ffd700;
  background: rgba(255, 215, 0, 0.05);
}

.time-rank-badge.rank-2 {
  border-left: 3px solid #c0c0c0;
  background: rgba(192, 192, 192, 0.05);
}

.time-rank-badge.rank-3 {
  border-left: 3px solid #cd7f32;
  background: rgba(205, 127, 50, 0.05);
}

.time-rank-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ffffff;
}

.time-medal { font-size: 12px; }

.time-rank-right {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.time-rank-right strong { color: var(--neon-green); }

.poll-voter-toggle-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.btn-toggle-voters {
  background: transparent;
  border: none;
  border-radius: var(--radius-btn);
  color: var(--neon-cyan);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
}

.btn-toggle-voters:hover {
  color: #ffffff;
  text-decoration: underline;
}

.poll-voter-breakdown-list {
  margin-top: 8px;
  max-height: 140px;
  overflow-y: auto;
  flex-direction: column;
  background: #090c10;
  border: 1px solid var(--line-strong);
}

.voter-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}

.voter-row-item:last-child { border-bottom: none; }
.voter-row-name { font-weight: 700; color: #ffffff; }

.voter-row-details {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
}

.voter-row-days { color: var(--neon-cyan); }

/* ==========================================================================
   7. CHARACTER BREAKDOWN
   ========================================================================== */
.class-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}

.class-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--class-col);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.class-stat-card:hover {
  border-color: var(--class-col);
  box-shadow: 0 0 12px color-mix(in srgb, var(--class-col) 45%, transparent);
}

.class-stat-card.zero-picks { opacity: 0.55; }
.class-stat-card.zero-picks:hover { opacity: 1; }

.class-stat-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 5px;
  object-fit: cover;
}

.class-stat-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.class-stat-count {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
  margin: 2px 0 3px;
}

.class-stat-card.has-picks .class-stat-count {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.class-stat-sub {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.class-stat-breakdowns {
  width: 100%;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.breakdown-sub-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.breakdown-sub-label {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.mini-chip-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
}

.mini-breakdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 1px 3px;
  font-size: 10px;
}

.mini-breakdown-chip.is-active {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.mini-breakdown-chip.is-zero { opacity: 0.35; }

.mini-chip-img {
  width: 14px;
  height: 14px;
  object-fit: cover;
  display: block;
}

.mini-chip-val {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.mini-chip-empty {
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
   8. ADD CHARACTER FORM (shared with Edit modal)
   ========================================================================== */
.enlist-card {
  --accent: var(--neon-green);
  animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.enlist-main-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2px;
}

.enlist-main-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.form-grid-balanced {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.input-with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  padding: 3px 6px 3px 4px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.input-with-icon:focus-within {
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px var(--neon-green);
}

.field-icon {
  width: 26px;
  height: 26px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Universal Dark Mode for Form Controls & Dropdowns */
select,
.form-select,
.form-select-plain,
.poll-select,
.craft-select {
  color-scheme: dark;
  width: 100%;
  background-color: #11161d !important;
  color: #f1f5f9 !important;
  border: 1px solid #283244 !important;
  border-radius: var(--radius);
  padding: 8px 30px 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select:focus,
.form-select:focus,
.form-select-plain:focus,
.poll-select:focus,
.craft-select:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}

select option,
.form-select option,
.form-select-plain option,
.poll-select option,
.craft-select option {
  background-color: #11161d !important;
  color: #f1f5f9 !important;
  padding: 8px 12px;
}

select option:checked,
.form-select option:checked,
.form-select-plain option:checked,
.poll-select option:checked,
.craft-select option:checked {
  background-color: #1e293b !important;
  color: var(--neon-cyan) !important;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
  background-color: #11161d !important;
  color: #f1f5f9 !important;
  border: 1px solid #283244 !important;
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}

.form-input-plain {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-input-plain:focus {
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px var(--neon-green);
}

.form-actions-row {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* Secondary professions: checkbox chips rendered as on/off toggle pills */
.sec-prof-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 36px;
}

.sec-prof-checkbox-chip {
  position: relative;
  text-transform: none;
  letter-spacing: 0.01em;
  padding-left: 3px;
}

.sec-prof-checkbox-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sec-prof-checkbox-chip:has(input:focus-visible) {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

.chip-trade-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid currentColor;
}

.sec-prof-checkbox-chip:not(:has(input:checked)) .chip-trade-img { filter: grayscale(0.5); }

/* Racial abilities preview under the Race field */
.form-racials-preview {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--radius);
  display: none;
  box-sizing: border-box;
}

.form-racials-preview.has-racials { display: block; }

.form-racials-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffd700;
  margin-bottom: 6px;
}

.form-racials-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.form-racial-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 6px;
  text-decoration: none;
  transition: all 0.12s ease;
}

.form-racial-item:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.5);
}

.form-racial-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
  flex-shrink: 0;
}

.form-racial-name {
  font-size: 11px;
  font-weight: 700;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   9. CHARACTER ROSTER TABLE
   ========================================================================== */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.roster-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 13px;
}

.roster-table th {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-card);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}

.roster-table td {
  padding: 6px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: middle;
  white-space: nowrap;
}

/* Column dividers */
.roster-table th + th,
.roster-table td + td { border-left: 1px solid var(--line); }

.roster-table tbody tr:last-child td { border-bottom: none; }
.roster-table tbody tr:hover td { background: var(--bg-card); }

.roster-table .col-icon,
.roster-table .col-center { text-align: center; }

.roster-table .col-icon { width: 1%; }

.roster-table .col-actions {
  width: 1%;
  text-align: center;
}

/* Character name stays pinned while the table scrolls horizontally (mobile) */
.roster-table th.col-name {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card);
  min-width: 120px;
}

.roster-table td.col-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-surface);
  min-width: 120px;
}

.roster-table tbody tr:hover td.col-name {
  background: var(--bg-card);
}

@media (max-width: 768px) {
  .roster-table th.col-name,
  .roster-table td.col-name {
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5);
    border-right: 1px solid var(--line-strong);
  }
}

.roster-scroll-cue {
  display: none;
}

@media (max-width: 768px) {
  .roster-scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.05);
    border-bottom: 1px solid var(--line-strong);
  }
  .roster-scroll-cue .scroll-cue-arrow {
    font-size: 12px;
    opacity: 0.85;
  }
}

.table-empty {
  text-align: center;
  padding: 24px !important;
  color: var(--text-muted);
}

.char-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.icon-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  vertical-align: middle;
}

.prof-row { gap: 8px; }

.prof-sec {
  gap: 3px;
  padding-left: 8px;
  border-left: 1px solid var(--line-strong);
}

.icon-link {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.ro-icon {
  width: var(--icon);
  height: var(--icon);
  display: block;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ro-icon--sec {
  width: var(--icon-sec);
  height: var(--icon-sec);
}

.icon-link:hover .ro-icon {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
}

.socials-cell {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.social-icon-btn {
  position: relative;
  width: var(--icon);
  height: var(--icon);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.social-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-icon-btn[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.social-icon-btn:not([disabled]):hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
}

.social-icon-btn.discord:not([disabled]):hover { color: #5865F2; }
.social-icon-btn.bnet:not([disabled]):hover { color: #0074e0; }

.social-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #111;
  color: #fff;
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
}

.social-icon-btn.show-tooltip::after { opacity: 1; }

.row-actions {
  display: inline-flex;
  gap: 4px;
}

.btn-row-action {
  width: var(--icon);
  height: var(--icon);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #050403;
  border: 1px solid var(--border-bronze, #473621);
  transition: all 0.14s ease;
}

.btn-row-action .ro-action-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.06);
  transition: transform 0.14s ease, filter 0.14s ease;
  pointer-events: none;
}

.btn-row-action:hover .ro-action-icon {
  filter: brightness(1.18) contrast(1.08);
  transform: scale(1.08);
}

.btn-row-armory {
  border-color: rgba(212, 164, 76, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(212, 164, 76, 0.18);
}

.btn-row-armory:hover {
  border-color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.45) !important;
}

.btn-row-edit {
  background: #050403;
  border: 1px solid rgba(212, 164, 76, 0.45);
  color: var(--gold-crest, #f2c96d);
}

.btn-row-edit:hover {
  border-color: var(--gold-crest, #f2c96d);
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.4);
  color: #fff;
}

.btn-row-delete {
  background: #050403;
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--color-off);
}

.btn-row-delete:hover {
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
  color: #fff;
}

/* ==========================================================================
   10. HOVER TOOLTIP (.wh-tip elements, see app.js initWowheadTooltips)
   ========================================================================== */
.wow-floating-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: rgba(10, 10, 14, 0.97);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 240, 255, 0.3);
  padding: 8px 12px;
  min-width: 170px;
  max-width: 280px;
  font-family: var(--font-sans);
}

.wow-floating-tooltip .tt-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wow-floating-tooltip .tt-icon {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  flex-shrink: 0;
}

.wow-floating-tooltip .tt-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wow-floating-tooltip .tt-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.wow-floating-tooltip .tt-type {
  font-size: 10px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wow-floating-tooltip .tt-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
  white-space: pre-line;   /* data-desc may contain line breaks */
}

.wow-floating-tooltip .tt-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #f7a61b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
  margin-top: 6px;
}

.wow-floating-tooltip .tt-wh-logo {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.wow-floating-tooltip .tt-ext {
  font-size: 11px;
  margin-left: auto;
}

/* ==========================================================================
   11. MODALS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--neon-green);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.modal-header {
  padding: 14px 18px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.modal-char-name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

/* Patch notes */
.patch-modal-dialog {
  max-width: 860px;
  border-top-color: var(--neon-cyan);
}

.patch-modal-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.patch-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.patch-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* Patch Modal Header Right & Branded Guide Pills */
.patch-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.patch-modal-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.class-guides-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.patch-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  line-height: 1;
  transition: all 0.15s ease;
}

.patch-guide-pill.pill-wowhead {
  background: rgba(232, 96, 20, 0.15);
  border: 1px solid rgba(232, 96, 20, 0.45);
  color: #fb923c;
}
.patch-guide-pill.pill-wowhead:hover {
  background: rgba(232, 96, 20, 0.28);
  border-color: #f97316;
  color: #ffedd5;
  transform: translateY(-1px);
}

.patch-guide-pill.pill-icyveins {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #38bdf8;
}
.patch-guide-pill.pill-icyveins:hover {
  background: rgba(14, 165, 233, 0.28);
  border-color: #0ea5e9;
  color: #f0f9ff;
  transform: translateY(-1px);
}

.patch-guide-pill.pill-foreverchanges {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
}
.patch-guide-pill.pill-foreverchanges:hover {
  background: rgba(0, 240, 255, 0.25);
  border-color: #00f0ff;
  color: #ffffff;
  transform: translateY(-1px);
}

.patch-guide-pill-svg {
  flex-shrink: 0;
}

.patch-class-tabs {
  display: flex;
  overflow-x: auto;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
  padding: 4px 12px 0;
  gap: 4px;
}

.patch-class-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.patch-class-tab img {
  width: 16px;
  height: 16px;
}

.patch-class-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.patch-class-tab.active {
  color: #ffffff;
  border-bottom-color: var(--class-color, var(--neon-cyan));
  background: rgba(255, 255, 255, 0.05);
}

.class-guides-banner {
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.guides-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.guides-links-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.12s ease;
}

.guide-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.guide-chip .ext-arrow {
  font-size: 11px;
  color: var(--text-muted);
}

.guide-chip:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
}

.patch-notes-list {
  display: flex;
  flex-direction: column;
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
}

.patch-empty-state {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.patch-item-card {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
  border-left: 3px solid var(--neon-cyan);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.patch-item-card:last-child { border-bottom: none; }
.patch-item-card.is-buff { border-left-color: var(--color-on); }
.patch-item-card.is-nerf { border-left-color: var(--color-off); }

.patch-item-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.patch-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.patch-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.patch-spell-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.patch-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
}

.patch-tag.buff {
  background: var(--on-bg);
  color: var(--color-on);
  border: 1px solid var(--on-border);
}

.patch-tag.nerf {
  background: var(--off-bg);
  color: var(--color-off);
  border: 1px solid var(--off-border);
}

.patch-tag.change {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 240, 255, 0.4);
}

.patch-item-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   12. RAID & CAMPFIRE PLANNER (see adhoc.js)
   ========================================================================== */
.planner-title-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  padding: 2px 4px 2px 0;
  color: inherit;
  cursor: pointer;
}

.planner-title-btn:hover .card-title { color: #fff; }
.planner-title-btn[aria-expanded="true"] .btn-chevron { transform: rotate(90deg); }

.planner-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.planner-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
}

.planner-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line-strong);
}

.planner-panel:last-child { border-right: none; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--bg-card);
  border-bottom: 2px solid var(--line-strong);
}

.panel-header h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
}

.panel-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.panel-count.is-on { color: var(--color-on); }

.panel-search {
  padding: 8px;
  border-bottom: 1px solid var(--line-strong);
}

.panel-search .form-input-plain { padding: 6px 8px; font-size: 12px; }

.panel-list {
  flex: 1;
  min-height: 160px;
  max-height: 520px;
  overflow-y: auto;
}

.panel-hint {
  font-size: 10px;
  color: var(--text-muted);
  padding: 5px 10px;
  border-top: 1px solid var(--line-strong);
}

.panel-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px;
  text-align: center;
}

.is-drop-target {
  outline: 1px dashed var(--neon-cyan);
  outline-offset: -1px;
  background: rgba(0, 240, 255, 0.04);
}

.is-dragging { opacity: 0.4; }

.is-rejected { animation: planner-reject 0.45s ease; }

@keyframes planner-reject {
  0%, 100% { transform: translateX(0); box-shadow: none; }
  20% { transform: translateX(-3px); box-shadow: 0 0 0 1px var(--color-off); }
  40% { transform: translateX(3px); box-shadow: 0 0 0 1px var(--color-off); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Available roster rows */
.planner-char {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--class-col);
  cursor: grab;
  user-select: none;
  min-width: 0;
}

.planner-char:hover { background: color-mix(in srgb, var(--class-col) 10%, transparent); }
.planner-char:active { cursor: grabbing; }

.planner-char-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.planner-char-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--class-col);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.planner-char-spec {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

.planner-char-profs {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

.planner-prof-icon {
  width: 16px;
  height: 16px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Raid groups */
.planner-panel--groups {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.groups-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  padding: 8px;
  align-content: stretch;
  box-sizing: border-box;
}

.raid-group {
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

.raid-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border-top: 2px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.raid-group-count {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.raid-group.is-partial .raid-group-header { border-top-color: var(--color-partial); }
.raid-group.is-partial .raid-group-count { color: var(--color-partial); }
.raid-group.is-full .raid-group-header { border-top-color: var(--color-on); }
.raid-group.is-full .raid-group-count { color: var(--color-on); }

.raid-group-slots {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: stretch;
}

.group-slot {
  flex: 1;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  min-width: 0;
  box-sizing: border-box;
}

.group-slot:last-child { border-bottom: none; }

.group-slot.is-filled {
  border-left-color: var(--class-col);
  background: color-mix(in srgb, var(--class-col) 9%, transparent);
  cursor: pointer;
}

.group-slot.is-filled:hover {
  background: var(--off-bg);
  border-left-color: var(--color-off);
}

.group-slot.is-filled:hover::after {
  content: '✕';
  margin-left: auto;
  font-size: 10px;
  color: var(--color-off);
}

.group-slot.is-empty {
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.16);
}

.group-slot-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.group-slot-name {
  font-weight: 700;
  color: var(--class-col);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Buffs & camp tracker */
.tracker-body {
  max-height: 600px;
  overflow-y: auto;
}

.tracker-section {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-strong);
}

.tracker-section:last-child { border-bottom: none; }

.tracker-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.tracker-section-btn:hover { border-color: var(--neon-cyan); }
.tracker-section-btn.is-open .btn-chevron { transform: rotate(90deg); }

.tracker-section-title {
  flex: 1;
  text-align: left;
}

.tracker-section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.tracker-section-count.is-on { color: var(--color-on); }

.tracker-section-body { padding-top: 6px; }

.tracker-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tracker-icon--lg {
  width: 20px;
  height: 20px;
}

.tracker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 12px;
  text-decoration: none;
  border-left: 2px solid transparent;
  background-image: none !important;
}

.tracker-row + .tracker-row { border-top: 1px solid var(--line); }

.tracker-row.is-on {
  color: var(--text-primary);
  border-left-color: var(--color-on);
  background-color: hsla(var(--hue-on), var(--harmony-s), var(--harmony-l), 0.06);
  background-image: none !important;
}

.tracker-row.is-off {
  color: var(--text-muted);
  border-left-color: var(--off-border);
}

.tracker-row.is-off .tracker-icon {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.tracker-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
  background-image: none !important;
}

.tracker-status {
  width: 12px;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  flex-shrink: 0;
}

.tracker-row.is-on .tracker-status { color: var(--color-on); }
.tracker-row.is-off .tracker-status { color: var(--color-off); }

.tracker-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracker-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-on);
}

/* Campfire cards */
.camp-card {
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
}

.camp-card + .camp-card { margin-top: 6px; }

.camp-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
  border-left: 2px solid var(--color-on);
}

.camp-card-head:hover { color: var(--neon-cyan); }

.camp-tiers {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}

.camp-tiers li {
  display: flex;
  gap: 6px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.tier-req {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Analogous warm progression for profession tiers */
.tier-1 { color: hsl(45, 85%, 60%); }
.tier-2 { color: hsl(32, 85%, 58%); }
.tier-3 { color: hsl(18, 80%, 58%); }

.tier-text b {
  color: #fff;
  font-weight: 700;
}

.camp-missing {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  width: 100%;
  overflow: hidden;
}

.camp-missing-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
  flex-shrink: 0;
}

.camp-missing-icons {
  display: flex;
  align-items: center;
  gap: 2.5px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.camp-missing a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.camp-missing-icon {
  width: 16px;
  height: 16px;
  display: block;
  filter: grayscale(1);
  opacity: 0.45;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: all 0.12s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.camp-missing a:hover .camp-missing-icon {
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.app-footer {
  border-top: 1px solid var(--line-strong);
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 12px;
}

.footer-content {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .class-breakdown-grid { grid-template-columns: repeat(5, 1fr); }

  /* Tracker drops below roster + groups */
  .planner-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .planner-panel:nth-child(2) { border-right: none; }
  .planner-panel:last-child {
    grid-column: 1 / -1;
    border-top: 2px solid var(--line-strong);
  }
  .tracker-body {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tracker-section {
    border-bottom: none;
    border-right: 1px solid var(--line-strong);
  }
  .tracker-section:last-child { border-right: none; }
}

@media (max-width: 960px) {
  .form-grid-balanced { grid-template-columns: repeat(2, 1fr); }
  .poll-grid-layout { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .launch-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 12px 16px;
  }
  .launch-strip-left,
  .launch-strip-center,
  .launch-strip-right {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .page-container { padding: 10px 8px 30px; }
  .page-container > section,
  .page-container > div { margin-bottom: 12px; }

  .card-header { padding: 8px 10px; gap: 8px; }
  .card-body { padding: 12px; }

  .hero-banner-container { height: 140px; }
  .hero-banner-brand { inset: 0; padding: 0; }
  .hero-guild-title { font-size: 38px; letter-spacing: 0.12em; padding-left: 0.12em; }

  .launch-strip { padding: 10px; }
  .launch-date-text { font-size: 11.5px; }

  .class-breakdown-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .class-stat-card { padding: 8px 4px; }

  .btn-toggle-poll,
  .btn-toggle-enlist { padding: 8px 14px; font-size: 12px; }

  /* Roster header: title on its own line, filters wrap below */
  .roster-header { flex-direction: column; align-items: flex-start; }

  /* Planner stacks into one column */
  .planner-header { flex-direction: column; align-items: flex-start; }
  .planner-grid { grid-template-columns: 1fr; }
  .planner-panel,
  .planner-panel:nth-child(2) {
    border-right: none;
    border-bottom: 2px solid var(--line-strong);
  }
  .planner-panel:last-child { border-bottom: none; border-top: none; }
  .panel-list { max-height: 260px; min-height: 0; }
  .groups-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tracker-body { display: block; }
  .tracker-section {
    border-right: none;
    border-bottom: 1px solid var(--line-strong);
  }

  .modal-overlay { padding: 8px; }
  .modal-dialog { max-height: 94vh; }
  .modal-header { padding: 10px 12px; }
  .modal-body { padding: 14px !important; }
  #editCharForm .form-grid-balanced { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  :root {
    --icon: 24px;
    --icon-sec: 12px;
  }

  .class-breakdown-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .class-breakdown-grid > .class-stat-card:last-child {
    grid-column: 1 / -1;
  }
  .class-stat-card {
    padding: 10px 8px;
  }

  .class-stat-name {
    font-size: 12px;
  }

  .roster-table { font-size: 12px; }
  .roster-table th,
  .roster-table td { padding: 5px 6px; }
  .roster-table .col-name { min-width: 96px; }
  .char-name { font-size: 13px; }
  .social-icon-btn svg { width: 16px; height: 16px; }

  .toggle-pill { padding: 3px 9px; font-size: 10px; }
  .toggle-pill--icon { padding-left: 3px; }
  .toggle-pill-icon { width: 16px; height: 16px; }

  .groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }

  .form-grid-balanced,
  #editCharForm .form-grid-balanced { grid-template-columns: 1fr !important; }
  .form-actions-row .btn-primary-neon { width: 100%; justify-content: center; }
}

@media (max-width: 500px) {
  .poll-days-selector { grid-template-columns: repeat(4, 1fr); }
  .poll-time-row { grid-template-columns: 1fr; }
  .time-arrow { display: none; }
}

@media (max-width: 480px) {
  .hero-banner-container { height: 115px; }
  .hero-guild-title { font-size: 30px; letter-spacing: 0.10em; padding-left: 0.10em; }
  .launch-date-text { font-size: 10.5px; }
  .countdown-bar-digits { gap: 4px; }
  .cd-chip { padding: 2px 6px; }
  .cd-num { font-size: 14px; }
  .cd-lbl { font-size: 9px; }
  .card-title { font-size: 11px; }
  .btn-patch-notes { padding: 4px 7px; font-size: 10px; }
  .class-breakdown-grid { grid-template-columns: repeat(2, 1fr); }
  .btn-toggle-poll,
  .btn-toggle-enlist { padding: 7px 12px; font-size: 11px; gap: 6px; }
}

@media (max-width: 360px) {
  .class-breakdown-grid { grid-template-columns: 1fr; }
}


/* Larger tap targets on touch screens */
@media (pointer: coarse) {
  .toggle-pill { min-height: 30px; }
  .tracker-section-btn { min-height: 34px; }
  .group-slot { height: 30px; }
  .planner-char { padding-top: 7px; padding-bottom: 7px; }
}

/* ==========================================================================
   15. TRADESKILLS, CRAFT COMMISSIONS & CAPTCHA STYLES
   ========================================================================== */

/* Guild Site Navigation Tabs — Reduced Height, Sharp Geometric Angles & Tactile Motion */
.guild-nav-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: #080b10;
  border: 1px solid var(--line-strong);
  border-bottom: 2px solid rgba(0, 240, 255, 0.35);
  padding: 4px 6px 0 6px;
  margin-bottom: 18px;
  border-radius: 0;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 6px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-poll-geom, var(--font-mono, monospace));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  background: rgba(14, 20, 30, 0.6);
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  position: relative;
}

.nav-tab-wow-icon {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.nav-tab:hover {
  color: #ffffff;
  background: #151e2d;
  border-color: rgba(0, 240, 255, 0.4);
  transform: translateY(-2px);
}

.nav-tab.active {
  color: var(--neon-cyan);
  background: #101824;
  border-color: var(--neon-cyan);
  border-top: 2px solid var(--neon-cyan);
  box-shadow: 0 -2px 12px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}

.nav-tab-badge {
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 5px;
  background: rgba(212, 164, 76, 0.16);
  color: var(--gold-crest, #f2c96d);
  border: 1px solid rgba(212, 164, 76, 0.42);
  border-radius: 0;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.nav-tab-badge.beta {
  background: rgba(224, 122, 46, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(224, 122, 46, 0.45);
  font-weight: 800;
}

/* Craft Hero Section */
.craft-hero-section {
  padding: 18px 20px;
  margin-bottom: 20px;
}

.craft-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.craft-hero-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 6px;
  max-width: 780px;
  line-height: 1.45;
}

.craft-hero-note {
  margin: 4px 0 0 0;
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
  letter-spacing: 0.2px;
}

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

.active-orders-count {
  display: inline-block;
  background: var(--neon-amber);
  color: #060608;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Craft Search Box */
.craft-search-box {
  margin: 18px 0 14px 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.craft-search-field {
  padding-left: 42px !important;
  padding-right: 38px !important;
  height: 44px;
  font-size: 14px !important;
  border-color: var(--line-strong) !important;
  background: var(--bg-card) !important;
}

.craft-search-field:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25) !important;
}

.clear-search-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.clear-search-btn:hover {
  color: var(--neon-red);
}

/* Profession Filter Pills - Flexible Sleek Wrap */
.craft-prof-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  width: 100%;
}

.prof-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
  min-width: 0;
  flex: 0 0 auto;
}

.prof-pill:hover {
  color: #ffffff;
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(26, 34, 52, 0.9);
}

.prof-pill.active {
  background: rgba(0, 240, 255, 0.15);
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.prof-pill-img {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  flex-shrink: 0;
}

.prof-pill-name {
  white-space: nowrap;
}

.prof-pill-count {
  font-size: 10.5px;
  min-width: 24px;
  height: 18px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.prof-pill.active .prof-pill-count {
  background: rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan);
}

/* Secondary Filters Bar */
.craft-secondary-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sec-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-filter-label {
  font-size: 12px;
  color: #e2e8f0;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.quality-pills-wrap {
  display: flex;
  gap: 4px;
}

.quality-pill {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 700;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.craft-secondary-filters #categoryFilter {
  height: 32px;
  min-height: 32px;
  padding: 4px 28px 4px 10px;
  font-size: 12px;
  box-sizing: border-box;
}

.craft-secondary-filters .shop-cart-only-label {
  padding: 0 12px;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.craft-secondary-filters .shop-cart-only-label .custom-checkbox-input {
  margin-top: 0;
  width: 14px;
  height: 14px;
}

.craft-secondary-filters .shop-cart-only-label .custom-checkbox-title {
  font-size: 11.5px;
  line-height: 1;
}

.craft-secondary-filters .filter-results-info {
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.quality-pill:hover {
  color: var(--text-primary);
  border-color: var(--line-strong);
}

.quality-pill.active {
  border-color: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.quality-pill[data-quality="all"].active { color: var(--text-primary); border-color: var(--line-strong); }
.quality-pill.q-epic { color: #a335ee; }
.quality-pill.q-rare { color: #0070dd; }
.quality-pill.q-uncommon { color: #1eff00; }
.quality-pill.q-common { color: #e5e7eb; }

.filter-results-info {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Items Catalog Grid */
.craft-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.craft-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.craft-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.craft-item-card.quality-epic { border-left: 3px solid #a335ee; }
.craft-item-card.quality-rare { border-left: 3px solid #0070dd; }
.craft-item-card.quality-uncommon { border-left: 3px solid #1eff00; }
.craft-item-card.quality-common { border-left: 3px solid #6b7280; }

.craft-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.craft-card-icon-box {
  flex-shrink: 0;
}

.craft-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  display: block;
}

.craft-card-header-info {
  flex: 1;
  min-width: 0;
}

.craft-card-category-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.craft-prof-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.craft-category-pill {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.2px;
  display: inline-block;
}

.craft-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.craft-title-link {
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.craft-title-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* Quality text colors */
.q-epic { color: #a335ee !important; }
.q-rare { color: #0070dd !important; }
.q-uncommon { color: #1eff00 !important; }
.q-common { color: #e5e7eb !important; }

.craft-card-body {
  margin-bottom: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.craft-effect-text {
  font-size: 12.5px;
  color: #d1d5db;
  line-height: 1.45;
  margin: 0 0 10px 0;
}

.craft-reagents-box {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 10px;
  font-size: 11.5px;
  margin-top: auto;
}

.reagents-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--neon-amber);
  margin-bottom: 3px;
}

.reagents-content {
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
}

.craft-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.card-crafter-count {
  font-size: 11px;
  color: var(--neon-green);
  font-weight: 600;
}

.craft-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.craft-card-actions .btn-wowhead-link,
.craft-card-actions .btn-sm-craft {
  height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.btn-wowhead-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  text-decoration: none;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  transition: all 0.15s ease;
}

.btn-wowhead-link:hover {
  color: #ffffff;
  border-color: #d15119;
  background: rgba(209, 81, 25, 0.15);
}

.wowhead-btn-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.btn-action-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.card-title-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.crafter-prof-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.modal-wow-icon {
  width: 20px;
  height: 20px;
  border-radius: 0;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.captcha-wow-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.empty-wow-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.btn-sm-craft {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Crafters Directory Drawer */
.guild-crafters-drawer,
.recent-orders-card {
  margin-bottom: 20px;
  animation: fadeIn 0.2s ease;
}

.crafters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.crafter-prof-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.crafter-prof-card:hover {
  border-color: var(--neon-cyan);
  background: var(--bg-card-hover);
}

.crafter-prof-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.crafter-prof-name {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-primary);
}

.crafter-prof-count {
  font-size: 11px;
  color: var(--neon-cyan);
  font-weight: 600;
}

.crafter-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.crafter-character-chip {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--text-secondary);
}

.crafter-character-chip.alliance { border-left: 2px solid #0078FF; }
.crafter-character-chip.horde { border-left: 2px solid #C41E3A; }

/* Orders Table */
.orders-table-wrapper {
  overflow-x: auto;
}

.craft-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.craft-orders-table th {
  background: var(--bg-card);
  color: var(--text-muted);
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

.craft-orders-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
}

.order-item-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
}

.table-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

/* Right-Angled Order Status & Action Buttons */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0 !important; /* Sharp right angle */
  line-height: 1.2;
}

.badge-status.pending {
  background: rgba(255, 183, 3, 0.12);
  color: var(--neon-amber);
  border: 1px solid var(--neon-amber);
}

.badge-status.claimed {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
}

.badge-status.completed {
  background: rgba(0, 255, 136, 0.12);
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
}

.btn-claim-order {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 5px 12px;
  border-radius: 0 !important; /* Sharp right angle */
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-claim-order:hover {
  background: var(--neon-cyan);
  color: #060608;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

/* Table Enhancements: Profession, Faction, Discord, Gold Coin */
.table-prof-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.table-prof-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.table-faction-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.table-faction-icon {
  width: 15px;
  height: 15px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.table-faction-row .faction-alliance {
  color: #0070dd;
}

.table-faction-row .faction-horde {
  color: #c41e3a;
}

.discord-user-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.4);
  color: #c7d2fe;
  padding: 3px 8px;
  border-radius: 0; /* Right angle */
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.discord-user-link:hover {
  background: rgba(88, 101, 242, 0.28);
  border-color: #5865f2;
  color: #fff;
  box-shadow: 0 0 8px rgba(88, 101, 242, 0.3);
}

.discord-svg-icon {
  flex-shrink: 0;
  color: #5865f2;
}

.discord-user-link:hover .discord-svg-icon {
  color: #fff;
}

.tip-amount-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  color: var(--neon-amber);
}

.money-gold-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
}

/* Modal Content & Selected Highlight */
.craft-modal-content {
  max-width: 620px;
  width: 92%;
}

.modal-selected-item-card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 4px;
}

.modal-item-img {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
}

.modal-item-details {
  flex: 1;
}

.modal-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.modal-item-name {
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.item-category-badge {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-muted);
}

.modal-item-effect {
  font-size: 12px;
  color: #d1d5db;
  line-height: 1.35;
}

.modal-item-materials {
  font-size: 11px;
  color: var(--neon-amber);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Anti-Bot Captcha Card */
.craft-captcha-card {
  background: rgba(14, 14, 20, 0.85);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--neon-cyan);
  padding: 14px;
  margin-top: 14px;
  border-radius: 4px;
}

.captcha-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.captcha-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.captcha-shield-icon {
  font-size: 15px;
}

.captcha-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.captcha-status-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0, 240, 255, 0.18);
  color: var(--neon-cyan);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.captcha-instructions {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}

.captcha-interactive-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.captcha-image-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-img {
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #09090d;
}

.btn-refresh-captcha {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-refresh-captcha:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.captcha-input-wrapper {
  flex: 1;
  min-width: 140px;
}

.captcha-code-input {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-align: center;
}

/* Feedback Banners */
.form-feedback-banner {
  padding: 12px 14px;
  border-radius: 4px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.form-feedback-banner.success {
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid var(--neon-green);
  color: #e5e7eb;
}

.form-feedback-banner.error {
  background: rgba(255, 42, 95, 0.15);
  border: 1px solid var(--neon-red);
  color: #ff99b0;
}

.feedback-success-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Craft Commission Form Improvements */
.tip-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tip-input-wrapper input {
  padding-right: 76px !important;
}

.tip-gold-suffix {
  position: absolute;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-amber);
  pointer-events: none;
  user-select: none;
}

.custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.custom-checkbox-container:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.custom-checkbox-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--neon-green);
  cursor: pointer;
  flex-shrink: 0;
}

.custom-checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-checkbox-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.custom-checkbox-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Empty State */
.craft-empty-state {
  text-align: center;
  padding: 48px 20px;
  background: var(--bg-surface);
  border: 1px dashed var(--line-strong);
  margin-bottom: 28px;
}

.empty-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}

.btn-close-sm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.btn-close-sm:hover {
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .craft-catalog-grid {
    grid-template-columns: 1fr;
  }
  .craft-header-flex {
    flex-direction: column;
    gap: 12px;
  }
  .craft-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .craft-header-actions .btn-secondary {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .craft-secondary-filters {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-results-info {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .craft-header-actions {
    flex-direction: column;
  }
  .craft-header-actions .btn-secondary {
    width: 100%;
  }
}

/* ==========================================================================
   16. DEDICATED POLLS & LIVE VISUALIZATIONS STYLES
   ========================================================================== */

.poll-page-hero {
  padding: 18px 20px;
  margin-bottom: 20px;
}

.poll-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--neon-green);
  border-radius: 50%;
  animation: pulseDot 1.4s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

.poll-hero-stats-box {
  display: flex;
  gap: 10px;
}

.stat-pill {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  min-width: 95px;
}

.stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--neon-cyan);
}

.stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

/* Consensus Sweet Spot Banner */
.consensus-sweetspot-card {
  background: linear-gradient(135deg, rgba(14, 25, 40, 0.95), rgba(19, 19, 27, 0.95));
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.sweetspot-icon-wrap {
  font-size: 32px;
  background: rgba(0, 240, 255, 0.12);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  flex-shrink: 0;
}

.sweetspot-content {
  flex: 1;
}

.sweetspot-badge {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--neon-cyan);
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.sweetspot-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.sweetspot-desc {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.sweetspot-metric {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.sweetspot-pct {
  font-size: 28px;
  font-weight: 900;
  color: var(--neon-green);
  line-height: 1;
}

.sweetspot-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 2px;
}

/* Two-Column Grid */
.polls-grid-wrapper {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 960px) {
  .polls-grid-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Voting Panel */
.poll-voting-panel {
  align-self: start;
}

.day-toggle-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.day-toggle-pill:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.day-toggle-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
}

.day-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.15s ease;
}

.day-toggle-pill.active .day-dot {
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
}

.poll-days-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.poll-time-row-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.time-sep-arrow {
  color: var(--text-muted);
  font-size: 12px;
}

.est-preview-bar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  border-radius: 3px;
}

.est-preview-bar strong {
  color: var(--neon-cyan);
  font-family: 'JetBrains Mono', monospace;
}

.badge-tz-pill {
  font-size: 10px;
  background: rgba(255, 183, 3, 0.15);
  color: var(--neon-amber);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

/* Heatmap Days Grid */
.heatmap-bars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.heatmap-day-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.heatmap-day-card:hover {
  transform: translateY(-2px);
  border-color: var(--neon-cyan);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.heatmap-day-card.is-top-leader {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
}

.day-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.day-card-name {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.crown-badge {
  font-size: 10px;
  background: rgba(255, 183, 3, 0.2);
  border: 1px solid var(--neon-amber);
  color: var(--neon-amber);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
}

.day-card-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.day-card-pct {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
}

.heatmap-day-card.heat-blazing .day-card-pct { color: var(--neon-green); }
.heatmap-day-card.heat-high .day-card-pct { color: var(--neon-cyan); }
.heatmap-day-card.heat-mid .day-card-pct { color: var(--neon-amber); }
.heatmap-day-card.heat-low .day-card-pct { color: var(--text-secondary); }

.day-card-count {
  font-size: 11px;
  color: var(--text-muted);
}

.day-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.day-progress-fill {
  height: 100%;
  background: var(--neon-cyan);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.heatmap-day-card.heat-blazing .day-progress-fill { background: var(--neon-green); }
.heatmap-day-card.heat-high .day-progress-fill { background: var(--neon-cyan); }
.heatmap-day-card.heat-mid .day-progress-fill { background: var(--neon-amber); }
.heatmap-day-card.heat-low .day-progress-fill { background: #4b5563; }

.day-card-footer {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}

.day-card-footer:hover {
  color: var(--neon-cyan);
}

/* Time Spectrum */
.time-spectrum-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.time-spectrum-row {
  display: grid;
  grid-template-columns: 190px 1fr 110px;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.time-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.time-row-medal {
  font-size: 14px;
}

.time-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.time-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--neon-cyan);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.time-bar-fill.rank-1 { background: #ffd700; }
.time-bar-fill.rank-2 { background: #c0c0c0; }
.time-bar-fill.rank-3 { background: #cd7f32; }

.time-row-right {
  text-align: right;
  font-size: 12.5px;
}

.time-votes-count {
  font-size: 11px;
  color: var(--text-muted);
}

/* Voter Wall */
.voter-search-box {
  width: 240px;
}

.voter-search-input {
  height: 32px !important;
  font-size: 12px !important;
}

.voter-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.voter-ballot-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.voter-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.voter-name {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-primary);
}

.voter-time-badge {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--neon-amber);
}

.voter-days-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.voter-day-chip {
  font-size: 10px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

/* Day Voters Modal */
.day-voters-list-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.day-voter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 4px;
}

.day-voter-item .voter-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}

@media (max-width: 600px) {
  .time-spectrum-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .time-row-right {
    text-align: left;
  }
}

/* ==========================================================================
   LARGE CENTER WEEKLY RAID CONSENSUS (1 ROW: TUE -> MON)
   ========================================================================== */
.weekly-hero-consensus-section {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--neon-cyan);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.weekly-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.weekly-hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weekly-hero-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.weekly-hero-subtitle {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.weekly-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weekly-seven-days-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

@media (max-width: 1024px) {
  .weekly-seven-days-row {
    overflow-x: auto;
    padding-bottom: 8px;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
  }
}

.weekly-day-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.18s ease;
  cursor: pointer;
  user-select: none;
}

.weekly-day-hero-card:hover {
  transform: translateY(-3px);
  border-color: var(--neon-cyan);
  box-shadow: 0 6px 18px rgba(0, 240, 255, 0.25);
}

.weekly-day-hero-card.is-top-leader {
  border-color: var(--neon-amber);
  box-shadow: 0 0 16px rgba(255, 183, 3, 0.25);
  background: linear-gradient(180deg, rgba(255, 183, 3, 0.08) 0%, var(--bg-card) 100%);
}

.weekly-day-hero-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.weekly-day-hero-pct {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: var(--neon-green);
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.weekly-day-hero-pct.pct-high { color: var(--neon-green); }
.weekly-day-hero-pct.pct-mid { color: var(--neon-cyan); }
.weekly-day-hero-pct.pct-low { color: var(--text-secondary); }

.weekly-day-hero-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.weekly-day-hero-meter {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}

.weekly-day-hero-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--neon-cyan);
  transition: width 0.6s ease;
}

.weekly-day-hero-meter-fill.fill-blazing { background: var(--neon-green); }
.weekly-day-hero-meter-fill.fill-mid { background: var(--neon-cyan); }
.weekly-day-hero-meter-fill.fill-low { background: #4b5563; }

.btn-view-day-voters {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-view-day-voters:hover {
  background: var(--neon-cyan);
  color: #060608;
}

/* ==========================================================================
   TOP 3 WINNING DAYS & TOP 3 TIMES HERO STRIP
   ========================================================================== */
.top3-days-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 0px;
    padding-top: 0px;
  border-top: 1px solid var(--line-strong);
}

@media (max-width: 768px) {
  .top3-days-hero-grid {
    grid-template-columns: 1fr;
  }
}

.top3-day-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 0;
}

.top3-day-card.rank-1 {
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-left: 4px solid #ffd700;
  background: rgba(255, 215, 0, 0.08);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

.top3-day-card.rank-2 {
  border: 1px solid rgba(192, 192, 192, 0.5);
  border-left: 4px solid #c0c0c0;
  background: rgba(192, 192, 192, 0.08);
  box-shadow: 0 0 10px rgba(192, 192, 192, 0.15);
}

.top3-day-card.rank-3 {
  border: 1px solid rgba(205, 127, 50, 0.5);
  border-left: 4px solid #cd7f32;
  background: rgba(205, 127, 50, 0.08);
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.15);
}

.top3-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.top3-day-title {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.top3-day-pct {
  font-size: 16px;
  font-weight: 900;
  color: var(--neon-green);
}

.top3-times-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.top3-time-pill {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan);
  border-radius: 0;
}

/* ==========================================================================
   RAID AVAILABILITY CLOCK (PIE / DIAL VISUALIZER)
   ========================================================================== */
.raid-clock-section {
  margin-bottom: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

.clock-sublabel {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

.clock-day-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.clock-day-tab {
  background: #0f141d;
  border: 1px solid var(--line);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.12s ease;
}

.clock-day-tab:hover {
  color: #fff;
  border-color: #3b4758;
}

.clock-day-tab.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.clock-visual-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: 20px;
  padding: 10px;
}

@media (max-width: 860px) {
  .clock-visual-container {
    grid-template-columns: 1fr;
  }
}

.raid-clock-svg {
  display: block;
  margin: 0 auto;
  max-width: 440px;
}

.clock-hub-info {
  background: #080a0f;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--neon-cyan);
  padding: 16px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clock-hub-prompt {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--neon-cyan);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.clock-hub-time {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono);
}

.clock-hub-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
}

.hub-stat.can { color: var(--neon-green); }
.hub-stat.cannot { color: var(--neon-red); }

.clock-hub-raiders {
  font-size: 11px;
  color: #94a3b8;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
}

/* ==========================================================================
   FORM SECTION BANNERS & ACCENTS
   ========================================================================== */
.form-section-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 0;
}

.form-section-banner.section-days-banner {
  border-left: 3px solid var(--neon-amber);
}

.form-section-banner.section-availability-banner {
  border-left: 3px solid var(--neon-cyan);
}

.form-section-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 0;
  background: rgba(255, 183, 3, 0.2);
  color: var(--neon-amber);
  border: 1px solid rgba(255, 183, 3, 0.4);
}

.form-section-badge.cyan {
  background: rgba(0, 240, 255, 0.15);
  color: var(--neon-cyan);
  border-color: rgba(0, 240, 255, 0.4);
}

.form-section-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
}

/* ==========================================================================
   TIME SELECTOR INSTRUCTION & LEGEND
   ========================================================================== */
.time-selector-header-wrap {
  text-align: center;
  margin-top: 22px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-selector-instruction {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.time-selector-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
}

.legend-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.dot-legend {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-legend.green {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

.dot-legend.red {
  background: var(--neon-red);
  box-shadow: 0 0 6px var(--neon-red);
}

.dot-legend.gray {
  background: #475569;
}

.legend-clicks-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

/* ==========================================================================
   EVEN GRID FOR 18 CLICKABLE TIME SLOTS (6:00 PM TO 2:30 AM)
   ========================================================================== */
.interactive-hours-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

@media (max-width: 680px) {
  .interactive-hours-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hour-toggle-btn {
  background: #0f141d;
  border: 1px solid #232c39;
  color: #94a3b8;
  border-radius: 0;
  padding: 9px 4px;
  font-size: 11.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.12s ease;
  user-select: none;
}

.hour-toggle-btn:hover {
  border-color: #3e4c5f;
  color: #ffffff;
  background: #141b26;
}

.hour-toggle-btn.state-can {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
}

.hour-toggle-btn.state-cannot {
  background: rgba(255, 42, 95, 0.18);
  border-color: #ff2a5f;
  color: #ff2a5f;
  box-shadow: 0 0 10px rgba(255, 42, 95, 0.25);
}

.hour-substate-text {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* HIGH-EMPHASIS SUBMIT BUTTON */
.btn-submit-raid-vote {
  width: 100%;
  background: linear-gradient(180deg, #00ff88 0%, #00994d 100%);
  border: 1px solid #33ff99;
  color: #05140b;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-submit-raid-vote:hover {
  background: linear-gradient(180deg, #33ff9f 0%, #00b359 100%);
  box-shadow: 0 0 26px rgba(0, 255, 136, 0.65);
  transform: translateY(-1px);
}

/* ==========================================================================
   SECTION HEADER SLICE & TECHNICAL TELEMETRY DISCLAIMER
   ========================================================================== */
.section-header-slice {
  background: #0c1017;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.section-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  display: inline-block;
}

.section-indicator-dot.cyan { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
.section-indicator-dot.amber { background: var(--neon-amber); box-shadow: 0 0 6px var(--neon-amber); }

.technical-disclaimer-box {
  background: #07090d;
  border: 1px solid rgba(0, 240, 255, 0.25);
  padding: 4px 8px;
  border-radius: 0;
  font-family: 'Fixedsys', 'Courier New', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tech-prompt { color: var(--neon-cyan); font-weight: 700; }
.tech-text { color: #94a3b8; }

/* ==========================================================================
   DUAL RAID TIMES REPRESENTATION (GREEN CAN vs RED CANNOT)
   ========================================================================== */
.dual-time-slot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dual-time-slot-row {
  display: grid;
  grid-template-columns: 85px 1fr;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 0;
  transition: border-color 0.15s ease;
  position: relative;
}

.dual-time-slot-row:hover {
  border-color: var(--line-strong);
}

.time-slot-label-thick {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
}

.time-bars-dual-track {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.dual-bar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dual-bar-fill-wrap {
  flex: 1;
  height: 11px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0;
  overflow: visible;
  position: relative;
}

.dual-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.5s ease;
  cursor: pointer;
  position: relative;
}

.dual-bar-fill.bar-green {
  background: linear-gradient(90deg, #00ff88, #2aff9d);
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

.dual-bar-fill.bar-red {
  background: linear-gradient(90deg, #ff2a5f, #ff6b8b);
  box-shadow: 0 0 6px rgba(255, 42, 95, 0.3);
  height: 7px;
}

.dual-bar-legend-count {
  font-size: 10.5px;
  font-weight: 700;
  min-width: 95px;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.dual-bar-legend-count.count-green { color: var(--neon-green); }
.dual-bar-legend-count.count-red { color: var(--neon-red); }

/* Interactive Hover Tooltips */
.time-hover-trigger {
  position: relative;
}

.time-custom-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #080b10;
  border: 1px solid #30363d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
  border-radius: 0;
  padding: 8px 12px;
  z-index: 100;
  min-width: 200px;
  max-width: 320px;
  pointer-events: none;
  white-space: normal;
}

.time-hover-trigger:hover .time-custom-tooltip {
  display: block;
}

.tooltip-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tooltip-title-green { color: var(--neon-green); }
.tooltip-title-red { color: var(--neon-red); }

.tooltip-raiders-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
}

.tooltip-raider-chip {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.roster-table th { text-align: center; }
.tracker-meta-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tracker-missing-class-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.12s ease;
}
.tracker-missing-class-icon.is-missing {
  filter: grayscale(1) opacity(0.45);
}
.tracker-missing-class-icon.is-active {
  filter: none;
  opacity: 1;
}

.camp-tiers .tier-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tier-icon {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.tier-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tier-text .tier-effect {
  font-size: 10px;
  color: var(--text-muted);
}
/* Roster Filters */
.toggle-pill.filter-btn {
  background: rgba(22, 19, 16, 0.92);
  border-color: var(--border-bronze, #473621);
  color: var(--text-parchment, #d6cbb8);
  opacity: 1;
}
.toggle-pill.filter-btn:not(.active) .toggle-pill-icon {
  filter: grayscale(1) opacity(0.45);
}
.toggle-pill.filter-btn.active .toggle-pill-icon {
  filter: none;
  opacity: 1;
}
/* Class Modal Icons */
.guide-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
  overflow: hidden;
}
.guide-chip-icon:hover {
  background: var(--bg-card-hover);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.guide-chip-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* Smaller secondary professions */
.ro-icon--sec {
  width: 14px !important;
  height: 14px !important;
}
/* Sharper Aesthetic for Panels */
.planner-panel,
.camp-card,
.tracker-section,
.hero-card,
.roster-card,
.intel-card,
.card {
  border-radius: 0 !important;
}
.modal-dialog {
  border-radius: 0 !important;
}
/* Stronger lines between sections */
.planner-grid {
  gap: 16px;
}
.tracker-section {
  border-bottom: 1px solid var(--line-strong);
}
.tracker-section:last-child {
  border-bottom: none;
}
.nav-tab-img {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Emphasized Submit Button */
.btn-submit-raid-vote {
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 180, 90, 0.4) 100%) !important;
  border: 1px solid var(--neon-green) !important;
  color: var(--neon-green) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  width: 100% !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2) !important;
}
.btn-submit-raid-vote:hover {
  background: var(--neon-green) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(0, 255, 136, 0.5) !important;
}

/* Thicker times */
.time-bold-text {
  font-size: 14px !important;
  font-weight: 900 !important;
  display: block;
  margin-bottom: 4px;
}
.hour-toggle-btn {
  padding: 10px 4px !important;
}

/* Technical disclaimer format */
.technical-disclaimer-box {
  background: #000;
  border: 1px solid #333;
  padding: 6px 10px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10px;
  color: #00ff00;
  display: inline-flex;
  gap: 8px;
  border-radius: 0;
}
.tech-prompt { color: #888; }

/* Tab-like styling overrides - Fill 100% of top space evenly across all tabs */
.guild-nav-bar {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 2px !important;
  margin-bottom: 6px !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.nav-tab {
  flex: 1 1 0px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 10px !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-bottom: 2px solid var(--border-bronze, #473621) !important;
  border-radius: 0 !important;
  background: var(--bg-basalt, #100e0c) !important;
  color: var(--text-parchment, #d6cbb8) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}
.nav-tab:hover {
  background: var(--bg-elevated, #1f1a15) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  border-bottom: 2px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}
.nav-tab.active {
  background: var(--bg-panel, #161310) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  border-bottom: 2px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 16px rgba(212, 164, 76, 0.22) !important;
}
#navPolls {
  border-color: var(--border-bronze, #473621) !important;
  box-shadow: none !important;
}
#navPolls:hover {
  border-color: var(--gold-barrens, #d4a44c) !important;
  box-shadow: none !important;
}
#navPolls.active {
  border-color: var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 0 14px rgba(212, 164, 76, 0.22) !important;
}

/* Master Grid Layout updated to match sleek design */
.weekly-grid-section {
  background: transparent;
  border: none;
  box-shadow: none;
}

.master-grid-layout {
  display: grid;
  grid-template-columns: 100px repeat(18, minmax(40px, 1fr));
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.grid-cell {
  background: transparent;
  height: 32px;
  position: relative;
  cursor: crosshair;
  transition: all 0.15s ease-out;
  border-right: 1px dashed rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.grid-cell:hover {
  transform: scale(1.15);
  z-index: 20;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  filter: brightness(1.2);
}

.grid-header-cell {
  background: var(--bg-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 0;
  border-bottom: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  position: sticky;
  top: 0;
  z-index: 5;
}

.grid-day-cell {
  background: var(--bg-surface);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 16px;
  text-transform: uppercase;
  border-right: 2px solid var(--line-strong);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  left: 0;
  z-index: 10;
}

/* Hourly grouping */
.grid-col-even {
  border-right: 2px solid var(--line-strong) !important;
}
.grid-hour-tint {
  background: rgba(255, 255, 255, 0.03);
}

/* States inner element for keeping borders clean */
.grid-cell .cell-inner {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  border-radius: 0;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.grid-cell:hover .cell-inner {
  opacity: 1;
}

.grid-cell.state-available .cell-inner {
  background: var(--neon-green);
  opacity: 0.85;
}
.grid-cell.state-unavailable .cell-inner {
  background: var(--neon-red);
  opacity: 0.85;
}
.grid-cell.state-overlap .cell-inner {
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 255, 136, 0.85),
    rgba(0, 255, 136, 0.85) 8px,
    rgba(255, 42, 95, 0.85) 8px,
    rgba(255, 42, 95, 0.85) 16px
  );
}

/* Tooltip updated */
.grid-tooltip {
  position: absolute;
  z-index: 9999;
  background: rgba(10, 14, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  pointer-events: none;
  font-size: 13px;
  color: #fff;
  min-width: 240px;
  display: none;
  backdrop-filter: blur(8px);
}

.grid-tooltip.visible {
  display: block;
}

.grid-tooltip-header {
  font-weight: 800;
  font-size: 16px;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 8px;
  margin-bottom: 12px;
  color: #fff;
}
.grid-tooltip-header .tt-day {
  color: var(--neon-green);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}

.grid-tooltip-section {
  margin-bottom: 12px;
}

.grid-tooltip-section strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: #9da0b5;
}

.grid-tooltip-section ul {
  list-style: none;
  padding-left: 12px;
  margin: 0;
  border-left: 2px solid var(--line-strong);
}
.grid-tooltip-section li {
  padding-left: 8px;
  margin-bottom: 4px;
  color: #e2e8f0;
  font-size: 12px;
}


.polls-grid-wrapper {
  display: block; /* Override previous grid layout to give voting full width */
}
.poll-voting-panel {
  max-width: 100% !important; /* Make sure it can expand */
}

/* Hero Overlays on Polls Banner */
.hero-live-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}
.hero-voters-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
}
.hero-voters-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  background: rgba(0, 0, 0, 0.65);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-btn);
  backdrop-filter: blur(4px);
}
.hero-voters-val {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  font-family: var(--font-mono);
}
.hero-voters-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.poll-live-indicator {
  font-size: 13px;
  padding: 8px 14px;
  background: var(--on-bg);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}
.poll-live-indicator:hover {
  background: var(--on-bg-hover);
  box-shadow: 0 0 15px var(--on-glow);
}
.live-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--neon-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--neon-green);
  animation: pulseGlow 1.8s infinite;
}

/* Time Selection Header & Legend */
.time-selector-header-wrap {
  text-align: center;
  margin-top: 22px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-selector-instruction {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.time-selector-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
}
.legend-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dot-legend {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-legend.green {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}
.dot-legend.red {
  background: var(--neon-red);
  box-shadow: 0 0 6px var(--neon-red);
}
.dot-legend.gray {
  background: #475569;
}
.legend-clicks-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.tz-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 11px;
}
.tz-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.tz-pill.active {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan);
  box-shadow: none;
}




/* Master Grid Alternating Rows */
.grid-day-cell.row-even { background: rgba(30, 41, 59, 1); } /* Darker slate */
.grid-day-cell.row-odd { background: rgba(40, 53, 72, 1); } /* Slightly lighter slate */

.grid-cell.row-even { background: rgba(30, 41, 59, 0.4); }
.grid-cell.row-odd { background: rgba(40, 53, 72, 0.4); }

.grid-hour-tint.row-even { background: rgba(30, 41, 59, 0.6); }
.grid-hour-tint.row-odd { background: rgba(40, 53, 72, 0.6); }







.btn-retract-raid-vote {
  background: linear-gradient(180deg, rgba(255, 77, 109, 0.2) 0%, rgba(200, 30, 60, 0.4) 100%) !important;
  border: 1px solid var(--neon-red) !important;
  color: var(--neon-red) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 0 15px rgba(255, 77, 109, 0.2) !important;
  width: 100% !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}
.btn-retract-raid-vote:hover {
  background: var(--neon-red) !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(255, 77, 109, 0.5) !important;
}






.btn-reset-raid-vote {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text-muted) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  width: 100% !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-reset-raid-vote:hover {
  border-color: #fff !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   16. DISCORD VOTING AUTHENTICATION & VERIFICATION
   ========================================================================== */
.discord-auth-strip {
  margin: 0 16px 20px 16px;
  padding: 12px 16px;
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: var(--radius-btn);
}
.discord-auth-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.discord-auth-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.discord-auth-info .discord-icon-svg {
  color: #5865f2;
  flex-shrink: 0;
}
.discord-auth-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.03em;
}
.discord-auth-sub {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}
.discord-auth-sub code {
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}
.btn-discord-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #5865f2;
  color: #ffffff;
  border-radius: var(--radius-btn);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-discord-login:hover {
  background: #4752c4;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.5);
  color: #ffffff;
}

.discord-auth-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.discord-user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.discord-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--neon-green);
  object-fit: cover;
  box-shadow: 0 0 8px var(--neon-green);
}
.discord-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.discord-user-tag {
  font-weight: 900;
  font-size: 14px;
  color: #ffffff;
}
.discord-linked-hint {
  display: block;
  font-size: 11px;
  color: var(--neon-green);
  font-weight: 600;
}
.btn-discord-logout {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-discord-logout:hover {
  border-color: var(--neon-red);
  color: var(--neon-red);
}

/* Verified Discord Badge in Tooltips & Modals */
.voter-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 10px;
  color: #5865f2;
  font-weight: 700;
  vertical-align: middle;
}
.voter-discord-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
}

/* ========================================================
   HIGH-END GAMING UX & BLIZZARD THEME EXTENSIONS
   ======================================================== */

/* Dynamic Canvas Embers Background */
.ember-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* Top Gaming HUD Bar */
.gaming-hud-strip {
  position: relative;
  z-index: 10;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  gap: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  flex-wrap: wrap;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.realm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.realm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 6px currentColor;
}

.realm-dot.online {
  background: #10b981;
  color: #10b981;
  animation: pulse-dot 2s infinite;
}

.realm-name {
  font-weight: 700;
  color: #f8fafc;
}

.realm-meta {
  color: #94a3b8;
  font-size: 11px;
}

.realm-ms {
  color: #38bdf8;
}

.bnet-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bnet-badge.connected {
  background: rgba(0, 116, 224, 0.18);
  border: 1px solid #0074e0;
  color: #60a5fa;
  box-shadow: 0 0 10px rgba(0, 116, 224, 0.3);
}

.bnet-badge.sim {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #facc15;
}

/* Raid Progression Strip */
.hud-center {
  display: flex;
  align-items: center;
}

.raid-prog-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.raid-prog-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.raid-prog-item img {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

.raid-prog-item.completed {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
}

.raid-prog-item.active {
  border-color: rgba(212, 175, 55, 0.6);
  color: #fef08a;
  background: rgba(212, 175, 55, 0.15);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.raid-prog-item.upcoming {
  border-color: rgba(255, 255, 255, 0.08);
  color: #64748b;
}

/* HUD Right: Audio & AI Links */
.hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-hud-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-hud-audio:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 175, 55, 0.6);
  color: #fff;
}

.btn-hud-audio.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.hud-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.4);
  color: #d8b4fe;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hud-link:hover {
  background: rgba(147, 51, 234, 0.3);
  color: #fff;
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.4);
}

/* Hero Typography Enhancement */
.hero-guild-title {
  font-family: 'LifeCraft', 'Friz Quadrata', 'Cinzel', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #f6f4ee;
  -webkit-text-stroke: 1.5px rgba(8, 6, 4, 0.92);
  paint-order: stroke fill;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.98);
}

.card-title, .enlist-main-title {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.05em;
}

/* Semantic Footer Layout */
.app-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  background: #08080c;
  padding: 28px 24px;
  margin-top: 48px;
}

.footer-content {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand-col {
  max-width: 380px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
}

.footer-trademark-text {
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
}

.footer-semantic-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-link-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-link-group .group-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d4af37; /* Gold accent */
  margin-bottom: 4px;
}

.footer-link-group a {
  font-size: 12px;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.15s ease;
}

.footer-link-group a:hover {
  color: #38bdf8;
  text-decoration: underline;
}

@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  .gaming-hud-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
  }
  .hud-center {
    justify-content: center;
  }
  .hud-right {
    justify-content: center;
  }
  .footer-content {
    flex-direction: column;
  }
}


/* ==========================================================================
   CHAOS MEN — UNIFIED WOW IDENTITY & OAUTH STYLES
   Battle.net Blue, Discord Blurple, Gold Filigree Frames, and Verified Badges
   ========================================================================== */

/* Top Auth & Sign In Strip — Compact Unified Bar (20% Reduced Height, Integrated Countdown & Quick Links) */
.top-auth-strip {
  view-transition-name: guild-top-auth;
  position: relative;
  z-index: 100;
  background: linear-gradient(90deg, #080706 0%, #161310 50%, #080706 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-bronze, #473621);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-sans, 'Inter', sans-serif);
  min-height: 30px;
}

.top-auth-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.top-auth-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.top-auth-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.top-auth-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.top-quick-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.top-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.top-auth-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-barrens, #d4a44c);
  text-shadow: none;
  text-transform: uppercase;
}

/* Compact elements inside the unified top bar (~22px height) */
.top-auth-strip .tactical-pill,
.top-auth-strip .tactical-pill.amber {
  padding: 1px 6px;
  font-size: 9.5px;
  height: 20px;
  line-height: 1;
  gap: 4px;
}

.top-auth-strip .countdown-pulse-dot {
  width: 5px;
  height: 5px;
}

.top-auth-strip .launch-date-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-parchment, #d6cbb8);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.top-auth-strip .countdown-bar-digits {
  gap: 3px;
}

.top-auth-strip .cd-chip {
  padding: 1px 6px;
  min-width: 38px;
  height: 22px;
  align-items: center;
  gap: 2px;
}

.top-auth-strip .cd-num {
  font-size: 13px;
  min-width: 18px;
}

.top-auth-strip .cd-lbl {
  font-size: 9.5px;
}

.top-auth-strip .cd-sep {
  font-size: 12px;
  line-height: 1;
}

.top-auth-strip .square-quick-link {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-color: var(--border-bronze, #473621);
  background: rgba(16, 14, 12, 0.92);
}

.top-auth-strip .square-quick-link img,
.top-auth-strip .square-quick-link svg {
  width: 14px;
  height: 14px;
}

.top-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 22px;
  min-height: 22px;
  min-width: 88px;
  padding: 0 10px;
  border-radius: 3px !important;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border: 1px solid var(--border-bronze, #473621);
}

.top-auth-btn.chaos-signin-btn {
  background: linear-gradient(180deg, rgba(42, 32, 21, 0.96) 0%, rgba(20, 15, 10, 0.98) 100%);
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(242, 201, 109, 0.22);
}

.top-auth-btn.chaos-signin-btn:hover {
  background: linear-gradient(180deg, rgba(61, 47, 31, 0.98) 0%, rgba(30, 23, 14, 1) 100%);
  border-color: #ffd700 !important;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.top-auth-btn.bnet {
  background: rgba(14, 116, 144, 0.22);
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #f6f4ee;
  box-shadow: none;
}

.top-auth-btn.bnet:hover {
  background: rgba(2, 132, 199, 0.45);
  border-color: #7dd3fc !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px);
  color: #ffffff;
}

.top-auth-btn.discord {
  background: rgba(88, 101, 242, 0.22);
  border: 1px solid rgba(129, 140, 248, 0.55) !important;
  color: #f6f4ee;
  box-shadow: none;
}

.top-auth-btn.discord:hover {
  background: rgba(88, 101, 242, 0.5);
  border-color: #a5b4fc !important;
  box-shadow: 0 0 10px rgba(88, 101, 242, 0.4);
  transform: translateY(-1px);
  color: #ffffff;
}

.top-auth-btn.steam {
  background: rgba(31, 26, 21, 0.85);
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-parchment, #d6cbb8);
  box-shadow: none;
}

.top-auth-btn.steam:hover {
  background: rgba(44, 36, 27, 0.95);
  border-color: var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.3);
  transform: translateY(-1px);
  color: #ffffff;
}

.top-auth-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 900px) {
  .top-auth-strip .launch-date-text {
    display: none;
  }
}

@media (max-width: 640px) {
  .top-auth-strip {
    padding: 3px 10px;
  }
  .top-auth-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
  }
  .top-auth-left {
    display: none;
  }
  .top-auth-actions {
    gap: 6px;
    justify-content: flex-end;
  }
  .top-auth-btn {
    padding: 0 8px;
    font-size: 9.5px;
  }
}

/* HUD Auth Elements */
.hud-auth-container {
  display: flex;
  align-items: center;
}

.btn-hud-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #2a2015 0%, #15100a 100%);
  border: 1px solid #d4af37;
  color: #f7e6a7;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.btn-hud-auth:hover {
  background: linear-gradient(180deg, #3d2f1f 0%, #1e170e 100%);
  border-color: #ffd700;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.hud-user-badge-wrap {
  position: relative;
}

.hud-user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 1px 8px 1px 3px;
  background: rgba(14, 14, 20, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 3px !important;
  font-family: var(--font-poll-geom, 'Chakra Petch', sans-serif);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hud-user-badge:hover {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.hud-user-badge.dual-verified {
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
}

.hud-user-avatar {
  width: 18px;
  height: 18px;
  border-radius: 2px !important;
  border: 1px solid #d4af37;
  object-fit: cover;
}

.hud-user-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.05;
}

.hud-user-name {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-user-sub {
  font-size: 8px;
  color: #d4af37;
  letter-spacing: 0.4px;
}

.hud-user-caret {
  font-size: 9px;
  color: #a0a0b0;
  margin-left: 2px;
}

/* User Dropdown */
.hud-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: #0f1016;
  border: 1px solid #383849;
  border-top: 2px solid #d4af37;
  border-radius: 0px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85);
  z-index: 1000;
  padding: 12px;
  animation: dropdown-fade-in 0.15s ease-out;
}

@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hud-dropdown-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.hud-dropdown-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.5px;
}

.hud-dropdown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.badge-bnet-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: rgba(0, 116, 224, 0.15);
  border: 1px solid rgba(0, 116, 224, 0.4);
  color: #69b8ff;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.badge-discord-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: rgba(88, 101, 242, 0.15);
  border: 1px solid rgba(88, 101, 242, 0.4);
  color: #9da8ff;
  padding: 2px 6px;
  border-radius: 0px;
}

.badge-steam-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: rgba(23, 29, 37, 0.85);
  border: 1px solid rgba(102, 192, 244, 0.45);
  color: #66c0f4;
  padding: 2px 6px;
  border-radius: 0px;
}

.hud-dropdown-section {
  margin-bottom: 10px;
}

.hud-dropdown-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8c8f9f;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.hud-char-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-char-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hud-char-item:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

.hud-char-item.active {
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.35);
  color: #ffffff;
}

.char-class-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.char-class-dot.warrior { background: #C79C6E; }
.char-class-dot.paladin { background: #F58CBA; }
.char-class-dot.hunter { background: #ABD473; }
.char-class-dot.rogue { background: #FFF569; }
.char-class-dot.priest { background: #FFFFFF; }
.char-class-dot.shaman { background: #0070DE; }
.char-class-dot.mage { background: #69CCF0; }
.char-class-dot.warlock { background: #9482C9; }
.char-class-dot.druid { background: #FF7D0A; }

.char-name {
  flex: 1;
  font-weight: 600;
}

.char-level {
  font-size: 10px;
  color: #a0a0b0;
}

.char-check {
  color: #00ff88;
  font-weight: 700;
}

.hud-dropdown-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.btn-dropdown-link.bnet {
  background: rgba(0, 116, 224, 0.2);
  border: 1px solid rgba(0, 116, 224, 0.5);
  color: #69b8ff;
}
.btn-dropdown-link.bnet:hover {
  background: rgba(0, 116, 224, 0.35);
  color: #ffffff;
}

.btn-dropdown-link.discord {
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid rgba(88, 101, 242, 0.5);
  color: #9da8ff;
}
.btn-dropdown-link.discord:hover {
  background: rgba(88, 101, 242, 0.35);
  color: #ffffff;
}

.btn-dropdown-link.steam {
  background: rgba(23, 29, 37, 0.85);
  border: 1px solid rgba(102, 192, 244, 0.5);
  color: #66c0f4;
}
.btn-dropdown-link.steam:hover {
  background: rgba(102, 192, 244, 0.25);
  border-color: #66c0f4;
  color: #ffffff;
}

.btn-dropdown-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1d4e0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.15s ease;
}
.btn-dropdown-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.btn-dropdown-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.15s ease;
}
.btn-dropdown-logout:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ffffff;
}

/* ==========================================================================
   CHAOS MEN AUTH MODAL (WOW-THEMED)
   ========================================================================== */

.chaos-auth-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.chaos-auth-modal-overlay.active {
  display: flex;
}

.chaos-auth-modal-frame {
  width: 100%;
  max-width: 520px;
  background: #0d0e14;
  border: 2px solid #54442b;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(212, 175, 55, 0.1);
  overflow: hidden;
  animation: modal-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-gold-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, #241a10 0%, #120d08 100%);
  border-bottom: 2px solid #d4af37;
}

.modal-gold-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: #a0a0b0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}
.modal-close-btn:hover {
  color: #ffffff;
}

.modal-gold-body {
  padding: 20px;
}

.auth-intro-banner {
  text-align: center;
  margin-bottom: 20px;
}

.auth-intro-heading {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.auth-intro-sub {
  font-size: 12px;
  color: #9da0b5;
  line-height: 1.5;
  margin: 0;
}

.auth-provider-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-oauth-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn-oauth-provider.bnet {
  background: linear-gradient(90deg, rgba(0, 116, 224, 0.2) 0%, rgba(0, 116, 224, 0.05) 100%);
  border: 1px solid #0074e0;
  color: #ffffff;
}
.btn-oauth-provider.bnet:hover {
  background: linear-gradient(90deg, rgba(0, 116, 224, 0.35) 0%, rgba(0, 116, 224, 0.15) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(0, 116, 224, 0.4);
  transform: translateY(-1px);
}

.btn-oauth-provider.discord {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.05) 100%);
  border: 1px solid #5865F2;
  color: #ffffff;
}
.btn-oauth-provider.discord:hover {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.35) 0%, rgba(88, 101, 242, 0.15) 100%);
  border-color: #818cf8;
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
  transform: translateY(-1px);
}

.btn-oauth-provider.steam {
  background: linear-gradient(90deg, rgba(23, 29, 37, 0.9) 0%, rgba(102, 192, 244, 0.1) 100%);
  border: 1px solid #66c0f4;
  color: #ffffff;
}
.btn-oauth-provider.steam:hover {
  background: linear-gradient(90deg, rgba(23, 29, 37, 1) 0%, rgba(102, 192, 244, 0.25) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(102, 192, 244, 0.4);
  transform: translateY(-1px);
}

.provider-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.btn-oauth-provider.bnet .provider-icon-wrap { color: #0074e0; }
.btn-oauth-provider.discord .provider-icon-wrap { color: #5865F2; }
.btn-oauth-provider.steam .provider-icon-wrap { color: #66c0f4; }

.provider-text-wrap {
  display: flex;
  flex-direction: column;
}

.provider-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.provider-desc {
  font-size: 11px;
  color: #a0a0b0;
  margin-top: 2px;
}

.auth-security-notice {
  margin-top: 18px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 2px solid #d4af37;
  font-size: 11px;
  color: #8c8f9f;
  line-height: 1.4;
}

/* Profile Card in Modal */
.auth-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e293b;
  border-radius: 0px !important;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.profile-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 0px !important;
  border: 1px solid #fbbf24;
  object-fit: cover;
  flex-shrink: 0;
  background: #090d16;
}

.profile-card-info {
  flex: 1;
  min-width: 0;
}

.profile-card-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Status Badges - Pure Geometric Square */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 0px !important;
  text-transform: uppercase;
  box-sizing: border-box;
}

/* Green for Signed In */
.badge-status.online {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid #10b981 !important;
  color: #34d399 !important;
}

/* Red for Not Signed In / Unlinked */
.badge-status.pending,
.badge-status.offline {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid #ef4444 !important;
  color: #f87171 !important;
}

.auth-linking-section {
  margin-top: 14px;
  margin-bottom: 14px;
}

.section-sub-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

/* Strictly Even 3-Column Grid */
.linking-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .linking-row {
    grid-template-columns: 1fr;
  }
}

.linking-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-sizing: border-box;
}

/* Provider Pill - Geometric Square, Even Height, Zero Overflow */
.provider-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  height: 54px;
  box-sizing: border-box;
  border-radius: 0px !important;
  min-width: 0;
  overflow: hidden;
  transition: all 0.15s ease;
}

/* Green for Signed in */
.provider-pill.connected {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid #10b981 !important;
}

/* Red for Not signed in */
.provider-pill:not(.connected),
.provider-pill.disconnected {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid #ef4444 !important;
}

.provider-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.provider-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.provider-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-status {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  margin-top: 2px;
}

/* Text status colors */
.provider-pill.connected .provider-status {
  color: #34d399 !important; /* Green for Signed In */
}

.provider-pill:not(.connected) .provider-status,
.provider-pill.disconnected .provider-status {
  color: #f87171 !important; /* Red for Not Signed In */
}

/* Buttons Under Pills - Pure Square Geometric & Uniform Height */
.btn-link-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0px !important;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-link-sm.bnet {
  background: rgba(0, 116, 224, 0.15);
  border: 1px solid #0074e0;
  color: #60a5fa;
}
.btn-link-sm.bnet:hover {
  background: rgba(0, 116, 224, 0.3);
  color: #ffffff;
}

.btn-link-sm.discord {
  background: rgba(88, 101, 242, 0.15);
  border: 1px solid #5865F2;
  color: #a5b4fc;
}
.btn-link-sm.discord:hover {
  background: rgba(88, 101, 242, 0.3);
  color: #ffffff;
}

.btn-link-sm.steam {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #66c0f4;
  color: #66c0f4;
}
.btn-link-sm.steam:hover {
  background: rgba(102, 192, 244, 0.2);
  color: #ffffff;
}

.btn-unlink-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0px !important;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}
.btn-unlink-sm:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ffffff;
}

/* Character Drawer & Verified Cards */
.auth-char-manager {
  margin-top: 14px;
}

.staged-bnet-sync-badge {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 0px !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.auth-char-empty {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.verified-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.char-select-card {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #334155;
  border-radius: 0px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.char-select-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: #64748b;
}

/* Green for Active Selected Character */
.char-select-card.selected {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid #10b981 !important;
}

.char-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #f8fafc;
}

.char-select-name {
  font-weight: 800;
}

.char-select-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #e2e8f0;
}

.char-select-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  color: #94a3b8;
}

.char-class-badge {
  font-weight: 600;
}

.char-realm {
  font-size: 10px;
  color: #64748b;
}

.char-active-tag {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #34d399 !important;
  text-transform: uppercase;
}

/* Modal Footer Actions */
.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #1e293b;
  box-sizing: border-box;
}

.btn-secondary {
  padding: 8px 18px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-secondary:hover {
  background: #334155;
  color: #ffffff;
}

.btn-danger-outline {
  padding: 8px 18px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
}


/* Toasts */
.chaos-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100000;
}

.chaos-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  animation: toast-slide-in 0.2s ease-out;
  color: #ffffff;
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.chaos-toast.fade-out {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-out;
}

.chaos-toast.info {
  background: #181926;
  border: 1px solid #383849;
}
.chaos-toast.success {
  background: #0f2d1e;
  border: 1px solid #00ff88;
  color: #a7f3d0;
}
.chaos-toast.warning {
  background: #332109;
  border: 1px solid #f59e0b;
  color: #fde68a;
}
.chaos-toast.error {
  background: #330f14;
  border: 1px solid #ef4444;
  color: #fecaca;
}

.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}

/* ========================================================
   BLIZZARD BATTLE.NET & CHARACTER ARMORY STYLES
   ======================================================== */

.btn-row-armory {
  background: #050403 !important;
  border-color: rgba(212, 164, 76, 0.6) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.btn-row-armory:hover {
  background: #050403 !important;
  border-color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.5) !important;
  transform: translateY(-1px);
}

.char-name-link {
  transition: all 0.15s ease-in-out;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}

.char-name-link:hover {
  filter: brightness(1.25) drop-shadow(0 0 6px currentColor);
  border-bottom-color: currentColor;
}

/* Armory Modal Dialog */
.armory-modal-dialog {
  max-width: 1120px !important;
  width: 96vw !important;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, #151824 0%, #0b0c12 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 240, 255, 0.2) !important;
  color: #e2e8f0;
  overflow: hidden;
}

#armoryContentBody {
  overflow-y: auto;
  flex: 1;
}

.armory-header-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.1) 0%, rgba(20, 20, 30, 0.8) 100%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px 6px 0 0;
}

.armory-avatar-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
  object-fit: cover;
  background: #000;
  flex-shrink: 0;
}

.armory-title-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.armory-char-name {
  font-family: var(--font-header, 'Cinzel', serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.armory-char-title {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}

.armory-badges-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.armory-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.armory-badge.bnet-live {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
  color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

.armory-badge.ilvl {
  background: rgba(163, 53, 238, 0.15);
  border-color: rgba(163, 53, 238, 0.4);
  color: #d8b4fe;
}

/* Paperdoll Grid */
.armory-body-grid {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr) minmax(210px, 240px);
  gap: 14px;
  padding: 16px 20px;
}

@media (max-width: 860px) {
  .armory-body-grid {
    grid-template-columns: 1fr;
  }
}

.armory-slots-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.armory-slot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(15, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
  min-width: 0;
}

.armory-slot-item:hover {
  background: rgba(25, 30, 45, 0.95);
  border-color: rgba(0, 240, 255, 0.4);
  transform: translateX(2px);
}

.armory-slots-col.right .armory-slot-item:hover {
  transform: translateX(-2px);
}

.armory-slot-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #475569;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: #000;
}

.armory-slot-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Item Quality Border Colors */
.quality-poor { border-color: #9d9d9d !important; box-shadow: 0 0 6px rgba(157, 157, 157, 0.3); }
.quality-common { border-color: #ffffff !important; }
.quality-uncommon { border-color: #1eff00 !important; box-shadow: 0 0 6px rgba(30, 255, 0, 0.3); }
.quality-rare { border-color: #0070dd !important; box-shadow: 0 0 8px rgba(0, 112, 221, 0.4); }
.quality-epic { border-color: #a335ee !important; box-shadow: 0 0 10px rgba(163, 53, 238, 0.5); }
.quality-legendary { border-color: #ff8000 !important; box-shadow: 0 0 14px rgba(255, 128, 0, 0.7); }

.armory-slot-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  line-height: 1.25;
}

.armory-slot-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.armory-slot-sub {
  font-size: 10.5px;
  color: #64748b;
  display: flex;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center Column: Attributes & Stats */
.armory-center-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  background: rgba(10, 12, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 14px;
}

.armory-weapons-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.armory-weapons-strip .armory-slot-item {
  min-width: 0;
  padding: 6px 6px;
  gap: 8px;
}

.armory-stat-section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--neon-cyan);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.armory-stats-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.armory-stat-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}

.armory-stat-chip > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #94a3b8;
}

.armory-stat-chip .val {
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 6px;
  flex-shrink: 0;
}

/* Resistances Bar */
.armory-resistances-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.resistance-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  white-space: nowrap;
  min-width: 0;
}
}

.res-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.res-dot.fire { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.res-dot.nature { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.res-dot.frost { background: #38bdf8; box-shadow: 0 0 5px #38bdf8; }
.res-dot.shadow { background: #a855f7; box-shadow: 0 0 5px #a855f7; }
.res-dot.arcane { background: #ec4899; box-shadow: 0 0 5px #ec4899; }

/* Raid Progression & Professions Tabs */
.armory-footer-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 20px 20px 20px;
}

@media (max-width: 768px) {
  .armory-footer-panels {
    grid-template-columns: 1fr;
  }
}

.armory-sub-card {
  background: rgba(12, 14, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
}

.armory-prog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11.5px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
}

.armory-prog-item:last-child {
  border-bottom: none;
}

.armory-prog-status {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.status-cleared { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.4); }
.status-farming { background: rgba(0, 240, 255, 0.2); color: var(--neon-cyan); border: 1px solid rgba(0, 240, 255, 0.4); }

/* Battle.net Hub Modal Styles */
.bnet-hub-dialog {
  max-width: 840px !important;
  width: 90vw !important;
}

.bnet-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

@media (max-width: 720px) {
  .bnet-hub-grid {
    grid-template-columns: 1fr;
  }
}

.bnet-hub-card {
  background: rgba(13, 16, 26, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bnet-hub-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.bnet-token-price-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  padding: 6px 0;
}

.bnet-endpoint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bnet-endpoint-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: #fff;
}

/* ==========================================================================
   25. GUILD POLLS DEDICATED OVERHAUL (SHARP GEOMETRIC HUD & VIVID NEON THEME)
   ========================================================================== */

/* Geometric Font & Barrens Savanna Palette Tokens */
:root {
  --font-poll-geom: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-poll-display: 'Cinzel', Georgia, serif;
  --font-poll-mono: 'JetBrains Mono', monospace;
  --neon-cyan: #d4a44c;
  --neon-cyan-glow: rgba(212, 164, 76, 0.45);
  --neon-green: #d4a44c;
  --neon-green-glow: rgba(212, 164, 76, 0.45);
  --neon-red: #c2410c;
  --neon-red-glow: rgba(194, 65, 12, 0.55);
  --neon-gold: #f2c96d;
  --neon-gold-glow: rgba(242, 201, 109, 0.5);
  --neon-purple: #b45309;
  --neon-magenta: #e07a2e;
}

/* Strict Right-Angled HUD Theme (All elements in polls have 0px border-radius) */
#pollMetricsView,
#pollCastView,
.poll-view-nav,
.poll-view-nav *,
.consensus-cards-grid,
.consensus-hero-card,
.consensus-hero-card *,
.weekly-grid-section,
.weekly-grid-section *,
.recent-voters-section,
.recent-voters-section *,
.poll-voting-panel,
.poll-voting-panel *,
.top3-day-row,
.top3-rank-badge,
.top3-time-pill,
.chrono-metric-chip,
.chrono-badge,
.tod-item,
.tod-progress-track,
.tod-progress-fill,
.consensus-progress-bar,
.consensus-progress-fill,
.btn-role-filter,
.btn-preset,
.btn-submit-raid-vote,
.btn-switch-metrics,
.btn-retract-raid-vote,
.btn-edit-ballot-link,
.tz-pill,
.tz-select-inline,
.form-input-plain,
.select-roster-quick,
.drag-instructions-banner,
.summary-pill,
.cycle-pill,
.paint-slot-cell,
.master-slot-cell,
.grid-header-cell,
.grid-day-cell,
.grid-cell,
.raider-vote-card,
.raider-card-avatar,
.raider-role-pill,
.modal-container,
.modal-close-btn,
.grid-tooltip,
.form-feedback-banner,
.voter-chip,
.top-auth-btn,
.top-auth-strip,
.hud-user-badge,
.hud-user-dropdown,
.btn-dropdown-link,
.badge-bnet-tag,
.badge-discord-tag {
  border-radius: 0px !important;
}

/* Global Font Application for Polls */
#pollMetricsView,
#pollCastView,
.poll-view-nav {
  font-family: var(--font-poll-geom) !important;
  letter-spacing: 0.02em;
}

/* Sub-View Navigation Tabs */
.poll-view-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(4, 8, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.12), inset 0 0 25px rgba(0, 240, 255, 0.04);
  padding: 10px 16px;
  margin-bottom: 24px;
}

.poll-view-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.poll-sub-tab {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #94a3b8;
  font-family: var(--font-poll-geom);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
  user-select: none;
}

.poll-sub-tab:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.poll-sub-tab.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.22) 0%, rgba(0, 255, 102, 0.15) 100%);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.45), inset 0 0 12px rgba(0, 240, 255, 0.2);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

.sub-tab-pill {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
}

.sub-tab-pill.edit.active {
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.4);
}

.poll-vps-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--font-poll-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neon-green);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.4);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.2);
  padding: 5px 12px;
}

.vps-dot {
  width: 7px;
  height: 7px;
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
  animation: pulse-glow 1.8s infinite ease-in-out;
}

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

/* Consensus Summary Metrics Cards - Balanced 2-Column Symmetrical Layout */
.consensus-cards-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

.consensus-stacked-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.consensus-stacked-col .consensus-hero-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 960px) {
  .consensus-cards-grid {
    grid-template-columns: 1fr;
  }
}

.consensus-hero-card {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), inset 0 0 25px rgba(0, 240, 255, 0.03);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.consensus-hero-card:hover {
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 240, 255, 0.2);
}

.consensus-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.consensus-card-header .card-title {
  font-family: var(--font-poll-geom);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-tag {
  font-family: var(--font-poll-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
}

/* Top 3 Days Rows */
.top3-day-row {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: rgba(10, 15, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.15s ease;
}

.top3-day-row:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.05);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
  transform: translateX(2px);
}

.top3-day-row.rank-gold {
  border-left: 4px solid var(--neon-gold);
  border-color: rgba(255, 230, 0, 0.35);
  box-shadow: 0 0 14px rgba(255, 230, 0, 0.15);
}

.top3-day-row.rank-silver {
  border-left: 4px solid var(--neon-cyan);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.15);
}

.top3-day-row.rank-bronze {
  border-left: 4px solid #ff7700;
  border-color: rgba(255, 119, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 119, 0, 0.15);
}

.top3-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.top3-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top3-rank-badge {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  font-weight: 900;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #040914;
}

.top3-day-row.rank-gold .top3-rank-badge {
  background: var(--neon-gold);
  box-shadow: 0 0 10px var(--neon-gold-glow);
}

.top3-day-row.rank-silver .top3-rank-badge {
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan-glow);
}

.top3-day-row.rank-bronze .top3-rank-badge {
  background: #ff7700;
  box-shadow: 0 0 10px rgba(255, 119, 0, 0.6);
  color: #fff;
}

.top3-day-name {
  font-family: var(--font-poll-display);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.top3-pct-badge {
  font-family: var(--font-poll-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

.consensus-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: 6px 0;
}

.consensus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f0ff 0%, #00ff66 100%);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
  transition: width 0.3s ease;
}

.top3-meta-line {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.top3-role-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-poll-mono);
  font-size: 10px;
}

.top3-times-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.top3-time-pill,
.chrono-time-pill {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: var(--neon-cyan);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chrono-time-pill b {
  color: #ffffff;
}

.day-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.day-name-text {
  font-family: var(--font-poll-display);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.day-pct-text {
  font-family: var(--font-poll-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

.day-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
}

.role-breakdown-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.role-tag.tank {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

.role-tag.healer {
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
}

.role-tag.dps {
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

.chrono-times-container,
.top3-times-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chrono-times-lbl {
  font-family: var(--font-poll-geom);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-right: 4px;
}

/* Chronological Times Grid */
.chrono-times-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chrono-metric-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(10, 15, 26, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  transition: all 0.15s ease;
}

.chrono-metric-chip:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.3);
  transform: translateX(2px);
}

.chrono-chip-time {
  font-family: var(--font-poll-display);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.chrono-chip-pct {
  font-family: var(--font-poll-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan-glow);
}

.chrono-chip-pct.prime {
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

.chrono-chip-pct.solid {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan-glow);
}

.chrono-chip-sub {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
}

.chrono-chip-roles {
  font-family: var(--font-poll-mono);
  font-size: 10px;
  color: #cbd5e1;
  display: flex;
  gap: 6px;
}

/* Time of Day Breakdown */
.tod-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tod-item {
  padding: 10px 14px;
  background: rgba(10, 15, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tod-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.tod-label {
  font-family: var(--font-poll-geom);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.tod-pct {
  font-family: var(--font-poll-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--neon-gold);
  text-shadow: 0 0 8px var(--neon-gold-glow);
}

.tod-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 5px;
}

.tod-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffe600 0%, #ff8800 100%);
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.6);
}

.tod-sub {
  font-family: var(--font-poll-mono);
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 5px;
}

/* Weekly Matrix Heatmap Master Section */
.weekly-grid-section {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(0, 240, 255, 0.03);
  margin-bottom: 24px;
}

.weekly-grid-section .card-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  padding: 16px 20px;
}

.heatmap-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.role-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-filter-lbl {
  font-family: var(--font-poll-geom);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
  margin-right: 4px;
}

.btn-role-filter {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #94a3b8;
  font-family: var(--font-poll-geom);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-role-filter:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.btn-role-filter.active {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #040914;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.7);
  text-shadow: none;
}

.tz-select-inline {
  background: rgba(4, 8, 16, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #ffffff;
  font-family: var(--font-poll-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  outline: none;
  cursor: pointer;
}

.tz-select-inline:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.btn-edit-ballot-link {
  background: rgba(0, 255, 102, 0.1);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  font-family: var(--font-poll-geom);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.25);
  transition: all 0.15s ease;
}

.btn-edit-ballot-link:hover {
  background: var(--neon-green);
  color: #040914;
  box-shadow: 0 0 18px rgba(0, 255, 102, 0.6);
}

.heatmap-legend-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
  flex-wrap: wrap;
}

.legend-chip {
  padding: 2px 7px;
  font-weight: 700;
}

.legend-chip.pct-90 { background: rgba(0, 255, 102, 0.25); color: #00ff66; border: 1px solid #00ff66; }
.legend-chip.pct-60 { background: rgba(0, 240, 255, 0.2); color: #00f0ff; border: 1px solid #00f0ff; }
.legend-chip.pct-30 { background: rgba(255, 230, 0, 0.2); color: #ffe600; border: 1px solid #ffe600; }
.legend-chip.pct-0 { background: rgba(255, 255, 255, 0.05); color: #64748b; border: 1px solid rgba(255, 255, 255, 0.1); }
.legend-chip.pct-red { background: rgba(255, 23, 68, 0.25); color: #ff1744; border: 1px solid #ff1744; }

/* 2D Master Grid Matrix (126 Slots) */
.master-grid-layout {
  display: grid;
  grid-template-columns: 80px repeat(18, minmax(58px, 1fr));
  gap: 1px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.3);
  min-width: 900px;
}

.grid-header-cell {
  background: rgba(4, 9, 18, 0.98);
  font-family: var(--font-poll-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neon-cyan);
  text-align: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  position: sticky;
  top: 0;
  z-index: 2;
}

.grid-tz-corner {
  background: rgba(4, 9, 18, 0.98);
  color: var(--neon-cyan);
  font-family: var(--font-poll-mono);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 6;
  border-right: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
}

.grid-day-cell {
  background: rgba(6, 12, 22, 0.98);
  font-family: var(--font-poll-display);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-right: 1px solid rgba(0, 240, 255, 0.4);
  position: sticky;
  left: 0;
  z-index: 4;
  box-shadow: 3px 0 8px rgba(0, 0, 0, 0.7);
}

.grid-cell {
  position: relative;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(6, 10, 18, 0.9);
  transition: all 0.1s ease;
  user-select: none;
}

.grid-cell:hover {
  outline: 2px solid var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  z-index: 5;
}

.cell-pct-text {
  font-family: var(--font-poll-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.grid-cell.pct-90 {
  background: rgba(0, 255, 102, 0.28);
  color: #00ff66;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.8);
}

.grid-cell.pct-60 {
  background: rgba(0, 240, 255, 0.22);
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

.grid-cell.pct-30 {
  background: rgba(255, 230, 0, 0.18);
  color: #ffe600;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.8);
}

.grid-cell.pct-10 {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}

.grid-cell.pct-0 {
  background: rgba(4, 8, 16, 0.7);
  color: #475569;
}

.grid-cell.pct-cannot {
  background: rgba(255, 23, 68, 0.22);
  color: #ff1744;
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.8);
}

/* Cast Ballot View & Right-Angled Form */
.poll-voting-panel {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(0, 240, 255, 0.03);
  margin-bottom: 24px;
}

.cast-identity-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
}

.form-label {
  font-family: var(--font-poll-geom);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 6px;
  display: block;
}

.form-input-plain,
.select-roster-quick {
  background: rgba(4, 8, 16, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #ffffff;
  font-family: var(--font-poll-geom);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: all 0.15s ease;
}

.form-input-plain:focus,
.select-roster-quick:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.tz-pill-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.tz-pill {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #94a3b8;
  font-family: var(--font-poll-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tz-pill:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--neon-cyan);
  color: #ffffff;
}

.tz-pill.active {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #040914;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.65);
}

/* Direct Click Painter Toolbar & Presets */
.painter-control-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: rgba(4, 9, 18, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.04);
  padding: 12px 18px;
  margin-bottom: 14px;
}

.painter-direct-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-badge-text {
  font-family: var(--font-poll-geom);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan-glow);
  margin-right: 4px;
}

.cycle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-poll-geom);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  user-select: none;
}

.cycle-pill.can {
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.35);
  background: rgba(0, 255, 102, 0.08);
}

.cycle-pill.cannot {
  border-color: var(--neon-red);
  color: var(--neon-red);
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.35);
  background: rgba(255, 23, 68, 0.08);
}

.cycle-pill.clear {
  border-color: rgba(255, 255, 255, 0.3);
  color: #cbd5e1;
}

.painter-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.preset-label {
  font-family: var(--font-poll-geom);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-right: 4px;
}

.btn-preset {
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--neon-cyan);
  font-family: var(--font-poll-geom);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-preset:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.btn-preset.clear {
  border-color: rgba(255, 23, 68, 0.4);
  color: #ff1744;
  background: rgba(255, 23, 68, 0.06);
}

.btn-preset.clear:hover {
  background: rgba(255, 23, 68, 0.25);
  border-color: #ff1744;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.5);
}

.drag-instructions-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.1);
  padding: 10px 16px;
  font-family: var(--font-poll-geom);
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 16px;
}

.drag-selection-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-pill {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border: 1px solid transparent;
}

.summary-pill.green {
  background: rgba(0, 255, 102, 0.15);
  border-color: var(--neon-green);
  color: var(--neon-green);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

.summary-pill.red {
  background: rgba(255, 23, 68, 0.15);
  border-color: var(--neon-red);
  color: var(--neon-red);
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.3);
}

/* Interactive Paint Slot Cells */
.paint-slot-cell {
  height: 46px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  position: relative;
  transition: all 0.08s ease;
  border: 1px solid rgba(0, 240, 255, 0.1);
  background: rgba(4, 8, 16, 0.85);
}

.paint-slot-cell:hover {
  outline: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  z-index: 5;
}

/* 1-Click State: Can Raid (Vivid Neon Green) */
.paint-slot-cell.state-can {
  background: #00ff66 !important;
  color: #002b11 !important;
  border: 1px solid #00ff66 !important;
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
}

.paint-slot-cell.state-can::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 16px;
  font-family: var(--font-poll-geom);
  color: #002b11;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

/* 2-Clicks State: Cannot Raid (Vivid Neon Red) */
.paint-slot-cell.state-cannot {
  background: #ff1744 !important;
  color: #ffffff !important;
  border: 1px solid #ff1744 !important;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.35) !important;
}

.paint-slot-cell.state-cannot::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 16px;
  font-family: var(--font-poll-geom);
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.paint-slot-cell.state-unselected {
  background: rgba(4, 8, 16, 0.85);
  color: transparent;
}

/* Cast Actions Row */
.cast-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 240, 255, 0.2);
}

.btn-submit-raid-vote {
  background: linear-gradient(135deg, #00f0ff 0%, #00ff66 100%) !important;
  color: #040914 !important;
  font-family: var(--font-poll-geom) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 24px !important;
  border: 1px solid #00ff66 !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.6) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-submit-raid-vote:hover {
  box-shadow: 0 0 30px rgba(0, 255, 102, 0.9) !important;
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
}

.btn-switch-metrics {
  background: rgba(0, 240, 255, 0.08) !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
  color: var(--neon-cyan) !important;
  font-family: var(--font-poll-geom) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-switch-metrics:hover {
  background: rgba(0, 240, 255, 0.2) !important;
  border-color: var(--neon-cyan) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.4) !important;
}

.btn-retract-raid-vote {
  background: rgba(255, 23, 68, 0.1) !important;
  border: 1px solid rgba(255, 23, 68, 0.4) !important;
  color: #ff1744 !important;
  font-family: var(--font-poll-geom) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-retract-raid-vote:hover {
  background: rgba(255, 23, 68, 0.25) !important;
  border-color: #ff1744 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.5) !important;
}

/* Floating Tooltip */
.grid-tooltip {
  position: absolute;
  z-index: 10000;
  background: rgba(4, 9, 18, 0.98);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 240, 255, 0.4);
  padding: 12px 16px;
  max-width: 320px;
  pointer-events: none;
  font-family: var(--font-poll-geom);
  font-size: 11.5px;
  color: #cbd5e1;
  display: none;
  transform: translate(-50%, -100%) translateY(-10px);
}

.grid-tooltip.visible {
  display: block;
}

.grid-tooltip-header {
  font-family: var(--font-poll-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  justify-content: space-between;
}

.grid-tooltip-metric {
  font-family: var(--font-poll-display);
  font-size: 13px;
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
  margin-bottom: 6px;
}

/* Recent Participating Raiders Grid */
.recent-voters-section {
  background: rgba(6, 10, 18, 0.94);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(0, 240, 255, 0.03);
  margin-bottom: 24px;
}

.recent-voters-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.raider-vote-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 15, 26, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 10px 14px;
  transition: all 0.15s ease;
}

.raider-vote-card:hover {
  background: rgba(0, 240, 255, 0.06);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
  transform: translateX(2px);
}

.raider-card-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.35);
  object-fit: cover;
  flex-shrink: 0;
}

.raider-card-name {
  font-family: var(--font-poll-display);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.raider-role-pill {
  font-family: var(--font-poll-mono);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.raider-role-pill.tank {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.raider-role-pill.healer {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.raider-role-pill.dps {
  border-color: #f87171;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.raider-card-sub {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

.raider-hours-count {
  color: var(--neon-cyan);
  font-weight: 700;
}

/* Modal: Raiders Available Inspector */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.modal-container {
  background: rgba(6, 10, 18, 0.98);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 240, 255, 0.35);
  color: #ffffff;
}

.modal-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  padding: 14px 18px;
}

.modal-title {
  font-family: var(--font-poll-geom);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.modal-close-btn {
  background: rgba(255, 23, 68, 0.1);
  border: 1px solid rgba(255, 23, 68, 0.4);
  color: #ff1744;
  font-size: 18px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: #ff1744;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.6);
}

.day-voters-list-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-voter-card-modal,
.day-modal-voter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(10, 15, 26, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.day-modal-voter-chip:hover,
.day-voter-card-modal:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

.day-modal-voter-chip .voter-name {
  color: #ffffff;
  font-family: var(--font-poll-geom);
  font-size: 13.5px;
}

.day-modal-voter-chip .voter-cls {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.08);
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.day-modal-voter-chip .voter-disc {
  font-family: var(--font-poll-mono);
  font-size: 11px;
  color: #94a3b8;
}

/* Responsive Guild Polls Layout & Symmetrical Mobile Controls */
@media (max-width: 768px) {
  .poll-view-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .poll-view-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .poll-sub-tab {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 12px;
  }

  .poll-vps-pill {
    align-self: center;
    font-size: 10px;
    padding: 5px 12px;
  }

  .heatmap-controls-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .role-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }

  .tz-select-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .tz-select-inline {
    flex: 1;
    max-width: 220px;
  }

  .btn-edit-ballot-link {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 10px 14px;
  }

  .painter-control-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .painter-direct-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .cycle-pill {
    width: 100%;
    justify-content: center;
  }

  .painter-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .btn-preset {
    text-align: center;
    padding: 8px 6px;
    font-size: 11px;
  }

  .btn-preset.clear {
    grid-column: 1 / -1;
  }

  .drag-instructions-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .drag-selection-summary {
    width: 100%;
    justify-content: space-between;
  }

  .cast-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .btn-submit-raid-vote,
  .btn-switch-metrics,
  .btn-retract-raid-vote {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   26. SHOPPING LIST & AUCTIONATOR EXPORT ENGINE
   ========================================================================== */

/* Hero Header and Top Actions */
.shop-hero-section {
  position: relative;
  overflow: visible;
}

.shop-header-flex {
  align-items: flex-start;
  gap: 16px;
}

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

.btn-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
}

.cart-badge-count {
  background: #ff5722;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255, 87, 34, 0.6);
}

.btn-gold-auctionator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.6);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.btn-gold-auctionator:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(217, 119, 6, 0.5) 100%);
  color: #fff;
  border-color: #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

/* CART DASHBOARD CARD */
.cart-dashboard-card {
  margin-top: 18px;
  background: rgba(13, 17, 23, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(245, 158, 11, 0.05);
  transition: border-color 0.2s ease;
}

.cart-dashboard-card:hover {
  border-color: rgba(245, 158, 11, 0.5);
}

.cart-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-dashboard-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.cart-dashboard-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.cart-dashboard-sub {
  font-size: 12px;
  color: #94a3b8;
}

.btn-sm-action {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sm-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Empty Cart Banner */
.cart-empty-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  margin-top: 14px;
}

.empty-cart-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.6;
}

.empty-cart-text h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}

.empty-cart-text p {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;
}

/* SPLIT VIEW GRID */
.cart-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .cart-split-grid {
    grid-template-columns: 1fr;
  }
}

.cart-column {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.cart-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cart-col-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.5px;
}

.btn-link-action {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color 0.15s ease;
}

.btn-link-action:hover {
  color: #f87171;
}

/* Scroll lists inside columns */
.cart-items-scroll-list,
.cart-materials-scroll-list {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-items-scroll-list::-webkit-scrollbar,
.cart-materials-scroll-list::-webkit-scrollbar {
  width: 6px;
}

.cart-items-scroll-list::-webkit-scrollbar-thumb,
.cart-materials-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* Individual Cart Item Row */
.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}

.cart-item-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.cart-item-row.quality-epic { border-left: 3px solid #a335ee; }
.cart-item-row.quality-rare { border-left: 3px solid #0070dd; }
.cart-item-row.quality-uncommon { border-left: 3px solid #1eff00; }
.cart-item-row.quality-common { border-left: 3px solid #94a3b8; }

.cart-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cart-item-img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.cart-item-prof {
  color: #38bdf8;
  font-weight: 600;
}

.cart-item-cat {
  color: #64748b;
}

.cart-item-name {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* QUANTITY STEPPER */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.qty-btn {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
  width: 26px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qty-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.qty-input {
  width: 36px;
  height: 28px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-remove-cart {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remove-cart:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}

/* MATERIALS CHECKLIST COLUMN */
.mat-checklist-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mat-filter-unowned-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
}

.mat-checklist-hint {
  font-size: 11px;
  color: #94a3b8;
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid #f59e0b;
  padding: 6px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.mat-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}

.mat-item-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.mat-item-row.is-owned {
  opacity: 0.55;
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.15);
}

.mat-checkbox-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mat-check-input {
  width: 18px;
  height: 18px;
  accent-color: #10b981;
  cursor: pointer;
}

.mat-info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mat-name {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.mat-name.strike-owned {
  text-decoration: line-through;
  color: #64748b;
}

.mat-recipes-hint {
  font-size: 11px;
  color: #64748b;
}

.mat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 26px;
  box-sizing: border-box;
  text-align: center;
  font-variant-numeric: tabular-nums;
  gap: 4px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  flex-shrink: 0;
}

.mat-multiplier {
  color: #f59e0b;
  font-size: 11px;
}

.mat-count-val {
  color: #fbbf24;
  font-size: 14px;
}

.cart-export-bar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.cart-export-summary {
  font-size: 12px;
  color: #94a3b8;
}

.btn-export-pulse {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-export-pulse:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.75) !important;
  transform: translateY(-1px);
}

/* CATALOG CARD ACTIVE IN-CART STATE */
.shop-item-card {
  transition: all 0.2s ease;
}

.shop-item-card.item-in-cart {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, rgba(13, 17, 23, 0.95) 100%);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.card-cart-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-sm-add-cart {
  flex: 1;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-quick-add {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-quick-add:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #38bdf8;
}

.card-cart-active-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.card-in-cart-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.card-stepper {
  flex: 1;
  max-width: 110px;
}

.btn-card-remove {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-card-remove:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
}

.reagent-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  margin: 2px 2px 2px 0;
}

.reagent-chip .chip-name {
  color: #cbd5e1;
}

.reagent-chip .chip-qty {
  color: #f59e0b;
}

/* FLOATING STICKY CART PILL */
.floating-cart-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  cursor: pointer;
  animation: floatBounce 3s ease-in-out infinite;
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.floating-cart-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(13, 17, 23, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #f59e0b;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  transition: all 0.2s ease;
}

.floating-cart-inner:hover {
  border-color: #fbbf24;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.5);
  transform: scale(1.03);
}

.floating-cart-icon {
  font-size: 22px;
}

.floating-cart-details {
  display: flex;
  flex-direction: column;
}

.floating-cart-title {
  font-size: 13px;
  color: #fff;
}

.floating-cart-sub {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
}

.floating-cart-btn-export {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  transition: all 0.15s ease;
}

.floating-cart-btn-export:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
}

/* AUCTIONATOR EXPORT MODAL */
.shop-export-modal-card {
  max-width: 660px;
  width: 95%;
  background: rgba(13, 17, 23, 0.98);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.2);
}

.export-options-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.export-format-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.export-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.export-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.export-pill.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.export-textarea-wrapper {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  overflow: hidden;
}

.export-textarea-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.export-count-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.btn-copy-sm {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-sm:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #fff;
}

.export-output-textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  resize: vertical;
  outline: none;
}

/* Instructions card */
.auctionator-instructions-card {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px 16px;
}

.inst-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fbbf24;
  margin-bottom: 8px;
}

.inst-icon {
  width: 16px;
  height: 16px;
}

.inst-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
}

.inst-steps li {
  margin-bottom: 4px;
}

.inst-steps strong {
  color: #e2e8f0;
}

.inst-steps kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 11px;
  color: #fff;
}

.btn-lg-copy {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5) !important;
}

.btn-lg-copy:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #000 !important;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.8) !important;
}

/* Floating Clipboard Toast Notification */
.export-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--neon-cyan);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 240, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.export-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.export-toast-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 6px var(--neon-cyan));
}

/* Nav pulse badge for new section */
.nav-tab-badge.new-pulse {
  background: rgba(224, 122, 46, 0.22);
  color: var(--gold-crest, #f2c96d);
  border: 1px solid var(--ember-savanna, #e07a2e);
  font-weight: 800;
  box-shadow: 0 0 8px rgba(224, 122, 46, 0.35);
  animation: pulseGold 2s infinite;
}

@keyframes pulseGold {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}

/* Responsive Shopping List Actions & Dashboard Layout Symmetry */
@media (max-width: 768px) {
  .shop-header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .shop-header-actions .btn-primary-neon,
  .shop-header-actions .btn-gold-auctionator,
  .shop-header-actions .btn-secondary {
    width: 100% !important;
    flex: none !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .cart-dashboard-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cart-dashboard-actions {
    width: 100% !important;
  }
  .cart-dashboard-actions .btn-sm-action {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  .cart-export-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cart-export-bar .btn-export-pulse {
    width: 100% !important;
    justify-content: center !important;
  }
  .cart-item-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

@media (max-width: 440px) {
  .shop-header-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PROJECT CHAOSFORGE — TACTICAL UTILITY TOKENS & BADGES
   ========================================================================== */
.top-auth-gateway-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #34d399;
  text-transform: uppercase;
}

.top-auth-gateway-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-beacon 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.tactical-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 0;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tactical-pill.amber {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.tactical-pill.emerald,
.tactical-pill.green {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.tactical-pill.cyan {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}

.tactical-pill.purple {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.tactical-pill.muted {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

.tactical-pill.slate {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.5);
  color: #cbd5e1;
}

.top-auth-btn:active,
.tactical-btn:active,
.btn-choice-pill:active,
.btn-profession:active,
.prof-pill:active,
.export-pill:active,
.btn-sm-action:active,
.btn-link-action:active,
.btn-export-pulse:active,
.btn-qty-step:active,
.btn-preset:active,
.btn-submit-raid-vote:active,
.poll-sub-tab:active,
.btn-toggle-enlist:active,
.btn-patch-notes:active,
.toggle-pill:active,
.btn-reset-session:active,
.planner-title-btn:active,
.modal-close-btn:active {
  transform: scale(0.98) translateY(1px);
  transition: transform 0.05s ease-out;
}

/* CRAFTING COMMISSION MODAL & BACKDROP BLUR */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.modal-card-craft {
  position: relative;
  z-index: 1002;
  max-width: 680px;
  width: 100%;
  background: #0d1117;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.15);
  border-radius: 8px;
}






/* Universal Button, Stepper, and Pill Dimensional Symmetry */
.btn-sm-add-cart,
.btn-quick-add,
.card-in-cart-pill,
.btn-card-remove,
.qty-stepper.card-stepper {
  height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.qty-stepper.card-stepper .qty-btn,
.qty-stepper.card-stepper .qty-input {
  height: 26px !important;
  line-height: 26px !important;
  box-sizing: border-box !important;
}

.shop-header-actions .btn-primary-neon,
.shop-header-actions .btn-gold-auctionator,
.shop-header-actions .btn-secondary,
.craft-header-actions .btn-primary-neon,
.craft-header-actions .btn-secondary {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.active-orders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.recent-orders-card .badge-status,
.recent-orders-card .btn-claim-order {
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.raid-controls-bar .raid-size-pill,
.raid-controls-bar .btn-reset-session {
  height: 24px;
  min-height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shop-export-modal-card {
  max-height: 90vh;
  margin: auto;
  overflow-y: auto;
}

#exportModal.modal-backdrop, .export-modal-overlay {
  justify-content: center;
  align-items: center;
}

/* Symmetrical column balance for Roster Table (95% Main Columns / 5% Socials + Edit) */
.roster-table .col-raider { width: 54px; min-width: 54px; max-width: 54px; }
.roster-table .col-race { width: 54px; min-width: 54px; max-width: 54px; }
.roster-table .col-class-spec { width: 156px; min-width: 156px; max-width: 162px; }
.roster-table .col-racials { width: 207px; min-width: 207px; max-width: 215px; }
.roster-table .col-professions { width: 156px; min-width: 150px; max-width: 168px; }
.roster-table .col-socials { width: 30px; min-width: 30px; max-width: 34px; }
.roster-table .col-actions { width: 46px; min-width: 46px; max-width: 50px; }

/* Symmetrical Grid Columns based on Raid Group Count */
.groups-grid[data-group-count="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
}
.groups-grid[data-group-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
}
.groups-grid[data-group-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
}
.groups-grid[data-group-count="1"] {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
  grid-template-rows: auto;
}
@media (max-width: 1200px) {
  .groups-grid[data-group-count="8"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, 1fr);
  }
}


/* ==========================================================================
   16. RECOMMENDED ADDONS HUB & 1-CLICK INSTALLER STYLES
   ========================================================================== */

.addons-toolbar-card {
  margin-bottom: 20px;
}

.addons-controls-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(14, 17, 24, 0.7);
  border-top: 1px solid var(--line-strong);
}

.addon-search-wrap {
  position: relative;
  width: 100%;
}

.addon-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.addon-search-input {
  width: 100%;
  height: 38px;
  padding: 0 36px 0 38px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.addon-search-input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.addon-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
}

.addon-search-clear:hover {
  color: #fff;
}

.addon-category-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.addon-filter-chip {
  height: 26px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.addon-filter-chip:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.addon-filter-chip.active {
  background: rgba(0, 240, 255, 0.12);
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

/* Hero Section (EllesmereUI) */
.addon-hero-container {
  margin-bottom: 24px;
}

.addon-hero-banner-wrap {
  position: relative;
  padding-top: 10px;
}

.hero-badge-tag {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 2;
  background: #f59e0b;
  color: #0b0d12;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.addon-hero-card {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  border-top: 2px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(14, 17, 24, 0.95) 40%) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15) !important;
}

/* Grid & Cards */
.addons-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.addons-section-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.04em;
}

.addons-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 16px;
  align-items: start;
}

@media (max-width: 600px) {
  .addons-grid {
    grid-template-columns: 1fr;
  }
}

.addon-card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--neon-cyan);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  position: relative;
}

.addon-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.addon-card.is-expanded {
  grid-column: 1 / -1;
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 240, 255, 0.15);
}

.addon-card.is-installed {
  opacity: 0.65;
  filter: grayscale(0.6);
}

.addon-card.is-ignored {
  opacity: 0.5;
}

.addon-state-banner {
  padding: 5px 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
}

.state-installed {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.state-ignored {
  background: rgba(15, 23, 42, 0.9);
  color: #94a3b8;
  border-color: rgba(51, 65, 85, 0.5);
}

.btn-state-undo {
  background: transparent;
  border: none;
  color: #e2e8f0;
  text-decoration: underline;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}

.btn-state-undo:hover {
  color: #fff;
}

.addon-card-main {
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.addon-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-card-header.addon-no-icon-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-bottom: 2px;
}

.addon-name.addon-title-large {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

.addon-author-row {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.addon-icon-slot {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #090c10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addon-thumbnail-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.addon-icon-fallback {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-gold);
}

.addon-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.addon-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.addon-name {
  font-family: 'Cinzel', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.addon-provenance-row {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.addon-author {
  color: var(--text-secondary);
}

.addon-author strong {
  color: #e2e8f0;
}

.addon-sep {
  color: rgba(255, 255, 255, 0.2);
}

.addon-recommender {
  color: rgba(245, 158, 11, 0.9);
  font-weight: 600;
}

.addon-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 1px;
}

.pill-svg-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Dedicated Brand Links & ZIP Download Row (Separate row on every card for uniform layout) */
.addon-brand-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Symmetrical Brand Link Pills — SHARP ANGLED */
.brand-pill {
  height: 26px;
  padding: 0 9px;
  border-radius: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.brand-pill:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.brand-pill-svg {
  flex-shrink: 0;
}

.pill-curseforge {
  border-color: rgba(241, 100, 54, 0.4);
  color: #f16436;
  background: rgba(241, 100, 54, 0.08);
}
.pill-curseforge:hover {
  background: rgba(241, 100, 54, 0.18);
  border-color: #f16436;
}

.pill-github {
  border-color: rgba(255, 255, 255, 0.25);
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.06);
}
.pill-github:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.pill-wowup {
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.08);
}
.pill-wowup:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: #3b82f6;
}

.pill-restedxp {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.pill-restedxp:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
}

.pill-download {
  border-color: rgba(0, 255, 136, 0.35);
  color: #00ff88;
  background: rgba(0, 255, 136, 0.06);
}
.pill-download:hover {
  background: rgba(0, 255, 136, 0.16);
  border-color: #00ff88;
}

.brand-pill-up-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.brand-pill:hover .brand-pill-up-arrow {
  transform: translate(1px, -1px);
  opacity: 1;
}

.addon-desc-wrap {
  position: relative;
  overflow: hidden;
  padding: 8px 12px;
  background: rgba(8, 12, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.addon-desc-backdrop {
  position: absolute;
  inset: -4px;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  filter: blur(1.5px) grayscale(25%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.addon-card:hover .addon-desc-backdrop {
  opacity: 0.28;
  transform: scale(1.03);
}

.addon-desc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 22, 0.90) 0%, rgba(8, 12, 22, 0.72) 100%);
  pointer-events: none;
  z-index: 1;
}

.addon-tagline {
  position: relative;
  z-index: 2;
  font-size: 12px;
  line-height: 1.45;
  color: #e2e8f0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* Card Actions (Condensed Footer & Accordion Toggle) */
.addon-card-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}

.addon-card-footer.condensed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.addon-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.addon-user-prefs-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-pref-action {
  height: 28px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}

.btn-pref-action:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-pref-installed.active {
  background: rgba(0, 255, 136, 0.15);
  border-color: #00ff88;
  color: #00ff88;
}

.btn-pref-ignore.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.btn-1click {
  height: 28px;
  padding: 0 11px;
  border-radius: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.12s ease;
}

.btn-1click:active {
  transform: scale(0.98);
}

.btn-curseforge {
  background: #f16436;
  color: #fff;
  border: 1px solid #f16436;
  box-shadow: 0 0 8px rgba(241, 100, 54, 0.3);
}

.btn-curseforge:hover {
  background: #ff784d;
  box-shadow: 0 0 12px rgba(241, 100, 54, 0.5);
}

.btn-wowup {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.btn-wowup:hover {
  background: #3b82f6;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

.btn-addon-details-toggle {
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.btn-addon-details-toggle:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

.toggle-arrow {
  font-size: 8px;
  transition: transform 0.2s ease;
}

.toggle-arrow.open {
  transform: rotate(180deg);
}

/* Accordion Sub-Panel */
.addon-accordion-subpanel {
  background: rgba(10, 13, 19, 0.85);
  border-top: 1px solid var(--line-strong);
  padding: 14px 16px;
}

.addon-tabs-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.addon-tab-btn {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.addon-tab-btn:hover {
  color: var(--text-primary);
}

.addon-tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.addon-tab-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.addon-full-desc {
  margin: 0 0 12px 0;
}

.addon-meta-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.meta-spec-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-spec-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.meta-spec-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.text-green {
  color: #00ff88 !important;
}

/* Gallery Grid */
.addon-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.gallery-thumb-card {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.gallery-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.gallery-thumb-card:hover .gallery-img {
  transform: scale(1.04);
}

.gallery-caption {
  display: block;
  padding: 4px 6px;
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Changelog */
.addon-changelog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.changelog-entry {
  padding: 8px 10px;
  border-left: 2px solid var(--neon-cyan);
  background: rgba(255, 255, 255, 0.02);
}

.changelog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.changelog-version {
  font-weight: 700;
  color: #fff;
  font-size: 11px;
}

.changelog-date {
  font-size: 10px;
  color: var(--text-muted);
}

.changelog-notes {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* ==========================================================================
   FACTION WAR: HORDE VS. ALLIANCE ARENA & VISUALS
   ========================================================================== */
.faction-war-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: 24px;
}

.faction-war-top-banner {
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.85) 0%, rgba(10, 10, 16, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card, 8px);
  padding: 22px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.faction-war-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.faction-war-vs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 999px;
  color: #ffd700;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.faction-war-main-title {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.faction-war-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ARENA SPLIT CONTAINER */
.faction-war-arena {
  display: flex;
  gap: 20px;
  min-height: 720px;
  position: relative;
  width: 100%;
  transition: all 0.5s ease;
}

/* FACTION PANELS */
.faction-panel {
  flex: 1;
  border-radius: var(--radius-card, 8px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 2px solid;
  user-select: none;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.5s ease, 
              opacity 0.5s ease, 
              box-shadow 0.5s ease, 
              border-color 0.4s ease;
}

.faction-panel.horde {
  background: linear-gradient(180deg, rgba(28, 8, 8, 0.92) 0%, rgba(14, 4, 4, 0.96) 100%);
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: 0 4px 25px rgba(220, 38, 38, 0.15);
}

.faction-panel.alliance {
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.92) 0%, rgba(4, 9, 18, 0.96) 100%);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 4px 25px rgba(59, 130, 246, 0.15);
}

/* DUAL-LAYER FACTION BATTLE FLAGS & SEAMLESS TRANSITIONS */
.faction-flag-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s ease;
}

.faction-flag-bg.epic {
  opacity: 0.92;
  transform: scale(1.0);
}

.faction-flag-bg.tattered {
  opacity: 0;
  transform: scale(0.97);
  filter: contrast(1.2) brightness(0.85);
}

.faction-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: background 0.8s ease;
}

.faction-panel-overlay.horde-overlay {
  background: linear-gradient(180deg, 
    rgba(20, 5, 5, 0.25) 0%, 
    rgba(20, 5, 5, 0.45) 35%, 
    rgba(12, 3, 3, 0.78) 65%, 
    rgba(8, 2, 2, 0.94) 100%);
}

.faction-panel-overlay.alliance-overlay {
  background: linear-gradient(180deg, 
    rgba(6, 14, 25, 0.25) 0%, 
    rgba(6, 14, 25, 0.45) 35%, 
    rgba(4, 8, 16, 0.78) 65%, 
    rgba(2, 5, 10, 0.94) 100%);
}

.faction-scorch-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0) 30%, rgba(10, 2, 2, 0.65) 80%, rgba(0, 0, 0, 0.9) 100%),
              repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 2px, transparent 2px, transparent 6px);
  transition: opacity 0.8s ease;
}

.faction-content-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px;
  gap: 15px;
}

.faction-header-top-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
}

.faction-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid;
  transition: all 0.4s ease;
}

.faction-status-pill.horde {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fca5a5;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.25);
}

.faction-status-pill.alliance {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

/* ARENA 3D DEPTH CONTAINER */
.faction-war-arena {
  perspective: 1400px;
  display: flex;
  gap: 20px;
  width: 100%;
  transition: all 0.6s ease;
}

.faction-panel {
  flex: 1;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1.5px solid;
  user-select: none;
  transform-style: preserve-3d;
  transition: flex 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease, 
              opacity 0.6s ease, 
              box-shadow 0.6s ease, 
              border-color 0.5s ease;
}

.faction-panel.horde {
  background: linear-gradient(180deg, rgba(28, 8, 8, 0.94) 0%, rgba(14, 4, 4, 0.98) 100%);
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: 0 6px 30px rgba(220, 38, 38, 0.15);
}

.faction-panel.alliance {
  background: linear-gradient(180deg, rgba(8, 18, 32, 0.94) 0%, rgba(4, 9, 18, 0.98) 100%);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 6px 30px rgba(59, 130, 246, 0.15);
}

/* ============================================================== */
/* WINNING STATE: COMES TO FOREFRONT, EPIC FLAG, HEROIC LIGHTING */
/* ============================================================== */
.faction-panel.is-winning,
.faction-war-arena.horde-winning .faction-panel.horde,
.faction-war-arena.voted-horde .faction-panel.horde,
.faction-war-arena.alliance-winning .faction-panel.alliance,
.faction-war-arena.voted-alliance .faction-panel.alliance {
  flex: 1.45;
  transform: scale(1.025) translateZ(28px) translateY(-8px);
  z-index: 10;
  opacity: 1;
  filter: brightness(1.08) saturate(1.15);
}

.faction-panel.is-winning .faction-flag-bg.epic,
.faction-war-arena.horde-winning .faction-panel.horde .faction-flag-bg.epic,
.faction-war-arena.voted-horde .faction-panel.horde .faction-flag-bg.epic,
.faction-war-arena.alliance-winning .faction-panel.alliance .faction-flag-bg.epic,
.faction-war-arena.voted-alliance .faction-panel.alliance .faction-flag-bg.epic {
  opacity: 0.82;
  transform: scale(1.03);
}

.faction-panel.is-winning .faction-flag-bg.tattered,
.faction-war-arena.horde-winning .faction-panel.horde .faction-flag-bg.tattered,
.faction-war-arena.voted-horde .faction-panel.horde .faction-flag-bg.tattered,
.faction-war-arena.alliance-winning .faction-panel.alliance .faction-flag-bg.tattered,
.faction-war-arena.voted-alliance .faction-panel.alliance .faction-flag-bg.tattered {
  opacity: 0;
  transform: scale(0.96);
}

.faction-war-arena.horde-winning .faction-panel.horde,
.faction-war-arena.voted-horde .faction-panel.horde {
  border-color: #ef4444;
  box-shadow: 0 24px 60px rgba(220, 38, 38, 0.5), 0 0 40px rgba(245, 158, 11, 0.35), inset 0 0 35px rgba(220, 38, 38, 0.25);
}

.faction-war-arena.alliance-winning .faction-panel.alliance,
.faction-war-arena.voted-alliance .faction-panel.alliance {
  border-color: #3b82f6;
  box-shadow: 0 24px 60px rgba(59, 130, 246, 0.55), 0 0 40px rgba(250, 204, 21, 0.35), inset 0 0 35px rgba(59, 130, 246, 0.25);
}

/* ============================================================== */
/* LOSING STATE: TATTERED & SINGED FLAG, RECEDES, STILL CLICKABLE */
/* ============================================================== */
.faction-panel.is-losing,
.faction-war-arena.horde-winning .faction-panel.alliance,
.faction-war-arena.voted-horde .faction-panel.alliance,
.faction-war-arena.alliance-winning .faction-panel.horde,
.faction-war-arena.voted-alliance .faction-panel.horde {
  flex: 0.88;
  transform: scale(0.965) translateZ(-18px) translateY(8px);
  z-index: 2;
  opacity: 0.88;
  filter: brightness(0.82) contrast(1.12);
  border-color: rgba(60, 45, 45, 0.65);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 0 45px rgba(0, 0, 0, 0.75);
}

.faction-panel.is-losing .faction-flag-bg.epic,
.faction-war-arena.horde-winning .faction-panel.alliance .faction-flag-bg.epic,
.faction-war-arena.voted-horde .faction-panel.alliance .faction-flag-bg.epic,
.faction-war-arena.alliance-winning .faction-panel.horde .faction-flag-bg.epic,
.faction-war-arena.voted-alliance .faction-panel.horde .faction-flag-bg.epic {
  opacity: 0;
  transform: scale(1.02);
}

.faction-panel.is-losing .faction-flag-bg.tattered,
.faction-war-arena.horde-winning .faction-panel.alliance .faction-flag-bg.tattered,
.faction-war-arena.voted-horde .faction-panel.alliance .faction-flag-bg.tattered,
.faction-war-arena.alliance-winning .faction-panel.horde .faction-flag-bg.tattered,
.faction-war-arena.voted-alliance .faction-panel.horde .faction-flag-bg.tattered {
  opacity: 0.85;
  transform: scale(1.0);
}

.faction-panel.is-losing .faction-scorch-overlay,
.faction-war-arena.horde-winning .faction-panel.alliance .faction-scorch-overlay,
.faction-war-arena.voted-horde .faction-panel.alliance .faction-scorch-overlay,
.faction-war-arena.alliance-winning .faction-panel.horde .faction-scorch-overlay,
.faction-war-arena.voted-alliance .faction-panel.horde .faction-scorch-overlay {
  opacity: 0.6;
}

/* HOVER PREVIEW STATES (SMOOTH FLUID FEEL) */
.faction-war-arena.hover-horde:not(.horde-winning):not(.alliance-winning):not(.voted-horde):not(.voted-alliance) .faction-panel.horde {
  flex: 1.25;
  transform: scale(1.015) translateY(-4px);
  filter: brightness(1.08);
  border-color: rgba(220, 38, 38, 0.85);
  box-shadow: 0 0 35px rgba(220, 38, 38, 0.35);
}
.faction-war-arena.hover-horde:not(.horde-winning):not(.alliance-winning):not(.voted-horde):not(.voted-alliance) .faction-panel.alliance {
  flex: 0.88;
  transform: scale(0.985);
  filter: brightness(0.82);
}

.faction-war-arena.hover-alliance:not(.horde-winning):not(.alliance-winning):not(.voted-horde):not(.voted-alliance) .faction-panel.alliance {
  flex: 1.25;
  transform: scale(1.015) translateY(-4px);
  filter: brightness(1.08);
  border-color: rgba(59, 130, 246, 0.85);
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.35);
}
.faction-war-arena.hover-alliance:not(.horde-winning):not(.alliance-winning):not(.voted-horde):not(.voted-alliance) .faction-panel.horde {
  flex: 0.88;
  transform: scale(0.985);
  filter: brightness(0.82);
}

/* CRISP VECTOR CRESTS */
.faction-crest-frame {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.faction-crest-frame.horde {
  filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.45));
}
.faction-crest-frame.alliance {
  filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.45));
}
.faction-panel:hover .faction-crest-frame {
  transform: scale(1.06);
}

.faction-crest-img {
  width: 100%;
  height: 100%;
  display: block;
}

.faction-names-block {
  text-align: center;
}

.faction-banner-callout {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.15em;
  margin-bottom: 2px;
}
.faction-banner-callout.horde { color: #f87171; }
.faction-banner-callout.alliance { color: #60a5fa; }

.faction-city-title {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.faction-territory-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 3px;
}

.faction-creed-quote {
  font-style: italic;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 6px;
  line-height: 1.4;
}

/* METRICS CARD */
.faction-metrics-card {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius, 6px);
  padding: 16px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.faction-metrics-card.horde { border-color: rgba(239, 68, 68, 0.3); }
.faction-metrics-card.alliance { border-color: rgba(59, 130, 246, 0.3); }

.faction-pct-display {
  font-family: 'Cinzel', serif;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}
.faction-pct-display.horde {
  color: #ef4444;
  text-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
}
.faction-pct-display.alliance {
  color: #3b82f6;
  text-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
}

.faction-progress-track {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 8px;
}

.faction-progress-fill {
  height: 100%;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.faction-progress-fill.horde {
  background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
.faction-progress-fill.alliance {
  background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

.faction-voter-tally {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
}

/* PLEDGE BUTTONS */
.faction-pledge-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-faction-pledge {
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-btn, 6px);
  border: 1px solid;
  color: #ffffff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.btn-faction-pledge .pledge-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
}
.btn-faction-pledge.horde {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  border-color: #ef4444;
}
.btn-faction-pledge.horde:hover {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}
.btn-faction-pledge.alliance {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border-color: #3b82f6;
}
.btn-faction-pledge.alliance:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
  transform: translateY(-1px);
}

.allegiance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.allegiance-indicator.horde {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
}
.allegiance-indicator.alliance {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

/* ROSTER BOX */
.faction-roster-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius, 6px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.faction-roster-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}
.faction-roster-head.horde { color: #fca5a5; }
.faction-roster-head.alliance { color: #93c5fd; }

.faction-voters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 4px;
}

/* VOTER CARD */
.faction-voter-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 7px 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.faction-voter-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.faction-voter-card.is-friend {
  background: rgba(255, 255, 255, 0.07);
  border-left: 3px solid #ffd700;
}

.faction-voter-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.faction-voter-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.faction-voter-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.faction-voter-name {
  font-weight: 700;
  font-size: 12.5px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faction-friend-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}

.faction-voter-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-muted, #94a3b8);
}

.voter-mini-class-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.faction-voter-sep { opacity: 0.4; }

.faction-voter-auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.auth-tag-icon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* CENTER VS BADGE */
.faction-war-vs-badge {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: rgba(15, 15, 22, 0.95);
  border: 2px solid #ffd700;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(255, 215, 0, 0.4);
  pointer-events: none;
}

.vs-crest-circle {
  width: 32px;
  height: 32px;
  margin-top: -6px;
}
.vs-swords-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.vs-text {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 900;
  color: #ffd700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.vs-total-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  margin-top: 2px;
}
.vs-total-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}
.vs-total-lbl {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}

.vs-realm-badge {
  position: absolute;
  bottom: -18px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #ffd700;
  white-space: nowrap;
}

/* FACTION AUTH MODAL */
.faction-auth-modal {
  background: var(--bg-card, #12121e);
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.15);
}

.auth-prompt-desc {
  font-size: 13px;
  color: var(--text-secondary, #cbd5e1);
  margin-bottom: 18px;
  line-height: 1.5;
}

.auth-provider-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-auth-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-btn, 6px);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.btn-auth-provider.bnet {
  background: #002650;
  border-color: #0074e0;
}
.btn-auth-provider.bnet:hover {
  background: #003a7a;
  box-shadow: 0 0 15px rgba(0, 116, 224, 0.5);
}
.btn-auth-provider.discord {
  background: #232742;
  border-color: #5865f2;
}
.btn-auth-provider.discord:hover {
  background: #2f3456;
  box-shadow: 0 0 15px rgba(88, 101, 242, 0.5);
}
.btn-auth-provider.steam {
  background: #171d25;
  border-color: #66c0f4;
}
.btn-auth-provider.steam:hover {
  background: #222b36;
  box-shadow: 0 0 15px rgba(102, 192, 244, 0.5);
}

.auth-divider-line {
  display: flex;
  align-items: center;
  margin: 18px 0;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.auth-divider-line::before, .auth-divider-line::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-divider-line span {
  padding: 0 10px;
}

/* EMOJI REPLACEMENT WOW ICONS */
.wow-sub-tab-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.wow-role-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
}

.wow-inline-icon {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  display: inline-block;
}

.drag-wow-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -3px;
  margin-right: 6px;
}

.wow-action-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
}

.footer-wow-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 4px;
}

.wow-vps-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 4px;
}

.wow-mini-crest {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -2px;
}

.wow-circle-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 0px;
  margin-right: 4px;
}
.wow-circle-indicator.green { background: #10b981; box-shadow: 0 0 5px #10b981; }
.wow-circle-indicator.red { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.wow-circle-indicator.clear { background: #94a3b8; }

/* RESPONSIVE DESIGN FOR FACTION ARENA */
@media (max-width: 900px) {
  .faction-war-arena {
    flex-direction: column;
    min-height: auto;
  }
  .faction-war-vs-badge {
    position: static;
    transform: none;
    margin: -10px auto;
    width: 70px;
    height: 70px;
  }
  .faction-war-arena.voted-horde .faction-panel.horde {
    min-height: 480px;
  }
  .faction-war-arena.voted-horde .faction-panel.alliance {
    min-height: 240px;
  }
  .faction-war-arena.voted-alliance .faction-panel.alliance {
    min-height: 480px;
  }
  .faction-war-arena.voted-alliance .faction-panel.horde {
    min-height: 240px;
  }
}

/* ==========================================================================
   26. HERO BANNER OVERLAY, BRUTALIST BADGE, AUTH STRIP & COMPACT FOOTER
   ========================================================================== */

/* Hero Banner Container & Positions */
.hero-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.hero-banner-container {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.hero-banner-video,
.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* Semi-Transparent Top Utility Strip Spanning the Banner */
.hero-top-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 14px;
  background: rgba(3, 6, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.22);
  z-index: 10;
}

.hero-auth-pills-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-strip-label {
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 2px;
}

/* 3 Auth Service Pills */
.auth-service-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 18px;
  min-width: 64px;
  padding: 0 6px;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 9.5px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  opacity: 0.65;
  filter: grayscale(0.15);
  user-select: none;
}

.auth-service-pill svg,
.auth-pill-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.auth-service-pill:hover {
  opacity: 0.95;
  filter: none;
  transform: translateY(-1px);
}

.auth-service-pill.logged-in {
  opacity: 1 !important;
  filter: none !important;
}

.auth-service-pill.bnet-pill {
  background: rgba(0, 174, 255, 0.14);
  border: 1px solid rgba(0, 174, 255, 0.45);
  color: #38bdf8;
}
.auth-service-pill.bnet-pill:hover {
  border-color: #00aeff;
  box-shadow: 0 0 10px rgba(0, 174, 255, 0.35);
  color: #ffffff;
}
.auth-service-pill.bnet-pill.logged-in {
  border-color: #00aeff;
  box-shadow: 0 0 12px rgba(0, 174, 255, 0.5), inset 0 0 8px rgba(0, 174, 255, 0.2);
  color: #ffffff;
}

.auth-service-pill.discord-pill {
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.45);
  color: #a5b4fc;
}
.auth-service-pill.discord-pill:hover {
  border-color: #5865F2;
  box-shadow: 0 0 10px rgba(88, 101, 242, 0.35);
  color: #ffffff;
}
.auth-service-pill.discord-pill.logged-in {
  border-color: #5865F2;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.5), inset 0 0 8px rgba(88, 101, 242, 0.2);
  color: #ffffff;
}

.auth-service-pill.steam-pill {
  background: rgba(102, 192, 244, 0.14);
  border: 1px solid rgba(102, 192, 244, 0.45);
  color: #7dd3fc;
}
.auth-service-pill.steam-pill:hover {
  border-color: #66c0f4;
  box-shadow: 0 0 10px rgba(102, 192, 244, 0.35);
  color: #ffffff;
}
.auth-service-pill.steam-pill.logged-in {
  border-color: #66c0f4;
  box-shadow: 0 0 12px rgba(102, 192, 244, 0.5), inset 0 0 8px rgba(102, 192, 244, 0.2);
  color: #ffffff;
}

.hero-strip-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-quick-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-patch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 2px;
  text-transform: uppercase;
}

/* Countdown Overlay on Center of Banner */
.hero-countdown-overlay {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 6;
  text-align: center;
  pointer-events: auto;
}

.hero-countdown-tagline {
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
  text-transform: uppercase;
  background: rgba(3, 6, 12, 0.7);
  padding: 2px 8px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  backdrop-filter: blur(4px);
}

.hero-banner-digits {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(3, 6, 12, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.22);
  padding: 4px 10px;
  backdrop-filter: blur(6px);
}

/* Brutalist CHAOS MEN Badge (Bottom-Left) */
.hero-banner-brand-brutalist {
  position: absolute;
  bottom: 12px;
  left: 14px;
  display: flex;
  flex-direction: column;
  z-index: 6;
  background: rgba(4, 7, 14, 0.88);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-left: 3px solid var(--neon-cyan);
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}

.brutalist-kicker {
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hero-guild-title-brutalist {
  font-family: var(--font-poll-geom, var(--font-poll-mono, monospace));
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* Allegiance Indicator Updates */
.allegiance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 2px;
  font-family: var(--font-poll-geom, var(--font-poll-mono, monospace));
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

.allegiance-indicator.horde {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.allegiance-indicator.alliance {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
}

/* Fix Raider Role Pill Overflow */
.raider-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.raider-role-pill .wow-inline-icon {
  width: 12px !important;
  height: 12px !important;
  vertical-align: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Heatmap Stacked Header Layout */
.heatmap-header-stacked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}

.heatmap-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.heatmap-title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.card-subtitle-desc {
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 11.5px;
  color: #94a3b8;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Streamlined Compact Footer */
.app-footer.compact-footer {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 7, 12, 0.95);
}

.footer-content-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1340px;
  margin: 0 auto;
}

.footer-brand-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 12px;
  color: #94a3b8;
}

.footer-brand-link {
  color: var(--neon-cyan);
  font-weight: 800;
  text-decoration: none;
}

.footer-brand-link:hover {
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.footer-compact-sep {
  color: #475569;
}

.footer-compact-desc {
  color: #64748b;
  font-size: 11px;
}

.footer-gateway-dropdown-wrap {
  position: relative;
}

.btn-footer-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #94a3b8;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.btn-footer-dropdown:hover {
  color: #ffffff;
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.footer-caret {
  font-size: 9px;
  color: var(--neon-cyan);
  transition: transform 0.2s ease;
}

.footer-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #060a12;
  border: 1px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
  padding: 4px 0;
  min-width: 220px;
  z-index: 100;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}

.footer-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 11.5px;
  color: #cbd5e1;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.footer-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.15);
  color: #ffffff;
}

/* Compact Consensus Metrics (Raw Data Table & Cards) */
.consensus-raw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-poll-mono, var(--font-mono, monospace));
  font-size: 11.5px;
}

.consensus-raw-row {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.12s ease;
}

.consensus-raw-row:last-child {
  border-bottom: none;
}

.consensus-raw-row:hover {
  background: rgba(0, 240, 255, 0.05);
}

.consensus-raw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.consensus-raw-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.consensus-raw-day {
  font-weight: 800;
  color: #ffffff;
  min-width: 80px;
}

.consensus-raw-votes {
  color: #94a3b8;
  font-size: 11px;
}

.consensus-raw-pct {
  font-weight: 800;
  color: var(--neon-green);
  text-align: right;
}

.consensus-raw-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.consensus-raw-slot-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  font-size: 10px;
  color: #cbd5e1;
}

.consensus-raw-slot-chip b {
  color: var(--neon-cyan);
}

/* ==========================================================================
   15. IRON-BOUND LEDGER & CHAOS-BOT LIVE SYNC EXTENSIONS
   ========================================================================== */
.card-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-header.has-sec-icon {
  padding: 0 12px 0 0;
  min-height: 24px;
}

.sec-head-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.sec-head-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-void);
  border-right: 1px solid var(--line-strong);
  overflow: hidden;
}

.sec-head-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.roster-table td {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cd-num,
.class-stat-count,
.mini-chip-val,
.panel-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.bot-sync-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(212, 164, 76, 0.12);
  border: 1px solid rgba(212, 164, 76, 0.45);
  color: var(--gold-bright);
}

.bot-sync-meta-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.bot-live-strip-card {
  --accent: var(--gold-primary);
}

.bot-live-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 14px 16px;
}

@media (max-width: 860px) {
  .bot-live-strip-grid {
    grid-template-columns: 1fr;
  }
}

.bot-live-col {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-live-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

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

.bot-event-card,
.bot-lfg-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-primary);
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bot-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.bot-event-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.bot-event-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-primary);
}

.bot-event-roles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.bot-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  font-family: var(--font-mono);
  font-size: 12px;
}

.bot-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
}

.raid-status-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.raid-status-pill.status-bench,
.raid-status-pill.status-tentative,
.raid-status-pill.status-late {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.raid-status-pill.status-absence,
.raid-status-pill.status-idk {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.crafter-recipe-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.45);
  border-radius: var(--radius-btn);
  cursor: help;
}

/* ==========================================================================
   16. UNIFIED GUILD SHELL, 8-TAB NAV, SQUAD SUB-NAV & VIEW TRANSITIONS
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.16s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.top-auth-strip {
  view-transition-name: guild-top-auth;
}

.hero-card {
  view-transition-name: guild-hero-banner;
}

.launch-strip {
  view-transition-name: guild-launch-strip;
}

.guild-nav-bar {
  view-transition-name: guild-main-nav;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  width: 100% !important;
}

@media (max-width: 1120px) {
  .guild-nav-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .guild-nav-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px !important;
    padding-bottom: 2px !important;
  }
  .guild-nav-bar::-webkit-scrollbar {
    display: none;
  }
  .guild-nav-bar .nav-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: 42px !important;
    padding: 0 11px !important;
  }
}

.guild-nav-bar .nav-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 6px !important;
  background: linear-gradient(180deg, #161310 0%, #100e0c 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-bottom: 2px solid var(--border-bronze, #473621) !important;
  border-radius: 0 !important;
  color: var(--text-parchment, #d6cbb8) !important;
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important;
}

.guild-nav-bar .nav-tab:hover {
  background: linear-gradient(180deg, #241d15 0%, #181410 100%) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

.guild-nav-bar .nav-tab.active,
.guild-nav-bar .nav-tab[aria-current="page"] {
  background: linear-gradient(180deg, #261e14 0%, #161310 100%) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  border-top: 2px solid var(--gold-crest, #f2c96d) !important;
  border-bottom: 2px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 14px rgba(212, 164, 76, 0.22), inset 0 1px 0 rgba(242, 201, 109, 0.2) !important;
}

.guild-nav-bar .nav-tab-wow-icon {
  width: 17px !important;
  height: 17px !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  flex-shrink: 0 !important;
}

.guild-nav-bar .nav-tab-badge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 0 !important;
  letter-spacing: 0.03em !important;
  background: rgba(212, 164, 76, 0.14) !important;
  border: 1px solid rgba(212, 164, 76, 0.38) !important;
  color: var(--gold-crest, #f2c96d) !important;
  flex-shrink: 0 !important;
}

.guild-nav-bar .nav-tab-badge.addon-ver {
  background: rgba(212, 164, 76, 0.14) !important;
  color: var(--gold-crest, #f2c96d) !important;
  border: 1px solid rgba(212, 164, 76, 0.38) !important;
}

/* Unified Squad Command Header & Sub-Navigation (for /gaming, /game-night, /wagers, /wheel) */
.squad-shell-header {
  view-transition-name: squad-shell-header;
  background: rgba(13, 13, 16, 0.96);
  border-bottom: 1px solid var(--line-strong, #3e2f1c);
  border-top: 2px solid var(--gold-primary, #d4a44c);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}

.squad-shell-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.squad-brand-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.squad-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--bg-card, #131318);
  border: 1px solid var(--line-strong, #3e2f1c);
  border-radius: var(--radius-btn, 4px);
  color: var(--gold-bright, #f2c96d);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}

.squad-back-btn:hover {
  background: rgba(212, 164, 76, 0.14);
  border-color: var(--gold-primary, #d4a44c);
  color: #ffffff;
}

.squad-brand-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary, #f6f4ee);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.squad-brand-title span.gold {
  color: var(--gold-primary, #d4a44c);
}

.squad-nav-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.squad-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--bg-surface, #0d0d10);
  border: 1px solid var(--line-strong, #3e2f1c);
  border-radius: 0;
  color: var(--text-secondary, #a8a293);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}

.squad-nav-tab:hover {
  background: var(--bg-card-hover, #1a1816);
  border-color: var(--gold-primary, #d4a44c);
  color: var(--text-primary, #f6f4ee);
}

.squad-nav-tab.active,
.squad-nav-tab[aria-current="page"] {
  background: var(--bg-card, #131318);
  border-color: var(--gold-primary, #d4a44c);
  border-top: 2px solid var(--gold-bright, #f2c96d);
  color: var(--gold-bright, #f2c96d);
  box-shadow: 0 0 12px rgba(212, 164, 76, 0.2);
}

.squad-nav-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.35);
  color: var(--gold-bright, #f2c96d);
}

/* ==========================================================================
   17. MOBILE-FIRST RESPONSIVE ERGONOMICS (<= 768px & <= 680px)
   ========================================================================== */
.mob-only-btn {
  display: none;
}

.planner-mobile-tabs {
  display: none;
}

.roster-mob-card-row {
  display: none;
}

.mob-only-spec-text {
  display: none;
}

.mobile-sticky-cart-bar {
  display: none;
}

@media (max-width: 768px) {
  /* Prevent iOS Safari & Android Chrome auto-zoom on form focus */
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  select,
  textarea,
  .form-input-plain,
  .form-select,
  .form-select-plain,
  .craft-search-field {
    font-size: 16px !important;
    min-height: 40px;
  }

  /* Compact Hero & Launch Strip above the fold on mobile */
  .hero-banner-container {
    height: 150px !important;
    min-height: 150px !important;
  }

  .hero-guild-title {
    font-size: clamp(2rem, 6vw, 3rem) !important;
    letter-spacing: 0.12em !important;
    padding-left: 0.12em !important;
  }

  .launch-strip {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .launch-date-text {
    display: none !important;
  }

  .countdown-bar-digits {
    gap: 3px !important;
  }

  .cd-chip {
    padding: 2px 5px !important;
  }

  /* Profession Filter Pills — horizontal swipe strip instead of tall wrapped stack */
  .craft-prof-pills-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }

  .craft-prof-pills-row::-webkit-scrollbar {
    display: none;
  }

  .craft-prof-pills-row .prof-pill {
    flex: 0 0 auto !important;
    min-height: 40px !important;
  }

  /* Polls 3-View Sub-Tab Strip */
  .poll-view-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
  }

  .poll-view-tabs::-webkit-scrollbar {
    display: none;
  }

  .poll-view-tabs .poll-sub-tab {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
  }

  /* Squad Sub-Nav horizontal scroll on phones */
  .squad-shell-inner {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .squad-nav-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .squad-nav-bar::-webkit-scrollbar {
    display: none;
  }

  .squad-nav-tab {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  /* Raid & Campfire Buffs Planner 3-Tab Switcher on Mobile */
  .planner-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px 10px;
    background: #09090d;
    border-bottom: 1px solid var(--line-strong, #3e2f1c);
  }

  .planner-mob-tab {
    appearance: none;
    border: 1px solid var(--line-strong, #3e2f1c);
    background: #121218;
    color: var(--text-secondary, #a8a293);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 4px;
    min-height: 38px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .planner-mob-tab.active {
    border-color: var(--gold-primary, #d4a44c);
    background: rgba(212, 164, 76, 0.16);
    color: var(--gold-bright, #f2c96d);
  }

  .planner-mob-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 164, 76, 0.35);
    color: var(--text-primary, #f6f4ee);
  }

  .planner-grid[data-mob-active-tab="available"] .planner-panel[data-mob-panel="groups"],
  .planner-grid[data-mob-active-tab="available"] .planner-panel[data-mob-panel="tracker"] {
    display: none !important;
  }

  .planner-grid[data-mob-active-tab="groups"] .planner-panel[data-mob-panel="available"],
  .planner-grid[data-mob-active-tab="groups"] .planner-panel[data-mob-panel="tracker"] {
    display: none !important;
  }

  .planner-grid[data-mob-active-tab="tracker"] .planner-panel[data-mob-panel="available"],
  .planner-grid[data-mob-active-tab="tracker"] .planner-panel[data-mob-panel="groups"] {
    display: none !important;
  }

  /* Sticky Bottom Cart Bar for Shopping List on Mobile */
  .mobile-sticky-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(9, 10, 15, 0.97);
    border-top: 2px solid var(--gold-primary, #d4a44c);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.85);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    backdrop-filter: blur(10px);
  }

  .mobile-sticky-cart-bar[hidden] {
    display: none !important;
  }

  .mobile-sticky-cart-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
  }

  .mobile-sticky-cart-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold-bright, #f2c96d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mobile-sticky-cart-sub {
    font-size: 11px;
    color: var(--text-secondary, #a8a293);
  }

  .mobile-sticky-cart-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
}

@media (max-width: 680px) {
  .mob-only-btn {
    display: inline-flex !important;
  }

  /* Zero-Horizontal-Scroll Raider Cards Mode for #rosterTable */
  .table-wrapper.mobile-cards-mode {
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
  }

  .table-wrapper.mobile-cards-mode + .roster-scroll-cue,
  .roster-card:has(.table-wrapper.mobile-cards-mode) .roster-scroll-cue {
    display: none !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table,
  .table-wrapper.mobile-cards-mode .roster-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table thead {
    display: none !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    background: var(--bg-card, #131318) !important;
    border: 1px solid var(--line-strong, #3e2f1c) !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td {
    border: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-name {
    flex: 1 1 55% !important;
    font-size: 14px !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-class-spec {
    flex: 0 0 auto !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-professions {
    flex: 1 1 100% !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-professions::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #827c6e);
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-racials {
    display: none !important;
  }

  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-socials,
  .table-wrapper.mobile-cards-mode .roster-table tbody td.col-actions {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  /* Crafting Orders Queue Table -> Mobile Commission Cards */
  .craft-orders-table thead {
    display: none !important;
  }

  .craft-orders-table,
  .craft-orders-table tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .craft-orders-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    background: var(--bg-card, #131318) !important;
    border: 1px solid var(--line-strong, #3e2f1c) !important;
  }

  .craft-orders-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .craft-orders-table tbody td:first-child {
    flex: 1 1 100% !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .craft-orders-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #827c6e);
  }
}







/* === MIGRATED XP.HTML BARRENS SAVANNA & VFD STYLES === */


    /* ==========================================================================
       DUAL-THEME DESIGN TOKENS:
       1. "wow-forever"   -> High-Craft Dark Fantasy & Molten Gold Carnival Derby
       2. "retrowave-vfd" -> 1984 Outrun Arcade / Vacuum Fluorescent Derby Board
       ========================================================================== */
    @font-face {
      font-family: 'Friz Quadrata TT';
      src: local('Friz Quadrata TT'), local('FrizQuadrataTT'),
           url('https://db.onlinewebfonts.com/t/d2d88565b126046d25a9f257c3d3f3c2.woff2') format('woff2');
      font-weight: 400 900;
      font-display: swap;
    }

    :root,
    html[data-xp-theme="wow-forever"] {
      --xp-bg-base: var(--bg-abyss, #080706);
      --xp-bg-panel: var(--bg-basalt, #100e0c);
      --xp-bg-card: var(--bg-panel, #161310);
      --xp-bg-card-hover: var(--bg-elevated, #1f1a15);
      --xp-bg-input: var(--bg-input, #050403);
      --xp-text-main: var(--text-ivory, #f6f4ee);
      --xp-text-muted: var(--text-dust, #9a8f7e);
      --xp-accent-primary: var(--gold-barrens, #d4a44c);
      --xp-accent-secondary: var(--gold-crest, #f2c96d);
      --xp-accent-tertiary: var(--ember-savanna, #e07a2e);
      --xp-accent-success: #22c55e;
      --xp-accent-danger: #ef4444;
      --xp-border-primary: var(--border-bronze, #473621);
      --xp-border-subtle: var(--border-earth, #2c241b);
      --xp-font-heading: 'Cinzel', 'Friz Quadrata TT', Georgia, serif;
      --xp-font-body: 'Inter', 'Friz Quadrata TT', -apple-system, BlinkMacSystemFont, sans-serif;
      --xp-font-mono: 'JetBrains Mono', monospace;
      --xp-radius: 0px;
      --xp-card-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.85);
      --xp-accent-glow: rgba(212, 164, 76, 0.25);
      --xp-vfd-mesh-opacity: 0;
      --xp-track-turf: linear-gradient(180deg, #080706 0%, #100e0c 50%, #080706 100%);
      --xp-bulb-color: #d4a44c;
    }

    html[data-xp-theme="wow-forever"] body.xp-page-body {
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
      font-variant-numeric: tabular-nums;
    }

    html[data-xp-theme="retrowave-vfd"] {
      --xp-bg-base: #0d030a;
      --xp-bg-panel: rgba(24, 9, 26, 0.95);
      --xp-bg-card: rgba(31, 11, 34, 0.95);
      --xp-bg-card-hover: rgba(46, 16, 51, 0.98);
      --xp-bg-input: #120413;
      --xp-text-main: #f2faff;
      --xp-text-muted: #606992;
      --xp-accent-primary: #fea520;
      --xp-accent-secondary: #4bb9f8;
      --xp-accent-tertiary: #d82480;
      --xp-accent-success: #0cd29d;
      --xp-accent-danger: #e22241;
      --xp-border-primary: #4bb9f8;
      --xp-border-subtle: rgba(75, 185, 248, 0.28);
      --xp-font-heading: 'Orbitron', sans-serif;
      --xp-font-body: 'Chakra Petch', sans-serif;
      --xp-font-mono: 'Share Tech Mono', monospace;
      --xp-radius: 2px;
      --xp-card-shadow: 0 0 16px rgba(75, 185, 248, 0.28), inset 0 0 12px rgba(216, 36, 128, 0.14);
      --xp-accent-glow: rgba(254, 165, 32, 0.45);
      --xp-vfd-mesh-opacity: 1;
      --xp-track-turf: linear-gradient(180deg, rgba(14, 3, 15, 0.96) 0%, rgba(28, 7, 31, 0.92) 50%, rgba(14, 3, 15, 0.96) 100%);
      --xp-bulb-color: #fea520;
    }

    :root {
      --class-warrior: #C79C6E;
      --class-paladin: #F58CBA;
      --class-hunter: #ABD473;
      --class-rogue: #FFF569;
      --class-priest: #FFFFFF;
      --class-shaman: #0070DE;
      --class-mage: #40C7EB;
      --class-warlock: #8787ED;
      --class-druid: #FF7D0A;
    }

    html {
      color-scheme: dark;
    }

    /* Theme-Matched Custom Scrollbars for XP Derby page */
    @supports not selector(::-webkit-scrollbar) {
      html[data-xp-theme] * {
        scrollbar-width: thin;
        scrollbar-color: var(--xp-border-primary) rgba(8, 7, 6, 0.85);
      }
    }

    html[data-xp-theme] ::-webkit-scrollbar {
      width: 8px;
      height: 5px;
    }

    html[data-xp-theme] ::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }

    html[data-xp-theme] ::-webkit-scrollbar-track {
      background: rgba(8, 7, 6, 0.92);
      border-radius: 999px;
      border: 1px solid rgba(212, 164, 76, 0.08);
    }

    html[data-xp-theme] ::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, rgba(212, 164, 76, 0.55), rgba(224, 122, 46, 0.55));
      border: 1px solid var(--xp-border-primary);
      border-radius: 999px;
    }

    html[data-xp-theme="retrowave-vfd"] ::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, rgba(212, 164, 76, 0.55), rgba(224, 122, 46, 0.55));
      border: 1px solid rgba(212, 164, 76, 0.5);
    }

    html[data-xp-theme] ::-webkit-scrollbar-thumb:hover {
      background: var(--xp-accent-primary);
    }

    html[data-xp-theme] ::-webkit-scrollbar-corner {
      background: rgba(8, 7, 6, 0.92);
    }

    body.xp-page-body {
      background-color: var(--xp-bg-base);
      color: var(--xp-text-main);
      font-family: var(--xp-font-body);
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      position: relative;
    }

    .vfd-perspective-backdrop {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 36vh;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.35s ease;
      background: radial-gradient(ellipse at bottom center, rgba(224, 122, 46, 0.16) 0%, transparent 70%);
    }

    html[data-xp-theme="retrowave-vfd"] .vfd-perspective-backdrop {
      opacity: 0.7;
    }

    .ember-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.55;
      transition: opacity 0.35s ease;
    }

    html[data-xp-theme="retrowave-vfd"] .ember-canvas {
      opacity: 0;
    }

    /* Unified Shell matching .page-container so Banner, Nav, and Derby Track align flush */
    .xp-shell {
      position: relative;
      z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: 8px 24px 48px;
    }

    /* ==========================================================================
       SYMMETRICAL TOP HEADER BAR (UNIFIED ACROSS ALL PAGES)
       ========================================================================== */
    body.xp-page-body .top-auth-strip {
      position: relative;
      z-index: 100;
      display: flex !important;
      width: 100%;
      padding: 3px 18px !important;
      min-height: 30px;
      background: linear-gradient(90deg, #080706 0%, #161310 50%, #080706 100%);
      border-bottom: 1px solid var(--border-bronze, #473621);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
    }

    .xp-top-header-grid {
      position: relative;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 6px 24px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      min-height: 42px;
    }

    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      z-index: 2;
    }

    .top-bar-center {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      white-space: nowrap;
      z-index: 1;
    }

    .top-bar-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      z-index: 2;
    }

    .top-auth-actions {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    /* ==========================================================================
       SYMMETRICAL, CENTERED COMMAND & FILTER DECK
       ========================================================================== */
    .xp-compact-control-deck {
      background: var(--xp-bg-panel);
      border: 1.5px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      padding: 8px 12px;
      margin-bottom: 8px;
      box-shadow: var(--xp-card-shadow);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* Row 1: Dead-Center Guild Scope Tabs */
    .xp-deck-row-centered {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* Row 2: Symmetrical 3-Column Filter & Class Grid (Left Filters | Center Class Pills | Right Sort & Actions) */
    .xp-deck-row-symmetrical {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
    }

    .xp-filter-wing-left {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .xp-filter-wing-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .xp-filter-wing-right {
      display: grid;
      grid-template-columns: minmax(90px, 0.92fr) minmax(70px, 0.72fr) minmax(136px, 1.4fr) auto;
      align-items: center;
      gap: 5px;
      width: 100%;
    }

    .xp-quick-toggles-group {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      height: 30px;
      padding: 0 6px;
      background: var(--xp-bg-input);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      font-family: var(--xp-font-mono);
      font-size: 0.68rem;
      white-space: nowrap;
    }

    .xp-stream-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 28px;
      padding: 0 9px;
      border-radius: var(--xp-radius);
      background: rgba(212, 164, 76, 0.14);
      border: 1px solid rgba(212, 164, 76, 0.45);
      font-family: var(--xp-font-mono);
      font-size: 0.7rem;
      color: var(--gold-crest, #f2c96d);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .xp-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold-barrens, #d4a44c);
      box-shadow: 0 0 8px var(--gold-barrens, #d4a44c);
      animation: xpPulse 1.6s infinite ease-in-out;
    }

    @keyframes xpPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.35); opacity: 0.55; }
    }

    /* Centered Guild Scope Pills */
    .xp-guild-tabs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .xp-guild-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 30px;
      padding: 0 14px;
      background: var(--xp-bg-card);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      cursor: pointer;
      color: var(--xp-text-main);
      font-family: var(--xp-font-heading);
      font-size: 0.74rem;
      font-weight: 700;
      line-height: 1;
      transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .xp-guild-tab:hover {
      border-color: var(--xp-accent-primary);
      transform: translateY(-1px);
    }

    .xp-guild-tab.active {
      background: linear-gradient(135deg, rgba(212, 164, 76, 0.24), rgba(224, 122, 46, 0.14));
      border-color: var(--xp-accent-primary);
      box-shadow: 0 0 10px var(--xp-accent-glow);
    }

    .xp-guild-tab-meta {
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1;
      color: var(--xp-accent-secondary);
      font-variant-numeric: tabular-nums;
    }

    /* Theme & Scale Switcher Pills (Placed in Top Header next to Auth) */
    .xp-theme-switcher {
      display: inline-flex;
      align-items: center;
      height: 28px;
      background: var(--xp-bg-input);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      padding: 2px;
      gap: 2px;
    }

    .xp-theme-btn {
      border: none;
      background: transparent;
      color: var(--xp-text-muted);
      font-family: var(--xp-font-heading);
      font-size: 0.66rem;
      font-weight: 700;
      height: 22px;
      padding: 0 8px;
      border-radius: calc(var(--xp-radius) - 1px);
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .xp-theme-btn.active {
      background: var(--xp-accent-primary);
      color: #09060c;
      box-shadow: 0 0 10px var(--xp-accent-glow);
    }

    .xp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 28px;
      padding: 0 10px;
      border-radius: var(--xp-radius);
      font-family: var(--xp-font-heading);
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      border: 1px solid var(--xp-border-primary);
      background: rgba(245, 201, 75, 0.13);
      color: var(--xp-accent-primary);
      white-space: nowrap;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    .xp-btn:hover {
      background: var(--xp-accent-primary);
      color: #0b0710;
      box-shadow: 0 0 12px var(--xp-accent-glow);
    }

    .xp-btn.cyan {
      border-color: var(--xp-accent-secondary);
      background: rgba(224, 122, 46, 0.14);
      color: var(--xp-accent-secondary);
    }

    .xp-btn.cyan:hover {
      background: var(--xp-accent-secondary);
      color: #080706;
    }

    .xp-input,
    .xp-select {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      background: var(--xp-bg-input);
      border: 1px solid var(--xp-border-subtle);
      color: var(--xp-text-main);
      padding: 0 5px;
      border-radius: var(--xp-radius);
      font-family: var(--xp-font-body);
      font-size: 0.71rem;
    }

    .xp-form-field .xp-input,
    .xp-form-field .xp-select {
      width: 100%;
      height: 34px;
    }

    .xp-input:focus-visible,
    .xp-select:focus-visible,
    .xp-btn:focus-visible,
    .xp-theme-btn:focus-visible,
    .xp-guild-tab:focus-visible,
    .xp-class-pill:focus-visible,
    .xp-dungeon-filter-pill:focus-visible,
    .xp-dungeon-toggle-btn:focus-visible,
    .xp-pitstop-tab:focus-visible {
      outline: 2px solid var(--xp-accent-secondary);
      outline-offset: 2px;
    }

    .xp-class-pills {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 30px;
      padding: 0 4px;
      background: rgba(8, 7, 6, 0.85);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
    }

    .xp-class-pill {
      height: 22px;
      padding: 0 5px;
      font-family: var(--xp-font-heading);
      font-size: 0.62rem;
      font-weight: 700;
      border-radius: calc(var(--xp-radius) - 1px);
      border: 1px solid transparent;
      background: transparent;
      color: var(--xp-text-main);
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    }

    .xp-class-pill:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .xp-class-pill.active {
      background: var(--xp-bg-card);
      border-color: var(--xp-accent-primary);
      box-shadow: 0 0 8px var(--xp-accent-glow);
    }

    /* ==========================================================================
       80% VIEWPORT HERO: CARNIVAL RACE-TO-60 DERBY BOARD (LEFT -> RIGHT)
       ========================================================================== */
    .xp-carnival-derby-board {
      position: relative;
      background: var(--xp-bg-panel);
      border: 2px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.8),
        inset 0 0 24px rgba(245, 201, 75, 0.08);
      overflow: visible;
      margin-bottom: 10px;
      min-height: 76vh;
      display: flex;
      flex-direction: column;
    }

    /* Symmetrical Centered Barrens Ledger Header + 4-Column Podium Strip (Above Filters) */
    .xp-carnival-marquee-header {
      position: relative;
      padding: 9px 14px 8px;
      background:
        linear-gradient(90deg, rgba(212, 164, 76, 0.14), rgba(224, 122, 46, 0.08), rgba(212, 164, 76, 0.14)),
        var(--xp-bg-panel);
      border: 1.5px solid var(--xp-border-primary);
      border-top: 2px solid var(--gold-barrens, #d4a44c);
      border-radius: var(--xp-radius);
      box-shadow: var(--xp-card-shadow);
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .xp-marquee-top-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      padding-top: 2px;
    }

    .xp-marquee-meta-left {
      justify-self: start;
      font-family: var(--xp-font-mono);
      font-size: 0.72rem;
      color: var(--xp-accent-secondary);
      letter-spacing: 0.04em;
    }

    .xp-marquee-title {
      justify-self: center;
      text-align: center;
      margin: 0;
      font-family: var(--xp-font-heading);
      font-size: 1.08rem;
      font-weight: 900;
      color: var(--xp-accent-primary);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 0 12px var(--xp-accent-glow);
    }

    .xp-marquee-meta-right {
      justify-self: end;
      text-align: right;
      font-family: var(--xp-font-mono);
      font-size: 0.72rem;
      color: var(--xp-text-muted);
      letter-spacing: 0.04em;
    }

    /* Symmetrical 4-Column Podium Strip across 100% width */
    .xp-podium-inline-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }

    .xp-podium-chip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 4px 10px;
      background: rgba(8, 7, 6, 0.88);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      font-family: var(--xp-font-mono);
      font-size: 0.72rem;
      font-variant-numeric: tabular-nums;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .xp-podium-chip strong {
      font-family: var(--xp-font-heading);
      font-size: 0.76rem;
    }

    /* ==========================================================================
       60-BAR LEVEL RULER & MILESTONE MARKERS (10, 20, 30, 40, 50, 55, 60)
       ========================================================================== */
    .xp-derby-ruler-row {
      position: relative;
      z-index: 40;
      display: grid;
      grid-template-columns: 238px 1fr 74px;
      column-gap: 10px;
      align-items: center;
      background: rgba(8, 7, 6, 0.96);
      border-bottom: 1.5px solid var(--xp-border-primary);
      padding: 3px 12px;
      font-family: var(--xp-font-mono);
      font-size: 0.66rem;
      color: var(--xp-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      overflow: visible;
    }

    .xp-ruler-scale-track {
      position: relative;
      height: 19px;
      width: 100%;
      display: flex;
      align-items: center;
      overflow: visible;
    }

    .xp-ruler-mark {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 16px;
      padding: 0 5px;
      line-height: 1;
      border-radius: 1px;
      background: #100e0c;
      border: 1px solid rgba(212, 164, 76, 0.78);
      font-family: var(--xp-font-heading);
      font-size: 0.65rem;
      font-weight: 800;
      color: var(--xp-accent-primary);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 3px rgba(0, 0, 0, 0.92);
      z-index: 5;
      pointer-events: auto;
      cursor: help;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

    .xp-ruler-mark:hover,
    .xp-ruler-mark:focus,
    .xp-ruler-mark:focus-visible {
      z-index: 80;
      border-color: var(--xp-accent-primary);
      box-shadow: 0 0 10px var(--xp-accent-glow);
      color: #ffffff;
      outline: none;
    }

    .xp-ruler-mark::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 4px;
      background: var(--xp-accent-primary);
      pointer-events: none;
    }

    .xp-ruler-mark.start-mark {
      transform: translate(0%, -50%);
      border-color: rgba(255, 255, 255, 0.34);
      color: var(--xp-text-main);
      cursor: default;
    }

    .xp-ruler-mark.start-mark::after {
      left: 2px;
    }

    .xp-ruler-mark.mark-55 {
      border-color: #ff944d;
      color: #ffb074;
    }

    .xp-ruler-mark.mark-55::after {
      background: #ff944d;
    }

    .xp-ruler-mark.finish-mark {
      transform: translate(-100%, -50%);
      background: linear-gradient(180deg, rgba(255, 209, 0, 0.26) 0%, rgba(12, 210, 157, 0.2) 100%);
      border-color: var(--xp-accent-primary);
      color: #ffffff;
      text-shadow: 0 1px 2px #000000;
    }

    .xp-ruler-mark.finish-mark::after {
      left: calc(100% - 2px);
    }

    /* Tight, Concise Mouseover Dungeon Bracket Popup on Level Markers */
    .xp-ruler-dungeon-popover {
      position: absolute;
      top: calc(100% + 9px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      min-width: 215px;
      padding: 7px 9px;
      background: rgba(7, 9, 16, 0.98);
      border: 1.5px solid var(--xp-border-primary);
      border-radius: 5px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.92), 0 0 14px var(--xp-accent-glow);
      font-family: var(--xp-font-mono);
      font-size: 0.66rem;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0.01em;
      color: var(--xp-text-main);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
      z-index: 95;
    }

    .xp-ruler-mark.finish-mark .xp-ruler-dungeon-popover,
    .xp-ruler-mark.mark-55 .xp-ruler-dungeon-popover {
      left: auto;
      right: 0;
      transform: translateX(0) translateY(4px);
    }

    .xp-ruler-mark:hover .xp-ruler-dungeon-popover,
    .xp-ruler-mark:focus .xp-ruler-dungeon-popover,
    .xp-ruler-mark:focus-visible .xp-ruler-dungeon-popover {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .xp-ruler-mark.finish-mark:hover .xp-ruler-dungeon-popover,
    .xp-ruler-mark.finish-mark:focus .xp-ruler-dungeon-popover,
    .xp-ruler-mark.finish-mark:focus-visible .xp-ruler-dungeon-popover,
    .xp-ruler-mark.mark-55:hover .xp-ruler-dungeon-popover,
    .xp-ruler-mark.mark-55:focus .xp-ruler-dungeon-popover,
    .xp-ruler-mark.mark-55:focus-visible .xp-ruler-dungeon-popover {
      transform: translateX(0) translateY(0);
    }

    .xp-ruler-popover-title {
      font-family: var(--xp-font-heading);
      font-size: 0.68rem;
      font-weight: 800;
      color: var(--xp-accent-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-bottom: 4px;
      margin-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .xp-ruler-popover-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .xp-ruler-popover-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      line-height: 1.25;
      white-space: nowrap;
    }

    .xp-ruler-popover-name {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #e6ecff;
      font-weight: 600;
    }

    .xp-ruler-popover-lvl {
      color: var(--xp-accent-secondary);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    /* ==========================================================================
       60-BAR RACE TRACK LANES (LEFT-TO-RIGHT)
       ========================================================================== */
    .xp-leaderboard-list {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .xp-derby-lane-card {
      position: relative;
      background: var(--xp-bg-card);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: background-color 0.15s ease;
    }

    .xp-derby-lane-card.top-3-cutoff {
      border-bottom: 2px solid var(--xp-accent-primary);
      box-shadow: 0 2px 10px rgba(245, 201, 75, 0.26);
    }

    .xp-derby-lane-card:nth-child(even) {
      background: rgba(16, 14, 12, 0.95);
    }

    html[data-xp-theme="retrowave-vfd"] .xp-derby-lane-card:nth-child(even) {
      background: rgba(16, 14, 12, 0.95);
    }

    .xp-derby-lane-card:hover {
      background: var(--xp-bg-card-hover);
    }

    .xp-derby-lane-grid {
      display: grid;
      grid-template-columns: 238px 1fr 74px;
      column-gap: 10px;
      align-items: center;
      min-height: 46px;
      padding: 4px 12px;
    }

    /* Col 1: Left Starting Gate Stall (Smaller Place Section + Name/<Guild> + Race/Class above Lv ##) */
    .xp-stall-gate {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding-right: 0;
      border-right: 2px solid var(--xp-border-primary);
      min-width: 0;
      min-height: 36px;
    }

    .xp-stall-number {
      width: 36px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 5px;
      border-right: 1px solid rgba(255, 255, 255, 0.14);
      font-family: var(--xp-font-heading);
      font-size: 0.84rem;
      font-weight: 900;
      background: transparent;
      border-radius: 0;
      color: var(--xp-text-muted);
      font-variant-numeric: tabular-nums;
    }

    .xp-stall-number.rank-1 {
      color: #f5c94b;
      text-shadow: 0 0 10px rgba(245, 201, 75, 0.55);
    }

    .xp-stall-number.rank-2 {
      color: #d8f0ff;
      text-shadow: 0 0 8px rgba(216, 240, 255, 0.4);
    }

    .xp-stall-number.rank-3 {
      color: #dca77f;
      text-shadow: 0 0 8px rgba(220, 167, 127, 0.4);
    }

    .xp-stall-identity {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      flex: 1;
      padding: 0 10px 0 9px;
      line-height: 1.2;
    }

    .xp-stall-name-guild {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      min-width: 0;
      flex: 1;
      overflow: hidden;
    }

    .xp-char-name-group {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    .xp-char-name {
      font-family: var(--xp-font-heading);
      font-size: 0.9rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .xp-guild-pill {
      margin: 0;
      text-align: left;
      font-family: var(--xp-font-mono);
      font-size: 0.67rem;
      font-weight: 600;
      padding: 0;
      background: transparent;
      border: none;
      color: var(--text-parchment, #d6cbb8);
      cursor: pointer;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color 0.15s ease, text-shadow 0.15s ease;
    }

    .xp-guild-pill:hover {
      color: var(--gold-crest, #f2c96d);
      text-shadow: 0 0 8px rgba(212, 164, 76, 0.45);
      text-decoration: underline;
    }

    .xp-stall-meta-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      flex-shrink: 0;
      min-width: 42px;
    }

    .xp-stall-icons-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .xp-stall-mini-icon {
      width: 19px;
      height: 19px;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      object-fit: cover;
      box-sizing: border-box;
      display: block;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    .xp-stall-lvl-text {
      font-family: var(--xp-font-mono);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      color: var(--xp-text-main);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* Col 2: Full-Length 60-Bar Race Track (Bar 1 to Bar 60 at Finish Line) */
    .xp-derby-track-lane {
      position: relative;
      height: 36px;
      background: var(--xp-track-turf);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      overflow: visible;
      padding: 0;
    }

    /* 60 Equal Vertical Bars spanning 100% of the Race Track up to the Finish Line */
    .xp-60-bars-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(60, minmax(0, 1fr));
      column-gap: 2px;
      width: 100%;
      height: 24px;
      align-items: stretch;
    }

    .xp-lvl-bar {
      position: relative;
      height: 100%;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.06);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .xp-lvl-bar.is-lit {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, var(--bar-color) 28%, var(--bar-color) 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.78);
      box-shadow: 0 0 6px var(--bar-glow);
    }

    .xp-lvl-bar.is-current-partial {
      background: rgba(255, 255, 255, 0.09);
      overflow: hidden;
    }

    .xp-lvl-bar.is-current-partial::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--partial-pct, 50%);
      background: var(--bar-color);
      opacity: 0.65;
    }

    /* Obvious Milestone Vertical Guide Lines Centered on Squares 10, 20, 30, 40, 50, 55 */
    .xp-lane-milestone-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      transform: translateX(-50%);
      z-index: 5;
      background: rgba(245, 201, 75, 0.88);
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.95);
      pointer-events: none;
    }

    /* Milestone numbers on each person's bar ONLY appear when mousing over that person */
    .xp-lane-milestone-line::after {
      content: attr(data-milestone);
      position: absolute;
      top: 1px;
      left: 50%;
      transform: translateX(-50%);
      background: #05060b;
      border: 1px solid rgba(245, 201, 75, 0.82);
      border-radius: 1px;
      padding: 0 3px;
      font-family: var(--xp-font-heading);
      font-size: 0.56rem;
      font-weight: 800;
      line-height: 1.1;
      color: var(--xp-accent-primary);
      text-shadow: 0 1px 2px #000000;
      opacity: 0;
      transition: opacity 0.16s ease;
      pointer-events: none;
    }

    .xp-derby-lane-card:hover .xp-lane-milestone-line::after {
      opacity: 1;
    }

    .xp-lane-milestone-line.ms-55 {
      background: rgba(255, 148, 77, 0.92);
    }

    .xp-lane-milestone-line.ms-55::after {
      border-color: rgba(255, 148, 77, 0.85);
      color: #ffb884;
    }

    /* Mouseover Character Name Badge on the Bar (Always draws OVER the Level lines) */
    .xp-lane-hover-name {
      position: absolute;
      top: 50%;
      z-index: 25;
      background: #060810;
      border: 1px solid var(--xp-border-primary);
      border-radius: 2px;
      padding: 2px 7px;
      font-family: var(--xp-font-heading);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.95);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .xp-derby-lane-card:hover .xp-lane-hover-name {
      opacity: 1;
    }

    /* Checkered Flag Finish Line at Bar 60 (100% right edge) */
    .xp-derby-finish-strip {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      z-index: 4;
      border-left: 2px solid var(--xp-accent-primary);
      background-image:
        linear-gradient(45deg, rgba(245, 201, 75, 0.65) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(245, 201, 75, 0.65) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(245, 201, 75, 0.65) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(245, 201, 75, 0.65) 75%);
      background-size: 6px 6px;
      background-position: 0 0, 0 3px, 3px -3px, -3px 0;
      pointer-events: none;
    }

    /* WoW Class Icon Racer Token with Current Level Drawn Over It */
    .xp-derby-horse-token {
      position: absolute;
      top: 50%;
      z-index: 12;
      transform: translate(-18px, -50%);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .xp-horse-medallion {
      position: relative;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #100e0c;
      border: 2px solid var(--xp-accent-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 14px rgba(0, 0, 0, 0.95);
      animation: classTokenPulse 1.1s ease-in-out infinite alternate;
      flex-shrink: 0;
    }

    .xp-horse-medallion img.xp-class-racer-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      filter: brightness(0.76) saturate(1.25) contrast(1.08);
    }

    /* Player's Current Level Drawn Directly Over the WoW Class Symbol */
    .xp-class-level-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--xp-font-heading);
      font-size: 0.94rem;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      text-shadow:
        0 1px 2px #000000,
        0 0 6px #000000,
        -1.5px -1.5px 0 #05060b,
        1.5px -1.5px 0 #05060b,
        -1.5px 1.5px 0 #05060b,
        1.5px 1.5px 0 #05060b;
    }

    .xp-leader-crown-badge {
      position: absolute;
      top: -10px;
      right: -5px;
      font-size: 0.74rem;
      line-height: 1;
      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95));
      z-index: 4;
    }

    .xp-horse-medallion.idle {
      animation: none;
      opacity: 0.9;
    }

    @keyframes classTokenPulse {
      0% { transform: translateY(1px) scale(0.98); }
      100% { transform: translateY(-1px) scale(1.03); }
    }

    /* Compact Square Telemetry Tag beside the Class Medallion */
    .xp-horse-flag {
      background: rgba(16, 14, 12, 0.94);
      border: 1px solid var(--xp-border-primary);
      border-radius: 2px;
      padding: 2px 5px;
      font-family: var(--xp-font-mono);
      font-size: 0.61rem;
      line-height: 1.08;
      color: var(--xp-text-main);
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.78);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      font-variant-numeric: tabular-nums;
      min-width: 44px;
    }

    .xp-derby-horse-token.near-finish {
      transform: translate(calc(-100% + 18px), -50%);
      flex-direction: row-reverse;
    }

    /* Col 3: Unified 1-Piece Split Action Section (Left Half: Dungeon Key Dropdown | Right Half: Edit Racer) */
    .xp-finish-pitstop-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      width: 74px;
      height: 30px;
      background: rgba(16, 14, 12, 0.94);
      border: 1px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.65);
    }

    html[data-xp-theme="retrowave-vfd"] .xp-finish-pitstop-col {
      background: rgba(18, 4, 21, 0.94);
      border: 1px solid var(--xp-border-primary);
      box-shadow: 0 0 8px rgba(75, 185, 248, 0.22);
    }

    .xp-dungeon-toggle-btn,
    .xp-lane-edit-btn {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--xp-accent-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-sizing: border-box;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .xp-dungeon-toggle-btn {
      border-right: 1px solid var(--xp-border-primary);
    }

    .xp-dungeon-toggle-btn:hover,
    .xp-lane-edit-btn:hover,
    .xp-dungeon-toggle-btn.is-open {
      background: rgba(255, 209, 0, 0.22);
      color: #ffffff;
    }

    html[data-xp-theme="retrowave-vfd"] .xp-dungeon-toggle-btn:hover,
    html[data-xp-theme="retrowave-vfd"] .xp-lane-edit-btn:hover,
    html[data-xp-theme="retrowave-vfd"] .xp-dungeon-toggle-btn.is-open {
      background: rgba(75, 185, 248, 0.24);
      color: #ffffff;
    }

    .xp-lane-edit-btn.is-mine {
      color: var(--xp-accent-secondary);
    }

    /* Expandable 27-Dungeon Matrix Drawer below any Racer's Lane */
    .xp-dungeon-drawer {
      display: none;
      padding: 10px 16px 14px;
      background: rgba(16, 14, 12, 0.96);
      border-top: 1px dashed var(--xp-border-primary);
    }

    .xp-dungeon-drawer.open {
      display: block;
    }

    .xp-dungeon-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .xp-dungeon-check-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      background: var(--xp-bg-input);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      cursor: pointer;
      font-size: 0.76rem;
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .xp-dungeon-check-item.checked {
      background: rgba(212, 164, 76, 0.16);
      border-color: rgba(212, 164, 76, 0.55);
      color: var(--gold-crest, #f2c96d);
    }

    .xp-dungeon-check-item input[type="checkbox"] {
      accent-color: var(--gold-barrens, #d4a44c);
      width: 14px;
      height: 14px;
      cursor: pointer;
    }

    .xp-forever-badge {
      font-size: 0.58rem;
      padding: 1px 4px;
      background: rgba(224, 122, 46, 0.2);
      color: var(--gold-crest, #f2c96d);
      border: 1px solid rgba(224, 122, 46, 0.45);
      border-radius: 2px;
      font-family: var(--xp-font-mono);
    }

    .xp-ghost-zeros {
      opacity: 0.18;
      user-select: none;
    }

    /* ==========================================================================
       BOTTOM 20% CONTEXT: LIVE TICKER & COLLAPSIBLE PIT-STOP TOOLS DOCK
       ========================================================================== */
    .xp-ticker-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(16, 14, 12, 0.94);
      border: 1px solid var(--xp-border-subtle);
      border-left: 4px solid var(--xp-accent-primary);
      border-radius: var(--xp-radius);
      padding: 6px 12px;
      margin-bottom: 10px;
      overflow-x: auto;
      font-size: 0.76rem;
    }

    .xp-ticker-label {
      font-family: var(--xp-font-mono);
      font-weight: 700;
      color: var(--xp-accent-primary);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .xp-ticker-items {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .xp-ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--xp-radius);
      border: 1px solid rgba(255, 255, 255, 0.07);
      white-space: nowrap;
    }

    /* Collapsible Pit-Stop Tabs Bar */
    .xp-pitstop-tabs-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .xp-pitstop-tab {
      padding: 7px 13px;
      background: var(--xp-bg-panel);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      color: var(--xp-text-main);
      font-family: var(--xp-font-heading);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .xp-pitstop-tab:hover,
    .xp-pitstop-tab.active {
      border-color: var(--xp-accent-primary);
      background: rgba(245, 201, 75, 0.14);
      color: var(--xp-accent-primary);
    }

    .xp-pitstop-drawer {
      display: none;
      background: var(--xp-bg-panel);
      border: 1.5px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      padding: 14px 16px;
      margin-bottom: 12px;
      box-shadow: var(--xp-card-shadow);
    }

    .xp-pitstop-drawer.open {
      display: block;
    }

    .xp-section-title {
      font-family: var(--xp-font-heading);
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--xp-accent-primary);
      margin: 0;
    }

    .xp-dungeon-pills-scroll {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 8px 0 4px;
    }

    .xp-dungeon-filter-pill {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 7px 11px;
      border-radius: var(--xp-radius);
      background: var(--xp-bg-card);
      border: 1px solid var(--xp-border-subtle);
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
      text-align: left;
    }

    .xp-dungeon-filter-pill:hover {
      border-color: var(--xp-accent-secondary);
      transform: translateY(-1px);
    }

    .xp-dungeon-filter-pill.active {
      background: rgba(12, 210, 157, 0.16);
      border-color: #0cd29d;
    }

    .xp-dungeon-filter-pill.forever-custom {
      border-top: 2px solid #a874f5;
    }

    .xp-dungeon-pill-top {
      font-family: var(--xp-font-heading);
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--xp-text-main);
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .xp-dungeon-pill-sub {
      font-family: var(--xp-font-mono);
      font-size: 0.67rem;
      color: var(--xp-text-muted);
    }

    .xp-rival-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      align-items: center;
      margin-top: 10px;
    }

    .xp-rival-fighter {
      background: var(--xp-bg-card);
      border: 1px solid var(--xp-border-subtle);
      border-radius: var(--xp-radius);
      padding: 10px 14px;
    }

    .xp-rival-vs-center {
      text-align: center;
      padding: 8px 14px;
      background: rgba(245, 201, 75, 0.08);
      border: 1px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      font-family: var(--xp-font-mono);
      font-size: 0.8rem;
    }

    /* Add / Link Player Modal */
    .xp-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(3, 2, 8, 0.82);
      backdrop-filter: blur(5px);
      z-index: 999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .xp-modal-backdrop.open {
      display: flex;
    }

    .xp-modal-card {
      width: 100%;
      max-width: 680px;
      max-height: 90vh;
      overflow-y: auto;
      background: var(--xp-bg-panel);
      border: 2px solid var(--xp-border-primary);
      border-radius: var(--xp-radius);
      padding: 20px 24px;
      box-shadow: 0 0 36px rgba(0, 0, 0, 0.85);
    }

    .xp-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      margin: 14px 0;
    }

    .xp-form-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.8rem;
      color: var(--xp-text-muted);
    }

    @media (max-width: 960px) {
      .xp-derby-ruler-row,
      .xp-derby-lane-grid {
        grid-template-columns: 170px 1fr 95px;
      }
      .xp-rival-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .xp-top-header-grid {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 10px;
      }
      .top-bar-center {
        display: none;
      }
      .top-bar-left,
      .top-bar-right {
        flex-wrap: wrap;
        gap: 6px;
      }
      .xp-derby-ruler-row {
        grid-template-columns: 1fr;
      }
      .xp-derby-ruler-row > :first-child,
      .xp-derby-ruler-row > :last-child {
        display: none;
      }
      .xp-derby-lane-grid {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
        padding: 8px 10px;
      }
      .xp-stall-gate {
        border-right: none;
      }
      .xp-derby-track-lane {
        grid-column: 1 / -1;
        order: 3;
      }
    }

    /* Canonical WoW Icon Thumbnails & Inline SVGs (Zero-Emoji Theme Standard) */
    .xp-wow-icon {
      width: 15px;
      height: 15px;
      border-radius: 3px;
      border: 1px solid var(--xp-border-primary);
      object-fit: cover;
      vertical-align: -2px;
      flex-shrink: 0;
      display: inline-block;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
    }

    .xp-wow-icon.xs {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      vertical-align: -1px;
    }

    .xp-wow-icon.sm {
      width: 13px;
      height: 13px;
      border-radius: 2px;
      vertical-align: -1px;
    }

    .xp-wow-icon.lg {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      vertical-align: -3px;
    }

    .xp-svg-icon {
      width: 14px;
      height: 14px;
      vertical-align: -2px;
      flex-shrink: 0;
      display: inline-block;
    }

    .xp-svg-icon.sm {
      width: 12px;
      height: 12px;
      vertical-align: -1px;
    }

    .xp-online-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold-barrens, #d4a44c);
      box-shadow: 0 0 7px var(--gold-barrens, #d4a44c);
      display: inline-block;
      flex-shrink: 0;
    }

    .xp-search-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-width: 215px;
      flex: 1;
      max-width: 310px;
    }

    .xp-search-wrap .xp-search-svg {
      position: absolute;
      left: 8px;
      width: 13px;
      height: 13px;
      color: var(--xp-text-muted);
      pointer-events: none;
    }

    .xp-search-wrap .xp-input {
      width: 100%;
      padding-left: 26px;
    }

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

/* === MIGRATED LOGS.HTML BARRENS COMBAT TELEMETRY STYLES === */


    /* ==========================================================================
       IRON-BOUND LEDGER — OBSIDIAN & FORGED GOLD COMBAT TELEMETRY HUD
       Unified with Guild Roster Aesthetic (#070709 / #131318 / #d4a44c / #3e2f1c)
       ========================================================================== */
    body.accelerated-hud-body {
      --bg-obsidian: var(--bg-abyss, #080706);
      --bg-panel: var(--bg-panel, #161310);
      --bg-binnacle: var(--bg-basalt, #100e0c);
      --neon-red: var(--ember-savanna, #e07a2e);
      --neon-red-bright: var(--gold-crest, #f2c96d);
      --neon-red-glow: rgba(224, 122, 46, 0.35);
      --neon-gold: var(--gold-barrens, #d4a44c);
      --neon-gold-bright: var(--gold-crest, #f2c96d);
      --neon-gold-glow: rgba(212, 164, 76, 0.35);
      --neon-cyan: var(--gold-barrens, #d4a44c);
      --neon-cyan-bright: var(--gold-crest, #f2c96d);
      --neon-cyan-glow: rgba(212, 164, 76, 0.3);
      --neon-blue-grid: var(--border-bronze, #473621);
      --neon-magenta: var(--crimson-horde, #b91c1c);
      --chrome-highlight: var(--border-bronze, #473621);
      --text-white: var(--text-ivory, #f6f4ee);
      --text-muted: var(--text-parchment, #d6cbb8);
    }

    * {
      box-sizing: border-box;
    }

    body.accelerated-hud-body {
      margin: 0;
      min-height: 100vh;
      background-color: var(--bg-obsidian);
      color: var(--text-white);
      font-family: 'Inter', 'Rajdhani', sans-serif;
      overflow-x: hidden;
      position: relative;
      -webkit-font-smoothing: antialiased;
    }

    .synth-wireframe-backdrop {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      opacity: 0.25;
      background:
        radial-gradient(circle at 50% 24%, rgba(212, 164, 76, 0.12) 0%, rgba(7, 7, 9, 0.96) 65%, #070709 100%);
    }

    .synth-wireframe-backdrop svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .logs-shell {
      position: relative;
      z-index: 1;
      max-width: 1440px;
      margin: 0 auto;
      padding: 12px 24px 64px;
    }

    /* ==========================================================================
       TOP NAVIGATION HEADER — CRISP SOLID VECTOR LINES
       ========================================================================== */
    .hud-topbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 18px;
      margin-bottom: 18px;
      background: rgba(16, 14, 12, 0.94);
      border: 1.5px solid var(--border-bronze, #473621);
      border-top: 2px solid var(--gold-barrens, #d4a44c);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
    }

    .hud-brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .hud-brand-title {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      font-size: 0.96rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--neon-cyan-bright);
      text-shadow: 0 0 8px var(--neon-cyan-glow);
    }

    .hud-brand-divider {
      width: 2px;
      height: 16px;
      background: var(--neon-gold);
      box-shadow: 0 0 6px var(--neon-gold-glow);
    }

    .hud-conn-status {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--neon-gold);
      text-shadow: 0 0 6px var(--neon-gold-glow);
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .hud-conn-dot {
      width: 7px;
      height: 7px;
      background: var(--neon-cyan-bright);
      box-shadow: 0 0 8px var(--neon-cyan);
      display: inline-block;
    }

    .hud-nav-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .hud-nav-link {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--text-white);
      padding: 5px 12px;
      border: 1.5px solid rgba(212, 164, 76, 0.45);
      background: rgba(2, 4, 10, 0.85);
      transition: all 0.15s ease;
    }

    .hud-nav-link:hover {
      border-color: var(--neon-cyan-bright);
      color: var(--neon-cyan-bright);
      box-shadow: 0 0 10px rgba(212, 164, 76, 0.35);
    }

    .hud-nav-link.active {
      border-color: var(--neon-red);
      color: var(--neon-red-bright);
      box-shadow: 0 0 10px rgba(224, 122, 46, 0.4);
    }

    /* ==========================================================================
       MIAMI NIGHTS 1984 "ACCELERATED" COCKPIT INSTRUMENT BINNACLE
       Exact 4-Zone Layout from Video (0:58, 1:07, 1:08):
       [Zone 1: Radar Wing] | [Zone 2: Red Speedo Dial] | [Zone 3: Red/Gold Tach Dial] | [Zone 4: ELEC + Curve Bars + Mini Dials]
       ========================================================================== */
    .accelerated-cockpit-hood {
      position: relative;
      background: #0d0d10;
      border-radius: 0;
      padding: 18px 22px 16px;
      margin-bottom: 18px;
      border: 1px solid #3e2f1c;
      border-top: 2px solid var(--neon-gold);
      box-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.8);
    }

    /* Crisp Double Chrome Bottom Sill (Just like the bottom rim in ref_dash_wide.png) */
    .accelerated-cockpit-hood::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 4px;
      height: 2px;
      background: linear-gradient(90deg, var(--neon-cyan), var(--chrome-highlight) 50%, var(--neon-gold));
      opacity: 0.85;
    }

    .accelerated-cluster-grid {
      display: grid;
      grid-template-columns: 155px 1fr 1fr 1.15fr;
      gap: 0;
      align-items: stretch;
      min-height: 310px;
      background: var(--bg-binnacle);
    }

    @media (max-width: 1240px) {
      .accelerated-cluster-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .cluster-zone {
        border-right: none !important;
        border-bottom: 2px solid var(--neon-gold);
      }
    }

    @media (max-width: 760px) {
      .accelerated-cluster-grid {
        grid-template-columns: 1fr;
      }
    }

    .cluster-zone {
      position: relative;
      padding: 8px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Crisp Solid Vertical Divider Bars (Exact colors from ref_dash_close.png) */
    .cluster-zone.zone-radar {
      border-right: 2.5px solid var(--neon-cyan);
      box-shadow: 4px 0 10px -4px var(--neon-cyan-glow);
    }

    .cluster-zone.zone-speedo {
      border-right: 2.5px solid var(--neon-gold);
      box-shadow: 4px 0 10px -4px var(--neon-gold-glow);
    }

    .cluster-zone.zone-tach {
      border-right: 2.5px solid var(--neon-gold);
      box-shadow: 4px 0 10px -4px var(--neon-gold-glow);
    }

    .cluster-svg {
      width: 100%;
      height: 295px;
      display: block;
      overflow: visible;
    }

    /* ==========================================================================
       CONTROL SWITCHBOARD & "CHECK ENGINE" STATUS STRIP (1:06 Reference Frame)
       ========================================================================== */
    .accelerated-control-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      background: var(--bg-panel);
      border: 1.5px solid var(--neon-cyan);
      padding: 12px 18px;
      margin-bottom: 16px;
    }

    .check-engine-callout {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    /* The 4 crisp vertical red hazard bars |||| from 01:06 in the video */
    .hazard-bars-four {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 24px;
    }

    .hazard-bars-four span {
      width: 3.5px;
      height: 100%;
      background: var(--neon-red);
      box-shadow: 0 0 8px var(--neon-red-glow);
      display: inline-block;
    }

    .check-engine-titles {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .check-engine-main {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--neon-gold);
      text-shadow: 0 0 8px var(--neon-gold-glow);
    }

    .check-engine-sub {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--neon-gold-bright);
    }

    .switch-btn-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .synth-vec-btn {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.84rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 6px 14px;
      background: #03050c;
      color: var(--neon-cyan-bright);
      border: 1.5px solid var(--neon-cyan);
      cursor: pointer;
      transition: all 0.14s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .synth-vec-btn:hover {
      background: rgba(212, 164, 76, 0.14);
      box-shadow: 0 0 10px rgba(212, 164, 76, 0.4);
    }

    .synth-vec-btn.active {
      border-color: var(--neon-gold);
      color: var(--neon-gold);
      background: rgba(255, 208, 0, 0.1);
      box-shadow: 0 0 10px rgba(255, 208, 0, 0.35);
    }

    .synth-vec-btn.red-cta {
      border-color: var(--neon-red);
      color: var(--neon-red-bright);
      background: rgba(224, 122, 46, 0.1);
    }

    .synth-vec-btn.red-cta:hover {
      background: rgba(224, 122, 46, 0.22);
      box-shadow: 0 0 12px rgba(224, 122, 46, 0.5);
    }

    /* Encounter History Ticker Strip */
    .encounter-vector-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 14px;
      margin-bottom: 18px;
      background: #03050b;
      border-left: 3px solid var(--neon-gold);
      border-top: 1px solid rgba(212, 164, 76, 0.4);
      border-right: 1px solid rgba(212, 164, 76, 0.4);
      border-bottom: 1px solid rgba(212, 164, 76, 0.4);
    }

    .annunciator-lamp {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1.5px solid var(--neon-cyan);
      color: var(--neon-cyan-bright);
      background: #02040a;
    }

    .annunciator-lamp.kill {
      border-color: var(--neon-cyan);
      color: var(--neon-cyan-bright);
    }

    .annunciator-lamp.wipe {
      border-color: var(--neon-red);
      color: var(--neon-red-bright);
    }

    /* ==========================================================================
       3-COLUMN VECTOR TELEMETRY METER PANELS (Crisp Solid Lines)
       ========================================================================== */
    .vector-meters-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 20px;
    }

    @media (max-width: 1180px) {
      .vector-meters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 780px) {
      .vector-meters-grid {
        grid-template-columns: 1fr;
      }
    }

    .vector-panel {
      background: var(--bg-panel);
      border: 1px solid #3e2f1c;
      border-top: 2px solid var(--neon-gold);
      padding: 14px 16px;
      min-height: 370px;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.8);
    }

    .vector-panel.gold-accent {
      border-color: #3e2f1c;
      border-top: 2px solid var(--neon-gold-bright);
    }

    .vector-panel.red-accent {
      border-color: #3e2f1c;
      border-top: 2px solid var(--neon-red);
    }

    .vector-panel-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 8px;
      margin-bottom: 12px;
      border-bottom: 1px solid #3e2f1c;
    }

    .vector-panel.red-accent .vector-panel-header {
      border-bottom-color: rgba(239, 68, 68, 0.4);
    }

    .vector-panel-title {
      font-family: 'Cinzel', Georgia, serif;
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--neon-gold-bright);
      margin: 0;
      text-transform: uppercase;
    }

    .vector-panel.red-accent .vector-panel-title {
      color: var(--neon-red-bright);
      text-shadow: 0 0 8px var(--neon-red-glow);
    }

    .vector-panel-readout {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.96rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--neon-cyan-bright);
      text-shadow: 0 0 8px var(--neon-cyan-glow);
    }

    .vfd-player-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Crisp Solid Vector Player Card (Inspired by ref_dash_right.png L-bracket & cyan bars) */
    .vfd-player-card {
      background: #02040a;
      border: 1.5px solid rgba(212, 164, 76, 0.45);
      padding: 8px 11px;
      cursor: pointer;
      transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }

    .vfd-player-card:hover {
      border-color: var(--neon-gold);
      box-shadow: 0 0 12px rgba(255, 208, 0, 0.25);
    }

    .vfd-player-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .vfd-player-ident {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .vfd-rank-num {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--neon-red-bright);
      text-shadow: 0 0 6px var(--neon-red-glow);
    }

    .vfd-class-tag {
      width: 9px;
      height: 9px;
      display: inline-block;
    }

    .vfd-player-name {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.96rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-white);
    }

    .vfd-player-numbers {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-family: 'Rajdhani', sans-serif;
    }

    .vfd-num-main {
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.04em;
      color: var(--neon-gold);
      text-shadow: 0 0 6px var(--neon-gold-glow);
    }

    .vfd-num-rate {
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--neon-cyan-bright);
    }

    .vfd-num-pct {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* Crisp Solid Red L-Bracket + Vertical Cyan Fin Bars (Exact match to ref_dash_right.png) */
    .vfd-segment-bar {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      gap: 2px;
      height: 13px;
      padding: 2px 3px 3px;
      background: #010206;
      border-left: 2px solid var(--neon-red);
      border-bottom: 2px solid var(--neon-red);
      border-right: 2px solid var(--neon-red);
    }

    .vfd-seg {
      background: rgba(212, 164, 76, 0.1);
      height: 100%;
    }

    .vfd-seg.lit-green {
      background: var(--neon-cyan);
      box-shadow: 0 0 5px rgba(212, 164, 76, 0.7);
    }

    .vfd-seg.lit-amber {
      background: var(--neon-gold);
      box-shadow: 0 0 5px rgba(255, 208, 0, 0.75);
    }

    .vfd-seg.lit-red {
      background: var(--neon-red);
      box-shadow: 0 0 6px rgba(224, 122, 46, 0.85);
    }

    /* Ability Breakdown Drawer */
    .vfd-spell-drawer {
      display: none;
      margin-top: 8px;
      padding-top: 7px;
      border-top: 1px solid rgba(212, 164, 76, 0.35);
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.75rem;
    }

    .vfd-player-card.expanded .vfd-spell-drawer {
      display: block;
    }

    .vfd-spell-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 0;
      color: var(--neon-cyan-bright);
    }

    .vfd-spell-meta {
      color: var(--neon-gold);
    }

    /* ==========================================================================
       MECHANICS SUB-SWITCHES
       ========================================================================== */
    .c4-subtabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 12px;
    }

    .c4-subtab-btn {
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 4px;
      background: #02040a;
      color: var(--text-muted);
      border: 1.5px solid rgba(212, 164, 76, 0.35);
      cursor: pointer;
    }

    .c4-subtab-btn.active {
      background: rgba(224, 122, 46, 0.14);
      color: var(--neon-red-bright);
      border-color: var(--neon-red);
      box-shadow: 0 0 8px rgba(224, 122, 46, 0.35);
    }

    /* ==========================================================================
       BOTTOM DIAGNOSTIC GRID: DEATH LOG & PC UPLINK
       ========================================================================== */
    .c4-bottom-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 18px;
    }

    @media (max-width: 980px) {
      .c4-bottom-grid {
        grid-template-columns: 1fr;
      }
    }

    .death-recap-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .vfd-death-card {
      border: 1.5px solid var(--neon-red);
      background: #03040a;
      padding: 10px 12px;
    }

    .vfd-death-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .vfd-death-badge {
      background: var(--neon-red);
      color: #fff;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      padding: 1px 7px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .vfd-death-cause {
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--neon-gold);
      margin-bottom: 6px;
      letter-spacing: 0.04em;
    }

    .vfd-death-hits {
      border-top: 1px solid rgba(224, 122, 46, 0.35);
      padding-top: 6px;
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.74rem;
      color: var(--text-white);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .vfd-code-box {
      background: #020308;
      border: 1.5px solid var(--neon-cyan);
      padding: 9px 12px;
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.78rem;
      color: var(--neon-cyan-bright);
      overflow-x: auto;
      margin: 6px 0 10px;
    }

    .vfd-textarea {
      width: 100%;
      min-height: 82px;
      background: #020308;
      border: 1.5px solid var(--neon-cyan);
      color: var(--neon-cyan-bright);
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.75rem;
      padding: 8px;
      resize: vertical;
    }

    .vfd-empty {
      padding: 28px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.84rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(212, 164, 76, 0.25);
    }
  

/* === MIGRATED POLLS-TEST.HTML CONSENSUS MATRIX STYLES === */


    /* Visual Consensus Theme & Ballot Styling (Barrens Savanna Twilight & Forged Bronze) */
    .consensus-panel {
      background: var(--bg-card, #161310);
      border: 1px solid var(--border-bronze, #473621);
      border-radius: 6px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
      margin-bottom: 24px;
      overflow: hidden;
    }

    .consensus-header-strip {
      padding: 22px 24px 18px;
      background: linear-gradient(180deg, rgba(31, 26, 21, 0.96) 0%, rgba(16, 14, 12, 0.98) 100%);
      border-bottom: 1px solid var(--border-bronze, #473621);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 16px;
    }

    .consensus-header-strip h2 {
      font-family: 'Cinzel', serif;
      font-size: 1.55rem;
      font-weight: 800;
      color: var(--text-primary, #f6f4ee);
      margin: 0 0 6px 0;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .consensus-header-strip p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-secondary, #d6cbb8);
      max-width: 800px;
      line-height: 1.5;
    }

    /* Top Summary & Top Times Section */
    .top-summary-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      padding: 16px 24px;
      background: #080706;
      border-bottom: 1px solid var(--border-subtle, #2c241b);
    }

    .summary-metric-card {
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
      padding: 12px 16px;
    }

    .summary-metric-lbl {
      font-size: 0.72rem;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.6px;
      color: #9a8f7e;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .summary-metric-val {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.35rem;
      font-weight: 800;
      margin-top: 4px;
    }

    /* 1-Night Ranking Cards Grid */
    .section-ribbon-title {
      padding: 12px 24px;
      background: #080706;
      border-bottom: 1px solid #2c241b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .section-ribbon-title h3 {
      margin: 0;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.9rem;
      font-weight: 800;
      color: #d6cbb8;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .night-leaderboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 10px;
      padding: 18px 24px;
      background: rgba(8, 7, 6, 0.75);
      border-bottom: 1px solid var(--border-bronze, #473621);
    }

    .night-rank-card {
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
      padding: 12px 14px;
      text-align: center;
      position: relative;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .night-rank-card:hover {
      border-color: rgba(212, 164, 76, 0.65);
      transform: translateY(-2px);
    }

    .night-rank-card.top-choice {
      border: 2px solid #00ff88;
      background: linear-gradient(180deg, rgba(0, 255, 136, 0.12) 0%, #100e0c 100%);
      box-shadow: 0 0 16px rgba(0, 255, 136, 0.2);
    }

    .night-rank-card.has-veto {
      border-color: rgba(255, 42, 95, 0.4);
      background: linear-gradient(180deg, rgba(255, 42, 95, 0.08) 0%, #100e0c 100%);
    }

    .night-rank-day {
      font-family: 'Cinzel', serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #f6f4ee;
    }

    .night-rank-pct {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.55rem;
      font-weight: 800;
      margin: 6px 0 2px;
      letter-spacing: -0.5px;
    }

    .night-rank-pct.high { color: #00ff88; }
    .night-rank-pct.med { color: #f2c96d; }
    .night-rank-pct.low { color: #9a8f7e; }

    .night-rank-hardno {
      font-size: 0.72rem;
      font-weight: 700;
      margin-top: 4px;
      padding: 2px 6px;
      border-radius: 3px;
      display: inline-block;
    }

    .night-rank-hardno.clean {
      background: rgba(0, 255, 136, 0.15);
      color: #00ff88;
      border: 1px solid rgba(0, 255, 136, 0.3);
    }

    .night-rank-hardno.blocked {
      background: rgba(255, 42, 95, 0.2);
      color: #ff4d79;
      border: 1px solid rgba(255, 42, 95, 0.5);
    }

    /* ALL TOP TIMES PICKED (LEADERBOARD STRIP) */
    .top-times-container {
      padding: 16px 24px;
      background: #080706;
      border-bottom: 1px solid var(--border-bronze, #473621);
    }

    .top-times-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .top-time-card {
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s;
    }

    .top-time-card.gold-time {
      border: 1px solid rgba(0, 255, 136, 0.6);
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, #100e0c 100%);
      box-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
    }

    .top-time-left .time-slot-label {
      font-weight: 800;
      color: #f6f4ee;
      font-size: 0.88rem;
    }

    .top-time-left .time-slot-sub {
      font-size: 0.72rem;
      color: #9a8f7e;
      margin-top: 1px;
    }

    .top-time-right {
      text-align: right;
    }

    .top-time-right .pct-badge {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 800;
      font-size: 1.15rem;
      color: #00ff88;
    }

    .top-time-right .hardno-clean {
      font-size: 0.68rem;
      color: #00ff88;
      font-weight: 700;
      display: block;
    }

    .top-time-right .hardno-veto {
      font-size: 0.68rem;
      color: #ff4d79;
      font-weight: 700;
      display: block;
    }

    /* View Switcher Dropdown Toolbar */
    .view-dropdown-toolbar {
      padding: 16px 24px;
      background: #100e0c;
      border-bottom: 1px solid var(--border-bronze, #473621);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
    }

    .view-select-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .view-select-label {
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      color: #f2c96d;
      letter-spacing: 0.5px;
    }

    .view-select-control {
      background: #161310;
      border: 1px solid #473621;
      color: #f6f4ee;
      padding: 8px 14px;
      border-radius: 5px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      outline: none;
      transition: all 0.2s;
    }

    .view-select-control:focus, .view-select-control:hover {
      border-color: #d4a44c;
      box-shadow: 0 0 10px rgba(212, 164, 76, 0.25);
    }

    /* AUTHENTICATION GATE (SIGN IN REQUIRED) */
    .auth-gate-card {
      margin: 24px;
      padding: 32px 24px;
      background: linear-gradient(180deg, #161310 0%, #100e0c 100%);
      border: 2px solid rgba(212, 164, 76, 0.5);
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
    }

    .auth-gate-icon {
      font-size: 2.5rem;
      margin-bottom: 12px;
      display: inline-block;
    }

    .auth-gate-card h3 {
      font-family: 'Cinzel', serif;
      font-size: 1.4rem;
      color: #f2c96d;
      margin: 0 0 8px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .auth-gate-card p {
      font-size: 0.9rem;
      color: #d6cbb8;
      max-width: 600px;
      margin: 0 auto 20px;
      line-height: 1.5;
    }

    .auth-gate-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-auth-gate {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 800;
      font-size: 0.88rem;
      text-decoration: none;
      transition: all 0.2s;
      cursor: pointer;
    }

    .btn-auth-gate.bnet {
      background: #0074e0;
      color: #fff;
      border: 1px solid #1a8bff;
    }
    .btn-auth-gate.bnet:hover {
      background: #1a8bff;
      box-shadow: 0 0 15px rgba(0, 116, 224, 0.5);
    }

    .btn-auth-gate.discord {
      background: #5865f2;
      color: #fff;
      border: 1px solid #7289da;
    }
    .btn-auth-gate.discord:hover {
      background: #7289da;
      box-shadow: 0 0 15px rgba(88, 101, 242, 0.5);
    }

    .btn-auth-gate.demo {
      background: #1f1a15;
      color: #f2c96d;
      border: 1px solid #d4a44c;
    }
    .btn-auth-gate.demo:hover {
      background: #2c241b;
      box-shadow: 0 0 12px rgba(212, 164, 76, 0.3);
    }

    /* VOTING BALLOT (NO OTHER STATS SHOWN) */
    .voting-ballot-container {
      padding: 20px 24px;
    }

    .ballot-user-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #100e0c;
      border: 1px solid #2c241b;
      padding: 12px 18px;
      border-radius: 6px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .ballot-controls-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 16px;
      padding: 12px 16px;
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
    }

    .day-filter-select {
      background: #161310;
      border: 1px solid #473621;
      color: #f6f4ee;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 700;
      outline: none;
    }

    /* Ballot Slot Item / Row */
    .ballot-slots-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 10px;
    }

    .ballot-slot-row {
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s;
    }

    .ballot-slot-row.state-available {
      border: 1.5px solid #00ff88;
      background: linear-gradient(90deg, rgba(0, 255, 136, 0.12) 0%, #100e0c 100%);
    }

    .ballot-slot-row.state-hardno {
      border: 1.5px solid #ff2a5f;
      background: linear-gradient(90deg, rgba(255, 42, 95, 0.12) 0%, #100e0c 100%);
    }

    .ballot-slot-row.state-none {
      border: 1px solid #2c241b;
    }

    .ballot-time-label {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #f6f4ee;
    }

    .ballot-day-tag {
      font-size: 0.72rem;
      color: #9a8f7e;
      text-transform: uppercase;
      font-weight: 700;
    }

    .slot-choice-dropdown {
      background: #161310;
      border: 1px solid #473621;
      color: #f6f4ee;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 0.82rem;
      font-weight: 700;
      outline: none;
      cursor: pointer;
    }

    .slot-choice-dropdown.opt-avail {
      color: #00ff88;
      border-color: #00ff88;
    }

    .slot-choice-dropdown.opt-hardno {
      color: #ff4d79;
      border-color: #ff2a5f;
    }

    /* Ballot Action Pills */
    .ballot-choice-pills {
      display: flex;
      gap: 4px;
    }

    .btn-pill-choice {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      cursor: pointer;
      border: 1px solid transparent;
      background: #161310;
      color: #9a8f7e;
      transition: all 0.15s;
    }

    .btn-pill-choice:hover {
      background: #1f1a15;
      color: #f6f4ee;
    }

    .btn-pill-choice.active-avail {
      background: rgba(0, 255, 136, 0.2);
      border-color: #00ff88;
      color: #00ff88;
      box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
    }

    .btn-pill-choice.active-hardno {
      background: rgba(255, 42, 95, 0.25);
      border-color: #ff2a5f;
      color: #ff4d79;
      box-shadow: 0 0 8px rgba(255, 42, 95, 0.4);
    }

    /* Save Ballot Button */
    .ballot-submit-row {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #2c241b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn-save-ballot {
      background: linear-gradient(180deg, #f2c96d 0%, #d4a44c 100%);
      color: #080706;
      border: none;
      padding: 10px 24px;
      border-radius: 5px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-save-ballot:hover {
      box-shadow: 0 0 15px rgba(212, 164, 76, 0.5);
      transform: translateY(-1px);
    }

    /* SEE MY CHOICES DROPDOWN VIEW */
    .my-choices-panel {
      padding: 20px 24px;
    }

    .choices-summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 16px;
      padding: 14px 18px;
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
    }

    .choices-day-group {
      margin-bottom: 16px;
      background: #100e0c;
      border: 1px solid #2c241b;
      border-radius: 6px;
      overflow: hidden;
    }

    .choices-day-title {
      background: #161310;
      padding: 8px 16px;
      font-family: 'Cinzel', serif;
      font-size: 0.92rem;
      font-weight: 700;
      color: #f2c96d;
      border-bottom: 1px solid #2c241b;
      display: flex;
      justify-content: space-between;
    }

    .choices-chips-list {
      padding: 12px 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .choice-badge-chip {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .choice-badge-chip.avail {
      background: rgba(0, 255, 136, 0.15);
      border: 1px solid rgba(0, 255, 136, 0.5);
      color: #00ff88;
    }

    .choice-badge-chip.hardno {
      background: rgba(255, 42, 95, 0.2);
      border: 1px solid rgba(255, 42, 95, 0.6);
      color: #ff4d79;
    }

    /* FULL GUILD MATRIX VIEW (LEADERSHIP) */
    .matrix-table-wrap {
      margin: 16px 24px 24px;
      background: #080706;
      border: 1px solid var(--border-bronze, #473621);
      border-radius: 4px;
      overflow-x: auto;
    }

    .matrix-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
      text-align: center;
    }

    .matrix-table th, .matrix-table td {
      padding: 10px 8px;
      border: 1px solid #2c241b;
    }

    .matrix-table thead th {
      background: #100e0c;
      color: #f6f4ee;
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 700;
      padding: 12px 10px;
    }

    .matrix-time-col {
      width: 100px;
      min-width: 100px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      font-weight: 700;
      color: #f2c96d;
      background: #100e0c;
      text-align: center;
    }

    .cell-slot {
      cursor: pointer;
      user-select: none;
      transition: all 0.15s ease;
      position: relative;
      min-width: 110px;
      padding: 8px 6px;
    }

    .cell-slot:hover {
      outline: 2px solid #d4a44c;
      z-index: 10;
    }

    .cell-pct-number {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 800;
      font-size: 1.05rem;
      display: block;
    }

    .cell-hardno-badge {
      font-size: 0.68rem;
      font-weight: 800;
      margin-top: 3px;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(255, 42, 95, 0.35);
      border: 1px solid #ff2a5f;
      color: #ffffff;
      display: inline-block;
      letter-spacing: 0.4px;
      box-shadow: 0 0 8px rgba(255, 42, 95, 0.4);
    }

    .tier-100 { background: rgba(0, 255, 136, 0.22); color: #00ff88; }
    .tier-80 { background: rgba(0, 255, 136, 0.14); color: #00ff88; }
    .tier-60 { background: rgba(212, 164, 76, 0.18); color: #f2c96d; }
    .tier-40 { background: rgba(224, 122, 46, 0.14); color: #e07a2e; }
    .tier-20 { background: rgba(255, 255, 255, 0.04); color: #9a8f7e; }
    .tier-0  { background: rgba(16, 14, 12, 0.6); color: #6e6252; }

    /* Tooltip / Modal Inspector */
    .slot-tooltip {
      position: fixed;
      background: #100e0c;
      border: 1px solid rgba(212, 164, 76, 0.55);
      border-radius: 4px;
      padding: 14px 16px;
      color: #f6f4ee;
      font-size: 0.82rem;
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 10px 25px rgba(0,0,0,0.85);
      max-width: 320px;
      display: none;
    }

    .toast-alert-banner {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 10000;
      padding: 12px 20px;
      background: #161310;
      border: 1px solid #00ff88;
      color: #f6f4ee;
      border-radius: 6px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.7);
      font-weight: 700;
      font-size: 0.88rem;
      display: none;
      animation: fadeIn 0.2s ease-in-out;
    }
  

/* === MIGRATED SQUAD HUB, WAGERS & WHEEL STYLES === */


    @view-transition {
      navigation: auto;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.16s;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Strict Sharp Right-Angled Design — Iron-Bound Ledger (Barrens Savanna & Forged Bronze) */
    body.squad-page-body * { border-radius: 0px; }
    body.squad-page-body {
      background-color: #080706;
      background-image:
        radial-gradient(ellipse 80% 45% at 50% 0%, rgba(212, 164, 76, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 95%, rgba(212, 164, 76, 0.04) 0%, transparent 60%);
      color: #f6f4ee;
      font-family: 'Rajdhani', 'Inter', sans-serif;
      letter-spacing: 0.025em;
    }
    ::selection {
      background-color: #d4a44c;
      color: #080706;
    }
    /* Custom sharp Barrens scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: #100e0c;
    }
    ::-webkit-scrollbar-thumb {
      background: #473621;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #d4a44c;
    }
    /* Subtle tactical scanline */
    .tactical-grid {
      background-image: linear-gradient(to right, rgba(212, 164, 76, 0.035) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(212, 164, 76, 0.035) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    /* Squad Ownership Hover Tooltips */
    .group-pill:hover .pill-tooltip {
      display: flex !important;
    }
    .view-transition-card {
      view-transition-name: wager-card-active;
    }
    .clip-corner {
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    }
    /* Unified Squad Sub-Navigation Bar (Barrens Savanna & Forged Bronze) */
    .squad-shell-header {
      view-transition-name: squad-shell-header;
    }
    .squad-nav-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      max-width: 80rem;
      margin: 0 auto;
      border-top: 1px solid #2c241b;
    }
    .squad-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #161310;
      border: 1px solid #473621;
      color: #f2c96d;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-decoration: none;
      transition: all 0.15s ease;
      margin-right: auto;
    }
    .squad-back-btn:hover {
      background: rgba(212, 164, 76, 0.16);
      border-color: #d4a44c;
      color: #ffffff;
    }
    .squad-nav-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #100e0c;
      border: 1px solid #2c241b;
      border-top: 2px solid transparent;
      color: #d6cbb8;
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-decoration: none;
      transition: all 0.15s ease;
    }
    .squad-nav-tab:hover {
      background: #1f1a15;
      color: #f6f4ee;
      border-color: #473621;
      border-top-color: rgba(212, 164, 76, 0.5);
    }
    .squad-nav-tab.active {
      background: linear-gradient(180deg, rgba(212, 164, 76, 0.18) 0%, #161310 100%);
      color: #f2c96d;
      border-color: #473621;
      border-top: 2px solid #d4a44c;
    }
    .squad-nav-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 1px 5px;
      background: rgba(212, 164, 76, 0.12);
      border: 1px solid rgba(212, 164, 76, 0.35);
      color: #d4a44c;
    }
    @media (max-width: 768px) {
      .squad-nav-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 12px;
      }
      .squad-nav-bar::-webkit-scrollbar {
        display: none;
      }
      .squad-nav-tab,
      .squad-back-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
      }
    }
    /* Heatmap cell glow effects */
    .heat-cell {
      transition: all 0.15s ease-in-out;
    }
    .heat-cell:hover {
      transform: scale(1.04);
      z-index: 10;
    }
    /* Dramatic countdown pulse */
    @keyframes countdown-pulse {
      0% { transform: scale(0.9); opacity: 0.5; }
      50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 35px #f59e0b; }
      100% { transform: scale(1); opacity: 0.9; }
    }
    .animate-countdown-num {
      animation: countdown-pulse 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    }

    /* Avatar Drop Animation */
    @keyframes avatarDrop {
      0% { transform: translateY(-20px) scale(1.3); opacity: 0; }
      70% { transform: translateY(3px) scale(0.95); }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    .animate-avatar-drop {
      animation: avatarDrop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* Floating Reaction Animation */
    @keyframes floatReaction {
      0% { transform: translateY(0) scale(0.7) rotate(0deg); opacity: 0; }
      15% { transform: translateY(-30px) scale(1.15) rotate(-6deg); opacity: 1; }
      75% { transform: translateY(-190px) scale(1) rotate(4deg); opacity: 0.9; }
      100% { transform: translateY(-260px) scale(0.85) rotate(-3deg); opacity: 0; }
    }
    .floating-reaction-item {
      animation: floatReaction 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* 3D Coin Spin Animation */
    @keyframes spinCoin3D {
      0% { transform: rotateY(0deg) scale(1); }
      50% { transform: rotateY(1080deg) scale(1.3); }
      100% { transform: rotateY(2160deg) scale(1); }
    }
    .animate-coin-spin {
      animation: spinCoin3D 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* Refined Squad Readiness Static Neon Halo (Steady glow, no flashing) */
    .slot-ready-glow {
      box-shadow: 0 0 12px var(--glow-color, #10b981), inset 0 0 6px var(--glow-color, #10b981) !important;
      border-color: var(--glow-color, #10b981) !important;
      z-index: 5;
    }

    #activePoolContainer::-webkit-scrollbar,
    #searchResultsContainer::-webkit-scrollbar {
      width: 5px;
    }
    #activePoolContainer::-webkit-scrollbar-track,
    #searchResultsContainer::-webkit-scrollbar-track {
      background: #100e0c;
      border-left: 1px solid rgba(212, 164, 76, 0.2);
    }
    #activePoolContainer::-webkit-scrollbar-thumb,
    #searchResultsContainer::-webkit-scrollbar-thumb {
      background: rgba(212, 164, 76, 0.35);
      border: 1px solid rgba(212, 164, 76, 0.6);
      border-radius: 0px !important;
    }
    #activePoolContainer::-webkit-scrollbar-thumb:hover,
    #searchResultsContainer::-webkit-scrollbar-thumb:hover {
      background: #d4a44c;
      border-color: #f2c96d;
    }

    /* Screen shake animation */
    @keyframes screenShake {
      0% { transform: translate(0, 0) rotate(0deg); }
      20% { transform: translate(-3px, 3px) rotate(-0.5deg); }
      40% { transform: translate(3px, -2px) rotate(0.5deg); }
      60% { transform: translate(-2px, 1px) rotate(-0.25deg); }
      80% { transform: translate(2px, -1px) rotate(0.25deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    .animate-screen-shake {
      animation: screenShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
  

/* === COMPILED TAILWIND UTILITY LAYER FOR SQUAD HUB, WAGERS & WHEEL === */

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --font-serif: 'Cinzel', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-950: oklch(28.2% 0.091 267.935);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
  --color-slate-100: #f6f4ee;
  --color-slate-200: #e8dfd1;
  --color-slate-300: #d6cbb8;
  --color-slate-400: #b5a895;
  --color-slate-500: #9a8f7e;
  --color-slate-600: #6e6252;
  --color-slate-700: #473621;
  --color-slate-800: #2c241b;
  --color-slate-900: #161310;
  --color-slate-950: #080706;
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-4xl: 56rem;
  --container-7xl: 80rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --color-tactical-card: #161310;
  --color-tactical-border: #473621;
}
.pointer-events-auto {
  pointer-events: auto;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  inset-block: 0px;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: calc(var(--spacing) * 0.5);
}
.top-1\.5 {
  top: calc(var(--spacing) * 1.5);
}
.top-1\/2 {
  top: calc(1 / 2 * 100%);
}
.top-2 {
  top: calc(var(--spacing) * 2);
}
.top-2\.5 {
  top: calc(var(--spacing) * 2.5);
}
.top-3 {
  top: calc(var(--spacing) * 3);
}
.top-\[2px\] {
  top: 2px;
}
.top-full {
  top: 100%;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: calc(var(--spacing) * 0.5);
}
.right-1\.5 {
  right: calc(var(--spacing) * 1.5);
}
.right-2 {
  right: calc(var(--spacing) * 2);
}
.right-3 {
  right: calc(var(--spacing) * 3);
}
.right-4 {
  right: calc(var(--spacing) * 4);
}
.right-6 {
  right: calc(var(--spacing) * 6);
}
.-bottom-1 {
  bottom: calc(var(--spacing) * -1);
}
.bottom-0\.5 {
  bottom: calc(var(--spacing) * 0.5);
}
.bottom-1\.5 {
  bottom: calc(var(--spacing) * 1.5);
}
.bottom-2 {
  bottom: calc(var(--spacing) * 2);
}
.bottom-3 {
  bottom: calc(var(--spacing) * 3);
}
.bottom-4 {
  bottom: calc(var(--spacing) * 4);
}
.bottom-6 {
  bottom: calc(var(--spacing) * 6);
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1 {
  left: var(--spacing);
}
.left-1\.5 {
  left: calc(var(--spacing) * 1.5);
}
.left-1\/2 {
  left: calc(1 / 2 * 100%);
}
.left-2 {
  left: calc(var(--spacing) * 2);
}
.left-2\.5 {
  left: calc(var(--spacing) * 2.5);
}
.left-3 {
  left: calc(var(--spacing) * 3);
}
.left-4 {
  left: calc(var(--spacing) * 4);
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.col-span-full {
  grid-column: 1 / -1;
}
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}
.mx-auto {
  margin-inline: auto;
}
.my-2 {
  margin-block: calc(var(--spacing) * 2);
}
.my-8 {
  margin-block: calc(var(--spacing) * 8);
}
.my-auto {
  margin-block: auto;
}
.mt-0\.5 {
  margin-top: calc(var(--spacing) * 0.5);
}
.mt-1 {
  margin-top: var(--spacing);
}
.mt-1\.5 {
  margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}
.mt-12 {
  margin-top: calc(var(--spacing) * 12);
}
.mr-1 {
  margin-right: var(--spacing);
}
.mr-1\.5 {
  margin-right: calc(var(--spacing) * 1.5);
}
.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}
.mr-auto {
  margin-right: auto;
}
.-mb-\[2px\] {
  margin-bottom: calc(2px * -1);
}
.mb-1 {
  margin-bottom: var(--spacing);
}
.mb-1\.5 {
  margin-bottom: calc(var(--spacing) * 1.5);
}
.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}
.-ml-1 {
  margin-left: calc(var(--spacing) * -1);
}
.ml-1 {
  margin-left: var(--spacing);
}
.ml-auto {
  margin-left: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.aspect-\[460\/215\] {
  aspect-ratio: 460/215;
}
.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
.h-2\.5 {
  height: calc(var(--spacing) * 2.5);
}
.h-3 {
  height: calc(var(--spacing) * 3);
}
.h-3\.5 {
  height: calc(var(--spacing) * 3.5);
}
.h-4 {
  height: calc(var(--spacing) * 4);
}
.h-5 {
  height: calc(var(--spacing) * 5);
}
.h-6 {
  height: calc(var(--spacing) * 6);
}
.h-7 {
  height: calc(var(--spacing) * 7);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.h-11 {
  height: calc(var(--spacing) * 11);
}
.h-12 {
  height: calc(var(--spacing) * 12);
}
.h-14 {
  height: calc(var(--spacing) * 14);
}
.h-28 {
  height: calc(var(--spacing) * 28);
}
.h-44 {
  height: calc(var(--spacing) * 44);
}
.h-full {
  height: 100%;
}
.max-h-44 {
  max-height: calc(var(--spacing) * 44);
}
.max-h-48 {
  max-height: calc(var(--spacing) * 48);
}
.max-h-52 {
  max-height: calc(var(--spacing) * 52);
}
.max-h-56 {
  max-height: calc(var(--spacing) * 56);
}
.max-h-64 {
  max-height: calc(var(--spacing) * 64);
}
.max-h-72 {
  max-height: calc(var(--spacing) * 72);
}
.max-h-80 {
  max-height: calc(var(--spacing) * 80);
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[500px\] {
  max-height: 500px;
}
.min-h-\[24px\] {
  min-height: 24px;
}
.min-h-\[26px\] {
  min-height: 26px;
}
.min-h-\[50px\] {
  min-height: 50px;
}
.min-h-\[130px\] {
  min-height: 130px;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[150px\] {
  min-height: 150px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: calc(var(--spacing) * 0.5);
}
.w-1\.5 {
  width: calc(var(--spacing) * 1.5);
}
.w-2 {
  width: calc(var(--spacing) * 2);
}
.w-2\.5 {
  width: calc(var(--spacing) * 2.5);
}
.w-3 {
  width: calc(var(--spacing) * 3);
}
.w-3\.5 {
  width: calc(var(--spacing) * 3.5);
}
.w-4 {
  width: calc(var(--spacing) * 4);
}
.w-5 {
  width: calc(var(--spacing) * 5);
}
.w-6 {
  width: calc(var(--spacing) * 6);
}
.w-7 {
  width: calc(var(--spacing) * 7);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-11 {
  width: calc(var(--spacing) * 11);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-14 {
  width: calc(var(--spacing) * 14);
}
.w-28 {
  width: calc(var(--spacing) * 28);
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.max-w-2xl {
  max-width: var(--container-2xl);
}
.max-w-4xl {
  max-width: var(--container-4xl);
}
.max-w-7xl {
  max-width: var(--container-7xl);
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: var(--container-lg);
}
.max-w-md {
  max-width: var(--container-md);
}
.max-w-sm {
  max-width: var(--container-sm);
}
.max-w-xl {
  max-width: var(--container-xl);
}
.max-w-xs {
  max-width: var(--container-xs);
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[28px\] {
  min-width: 28px;
}
.min-w-\[32px\] {
  min-width: 32px;
}
.min-w-\[34px\] {
  min-width: 34px;
}
.min-w-\[700px\] {
  min-width: 700px;
}
.min-w-max {
  min-width: max-content;
}
.flex-1 {
  flex: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0 {
  --tw-translate-y: 0px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2 {
  --tw-translate-y: calc(var(--spacing) * 2);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.rotate-45 {
  rotate: 45deg;
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-ping {
  animation: var(--animate-ping);
}
.animate-pulse {
  animation: var(--animate-pulse);
}
.animate-spin {
  animation: var(--animate-spin);
}
.cursor-default {
  cursor: default;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.appearance-none {
  appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.gap-0\.5 {
  gap: calc(var(--spacing) * 0.5);
}
.gap-1 {
  gap: var(--spacing);
}
.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
  gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
:where(.space-y-0\.5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
  margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1\.5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2\.5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-3 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-6 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-x-3 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.divide-y > :not(:last-child)) {
  --tw-divide-y-reverse: 0;
  border-bottom-style: var(--tw-border-style);
  border-top-style: var(--tw-border-style);
  border-top-width: calc(1px * var(--tw-divide-y-reverse));
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
:where(.divide-slate-800\/60 > :not(:last-child)) {
  border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
  }
}
:where(.divide-slate-800\/80 > :not(:last-child)) {
  border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
  }
}
:where(.divide-slate-900 > :not(:last-child)) {
  border-color: var(--color-slate-900);
}
.self-center {
  align-self: center;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-none {
  border-radius: 0;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-4 {
  border-style: var(--tw-border-style);
  border-width: 4px;
}
.border-x {
  border-inline-style: var(--tw-border-style);
  border-inline-width: 1px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-t-2 {
  border-top-style: var(--tw-border-style);
  border-top-width: 2px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
}
.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}
.border-\[\#00AEFF\]\/40 {
  border-color: color-mix(in oklab, #00AEFF 40%, transparent);
}
.border-\[\#00AEFF\]\/50 {
  border-color: color-mix(in oklab, #00AEFF 50%, transparent);
}
.border-\[\#2a475e\] {
  border-color: #2a475e;
}
.border-\[\#3e2f1c\] {
  border-color: #3e2f1c;
}
.border-\[\#66c0f4\]\/40 {
  border-color: color-mix(in oklab, #66c0f4 40%, transparent);
}
.border-\[\#66c0f4\]\/50 {
  border-color: color-mix(in oklab, #66c0f4 50%, transparent);
}
.border-\[\#5865F2\]\/40 {
  border-color: color-mix(in oklab, #5865F2 40%, transparent);
}
.border-\[\#5865F2\]\/50 {
  border-color: color-mix(in oklab, #5865F2 50%, transparent);
}
.border-\[\#5865F2\]\/60 {
  border-color: color-mix(in oklab, #5865F2 60%, transparent);
}
.border-\[\#23232c\] {
  border-color: #23232c;
}
.border-amber-300 {
  border-color: var(--color-amber-300);
}
.border-amber-400 {
  border-color: var(--color-amber-400);
}
.border-amber-400\/80 {
  border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
  }
}
.border-amber-500 {
  border-color: var(--color-amber-500);
}
.border-amber-500\/30 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
  }
}
.border-amber-500\/40 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
  }
}
.border-amber-500\/50 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
  }
}
.border-amber-500\/60 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 60%, transparent);
  }
}
.border-amber-500\/70 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
  }
}
.border-amber-500\/80 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
  }
}
.border-amber-500\/90 {
  border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-500) 90%, transparent);
  }
}
.border-amber-600 {
  border-color: var(--color-amber-600);
}
.border-amber-600\/40 {
  border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-600) 40%, transparent);
  }
}
.border-amber-600\/60 {
  border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-600) 60%, transparent);
  }
}
.border-amber-600\/70 {
  border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
  }
}
.border-amber-600\/80 {
  border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-600) 80%, transparent);
  }
}
.border-amber-700 {
  border-color: var(--color-amber-700);
}
.border-amber-700\/60 {
  border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-700) 60%, transparent);
  }
}
.border-amber-800 {
  border-color: var(--color-amber-800);
}
.border-amber-800\/60 {
  border-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-800) 60%, transparent);
  }
}
.border-amber-900\/60 {
  border-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
  }
}
.border-blue-500 {
  border-color: var(--color-blue-500);
}
.border-blue-500\/40 {
  border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
  }
}
.border-blue-500\/80 {
  border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-blue-500) 80%, transparent);
  }
}
.border-blue-700 {
  border-color: var(--color-blue-700);
}
.border-cyan-400 {
  border-color: var(--color-cyan-400);
}
.border-cyan-400\/80 {
  border-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-400) 80%, transparent);
  }
}
.border-cyan-500 {
  border-color: var(--color-cyan-500);
}
.border-cyan-500\/30 {
  border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
  }
}
.border-cyan-500\/40 {
  border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-500) 40%, transparent);
  }
}
.border-cyan-500\/50 {
  border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-500) 50%, transparent);
  }
}
.border-cyan-500\/60 {
  border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-500) 60%, transparent);
  }
}
.border-cyan-500\/80 {
  border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-500) 80%, transparent);
  }
}
.border-cyan-700\/60 {
  border-color: color-mix(in srgb, oklch(52% 0.105 223.128) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-700) 60%, transparent);
  }
}
.border-cyan-800 {
  border-color: var(--color-cyan-800);
}
.border-cyan-900\/50 {
  border-color: color-mix(in srgb, oklch(39.8% 0.07 227.392) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-cyan-900) 50%, transparent);
  }
}
.border-emerald-300 {
  border-color: var(--color-emerald-300);
}
.border-emerald-400 {
  border-color: var(--color-emerald-400);
}
.border-emerald-500 {
  border-color: var(--color-emerald-500);
}
.border-emerald-500\/40 {
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
  }
}
.border-emerald-500\/50 {
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
  }
}
.border-emerald-500\/60 {
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-500) 60%, transparent);
  }
}
.border-emerald-500\/70 {
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-500) 70%, transparent);
  }
}
.border-emerald-500\/80 {
  border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);
  }
}
.border-emerald-600 {
  border-color: var(--color-emerald-600);
}
.border-emerald-600\/60 {
  border-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-600) 60%, transparent);
  }
}
.border-emerald-600\/70 {
  border-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-600) 70%, transparent);
  }
}
.border-emerald-700 {
  border-color: var(--color-emerald-700);
}
.border-emerald-800\/60 {
  border-color: color-mix(in srgb, oklch(43.2% 0.095 166.913) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-800) 60%, transparent);
  }
}
.border-emerald-900\/60 {
  border-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
  }
}
.border-green-600 {
  border-color: var(--color-green-600);
}
.border-green-700 {
  border-color: var(--color-green-700);
}
.border-green-800 {
  border-color: var(--color-green-800);
}
.border-indigo-400 {
  border-color: var(--color-indigo-400);
}
.border-indigo-500\/40 {
  border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-indigo-500) 40%, transparent);
  }
}
.border-indigo-500\/60 {
  border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-indigo-500) 60%, transparent);
  }
}
.border-indigo-500\/80 {
  border-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-indigo-500) 80%, transparent);
  }
}
.border-indigo-900\/60 {
  border-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-indigo-900) 60%, transparent);
  }
}
.border-orange-500\/50 {
  border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
  }
}
.border-orange-700 {
  border-color: var(--color-orange-700);
}
.border-purple-500 {
  border-color: var(--color-purple-500);
}
.border-purple-500\/40 {
  border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-500) 40%, transparent);
  }
}
.border-purple-500\/50 {
  border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
  }
}
.border-purple-500\/80 {
  border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-500) 80%, transparent);
  }
}
.border-purple-600\/80 {
  border-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-600) 80%, transparent);
  }
}
.border-purple-700 {
  border-color: var(--color-purple-700);
}
.border-purple-900\/60 {
  border-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-purple-900) 60%, transparent);
  }
}
.border-red-500 {
  border-color: var(--color-red-500);
}
.border-red-600 {
  border-color: var(--color-red-600);
}
.border-red-700 {
  border-color: var(--color-red-700);
}
.border-red-800 {
  border-color: var(--color-red-800);
}
.border-red-800\/60 {
  border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-red-800) 60%, transparent);
  }
}
.border-red-800\/80 {
  border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-red-800) 80%, transparent);
  }
}
.border-rose-500 {
  border-color: var(--color-rose-500);
}
.border-rose-500\/40 {
  border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-500) 40%, transparent);
  }
}
.border-rose-500\/80 {
  border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-500) 80%, transparent);
  }
}
.border-rose-600 {
  border-color: var(--color-rose-600);
}
.border-rose-600\/60 {
  border-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-600) 60%, transparent);
  }
}
.border-rose-600\/70 {
  border-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-600) 70%, transparent);
  }
}
.border-rose-600\/80 {
  border-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-600) 80%, transparent);
  }
}
.border-rose-700 {
  border-color: var(--color-rose-700);
}
.border-rose-800 {
  border-color: var(--color-rose-800);
}
.border-rose-900\/60 {
  border-color: color-mix(in srgb, oklch(41% 0.159 10.272) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-rose-900) 60%, transparent);
  }
}
.border-slate-300 {
  border-color: var(--color-slate-300);
}
.border-slate-400\/60 {
  border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
  }
}
.border-slate-700 {
  border-color: var(--color-slate-700);
}
.border-slate-700\/80 {
  border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-700) 80%, transparent);
  }
}
.border-slate-800 {
  border-color: var(--color-slate-800);
}
.border-slate-800\/60 {
  border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
  }
}
.border-slate-800\/80 {
  border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
  }
}
.border-slate-900 {
  border-color: var(--color-slate-900);
}
.border-slate-900\/80 {
  border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
  }
}
.border-tactical-border {
  border-color: var(--color-tactical-border);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/20 {
  border-color: color-mix(in srgb, #fff 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  }
}
.border-yellow-500\/70 {
  border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-yellow-500) 70%, transparent);
  }
}
.border-yellow-800 {
  border-color: var(--color-yellow-800);
}
.border-t-\[\#d4a44c\] {
  border-top-color: #d4a44c;
}
.border-t-amber-400 {
  border-top-color: var(--color-amber-400);
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#0a0a0d\]\/95 {
  background-color: color-mix(in oklab, #0a0a0d 95%, transparent);
}
.bg-\[\#0b101c\] {
  background-color: #0b101c;
}
.bg-\[\#0d0d10\]\/90 {
  background-color: color-mix(in oklab, #0d0d10 90%, transparent);
}
.bg-\[\#0d0d10\]\/95 {
  background-color: color-mix(in oklab, #0d0d10 95%, transparent);
}
.bg-\[\#00AEFF\]\/10 {
  background-color: color-mix(in oklab, #00AEFF 10%, transparent);
}
.bg-\[\#00AEFF\]\/20 {
  background-color: color-mix(in oklab, #00AEFF 20%, transparent);
}
.bg-\[\#070b14\] {
  background-color: #070b14;
}
.bg-\[\#070c18\] {
  background-color: #070c18;
}
.bg-\[\#080b12\] {
  background-color: #080b12;
}
.bg-\[\#080c14\] {
  background-color: #080c14;
}
.bg-\[\#080d1a\] {
  background-color: #080d1a;
}
.bg-\[\#080d16\] {
  background-color: #080d16;
}
.bg-\[\#080d18\] {
  background-color: #080d18;
}
.bg-\[\#090d16\] {
  background-color: #090d16;
}
.bg-\[\#090e1a\] {
  background-color: #090e1a;
}
.bg-\[\#090e18\] {
  background-color: #090e18;
}
.bg-\[\#090e18\]\/95 {
  background-color: color-mix(in oklab, #090e18 95%, transparent);
}
.bg-\[\#171d25\] {
  background-color: #171d25;
}
.bg-\[\#05070c\] {
  background-color: #05070c;
}
.bg-\[\#05070c\]\/90 {
  background-color: color-mix(in oklab, #05070c 90%, transparent);
}
.bg-\[\#5865F2\]\/10 {
  background-color: color-mix(in oklab, #5865F2 10%, transparent);
}
.bg-\[\#5865F2\]\/15 {
  background-color: color-mix(in oklab, #5865F2 15%, transparent);
}
.bg-\[\#5865F2\]\/20 {
  background-color: color-mix(in oklab, #5865F2 20%, transparent);
}
.bg-\[\#5865F2\]\/30 {
  background-color: color-mix(in oklab, #5865F2 30%, transparent);
}
.bg-\[\#06080e\] {
  background-color: #06080e;
}
.bg-\[\#030712\] {
  background-color: #030712;
}
.bg-\[\#050811\] {
  background-color: #050811;
}
.bg-\[\#060910\] {
  background-color: #060910;
}
.bg-\[\#060911\] {
  background-color: #060911;
}
.bg-\[\#061014\] {
  background-color: #061014;
}
.bg-\[\#131318\] {
  background-color: #131318;
}
.bg-amber-400 {
  background-color: var(--color-amber-400);
}
.bg-amber-500 {
  background-color: var(--color-amber-500);
}
.bg-amber-500\/10 {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
  }
}
.bg-amber-500\/15 {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
  }
}
.bg-amber-500\/20 {
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
}
.bg-amber-600 {
  background-color: var(--color-amber-600);
}
.bg-amber-700\/20 {
  background-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-700) 20%, transparent);
  }
}
.bg-amber-950 {
  background-color: var(--color-amber-950);
}
.bg-amber-950\/10 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 10%, transparent);
  }
}
.bg-amber-950\/20 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
  }
}
.bg-amber-950\/30 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
  }
}
.bg-amber-950\/40 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
  }
}
.bg-amber-950\/60 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 60%, transparent);
  }
}
.bg-amber-950\/80 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 80%, transparent);
  }
}
.bg-amber-950\/90 {
  background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-950) 90%, transparent);
  }
}
.bg-black {
  background-color: var(--color-black);
}
.bg-black\/40 {
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}
.bg-black\/60 {
  background-color: color-mix(in srgb, #000 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
  }
}
.bg-black\/80 {
  background-color: color-mix(in srgb, #000 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
  }
}
.bg-black\/85 {
  background-color: color-mix(in srgb, #000 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
  }
}
.bg-black\/90 {
  background-color: color-mix(in srgb, #000 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
  }
}
.bg-black\/95 {
  background-color: color-mix(in srgb, #000 95%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
  }
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.bg-blue-500\/15 {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 15%, transparent);
  }
}
.bg-blue-500\/20 {
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
}
.bg-blue-950 {
  background-color: var(--color-blue-950);
}
.bg-current {
  background-color: currentcolor;
}
.bg-cyan-400 {
  background-color: var(--color-cyan-400);
}
.bg-cyan-500 {
  background-color: var(--color-cyan-500);
}
.bg-cyan-500\/10 {
  background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-500) 10%, transparent);
  }
}
.bg-cyan-500\/15 {
  background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-500) 15%, transparent);
  }
}
.bg-cyan-500\/20 {
  background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
  }
}
.bg-cyan-500\/40 {
  background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-500) 40%, transparent);
  }
}
.bg-cyan-600 {
  background-color: var(--color-cyan-600);
}
.bg-cyan-950\/70 {
  background-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-950) 70%, transparent);
  }
}
.bg-cyan-950\/90 {
  background-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-cyan-950) 90%, transparent);
  }
}
.bg-emerald-400 {
  background-color: var(--color-emerald-400);
}
.bg-emerald-500 {
  background-color: var(--color-emerald-500);
}
.bg-emerald-500\/10 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
  }
}
.bg-emerald-500\/15 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
  }
}
.bg-emerald-500\/20 {
  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
  }
}
.bg-emerald-600 {
  background-color: var(--color-emerald-600);
}
.bg-emerald-700 {
  background-color: var(--color-emerald-700);
}
.bg-emerald-950 {
  background-color: var(--color-emerald-950);
}
.bg-emerald-950\/30 {
  background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-950) 30%, transparent);
  }
}
.bg-emerald-950\/40 {
  background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
  }
}
.bg-emerald-950\/80 {
  background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-950) 80%, transparent);
  }
}
.bg-emerald-950\/90 {
  background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-emerald-950) 90%, transparent);
  }
}
.bg-green-600 {
  background-color: var(--color-green-600);
}
.bg-green-950 {
  background-color: var(--color-green-950);
}
.bg-green-950\/60 {
  background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-950) 60%, transparent);
  }
}
.bg-green-950\/80 {
  background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-950) 80%, transparent);
  }
}
.bg-indigo-500 {
  background-color: var(--color-indigo-500);
}
.bg-indigo-500\/20 {
  background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
  }
}
.bg-indigo-600 {
  background-color: var(--color-indigo-600);
}
.bg-orange-500\/15 {
  background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-orange-500) 15%, transparent);
  }
}
.bg-orange-950 {
  background-color: var(--color-orange-950);
}
.bg-purple-500 {
  background-color: var(--color-purple-500);
}
.bg-purple-500\/15 {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 15%, transparent);
  }
}
.bg-purple-500\/20 {
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
  }
}
.bg-purple-950 {
  background-color: var(--color-purple-950);
}
.bg-purple-950\/80 {
  background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-950) 80%, transparent);
  }
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-red-900\/80 {
  background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-900) 80%, transparent);
  }
}
.bg-red-950 {
  background-color: var(--color-red-950);
}
.bg-red-950\/20 {
  background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-950) 20%, transparent);
  }
}
.bg-red-950\/40 {
  background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
  }
}
.bg-red-950\/80 {
  background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-950) 80%, transparent);
  }
}
.bg-red-950\/90 {
  background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-red-950) 90%, transparent);
  }
}
.bg-rose-500 {
  background-color: var(--color-rose-500);
}
.bg-rose-500\/15 {
  background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent);
  }
}
.bg-rose-500\/20 {
  background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
  }
}
.bg-rose-600 {
  background-color: var(--color-rose-600);
}
.bg-rose-950\/40 {
  background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
  }
}
.bg-rose-950\/50 {
  background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-950) 50%, transparent);
  }
}
.bg-rose-950\/60 {
  background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-950) 60%, transparent);
  }
}
.bg-rose-950\/90 {
  background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-rose-950) 90%, transparent);
  }
}
.bg-slate-200 {
  background-color: var(--color-slate-200);
}
.bg-slate-300\/20 {
  background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-300) 20%, transparent);
  }
}
.bg-slate-600\/80 {
  background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-600) 80%, transparent);
  }
}
.bg-slate-800 {
  background-color: var(--color-slate-800);
}
.bg-slate-800\/50 {
  background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
  }
}
.bg-slate-900 {
  background-color: var(--color-slate-900);
}
.bg-slate-900\/60 {
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
  }
}
.bg-slate-900\/80 {
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
  }
}
.bg-slate-900\/90 {
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);
  }
}
.bg-slate-950 {
  background-color: var(--color-slate-950);
}
.bg-slate-950\/20 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 20%, transparent);
  }
}
.bg-slate-950\/40 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 40%, transparent);
  }
}
.bg-slate-950\/50 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
  }
}
.bg-slate-950\/60 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 60%, transparent);
  }
}
.bg-slate-950\/70 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
  }
}
.bg-slate-950\/80 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
  }
}
.bg-slate-950\/90 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 90%, transparent);
  }
}
.bg-tactical-card {
  background-color: var(--color-tactical-card);
}
.bg-transparent {
  background-color: transparent;
}
.bg-yellow-950\/80 {
  background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-yellow-950) 80%, transparent);
  }
}
.bg-gradient-to-b {
  --tw-gradient-position: to bottom in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  --tw-gradient-position: to top in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
  --tw-gradient-position: to top right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-amber-500 {
  --tw-gradient-from: var(--color-amber-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-amber-500\/15 {
  --tw-gradient-from: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-amber-500\/20 {
  --tw-gradient-from: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-amber-600 {
  --tw-gradient-from: var(--color-amber-600);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-amber-950\/40 {
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-black {
  --tw-gradient-from: var(--color-black);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-black\/80 {
  --tw-gradient-from: color-mix(in srgb, #000 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-cyan-500 {
  --tw-gradient-from: var(--color-cyan-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-slate-950 {
  --tw-gradient-from: var(--color-slate-950);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-slate-950\/80 {
  --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-amber-400 {
  --tw-gradient-via: var(--color-amber-400);
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-amber-500\/10 {
  --tw-gradient-via: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-amber-500\/25 {
  --tw-gradient-via: color-mix(in srgb, oklch(76.9% 0.188 70.08) 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-amber-500) 25%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-black\/85 {
  --tw-gradient-via: color-mix(in srgb, #000 85%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-black) 85%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-cyan-400 {
  --tw-gradient-via: var(--color-cyan-400);
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-slate-950\/50 {
  --tw-gradient-via: color-mix(in srgb, oklch(12.9% 0.042 264.695) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
  }
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-transparent {
  --tw-gradient-via: transparent;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-\[\#080d16\] {
  --tw-gradient-to: #080d16;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-400 {
  --tw-gradient-to: var(--color-amber-400);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-500 {
  --tw-gradient-to: var(--color-amber-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-500\/15 {
  --tw-gradient-to: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-amber-600 {
  --tw-gradient-to: var(--color-amber-600);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-black\/40 {
  --tw-gradient-to: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-cyan-400 {
  --tw-gradient-to: var(--color-cyan-400);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-emerald-500 {
  --tw-gradient-to: var(--color-emerald-500);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-transparent {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-yellow-200 {
  --tw-gradient-to: var(--color-yellow-200);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.fill-current {
  fill: currentcolor;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.object-top {
  object-position: top;
}
.p-0\.5 {
  padding: calc(var(--spacing) * 0.5);
}
.p-1 {
  padding: var(--spacing);
}
.p-1\.5 {
  padding: calc(var(--spacing) * 1.5);
}
.p-2 {
  padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
  padding: calc(var(--spacing) * 2.5);
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.p-3\.5 {
  padding: calc(var(--spacing) * 3.5);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-6 {
  padding: calc(var(--spacing) * 6);
}
.p-8 {
  padding: calc(var(--spacing) * 8);
}
.px-0\.5 {
  padding-inline: calc(var(--spacing) * 0.5);
}
.px-1 {
  padding-inline: var(--spacing);
}
.px-1\.5 {
  padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
  padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-3\.5 {
  padding-inline: calc(var(--spacing) * 3.5);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
  padding-inline: calc(var(--spacing) * 8);
}
.px-10 {
  padding-inline: calc(var(--spacing) * 10);
}
.py-0\.5 {
  padding-block: calc(var(--spacing) * 0.5);
}
.py-1 {
  padding-block: var(--spacing);
}
.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.py-5 {
  padding-block: calc(var(--spacing) * 5);
}
.py-6 {
  padding-block: calc(var(--spacing) * 6);
}
.py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.py-16 {
  padding-block: calc(var(--spacing) * 16);
}
.pt-0\.5 {
  padding-top: calc(var(--spacing) * 0.5);
}
.pt-1 {
  padding-top: var(--spacing);
}
.pt-1\.5 {
  padding-top: calc(var(--spacing) * 1.5);
}
.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}
.pt-2\.5 {
  padding-top: calc(var(--spacing) * 2.5);
}
.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}
.pt-3\.5 {
  padding-top: calc(var(--spacing) * 3.5);
}
.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.pr-1 {
  padding-right: var(--spacing);
}
.pr-3 {
  padding-right: calc(var(--spacing) * 3);
}
.pr-8 {
  padding-right: calc(var(--spacing) * 8);
}
.pb-1 {
  padding-bottom: var(--spacing);
}
.pb-1\.5 {
  padding-bottom: calc(var(--spacing) * 1.5);
}
.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}
.pb-2\.5 {
  padding-bottom: calc(var(--spacing) * 2.5);
}
.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}
.pl-8 {
  padding-left: calc(var(--spacing) * 8);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: var(--font-mono);
}
.font-sans {
  font-family: var(--font-sans);
}
.font-serif {
  font-family: var(--font-serif);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-8xl {
  font-size: var(--text-8xl);
  line-height: var(--tw-leading, var(--text-8xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[6px\] {
  font-size: 6px;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.leading-snug {
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}
.font-black {
  --tw-font-weight: var(--font-weight-black);
  font-weight: var(--font-weight-black);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-tight {
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}
.tracking-wide {
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.tracking-wider {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.tracking-widest {
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-\[\#00AEFF\] {
  color: #00AEFF;
}
.text-\[\#8ea1ff\] {
  color: #8ea1ff;
}
.text-\[\#9aa4ff\] {
  color: #9aa4ff;
}
.text-\[\#66c0f4\] {
  color: #66c0f4;
}
.text-\[\#5865F2\] {
  color: #5865F2;
}
.text-\[\#c6d4df\] {
  color: #c6d4df;
}
.text-amber-200 {
  color: var(--color-amber-200);
}
.text-amber-300 {
  color: var(--color-amber-300);
}
.text-amber-400 {
  color: var(--color-amber-400);
}
.text-amber-500 {
  color: var(--color-amber-500);
}
.text-amber-500\/80 {
  color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
  }
}
.text-amber-600 {
  color: var(--color-amber-600);
}
.text-black {
  color: var(--color-black);
}
.text-blue-300 {
  color: var(--color-blue-300);
}
.text-blue-400 {
  color: var(--color-blue-400);
}
.text-cyan-300 {
  color: var(--color-cyan-300);
}
.text-cyan-400 {
  color: var(--color-cyan-400);
}
.text-emerald-100 {
  color: var(--color-emerald-100);
}
.text-emerald-300 {
  color: var(--color-emerald-300);
}
.text-emerald-400 {
  color: var(--color-emerald-400);
}
.text-emerald-500\/80 {
  color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);
  }
}
.text-green-200 {
  color: var(--color-green-200);
}
.text-green-300 {
  color: var(--color-green-300);
}
.text-green-400 {
  color: var(--color-green-400);
}
.text-indigo-300 {
  color: var(--color-indigo-300);
}
.text-indigo-400 {
  color: var(--color-indigo-400);
}
.text-orange-400 {
  color: var(--color-orange-400);
}
.text-purple-300 {
  color: var(--color-purple-300);
}
.text-purple-400 {
  color: var(--color-purple-400);
}
.text-red-200 {
  color: var(--color-red-200);
}
.text-red-300 {
  color: var(--color-red-300);
}
.text-red-300\/80 {
  color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-red-300) 80%, transparent);
  }
}
.text-red-400 {
  color: var(--color-red-400);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-rose-300 {
  color: var(--color-rose-300);
}
.text-rose-400 {
  color: var(--color-rose-400);
}
.text-slate-100 {
  color: var(--color-slate-100);
}
.text-slate-200 {
  color: var(--color-slate-200);
}
.text-slate-300 {
  color: var(--color-slate-300);
}
.text-slate-400 {
  color: var(--color-slate-400);
}
.text-slate-500 {
  color: var(--color-slate-500);
}
.text-slate-600 {
  color: var(--color-slate-600);
}
.text-white {
  color: var(--color-white);
}
.text-yellow-300 {
  color: var(--color-yellow-300);
}
.text-yellow-400 {
  color: var(--color-yellow-400);
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.line-through {
  text-decoration-line: line-through;
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-slate-500::placeholder {
  color: var(--color-slate-500);
}
.accent-amber-500 {
  accent-color: var(--color-amber-500);
}
.accent-indigo-500 {
  accent-color: var(--color-indigo-500);
}
.opacity-0 {
  opacity: 0%;
}
.opacity-35 {
  opacity: 35%;
}
.opacity-40 {
  opacity: 40%;
}
.opacity-50 {
  opacity: 50%;
}
.opacity-60 {
  opacity: 60%;
}
.opacity-100 {
  opacity: 100%;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_15px_rgba\(245\,158\,11\,0\.25\)\] {
  --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(245,158,11,0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-1 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[\#5865F2\]\/15 {
  --tw-shadow-color: color-mix(in srgb, #5865F2 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #5865F2 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-amber-500\/10 {
  --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-amber-500\/15 {
  --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-amber-500\/20 {
  --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-amber-500\/30 {
  --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-amber-500\/50 {
  --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-cyan-500\/15 {
  --tw-shadow-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyan-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-cyan-950\/40 {
  --tw-shadow-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyan-950) 40%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-emerald-500\/15 {
  --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-emerald-500\/20 {
  --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-emerald-950 {
  --tw-shadow-color: oklch(26.2% 0.051 172.552);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, var(--color-emerald-950) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-emerald-950\/30 {
  --tw-shadow-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-950) 30%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-orange-500\/15 {
  --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.shadow-purple-500\/15 {
  --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 15%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.ring-amber-400 {
  --tw-ring-color: var(--color-amber-400);
}
.ring-amber-400\/50 {
  --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
  }
}
.ring-rose-500 {
  --tw-ring-color: var(--color-rose-500);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.brightness-75 {
  --tw-brightness: brightness(75%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.brightness-90 {
  --tw-brightness: brightness(90%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.brightness-95 {
  --tw-brightness: brightness(95%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.contrast-110 {
  --tw-contrast: contrast(110%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.contrast-125 {
  --tw-contrast: contrast(125%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-2xl {
  --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-\[0_4px_10px_rgba\(0\,0\,0\,0\.95\)\] {
  --tw-drop-shadow-size: drop-shadow(0 4px 10px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
  --tw-drop-shadow: var(--tw-drop-shadow-size);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.drop-shadow-md {
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(var(--blur-md));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-xs {
  --tw-backdrop-blur: blur(var(--blur-xs));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-75 {
  --tw-duration: 75ms;
  transition-duration: 75ms;
}
.duration-100 {
  --tw-duration: 100ms;
  transition-duration: 100ms;
}
.duration-150 {
  --tw-duration: 150ms;
  transition-duration: 150ms;
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.select-all {
  -webkit-user-select: all;
  user-select: all;
}
.select-none {
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) {
  .group-hover\:scale-105:is(:where(.group):hover *) {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\:scale-110:is(:where(.group):hover *) {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\:bg-amber-500:is(:where(.group):hover *) {
    background-color: var(--color-amber-500);
  }
  .group-hover\:bg-black:is(:where(.group):hover *) {
    background-color: var(--color-black);
  }
  .group-hover\:text-amber-300:is(:where(.group):hover *) {
    color: var(--color-amber-300);
  }
  .group-hover\:text-black:is(:where(.group):hover *) {
    color: var(--color-black);
  }
  .group-hover\:text-white:is(:where(.group):hover *) {
    color: var(--color-white);
  }
  .group-hover\:underline:is(:where(.group):hover *) {
    text-decoration-line: underline;
  }
  .group-hover\/arm\:brightness-125:is(:where(.group\/arm):hover *) {
    --tw-brightness: brightness(125%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .group-hover\/pill\:flex:is(:where(.group\/pill):hover *) {
    display: flex;
  }
  .group-hover\/thumb\:scale-105:is(:where(.group\/thumb):hover *) {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .group-hover\/thumb\:brightness-110:is(:where(.group\/thumb):hover *) {
    --tw-brightness: brightness(110%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
.selection\:bg-amber-500 ::selection {
  background-color: var(--color-amber-500);
}
.selection\:bg-amber-500::selection {
  background-color: var(--color-amber-500);
}
.selection\:text-black ::selection {
  color: var(--color-black);
}
.selection\:text-black::selection {
  color: var(--color-black);
}
.placeholder\:text-slate-400::placeholder {
  color: var(--color-slate-400);
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
@media (hover: hover) {
  .hover\:scale-\[1\.01\]:hover {
    scale: 1.01;
  }
  .hover\:scale-\[1\.02\]:hover {
    scale: 1.02;
  }
  .hover\:border-\[\#00AEFF\]:hover {
    border-color: #00AEFF;
  }
  .hover\:border-\[\#66c0f4\]:hover {
    border-color: #66c0f4;
  }
  .hover\:border-\[\#5865F2\]:hover {
    border-color: #5865F2;
  }
  .hover\:border-amber-400:hover {
    border-color: var(--color-amber-400);
  }
  .hover\:border-amber-500:hover {
    border-color: var(--color-amber-500);
  }
  .hover\:border-amber-600:hover {
    border-color: var(--color-amber-600);
  }
  .hover\:border-amber-600\/70:hover {
    border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 70%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:border-amber-600\/70:hover {
      border-color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }
  .hover\:border-cyan-400:hover {
    border-color: var(--color-cyan-400);
  }
  .hover\:border-emerald-600:hover {
    border-color: var(--color-emerald-600);
  }
  .hover\:border-indigo-400:hover {
    border-color: var(--color-indigo-400);
  }
  .hover\:border-indigo-600:hover {
    border-color: var(--color-indigo-600);
  }
  .hover\:border-rose-500:hover {
    border-color: var(--color-rose-500);
  }
  .hover\:border-rose-600:hover {
    border-color: var(--color-rose-600);
  }
  .hover\:border-slate-500:hover {
    border-color: var(--color-slate-500);
  }
  .hover\:border-slate-600:hover {
    border-color: var(--color-slate-600);
  }
  .hover\:border-slate-700:hover {
    border-color: var(--color-slate-700);
  }
  .hover\:border-yellow-400:hover {
    border-color: var(--color-yellow-400);
  }
  .hover\:bg-\[\#00AEFF\]\/40:hover {
    background-color: color-mix(in oklab, #00AEFF 40%, transparent);
  }
  .hover\:bg-\[\#212b36\]:hover {
    background-color: #212b36;
  }
  .hover\:bg-\[\#5865F2\]\/30:hover {
    background-color: color-mix(in oklab, #5865F2 30%, transparent);
  }
  .hover\:bg-\[\#5865F2\]\/40:hover {
    background-color: color-mix(in oklab, #5865F2 40%, transparent);
  }
  .hover\:bg-amber-400:hover {
    background-color: var(--color-amber-400);
  }
  .hover\:bg-amber-500:hover {
    background-color: var(--color-amber-500);
  }
  .hover\:bg-amber-500\/10:hover {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-amber-500\/10:hover {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .hover\:bg-amber-500\/20:hover {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-amber-500\/20:hover {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }
  .hover\:bg-amber-500\/30:hover {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-amber-500\/30:hover {
      background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }
  .hover\:bg-amber-900\/60:hover {
    background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-amber-900\/60:hover {
      background-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
    }
  }
  .hover\:bg-amber-950\/60:hover {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-amber-950\/60:hover {
      background-color: color-mix(in oklab, var(--color-amber-950) 60%, transparent);
    }
  }
  .hover\:bg-black:hover {
    background-color: var(--color-black);
  }
  .hover\:bg-cyan-400:hover {
    background-color: var(--color-cyan-400);
  }
  .hover\:bg-cyan-500:hover {
    background-color: var(--color-cyan-500);
  }
  .hover\:bg-cyan-500\/20:hover {
    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-cyan-500\/20:hover {
      background-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
  }
  .hover\:bg-cyan-500\/30:hover {
    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-cyan-500\/30:hover {
      background-color: color-mix(in oklab, var(--color-cyan-500) 30%, transparent);
    }
  }
  .hover\:bg-emerald-500:hover {
    background-color: var(--color-emerald-500);
  }
  .hover\:bg-emerald-500\/30:hover {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-emerald-500\/30:hover {
      background-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
    }
  }
  .hover\:bg-emerald-900\/60:hover {
    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-emerald-900\/60:hover {
      background-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
    }
  }
  .hover\:bg-green-500:hover {
    background-color: var(--color-green-500);
  }
  .hover\:bg-indigo-500:hover {
    background-color: var(--color-indigo-500);
  }
  .hover\:bg-indigo-900\/30:hover {
    background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-indigo-900\/30:hover {
      background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);
    }
  }
  .hover\:bg-orange-500\/30:hover {
    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-orange-500\/30:hover {
      background-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
    }
  }
  .hover\:bg-purple-500\/30:hover {
    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-purple-500\/30:hover {
      background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
    }
  }
  .hover\:bg-red-500:hover {
    background-color: var(--color-red-500);
  }
  .hover\:bg-red-900\/60:hover {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-red-900\/60:hover {
      background-color: color-mix(in oklab, var(--color-red-900) 60%, transparent);
    }
  }
  .hover\:bg-rose-500:hover {
    background-color: var(--color-rose-500);
  }
  .hover\:bg-rose-500\/20:hover {
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-rose-500\/20:hover {
      background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
    }
  }
  .hover\:bg-rose-900:hover {
    background-color: var(--color-rose-900);
  }
  .hover\:bg-rose-900\/30:hover {
    background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-rose-900\/30:hover {
      background-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);
    }
  }
  .hover\:bg-rose-950\/40:hover {
    background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 40%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-rose-950\/40:hover {
      background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
    }
  }
  .hover\:bg-slate-700:hover {
    background-color: var(--color-slate-700);
  }
  .hover\:bg-slate-800:hover {
    background-color: var(--color-slate-800);
  }
  .hover\:bg-slate-900:hover {
    background-color: var(--color-slate-900);
  }
  .hover\:bg-slate-900\/50:hover {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-slate-900\/50:hover {
      background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }
  .hover\:bg-slate-900\/60:hover {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-slate-900\/60:hover {
      background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
    }
  }
  .hover\:bg-slate-900\/80:hover {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-slate-900\/80:hover {
      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
    }
  }
  .hover\:bg-yellow-500\/20:hover {
    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-yellow-500\/20:hover {
      background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }
  .hover\:from-amber-400:hover {
    --tw-gradient-from: var(--color-amber-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .hover\:from-amber-500:hover {
    --tw-gradient-from: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .hover\:via-amber-400:hover {
    --tw-gradient-via: var(--color-amber-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .hover\:to-amber-300:hover {
    --tw-gradient-to: var(--color-amber-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .hover\:to-amber-500:hover {
    --tw-gradient-to: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .hover\:text-amber-300:hover {
    color: var(--color-amber-300);
  }
  .hover\:text-amber-400:hover {
    color: var(--color-amber-400);
  }
  .hover\:text-black:hover {
    color: var(--color-black);
  }
  .hover\:text-cyan-300:hover {
    color: var(--color-cyan-300);
  }
  .hover\:text-emerald-400:hover {
    color: var(--color-emerald-400);
  }
  .hover\:text-rose-300:hover {
    color: var(--color-rose-300);
  }
  .hover\:text-rose-400:hover {
    color: var(--color-rose-400);
  }
  .hover\:text-slate-200:hover {
    color: var(--color-slate-200);
  }
  .hover\:text-white:hover {
    color: var(--color-white);
  }
  .hover\:underline:hover {
    text-decoration-line: underline;
  }
  .hover\:opacity-95:hover {
    opacity: 95%;
  }
  .hover\:shadow-\[0_0_25px_rgba\(245\,158\,11\,0\.6\)\]:hover {
    --tw-shadow: 0 0 25px var(--tw-shadow-color, rgba(245,158,11,0.6));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hover\:brightness-125:hover {
    --tw-brightness: brightness(125%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
.focus\:border-amber-400:focus {
  border-color: var(--color-amber-400);
}
.focus\:border-amber-500:focus {
  border-color: var(--color-amber-500);
}
.focus\:border-cyan-500:focus {
  border-color: var(--color-cyan-500);
}
.focus\:border-emerald-400:focus {
  border-color: var(--color-emerald-400);
}
.focus\:border-indigo-400:focus {
  border-color: var(--color-indigo-400);
}
.focus\:border-indigo-500:focus {
  border-color: var(--color-indigo-500);
}
.focus\:ring-1:focus {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-amber-400:focus {
  --tw-ring-color: var(--color-amber-400);
}
.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.active\:scale-95:active {
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.active\:scale-\[0\.99\]:active {
  scale: 0.99;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:border-slate-800:disabled {
  border-color: var(--color-slate-800);
}
.disabled\:bg-slate-900:disabled {
  background-color: var(--color-slate-900);
}
.disabled\:text-slate-600:disabled {
  color: var(--color-slate-600);
}
.disabled\:opacity-30:disabled {
  opacity: 30%;
}
.disabled\:opacity-40:disabled {
  opacity: 40%;
}
@media (width >= 40rem) {
  .sm\:ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:inline-flex {
    display: inline-flex;
  }
  .sm\:h-14 {
    height: calc(var(--spacing) * 14);
  }
  .sm\:h-52 {
    height: calc(var(--spacing) * 52);
  }
  .sm\:w-14 {
    width: calc(var(--spacing) * 14);
  }
  .sm\:w-\[340px\] {
    width: 340px;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .sm\:gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .sm\:p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .sm\:p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .sm\:p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .sm\:p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .sm\:p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .sm\:px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .sm\:px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .sm\:py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .sm\:pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .sm\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .sm\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .sm\:text-9xl {
    font-size: var(--text-9xl);
    line-height: var(--tw-leading, var(--text-9xl--line-height));
  }
  .sm\:text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .sm\:text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .sm\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .sm\:text-\[9px\] {
    font-size: 9px;
  }
}
@media (width >= 48rem) {
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline {
    display: inline;
  }
  .md\:w-auto {
    width: auto;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .md\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}
@media (width >= 64rem) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
}
@media (width >= 80rem) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}


/* ==========================================================================
   18. DISCORD /BOOST TELEMETRY RIBBON & BARRENS LIVE SYNC WIDGET
   ========================================================================== */
.bot-boost-telemetry-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.96) 0%, rgba(16, 14, 12, 0.98) 100%);
  border-bottom: 1px solid var(--border-bronze, #473621);
}

@media (max-width: 900px) {
  .bot-boost-telemetry-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .bot-boost-telemetry-ribbon {
    grid-template-columns: 1fr;
  }
}

.boost-stat-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-abyss, #080706);
  border: 1px solid var(--border-earth, #2c241b);
  border-left: 3px solid var(--gold-barrens, #d4a44c);
}

.boost-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dust, #9a8f7e);
}

.boost-stat-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-crest, #f2c96d);
  font-variant-numeric: tabular-nums;
}

.boost-emoji-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-earth, #2c241b);
  overflow: hidden;
  margin-top: 2px;
}

.boost-emoji-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-barrens, #d4a44c) 0%, var(--ember-savanna, #e07a2e) 100%);
  transition: width 0.3s ease;
}

.bot-role-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 6px;
  overflow: hidden;
}

.bot-role-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.bot-discord-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(212, 164, 76, 0.12);
  border: 1px solid var(--border-bronze, #473621);
  color: var(--gold-crest, #f2c96d);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.bot-discord-jump-link:hover {
  background: rgba(212, 164, 76, 0.24);
  border-color: var(--gold-barrens, #d4a44c);
  color: #ffffff;
}

@media (max-width: 480px) {
  .hero-banner-container {
    height: 120px !important;
    min-height: 120px !important;
  }

  .hero-guild-title {
    font-size: clamp(1.75rem, 6.5vw, 2.3rem) !important;
    letter-spacing: 0.10em !important;
    padding-left: 0.10em !important;
  }
}

/* ==========================================================================
   19. BARRENS SAVANNA TWILIGHT & FORGED BRONZE — GLOBAL SURFACE UNIFICATION
   Replaces all legacy cold-slate/navy/neon-cyan component overrides across
   Roster, Polls, Crafting, Shopping List, Addons, XP, Logs, and Squad Hub
   ========================================================================== */

/* Warm Barrens Basalt & Canyon Surfaces across all Cards, Panels, and Modals */
.card,
.intel-card,
.roster-card,
.planner-card,
.consensus-hero-card,
.poll-voting-panel,
.recent-voters-section,
.craft-hero-section,
.craft-filter-bar,
.recipe-card,
.cart-dashboard-card,
.addon-card,
.addon-hero-banner,
.addon-filter-deck,
.armory-modal-dialog,
.patch-modal-dialog,
.craft-order-modal,
.shop-export-modal-card,
.modal-card {
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.96) 0%, rgba(16, 14, 12, 0.98) 100%) !important;
  border-color: var(--border-bronze, #473621) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(242, 201, 109, 0.08) !important;
}

.card-header,
.intel-card-header,
.roster-header,
.planner-header,
.cart-dashboard-header,
.modal-header,
.patch-modal-header,
.armory-modal-header {
  background: linear-gradient(90deg, rgba(31, 26, 21, 0.96) 0%, rgba(22, 19, 16, 0.98) 100%) !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
}

/* Warm Barrens Inputs, Selects, and Search Controls */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea,
.form-input,
.form-select,
.craft-search-input,
.addon-search-input,
.xp-input,
.xp-select {
  background-color: var(--bg-input, #050403) !important;
  border-color: var(--border-bronze, #473621) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus {
  border-color: var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 0 0 2px rgba(212, 164, 76, 0.22) !important;
  outline: none !important;
}

/* Warm Barrens Tables & Alternating Rows (Roster, Polls, Logs, Shopping) */
.roster-table thead th,
.logs-table thead th {
  background: rgba(16, 14, 12, 0.98) !important;
  border-bottom: 1.5px solid var(--border-bronze, #473621) !important;
  color: var(--gold-barrens, #d4a44c) !important;
}

.roster-table tbody tr {
  background: rgba(22, 19, 16, 0.85) !important;
  border-bottom: 1px solid var(--border-earth, #2c241b) !important;
}

.roster-table tbody tr:nth-child(even) {
  background: rgba(16, 14, 12, 0.92) !important;
}

.roster-table tbody tr:hover {
  background: rgba(38, 31, 22, 0.92) !important;
}

/* Warm Filter & Profession Pills */
.toggle-pill,
.sec-prof-checkbox-chip,
.prof-pill,
.btn-profession,
.quality-pill,
.addon-cat-pill,
.poll-sub-tab,
.btn-role-filter,
.btn-preset {
  background: rgba(22, 19, 16, 0.92) !important;
  border-color: var(--border-bronze, #473621) !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.toggle-pill:hover,
.prof-pill:hover,
.btn-profession:hover,
.quality-pill:hover,
.addon-cat-pill:hover,
.poll-sub-tab:hover,
.btn-role-filter:hover,
.btn-preset:hover {
  background: rgba(38, 31, 22, 0.95) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

.prof-pill.active,
.btn-profession.active,
.quality-pill.active,
.addon-cat-pill.active,
.poll-sub-tab.active,
.btn-role-filter.active {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.24) 0%, rgba(224, 122, 46, 0.14) 100%) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 12px rgba(212, 164, 76, 0.22) !important;
}

/* Unified ON / OFF State System for All Toggle Pills (Role Filters, Realm/Faction Filters, Raid Size, Mobile Cards, Addon Chips) */
.toggle-pill:not(.active) {
  background: rgba(16, 14, 12, 0.88) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-dust, #8c7f6f) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
}

.toggle-pill:not(.active) .toggle-pill-icon {
  filter: grayscale(1) opacity(0.45) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.toggle-pill:not(.active):hover {
  background: rgba(38, 31, 22, 0.95) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
  opacity: 1 !important;
}

.toggle-pill:not(.active):hover .toggle-pill-icon {
  filter: grayscale(0.25) opacity(0.9) !important;
  border-color: rgba(212, 164, 76, 0.55) !important;
}

.toggle-pill.active {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.28) 0%, rgba(224, 122, 46, 0.16) 100%) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.28), inset 0 1px 0 rgba(255, 232, 163, 0.22) !important;
  opacity: 1 !important;
}

.toggle-pill.active .toggle-pill-icon {
  filter: none !important;
  opacity: 1 !important;
  border-color: var(--gold-crest, #f2c96d) !important;
}

.toggle-pill.active:hover {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.38) 0%, rgba(224, 122, 46, 0.24) 100%) !important;
  border-color: var(--gold-crest, #f2c96d) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(212, 164, 76, 0.42), inset 0 1px 0 rgba(255, 232, 163, 0.3) !important;
}

/* Polls Consensus Grid & Heatmap Cells in Barrens Gold / Savanna Ember */
.grid-header-cell,
.grid-day-cell {
  background: rgba(16, 14, 12, 0.96) !important;
  border-color: var(--border-earth, #2c241b) !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.master-slot-cell,
.paint-slot-cell {
  border-color: rgba(71, 54, 33, 0.45) !important;
}

.raider-vote-card,
.top3-day-row,
.tod-item {
  background: rgba(16, 14, 12, 0.9) !important;
  border-color: var(--border-bronze, #473621) !important;
}

/* Unified Footer in Barrens Abyss & Forged Bronze */
.guild-footer,
footer {
  background: linear-gradient(180deg, rgba(16, 14, 12, 0.96) 0%, rgba(8, 7, 6, 0.99) 100%) !important;
  border-top: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-dust, #9a8f7e) !important;
}

/* Section Indicator Dot Spacing & Inline Code Badges in Card Titles */
.section-indicator-dot {
  margin-right: 8px !important;
  background: var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 0 6px rgba(212, 164, 76, 0.5) !important;
}

.card-title code {
  margin: 0 6px !important;
  padding: 1px 6px !important;
  background: rgba(212, 164, 76, 0.14) !important;
  border: 1px solid rgba(212, 164, 76, 0.4) !important;
  color: var(--gold-crest, #f2c96d) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.86em !important;
}

/* Roster Row Actions, Size Pills & Add Roster Button in Barrens Gold */
.btn-row-action.armory,
.size-pill.active,
.role-pill.active {
  background: rgba(212, 164, 76, 0.18) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.2) !important;
}

.btn-add-roster {
  background: rgba(212, 164, 76, 0.16) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.btn-add-roster:hover {
  background: rgba(212, 164, 76, 0.28) !important;
  color: #ffffff !important;
}

/* Polls Sub-Nav, Faction Allegiance Hero, Crafting & Addons Refinements */
.poll-view-nav,
.faction-poll-header,
.faction-war-hero,
.addon-desc-box,
.addon-summary {
  background: linear-gradient(180deg, rgba(22, 19, 16, 0.96) 0%, rgba(16, 14, 12, 0.98) 100%) !important;
  border-color: var(--border-bronze, #473621) !important;
}

.poll-sub-tab-badge,
.prof-pill.active .prof-count {
  background: rgba(212, 164, 76, 0.18) !important;
  border-color: rgba(212, 164, 76, 0.45) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.craft-subtitle,
.craft-note,
.shop-subtitle {
  color: var(--text-parchment, #d6cbb8) !important;
}

/* Unlayered Button Reset for Squad Hub Pages (wagers, wheel, gaming, game-night) */
body.bg-\[\#050508\] button,
body.bg-\[\#06070b\] button,
body.bg-\[\#070709\] button,
.squad-shell-header ~ * button {
  background-color: rgba(22, 19, 16, 0.88);
  color: var(--text-ivory, #f6f4ee);
  border-style: solid;
  border-width: 0;
}

body.bg-\[\#050508\] button[class*="border"],
body.bg-\[\#06070b\] button[class*="border"],
body.bg-\[\#070709\] button[class*="border"],
.squad-shell-header ~ * button[class*="border"] {
  border-width: 1px;
}

button.text-left.group {
  background-color: transparent !important;
  border-width: 0 !important;
  padding: 0 !important;
}

.bg-slate-900,
.bg-slate-900\/80,
.bg-slate-900\/90,
.bg-slate-950,
.bg-slate-950\/80,
.bg-slate-950\/90,
.bg-\[\#0a0a0f\],
.bg-\[\#0c0d14\],
.bg-\[\#0d0f17\],
.bg-\[\#080a10\] {
  background-color: var(--bg-panel, #161310) !important;
}



/* ============================================================================
   CHAOS MEN /LOGS — XP-RACE-STYLE COMBAT LOGS & RAID TELEMETRY
   - 6-Card Top Run & Boss Telemetry Ribbon (Battle Res, Deaths, Length, Attempts)
   - Configurable 5-Man / 10-Man / 20-Man / 40-Man Top Raid Frames with All Data
   - Solid Class-Colored Horizontal Meter Bars (Mimicking XP Race Lanes)
   ============================================================================ */

.logs-xp-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logs-xp-shell > section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.logs-hero-encounter-title {
  font-family: 'LifeCraft', 'Cinzel', var(--xp-font-heading), serif;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  color: #f6f4ee;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 18px rgba(212, 164, 76, 0.45);
  line-height: 1.05;
  margin: 0;
  text-align: center;
}

.logs-status-pill,
.logs-encounter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--xp-radius);
  font-family: var(--xp-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.45);
  color: var(--xp-text-main);
}

.logs-encounter-pill.wipe {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.logs-encounter-pill.kill {
  background: rgba(12, 210, 157, 0.14);
  border-color: rgba(12, 210, 157, 0.5);
  color: #6ee7b7;
}

.xp-btn.logs-btn-wipe {
  border-color: rgba(239, 68, 68, 0.65);
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.xp-btn.logs-btn-wipe:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
   1. 6-CARD TOP RUN & ENCOUNTER TELEMETRY RIBBON (EQUAL-SIZED LARGER FRAMES)
   ---------------------------------------------------------------------------- */
.logs-kpi-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 1080px) {
  .logs-kpi-ribbon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .logs-kpi-ribbon-grid {
    grid-template-columns: 1fr;
  }
}

.logs-kpi-card {
  background: linear-gradient(180deg, rgba(24, 20, 16, 0.96) 0%, rgba(13, 11, 9, 0.98) 100%);
  border: 1px solid var(--xp-border-subtle);
  border-top: 3px solid var(--xp-border-primary);
  border-radius: var(--xp-radius);
  padding: 10px 14px;
  min-height: 108px;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.logs-kpi-card.bres-card {
  border-top-color: #ff7d0a;
}

.logs-kpi-card.deaths-card {
  border-top-color: #ef4444;
}

.logs-kpi-card.duration-card {
  border-top-color: #38b6ff;
}

.logs-kpi-card.attempts-card {
  border-top-color: #f59e0b;
}

.logs-kpi-card.dps-card {
  border-top-color: #c79c6e;
}

.logs-kpi-card.hps-card {
  border-top-color: #0cd29d;
}

.logs-kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.logs-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--xp-font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--xp-accent-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-kpi-pill {
  font-family: var(--xp-font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(212, 164, 76, 0.14);
  border: 1px solid rgba(212, 164, 76, 0.42);
  color: var(--xp-accent-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.logs-kpi-pill.ready,
.logs-kpi-pill.green {
  background: rgba(12, 210, 157, 0.16);
  border-color: rgba(12, 210, 157, 0.5);
  color: #34d399;
}

.logs-kpi-pill.danger,
.logs-kpi-pill.wipe {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.58);
  color: #fca5a5;
}

.logs-kpi-pill.gold {
  background: rgba(245, 201, 75, 0.2);
  border-color: rgba(245, 201, 75, 0.58);
  color: #fde68a;
}

.logs-kpi-main-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.logs-kpi-main-val {
  font-family: var(--xp-font-mono);
  font-size: 1.26rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-kpi-main-val small {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--xp-accent-primary);
}

.logs-kpi-side-tag {
  font-family: var(--xp-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--xp-accent-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.logs-kpi-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.logs-kpi-sub-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.logs-kpi-sub-cell + .logs-kpi-sub-cell {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 10px;
}

.logs-kpi-sub-k {
  font-family: var(--xp-font-display);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--xp-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-kpi-sub-v,
.logs-kpi-sub-row {
  font-family: var(--xp-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #e6dcc8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-kpi-sub-v strong,
.logs-kpi-sub-row strong {
  color: #ffffff;
}

/* ----------------------------------------------------------------------------
   2. SYMMETRICAL COMMAND & FILTER DECK FOR LOGS (WITH METER VIEW DROPDOWN)
   ---------------------------------------------------------------------------- */
.logs-deck-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.logs-raid-size-group,
.logs-segment-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.logs-control-label {
  font-family: var(--xp-font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--xp-accent-primary);
  text-transform: uppercase;
}

.logs-encounter-history-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.logs-pull-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--xp-radius);
  font-family: var(--xp-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(14, 12, 10, 0.85);
  border: 1px solid var(--xp-border-subtle);
  color: var(--xp-text-muted);
  cursor: pointer;
  transition: all 0.14s ease;
}

.logs-pull-chip:hover {
  border-color: var(--xp-border-primary);
  color: var(--xp-text-main);
}

.logs-pull-chip.kill {
  border-left: 3px solid #10b981;
}

.logs-pull-chip.wipe {
  border-left: 3px solid #ef4444;
  color: #fca5a5;
}

/* Tight, Proportional Single-Row Command & Filter Deck on /logs */
.logs-control-deck {
  padding: 6px 10px !important;
}

.logs-control-deck .xp-deck-row-symmetrical {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 28px !important;
}

.logs-control-deck .xp-filter-wing-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.logs-control-deck .xp-search-wrap {
  width: 235px !important;
  flex: 0 1 235px !important;
  max-width: 250px !important;
  min-width: 145px !important;
}

.logs-control-deck .xp-input {
  height: 28px !important;
  font-size: 0.7rem !important;
  padding: 0 8px 0 26px !important;
}

.logs-control-deck .xp-filter-wing-center {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.logs-control-deck .xp-class-pills {
  height: 28px !important;
  padding: 2px 3px !important;
  gap: 2px !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: auto !important;
}

.logs-control-deck .xp-class-pill {
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 0.62rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.logs-control-deck .xp-filter-wing-right {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.logs-meter-view-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.logs-control-deck .logs-control-label {
  font-family: var(--xp-font-display);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--xp-accent-primary);
  white-space: nowrap;
  margin: 0;
}

.logs-icon-select-wrap {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.logs-icon-select-wrap .logs-select-wow-icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(212, 164, 76, 0.55);
  pointer-events: none;
  z-index: 2;
}

.logs-control-deck .xp-select.has-wow-icon {
  width: auto !important;
  height: 28px !important;
  padding: 0 22px 0 26px !important;
  font-family: var(--xp-font-display);
  font-size: 0.66rem !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 26px;
}

.logs-control-deck #logsFilterRole {
  min-width: 104px;
  width: auto !important;
}

.logs-control-deck #logsRaidFrameSort {
  min-width: 168px;
  width: auto !important;
}

.logs-meter-mode-select,
.logs-raid-size-select,
.logs-segment-select {
  height: 28px;
  padding: 0 22px 0 8px;
  font-family: var(--xp-font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffffff;
  background-color: rgba(18, 15, 12, 0.96);
  border: 1px solid var(--xp-border-primary);
  box-shadow: 0 0 8px rgba(212, 164, 76, 0.18);
  cursor: pointer;
}

.logs-meter-mode-select {
  min-width: 176px;
  width: auto !important;
}

.logs-toggle-frames-btn {
  height: 28px !important;
  padding: 0 10px !important;
  font-family: var(--xp-font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.logs-raid-size-select {
  min-width: 165px;
}

.logs-segment-select {
  min-width: 220px;
}

.logs-meter-mode-select:focus,
.logs-raid-size-select:focus,
.logs-segment-select:focus {
  outline: none;
  border-color: #f5c94b;
  box-shadow: 0 0 0 1px #f5c94b, 0 0 10px rgba(245, 201, 75, 0.35);
}

.logs-mode-pill {
  height: 22px;
  padding: 0 7px;
  border-radius: 3px;
  border: 1px solid var(--xp-border-subtle);
  background: rgba(8, 10, 18, 0.72);
  color: var(--xp-text-muted);
  font-family: var(--xp-font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.logs-mode-pill:hover {
  border-color: var(--xp-border-primary);
  color: var(--xp-text-main);
}

.logs-mode-pill.active {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.28), rgba(212, 164, 76, 0.1));
  border-color: var(--xp-border-primary);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(212, 164, 76, 0.25);
}

/* ----------------------------------------------------------------------------
   3. ELLESMEREUI-INSPIRED RAID TELEMETRY FRAMES (EQUAL SIZE FOR ALL SLOTS)
   ---------------------------------------------------------------------------- */
.logs-raid-frames-panel {
  background: var(--xp-bg-panel);
  border: 1px solid var(--xp-border-primary);
  border-radius: var(--xp-radius-lg);
  padding: 9px 11px;
  box-shadow: var(--xp-shadow-panel);
}

.logs-raid-frames-panel.collapsed .logs-raid-frames-grid {
  display: none;
}

.logs-raid-frames-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 164, 76, 0.22);
}

.logs-raid-frames-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.logs-raid-frames-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--xp-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--xp-accent-primary);
  text-transform: uppercase;
}

.logs-raid-frames-subtitle {
  font-family: var(--xp-font-mono);
  font-size: 0.64rem;
  color: var(--xp-text-muted);
}

.logs-raid-frames-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.logs-rf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--xp-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(16, 14, 12, 0.9);
  border: 1px solid var(--xp-border-subtle);
  color: var(--xp-text-main);
}

.logs-rf-badge.alive {
  border-color: rgba(12, 210, 157, 0.45);
  color: #34d399;
}

.logs-rf-badge.bres {
  border-color: rgba(255, 125, 10, 0.55);
  color: #fb923c;
}

/* Raid Frame Group Grid — Equal Column & Row Sizing */
.logs-raid-frames-grid {
  display: grid;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 8px;
}

.logs-raid-frames-grid[data-group-count="1"] {
  grid-template-columns: 1fr;
}

/* 5-MAN DUNGEON PARTY FRAMES: 5 Vertical Up-and-Down Bars Across Full Width */
.logs-raid-frames-grid[data-group-count="1"] .logs-raid-group-slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 8px;
  padding: 8px;
}

.logs-raid-frames-grid[data-group-count="1"] .logs-raid-slot {
  height: 184px;
  min-height: 184px;
  max-height: 184px;
  grid-template-rows: 1fr 3px 42px;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-rf-body {
  height: 100%;
  align-items: stretch;
}

/* Vertical Up-and-Down Health Fill (Bottom to Top) for 5-Man Party Frames */
.logs-raid-frames-grid[data-group-count="1"] .ellesmere-rf-health-fill {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--slot-hp-pct, 100%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--slot-class-color, #c79c6e) 84%, #ffffff 16%) 0%,
    color-mix(in srgb, var(--slot-class-color, #c79c6e) 68%, #000000 32%) 100%
  );
  border-right: none;
  border-top: 1px solid rgba(255, 255, 255, 0.65);
}

.logs-raid-frames-grid[data-group-count="1"] .logs-raid-slot.is-dead .ellesmere-rf-health-fill {
  height: 0%;
  border-top: none;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-rf-top-row {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  padding: 8px 8px 7px;
  gap: 6px;
}

.logs-raid-frames-grid[data-group-count="1"] .logs-slot-id {
  align-items: center;
  gap: 6px;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-unit-name {
  font-size: 0.86rem;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-unit-spec {
  font-size: 0.6rem;
}

.logs-raid-frames-grid[data-group-count="1"] .logs-slot-badges {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-rf-power-bar {
  height: 3px;
}

.logs-raid-frames-grid[data-group-count="1"] .ellesmere-rf-telemetry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  height: 42px;
  font-size: 0.6rem;
}

.logs-raid-frames-grid[data-group-count="1"] .logs-slot-metric {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.logs-raid-frames-grid[data-group-count="1"] .logs-slot-metric:nth-child(2n) {
  border-right: none;
}

.logs-raid-frames-grid[data-group-count="1"] .logs-slot-metric:nth-child(n+3) {
  border-bottom: none;
}

@media (max-width: 900px) {
  .logs-raid-frames-grid[data-group-count="1"] .logs-raid-group-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .logs-raid-frames-grid[data-group-count="1"] .logs-raid-group-slots {
    grid-template-columns: 1fr;
  }
}

.logs-raid-frames-grid[data-group-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logs-raid-frames-grid[data-group-count="4"],
.logs-raid-frames-grid[data-group-count="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .logs-raid-frames-grid[data-group-count="4"],
  .logs-raid-frames-grid[data-group-count="8"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .logs-raid-frames-grid[data-group-count="1"],
  .logs-raid-frames-grid[data-group-count="2"],
  .logs-raid-frames-grid[data-group-count="4"],
  .logs-raid-frames-grid[data-group-count="8"] {
    grid-template-columns: 1fr;
  }
}

.logs-raid-group-box {
  background: #080706;
  border: 1px solid rgba(212, 164, 76, 0.32);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.logs-raid-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 8px;
  background: linear-gradient(90deg, rgba(212, 164, 76, 0.2), rgba(18, 15, 12, 0.98));
  border-bottom: 1px solid rgba(212, 164, 76, 0.3);
  font-family: var(--xp-font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--xp-accent-primary);
  text-transform: uppercase;
  flex-shrink: 0;
}

.logs-raid-group-slots {
  display: grid;
  grid-template-rows: repeat(5, 68px);
  gap: 3px;
  padding: 4px;
  background: #060504;
}

/* ELLESMEREUI UNIT FRAME CELL — STRICT 68PX FIXED EQUAL HEIGHT */
.logs-raid-slot {
  position: relative;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 44px 2px 20px;
  border-radius: 2px;
  background: #0c0a09;
  border: 1px solid #040405;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.logs-raid-slot:hover {
  border-color: var(--slot-class-color, #d4a44c);
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 12px rgba(212, 164, 76, 0.35);
  z-index: 2;
}

.logs-raid-slot.selected {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 16px rgba(245, 201, 75, 0.6);
  z-index: 3;
}

/* Upper 44px Health / Solid Class-Colored Body */
.ellesmere-rf-body {
  position: relative;
  width: 100%;
  height: 44px;
  background: #141110;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Solid Class-Colored Health Texture Fill (EllesmereUI Style) */
.ellesmere-rf-health-fill {
  position: absolute;
  inset: 0;
  width: var(--slot-hp-pct, 100%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--slot-class-color, #c79c6e) 82%, #ffffff 18%) 0%,
    color-mix(in srgb, var(--slot-class-color, #c79c6e) 66%, #000000 34%) 100%
  );
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 0;
}

.logs-raid-slot.is-dead {
  border-color: rgba(239, 68, 68, 0.7);
}

.logs-raid-slot.is-dead .ellesmere-rf-body {
  background: repeating-linear-gradient(
    -45deg,
    rgba(48, 12, 14, 0.95),
    rgba(48, 12, 14, 0.95) 6px,
    rgba(22, 8, 9, 0.96) 6px,
    rgba(22, 8, 9, 0.96) 12px
  );
}

.logs-raid-slot.is-dead .ellesmere-rf-health-fill {
  width: 0%;
  border-right: none;
}

.ellesmere-rf-top-row {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.logs-slot-id {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* Top-Left EllesmereUI Role Badge & Class Icon Pin */
.ellesmere-role-pin {
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background: rgba(6, 6, 8, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  line-height: 1;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.ellesmere-role-pin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ellesmere-role-pin[data-role="TANK"] {
  border-color: #60a5fa;
  color: #93c5fd;
}

.ellesmere-role-pin[data-role="HEALER"] {
  border-color: #34d399;
  color: #6ee7b7;
}

.ellesmere-role-pin[data-role="DPS"] {
  border-color: #f87171;
  color: #fca5a5;
}

.ellesmere-class-pin {
  width: 17px;
  height: 17px;
  border-radius: 2px;
  border: 1px solid #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  flex-shrink: 0;
}

.ellesmere-unit-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

/* Crisp White Outlined Unit Name (Readable Over Every Class Color) */
.ellesmere-unit-name,
.logs-slot-name {
  font-family: var(--xp-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
     0px  1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellesmere-unit-spec {
  font-family: var(--xp-font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-slot-badges {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.logs-slot-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--xp-font-mono);
  font-size: 0.52rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.25;
  text-shadow: 0 1px 1px #000000;
}

.logs-slot-tag.alive {
  background: rgba(6, 12, 10, 0.82);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.65);
}

.logs-slot-tag.dead {
  background: rgba(127, 29, 29, 0.92);
  color: #fecaca;
  border: 1px solid #ef4444;
}

.logs-slot-tag.bres-ready {
  background: rgba(6, 46, 34, 0.92);
  color: #34d399;
  border: 1px solid #10b981;
}

.logs-slot-tag.bres-used {
  background: rgba(15, 23, 42, 0.88);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.45);
}

/* EllesmereUI Top-Right Corner Buff / Cooldown Icon Square */
.ellesmere-corner-aura {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: #050507;
  border: 1px solid #000000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ellesmere-corner-aura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ellesmere-corner-aura.aura-bres-ready {
  box-shadow: 0 0 0 1px #10b981, 0 0 6px rgba(16, 185, 129, 0.8);
}

.ellesmere-corner-aura.aura-bres-cd {
  opacity: 0.45;
  filter: grayscale(0.85);
}

.ellesmere-corner-aura.aura-ss {
  box-shadow: 0 0 0 1px #a855f7, 0 0 6px rgba(168, 85, 247, 0.7);
}

/* Middle 2px Resource Power Bar (Mana / Rage / Energy) */
.ellesmere-rf-power-bar {
  width: 100%;
  height: 2px;
  background: var(--slot-power-color, #3b82f6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Lower 20px Dark Obsidian 4-Cell Telemetry Strip */
.ellesmere-rf-telemetry {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr 0.72fr;
  align-items: center;
  height: 20px;
  background: #080706;
  border-top: 1px solid #000000;
  font-family: var(--xp-font-mono);
  font-size: 0.56rem;
  color: #cfc4b0;
}

.logs-slot-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-slot-metric + .logs-slot-metric {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.logs-slot-metric strong {
  color: #ffffff;
  font-weight: 800;
}

.logs-slot-metric.dps strong {
  color: #fde68a;
}

.logs-slot-metric.hps strong {
  color: #6ee7b7;
}

.logs-slot-metric.dtps strong {
  color: #fca5a5;
}

.logs-slot-metric.kicks strong {
  color: #7dd3fc;
}

.logs-raid-slot.empty-slot {
  opacity: 0.42;
  cursor: default;
}

.logs-raid-slot.empty-slot .ellesmere-rf-health-fill {
  display: none;
}

/* ----------------------------------------------------------------------------
   4. XP-RACE-STYLE SOLID CLASS-COLORED METER BARS
      Replaces segmented levels with a solid, ultra-clear class-colored bar
      that makes each person doing damage/healing immediately pop out.
   ---------------------------------------------------------------------------- */
.logs-derby-board {
  padding: 6px 8px;
}

.logs-derby-ruler-row {
  grid-template-columns: 238px minmax(0, 1fr) 210px;
}

.logs-meter-lane-card {
  border-left: 4px solid var(--player-class-color, #d4a44c);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.logs-meter-lane-card.selected-player {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px #ffffff, 0 4px 16px rgba(212, 164, 76, 0.32);
}

.logs-meter-lane-row {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 210px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  cursor: pointer;
}

/* Solid Class-Colored Bar Track (Inside Center Column of XP-Race Lane) */
.logs-solid-bar-track {
  position: relative;
  height: 26px;
  background: #090807;
  border: 1px solid rgba(212, 164, 76, 0.28);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85);
}

/* Subtle 25% / 50% / 75% Reference Grid Lines Behind Solid Bar */
.logs-solid-bar-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    transparent 24.8%,
    rgba(255, 255, 255, 0.07) 25%,
    transparent 25.2%,
    transparent 49.8%,
    rgba(255, 255, 255, 0.09) 50%,
    transparent 50.2%,
    transparent 74.8%,
    rgba(255, 255, 255, 0.07) 75%,
    transparent 75.2%
  );
  pointer-events: none;
  z-index: 1;
}

/* THE SOLID CLASS-COLORED FILL BAR */
.logs-solid-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--bar-pct, 0%);
  background: var(--player-class-color, #c79c6e);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(0, 0, 0, 0.22) 100%
  );
  border-right: 2px solid #ffffff;
  box-shadow: 0 0 12px color-mix(in srgb, var(--player-class-color, #d4a44c) 55%, transparent);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

/* High-Contrast Overlay Inside the Solid Class Bar */
.logs-solid-bar-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  gap: 8px;
  pointer-events: none;
}

.logs-bar-spell-callout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--xp-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 1px 2px #000000,
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 2px #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logs-bar-inline-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--xp-font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 1px 2px #000000,
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 2px #000000;
  white-space: nowrap;
}

/* Right Telemetry Readout Column on Each Meter Lane */
.logs-lane-telemetry-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--xp-font-mono);
  white-space: nowrap;
}

.logs-val-total {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--xp-text-main);
}

.logs-val-per-sec {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(212, 164, 76, 0.16);
  border: 1px solid rgba(212, 164, 76, 0.4);
  color: var(--xp-accent-primary);
}

.logs-val-pct {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--xp-text-muted);
  min-width: 38px;
  text-align: right;
}

/* Expandable Ability Breakdown Drawer Under Any Player Bar */
.logs-spell-breakdown-drawer {
  display: none;
  padding: 6px 10px 8px;
  background: rgba(8, 7, 6, 0.95);
  border-top: 1px solid rgba(212, 164, 76, 0.25);
}

.logs-meter-lane-card.expanded .logs-spell-breakdown-drawer {
  display: block;
}

.logs-spell-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px;
}

.logs-spell-pill-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(22, 19, 16, 0.92);
  border: 1px solid var(--xp-border-subtle);
  border-left: 3px solid var(--player-class-color, #d4a44c);
  font-family: var(--xp-font-mono);
  font-size: 0.66rem;
}

/* Side-by-Side Split View (DPS + HPS + Mechanics) */
.logs-split-meters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 1200px) {
  .logs-split-meters-grid {
    grid-template-columns: 1fr;
  }
}

.logs-split-col {
  background: rgba(12, 10, 8, 0.9);
  border: 1px solid var(--xp-border-subtle);
  border-radius: var(--xp-radius);
  padding: 6px;
}

.logs-split-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 6px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(212, 164, 76, 0.25);
  font-family: var(--xp-font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--xp-accent-primary);
}

/* Responsive Meter Row Adjustments */
@media (max-width: 900px) {
  .logs-derby-ruler-row,
  .logs-meter-lane-row {
    grid-template-columns: 170px minmax(0, 1fr) 145px;
  }
}

@media (max-width: 640px) {
  .logs-derby-ruler-row {
    display: none;
  }
  .logs-meter-lane-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .logs-lane-telemetry-right {
    justify-content: space-between;
  }
}

/* ----------------------------------------------------------------------------
   5. BOTTOM DIAGNOSTICS GRID (DEATH RECAP + BATTLE RES + PC UPLINK)
   ---------------------------------------------------------------------------- */
.logs-bottom-diagnostics-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 8px;
}

@media (max-width: 960px) {
  .logs-bottom-diagnostics-grid {
    grid-template-columns: 1fr;
  }
}

.logs-diag-card {
  background: var(--xp-bg-panel);
  border: 1px solid var(--xp-border-subtle);
  border-radius: var(--xp-radius-lg);
  padding: 8px 10px;
}

.logs-diag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 164, 76, 0.2);
}

.logs-bres-cast-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  margin: 0 5px 4px 0;
  border-radius: 3px;
  background: rgba(255, 125, 10, 0.14);
  border: 1px solid rgba(255, 125, 10, 0.45);
  font-family: var(--xp-font-mono);
  font-size: 0.64rem;
  color: #fed7aa;
}

.logs-death-card {
  background: rgba(24, 12, 12, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-left: 3px solid #ef4444;
  border-radius: var(--xp-radius);
  padding: 6px 8px;
}

.logs-raw-textarea {
  width: 100%;
  min-height: 64px;
  font-family: var(--xp-font-mono);
  font-size: 0.7rem;
  padding: 6px 8px;
  resize: vertical;
}

/* ==========================================================================
   20. ULTRA-COMPACT 50% THINNER SECTION HEADERS, SQUARE PILLS & ALIGNMENT
   ========================================================================== */
.card-header.has-sec-icon {
  padding: 0 8px 0 0 !important;
  min-height: 24px !important;
  align-items: center !important;
}

.card-header.has-sec-icon .sec-head-title-wrap {
  min-height: 24px !important;
  gap: 8px !important;
  align-items: center !important;
  display: inline-flex !important;
}

.card-header.has-sec-icon .sec-head-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0 !important;
}

/* Fix .planner-title-btn padding so it doesn't inflate .planner-header to 28px */
.planner-title-btn,
.card-header.has-sec-icon .planner-title-btn {
  padding: 0 !important;
  min-height: 24px !important;
  gap: 8px !important;
  align-items: center !important;
}

.planner-title-btn .btn-chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 8px !important;
  height: 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: var(--gold-barrens, #d4a44c) !important;
  flex-shrink: 0 !important;
}

/* Enlist Header Single-Line Symmetry matching Character Breakdown & Roster */
.enlist-card-header .enlist-main-title {
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.enlist-card-header .enlist-main-subtitle {
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--text-parchment, #d6cbb8) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enlist-card-header .btn-close-enlist {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

@media (max-width: 960px) {
  .enlist-card-header .enlist-main-subtitle {
    display: none !important;
  }
}

.card-header.roster-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
}

.roster-header-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.card-header.roster-header .btn-toggle-enlist {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  gap: 5px !important;
  border-radius: 0 !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  border-left: 3px solid var(--neon-green, #22c55e) !important;
  color: #4ade80 !important;
}

.card-header.roster-header .btn-toggle-enlist:hover,
.card-header.roster-header .btn-toggle-enlist.is-open {
  background: rgba(212, 164, 76, 0.22) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.card-header.roster-header .enlist-toggle-symbol {
  font-size: 13px !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  .card-header.roster-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 4px 10px 4px 0 !important;
  }
}

/* Square Pills across Roster Filters, Raid Size Pills, Raider Status, and Actions */
.toggle-pill,
.toggle-pill-icon,
.btn-add-roster,
.btn-reset-session,
.raid-status-pill,
.sec-prof-checkbox-chip,
.chip-trade-img,
.btn-toggle-enlist,
.btn-row-action,
.social-icon-btn,
.top-auth-strip .square-quick-link,
.top-auth-btn {
  border-radius: 0 !important;
}

.toggle-pill,
.btn-add-roster,
.btn-reset-session {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

.toggle-pill--icon {
  padding-left: 4px !important;
}

.toggle-pill-icon {
  width: 14px !important;
  height: 14px !important;
}

/* Centered Edit Column Header & Row Actions */
.roster-table th.col-actions,
.roster-table td.col-actions {
  text-align: center !important;
}

.roster-table td.col-actions .row-actions {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

/* Top Auth Strip Alignment Flush with .page-container (1440px max-width, 24px side padding) */
.top-auth-strip {
  padding: 4px 0 !important;
}

.top-auth-container {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.top-auth-right,
.top-quick-links,
.top-auth-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.top-auth-strip .square-quick-link,
.top-auth-btn.chaos-signin-btn {
  height: 22px !important;
  min-height: 22px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   21. POLLS BANNER KERNING, SEAMLESS 0PX SITE NAV TABS & SHOPPING CART OVERHAUL
   ========================================================================== */

/* 1. POLLS Banner Kerning Fix (prevents touching LL in LifeCraft display font) */
.hero-guild-title .kerning-l {
  display: inline-block;
  margin-right: 0.26em !important;
}

.hero-guild-title .kerning-l-second {
  display: inline-block;
  margin-right: 0.18em !important;
}

/* 2. Seamless Zero-Gap (0px) Spacing Above & Below Site Section Tabs (.guild-nav-bar) */
.page-container > header.hero-card,
.xp-shell > .page-container > header.hero-card,
.logs-shell > .page-container > header.hero-card,
.hero-card {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.guild-nav-bar {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
  border-left: 1px solid var(--border-bronze, #473621) !important;
  border-right: 1px solid var(--border-bronze, #473621) !important;
}

/* Inside .xp-shell / .logs-xp-shell, the parent flex gap (8px) handles spacing below .page-container */
.xp-shell > .page-container > .guild-nav-bar,
.logs-xp-shell > .page-container > .guild-nav-bar {
  margin-bottom: 0 !important;
}

.guild-nav-bar .nav-tab {
  margin: 0 !important;
}

/* Consistent 8px vertical distance between .guild-nav-bar and the section immediately below it */
.guild-nav-bar + *,
.guild-nav-bar + script + *,
.page-container > .guild-nav-bar + section,
.page-container > .guild-nav-bar + div,
.page-container > .guild-nav-bar + script + section,
.page-container > .guild-nav-bar + script + div,
.xp-shell > .page-container + .xp-carnival-marquee-header,
.logs-shell > .page-container + .xp-carnival-marquee-header,
.xp-carnival-marquee-header,
.poll-view-nav,
.craft-hero-section,
.shop-hero-section,
.intel-card,
.addons-toolbar-card {
  margin-top: 0 !important;
}

/* 3. Shopping Cart Full-Width & Summary Below Header */
.shop-hero-section .cart-dashboard-card,
.cart-dashboard-card {
  width: 100% !important;
  margin: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 12px 16px 16px !important;
  box-sizing: border-box !important;
}

.cart-dashboard-header {
  padding: 6px 0 8px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Summary Strip Below Header (Not Centered Inline) with Obvious Counts */
.cart-dashboard-summary-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 6px 0;
  border-bottom: 1px solid rgba(212, 164, 76, 0.18);
}

.cart-dashboard-summary-strip .cart-dashboard-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.cart-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(16, 14, 12, 0.92);
  border: 1px solid var(--border-bronze, #473621);
  border-left: 3px solid var(--gold-barrens, #d4a44c);
  border-radius: 0 !important;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-parchment, #d6cbb8);
}

.cart-summary-pill strong {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 900;
  color: var(--gold-crest, #f2c96d);
}

.cart-summary-pill.gold {
  border-left-color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
}

.cart-summary-pill.needed {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.cart-summary-pill.needed strong {
  color: #4ade80;
}

/* Full-Size Split Grid & Columns Filling Entire Section */
.cart-dashboard-body {
  width: 100%;
}

.cart-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px !important;
  margin-top: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

@media (max-width: 960px) {
  .cart-split-grid {
    grid-template-columns: 1fr !important;
  }
}

.cart-column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 320px;
  padding: 8px 10px !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  background: rgba(10, 9, 8, 0.86) !important;
  box-sizing: border-box !important;
}

/* 50% Reduced Header Vertical Space on Selected Craft Items & Required Materials */
.cart-col-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 2px 4px 4px 4px !important;
  margin-bottom: 6px !important;
  min-height: 22px !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
}

.mat-header-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.cart-col-icon {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-bronze, #473621);
  border-radius: 0 !important;
  flex-shrink: 0;
}

.cart-col-title {
  font-size: 12.5px !important;
  line-height: 1.1 !important;
}

.cart-col-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1px 7px;
  height: 18px;
  background: rgba(212, 164, 76, 0.16);
  border: 1px solid rgba(212, 164, 76, 0.45);
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-crest, #f2c96d);
}

.cart-col-count-badge.gold {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fde68a;
}

/* Square Pill Buttons for "Reset Checks" & "Clear All" */
.btn-square-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 0 !important;
  background: rgba(31, 26, 21, 0.95);
  border: 1px solid var(--gold-barrens, #d4a44c);
  color: var(--gold-crest, #f2c96d);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}

.btn-square-pill:hover {
  background: rgba(212, 164, 76, 0.24);
  border-color: #ffd700;
  color: #ffffff;
}

.btn-square-pill.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

.btn-square-pill.danger:hover {
  background: rgba(239, 68, 68, 0.26);
  border-color: #ef4444;
  color: #ffffff;
}

/* Scroll Lists Expand to Fill Full Column Height */
.cart-items-scroll-list,
.cart-materials-scroll-list {
  flex: 1 1 auto !important;
  min-height: 220px;
  max-height: 500px !important;
  width: 100%;
}

/* WoW Icons in Required Materials & Reagent Chips */
.mat-item-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mat-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 0 !important;
  border: 1px solid var(--border-bronze, #473621);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.reagent-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}

.chip-reagent-icon {
  width: 14px;
  height: 14px;
  border-radius: 0 !important;
  border: 1px solid rgba(212, 164, 76, 0.35);
  object-fit: cover;
  flex-shrink: 0;
}

/* 4. Bottom Export Bar Action Buttons Matching Screenshot (.btn-gold-auctionator & .btn-secondary) */
.cart-export-bar {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border-bronze, #473621) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.cart-export-actions-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-export-actions-group .btn-gold-auctionator,
.cart-export-actions-group .btn-secondary {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

/* ==========================================================================
   27. HORDE PVE VICTORY RIBBON, NOV 4 LAUNCH NIGHT BATTLE PLAN ARENA &
       UNIFIED POLLS TYPOGRAPHY + SQUARE PILLS (MATCHING ALL OTHER PAGES)
   ========================================================================== */

/* Enforce 100% Square Pills, Buttons, Badges & Icons across /polls */
.poll-view-nav,
.poll-sub-tab,
.sub-tab-pill,
.tactical-pill,
.faction-war-vs-pill,
.faction-status-pill,
.faction-panel,
.launch-wave-panel,
.faction-metrics-card,
.faction-progress-track,
.faction-progress-fill,
.btn-faction-pledge,
.btn-faction-pledge .pledge-icon,
.allegiance-indicator,
.faction-roster-box,
.faction-voter-card,
.faction-voter-avatar,
.faction-friend-badge,
.wow-inline-icon,
.wow-mini-crest,
.wow-sub-tab-icon,
.wow-header-icon,
.wow-role-icon,
.wow-action-icon,
.btn-role-filter,
.tz-pill,
.cycle-pill,
.btn-preset,
.summary-pill,
.legend-chip,
.badge-status,
.header-tag,
.consensus-raw-slot-chip,
.raider-vote-card,
.raider-card-avatar,
.raider-role-pill,
.btn-edit-ballot-link,
.btn-submit-raid-vote,
.btn-switch-metrics,
.btn-retract-raid-vote {
  border-radius: 0 !important;
}

/* Unified WoW Inline Icons (Replaces Emojis) */
.wow-inline-icon,
.wow-mini-crest {
  width: 15px !important;
  height: 15px !important;
  object-fit: cover;
  border: 1px solid var(--border-bronze, #473621);
  vertical-align: -3px;
  flex-shrink: 0;
  display: inline-block;
}

/* Unified Typography across /polls matching Roster, Crafting, Shopping, XP & Logs */
.poll-sub-tab .sub-tab-title,
.card-title,
.horde-pve-locked-title,
.faction-war-main-title,
.faction-city-title,
.faction-pct-display,
.target-val {
  font-family: 'Cinzel', 'Friz Quadrata', Georgia, serif !important;
}

.sub-tab-pill,
.tactical-pill,
.faction-war-vs-pill,
.faction-status-pill,
.faction-banner-callout,
.faction-voter-tally,
.faction-roster-head,
.target-lbl,
.target-sub,
.header-tag,
.legend-chip,
.tz-pill,
.cycle-pill,
.summary-pill,
.consensus-raw-pct,
.consensus-raw-slot-chip {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-variant-numeric: tabular-nums;
}

.btn-faction-pledge,
.btn-role-filter,
.btn-preset,
.btn-edit-ballot-link,
.btn-submit-raid-vote,
.btn-switch-metrics,
.btn-retract-raid-vote {
  font-family: 'Cinzel', 'Friz Quadrata', Georgia, serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* Sub-Nav Bar Flush with .guild-nav-bar */
.poll-view-nav {
  background: var(--bg-basalt, #100e0c) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: none !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}

.poll-view-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

@media (max-width: 900px) {
  .poll-view-tabs {
    grid-template-columns: 1fr !important;
  }
}

.poll-sub-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: var(--bg-panel, #161310) !important;
  border: 1px solid var(--border-earth, #2c241b) !important;
  color: var(--text-parchment, #d6cbb8) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.poll-sub-tab:hover {
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: #ffffff !important;
}

.poll-sub-tab.active {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.24) 0%, rgba(224, 122, 46, 0.14) 100%) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 12px rgba(212, 164, 76, 0.22) !important;
}

.sub-tab-pill {
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  background: rgba(8, 7, 6, 0.9) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

/* ==========================================================================
   LOCKED HORDE PvE VICTORY CARD (FOLLOWS .card DESIGN FROM ALL OTHER PAGES)
   ========================================================================== */
.faction-war-container.launch-plan-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.horde-pve-locked-banner {
  background: linear-gradient(180deg, rgba(24, 14, 12, 0.98) 0%, rgba(14, 10, 9, 0.99) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid #dc2626 !important;
  box-shadow: var(--shadow-card) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.horde-locked-card-header {
  padding: 6px 14px !important;
  background: rgba(16, 12, 10, 0.96) !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.horde-pve-locked-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.horde-pve-locked-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  flex-wrap: wrap;
}

.horde-pve-locked-left,
.horde-locked-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 280px;
}

/* Strictly bounded 56x56 Horde Emblem Badge (Never expands to full page) */
.horde-pve-crest-badge,
.horde-locked-crest-wrap {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  background: #0b0505;
  border: 1.5px solid var(--gold-barrens, #d4a44c);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  flex-shrink: 0;
  overflow: hidden;
}

.horde-pve-crest-img,
.horde-locked-crest {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain;
  display: block;
}

.horde-pve-locked-copy,
.horde-locked-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.horde-pve-locked-title,
.horde-locked-headline {
  margin: 0;
  font-size: clamp(16px, 1.85vw, 21px);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--text-ivory, #f6f4ee);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(220, 38, 38, 0.35);
}

.horde-pve-locked-sub,
.horde-locked-desc {
  margin: 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  color: var(--text-parchment, #d6cbb8);
  line-height: 1.45;
}

.horde-pve-locked-sub strong,
.horde-locked-desc b {
  color: var(--gold-crest, #f2c96d);
}

.horde-pve-locked-right,
.horde-locked-right {
  flex-shrink: 0;
}

.horde-launch-target-card {
  background: rgba(8, 7, 6, 0.94);
  border: 1px solid var(--border-bronze, #473621);
  border-left: 3px solid var(--gold-barrens, #d4a44c);
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
}

.target-lbl,
.horde-launch-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold-crest, #f2c96d);
  text-transform: uppercase;
}

.target-val,
.horde-launch-val {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.target-sub,
.horde-launch-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: #fca5a5;
}

/* ==========================================================================
   LAUNCH NIGHT BATTLE PLAN COMMAND MARQUEE
   ========================================================================== */
.launch-plan-top-banner {
  background:
    linear-gradient(90deg, rgba(212, 164, 76, 0.12), rgba(220, 38, 38, 0.08), rgba(212, 164, 76, 0.12)),
    var(--bg-basalt, #100e0c) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
  padding: 12px 18px !important;
  margin-bottom: 0 !important;
  text-align: center;
}

.launch-plan-top-banner .faction-war-badge-row {
  gap: 8px;
  margin-bottom: 8px;
}

.tactical-pill,
.faction-war-vs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(16, 14, 12, 0.92);
  border: 1px solid var(--border-bronze, #473621);
  color: var(--text-ivory, #f6f4ee);
}

.tactical-pill.red {
  border-left: 3px solid #ef4444;
  color: #fca5a5;
}

.tactical-pill.gold,
.faction-war-vs-pill {
  border-left: 3px solid var(--gold-barrens, #d4a44c);
  color: var(--gold-crest, #f2c96d);
}

.tactical-pill.green {
  border-left: 3px solid #22c55e;
  color: #86efac;
}

.launch-plan-top-banner .faction-war-main-title {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--gold-crest, #f2c96d);
  margin: 0 0 4px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.launch-plan-top-banner .faction-war-subtitle {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12.5px;
  color: var(--text-parchment, #d6cbb8);
  max-width: 780px;
  margin: 0 auto;
}

/* ==========================================================================
   3-COLUMN LAUNCH WAVE ARENA WITH FULL 16:9 UNOBSTRUCTED MEDIA STAGE
   ========================================================================== */
.launch-plan-arena {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-height: auto !important;
  align-items: stretch;
}

@media (max-width: 1120px) {
  .launch-plan-arena {
    grid-template-columns: 1fr !important;
  }
  .horde-launch-target-card {
    align-items: flex-start;
    width: 100%;
  }
}

.launch-wave-panel {
  flex: none !important;
  min-height: 0 !important;
  background: var(--bg-basalt, #100e0c) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
  box-shadow: var(--shadow-card) !important;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.launch-wave-panel.wave-midnight {
  border-top-color: #ef4444 !important;
}

.launch-wave-panel.wave-morning {
  border-top-color: #f59e0b !important;
}

.launch-wave-panel.wave-primetime {
  border-top-color: #22c55e !important;
}

.launch-wave-panel:hover,
.launch-wave-panel.is-winning {
  border-color: var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85), 0 0 18px rgba(212, 164, 76, 0.22) !important;
}

.launch-wave-card-header {
  padding: 6px 10px !important;
  min-height: 36px !important;
  background: var(--bg-panel, #161310) !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.launch-wave-card-header .section-title-wrap {
  min-width: 0;
  overflow: hidden;
}

.launch-wave-card-header .card-title {
  font-size: 11px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dedicated 16:9 Media Stage: 100% of the image/video and its title text is readable! */
.launch-wave-media-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050403;
  border-bottom: 1.5px solid var(--border-bronze, #473621);
  overflow: hidden;
  flex-shrink: 0;
}

.launch-wave-media-stage .launch-wave-video {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  border: none !important;
  transform: none !important;
  filter: none !important;
  background: #050403;
}

/* Structured Card Content Below the 16:9 Media Stage */
.launch-wave-panel .faction-content-wrap {
  padding: 12px 14px 14px !important;
  gap: 10px !important;
  background: var(--bg-basalt, #100e0c);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.launch-wave-panel .faction-names-block {
  text-align: left;
  border-bottom: 1px solid var(--border-earth, #2c241b);
  padding-bottom: 8px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.faction-banner-callout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.faction-banner-callout.horde { color: #fca5a5; }
.faction-banner-callout.morning { color: var(--gold-crest, #f2c96d); }
.faction-banner-callout.primetime { color: #86efac; }

.launch-wave-panel .faction-city-title {
  font-size: 18px !important;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--text-ivory, #f6f4ee);
  margin: 0;
}

.launch-wave-panel .faction-territory-text {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-barrens, #d4a44c);
  margin-top: 2px;
  text-transform: none;
}

.launch-wave-panel .faction-creed-quote {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-style: normal;
  font-size: 12px;
  color: var(--text-parchment, #d6cbb8);
  margin-top: 5px;
  line-height: 1.4;
}

/* Status Pill Variants (Square Pills in Card Header) */
.faction-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-bronze, #473621);
}

.faction-status-pill.horde {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.faction-status-pill.morning {
  background: rgba(212, 164, 76, 0.16);
  border-color: rgba(212, 164, 76, 0.55);
  color: var(--gold-crest, #f2c96d);
}

.faction-status-pill.primetime {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}

/* Telemetry Metrics Card inside each Wave */
.launch-wave-panel .faction-metrics-card {
  background: var(--bg-panel, #161310);
  border: 1px solid var(--border-bronze, #473621);
  padding: 8px 12px;
  text-align: left;
}

.faction-metrics-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.launch-wave-panel .faction-pct-display {
  font-size: 26px !important;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.faction-pct-display.horde {
  color: #f87171;
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
}

.faction-pct-display.morning {
  color: var(--gold-crest, #f2c96d);
  text-shadow: 0 0 14px rgba(212, 164, 76, 0.45);
}

.faction-pct-display.primetime {
  color: #4ade80;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
}

.launch-wave-panel .faction-voter-tally {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-parchment, #d6cbb8);
}

.launch-wave-panel .faction-progress-track {
  height: 8px;
  background: #080706;
  border: 1px solid var(--border-earth, #2c241b);
  margin-bottom: 0;
}

.faction-progress-fill.horde {
  background: linear-gradient(90deg, #991b1b 0%, #ef4444 100%);
}

.faction-progress-fill.morning {
  background: linear-gradient(90deg, #b45309 0%, #d4a44c 65%, #f2c96d 100%);
}

.faction-progress-fill.primetime {
  background: linear-gradient(90deg, #166534 0%, #22c55e 100%);
}

/* Square Pledge Action Buttons */
.launch-wave-panel .btn-faction-pledge {
  height: 36px;
  padding: 0 12px;
  font-size: 11.5px;
  border: 1px solid var(--border-bronze, #473621);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.btn-faction-pledge.horde {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.85) 0%, rgba(127, 29, 29, 0.95) 100%);
  border-color: #ef4444;
}

.btn-faction-pledge.morning {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.28) 0%, rgba(146, 64, 14, 0.45) 100%);
  border-color: var(--gold-barrens, #d4a44c);
  color: var(--gold-crest, #f2c96d);
}

.btn-faction-pledge.morning:hover {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.42) 0%, rgba(180, 83, 9, 0.65) 100%);
  color: #ffffff;
}

.btn-faction-pledge.primetime {
  background: linear-gradient(180deg, rgba(22, 101, 52, 0.75) 0%, rgba(20, 83, 45, 0.92) 100%);
  border-color: #22c55e;
  color: #dcfce7;
}

.btn-faction-pledge.primetime:hover {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.85) 0%, rgba(22, 101, 52, 0.95) 100%);
  color: #ffffff;
}

.allegiance-indicator {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
}

.allegiance-indicator.morning {
  background: rgba(212, 164, 76, 0.18);
  color: var(--gold-crest, #f2c96d);
  border: 1px solid rgba(212, 164, 76, 0.55);
}

.allegiance-indicator.primetime {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.5);
}

/*RosterBox inside each Launch Wave Card */
.launch-wave-panel .faction-roster-box {
  background: rgba(8, 7, 6, 0.88);
  border: 1px solid var(--border-bronze, #473621);
  padding: 8px 10px;
  min-height: 150px;
}

.launch-wave-panel .faction-roster-head {
  font-size: 11px;
  font-weight: 800;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-earth, #2c241b);
  display: flex;
  align-items: center;
  gap: 6px;
}

.faction-roster-head.horde { color: #fca5a5; }
.faction-roster-head.morning { color: var(--gold-crest, #f2c96d); }
.faction-roster-head.primetime { color: #86efac; }

/* ==========================================================================
   28. GLOBAL HEADER VERTICAL CENTERING & EQUIDISTANT SYMMETRY OVERHAUL
   Ensures all headers, icons, indicator dots, Cinzel titles, and action pills
   are optically & geometrically centered with equal spacing on all sides.
   ========================================================================== */

/* 1. Optical & Geometric Vertical Centering for Display Titles & Indicator Dots */
.card-title,
.enlist-main-title,
.cart-dashboard-title,
.cart-col-title,
.xp-marquee-title,
.xp-section-title,
.logs-raid-frames-title,
.addons-section-title {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.card-title > .section-indicator-dot,
.section-title-wrap > .section-indicator-dot,
.sec-head-title-wrap .section-indicator-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Ensure indicator dot or icon inside .card-title has zero vertical offset */
.card-title > .section-indicator-dot,
.card-title > .card-title-icon {
  transform: none !important;
}

/* 2. Unified Equidistant Card Headers Across Subpages (/polls, /crafting, /shopping-list, /addons) */
.card-header:not(.has-sec-icon):not(.heatmap-header-stacked) {
  padding: 4px 8px !important;
  min-height: 30px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.card-header .section-title-wrap,
.cart-dashboard-title-wrap,
.mat-header-left {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-height: 22px !important;
  min-width: 0 !important;
}

.wow-header-icon,
.card-title-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Fix flex-start misalignment on Crafting, Shopping List & Polls card headers */
.craft-header-flex,
.shop-header-flex,
.horde-locked-card-header,
.consensus-card-header,
.section-header-slice,
.launch-wave-card-header {
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* Crafting & Shopping Hero Cards: Flush Single-Line Header + Padded Body */
.craft-hero-section,
.shop-hero-section {
  padding: 0 !important;
}

.craft-hero-body {
  padding: 10px 14px 14px 14px !important;
}

.craft-hero-note {
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
}

.craft-hero-body .craft-search-box {
  margin: 8px 0 10px 0 !important;
}

.craft-header-actions,
.shop-header-actions,
.addons-client-helper,
.cart-dashboard-actions,
.horde-pve-locked-pills {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Compact 22px Action Buttons & Pills inside 30px Card Headers (4px top/bottom gap) */
.craft-header-actions > button,
.shop-header-actions > button,
.cart-dashboard-actions > .btn-sm-action,
.horde-pve-locked-pills > .tactical-pill,
.launch-wave-card-header > .faction-status-pill,
.heatmap-header-top-row > .btn-edit-ballot-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  gap: 5px !important;
}

.craft-header-actions .btn-action-icon,
.shop-header-actions .btn-action-icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.craft-header-actions .active-orders-count,
.shop-header-actions .active-orders-count {
  padding: 1px 5px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

.card-header .btn-close-sm {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* 3. Polls Sub-Nav, Consensus Cards, Launch Wave Cards & Heatmap Stacked Header Symmetry */
.poll-view-nav {
  padding: 8px !important;
}

.consensus-card-header .header-tag,
.section-header-slice .badge-status,
.addons-toolbar-card .tactical-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.heatmap-header-stacked {
  padding: 6px 8px !important;
  gap: 6px !important;
}

.heatmap-header-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 22px !important;
  gap: 8px !important;
}

.heatmap-title-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 22px !important;
}

.heatmap-title-group .card-subtitle-desc {
  margin: 0 0 0 4px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.heatmap-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.role-filter-group,
.tz-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Fix inline icon vertical offset inside flex pills/buttons so icons never sink 3px low */
.tactical-pill .wow-inline-icon,
.tactical-pill .wow-mini-crest,
.faction-war-vs-pill .wow-inline-icon,
.faction-war-vs-pill .wow-mini-crest,
.faction-status-pill .wow-inline-icon,
.faction-banner-callout .wow-inline-icon,
.faction-roster-head .wow-inline-icon,
.allegiance-indicator .wow-inline-icon,
.target-lbl .wow-mini-crest,
.btn-edit-ballot-link .wow-inline-icon,
.btn-role-filter .wow-role-icon {
  vertical-align: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* 4. Shopping Cart Dashboard & Column Headers Equidistant Vertical Padding */
.cart-dashboard-header {
  padding: 4px 8px !important;
  min-height: 30px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.cart-dashboard-title {
  font-size: 13px !important;
}

.cart-dashboard-summary-strip {
  padding: 6px 8px !important;
  align-items: center !important;
}

.cart-col-header {
  padding: 4px 6px !important;
  min-height: 28px !important;
  margin-bottom: 6px !important;
  align-items: center !important;
}

.cart-col-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* 5. Top Auth Strip & Site Navigation Tabs (.guild-nav-bar) Vertical Centering */
.top-auth-strip .cd-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  height: 22px !important;
  box-sizing: border-box !important;
}

.top-auth-strip .cd-num,
.top-auth-strip .cd-lbl,
.top-auth-strip .cd-sep,
.top-auth-strip .launch-date-text,
.top-auth-strip .tactical-pill {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.guild-nav-bar .nav-tab {
  min-height: 36px !important;
  padding: 8px 6px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 2px solid var(--border-bronze, #473621) !important;
  border-bottom: 2px solid var(--border-bronze, #473621) !important;
  transform: none !important;
}

.guild-nav-bar .nav-tab:hover,
.guild-nav-bar .nav-tab.active,
.guild-nav-bar .nav-tab[aria-current="page"] {
  transform: none !important;
}

.guild-nav-bar .nav-tab.active,
.guild-nav-bar .nav-tab[aria-current="page"] {
  border-top: 2px solid var(--gold-crest, #f2c96d) !important;
  border-bottom: 2px solid var(--gold-barrens, #d4a44c) !important;
}

.guild-nav-bar .nav-tab-text,
.guild-nav-bar .nav-tab-badge {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 6. Compact Hero Banner Title Optical Centering */
.hero-card.hero-banner-compact .hero-guild-title,
.hero-banner-container.hero-banner-compact .hero-guild-title {
  padding-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* 7. /xp and /logs Marquee, Control Deck, Raid Frames & Diagnostic Headers */
.xp-carnival-marquee-header {
  padding: 8px 12px !important;
}

.xp-marquee-top-grid {
  padding-top: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
}

.xp-compact-control-deck {
  padding: 6px 10px !important;
  gap: 6px !important;
}

.xp-compact-control-deck .xp-input,
.xp-compact-control-deck .xp-select,
.xp-compact-control-deck .xp-class-pills,
.xp-compact-control-deck .xp-quick-toggles-group {
  height: 28px !important;
  min-height: 28px !important;
}

.logs-raid-frames-header,
.logs-split-col-header,
.logs-diag-header {
  padding: 4px 6px !important;
  min-height: 26px !important;
  margin-bottom: 6px !important;
  align-items: center !important;
}

.logs-raid-frames-title-wrap {
  align-items: center !important;
}

/* ==========================================================================
   29. CHARACTER ROSTER TABLE — PIXEL-PERFECT ICON GRID, RAIDER SONIC & POP NAMES
   - Removes Realm column; replaces Faction with RAIDER (Gold Hedgehog for Chaos Men,
     Class-Colored Hedgehog for Discord-signed raiders).
   - Splits Primary Crafts & Secondary Crafts into similarly sized sections.
   - Main columns = ~95% of row width; Socials + Edit = ~5% of row width.
   - Every icon & button fits its cell height (48px) and width pixel-perfectly.
   ========================================================================== */
#rosterTable {
  --ro-tile: 48px;
  --ro-gap: 3px;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#rosterTable thead th {
  padding: 6px 4px !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  vertical-align: middle !important;
}

#rosterTable tbody td {
  padding: 4px !important;
  height: 57px !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Column Width Proportions: Exact 4px visual padding on all sides (accounting for 1px border-left on th+th / td+td) */
#rosterTable th.col-raider,
#rosterTable td.col-raider {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-race,
#rosterTable td.col-race {
  width: 57px !important;
  min-width: 57px !important;
  max-width: 57px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-name,
#rosterTable td.col-name {
  width: auto !important;
  min-width: 220px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-class-spec,
#rosterTable td.col-class-spec {
  width: 159px !important;
  min-width: 159px !important;
  max-width: 159px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-racials,
#rosterTable td.col-racials {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-primary-profs,
#rosterTable td.col-primary-profs {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-secondary-profs,
#rosterTable td.col-secondary-profs {
  width: 159px !important;
  min-width: 159px !important;
  max-width: 159px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable th.col-socials,
#rosterTable td.col-socials {
  width: 43px !important;
  min-width: 43px !important;
  max-width: 43px !important;
  padding: 4px !important;
  text-align: center !important;
}

#rosterTable thead th.col-socials {
  padding: 6px 1px !important;
  font-size: 7.5px !important;
  letter-spacing: 0.01em !important;
}

#rosterTable thead th.col-actions {
  padding: 6px 2px !important;
  font-size: 8.5px !important;
  letter-spacing: 0.03em !important;
}

#rosterTable th.col-actions,
#rosterTable td.col-actions {
  width: 51px !important;
  min-width: 51px !important;
  max-width: 51px !important;
  padding: 4px !important;
  text-align: center !important;
}

/* Character Name: Forged Beveled Plaque, Exact Cap-Height + Horizontal Centering, 2-Layer Metallic Fill & Extruded Shadow */
#rosterTable td.col-name .char-name {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--ro-tile) !important;
  min-height: var(--ro-tile) !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  font-family: var(--font-display, 'Cinzel', serif) !important;
  font-size: clamp(25px, 2.3vw, 31px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--char-color, #ffffff) 24%, #090705) 0%,
      color-mix(in srgb, var(--char-color, #ffffff) 46%, #120e0a) 24%,
      color-mix(in srgb, var(--char-color, #ffffff) 60%, #17120c) 50%,
      color-mix(in srgb, var(--char-color, #ffffff) 46%, #120e0a) 76%,
      color-mix(in srgb, var(--char-color, #ffffff) 24%, #090705) 100%
    ) !important;
  border-style: solid !important;
  border-width: 1.5px !important;
  border-top-color: color-mix(in srgb, var(--char-color, #ffffff) 90%, #ffffff) !important;
  border-left-color: color-mix(in srgb, var(--char-color, #ffffff) 78%, #e6c687) !important;
  border-right-color: color-mix(in srgb, var(--char-color, #ffffff) 78%, #e6c687) !important;
  border-bottom-color: color-mix(in srgb, var(--char-color, #ffffff) 62%, #1e150d) !important;
  outline: 1px solid rgba(0, 0, 0, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85),
    inset 0 0 18px color-mix(in srgb, var(--char-color, #ffffff) 36%, transparent),
    inset 0 0 10px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.92),
    0 0 12px color-mix(in srgb, var(--char-color, #ffffff) 22%, transparent) !important;
  -webkit-text-stroke: 0px transparent;
  text-shadow: none !important;
  overflow: hidden !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease !important;
}

#rosterTable td.col-name .char-name::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid color-mix(in srgb, var(--char-color, #ffffff) 38%, rgba(255, 255, 255, 0.16));
  pointer-events: none;
}

#rosterTable td.col-name .char-name:hover {
  border-top-color: #ffffff !important;
  border-left-color: color-mix(in srgb, var(--char-color, #ffd700) 92%, #ffffff) !important;
  border-right-color: color-mix(in srgb, var(--char-color, #ffd700) 92%, #ffffff) !important;
  border-bottom-color: color-mix(in srgb, var(--char-color, #ffd700) 75%, #473621) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9),
    inset 0 0 20px color-mix(in srgb, var(--char-color, #ffffff) 44%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.95),
    0 0 16px color-mix(in srgb, var(--char-color, #ffffff) 52%, transparent) !important;
  filter: brightness(1.08) !important;
  transform: translateY(-1px);
}

#rosterTable td.col-name .char-name-stack {
  position: relative;
  z-index: 1;
  display: inline-grid !important;
  place-items: center !important;
  padding-left: 0.06em !important;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

#rosterTable td.col-name .char-name-stroke,
#rosterTable td.col-name .char-name-fill {
  grid-area: 1 / 1 !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

@supports not (text-box-trim: trim-both) {
  #rosterTable td.col-name .char-name-stack {
    transform: translateY(0.08em);
  }
}

#rosterTable td.col-name .char-name-stroke {
  color: #040302 !important;
  -webkit-text-stroke: 4.2px #040302 !important;
  paint-order: stroke fill !important;
  text-shadow:
    0 1px 0 #000000,
    0 2px 0 #000000,
    0 3px 6px rgba(0, 0, 0, 0.98),
    0 0 10px rgba(0, 0, 0, 0.95),
    0 0 16px color-mix(in srgb, var(--char-color, #ffffff) 65%, transparent) !important;
  user-select: none !important;
  pointer-events: none !important;
}

#rosterTable td.col-name .char-name-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--char-color, #ffffff) 84%, #ffffff) 0%,
    color-mix(in srgb, var(--char-color, #ffffff) 52%, #ffffff) 50%,
    color-mix(in srgb, var(--char-color, #ffffff) 84%, #ffffff) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

#rosterTable td.col-name .char-glyph-no-desc {
  display: inline-block;
  transform: scaleY(0.775);
  transform-origin: 50% 15%;
}

#rosterTable td.col-name .char-name-fill .char-glyph-no-desc {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Pixel-Perfect Square Icon Tiles across Raider, Race, Build, Racials, Primary & Secondary Crafts */
#rosterTable .icon-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ro-gap) !important;
  width: max-content !important;
  height: var(--ro-tile) !important;
  margin: 0 auto !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

#rosterTable .icon-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ro-tile) !important;
  height: var(--ro-tile) !important;
  flex: 0 0 var(--ro-tile) !important;
  vertical-align: middle !important;
}

#rosterTable td.col-race > .icon-link {
  display: flex !important;
  margin: 0 auto !important;
}

#rosterTable .ro-icon,
#rosterTable .ro-icon--sec {
  width: var(--ro-tile) !important;
  height: var(--ro-tile) !important;
  min-width: var(--ro-tile) !important;
  min-height: var(--ro-tile) !important;
  object-fit: cover !important;
  display: block !important;
  border: 1.5px solid rgba(212, 164, 76, 0.42) !important;
  box-sizing: border-box !important;
  background: #050403 !important;
}

/* Raider Hedgehog Column Styling (Gold for Chaos Men, Class-Colored for Discord Raiders) */
#rosterTable .raider-hedgehog-wrap {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ro-tile) !important;
  height: var(--ro-tile) !important;
  margin: 0 auto !important;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hedgehog-glow, #ffd700) 26%, rgba(10, 8, 6, 0.96)) 0%, #050403 100%) !important;
  border: 1.5px solid color-mix(in srgb, var(--hedgehog-glow, #ffd700) 72%, #473621) !important;
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--hedgehog-glow, #ffd700) 24%, transparent),
    0 0 8px color-mix(in srgb, var(--hedgehog-glow, #ffd700) 32%, transparent) !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

#rosterTable .raider-hedgehog-wrap.is-gold {
  border-color: #ffd700 !important;
  box-shadow:
    inset 0 0 12px rgba(255, 215, 0, 0.35),
    0 0 10px rgba(255, 215, 0, 0.55) !important;
}

#rosterTable .ro-icon--hedgehog {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  padding: 1px !important;
  border: none !important;
  background: transparent !important;
  filter: drop-shadow(0 0 5px var(--hedgehog-glow, rgba(255, 215, 0, 0.85))) !important;
}

#rosterTable .raider-slot-empty,
#rosterTable .ro-slot-empty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ro-tile) !important;
  height: var(--ro-tile) !important;
  flex: 0 0 var(--ro-tile) !important;
  background: rgba(8, 7, 6, 0.72) !important;
  border: 1px dashed rgba(212, 164, 76, 0.22) !important;
  color: rgba(214, 203, 184, 0.28) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#rosterTable td.col-raider > .raider-slot-empty {
  display: flex !important;
  margin: 0 auto !important;
}

/* Compact 5% Right-Side Socials (2-row vertical stack filling cell width) & Edit (2x2 compact grid) */
#rosterTable td.col-socials .socials-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2px !important;
  width: 34px !important;
  height: var(--ro-tile) !important;
  margin: 0 auto !important;
}

#rosterTable td.col-socials .social-icon-btn {
  width: 34px !important;
  height: 23px !important;
  min-width: 34px !important;
  min-height: 23px !important;
  border: 1px solid rgba(212, 164, 76, 0.32) !important;
  background: #070605 !important;
  box-sizing: border-box !important;
}

#rosterTable td.col-socials .social-icon-btn svg {
  width: 13px !important;
  height: 13px !important;
}

#rosterTable td.col-actions .row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 20px) !important;
  grid-template-rows: repeat(2, 23px) !important;
  gap: 2px !important;
  width: 42px !important;
  height: var(--ro-tile) !important;
  margin: 0 auto !important;
}

#rosterTable td.col-actions .btn-row-action {
  width: 20px !important;
  height: 23px !important;
  min-width: 20px !important;
  min-height: 23px !important;
  box-sizing: border-box !important;
}

#rosterTable td.col-actions .btn-row-armory {
  grid-column: 1 / -1 !important;
  width: 42px !important;
}

/* ==========================================================================
   30. POLLS SUB-NAV TABS, FULL-HEIGHT CONSENSUS CARDS, EQUIDISTANT HEATMAP
       HEADER & GOLD / WOW THEME HEATMAP GRID
   ========================================================================== */

/* 1. Secondary Sub-Nav Tabs (.poll-view-nav / .poll-sub-tab)
      Matches .guild-nav-bar / .nav-tab design, thinner height (28px vs 36px) */
.guild-nav-bar:has(+ .poll-view-nav) {
  margin-bottom: 2px !important;
}

.poll-view-nav {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border-bronze, #473621) !important;
  border-right: 1px solid var(--border-bronze, #473621) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.poll-view-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
}

@media (max-width: 680px) {
  .poll-view-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.poll-sub-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #161310 0%, #100e0c 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--border-bronze, #473621) !important;
  border-bottom: 2px solid var(--border-bronze, #473621) !important;
  border-radius: 0 !important;
  color: var(--text-parchment, #d6cbb8) !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease !important;
}

.poll-sub-tab .sub-tab-title {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.poll-sub-tab:hover {
  background: linear-gradient(180deg, #241d15 0%, #181410 100%) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
  box-shadow: none !important;
}

.poll-sub-tab.active {
  background: linear-gradient(180deg, #261e14 0%, #161310 100%) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  border-top: 2px solid var(--gold-crest, #f2c96d) !important;
  border-bottom: 2px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 12px rgba(212, 164, 76, 0.2), inset 0 1px 0 rgba(242, 201, 109, 0.18) !important;
  text-shadow: none !important;
}

.poll-sub-tab .wow-sub-tab-icon {
  width: 14px !important;
  height: 14px !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.poll-sub-tab .sub-tab-pill {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  height: 15px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  letter-spacing: 0.03em !important;
  background: rgba(212, 164, 76, 0.14) !important;
  border: 1px solid rgba(212, 164, 76, 0.38) !important;
  color: var(--gold-crest, #f2c96d) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.poll-sub-tab .sub-tab-pill.edit.active {
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  color: #86efac !important;
  box-shadow: none !important;
}

/* 2. Consensus Cards Grid & Full-Space Card Layouts (Top 3 Days, Top 5 Times, Time of Day) */
.consensus-cards-grid {
  display: grid !important;
  grid-template-columns: 1.12fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  align-items: stretch !important;
}

@media (max-width: 980px) {
  .consensus-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

.consensus-stacked-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
}

.consensus-hero-card {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
}

.consensus-hero-card .consensus-card-header {
  margin-bottom: 0 !important;
}

.consensus-hero-card .consensus-card-header .card-title {
  text-shadow: none !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.consensus-hero-card .header-tag {
  background: rgba(212, 164, 76, 0.14) !important;
  border: 1px solid rgba(212, 164, 76, 0.4) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.consensus-hero-card > .card-body {
  padding: 10px 12px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.consensus-raw-table {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Card 1: Top 3 Raid Days */
.top3-day-card {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(28, 23, 18, 0.94) 0%, rgba(16, 13, 10, 0.98) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-left: 3px solid var(--gold-barrens, #d4a44c) !important;
}

.top3-day-card.rank-gold {
  border-left-color: #f2c96d !important;
}

.top3-day-card.rank-silver {
  border-left-color: #d4a44c !important;
}

.top3-day-card.rank-bronze {
  border-left-color: #b45309 !important;
}

.top3-day-card:hover {
  background: linear-gradient(180deg, rgba(38, 31, 22, 0.96) 0%, rgba(22, 18, 14, 0.98) 100%) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
}

.day-rank-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 28px !important;
  padding: 0 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background: rgba(212, 164, 76, 0.22) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.top3-day-card .consensus-raw-day {
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-ivory, #f6f4ee) !important;
  min-width: auto !important;
}

.top3-day-card .consensus-raw-votes {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.top3-day-card .consensus-raw-pct {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.consensus-role-pills {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.c-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: rgba(12, 10, 8, 0.9) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

.c-role-pill .wow-inline-icon {
  width: 15px !important;
  height: 15px !important;
  vertical-align: 0 !important;
  display: block !important;
}

.c-role-pill.tank {
  color: #7dd3fc !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
}

.c-role-pill.healer {
  color: #86efac !important;
  border-color: rgba(74, 222, 128, 0.38) !important;
}

.c-role-pill.dps {
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
}

.consensus-bar-track {
  width: 100% !important;
  height: 9px !important;
  background: #080706 !important;
  border: 1px solid var(--border-earth, #2c241b) !important;
  overflow: hidden !important;
}

.consensus-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #b45309 0%, #d4a44c 55%, #f2c96d 100%) !important;
  box-shadow: 0 0 8px rgba(212, 164, 76, 0.45) !important;
}

.top3-day-card .consensus-raw-slots {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  margin-top: 2px !important;
  width: 100% !important;
}

.slots-row-lbl {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--gold-barrens, #d4a44c) !important;
  margin-right: 2px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.top3-day-card .consensus-raw-slot-chip {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  background: rgba(12, 10, 8, 0.92) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

.top3-day-card .consensus-raw-slot-chip b {
  color: var(--gold-crest, #f2c96d) !important;
  font-weight: 900 !important;
}

/* Card 2: Top 5 Consensus Times */
.top5-times-stack {
  gap: 5px !important;
}

.top5-time-row {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  background: linear-gradient(180deg, rgba(26, 21, 16, 0.9) 0%, rgba(16, 13, 10, 0.95) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

.top5-time-grid {
  display: grid !important;
  grid-template-columns: 155px minmax(75px, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.top5-time-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.time-slot-rank {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--gold-barrens, #d4a44c) !important;
}

.top5-time-row .consensus-raw-day {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-ivory, #f6f4ee) !important;
  min-width: 0 !important;
}

.top5-time-row .consensus-raw-day small {
  font-size: 11.5px !important;
  color: var(--gold-barrens, #d4a44c) !important;
  font-weight: 700 !important;
}

.top5-time-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.consensus-role-pills.compact .c-role-pill {
  padding: 2px 7px !important;
  font-size: 12px !important;
}

.top5-time-row .consensus-raw-votes {
  font-family: var(--font-mono) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.top5-time-row .consensus-raw-pct {
  font-family: var(--font-mono) !important;
  font-size: 16.5px !important;
  font-weight: 900 !important;
  color: var(--gold-crest, #f2c96d) !important;
  min-width: 48px !important;
  text-align: right !important;
}

/* Card 3: Time of Day Breakdown */
.tod-breakdown-stack {
  gap: 5px !important;
}

.tod-window-row {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 7px 12px !important;
  background: linear-gradient(180deg, rgba(26, 21, 16, 0.9) 0%, rgba(16, 13, 10, 0.95) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

.tod-window-row .consensus-raw-day {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-ivory, #f6f4ee) !important;
  min-width: 0 !important;
}

.tod-window-range {
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--gold-barrens, #d4a44c) !important;
  padding: 2px 8px !important;
  background: rgba(212, 164, 76, 0.12) !important;
  border: 1px solid rgba(212, 164, 76, 0.32) !important;
}

.tod-right-stats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tod-window-row .consensus-raw-votes {
  font-family: var(--font-mono) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.tod-window-row .consensus-raw-pct {
  font-family: var(--font-mono) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--gold-crest, #f2c96d) !important;
  min-width: 48px !important;
  text-align: right !important;
}

/* 3. Raid Schedule Heatmap Header — Single-Row Clean Layout with Equidistant Top/Bottom Buttons */
.weekly-grid-section {
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
  margin-bottom: 12px !important;
}

.weekly-grid-section > .card-header.heatmap-header-stacked {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  padding: 7px 12px !important;
  min-height: 40px !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  box-sizing: border-box !important;
}

.weekly-grid-section .heatmap-title-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 26px !important;
  margin: 0 !important;
}

.weekly-grid-section .heatmap-controls-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

.weekly-grid-section .role-filter-group,
.weekly-grid-section .tz-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.weekly-grid-section .role-filter-lbl,
.weekly-grid-section .tz-label {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gold-barrens, #d4a44c) !important;
  margin: 0 2px 0 0 !important;
  line-height: 1 !important;
}

.weekly-grid-section .btn-role-filter,
.weekly-grid-section .tz-select-inline,
.weekly-grid-section .btn-edit-ballot-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  gap: 5px !important;
  box-sizing: border-box !important;
}

.weekly-grid-section .tz-select-inline {
  font-family: var(--font-mono) !important;
  padding: 0 24px 0 8px !important;
  background-color: #0b0907 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

.weekly-grid-section .btn-edit-ballot-link {
  background: linear-gradient(180deg, rgba(212, 164, 76, 0.26) 0%, rgba(180, 83, 9, 0.22) 100%) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.18) !important;
}

.weekly-grid-section .btn-edit-ballot-link:hover {
  background: linear-gradient(180deg, rgba(242, 201, 109, 0.36) 0%, rgba(212, 164, 76, 0.28) 100%) !important;
  border-color: var(--gold-crest, #f2c96d) !important;
  color: #ffffff !important;
}

/* 4. Gold / WoW Theme Heatmap Legend & 7x18 Matrix Grid */
.heatmap-legend-strip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 14px !important;
  background: linear-gradient(90deg, #14110d 0%, #0d0b09 100%) !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.heatmap-legend-strip .legend-title {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--gold-barrens, #d4a44c) !important;
}

.legend-chip.pct-90 {
  background: linear-gradient(180deg, rgba(242, 201, 109, 0.34) 0%, rgba(212, 164, 76, 0.22) 100%) !important;
  color: #ffe8a3 !important;
  border: 1px solid #f2c96d !important;
}

.legend-chip.pct-60 {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.32) 0%, rgba(180, 83, 9, 0.2) 100%) !important;
  color: #fcd34d !important;
  border: 1px solid #d97706 !important;
}

.legend-chip.pct-30 {
  background: rgba(146, 64, 14, 0.26) !important;
  color: #e6b87d !important;
  border: 1px solid #92400e !important;
}

.legend-chip.pct-0 {
  background: rgba(20, 17, 13, 0.9) !important;
  color: #8c7f6f !important;
  border: 1px solid #2c241b !important;
}

.legend-chip.pct-red {
  background: rgba(185, 28, 28, 0.28) !important;
  color: #fca5a5 !important;
  border: 1px solid #dc2626 !important;
}

.master-grid-layout {
  background: #2c241b !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  gap: 1px !important;
}

.grid-tz-corner {
  background: linear-gradient(180deg, #261e14 0%, #17130d 100%) !important;
  color: var(--gold-crest, #f2c96d) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border-right: 1px solid var(--border-bronze, #473621) !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
}

.grid-header-cell {
  background: linear-gradient(180deg, #1d1711 0%, #130f0b 100%) !important;
  color: var(--gold-crest, #f2c96d) !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
}

.grid-day-cell {
  background: linear-gradient(90deg, #1e1812 0%, #14110d 100%) !important;
  color: var(--text-ivory, #f6f4ee) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  border-right: 1px solid var(--border-bronze, #473621) !important;
}

.grid-cell {
  height: 44px !important;
  background: #0d0b09 !important;
}

.grid-cell .cell-pct-text {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

.grid-cell:hover {
  outline: 2px solid var(--gold-crest, #f2c96d) !important;
  box-shadow: 0 0 14px rgba(242, 201, 109, 0.5) !important;
  z-index: 5 !important;
}

.grid-cell.pct-90 {
  background: linear-gradient(180deg, rgba(218, 165, 32, 0.56) 0%, rgba(161, 98, 7, 0.72) 100%) !important;
  color: #fff6d6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(242, 201, 109, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 201, 109, 0.52), inset 0 1px 0 rgba(255, 238, 186, 0.25) !important;
}

.grid-cell.pct-60 {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.42) 0%, rgba(146, 64, 14, 0.58) 100%) !important;
  color: #fde68a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4) !important;
}

.grid-cell.pct-30 {
  background: rgba(146, 64, 14, 0.32) !important;
  color: #e6b87d !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

.grid-cell.pct-10 {
  background: rgba(44, 36, 27, 0.55) !important;
  color: #a89984 !important;
}

.grid-cell.pct-0 {
  background: rgba(13, 11, 9, 0.94) !important;
  color: rgba(140, 127, 111, 0.34) !important;
}

.grid-cell.pct-cannot {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.34) 0%, rgba(127, 29, 29, 0.22) 100%) !important;
  color: #fca5a5 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.35) !important;
}

.grid-tooltip {
  background: linear-gradient(180deg, #1a1510 0%, #0f0c09 100%) !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.9), 0 0 16px rgba(212, 164, 76, 0.25) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

.grid-tooltip-header {
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

/* ==========================================================================
   31. LAUNCH PLAN (#pollFactionView) & CAST BALLOT (#pollCastView)
       COMPACT CARD, FULL-HEIGHT ROSTER & GOLD / WOW THEME REFINEMENTS
   ========================================================================== */

/* 1. Launch Plan Top Banner — Equidistant Single-Row Section Header */
.launch-plan-top-banner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  padding: 7px 14px !important;
  min-height: 40px !important;
  margin-bottom: 8px !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #1a1510 0%, #100d0a 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
  text-align: left !important;
}

.launch-plan-top-banner .launch-banner-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 26px !important;
}

.launch-plan-top-banner .faction-war-main-title {
  margin: 0 !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--gold-crest, #f2c96d) !important;
  text-shadow: none !important;
}

.launch-plan-top-banner .faction-war-badge-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}

.launch-plan-top-banner .tactical-pill {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

/* 2. Launch Plan 3-Column Wave Cards — Full-Height Roster & Crisp Typography */
.launch-plan-arena {
  align-items: stretch !important;
}

.launch-wave-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.launch-wave-panel .faction-content-wrap {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 12px 14px 14px !important;
  gap: 10px !important;
}

.launch-wave-panel .faction-city-title {
  font-size: 19px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 2px !important;
}

.launch-wave-panel .faction-territory-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--gold-barrens, #d4a44c) !important;
}

.launch-wave-panel .faction-creed-quote {
  display: none !important;
}

.launch-wave-panel .faction-metrics-card {
  padding: 8px 12px !important;
  margin: 0 !important;
}

.launch-wave-panel .faction-pct-display {
  font-size: 22px !important;
  font-weight: 900 !important;
}

.launch-wave-panel .faction-voter-tally {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.launch-wave-panel .faction-roster-box {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 2px !important;
}

.launch-wave-panel .faction-voters-list {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px !important;
  max-height: none !important;
}

.launch-wave-panel .faction-voter-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 11px !important;
  background: linear-gradient(180deg, rgba(26, 21, 16, 0.92) 0%, rgba(15, 12, 9, 0.96) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

.faction-voter-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.launch-wave-panel .faction-voter-avatar {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--gold-barrens, #d4a44c) !important;
  flex-shrink: 0 !important;
}

.launch-wave-panel .faction-voter-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

.faction-voter-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
}

.faction-voter-class-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 7px !important;
  background: rgba(12, 10, 8, 0.9) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

.faction-voter-class-pill .voter-mini-class-icon {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.launch-wave-panel .faction-voter-auth-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(212, 164, 76, 0.12) !important;
  border: 1px solid rgba(212, 164, 76, 0.32) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

/* 3. Cast Ballot (#pollCastView) — Forged Bronze & Gold Theme */
#pollCastView .poll-voting-panel {
  border: 1px solid var(--border-bronze, #473621) !important;
  border-top: 2px solid var(--gold-barrens, #d4a44c) !important;
}

#pollCastView .poll-voting-panel > .card-header {
  min-height: 40px !important;
  padding: 7px 14px !important;
  border-bottom: 1px solid var(--border-bronze, #473621) !important;
}

#pollCastView .poll-voting-panel > .card-body {
  padding: 12px 14px !important;
}

#pollCastView .badge-status {
  height: 24px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  background: rgba(212, 164, 76, 0.14) !important;
  border: 1px solid rgba(212, 164, 76, 0.4) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

#pollCastView .cast-identity-row {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  background: linear-gradient(180deg, rgba(24, 19, 15, 0.92) 0%, rgba(14, 11, 9, 0.96) 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

@media (max-width: 860px) {
  #pollCastView .cast-identity-row {
    grid-template-columns: 1fr !important;
  }
}

#pollCastView .char-input-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

#pollCastView .form-label {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gold-crest, #f2c96d) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

#pollCastView .form-input-plain,
#pollCastView .select-roster-quick {
  height: 34px !important;
  font-size: 13px !important;
  background: #0b0907 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

#pollCastView .field-hint {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

#pollCastView .tz-pill-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

#pollCastView .tz-pill {
  height: 34px !important;
  padding: 0 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: #0d0b09 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-parchment, #d6cbb8) !important;
  border-radius: 0 !important;
}

#pollCastView .tz-pill:hover {
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--text-ivory, #f6f4ee) !important;
}

#pollCastView .tz-pill.active {
  background: linear-gradient(180deg, rgba(218, 165, 32, 0.38) 0%, rgba(161, 98, 7, 0.5) 100%) !important;
  border-color: var(--gold-crest, #f2c96d) !important;
  color: #fff6d6 !important;
  box-shadow: 0 0 10px rgba(212, 164, 76, 0.25) !important;
}

/* Unified Gold / Bronze Painter Toolbar */
#pollCastView .painter-control-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #181410 0%, #100d0a 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
}

#pollCastView .painter-presets,
#pollCastView .painter-right-meta,
#pollCastView .painter-direct-legend,
#pollCastView .drag-selection-summary {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 0 !important;
}

#pollCastView .painter-right-meta {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}

#pollCastView .preset-label {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--gold-barrens, #d4a44c) !important;
  margin-right: 2px !important;
}

#pollCastView .btn-preset {
  height: 24px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  background: #0d0b09 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

#pollCastView .btn-preset:hover {
  background: rgba(212, 164, 76, 0.16) !important;
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: var(--gold-crest, #f2c96d) !important;
}

#pollCastView .btn-preset.clear {
  border-color: rgba(220, 38, 38, 0.45) !important;
  color: #fca5a5 !important;
}

#pollCastView .cycle-pill,
#pollCastView .summary-pill {
  height: 24px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: #0b0907 !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--text-parchment, #d6cbb8) !important;
}

#pollCastView .cycle-pill.can,
#pollCastView .summary-pill.gold {
  border-color: rgba(242, 201, 109, 0.5) !important;
  color: var(--gold-crest, #f2c96d) !important;
  background: rgba(212, 164, 76, 0.12) !important;
}

#pollCastView .cycle-pill.cannot,
#pollCastView .summary-pill.red {
  border-color: rgba(220, 38, 38, 0.5) !important;
  color: #fca5a5 !important;
  background: rgba(185, 28, 28, 0.14) !important;
}

#pollCastView .wow-circle-indicator.gold {
  width: 8px !important;
  height: 8px !important;
  background: #f2c96d !important;
  box-shadow: 0 0 6px rgba(242, 201, 109, 0.8) !important;
  display: inline-block !important;
}

/* Interactive Paint Cells — Gold / WoW Theme */
.paint-slot-cell.state-unselected {
  background: rgba(13, 11, 9, 0.94) !important;
  color: rgba(140, 127, 111, 0.28) !important;
  border-color: transparent !important;
  outline: none !important;
}

.paint-slot-cell.state-can {
  background: linear-gradient(180deg, rgba(218, 165, 32, 0.56) 0%, rgba(161, 98, 7, 0.72) 100%) !important;
  color: #fff6d6 !important;
  border: 1px solid rgba(242, 201, 109, 0.5) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 238, 186, 0.25) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.paint-slot-cell.state-cannot {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.42) 0%, rgba(127, 29, 29, 0.58) 100%) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220, 38, 38, 0.5) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Cast Ballot Action Row — Balanced Side-by-Side Gold & Bronze Buttons */
#pollCastView .cast-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: none !important;
}

#pollCastView .btn-submit-raid-vote {
  width: auto !important;
  flex: 1 1 auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
  border: 1px solid var(--gold-crest, #f2c96d) !important;
  color: #fff6d6 !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px rgba(212, 164, 76, 0.25), inset 0 1px 0 rgba(255, 238, 186, 0.25) !important;
}

#pollCastView .btn-submit-raid-vote:hover {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(242, 201, 109, 0.45) !important;
}

#pollCastView .btn-switch-metrics,
#pollCastView .btn-retract-raid-vote {
  width: auto !important;
  flex: 0 0 auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, #1d1711 0%, #120e0b 100%) !important;
  border: 1px solid var(--border-bronze, #473621) !important;
  color: var(--gold-crest, #f2c96d) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#pollCastView .btn-switch-metrics:hover {
  border-color: var(--gold-barrens, #d4a44c) !important;
  color: #ffffff !important;
}