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

:root {
   --primary-color: #FFD700;
   --accent-rgb: 255, 215, 0;
   --primary-light: #FFE566;
   --primary-dark: #B8960C;
   --primary-glow: rgba(255, 215, 0, 0.45);
   --secondary-color: #F5A623;
   --secondary-rgb: 245, 166, 35;
   --secondary-light: #FFD080;
   --secondary-glow: rgba(245, 166, 35, 0.40);
   --accent-color: #E040FB;
   --accent-light: #F580FF;
   --accent-glow: rgba(224, 64, 251, 0.40);
   --success: #22C55E;
   --success-glow: rgba(34, 197, 94, 0.35);
   --warning: #F59E0B;
   --warning-glow: rgba(245, 158, 11, 0.35);
   --error: #EF4444;
   --error-glow: rgba(239, 68, 68, 0.35);
   --info: #3B82F6;
   --info-glow: rgba(59, 130, 246, 0.35);
   --bg-deep: #060607;
   --bg-base: #0D0D0F;
   --bg-surface: #111113;
   --bg-elevated: #181820;
   --bg-card: rgba(255, 255, 255, 0.03);
   --bg-card-hover: rgba(255, 255, 255, 0.06);
   --glass-bg: rgba(255, 255, 255, 0.04);
   --glass-border: rgba(255, 215, 0, 0.10);
   --glass-blur: blur(20px);
   --glass-blur-sm: blur(10px);
   --text-primary: #FFFFFF;
   --text-secondary: #BBBBBB;
   --text-gray: #777788;
   --text-muted: #555566;
   --border-color: rgba(255, 255, 255, 0.07);
   --border-bright: rgba(255, 215, 0, 0.35);
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-pill: 999px;
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
   --shadow-glow: 0 0 30px var(--primary-glow);
   --shadow-3d: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
   --transition-fast: 0.15s ease;
   --transition-base: 0.25s ease;
   --transition-slow: 0.45s ease;
   --sidebar-width: 260px;
   --dark-blue: #0D0D0F;
}

/* ═══════════════════════════════════════════
   PAGE LOADER
   ═══════════════════════════════════════════ */
@keyframes loaderSpin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

@keyframes loaderPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 0.6;
   }

   50% {
      transform: scale(1.18);
      opacity: 1;
   }
}

@keyframes loaderBarGrow {
   0% {
      width: 0%;
   }

   60% {
      width: 75%;
   }

   100% {
      width: 100%;
   }
}

@keyframes loaderFadeOut {
   0% {
      opacity: 1;
      visibility: visible;
   }

   100% {
      opacity: 0;
      visibility: hidden;
   }
}

@keyframes goldShine {

   0%,
   100% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }
}

#page-loader {
   position: fixed;
   inset: 0;
   z-index: 99999;
   background: #0D0D0F;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0;
   transition: opacity 0.45s ease, visibility 0.45s ease;
}

#page-loader.hide {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

/* Glow orb behind logo */
.pl-orb {
   position: absolute;
   width: 220px;
   height: 220px;
   border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.18) 0%, transparent 70%);
   animation: loaderPulse 2s ease-in-out infinite;
   pointer-events: none;
}

/* Logo icon */
.pl-logo {
   position: relative;
   z-index: 1;
   font-size: 48px;
  color: var(--primary-color);
  filter: drop-shadow(0 0 18px var(--primary-glow));
   margin-bottom: 14px;
   animation: loaderPulse 2s ease-in-out infinite;
}

.pl-logo .pl-logo-img {
   display: block;
   margin: 0 auto;
   max-height: 52px;
   max-width: 160px;
   width: auto;
   height: auto;
   object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.45));
}

/* App name */
.pl-name {
   position: relative;
   z-index: 1;
   font-family: 'Orbitron', sans-serif;
   font-size: 20px;
   font-weight: 900;
   letter-spacing: 3px;
   text-transform: uppercase;
  background: linear-gradient(90deg, var(--primary-light), var(--primary-color), var(--secondary-color), var(--primary-color), var(--primary-light));
   background-size: 300% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: goldShine 2.5s linear infinite;
   margin-bottom: 6px;
}

/* Subtitle */
.pl-sub {
   position: relative;
   z-index: 1;
   font-size: 11px;
   font-weight: 600;
  color: rgba(var(--accent-rgb), 0.45);
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 36px;
}

/* Spinner ring */
.pl-spinner {
   position: relative;
   z-index: 1;
   width: 52px;
   height: 52px;
   margin-bottom: 28px;
}

.pl-spinner::before,
.pl-spinner::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
}

.pl-spinner::before {
   border: 3px solid rgba(255, 215, 0, 0.10);
}

.pl-spinner::after {
   border: 3px solid transparent;
   border-top-color: #FFD700;
   border-right-color: rgba(255, 215, 0, 0.5);
   animation: loaderSpin 0.85s linear infinite;
   filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

/* Progress bar */
.pl-bar-wrap {
   position: relative;
   z-index: 1;
   width: 160px;
   height: 3px;
   background: rgba(255, 215, 0, 0.10);
   border-radius: 99px;
   overflow: hidden;
}

.pl-bar {
   height: 100%;
   background: linear-gradient(90deg, #FFD700, #F5A623);
   border-radius: 99px;
   box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
   animation: loaderBarGrow 1.6s ease-out forwards;
}



*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   font-size: 16px;
   scroll-behavior: smooth
}

body {
   font-family: 'Inter', system-ui, sans-serif;
   background: var(--bg-base);
   color: var(--text-primary);
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
   background-image: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 110%, rgba(var(--secondary-rgb), 0.05) 0%, transparent 60%);
   background-attachment: fixed
}

::-webkit-scrollbar {
   width: 6px;
   height: 6px
}

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

::-webkit-scrollbar-thumb {
   background: var(--primary-color);
   border-radius: var(--radius-pill)
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   line-height: 1.2;
   color: var(--text-primary)
}

a {
   color: var(--primary-light);
   text-decoration: none;
   transition: color var(--transition-fast)
}

a:hover {
   color: var(--primary-color)
}

img {
   max-width: 100%;
   display: block
}

.gradient-text {
   background: linear-gradient(135deg, var(--primary-light), var(--secondary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.font-orbitron {
   font-family: 'Orbitron', sans-serif
}

/* ADMIN TOPBAR */
.admin-topbar {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 60px;
   background: rgba(13, 13, 15, 0.92);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-bottom: 1px solid var(--glass-border);
   z-index: 1000;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
   gap: 12px
}

.admin-topbar-title {
   font-weight: 700;
   font-size: 16px;
   color: var(--primary-color);
   display: flex;
   align-items: center;
   gap: 8px
}

.hamburger-btn {
   background: rgba(255, 215, 0, 0.08);
   border: 1px solid var(--glass-border);
   color: var(--text-primary);
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: all var(--transition-base)
}

.hamburger-btn:hover {
   background: var(--primary-color);
   border-color: var(--primary-color);
   color: #000;
   box-shadow: var(--shadow-glow)
}

.sidebar-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.70);
   backdrop-filter: blur(4px);
   z-index: 1001;
   opacity: 0;
   transition: opacity var(--transition-base)
}

.sidebar-overlay.show {
   opacity: 1
}

/* SIDEBAR */
.admin-sidebar {
   position: fixed;
   top: 0;
   left: 0;
   width: var(--sidebar-width);
   height: 100vh;
   background: rgba(13, 13, 15, 0.95);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-right: 1px solid rgba(255, 215, 0, 0.12);
   display: flex;
   flex-direction: column;
   z-index: 1002;
   overflow-y: auto;
   overflow-x: hidden;
   transition: transform var(--transition-slow)
}

.admin-sidebar::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 300px;
   background: linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%);
   pointer-events: none
}

.sidebar-brand {
   padding: 28px 24px 20px;
   text-align: center;
   border-bottom: 1px solid var(--border-color);
   position: relative
}

.sidebar-brand::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 24px;
   right: 24px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--primary-color), transparent)
}

