/* ==========================================================================
   CYBERROSALIAS SHARED DESIGN SYSTEM (theme.css)
   Single Source of Truth (DRY) for:
   1. Permanent "Hafif Leylak" Light Mode (:root, body[data-theme="light"])
   2. Deep Premium Ambient Glow Dark Mode (body[data-theme="dark"])
   3. Legacy Variable Bridge (--bg, --ink, --glass-bg, etc. for all sub-pages)
   4. Breathing Ambient Glow Orbs & Technological Dot Grid
   5. Unified Capsule Navbar, Sun/Moon Theme Toggle, Auth, Cards, Forms & Modals
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700;800&display=swap');

:root,
html[data-theme="light"],
body,
body[data-theme="light"] {
  /* Core V2 Royal & Soft Lilac Palette (Permanent Light Mode Default) */
  --page-bg: linear-gradient(180deg, #F5F2FF 0%, #FAFAFC 35%, #F4F0FF 75%, #FAFAFC 100%);
  --cr-canvas: #FAF8FF;
  --cr-surface: #FFFFFF;
  --cr-surface-solid: #FFFFFF;
  --cr-surface-subtle: #F5F3FF;
  --cr-border-light: #DDD6FE;
  --cr-border-lilac: #DDD6FE;
  --card-border: #DDD6FE;

  --cr-royal: #5B21B6;
  --cr-royal-btn: #5B21B6;
  --cr-royal-hover: #7C3AED;
  --cr-royal-deep: #3B0764;
  --cr-royal-dark: #4C1D95;
  --cr-royal-vivid: #6D28D9;

  --cr-lilac: #DDD6FE;
  --cr-lilac-mid: #C4B5FD;
  --cr-lilac-soft: #EDE9FE;

  /* Gece Siyahı (Light Mode High-Contrast Action Button) */
  --cr-midnight: #0B0F19;
  --cr-midnight-hover: #1E293B;
  --cr-midnight-soft: #111827;
  --cr-midnight-tint: #F1F5F9;

  --cr-ink: #1E293B;
  --cr-ink-secondary: #475569;
  --cr-ink-muted: #64748B;

  --cr-emerald: #059669;
  --cr-emerald-bg: #ECFDF5;

  /* Geometry & Shadows */
  --cr-radius-xs: 10px;
  --cr-radius-sm: 14px;
  --cr-radius-md: 20px;
  --cr-radius-lg: 26px;
  --cr-radius-xl: 32px;
  --cr-radius-pill: 999px;

  --cr-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
  --cr-shadow-card: 0 12px 32px -12px rgba(91, 33, 182, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03);
  --cr-shadow-card-hover: 0 24px 48px -12px rgba(91, 33, 182, 0.18), 0 4px 14px rgba(15, 23, 42, 0.05);
  --cr-shadow-royal-btn: 0 12px 28px -6px rgba(91, 33, 182, 0.42);
  --cr-shadow-midnight-btn: 0 12px 28px -6px rgba(11, 15, 25, 0.36);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Legacy Variable Bridge for Sub-Pages (site.css, shop.css, etc.) */
  --bg: #F5F2FF;
  --bg-elev: #FFFFFF;
  --ink: #1E293B;
  --muted: #475569;
  --line: #DDD6FE;
  --accent: #5B21B6;
  --accent-deep: #4C1D95;
  --warm: #D97706;
  --danger: #DC2626;
  --ok: #059669;
  --radius: 18px;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: #DDD6FE;
  --surface-well: #F5F3FF;
  --input-bg: #FAF8FF;
  --glow: 0 10px 26px -8px rgba(91, 33, 182, 0.16);
  --glow-strong: 0 16px 36px -8px rgba(91, 33, 182, 0.26);
}

/* ==========================================================================
   DEEP PREMIUM DARK MODE (#07070E Canvas + #11111F Glass Surfaces)
   ========================================================================== */
html[data-theme="dark"],
body[data-theme="dark"] {
  --page-bg: #07070E;
  --cr-canvas: #0B0B17;
  --cr-surface: rgba(17, 17, 31, 0.8);
  --cr-surface-solid: #11111F;
  --cr-surface-subtle: rgba(25, 25, 45, 0.78);
  --cr-border-light: rgba(139, 92, 246, 0.18);
  --cr-border-lilac: rgba(139, 92, 246, 0.26);
  --card-border: rgba(139, 92, 246, 0.18);

  --cr-royal: #A78BFA;
  --cr-royal-btn: #6D28D9;
  --cr-royal-hover: #C4B5FD;
  --cr-royal-deep: #EDE9FE;
  --cr-royal-dark: #5B21B6;
  --cr-royal-vivid: #8B5CF6;

  --cr-lilac: rgba(139, 92, 246, 0.28);
  --cr-lilac-mid: #A78BFA;
  --cr-lilac-soft: rgba(124, 58, 237, 0.16);

  /* Dark Mode High-Contrast Action Button (Bright White #F8FAFC) */
  --cr-midnight: #F8FAFC;
  --cr-midnight-hover: #E2E8F0;
  --cr-midnight-soft: #1E1B4B;
  --cr-midnight-tint: rgba(25, 25, 45, 0.85);

  --cr-ink: #F8FAFC;
  --cr-ink-secondary: #94A3B8;
  --cr-ink-muted: #64748B;

  --cr-emerald: #34D399;
  --cr-emerald-bg: rgba(16, 185, 129, 0.16);

  --cr-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.35);
  --cr-shadow-card: 0 18px 42px -12px rgba(0, 0, 0, 0.65), 0 0 1px rgba(139, 92, 246, 0.24);
  --cr-shadow-card-hover: 0 24px 54px -12px rgba(124, 58, 237, 0.32), 0 0 22px rgba(139, 92, 246, 0.15);
  --cr-shadow-royal-btn: 0 12px 30px -6px rgba(109, 40, 217, 0.55);
  --cr-shadow-midnight-btn: 0 12px 28px -6px rgba(248, 250, 252, 0.22);

  /* Legacy Variable Bridge in Dark Mode */
  --bg: #07070E;
  --bg-elev: #11111F;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --line: rgba(139, 92, 246, 0.18);
  --accent: #A78BFA;
  --accent-deep: #6D28D9;
  --warm: #FBBF24;
  --danger: #F87171;
  --ok: #34D399;
  --radius: 18px;
  --glass-bg: rgba(17, 17, 31, 0.8);
  --glass-border: rgba(139, 92, 246, 0.18);
  --surface-well: rgba(25, 25, 45, 0.78);
  --input-bg: rgba(17, 17, 31, 0.9);
  --glow: 0 14px 34px -10px rgba(124, 58, 237, 0.28);
  --glow-strong: 0 20px 44px -10px rgba(124, 58, 237, 0.42);
}

/* ==========================================================================
   GLOBAL CANVAS, DOT GRID & AMBIENT GLOW ORBS
   ========================================================================== */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--cr-ink);
  background: var(--page-bg) !important;
  transition: background-color 0.35s ease, color 0.25s ease;
}

h1, h2, h3, h4, .nav-brand, .cr-brand-title {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

/* Technological Dot Grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(#CBD5E1 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.42;
}

body[data-theme="dark"]::before {
  background-image: radial-gradient(rgba(167, 139, 250, 0.12) 1px, transparent 1px);
  opacity: 1;
}

/* Soft Ambient Radial Aura */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(650px circle at 18% 14%, rgba(91, 33, 182, 0.08) 0%, transparent 70%),
    radial-gradient(750px circle at 82% 20%, rgba(221, 214, 254, 0.5) 0%, transparent 72%),
    radial-gradient(600px circle at 50% 80%, rgba(91, 33, 182, 0.06) 0%, transparent 70%);
}

body[data-theme="dark"]::after {
  background:
    radial-gradient(720px circle at 15% 12%, rgba(124, 58, 237, 0.14) 0%, transparent 70%),
    radial-gradient(680px circle at 85% 24%, rgba(6, 182, 212, 0.08) 0%, transparent 72%),
    radial-gradient(640px circle at 50% 85%, rgba(124, 58, 237, 0.11) 0%, transparent 70%);
}

