/* ========================================
   AFTERLIFE CLAN MANAGER - Design System
   Dark Fantasy Gaming Dashboard
   ======================================== */

/* Local Fonts */
@import url('/vendor/fontsource/rajdhani/index.css');
@import url('/vendor/fontsource/inter/index.css');
@import url('/vendor/fontsource/jetbrains-mono/index.css');

/* ========== CSS Variables ========== */
:root {
  /* Core Colors */
  --bg-primary: #05050a;
  --bg-secondary: #0a0a14;
  --bg-card: rgba(14, 14, 26, 0.6);
  --bg-card-hover: rgba(22, 22, 40, 0.75);
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-sidebar: rgba(8, 8, 16, 0.85);
  --bg-input: rgba(20, 20, 35, 0.6);

  /* Primary: Mystical Purple Theme */
  --purple-primary: #9b59b6;
  --purple-light: #a855f7;
  --purple-dark: #8e44ad;
  --purple-glow: rgba(155, 89, 182, 0.35);

  /* Gold Accent (kept for special elements) */
  --gold-primary: #f39c12;
  --gold-light: #f5b041;
  --gold-dark: #d68910;
  --gold-glow: rgba(243, 156, 18, 0.25);

  /* Accent Cyan (secondary accent) */
  --accent-cyan: #00d4ff;
  --accent-cyan-glow: rgba(0, 212, 255, 0.25);

  /* Status Colors */
  --success: #00ff88;
  --success-dim: rgba(0, 255, 136, 0.15);
  --danger: #ff0055;
  --danger-dim: rgba(255, 0, 85, 0.15);
  --warning: #ffaa00;
  --warning-dim: rgba(255, 170, 0, 0.15);
  --info: #0088ff;
  --info-dim: rgba(0, 136, 255, 0.15);
  --blue: #3498db;
  --blue-dim: rgba(52, 152, 219, 0.15);

  /* Text Colors */
  --text-primary: #f0f0f5;
  --text-secondary: #9090a8;
  --text-muted: #555566;
  --text-gold: #f39c12;

  /* Borders */
  --border-color: rgba(155, 89, 182, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-gold: rgba(155, 89, 182, 0.5);

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 0 25px rgba(155, 89, 182, 0.25);
  --shadow-glow: 0 0 45px rgba(155, 89, 182, 0.15);

  /* Spacing */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --header-height: 72px;
  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Effects */
  --glass-blur: blur(16px);
}

/* ========== Global Responsive ========== */
html {
  font-size: 14px;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

*, *::before, *::after {
  box-sizing: border-box;
  max-width: 100%;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  max-width: 100%;
  overflow-wrap: break-word;
}

.container, .wrapper, .main-content {
  max-width: 100%;
  overflow-x: hidden;
}

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }

.text-wrap { word-wrap: break-word; white-space: normal; }
.text-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Flex helpers */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* Grid helpers */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ========== Reset & Base ========== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: 0.015em;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* ========== Background Particles / Ambient Effect ========== */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 15% 50%, rgba(155, 89, 182, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(155, 89, 182, 0.06) 0%, transparent 50%),
    url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h40v40H0z" fill="none"/><path d="M0 39.5h40M39.5 0v40" stroke="rgba(255,255,255,0.02)" stroke-width="1"/></svg>');
  background-attachment: fixed;
  pointer-events: none;
  z-index: 0;
}

/* ========== Layout ========== */
.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ========== Sidebar ========== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition-normal);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

.sidebar-header {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo-stage {
  width: 100%;
  max-width: 196px;
  height: 180px;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(0, 212, 255, 0.18), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(243, 156, 18, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(18, 20, 30, 0.98), rgba(10, 11, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -18px 30px rgba(0, 0, 0, 0.24),
    0 14px 34px rgba(0, 0, 0, 0.34);
}

.sidebar-logo-stage::before {
  content: '';
  position: absolute;
  inset: auto 18px 14px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(243, 156, 18, 0.24), rgba(0, 212, 255, 0.08) 58%, transparent 76%);
  filter: blur(10px);
  pointer-events: none;
}

.sidebar-logo-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 0 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 78%);
  pointer-events: none;
}

.sidebar-logo-model {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--gold-primary);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3));
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 12px 8px;
  margin-top: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(155, 89, 182, 0.08);
  color: var(--text-primary);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(155, 89, 182, 0.15), transparent);
  color: var(--purple-primary);
  box-shadow: inset 3px 0 0 var(--purple-primary);
}

.nav-item.active .nav-icon {
  color: var(--purple-primary);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.nav-badge.gold {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid var(--border-color);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-user:hover {
  background: rgba(155, 89, 182, 0.08);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-primary), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--gold-primary);
  font-weight: 500;
}

/* ========== Main Content Area ========== */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.top-header {
  height: var(--header-height);
  background: rgba(14, 14, 24, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
}

.page-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 38px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.language-switcher i {
  color: var(--gold-primary);
  font-size: 14px;
}

.language-switcher select {
  min-width: 102px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding-right: 8px;
}

.language-switcher select option {
  background: #101019;
  color: var(--text-primary);
}

.header-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 16px;
  position: relative;
}

.header-btn:hover {
  background: var(--bg-card-hover);
  color: var(--gold-primary);
  border-color: var(--border-gold);
}

.header-btn .notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  padding: 8px 14px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
  transition: border-color var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--border-gold);
}

.search-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  width: 100%;
  font-family: inherit;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-box .search-icon {
  color: var(--text-muted);
  font-size: 14px;
}

/* ========== Page Content ========== */
.page-content {
  flex: 1;
  padding: 28px;
}

.page-section {
  display: none;
  animation: fadeIn 0.4s ease;
}

.page-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Cards ========== */
.card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(-4px);
}

.card:hover::before {
  opacity: 1;
}

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

.card-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ========== Stats Grid ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.stat-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  transform: translateY(-4px);
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.stat-icon.gold {
  background: rgba(155, 89, 182, 0.12);
  color: var(--gold-primary);
}

.stat-icon.green {
  background: var(--success-dim);
  color: var(--success);
}

.stat-icon.red {
  background: var(--danger-dim);
  color: var(--danger);
}

.stat-icon.blue {
  background: var(--info-dim);
  color: var(--info);
}

.stat-icon.purple {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 6px;
}

.stat-change.up {
  color: var(--success);
  background: var(--success-dim);
}

.stat-change.down {
  color: var(--danger);
  background: var(--danger-dim);
}

/* ========== Content Grid ========== */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.content-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ========== Tables ========== */
.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-subtle);
}

.data-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.data-table tr:hover td {
  background: rgba(155, 89, 182, 0.03);
  color: var(--text-primary);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* ========== Badges ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.gold {
  background: rgba(155, 89, 182, 0.12);
  color: var(--gold-primary);
}

.badge.green {
  background: var(--success-dim);
  color: var(--success);
}

.badge.red {
  background: var(--danger-dim);
  color: var(--danger);
}

.badge.blue {
  background: var(--info-dim);
  color: var(--info);
}

.badge.purple {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

.badge.orange {
  background: var(--warning-dim);
  color: var(--warning);
}

/* ========== Progress Bars ========== */
.progress-bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-slow);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary));
}

.progress-fill.green {
  background: linear-gradient(90deg, #1a9f54, var(--success));
}

.progress-fill.red {
  background: linear-gradient(90deg, #c0392b, var(--danger));
}

.progress-fill.blue {
  background: linear-gradient(90deg, #2471a3, var(--info));
}

.progress-row {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.progress-header span:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast);
}

.member-row:hover {
  background: var(--bg-hover);
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.member-score {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-primary);
  white-space: nowrap;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.guild-emoji-pick {
  transition: all 0.2s;
}

.guild-emoji-pick:hover {
  border-color: var(--gold-primary) !important;
  transform: scale(1.1);
}

.guild-emoji-pick.selected {
  border-color: var(--gold-primary) !important;
  background: rgba(212, 175, 55, 0.15);
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  font-family: 'Rajdhani', sans-serif;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg) translateY(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
}

.btn:hover::after {
  transform: rotate(45deg) translateY(100%);
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
  color: white;
  border-color: var(--purple-primary);
  box-shadow: 0 0 16px var(--purple-glow);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--purple-light), var(--purple-primary));
  box-shadow: var(--shadow-gold), 0 0 30px var(--purple-glow);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--purple-primary);
  border-color: var(--border-gold);
}

.btn-outline:hover {
  background: rgba(155, 89, 182, 0.1);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 8px 12px;
}

.btn-ghost:hover {
  color: var(--purple-primary);
  background: rgba(155, 89, 182, 0.08);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: #c0392b;
  box-shadow: 0 0 20px rgba(231, 76, 60, 0.3);
}

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

/* ========== Avatar ========== */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
}

.avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }
.avatar.xl { width: 56px; height: 56px; font-size: 20px; }