.sidebar-brand i {
   font-size: 36px;
   color: var(--primary-color);
   filter: drop-shadow(0 0 12px var(--primary-color));
   margin-bottom: 10px;
   display: block
}

.sidebar-brand h3 {
   font-family: 'Orbitron', sans-serif;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 1px;
   background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.sidebar-brand p {
   font-size: 12px;
   color: var(--text-gray);
   margin-top: 6px
}

.sidebar-nav {
   padding: 16px 12px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 4px
}

/* Admin sidebar nav items — scoped to prevent bleeding into bottom nav */
.admin-sidebar .nav-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden
}

.admin-sidebar .nav-item i {
   font-size: 15px;
   width: 20px;
   text-align: center;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   transition: color var(--transition-base)
}

.admin-sidebar .nav-item span {
   margin-left: auto;
   position: relative;
   z-index: 1
}

.admin-sidebar .nav-item:hover {
   color: var(--primary-color);
   border-color: rgba(255, 215, 0, 0.20);
   background: rgba(255, 215, 0, 0.05);
   transform: translateX(4px)
}

.admin-sidebar .nav-item:hover i {
   color: var(--primary-color);
   filter: drop-shadow(0 0 6px var(--primary-color))
}

.admin-sidebar .nav-item.active {
   color: #000;
   border-color: var(--primary-dark);
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   box-shadow: 0 4px 20px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   font-weight: 700
}

.admin-sidebar .nav-item.active i {
   color: #000;
   filter: none
}

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

/* ADMIN MAIN */
.admin-main {
   margin-left: var(--sidebar-width);
   min-height: 100vh;
   padding: 32px
}

.admin-header {
   margin-bottom: 28px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--border-color)
}

.admin-header h1 {
   font-size: 26px;
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--text-primary)
}

.admin-header h1 i {
   color: var(--primary-color);
   filter: drop-shadow(0 0 8px var(--primary-color))
}

.admin-header p {
   color: var(--text-gray);
   margin-top: 4px;
   font-size: 14px
}

/* GLASS CARD */
.glass-card,
.stat-card,
.data-table,
.admin-login-card {
   background: var(--glass-bg);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   position: relative;
   overflow: hidden
}

.glass-card::before,
.stat-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent)
}

/* STATS GRID */
.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 18px;
   margin-bottom: 28px
}

.stat-card {
   padding: 24px 20px;
   text-align: center;
   transition: all var(--transition-base);
   cursor: default;
   transform-style: preserve-3d;
   perspective: 600px
}

.stat-card:hover {
   transform: translateY(-6px) rotateX(3deg);
   background: var(--bg-card-hover);
   border-color: rgba(255, 215, 0, 0.35);
   box-shadow: var(--shadow-glow), var(--shadow-3d)
}

.stat-card i {
   font-size: 30px;
   margin-bottom: 12px;
   display: block;
   filter: drop-shadow(0 0 8px currentColor)
}

.stat-card h3 {
   font-size: 26px;
   font-weight: 800;
   color: var(--primary-color)
}

.stat-card p {
   font-size: 12px;
   color: var(--text-gray);
   margin-top: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px
}

/* DATA TABLE */
.data-table {
   margin-bottom: 28px;
   overflow: hidden
}

.data-table>div:first-child,
.table-header-row {
   padding: 18px 22px;
   border-bottom: 1px solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px
}

.data-table h3 {
   font-size: 16px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 8px
}

.data-table h3 i {
   color: var(--primary-color)
}

.table-responsive {
   overflow-x: auto
}

table.table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px
}

table.table thead tr {
   background: rgba(255, 215, 0, 0.06);
   border-bottom: 1px solid var(--border-color)
}

table.table th {
   padding: 13px 18px;
   text-align: left;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--primary-color);
   white-space: nowrap
}

table.table td {
   padding: 14px 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   color: var(--text-secondary);
   vertical-align: middle
}

table.table tbody tr {
   transition: background var(--transition-fast)
}

table.table tbody tr:hover {
   background: rgba(255, 215, 0, 0.05)
}

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

/* BUTTONS */
.btn,
.form-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 22px;
   border-radius: var(--radius-md);
   border: none;
   font-size: 14px;
   font-weight: 600;
   font-family: 'Inter', sans-serif;
   cursor: pointer;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
   white-space: nowrap;
   text-decoration: none;
   transform-style: preserve-3d
}

.btn:active {
   transform: scale(0.95) translateY(2px)
}

.btn-primary,
.form-btn {
   background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
   color: #000;
   box-shadow: 0 4px 15px var(--primary-glow), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)
}

.btn-primary:hover,
.form-btn:hover {
   box-shadow: 0 8px 30px var(--primary-glow), 0 4px 8px rgba(0, 0, 0, 0.4);
   transform: translateY(-3px);
   color: #000
}

.btn-secondary {
   background: linear-gradient(135deg, var(--secondary-color), #c97d0a);
   color: #000;
   box-shadow: 0 4px 15px var(--secondary-glow)
}

.btn-secondary:hover {
   box-shadow: 0 8px 30px var(--secondary-glow);
   transform: translateY(-3px);
   color: #000
}

.btn-success {
   background: linear-gradient(135deg, var(--success), #16a34a);
   color: #fff;
   box-shadow: 0 4px 15px var(--success-glow)
}

.btn-success:hover {
   box-shadow: 0 8px 30px var(--success-glow);
   transform: translateY(-3px);
   color: #fff
}

.btn-warning {
   background: linear-gradient(135deg, var(--warning), #d97706);
   color: #fff;
   box-shadow: 0 4px 15px var(--warning-glow)
}

.btn-warning:hover {
   box-shadow: 0 8px 30px var(--warning-glow);
   transform: translateY(-3px);
   color: #fff
}

.btn-danger {
   background: linear-gradient(135deg, var(--error), #dc2626);
   color: #fff;
   box-shadow: 0 4px 15px var(--error-glow)
}

.btn-danger:hover {
   box-shadow: 0 8px 30px var(--error-glow);
   transform: translateY(-3px);
   color: #fff
}

.btn-ghost {
   background: rgba(255, 215, 0, 0.06);
   border: 1px solid rgba(255, 215, 0, 0.20);
   color: var(--primary-color);
   backdrop-filter: var(--glass-blur-sm)
}

.btn-ghost:hover {
   background: rgba(255, 215, 0, 0.12);
   border-color: var(--primary-color);
   box-shadow: 0 0 15px var(--primary-glow)
}

.btn-sm {
   padding: 7px 14px;
   font-size: 12px;
   border-radius: var(--radius-sm)
}

.btn-lg {
   padding: 14px 30px;
   font-size: 16px;
   border-radius: var(--radius-lg)
}

.btn-block {
   width: 100%
}

/* FORMS */
.form-group {
   margin-bottom: 18px
}

.form-label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-secondary);
   margin-bottom: 8px;
   letter-spacing: 0.3px
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: 11px 16px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 215, 0, 0.15);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-size: 14px;
   font-family: 'Inter', sans-serif;
   transition: all var(--transition-base);
   outline: none;
   -webkit-appearance: none;
   appearance: none
}

.form-input::placeholder,
.form-textarea::placeholder {
   color: var(--text-muted)
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   border-color: var(--primary-color);
   background: rgba(255, 215, 0, 0.06);
   box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15)
}

.form-select {
   cursor: pointer
}

.form-select option {
   background: var(--bg-elevated);
   color: var(--text-primary)
}

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

.input-group {
   position: relative
}

.input-group .form-input {
   padding-left: 42px
}

.input-group .input-icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--primary-color);
   font-size: 15px;
   pointer-events: none
}

/* BADGES */
.badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 10px;
   border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase
}

.badge-success {
   background: rgba(34, 197, 94, 0.15);
   color: var(--success);
   border: 1px solid rgba(34, 197, 94, 0.30)
}

.badge-warning {
   background: rgba(245, 158, 11, 0.15);
   color: var(--warning);
   border: 1px solid rgba(245, 158, 11, 0.30)
}