/* Breathing & Floating Ambient Glow Orbs (12-15s Smooth Motion) */
@keyframes crOrbFloat1 {
  0% { transform: translate3d(0px, 0px, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(70px, 45px, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-45px, 85px, 0) scale(0.94); opacity: 0.8; }
}

@keyframes crOrbFloat2 {
  0% { transform: translate3d(0px, 0px, 0) scale(1); opacity: 0.8; }
  50% { transform: translate3d(-80px, 60px, 0) scale(1.15); opacity: 1; }
  100% { transform: translate3d(40px, -50px, 0) scale(0.92); opacity: 0.75; }
}

@keyframes crOrbFloat3 {
  0% { transform: translate3d(0px, 0px, 0) scale(0.96); opacity: 0.75; }
  50% { transform: translate3d(55px, -65px, 0) scale(1.1); opacity: 1; }
  100% { transform: translate3d(-60px, 30px, 0) scale(1); opacity: 0.82; }
}

.cr-ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.32;
  transition: opacity 0.45s ease;
}

body[data-theme="dark"] .cr-ambient-orbs {
  opacity: 1;
}

.cr-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  will-change: transform, opacity;
}

.cr-orb-purple-1 {
  width: 620px;
  height: 620px;
  top: -120px;
  left: -100px;
  background: rgba(124, 58, 237, 0.22);
  animation: crOrbFloat1 13.5s ease-in-out infinite alternate;
}

.cr-orb-cyan {
  width: 540px;
  height: 540px;
  top: 18%;
  right: -90px;
  background: rgba(6, 182, 212, 0.12);
  animation: crOrbFloat2 15s ease-in-out infinite alternate;
}

.cr-orb-purple-2 {
  width: 580px;
  height: 580px;
  bottom: -140px;
  left: 28%;
  background: rgba(124, 58, 237, 0.20);
  animation: crOrbFloat3 12.5s ease-in-out infinite alternate;
}

/* ==========================================================================
   MINIMAL CIRCULAR DARK / LIGHT THEME TOGGLE BUTTON (Güneş / Ay)
   ========================================================================== */
.cr-theme-toggle-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cr-border-light);
  background: var(--cr-surface);
  color: var(--cr-ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: var(--cr-shadow-xs);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cr-theme-toggle-btn:hover {
  border-color: var(--cr-royal-hover);
  background: var(--cr-lilac-soft);
  color: var(--cr-royal);
  transform: translateY(-2px) rotate(8deg);
  box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.28);
}

.cr-theme-toggle-btn:active {
  transform: scale(0.94);
}

.cr-theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.cr-theme-toggle-btn .cr-icon-sun {
  display: none;
}

.cr-theme-toggle-btn .cr-icon-moon {
  display: block;
}

body[data-theme="dark"] .cr-theme-toggle-btn {
  background: rgba(25, 25, 45, 0.85);
  border-color: rgba(139, 92, 246, 0.32);
  color: #FDE68A;
}

body[data-theme="dark"] .cr-theme-toggle-btn:hover {
  background: rgba(124, 58, 237, 0.24);
  border-color: #A78BFA;
  color: #FEF08A;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

body[data-theme="dark"] .cr-theme-toggle-btn .cr-icon-sun {
  display: block;
}

body[data-theme="dark"] .cr-theme-toggle-btn .cr-icon-moon {
  display: none;
}

/* ==========================================================================
   UNIFIED TOP ANNOUNCEMENT RIBBON & CAPSULE NAVBAR (#site-header / .nav)
   ========================================================================== */
.cr-top-ribbon {
  position: relative;
  z-index: 96;
  background: var(--cr-surface);
  border-bottom: 1px solid var(--cr-border-light);
  font-size: 0.78rem;
  color: var(--cr-ink-secondary);
  pointer-events: auto;
}

.cr-top-ribbon-inner {
  width: min(1440px, 96vw);
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: 12px;
}

body.admin-shell .cr-top-ribbon-inner {
  width: min(1680px, 94vw);
  max-width: 1680px;
}

.cr-ribbon-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--cr-ink);
}

.cr-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  display: inline-block;
  flex-shrink: 0;
}

.cr-ribbon-link {
  color: var(--cr-royal);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.cr-ribbon-link:hover {
  opacity: 0.82;
  text-decoration: underline;
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 95;
  padding: 0 0 4px;
  pointer-events: none;
}

#site-header .nav {
  pointer-events: auto;
  position: relative;
  top: auto;
  width: min(1440px, 96vw);
  max-width: 1440px;
  margin: 12px auto 0;
  border-radius: var(--cr-radius-pill);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--cr-border-light);
  box-shadow: 0 12px 32px -12px rgba(91, 33, 182, 0.1), 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.admin-shell #site-header .nav {
  width: min(1680px, 94vw);
  max-width: 1680px;
}

body[data-theme="dark"] #site-header .nav {
  background: rgba(17, 17, 31, 0.84);
  border-color: rgba(139, 92, 246, 0.22);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.72), 0 0 24px rgba(124, 58, 237, 0.12);
}

#site-header .nav-inner {
  width: 100% !important;
  max-width: none !important;
  min-height: 60px;
  padding: 6px 16px 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

#site-header .nav-brand,
.cr-brand,
.cr-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  color: var(--cr-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
}

#site-header .nav-brand {
  margin-right: 24px;
}

/* ==========================================================================
   HEXAGONAL CYBERROSALIAS LOGO COMPONENT (Light & Dark + Subtle Animations)
   ========================================================================== */
@keyframes logoPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(139, 92, 246, 0.55))
      drop-shadow(0 0 11px rgba(6, 182, 212, 0.22));
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(6, 182, 212, 0.45))
      drop-shadow(0 0 13px rgba(139, 92, 246, 0.34));
  }
}

@keyframes logoShimmer {
  0%, 66% {
    background-position: 170% 170%;
    opacity: 0;
  }
  72% {
    opacity: 0.92;
  }
  92% {
    background-position: -65% -65%;
    opacity: 0.85;
  }
  100% {
    background-position: -65% -65%;
    opacity: 0;
  }
}

.cr-brand-emblem,
.nav-logo-hex,
#site-header .nav-logo-hex,
.auth-brand-emblem {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: logoPulse 4s ease-in-out infinite;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease;
  isolation: isolate;
}

/* Outer delicate purple-cyan hexagonal contour (keeps metallic edges crisp on Light/Lilac theme) */
.cr-brand-emblem::before,
.nav-logo-hex::before,
#site-header .nav-logo-hex::before,
.auth-brand-emblem::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92) 0%, rgba(6, 182, 212, 0.85) 50%, rgba(168, 85, 247, 0.92) 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

body[data-theme="dark"] .cr-brand-emblem::before,
body[data-theme="dark"] .nav-logo-hex::before,
body[data-theme="dark"] #site-header .nav-logo-hex::before,
body[data-theme="dark"] .auth-brand-emblem::before {
  opacity: 0.72;
}

/* Hexagonal clipped emblem image */
.cr-brand-emblem img,
.nav-logo-hex img,
#site-header .nav-logo,
.nav-logo,
.auth-brand-emblem img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center !important;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  transform: scale(1.04);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s ease;
  display: block;
  animation: none !important;
}

/* Periodic 6s diagonal metallic shimmer across the hexagon */
.cr-brand-emblem::after,
.nav-logo-hex::after,
#site-header .nav-logo-hex::after,
.auth-brand-emblem::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0) 41%,
    rgba(255, 255, 255, 0.42) 48%,
    rgba(6, 182, 212, 0.28) 52%,
    rgba(255, 255, 255, 0) 59%,
    transparent 70%
  );
  background-size: 260% 260%;
  background-position: 170% 170%;
  mix-blend-mode: screen;
  animation: logoShimmer 6s ease-in-out infinite;
}

