.world-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.world-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

#worldVerifiedBadge.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 234, 255, 0.12);
  color: #00eaff;
  border: 1px solid rgba(0, 234, 255, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.world-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: #a0a3ad;
  font-size: 13px;
}

.world-price-info, .world-rating-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.world-price { font-weight: 700; color: #ffffff; }
.world-price-label { color: #a0a3ad; font-weight: 600; }
.world-stars { color: #ffd76a; letter-spacing: 1px; }

/* Gallery layout */
.world-main-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1115;
}

.world-img {
  width: 100%;
  height: auto;
  display: block;
}

.world-thumbnails {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 1fr);
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.world-thumbnails::-webkit-scrollbar { height: 6px; }
.world-thumbnails::-webkit-scrollbar-thumb { background: #2a2d3a; border-radius: 4px; }

.world-thumbnails img {
  width: 100%;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #2a2d3a;
  scroll-snap-align: start;
}

/* Prev/Next controls injected by JS */
.world-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.world-gallery-prev { left: 8px; }
.world-gallery-next { right: 8px; }
.world-gallery-control:hover { background: rgba(0,0,0,0.6); }

/* Actions area */
.world-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  border-top: 1px solid #2a2d3a;
  padding-top: 12px;
}

.world-purchase-actions,
.world-social-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#worldVrcDemo .vrchat-icon { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .world-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .world-purchase-actions,
  .world-social-actions { justify-content: space-between; }
}

/* Description typography */
.world-description .world-desc {
  color: #c0c3cf;
  line-height: 1.6;
  font-size: 14px;
  margin: 8px 0 12px;
}

/* Specs grid */
.world-specs h3 {
  margin: 12px 0 8px;
  font-size: 14px;
  color: #a0a3ad;
  font-weight: 700;
}

.world-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.world-specs-grid .spec-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  background: #11131a;
}

.spec-item .spec-label {
  color: #a0a3ad;
  font-size: 12px;
  font-weight: 600;
}

.spec-item .spec-value {
  color: #e6e8ee;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .world-specs-grid { grid-template-columns: 1fr; }
}
/* CSS Version: v20250123021000 */
/* Color system */
:root {
  --bg: #0a0b0f;
  --bg-gradient-start: #0a0b0f;
  --bg-gradient-end: #0f1117;
  --surface: #0f1117;
  --text: #e6e6f0;
  --muted: #a0a3ad;
  /* Brand: neon purple + neon cyan */
  --purple: #8a2be2;           /* neon purple - BlueViolet */
  --purple-rgb: 138, 43, 226;
  --cyan: #00eaff;             /* neon cyan */
  --cyan-rgb: 0, 234, 255;
  --primary: var(--purple);
  --secondary: var(--cyan);
  --accent: #ff3b7f;
  --card: #121523;
  --glow: 0 0 18px rgba(var(--purple-rgb), 0.55), 0 0 36px rgba(var(--cyan-rgb), 0.28);
  /* Background grid controls */
  --grid-size: 80px;
  --grid-line: 1px;
}

/* Base */
* { box-sizing: border-box; }
html {
  height: auto;
  overflow-x: hidden;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image:
    /* Animated gradient orbs */
    radial-gradient(1400px 1000px at 90% 0%, rgba(138, 43, 226, 0.18), transparent 50%),
    radial-gradient(1200px 900px at 10% 30%, rgba(0, 234, 255, 0.15), transparent 50%),
    radial-gradient(1000px 800px at 50% 70%, rgba(138, 43, 226, 0.12), transparent 50%),
    radial-gradient(800px 600px at 80% 90%, rgba(0, 234, 255, 0.10), transparent 50%),
    /* Subtle grid pattern overlay */
    linear-gradient(rgba(138, 43, 226, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 43, 226, 0.03) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    80px 80px,
    80px 80px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  background-attachment: fixed;
  position: relative;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(138, 43, 226, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0, 234, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: backgroundPulse 20s ease-in-out infinite;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    linear-gradient(180deg, transparent 0%, rgba(10, 11, 15, 0.3) 100%);
  pointer-events: none;
  z-index: 0;
}

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


.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Ensure main content is above background layers */
main,
section,
article {
  position: relative;
  z-index: 1;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-weight: 700; letter-spacing: 0.02em; }
h2 { font-weight: 800; }
h3 { font-weight: 600; }
p { margin: 0 0 16px; color: var(--muted); }

/* === MODERN SITE HEADER === */
.modern-site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(24px) saturate(180%);
  background: linear-gradient(180deg, 
    rgba(10, 11, 15, 0.95) 0%, 
    rgba(10, 11, 15, 0.9) 100%);
  border-bottom: 1px solid rgba(138, 43, 226, 0.2);
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(138, 43, 226, 0.1) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.08) 0%, 
    transparent 30%,
    transparent 70%,
    rgba(0, 234, 255, 0.08) 100%);
  pointer-events: none;
  opacity: 0.6;
}

.modern-site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(138, 43, 226, 0.4) 20%,
    rgba(0, 234, 255, 0.4) 80%,
    transparent 100%);
  pointer-events: none;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  position: relative;
  gap: 24px;
}

/* Brand Section */
.header-brand {
  display: flex;
  align-items: center;
  z-index: 10;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 21px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 12px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.brand-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.1) 0%, 
    rgba(0, 234, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.brand-link:hover::before {
  opacity: 1;
}

.brand-link:hover {
  transform: translateY(-1px);
}

.brand-link:hover .brand-icon {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 0 16px rgba(0, 234, 255, 0.6));
}

.brand-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(0, 234, 255, 0.4));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.brand-text {
  background: linear-gradient(135deg, #ffffff 0%, rgba(138, 43, 226, 0.9) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}

/* Navigation Section */
.header-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(255, 255, 255, 0.03) 100%);
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(138, 43, 226, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 14px;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(0, 234, 255, 0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 14px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  border-radius: 2px 2px 0 0;
  transition: transform 0.3s ease;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.nav-link:hover::before {
  opacity: 1;
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link[aria-current="page"],
.nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border: 1px solid rgba(138, 43, 226, 0.3);
  box-shadow: 
    0 2px 8px rgba(138, 43, 226, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.nav-link[aria-current="page"]::before,
.nav-link.active::before {
  opacity: 1;
}

.nav-link[aria-current="page"]::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-icon {
  transition: all 0.3s ease;
}

.nav-link:hover .nav-icon {
  transform: scale(1.1);
}

/* User Section */
.header-user-section {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.cta-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(0, 234, 255, 0.15) 100%);
  border: 1px solid rgba(138, 43, 226, 0.25);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
  overflow: hidden;
}

.cta-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-link:hover::before {
  opacity: 1;
}

.cta-link:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.25) 0%, 
    rgba(0, 234, 255, 0.25) 100%);
  border-color: rgba(138, 43, 226, 0.4);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(138, 43, 226, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.cta-link .patreon-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.cta-link:hover .patreon-logo {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Header Sign In Button */
#headerSignInBtn {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(0, 234, 255, 0.15) 100%) !important;
  border: 1px solid rgba(138, 43, 226, 0.25) !important;
  color: #fff !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 8px !important;
  border-radius: 14px !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

#headerSignInBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#headerSignInBtn:hover::before {
  opacity: 1;
}

#headerSignInBtn:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.25) 0%, 
    rgba(0, 234, 255, 0.25) 100%) !important;
  border-color: rgba(138, 43, 226, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 24px rgba(138, 43, 226, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

/* Profile Avatar */
.user-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.profile-avatar:hover {
  border-color: rgba(var(--purple-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--purple-rgb), 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.avatar-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.avatar-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #4caf50;
  border: 2px solid rgba(10, 11, 15, 0.8);
  border-radius: 50%;
}

/* Notification Bell */
.notification-bell {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
}

.notification-bell:hover {
  border-color: rgba(var(--purple-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--purple-rgb), 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  border: 2px solid rgba(10, 11, 15, 0.9);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* Notifications Panel */
.notifications-panel {
  position: absolute;
  right: 0;
  top: 56px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 500px;
  background: rgba(15, 20, 38, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notifications-panel[hidden] {
  display: none !important;
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notifications-title {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  margin: 0;
}

.notifications-action {
  background: none;
  border: none;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.notifications-action:hover {
  background: rgba(var(--cyan-rgb), 0.1);
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}

.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}

.notifications-empty svg {
  margin-bottom: 16px;
}

.notifications-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin-bottom: 4px;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.notification-item.unread {
  background: rgba(var(--purple-rgb), 0.1);
  border-color: rgba(var(--purple-rgb), 0.2);
}

.notification-item.unread:hover {
  background: rgba(var(--purple-rgb), 0.15);
}

.notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
}

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

.notification-title {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.notification-message {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 4px 0;
}

.notification-time {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  margin: 0;
}

.notification-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: 4px;
}

/* Profile Menu - Modern Redesign */
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 280px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  padding: 0;
  z-index: 1000;
  animation: slideDownModern 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.profile-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  z-index: 1;
}

@keyframes slideDownModern {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-menu[hidden] {
  display: none !important;
}

.menu-header {
  padding: 20px 20px 16px;
  position: relative;
  z-index: 2;
}

.menu-user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.menu-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border: 2px solid rgba(138, 43, 226, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 
    0 4px 12px rgba(138, 43, 226, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.menu-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-avatar-initial {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.9) 0%,
    rgba(0, 234, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.menu-user-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-user-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.menu-user-email {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.menu-username {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Verification badge in header */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  flex-shrink: 0;
}

.menu-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.menu-divider {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(138, 43, 226, 0.3) 50%,
    transparent 100%);
  margin: 0;
  position: relative;
  z-index: 2;
}

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  position: relative;
  z-index: 2;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 14px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
}

.menu-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-item:hover::before {
  opacity: 1;
}

.menu-item:hover {
  color: #ffffff;
  transform: translateX(6px);
}

.menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(0, 234, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.menu-item:hover svg {
  color: rgba(0, 234, 255, 1);
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4));
  transform: scale(1.1);
}

.menu-item span {
  position: relative;
  z-index: 1;
  flex: 1;
}

.menu-item.admin-item {
  color: rgba(138, 43, 226, 0.9);
}

.menu-item.admin-item svg {
  color: rgba(138, 43, 226, 0.9);
}

.menu-item.admin-item::before {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(138, 43, 226, 0.08) 100%);
  border-color: rgba(138, 43, 226, 0.25);
}

.menu-item.admin-item:hover {
  color: rgba(138, 43, 226, 1);
}

.menu-item.admin-item:hover svg {
  color: rgba(138, 43, 226, 1);
  filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.5));
}

.menu-item.signout-item {
  color: rgba(239, 68, 68, 0.9);
}

.menu-item.signout-item svg {
  color: rgba(239, 68, 68, 0.9);
}

.menu-item.signout-item::before {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.15) 0%, 
    rgba(239, 68, 68, 0.08) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

.menu-item.signout-item:hover {
  color: #ef4444;
}

.menu-item.signout-item:hover svg {
  color: #ef4444;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
    height: 64px;
  }
  
  .header-nav {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(15, 20, 38, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin: 8px 16px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  
  .nav-link {
    justify-content: flex-start;
    width: 100%;
  }
  
  .cta-link {
    display: none;
  }
  
  .brand-text {
    font-size: 18px;
  }
  
  .brand-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 12px;
  }
  
  .profile-menu {
    right: -12px;
    min-width: 200px;
  }
}


/* Hero - Modern Design */
.section-hero-modern {
  position: relative;
  padding: 140px 0 120px;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.section-hero-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1600px 1200px at 90% 10%, rgba(138, 43, 226, 0.15), transparent 60%),
    radial-gradient(1400px 1000px at 10% 50%, rgba(0, 234, 255, 0.12), transparent 60%),
    radial-gradient(1200px 900px at 50% 80%, rgba(138, 43, 226, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowModern 12s ease-in-out infinite alternate;
}

@keyframes heroGlowModern {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.03); }
}

.hero-background-elements {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: orbFloat 20s ease-in-out infinite;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 234, 255, 0.35) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-delay: 7s;
}

.hero-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.3) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 14s;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(138, 43, 226, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 43, 226, 0.03) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: 0 0;
  opacity: 0.5;
  animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

.hero-container-modern {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-content-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  animation: fadeInUpModern 0.8s ease-out;
}

.hero-badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(0, 234, 255, 0.15) 100%);
  border: 1px solid rgba(138, 43, 226, 0.25);
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  width: fit-content;
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.hero-badge-modern svg {
  width: 16px;
  height: 16px;
  color: rgba(0, 234, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4));
}

.hero-title-modern {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  line-height: 1.1;
  align-items: center;
}

.hero-title-line {
  display: block;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  background: linear-gradient(135deg, 
    #ffffff 0%, 
    rgba(138, 43, 226, 0.95) 30%,
    rgba(138, 43, 226, 0.85) 50%,
    rgba(0, 234, 255, 0.95) 70%,
    var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  animation: fadeInUpModern 0.8s ease-out 0.2s both;
  filter: drop-shadow(0 4px 20px rgba(138, 43, 226, 0.3));
}

.hero-title-line:last-child {
  animation-delay: 0.3s;
}

.hero-subtitle-modern {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
  animation: fadeInUpModern 0.8s ease-out 0.4s both;
}

.hero-actions-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  animation: fadeInUpModern 0.8s ease-out 0.6s both;
}

.hero-features-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(138, 43, 226, 0.2);
  animation: fadeInUpModern 0.8s ease-out 0.8s both;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 500;
}

.hero-feature-item svg {
  width: 20px;
  height: 20px;
  color: rgba(0, 234, 255, 0.9);
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4));
  flex-shrink: 0;
}

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

/* Button Enhancements */
/* === UNIFIED BUTTON SYSTEM === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
}

.btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

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

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  color: #1a1d29;
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #00d4e6 0%, #0088bb 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 234, 255, 0.3);
}

/* Secondary Button */
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

/* Discord Button */
.btn-discord {
  background: #5865f2;
  color: #ffffff;
}

.btn-discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(88, 101, 242, 0.3);
}

/* Button Sizes */
.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

.btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}

/* Button States */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn:active { 
  transform: translateY(0); 
}

.hero-visual-modern {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInUpModern 0.8s ease-out 0.4s both;
}

.hero-visual-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 50%, 
    rgba(138, 43, 226, 0.2) 0%,
    rgba(0, 234, 255, 0.15) 40%,
    transparent 70%);
  animation: pulseGlowModern 6s ease-in-out infinite;
  filter: blur(40px);
}

@keyframes pulseGlowModern {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.1) rotate(5deg); 
  }
}

.hero-visual-card {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 480px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.12) 0%,
    rgba(0, 234, 255, 0.08) 50%,
    rgba(138, 43, 226, 0.12) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 100px rgba(138, 43, 226, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0, 234, 255, 0.15), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(138, 43, 226, 0.12), transparent 50%);
  animation: rotateGlowModern 25s linear infinite;
  pointer-events: none;
}

@keyframes rotateGlowModern {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-visual-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 30px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.03) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.03) 100%);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-logo-modern {
  position: relative;
  z-index: 2;
  width: min(70%, 320px);
  height: auto;
  filter: 
    drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 40px rgba(138, 43, 226, 0.3))
    drop-shadow(0 0 60px rgba(0, 234, 255, 0.2));
  opacity: 0.95;
  animation: logoFloatModern 8s ease-in-out infinite;
  transition: transform 0.3s ease;
}

@keyframes logoFloatModern {
  0%, 100% { 
    transform: translateY(0px) scale(1) rotate(0deg); 
  }
  50% { 
    transform: translateY(-12px) scale(1.03) rotate(2deg); 
  }
}

/* Hero Particles - Modern */
.hero-particles-modern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle-modern {
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, 
    rgba(0, 234, 255, 0.8) 0%,
    rgba(138, 43, 226, 0.8) 100%);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 
    0 0 12px rgba(0, 234, 255, 0.6),
    0 0 24px rgba(138, 43, 226, 0.4);
  animation: particleFloatModern 10s linear infinite;
}

.particle-modern:nth-child(1) {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 8s;
}

.particle-modern:nth-child(2) {
  top: 60%;
  left: 80%;
  animation-delay: 2s;
  animation-duration: 10s;
}

.particle-modern:nth-child(3) {
  top: 80%;
  left: 30%;
  animation-delay: 4s;
  animation-duration: 9s;
}

.particle-modern:nth-child(4) {
  top: 30%;
  left: 70%;
  animation-delay: 1s;
  animation-duration: 11s;
}

.particle-modern:nth-child(5) {
  top: 70%;
  left: 10%;
  animation-delay: 3s;
  animation-duration: 7s;
}

.particle-modern:nth-child(6) {
  top: 45%;
  left: 55%;
  animation-delay: 5s;
  animation-duration: 12s;
}

@keyframes particleFloatModern {
  0% {
    transform: translateY(0px) translateX(0px) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100px) translateX(50px) scale(1.2);
    opacity: 0;
  }
}

/* Hero Modern Buttons */
.btn-primary-modern {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border: 1px solid rgba(138, 43, 226, 0.3);
  color: #ffffff;
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 
    0 4px 16px rgba(138, 43, 226, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.btn-primary-modern:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.3) 0%, 
    rgba(0, 234, 255, 0.3) 100%);
  border-color: rgba(138, 43, 226, 0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(138, 43, 226, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.btn-secondary-modern {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(12px) saturate(180%);
}

.btn-secondary-modern:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-ghost-modern {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.btn-ghost-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}

.scroll-cue-modern {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: bounceCueModern 2.5s ease-in-out infinite;
  z-index: 10;
}

.scroll-cue-modern:hover {
  color: rgba(0, 234, 255, 0.9);
  transform: translateX(-50%) translateY(-4px);
}

.scroll-cue-modern svg {
  width: 24px;
  height: 24px;
  color: rgba(0, 234, 255, 0.8);
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.4));
  transition: all 0.3s ease;
}

.scroll-cue-modern:hover svg {
  color: rgba(0, 234, 255, 1);
  filter: drop-shadow(0 0 12px rgba(0, 234, 255, 0.6));
}

@keyframes bounceCueModern {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-8px);
  }
  60% {
    transform: translateX(-50%) translateY(-4px);
  }
}

/* Hero Responsive */
@media (max-width: 1024px) {
  .hero-orb-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -80px;
  }
  
  .hero-orb-2 {
    width: 400px;
    height: 400px;
    bottom: -120px;
    left: -80px;
  }
  
  .hero-orb-3 {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .section-hero-modern {
    padding: 100px 0 80px;
    min-height: auto;
  }
  
  .hero-content-modern {
    gap: 24px;
  }
  
  .hero-title-line {
    font-size: clamp(36px, 8vw, 56px);
  }
  
  .hero-subtitle-modern {
    font-size: 16px;
    max-width: 100%;
  }
  
  .hero-actions-modern {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-actions-modern .btn {
    width: 100%;
    justify-content: center;
  }
  
  .hero-features-modern {
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    margin-top: 20px;
  }
  
  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    width: 300px;
    height: 300px;
  }
  
  .scroll-cue-modern {
    bottom: 20px;
  }
}

.scroll-cue { 
  position: absolute; 
  bottom: 20px; 
  left: 50%; 
  transform: translateX(-50%); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 8px; 
  color: var(--muted); 
  text-decoration: none; 
  font-size: 12px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.1em; 
  transition: all 0.3s ease; 
  animation: bounceCue 2s ease-in-out infinite;
}

.scroll-cue:hover {
  color: var(--secondary);
  transform: translateX(-50%) translateY(-2px);
}

.scroll-cue svg {
  width: 20px;
  height: 20px;
}

@keyframes bounceCue {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-5px);
  }
  60% {
    transform: translateX(-50%) translateY(-3px);
  }
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sections */
.section { padding: 80px 0; }
.section-alt { padding: 80px 0; background: linear-gradient(180deg, rgba(var(--purple-rgb), 0.07), rgba(0,0,0,0)); border-top: 1px solid rgba(var(--purple-rgb), 0.16); border-bottom: 1px solid rgba(var(--purple-rgb), 0.16); }
.section-lead { max-width: 720px; }

/* Modern Full-Width Dashboard - Complete Redesign */
.modern-dashboard-full {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Dashboard Stats Section */
.dashboard-stats-section {
  width: 100%;
  padding: 40px 0;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.08), rgba(var(--purple-rgb), 0.03));
  border-radius: 24px;
  margin-bottom: 24px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 0 40px;
}

.stats-title {
  font-size: 2.2em;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}

.stats-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.stats-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 0 40px;
}

.stat-card-modern {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.stat-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
}

.stat-icon-modern {
  font-size: 1.8em;
  opacity: 0.8;
}

.stat-content-modern {
  flex: 1;
}