.badge-danger {
   background: rgba(239, 68, 68, 0.15);
   color: var(--error);
   border: 1px solid rgba(239, 68, 68, 0.30)
}

.badge-info {
   background: rgba(59, 130, 246, 0.15);
   color: var(--info);
   border: 1px solid rgba(59, 130, 246, 0.30)
}

.badge-primary {
   background: rgba(255, 215, 0, 0.15);
   color: var(--primary-color);
   border: 1px solid rgba(255, 215, 0, 0.30)
}

.badge-cyan {
   background: rgba(245, 166, 35, 0.15);
   color: var(--secondary-light);
   border: 1px solid rgba(245, 166, 35, 0.30)
}

/* ALERTS */
.alert {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 18px;
   border-radius: var(--radius-md);
   border-left: 3px solid;
   font-size: 14px;
   margin-bottom: 18px
}

.alert i {
   flex-shrink: 0;
   margin-top: 1px
}

.alert-success {
   background: rgba(34, 197, 94, 0.10);
   border-color: var(--success);
   color: #86efac
}

.alert-error {
   background: rgba(239, 68, 68, 0.10);
   border-color: var(--error);
   color: #fca5a5
}

.alert-warning {
   background: rgba(245, 158, 11, 0.10);
   border-color: var(--warning);
   color: #fcd34d
}

.alert-info {
   background: rgba(59, 130, 246, 0.10);
   border-color: var(--info);
   color: #93c5fd
}

/* MODALS */
.modal-overlay,
.modal {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   opacity: 0;
   visibility: hidden;
   transition: all var(--transition-base)
}

.modal-overlay.show,
.modal.show {
   opacity: 1;
   visibility: visible
}

.modal-overlay.show .modal-box,
.modal.show .modal-content {
   transform: translateY(0) scale(1);
   opacity: 1
}

.modal-box,
.modal-content {
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.15);
   border-radius: var(--radius-xl);
   width: 100%;
   max-width: 520px;
   max-height: 90vh;
   overflow-y: auto;
   position: relative;
   transform: translateY(30px) scale(0.97);
   opacity: 0;
   transition: all var(--transition-base);
   box-shadow: var(--shadow-lg), 0 0 60px rgba(255, 215, 0, 0.10);
   padding: 24px
}

.modal-box::before,
.modal-content::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--primary-color), transparent)
}

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

.modal-header h3 {
   font-size: 17px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px
}

.modal-header h3 i,
.modal-content h3 i {
   color: var(--primary-color)
}

.modal-close {
   background: rgba(255, 215, 0, 0.08);
   border: 1px solid rgba(255, 215, 0, 0.15);
   color: var(--text-secondary);
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   transition: all var(--transition-base);
   flex-shrink: 0
}

.modal-close:hover {
   background: var(--error);
   border-color: var(--error);
   color: #fff
}

.modal-body {
   padding: 0
}

.modal-footer {
   padding-top: 16px;
   border-top: 1px solid var(--border-color);
   display: flex;
   gap: 10px;
   justify-content: flex-end;
   flex-wrap: wrap;
   margin-top: 18px
}

/* PAGINATION */
.pagination {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 18px 22px;
   flex-wrap: wrap
}

.page-btn {
   padding: 7px 13px;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(255, 215, 0, 0.15);
   background: var(--glass-bg);
   color: var(--text-secondary);
   font-size: 13px;
   cursor: pointer;
   transition: all var(--transition-fast);
   font-family: 'Inter', sans-serif;
   text-decoration: none;
   display: inline-flex;
   align-items: center
}

.page-btn:hover {
   border-color: var(--primary-color);
   color: var(--primary-color)
}

.page-btn.active {
   background: var(--primary-color);
   border-color: var(--primary-color);
   color: #000;
   font-weight: 700;
   box-shadow: 0 0 12px var(--primary-glow)
}

/* TABS */
.tabs {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid var(--border-color);
   margin-bottom: 20px
}

.tab-btn {
   padding: 10px 18px;
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
   color: var(--text-gray);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-base);
   font-family: 'Inter', sans-serif;
   display: flex;
   align-items: center;
   gap: 7px;
   margin-bottom: -1px
}

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

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

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

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

.switch-slider {
   position: absolute;
   inset: 0;
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.15);
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: all var(--transition-base)
}

.switch-slider::before {
   content: '';
   position: absolute;
   left: 3px;
   top: 2px;
   width: 20px;
   height: 20px;
   background: var(--text-gray);
   border-radius: 50%;
   transition: all var(--transition-base)
}

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

.switch input:checked+.switch-slider::before {
   transform: translateX(22px);
   background: #000;
   box-shadow: 0 0 8px var(--primary-glow)
}

/* RANGE SLIDER */
.range-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 6px;
   background: var(--bg-elevated);
   border-radius: var(--radius-pill);
   outline: none;
   border: 1px solid rgba(255, 215, 0, 0.10)
}

.range-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   cursor: pointer;
   box-shadow: 0 0 12px var(--primary-glow)
}

/* SEARCH BAR */
.search-bar {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 215, 0, 0.04);
   border: 1px solid rgba(255, 215, 0, 0.12);
   border-radius: var(--radius-md);
   padding: 8px 14px;
   transition: all var(--transition-base)
}

.search-bar:focus-within {
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.12)
}

.search-bar i {
   color: var(--primary-color);
   font-size: 14px
}

.search-bar input {
   background: none;
   border: none;
   outline: none;
   color: var(--text-primary);
   font-size: 14px;
   font-family: 'Inter', sans-serif;
   width: 200px
}

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

/* LOGIN PAGE */
.admin-login-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   position: relative
}

.admin-login-page::before {
   content: '';
   position: fixed;
   inset: 0;
   background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 215, 0, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 75% 80%, rgba(245, 166, 35, 0.06) 0%, transparent 60%);
   pointer-events: none
}

.admin-login-page::after {
   content: '';
   position: fixed;
   inset: 0;
   background-image: linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
   background-size: 50px 50px;
   pointer-events: none;
   z-index: 0
}

.admin-login-card {
   width: 100%;
   max-width: 420px;
   padding: 40px 36px;
   box-shadow: var(--shadow-lg), 0 0 80px rgba(255, 215, 0, 0.10);
   position: relative;
   z-index: 1;
   animation: fadeUp 0.5s ease both
}

.admin-login-card::after {
   content: '';
   position: absolute;
   bottom: -40px;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 40px;
   background: var(--primary-color);
   filter: blur(30px);
   opacity: 0.18;
   pointer-events: none
}

/* CARDS */
.card {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 22px;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
   transform-style: preserve-3d
}

.card:hover {
   border-color: rgba(255, 215, 0, 0.30);
   box-shadow: var(--shadow-glow), 0 16px 40px rgba(0, 0, 0, 0.4);
   transform: translateY(-4px)
}

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

.card-title {
   font-size: 15px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 9px
}

.card-title i {
   color: var(--primary-color)
}

/* PAYMENT CARDS */
.payment-card {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 18px;
   cursor: pointer;
   transition: all var(--transition-base);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px
}

.payment-card:hover,
.payment-card.selected {
   border-color: var(--primary-color);
   background: rgba(255, 215, 0, 0.08);
   box-shadow: 0 0 20px var(--primary-glow);
   transform: translateY(-4px)
}

.payment-card img {
   width: 52px;
   height: 52px;
   object-fit: contain;
   border-radius: var(--radius-sm)
}

.payment-card .pm-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-primary)
}

.payment-card .pm-details {
   font-size: 11px;
   color: var(--text-gray)
}

/* IMAGE THUMB */
.img-thumb {
   width: 44px;
   height: 44px;
   object-fit: cover;
   border-radius: var(--radius-sm);
   border: 1px solid rgba(255, 215, 0, 0.15)
}

.img-thumb-lg {
   width: 64px;
   height: 64px
}

.img-thumb-xl {
   width: 90px;
   height: 90px
}

/* AVATAR */
.avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   font-weight: 700;
   font-size: 14px;
   color: #000;
   flex-shrink: 0
}