/* Brand text gradient & hover interaction */
#site-header .nav-brand .nav-brand-text,
.cr-brand .cr-brand-title,
.cr-footer-brand strong {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  color: var(--cr-ink);
  transition: color 0.28s ease, text-shadow 0.28s ease;
}

#site-header .nav-brand .nav-brand-text span,
#site-header .nav-brand > span:not(.nav-logo-hex),
.cr-brand .cr-brand-title span,
.cr-footer-brand strong span {
  background: linear-gradient(90deg, #7C3AED 0%, #9333EA 45%, #06B6D4 100%);
  background-size: 200% auto;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cr-royal);
  text-shadow: none;
  transition: background-position 0.45s ease, filter 0.3s ease;
}

body[data-theme="dark"] #site-header .nav-brand .nav-brand-text span,
body[data-theme="dark"] #site-header .nav-brand > span:not(.nav-logo-hex),
body[data-theme="dark"] .cr-brand .cr-brand-title span,
body[data-theme="dark"] .cr-footer-brand strong span {
  background: linear-gradient(90deg, #A78BFA 0%, #C084FC 45%, #22D3EE 100%);
  background-size: 200% auto;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#site-header .nav-brand:hover .nav-logo-hex,
.nav-brand:hover .nav-logo-hex,
.cr-brand:hover .cr-brand-emblem,
.cr-footer-brand:hover .cr-brand-emblem,
.auth-brand-badge:hover .auth-brand-emblem {
  transform: scale(1.07);
  filter:
    brightness(1.15)
    drop-shadow(0 0 8px rgba(139, 92, 246, 0.72))
    drop-shadow(0 0 15px rgba(6, 182, 212, 0.52));
}

#site-header .nav-brand:hover .nav-logo,
.nav-brand:hover .nav-logo,
.cr-brand:hover .cr-brand-emblem img,
.cr-footer-brand:hover .cr-brand-emblem img {
  transform: scale(1.08);
  filter: brightness(1.12);
}

#site-header .nav-brand:hover .nav-brand-text span,
#site-header .nav-brand:hover > span:not(.nav-logo-hex),
.cr-brand:hover .cr-brand-title span,
.cr-footer-brand:hover strong span {
  background-position: 100% 50%;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.38));
}

#site-header .nav-links {
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: flex-start;
  margin: 0 auto;
  background: var(--cr-surface-subtle);
  border: 1px solid var(--cr-border-light);
  border-radius: var(--cr-radius-pill);
  padding: 4px 6px;
  gap: 3px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#site-header .nav-links > li {
  flex-shrink: 0;
  white-space: nowrap;
}

#site-header .nav-links > li > a,
#site-header .nav-links > a,
#site-header .nav-drop-btn {
  color: var(--cr-ink-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.38rem 0.68rem;
  gap: 0.34rem;
  border-radius: var(--cr-radius-pill);
  white-space: nowrap;
  transition: all 0.18s ease;
}

#site-header .nav-links > li > a:hover,
#site-header .nav-links > a:hover,
#site-header .nav-drop-btn:hover {
  color: var(--cr-royal);
  background: rgba(124, 58, 237, 0.08);
}

#site-header .nav-links > li > a.active,
#site-header .nav-links > a.active,
#site-header .nav-drop.is-active > .nav-drop-btn {
  background: var(--cr-royal-btn);
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.28);
}

#site-header .nav-end {
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Navbar Dropdown Menu */
#site-header .nav-drop-menu {
  background: var(--cr-surface-solid);
  border: 1px solid var(--cr-border-light);
  border-radius: 18px;
  box-shadow: var(--cr-shadow-card-hover);
  backdrop-filter: blur(20px);
  padding: 8px;
  z-index: 110;
}

#site-header .nav-drop-menu a {
  color: var(--cr-ink-secondary);
  border-radius: 12px;
  font-weight: 600;
}

#site-header .nav-drop-menu a:hover,
#site-header .nav-drop-menu a.active {
  background: var(--cr-lilac-soft);
  color: var(--cr-royal);
}

/* Navbar RC Wallet Chip */
#site-header .user-rc-badge {
  background: var(--cr-surface-subtle);
  border: 1px solid var(--cr-border-light);
  color: var(--cr-ink);
  box-shadow: var(--cr-shadow-xs);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.36rem 0.76rem;
  white-space: nowrap;
  flex-shrink: 0;
}

#site-header .user-rc-badge:hover {
  border-color: var(--cr-royal-hover);
  background: var(--cr-lilac-soft);
}

/* Navbar Notification Bell */
#site-header .notif-bell {
  width: 38px;
  height: 38px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border-light);
  color: var(--cr-ink-secondary);
  box-shadow: var(--cr-shadow-xs);
  flex-shrink: 0;
}

#site-header .notif-bell:hover {
  border-color: var(--cr-royal-hover);
  background: var(--cr-lilac-soft);
  color: var(--cr-royal);
}

#site-header .notif-badge {
  outline-color: var(--cr-surface-solid);
}

#site-header .notif-panel {
  background: var(--cr-surface-solid);
  border: 1px solid var(--cr-border-light);
  box-shadow: var(--cr-shadow-card-hover);
  color: var(--cr-ink);
}

#site-header .notif-panel-head {
  color: var(--cr-ink);
  border-bottom-color: var(--cr-border-light);
}

#site-header .notif-item {
  border-bottom-color: var(--cr-border-light);
}

#site-header .notif-item:hover {
  background: var(--cr-lilac-soft);
}

#site-header .notif-item-title {
  color: var(--cr-ink);
}

#site-header .notif-item-icon {
  color: var(--cr-royal);
}

/* Navbar CTA ("Hemen Katıl" / "Admin" High-Contrast Button) */
#site-header .nav-cta {
  background: var(--cr-midnight) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--cr-midnight) !important;
  border-radius: var(--cr-radius-pill);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.44rem 0.92rem;
  box-shadow: var(--cr-shadow-midnight-btn);
  white-space: nowrap;
  flex-shrink: 0;
}

#site-header .nav-cta:hover {
  transform: translateY(-2px);
  opacity: 0.94;
}

body[data-theme="dark"] #site-header .nav-cta {
  background: #F8FAFC !important;
  color: #09090B !important;
  border-color: #F8FAFC !important;
}

@media (min-width: 1181px) and (max-width: 1400px) {
  #site-header .nav-brand {
    margin-right: 14px;
  }
  #site-header .nav-links > li > a,
  #site-header .nav-links > a,
  #site-header .nav-drop-btn {
    font-size: 0.78rem;
    padding: 0.36rem 0.56rem;
    gap: 0.25rem;
  }
  #site-header .nav-end {
    margin-left: 10px;
    gap: 0.38rem;
  }
}

@media (max-width: 1180px) {
  #site-header .nav {
    width: calc(100% - 24px);
    border-radius: 24px;
  }
  #site-header .nav-brand {
    margin-right: 0;
  }
  #site-header .nav-links {
    background: var(--cr-surface-solid);
    border: 1px solid var(--cr-border-light);
    border-radius: 20px;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
    padding: 12px;
    box-shadow: var(--cr-shadow-card-hover);
  }
}

/* ==========================================================================
   COMMON CARDS, BUTTONS, INPUTS, TABS, TABLES & MODALS (SUB-PAGES)
   ========================================================================== */

/* Cards & Glass Containers */
.card,
.stat,
.glass-neon,
.panel.active,
.rw-stat,
.rw-chest,
.loan-card,
.transfer-stat,
.lb-row,
.bagis-recent li,
.profile-badge-item,
.badge-guide-card,
.badge-admin-item,
.role-row,
.perm-group,
.rbac-matrix-hero,
.games-live {
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-border-light) !important;
  border-radius: var(--cr-radius-md);
  color: var(--cr-ink);
  box-shadow: var(--cr-shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.25s ease;
}