.stat-value-modern {
  font-size: 2em;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label-modern {
  font-size: 0.85em;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-primary .stat-value-modern { color: var(--purple); }
.stat-success .stat-value-modern { color: #10b981; }
.stat-warning .stat-value-modern { color: #f59e0b; }
.stat-info .stat-value-modern { color: #3b82f6; }

/* Quick Actions Bar - Consistent Sizing */
.quick-actions-bar {
  width: 100%;
  padding: 24px 32px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  margin-bottom: 24px;
}

.actions-container {
  max-width: 1200px;
  margin: 0 auto;
}

.actions-title {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px 0;
}

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

/* Action buttons now use unified .btn system */

.action-icon-modern {
  font-size: 1.1em;
}

.action-text-modern {
  flex: 1;
}

/* System Status Bar - Consistent Sizing */
.system-status-bar {
  width: 100%;
  padding: 24px 32px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 16px;
  margin-bottom: 24px;
}

.status-container {
  max-width: 1200px;
  margin: 0 auto;
}

.status-title {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px 0;
}

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

.status-item-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
}

.status-indicator-modern {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator-modern.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.status-label-modern {
  flex: 1;
  font-size: 0.9em;
  color: var(--text);
  font-weight: 600;
}

.status-value-modern {
  font-size: 0.85em;
  color: #10b981;
  font-weight: 700;
}

/* Section Headers - Consistent Sizing */
.section-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 0 32px;
}

.section-title-modern {
  font-size: 1.6em;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.section-description-modern {
  color: var(--muted);
  font-size: 1em;
  margin: 6px 0 0 0;
  line-height: 1.4;
}

.section-actions-modern {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Modern Cards - Consistent Sizing */
/* === UNIFIED CARD SYSTEM === */
.card-modern {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  width: 100%;
  margin-bottom: 24px;
}

.card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-modern:hover {
  border-color: rgba(0, 234, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 234, 255, 0.1);
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.05) 0%, rgba(0, 153, 204, 0.05) 100%);
  border-bottom: 1px solid rgba(0, 234, 255, 0.1);
  border-radius: 6px;
}

.card-title-section {
  text-align: center;
}

.card-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.2);
  flex-shrink: 0;
}

.card-title-section h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-content {
  padding: 0;
}

/* Card Variants */
.card-modern.compact {
  padding: 20px;
}

.card-modern.large {
  padding: 32px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .card-modern {
    padding: 20px;
  }
  
  .card-modern.compact {
    padding: 16px;
  }
  
  .card-modern.large {
    padding: 24px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
  }
  
  .card-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .card-title-section h3 {
    font-size: 16px;
  }
}

.card-content-modern {
  width: 100%;
}

/* Members Stats Modern - Consistent with World Management */
.members-stats-modern {
  display: flex !important;
  gap: 40px !important;
  margin-bottom: 24px !important;
  padding: 24px !important;
  background: rgba(var(--purple-rgb), 0.06) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.15) !important;
  border-radius: 16px !important;
}

.members-stat-modern {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.stat-number-modern {
  font-size: 2.2em !important;
  font-weight: 800 !important;
  color: var(--purple) !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
}

.stat-label-modern {
  font-size: 0.9em !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Table Footer Modern */
.table-footer-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(var(--purple-rgb), 0.15);
}

.pagination-modern {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-info-modern {
  font-size: 0.95em;
  color: var(--muted);
  font-weight: 600;
}

.table-message-modern {
  font-size: 0.9em;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
}

/* Form Modern */
/* === UNIFIED INPUT SYSTEM === */

/* Base Input Styles */
.input-modern {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 17, 21, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
  box-sizing: border-box;
  outline: none;
}

.input-modern:focus {
  border-color: #00eaff;
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.input-modern::placeholder {
  color: #a0a3ad;
  font-weight: 400;
}

.input-modern:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(15, 17, 21, 0.4);
}

/* Input Variants */
.input-modern.large {
  padding: 16px 20px;
  font-size: 16px;
}

.input-modern.small {
  padding: 8px 12px;
  font-size: 12px;
}

.input-modern.search {
  padding-left: 48px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a0a3ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
}

.input-modern.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-modern.success {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Input Groups */
.input-group-modern {
  display: flex;
  align-items: center;
  background: rgba(15, 17, 21, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.input-group-modern:focus-within {
  border-color: #00eaff;
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.input-group-modern .input-modern {
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1;
}

.input-group-modern .btn {
  border-radius: 0;
  margin: 0;
}

/* Responsive Input Styles */
@media (max-width: 768px) {
  .input-modern {
    padding: 14px 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .input-modern.large {
    padding: 16px 18px;
  }
  
  .input-modern.small {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* === UNIFIED FORM SYSTEM === */

/* Base Form Styles */
.form-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.form-modern h4 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

/* Field Styles */
.field-modern {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.field-modern label {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.field-modern input,
.field-modern select,
.field-modern textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 17, 21, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.field-modern input:focus,
.field-modern select:focus,
.field-modern textarea:focus {
  outline: none;
  border-color: #00eaff;
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.field-modern input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(15, 17, 21, 0.4);
}

/* Form Actions */
.form-actions-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Form Messages */
.form-message-modern {
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
}

.form-message-modern.success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.form-message-modern.error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.form-message-modern.info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Help Text */
.field-modern .help-text {
  font-size: 12px;
  color: #a0a3ad;
  margin-top: 4px;
}

/* Responsive Form Styles */
@media (max-width: 768px) {
  .form-modern {
    gap: 16px;
  }
  
  .field-modern {
    margin-bottom: 12px;
  }
  
  .form-actions-modern {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions-modern .btn {
    width: 100%;
  }
}

/* Audit Filters Modern */
.audit-filters-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.filter-group-modern {
  display: flex;
  gap: 12px;
}

.filter-select-modern,
.filter-input-modern {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.9em;
}

.search-group-modern {
  display: flex;
}

.search-input-modern {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.9em;
}

/* Audit Log Modern */
.audit-log-container-modern {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  margin-bottom: 20px;
}

.audit-log-list-modern {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-log-entry-modern {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  font-size: 0.9em;
}

.audit-pagination-modern {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

/* API URL Modern */
.api-url-container-modern {
  margin: 16px 0;
  padding: 16px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 8px;
}

.api-url-modern {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--purple);
  word-break: break-all;
}

.api-actions-modern {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* Roles List Modern */
.roles-list-container-modern {
  margin-top: 20px;
}

.roles-list-modern {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roles-list-modern li {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 8px;
  font-size: 0.9em;
  color: var(--text);
}

/* Tool Actions Modern */
.tool-actions-modern {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tool-content-modern {
  width: 100%;
}

/* Modern Search Forms - Consistent Sizing */
.search-form-modern {
  width: 100%;
  margin-bottom: 24px;
}

.search-input-group-modern {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-input-group-modern input {
  flex: 1;
  padding: 16px 20px;
  font-size: 1em;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(255,255,255,0.06);
}

/* Search button now uses unified .btn system */

/* Modern Table - Consistent Sizing */
.table-container-modern {
  width: 100% !important;
  overflow-x: auto !important;
  margin: 24px 0 !important;
}

.table-modern { 
  width: 100% !important; 
  min-width: 1200px !important;
  border-collapse: separate !important; 
  border-spacing: 0 !important; 
}

.table-head-modern { 
  display: grid !important; 
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr !important; 
  gap: 32px !important; 
  padding: 24px 32px !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--purple) !important;
  background: rgba(var(--purple-rgb), 0.1) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.25) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}

.table-body-modern .table-row-modern { 
  display: grid !important; 
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr !important; 
  gap: 32px !important; 
  padding: 24px 32px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.15) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.table-body-modern .table-row-modern:hover { 
  background: rgba(var(--purple-rgb), 0.06) !important;
  border-color: rgba(var(--purple-rgb), 0.25) !important;
  transform: translateY(-1px) !important;
}

.table-cell-modern { 
  display: flex !important; 
  align-items: center !important; 
  min-height: 24px !important;
  font-size: 0.95em !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
}

.table-cell-modern:last-child { 
  justify-content: flex-end !important; 
  gap: 12px !important; 
}

/* World Management Controls */
.world-management-controls-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  padding: 32px;
  background: rgba(var(--purple-rgb), 0.06);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
}

/* Tools Grid */
.tools-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  width: 100%;
}

.tool-card-modern {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.tool-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
}

.tool-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.08), rgba(138, 43, 226, 0.03));
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.tool-header-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.6), rgba(0, 234, 255, 0.6));
  border-radius: 12px 12px 0 0;
}

.tool-title-modern {
  font-size: 1.25em;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.tool-title-modern svg {
  flex-shrink: 0;
  color: rgba(138, 43, 226, 0.9);
  filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.3));
  width: 20px;
  height: 20px;
}

/* Remove inline margin from SVG when inside tool-title-modern */
.tool-title-modern svg[style*="margin-right"] {
  margin-right: 0 !important;
}

/* Responsive adjustments for tool-header-modern */
@media (max-width: 768px) {
  .tool-header-modern {
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  
  .tool-title-modern {
    font-size: 1.1em;
    gap: 8px;
  }
  
  .tool-title-modern svg {
    width: 18px;
    height: 18px;
  }
}

.tool-badge-modern {
  background: rgba(var(--purple-rgb), 0.12);
  color: var(--purple);
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.tool-description-modern {
  color: var(--muted);
  font-size: 0.95em;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .stats-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  
  .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  
  .status-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 1200px) {
  .dashboard-stats-section,
  .quick-actions-bar,
  .system-status-bar {
    padding: 32px 24px;
  }
  
  .section-header-modern {
    padding: 0 24px;
  }
  
  .card-modern {
    padding: 32px 24px;
  }
  
  .table-modern {
    min-width: 1200px;
  }
  
  .table-head-modern,
  .table-body-modern .table-row-modern {
    grid-template-columns: 2.5fr 2fr 1fr 1fr 1.2fr 1.2fr 1.5fr;
    gap: 32px;
    padding: 28px 40px;
  }
  
  .tools-grid-modern {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .modern-dashboard-full {
    gap: 24px;
  }
  
  .dashboard-stats-section,
  .quick-actions-bar,
  .system-status-bar {
    padding: 24px 20px;
  }
  
  .section-header-modern {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    padding: 0 20px;
  }
  
  .section-actions-modern {
    justify-content: center;
  }
  
  .card-modern {
    padding: 24px 20px;
  }
  
  .stats-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 0 20px;
  }
  
  .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .status-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  
  .members-stats-modern {
    flex-direction: column;
    gap: 24px;
  }
  
  .world-management-controls-modern {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table-modern {
    min-width: 1000px;
  }
  
  .table-head-modern,
  .table-body-modern .table-row-modern {
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 1fr 1.2fr;
    gap: 24px;
    padding: 24px 32px;
  }
}

/* Tool Cards - Overridden by Clean Design */

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.action-btn.primary {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.action-btn.primary:hover {
  background: rgba(var(--purple-rgb), 0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-1px);
}

.action-btn.secondary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.action-btn.secondary:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.action-btn.ghost {
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
}

.action-btn.ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(var(--purple-rgb), 0.2);
}

.action-icon {
  font-size: 1.2em;
}

.action-text {
  flex: 1;
}

/* Status List */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

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

.status-indicator.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.status-indicator.offline {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.status-label {
  flex: 1;
  font-size: 0.9em;
  color: var(--text);
  font-weight: 500;
}

.status-value {
  font-size: 0.85em;
  color: var(--muted);
  font-weight: 600;
}

/* Activity Feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
}

.activity-icon {
  font-size: 1.1em;
  opacity: 0.8;
  margin-top: 2px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 0.9em;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.activity-time {
  font-size: 0.8em;
  color: var(--muted);
}

/* Advanced Tools */
.advanced-tools {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Admin Dashboard Layout */
.admin-dashboard-wrapper {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

/* Admin Sidebar */
.admin-sidebar {
  width: 260px;
  background: rgba(15, 17, 23, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.sidebar-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.sidebar-logo-text {
  color: #fff;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu li {
  margin: 0;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #a0a3ad;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  font-size: 14px;
  font-weight: 500;
}

.sidebar-menu-item:hover {
  background: rgba(138, 43, 226, 0.1);
  color: #fff;
  border-left-color: rgba(138, 43, 226, 0.5);
}

.sidebar-menu-item.active {
  background: rgba(138, 43, 226, 0.15);
  color: #fff;
  border-left-color: var(--purple);
}

.sidebar-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a0a3ad;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.sidebar-footer-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sidebar-footer-link svg {
  width: 18px;
  height: 18px;
}

/* Admin Main Content */
.admin-main-content {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Admin Header */
.admin-header {
  background: rgba(15, 17, 23, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.sidebar-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb-link {
  color: #a0a3ad;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: #fff;
}

.breadcrumb-separator {
  color: #666;
}

.breadcrumb-current {
  color: #fff;
  font-weight: 600;
}

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

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

.admin-search-input {
  width: 300px;
  padding: 10px 16px 10px 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.admin-search-input:focus {
  outline: none;
  border-color: var(--purple);
  background: rgba(255, 255, 255, 0.08);
}

.admin-search-input::placeholder {
  color: #666;
}

.admin-search-icon {
  position: absolute;
  left: 12px;
  color: #666;
  pointer-events: none;
}

.admin-notifications {
  position: relative;
}

.admin-notification-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  position: relative;
  transition: background 0.2s ease;
}

.admin-notification-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.admin-user-menu {
  position: relative;
}

.admin-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-user-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-user-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.admin-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(15, 17, 23, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-width: 240px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.user-dropdown-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

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

.user-dropdown-name {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-email {
  color: #a0a3ad;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.user-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Admin Page Content */
.admin-page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Admin Page - Full Width Single Page Layout */
.admin-page-full {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.admin-sections-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.admin-section {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Admin Sidebar Backdrop */
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
}

@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }
  
  .admin-sidebar.open {
    transform: translateX(0);
  }
  
  .admin-sidebar.open ~ .admin-sidebar-backdrop,
  .admin-sidebar-backdrop.active {
    display: block;
  }
  
  .admin-main-content {
    margin-left: 0;
  }
  
  .sidebar-toggle {
    display: block;
  }
  
  .admin-search-input {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 12px 16px;
  }
  
  .admin-page-content {
    padding: 16px;
  }
  
  .admin-search {
    display: none;
  }
  
  .admin-breadcrumb {
    font-size: 12px;
  }
  
  .admin-sections-container {
    gap: 32px;
  }
  
  .dashboard-stats-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .action-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .status-items-grid {
    grid-template-columns: 1fr;
  }
  
  .tool-form-modern .form-row {
    grid-template-columns: 1fr;
  }
  
  .admin-table {
    font-size: 12px;
  }
  
  .admin-table thead th,
  .admin-table tbody td {
    padding: 10px 12px;
  }
}

.admin-dashboard { 
  display: grid; 
  grid-template-columns: 340px 1fr 300px; 
  gap: 24px; 
  align-items: start; 
  max-width: 1800px;
  margin: 0 auto;
}

/* Account page layout */
.account-dashboard {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.account-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 1024px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Profile picture section */
.profile-picture-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-picture-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-picture-hint {
  text-align: center;
}

.hint-text {
  font-size: 15px;
  color: #ffffff;
  margin: 0;
  font-weight: 500;
}

.hint-subtext {
  font-size: 13px;
  color: #a0a3ad;
  margin: 4px 0 0 0;
}

.profile-info {
  text-align: center;
  width: 100%;
}

.profile-name {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.profile-email {
  font-size: 15px;
  color: #a0a3ad;
  margin: 0;
}

.avatar-message {
  margin: 12px 0;
  font-size: 14px;
  color: #a0a3ad;
  text-align: center;
  min-height: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, margin 0.3s ease;
}

.avatar-message:not(:empty) {
  height: auto;
  min-height: 20px;
}

.vrchat-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vrchat-section h4 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

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

.section-label {
  margin: 0 0 10px 0;
  color: #a0a3ad;
  font-size: 14px;
  font-weight: 500;
}

.discord-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.discord-status {
  margin-top: 8px;
}

.discord-indicator {
  color: #5865f2;
  font-weight: 500;
}

.discord-hint {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: #a0a3ad;
}

.discord-hint code {
  background: #1e1e2e;
  padding: 2px 6px;
  border-radius: 4px;
  color: #89dceb;
  font-family: monospace;
}

@media (max-width: 768px) {
  /* Header Mobile Styles */
  .nav-container {
    gap: 16px;
    padding: 12px 0;
  }
  
  .brand {
    font-size: 18px;
  }
  
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 11, 15, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(var(--purple-rgb), 0.15);
    padding: 16px 20px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  
  .nav-toggle {
    display: block;
  }
  
  .cta {
    padding: 10px 16px;
    font-size: 13px;
    margin-left: auto;
  }
  
  .userbox {
    margin-left: 8px;
  }
  
  .avatar-btn {
    width: 36px;
    height: 36px;
  }
  
  .user-menu {
    right: -20px;
    min-width: 180px;
  }
  
  .account-dashboard {
    padding: 0 16px;
  }
  
  .account-layout {
    gap: 24px;
  }
  
  .profile-picture-section {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .profile-name {
    font-size: 20px;
  }
  
  .profile-email {
    font-size: 14px;
  }
  
  .vrchat-section h4 {
    font-size: 16px;
  }
  
  /* Hero Mobile Styles */
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  
  .hero-copy {
    padding: 24px;
  }
  
  .hero-actions {
    justify-content: center;
    gap: 10px;
  }
  
  .btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .hero-visual {
    height: 300px;
  }
  
  .hero-logo {
    width: min(60%, 280px);
  }
  
  .scroll-cue {
    bottom: 16px;
    font-size: 11px;
  }
  
  .scroll-cue svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 1400px) { 
  .admin-dashboard { 
    grid-template-columns: 360px 1fr 300px; 
    gap: 16px; 
  } 
}
@media (max-width: 1200px) { 
  .admin-dashboard { 
    grid-template-columns: 1fr 300px; 
    gap: 16px; 
  }
  .dashboard-left-sidebar { display: none; }
}
@media (max-width: 1024px) { 
  .admin-dashboard { 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  .dashboard-left-sidebar { display: none; }
  .dashboard-sidebar { display: none; }
}

.dashboard-left-sidebar { 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); 
  border: 1px solid rgba(var(--purple-rgb), 0.22); 
  border-radius: 16px; 
  padding: 16px; 
  position: sticky; 
  top: 84px; 
  height: calc(100vh - 100px);
  overflow-y: auto;
  max-height: calc(100vh - 100px);
  z-index: 2;
}
.dashboard-left-sidebar .card { 
  background: transparent; 
  border: 0; 
  box-shadow: none; 
  padding: 0; 
}

.dashboard-sidebar { 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); 
  border: 1px solid rgba(var(--purple-rgb), 0.22); 
  border-radius: 16px; 
  padding: 16px; 
  position: sticky; 
  top: 84px; 
  height: max-content;
  max-height: calc(100vh - 100px);
}
.dashboard-sidebar .card { 
  background: transparent; 
  border: 0; 
  box-shadow: none; 
  padding: 0; 
}

/* Left sidebar scrollbar (audit log only) */
.dashboard-left-sidebar::-webkit-scrollbar {
  width: 6px;
}

.dashboard-left-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dashboard-left-sidebar::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.dashboard-left-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* Audit Log Styles */
.audit-log-list {
  background: #0f1115;
}

.audit-entry {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid #1a1d29;
  transition: background-color 0.2s ease;
}

.audit-entry:hover {
  background: rgba(255, 255, 255, 0.02);
}

.audit-entry:last-child {
  border-bottom: none;
}

.audit-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.audit-icon.user-verify { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.audit-icon.user-unverify { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.audit-icon.user-ban { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.audit-icon.user-unban { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.audit-icon.role-grant { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.audit-icon.role-revoke { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.audit-icon.role-create { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.audit-icon.role-delete { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

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

.audit-action {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.audit-details {
  font-size: 12px;
  color: #a0a3ad;
  margin-bottom: 4px;
  line-height: 1.4;
  word-break: break-word;
}

.audit-meta {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-timestamp {
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.audit-admin {
  color: #00eaff;
  font-size: 10px;
}

.audit-user {
  color: #8b5cf6;
  font-size: 10px;
}

.audit-log-container::-webkit-scrollbar {
  width: 4px;
}

.audit-log-container::-webkit-scrollbar-track {
  background: #1a1d29;
}

.audit-log-container::-webkit-scrollbar-thumb {
  background: #2a2d3a;
  border-radius: 2px;
}

.audit-log-container::-webkit-scrollbar-thumb:hover {
  background: #3a3d4a;
}

/* Cards */
.feature-grid { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 24px; 
  align-items: stretch; 
}

.card { 
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important; 
  border: 1px solid rgba(var(--purple-rgb), 0.2) !important; 
  border-radius: 16px !important; 
  padding: 32px !important; 
  box-shadow: 0 6px 24px rgba(0,0,0,0.1) !important; 
  transition: all 0.3s ease !important;
}

.feature-card { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  overflow: hidden; 
  transition: all 0.3s ease;
  position: relative;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--purple-rgb), 0.1);
}

.feature-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
}

.feature-img { 
  width: 100%; 
  height: clamp(160px, 16vw, 220px); 
  object-fit: cover; 
  display: block; 
  border: 1px solid rgba(var(--purple-rgb), 0.16); 
  background: #0e1120;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-img {
  transform: scale(1.05);
}

.feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}

.feature-card:hover .feature-overlay {
  opacity: 1;
}

.feature-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-premium {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: #0a0b0f;
}

.tag-popular {
  background: #ff6b35;
  color: #fff;
}

.tag-new {
  background: #00ff88;
  color: #0a0b0f;
}

.tag-nightclub {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--secondary);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
}

.tag-bar {
  background: rgba(var(--cyan-rgb), 0.2);
  color: var(--cyan);
  border: 1px solid rgba(var(--cyan-rgb), 0.3);
}

.tag-party {
  background: rgba(255, 107, 53, 0.2);
  color: #ff6b35;
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.feature-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-content h3 { 
  margin-bottom: 8px; 
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.feature-content p { 
  margin: 0; 
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.feature-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

.feature-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price {
  font-size: 20px;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1;
}

.price-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.feature-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stars {
  color: #ffd700;
  font-size: 14px;
  line-height: 1;
}

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

.feature-card .btn { 
  margin-top: auto; 
  width: 100%; 
  padding: 12px 16px;
  font-weight: 600;
}

.card h3 { color: #fff; margin-bottom: 8px; letter-spacing: 0.01em; }
.card p { color: var(--muted); }

/* Forms */
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form { 
  display: grid; 
  gap: 12px; 
}

.field { 
  display: grid; 
  gap: 6px; 
}

.field label { 
  color: #c9c9d6; 
  font-size: 14px; 
}

.field input { 
  background: #0f1426; 
  color: #fff; 
  border: 1px solid rgba(var(--cyan-rgb), 0.22); 
  border-radius: 12px; 
  padding: 10px 12px; 
  outline: none; 
}

.field input:focus { 
  border-color: rgba(var(--purple-rgb), 0.5); 
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.18); 
}
.help-text { color: var(--muted); font-size: 12px; }
.card ul { color: var(--text); }

/* Page layout helpers */
.page-title { margin: 0 0 12px; font-size: clamp(24px, 4vw, 36px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 920px) { .grid-2 { grid-template-columns: 1fr; } }

/* Form polish */
.form .field label { font-weight: 700; color: #d8dae3; letter-spacing: 0.01em; }
.form .field input, .form .field select { width: 100%; }
.card h3 { margin-top: 0; font-weight: 800; }

/* Account profile header */
.profile-header { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.profile-avatar { position: relative; width: 64px; height: 64px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(var(--purple-rgb), 0.28); background: #0f1426; }
.profile-meta { display: grid; gap: 2px; }
.profile-name { color: #fff; font-weight: 800; letter-spacing: 0.01em; }
.profile-sub { color: var(--muted); font-size: 13px; }

/* Lists */
.list { list-style: none; margin: 6px 0 0 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgba(var(--purple-rgb), 0.18); border-radius: 10px; background: rgba(255,255,255,0.02); }
.list li + li { margin-top: 8px; }
.list .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tier { background: linear-gradient(180deg, rgba(var(--cyan-rgb), 0.07), rgba(var(--purple-rgb), 0.07)); border: 1px solid rgba(var(--purple-rgb), 0.26); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.tier ul { margin: 0 0 8px 18px; color: var(--text); }

/* Join */
.join-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 18px; align-items: center; }
.join-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.event-card { background: #0e1222; border: 1px solid rgba(var(--cyan-rgb), 0.22); border-radius: 16px; padding: 18px; text-align: center; box-shadow: inset 0 0 40px rgba(var(--purple-rgb), 0.09); }
.event-status { color: var(--secondary); font-weight: 800; margin-bottom: 8px; }
.event-loading { color: #fff; font-size: 20px; margin-bottom: 8px; }

/* Zones */
.zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zone { background: var(--card); border: 1px solid rgba(var(--purple-rgb), 0.22); border-radius: 16px; padding: 16px; }
.zone ul { margin: 6px 0 0 18px; }

/* Carousel */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.slide { scroll-snap-align: start; }
.ph { height: 200px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.26), rgba(var(--cyan-rgb), 0.26)); border: 1px dashed rgba(255,255,255,0.22); }

/* Footer */
.site-footer { border-top: 1px solid rgba(var(--purple-rgb), 0.22); padding: 60px 0 28px; background: #0b0e17; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.footer-content { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand { }
.footer-logo { width: 48px; height: 48px; margin-bottom: 12px; }
.footer-tagline { color: rgba(255, 255, 255, 0.6); font-size: 14px; margin: 0; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-column { }
.footer-title { color: #ffffff; font-size: 16px; font-weight: 600; margin: 0 0 16px 0; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-link { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.footer-link:hover { color: #ffffff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer-copyright { color: rgba(255, 255, 255, 0.5); font-size: 14px; margin: 0; }
.footer-social { display: flex; gap: 12px; }
.social-link { color: rgba(255, 255, 255, 0.6); transition: color 0.2s ease; }
.social-link:hover { color: #ffffff; }
.footer-nav { display: flex; gap: 14px; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: #fff; }

@media (max-width: 768px) {
  .footer-content { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Utilities */
.rules { color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }

/* Responsive */
@media (max-width: 920px) {
  .hero-container { grid-template-columns: 1fr; }
  .join-grid { grid-template-columns: 1fr; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .tier-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 20px;
  }
  
  .feature-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .feature-rating {
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .zones { grid-template-columns: 1fr; }
  .feature-grid, .tier-grid { grid-template-columns: 1fr; }
  .carousel { grid-auto-columns: 88%; }
}

@media (max-width: 920px) {
  .modal-body { grid-template-columns: 1fr; }
}
.modal-tabs { display: flex; gap: 8px; margin: 0 0 10px; }
.modal .form .field + .field { margin-top: 8px; }
.modal .form .btn { width: 100%; }

/* World Details Modal */
.modal.active { display: block; }

.world-modal-dialog {
  max-width: min(85vw, 1000px);
  width: auto;
  margin: 4vh auto;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Optimize animations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Dynamic sizing based on content */
  min-height: 45vh;
  min-width: 500px;
}

.world-modal-body {
  padding: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
}

.world-modal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  /* Dynamic grid that adapts to content */
  grid-template-rows: 1fr;
  /* Better proportions for compact design */
  min-width: 0;
}

.world-modal-gallery {
  background: #0a0b0f;
  border-radius: 16px 0 0 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-height: 0;
  /* Better space utilization */
  justify-content: flex-start;
  align-items: center;
}

.world-main-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/10;
  flex-shrink: 0;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Much more compact sizing */
  max-width: 100%;
  width: 100%;
  max-height: 300px;
}

.world-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.16);
  transition: transform 0.3s ease;
  display: block;
  /* Optimize rendering */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.world-img:hover {
  transform: scale(1.05) translateZ(0);
}

.world-img:not([src]) {
  display: none;
}

.world-image-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.world-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Gallery Label */
.gallery-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--purple-rgb), 0.8);
  margin-bottom: 8px;
  text-align: center;
  padding: 8px;
  background: rgba(var(--purple-rgb), 0.1);
  border-radius: 6px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  /* Ensure it's always visible */
  display: block;
  width: 100%;
}

/* Enhanced Thumbnail Gallery */
.world-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Ensure it's always visible */
  min-height: 40px;
  align-items: center;
  justify-content: center;
  /* Better organization */
  max-width: 100%;
  overflow-x: auto;
}

.world-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.world-thumbnails::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.world-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(var(--purple-rgb), 0.5);
  border-radius: 2px;
}

/* Optimize thumbnails */
.thumbnail {
  width: 50px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.8;
  /* Optimize rendering */
  will-change: transform, border-color;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.thumbnail:hover {
  opacity: 1;
  border-color: rgba(var(--purple-rgb), 0.5);
  transform: scale(1.05) translateZ(0);
}

.thumbnail.active {
  opacity: 1;
  border-color: rgba(var(--purple-rgb), 0.8);
  box-shadow: 0 0 8px rgba(var(--purple-rgb), 0.3);
}

.world-modal-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  /* Better spacing for compact design */
  justify-content: flex-start;
}

.world-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.world-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.world-price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.world-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--secondary);
  line-height: 1;
}

.world-price-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.world-rating-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.world-stars {
  color: #ffd700;
  font-size: 16px;
  line-height: 1;
}

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

.world-description {
  padding: 16px 0;
  border-top: 1px solid rgba(var(--purple-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.16);
}

.world-desc {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-size: 15px;
}

.world-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-features h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.world-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.world-features-list li {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(var(--purple-rgb), 0.08);
  border: 1px solid rgba(var(--purple-rgb), 0.16);
  border-radius: 8px;
  position: relative;
  padding-left: 24px;
}

.world-features-list li::before {
  content: '✓';
  position: absolute;
  left: 8px;
  top: 8px;
  color: var(--secondary);
  font-weight: bold;
  font-size: 12px;
}

.world-specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-specs h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.world-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(var(--cyan-rgb), 0.08);
  border: 1px solid rgba(var(--cyan-rgb), 0.16);
  border-radius: 8px;
}

.spec-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.spec-value {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.world-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.16);
}

.world-purchase-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.world-purchase-actions .btn {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 600;
}

.world-social-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.world-social-actions .btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.world-social-actions .btn.favorited {
  color: #ff6b35;
  border-color: rgba(255, 107, 53, 0.3);
  background: rgba(255, 107, 53, 0.1);
}

.world-social-actions .btn.favorited:hover {
  background: rgba(255, 107, 53, 0.2);
  border-color: rgba(255, 107, 53, 0.5);
}

/* Large Screen Optimizations */
@media (min-width: 1400px) {
  .world-modal-dialog {
    max-width: min(80vw, 900px);
    min-width: 600px;
  }
  
  .world-modal-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .world-modal-gallery {
    padding: 24px;
  }
  
  .world-modal-info {
    padding: 24px;
  }
  
  .world-title {
    font-size: 24px;
  }
  
  .world-description {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Ultra-wide Screen Optimizations */
@media (min-width: 1800px) {
  .world-modal-dialog {
    max-width: min(75vw, 1000px);
    min-width: 700px;
  }
  
  .world-modal-content {
    grid-template-columns: 1.1fr 0.9fr;
  }
  
  .world-modal-gallery {
    padding: 28px;
  }
  
  .world-modal-info {
    padding: 28px;
  }
  
  .world-title {
    font-size: 26px;
  }
  
  .world-description {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* Mobile Responsive for World Modal */
@media (max-width: 920px) {
  .world-modal-dialog {
    max-width: 95vw;
    margin: 2vh auto;
  }
  
  .world-modal-content {
    grid-template-columns: 1fr;
  }
  
  .world-modal-gallery {
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }
  
  .world-modal-info {
    padding: 16px;
  }
  
  .world-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .world-rating-info {
    align-items: flex-start;
  }
  
  .world-features-list {
    grid-template-columns: 1fr;
  }
  
  .world-specs-grid {
    grid-template-columns: 1fr;
  }
  
  .world-purchase-actions {
    flex-direction: column;
  }
  
  .world-purchase-actions .btn {
    min-width: auto;
  }
}

/* Modern World Modal Redesign */
.world-modal-dialog-modern {
  max-width: min(90vw, 1200px);
  width: auto;
  margin: 5vh auto;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 24px;
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
}

.world-modal-dialog-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  z-index: 1;
}

.world-modal-dialog-modern {
  min-height: 50vh;
  min-width: 600px;
}

.world-modal-close-modern {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.world-modal-close-modern:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border-color: rgba(138, 43, 226, 0.4);
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 
    0 4px 12px rgba(138, 43, 226, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.world-modal-close-modern svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.world-modal-body-modern {
  padding: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.world-modal-content-modern {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.world-modal-gallery-modern {
  background: linear-gradient(135deg, 
    rgba(10, 11, 15, 0.95) 0%, 
    rgba(15, 17, 23, 0.95) 100%);
  border-radius: 24px 0 0 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  min-height: 0;
  border-right: 1px solid rgba(138, 43, 226, 0.15);
}

.world-main-image-modern {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/10;
  flex-shrink: 0;
  background: rgba(26, 29, 41, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.world-img-modern {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s ease;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.world-img-modern:hover {
  transform: scale(1.02) translateZ(0);
}

.world-img-modern:not([src]) {
  display: none;
}

.world-image-overlay-modern {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.world-tags-modern {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: auto;
}

.world-tags-modern .tag {
  padding: 6px 12px;
  background: rgba(0, 234, 255, 0.15);
  border: 1px solid rgba(0, 234, 255, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #00eaff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
}

.world-thumbnails-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 60px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
}

.world-thumbnails-modern::-webkit-scrollbar {
  height: 6px;
}

.world-thumbnails-modern::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.world-thumbnails-modern::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.3);
  border-radius: 3px;
}

.world-thumbnails-modern::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 234, 255, 0.5);
}

.world-thumbnails-modern .thumbnail {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.7;
  will-change: transform, border-color;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.world-thumbnails-modern .thumbnail:hover {
  opacity: 1;
  border-color: rgba(0, 234, 255, 0.5);
  transform: scale(1.05) translateZ(0);
}

.world-thumbnails-modern .thumbnail.active {
  opacity: 1;
  border-color: rgba(0, 234, 255, 0.8);
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.4);
}

.world-modal-info-modern {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.5) 0%, rgba(20, 23, 33, 0.5) 100%);
}

.world-modal-info-modern::-webkit-scrollbar {
  width: 8px;
}

.world-modal-info-modern::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.world-modal-info-modern::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.3);
  border-radius: 4px;
}

.world-modal-info-modern::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 234, 255, 0.5);
}

.world-header-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.world-header-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-title-modern {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.world-meta-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.world-price-info-modern {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.world-price-modern {
  font-size: 32px;
  font-weight: 900;
  color: #00eaff;
  line-height: 1;
  background: linear-gradient(135deg, #00eaff 0%, #8a2be2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.world-price-label-modern {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.world-rating-info-modern {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.world-stars-modern {
  color: #ffd700;
  font-size: 18px;
  line-height: 1;
}

.world-rating-text-modern {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.world-description-modern {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.world-desc-wrapper {
  padding: 0;
}

.world-desc-modern {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin: 0;
  font-size: 16px;
}

.world-features-modern,
.world-specs-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.world-section-header-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.world-section-header-modern svg {
  color: #00eaff;
  flex-shrink: 0;
}

.world-section-title-modern {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.world-features-list-modern {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.world-features-list-modern li {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding: 12px 16px;
  background: rgba(0, 234, 255, 0.08);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 10px;
  position: relative;
  padding-left: 36px;
  transition: all 0.2s ease;
}

.world-features-list-modern li:hover {
  background: rgba(0, 234, 255, 0.12);
  border-color: rgba(0, 234, 255, 0.3);
  transform: translateX(4px);
}

.world-features-list-modern li::before {
  content: '✓';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #00eaff;
  font-weight: bold;
  font-size: 16px;
}

.world-specs-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.world-specs-grid-modern .spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(138, 43, 226, 0.08);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.world-specs-grid-modern .spec-item:hover {
  background: rgba(138, 43, 226, 0.12);
  border-color: rgba(138, 43, 226, 0.3);
}

.world-specs-grid-modern .spec-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 600;
}

.world-specs-grid-modern .spec-value {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.world-actions-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.world-purchase-actions-modern {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.world-purchase-actions-modern .btn-modern {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.world-purchase-actions-modern .btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.2);
}

.world-social-actions-modern {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.world-social-actions-modern .btn-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.world-social-actions-modern .btn-modern:hover {
  transform: translateY(-2px);
}

.world-social-actions-modern .btn-modern.favorited {
  color: #ff6b35;
  border-color: rgba(255, 107, 53, 0.4);
  background: rgba(255, 107, 53, 0.15);
}

.world-social-actions-modern .btn-modern.favorited:hover {
  background: rgba(255, 107, 53, 0.25);
  border-color: rgba(255, 107, 53, 0.6);
}

/* Gallery Controls */
.world-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
  backdrop-filter: blur(10px);
}

.world-gallery-control:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 234, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.world-gallery-control svg {
  width: 24px;
  height: 24px;
}

.world-gallery-prev {
  left: 16px;
}

.world-gallery-next {
  right: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .world-modal-dialog-modern {
    max-width: 95vw;
    min-width: auto;
    margin: 2vh auto;
  }
  
  .world-modal-content-modern {
    grid-template-columns: 1fr;
  }
  
  .world-modal-gallery-modern {
    border-radius: 20px 20px 0 0;
    padding: 20px;
  }
  
  .world-modal-info-modern {
    padding: 24px;
  }
  
  .world-title-modern {
    font-size: 28px;
  }
  
  .world-meta-modern {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .world-rating-info-modern {
    align-items: flex-start;
  }
  
  .world-features-list-modern,
  .world-specs-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .world-purchase-actions-modern {
    flex-direction: column;
  }
  
  .world-purchase-actions-modern .btn-modern {
    min-width: auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .world-modal-dialog-modern {
    max-height: 95vh;
    border-radius: 16px;
  }
  
  .world-modal-gallery-modern {
    padding: 16px;
  }
  
  .world-modal-info-modern {
    padding: 20px;
    gap: 20px;
  }
  
  .world-title-modern {
    font-size: 24px;
  }
  
  .world-price-modern {
    font-size: 28px;
  }
  
  .world-meta-modern {
    padding: 12px;
  }
}

/* World Management Section */
.world-management-section {
  max-width: 1600px;
  margin: 24px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* World Management Styles */
.world-management-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.worlds-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.world-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.16);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.world-item:hover {
  background: rgba(var(--purple-rgb), 0.08);
  border-color: rgba(var(--purple-rgb), 0.24);
}

.world-item-info {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}

.world-item-image {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(var(--purple-rgb), 0.16);
}

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

.world-item-details h4 {
  margin: 0 0 4px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.world-item-details p {
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.world-item-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.world-item-meta span {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.world-price {
  color: var(--secondary);
  background: rgba(var(--secondary-rgb), 0.1);
}

.world-rating {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
}

.world-status {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.world-status.available {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.world-status.coming-soon {
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
}

.world-status.sold-out {
  color: #ff4757;
  background: rgba(255, 71, 87, 0.1);
}

.world-featured.yes {
  color: var(--secondary);
  background: rgba(var(--secondary-rgb), 0.1);
}

.world-featured.no {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}

.world-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.world-item-actions .btn {
  font-size: 12px;
  padding: 6px 10px;
}

/* Use base .btn-danger styles defined earlier */

/* Mobile responsive for world management */
@media (max-width: 768px) {
  .world-modal-dialog {
    max-width: 95vw;
    width: 95vw;
    margin: 1vh auto;
    max-height: 98vh;
  }
  
  .world-modal-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  
  .world-modal-gallery {
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }
  
  .world-modal-info {
    padding: 16px;
    border-radius: 0 0 16px 16px;
  }
  
  .world-management-section {
    padding: 0 16px;
    margin-top: 16px;
  }
  
  .world-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .world-item-info {
    flex-direction: column;
    text-align: center;
  }
  
  .world-item-meta {
    justify-content: center;
  }
  
  .world-item-actions {
    justify-content: center;
  }
}

/* Admin Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.15);
}

.page-header-content {
  flex: 1;
}

.page-subtitle {
  color: var(--muted);
  font-size: 1.1em;
  margin-top: 8px;
  font-weight: 400;
}

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

.admin-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 20px;
  font-size: 0.9em;
  color: var(--purple);
}

.status-dot {
  width: 8px;
  height: 8px;
  background: var(--purple);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Admin Guard Card */
.admin-guard-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  margin-bottom: 24px;
}

.admin-guard-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--purple-rgb), 0.3);
  border-top: 2px solid var(--purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

.stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--purple-rgb), 0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.stat-icon {
  font-size: 2em;
  opacity: 0.8;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2.2em;
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 0.9em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stat-primary .stat-value { color: var(--purple); }
.stat-success .stat-value { color: #10b981; }
.stat-warning .stat-value { color: #f59e0b; }
.stat-info .stat-value { color: #3b82f6; }

/* Spacious Card Design */
.card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
}

/* Card Headers - More Spacious */

.card-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.card-description {
  color: var(--muted);
  font-size: 1em;
  margin: 8px 0 0 0;
  line-height: 1.5;
}

.card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-badge {
  background: rgba(var(--purple-rgb), 0.12);
  color: var(--purple);
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.members-stats {
  display: flex !important;
  gap: 40px !important;
  margin-bottom: 24px !important;
  padding: 24px !important;
  background: rgba(var(--purple-rgb), 0.06) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.15) !important;
  border-radius: 16px !important;
}

.members-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.members-stat .stat-number {
  font-size: 2.2em !important;
  font-weight: 800 !important;
  color: var(--purple) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

.members-stat .stat-label {
  font-size: 0.9em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

/* Search Forms */
.search-form {
  margin-bottom: 20px;
}

.search-input-group {
  position: relative;
  display: flex;
}

.search-input-group input {
  flex: 1;
  padding-right: 48px;
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2em;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.search-btn:hover {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
}

/* Table Improvements */
.table-container {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.1);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-info {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 500;
}

.table-message {
  color: var(--muted);
  font-size: 0.9em;
  text-align: right;
}

/* Audit Log Container - Compact Design */
.audit-log-container {
  max-height: 300px;
  overflow-y: auto;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  padding: 12px;
}

.audit-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-log-entry {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.08);
  border-radius: 6px;
  font-size: 0.85em;
  line-height: 1.3;
}

.audit-log-entry .entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.audit-log-entry .entry-action {
  font-weight: 600;
  color: var(--purple);
}

.audit-log-entry .entry-time {
  color: var(--muted);
  font-size: 0.8em;
}

.audit-log-entry .entry-details {
  color: var(--muted);
  font-size: 0.8em;
}

/* Audit Log Scrollbar */
.audit-log-container::-webkit-scrollbar {
  width: 6px;
}

.audit-log-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.audit-log-container::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.audit-log-container::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* Filter Groups */
.audit-filters {
  margin-bottom: 16px;
}

.filter-group {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-select, .filter-input {
  flex: 1;
  min-width: 100px;
  font-size: 0.9em;
}

.search-group {
  margin-top: 6px;
}

.search-input {
  width: 100%;
  font-size: 0.9em;
}

/* API URL Container */
.api-url-container {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  word-break: break-all;
}

.api-url {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  color: var(--purple);
  background: none;
  border: none;
  padding: 0;
}

.api-actions {
  display: flex;
  gap: 8px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.form-message {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9em;
}

/* Roles List */
.roles-list-container {
  margin-top: 16px;
  max-height: 200px;
  overflow-y: auto;
}

.roles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roles-list li {
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* World Management */
.world-management-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.15);
}

.world-management-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.world-management-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .dashboard-tools {
    order: -1;
  }
}

/* Left Sidebar Components */
.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.quick-action-btn:hover {
  background: rgba(var(--purple-rgb), 0.1);
  border-color: rgba(var(--purple-rgb), 0.25);
  transform: translateY(-1px);
}

.action-icon {
  font-size: 1.5em;
  margin-bottom: 6px;
}

.action-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* System Status */
.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
}

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

.status-label {
  font-size: 0.9em;
  color: var(--text);
  font-weight: 500;
}

.status-indicator {
  font-size: 0.8em;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-online {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-offline {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Recent Activity */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 6px;
}

.activity-icon {
  font-size: 1.2em;
  opacity: 0.8;
  margin-top: 2px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 0.85em;
  color: var(--text);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 0.75em;
  color: var(--muted);
}

/* Responsive Design for Spacious Layout */
@media (max-width: 1800px) {
  .admin-dashboard-grid {
    grid-template-columns: 300px 1fr 340px;
    gap: 36px;
    max-width: 1800px;
  }
}

@media (max-width: 1600px) {
  .admin-dashboard-grid {
    grid-template-columns: 280px 1fr 320px;
    gap: 32px;
    max-width: 1600px;
  }
}

@media (max-width: 1400px) {
  .admin-dashboard-grid {
    grid-template-columns: 260px 1fr 300px;
    gap: 28px;
    max-width: 1400px;
  }
}

@media (max-width: 1200px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr 320px;
    gap: 24px;
  }
  
  .dashboard-left-sidebar {
    display: none;
  }
}

@media (max-width: 1024px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .dashboard-left-sidebar,
  .dashboard-right-sidebar {
    display: none;
  }
}

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }

/* Spacious Table Design - Overridden by Modern */
.table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
.table-head { 
  display: grid; 
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr; 
  gap: 24px; 
  padding: 24px 32px;
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  border-radius: 16px;
  margin-bottom: 16px;
}
.table-body .table-row { 
  display: grid; 
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr; 
  gap: 24px; 
  padding: 24px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  transition: all 0.2s ease;
  align-items: center;
  margin-bottom: 12px;
}
.table-body .table-row:hover { 
  background: rgba(var(--purple-rgb), 0.06); 
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.15);
}
.table-body .table-row + .table-row { margin-top: 10px; }
.table-cell { 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  color: #e0e0e0;
  font-size: 0.95em;
}
.table-cell small { color: var(--muted); font-size: 0.85em; display: block; margin-top: 2px; }
.table-cell:last-child { 
  overflow: visible; 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
  justify-content: flex-end;
}
.table .btn { 
  padding: 8px 14px; 
  font-size: 0.85em; 
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.table .btn:hover { transform: translateY(-1px); }

/* Role badges in admin table */
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(var(--purple-rgb), 0.15);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--purple);
  margin-right: 4px;
}

/* Member Detail Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-content {
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 16px;
  max-width: 750px;
  width: 100%;
  max-height: none;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--purple-rgb), 0.2);
  animation: slideUp 0.3s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}
.modal-title {
  font-size: 1.5em;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 2em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.modal-body {
  padding: 0;
}
.detail-section {
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.detail-section:last-child {
  border-bottom: none;
}
.section-subtitle {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--purple);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.detail-row:first-child {
  padding-top: 0;
}
.detail-label {
  font-size: 0.85em;
  color: #6b7280;
  font-weight: 600;
  text-transform: capitalize;
}
.detail-value {
  font-size: 0.95em;
  color: #e5e7eb;
  font-weight: 500;
  text-align: right;
}
.detail-mono {
  font-family: 'Courier New', monospace;
  font-size: 0.8em;
  color: var(--purple);
  word-break: break-all;
}
.action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.action-grid .btn {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: 600;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}
.action-grid .btn:hover {
  background: rgba(var(--purple-rgb), 0.15);
  border-color: rgba(var(--purple-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.2);
}
.action-grid .btn.btn-secondary {
  background: rgba(var(--purple-rgb), 0.1);
  border-color: rgba(var(--purple-rgb), 0.3);
}
.roles-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.roles-display:empty::after {
  content: 'No roles assigned';
  color: #6b7280;
  font-size: 0.9em;
}
.role-controls {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.role-select {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: #e5e7eb;
  font-size: 0.9em;
  font-family: inherit;
  transition: all 0.2s ease;
}
.role-select:focus {
  outline: none;
  border-color: var(--purple);
  background: rgba(0, 0, 0, 0.4);
}
.role-controls .btn {
  padding: 10px 16px;
  white-space: nowrap;
  font-size: 0.9em;
}
.modal-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9em;
  text-align: center;
  display: none;
}
.modal-message:not(:empty) {
  display: block;
}

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

/* ===== MODERN MEMBERS MANAGEMENT ===== */

/* Members Controls */
.members-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.members-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: #a0a3ad;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chip:hover {
  background: rgba(var(--purple-rgb), 0.1);
  border-color: rgba(var(--purple-rgb), 0.3);
  color: #fff;
}

.filter-chip.active {
  background: rgba(var(--purple-rgb), 0.2);
  border-color: rgba(var(--purple-rgb), 0.4);
  color: var(--purple);
}

/* Members Grid */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.member-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.member-card:hover {
  background: rgba(var(--purple-rgb), 0.08);
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.15);
}

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

.member-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.15);
  border: 2px solid rgba(var(--purple-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--purple);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.member-card-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.member-card-avatar-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--purple);
}

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

.member-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-card-email {
  font-size: 0.8rem;
  color: #a0a3ad;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-card-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.member-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.member-status-indicator.verified {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.member-status-indicator.unverified {
  background: rgba(158, 158, 158, 0.15);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

.member-status-indicator.banned {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.member-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.member-role-badge-small {
  padding: 3px 8px;
  background: rgba(var(--purple-rgb), 0.15);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--purple);
}

.member-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.member-card-actions .btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* ===== MODERN MEMBER MODAL ===== */

.member-modal-modern {
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.member-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--purple-rgb), 0.05));
}

.member-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.member-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.2);
  border: 3px solid rgba(var(--purple-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--purple);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.member-modal-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.member-avatar-large .avatar-text {
  position: relative;
  z-index: 2;
}

.member-header-info {
  flex: 1;
}

.member-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.member-email {
  font-size: 0.9rem;
  color: #a0a3ad;
  margin: 0 0 8px;
}

.member-status-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.member-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.member-status-badge.active .status-dot {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  color: #a0a3ad;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Stats Grid */
.member-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}

.member-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
}

.member-stat-card .stat-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.member-stat-card .stat-details {
  flex: 1;
  min-width: 0;
}

.member-stat-card .stat-label {
  font-size: 0.75rem;
  color: #a0a3ad;
  font-weight: 600;
  margin-bottom: 4px;
}

.member-stat-card .stat-value {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal Tabs */
.member-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.member-tab {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #a0a3ad;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  top: 1px;
}

.member-tab:hover {
  color: #fff;
}

.member-tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* Tab Content */
.member-modal-body {
  padding: 24px 32px;
}

.member-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.member-tab-content.active {
  display: block;
}

.member-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.detail-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 20px;
}

.detail-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
}

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

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  font-size: 0.85rem;
  color: #a0a3ad;
  font-weight: 600;
}

.detail-value-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-id-code {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  max-width: 200px;
  word-break: break-all;
}

.icon-btn {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 6px;
  padding: 4px;
  color: var(--purple);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: rgba(var(--purple-rgb), 0.2);
  transform: scale(1.05);
}

.detail-value-text {
  font-size: 0.85rem;
  color: #fff;
  font-weight: 600;
}

.status-badge-modern {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge-modern.verified {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-badge-modern.unverified {
  background: rgba(158, 158, 158, 0.15);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.3);
}

.status-badge-modern.banned {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.action-grid-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.action-btn-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn-modern.primary {
  background: rgba(var(--purple-rgb), 0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
  color: var(--purple);
}

.action-btn-modern.primary:hover {
  background: rgba(var(--purple-rgb), 0.25);
  transform: translateY(-1px);
}

.action-btn-modern.secondary {
  background: rgba(158, 158, 158, 0.15);
  border-color: rgba(158, 158, 158, 0.3);
  color: #9e9e9e;
}

.action-btn-modern.secondary:hover {
  background: rgba(158, 158, 158, 0.25);
  transform: translateY(-1px);
}

.action-btn-modern.warning {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.3);
  color: #f44336;
}

.action-btn-modern.warning:hover {
  background: rgba(244, 67, 54, 0.25);
  transform: translateY(-1px);
}

.action-btn-modern.success {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.3);
  color: #4caf50;
}

.action-btn-modern.success:hover {
  background: rgba(76, 175, 80, 0.25);
  transform: translateY(-1px);
}

.action-btn-modern.info {
  background: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.3);
  color: #2196f3;
}

.action-btn-modern.info:hover {
  background: rgba(33, 150, 243, 0.25);
  transform: translateY(-1px);
}

.action-btn-modern.danger {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.3);
  color: #f44336;
}

.action-btn-modern.danger:hover {
  background: rgba(244, 67, 54, 0.25);
  transform: translateY(-1px);
}

/* Roles Management */
.roles-management-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 20px;
}

.roles-display-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 60px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 20px;
}

.roles-display-modern .empty-state {
  color: #6b7280;
  font-size: 0.9rem;
  width: 100%;
  text-align: center;
}

.role-management-section {
  margin-top: 24px;
}

.role-controls-modern {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-select-modern {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: #e5e7eb;
  font-size: 0.9rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.role-select-modern:focus {
  outline: none;
  border-color: var(--purple);
  background: rgba(0, 0, 0, 0.4);
}

.role-actions-modern {
  display: flex;
  gap: 10px;
}

.role-actions-modern .btn {
  flex: 1;
}

/* Activity Timeline */
.activity-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 20px;
}

.activity-timeline {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-timeline .empty-state {
  color: #6b7280;
  font-size: 0.9rem;
  text-align: center;
  padding: 40px 20px;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--purple-rgb), 0.2);
}

.activity-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--purple-rgb), 0.15);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}

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

.activity-title {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.activity-subtitle {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 4px;
  line-height: 1.4;
}

.activity-time {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.8;
}

.member-message-area {
  padding: 16px 32px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.2);
  margin-top: 24px;
}

.member-message-area:empty {
  display: none;
}

/* Role Management Improvements Styles */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.role-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.role-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
}

.role-stat-icon {
  font-size: 2em;
  line-height: 1;
}

.role-stat-info {
  flex: 1;
}

.role-stat-name {
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.role-stat-details {
  font-size: 0.85rem;
  color: var(--muted);
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.template-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.template-card-header h4 {
  margin: 0 0 4px 0;
  color: #fff;
  font-size: 1rem;
}

.template-card-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.template-actions {
  display: flex;
  gap: 8px;
}

.template-roles-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-role-badge {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(var(--purple-rgb), 0.2);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #fff;
}

.template-roles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  min-height: 60px;
}

.template-role-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.template-role-select {
  width: 100%;
}

/* Permissions Management Styles */
.permissions-selector {
  margin-bottom: 24px;
}

.permissions-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.permissions-category {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  padding: 16px;
}

.permissions-category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px 0;
  text-transform: capitalize;
}

.permissions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.permission-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--purple-rgb), 0.2);
}

.permission-item input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

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

.permission-name {
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.permission-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
  .members-grid {
    grid-template-columns: 1fr;
  }
  
  .member-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .member-details-grid {
    grid-template-columns: 1fr;
  }
  
  .member-modal-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .member-profile-header {
    width: 100%;
  }
}

/* Toast notifications */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: rgba(20, 20, 30, 0.95); border: 1px solid rgba(var(--purple-rgb), 0.4); border-radius: 8px; padding: 14px 18px; min-width: 280px; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); animation: toastSlideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px; }
.toast.success { border-color: rgba(76, 175, 80, 0.6); }
.toast.error { border-color: rgba(244, 67, 54, 0.6); }
.toast-icon { font-size: 1.2em; }
.toast.success .toast-icon::before { content: '✓'; color: #4caf50; }
.toast.error .toast-icon::before { content: '✕'; color: #f44336; }
.toast-message { flex: 1; color: #fff; }
.toast-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 1.2em; line-height: 1; }
.toast-close:hover { color: #fff; }
@keyframes toastSlideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }

/* Email Verification Banner */
.verification-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.banner-icon {
  font-size: 2em;
  color: #fbbf24;
  flex-shrink: 0;
}
.banner-text {
  flex: 1;
}
.banner-text strong {
  font-size: 1.1em;
  color: #fbbf24;
  display: block;
  margin-bottom: 4px;
}
.banner-text p {
  margin: 0;
  color: #d1d5db;
  font-size: 0.9em;
}
.verification-banner .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Account page profile */
.profile-header { display: flex; align-items: center; gap: 16px; }
.profile-avatar-lg { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.05); border: 2px solid rgba(var(--purple-rgb), 0.3); display: flex; align-items: center; justify-content: center; }
.profile-avatar-lg .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-lg .avatar-fallback { font-size: 2em; font-weight: 800; color: var(--purple); }
.profile-meta { flex: 1; }
.profile-name { font-size: 1.5em; font-weight: 800; color: #fff; margin-bottom: 4px; }
.profile-sub { font-size: 0.9em; color: var(--muted); }

/* Code box for member code */
.code-box { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(var(--purple-rgb), 0.2); border-radius: 8px; padding: 12px 16px; }
.code-box code { flex: 1; font-family: 'Courier New', monospace; font-size: 1.2em; font-weight: 800; letter-spacing: 0.1em; color: var(--purple); }
.code-box .btn { padding: 6px 10px; margin: 0; }

/* License verification form */
.license-verification-form {
  margin-top: 16px;
}

.license-verification-form .form-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.license-verification-form .input-modern {
  flex: 1;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.license-message {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9em;
  animation: slideDown 0.3s ease;
}

.license-message.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.license-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.license-success strong,
.license-error strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1em;
}

.license-success p,
.license-error p {
  margin: 4px 0;
  opacity: 0.9;
}

/* Purchased Products Grid */
.purchased-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.purchased-product-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.purchased-product-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}

.product-name-section {
  flex: 1;
  min-width: 0;
}

.product-name {
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
  word-wrap: break-word;
}

.product-role-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(var(--purple-rgb), 0.2);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}

.product-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.product-status-badge.disabled {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.product-card-body {
  margin-top: 12px;
}

.product-description {
  color: var(--muted);
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
}

.product-meta-item .meta-label {
  color: var(--muted);
  font-weight: 500;
}

.product-meta-item .meta-value {
  color: #fff;
  font-weight: 600;
}

.product-meta-item .license-key {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Role chips display */
.roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.roles-grid:empty::after {
  content: 'No roles assigned';
  color: var(--muted);
  font-size: 0.9em;
  opacity: 0.7;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.12), rgba(var(--cyan-rgb), 0.08));
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.role-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--purple-rgb), 0.4);
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.25);
}

.role-chip-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Special role colors */
.role-chip[data-role="admin"] {
  background: linear-gradient(135deg, rgba(255, 59, 127, 0.15), rgba(138, 43, 226, 0.12));
  border-color: rgba(255, 59, 127, 0.3);
  color: #ff3b7f;
}

.role-chip[data-role="moderator"] {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 59, 127, 0.12));
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.role-chip[data-role="creator"] {
  background: linear-gradient(135deg, rgba(138, 201, 38, 0.15), rgba(0, 234, 255, 0.12));
  border-color: rgba(138, 201, 38, 0.3);
  color: #8ac926;
}

.role-chip[data-role="booster"] {
  background: linear-gradient(135deg, rgba(245, 169, 184, 0.15), rgba(255, 115, 250, 0.12));
  border-color: rgba(245, 169, 184, 0.3);
  color: #f5a9b8;
}

.role-chip[data-role="patreon"] {
  background: linear-gradient(135deg, rgba(255, 66, 77, 0.15), rgba(249, 104, 84, 0.12));
  border-color: rgba(255, 66, 77, 0.3);
  color: #ff424d;
}

.role-chip[data-role="supporter"],
.role-chip[data-role="supporter_plus"] {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.15), rgba(255, 140, 0, 0.12));
  border-color: rgba(255, 184, 0, 0.3);
  color: #ffb800;
}

.role-chip[data-role="diamond"],
.role-chip[data-role="diamond_plus"] {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.15), rgba(138, 43, 226, 0.12));
  border-color: rgba(0, 234, 255, 0.3);
  color: var(--cyan);
}

.role-chip[data-role="member"] {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.12), rgba(168, 162, 255, 0.08));
  border-color: rgba(138, 43, 226, 0.25);
  color: var(--purple);
}

#rolesList .chip { display: inline-block; padding: 6px 12px; background: rgba(var(--purple-rgb), 0.15); border: 1px solid rgba(var(--purple-rgb), 0.3); border-radius: 6px; color: var(--purple); font-size: 0.85em; font-weight: 600; }

@keyframes floatGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(18deg) scale(1.02); } 100% { transform: rotate(0deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before { display: none; }
}




/* Avatar label pattern: avatar opens the file picker; fallback never intercepts clicks */
.profile-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  background: #0f1115;
  border: 1px solid #2a2d3a;
}
#avatarPreview, #avatarPreviewFallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none !important; /* key fix */
}

/* Modern Modal Styling */
/* === MODERN MODAL SYSTEM === */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px) saturate(180%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 1;
}

.modal-dialog {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 24px;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  position: relative;
}

.modal-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  z-index: 1;
}

.modal.active .modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
}

.modal-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(255, 255, 255, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, 
    #ffffff 0%,
    rgba(138, 43, 226, 0.9) 50%,
    rgba(0, 234, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.modal-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.modal-close:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border-color: rgba(138, 43, 226, 0.4);
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 
    0 4px 12px rgba(138, 43, 226, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  z-index: 2;
}

/* Sign-in Modal Specific Styles */
.signin-modal-tabs {
  position: relative;
}

.signin-tab-btn {
  position: relative;
}

.signin-tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.signin-tab-active {
  color: rgba(255, 255, 255, 1) !important;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.1) 0%, 
    rgba(0, 234, 255, 0.1) 100%) !important;
}

.signin-tab-active::after {
  opacity: 1;
}

.signin-input:focus {
  outline: none !important;
  border-color: rgba(138, 43, 226, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.15) !important;
}

.signin-modal-form {
  background: rgba(255, 255, 255, 0.02);
}

.modal-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* World Edit Modal Specific Styling */
.world-edit-modal {
  max-width: 900px;
  width: 90vw;
}

.world-edit-modal .modal-body {
  max-height: 70vh;
  padding: 32px;
}

.world-edit-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.edit-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-section label {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.edit-section .form-control {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  transition: all 0.2s ease;
  width: 100%;
  backdrop-filter: blur(10px);
}

.edit-section .form-control:focus {
  outline: none;
  border-color: #a855f7;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 0 0 3px rgba(168, 85, 247, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.edit-section .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.edit-section textarea.form-control {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

.edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.price-controls,
.rating-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  margin-bottom: 8px;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.checkbox-label:hover {
  color: rgba(255, 255, 255, 0.95);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #a855f7;
  border-radius: 4px;
}

.link-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Modern Button Styling */
.btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

/* Payhip Import Modal Styling */
.import-section {
  margin-bottom: 24px;
}

.import-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.import-section .form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.import-section .form-control:focus {
  outline: none;
  border-color: #a855f7;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.help-text {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  font-style: italic;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.import-preview {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.import-preview h4 {
  margin: 0 0 16px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
}

.preview-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}

.preview-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.preview-checkbox {
  flex-shrink: 0;
}

.preview-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #a855f7;
}

.preview-image {
  flex-shrink: 0;
}

.preview-image img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.preview-info {
  flex: 1;
}

.preview-info h5 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.preview-info p {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.preview-price {
  font-size: 12px;
  font-weight: 600;
  color: #a855f7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 20px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
  }
  
  .modal-header {
    padding: 20px 24px 12px;
  }
  
  .modal-header h3 {
    font-size: 18px;
  }
  
  .modal-body {
    padding: 24px;
  }
  
  .modal-footer {
    padding: 12px 24px 20px;
    flex-direction: column;
  }
  
  .world-edit-modal .modal-body {
    padding: 24px;
  }
  
  .world-edit-form {
    gap: 20px;
  }
  
  .edit-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .edit-section .form-control {
    padding: 10px 14px;
  }
  
  .preview-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .preview-checkbox {
    align-self: flex-start;
  }
  
  .preview-image {
    align-self: center;
  }
}

/* End of Modern Modal Styling */

.world-edit-modal { max-width:760px; width:90vw; }
.modal-dialog.world-import-payhip { max-width:680px; }
.modal-dialog.world-add { max-width:680px; }

/* Form controls */
.edit-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:768px){ .edit-row{ grid-template-columns:1fr; } }
.edit-section label { color:#c9ccda; font-weight:600; margin-bottom:6px; }
.form-control { background:#1a1c23; border:1px solid #2a2d3a; color:#e6e7ee; border-radius:10px; padding:10px 12px; }
.form-control::placeholder { color:#8086a2; }
.form-control:focus { outline:none; border-color:rgba(138, 43, 226, 0.8); box-shadow:0 0 0 2px rgba(138, 43, 226, 0.25); }
.checkbox-label { color:#c9ccda; gap:10px; }
.checkbox-label input[type="checkbox"] { accent-color:rgba(138, 43, 226, 0.8); width:16px; height:16px; }

/* Buttons - use base button styles defined earlier */
.btn::before { display:none; }

/* Payhip preview list */
.import-preview { background:#151722; border:1px solid #23273a; border-radius:12px; }
.preview-item { background:#141724; border:1px solid #23273a; border-radius:10px; }
.preview-item:hover { border-color:#323750; }
.preview-info h5 { color:#e6e7ee; }
.preview-info p { color:#9aa0b8; }
.preview-price { color:rgba(138, 43, 226, 0.9); }

/* Enhanced Image Management Styles */
.image-management-section {
  margin-top: 20px;
}

.image-gallery-container {
  border: 2px dashed rgba(var(--purple-rgb), 0.3);
  border-radius: 12px;
  padding: 16px;
  background: rgba(var(--purple-rgb), 0.05);
  margin-bottom: 12px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  min-height: 60px;
}

.image-item {
  position: relative;
  background: #1a1d2e;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: move;
}

.image-item:hover {
  border-color: rgba(var(--purple-rgb), 0.5);
  transform: translateY(-2px);
}

.image-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

.image-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.image-item:hover .image-preview img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-overlay .btn {
  padding: 4px 8px;
  font-size: 12px;
  min-width: auto;
}

.image-info {
  padding: 8px;
  background: #0e1120;
}

.image-alt {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  color: #c9c9d6;
  font-size: 12px;
  margin-bottom: 4px;
}

.image-alt:focus {
  outline: none;
  border-color: rgba(var(--purple-rgb), 0.5);
}

.image-order {
  font-size: 10px;
  color: rgba(var(--purple-rgb), 0.7);
  text-align: center;
  font-weight: 600;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 2px dashed rgba(var(--purple-rgb), 0.3);
  border-radius: 8px;
  background: rgba(var(--purple-rgb), 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 120px;
}

.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: rgba(var(--purple-rgb), 0.6);
  background: rgba(var(--purple-rgb), 0.1);
  transform: translateY(-2px);
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.7;
}

.upload-text {
  text-align: center;
  color: #c9c9d6;
}

.upload-text strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
}

.upload-text span {
  font-size: 14px;
  opacity: 0.7;
}

.image-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.image-count {
  color: rgba(var(--purple-rgb), 0.7);
  font-size: 14px;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  
  .upload-dropzone {
    padding: 24px 16px;
    min-height: 100px;
  }
  
  .upload-icon {
    font-size: 24px;
  }
  
  .image-controls {
    flex-wrap: wrap;
  }
}

/* Cover Image Management Styles */
.cover-image-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(var(--purple-rgb), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.cover-image-preview {
  margin-bottom: 12px;
}

.cover-preview-img {
  width: 100%;
  max-width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(var(--purple-rgb), 0.3);
}

.no-cover {
  padding: 20px;
  text-align: center;
  color: rgba(var(--purple-rgb), 0.6);
  background: rgba(var(--purple-rgb), 0.05);
  border-radius: 8px;
  border: 1px dashed rgba(var(--purple-rgb), 0.3);
}

.cover-info {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(var(--purple-rgb), 0.7);
  text-align: center;
}

.cover-image-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cover-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(var(--purple-rgb), 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.image-item .select-cover {
  background: rgba(var(--purple-rgb), 0.8);
  color: white;
}

.image-item .select-cover:hover {
  background: rgba(var(--purple-rgb), 1);
}

/* Enhanced gallery display for view details modal */
.world-modal-gallery {
  position: relative;
}

.world-modal-gallery .thumbnail {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.world-modal-gallery .thumbnail:hover {
  border-color: rgba(var(--purple-rgb), 0.5);
  transform: scale(1.05);
}

.world-modal-gallery .thumbnail.active {
  border-color: rgba(var(--purple-rgb), 0.8);
  box-shadow: 0 0 10px rgba(var(--purple-rgb), 0.3);
}

/* Responsive adjustments for cover image */
@media (max-width: 768px) {
  .cover-image-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cover-preview-img {
    max-width: 150px;
    height: 90px;
  }
}


/* === Sleek World Modal refinements (2025-10-22) === */
.world-modal-dialog {
  /* Let content define width up to a cap; keeps it feeling "snappy" */
  width: fit-content;
  max-width: min(92vw, 1040px);
}

.world-modal-content {
  /* Avoid layout shift on varying content amounts */
  align-items: stretch;
}

.world-modal-info {
  /* Make sure the right column scrolls independently if content grows */
  max-height: calc(85vh - 120px);
  overflow: auto;
}

/* Hide thumbnail gallery - using arrow controls only */
.world-thumbnails {
  display: none !important;
}

.world-thumbnails::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.world-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: 4px;
}
.world-thumbnails::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
}

/* Tag chips inside the hero image overlay – slightly bolder for readability */
.world-tags .tag {
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Smoother entrance motion */
.modal.active .world-modal-dialog {
  animation: modalPop 220ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes modalPop {
  from { transform: scale(.98) translateY(10px); opacity: .0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Safer overflow on tiny screens */
@media (max-width: 560px) {
  .world-modal-dialog {
    min-width: 0;
    width: 96vw;
    max-height: 92vh;
  }
  .world-modal-info {
    max-height: calc(92vh - 120px);
  }
}


/* Thumbnail gallery removed - using arrow controls only */


/* === World modal gallery layout fix (rail + main) === */
.world-gallery {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-rows: auto;
  gap: 14px;
  align-items: start;
}

.world-gallery .world-mainimg-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.world-gallery .world-mainimg-wrap img {
  width: 100%;
  height: auto;
  max-height: min(64vh, 720px);
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.world-thumbnails {
  /* Rail sizing handled here; JS will cap the rail height to main image */
  width: 84px;
  flex: 0 0 84px;
  align-items: center;
}

.world-thumbnails img.thumbnail {
  inline-size: 72px !important;
  block-size: 72px !important;
  aspect-ratio: 1 / 1;
}

/* Stack vertically on small screens; main image first, rail turns horizontal below */
@media (max-width: 700px) {
  .world-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .world-thumbnails {
    width: auto;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
  }
}


/* === Payhip-like gallery controls & lightbox (2025-10-22) === */
.world-main-image {
  position: relative;
}

/* Enhanced gallery controls - more visible */
.world-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition: all 200ms ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 10;
}
.world-gallery-control:hover { 
  background: rgba(0,0,0,0.85); 
  border-color: rgba(255,255,255,0.6); 
  transform: translateY(-50%) scale(1.1); 
  box-shadow: 0 6px 25px rgba(0,0,0,0.4);
}
.world-gallery-control:active { 
  transform: translateY(-50%) scale(0.95); 
}
.world-gallery-control svg { 
  width: 24px; 
  height: 24px; 
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.world-gallery-prev { left: 15px; }
.world-gallery-next { right: 15px; }

/* Lightbox */
.world-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.world-lightbox.open { display: flex; }
.world-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  background: #111;
}
.world-lightbox .lb-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.world-lightbox .lb-prev { left: 24px; }
.world-lightbox .lb-next { right: 24px; }
.world-lightbox .lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(17,17,17,0.35);
  display: grid; place-items: center;
  cursor: pointer;
}
.world-lightbox .lb-close:hover { background: rgba(17,17,17,0.55); }

/* === Modern Account Page Layout === */
/* Account Page Header */
.account-page-header-modern {
  margin-bottom: 24px;
}

.account-icon-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1) 0%, rgba(0, 153, 204, 0.1) 100%);
  border-radius: 12px;
  color: #00eaff;
  flex-shrink: 0;
}

.account-page-header-modern .tool-header-modern {
  margin-bottom: 0;
}

/* Auth Forms Grid */
.account-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.auth-form-card {
  margin: 0;
}

@media (max-width: 768px) {
  .account-auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Top Navigation Bar */
.account-top-nav-modern {
  background: linear-gradient(135deg, rgba(15, 20, 38, 0.95) 0%, rgba(20, 25, 45, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 80px;
  z-index: 100;
}

.account-nav-tabs-modern {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.account-nav-tabs-modern::-webkit-scrollbar {
  display: none;
}

.account-nav-tab-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  background: transparent;
}

.account-nav-tab-modern svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.account-nav-tab-modern:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.account-nav-tab-modern:hover svg {
  transform: scale(1.1);
}

.account-nav-tab-modern.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  box-shadow: 0 4px 16px rgba(0, 234, 255, 0.2);
  border: 1px solid rgba(0, 234, 255, 0.3);
}

.account-nav-tab-modern.active svg {
  color: #00eaff;
  filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.5));
}

/* Main Content Area */
.account-content-modern {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Top Row: Profile and Membership */
.account-top-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* License Verification - Prominent */
.account-license-section {
  margin: 0;
}

.license-card-prominent {
  border: 2px solid rgba(0, 234, 255, 0.3);
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.08) 0%, rgba(0, 153, 204, 0.08) 100%);
  box-shadow: 0 8px 32px rgba(0, 234, 255, 0.15);
}

.license-card-prominent .tool-header-modern {
  margin-bottom: 20px;
}

.license-description-modern {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.license-verification-form-modern {
  margin-top: 16px;
}

.license-input-group {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.license-input-modern {
  flex: 1;
  padding: 14px 18px;
  background: rgba(15, 20, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Space Grotesk', monospace;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.license-input-modern[type="email"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

.license-input-modern:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(15, 20, 38, 0.8);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.license-input-modern::placeholder {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}

.license-message-modern {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.license-message-modern.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.license-message-modern.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* License Verification Toggle */
.license-verification-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(15, 20, 38, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px;
}

.toggle-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.toggle-btn.active {
  background: rgba(0, 234, 255, 0.15);
  color: #00eaff;
  box-shadow: 0 0 0 1px rgba(0, 234, 255, 0.3);
}

/* Email Fallback Note */
.license-fallback-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(0, 234, 255, 0.08);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

.license-fallback-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #00eaff;
}

.license-fallback-note span {
  flex: 1;
}

/* License Help Section */
.license-help-box {
  margin-bottom: 20px;
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 12px;
  background: rgba(0, 234, 255, 0.05);
  overflow: hidden;
}

.license-help-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.license-help-toggle:hover {
  background: rgba(0, 234, 255, 0.1);
  color: #ffffff;
}

.license-help-toggle svg:first-child {
  flex-shrink: 0;
  color: #00eaff;
}

.license-help-toggle span {
  flex: 1;
}

.license-help-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
}

.license-help-toggle[aria-expanded="true"] .license-help-chevron {
  transform: rotate(180deg);
}

.license-help-content {
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 234, 255, 0.2);
  background: rgba(15, 20, 38, 0.4);
}

.license-help-steps {
  margin: 0 0 16px 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.8;
}

.license-help-steps li {
  margin-bottom: 8px;
}

.license-help-steps li:last-child {
  margin-bottom: 0;
}

.license-help-steps code {
  background: rgba(0, 234, 255, 0.15);
  border: 1px solid rgba(0, 234, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Space Grotesk', monospace;
  font-size: 13px;
  color: #00eaff;
  letter-spacing: 1px;
}

.license-help-steps a {
  color: #00eaff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.license-help-steps a:hover {
  color: #00d4e6;
  text-decoration: underline;
}

.license-help-note {
  margin: 0;
  padding: 12px 16px;
  background: rgba(0, 234, 255, 0.08);
  border-left: 3px solid rgba(0, 234, 255, 0.5);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.license-help-note strong {
  color: #ffffff;
  font-weight: 600;
}

/* Profile Status Indicators */
.profile-status-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 234, 255, 0.1);
  width: 100%;
  align-items: flex-start;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: fit-content;
  position: relative;
  margin: 0;
}

.status-indicator:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

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

.status-icon-verified {
  color: #22c55e;
}

.status-icon-pending {
  color: #f59e0b;
}

.status-icon-not-set {
  color: rgba(255, 255, 255, 0.4);
}

.status-icon-loading {
  color: rgba(255, 255, 255, 0.5);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-text {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.status-indicator.verified .status-text {
  color: #22c55e;
}

.status-indicator.pending .status-text {
  color: #f59e0b;
}

.status-indicator.not-set .status-text {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments for status indicators */
@media (max-width: 768px) {
  .profile-status-indicators {
    flex-direction: column;
    gap: 8px;
  }
  
  .status-indicator {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Other Sections Grid */
.account-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Verification Banner */
.verification-banner-modern {
  margin: 0;
}

.banner-icon-modern {
  font-size: 24px;
  flex-shrink: 0;
}

.banner-text-modern {
  flex: 1;
}

/* Cards within sections */
.account-top-row .content-card-modern,
.account-sections-grid .content-card-modern {
  margin: 0;
}

.account-top-row .tool-header-modern,
.account-sections-grid .tool-header-modern {
  margin-bottom: 16px;
}

.account-top-row .tool-title-modern,
.account-sections-grid .tool-title-modern {
  font-size: 1.125rem;
}

/* Compact form styles within cards */
.account-cards-grid .form-modern {
  margin-top: 0;
}

.account-cards-grid .field-modern {
  margin-bottom: 12px;
}

.account-cards-grid .field-modern label {
  font-size: 13px;
  margin-bottom: 6px;
}

.account-cards-grid .field-modern input {
  padding: 10px 12px;
  font-size: 14px;
}

.account-cards-grid .btn {
  padding: 10px 16px;
  font-size: 14px;
}

/* Compact profile section */
.account-cards-grid .profile-picture-section-modern {
  gap: 14px;
  margin-bottom: 16px;
}

.account-cards-grid .profile-avatar-modern {
  width: 64px;
  height: 64px;
}

.account-cards-grid .profile-name {
  font-size: 16px;
}

.account-cards-grid .profile-email {
  font-size: 13px;
}

/* Compact VRChat section */
.account-cards-grid .vrchat-section-modern h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.account-cards-grid .form-actions-modern {
  gap: 8px;
  margin-top: 10px;
}

/* Compact roles grid */
.account-cards-grid .roles-grid-modern {
  gap: 8px;
}

.roles-display-modern {
  margin-bottom: 16px;
}

.roles-display-modern .tool-header-modern {
  margin-bottom: 12px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .account-top-row,
  .account-sections-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .account-nav-tabs-modern {
    gap: 2px;
  }
  
  .account-nav-tab-modern {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .account-nav-tab-modern svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .account-top-nav-modern {
    position: static;
    margin-bottom: 20px;
  }
  
  .account-nav-tabs-modern {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
  }
  
  .account-nav-tab-modern {
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
  
  .account-nav-tab-modern span {
    display: none;
  }
  
  .account-top-row,
  .account-sections-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .license-input-group {
    flex-direction: column;
  }
  
  .license-input-modern {
    width: 100%;
  }
}

/* Compact sections within cards */
.account-cards-grid .vrchat-section-modern {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 234, 255, 0.1);
}

.account-cards-grid .discord-section-modern {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 234, 255, 0.1);
}

.account-cards-grid h4 {
  font-size: 14px;
  margin: 0 0 10px;
  color: #ffffff;
  font-weight: 600;
}

.account-cards-grid .code-description-modern {
  font-size: 13px;
  margin-bottom: 10px;
}

.account-cards-grid .license-verification-form {
  margin-top: 12px;
}

.account-cards-grid .form-field {
  display: flex;
  gap: 8px;
}

.account-cards-grid .form-field input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
}

.account-cards-grid .form-field .btn {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 14px;
}

/* Sign Out Card - Compact */
.account-cards-grid .sign-out-card {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
}

.account-cards-grid .sign-out-card .btn {
  width: auto;
  padding: 8px 20px;
  font-size: 14px;
}

/* Make sign out card span both columns on desktop for better layout */
@media (min-width: 769px) {
  .account-cards-grid .sign-out-card {
    grid-column: 1 / -1;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Delete Account Section */
.delete-account-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 68, 68, 0.2);
}

.delete-account-divider {
  margin-bottom: 16px;
}

.delete-account-section h4 {
  color: #ef4444;
  margin-bottom: 12px;
}

.delete-account-warning {
  color: #f59e0b;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.delete-account-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.delete-account-list li {
  color: #a0a3ad;
  font-size: 13px;
  padding: 4px 0 4px 20px;
  position: relative;
}

.delete-account-list li::before {
  content: '•';
  color: #ef4444;
  position: absolute;
  left: 8px;
}

.delete-account-section .field-modern {
  margin-bottom: 12px;
}

.delete-account-section #deleteConfirm {
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.delete-account-section #deleteConfirm:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.delete-account-message {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
}

.delete-account-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.delete-account-message.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.delete-account-section .btn-danger-modern:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive: Stack sidebar and cards on mobile */
@media (max-width: 1024px) {
  .account-layout-with-sidebar {
    grid-template-columns: 200px 1fr;
    gap: 16px;
  }
  
  .account-cards-grid {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .account-layout-with-sidebar {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .account-sidebar {
    position: static;
    border-radius: 12px;
  }
  
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 12px;
    gap: 0;
  }
  
  .sidebar-nav-item {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
  }
  
  .sidebar-nav-item.active {
    border-left: none;
    border-bottom-color: #00eaff;
  }
  
  .account-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .account-breadcrumb {
    font-size: 11px;
  }
}

/* Modern Cards */
.card-modern {
  background: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
  border: 1px solid rgba(0, 234, 255, 0.1);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00eaff, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-modern:hover {
  border-color: rgba(0, 234, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 234, 255, 0.1);
}

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

.card-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.card-icon {
  font-size: 24px;
  opacity: 0.7;
}

/* Profile Picture Modern */
.profile-picture-section-modern {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.profile-picture-container {
  flex-shrink: 0;
}

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

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.2;
}

.profile-email {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
}

.profile-avatar-modern {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px solid rgba(0, 234, 255, 0.2);
}

.profile-avatar-modern:hover {
  border-color: #00eaff;
  transform: scale(1.05);
}

.avatar-fallback-modern {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2d3a, #3a3d4a);
  color: #a0a3ad;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-avatar-modern:hover .avatar-overlay {
  opacity: 1;
}

.avatar-upload-icon {
  font-size: 24px;
  color: #00eaff;
}

.profile-info-modern {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.profile-email {
  font-size: 14px;
  color: #a0a3ad;
}

/* Modern Forms */
/* Duplicate form styles removed - using unified form system above */

/* Modern Buttons */
/* Duplicate btn-primary-modern removed - using unified .btn-primary */

/* ===========================================
   CLEAN ADMIN DASHBOARD - FRESH DESIGN
   =========================================== */

/* Main Dashboard Container */
.admin-dashboard-clean {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* Dashboard Header */
.dashboard-header {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.05));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 32px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-title {
  font-size: 2.5em;
  font-weight: 800;
  color: var(--purple);
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 16px;
}

/* Stats Overview */
.stats-overview {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.08), rgba(var(--purple-rgb), 0.04));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
}

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

.stats-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.stats-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}

.stats-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.1);
}

.stat-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.stat-icon {
  font-size: 2.5em;
  opacity: 0.8;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 2.2em;
  font-weight: 800;
  color: var(--purple);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9em;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quick Actions */
.quick-actions {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.08), rgba(var(--cyan-rgb), 0.04));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
}

.section-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--purple);
  margin: 0 0 20px 0;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--purple), rgba(var(--purple-rgb), 0.8));
  color: white;
}

.action-btn.secondary {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--purple-rgb), 0.05));
  color: var(--purple);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.action-btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

.btn-icon {
  font-size: 1.2em;
}

/* System Status */
.system-status {
  background: linear-gradient(135deg, rgba(var(--green-rgb), 0.08), rgba(var(--green-rgb), 0.04));
  border: 1px solid rgba(var(--green-rgb), 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
}

.status-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  border: 1px solid rgba(var(--green-rgb), 0.1);
  transition: all 0.3s ease;
}

.status-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

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

.status-dot.online {
  background: var(--green);
  box-shadow: 0 0 8px rgba(var(--green-rgb), 0.5);
}

.status-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9em;
}

.status-value {
  margin-left: auto;
  font-weight: 600;
  color: var(--green);
  font-size: 0.85em;
}

/* Management Sections */
.management-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 0 4px;
}

.section-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title-section h2 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
  color: #ffffff;
}

.section-title-section .section-lead {
  margin: 0;
  font-size: 1.1em;
  color: #a0a3ad;
  line-height: 1.4;
}

.section-title {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--purple);
  margin: 0;
}

.section-description {
  font-size: 1em;
  color: var(--muted);
  margin: 8px 0 0 0;
}

.section-actions {
  display: flex;
  gap: 12px;
}

/* Content Cards */
.content-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* Members Summary - Synto Design */
.members-summary {
  display: flex;
  gap: 32px;
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.summary-number {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.summary-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Search Form */
.search-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  display: flex;
  width: 100%;
}

.search-input input {
  flex: 1;
  padding: 16px 20px;
  font-size: 1em;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.search-input input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

.search-btn {
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  font-size: 1em;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: rgba(var(--purple-rgb), 0.2);
}

/* Table Styles */
.table-wrapper {
  width: 100%;
  margin: 24px 0;
}

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

.table-header {
  display: grid;
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr;
  gap: 32px;
  padding: 24px 32px;
  font-weight: 700;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  border-radius: 16px;
  margin-bottom: 16px;
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.table-row {
  display: grid;
  grid-template-columns: 3fr 2.5fr 1.2fr 1.2fr 1.5fr 1.5fr 2fr;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  transition: all 0.2s ease;
  align-items: center;
}

.table-row:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.table-cell {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.95em;
  color: var(--text);
  line-height: 1.4;
}

.table-cell:last-child {
  justify-content: flex-end;
  gap: 12px;
}

/* Table Footer */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--purple-rgb), 0.15);
}

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

.page-info {
  font-weight: 600;
  color: var(--text);
}

.table-message {
  font-size: 0.9em;
  color: var(--muted);
}

/* World Controls */
.world-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.worlds-list {
  display: grid;
  gap: 20px;
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.tools-grid .tool-card#rolesCatalogCard {
  grid-column: 1 / -1;
}

/* API Inline Section */
.api-inline-section {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.08), rgba(var(--purple-rgb), 0.04));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.api-inline-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.api-inline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 120px;
}

.api-inline-title {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--purple);
}

.api-inline-badge {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.api-inline-url {
  flex: 1;
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 6px;
  padding: 8px 12px;
}

.api-inline-url code {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  color: var(--purple);
  word-break: break-all;
}

.api-inline-actions {
  display: flex;
  gap: 8px;
}

/* ===========================================
   COMPACT MEMBER DETAILS MODAL
   =========================================== */

.compact-modal {
  max-width: 1000px !important;
  width: 95vw !important;
  max-height: 80vh !important;
  background: var(--surface) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
  overflow: hidden !important;
}

.compact-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px 16px 24px !important;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.15) !important;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--purple-rgb), 0.02)) !important;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compact-header .modal-title {
  font-size: 1.5em !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.member-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.status-dot.active { background: var(--green); }
.status-dot.banned { background: var(--red); }
.status-dot.inactive { background: var(--muted); }

.status-text {
  font-size: 0.8em;
  color: var(--muted);
  font-weight: 600;
}

.close-btn {
  background: rgba(var(--purple-rgb), 0.1) !important;
  border: 1px solid rgba(var(--purple-rgb), 0.2) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  color: var(--text) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.close-btn:hover {
  background: rgba(var(--purple-rgb), 0.2) !important;
  transform: scale(1.05) !important;
}

.compact-body {
  padding: 20px 24px 24px 24px !important;
  max-height: calc(80vh - 80px) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Profile Section */
.profile-section {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
}

.avatar-small {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), rgba(var(--purple-rgb), 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(var(--purple-rgb), 0.2);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.avatar-text {
  font-size: 1.5em;
  font-weight: 800;
  color: white;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px 0;
}

.profile-email {
  font-size: 0.9em;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.profile-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-label {
  font-size: 0.75em;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 0.85em;
  color: var(--text);
  font-weight: 600;
}

/* Content Grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Section Styling */
.section-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--purple);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}

/* Details Section */
.details-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 10px;
  padding: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
}

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

.detail-label {
  font-size: 0.85em;
  color: var(--muted);
  font-weight: 600;
}

.detail-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-id {
  font-family: 'Courier New', monospace;
  font-size: 0.75em;
  color: var(--purple);
  background: rgba(var(--purple-rgb), 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  word-break: break-all;
  max-width: 200px;
}

.copy-btn {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 6px;
  padding: 4px;
  color: var(--purple);
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: rgba(var(--purple-rgb), 0.2);
  transform: scale(1.05);
}

.detail-value {
  font-size: 0.85em;
  color: var(--text);
  font-weight: 600;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.verified {
  background: rgba(var(--green-rgb), 0.1);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}

.status-badge.unverified {
  background: rgba(var(--muted-rgb), 0.1);
  color: var(--muted);
  border: 1px solid rgba(var(--muted-rgb), 0.2);
}

.status-badge.banned {
  background: rgba(var(--red-rgb), 0.1);
  color: var(--red);
  border: 1px solid rgba(var(--red-rgb), 0.2);
}

.status-badge.active {
  background: rgba(var(--green-rgb), 0.1);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}

/* Actions Section */
.actions-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 10px;
  padding: 16px;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8em;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--purple), rgba(var(--purple-rgb), 0.8));
  color: white;
}

.action-btn.secondary {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--purple-rgb), 0.05));
  color: var(--purple);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.action-btn.warning {
  background: linear-gradient(135deg, rgba(var(--red-rgb), 0.1), rgba(var(--red-rgb), 0.05));
  color: var(--red);
  border: 1px solid rgba(var(--red-rgb), 0.2);
}

.action-btn.success {
  background: linear-gradient(135deg, rgba(var(--green-rgb), 0.1), rgba(var(--green-rgb), 0.05));
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.btn-icon {
  font-size: 0.9em;
}

/* Roles Section */
.roles-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 10px;
  padding: 16px;
}

.roles-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 32px;
  padding: 8px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 6px;
}

.no-roles {
  color: var(--muted);
  font-style: italic;
  font-size: 0.8em;
}

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

.role-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.8em;
}

.role-buttons {
  display: flex;
  gap: 6px;
}

.role-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.role-btn.grant {
  background: linear-gradient(135deg, var(--purple), rgba(var(--purple-rgb), 0.8));
  color: white;
}

.role-btn.revoke {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.role-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.message-area {
  padding: 12px;
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: 600;
  margin-top: 8px;
}

.message-area.success {
  background: rgba(var(--green-rgb), 0.1);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}

.message-area.error {
  background: rgba(var(--red-rgb), 0.1);
  color: var(--red);
  border: 1px solid rgba(var(--red-rgb), 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .compact-modal {
    width: 98vw !important;
    max-height: 90vh !important;
  }
  
  .compact-header {
    padding: 16px 20px 12px 20px !important;
  }
  
  .compact-body {
    padding: 16px 20px 20px 20px !important;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .profile-section {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .profile-meta {
    justify-content: center;
  }
  
  .action-buttons {
    grid-template-columns: 1fr;
  }
  
  .role-controls {
    flex-direction: column;
    align-items: stretch;
  }
}


.tool-card-modern#rolesCatalogCard {
  grid-column: 1 / -1;
  max-width: 100%;
}

.tool-card-modern#rolesCatalogCard .tool-content-modern {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tool-card-modern#rolesCatalogCard .tool-form-modern {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 20px;
  align-items: end;
  padding: 24px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
}

.tool-card-modern#rolesCatalogCard .form-field {
  margin: 0;
}

.tool-card-modern#rolesCatalogCard .form-field:last-of-type {
  grid-column: 2;
}

.tool-card-modern#rolesCatalogCard .form-actions-modern {
  grid-column: 3;
  justify-content: flex-end;
}

.roles-catalog-table {
  width: 100%;
}

.roles-catalog-table tbody tr {
  transition: background-color 0.2s ease;
}

.roles-catalog-table tbody tr:hover {
  background: rgba(var(--purple-rgb), 0.06);
}

.roles-catalog-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #e0e0e0;
  font-size: 0.95em;
}