/* EMPTY STATE */
.empty-state {
   padding: 60px 20px;
   text-align: center;
   color: var(--text-gray)
}

.empty-state i {
   font-size: 52px;
   margin-bottom: 16px;
   opacity: 0.3;
   display: block;
   color: var(--primary-color)
}

.empty-state p {
   font-size: 15px;
   margin-bottom: 18px
}

/* SPINNER */
.spinner {
   width: 36px;
   height: 36px;
   border: 3px solid var(--border-color);
   border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
   display: inline-block
}

.spinner-sm {
   width: 18px;
   height: 18px;
   border-width: 2px
}

/* TOASTS */
.toast-container {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.toast {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 18px;
   background: var(--bg-elevated);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   min-width: 260px;
   max-width: 340px;
   animation: slideInRight 0.3s ease both;
   font-size: 14px
}

.toast.toast-success {
   border-left: 3px solid var(--success)
}

.toast.toast-error {
   border-left: 3px solid var(--error)
}

.toast.toast-warning {
   border-left: 3px solid var(--warning)
}

.toast.toast-info {
   border-left: 3px solid var(--info)
}

/* PROGRESS */
.progress {
   height: 6px;
   background: var(--bg-elevated);
   border-radius: var(--radius-pill);
   overflow: hidden
}

.progress-bar {
   height: 100%;
   border-radius: var(--radius-pill);
   background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
   box-shadow: 0 0 10px var(--primary-glow);
   transition: width 0.6s ease
}

/* GLOW LINE / DOTS */
.glow-line {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--primary-color), var(--secondary-color), transparent);
   margin: 28px 0;
   opacity: 0.5
}

.neon-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--success);
   box-shadow: 0 0 8px var(--success);
   animation: pulse 2s infinite
}

.neon-dot.offline {
   background: var(--error);
   box-shadow: 0 0 8px var(--error)
}

.neon-dot.idle {
   background: var(--warning);
   box-shadow: 0 0 8px var(--warning)
}

/* ═══════════════════════════════════════════
   USER PANEL — Mobile App Style
   ═══════════════════════════════════════════ */
.mobile-container {
   max-width: 480px;
   margin: 0 auto;
   min-height: 100vh;
   background: var(--bg-base);
   /* Bottom spacing: mobile.css (nav clearance on main.user-scroll or container padding) */
   padding-bottom: 0;
   position: relative
}

/* TOP BAR */
.top-bar {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(13, 13, 15, 0.95);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-bottom: 1px solid rgba(255, 215, 0, 0.12);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

.welcome-text {
   font-weight: 700;
   font-size: 15px;
   color: var(--primary-color);
   font-family: 'Orbitron', sans-serif;
   font-size: 13px;
   letter-spacing: 0.5px
}

.top-bar-right {
   display: flex;
   align-items: center;
   gap: 12px
}

.notification-bell {
   position: relative;
   cursor: pointer;
   width: 38px;
   height: 38px;
   background: rgba(255, 215, 0, 0.08);
   border: 1px solid rgba(255, 215, 0, 0.15);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base)
}

.notification-bell:hover {
   background: rgba(255, 215, 0, 0.15);
   box-shadow: 0 0 15px var(--primary-glow);
   transform: scale(1.1)
}

.notification-bell i {
   color: var(--primary-color);
   font-size: 15px
}

.notification-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   background: var(--error);
   color: #fff;
   font-size: 9px;
   font-weight: 700;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid var(--bg-base);
   animation: pulse 2s infinite
}

.top-bar .wallet-balance {
   font-size: 13px;
   font-weight: 700;
   color: var(--primary-color);
   background: rgba(255, 215, 0, 0.10);
   border: 1px solid rgba(255, 215, 0, 0.20);
   padding: 6px 12px;
   border-radius: var(--radius-pill)
}

/* IMAGE SLIDER */
.image-slider {
   margin: 0;
   position: relative;
   overflow: hidden;
   border-radius: 0
}

.slider-container {
   position: relative;
   height: 180px
}

.slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 0.6s ease
}

.slide.active {
   opacity: 1
}

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

.slider-dots {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 6px;
   z-index: 1
}

.dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
   cursor: pointer;
   transition: all var(--transition-base)
}

.dot.active {
   background: var(--primary-color);
   width: 20px;
   border-radius: var(--radius-pill);
   box-shadow: 0 0 8px var(--primary-glow)
}

/* SECTION HEADERS */
.section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 16px 8px
}

.section-title {
   font-size: 15px;
   font-weight: 800;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: 8px
}

.section-title::before {
   content: '';
   display: inline-block;
   width: 4px;
   height: 16px;
   background: var(--primary-color);
   border-radius: var(--radius-pill);
   box-shadow: 0 0 8px var(--primary-glow)
}

.view-all {
   font-size: 12px;
   color: var(--primary-color);
   font-weight: 600;
   transition: all var(--transition-fast)
}

.view-all:hover {
   color: var(--primary-light);
   text-decoration: underline
}

/* GAME CARDS */
.games-section {
   padding: 0 0 8px
}

.games-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   padding: 8px 16px
}

.game-card {
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.10);
   border-radius: var(--radius-md);
   padding: 12px 8px;
   text-align: center;
   cursor: pointer;
   transition: all var(--transition-base);
   transform-style: preserve-3d;
   perspective: 400px
}

.game-card:hover {
   border-color: var(--primary-color);
   transform: translateY(-4px) rotateX(4deg);
   box-shadow: 0 10px 30px rgba(255, 215, 0, 0.20), 0 4px 10px rgba(0, 0, 0, 0.4)
}

.game-card:active {
   transform: scale(0.95);
   border-color: var(--primary-color)
}

.game-logo {
   width: 44px;
   height: 44px;
   margin: 0 auto 8px;
   border-radius: var(--radius-sm);
   overflow: hidden;
   border: 1px solid rgba(255, 215, 0, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 215, 0, 0.06);
   transition: all var(--transition-base)
}

.game-card:hover .game-logo {
   box-shadow: 0 0 15px var(--primary-glow);
   border-color: var(--primary-color)
}

.game-logo img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.game-logo i {
   color: var(--primary-color);
   font-size: 20px
}

.game-name {
   font-size: 10px;
   font-weight: 600;
   color: var(--text-secondary);
   line-height: 1.2
}

/* TOURNAMENT CARDS */
.my-matches {
   padding: 0
}

.tournament-card {
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.08);
   border-radius: var(--radius-lg);
   margin: 0 16px 12px;
   overflow: hidden;
   transition: all var(--transition-base);
   transform-style: preserve-3d
}

.tournament-card:hover {
   border-color: rgba(255, 215, 0, 0.30);
   transform: translateY(-3px);
   box-shadow: 0 12px 35px rgba(255, 215, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5)
}

.tournament-banner {
   height: 100px;
   overflow: hidden;
   position: relative
}

.tournament-banner img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease
}

.tournament-card:hover .tournament-banner img {
   transform: scale(1.05)
}

.tournament-info {
   padding: 14px
}

.tournament-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 8px
}

.tournament-details {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   margin-top: 10px
}

.detail-item {
   text-align: center
}

.detail-label {
   font-size: 10px;
   color: var(--text-gray);
   margin-bottom: 2px;
   text-transform: uppercase;
   letter-spacing: 0.5px
}

.detail-value {
   font-size: 12px;
   font-weight: 700;
   color: var(--primary-color)
}

/* MATCH FILTERS */
.match-filters {
   display: flex;
   gap: 8px;
   padding: 4px 16px 12px;
   overflow-x: auto;
   scrollbar-width: none
}

.match-filters::-webkit-scrollbar {
   display: none
}

.filter-btn {
   background: rgba(255, 215, 0, 0.06);
   border: 1px solid rgba(255, 215, 0, 0.12);
   color: var(--text-gray);
   padding: 7px 14px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: all var(--transition-base);
   font-family: 'Inter', sans-serif;
   display: flex;
   align-items: center;
   gap: 6px;
   flex-shrink: 0
}