/* Avatar colors */
.avatar.av-1 { background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark)); }
.avatar.av-2 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.avatar.av-3 { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.avatar.av-4 { background: linear-gradient(135deg, #3498db, #2471a3); }
.avatar.av-5 { background: linear-gradient(135deg, #2ecc71, #1a9f54); }
.avatar.av-6 { background: linear-gradient(135deg, #f39c12, #d68910); }

/* Online indicator */
.avatar-wrapper {
  position: relative;
  display: inline-flex;
}

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}

.online-indicator.offline {
  background: var(--text-muted);
}

/* ========== List Items ========== */
.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-content {
  flex: 1;
  min-width: 0;
}

.list-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ========== Tags ========== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== Empty State ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.empty-state h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
}

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

/* ========== Section Header ========== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.ranking-note-card {
  background:
    radial-gradient(circle at top right, rgba(243, 156, 18, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(18, 18, 28, 0.95), rgba(12, 12, 18, 0.92));
}

.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-row {
  gap: 16px;
}

.ranking-rank {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.ranking-rank.gold {
  color: var(--gold-primary);
  background: rgba(243, 156, 18, 0.14);
  border-color: rgba(243, 156, 18, 0.22);
}

.ranking-rank.blue {
  color: var(--blue);
  background: rgba(52, 152, 219, 0.14);
  border-color: rgba(52, 152, 219, 0.22);
}

.ranking-rank.purple {
  color: var(--purple-primary);
  background: rgba(155, 89, 182, 0.14);
  border-color: rgba(155, 89, 182, 0.22);
}

.ranking-rank.muted {
  color: var(--text-muted);
}

.ranking-score {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-primary);
  white-space: nowrap;
}

/* ========== Divider ========== */
.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 20px 0;
}

/* ========== Decorative Elements ========== */
.glow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  margin: 24px 0;
  opacity: 0.3;
}

/* Page-specific: Activity feed */
.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item-left {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.activity-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

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

.activity-time {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
  text-align: right;
  min-width: 60px;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot.gold { background: var(--gold-primary); }
.activity-dot.green { background: var(--success); }
.activity-dot.red { background: var(--danger); }
.activity-dot.blue { background: var(--info); }

/* ========== Event card styling ========== */
.event-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-input);
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.event-item:hover {
  border-color: var(--border-gold);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px;
  background: rgba(155, 89, 182, 0.08);
  border-radius: var(--border-radius-sm);
}

.event-date .day {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-primary);
  line-height: 1;
}

.event-date .month {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.event-details h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.event-details p {
  font-size: 12px;
  color: var(--text-muted);
}

/* ========== Timer / Tracker ========== */
.timer-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-primary);
  text-align: center;
  padding: 20px;
  background: var(--bg-input);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-gold);
  text-shadow: 0 0 20px rgba(155, 89, 182, 0.3);
}

/* ========== Floating particles animation ========== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(155, 89, 182, 0.2); }
  50% { box-shadow: 0 0 20px rgba(155, 89, 182, 0.4); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: slideInUp 0.5s ease forwards;
}

.animate-in:nth-child(1) { animation-delay: 0.05s; }
.animate-in:nth-child(2) { animation-delay: 0.1s; }
.animate-in:nth-child(3) { animation-delay: 0.15s; }
.animate-in:nth-child(4) { animation-delay: 0.2s; }
.animate-in:nth-child(5) { animation-delay: 0.25s; }
.animate-in:nth-child(6) { animation-delay: 0.3s; }

/* ========== Boss cards ========== */
.boss-card {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-fast);
}

.boss-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
}

.boss-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(231, 76, 60, 0.12);
  flex-shrink: 0;
}

.boss-info {
  flex: 1;
}

.boss-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.boss-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.boss-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--gold-primary);
  white-space: nowrap;
}

/* ========== Check-in Grid ========== */
.checkin-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.checkin-day {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.checkin-day.empty {
  background: transparent;
}

.checkin-day.checked {
  background: rgba(46, 204, 113, 0.2);
  color: var(--success);
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.checkin-day.missed {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger);
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.checkin-day.today {
  background: rgba(155, 89, 182, 0.15);
  color: var(--gold-primary);
  border: 1px solid var(--gold-primary);
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.2);
}

.checkin-day.future {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ========== Toggle switch ========== */
.toggle {
  width: 40px;
  height: 22px;
  background: var(--bg-input);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.toggle.active {
  background: rgba(155, 89, 182, 0.3);
  border-color: var(--gold-primary);
}

.toggle::after {
  content: '';
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all var(--transition-fast);
}

.toggle.active::after {
  left: 20px;
  background: var(--gold-primary);
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .main-content {
    margin-left: 0;
  }

  .menu-toggle {
    display: flex;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  .search-box {
    min-width: 150px;
    max-width: 180px;
    padding: 8px 10px;
  }

  .top-header {
    padding: 0 16px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .checkin-grid {
    gap: 3px;
  }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* ========== Tab system ========== */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}

.tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text-secondary);
}

.tab.active {
  color: var(--gold-primary);
  border-bottom-color: var(--gold-primary);
}

/* ========== Tooltip ========== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-subtle);
  z-index: 200;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ========== AUTH PAGES - BACKGROUND IMAGE THEME ========== */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.auth-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.auth-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay for readability */
.auth-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Gradient overlay - darker at edges, clearer at center */
.auth-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: rgba(15, 15, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.5s ease;
}
.auth-card::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 30%, rgba(65, 196, 255, 0.16), transparent 25%),
    radial-gradient(circle at 90% 35%, rgba(255, 78, 61, 0.14), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(153, 92, 255, 0.22), transparent 30%);
  filter: blur(24px);
  pointer-events: none;
}

.auth-card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

/* Simple Login Form */
.auth-card-simple {
  position: absolute;
  top: 50%;
  right: clamp(24px, 7vw, 120px);
  left: auto;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 400px;
  width: min(calc(100vw - 48px), 400px);
  padding: 48px 40px;
  background: rgba(10, 10, 20, 0.9);
  border: 1px solid rgba(155, 89, 182, 0.3);
  box-shadow: 0 0 60px rgba(155, 89, 182, 0.15), 0 8px 32px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1100px) {
  .auth-card-simple {
    top: auto;
    right: 50%;
    bottom: 40px;
    transform: translateX(50%);
    width: min(calc(100vw - 32px), 400px);
    padding: 32px 24px;
  }
}

.auth-simple-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.auth-simple-logo {
  text-align: center;
  color: var(--text-primary);
}

.auth-simple-logo i {
  font-size: 42px;
  background: linear-gradient(135deg, var(--purple-light), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}

.auth-simple-logo h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 4px;
  margin: 0;
  color: var(--text-primary);
}

.auth-simple-logo p {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 4px;
}

.auth-simple-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-simple-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-simple-input-group label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.auth-simple-input-group input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(20, 20, 35, 0.8);
  border: 1px solid rgba(155, 89, 182, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-simple-input-group input:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.2);
}

.auth-simple-input-group input::placeholder {
  color: var(--text-muted);
}

.auth-simple-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.auth-simple-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-secondary);
}

.auth-simple-remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--purple-primary);
}

.auth-simple-forgot {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s;
}

.auth-simple-forgot:hover {
  color: var(--purple-light);
}

.auth-simple-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
  border: none;
  border-radius: 8px;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(155, 89, 182, 0.3);
}

.auth-simple-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(155, 89, 182, 0.4);
}

.auth-simple-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-simple-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tab:hover {
  color: var(--text-primary);
}

.auth-tab.active {
  background: var(--purple-primary);
  color: white;
  box-shadow: 0 2px 12px rgba(155, 89, 182, 0.3);
}

.auth-form-register {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-simple-footer {
  text-align: center;
  padding-top: 8px;
}

.auth-link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s;
}

.auth-link-btn:hover {
  color: var(--purple-light);
}

.auth-logo {
  text-align: center;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}

.auth-logo .logo-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  overflow: hidden;
}

.auth-emblem {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), transparent 35%),
    conic-gradient(from 210deg, rgba(61, 193, 255, 0.96) 0 44%, rgba(19, 44, 85, 0.4) 44% 50%, rgba(255, 108, 76, 0.95) 50% 94%, rgba(68, 12, 21, 0.45) 94% 100%);
  box-shadow: 0 0 28px rgba(42, 186, 255, 0.18), 0 0 32px rgba(255, 101, 82, 0.14);
}

.auth-emblem::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.18), transparent 30%),
    rgba(10, 12, 22, 0.92);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
}

.auth-emblem::after {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(39, 188, 255, 0.2), rgba(255, 93, 65, 0.2));
  filter: blur(10px);
  opacity: 0.8;
}