.roles-catalog-table tbody td:first-child {
  font-weight: 600;
  color: #fff;
}

.roles-catalog-table tbody td:nth-child(2) {
  font-family: 'Courier New', monospace;
  color: var(--purple);
  font-size: 0.9em;
}

.roles-catalog-table tbody td:last-child {
  text-align: right;
}

.roles-catalog-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .tool-card#rolesCatalogCard .tool-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .tool-card#rolesCatalogCard .form-field:last-of-type {
    grid-column: 1;
  }
  
  .tool-card#rolesCatalogCard .form-actions {
    grid-column: 1;
    justify-content: flex-start;
  }
}

.tool-card#vrcApiCard {
  padding: 12px !important;
}

.tool-card#vrcApiCard .tool-header {
  margin-bottom: 12px !important;
}

.tool-card#vrcApiCard .tool-title {
  font-size: 1.2em !important;
}

.tool-card#vrcApiCard .api-url {
  padding: 6px !important;
  margin-bottom: 8px !important;
}

.tool-card#vrcApiCard .api-url code {
  font-size: 0.8em !important;
}

.tool-card#vrcApiCard .api-actions {
  gap: 6px !important;
}

.tool-card#vrcApiCard .api-actions .btn {
  padding: 8px 12px !important;
  font-size: 0.85em !important;
}