.lb-row.is-1 {
  border-color: rgba(250, 204, 21, 0.85) !important;
  box-shadow: 0 12px 30px -10px rgba(250, 204, 21, 0.35);
}
.lb-row.is-1 .lb-rank { color: #D97706; }
body[data-theme="dark"] .lb-row.is-1 .lb-rank { color: #FACC15; }

.lb-row.is-2 {
  border-color: rgba(148, 163, 184, 0.75) !important;
}
.lb-row.is-2 .lb-rank { color: #475569; }
body[data-theme="dark"] .lb-row.is-2 .lb-rank { color: #E2E8F0; }

.lb-row.is-3 {
  border-color: rgba(217, 119, 6, 0.75) !important;
}
.lb-row.is-3 .lb-rank { color: #B45309; }
body[data-theme="dark"] .lb-row.is-3 .lb-rank { color: #FDBA74; }

/* Primary & Ghost Buttons */
.btn {
  border-radius: var(--cr-radius-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cr-royal-btn) 0%, var(--cr-royal-vivid) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  box-shadow: var(--cr-shadow-royal-btn);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -8px rgba(91, 33, 182, 0.52);
}

.btn-ghost {
  background: var(--cr-surface) !important;
  color: var(--cr-ink) !important;
  border: 1px solid var(--cr-border-light) !important;
  box-shadow: var(--cr-shadow-xs);
}

.btn-ghost:hover {
  border-color: var(--cr-royal-hover) !important;
  background: var(--cr-lilac-soft) !important;
  color: var(--cr-royal) !important;
  transform: translateY(-1px);
}

/* Forms & Clean Input Fields */
.form label,
.um-form label,
.admin-loan-toolbar label,
.dc-id-label {
  color: var(--cr-ink-secondary) !important;
  font-weight: 600;
}

.form textarea,
.form select,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
.cmd-row input,
.search-row input,
.search-row select,
.user-pick-q,
.table select,
.admin-loan-toolbar select,
.admin-loan-toolbar input {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  color: var(--cr-ink) !important;
  border-radius: var(--cr-radius-sm) !important;
  padding: 0.72rem 0.95rem;
  font-family: var(--font-sans);
  box-shadow: var(--cr-shadow-xs);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form textarea:focus,
.form select:focus,
.form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus,
.cmd-row input:focus,
.search-row input:focus,
.search-row select:focus,
.user-pick-q:focus {
  background: var(--cr-surface-solid) !important;
  border-color: var(--cr-royal-hover) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
  outline: none;
}

/* Auth Screens (/giris, /kayit, /sifremi-unuttum, /sifre-yenile, /dogrula) */
.auth-card {
  border-radius: var(--cr-radius-lg) !important;
  padding: 0 !important;
  background: var(--cr-surface) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  box-shadow: var(--cr-shadow-card-hover) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-card::before,
.auth-card::after {
  display: none !important;
}

.auth-card-inner {
  background: transparent !important;
  border-radius: var(--cr-radius-lg) !important;
  padding: 32px 28px !important;
  color: var(--cr-ink);
}

.auth-head {
  text-align: center;
  margin-bottom: 0.45rem;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border-radius: var(--cr-radius-pill);
  background: var(--cr-lilac-soft);
  border: 1px solid var(--cr-border-light);
  margin-bottom: 12px;
}

.auth-brand-emblem {
  width: 30px;
  height: 30px;
}

.auth-kicker-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-royal);
}

.auth-label-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-inline-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cr-royal) !important;
  text-decoration: none;
}

.auth-inline-link:hover {
  text-decoration: underline;
}

.auth-head h1 {
  color: var(--cr-ink);
  font-family: var(--font-display);
  font-weight: 800;
}

.auth-head .lead {
  color: var(--cr-ink-secondary);
}

.auth-page .auth-card .btn-oauth {
  background: var(--cr-surface-subtle) !important;
  color: var(--cr-ink) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  border-radius: var(--cr-radius-sm) !important;
  font-weight: 700;
}

.auth-page .auth-card .btn-oauth:hover {
  background: var(--cr-lilac-soft) !important;
  border-color: var(--cr-royal-hover) !important;
  color: var(--cr-royal) !important;
}

.auth-page .auth-card .oauth-or {
  color: var(--cr-ink-muted) !important;
}

.auth-page .auth-card .oauth-or::before,
.auth-page .auth-card .oauth-or::after {
  background: linear-gradient(90deg, transparent, var(--cr-border-light), transparent) !important;
  box-shadow: none !important;
}

.auth-page .auth-card .check a,
.auth-page .auth-card .auth-foot a {
  color: var(--cr-royal) !important;
  font-weight: 700;
}

/* Pills, Tabs & Badges */
.pill,
.pill-filter,
.rules-tab,
.admin-nav-group,
.gender-opt {
  background: var(--cr-surface-subtle) !important;
  border: 1px solid var(--cr-border-light) !important;
  color: var(--cr-ink-secondary) !important;
  border-radius: var(--cr-radius-pill);
}

.pill.ok,
.pill-filter.is-active,
.rules-tab.is-on,
.admin-nav-group.is-on,
.tab.active {
  background: var(--cr-lilac-soft) !important;
  border-color: var(--cr-royal-hover) !important;
  color: var(--cr-royal) !important;
  font-weight: 700;
}

.tab {
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-border-light) !important;
  color: var(--cr-ink-secondary) !important;
  border-radius: var(--cr-radius-sm);
}

.tabs-main .tab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.tabs-main .tab.active {
  color: var(--cr-royal) !important;
}

/* Modals & Popups (Shop, Case Roulette, Alerts, Kurallar, Admin) */
.modal-card,
.shop-toast-card,
.case-modal-panel,
.cr-screen-alert-card,
.rw-reveal-card,
.case-reveal-card,
.user-pick-list,
.badge-search-suggest {
  background: var(--cr-surface-solid) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  border-radius: var(--cr-radius-lg) !important;
  color: var(--cr-ink) !important;
  box-shadow: var(--cr-shadow-card-hover) !important;
}

.shop-toast-x,
.case-modal-x {
  background: var(--cr-surface-subtle) !important;
  color: var(--cr-ink) !important;
  border: 1px solid var(--cr-border-light) !important;
}

/* Shop Cards & Inventory */
.shop-balance,
.inv-balance {
  color: var(--cr-royal) !important;
  font-weight: 700;
}

body[data-theme="light"] .shop-card {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--shop-accent, #7C3AED) 10%, #FFFFFF), #FFFFFF 85%) !important;
  border-color: color-mix(in srgb, var(--shop-accent, #7C3AED) 38%, #DDD6FE) !important;
  box-shadow: var(--cr-shadow-card) !important;
  color: var(--cr-ink);
}

body[data-theme="light"] .shop-card .shop-price {
  color: var(--cr-royal-vivid);
}

body[data-theme="light"] .inv-card {
  background: #FFFFFF !important;
  border-color: #DDD6FE !important;
  color: var(--cr-ink) !important;
  box-shadow: var(--cr-shadow-card);
}

/* Games Hub (/oyunlar) Light Mode Readability */
body[data-theme="light"] .games-card {
  color: #1E293B;
  background:
    radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.12) 0%, #FFFFFF 72%),
    #FFFFFF !important;
  border: 1.5px solid #DDD6FE !important;
  box-shadow: var(--cr-shadow-card) !important;
}

body[data-theme="light"] .games-card > p {
  color: #475569;
}

body[data-theme="light"] .games-guide-btn {
  background: #F5F3FF;
  color: #5B21B6;
  border-color: #DDD6FE;
}

/* Roadmap (/yol-haritasi) Light Mode Readability */
body[data-theme="light"] .roadmap-page h1 {
  background: linear-gradient(110deg, #1E293B 0%, #5B21B6 38%, #7C3AED 72%, #1E293B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[data-theme="light"] .roadmap-page .kicker,
body[data-theme="light"] .roadmap-updated {
  color: #5B21B6;
}

body[data-theme="light"] .roadmap-col::after {
  background:
    radial-gradient(ellipse 90% 46% at 12% 0%, color-mix(in srgb, var(--rm-a) 16%, transparent), transparent 58%),
    #FFFFFF;
}

body[data-theme="light"] .roadmap-col h2 {
  color: #1E293B;
}

body[data-theme="light"] .roadmap-col-list li {
  background: #FAF8FF;
  border-color: #DDD6FE;
  color: #1E293B;
}

/* Footer */
.footer {
  background: var(--cr-surface) !important;
  border-top: 1px solid var(--cr-border-light) !important;
  color: var(--cr-ink-secondary) !important;
}

/* ==========================================================================
   GAME LOBBIES (/uno, /okey, /ishb, /dama) & UTILITY PAGES (/404, /bakim)
   ========================================================================== */
body[data-theme="light"]:not(.uno-seated) .uno-ambient,
body[data-theme="light"]:not(.okey-seated) .okey-ambient,
body[data-theme="light"] .ishb-ambient {
  background: transparent !important;
  opacity: 0.32;
}

body[data-theme="dark"] .uno-ambient,
body[data-theme="dark"] .okey-ambient,
body[data-theme="dark"] .ishb-ambient {
  background: transparent !important;
  opacity: 0.65;
}

.uno-panel,
.okey-panel,
.ishb-panel,
.ishb-showcase,
.ishb-host-cta,
.uno-player-card,
.okey-player-card,
.glass-panel {
  background: var(--cr-surface) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  border-radius: var(--cr-radius-md) !important;
  color: var(--cr-ink) !important;
  box-shadow: var(--cr-shadow-card) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#uno-bet,
#uno-turn-duration,
#okey-bet,
#okey-turn-duration,
.ishb-panel input,
.ishb-panel select {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  color: var(--cr-ink) !important;
  border-radius: var(--cr-radius-sm) !important;
}

body[data-theme="light"] .uno-rule-switch,
body[data-theme="light"] .ishb-rules,
body[data-theme="light"] .ishb-cat-row span,
body[data-theme="light"] .ishb-score-legend span {
  color: var(--cr-ink) !important;
}

body[data-theme="light"] .ishb-cat-row span,
body[data-theme="light"] .ishb-score-legend span,
body[data-theme="light"] .uno-stack-switch {
  background: var(--cr-surface-subtle) !important;
  border-color: var(--cr-border-light) !important;
  color: var(--cr-ink) !important;
}

body[data-theme="light"] .ishb-rules strong {
  color: var(--cr-royal) !important;
}

body[data-theme="light"] .uno-folder-tab,
body[data-theme="light"] .okey-folder-tab {
  background: var(--cr-surface-subtle) !important;
  color: var(--cr-ink-secondary) !important;
  border-color: var(--cr-border-light) !important;
}

body[data-theme="light"] .uno-folder-tab.is-active,
body[data-theme="light"] .okey-folder-tab.is-active {
  background: var(--cr-royal-btn) !important;
  color: #FFFFFF !important;
  border-color: var(--cr-royal-btn) !important;
  box-shadow: var(--cr-shadow-royal-btn) !important;
}

/* Dama Top Navbar & Panels */
body[data-theme="light"] .top-navbar.glass-panel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #DDD6FE !important;
}

body[data-theme="light"] .top-navbar .nav-btn {
  background: #F5F3FF !important;
  color: #1E293B !important;
  border-color: #DDD6FE !important;
}

body[data-theme="light"] .top-navbar .nav-btn:hover {
  background: #EDE9FE !important;
  color: #5B21B6 !important;
}

/* 404, Bakim, Staging Lock */
body.lost-body,
body.staging-lock {
  background: var(--page-bg) !important;
  color: var(--cr-ink) !important;
}

.staging-lock-card,
.bakim-card {
  background: var(--cr-surface) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  color: var(--cr-ink) !important;
  box-shadow: var(--cr-shadow-card-hover) !important;
}

body[data-theme="light"] .staging-lock-card h1,
body[data-theme="light"] .bakim-card h1 {
  color: var(--cr-ink) !important;
}

body[data-theme="light"] .staging-lock-card p,
body[data-theme="light"] .bakim-card p {
  color: var(--cr-ink-secondary) !important;
}

/* ==========================================================================
   ADMIN PANEL & MASTER CONTROL PLANE (.admin-shell)
   ========================================================================== */
body.admin-shell {
  --max: 1680px !important;
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
}

body.admin-shell main.block {
  padding-top: 1.5rem !important;
  padding-bottom: 3.5rem !important;
}

body.admin-shell main.block > .container,
body.admin-shell > .container,
body.admin-shell .footer > .container {
  width: min(1680px, 94vw) !important;
  max-width: 1680px !important;
}

.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.35rem;
  padding: 1.35rem 1.65rem;
  background: var(--cr-surface);
  border: 1.5px solid var(--cr-border-light);
  border-radius: var(--cr-radius-md);
  box-shadow: var(--cr-shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-page-head .section-kicker {
  margin: 0 0 0.25rem !important;
}

.admin-page-head h1 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--cr-ink) !important;
}

.admin-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--cr-radius-full);
  background: var(--cr-surface-subtle);
  border: 1px solid var(--cr-border-light);
  color: var(--cr-royal);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Unified Control Bar for Groups & Sub-Tabs */
.admin-nav {
  background: var(--cr-surface);
  border: 1.5px solid var(--cr-border-light);
  border-radius: var(--cr-radius-md);
  padding: 1rem 1.25rem 0.45rem;
  margin-bottom: 1.65rem;
  box-shadow: var(--cr-shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-nav-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.85rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--cr-border-subtle);
}

.admin-nav-group {
  padding: 0.52rem 1.15rem !important;
  border-radius: var(--cr-radius-full) !important;
  border: 1.5px solid var(--cr-border-light) !important;
  background: var(--cr-surface-subtle) !important;
  color: var(--cr-ink-secondary) !important;
  font-family: var(--font-display) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.18s ease !important;
}

.admin-nav-group:hover {
  color: var(--cr-ink) !important;
  border-color: var(--cr-purple-soft) !important;
}

.admin-nav-group.is-on {
  background: var(--cr-royal-btn) !important;
  color: #FFFFFF !important;
  border-color: var(--cr-royal-btn) !important;
  box-shadow: var(--cr-shadow-royal-btn) !important;
}

.admin-shell .tabs-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.admin-shell .tabs-main .tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem !important;
  margin-bottom: 0.4rem !important;
  border-radius: 11px !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  background: transparent !important;
  color: var(--cr-ink-secondary) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}

.admin-shell .tabs-main .tab:hover {
  color: var(--cr-ink) !important;
  background: var(--cr-surface-subtle) !important;
}

.admin-shell .tabs-main .tab.active {
  color: var(--cr-royal) !important;
  background: var(--cr-royal-soft) !important;
  border-color: var(--cr-border-light) !important;
  font-weight: 700 !important;
}

/* Section Labels & Subtitles */
.admin-section-label {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--cr-royal) !important;
  margin: 0 0 0.75rem !important;
}

.admin-panel-title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--cr-ink) !important;
  margin: 1.5rem 0 0.75rem !important;
}