.auth-emblem i {
  position: relative;
  z-index: 1;
  font-size: 34px;
  background: linear-gradient(135deg, #61dcff 0%, #c7f4ff 35%, #ff9765 66%, #ff5b54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 135, 88, 0.18));
}

.auth-logo h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: #ffb347;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(255, 170, 70, 0.4), 0 0 60px rgba(255, 140, 50, 0.2);
  background: linear-gradient(180deg, #ffd280 0%, #ffb347 50%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 170, 70, 0.3));
}

.auth-logo p {
  font-size: 16px;
  color: rgba(218, 222, 236, 0.72);
  margin-top: 6px;
}

.auth-form .form-group {
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.auth-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Rajdhani', sans-serif;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(25, 25, 35, 0.9) 0%, rgba(18, 18, 28, 0.95) 100%);
  border: 1px solid rgba(100, 100, 120, 0.2);
  border-radius: 10px;
  color: #e8e8f0;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: all var(--transition-fast);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.auth-form input:focus {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(168, 85, 247, 0.15),
    0 0 20px rgba(168, 85, 247, 0.1);
  transform: none;
}

.auth-form input::placeholder {
  color: rgba(150, 150, 165, 0.6);
}

.auth-form .btn-primary {
  width: 100%;
  min-height: 58px;
  padding: 13px 18px;
  font-size: 14px;
  margin-top: 14px;
  justify-content: center;
  gap: 10px;
}

.auth-submit-btn {
  border-radius: 14px;
  border: 1px solid rgba(200, 130, 255, 0.6);
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #7d3c98 100%);
  box-shadow: 
    0 8px 32px rgba(155, 89, 182, 0.4),
    0 0 50px rgba(168, 85, 247, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: visible;
  isolation: isolate;
  position: relative;
}

.auth-submit-btn::before {
  content: '';
  position: absolute;
  inset: -15px -20px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(236, 72, 153, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(168, 85, 247, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(155, 89, 182, 0.4) 0%, transparent 40%);
  filter: blur(20px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  animation: smokePulse 3s ease-in-out infinite;
}

@keyframes smokePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.auth-submit-btn span,
.auth-submit-btn i {
  position: relative;
  z-index: 1;
  font-weight: 700;
  letter-spacing: 2px;
}

.auth-submit-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #7c3aed 100%);
  box-shadow: 
    0 12px 40px rgba(155, 89, 182, 0.5),
    0 0 60px rgba(168, 85, 247, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.auth-divider {
  text-align: center;
  margin: 20px 0 16px;
  position: relative;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
}

.auth-divider span {
  position: relative;
  background: rgba(15, 15, 22, 0.95);
  padding: 4px 16px;
  font-size: 11px;
  color: rgba(180, 180, 190, 0.5);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 1px;
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: rgba(227, 230, 238, 0.62);
}

.auth-switch a,
.auth-link {
  color: #ff8c42;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.auth-switch a:hover,
.auth-link:hover {
  color: #ffa559;
  text-shadow: 0 0 15px rgba(255, 140, 70, 0.5);
}

.auth-demo-card {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.95), rgba(15, 15, 22, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.15);
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.auth-demo-card::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 18% 46%, rgba(6, 182, 212, 0.12), transparent 28%),
    radial-gradient(circle at 82% 60%, rgba(239, 68, 68, 0.1), transparent 30%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
}

.auth-demo-card div {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(200, 200, 210, 0.8);
  font-family: 'Inter', sans-serif;
}

.auth-demo-card strong {
  color: #ffd280;
  font-weight: 600;
}

.auth-demo-title {
  font-size: 10px;
  color: rgba(212, 175, 55, 0.8);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

/* Auth messages */
.auth-message {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  margin-bottom: 16px;
  display: none;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s ease;
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
}

.auth-message.show {
  display: flex;
}

.auth-message.error {
  background: rgba(255, 0, 50, 0.2);
  color: #ff6b7a;
  border: 1px solid rgba(255, 100, 120, 0.3);
}

.auth-message.success {
  background: rgba(0, 255, 130, 0.15);
  color: #5cffaa;
  border: 1px solid rgba(0, 255, 130, 0.3);
}

.auth-message.warning {
  background: rgba(255, 170, 0, 0.15);
  color: #ffcc66;
  border: 1px solid rgba(255, 170, 0, 0.3);
}

/* ========== NEW LOGIN FORM STYLES ========== */
.logo-area {
  text-align: center;
  margin-bottom: 30px;
}

.logo-area .logo {
  width: 60px;
  margin-bottom: 15px;
  display: none;
}

.logo-area h1 {
  font-size: 28px;
  color: #ff9900;
  letter-spacing: 3px;
  margin-bottom: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(255, 153, 0, 0.3);
}

.logo-area p {
  font-size: 12px;
  color: #aaaaaa;
}

.login-form .input-group {
  margin-bottom: 20px;
}

.login-form .input-group label {
  display: block;
  font-size: 10px;
  color: #cccccc;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.login-form .input-group input {
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  outline: none;
  transition: 0.3s;
  font-family: 'Inter', sans-serif;
}

.login-form .input-group input::placeholder {
  color: rgba(200, 200, 200, 0.5);
}

.login-form .input-group input:focus {
  border-color: #ff9900;
  box-shadow: 0 0 10px rgba(255, 153, 0, 0.2);
}

.sign-in-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #6b21a8, #9333ea);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 10px;
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 2px;
}

.sign-in-btn:hover {
  background: linear-gradient(90deg, #7e22ce, #a855f7);
  box-shadow: 0 0 15px rgba(147, 51, 234, 0.6);
}

.divider {
  text-align: center;
  margin: 20px 0;
  font-size: 12px;
  color: #777;
  position: relative;
}

.register-link {
  text-align: center;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.register-link .auth-link-btn,
.register-link a {
  color: #ff9900;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.register-link .auth-link-btn:hover,
.register-link a:hover {
  text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
}

@media (max-width: 640px) {
  .auth-screen {
    padding: 20px 14px;
    align-items: flex-start;
  }

  .auth-orb {
    width: 115vw;
  }

  .auth-vortex-one {
    width: 140vw;
    height: 140vw;
  }

  .auth-vortex-two {
    width: 110vw;
    height: 110vw;
  }

  .auth-card {
    max-width: none;
    margin-top: 18px;
    padding: 28px 20px 22px;
    border-radius: 20px;
  }

  .auth-card::after {
    inset: 10px;
    border-radius: 16px;
  }

  .auth-logo .logo-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
  }

  .auth-emblem i {
    font-size: 30px;
  }

  .auth-logo h1 {
    font-size: 34px;
    letter-spacing: 3px;
  }

  .auth-logo p {
    font-size: 14px;
  }

  .auth-form input[type="text"],
  .auth-form input[type="email"],
  .auth-form input[type="password"] {
    padding: 14px 16px;
  }

  .auth-form .btn-primary {
    min-height: 54px;
  }

  .auth-sigil {
    right: 14px;
    bottom: 18px;
    width: 28px;
    opacity: 0.55;
  }

  .auth-screen[data-mode="login"] .auth-orb {
    width: 108vw;
  }

}

/* Pending Approval Screen */
.pending-screen {
  text-align: center;
  padding: 40px 20px;
}

.pending-screen .pending-icon {
  font-size: 56px;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

.pending-screen h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  color: var(--gold-primary);
  margin-bottom: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pending-screen p {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* Password strength indicator */
.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.password-strength .bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-input);
  transition: background var(--transition-fast);
}

.password-strength .bar.weak { background: var(--danger); }
.password-strength .bar.medium { background: var(--warning); }
.password-strength .bar.strong { background: var(--success); }

/* User management table enhancements */
.user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.user-row:last-child {
  border-bottom: none;
}

.user-row-info {
  flex: 1;
  min-width: 0;
}

.user-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.role-select {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.role-select:focus {
  border-color: var(--gold-primary);
}

/* Logout button in sidebar */
.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 13px;
  margin-top: 8px;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
}

.sidebar-logout:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

/* Nav item hidden */
.nav-item.hidden {
  display: none;
}

/* Disabled state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== MODAL / SLIDE PANEL ========== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 500;
  justify-content: flex-end;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.open {
  display: flex;
}

.modal-panel {
  width: 100%;
  max-width: 680px;
  max-height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
  padding: 16px;
  animation: slideInRight 0.3s ease;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  color: var(--danger);
  border-color: rgba(231, 76, 60, 0.3);
  background: var(--danger-dim);
}

/* Center modal variant */
.modal-overlay.center {
  justify-content: center;
  align-items: center;
}

.modal-overlay.center .modal-panel {
  max-width: calc(100vw - 32px);
  width: 100%;
  height: auto;
  max-height: 90vh;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  animation: fadeIn 0.3s ease;
}

/* ========== GUILD CARDS ========== */
.guild-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.guild-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-3px);
}

.guild-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-dark));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.guild-card:hover::before {
  opacity: 1;
}

.guild-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.guild-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.guild-card-info h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.guild-card-info .guild-tag {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1px;
}

.guild-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.guild-card-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.guild-card-stat i {
  font-size: 12px;
  color: var(--text-muted);
}

.guild-card-stat strong {
  color: var(--text-primary);
  font-weight: 600;
}

.guild-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ========== PLAYER ROW ========== */
.player-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-subtle);
}

.player-row:last-child {
  border-bottom: none;
}

.player-row:hover {
  background: rgba(155, 89, 182, 0.04);
}

.player-class-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.player-info {
  flex: 1;
  min-width: 0;
}

.player-nickname {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.player-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.player-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Status dot inline */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.status-dot.active { background: var(--success); box-shadow: 0 0 6px rgba(46,204,113,0.4); }
.status-dot.inactive { background: var(--text-muted); }
.status-dot.away { background: var(--warning); box-shadow: 0 0 6px rgba(243,156,18,0.3); }
.status-dot.banned { background: var(--danger); }

/* ========== FORM STYLES ========== */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.1);
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-group select {
  cursor: pointer;
}

.upload-paste-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.upload-paste-hint.is-ready {
  color: var(--success);
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ========== SQUAD CARDS ========== */
.squad-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 24px;
  transition: all var(--transition-normal);
}

.squad-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
}

.squad-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.squad-card-header .squad-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(155, 89, 182, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.squad-card-header h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.squad-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.squad-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
  min-height: 46px;
}

.squad-slot:hover {
  border-color: var(--border-gold);
}

.squad-slot .slot-class-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.squad-slot .slot-info {
  flex: 1;
  min-width: 0;
}

.squad-slot .slot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.squad-slot .slot-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.squad-slot:hover .slot-actions {
  opacity: 1;
}

/* Empty slot */
.squad-slot.empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
}

.squad-slot.empty:hover {
  border-color: var(--gold-primary);
  background: rgba(155, 89, 182, 0.04);
}

.squad-slot.empty .slot-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.squad-slot.empty .slot-placeholder i {
  font-size: 14px;
  opacity: 0.4;
}

.squad-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* ========== LOOT CARDS ========== */
.loot-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  padding: 4px;
  border: 1px solid var(--border-subtle);
  width: fit-content;
}

.loot-tab {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
  font-family: inherit;
}

.loot-tab:hover { color: var(--text-primary); }

.loot-tab.active {
  background: var(--purple-primary);
  color: white;
}

/* ========== RAID MODAL GRID ========== */
.raid-modal-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  height: calc(100vh - 80px);
  overflow: hidden;
}

.raid-modal-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.raid-modal-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.raid-entry-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.raid-shot-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  margin-bottom: 6px;
  transition: background var(--transition-fast);
}

.raid-shot-card:hover {
  background: var(--bg-card-hover);
}

.raid-shot-card .btn {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
}

.raid-shot-card-preview {
  width: 56px;
  height: 42px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: var(--bg-input);
}