/* Form Styles */
.tool-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.form-field label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9em;
}

.form-field input,
.form-field select {
  padding: 12px 16px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 1em;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
}

.form-message {
  font-size: 0.9em;
  padding: 12px;
  border-radius: 8px;
  margin-top: 16px;
}

/* Filter Styles */
.audit-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.filter-row {
  display: flex;
  gap: 16px;
}

.filter-select,
.filter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* API URL */
.api-url {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.api-url code {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--purple);
  word-break: break-all;
}

.api-actions {
  display: flex;
  gap: 12px;
}

/* Roles List */
.roles-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roles-list li {
  padding: 12px 16px;
  background: rgba(var(--purple-rgb), 0.05);
  border: 1px solid rgba(var(--purple-rgb), 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}

/* Audit Log */
.audit-log {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}

.log-entries {
  padding: 16px;
}

.audit-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
  
  .table-header,
  .table-row {
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 1fr 1.5fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .dashboard-title {
    font-size: 2em;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    grid-template-columns: 1fr;
  }
  
  .status-items {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .members-summary {
    flex-direction: column;
    gap: 20px;
  }
  
  .world-controls {
    flex-direction: column;
  }
  
  .filter-row {
    flex-direction: column;
  }
  
  .table-wrapper {
    overflow-x: scroll;
  }
  
  .table-header,
  .table-row {
    min-width: 800px;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.5fr 1fr 1.5fr;
    gap: 16px;
    padding: 16px 20px;
  }
}

.btn-secondary-modern {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary-modern:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-discord-modern {
  background: #5865f2;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-discord-modern:hover {
  background: #4752c4;
  transform: translateY(-2px);
}

.btn-danger-modern {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-danger-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}

.btn-ghost-modern {
  background: transparent;
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-ghost-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* Modern Chips */
.chip-verified-modern {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* Roles Grid Modern */
.roles-grid-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.role-chip-modern {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(138, 43, 226, 0.7));
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* Discord Section Modern */
.discord-section-modern {
  margin-top: 16px;
}

.discord-status-modern {
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.discord-indicator {
  color: #10b981;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.discord-hint {
  margin: 0;
  color: #a0a3ad;
  font-size: 13px;
}

.discord-hint code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: #00eaff;
}

/* Code Box Modern */
.code-box-modern {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

.code-box-modern code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 600;
  color: #00eaff;
  background: none;
  padding: 0;
}

.code-description-modern {
  margin: 0 0 8px;
  color: #a0a3ad;
  font-size: 14px;
}

/* Sign Out Section */
.sign-out-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Loading States Modern */
.loading-state-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #a0a3ad;
}

.spinner-modern {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #00eaff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Empty States Modern */
.empty-state-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #a0a3ad;
}

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

.empty-state-modern h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.empty-state-modern p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .account-layout-modern {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .card-modern {
    padding: 20px;
  }
  
  .profile-picture-section-modern {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* === Achievements Admin === */
.achievements-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievement-admin-item:hover {
  background: rgba(0, 234, 255, 0.08) !important;
  border-color: rgba(0, 234, 255, 0.2) !important;
}

.achievement-admin-item code {
  background: rgba(0, 234, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

/* === Achievements Section === */
.achievements-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* Achievement Statistics */
.achievement-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 234, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 234, 255, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #00eaff;
}

.stat-label {
  font-size: 12px;
  color: #a0a3ad;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Achievement Category Headers */
.achievement-category-header {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  color: #00eaff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 234, 255, 0.1);
}

.achievement-category-header:first-child {
  margin-top: 0;
}

.achievement-badge {
  background: #1a1d29;
  border: 2px solid #2a2d3a;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.achievement-badge.unlocked {
  border-color: #00eaff;
  background: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
  box-shadow: 0 4px 20px rgba(0, 234, 255, 0.1);
}

/* Rarity Colors */
.achievement-badge.rarity-common.unlocked {
  border-color: #a0a3ad;
}

.achievement-badge.rarity-rare.unlocked {
  border-color: #00eaff;
  box-shadow: 0 4px 20px rgba(0, 234, 255, 0.15);
}

.achievement-badge.rarity-epic.unlocked {
  border-color: #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
  background: linear-gradient(135deg, #1a1d29 0%, #2a1d3a 100%);
}

.achievement-badge.rarity-legendary.unlocked {
  border-color: #ffd76a;
  box-shadow: 0 4px 25px rgba(255, 215, 106, 0.3);
  background: linear-gradient(135deg, #2a1d29 0%, #3a1d2a 100%);
  animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 4px 25px rgba(255, 215, 106, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(255, 215, 106, 0.5); }
}

/* Unlock Badge */
.achievement-unlock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: #00eaff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #0f1115;
  font-weight: 700;
  z-index: 10;
}

.achievement-badge.locked .achievement-unlock-badge {
  display: none;
}

.achievement-badge.locked {
  opacity: 0.5;
  filter: grayscale(100%);
}

.achievement-badge:hover.unlocked {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 234, 255, 0.2);
}

.achievement-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

.achievement-title {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.2;
}

.achievement-description {
  font-size: 10px;
  color: #a0a3ad;
  margin: 0;
  line-height: 1.3;
}

.achievement-progress {
  position: relative;
  margin-top: 8px;
  height: 4px;
  background: #2a2d3a;
  border-radius: 4px;
  overflow: hidden;
}

.achievement-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00eaff, #8b5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.achievement-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

/* Achievement Tooltip */
.achievement-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #0f1115;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

.achievement-badge:hover .achievement-tooltip {
  opacity: 1;
  visibility: visible;
}

.achievement-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f1115;
}

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

.tooltip-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.tooltip-rarity {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tooltip-rarity.rarity-common {
  background: rgba(160, 163, 173, 0.2);
  color: #a0a3ad;
}

.tooltip-rarity.rarity-rare {
  background: rgba(0, 234, 255, 0.2);
  color: #00eaff;
}

.tooltip-rarity.rarity-epic {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.tooltip-rarity.rarity-legendary {
  background: rgba(255, 215, 106, 0.2);
  color: #ffd76a;
}

.tooltip-description {
  font-size: 12px;
  color: #a0a3ad;
  margin: 0 0 8px;
  line-height: 1.4;
}

.tooltip-progress {
  font-size: 11px;
  color: #00eaff;
  font-weight: 600;
  margin-top: 4px;
}

.tooltip-hint {
  font-size: 11px;
  color: #f59e0b;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  font-style: italic;
}

/* === Favorites Section === */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.favorite-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.favorite-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.favorite-item-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.favorite-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.favorite-item-description {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.favorite-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.favorite-item-price {
  font-weight: 600;
  color: #10b981;
}

.favorite-item-date {
  color: rgba(255, 255, 255, 0.5);
}

.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: rgba(255, 255, 255, 0.4);
}

.empty-state h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.empty-state p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.loading-state {
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Favorite button in modals */
.favorite-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.favorite-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.favorite-btn.favorited {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.favorite-btn.favorited:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}

.favorite-btn svg {
  width: 16px;
  height: 16px;
}

.favorite-count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.25rem;
}

/* === Ban Notification Modal === */
#banModal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

#banModal[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ban-modal-content {
  max-width: 500px;
  width: 90%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2);
}

.ban-header h2 {
  color: #fca5a5;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ban-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.ban-details {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.ban-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}

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

.ban-detail-item strong {
  color: #fca5a5;
  font-weight: 600;
  min-width: 80px;
}

.ban-detail-item span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-align: right;
  flex: 1;
  margin-left: 1rem;
}

.ban-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.ban-actions .btn {
  min-width: 120px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.ban-actions .btn-primary {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.ban-actions .btn-primary:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-2px);
}

.ban-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.ban-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.ban-actions .btn-secondary {
  background: rgba(107, 114, 128, 0.2);
  border: 1px solid rgba(107, 114, 128, 0.4);
  color: rgba(255, 255, 255, 0.8);
}

.ban-actions .btn-secondary:hover {
  background: rgba(107, 114, 128, 0.3);
  border-color: rgba(107, 114, 128, 0.6);
  transform: translateY(-2px);
}

/* Mobile responsiveness for ban modal */
@media (max-width: 640px) {
  .ban-modal-content {
    width: 95%;
    padding: 1.5rem;
  }
  
  .ban-header h2 {
    font-size: 1.25rem;
  }
  
  .ban-details {
    padding: 1rem;
  }
  
  .ban-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .ban-detail-item span {
    margin-left: 0;
    text-align: left;
  }
  
  .ban-actions {
    flex-direction: column;
  }
  
  .ban-actions .btn {
    width: 100%;
  }
}

/* Discord OAuth Message */
.discord-oauth-message {
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 16px;
  padding: 24px;
  margin-top: 16px;
}

.oauth-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.oauth-icon {
  font-size: 24px;
  margin-top: 4px;
}

.oauth-text h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.oauth-text p {
  margin: 0;
  color: #a0a3ad;
  font-size: 14px;
  line-height: 1.5;
}

.oauth-text a {
  color: #00eaff;
  text-decoration: none;
  font-weight: 500;
}

.oauth-text a:hover {
  text-decoration: underline;
}
/* === MODERN CONTACT PAGE STYLES === */
.contact-methods-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding: 32px;
}

.contact-method-card-modern {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.contact-method-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.6) 0%, 
    rgba(0, 234, 255, 0.6) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.contact-method-card-modern:hover::before {
  transform: scaleX(1);
}

.contact-method-card-modern:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 43, 226, 0.3);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.contact-method-discord:hover {
  background: linear-gradient(135deg, 
    rgba(88, 101, 242, 0.1) 0%, 
    rgba(88, 101, 242, 0.05) 100%);
  border-color: rgba(88, 101, 242, 0.3);
}

.contact-method-email:hover {
  background: linear-gradient(135deg, 
    rgba(0, 234, 255, 0.1) 0%, 
    rgba(0, 234, 255, 0.05) 100%);
  border-color: rgba(0, 234, 255, 0.3);
}

.contact-method-vrc:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.1) 0%, 
    rgba(138, 43, 226, 0.05) 100%);
  border-color: rgba(138, 43, 226, 0.3);
}

.contact-method-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.contact-method-icon-wrapper-modern {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.15) 0%, 
    rgba(0, 234, 255, 0.15) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 14px;
  color: rgba(0, 234, 255, 0.9);
  flex-shrink: 0;
}

.contact-method-discord .contact-method-icon-wrapper-modern {
  color: #5865f2;
  background: rgba(88, 101, 242, 0.15);
  border-color: rgba(88, 101, 242, 0.2);
}

.contact-method-email .contact-method-icon-wrapper-modern {
  color: rgba(0, 234, 255, 0.9);
}

.contact-method-vrc .contact-method-icon-wrapper-modern {
  color: rgba(138, 43, 226, 0.9);
}

.contact-method-icon-wrapper-modern svg {
  width: 32px;
  height: 32px;
}

.contact-method-badge-modern {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-method-content-modern {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-method-title-modern {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.contact-method-description-modern {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.contact-method-features-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.contact-feature-chip-modern {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.contact-method-action-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: rgba(0, 234, 255, 0.9);
  font-size: 14px;
}

.contact-method-action-modern svg {
  transition: transform 0.3s ease;
}

.contact-method-card-modern:hover .contact-method-action-modern svg {
  transform: translateX(4px);
}

.contact-faq-cta-modern {
  text-align: center;
}

.contact-faq-cta-content-modern {
  padding: 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .contact-methods-grid-modern {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
  }
  
  .contact-method-card-modern {
    padding: 20px;
  }
  
  .contact-faq-cta-content-modern {
    padding: 24px 20px;
  }
  
  .contact-faq-cta-content-modern .btn {
    width: 100%;
    justify-content: center;
  }
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #00eaff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}


/* Contact Methods */
.contact-methods {
  padding: 80px 0;
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
}

.method-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.method-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.method-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

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

.discord-method:hover {
  border-color: rgba(88, 101, 242, 0.3);
}

.email-method:hover {
  border-color: rgba(0, 234, 255, 0.3);
}

.vr-method:hover {
  border-color: rgba(138, 43, 226, 0.3);
}

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

.method-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.discord-method .method-icon {
  color: #5865f2;
}

.email-method .method-icon {
  color: #00eaff;
}

.vr-method .method-icon {
  color: rgba(138, 43, 226, 0.9);
}

.method-card .vrchat-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.method-card:hover .vrchat-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 165, 0, 0.3));
}

.method-card:hover .method-icon {
  transform: scale(1.1);
}

.method-badge {
  padding: 6px 12px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #00eaff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.method-content {
  flex: 1;
}

.method-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.method-description {
  font-size: 16px;
  color: #a0a3ad;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.method-features {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.feature {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #a0a3ad;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.method-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border: none;
  border-radius: 16px;
  color: #1a1d29;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.method-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.method-btn:hover::before {
  left: 100%;
}

.method-btn:hover {
  background: linear-gradient(135deg, #00d4e6 0%, #0088bb 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 234, 255, 0.3);
}

/* FAQ Section */
.faq-section {
  padding: 80px 0;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.faq-content-wrapper {
  padding: 32px;
  margin-bottom: 32px;
}

.faq-content-wrapper .tool-header-modern {
  margin-bottom: 32px;
}

.faq-content-modern {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-category-modern {
  margin-bottom: 0;
}

.faq-category-modern .tool-header-modern {
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.faq-grid-modern {
  display: grid;
  gap: 16px;
}

.faq-item-modern {
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-item-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  transform: translateY(-2px);
}

.faq-question-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  gap: 16px;
  cursor: pointer;
}

.faq-question-text {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.faq-chevron-modern {
  color: rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-question-modern.active .faq-chevron-modern {
  transform: rotate(180deg);
  color: var(--cyan);
}

.faq-answer-modern {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

/* === LEGAL PAGES (TERMS & PRIVACY) === */
.legal-content-modern {
  padding: 32px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.legal-content-modern h2 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 32px 0 16px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(138, 43, 226, 0.2);
}

.legal-content-modern h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content-modern h3 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 24px 0 12px 0;
}

.legal-content-modern h4 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 234, 255, 0.9);
  margin: 16px 0 8px 0;
}

.legal-content-modern p {
  margin: 0 0 16px 0;
  color: rgba(255, 255, 255, 0.8);
}

.legal-content-modern ul,
.legal-content-modern ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.legal-content-modern li {
  margin: 0 0 8px 0;
  line-height: 1.6;
}

.legal-content-modern li strong {
  color: rgba(0, 234, 255, 0.9);
  font-weight: 600;
}

.legal-content-modern a {
  color: rgba(0, 234, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-content-modern a:hover {
  color: var(--cyan);
  text-decoration: underline;
}

/* === 404 ERROR PAGE === */
.error-404-modern {
  text-align: center;
  width: 100%;
}

.error-404-number {
  font-size: clamp(80px, 15vw, 140px);
  font-weight: 900;
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.9) 0%,
    rgba(0, 234, 255, 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 20px rgba(138, 43, 226, 0.3));
  animation: fadeInUpModern 0.8s ease-out;
}

@media (max-width: 768px) {
  .legal-content-modern {
    padding: 24px 20px;
  }
  
  .legal-content-modern h2 {
    font-size: 20px;
    margin: 24px 0 12px 0;
  }
  
  .legal-content-modern h3 {
    font-size: 18px;
    margin: 20px 0 10px 0;
  }
  
  .error-404-number {
    font-size: clamp(60px, 12vw, 100px);
  }
}

.faq-answer-modern[style*="display: block"] {
  max-height: 1000px;
  padding: 0 24px 24px;
}

.faq-answer-content-modern {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  font-size: 15px;
}

.faq-answer-content-modern p {
  margin: 0 0 12px 0;
}

.faq-answer-content-modern p:last-child {
  margin-bottom: 0;
}

.faq-loading {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.faq-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--purple-rgb), 0.3);
  border-top: 3px solid var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.contact-cta-section {
  padding: 80px 0;
}

.contact-cta-modern {
  padding: 32px;
}

.contact-cta-modern .tool-header-modern {
  margin-bottom: 24px;
}

.contact-cta-content-modern {
  text-align: center;
}

.contact-cta-subtitle-modern {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
}

.contact-cta-actions-modern {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-title {
  font-size: 48px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #ffffff 0%, #a0a3ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-subtitle {
  font-size: 18px;
  color: #a0a3ad;
  margin: 0;
}

.faq-grid {
  display: grid;
  gap: 24px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .contact-container {
    padding: 0 20px;
  }
  
  .contact-hero {
    padding: 60px 0 80px;
  }
  
  .hero-title {
    font-size: 36px;
  }
  
  .hero-description {
    font-size: 18px;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .stat-divider {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  }
  
  .methods-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .method-card {
    padding: 24px;
  }
  
  .faq-title {
    font-size: 36px;
  }
  
  .faq-item {
    padding: 24px;
  }
}

.modern-shop-page {
  min-height: 100vh;
  padding: 0;
  /* Background is inherited from body with modern gradient orbs */
}

/* === MODERN SHOP HEADER (MATCHES CONTROLS DESIGN) === */
.shop-header-modern {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 32px;
  overflow: hidden;
  position: relative;
}

.shop-header-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
}

.shop-header-content {
  padding: 32px 32px 24px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.shop-header-left {
  flex: 1;
}

.shop-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.shop-subtitle {
  font-size: 16px;
  color: #a0a0a0;
  margin: 0;
  font-weight: 400;
}

.shop-header-right {
  display: flex;
  align-items: center;
}

.shop-stats-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0a0a0;
  font-size: 14px;
  font-weight: 500;
}

.stat-inline {
  color: #00eaff;
  font-weight: 600;
}

.stat-divider {
  color: #4a4a4a;
  font-weight: 400;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .shop-header-modern {
    margin: 20px;
  }
  
  .shop-header-content {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .shop-title {
    font-size: 20px;
  }
  
  .shop-subtitle {
    font-size: 14px;
  }
  
  .shop-stats-inline {
    font-size: 13px;
  }
}

/* Search Highlighting */
.search-highlight {
  background: linear-gradient(120deg, #ffd700 0%, #ffed4e 100%);
  color: #1a1d29;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
}

/* Search Results Count */
.search-results-count {
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  color: #ffd700;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  animation: slideInDown 0.3s ease-out;
}

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

.shop-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

/* Modern Shop Header */
.modern-shop-header {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(42, 45, 58, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px 0;
  position: relative;
  z-index: 10;
}

.shop-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.shop-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.shop-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.shop-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 32px rgba(0, 234, 255, 0.3);
  transition: all 0.3s ease;
}

.shop-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 234, 255, 0.4);
}

.shop-info {
  flex: 1;
}

.shop-title {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, #a0a3ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shop-subtitle {
  font-size: 16px;
  color: #a0a3ad;
  margin: 0;
  line-height: 1.5;
}

.shop-stats-overview {
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px 32px;
  backdrop-filter: blur(10px);
}

.main-stat {
  text-align: center;
  padding-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.main-stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #00eaff;
  line-height: 1;
  margin-bottom: 4px;
}

.main-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: #a0a3ad;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-breakdown {
  display: flex;
  gap: 24px;
}

.breakdown-item {
  text-align: center;
}

.breakdown-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.breakdown-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modern Shop Controls */
.modern-shop-controls {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 32px;
  overflow: hidden;
  position: relative;
}

.modern-shop-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
}

.controls-header {
  padding: 32px 32px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.controls-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.controls-subtitle {
  font-size: 16px;
  color: #a0a3ad;
  margin: 0;
}

.controls-content {
  padding: 32px;
}

.search-section-modern {
  margin-bottom: 32px;
}

.search-container-modern {
  display: flex;
  gap: 12px;
  max-width: 600px;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a3ad;
  z-index: 2;
}

.search-input-wrapper input {
  width: 100%;
  padding: 18px 20px 18px 56px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.search-input-wrapper input::placeholder {
  color: #6b7280;
}

.search-btn-modern {
  padding: 12px 16px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border: none;
  border-radius: 12px;
  color: #1a1d29;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-left: 8px;
}

.search-btn-modern:hover {
  background: linear-gradient(135deg, #00d4e6 0%, #0088bb 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.3);
}

.search-btn-modern:active {
  transform: translateY(0);
}

/* Modern Search Input Container */
.search-input-modern {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 4px;
  transition: all 0.3s ease;
  max-width: 600px;
}

.search-input-modern:focus-within {
  border-color: rgba(0, 234, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.search-icon {
  position: absolute;
  left: 16px;
  color: #a0a0a0;
  z-index: 1;
  pointer-events: none;
}

.search-input-modern input {
  flex: 1;
  padding: 16px 16px 16px 48px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  outline: none;
}

.search-input-modern input::placeholder {
  color: #a0a0a0;
  font-weight: 400;
}

.search-btn-modern:hover {
  background: linear-gradient(135deg, #00d4e6 0%, #0088bb 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 234, 255, 0.3);
}

.search-btn-modern:active {
  transform: translateY(0);
}

/* Mobile Responsive for Search */
@media (max-width: 768px) {
  .search-input-modern {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  .search-input-modern input {
    padding: 16px 16px 16px 48px;
    margin-bottom: 0;
  }
  
  .search-btn-modern {
    width: 100%;
    margin-left: 0;
    padding: 16px;
  }
  
  .search-container-modern {
    flex-direction: column;
    gap: 16px;
  }
}

.filters-section-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  align-items: end;
}

.filter-group-modern {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.select-wrapper-modern {
  position: relative;
}

.filter-select-modern {
  width: 100%;
  padding: 16px 48px 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-select-modern:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-select-modern:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.filter-select-modern option {
  background: #1a1d29;
  color: #ffffff;
  padding: 12px 16px;
  border: none;
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a3ad;
  pointer-events: none;
  transition: all 0.3s ease;
}

.select-wrapper-modern:hover .select-arrow {
  color: #ffffff;
}

.select-wrapper-modern:focus-within .select-arrow {
  color: #00eaff;
  transform: translateY(-50%) rotate(180deg);
}

/* Duplicate btn-modern removed - using unified .btn system */

.btn-clear-modern {
  background: rgba(255, 255, 255, 0.05);
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.btn-clear-modern:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Duplicate button styles removed - using unified .btn system */

/* Modern Loading State */
.modern-shop-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 60px 32px;
}

.loading-content {
  text-align: center;
}

.loading-spinner-modern {
  margin-bottom: 24px;
}

.spinner-ring {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #00eaff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.loading-subtitle {
  font-size: 16px;
  color: #a0a3ad;
  margin: 0;
}

/* Modern Empty State */
.modern-shop-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 60px 32px;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.empty-icon-modern {
  font-size: 64px;
  margin-bottom: 24px;
  opacity: 0.6;
}

.empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.empty-subtitle {
  font-size: 16px;
  color: #a0a3ad;
  margin: 0 0 32px 0;
  line-height: 1.5;
}

/* Modern Worlds Grid */
.modern-worlds-grid {
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 32px;
}

/* Modern Load More Section */
.modern-load-more-section {
  padding: 40px 32px 60px;
  text-align: center;
}

.load-more-content {
  max-width: 300px;
  margin: 0 auto;
}

.load-more-hint {
  font-size: 14px;
  color: #a0a3ad;
  margin: 16px 0 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shop-header-content {
    flex-direction: column;
    gap: 24px;
    padding: 0 20px;
  }
  
  .shop-header-left {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .shop-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  
  .shop-title {
    font-size: 28px;
  }
  
  .shop-header-main {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  
  .shop-brand {
    flex-direction: column;
    gap: 16px;
  }
  
  .shop-stats-overview {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .main-stat {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .stats-breakdown {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .modern-shop-controls {
    margin: 20px;
  }
  
  .controls-content {
    padding: 24px;
  }
  
  .filters-section-modern {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .modern-worlds-grid {
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Modern World Cards */
.modern-world-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.modern-world-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
}

.modern-world-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  border-color: rgba(0, 234, 255, 0.25);
}

.card-image-container {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.modern-world-card:hover .card-image {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-world-card:hover .card-overlay {
  opacity: 1;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modern-tag {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.18), rgba(0, 153, 204, 0.18));
  color: #7fefff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0, 234, 255, 0.28);
  letter-spacing: 0.2px;
}

.card-category {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
  backdrop-filter: blur(10px);
}

.card-category.world-assets {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.card-category.chill-worlds {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.card-category.club-worlds {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  backdrop-filter: blur(10px);
}

.card-status.available {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.card-status.coming-soon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.card-status.sold-out {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* World Card Specific Styles - Override Unified Card System */
.modern-world-card .card-content {
  padding: 24px;
}

.modern-world-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.05) 0%, rgba(0, 153, 204, 0.05) 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 234, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.modern-world-card .card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
}

.modern-world-card .card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
}

.modern-world-card .card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.modern-world-card .card-price {
  font-size: 20px;
  font-weight: 800;
  color: #00eaff;
  background: rgba(0, 234, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 234, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 234, 255, 0.1);
}

.modern-world-card .card-rating {
  font-size: 14px;
  color: #fbbf24;
  font-weight: 600;
}

.modern-world-card .card-description {
  font-size: 14px;
  color: #a0a3ad;
  line-height: 1.5;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-world-card .card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-action-btn {
  flex: 1;
  justify-content: center;
}

/* World Card Action Buttons - Using Unified Button System */
.modern-world-card .card-action-btn {
  /* Inherits from unified .btn system */
  flex: 1;
}

.modern-world-card .favorite-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #a0a3ad;
  transition: all 0.3s ease;
}

.modern-world-card .favorite-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: translateY(-2px);
}

.modern-world-card .favorite-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
  fill: currentColor;
}

.modern-world-card .favorite-btn:hover svg {
  color: #ef4444;
  transform: scale(1.1);
}

.modern-world-card .favorite-btn.favorited {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.modern-world-card .favorite-btn.favorited svg {
  fill: #ef4444;
  color: #ef4444;
}

/* Responsive Design for World Cards */
@media (max-width: 768px) {
  .modern-worlds-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .modern-world-card .card-content {
    padding: 20px;
  }
  
  .modern-world-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  
  .modern-world-card .card-meta {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
  }
  
  .modern-world-card .card-price {
    font-size: 18px;
    padding: 6px 10px;
  }
  
  .card-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .card-action-btn {
    width: 100%;
  }
  
  /* Featured card responsive adjustments */
  .feature-grid .modern-world-card.feature-card {
    min-height: 350px;
  }
  
  .feature-grid .modern-world-card.feature-card .card-image-container {
    height: 180px;
  }
  
  .feature-grid .modern-world-card.feature-card .card-content {
    padding: 16px;
  }
}

/* === MARKETPLACE CARDS STYLES === */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.marketplace-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.marketplace-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.marketplace-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 234, 255, 0.2);
}

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

.marketplace-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #00eaff;
  transition: all 0.3s ease;
  padding: 8px;
}

.marketplace-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: brightness(1.1) contrast(1.1);
  transition: all 0.3s ease;
}

.marketplace-card:hover .marketplace-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

.marketplace-card:hover .marketplace-icon img {
  filter: brightness(1.2) contrast(1.2);
  transform: scale(1.05);
}

.marketplace-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.marketplace-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.marketplace-content p {
  font-size: 16px;
  color: #a0a3ad;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.marketplace-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.feature-tag {
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.2);
  color: #00eaff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.marketplace-btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 16px;
}

.marketplace-btn svg {
  transition: transform 0.3s ease;
}

.marketplace-btn:hover svg {
  transform: translateX(4px);
}

/* Responsive Design for Marketplace Cards */
@media (max-width: 1024px) {
  .marketplace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .marketplace-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .marketplace-card {
    padding: 24px;
  }
  
  .marketplace-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }
  
  .marketplace-content h3 {
    font-size: 20px;
  }
  
  .marketplace-content p {
    font-size: 14px;
  }
  
  .marketplace-btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* === MEMBERSHIP CARDS STYLES === */
.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.membership-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.membership-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.membership-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 234, 255, 0.2);
}

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

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

.membership-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  transition: all 0.3s ease;
}

.membership-card:hover .membership-icon {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2), rgba(139, 92, 246, 0.2));
  border-color: rgba(0, 234, 255, 0.4);
  transform: scale(1.05);
}

.membership-badge {
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.2);
  color: #00eaff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.membership-badge.premium {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

.membership-badge.community {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.membership-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.membership-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.membership-description {
  font-size: 16px;
  color: #a0a3ad;
  line-height: 1.5;
  margin: 0;
}

.membership-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.feature-item svg {
  color: #00eaff;
  flex-shrink: 0;
}

.membership-btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  font-weight: 600;
  font-size: 16px;
}

.membership-btn svg {
  transition: transform 0.3s ease;
}

.membership-btn:hover svg {
  transform: translateX(4px);
}

/* Special styling for different membership types */
.supporter-card {
  border-color: rgba(0, 234, 255, 0.15);
}

.supporter-card:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 234, 255, 0.1);
}

.creator-card {
  border-color: rgba(139, 92, 246, 0.15);
}

.creator-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
}

.community-card {
  border-color: rgba(34, 197, 94, 0.15);
}

.community-card:hover {
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 20px 40px rgba(34, 197, 94, 0.1);
}

/* Responsive Design for Membership Cards */
@media (max-width: 1024px) {
  .membership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .membership-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .membership-card {
    padding: 24px;
  }
  
  .membership-icon {
    width: 56px;
    height: 56px;
  }
  
  .membership-content h3 {
    font-size: 20px;
  }
  
  .membership-description {
    font-size: 14px;
  }
  
  .membership-btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* === REDESIGNED ABOUT SECTION STYLES === */
.about-hero {
  text-align: center;
  margin-bottom: 4rem;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #06b6d4;
  margin-bottom: 2rem;
}

.about-badge svg {
  color: #06b6d4;
}

.about-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 800px;
  margin: 0 auto;
}

.about-cta {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 24px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.about-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
}

.cta-content h3 {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 1rem 0;
}

.cta-content p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.about-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-footer .rules {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .about-title {
    font-size: 2.5rem;
  }
  
  .about-subtitle {
    font-size: 1.125rem;
  }
}

@media (max-width: 768px) {
  .about-hero {
    margin-bottom: 3rem;
  }
  
  .about-badge {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }
  
  .about-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .about-subtitle {
    font-size: 1rem;
  }
  
  .about-cta {
    padding: 2rem 1.5rem;
  }
  
  .cta-content h3 {
    font-size: 1.5rem;
  }
  
  .cta-content p {
    font-size: 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* VRChat Icon Styling */
.vrchat-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.btn:hover .vrchat-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.vrchat-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.method-card:hover .vrchat-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(0, 234, 255, 0.4));
}

/* Featured Worlds - Same Modern Style as Shop but Keep Current Size */
.modern-world-card.feature-card {
  /* Inherits all modern-world-card styles but with size constraints */
  max-width: none; /* Remove any max-width constraints */
  width: 100%; /* Full width within grid */
  border-color: rgba(0, 234, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(0, 234, 255, 0.10), 0 10px 28px rgba(0, 234, 255, 0.10);
}

/* Ensure featured cards maintain their grid layout */
.feature-grid .modern-world-card.feature-card {
  height: auto; /* Let content determine height */
  min-height: 400px; /* Minimum height to match original cards */
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Featured card specific adjustments */
.feature-grid .modern-world-card.feature-card .card-image-container {
  height: 200px; /* Match original feature card image height */
}

.feature-grid .modern-world-card.feature-card .card-content {
  padding: 20px; /* Slightly more padding for featured cards */
}

.feature-grid .modern-world-card.feature-card:hover {
  border-color: rgba(0, 234, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(0, 234, 255, 0.18), 0 16px 40px rgba(0, 234, 255, 0.16);
}

.feature-grid .modern-world-card.feature-card .card-header {
  margin-bottom: 12px; /* Tighter spacing for featured cards */
}

.feature-grid .modern-world-card.feature-card .card-description {
  margin-bottom: 16px; /* Adjust description spacing */
}

.feature-grid .modern-world-card.feature-card .card-actions {
  margin-top: auto; /* Push actions to bottom */
}

/* === PARTNERS SECTION STYLES === */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}


/* === MODERN WORLD EDITOR PAGE STYLES === */

.world-editor-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0b0f 0%, #1a1d29 50%, #2a2d3a 100%);
  padding: 0;
}

.editor-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Modern Header */
.modern-editor-header {
  background: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.header-left {
  flex-shrink: 0;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #a0a3ad;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.back-button:hover {
  color: #00eaff;
  background: rgba(0, 234, 255, 0.1);
  border-color: rgba(0, 234, 255, 0.2);
  transform: translateY(-2px);
}

.header-center {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.editor-icon-modern {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 12px 24px rgba(0, 234, 255, 0.3);
  animation: pulse 2s infinite;
}

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

.editor-info {
  text-align: center;
}

.editor-title-modern {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #ffffff 0%, #a0a3ad 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.editor-subtitle-modern {
  font-size: 16px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.header-right {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

/* Duplicate btn-modern removed - using unified .btn system */

/* Duplicate button styles removed - using unified .btn system */

/* Modern Content */
.modern-editor-content {
  padding: 40px 32px 60px;
}

.modern-world-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Modern Cards */
.modern-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.modern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 234, 255, 0.2);
}

.card-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.2);
  flex-shrink: 0;
}

.card-title-section h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-title-section {
  flex: 1;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.card-subtitle {
  font-size: 14px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.card-content {
  padding: 20px;
}

/* Profile Card Specific Styles */
.profile-picture-section-modern {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.profile-info-modern {
  flex: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.profile-email {
  font-size: 14px;
  color: #a0a0a0;
}

/* VRChat Section */
.vrchat-section-modern {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vrchat-section-modern h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.form-actions-modern {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* Verification Instructions */
.verification-instructions {
  margin-top: 20px;
  padding: 16px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
}

.verification-code-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.verification-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.verification-code {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.verification-code code {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 1px;
  flex: 1;
  user-select: all;
}

.verification-steps {
  margin: 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.6;
}

.verification-steps li {
  margin-bottom: 8px;
}

.verification-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-style: italic;
}

/* Modern Form Grid */
.modern-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

/* Modern Labels */
.modern-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.label-text {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.label-required {
  color: #ff6b6b;
  font-size: 12px;
  margin-left: 4px;
}

.label-hint {
  font-size: 13px;
  color: #a0a3ad;
  font-weight: 400;
}

/* Modern Inputs */
.modern-input,
.modern-textarea {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.modern-input:focus,
.modern-textarea:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
  transform: translateY(-1px);
}

.modern-input::placeholder,
.modern-textarea::placeholder {
  color: #6b7280;
}

.modern-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* Modern Select */
.modern-select-wrapper {
  position: relative;
}

.modern-select {
  width: 100%;
  padding: 16px 50px 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modern-select:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
  transform: translateY(-1px);
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a3ad;
  pointer-events: none;
}

/* Modern Toggles */
.toggle-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.modern-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.modern-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  width: 48px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modern-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: #00eaff;
}

.modern-toggle input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 15px;
  color: #ffffff;
  font-weight: 500;
}

.modern-toggle.large .toggle-slider {
  width: 56px;
  height: 32px;
}

.modern-toggle.large .toggle-slider::before {
  width: 28px;
  height: 28px;
  top: 2px;
  left: 2px;
}

.modern-toggle.large input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.featured-toggle {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 234, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(0, 234, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  
  .header-center {
    order: -1;
  }
  
  .editor-icon-modern {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .editor-title-modern {
    font-size: 24px;
  }
  
  .header-right {
    width: 100%;
    justify-content: center;
  }
  
  .modern-editor-content {
    padding: 24px 20px 40px;
  }
  
  .card-header {
    padding: 12px 16px;
  }
  
  .card-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .card-title-section h3 {
    font-size: 16px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .profile-picture-section-modern {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .vrchat-section-modern {
    margin-top: 16px;
    padding-top: 16px;
  }
  
  .form-actions-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .modern-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .toggle-input-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.editor-header {
  background: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  margin-bottom: 32px;
}

.editor-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.editor-breadcrumb {
  flex-shrink: 0;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0a3ad;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: #00eaff;
}

.editor-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.editor-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 16px rgba(0, 234, 255, 0.3);
}

.editor-title-content {
  flex: 1;
}

.editor-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.editor-subtitle {
  font-size: 14px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.editor-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.editor-btn-secondary,
.editor-btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.editor-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

.editor-btn-primary {
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  color: #1a1d29;
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.3);
}

.editor-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 234, 255, 0.4);
}

.editor-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.world-editor-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.editor-section {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.section-divider {
  height: 2px;
  background: linear-gradient(90deg, #00eaff 0%, transparent 100%);
  border-radius: 1px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.editor-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.label-text {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.label-required {
  color: #ff6b6b;
  font-size: 12px;
}

.label-hint {
  font-size: 12px;
  color: #a0a3ad;
  font-weight: 400;
}

.editor-input,
.editor-textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.editor-input:focus,
.editor-textarea:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.editor-input::placeholder,
.editor-textarea::placeholder {
  color: #6b7280;
}

.editor-textarea {
  resize: vertical;
  min-height: 100px;
}

.editor-select-wrapper {
  position: relative;
}

.editor-select {
  width: 100%;
  padding: 14px 40px 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-select:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.editor-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.editor-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: #00eaff;
}

.editor-toggle input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.editor-toggle.large .toggle-slider {
  width: 52px;
  height: 28px;
}

.editor-toggle.large .toggle-slider::before {
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
}

.editor-toggle.large input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(24px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .editor-header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .editor-title-section {
    justify-content: center;
    text-align: center;
  }
  
  .editor-actions {
    justify-content: center;
  }
  
  .editor-content {
    padding: 0 16px 32px;
  }
  
  .editor-section {
    padding: 24px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .editor-title {
    font-size: 24px;
  }
}

/* === MODERN MODAL STYLES === */

.modern-modal {
  max-width: 900px;
  width: 95%;
  margin: 2% auto;
  max-height: 90vh;
  overflow: hidden;
}

.modern-modal-content {
  background: linear-gradient(135deg, #1a1d29 0%, #2a2d3a 100%);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modern-modal-header {
  background: linear-gradient(135deg, #2a2d3a 0%, #3a3d4a 100%);
  padding: 20px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 12px rgba(0, 234, 255, 0.3);
}

.modal-title-section {
  flex: 1;
}

.modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 13px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.modern-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: #a0a3ad;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modern-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.05);
}

.modern-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 140px);
}

.modern-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, #00eaff 0%, transparent 100%);
  border-radius: 1px;
}

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

.form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.modern-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.label-text {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.label-required {
  color: #ff6b6b;
  font-size: 11px;
}

.label-hint {
  font-size: 11px;
  color: #a0a3ad;
  font-weight: 400;
}

.modern-input,
.modern-textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.modern-input:focus,
.modern-textarea:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.1);
}

.modern-input::placeholder,
.modern-textarea::placeholder {
  color: #6b7280;
}

.modern-textarea {
  resize: vertical;
  min-height: 60px;
}

.modern-select-wrapper {
  position: relative;
}

.modern-select {
  width: 100%;
  padding: 10px 32px 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modern-select:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.1);
}

.select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a3ad;
  pointer-events: none;
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modern-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.modern-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.modern-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: #00eaff;
}

.modern-toggle input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.toggle-label {
  font-size: 13px;
  color: #ffffff;
  font-weight: 500;
}

.modern-toggle.large .toggle-slider {
  width: 44px;
  height: 24px;
}

.modern-toggle.large .toggle-slider::before {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
}

.modern-toggle.large input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.modern-modal-footer {
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.modern-btn-ghost,
.modern-btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.modern-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modern-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

.modern-btn-primary {
  background: linear-gradient(135deg, #00eaff 0%, #0099cc 100%);
  color: #1a1d29;
  box-shadow: 0 3px 8px rgba(0, 234, 255, 0.3);
}

.modern-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-modal {
    width: 98%;
    margin: 1% auto;
    max-height: 98vh;
  }
  
  .modern-modal-header {
    padding: 20px 24px;
  }
  
  .modal-header-content {
    gap: 12px;
  }
  
  .modal-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .modal-title {
    font-size: 20px;
  }
  
  .modern-modal-body {
    padding: 24px;
  }
  
  .form-section {
    padding: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .modern-modal-footer {
    padding: 20px 24px;
    flex-direction: column;
  }
  
  .modern-btn-ghost,
  .modern-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* === CATEGORY STYLING === */

.world-category,
.world-card-category {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
}

/* Category-specific colors */
.world-category.world-assets,
.world-card-category.world-assets {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.world-category.chill-worlds,
.world-card-category.chill-worlds {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.world-category.club-worlds,
.world-card-category.club-worlds {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
}

.world-category.uncategorized,
.world-card-category.uncategorized {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.3);
}

/* Admin world list category styling */
.world-item-meta .world-category {
  margin-left: 8px;
}

/* Shop page category filter styling */
.filter-group label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: block;
}

.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: end;
  margin-bottom: 30px;
  padding: 20px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-elevation-low);
}

/* Responsive category styling */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .world-card-category {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* === SHOP PAGE STYLES === */

/* Shop Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header-content h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #00eaff, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-header-content p {
  font-size: 1.1rem;
  color: #a0a3ad;
  margin: 0;
}

.shop-stats {
  text-align: right;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #00eaff;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: #a0a3ad;
  margin-top: 4px;
}

/* Shop Controls */
.shop-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.search-section {
  display: flex;
  justify-content: center;
}

.search-input {
  position: relative;
  max-width: 400px;
  width: 100%;
}

.search-input input {
  width: 100%;
  padding: 14px 50px 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.2s ease;
}

.search-input input:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #a0a3ad;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.search-btn:hover {
  color: #00eaff;
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 120px;
}

.filter-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a0a3ad;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #00eaff;
  background: rgba(255, 255, 255, 0.08);
}

.filter-select option {
  background: #1a1d29;
  color: #ffffff;
}

/* Shop Loading & Empty States */
.shop-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.shop-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 234, 255, 0.2);
  border-top: 3px solid #00eaff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.shop-loading p {
  color: #a0a3ad;
  font-size: 1.1rem;
  margin: 0;
}

.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.6;
}

.shop-empty h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #ffffff;
}

.shop-empty p {
  color: #a0a3ad;
  font-size: 1rem;
  margin: 0 0 24px 0;
  max-width: 400px;
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  color: #ef4444;
}

.error-state h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #ffffff;
}

.error-state p {
  color: #a0a3ad;
  font-size: 1rem;
  margin: 0 0 24px 0;
  max-width: 400px;
}

/* Worlds Grid */
.worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.world-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.world-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 234, 255, 0.1);
}

.world-card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.world-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.world-card:hover .world-card-image img {
  transform: scale(1.05);
}

.world-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.world-card:hover .world-card-overlay {
  opacity: 1;
}

.world-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.world-card-tags .tag {
  background: rgba(0, 234, 255, 0.2);
  color: #00eaff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.world-card-status {
  align-self: flex-end;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.world-card-status.available {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.world-card-status.coming-soon {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.world-card-status.sold-out {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.world-card-content {
  padding: 20px;
}

.world-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #ffffff;
  line-height: 1.3;
}

.world-card-description {
  color: #a0a3ad;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.world-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.world-card-price .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #00eaff;
}

.world-card-rating .rating {
  font-size: 0.9rem;
  color: #fbbf24;
  font-weight: 600;
}

.world-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.world-card-actions .btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.world-card-actions .favorite-btn {
  flex: 0 0 auto;
  padding: 10px;
  min-width: 44px;
}

.favorite-btn svg {
  transition: all 0.2s ease;
}

.favorite-btn:hover svg {
  transform: scale(1.1);
}

.favorite-btn.favorited svg {
  fill: #ef4444;
  color: #ef4444;
}

/* Load More Section */
.load-more-section {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.load-more-section .btn {
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
}

/* Shop Page Responsive Design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .page-header-content h1 {
    font-size: 2rem;
  }
  
  .shop-controls {
    padding: 16px;
  }
  
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    min-width: auto;
  }
  
  .worlds-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .world-card-content {
    padding: 16px;
  }
  
  .world-card-actions {
    flex-direction: column;
  }
  
  .world-card-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header-content h1 {
    font-size: 1.75rem;
  }
  
  .world-card-title {
    font-size: 1.1rem;
  }
  
  .world-card-description {
    font-size: 0.85rem;
  }
}
/* === BLOG ADMIN STYLES === */

.blog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--purple-rgb), 0.15);
  border-color: rgba(var(--purple-rgb), 0.3);
}

.stat-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.2), rgba(var(--cyan-rgb), 0.2));
  border-radius: 8px;
  border: 1px solid rgba(var(--purple-rgb), 0.3);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.blog-controls {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.blog-filters-card {
  margin-bottom: 32px;
  padding: 32px;
}

.blog-filters-content {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-filters {
  display: flex;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.filter-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.filter-select,
.filter-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: rgba(var(--cyan-rgb), 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.1);
}

.filter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.blog-actions {
  display: flex;
  gap: 12px;
}

.blog-posts-container {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}

.blog-posts-header {
  padding: 24px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-posts-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.blog-posts-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.blog-posts-table-container {
  overflow-x: auto;
}

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

.blog-posts-table th {
  background: rgba(var(--purple-rgb), 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 14px;
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}

.blog-posts-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
  vertical-align: top;
}

.post-row:hover {
  background: rgba(var(--purple-rgb), 0.05);
}

.post-title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-title {
  font-weight: 600;
  color: #ffffff;
  font-size: 15px;
}

.post-slug {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Courier New', monospace;
}

.category-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
}

.no-category {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.status-published {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-draft {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-scheduled {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.views-count {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.publish-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.loading-cell,
.empty-cell {
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(var(--purple-rgb), 0.3);
  border-top: 2px solid var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-icon {
  font-size: 32px;
  opacity: 0.5;
}

.empty-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.empty-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-categories-container {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  padding: 24px;
}

.blog-categories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.blog-categories-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.category-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
}

.category-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-2px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.category-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.category-name {
  font-weight: 600;
  color: #ffffff;
  flex: 1;
}

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

.category-slug {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Courier New', monospace;
  margin-bottom: 8px;
}

.category-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.empty-categories {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Blog Admin Responsive Design */
@media (max-width: 768px) {
  .blog-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .blog-filters {
    flex-direction: column;
    gap: 16px;
  }
  
  .filter-group {
    min-width: auto;
  }
  
  .blog-posts-table {
    font-size: 14px;
  }
  
  .blog-posts-table th,
  .blog-posts-table td {
    padding: 12px 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
}

/* === BLOG EDITOR STYLES === */

.blog-editor-main {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1d29 0%, var(--bg) 100%);
  padding-top: 80px;
}

.blog-editor-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.blog-editor-header {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.blog-editor-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}

.blog-editor-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.blog-editor-title-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-editor-icon {
  font-size: 32px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.2), rgba(var(--cyan-rgb), 0.2));
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 12px;
}

.blog-editor-title-info {
  flex: 1;
}

.blog-editor-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.blog-editor-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-weight: 500;
}

.blog-editor-actions {
  display: flex;
  gap: 12px;
}

.blog-editor-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
  align-items: start;
  max-width: 100%;
  overflow: hidden;
}

.blog-editor-main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  min-width: 0;
  max-width: calc(100% - 432px); /* Account for sidebar width + gap */
}

.blog-post-settings {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 32px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.blog-settings-section {
  margin-bottom: 32px;
}

.blog-settings-section:last-child {
  margin-bottom: 0;
}

.blog-settings-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}

.blog-featured-image-upload {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-image-preview {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.blog-image-actions {
  display: flex;
  gap: 8px;
}

.blog-rich-text-editor {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.blog-editor-toolbar {
  background: rgba(var(--purple-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 60px;
}

.blog-toolbar-group {
  display: flex;
  gap: 4px;
  padding-right: 16px;
  border-right: 1px solid rgba(var(--purple-rgb), 0.2);
  align-items: center;
}

.blog-toolbar-group:last-child {
  border-right: none;
  padding-right: 0;
}

.blog-toolbar-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

.blog-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--cyan-rgb), 0.3);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--cyan-rgb), 0.2);
}

.blog-toolbar-btn.active {
  background: rgba(var(--cyan-rgb), 0.2);
  border-color: rgba(var(--cyan-rgb), 0.4);
  color: var(--cyan);
  box-shadow: 0 2px 8px rgba(var(--cyan-rgb), 0.3);
}

.blog-toolbar-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(var(--cyan-rgb), 0.2);
}

.blog-editor-content-area {
  min-height: 500px;
  padding: 32px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.blog-editor-content-area:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  pointer-events: none;
}

.blog-editor-content-area h1,
.blog-editor-content-area h2,
.blog-editor-content-area h3 {
  color: #ffffff;
  margin: 32px 0 16px 0;
  font-weight: 700;
  line-height: 1.3;
}

.blog-editor-content-area h1 {
  font-size: 32px;
  margin-top: 0;
}

.blog-editor-content-area h2 {
  font-size: 28px;
}

.blog-editor-content-area h3 {
  font-size: 24px;
}

.blog-editor-content-area p {
  margin: 16px 0;
  line-height: 1.7;
}

.blog-editor-content-area ul,
.blog-editor-content-area ol {
  margin: 16px 0;
  padding-left: 28px;
}

.blog-editor-content-area li {
  margin: 8px 0;
  line-height: 1.6;
}

.blog-editor-content-area img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.blog-editor-content-area a {
  color: var(--cyan);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.blog-editor-content-area a:hover {
  color: #ffffff;
}

.blog-editor-content-area blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 24px;
  margin: 24px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(var(--purple-rgb), 0.05);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
}

.blog-editor-content-area hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--purple-rgb), 0.3), transparent);
  margin: 40px 0;
  border-radius: 1px;
}

.blog-editor-content-area code {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.blog-editor-content-area pre {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  overflow-x: auto;
}

.blog-editor-content-area pre code {
  background: none;
  padding: 0;
  color: #ffffff;
}

.blog-preview-panel {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.blog-preview-panel-modern {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 50%;
  max-width: 800px;
  max-height: calc(100vh - 104px);
  z-index: 1000;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.blog-preview-panel-modern .tool-header-modern {
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 10;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.blog-preview-content-modern {
  padding: 24px;
}

.blog-preview-header {
  background: rgba(var(--purple-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-preview-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.blog-preview-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.blog-preview-article {
  color: #ffffff;
}

.blog-preview-article .blog-preview-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.blog-preview-article .blog-preview-excerpt {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.blog-preview-article .blog-preview-body {
  font-size: 16px;
  line-height: 1.6;
}

.blog-preview-article .blog-preview-body h1,
.blog-preview-article .blog-preview-body h2,
.blog-preview-article .blog-preview-body h3 {
  color: #ffffff;
  margin: 24px 0 16px 0;
  font-weight: 700;
}

.blog-preview-article .blog-preview-body h1 {
  font-size: 28px;
}

.blog-preview-article .blog-preview-body h2 {
  font-size: 24px;
}

.blog-preview-article .blog-preview-body h3 {
  font-size: 20px;
}

.blog-preview-article .blog-preview-body p {
  margin: 16px 0;
}

.blog-preview-article .blog-preview-body ul,
.blog-preview-article .blog-preview-body ol {
  margin: 16px 0;
  padding-left: 24px;
}

.blog-preview-article .blog-preview-body li {
  margin: 8px 0;
}

.blog-preview-article .blog-preview-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.blog-preview-article .blog-preview-body a {
  color: var(--cyan);
  text-decoration: underline;
}

.blog-preview-article .blog-preview-body blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.blog-preview-article .blog-preview-body hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--purple-rgb), 0.3), transparent);
  margin: 32px 0;
}

.blog-editor-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

.blog-editor-loading .blog-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--purple-rgb), 0.3);
  border-top: 3px solid var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.blog-editor-loading .blog-loading-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

/* Blog Editor Responsive Design */
@media (max-width: 1200px) {
  .blog-editor-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .blog-post-settings {
    position: static;
    max-height: none;
  }
  
  .blog-preview-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .blog-editor-container {
    padding: 16px;
  }
  
  .blog-editor-header {
    padding: 24px 20px;
  }
  
  .blog-editor-header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  
  .blog-editor-title-section {
    gap: 16px;
  }
  
  .blog-editor-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .blog-editor-title {
    font-size: 24px;
  }
  
  .blog-editor-actions {
    justify-content: center;
  }
  
  .blog-post-settings {
    padding: 24px 20px;
  }
  
  .blog-editor-toolbar {
    padding: 12px 16px;
    gap: 12px;
    min-height: 50px;
  }
  
  .blog-toolbar-group {
    padding-right: 12px;
  }
  
  .blog-toolbar-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
  }
  
  .blog-editor-content-area {
    padding: 20px 16px;
    min-height: 400px;
    font-size: 15px;
  }
  
  .blog-preview-content {
    padding: 20px 16px;
  }
}
/* === BLOG EDITOR REDESIGN === */

.blog-editor-main {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1d29 0%, var(--bg) 100%);
  padding-top: 80px;
}

.blog-editor-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 24px;
  width: 100%;
  box-sizing: border-box;
}

.blog-editor-header {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.blog-editor-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}

.blog-editor-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.blog-editor-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.blog-editor-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
}

.blog-editor-title-info h1 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  font-family: 'Space Grotesk', sans-serif;
}

.blog-editor-title-info p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.blog-editor-actions {
  display: flex;
  gap: 12px;
}

/* Main Content Layout - Clean Grid */
.blog-editor-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 24px;
  align-items: start;
  max-width: 1400px;
  margin: 0;
}

.blog-editor-main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

/* Post Settings Sidebar */
.blog-post-settings-modern {
  width: 100%;
  box-sizing: border-box;
}

.blog-post-settings-modern .tool-header-modern {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}

.blog-settings-content {
  padding-top: 0;
}

.blog-settings-section {
  margin-bottom: 16px;
}

.blog-settings-section:last-child {
  margin-bottom: 0;
}

/* Compact spacing for blog post settings */
.blog-post-settings .field-modern {
  margin-bottom: 14px;
}

.blog-post-settings .field-modern:last-child {
  margin-bottom: 0;
}

.blog-settings-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
  font-family: 'Space Grotesk', sans-serif;
}