/* Overview 2-Column Grid for Maintenance & Donation Goal Cards */
.admin-overview-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.5rem;
}

.admin-overview-cards > .card {
  margin-top: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 960px) {
  .admin-overview-cards {
    grid-template-columns: 1fr;
  }
}

/* Table Card Wrappers & Table Readability */
.admin-table-card {
  background: var(--cr-surface);
  border: 1.5px solid var(--cr-border-light);
  border-radius: var(--cr-radius-md);
  box-shadow: var(--cr-shadow-card);
  padding: 0.35rem 0.75rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-shell .table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-shell .table th {
  text-align: left;
  padding: 0.85rem 0.9rem !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--cr-ink-muted) !important;
  border-bottom: 1.5px solid var(--cr-border-light) !important;
  white-space: nowrap;
}

.admin-shell .table td {
  padding: 0.8rem 0.9rem !important;
  color: var(--cr-ink) !important;
  border-bottom: 1px solid var(--cr-border-subtle) !important;
  vertical-align: middle;
}

.admin-shell .table tbody tr:last-child td {
  border-bottom: none !important;
}

.admin-shell .table tbody tr:hover td {
  background: var(--cr-surface-subtle);
}

.admin-shell .role-cell {
  display: inline-flex;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.admin-shell .role-select {
  padding: 0.36rem 0.65rem !important;
  font-size: 0.8rem !important;
  min-width: 7.5rem;
}

.admin-shell .table td.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.admin-shell .table td.row-actions .btn {
  padding: 0.4rem 0.72rem !important;
  font-size: 0.78rem !important;
  gap: 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 1280px) {
  .admin-shell .table td.row-actions {
    flex-wrap: nowrap;
  }
}

/* Clean Toggle Switch (.switch-ui) & Form Controls */
.switch-ui {
  background: var(--cr-border-light) !important;
  border: 1.5px solid var(--cr-border-accent) !important;
}

.switch-ui::after {
  background: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}

.switch input:checked + .switch-ui {
  background: var(--cr-royal-btn) !important;
  border-color: var(--cr-royal-btn) !important;
}

.switch input:checked + .switch-ui::after {
  background: #FFFFFF !important;
}

body[data-theme="light"] input[type="checkbox"],
body[data-theme="light"] input[type="radio"] {
  accent-color: #6D28D9;
  background-color: #FFFFFF !important;
  border-color: #C4B5FD !important;
}

body[data-theme="light"] input[type="range"] {
  accent-color: #6D28D9;
  background: transparent !important;
}

/* Admin Sub-Components (Permissions, User Picker, Broadcast, Badges) */
.perm-server-list,
.user-pick-dropdown,
.broadcast-hub .card,
.badge-admin-item {
  background: var(--cr-surface) !important;
  border-color: var(--cr-border-light) !important;
  color: var(--cr-ink) !important;
}

.user-pick-item {
  color: var(--cr-ink) !important;
}

.user-pick-item:hover,
.user-pick-item.is-active {
  background: var(--cr-surface-subtle) !important;
}

.user-pick-chip {
  background: var(--cr-royal-soft) !important;
  border: 1px solid var(--cr-border-light) !important;
  color: var(--cr-royal) !important;
}

/* ==========================================================================
   STEAM POINTS SHOP GRADE ANIMATED AVATAR FRAMES
   Shared across /profil, Top Navbar (#site-header), and Game Arenas
   (UNO, Okey, İsim Şehir, Türk Daması)
   Classes:
     .frame-vortex  (.avatar-frame-neon)
     .frame-hologram (.avatar-frame-hologram)
     .frame-pulse   (.avatar-frame-pulse)
     .frame-glitch  (.avatar-frame-glitch)
     .frame-crown   (.avatar-frame-crown)
     .frame-void    (.avatar-frame-void)
   ========================================================================== */
@property --cr-frame-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.has-avatar-frame,
.frame-vortex,
.frame-hologram,
.frame-pulse,
.frame-glitch,
.frame-crown,
.frame-void {
  --cr-frame-outset: -6px;
  --cr-frame-thick: 3.5px;
  --cr-frame-radius: 14px;
  --cr-inner-radius: 10px;
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--cr-inner-radius) !important;
}