.raid-shot-card-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.raid-shot-card-copy .list-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.raid-shot-card-copy .list-item-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}

.raid-shot-card .user-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  min-width: 90px;
  justify-content: flex-end;
}

.raid-modal-left .card-title,
.raid-modal-right .card-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.raid-entry-note {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.vision-stats-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(155, 89, 182, 0.1);
  border: 1px solid rgba(155, 89, 182, 0.2);
  border-radius: 8px;
  margin-bottom: 10px;
}

.vision-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vision-stat-value {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--purple-light);
}

.vision-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.raid-page {
  max-width: 800px;
}

.raid-page .card-header {
  margin-bottom: 20px;
}

.raid-calendar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.raid-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.raid-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.raid-cal-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 4px;
  text-transform: uppercase;
}

.raid-cal-day,
.raid-cal-day-empty {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.raid-cal-day-empty {
  cursor: default;
}

.raid-cal-day {
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.raid-cal-day:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.raid-cal-day.today {
  background: var(--purple-primary);
  color: white;
  font-weight: 700;
}

.raid-cal-day-empty {
  background: transparent;
}

/* Responsive for raid modal */
@media (max-width: 900px) {
  .raid-modal-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
    gap: 12px;
  }
  
  .raid-modal-left,
  .raid-modal-right {
    max-height: none !important;
    overflow: visible !important;
  }
  
  .raid-entry-list {
    max-height: 150px;
  }
  
  #raid-bulk-player-picker {
    max-height: 100px !important;
  }
  
  .modal-panel {
    max-height: 100vh !important;
    height: auto !important;
  }
}

.loot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  overflow-x: hidden;
  align-items: start;
}

.loot-card {
  background: linear-gradient(145deg, rgba(20, 20, 35, 0.6), rgba(10, 10, 20, 0.8));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-subtle);
  border-left-width: 4px; /* Rarity indicator */
  border-radius: var(--border-radius);
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loot-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, currentColor 0%, transparent 60%);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loot-card:hover {
  transform: translateY(-4px) scale(1.02);
  z-index: 2;
}

.loot-card:hover::before {
  opacity: 0.15;
}

.loot-card-top {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.loot-item-image {
  width: 116px;
  height: 116px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.loot-item-image-button {
  padding: 0;
  border: none;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loot-item-image-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.loot-item-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 8px;
  border-radius: 16px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), rgba(5,7,12,0.92) 72%);
  transition: transform 0.25s ease;
}

.loot-card:hover .loot-item-art {
  transform: scale(1.04);
}

.loot-item-image::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2px solid currentColor;
  opacity: 0.3;
  pointer-events: none;
}

.loot-item-info {
  flex: 1;
  min-width: 0;
}

.loot-item-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 8px;
  text-shadow: 0 0 15px currentColor;
}

.loot-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.loot-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 3px 8px;
  border-radius: 4px;
}

.loot-meta-tag i {
  font-size: 10px;
}

.loot-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.loot-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loot-detail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.loot-detail-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.loot-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.loot-preview-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.loot-preview-frame {
  min-height: 360px;
  padding: 18px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(14, 16, 26, 0.96), rgba(6, 8, 14, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.loot-preview-image {
  width: min(100%, 560px);
  max-height: 68vh;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
}

.loot-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Rarity Colors, Glows & Shimmers */
.loot-card.common { border-left-color: #95a5a6; color: #95a5a6; }
.loot-card.common:hover { box-shadow: 0 8px 25px rgba(149, 165, 166, 0.25); border-color: rgba(149, 165, 166, 0.4); border-left-color: #95a5a6; }

.loot-card.uncommon { border-left-color: #2ecc71; color: #2ecc71; }
.loot-card.uncommon:hover { box-shadow: 0 8px 25px rgba(46, 204, 113, 0.25); border-color: rgba(46, 204, 113, 0.4); border-left-color: #2ecc71; }

.loot-card.rare { border-left-color: #3498db; color: #3498db; }
.loot-card.rare:hover { box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3); border-color: rgba(52, 152, 219, 0.4); border-left-color: #3498db; }

.loot-card.epic { border-left-color: #9b59b6; color: #9b59b6; }
.loot-card.epic:hover { box-shadow: 0 8px 30px rgba(155, 89, 182, 0.4); border-color: rgba(155, 89, 182, 0.5); border-left-color: #9b59b6; }

.loot-card.legendary { border-left-color: #f39c12; color: #f39c12; }
.loot-card.legendary:hover { box-shadow: 0 8px 35px rgba(243, 156, 18, 0.5); border-color: rgba(243, 156, 18, 0.6); border-left-color: #f39c12; }

.loot-card.legendary::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #f39c12, transparent);
  opacity: 0.8;
}

/* ========== BANK / TRANSACTIONS ========== */
.balance-card {
  background: linear-gradient(135deg, rgba(212,168,67,0.08), rgba(212,168,67,0.02));
  border: 1px solid var(--border-gold);
  border-radius: var(--border-radius-lg);
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary), var(--gold-dark));
}

.balance-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.balance-amount {
  font-family: 'Rajdhani', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--gold-primary);
  text-shadow: 0 0 30px rgba(212,168,67,0.2);
}

.balance-sub {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
}

.balance-sub-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.balance-sub-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.balance-sub-value {
  font-size: 18px;
  font-weight: 700;
}

.balance-sub-value.income { color: var(--success); }
.balance-sub-value.expense { color: var(--danger); }

.tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: rgba(155, 89, 182, 0.03); }

.tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.tx-icon.income {
  background: rgba(46, 204, 113, 0.1);
  color: var(--success);
}

.tx-icon.expense {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger);
}

.tx-info {
  flex: 1;
  min-width: 0;
}

.tx-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.tx-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.tx-amount {
  font-size: 15px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.tx-amount.income { color: var(--success); }
.tx-amount.expense { color: var(--danger); }

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

.tx-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tx-row:hover .tx-actions { opacity: 1; }

/* ========== EVENT CARDS ========== */
.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 20px;
  display: flex;
  gap: 20px;
  transition: all var(--transition-normal);
  position: relative;
}

.event-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.event-date-box {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  padding: 10px;
  min-width: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.event-date-month {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gold-primary);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.event-date-day {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.event-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.event-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.event-meta {
  display: flex;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.event-meta i {
  color: var(--gold-primary);
  opacity: 0.8;
}

.event-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.event-result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ========== DAILY CHECKLIST ========== */
.checklist-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.checklist-item:hover {
  border-color: var(--border-gold);
  background: rgba(155, 89, 182, 0.05);
}

.checklist-item.completed {
  background: rgba(46, 204, 113, 0.05);
  border-color: rgba(46, 204, 113, 0.3);
}

.checklist-item.completed .checklist-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.checklist-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: transparent;
  flex-shrink: 0;
}

.checklist-item.completed .checklist-checkbox {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.checklist-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.checklist-delete {
  padding: 8px;
  color: var(--danger);
  opacity: 0;
  transition: opacity var(--transition-fast);
  background: transparent;
  border: none;
  cursor: pointer;
}

.checklist-item:hover .checklist-delete {
  opacity: 0.7;
}

.checklist-delete:hover {
  opacity: 1 !important;
}

.daily-progress-container {
  text-align: center;
  margin-bottom: 24px;
}

.daily-progress-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 8px solid var(--border-subtle);
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--gold-primary);
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) inset;
}

.daily-progress-circle.complete {
  border-color: var(--success);
  color: var(--success);
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.2);
}

/* ========== BOSS TRACKER ========== */
.tracker-grid {
  display: grid;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  background: var(--bg-card);
}

.tracker-row {
  display: contents;
}

.tracker-cell {
  padding: 10px;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.tracker-row:last-child .tracker-cell { border-bottom: none; }
.tracker-cell:last-child { border-right: none; }

.tracker-header {
  background: var(--bg-input);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--border-gold);
}

.tracker-date-col {
  position: sticky;
  left: 0;
  background: var(--bg-input);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text-primary);
  z-index: 1;
  justify-content: flex-start;
  padding-left: 16px;
  min-width: 120px;
  border-right: 2px solid var(--border-gold);
}

/* Keep corner cell above both scrolling axes */
.tracker-header.tracker-date-col {
  z-index: 3;
}

.tracker-boss-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.tracker-selector {
  width: 100%;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  appearance: none;
}

.tracker-selector:hover {
  border-color: var(--border-gold);
}

.tracker-selector:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}

.tracker-selector option {
  background: var(--bg-dark);
  color: var(--text-primary);
}

/* ========== TOAST ANIMATIONS ========== */
@keyframes slideInToast {
  from { opacity: 0; transform: translateX(60px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slideOutToast {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(60px) scale(0.95); }
}

/* ========== EXTRA STAT ICON COLORS ========== */
.stat-icon.orange {
  background: var(--warning-dim);
  color: var(--warning);
}

/* ========== DASHBOARD HERO RESPONSIVE ========== */
@media (max-width: 768px) {
  .dashboard-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ========== CUSTOM BG-DARK FALLBACK ========== */
:root {
  --bg-dark: #02020a;
}

/* ========== GLOBAL LOADING SPINNER ========== */
.global-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-subtle);
  border-top-color: var(--purple-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 9999;
  display: none;
}

.global-spinner.active {
  display: block;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  .dashboard-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .sidebar-overlay.active {
    display: block;
  }
  
  .menu-toggle {
    display: flex !important;
  }
  
  .tracker-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .page-content {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .loot-grid {
    grid-template-columns: 1fr !important;
  }
  
  .content-grid {
    grid-template-columns: 1fr !important;
  }
  
  .modal-panel {
    width: 95% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  .top-header {
    padding: 0 12px !important;
  }
  
  .search-box {
    min-width: 132px !important;
    max-width: 152px !important;
    padding: 7px 10px !important;
  }
}

/* ========== SETTING ROW STYLES ========== */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ========== TOGGLE SWITCH ========== */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 26px;
  transition: var(--transition-fast);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-muted);
  border-radius: 50%;
  transition: var(--transition-fast);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--purple-primary);
  border-color: var(--purple-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(22px);
  background-color: white;
}

/* ========== ATMOSPHERE REFRESH OVERRIDES ========== */
:root {
  --page-bg-image: none;
  --page-glow-a: rgba(0, 212, 255, 0.18);
  --page-glow-b: rgba(155, 89, 182, 0.16);
  --page-focus-x: 18%;
  --page-focus-y: 20%;
}

.app-layout {
  isolation: isolate;
  overflow: hidden;
}

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

.app-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at var(--page-focus-x) var(--page-focus-y), var(--page-glow-a) 0%, transparent 32%),
    radial-gradient(circle at calc(100% - var(--page-focus-x)) calc(100% - var(--page-focus-y)), var(--page-glow-b) 0%, transparent 34%),
    var(--page-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.88;
  transition: background-image 260ms ease, opacity 260ms ease;
}

.app-scene::after {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.03), transparent 30%),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.025), transparent 24%);
  filter: blur(48px);
  opacity: 0.5;
  animation: pageGlowDrift 18s ease-in-out infinite;
}