/* Rich Text Editor */
.blog-rich-text-editor-modern {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.blog-rich-text-editor-modern .tool-header-modern {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.blog-editor-toolbar-modern {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 60px;
}

.blog-toolbar-group {
  display: flex;
  gap: 4px;
  padding-right: 16px;
  border-right: 1px solid rgba(var(--purple-rgb), 0.2);
  align-items: center;
}

.blog-toolbar-group:last-child {
  border-right: none;
  padding-right: 0;
}

.blog-toolbar-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

.blog-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--cyan-rgb), 0.3);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--cyan-rgb), 0.2);
}

.blog-toolbar-btn.active {
  background: rgba(var(--cyan-rgb), 0.2);
  border-color: rgba(var(--cyan-rgb), 0.4);
  color: var(--cyan);
  box-shadow: 0 2px 8px rgba(var(--cyan-rgb), 0.3);
}

.blog-editor-content-area {
  min-height: 600px;
  padding: 32px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.blog-editor-content-area:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  pointer-events: none;
}

.blog-editor-content-area h1,
.blog-editor-content-area h2,
.blog-editor-content-area h3 {
  color: #ffffff;
  margin: 32px 0 16px 0;
  font-weight: 700;
  line-height: 1.3;
}

.blog-editor-content-area h1 {
  font-size: 32px;
  margin-top: 0;
}