.has-avatar-frame::before,
.has-avatar-frame::after,
.frame-vortex::before,
.frame-vortex::after,
.frame-hologram::before,
.frame-hologram::after,
.frame-pulse::before,
.frame-pulse::after,
.frame-glitch::before,
.frame-glitch::after,
.frame-crown::before,
.frame-crown::after,
.frame-void::before,
.frame-void::after {
  content: "";
  position: absolute;
  inset: var(--cr-frame-outset);
  border-radius: var(--cr-frame-radius);
  pointer-events: none !important;
  box-sizing: border-box;
}

.has-avatar-frame::before,
.frame-vortex::before,
.frame-hologram::before,
.frame-pulse::before,
.frame-glitch::before,
.frame-crown::before,
.frame-void::before {
  z-index: 3;
  padding: var(--cr-frame-thick);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.has-avatar-frame::after,
.frame-vortex::after,
.frame-hologram::after,
.frame-pulse::after,
.frame-glitch::after,
.frame-crown::after,
.frame-void::after {
  z-index: 4;
}

/* Profile Hero Main Avatar (#btn-avatar) */
.profile-avatar.has-avatar-frame {
  --cr-frame-outset: -6px;
  --cr-frame-thick: 4px;
  --cr-frame-radius: 16px;
  --cr-inner-radius: 12px;
  width: 96px !important;
  height: 96px !important;
  padding: 0 !important;
  margin-right: 4px;
}

.profile-avatar.has-avatar-frame #profile-avatar-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  overflow: hidden !important;
  display: grid;
  place-items: center;
  border-radius: var(--cr-inner-radius);
  background: var(--cr-surface-subtle, #151326);
}

.profile-avatar.has-avatar-frame #profile-avatar-inner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--cr-inner-radius);
  display: block;
}

.profile-avatar .profile-avatar-edit,
.profile-avatar.has-avatar-frame .profile-avatar-edit {
  position: absolute;
  inset: auto 2px 2px 2px !important;
  z-index: 6 !important;
  border-radius: 0 0 10px 10px !important;
  pointer-events: auto;
}

/* Top Navbar Small Avatar (.nav-avatar-wrap) */
.nav-avatar-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
}

.nav-avatar-wrap.has-avatar-frame {
  --cr-frame-outset: -3.5px;
  --cr-frame-thick: 2.5px;
  --cr-frame-radius: 10px;
  --cr-inner-radius: 7px;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin-inline: 2px;
}

.nav-avatar-wrap .nav-avatar,
.nav-avatar-wrap.has-avatar-frame .nav-avatar {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  border: 0 !important;
  object-fit: cover !important;
  border-radius: var(--cr-inner-radius, 7px) !important;
  clip-path: none !important;
}

/* Game Table & Lobby Avatars (UNO, Okey, İsim Şehir, Türk Daması) */
.uno-avatar.has-avatar-frame,
.okey-avatar.has-avatar-frame,
#uno-player-av.has-avatar-frame,
#okey-player-av.has-avatar-frame,
.ishb-vote-avatar.has-avatar-frame,
.player-avatar.has-avatar-frame {
  --cr-frame-outset: -4.5px;
  --cr-frame-thick: 3px;
  --cr-frame-radius: 12px;
  --cr-inner-radius: 9px;
}

.uno-avatar.has-avatar-frame > img,
.okey-avatar.has-avatar-frame > img,
#uno-player-av.has-avatar-frame > img,
#okey-player-av.has-avatar-frame > img,
.ishb-vote-avatar.has-avatar-frame > img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--cr-inner-radius) !important;
}

/* Frame Picker Grid & Cards (Zero Overflow) */
.avatar-frame-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.9rem;
  align-items: stretch;
}

.avatar-frame-chip {
  appearance: none;
  position: relative;
  overflow: hidden !important;
  box-sizing: border-box;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  min-height: 108px;
  padding: 15px 6px 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  border: 1.5px solid var(--cr-border-light);
  background: var(--cr-surface-subtle);
  color: var(--cr-ink);
  border-radius: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.avatar-frame-chip:hover {
  transform: translateY(-2px);
  border-color: var(--cr-royal-hover);
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.35);
}

.avatar-frame-chip.is-on {
  border-color: #8b5cf6 !important;
  background: rgba(124, 58, 237, 0.14);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 10px 24px -8px rgba(124, 58, 237, 0.45);
}

body[data-theme="light"] .avatar-frame-chip.is-on {
  background: #ede9fe;
  border-color: #5b21b6 !important;
}