.app-scene-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.34;
  mix-blend-mode: screen;
}

.app-scene-glow-one {
  top: 8%;
  left: -8%;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, var(--page-glow-a) 0%, transparent 68%);
  animation: pageGlowDrift 22s ease-in-out infinite;
}

.app-scene-glow-two {
  right: -10%;
  bottom: 0;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, var(--page-glow-b) 0%, transparent 70%);
  animation: pageGlowDrift 26s ease-in-out infinite reverse;
}

.app-scene-noise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 24%);
  background-size: 26px 26px, 26px 26px, auto;
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: sceneGrainDrift 22s linear infinite;
}

.sidebar,
.main-content {
  position: relative;
  z-index: 1;
}

.sidebar {
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.88), rgba(7, 9, 16, 0.94));
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
}

.top-header {
  background: linear-gradient(180deg, rgba(12, 14, 24, 0.88), rgba(10, 12, 22, 0.78));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.search-box,
.header-btn {
  background: rgba(12, 16, 26, 0.56);
  border-color: rgba(255, 255, 255, 0.08);
}

.header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}

.page-title {
  letter-spacing: 1.8px;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.24);
}

.page-content {
  position: relative;
  z-index: 1;
  padding: 30px 28px;
}

.page-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 14%, transparent 84%, rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.page-shell {
  position: relative;
  z-index: 1;
}

.page-section {
  display: block;
  animation: none;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: saturate(0.94);
  will-change: transform, opacity;
}

.page-section.is-visible {
  animation: pageEnter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nav-item,
.btn,
.loot-tab,
.card,
.stat-card {
  transform: translateZ(0);
}

.nav-item {
  overflow: hidden;
  border: 1px solid transparent;
}

.nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 0%, rgba(255, 255, 255, 0.14) 48%, transparent 100%);
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}

.nav-item:hover {
  transform: translateX(4px);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.nav-item:hover::after {
  opacity: 1;
  animation: navSheen 0.55s ease;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(155, 89, 182, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: inset 3px 0 0 var(--purple-primary), 0 14px 26px rgba(0, 0, 0, 0.2);
}

.btn {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.card,
.stat-card {
  background: linear-gradient(180deg, rgba(16, 20, 30, 0.78), rgba(10, 12, 20, 0.84));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.card:hover,
.stat-card:hover {
  transform: translateY(-6px);
}

.loot-tabs,
.tabs {
  background: rgba(10, 12, 20, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.loot-tab,
.tab {
  position: relative;
  overflow: hidden;
}

.loot-tab::before,
.tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.loot-tab:hover::before,
.tab:hover::before {
  opacity: 1;
}

.loot-tab.active {
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
  box-shadow: 0 10px 24px rgba(155, 89, 182, 0.3);
  animation: tabPulse 3.2s ease-in-out infinite;
}

.tab.active {
  color: #fff;
  border-bottom-color: transparent;
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.92), rgba(109, 40, 217, 0.92));
  border-radius: 10px 10px 0 0;
  animation: tabPulse 3.2s ease-in-out infinite;
}

.app-layout[data-page-theme="dashboard"] {
  --page-glow-a: rgba(0, 212, 255, 0.2);
  --page-glow-b: rgba(139, 92, 246, 0.16);
  --page-focus-x: 18%;
  --page-focus-y: 16%;
}

.app-layout[data-page-theme="alliance"] {
  --page-glow-a: rgba(255, 104, 76, 0.18);
  --page-glow-b: rgba(0, 212, 255, 0.14);
  --page-focus-x: 24%;
  --page-focus-y: 24%;
}

.app-layout[data-page-theme="squads"] {
  --page-glow-a: rgba(108, 142, 191, 0.18);
  --page-glow-b: rgba(155, 89, 182, 0.14);
  --page-focus-x: 20%;
  --page-focus-y: 18%;
}

.app-layout[data-page-theme="loot"] {
  --page-glow-a: rgba(155, 89, 182, 0.22);
  --page-glow-b: rgba(243, 156, 18, 0.16);
  --page-focus-x: 22%;
  --page-focus-y: 22%;
}

.app-layout[data-page-theme="clanbank"] {
  --page-glow-a: rgba(46, 204, 113, 0.18);
  --page-glow-b: rgba(243, 156, 18, 0.16);
  --page-focus-x: 18%;
  --page-focus-y: 28%;
}

.app-layout[data-page-theme="events"] {
  --page-glow-a: rgba(236, 72, 153, 0.18);
  --page-glow-b: rgba(0, 212, 255, 0.14);
  --page-focus-x: 24%;
  --page-focus-y: 18%;
}

.app-layout[data-page-theme="statistics"] {
  --page-glow-a: rgba(125, 211, 252, 0.18);
  --page-glow-b: rgba(34, 211, 238, 0.12);
  --page-focus-x: 18%;
  --page-focus-y: 14%;
}

.app-layout[data-page-theme="checkin"] {
  --page-glow-a: rgba(243, 156, 18, 0.18);
  --page-glow-b: rgba(16, 185, 129, 0.14);
  --page-focus-x: 16%;
  --page-focus-y: 20%;
}

.app-layout[data-page-theme="tracker"] {
  --page-glow-a: rgba(239, 68, 68, 0.18);
  --page-glow-b: rgba(96, 165, 250, 0.14);
  --page-focus-x: 24%;
  --page-focus-y: 14%;
}

.app-layout[data-page-theme="admin"] {
  --page-glow-a: rgba(220, 38, 38, 0.18);
  --page-glow-b: rgba(168, 85, 247, 0.16);
  --page-focus-x: 18%;
  --page-focus-y: 18%;
}

.auth-screen {
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(circle at 22% 18%, rgba(61, 193, 255, 0.12), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(255, 92, 72, 0.12), transparent 34%),
    linear-gradient(180deg, #04050b 0%, #090b16 55%, #05060d 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

.auth-screen::before,
.auth-screen::after {
  z-index: 1;
}

.auth-screen::before {
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.22), rgba(4, 5, 10, 0.72));
}

.auth-screen::after {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(4, 5, 10, 0.68) 70%);
}

.auth-scene {
  z-index: 0;
}

.auth-screen[data-mode="register"]::before,
.auth-screen[data-mode="loading"]::before {
  background: linear-gradient(180deg, rgba(5, 7, 14, 0.3), rgba(4, 5, 10, 0.78));
}

.auth-screen[data-mode="loading"] .auth-card {
  display: none !important;
}

.auth-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 1080px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(73, 214, 255, 0.3), transparent 30%),
    radial-gradient(circle at 70% 62%, rgba(255, 110, 84, 0.26), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 58%);
  filter: blur(18px);
  opacity: 0.68;
  mix-blend-mode: screen;
  animation: authOrbFloat 18s ease-in-out infinite;
}

.auth-vortex {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.42;
}

.auth-vortex-one {
  width: min(86vw, 1240px);
  height: min(86vw, 1240px);
  box-shadow:
    0 0 90px rgba(0, 212, 255, 0.05),
    inset 0 0 120px rgba(255, 80, 60, 0.04);
  animation: vortexSpin 24s linear infinite;
}

.auth-vortex-two {
  width: min(70vw, 980px);
  height: min(70vw, 980px);
  box-shadow:
    0 0 70px rgba(255, 92, 72, 0.05),
    inset 0 0 90px rgba(0, 212, 255, 0.04);
  animation: vortexSpin 30s linear infinite reverse;
}

.auth-sigil {
  position: absolute;
  right: 42px;
  bottom: 28px;
  width: 42px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.38), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  clip-path: polygon(50% 0%, 68% 32%, 100% 50%, 68% 68%, 50% 100%, 32% 68%, 0% 50%, 32% 32%);
  opacity: 0.5;
  animation: authSigilPulse 4.5s ease-in-out infinite;
}

.auth-card {
  width: min(100%, 404px);
  padding: 32px 24px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(26, 30, 44, 0.82), rgba(10, 12, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  isolation: isolate;
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 18% 18%, rgba(110, 225, 255, 0.18), transparent 18%),
    radial-gradient(circle at 84% 30%, rgba(255, 98, 74, 0.16), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(155, 89, 182, 0.18), transparent 30%);
  filter: blur(24px);
  pointer-events: none;
}

.auth-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.auth-card-register {
  width: min(100%, 420px);
  padding: 30px 24px 22px;
  background: linear-gradient(180deg, rgba(22, 24, 36, 0.88), rgba(10, 12, 18, 0.94));
}