.blog-editor-content-area h2 {
  font-size: 28px;
}

.blog-editor-content-area h3 {
  font-size: 24px;
}

.blog-editor-content-area p {
  margin: 16px 0;
  line-height: 1.7;
}

.blog-editor-content-area ul,
.blog-editor-content-area ol {
  margin: 16px 0;
  padding-left: 28px;
}

.blog-editor-content-area li {
  margin: 8px 0;
  line-height: 1.6;
}

.blog-editor-content-area img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.blog-editor-content-area a {
  color: var(--cyan);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.blog-editor-content-area a:hover {
  color: #ffffff;
}

.blog-editor-content-area blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 24px;
  margin: 24px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(var(--purple-rgb), 0.05);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
}

.blog-editor-content-area hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--purple-rgb), 0.3), transparent);
  margin: 40px 0;
  border-radius: 1px;
}

.blog-editor-content-area code {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.blog-editor-content-area pre {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  overflow-x: auto;
}

.blog-editor-content-area pre code {
  background: none;
  padding: 0;
  color: #ffffff;
}

/* Preview Panel */
.blog-preview-panel {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  width: 100%;
  box-sizing: border-box;
}

.blog-preview-header {
  background: rgba(var(--purple-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-preview-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

.blog-preview-content {
  padding: 24px;
  color: #ffffff;
  line-height: 1.6;
}

.blog-preview-article {
  max-width: none;
}

.blog-preview-article h1 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  font-family: 'Space Grotesk', sans-serif;
}

.blog-preview-article .blog-preview-excerpt {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.blog-preview-article .blog-preview-body {
  font-size: 15px;
  line-height: 1.6;
}

.blog-preview-article .blog-preview-body h1,
.blog-preview-article .blog-preview-body h2,
.blog-preview-article .blog-preview-body h3 {
  color: #ffffff;
  margin: 20px 0 12px 0;
  font-weight: 600;
}

.blog-preview-article .blog-preview-body h1 {
  font-size: 20px;
}

.blog-preview-article .blog-preview-body h2 {
  font-size: 18px;
}

.blog-preview-article .blog-preview-body h3 {
  font-size: 16px;
}

.blog-preview-article .blog-preview-body p {
  margin: 12px 0;
}

.blog-preview-article .blog-preview-body ul,
.blog-preview-article .blog-preview-body ol {
  margin: 12px 0;
  padding-left: 20px;
}

.blog-preview-article .blog-preview-body li {
  margin: 6px 0;
}

.blog-preview-article .blog-preview-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}

.blog-preview-article .blog-preview-body a {
  color: var(--cyan);
  text-decoration: underline;
}

.blog-preview-article .blog-preview-body blockquote {
  border-left: 3px solid var(--purple);
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.blog-preview-article .blog-preview-body hr {
  border: none;
  height: 1px;
  background: rgba(var(--purple-rgb), 0.3);
  margin: 20px 0;
}

.blog-preview-article .blog-preview-body code {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--cyan);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.blog-preview-article .blog-preview-body pre {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 6px;
  padding: 12px;
  margin: 16px 0;
  overflow-x: auto;
}

.blog-preview-article .blog-preview-body pre code {
  background: none;
  padding: 0;
  color: #ffffff;
}

/* Loading States */
.blog-editor-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 29, 41, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.blog-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--purple-rgb), 0.3);
  border-top: 3px solid var(--purple);
  border-radius: 50%;
  animation: blog-spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes blog-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.blog-loading-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .blog-editor-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .blog-post-settings {
    position: static;
    max-height: none;
  }
  
  .blog-preview-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .blog-editor-container {
    padding: 16px;
  }
  
  .blog-editor-header {
    padding: 24px 20px;
  }
  
  .blog-editor-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .blog-editor-title-section {
    gap: 12px;
  }
  
  .blog-editor-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .blog-editor-title-info h1 {
    font-size: 24px;
  }
  
  .blog-editor-title-info p {
    font-size: 14px;
  }
  
  .blog-editor-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .blog-post-settings {
    padding: 20px 16px;
  }
  
  .blog-editor-toolbar {
    padding: 12px 16px;
    gap: 12px;
    min-height: 50px;
  }
  
  .blog-toolbar-group {
    padding-right: 12px;
  }
  
  .blog-toolbar-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
  }
  
  .blog-editor-content-area {
    padding: 20px 16px;
    min-height: 400px;
    font-size: 15px;
  }
  
  .blog-preview-content {
    padding: 20px 16px;
  }
}
/* ===== BLOG LISTING PAGE STYLES ===== */

/* Blog Main Layout */
.blog-main {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

/* Blog Hero Section */
.blog-hero {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(99,102,241,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.blog-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.blog-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.blog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--purple-rgb), 0.2);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 24px;
}

.blog-hero-title {
  font-size: 48px;
  font-weight: 800 !important;
  color: #ffffff;
  margin: 0 0 16px 0;
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.blog-hero-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 400;
}

/* Blog Content */
.blog-content {
  padding: 60px 0;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Blog Filters */
.blog-filters {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

.blog-search-modern {
  display: flex;
  justify-content: center;
  width: 100%;
}

.blog-search-input-modern {
  position: relative;
  max-width: 600px;
  width: 100%;
}

.blog-search-input-modern svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 1;
  transition: color 0.3s ease;
}

.blog-search-field-modern {
  width: 100%;
  padding: 16px 20px 16px 52px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  transition: all 0.3s ease;
  font-family: inherit;
}

.blog-search-field-modern::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.blog-search-field-modern:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.blog-search-field-modern:focus + svg,
.blog-search-input-modern:has(.blog-search-field-modern:focus) svg {
  color: var(--cyan);
}

.blog-filter-controls-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  align-items: end;
}

.blog-filter-group-modern {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-filter-label-modern {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-filter-label-modern svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.blog-filter-select-modern {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.blog-filter-select-modern:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}

.blog-filter-select-modern:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.blog-filter-select-modern option {
  background: var(--bg);
  color: #ffffff;
  padding: 8px;
}

.blog-filter-actions {
  display: flex;
  align-items: flex-end;
}

.btn-clear-filters {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Blog Posts Grid */
.blog-posts-section {
  padding: 32px;
  margin-bottom: 32px;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
  margin-top: 24px;
}

.blog-post-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.8) 0%, rgba(20, 23, 33, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-post-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  transform: translateY(-4px);
}

/* Locked blog post card */
.blog-post-card-locked {
  opacity: 0.7;
  cursor: default !important;
  position: relative;
}

.blog-post-card-locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.blog-post-image-locked {
  position: relative;
}

.blog-post-lock-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.blog-post-lock-overlay svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.blog-post-title-locked {
  color: rgba(255, 255, 255, 0.7) !important;
  pointer-events: none;
}

.blog-post-title-locked a {
  color: rgba(255, 255, 255, 0.7) !important;
  pointer-events: none;
  cursor: default;
}

.blog-post-locked-message {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.15) 0%, rgba(0, 234, 255, 0.1) 100%);
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin: 12px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.blog-post-locked-icon {
  color: rgba(138, 43, 226, 0.8);
  margin-bottom: 4px;
}

.blog-post-locked-text {
  color: rgba(255, 255, 255, 0.9);
}

.blog-post-locked-text strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: #ffffff;
}

.blog-post-locked-text p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.blog-post-locked-text .btn {
  text-decoration: none;
  white-space: nowrap;
}

.blog-post-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.blog-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-post-card-modern:hover .blog-post-image {
  transform: scale(1.05);
}

.blog-post-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  color: rgba(var(--purple-rgb), 0.4);
}

.blog-post-placeholder svg {
  width: 48px;
  height: 48px;
}