.avatar-frame-preview {
  --cr-frame-outset: -4.5px;
  --cr-frame-thick: 3px;
  --cr-frame-radius: 11px;
  --cr-inner-radius: 8px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 auto 4px;
  position: relative !important;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.avatar-frame-preview img,
.avatar-frame-preview .avatar-frame-fallback,
.avatar-frame-preview:not(.has-avatar-frame) img,
.avatar-frame-preview:not(.has-avatar-frame) .avatar-frame-fallback,
.avatar-frame-preview.has-avatar-frame img,
.avatar-frame-preview.has-avatar-frame .avatar-frame-fallback {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  z-index: 1;
  border: 0 !important;
  display: block;
}

.avatar-frame-fallback {
  display: grid !important;
  place-items: center;
  background: #131124;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 800;
}

.avatar-frame-chip-label {
  display: block;
  width: 100%;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cr-ink);
  margin-top: 2px;
}

.avatar-frame-chip-sub {
  display: block;
  width: 100%;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--cr-ink-muted);
}

.avatar-frame-chip.is-on .avatar-frame-chip-sub {
  color: #a78bfa;
  font-weight: 700;
}

body[data-theme="light"] .avatar-frame-chip.is-on .avatar-frame-chip-sub {
  color: #5b21b6;
}

/* 1. DÖNEN HALKA — NEON VORTEX (.frame-vortex / .avatar-frame-neon) */
.frame-vortex::before,
.avatar-frame-neon::before,
.avatar-frame-vortex::before {
  background: conic-gradient(
    from var(--cr-frame-angle),
    #06b6d4 0deg,
    #3b82f6 55deg,
    #8b5cf6 120deg,
    #ec4899 180deg,
    #a855f7 240deg,
    #22d3ee 310deg,
    #06b6d4 360deg
  );
  filter:
    drop-shadow(0 0 6px rgba(34, 211, 238, 0.75))
    drop-shadow(0 0 12px rgba(139, 92, 246, 0.6));
  animation: cr-vortex-spin 2.6s linear infinite;
}