.auth-card-loading {
  width: min(100%, 320px);
  padding: 28px 22px 22px;
}

.logo-area {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 20px;
}

.logo-area .auth-emblem {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.logo-area .auth-emblem i {
  font-size: 28px;
}

.logo-area h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 10px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffd58d 0%, #ffb347 46%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 170, 70, 0.28));
}

.logo-area p {
  max-width: 240px;
  margin: 0 auto;
  color: rgba(228, 231, 242, 0.68);
  font-size: 13px;
}

.auth-card-loading .logo-area {
  margin-bottom: 0;
}

.auth-message {
  position: relative;
  z-index: 1;
}

@keyframes authOrbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(0.98); }
  50% { transform: translate(-50%, -52%) scale(1.02); }
}

@keyframes vortexSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes authSigilPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.44; }
  50% { transform: scale(1.06); opacity: 0.66; }
}

@keyframes pageGlowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.05); }
}

@keyframes sceneGrainDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2%, 2%, 0); }
}

@keyframes navSheen {
  from { transform: translateX(-140%); opacity: 0; }
  30% { opacity: 0.92; }
  to { transform: translateX(140%); opacity: 0; }
}

@keyframes tabPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(155, 89, 182, 0.24); }
  50% { box-shadow: 0 14px 30px rgba(155, 89, 182, 0.36); }
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: saturate(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

@media (max-width: 768px) {
  .app-scene-glow-one {
    width: 26rem;
    height: 26rem;
    left: -20%;
  }

  .app-scene-glow-two {
    width: 22rem;
    height: 22rem;
    right: -20%;
  }

  .auth-card,
  .auth-card-register,
  .auth-card-loading {
    margin-top: 12px;
  }

  .auth-card-register {
    width: min(100%, 380px);
  }

  .auth-screen[data-mode="login"] {
    justify-content: center;
    padding-inline: 18px;
  }

}

@media (max-width: 640px) {
  .auth-screen {
    padding: 20px 14px;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
  }

  .auth-orb {
    width: 128vw;
  }

  .auth-vortex-one {
    width: 150vw;
    height: 150vw;
  }

  .auth-vortex-two {
    width: 118vw;
    height: 118vw;
  }

  .auth-card,
  .auth-card-register,
  .auth-card-loading {
    width: min(100%, 360px);
    padding: 24px 18px 18px;
  }

  .auth-sigil {
    right: 18px;
    bottom: 16px;
    width: 34px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .auth-orb,
  .auth-vortex,
  .auth-sigil,
  .app-scene::after,
  .app-scene-glow,
  .app-scene-noise,
  .loot-tab.active,
  .tab.active,
  .page-section.is-visible,
  .nav-item:hover::after {
    animation: none !important;
  }

  .page-section {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .nav-item,
  .btn,
  .loot-tab,
  .card,
  .stat-card,
  .sign-in-btn,
  .login-form input {
    transition-duration: 0.01ms !important;
  }
}

/* ========== RESPONSIVE - Tablet (768px - 1023px) ========== */
@media screen and (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
    --header-height: 60px;
    font-size: 13px;
  }

  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  .top-header {
    padding: 0 16px;
    height: var(--header-height);
  }

  .card {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ========== RESPONSIVE - Mobile (< 768px) ========== */
@media screen and (max-width: 767px) {
  :root {
    --sidebar-width: 260px;
    --header-height: 56px;
    font-size: 12px;
  }

  html {
    font-size: 12px;
  }

  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    z-index: 200;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .main-content {
    margin-left: 0;
    min-height: 100vh;
  }

  .top-header {
    padding: 10px 12px;
    min-height: var(--header-height);
    height: auto;
    gap: 10px;
    align-items: flex-start;
  }

  .top-header h1 {
    font-size: 14px !important;
  }

  .header-left,
  .header-right {
    flex: 1 1 100%;
  }

  .header-right {
    gap: 8px;
    justify-content: flex-end;
  }

  .search-box {
    order: 3;
    min-width: 100%;
    max-width: none;
    width: 100%;
  }

  .language-switcher {
    min-height: 36px;
    padding: 0 10px;
  }

  .header-actions {
    gap: 8px;
  }

  .card {
    padding: 12px;
    margin-bottom: 12px;
  }

  .card-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 12px;
  }

  .modal-panel {
    max-width: 100%;
    padding: 12px;
  }

  .modal-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .modal-header h2 {
    font-size: 14px;
  }

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

  .form-group label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  input, textarea, select {
    font-size: 12px;
    padding: 8px !important;
  }

  .btn {
    font-size: 12px;
    padding: 8px 12px;
  }

  .loot-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .loot-card-top {
    grid-template-columns: 1fr;
  }

  .loot-item-image,
  .loot-item-image-button {
    width: 148px;
    height: 148px;
    justify-self: flex-start;
  }

  .raid-entry-grid,
  .raid-entry-admin-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guild-card,
  .squad-card {
    padding: 14px;
  }

  table {
    font-size: 11px;
  }

  th, td {
    padding: 6px 4px;
  }

  .nav-section {
    padding: 10px 0;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-header h2 {
    font-size: 16px;
  }

  .auth-screen {
    padding: 16px;
  }

  .auth-card {
    max-width: 100%;
    padding: 16px;
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions .btn {
    width: 100%;
  }

  .user-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .user-row-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .raid-player-picker {
    max-height: 120px;
  }

  #raidScreenshotUploadForm {
    gap: 8px;
  }
}

/* ========== RESPONSIVE - Small Mobile (< 480px) ========== */
@media screen and (max-width: 479px) {
  :root {
    font-size: 11px;
  }

  .top-header h1 {
    font-size: 12px !important;
  }

  .card {
    padding: 10px;
    border-radius: 8px;
  }

  .btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-label {
    font-size: 10px;
  }

  .modal-panel {
    padding: 10px;
  }

  input, textarea, select {
    font-size: 11px;
    padding: 6px !important;
  }

  .guild-card,
  .squad-card {
    padding: 10px;
  }

.raid-entry-cell {
    min-width: auto;
  }
}

/* ========== FINAL POLISH OVERRIDES ========== */
.card-header {
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.card-header > :first-child {
  min-width: 0;
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.card-title,
.section-title,
.setting-label,
.guild-card-info h3,
.tx-title {
  overflow-wrap: anywhere;
}

.card-subtitle {
  line-height: 1.5;
}

.data-table th,
.data-table td {
  vertical-align: middle;
}

.badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge i {
  font-size: 11px;
  flex-shrink: 0;
}

.btn {
  justify-content: center;
}

.btn-outline {
  color: var(--text-primary);
  border-color: rgba(212, 175, 55, 0.22);
}

.btn-outline:hover {
  border-color: var(--border-gold);
}

.btn-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
}

.btn-icon-danger {
  color: var(--danger);
}

.btn-icon-danger:hover {
  background: var(--danger-dim);
  color: var(--danger);
}

.empty-state {
  gap: 6px;
  background: linear-gradient(180deg, rgba(18, 18, 28, 0.86), rgba(12, 12, 18, 0.8));
  border: 1px dashed rgba(212, 175, 55, 0.2);
  border-radius: var(--border-radius);
}

.empty-state-icon {
  opacity: 0.72;
}

.empty-state h3 {
  color: var(--text-primary);
}

.empty-state p {
  line-height: 1.6;
}

.empty-state-compact {
  min-height: 0;
  padding: 32px 18px;
}

.empty-state-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.content-grid-span-full {
  grid-column: 1 / -1;
}

.guild-card-stats,
.player-meta,
.player-actions,
.user-row-actions,
.loot-card-actions,
.event-meta,
.event-actions {
  flex-wrap: wrap;
}

.player-nickname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-header {
  gap: 12px;
  flex-wrap: wrap;
}

.event-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checklist-text {
  min-width: 0;
}

.role-select {
  min-width: 138px;
  min-height: 34px;
  padding: 4px 10px;
}

.setting-row {
  gap: 14px;
}

.setting-info {
  min-width: 0;
}

.admin-highlight-card {
  border-color: rgba(243, 156, 18, 0.28);
}

.admin-users-table {
  min-width: 760px;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-user-name {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-actions {
  min-width: 150px;
}

.admin-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.admin-shortcut {
  width: 100%;
  min-height: 96px;
  padding: 16px 18px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(16, 16, 24, 0.95), rgba(10, 10, 18, 0.88));
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.admin-shortcut:hover {
  transform: translateY(-2px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.admin-shortcut-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.admin-shortcut-icon.blue {
  background: rgba(52, 152, 219, 0.12);
  color: var(--info);
}

.admin-shortcut-icon.gold {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-primary);
}

.admin-shortcut-icon.purple {
  background: rgba(155, 89, 182, 0.14);
  color: var(--purple-primary);
}

.admin-shortcut-icon.green {
  background: rgba(46, 204, 113, 0.12);
  color: var(--success);
}

.admin-shortcut-copy {
  flex: 1;
  min-width: 0;
}

.admin-shortcut-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.admin-shortcut-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.admin-shortcut-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

.admin-table-empty {
  border: none;
  background: transparent;
  padding: 20px 0;
}

.data-cell-truncate {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
  .player-row,
  .user-row,
  .tx-row,
  .checklist-item {
    align-items: flex-start;
  }

  .player-row,
  .user-row,
  .tx-row {
    flex-wrap: wrap;
  }

  .player-actions,
  .user-row-actions,
  .card-header-actions,
  .event-actions,
  .loot-card-actions {
    width: 100%;
  }

  .player-actions,
  .user-row-actions,
  .event-actions,
  .tx-actions {
    justify-content: flex-end;
  }

  .event-card {
    flex-direction: column;
    gap: 14px;
  }

  .event-date-box {
    min-width: 68px;
  }

  .tx-right {
    align-items: flex-start;
  }

  .tx-actions {
    opacity: 1;
    width: 100%;
  }

  .balance-sub {
    flex-wrap: wrap;
    gap: 16px;
  }

  .admin-shortcuts {
    grid-template-columns: 1fr;
  }

  .admin-shortcut {
    min-height: 88px;
  }
}

@media screen and (max-width: 479px) {
  .empty-state {
    padding: 38px 16px;
  }

  .loot-card-details {
    grid-template-columns: 1fr;
  }
}

.header-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.header-btn.is-attention {
  color: var(--warning);
  border-color: rgba(255, 170, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 170, 0, 0.08), 0 0 18px rgba(255, 170, 0, 0.12);
}

.utility-summary-grid {
  margin-bottom: 20px;
}

.utility-section {
  margin-top: 20px;
}

.utility-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.utility-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius);
  background:
    linear-gradient(180deg, rgba(22, 22, 34, 0.94), rgba(14, 14, 22, 0.9));
}

.utility-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  border: 1px solid transparent;
}

.utility-item-icon.blue {
  color: var(--blue);
  background: var(--blue-dim);
  border-color: rgba(52, 152, 219, 0.22);
}

.utility-item-icon.orange {
  color: var(--warning);
  background: var(--warning-dim);
  border-color: rgba(255, 170, 0, 0.22);
}

.utility-item-icon.red {
  color: var(--danger);
  background: var(--danger-dim);
  border-color: rgba(255, 0, 85, 0.22);
}

.utility-item-icon.green {
  color: var(--success);
  background: var(--success-dim);
  border-color: rgba(0, 255, 136, 0.22);
}

.utility-item-icon.gold {
  color: var(--gold-primary);
  background: rgba(243, 156, 18, 0.15);
  border-color: rgba(243, 156, 18, 0.22);
}

.utility-item-icon.purple {
  color: var(--purple-primary);
  background: rgba(155, 89, 182, 0.15);
  border-color: rgba(155, 89, 182, 0.22);
}

.utility-item-copy {
  min-width: 0;
  flex: 1;
}

.utility-item-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.utility-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.utility-item-description {
  margin-top: 6px;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.utility-item-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.utility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.utility-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius);
  background:
    radial-gradient(circle at top right, rgba(243, 156, 18, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(22, 22, 34, 0.95), rgba(14, 14, 22, 0.9));
}

.utility-account-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.utility-account-copy {
  min-width: 0;
}

.utility-account-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.utility-account-meta {
  margin-top: 4px;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.utility-account-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.utility-settings-card {
  padding: 0 18px;
}

.utility-setting-row {
  padding: 14px 0;
}

.setting-description {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

@media screen and (max-width: 767px) {
  .utility-item {
    flex-wrap: wrap;
  }

  .utility-item-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .utility-account-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .utility-account-badges {
    justify-content: flex-start;
  }

  .utility-actions {
    flex-direction: column;
  }

  .utility-actions .btn {
    width: 100%;
  }
}

/* ===== Exact Login Art Overlay ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-screen[data-mode="login"] {
  justify-content: center;
  align-items: center;
  padding: clamp(14px, 3.4vw, 36px);
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 125, 52, 0.12), transparent 26%),
    radial-gradient(circle at 80% 20%, rgba(86, 198, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #06080f 0%, #03050a 68%, #020308 100%);
}

.auth-screen[data-mode="login"]::before {
  background:
    linear-gradient(180deg, rgba(3, 6, 12, 0.14) 0%, rgba(3, 6, 12, 0.48) 100%);
}

.auth-screen[data-mode="login"]::after {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, rgba(4, 6, 12, 0.38) 62%, rgba(4, 6, 12, 0.72) 100%);
}

.auth-screen[data-mode="login"] .auth-scene {
  display: none !important;
}

.auth-card-login-art {
  width: min(94vw, 980px);
  max-width: 980px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
}

.auth-card-login-art::before,
.auth-card-login-art::after {
  display: none !important;
}

.auth-login-art-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.auth-login-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
}

.auth-login-art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 26px 64px rgba(0, 0, 0, 0.42));
}

.auth-login-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-login-art-input,
.auth-login-art-remember,
.auth-login-art-forgot,
.auth-login-art-submit {
  position: absolute;
  pointer-events: auto;
}

.auth-login-art-input {
  margin: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  outline: none;
  box-shadow: none !important;
  color: #f6efdf;
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(5, 10, 18, 0.65);
  caret-color: #8fdfff;
  padding: 0 clamp(36px, 3.6vw, 56px) 0 clamp(14px, 1.45vw, 20px);
  -webkit-appearance: none;
  appearance: none;
}

.auth-login-art-input::placeholder {
  color: transparent;
}

.auth-login-art-input:focus {
  background: rgba(8, 16, 30, 0.12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 2px rgba(123, 216, 255, 0.3) !important;
}

.auth-login-art-input:-webkit-autofill,
.auth-login-art-input:-webkit-autofill:hover,
.auth-login-art-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f6efdf;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px transparent inset;
}

.auth-login-art-input::-ms-reveal,
.auth-login-art-input::-ms-clear {
  display: none;
}

.auth-login-art-input::-webkit-credentials-auto-fill-button,
.auth-login-art-input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
}

.auth-login-art-email {
  left: 34.15%;
  top: 51%;
  width: 31.35%;
  height: 6.35%;
}

.auth-login-art-password {
  left: 34.15%;
  top: 59%;
  width: 31.35%;
  height: 6.35%;
}

.auth-login-art-remember {
  left: 34.05%;
  top: 67%;
  width: 15.8%;
  height: 4.15%;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

.auth-login-art-checkbox {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.auth-login-art-checkbox-ui {
  position: absolute;
  left: 0.9%;
  top: 15%;
  width: 12%;
  height: 70%;
  border-radius: 0.38em;
  background: rgba(5, 12, 24, 0.76);
  border: 1px solid rgba(127, 214, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-login-art-checkbox:not(:checked) + .auth-login-art-checkbox-ui {
  opacity: 0.96;
}

.auth-login-art-checkbox:focus-visible + .auth-login-art-checkbox-ui {
  opacity: 1;
  box-shadow:
    0 0 0 2px rgba(127, 214, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.auth-login-art-forgot,
.auth-login-art-submit {
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: manipulation;
}

.auth-login-art-forgot {
  left: 50.95%;
  top: 67%;
  width: 15.25%;
  height: 4.2%;
  border-radius: 999px;
}

.auth-login-art-submit {
  left: 33.8%;
  top: 72.5%;
  width: 31.9%;
  height: 8.15%;
  border-radius: 18px;
}

.auth-login-art-forgot:hover,
.auth-login-art-forgot:focus-visible,
.auth-login-art-submit:hover,
.auth-login-art-submit:focus-visible {
  box-shadow: 0 0 0 2px rgba(125, 214, 255, 0.26);
}

.auth-login-art-submit:disabled {
  cursor: progress;
}

.auth-card-login-art .auth-message {
  width: min(100%, 620px);
  min-height: 42px;
  margin: 0;
  justify-content: center;
  text-align: center;
  border-radius: 14px;
}

.auth-art-feedback.show {
  display: flex;
}

.auth-login-art-footer {
  display: flex;
  justify-content: center;
}

.auth-art-register-link {
  padding: 0;
  color: rgba(201, 215, 230, 0.8);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.auth-art-register-link:hover {
  color: #f2d391;
}

@media (max-width: 900px) {
  .auth-card-login-art {
    width: min(96vw, 760px);
  }

  .auth-card-login-art .auth-message {
    width: min(100%, 520px);
  }

  .auth-login-art-input {
    font-size: clamp(11px, 1.85vw, 17px);
  }
}

@media (max-width: 640px) {
  .auth-screen[data-mode="login"] {
    padding: 10px;
  }

  .auth-card-login-art {
    width: min(100%, 96vw);
  }

  .auth-card-login-art .auth-message {
    width: min(100%, 92vw);
    min-height: 38px;
    padding: 10px 12px;
    font-size: 11px;
  }

  .auth-login-art-input {
    border-radius: 10px;
    font-size: clamp(10px, 2.35vw, 13px);
    padding-right: clamp(22px, 6vw, 30px);
    padding-left: clamp(8px, 2.4vw, 12px);
  }

  .auth-login-art-submit {
    border-radius: 12px;
  }

  .auth-art-register-link {
    font-size: 12px;
  }
}

/* ========== Full-Width App Layout Overrides ========== */
.app-layout {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 0;
  left: auto;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  height: 100vh;
}

.main-content {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  margin-left: 0;
  overflow: hidden;
}

.top-header {
  flex-shrink: 0;
  min-width: 0;
}

.page-content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.page-shell,
.page-section,
.content-grid,
.table-container {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.page-shell {
  display: flex;
  flex-direction: column;
}

.raid-page {
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.raid-calendar,
.raid-page #raidCalendarContainer {
  width: 100%;
  max-width: none;
  min-width: 0;
}

@media screen and (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
  }

  .main-content {
    width: 100%;
    height: 100vh;
  }
}

/* ========== COMMAND CENTER / POLISH ========== */
.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: inset 4px 0 0 var(--accent-cyan), 0 16px 28px rgba(0, 0, 0, 0.24);
}

.nav-item.active .nav-label {
  color: var(--text-primary);
}

.stat-card.is-alert {
  border-color: rgba(231, 76, 60, 0.35);
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.12), 0 18px 36px rgba(231, 76, 60, 0.12);
}

.progress-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.dashboard-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  margin-bottom: 28px;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(0, 212, 255, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(8, 18, 28, 0.9), rgba(16, 14, 28, 0.82));
  overflow: hidden;
}

.dashboard-hero-copy h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.dashboard-hero-copy p {
  max-width: 720px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}

.dashboard-kicker {
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.dashboard-hero-tags,
.dashboard-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-ring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 14px;
}

.metric-ring-card {
  padding: 16px 14px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(14, 18, 24, 0.92), rgba(8, 10, 16, 0.86));
  --ring-color: var(--gold-primary);
}

.metric-ring-card.green { --ring-color: var(--success); }
.metric-ring-card.gold { --ring-color: var(--gold-primary); }
.metric-ring-card.purple { --ring-color: var(--purple-primary); }

.metric-ring {
  width: 98px;
  height: 98px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(12, 14, 20, 0.96) 55%, transparent 56%),
    conic-gradient(var(--ring-color) calc(var(--metric-value) * 1%), rgba(255, 255, 255, 0.08) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 14px 30px rgba(0, 0, 0, 0.18);
}

.metric-ring-core {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(7, 10, 16, 0.94);
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--ring-color);
  font-family: 'Rajdhani', sans-serif;
}

.metric-ring-core i {
  font-size: 14px;
}

.metric-ring-core strong {
  font-size: 20px;
}

.metric-ring-label {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-ring-description {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.signal-card {
  padding: 18px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(16, 18, 26, 0.94), rgba(10, 12, 20, 0.88));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signal-card.blue { border-color: rgba(52, 152, 219, 0.2); }
.signal-card.green { border-color: rgba(46, 204, 113, 0.22); }
.signal-card.orange { border-color: rgba(243, 156, 18, 0.22); }
.signal-card.red { border-color: rgba(231, 76, 60, 0.22); }

.signal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.signal-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.signal-card-value {
  font-family: 'Rajdhani', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.signal-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.signal-card-description {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.signal-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signal-card-split {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signal-card-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0 2px;
}

.mini-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-schedule-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mini-schedule-day {
  min-width: 40px;
  padding: 8px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-primary);
  text-transform: uppercase;
}

.mini-schedule-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-schedule-copy strong {
  font-size: 12px;
  color: var(--text-primary);
}

.mini-schedule-copy span {
  font-size: 11px;
  color: var(--text-muted);
}

.member-score span {
  display: block;
  margin-top: 2px;
}

.event-inline-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.guild-class-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.guild-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.guild-class-chip.empty {
  opacity: 0.7;
}

.guild-class-chip-icon {
  font-size: 13px;
}

.guild-comparison-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guild-comparison-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.guild-comparison-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guild-comparison-copy strong {
  color: var(--text-primary);
}

.guild-comparison-copy span {
  color: var(--text-muted);
  font-size: 12px;
}

.guild-comparison-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.guild-comparison-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-primary), var(--accent-cyan));
}

.guild-comparison-score {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.guild-filter-bar {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(140px, 1fr)) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.guild-roster-card {
  overflow: hidden;
}

.guild-player-row {
  gap: 16px;
  padding: 14px 16px;
  min-height: 74px;
}

.guild-player-row .player-class-icon {
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 12px;
}

.guild-player-row .player-meta {
  align-items: center;
  gap: 8px;
}

.squad-card.is-active {
  border-color: rgba(46, 204, 113, 0.28);
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.12), 0 18px 34px rgba(46, 204, 113, 0.08);
}

.squad-occupancy {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.squad-occupancy-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.squad-occupancy-header strong {
  color: var(--text-primary);
}

.squad-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: all var(--transition-fast);
}

.squad-card:hover .squad-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.slot-placeholder-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(155, 89, 182, 0.14);
  color: var(--gold-primary);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.timeline-body {
  min-width: 0;
}

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

.timeline-subtitle {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.timeline-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline-entry.green .timeline-marker { color: var(--success); }
.timeline-entry.blue .timeline-marker { color: var(--info); }
.timeline-entry.red .timeline-marker { color: var(--danger); }
.timeline-entry.orange .timeline-marker { color: var(--warning); }

.stacked-chart {
  display: flex;
  gap: 8px;
  min-height: 44px;
}

.stacked-chart-segment {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.trend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trend-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.trend-week,
.trend-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.trend-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trend-bars span {
  display: block;
  height: 10px;
  border-radius: 999px;
  opacity: 0.88;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.comparison-card,
.checkin-metric-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comparison-card span,
.checkin-metric-card span {
  color: var(--text-muted);
  font-size: 12px;
}

.comparison-card strong,
.checkin-metric-card strong {
  color: var(--text-primary);
  font-size: 20px;
  font-family: 'Rajdhani', sans-serif;
}

.trend-player-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trend-player {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.trend-player strong {
  display: block;
  color: var(--text-primary);
}

.trend-player span {
  color: var(--text-muted);
  font-size: 12px;
}

.trend-player-score {
  color: var(--gold-primary);
  font-weight: 700;
}

.bank-vault-visual {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(212, 175, 55, 0.08));
  color: var(--gold-primary);
  font-size: 28px;
}

.bank-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-chart-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.bank-chart-label,
.bank-chart-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.bank-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bank-chart-bars span {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.bank-chart-bars .income {
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.5), var(--success));
}

.bank-chart-bars .expense {
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.5), var(--danger));
}

.bank-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.event-rsvp-strip {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.event-rsvp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.event-calendar-weekdays {
  margin-bottom: 8px;
}

.event-calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.event-calendar-cell {
  min-height: 110px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-calendar-cell.muted {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
}

.event-calendar-cell.has-event {
  border-color: rgba(0, 212, 255, 0.24);
}

.event-calendar-date {
  font-weight: 700;
  color: var(--text-primary);
}

.event-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-calendar-events span {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.1);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.events-empty-state .empty-state-icon {
  font-size: 48px;
  opacity: 0.9;
}

.checkin-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.checklist-item.celebrate {
  animation: checklistCelebrate 420ms ease;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.22), 0 14px 28px rgba(46, 204, 113, 0.12);
}

@keyframes checklistCelebrate {
  0% { transform: scale(0.98); }
  45% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.tracker-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tracker-legend-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.tracker-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 3px;
  flex-shrink: 0;
}

.tracker-legend-swatch.success { background: var(--success); }
.tracker-legend-swatch.danger { background: var(--danger); }
.tracker-legend-swatch.info { background: var(--info); }
.tracker-legend-swatch.none { background: rgba(255, 255, 255, 0.14); }

.tracker-legend-label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.tracker-legend-description,
.tracker-boss-meta,
.tracker-date-weekday {
  color: var(--text-muted);
  font-size: 11px;
}

.tracker-date-weekday {
  margin-left: 8px;
  text-transform: uppercase;
}

.tracker-readonly-pill {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.tracker-state-none {
  background: rgba(255, 255, 255, 0.02);
}

.tracker-state-none .tracker-selector {
  color: var(--text-muted);
}

.tracker-state-guild {
  background: rgba(46, 204, 113, 0.06);
}

.tracker-state-alliance {
  background: rgba(52, 152, 219, 0.06);
}

.tracker-state-enemy {
  background: rgba(231, 76, 60, 0.08);
}

.admin-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-multi-check {
  width: 16px;
  height: 16px;
  accent-color: var(--gold-primary);
}

.admin-shortcut-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.boss-config-row {
  gap: 10px;
}

.boss-config-row .list-item-content {
  min-width: 0;
}

.setting-description {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.skeleton-card,
.skeleton-stat {
  overflow: hidden;
}

.skeleton-box {
  position: relative;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.skeleton-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-100%);
  animation: skeletonSweep 1.4s infinite;
}

.skeleton-stat {
  min-height: 126px;
}

.skeleton-title {
  width: 34%;
  height: 18px;
  margin-bottom: 12px;
}

.skeleton-line {
  width: 100%;
  height: 12px;
  margin-bottom: 10px;
}

.skeleton-line.short {
  width: 72%;
}

.skeleton-panel {
  width: 100%;
  height: 140px;
  margin-top: 18px;
}

@keyframes skeletonSweep {
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 1024px) {
  .dashboard-hero-shell,
  .guild-filter-bar,
  .bank-filter-grid {
    grid-template-columns: 1fr;
  }

  .guild-comparison-row,
  .trend-row,
  .bank-chart-row {
    grid-template-columns: 1fr;
  }

  .timeline-entry {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .timeline-meta {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .dashboard-ring-grid,
  .dashboard-command-grid,
  .event-calendar-grid {
    grid-template-columns: 1fr;
  }

  .event-calendar-weekdays {
    display: none;
  }

  .event-calendar-cell {
    min-height: 0;
  }

  .guild-player-row {
    align-items: flex-start;
  }

  .squad-card-actions {
    opacity: 1;
    transform: none;
  }
}

.raid-boss-catalog {
  margin-top: 18px;
}

.raid-boss-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.raid-boss-group {
  border: 1px solid color-mix(in srgb, var(--raid-catalog-accent) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--raid-catalog-accent) 10%, rgba(12, 12, 18, 0.94)), rgba(9, 9, 14, 0.98));
  border-radius: 18px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.raid-boss-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.raid-boss-group-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
}

.raid-boss-group-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.raid-boss-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--raid-catalog-accent) 22%, rgba(255, 255, 255, 0.04));
  border: 1px solid color-mix(in srgb, var(--raid-catalog-accent) 45%, transparent);
}

.raid-boss-chip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.raid-boss-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.raid-boss-chip.is-confirmed {
  border-color: rgba(57, 184, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(57, 184, 138, 0.18), 0 0 24px rgba(57, 184, 138, 0.12);
}

.raid-boss-chip-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.raid-boss-chip-tag,
.raid-boss-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.raid-boss-chip-tag {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.raid-boss-chip-check {
  color: #39b88a;
  background: rgba(57, 184, 138, 0.12);
}

@media (max-width: 767px) {
  .raid-boss-catalog-grid {
    grid-template-columns: 1fr;
  }

  .raid-boss-chip {
    grid-template-columns: 1fr;
  }
}