.blog-post-content-modern {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.blog-post-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-post-category-badge {
  background: rgba(99, 102, 241, 0.2);
  color: var(--purple);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-post-date-modern {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-post-title-modern {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.blog-post-title-modern a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-post-card-modern:hover .blog-post-title-modern a {
  color: var(--cyan);
}

.blog-post-excerpt-modern {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  word-break: break-word;
}

.blog-post-footer-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-post-author-modern {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-post-author-avatar-modern {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.blog-post-author-avatar-modern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-author-avatar-modern svg {
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.5);
}

.blog-post-author-name-modern {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.blog-post-arrow {
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.blog-post-card-modern:hover .blog-post-arrow {
  color: var(--cyan);
  transform: translateX(4px);
}

.blog-post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.blog-post-card .blog-post-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.3), rgba(var(--cyan-rgb), 0.3));
  border: 2px solid rgba(var(--purple-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.blog-post-card:hover .blog-post-author-avatar {
  border-color: rgba(var(--purple-rgb), 0.4);
  transform: scale(1.1);
}

.blog-post-card .blog-post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-card .blog-post-author-avatar svg {
  width: 16px;
  height: 16px;
  color: rgba(var(--purple-rgb), 0.6);
}

.blog-post-card .blog-post-author-details {
  flex: 1;
  min-width: 0;
}

.blog-post-card .blog-post-author-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-post-read-more {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.blog-post-read-more:hover {
  color: var(--cyan);
  transform: translateX(4px);
}

.blog-post-read-more svg {
  transition: transform 0.3s ease;
}

.blog-post-read-more:hover svg {
  transform: translateX(2px);
}

/* Blog Loading States */
.blog-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--purple-rgb), 0.2);
  border-top: 3px solid var(--purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.blog-no-posts {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.blog-no-posts .world-editor-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blog-no-posts-icon {
  margin-bottom: 24px;
  color: rgba(var(--purple-rgb), 0.5);
}

.blog-no-posts h3 {
  color: #ffffff;
  margin: 24px 0 12px 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.blog-no-posts p {
  margin: 0;
  font-size: 16px;
}

.blog-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.blog-error-icon {
  margin-bottom: 24px;
  color: #ef4444;
}

.blog-error h3 {
  color: #ffffff;
  margin: 0 0 12px 0;
  font-size: 24px;
}

.blog-error p {
  margin: 0 0 24px 0;
  font-size: 16px;
}

/* Load More Button */
.blog-load-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Blog Filters Responsive */
@media (max-width: 768px) {
  .blog-filters-content {
    gap: 20px;
  }
  
  .blog-filter-controls-modern {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .blog-search-input-modern {
    max-width: 100%;
  }
  
  .blog-filter-group-modern {
    min-width: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-hero {
    padding: 60px 0;
  }
  
  .blog-hero-title {
    font-size: 36px;
  }
  
  .blog-hero-subtitle {
    font-size: 16px;
  }
  
  .blog-content {
    padding: 40px 0;
  }
  
  .blog-container {
    padding: 0 16px;
  }
  
  .blog-posts-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .blog-filter-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .blog-filter-group {
    min-width: 100%;
    max-width: 300px;
  }
  
  .blog-post-content {
    padding: 20px;
  }
  
  .blog-post-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .blog-hero-title {
    font-size: 28px;
  }
  
  .blog-post-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
/* ===== BLOG POST PAGE STYLES ===== */

/* Blog Post Main Layout */
.blog-post-main {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
}

/* Blog Post Navigation */
.blog-post-nav {
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
}

.blog-post-nav-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.blog-post-back:hover {
  color: var(--cyan);
  transform: translateX(-4px);
}

.blog-post-back svg {
  transition: transform 0.3s ease;
}

.blog-post-back:hover svg {
  transform: translateX(-2px);
}

/* Blog Post Article */
.blog-post-article {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Blog Post Loading */
.blog-post-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-post-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--purple-rgb), 0.2);
  border-top: 3px solid var(--purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.blog-post-loading p {
  margin: 0;
  font-size: 16px;
}

/* Blog Post Error */
.blog-post-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.blog-post-error-icon {
  margin-bottom: 24px;
  color: #ef4444;
}

.blog-post-error h2 {
  color: #ffffff;
  margin: 0 0 12px 0;
  font-size: 28px;
}

.blog-post-error p {
  margin: 0 0 24px 0;
  font-size: 16px;
}

/* Blog Post Content */
.blog-post-content {
  padding: 40px 0;
}

/* Featured Image */
.blog-post-featured-image {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
}

.blog-post-featured-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* Blog Post Header */
.blog-post-header {
  margin-bottom: 40px;
}

.blog-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;
}

.blog-post-category {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
}

.blog-post-date {
  color: rgba(255, 255, 255, 0.6);
}

.blog-post-title {
  font-size: 48px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 24px 0;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.2;
}

.blog-post-excerpt {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0 0 32px 0;
}

.blog-post-author-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid rgba(var(--purple-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
}

.blog-post-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  overflow: hidden;
}

.blog-post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-author-details {
  flex: 1;
}

.blog-post-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.blog-post-author-role {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* Blog Post Body */
.blog-post-body {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 60px;
}

.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4,
.blog-post-body h5,
.blog-post-body h6 {
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  margin: 40px 0 20px 0;
  font-weight: 700;
}

.blog-post-body h1 { font-size: 36px; }
.blog-post-body h2 { font-size: 32px; }
.blog-post-body h3 { font-size: 28px; }
.blog-post-body h4 { font-size: 24px; }
.blog-post-body h5 { font-size: 20px; }
.blog-post-body h6 { font-size: 18px; }

.blog-post-body p {
  margin: 0 0 24px 0;
}

.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 24px 0;
  padding-left: 24px;
}

.blog-post-body li {
  margin-bottom: 8px;
}

.blog-post-body blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.blog-post-body a {
  color: var(--purple);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-post-body a:hover {
  color: var(--cyan);
}

.blog-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
}

.blog-post-body code {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.blog-post-body pre {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  overflow-x: auto;
}

.blog-post-body pre code {
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Blog Post Footer */
.blog-post-footer {
  padding: 40px 0;
  border-top: 1px solid rgba(var(--purple-rgb), 0.1);
}

.blog-post-tags {
  margin-bottom: 40px;
}

.blog-post-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-post-tag {
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
}

.blog-post-share {
  text-align: center;
}

.blog-post-share h3 {
  color: #ffffff;
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
}

.blog-post-share-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.blog-post-share-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(var(--purple-rgb), 0.1);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-post-share-btn:hover {
  background: var(--purple);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--purple-rgb), 0.3);
}

.blog-post-share-btn svg {
  transition: transform 0.3s ease;
}

.blog-post-share-btn:hover svg {
  transform: scale(1.1);
}

/* Related Posts */
.blog-post-related {
  background: rgba(255, 255, 255, 0.02);
  padding: 80px 0;
}

.blog-post-related-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-related-card {
  padding: 40px;
}

.blog-post-related-title {
  margin-bottom: 32px;
}

.blog-post-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.blog-post-related-card {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--cyan-rgb), 0.05));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-post-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--purple-rgb), 0.3);
  box-shadow: 0 8px 32px rgba(var(--purple-rgb), 0.2);
}

.blog-post-related-image {
  height: 160px;
  overflow: hidden;
}

.blog-post-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-post-related-card:hover .blog-post-related-image img {
  transform: scale(1.05);
}

.blog-post-related-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--purple-rgb), 0.1);
  color: rgba(var(--purple-rgb), 0.5);
}

.blog-post-related-content {
  padding: 20px;
}

.blog-post-related-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
}

.blog-post-related-category {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.blog-post-related-date {
  color: rgba(255, 255, 255, 0.6);
}

.blog-post-related-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.blog-post-related-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-post-related-title a:hover {
  color: var(--purple);
}

.blog-post-related-excerpt {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 12px 0;
  font-size: 14px;
}

.blog-post-related-author {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* Toast Notifications */
.blog-post-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: rgba(var(--purple-rgb), 0.9);
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  font-weight: 600;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.blog-post-toast-show {
  transform: translateX(0);
}

.blog-post-toast-success {
  background: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.3);
}

.blog-post-toast-error {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post-nav-container,
  .blog-post-article {
    padding: 0 16px;
  }
  
  .blog-post-title {
    font-size: 36px;
  }
  
  .blog-post-excerpt {
    font-size: 18px;
  }
  
  .blog-post-body {
    font-size: 16px;
  }
  
  .blog-post-body h1 { font-size: 28px; }
  .blog-post-body h2 { font-size: 24px; }
  .blog-post-body h3 { font-size: 20px; }
  
  .blog-post-meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .blog-post-share-buttons {
    gap: 12px;
  }
  
  .blog-post-share-btn {
    width: 44px;
    height: 44px;
  }
  
  .blog-post-related-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .blog-post-related-container {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .blog-post-title {
    font-size: 28px;
  }
  
  .blog-post-excerpt {
    font-size: 16px;
  }
  
  .blog-post-featured-image img {
    height: 250px;
  }
  
  .blog-post-author-info {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}
/* ===== BLOG TAGS MANAGEMENT STYLES ===== */

/* Tags Container */
.blog-tags-container {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--cyan-rgb), 0.05));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-top: 32px;
}

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

.blog-tags-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

/* Tags Grid */
.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Tag Card */
.tag-card {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.tag-card:hover {
  border-color: rgba(var(--purple-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--purple-rgb), 0.2);
}

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

.tag-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
}

.tag-actions {
  display: flex;
  gap: 8px;
}

.tag-slug {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Courier New', monospace;
  background: rgba(var(--purple-rgb), 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Empty Tags State */
.empty-tags {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-tags .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-tags .empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.empty-tags .empty-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-tags-container {
    padding: 16px;
    margin-top: 24px;
  }
  
  .blog-tags-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .blog-tags-title {
    font-size: 20px;
    text-align: center;
  }
  
  .tags-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .tag-card {
    padding: 12px;
  }
  
  .tag-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .tag-actions {
    justify-content: center;
  }
}
/* ===== BLOG COMMENTS SYSTEM STYLES ===== */

/* Blog Post Comments Section */
.blog-post-comments {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--cyan-rgb), 0.05));
  border-top: 1px solid rgba(var(--purple-rgb), 0.1);
  padding: 60px 0;
}

.blog-comments-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.blog-comments-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

.blog-comments-count {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
}

/* Blog Sign-In Prompt */
.blog-sign-in-prompt {
  margin: 2rem 0;
}

.blog-sign-in-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.blog-sign-in-icon {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.blog-sign-in-card h3 {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.blog-sign-in-card p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.blog-sign-in-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.blog-sign-in-actions .btn {
  min-width: 140px;
}

@media (max-width: 768px) {
  .blog-sign-in-card {
    padding: 1.5rem;
  }
  
  .blog-sign-in-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .blog-sign-in-actions .btn {
    width: 100%;
    max-width: 200px;
  }
}

/* Comment Form */
.blog-comment-form {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.1), rgba(var(--cyan-rgb), 0.1));
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}

.blog-comment-form-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
}

.blog-comment-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Comments List */
.blog-comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-comment {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--cyan-rgb), 0.05));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}

.blog-comment:hover {
  border-color: rgba(var(--purple-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--purple-rgb), 0.1);
}

.blog-comment-header {
  margin-bottom: 16px;
}

.blog-comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
}

.blog-comment-author-info {
  flex: 1;
}

.blog-comment-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.blog-comment-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-comment-content {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* Empty Comments State */
.blog-comments-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-comments-empty-icon {
  margin-bottom: 24px;
  color: rgba(var(--purple-rgb), 0.5);
}

.blog-comments-empty h3 {
  color: #ffffff;
  margin: 0 0 12px 0;
  font-size: 20px;
}

.blog-comments-empty p {
  margin: 0;
  font-size: 16px;
}

/* Comments Loading */
.blog-comments-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.blog-comments-loading .blog-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--purple-rgb), 0.2);
  border-top: 3px solid var(--purple);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.blog-comments-loading p {
  margin: 0;
  font-size: 14px;
}

/* Comments Error */
.blog-comments-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.blog-comments-error .blog-error-icon {
  margin-bottom: 24px;
  color: #ef4444;
}

.blog-comments-error h3 {
  color: #ffffff;
  margin: 0 0 12px 0;
  font-size: 18px;
}

.blog-comments-error p {
  margin: 0 0 24px 0;
  font-size: 14px;
}

/* Admin Comments Management */
.blog-comments-admin-container {
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.05), rgba(var(--cyan-rgb), 0.05));
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: 16px;
  padding: 24px;
  margin-top: 32px;
}

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

.blog-comments-admin-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

.blog-comments-admin-stats {
  display: flex;
  gap: 16px;
}

.blog-comments-count,
.blog-comments-pending {
  background: rgba(var(--purple-rgb), 0.2);
  color: var(--purple);
  padding: 6px 12px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 12px;
}

.blog-comments-pending {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.blog-comments-admin-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.blog-comments-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-comments-filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-comments-filter-group select {
  background: rgba(var(--purple-rgb), 0.1);
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 14px;
  min-width: 150px;
}

.blog-comments-filter-group select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(var(--purple-rgb), 0.2);
}

/* Comments Admin Table */
.blog-comments-admin-table-container {
  overflow-x: auto;
}

.blog-comments-admin-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(var(--purple-rgb), 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.blog-comments-admin-table th {
  background: rgba(var(--purple-rgb), 0.1);
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.2);
}

.blog-comments-admin-table td {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.blog-comments-admin-table tr:hover {
  background: rgba(var(--purple-rgb), 0.05);
}

.comment-author-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.comment-author-email {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.comment-post-title {
  font-weight: 500;
  color: var(--purple);
}

.comment-content-preview {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-approved {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.comment-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.comment-actions {
  display: flex;
  gap: 8px;
}

.empty-comments {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-comments .empty-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.empty-comments .empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.empty-comments .empty-subtitle {
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-comments-container {
    padding: 0 16px;
  }
  
  .blog-comments-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .blog-comments-title {
    font-size: 24px;
    text-align: center;
  }
  
  .blog-comment-form {
    padding: 20px;
  }
  
  .blog-comment-form-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .blog-comment {
    padding: 16px;
  }
  
  .blog-comments-admin-filters {
    flex-direction: column;
    gap: 12px;
  }
  
  .blog-comments-filter-group select {
    min-width: auto;
    width: 100%;
  }
  
  .blog-comments-admin-table {
    font-size: 12px;
  }
  
  .blog-comments-admin-table th,
  .blog-comments-admin-table td {
    padding: 12px 8px;
  }
  
  .comment-content-preview {
    max-width: 150px;
  }
}
/* Blog Management Specific Styles */
.blog-quick-actions .action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.blog-quick-actions .action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 140px;
  justify-content: center;
}

.blog-quick-actions .action-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.blog-quick-actions .action-card .action-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.blog-quick-actions .action-card .action-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.blog-quick-actions .action-card .action-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  max-width: 180px;
}

.blog-quick-actions .subsection-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  margin-top: 0;
}

/* Blog Management Controls */
.blog-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}

.blog-controls .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-controls .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog-controls .btn-icon {
  font-size: 16px;
}

/* Blog Stats */
.blog-stats {
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-stats .stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.blog-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-stats .stat-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.blog-stats .stat-info {
  flex: 1;
}

.blog-stats .stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.blog-stats .stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* Responsive adjustments for blog management */
@media (max-width: 768px) {
  .blog-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .blog-controls .btn {
    justify-content: center;
  }
  
  .blog-stats .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .blog-quick-actions .action-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-quick-actions .action-card {
    min-height: 120px;
    padding: 16px;
  }
}

/* Modern Blog Post Styles */
.blog-post-main {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1115 0%, #1a1d23 100%);
}

/* Hero Section */
.blog-post-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.blog-post-hero-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.blog-post-nav {
  position: absolute;
  top: 40px;
  left: 24px;
  z-index: 3;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.blog-post-back:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.blog-post-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  min-height: 80vh;
}

.blog-post-hero-image {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.blog-post-hero-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-post-hero-image:hover img {
  transform: scale(1.05);
}

.blog-post-hero-text {
  padding: 40px 0;
}

.blog-post-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.blog-post-category {
  padding: 8px 16px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-post-date {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}

.blog-post-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff, #e5e7eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog-post-hero-excerpt {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #d1d5db;
  margin-bottom: 40px;
}

.blog-post-author-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.blog-post-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.blog-post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-author-details {
  flex: 1;
}

.blog-post-author-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.blog-post-author-role {
  font-size: 14px;
  color: #9ca3af;
}

.blog-post-reading-time {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 14px;
  color: #d1d5db;
  font-weight: 500;
}

/* Article Content */
.blog-post-article {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

.blog-post-content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.blog-post-content-card {
  padding: 40px;
}

.blog-post-body {
  padding: 0;
}

.blog-post-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #e5e7eb;
}

.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4,
.blog-post-body h5,
.blog-post-body h6 {
  color: #ffffff;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
}

.blog-post-body h1 { font-size: 2.5rem; }
.blog-post-body h2 { font-size: 2rem; }
.blog-post-body h3 { font-size: 1.5rem; }
.blog-post-body h4 { font-size: 1.25rem; }

.blog-post-body p {
  margin-bottom: 24px;
}

.blog-post-body a {
  color: #6366f1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.blog-post-body a:hover {
  border-bottom-color: #6366f1;
}

.blog-post-body ul,
.blog-post-body ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.blog-post-body li {
  margin-bottom: 8px;
}

.blog-post-body blockquote {
  border-left: 4px solid #6366f1;
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: #d1d5db;
}

.blog-post-body code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9em;
}

.blog-post-body pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 24px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 24px 0;
}

.blog-post-body pre code {
  background: none;
  padding: 0;
}

/* Post Footer */
.blog-post-footer {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-post-share {
  margin-top: 32px;
}

.blog-post-share .tool-header-modern {
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.blog-post-tags {
  margin-bottom: 40px;
}

.blog-post-tag {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
  border-radius: 20px;
  font-size: 14px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-post-tag:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.blog-post-share h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
}

.blog-post-share-buttons {
  display: flex;
  gap: 12px;
}

.blog-post-share-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.blog-post-share-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.blog-post-share-btn[data-platform="twitter"]:hover {
  background: #1da1f2;
  color: white;
}

.blog-post-share-btn[data-platform="facebook"]:hover {
  background: #1877f2;
  color: white;
}

.blog-post-share-btn[data-platform="linkedin"]:hover {
  background: #0077b5;
  color: white;
}

.blog-post-share-btn[data-platform="copy"]:hover {
  background: #6366f1;
  color: white;
}

/* Comments Section */
.blog-post-comments {
  background: rgba(255, 255, 255, 0.02);
  padding: 80px 0;
}

.blog-comments-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-comments-card {
  padding: 40px;
}

.blog-comments-header {
  margin-bottom: 32px;
}

.blog-comments-header .tool-title-modern {
  margin-bottom: 8px;
}

.blog-comments-count {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

.blog-sign-in-prompt {
  text-align: center;
  padding: 60px 0;
}

.blog-sign-in-card {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px;
}

.blog-sign-in-card .world-editor-card-body {
  text-align: center;
  padding: 40px;
}

.blog-sign-in-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.blog-sign-in-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.blog-sign-in-card p {
  color: #d1d5db;
  margin-bottom: 32px;
}

.blog-sign-in-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.blog-comment-form {
  margin-bottom: 40px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.blog-comment-form-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 24px;
}

.blog-comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-comment {
  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.blog-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.blog-comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-comment-author-info {
  flex: 1;
}

.blog-comment-author-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.blog-comment-date {
  font-size: 14px;
  color: #9ca3af;
}

.blog-comment-content {
  color: #e5e7eb;
  line-height: 1.6;
}

/* Related Posts */
.blog-post-related {
  padding: 80px 0;
}

.blog-post-related-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-post-related-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 48px;
}

.blog-post-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

/* Loading States */
.blog-post-loading,
.blog-comments-loading {
  text-align: center;
  padding: 60px 0;
}

.blog-post-loading-spinner,
.blog-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.blog-post-loading p,
.blog-comments-loading p {
  color: #9ca3af;
  font-size: 16px;
}

/* Error States */
.blog-post-error,
.blog-comments-error {
  text-align: center;
  padding: 60px 0;
}

.blog-post-error-icon,
.blog-error-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  color: #ef4444;
}

.blog-post-error h2,
.blog-comments-error h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}

.blog-post-error p,
.blog-comments-error p {
  color: #d1d5db;
  margin-bottom: 32px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-post-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .blog-post-hero-image {
    order: -1;
  }
  
  .blog-post-hero-image img {
    height: 300px;
  }
  
  .blog-post-nav {
    position: static;
    margin-bottom: 40px;
  }
  
  .blog-post-author-card {
    flex-direction: column;
    text-align: center;
  }
  
  .blog-post-share-buttons {
    justify-content: center;
  }
  
  .blog-sign-in-actions {
    flex-direction: column;
  }
  
  .blog-post-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .blog-post-hero-container,
  .blog-post-article,
  .blog-comments-container,
  .blog-post-related-container {
    padding: 0 16px;
  }
  
  .blog-post-hero-title {
    font-size: 2rem;
  }
  
  .blog-post-hero-excerpt {
    font-size: 1rem;
  }
}
.comment-avatar-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #374151;
}

.comment-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.blog-comment-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

/* FAQ Management Modern Styles */
.faq-stats-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0;
  padding: 24px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.05) 0%, rgba(138, 43, 226, 0.05) 100%);
  border: 1px solid rgba(0, 234, 255, 0.1);
  border-radius: 16px;
}

.faq-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.faq-stat-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 234, 255, 0.2);
  transform: translateY(-2px);
}

.faq-stat-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 234, 255, 0.3));
}

.faq-stat-content {
  flex: 1;
}

.faq-stat-number {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 234, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-top: 4px;
}

.faq-actions-bar {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-actions-bar .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-categories-grid,
.faq-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.faq-category-card-modern,
.faq-item-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.8) 0%, rgba(20, 23, 33, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-category-card-modern:hover,
.faq-item-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  transform: translateY(-4px);
}

.faq-category-header,
.faq-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.faq-category-title-section,
.faq-item-title-section {
  flex: 1;
  min-width: 0;
}

.faq-category-name,
.faq-item-question {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.4;
  word-wrap: break-word;
}

.faq-category-slug {
  font-size: 12px;
  color: rgba(0, 234, 255, 0.7);
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

.faq-item-category-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 234, 255, 0.9);
  background: rgba(0, 234, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 6px;
  border: 1px solid rgba(0, 234, 255, 0.2);
}

.faq-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.faq-status-badge.active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.1);
}