.frame-vortex::after,
.avatar-frame-neon::after,
.avatar-frame-vortex::after {
  inset: calc(var(--cr-frame-outset) - 2px);
  border-radius: calc(var(--cr-frame-radius) + 2px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M4 22 V8 Q4 4 8 4 H22' stroke='%2367e8f9' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M78 4 H92 Q96 4 96 8 V22' stroke='%23c084fc' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M96 78 V92 Q96 96 92 96 H78' stroke='%2367e8f9' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M22 96 H8 Q4 96 4 92 V78' stroke='%23c084fc' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='94' cy='94' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px #22d3ee);
  animation: cr-vortex-brackets 2.2s ease-in-out infinite alternate;
}

/* 2. HOLOGRAM — CYBER PRISM (.frame-hologram / .avatar-frame-hologram) */
.frame-hologram::before,
.avatar-frame-hologram::before {
  background: linear-gradient(
    135deg,
    #22d3ee 0%,
    #a855f7 22%,
    #f472b6 45%,
    #38bdf8 68%,
    #c084fc 88%,
    #22d3ee 100%
  );
  background-size: 300% 300%;
  filter:
    drop-shadow(0 0 6px rgba(103, 232, 249, 0.72))
    drop-shadow(0 0 11px rgba(244, 114, 182, 0.48));
  animation: cr-prism-wave 3.4s ease-in-out infinite;
}

.frame-hologram::after,
.avatar-frame-hologram::after {
  inset: calc(var(--cr-frame-outset) + 1px);
  border-radius: var(--cr-frame-radius);
  background:
    linear-gradient(
      118deg,
      transparent 20%,
      rgba(255, 255, 255, 0.75) 46%,
      rgba(103, 232, 249, 0.7) 50%,
      rgba(244, 114, 182, 0.6) 54%,
      transparent 78%
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 3px,
      rgba(103, 232, 249, 0.24) 3px 4px
    );
  background-size: 240% 240%, 100% 8px;
  padding: calc(var(--cr-frame-thick) + 1.5px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cr-holo-shimmer 2.6s linear infinite;
}

/* 3. NABIZ — PLASMA PULSE (.frame-pulse / .avatar-frame-pulse) */
.frame-pulse::before,
.avatar-frame-pulse::before {
  background: conic-gradient(
    from var(--cr-frame-angle),
    #e879f9 0deg,
    #7c3aed 90deg,
    #22d3ee 180deg,
    #f472b6 270deg,
    #e879f9 360deg
  );
  filter:
    drop-shadow(0 0 7px rgba(232, 121, 249, 0.85))
    drop-shadow(0 0 14px rgba(124, 58, 237, 0.65));
  animation:
    cr-vortex-spin 4s linear infinite,
    cr-plasma-core 1.7s ease-in-out infinite;
}

.frame-pulse::after,
.avatar-frame-pulse::after {
  inset: calc(var(--cr-frame-outset) - 2px);
  border-radius: calc(var(--cr-frame-radius) + 2px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Crect x='3' y='3' width='94' height='94' rx='14' stroke='%23f0abfc' stroke-width='1.6' stroke-dasharray='12 8'/%3E%3Ccircle cx='6' cy='6' r='4.2' fill='%2322d3ee' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='94' cy='6' r='4.2' fill='%23e879f9' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='94' cy='94' r='4.2' fill='%2322d3ee' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='6' cy='94' r='4.2' fill='%23e879f9' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  filter: drop-shadow(0 0 6px #e879f9);
  animation: cr-plasma-nodes 1.7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* 4. GLITCH — CYBERPUNK FRACTURE (.frame-glitch / .avatar-frame-glitch) */
.frame-glitch::before,
.avatar-frame-glitch::before {
  border-radius: 4px;
  clip-path: polygon(
    11% 0%, 89% 0%,
    100% 11%, 100% 89%,
    89% 100%, 11% 100%,
    0% 89%, 0% 11%
  );
  background: linear-gradient(
    135deg,
    #00f0ff 0%,
    #00f0ff 36%,
    #facc15 50%,
    #ff0055 64%,
    #ff0055 100%
  );
  filter:
    drop-shadow(-2px 0 0 rgba(0, 240, 255, 0.9))
    drop-shadow(2px 0 0 rgba(255, 0, 85, 0.9))
    drop-shadow(0 0 8px rgba(0, 240, 255, 0.55));
  animation: cr-cyber-glitch 1.35s steps(2, end) infinite;
}

.frame-glitch::after,
.avatar-frame-glitch::after {
  inset: calc(var(--cr-frame-outset) - 2px);
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M2 24 L2 11 L11 2 L26 2' stroke='%2300f0ff' stroke-width='3.2'/%3E%3Cpath d='M74 2 L89 2 L98 11 L98 24' stroke='%23ff0055' stroke-width='3.2'/%3E%3Cpath d='M98 76 L98 89 L89 98 L74 98' stroke='%2300f0ff' stroke-width='3.2'/%3E%3Cpath d='M26 98 L11 98 L2 89 L2 76' stroke='%23ff0055' stroke-width='3.2'/%3E%3Crect x='0' y='34' width='7' height='2.5' fill='%23facc15'/%3E%3Crect x='93' y='62' width='7' height='2.5' fill='%2300f0ff'/%3E%3Crect x='64' y='0' width='12' height='2.5' fill='%23ff0055'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  filter: drop-shadow(1px 0 3px #ff0055) drop-shadow(-1px 0 3px #00f0ff);
  animation: cr-cyber-sparks 0.95s steps(3, end) infinite;
}

/* 5. TAÇ — ROYAL SOVEREIGN (.frame-crown / .avatar-frame-crown) */
.frame-crown::before,
.avatar-frame-crown::before {
  background: conic-gradient(
    from var(--cr-frame-angle),
    #fde047 0deg,
    #f59e0b 55deg,
    #7c3aed 110deg,
    #fef08a 180deg,
    #d97706 235deg,
    #6d28d9 295deg,
    #fde047 360deg
  );
  filter:
    drop-shadow(0 0 6px rgba(251, 191, 36, 0.8))
    drop-shadow(0 0 12px rgba(124, 58, 237, 0.55));
  animation: cr-vortex-spin 5.5s linear infinite;
}

.frame-crown::after,
.avatar-frame-crown::after {
  inset: calc(var(--cr-frame-outset) - 18%) calc(var(--cr-frame-outset) - 4%) calc(var(--cr-frame-outset) - 4%) calc(var(--cr-frame-outset) - 4%);
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 132' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fef08a'/%3E%3Cstop offset='50%25' stop-color='%23f59e0b'/%3E%3Cstop offset='100%25' stop-color='%23b45309'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M36 22 L41 8 L51 16 L60 2 L69 16 L79 8 L84 22 Z' fill='url(%23g)' stroke='%23fef9c3' stroke-width='1.5' stroke-linejoin='round'/%3E%3Crect x='35' y='21' width='50' height='3.5' rx='1.5' fill='%23fde047'/%3E%3Ccircle cx='60' cy='14' r='2.3' fill='%23a855f7' stroke='%23ffffff' stroke-width='0.7'/%3E%3Ccircle cx='48' cy='17' r='1.7' fill='%23ec4899'/%3E%3Ccircle cx='72' cy='17' r='1.7' fill='%23ec4899'/%3E%3Cpath d='M7 42 L7 25 L24 25 L15 29 L11 33 Z' fill='url(%23g)' stroke='%23fef08a' stroke-width='1'/%3E%3Cpath d='M113 42 L113 25 L96 25 L105 29 L109 33 Z' fill='url(%23g)' stroke='%23fef08a' stroke-width='1'/%3E%3Cpath d='M7 108 L7 125 L24 125 L15 121 L11 117 Z' fill='url(%23g)' stroke='%23fef08a' stroke-width='1'/%3E%3Cpath d='M113 108 L113 125 L96 125 L105 121 L109 117 Z' fill='url(%23g)' stroke='%23fef08a' stroke-width='1'/%3E%3Ccircle cx='26' cy='12' r='1.5' fill='%23fef08a'/%3E%3Ccircle cx='94' cy='12' r='1.5' fill='%23fef08a'/%3E%3Ccircle cx='4' cy='75' r='1.6' fill='%23fde047'/%3E%3Ccircle cx='116' cy='75' r='1.6' fill='%23fde08a'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.85));
  animation: cr-sovereign-gleam 2.4s ease-in-out infinite alternate;
}

/* 6. VOID — ABYSSAL ECLIPSE (.frame-void / .avatar-frame-void) */
.frame-void::before,
.avatar-frame-void::before {
  background: conic-gradient(
    from var(--cr-frame-angle),
    #090414 0deg,
    #6d28d9 65deg,
    #1e1b4b 125deg,
    #a855f7 185deg,
    #05020a 245deg,
    #c084fc 315deg,
    #090414 360deg
  );
  filter:
    drop-shadow(0 0 7px rgba(124, 58, 237, 0.9))
    drop-shadow(0 0 15px rgba(88, 28, 135, 0.85));
  animation: cr-vortex-spin 3.8s linear infinite reverse;
}

.frame-void::after,
.avatar-frame-void::after {
  inset: calc(var(--cr-frame-outset) - 2px);
  border-radius: calc(var(--cr-frame-radius) + 2px);
  box-shadow: inset 0 0 10px rgba(9, 4, 20, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 1 L52 6 L57 8 L52 10 L50 15 L48 10 L43 8 L48 6 Z' fill='%23e9d5ff'/%3E%3Cpath d='M50 85 L51.5 89 L55.5 90.5 L51.5 92 L50 96 L48.5 92 L44.5 90.5 L48.5 89 Z' fill='%23c084fc'/%3E%3Cpath d='M2 50 L6 48.5 L7.5 44.5 L9 48.5 L13 50 L9 51.5 L7.5 55.5 L6 51.5 Z' fill='%23c084fc'/%3E%3Cpath d='M87 50 L91 48.5 L92.5 44.5 L94 48.5 L98 50 L94 51.5 L92.5 55.5 L91 51.5 Z' fill='%23e9d5ff'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23a855f7'/%3E%3Ccircle cx='88' cy='12' r='1.6' fill='%23f3e8ff'/%3E%3Ccircle cx='88' cy='88' r='2' fill='%23a855f7'/%3E%3Ccircle cx='12' cy='88' r='1.6' fill='%23f3e8ff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  filter: drop-shadow(0 0 6px #a855f7);
  animation: cr-void-stars 2.5s ease-in-out infinite alternate;
}

@keyframes cr-vortex-spin {
  0% { --cr-frame-angle: 0deg; }
  100% { --cr-frame-angle: 360deg; }
}

@keyframes cr-vortex-brackets {
  0% { opacity: 0.72; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1.02); }
}

@keyframes cr-prism-wave {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes cr-holo-shimmer {
  0% { background-position: 200% 0, 0 0; }
  100% { background-position: -40% 0, 0 16px; }
}

@keyframes cr-plasma-core {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(232, 121, 249, 0.75)) drop-shadow(0 0 12px rgba(124, 58, 237, 0.5));
  }
  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.95)) drop-shadow(0 0 18px rgba(232, 121, 249, 0.85));
  }
}

@keyframes cr-plasma-nodes {
  0%, 100% { transform: scale(0.97); opacity: 0.8; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes cr-cyber-glitch {
  0%, 84%, 100% {
    transform: translate(0, 0);
    filter: drop-shadow(-2px 0 0 rgba(0, 240, 255, 0.9)) drop-shadow(2px 0 0 rgba(255, 0, 85, 0.9));
  }
  86% {
    transform: translate(-1.5px, 0.5px);
    filter: drop-shadow(2.5px 0 0 rgba(0, 240, 255, 1)) drop-shadow(-2.5px 0 0 rgba(255, 0, 85, 1));
  }
  92% {
    transform: translate(1.5px, -0.5px);
    filter: drop-shadow(-2.5px 1px 0 rgba(250, 204, 21, 0.95)) drop-shadow(2px -1px 0 rgba(255, 0, 85, 1));
  }
}

@keyframes cr-cyber-sparks {
  0%, 100% { opacity: 0.92; transform: translate(0, 0); }
  33% { opacity: 1; transform: translate(1px, -0.5px); }
  66% { opacity: 0.78; transform: translate(-1px, 0.5px); }
}

@keyframes cr-sovereign-gleam {
  0% {
    transform: translateY(0) scale(0.99);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
  }
  100% {
    transform: translateY(-1px) scale(1.015);
    filter: drop-shadow(0 0 9px rgba(254, 240, 138, 0.98)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.65));
  }
}

@keyframes cr-void-stars {
  0% {
    opacity: 0.72;
    transform: scale(0.97);
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.7));
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
    filter: drop-shadow(0 0 10px rgba(216, 180, 254, 0.95));
  }
}

/* ==========================================================================
   MAINTENANCE PRIVILEGED PREVIEW HUD BANNER
   ========================================================================== */
.cr-maint-hud {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(42rem, calc(100vw - 1.5rem));
  padding: 0.62rem 1.05rem 0.62rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(12, 8, 4, 0.84);
  color: #fff7ed;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  animation: cr-maint-slide 0.4s ease both, cr-maint-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

.cr-maint-hud-led {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 10px #f59e0b;
  animation: cr-maint-led-blink 1.5s infinite;
}

.cr-maint-hud-text {
  line-height: 1.25;
}

html.has-maint-hud body {
  padding-top: 3.4rem;
}

@keyframes cr-maint-slide {
  from { opacity: 0; transform: translate(-50%, -18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes cr-maint-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 28px rgba(245, 158, 11, 0.55), 0 10px 28px rgba(0, 0, 0, 0.35); }
}

@keyframes cr-maint-led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}