.filter-btn:hover,
.filter-btn.active {
   background: var(--primary-color);
   border-color: var(--primary-color);
   color: #000;
   box-shadow: 0 0 15px var(--primary-glow)
}

.filter-btn i {
   font-size: 11px
}

/* BOTTOM NAV — Glassmorphism */
.bottom-nav {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 480px;
   /* Glass effect */
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border-radius: 15px 15px 0 0;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-bottom: none;
   box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -2px 8px rgba(0, 0, 0, 0.20);
   z-index: 200;
   padding: 8px 0 env(safe-area-inset-bottom, 8px)
}

.nav-items {
   display: flex;
   justify-content: space-around;
   align-items: center
}

.bottom-nav .nav-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   padding: 6px 16px;
   /* Default icon color: white */
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   border-radius: var(--radius-md);
   transition: all 0.3s ease;
   border: none;
   background: none;
   min-width: 56px
}

.bottom-nav .nav-item:hover {
   color: #FFD700;
   transform: translateY(-2px) scale(1.1);
}

.bottom-nav .nav-item:active {
   transform: scale(1.1);
}

/* Active state: yellow (#FFD700) */
.bottom-nav .nav-item.active {
   color: #FFD700;
}

.bottom-nav .nav-item.active .nav-icon {
   background: rgba(255, 215, 0, 0.12);
   border-color: rgba(255, 215, 0, 0.30);
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}

.bottom-nav .nav-item.active .nav-icon i {
   color: #FFD700;
   filter: drop-shadow(0 0 6px #FFD700);
}

.nav-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   background: transparent;
   border: 1px solid transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.nav-icon i {
   font-size: 18px;
   /* Default icon color: white */
   color: rgba(255, 255, 255, 0.85);
   transition: color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.bottom-nav .nav-item:hover .nav-icon i {
   color: #FFD700;
   transform: scale(1.1);
}

.nav-label {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0;
   text-align: center;
   transition: color 0.3s ease;
}

/* WALLET SECTION */
.wallet-summary {
   margin: 16px;
   background: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(245, 166, 35, 0.10) 100%);
   border: 1px solid rgba(255, 215, 0, 0.25);
   border-radius: var(--radius-xl);
   padding: 22px;
   position: relative;
   overflow: hidden
}

.wallet-summary::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(255, 215, 0, 0.18), transparent 70%);
   pointer-events: none
}

.wallet-summary::after {
   content: '';
   position: absolute;
   bottom: -30px;
   left: -20px;
   width: 120px;
   height: 120px;
   background: radial-gradient(circle, rgba(245, 166, 35, 0.12), transparent 70%);
   pointer-events: none
}

.wallet-card {
   background: transparent;
   border: none;
   padding: 0
}

.wallet-balance {
   font-size: 36px;
   font-weight: 900;
   font-family: 'Orbitron', sans-serif;
   color: var(--primary-color);
   text-shadow: 0 0 20px var(--primary-glow)
}

.wallet-label {
   font-size: 11px;
   color: rgba(255, 215, 0, 0.70);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 6px
}

.wallet-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin: 16px
}

/* LEADERBOARD */
.leaderboard-list {
   padding: 0 16px
}

.leaderboard-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.08);
   border-radius: var(--radius-lg);
   margin-bottom: 10px;
   transition: all var(--transition-base);
   transform-style: preserve-3d
}

.leaderboard-item:hover {
   border-color: rgba(255, 215, 0, 0.25);
   transform: translateX(4px);
   box-shadow: 0 4px 20px rgba(255, 215, 0, 0.10)
}

.leaderboard-item.rank-1 {
   border-color: rgba(255, 215, 0, 0.50);
   background: rgba(255, 215, 0, 0.07);
   box-shadow: 0 0 20px rgba(255, 215, 0, 0.15)
}

.leaderboard-item.rank-2 {
   border-color: rgba(192, 192, 192, 0.40);
   background: rgba(192, 192, 192, 0.05)
}

.leaderboard-item.rank-3 {
   border-color: rgba(205, 127, 50, 0.40);
   background: rgba(205, 127, 50, 0.05)
}

.rank-badge {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 900;
   font-size: 13px;
   flex-shrink: 0
}

.rank-badge.gold {
   background: linear-gradient(135deg, #FFD700, #FFA500);
   color: #000;
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.50)
}

.rank-badge.silver {
   background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
   color: #000
}

.rank-badge.bronze {
   background: linear-gradient(135deg, #CD7F32, #A0522D);
   color: #fff
}

.rank-badge.other {
   background: var(--glass-bg);
   color: var(--text-secondary);
   border: 1px solid var(--glass-border)
}

.lb-username {
   flex: 1;
   font-weight: 700;
   font-size: 14px
}

.lb-score {
   font-weight: 800;
   color: var(--primary-color);
   font-size: 15px
}

/* PROFILE */
.profile-header {
   padding: 24px 16px 16px;
   text-align: center;
   background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
   border-bottom: 1px solid var(--border-color)
}

.profile-avatar {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 12px;
   font-size: 32px;
   font-weight: 900;
   color: #000;
   box-shadow: 0 0 30px var(--primary-glow), 0 8px 20px rgba(0, 0, 0, 0.5);
   border: 3px solid rgba(255, 215, 0, 0.40);
   transition: all var(--transition-base)
}

.profile-avatar:hover {
   transform: scale(1.05);
   box-shadow: 0 0 50px var(--primary-glow)
}

.profile-name {
   font-size: 20px;
   font-weight: 800;
   color: var(--primary-color);
   font-family: 'Orbitron', sans-serif
}

.profile-email {
   font-size: 13px;
   color: var(--text-gray);
   margin-top: 4px
}

.profile-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding: 16px;
   margin: 0 16px;
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.10);
   border-radius: var(--radius-lg)
}

.profile-stat {
   text-align: center;
   padding: 12px
}

.profile-stat-value {
   font-size: 22px;
   font-weight: 900;
   color: var(--primary-color)
}

.profile-stat-label {
   font-size: 11px;
   color: var(--text-gray);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 2px
}

.profile-menu {
   margin: 16px
}

.profile-menu-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 16px;
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.08);
   border-radius: var(--radius-md);
   margin-bottom: 8px;
   cursor: pointer;
   transition: all var(--transition-base);
   color: var(--text-secondary);
   text-decoration: none
}

.profile-menu-item:hover {
   border-color: rgba(255, 215, 0, 0.25);
   color: var(--text-primary);
   transform: translateX(4px);
   background: rgba(255, 215, 0, 0.05)
}

.profile-menu-item i:first-child {
   width: 36px;
   height: 36px;
   background: rgba(255, 215, 0, 0.10);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary-color);
   font-size: 15px;
   flex-shrink: 0;
   transition: all var(--transition-base)
}

.profile-menu-item:hover i:first-child {
   background: rgba(255, 215, 0, 0.18);
   box-shadow: 0 0 12px var(--primary-glow)
}

.profile-menu-item i:last-child {
   margin-left: auto;
   color: var(--text-gray);
   font-size: 12px
}

.profile-menu-item span {
   flex: 1;
   font-weight: 500;
   font-size: 14px
}

/* INFO CARDS (home stats) */
.info-cards-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   padding: 8px 16px
}

.info-card {
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.08);
   border-radius: var(--radius-lg);
   padding: 16px;
   transition: all var(--transition-base);
   position: relative;
   overflow: hidden;
   transform-style: preserve-3d
}

.info-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent)
}

.info-card:hover {
   border-color: rgba(255, 215, 0, 0.25);
   transform: translateY(-3px) rotateX(2deg);
   box-shadow: 0 10px 30px rgba(255, 215, 0, 0.10)
}

.info-card-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   background: rgba(255, 215, 0, 0.10);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
   transition: all var(--transition-base)
}

.info-card:hover .info-card-icon {
   box-shadow: 0 0 15px var(--primary-glow);
   background: rgba(255, 215, 0, 0.18)
}