.faq-status-badge.inactive {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.faq-category-description,
.faq-item-answer {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.faq-category-footer,
.faq-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.faq-category-stats,
.faq-item-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.faq-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-stat-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.faq-category-actions,
.faq-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tool-badge-modern {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.loading-state-modern {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.empty-state .btn {
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .faq-categories-grid,
  .faq-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
}

/* Worlds Management Modern Styles */
.worlds-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.world-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.8) 0%, rgba(20, 23, 33, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.world-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  transform: translateY(-4px);
}

.world-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.world-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.world-card-modern:hover .world-card-image {
  transform: scale(1.05);
}

.world-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 152, 0, 0.9) 100%);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.world-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.world-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.world-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.world-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.world-status-badge.available {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.world-status-badge.draft {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.world-status-badge.archived {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.world-status-badge.coming-soon {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.world-status-badge.sold-out {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.world-card-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.world-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.world-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.world-meta-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.world-card-actions {
  display: flex;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

/* Blog Actions Modern Styles */
.blog-actions-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.blog-action-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.8) 0%, rgba(20, 23, 33, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.blog-action-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff 0%, #8a2be2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.blog-action-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  transform: translateY(-4px);
}

.blog-action-card-modern:hover::before {
  transform: scaleX(1);
}

.blog-action-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
  border: 1px solid rgba(0, 234, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  transition: all 0.3s ease;
}

.blog-action-card-modern:hover .blog-action-icon {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 234, 255, 0.3);
}

.blog-action-content {
  flex: 1;
  min-width: 0;
}

.blog-action-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.blog-action-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.5;
}

.blog-action-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.blog-action-card-modern:hover .blog-action-arrow {
  color: #00eaff;
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .worlds-grid-modern {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .blog-actions-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .faq-stats-modern {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  
  .faq-categories-grid,
  .faq-items-grid {
    grid-template-columns: 1fr;
  }
  
  .worlds-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .blog-actions-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .faq-actions-bar {
    flex-direction: column;
  }
  
  .faq-actions-bar .btn {
    width: 100%;
    justify-content: center;
  }
  
  .faq-category-footer,
  .faq-item-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .faq-category-actions,
  .faq-item-actions {
    justify-content: flex-end;
  }
  
  .world-card-content {
    padding: 16px;
  }
  
  .blog-action-card-modern {
    padding: 20px;
  }
}

/* Shop Page Modern Redesign Styles */
.shop-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
}

.shop-header-card,
.shop-controls-card {
  margin-bottom: 24px;
}

.shop-page-title {
  font-size: 32px !important;
  margin: 0 !important;
}

.shop-header-stats {
  display: flex;
  gap: 32px;
  align-items: center;
}

.shop-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shop-stat-number {
  font-size: 28px;
  font-weight: 800;
  color: #00eaff;
  line-height: 1;
  margin-bottom: 6px;
}

.shop-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Active Filters Section */
.active-filters-modern {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.active-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.active-filters-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-chips-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #00eaff;
  transition: all 0.2s ease;
}

.filter-chip:hover {
  background: rgba(0, 234, 255, 0.15);
  border-color: rgba(0, 234, 255, 0.4);
}

.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.filter-chip-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Results Count */
.results-count-modern {
  margin-top: 20px;
  padding: 16px;
  background: rgba(0, 234, 255, 0.05);
  border: 1px solid rgba(0, 234, 255, 0.15);
  border-radius: 12px;
  text-align: center;
}

.results-count-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.results-count-text strong {
  color: #00eaff;
  font-weight: 700;
}

/* Shop-specific grid adjustments */
.shop-worlds-grid {
  margin-top: 24px;
}

/* Loading and Empty States */
.shop-loading-card,
.shop-empty-card {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-state-modern,
.empty-state-modern {
  text-align: center;
  padding: 40px;
}

.loading-title,
.empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 16px 0 8px 0;
}

.loading-subtitle,
.empty-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px 0;
}

.empty-icon-modern {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.3);
}

/* Search Form Modern */
.search-form-modern {
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .shop-container {
    padding: 20px;
  }
  
  .shop-header-stats {
    gap: 20px;
  }
  
  .shop-stat-number {
    font-size: 24px;
  }
  
  .shop-stat-label {
    font-size: 11px;
  }
  
  .active-filters-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .filter-chips-modern {
    gap: 6px;
  }
  
  .filter-chip {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Homepage Modern Redesign Styles */
.homepage-section-card {
  margin-bottom: 48px;
}

.homepage-worlds-grid {
  margin-top: 24px;
}

/* Patreon Supporters Section */
.supporters-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.supporter-item-modern {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.supporter-item-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.supporter-item-modern:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.supporter-item-modern:hover::before {
  opacity: 1;
}

.supporter-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: block;
}

.supporters-loading,
.supporters-empty,
.supporters-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}

.supporters-error {
  color: #ef4444;
}

/* Admin: Roles Checkboxes Grid */
.roles-checkboxes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.role-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.role-checkbox-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 234, 255, 0.2);
}

.role-checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #00eaff;
}

.role-checkbox-item span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Responsive Supporters Grid */
@media (max-width: 768px) {
  .supporters-grid-modern {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .supporter-item-modern {
    padding: 12px 16px;
  }
  
  .supporter-name {
    font-size: 14px;
  }
  
  .roles-checkboxes-grid {
    grid-template-columns: 1fr;
  }
}

/* Marketplace Cards Modern */
.marketplace-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.marketplace-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.8) 0%, rgba(20, 23, 33, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.marketplace-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00eaff 0%, #8a2be2 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.marketplace-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.15);
  transform: translateY(-4px);
}

.marketplace-card-modern:hover::before {
  transform: scaleX(1);
}

.marketplace-icon-modern {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
  border: 1px solid rgba(0, 234, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: all 0.3s ease;
}

.marketplace-card-modern:hover .marketplace-icon-modern {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 234, 255, 0.3);
}

.marketplace-icon-modern img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.marketplace-content-modern {
  flex: 1;
  min-width: 0;
}

.marketplace-title-modern {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.marketplace-description-modern {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.marketplace-features-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.marketplace-feature-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.marketplace-arrow-modern {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.marketplace-card-modern:hover .marketplace-arrow-modern {
  color: #00eaff;
  transform: translateX(4px);
}

/* About Section Modern */
.about-section-modern {
  padding: 32px;
}

.about-badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #00eaff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.about-title-modern {
  font-size: 32px !important;
  margin: 0 0 12px 0 !important;
}

.about-description-modern {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.about-cta-modern {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-content-modern {
  text-align: center;
}

.cta-title-modern {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.cta-text-modern {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.cta-buttons-modern {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.about-footer-modern {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.rules-modern {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .marketplace-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .homepage-section-card {
    margin-bottom: 32px;
  }
  
  .marketplace-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .marketplace-card-modern {
    padding: 20px;
    gap: 16px;
  }
  
  .marketplace-icon-modern {
    width: 56px;
    height: 56px;
  }
  
  .about-section-modern {
    padding: 24px;
  }
  
  .about-title-modern {
    font-size: 24px !important;
  }
  
  .cta-buttons-modern {
    flex-direction: column;
  }
  
  .cta-buttons-modern .btn {
    width: 100%;
    justify-content: center;
  }
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #a0a0a0;
}

.empty-state .btn {
  margin-top: 1rem;
}

/* FAQ Page Styles */
.faq-hero {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  padding: 4rem 0;
  margin-bottom: 2rem;
}

.faq-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.faq-hero-content {
  text-align: center;
}

.faq-hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #3b82f6, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-hero-subtitle {
  font-size: 1.25rem;
  color: #a0a0a0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* FAQ Display Styles */
.faq-loading {
  text-align: center;
  padding: 3rem;
  color: #a0a0a0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #00eaff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.faq-error {
  text-align: center;
  padding: 3rem;
  color: #ef4444;
}

.error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.faq-empty {
  text-align: center;
  padding: 3rem;
  color: #a0a0a0;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.faq-category {
  margin-bottom: 2rem;
}

.faq-category-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 234, 255, 0.3);
}

@media (max-width: 768px) {
  .faq-hero-title {
    font-size: 2rem;
  }
  
  .faq-hero-subtitle {
    font-size: 1rem;
  }
  
  .contact-cta-title {
    font-size: 1.5rem;
  }
  
  .contact-cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* === Admin Modern Layout with Top Navigation === */
.admin-layout-modern {
  margin-top: 32px;
}

.admin-nav-bar {
  background: linear-gradient(135deg, rgba(15, 20, 38, 0.95) 0%, rgba(20, 25, 45, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 8px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 80px;
  z-index: 100;
}

.admin-nav-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.admin-nav-tabs::-webkit-scrollbar {
  display: none;
}

.admin-nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  background: transparent;
}

.admin-nav-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.admin-nav-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  box-shadow: 0 4px 16px rgba(0, 234, 255, 0.2);
  border: 1px solid rgba(0, 234, 255, 0.3);
}

.admin-nav-tab.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, #00eaff 0%, #8a2be2 100%);
  border-radius: 2px 2px 0 0;
}

.admin-nav-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.admin-nav-tab:hover .admin-nav-icon {
  transform: scale(1.1);
}

.admin-nav-tab.active .admin-nav-icon {
  color: #00eaff;
  filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.5));
}

.admin-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.admin-breadcrumb {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding: 8px 0;
}

.admin-breadcrumb span {
  margin: 0 6px;
}

.admin-breadcrumb-section {
  color: #00eaff;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.3);
}

.admin-tab-content {
  position: relative;
  min-height: 400px;
}

/* Admin sections are always visible in single page layout */
.admin-section {
  display: block !important;
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-tab-pane {
  display: none;
}

.admin-tab-pane.active {
  display: block;
}

/* Ensure Tools tab cards are visible when tab is active */
.admin-tab-pane[data-tab="tools"].active .tool-card-modern,
.admin-tab-pane[data-tab="tools"].active .api-inline-section-modern {
  display: block !important;
}

.admin-tab-pane[data-tab="tools"].active .tools-grid-modern {
  display: grid !important;
}

/* Ensure Partners and Achievements content is visible when tabs are active */
.admin-tab-pane[data-tab="partners"].active #partnersList,
.admin-tab-pane[data-tab="partners"].active .content-card-modern {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.admin-tab-pane[data-tab="achievements"].active #achievementsCard,
.admin-tab-pane[data-tab="achievements"].active #achievementsList {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.admin-tab-pane[data-tab="achievements"].active #achievementsCard {
  display: block !important;
}

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

@media (max-width: 1024px) {
  .admin-nav-bar {
    top: 60px;
    border-radius: 16px;
    padding: 6px;
  }
  
  .admin-nav-tab {
    padding: 10px 16px;
    font-size: 13px;
    gap: 8px;
  }
  
  .admin-nav-icon {
    width: 16px;
    height: 16px;
  }
  
  .admin-content-wrapper {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .admin-nav-bar {
    margin-bottom: 24px;
    border-radius: 12px;
  }
  
  .admin-nav-tabs {
    gap: 2px;
    padding: 4px;
  }
  
  .admin-nav-tab {
    padding: 8px 12px;
    font-size: 12px;
    gap: 6px;
  }
  
  .admin-nav-tab span {
    display: none;
  }
  
  .admin-nav-tab.active span {
    display: inline;
  }
  
  .admin-content-wrapper {
    gap: 20px;
  }
}

.admin-page-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.admin-page-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 400;
}

/* Modern Admin Card Styles - Synto Design */
.content-card-modern,
.tool-card-modern {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.content-card-modern:hover,
.tool-card-modern:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tool-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tool-title-modern {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.tool-description-modern {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.tool-content-modern {
  margin-top: 20px;
}

.search-form-modern {
  margin-bottom: 20px;
}

.search-input-modern {
  display: flex;
  gap: 8px;
}

.search-input-modern input {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
}

.search-btn-modern {
  padding: 10px 20px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 8px;
  color: #00eaff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-btn-modern:hover {
  background: rgba(0, 234, 255, 0.15);
}

.table-wrapper-modern,
.table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

/* Modern Admin Table Styles - Synto Design */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table thead {
  background: rgba(255, 255, 255, 0.03);
}

.admin-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.admin-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.admin-table tbody tr:last-child {
  border-bottom: none;
}

.admin-table tbody td {
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.admin-table tbody td:first-child {
  font-weight: 500;
}

.roles-catalog-table tbody td {
  vertical-align: middle;
}

/* Form Styles - Synto Design */
.tool-form-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-form-modern .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.tool-form-modern .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-form-modern .form-field label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.tool-form-modern .form-field input,
.tool-form-modern .form-field select,
.tool-form-modern .form-field textarea {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.tool-form-modern .form-field input:focus,
.tool-form-modern .form-field select:focus,
.tool-form-modern .form-field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.tool-form-modern .form-field small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.tool-form-modern .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Utility Classes for Admin */
.section-spacing-top {
  margin-top: 32px;
}

.section-spacing-bottom {
  margin-bottom: 24px;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.text-right {
  text-align: right;
}

.form-hint {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.form-label-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roles-mapping-table {
  margin-top: 32px;
}

.tool-title-spacing {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #ffffff;
  font-size: 13px;
}

.form-input-max-width {
  width: 100%;
  max-width: 400px;
}

.form-message-tight {
  margin-top: -16px;
}

.empty-state {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

/* Analytics Charts Styles */
.analytics-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.analytics-chart-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 20px;
}

.chart-header {
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.chart-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.chart-container {
  position: relative;
  height: 250px;
  width: 100%;
}

/* Advanced Filters Panel */
.advanced-filters-panel {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-group-actions {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.filter-select,
.filter-input {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  transition: all 0.2s ease;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.custom-date-range {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* Bulk Actions Bar */
.bulk-actions-bar {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(138, 43, 226, 0.1);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bulk-actions-info {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.bulk-actions-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Member Card Checkbox */
.member-card {
  position: relative;
}

.member-card-checkbox {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.member-select-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--purple);
}

.member-card:hover .member-card-checkbox {
  opacity: 1;
}

.member-card-checkbox {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.member-card.selected {
  border-color: rgba(138, 43, 226, 0.4);
  background: rgba(138, 43, 226, 0.05);
}

.table-footer-modern {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

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

/* Modern Dashboard Overview - Synto Design */
.dashboard-overview-modern {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.dashboard-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}

.dashboard-header-content {
  flex: 1;
}

.dashboard-title-modern {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.dashboard-subtitle-modern {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.dashboard-controls-modern {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.dashboard-controls-modern .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-stats-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-stat-card-modern {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 20px;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: default;
}

.dashboard-stat-card-modern:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background: radial-gradient(circle at top right, currentColor 0%, transparent 70%);
  pointer-events: none;
}

.stat-card-primary .stat-card-background {
  color: #00eaff;
}

.stat-card-success .stat-card-background {
  color: #4caf50;
}

.stat-card-warning .stat-card-background {
  color: #ff9800;
}

.stat-card-info .stat-card-background {
  color: #2196f3;
}

.stat-card-content {
  position: relative;
  z-index: 1;
}

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

.stat-card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-card-primary .stat-card-icon-wrapper {
  background: rgba(0, 234, 255, 0.2);
  color: #00eaff;
}

.stat-card-success .stat-card-icon-wrapper {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.stat-card-warning .stat-card-icon-wrapper {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.stat-card-info .stat-card-icon-wrapper {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
}

.dashboard-stat-card-modern:hover .stat-card-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.stat-card-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.stat-card-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-value {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.stat-card-primary .stat-card-value {
  color: #00eaff;
}

.stat-card-success .stat-card-value {
  color: #4caf50;
}

.stat-card-warning .stat-card-value {
  color: #ff9800;
}

.stat-card-info .stat-card-value {
  color: #2196f3;
}

.stat-card-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.trend-icon {
  font-size: 14px;
}

.dashboard-footer-modern {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.dashboard-footer-content svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.dashboard-footer-text {
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dashboard-overview-modern {
    padding: 24px;
  }
  
  .dashboard-header-modern {
    flex-direction: column;
    gap: 16px;
  }
  
  .dashboard-controls-modern {
    width: 100%;
    justify-content: flex-start;
  }
  
  .dashboard-stats-grid-modern {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .dashboard-title-modern {
    font-size: 24px;
  }
  
  .stat-card-value {
    font-size: 32px;
  }
}

/* Partner Admin Modal - Modern Design */
.partner-modal-container {
  position: relative;
  max-width: 700px;
  width: 90vw;
  max-height: 90vh;
  margin: 5vh auto;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 24px;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.partner-modal-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(138, 43, 226, 0.8) 0%, 
    rgba(0, 234, 255, 0.8) 100%);
  z-index: 1;
}

.modal.active .partner-modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.partner-modal-header {
  padding: 24px 32px 20px;
  border-bottom: 1px solid rgba(138, 43, 226, 0.15);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(255, 255, 255, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.partner-modal-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.partner-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  border: 1px solid rgba(0, 234, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.2);
}

.partner-modal-title-section {
  flex: 1;
  min-width: 0;
}

.partner-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.partner-modal-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 400;
}

.partner-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(138, 43, 226, 0.2);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

.partner-modal-close:hover {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.2) 0%, 
    rgba(0, 234, 255, 0.2) 100%);
  border-color: rgba(138, 43, 226, 0.4);
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 
    0 4px 12px rgba(138, 43, 226, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.partner-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 200px);
  position: relative;
  z-index: 2;
}

.partner-modal-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.partner-form-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s ease;
}

.partner-form-section:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.partner-section-header {
  margin-bottom: 20px;
}

.partner-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.partner-section-divider {
  height: 2px;
  width: 40px;
  background: linear-gradient(90deg, #00eaff 0%, transparent 100%);
  border-radius: 2px;
}

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

.partner-form-group:last-child {
  margin-bottom: 0;
}

.partner-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.partner-form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.partner-label-icon {
  font-size: 16px;
  opacity: 0.8;
}

.partner-label-text {
  flex: 1;
}

.partner-label-required {
  color: #ef4444;
  margin-left: 2px;
}

.partner-form-input,
.partner-form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.partner-form-input:focus,
.partner-form-textarea:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.partner-form-input::placeholder,
.partner-form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.partner-form-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

.partner-form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.partner-modal-footer {
  padding: 20px 32px;
  border-top: 1px solid rgba(138, 43, 226, 0.15);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.04) 0%, 
    rgba(255, 255, 255, 0.02) 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.partner-modal-footer .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .partner-modal-container {
    width: 95vw;
    max-height: 95vh;
    margin: 2.5vh auto;
  }
  
  .partner-modal-header {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .partner-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .partner-modal-body {
    padding: 24px;
  }
  
  .partner-form-section {
    padding: 20px;
  }
  
  .partner-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .partner-modal-footer {
    padding: 16px 24px;
    flex-direction: column-reverse;
  }
  
  .partner-modal-footer .btn {
    width: 100%;
  }
}

/* Partner Modal - Homepage Design */
.partner-modal-container-homepage {
  position: relative;
  max-width: 600px;
  width: 90vw;
  max-height: 90vh;
  margin: 5vh auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.active .partner-modal-container-homepage {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.partner-modal-header-homepage {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
}

.partner-modal-header-content-homepage {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.partner-modal-logo-wrapper-homepage {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.partner-modal-logo-homepage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.partner-modal-title-section-homepage {
  flex: 1;
  min-width: 0;
}

.partner-modal-title-homepage {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

.partner-modal-subtitle-homepage {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

.partner-modal-close-homepage {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.partner-modal-close-homepage:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.partner-modal-body-homepage {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 200px);
}

.partner-links-section-homepage {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partner-links-header-homepage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.partner-links-header-homepage svg {
  color: rgba(0, 234, 255, 0.8);
  opacity: 0.8;
}

.partner-links-title-homepage {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.partner-links-grid-homepage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.partner-link-card-homepage {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.partner-link-card-homepage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.partner-link-card-homepage:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.partner-link-card-homepage:hover::before {
  opacity: 1;
}

.partner-link-icon-wrapper-homepage {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

.partner-link-card-homepage:hover .partner-link-icon-wrapper-homepage {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.12);
}

.partner-link-icon-wrapper-homepage svg {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.9);
}

.partner-link-icon-img-homepage {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.partner-link-content-homepage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.partner-link-label-homepage {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.partner-link-action-homepage {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.partner-link-arrow-homepage {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.partner-link-card-homepage:hover .partner-link-arrow-homepage {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

.partner-link-discord .partner-link-icon-wrapper-homepage {
  background: rgba(88, 101, 242, 0.2);
  border-color: rgba(88, 101, 242, 0.3);
}

.partner-link-discord .partner-link-icon-wrapper-homepage svg {
  color: #5865f2;
}

.partner-link-vrc .partner-link-icon-wrapper-homepage {
  background: rgba(0, 234, 255, 0.2);
  border-color: rgba(0, 234, 255, 0.3);
}

.partner-link-website .partner-link-icon-wrapper-homepage {
  background: rgba(138, 43, 226, 0.2);
  border-color: rgba(138, 43, 226, 0.3);
}

.partner-link-website .partner-link-icon-wrapper-homepage svg {
  color: #8a2be2;
}

@media (max-width: 768px) {
  .partner-modal-container-homepage {
    width: 95vw;
    max-height: 95vh;
    margin: 2.5vh auto;
  }
  
  .partner-modal-header-homepage {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .partner-modal-close-homepage {
    position: absolute;
    top: 24px;
    right: 24px;
  }
  
  .partner-modal-header-content-homepage {
    flex-direction: column;
    gap: 16px;
  }
  
  .partner-modal-logo-wrapper-homepage {
    width: 64px;
    height: 64px;
  }
  
  .partner-modal-title-homepage {
    font-size: 20px;
  }
  
  .partner-modal-body-homepage {
    padding: 24px;
  }
  
  .partner-link-card-homepage {
    padding: 14px 16px;
  }
  
  .partner-link-icon-wrapper-homepage {
    width: 40px;
    height: 40px;
  }
}

.quick-actions-modern,
.system-status-modern {
  background: #1a1d29;
  border: 1px solid #2a2d3a;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.section-title-modern {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.action-btn-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn-modern.primary {
  background: rgba(0, 234, 255, 0.1);
  color: #00eaff;
  border: 1px solid rgba(0, 234, 255, 0.2);
}

.action-btn-modern.primary:hover {
  background: rgba(0, 234, 255, 0.15);
}

.action-btn-modern.secondary {
  background: rgba(138, 43, 226, 0.1);
  color: #8a2be2;
  border: 1px solid rgba(138, 43, 226, 0.2);
}

.action-btn-modern.secondary:hover {
  background: rgba(138, 43, 226, 0.15);
}

.action-btn-modern.ghost {
  background: rgba(255, 255, 255, 0.05);
  color: #a0a3ad;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn-modern.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Make action buttons work as links */
.action-btn-modern {
  text-decoration: none;
  transition: all 0.2s ease;
}

.action-btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Smooth scrolling for section links */
html {
  scroll-behavior: smooth;
}

/* Add scroll offset for section anchors */
.admin-section {
  scroll-margin-top: 80px;
}

.status-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.status-item-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.status-item-modern .status-dot {
  width: 8px;
}

/* ============================================================================
   WORLD EDITOR MODERN REDESIGN
   ============================================================================ */

/* World Editor Header */
.world-editor-header-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(20, 23, 33, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.editor-header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.editor-header-left {
  flex-shrink: 0;
}

.editor-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #a0a3ad;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.editor-back-btn:hover {
  background: rgba(0, 234, 255, 0.1);
  border-color: rgba(0, 234, 255, 0.2);
  color: #00eaff;
  transform: translateY(-2px);
}

.editor-header-center {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.editor-icon-wrapper {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  border: 1px solid rgba(0, 234, 255, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.2);
}

.editor-header-info {
  text-align: left;
}

.editor-title-main {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 234, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.editor-subtitle-main {
  font-size: 14px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.editor-header-right {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* World Editor Content */
.world-editor-content-modern {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.world-editor-form-modern {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* World Editor Cards */
.world-editor-card-modern {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(20, 23, 33, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.world-editor-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(0, 234, 255, 0.8) 0%, 
    rgba(138, 43, 226, 0.8) 50%, 
    rgba(0, 234, 255, 0.8) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.world-editor-card-modern:hover {
  border-color: rgba(0, 234, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 234, 255, 0.1);
  transform: translateY(-2px);
}

.world-editor-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(0, 234, 255, 0.1);
}

.world-editor-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  flex-shrink: 0;
}

.world-editor-card-title-section {
  flex: 1;
}

.world-editor-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.world-editor-card-subtitle {
  font-size: 13px;
  color: #a0a3ad;
  margin: 0;
  font-weight: 400;
}

.world-editor-card-body {
  padding: 28px;
}

.world-editor-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.world-editor-field.full-width {
  grid-column: 1 / -1;
}

.world-editor-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.world-editor-label-text {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.world-editor-label-required {
  color: #ef4444;
  font-weight: 700;
}

.world-editor-label-hint {
  font-size: 12px;
  color: #a0a3ad;
  font-weight: 400;
}

.world-editor-input,
.world-editor-textarea,
.world-editor-select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.world-editor-input:focus,
.world-editor-textarea:focus,
.world-editor-select:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

.world-editor-input::placeholder,
.world-editor-textarea::placeholder {
  color: #666;
}

.world-editor-textarea {
  resize: vertical;
  min-height: 100px;
}

.world-editor-select-wrapper {
  position: relative;
}

.world-editor-select {
  appearance: none;
  padding-right: 40px;
}

.world-editor-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #a0a3ad;
}

.world-editor-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-editor-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.world-editor-toggle input[type="checkbox"] {
  display: none;
}

.world-editor-toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.world-editor-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.world-editor-toggle input[type="checkbox"]:checked + .world-editor-toggle-slider {
  background: rgba(0, 234, 255, 0.3);
  border-color: rgba(0, 234, 255, 0.5);
}

.world-editor-toggle input[type="checkbox"]:checked + .world-editor-toggle-slider::before {
  transform: translateX(20px);
  background: #00eaff;
  box-shadow: 0 2px 8px rgba(0, 234, 255, 0.4);
}

.world-editor-toggle-label {
  font-size: 14px;
  color: #a0a3ad;
  font-weight: 500;
}

.world-editor-toggle.large .world-editor-toggle-slider {
  width: 52px;
  height: 28px;
}

.world-editor-toggle.large .world-editor-toggle-slider::before {
  width: 22px;
  height: 22px;
}

.world-editor-toggle.large input[type="checkbox"]:checked + .world-editor-toggle-slider::before {
  transform: translateX(24px);
}

.world-editor-featured-toggle {
  padding: 16px;
  background: rgba(0, 234, 255, 0.05);
  border: 1px solid rgba(0, 234, 255, 0.1);
  border-radius: 12px;
}

/* ============================================================================
   WORLD EDITOR IMAGE MANAGEMENT
   ============================================================================ */

/* Image Gallery */
.world-editor-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  min-height: 120px;
}

.image-gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: #a0a3ad;
}

.image-gallery-empty svg {
  margin-bottom: 16px;
  opacity: 0.5;
}

.image-gallery-empty p {
  margin: 0;
  font-size: 14px;
}

.world-editor-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: move;
  transition: all 0.3s ease;
}

.world-editor-image-item:hover {
  border-color: rgba(0, 234, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 234, 255, 0.2);
}

.world-editor-image-item.cover {
  border-color: rgba(255, 215, 0, 0.6);
  border-width: 3px;
}

.world-editor-image-item.cover::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: rgba(255, 215, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.world-editor-image-item.cover::after {
  content: '★';
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1d29;
  font-size: 14px;
  font-weight: 700;
}

.world-editor-image-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.world-editor-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.world-editor-image-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.world-editor-image-item:hover .world-editor-image-actions {
  opacity: 1;
}

.world-editor-image-action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.world-editor-image-action-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  transform: scale(1.1);
}

.world-editor-image-action-btn.set-cover {
  background: rgba(0, 0, 0, 0.7);
}

.world-editor-image-action-btn.set-cover:hover {
  background: rgba(255, 215, 0, 0.9);
  color: #1a1d29;
}

.world-editor-image-action-btn svg {
  width: 14px;
  height: 14px;
}

.world-editor-image-item.loading {
  pointer-events: none;
}

.world-editor-image-item.loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.world-editor-image-item.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #00eaff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 2;
}

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

/* Upload Zone */
.world-editor-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 24px;
}

.world-editor-upload-zone:hover,
.world-editor-upload-zone.drag-over {
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(0, 234, 255, 0.05);
  transform: translateY(-2px);
}

.world-editor-upload-zone.drag-over {
  border-color: rgba(0, 234, 255, 0.8);
  background: rgba(0, 234, 255, 0.1);
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-zone-content svg {
  color: #a0a3ad;
  transition: color 0.3s ease;
}

.world-editor-upload-zone:hover .upload-zone-content svg,
.world-editor-upload-zone.drag-over .upload-zone-content svg {
  color: #00eaff;
}

.upload-zone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-zone-text strong {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.upload-zone-text span {
  color: #a0a3ad;
  font-size: 14px;
}

.upload-zone-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

/* Image Controls */
.world-editor-image-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.image-count {
  margin-left: auto;
  font-size: 14px;
  color: #a0a3ad;
  font-weight: 500;
}

/* URL Input */
.world-editor-url-input {
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.url-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.url-input-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Cover Indicator */
.world-editor-cover-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  color: #ffd700;
  font-size: 14px;
}

.world-editor-cover-indicator svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.world-editor-cover-indicator strong {
  color: #ffd700;
  font-weight: 600;
}

/* ============================================================================
   WORLD EDITOR AUTO-SAVE & STATUS
   ============================================================================ */

.editor-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 13px;
  color: #a0a3ad;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a0a3ad;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.status-dot.saved {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-dot.saving {
  background: #f59e0b;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-dot.unsaved {
  background: #ef4444;
  animation: pulse-dot 2s ease-in-out infinite;
}

.status-dot.draft {
  background: #6366f1;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-text {
  font-weight: 500;
  user-select: none;
}

/* Draft Button */
#saveDraftBtn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================================
   WORLD EDITOR FORM VALIDATION
   ============================================================================ */

.world-editor-input:invalid:not(:placeholder-shown),
.world-editor-textarea:invalid:not(:placeholder-shown),
.world-editor-select:invalid:not(:placeholder-shown) {
  border-color: rgba(239, 68, 68, 0.5);
}

.world-editor-input:valid:not(:placeholder-shown),
.world-editor-textarea:valid:not(:placeholder-shown),
.world-editor-select:valid:not(:placeholder-shown) {
  border-color: rgba(16, 185, 129, 0.5);
}

.world-editor-input.error,
.world-editor-textarea.error,
.world-editor-select.error {
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.05);
}

.world-editor-input.error:focus,
.world-editor-textarea.error:focus,
.world-editor-select.error:focus {
  border-color: rgba(239, 68, 68, 1);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.field-error {
  margin-top: 6px;
  font-size: 12px;
  color: #ef4444;
  display: none;
  min-height: 18px;
}

.field-error.show {
  display: block;
  animation: slideDown 0.2s ease;
}

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

.world-editor-label-hint {
  font-weight: 400;
}

.world-editor-label-hint.warning {
  color: #f59e0b;
}

.world-editor-label-hint.error {
  color: #ef4444;
}

/* Character Counter */
.world-editor-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.world-editor-label .world-editor-label-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================================
   WORLD EDITOR LIVE PREVIEW
   ============================================================================ */

.world-editor-preview-section {
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(20, 23, 33, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.preview-header {
  margin-bottom: 24px;
  text-align: center;
}

.preview-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 234, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.preview-subtitle {
  font-size: 14px;
  color: #a0a3ad;
  margin: 0;
}

.preview-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
}

.preview-card-wrapper {
  max-width: 400px;
  width: 100%;
}

.preview-card-wrapper .world-card-modern {
  margin: 0;
  width: 100%;
}

/* Preview mode - hide form when preview is active */
.world-editor-content-modern.preview-mode .world-editor-form-modern {
  display: none;
}

.world-editor-content-modern.preview-mode .world-editor-preview-section {
  display: block;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .world-editor-content-modern {
    padding: 24px;
  }
  
  .editor-header-content {
    flex-wrap: wrap;
  }
  
  .editor-header-center {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }
  
  .editor-header-right {
    order: 3;
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .world-editor-header-modern {
    padding: 20px 16px;
  }
  
  .editor-header-content {
    gap: 16px;
  }
  
  .editor-title-main {
    font-size: 24px;
  }
  
  .world-editor-content-modern {
    padding: 20px 16px;
  }
  
  .world-editor-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .world-editor-card-header {
    padding: 20px;
    flex-wrap: wrap;
  }
  
  .world-editor-card-body {
    padding: 20px;
  }
  
  .editor-header-right {
    flex-direction: column;
    width: 100%;
  }
  
  .editor-header-right .btn {
    width: 100%;
  }
}

.status-item-modern .status-dot.online {
  background: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.status-item-modern .status-name {
  flex: 1;
  color: #a0a3ad;
  font-size: 14px;
}

.status-item-modern .status-value {
  color: #00ff88;
  font-size: 14px;
  font-weight: 600;
}

.tools-grid-modern {
  display: grid;
  gap: 24px;
}

.tool-description-modern {
  color: #a0a3ad;
  font-size: 14px;
  margin: 8px 0 0 0;
}

.tool-content-modern {
  margin-top: 20px;
}

.tool-form-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-badge-modern {
  background: rgba(138, 43, 226, 0.1);
  color: #8a2be2;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.api-inline-section-modern {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.08), rgba(138, 43, 226, 0.04));
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

/* FAQ Link Section */
.faq-link-section {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4rem;
  padding: 3rem 0;
}

.faq-link-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.faq-link-content {
  text-align: center;
}

.faq-link-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

.faq-link-subtitle {
  font-size: 1rem;
  color: #a0a0a0;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ Management Responsive Design */
@media (max-width: 768px) {
  .faq-management-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .faq-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .category-actions,
  .faq-actions {
    flex-direction: column;
  }
  
  .category-header,
  .faq-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .category-meta,
  .faq-meta {
    flex-wrap: wrap;
  }
}

/* === WORLD SHARE MODAL === */
.share-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.share-modal-description {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.share-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.share-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.share-option-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(138, 43, 226, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(138, 43, 226, 0.2);
}

.share-option-btn:active {
  transform: translateY(0);
}

.share-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.share-option-icon.discord-icon {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.1) 100%);
  color: #5865F2;
  border: 1px solid rgba(88, 101, 242, 0.3);
}

.share-option-btn[data-share="discord"]:hover .share-option-icon.discord-icon {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.3) 0%, rgba(88, 101, 242, 0.2) 100%);
  border-color: rgba(88, 101, 242, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.share-option-icon.twitter-icon {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.share-option-btn[data-share="twitter"]:hover .share-option-icon.twitter-icon {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.share-option-icon.copy-icon {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.2) 0%, rgba(138, 43, 226, 0.2) 100%);
  color: #00eaff;
  border: 1px solid rgba(0, 234, 255, 0.3);
}

.share-option-btn[data-share="copy"]:hover .share-option-icon.copy-icon {
  background: linear-gradient(135deg, rgba(0, 234, 255, 0.3) 0%, rgba(138, 43, 226, 0.3) 100%);
  border-color: rgba(0, 234, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 234, 255, 0.3);
}

.share-option-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.share-url-container {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.share-url-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  cursor: text;
}

.share-url-input:focus {
  outline: none;
  border-color: rgba(0, 234, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.1);
}

@media (max-width: 576px) {
  .share-options-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .share-option-btn {
    padding: 20px 16px;
  }
  
  .share-url-container {
    flex-direction: column;
  }
  
  .share-url-input {
    width: 100%;
  }
}

/* ===== ANNOUNCEMENTS & NOTIFICATIONS STYLES ===== */

/* Announcement Cards (Admin Dashboard) */
.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.announcement-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.announcement-card.active {
  border-left: 3px solid #10b981;
}

.announcement-card.inactive {
  opacity: 0.6;
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 16px;
}

.announcement-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.announcement-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.announcement-badge.info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.announcement-badge.success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.announcement-badge.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.announcement-badge.error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.announcement-badge.active {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.announcement-badge.inactive {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.announcement-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.announcement-message {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.announcement-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Notification History (Admin Dashboard) */
.notifications-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 600px;
  overflow-y: auto;
}

.notification-history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.2s ease;
}

.notification-history-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}

.notification-header strong {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
}

.notification-history-item p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.read-badge,
.unread-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.read-badge {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.unread-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Frontend Announcement Banner */
.announcement-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.98) 0%, rgba(20, 23, 33, 0.98) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.announcement-banner.info {
  border-left: 4px solid #3b82f6;
}

.announcement-banner.success {
  border-left: 4px solid #10b981;
}

.announcement-banner.warning {
  border-left: 4px solid #f59e0b;
}

.announcement-banner.error {
  border-left: 4px solid #ef4444;
}

.announcement-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.announcement-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.announcement-banner-message {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.5;
}

.announcement-banner-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.announcement-banner-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Announcement Modal (Frontend) */
.announcement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.announcement-modal {
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.98) 0%, rgba(20, 23, 33, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.announcement-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
}

.announcement-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  flex: 1;
}

.announcement-modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.announcement-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.announcement-modal-message {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.announcement-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Notification Bell Icon */
.notification-bell {
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bell:hover {
  background: rgba(255, 255, 255, 0.1);
}

.notification-bell-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.notification-bell:hover .notification-bell-icon {
  color: #ffffff;
}

.notification-badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: linear-gradient(135deg, rgba(26, 29, 41, 0.98) 0%, rgba(20, 23, 33, 0.98) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 380px;
  max-height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  animation: slideDownFade 0.2s ease-out;
}

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

.notification-dropdown-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-dropdown-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.notification-dropdown-actions {
  display: flex;
  gap: 8px;
}

.notification-dropdown-body {
  overflow-y: auto;
  max-height: 400px;
}

.notification-dropdown-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.notification-item {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  gap: 12px;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notification-item.unread {
  background: rgba(59, 130, 246, 0.05);
  border-left: 3px solid #3b82f6;
}

.notification-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.notification-item-icon.info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.notification-item-icon.success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.notification-item-icon.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.notification-item-icon.error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

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

.notification-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.notification-item-message {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.notification-item-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.notification-dropdown-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.notification-dropdown-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.notification-dropdown-footer a:hover {
  color: #ffffff;
}

/* Pulse animation for notification bell */
@keyframes notificationPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.notification-bell.pulse {
  animation: notificationPulse 0.5s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
  .announcement-banner {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .announcement-banner-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .announcement-modal {
    padding: 24px;
    margin: 20px;
  }

  .notification-dropdown {
    width: calc(100vw - 32px);
    right: 16px;
  }
}

/* Account Page Notifications List */
.notifications-list-modern {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-item-account {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.notification-item-account:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.notification-item-account.unread {
  background: rgba(138, 43, 226, 0.15);
  border-color: rgba(138, 43, 226, 0.3);
  border-left: 3px solid rgba(138, 43, 226, 0.8);
}

.notification-item-account.unread:hover {
  background: rgba(138, 43, 226, 0.2);
  border-color: rgba(138, 43, 226, 0.4);
}

.notification-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  flex: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
}

.notification-item-account:hover .notification-item-main {
  transform: translateX(4px);
}

.notification-item-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 12px 12px 12px 0;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  opacity: 0.6;
}

.notification-item-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  opacity: 1;
  transform: scale(1.1);
}

.notification-item-delete:active {
  transform: scale(0.95);
}

.notification-item-unread-dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00eaff;
  box-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
  z-index: 1;
}

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