.info-card-icon i {
   color: var(--primary-color);
   font-size: 18px
}

.info-card-value {
   font-size: 20px;
   font-weight: 900;
   color: var(--text-primary)
}

.info-card-label {
   font-size: 11px;
   color: var(--text-gray);
   text-transform: uppercase;
   letter-spacing: 0.4px;
   margin-top: 2px
}

/* QUICK ACTIONS (home grid) */
.quick-actions-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   padding: 8px 16px
}

.quick-action-card {
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.08);
   border-radius: var(--radius-lg);
   padding: 18px 16px;
   text-align: center;
   cursor: pointer;
   transition: all var(--transition-base);
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   transform-style: preserve-3d
}

.quick-action-card:hover {
   border-color: rgba(255, 215, 0, 0.30);
   transform: translateY(-5px) rotateX(4deg);
   box-shadow: 0 15px 40px rgba(255, 215, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.5)
}

.quick-action-card:active {
   transform: scale(0.96)
}

.qa-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-lg);
   background: rgba(255, 215, 0, 0.10);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-base)
}

.quick-action-card:hover .qa-icon {
   background: rgba(255, 215, 0, 0.20);
   box-shadow: 0 0 20px var(--primary-glow)
}

.qa-icon i {
   font-size: 22px;
   color: var(--primary-color)
}

.qa-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--text-primary)
}

/* TRANSACTION ITEMS */
.transaction-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   background: var(--bg-elevated);
   border: 1px solid rgba(255, 215, 0, 0.06);
   border-radius: var(--radius-md);
   margin: 0 16px 8px;
   transition: all var(--transition-base)
}

.transaction-item:hover {
   border-color: rgba(255, 215, 0, 0.20);
   transform: translateX(3px)
}

.transaction-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.transaction-icon.deposit {
   background: rgba(34, 197, 94, 0.15);
   color: var(--success)
}

.transaction-icon.withdrawal {
   background: rgba(239, 68, 68, 0.15);
   color: var(--error)
}

.transaction-details {
   flex: 1
}

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

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

.transaction-amount {
   font-weight: 800;
   font-size: 14px
}

.transaction-amount.positive {
   color: var(--success)
}

.transaction-amount.negative {
   color: var(--error)
}

/* ═══════════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════ */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(24px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: 0.5
   }
}

@keyframes slideInRight {
   from {
      opacity: 0;
      transform: translateX(40px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

@keyframes glowPulse {

   0%,
   100% {
      box-shadow: 0 0 20px var(--primary-glow)
   }

   50% {
      box-shadow: 0 0 50px var(--primary-glow), 0 0 80px rgba(255, 215, 0, 0.15)
   }
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-8px)
   }
}

@keyframes shimmer {
   0% {
      transform: translateX(-100%)
   }

   100% {
      transform: translateX(300%)
   }
}

@keyframes borderGlow {

   0%,
   100% {
      border-color: rgba(255, 215, 0, 0.15)
   }

   50% {
      border-color: rgba(255, 215, 0, 0.40)
   }
}

@keyframes rotateGlow {
   0% {
      filter: drop-shadow(0 0 6px var(--primary-color)) drop-shadow(0 0 2px #fff)
   }

   50% {
      filter: drop-shadow(0 0 12px var(--primary-color)) drop-shadow(0 0 6px #fff)
   }

   100% {
      filter: drop-shadow(0 0 6px var(--primary-color)) drop-shadow(0 0 2px #fff)
   }
}

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

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.animate-fade-up {
   animation: fadeUp 0.5s ease both
}

.animate-fade-in {
   animation: fadeIn 0.4s ease both
}

.animate-float {
   animation: float 4s ease-in-out infinite
}

.animate-pulse {
   animation: pulse 2s ease-in-out infinite
}

.animate-glow {
   animation: glowPulse 2.5s ease-in-out infinite
}

.animate-slide-up {
   animation: slideUp 0.4s ease both
}

.stagger-children>*:nth-child(1) {
   animation-delay: 0.05s
}

.stagger-children>*:nth-child(2) {
   animation-delay: 0.10s
}

.stagger-children>*:nth-child(3) {
   animation-delay: 0.15s
}

.stagger-children>*:nth-child(4) {
   animation-delay: 0.20s
}

.stagger-children>*:nth-child(5) {
   animation-delay: 0.25s
}

.stagger-children>*:nth-child(6) {
   animation-delay: 0.30s
}

/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */
.d-flex {
   display: flex
}

.d-grid {
   display: grid
}

.flex-wrap {
   flex-wrap: wrap
}

.align-center {
   align-items: center
}

.justify-between {
   justify-content: space-between
}

.justify-end {
   justify-content: flex-end
}

.gap-1 {
   gap: 4px
}

.gap-2 {
   gap: 8px
}

.gap-3 {
   gap: 12px
}

.gap-4 {
   gap: 16px
}

.gap-5 {
   gap: 20px
}

.mt-1 {
   margin-top: 4px
}

.mt-2 {
   margin-top: 8px
}

.mt-3 {
   margin-top: 16px
}

.mt-4 {
   margin-top: 24px
}

.mb-1 {
   margin-bottom: 4px
}

.mb-2 {
   margin-bottom: 8px
}

.mb-3 {
   margin-bottom: 16px
}

.mb-4 {
   margin-bottom: 24px
}

.p-1 {
   padding: 4px
}

.p-2 {
   padding: 8px
}

.p-3 {
   padding: 16px
}

.p-4 {
   padding: 24px
}

.text-center {
   text-align: center
}

.text-right {
   text-align: right
}

.text-muted {
   color: var(--text-gray)
}

.text-success {
   color: var(--success)
}

.text-warning {
   color: var(--warning)
}

.text-danger {
   color: var(--error)
}

.text-info {
   color: var(--info)
}

.text-gold {
   color: var(--primary-color)
}

.text-primary-c {
   color: var(--text-primary)
}

.text-sm {
   font-size: 12px
}

.text-base {
   font-size: 14px
}

.text-lg {
   font-size: 16px
}

.text-xl {
   font-size: 18px
}

.font-bold {
   font-weight: 700
}

.font-black {
   font-weight: 900
}

.w-100 {
   width: 100%
}

.rounded {
   border-radius: var(--radius-md)
}

.rounded-lg {
   border-radius: var(--radius-lg)
}

.rounded-full {
   border-radius: 50%
}

.gold-text {
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.section {
   padding: 40px 24px
}

.section-title-admin {
   font-size: 22px;
   font-weight: 800;
   margin-bottom: 22px;
   display: flex;
   align-items: center;
   gap: 10px
}

.section-title-admin i {
   color: var(--primary-color)
}

.glow-line {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--primary-color), var(--secondary-color), transparent);
   margin: 28px 0;
   opacity: 0.4
}

/* USER NAV (desktop/tablet) */
.user-nav {
   position: sticky;
   top: 0;
   background: rgba(13, 13, 15, 0.90);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-bottom: 1px solid rgba(255, 215, 0, 0.12);
   z-index: 100;
   padding: 0 24px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
}

.user-nav-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 800;
   font-size: 18px;
   color: var(--primary-color);
   font-family: 'Orbitron', sans-serif
}

.user-nav-links {
   display: flex;
   align-items: center;
   gap: 8px
}

.user-nav-link {
   padding: 7px 14px;
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 500;
   transition: all var(--transition-base);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 6px
}

.user-nav-link:hover {
   color: var(--primary-color);
   background: rgba(255, 215, 0, 0.08)
}

.user-nav-link.active {
   color: var(--primary-color);
   background: rgba(255, 215, 0, 0.10);
   font-weight: 700
}

/* HERO */
.hero {
   text-align: center;
   padding: 80px 24px;
   position: relative
}

.hero h1 {
   font-family: 'Orbitron', sans-serif;
   font-size: clamp(28px, 6vw, 56px);
   font-weight: 900;
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--primary-light));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 18px;
   line-height: 1.1
}

.hero p {
   font-size: 18px;
   color: var(--text-secondary);
   max-width: 560px;
   margin: 0 auto 32px
}

/* STATUS BADGES INLINE */
span[style*="border-radius:12px"],
span[style*="border-radius: 12px"] {
   font-weight: 700 !important;
   font-size: 10px !important;
   letter-spacing: 0.6px !important;
   padding: 4px 10px !important;
   border-radius: 99px !important
}

/* FORM SECTION TITLE */
.form-section-title {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--primary-color);
   margin: 24px 0 14px;
   display: flex;
   align-items: center;
   gap: 8px
}

.form-section-title::after {
   content: '';
   flex: 1;
   height: 1px;
   background: rgba(255, 215, 0, 0.15)
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:1024px) {
   .stats-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(max-width:768px) {
   .admin-topbar {
      display: flex
   }

   .sidebar-overlay {
      display: block;
      pointer-events: none
   }

   .sidebar-overlay.show {
      pointer-events: all
   }

   .admin-sidebar {
      transform: translateX(-110%);
      top: 0;
      z-index: 1100
   }

   .admin-sidebar.sidebar-open {
      transform: translateX(0);
      box-shadow: 12px 0 60px rgba(0, 0, 0, 0.7)
   }

   .admin-main {
      margin-left: 0;
      padding: 74px 16px 24px
   }

   .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .search-bar input {
      width: 130px
   }

   .modal-box,
   .modal-content {
      max-width: 100%;
      margin: 0 8px
   }

   .hero {
      padding: 60px 16px
   }

   .hero p {
      font-size: 16px
   }
}

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

   .stat-card {
      padding: 18px 14px
   }

   .stat-card h3 {
      font-size: 20px
   }

   .admin-header h1 {
      font-size: 20px
   }

   .modal-footer {
      flex-direction: column
   }

   .modal-footer .btn {
      width: 100%
   }
}

@media print {

   .admin-sidebar,
   .admin-topbar,
   .sidebar-overlay,
   .bottom-nav {
      display: none !important
   }

   .admin-main {
      margin-left: 0;
      padding: 0
   }

   .mobile-container {
      padding-bottom: 0
   }

   body {
      background: white;
      color: black
   }
}

/* ═══════════════════════════════════════════
   GLASS MORPHISM ENHANCEMENT — All Screens
   ═══════════════════════════════════════════ */

/* Universal glass panel */
.glass-panel {
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(24px) saturate(150%);
   -webkit-backdrop-filter: blur(24px) saturate(150%);
   border: 1px solid rgba(255, 215, 0, 0.12);
   border-radius: var(--radius-lg);
   position: relative;
   overflow: hidden
}

.glass-panel::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.30), transparent);
   pointer-events: none
}

.glass-panel::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
   pointer-events: none
}

/* Upgrade existing glass elements */
.mobile-container {
   background: linear-gradient(160deg, #0D0D0F 0%, #111118 60%, #0A0A10 100%)
}

.top-bar {
   background: rgba(13, 13, 15, 0.80) !important;
   backdrop-filter: blur(28px) saturate(160%) !important;
   -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
   box-shadow: 0 1px 0 rgba(255, 215, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.4)
}

.bottom-nav {
   /* Glassmorphism override — reinforces blur and glass tint */
   background: rgba(255, 255, 255, 0.08) !important;
   backdrop-filter: blur(15px) !important;
   -webkit-backdrop-filter: blur(15px) !important;
   border-radius: 15px 15px 0 0 !important;
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
   border-bottom: none !important;
   box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -2px 8px rgba(0, 0, 0, 0.20) !important;
}

.admin-sidebar {
   background: rgba(8, 8, 12, 0.88) !important;
   backdrop-filter: blur(30px) saturate(170%) !important;
   -webkit-backdrop-filter: blur(30px) saturate(170%) !important
}

.admin-topbar {
   background: rgba(8, 8, 12, 0.88) !important;
   backdrop-filter: blur(28px) saturate(160%) !important;
   -webkit-backdrop-filter: blur(28px) saturate(160%) !important
}

.modal,
.modal-overlay {
   backdrop-filter: blur(20px) saturate(150%) !important;
   -webkit-backdrop-filter: blur(20px) saturate(150%) !important
}

.modal-content,
.modal-box {
   background: rgba(20, 20, 32, 0.92) !important;
   backdrop-filter: blur(30px) saturate(180%) !important;
   -webkit-backdrop-filter: blur(30px) saturate(180%) !important
}

.tournament-card,
.info-card,
.game-card,
.quick-action-card,
.leaderboard-item {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px)
}

.filter-btn {
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px)
}

.stat-card {
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px)
}

.wallet-summary {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px)
}

.data-table {
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px)
}

.admin-login-card {
   backdrop-filter: blur(30px) saturate(180%) !important;
   -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
   background: rgba(15, 15, 25, 0.88) !important
}

/* Glass shimmer overlay on cards */
.tournament-card::after,
.info-card::after,
.game-card::after,
.quick-action-card::after,
.stat-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 60%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.04), transparent);
   transform: skewX(-15deg);
   transition: left 0.6s ease;
   pointer-events: none
}

.tournament-card:hover::after,
.info-card:hover::after,
.game-card:hover::after,
.quick-action-card:hover::after,
.stat-card:hover::after {
   left: 150%
}

/* ═══════════════════════════════════════════
   BOTTOM NAV ICONS — Gold Theme (supplemental)
   NOTE: Authoritative layout rules live in mobile.css.
         These rules only fine-tune non-layout properties.
   ═══════════════════════════════════════════ */
.bottom-nav .nav-item {
   /* Positioning anchor for ::before / ::after pseudo-elements */
   position: relative;
   transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav .nav-item .nav-icon i {
   transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav .nav-item .nav-label {
   transition: all 0.25s ease;
}

.bottom-nav .nav-item:hover {
   transform: translateY(-3px) !important;
}

.bottom-nav .nav-item:hover .nav-icon i {
   filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 255 215 0), 0.5));
}

.bottom-nav .nav-item.active {
   color: var(--primary-color) !important;
}

.bottom-nav .nav-item.active .nav-icon {
   background: rgba(var(--accent-rgb, 255 215 0), 0.12) !important;
   border: 1px solid rgba(var(--accent-rgb, 255 215 0), 0.30) !important;
   box-shadow: 0 0 18px rgba(var(--accent-rgb, 255 215 0), 0.25), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.bottom-nav .nav-item.active .nav-icon i {
   color: var(--primary-color) !important;
   filter: drop-shadow(0 0 8px var(--primary-color)) !important;
}

.bottom-nav .nav-item.active .nav-label {
   color: var(--primary-color) !important;
   font-weight: 700;
}

.bottom-nav .nav-item:active {
   transform: scale(0.92) translateY(0) !important;
}

/* Active nav indicator bar at top */
.bottom-nav .nav-item.active::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 28px;
   height: 2px;
   background: var(--primary-color);
   border-radius: 0 0 3px 3px;
   box-shadow: 0 0 8px var(--primary-glow);
}

/* ═══════════════════════════════════════════
   SMOOTH ANIMATIONS — Global Entrances
   ═══════════════════════════════════════════ */

/* Page-level entrance */
.mobile-container {
   animation: pageFadeIn 0.4s ease both
}

@keyframes pageFadeIn {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

/* Card entrance animations (via JS intersection observer) */
.card-enter {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.card-enter.visible {
   opacity: 1;
   transform: translateY(0)
}

/* Hover micro-interactions */
.nav-icon {
   transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important
}

.btn,
.form-btn,
.filter-btn,
.page-btn {
   transition: all 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) !important
}

.btn:hover,
.form-btn:hover {
   transform: translateY(-3px) scale(1.02) !important
}

.btn:active,
.form-btn:active,
.filter-btn:active {
   transform: scale(0.95) translateY(1px) !important
}

/* Icon animations */
.admin-sidebar .nav-item i,
.profile-menu-item i:first-child {
   transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important
}

.admin-sidebar .nav-item:hover i {
   transform: scale(1.15) translateX(2px) !important
}

.profile-menu-item:hover i:first-child {
   transform: scale(1.12) rotate(-5deg) !important
}

/* Wallet balance number glow */
.wallet-balance {
   animation: goldShine 3s ease-in-out infinite;
   position: relative
}

@keyframes goldShine {

   0%,
   100% {
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.3)
   }

   50% {
      text-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 215, 0, 0.2)
   }
}

/* Slider fade */
.slide {
   transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important
}

/* Input focus animation */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   transform: translateY(-1px);
   box-shadow: 0 4px 20px rgba(255, 215, 0, 0.10), 0 0 0 3px rgba(255, 215, 0, 0.15) !important
}

/* Notification bell ring */
@keyframes bellRing {

   0%,
   100% {
      transform: rotate(0)
   }

   20% {
      transform: rotate(15deg)
   }

   40% {
      transform: rotate(-12deg)
   }

   60% {
      transform: rotate(8deg)
   }

   80% {
      transform: rotate(-6deg)
   }

   90% {
      transform: rotate(4deg)
   }
}

.notification-bell:hover i {
   animation: bellRing 0.7s ease
}

/* Table row slide in */
table.table tbody tr {
   animation: rowSlide 0.3s ease both
}

table.table tbody tr:nth-child(1) {
   animation-delay: 0.05s
}

table.table tbody tr:nth-child(2) {
   animation-delay: 0.10s
}

table.table tbody tr:nth-child(3) {
   animation-delay: 0.15s
}

table.table tbody tr:nth-child(4) {
   animation-delay: 0.20s
}

table.table tbody tr:nth-child(5) {
   animation-delay: 0.25s
}

@keyframes rowSlide {
   from {
      opacity: 0;
      transform: translateX(-10px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

/* Leaderboard rank pulse */
.rank-badge.gold {
   animation: glowPulse 2.5s ease-in-out infinite
}

/* Glass card background noise texture for depth */
.info-card,
.quick-action-card,
.tournament-card,
.game-card,
.leaderboard-item,
.profile-menu-item {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
   background-size: 200px;
   background-repeat: repeat
}

/* Scroll animation init script (injected via CSS content trick) */
@keyframes observeInit {
   from {
      --obs: 0
   }

   to {
      --obs: 1
   }
}

/* ═══════════════════════════════════════════
   ICON COLOR OVERRIDES — Professional Theme
   ═══════════════════════════════════════════ */

/* All FA icons in user panel get themed */
.tournament-card i,
.info-card i,
.quick-action-card i,
.wallet-summary i,
.leaderboard-item i,
.transaction-item i {
   color: var(--primary-color)
}

.tournament-card-meta i {
   color: var(--primary-light)
}

.alert-success i {
   color: var(--success) !important
}

.alert-error i {
   color: var(--error) !important
}

.alert-warning i {
   color: var(--warning) !important
}

.alert-info i {
   color: var(--info) !important
}

/* Sidebar admin icons */
.admin-sidebar .sidebar-brand i,
.admin-sidebar .nav-item.active i {
   color: var(--primary-color)
}

.admin-sidebar .nav-item:not(.active) i {
   color: rgba(255, 215, 0, 0.45);
   transition: color var(--transition-base), filter var(--transition-base)
}

/* Status icons */
.fa-check-circle,
.fa-check {
   color: var(--success) !important
}

.fa-times-circle,
.fa-ban {
   color: var(--error) !important
}

.fa-clock,
.fa-hourglass-half {
   color: var(--warning) !important
}

.fa-info-circle {
   color: var(--info) !important
}

/* Gold icons in headings and section titles */
h3 i,
h4 i,
.section-title i,
.admin-header h1 i,
.modal-content h3 i,
.data-table h3 i {
   color: var(--primary-color) !important;
   filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3))
}

/* ═══════════════════════════════════════════
   ADDITIONAL PREMIUM TOUCHES
   ═══════════════════════════════════════════ */

/* Frosted glass notification badge */
.notification-badge {
   backdrop-filter: blur(4px);
   border: 2px solid rgba(13, 13, 15, 0.8)
}

/* Premium scrollable areas */
.match-filters {
   -webkit-overflow-scrolling: touch
}

/* Active tab underline glow */
.tab-btn.active::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--primary-color);
   box-shadow: 0 0 8px var(--primary-glow)
}

.tab-btn {
   position: relative
}

/* Smooth page transitions trigger class */
.page-transition {
   animation: pageFadeIn 0.35s ease both
}

/* Bottom nav position fix for active indicator — kept for ::before/::after */
.bottom-nav .nav-item {
   position: relative;
}

/* Global dropdown readability: black text on white (forms + admin) */
select,
.form-select,
select.form-input {
   background: #fff !important;
   color: #000 !important;
   border: 1px solid #ccc !important;
}

select option,
.form-select option,
select.form-input option {
   background: #fff !important;
   color: #000 !important;
}

select:disabled,
.form-select:disabled,
select.form-input:disabled {
   background: #f0f0f0 !important;
   color: #555 !important;
   opacity: 1;
}

html.theme-light select,
html.theme-light .form-select,
html.theme-light select.form-input,
html.theme-light select option {
   background: #fff !important;
   color: #000 !important;
}

/* Admin + modals: same readable selects/dropdowns */
.admin-panel select,
.admin-main select,
.admin-content select,
.admin-header select,
.sidebar select,
.modal select,
.modal-content select,
.data-table select,
table select {
   background: #fff !important;
   color: #000 !important;
   border: 1px solid #ccc !important;
}

.admin-panel select option,
.admin-main select option,
.modal select option,
.data-table select option,
table select option {
   background: #fff !important;
   color: #000 !important;
}

/* Native selects: keep option text black everywhere (readability) */
select option {
   color: #000 !important;
}

/* ── Admin Panel Dropdown Styling (comprehensive) ─────────────────────────── */
/* All <select> elements in admin get consistent black-on-white styling */
.admin-main select,
.admin-header select,
.admin-content select,
body > select,
body:not(.user-panel) select {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-main select:focus,
body:not(.user-panel) select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}
.admin-main select:hover,
body:not(.user-panel) select:hover {
    border-color: #9ca3af !important;
}

/* Option items should have proper spacing and hover */
.admin-main select option,
body:not(.user-panel) select option {
    background: #ffffff !important;
    color: #111111 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}
.admin-main select option:hover,
.admin-main select option:checked,
body:not(.user-panel) select option:hover,
body:not(.user-panel) select option:checked {
    background: #f3f4f6 !important;
    color: #111111 !important;
}

/* Inline-style selects used throughout admin pages (direct style attribute) */
[style*="background: var(--card-bg)"] select,
[style*="background:var(--card-bg)"] select {
    background: #ffffff !important;
    color: #111111 !important;
}

/* ── Admin: tournament / gold theme for specific dropdown labels ─────────── */
.admin-main select.admin-tournament-theme-select,
.admin-header select.admin-tournament-theme-select,
.modal-content select.admin-tournament-theme-select,
.data-table select.admin-tournament-theme-select {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    background: #ffffff !important;
    font-weight: 700 !important;
}

.admin-main select.admin-tournament-theme-select option,
.admin-header select.admin-tournament-theme-select option,
.modal-content select.admin-tournament-theme-select option,
.data-table select.admin-tournament-theme-select option,
body:not(.user-panel) select.admin-tournament-theme-select option {
    background: #0f172a !important;
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.admin-main select.admin-tournament-theme-select option:checked,
.admin-main select.admin-tournament-theme-select option:hover,
.modal-content select.admin-tournament-theme-select option:checked,
.modal-content select.admin-tournament-theme-select option:hover,
body:not(.user-panel) select.admin-tournament-theme-select option:checked,
body:not(.user-panel) select.admin-tournament-theme-select option:hover {
    background: #1e293b !important;
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

[style*="background: var(--card-bg)"] select.admin-tournament-theme-select,
[style*="background:var(--card-bg)"] select.admin-tournament-theme-select {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    background: #ffffff !important;
    font-weight: 700 !important;
}