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

/* --- MERGED CSS VARIABLES --- */
/* Variables from both themes have been merged. The last definition of conflicting variables (e.g., --shadow) is used. */
:root {
  --bg: #0B0F19;
  --card: #0F1524;
  --card2: #121A2B;
  --muted: #A8B0BF;
  --line: #1D2538;
  --white: #F7FAFC;
  --pri: #2B57F5;
  --pri2: #7AA0FF;
  --acc: #FFCC00;
  --ok: #1DB954;
  --danger: #EF4444;
  --font-family: 'Exo 2', system-ui, -apple-system, sans-serif;
  --primary-bg: #1A202C;
  --secondary-bg: #2D3748;
  --card-bg: #2D3748;
  --accent-bg: #4A5568;
  --text-primary: #FFFFFF;
  --text-secondary: #A0AEC0;
  --text-muted: #718096;
  --accent-blue: #00C2FF;
  --accent-orange: #FF8800;
  --success: #48BB78;
  --error: #F56565;
  --border-color: #4A5568;
  --hover-bg: rgba(0, 194, 255, 0.1);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
  --gap: 8px;
}

/* --- MERGED BASE & RESET STYLES --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

html {
  background: #1B0621;
}

/* The second 'body' rule overrode the first. Properties are merged here. */
body {
  margin: 0;
  font: 16px/1.6 var(--font-family);
  background: linear-gradient(rgba(26, 32, 44, 0.7), rgba(26, 32, 44, 0.7)), url('/assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Global scrollbar styling (same as modal and sidebar) */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
}

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

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

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

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

a {
  color: inherit;
  text-decoration: none
}

/* --- UTILITY & LAYOUT CLASSES (FROM FIRST THEME, NOT OVERRIDDEN) --- */
.container {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%
}

.row {
  display: flex
}

.col {
  display: flex;
  flex-direction: column
}

.wrap {
  flex-wrap: wrap
}

.between {
  justify-content: space-between
}

.center {
  align-items: center
}

.gap {
  gap: 14px
}

.gap-s {
  gap: 8px
}

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

.mt {
  margin-top: 16px
}

.hide-sm {
  display: block
}

@media(max-width:900px) {
  .hide-sm {
    display: none
  }
}

.h16 {
  height: 64px
}

.grid {
  display: grid
}

.two {
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

@media(max-width:900px) {
  .grid.two {
    grid-template-columns: 1fr
  }
}

.inline {
  display: inline
}


/* --- CONSOLIDATED & FINAL COMPONENT STYLES --- */

/* Topbar & Glass (Original theme) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(150%) blur(10px)
}

.glass {
  background: rgba(255, 255, 255, .03);
  box-shadow: var(--shadow);
}

/* Brand & Nav (Original theme) */
.app-container .brand {
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 20px;
  color: #fff
}

.app-container .nav a {
  color: var(--muted);
  margin: 0 12px;
  position: relative
}

.app-container .nav a:hover {
  color: #fff
}

/* Buttons (Original theme) */
.app-container .btn {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, background .2s
}

.app-container .btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .09)
}

.app-container .btn.primary {
  background: linear-gradient(135deg, var(--pri), var(--pri2));
  border-color: transparent
}

.app-container .btn.ghost {
  background: transparent
}

.app-container .btn.danger {
  background: linear-gradient(135deg, #ff4757, #ff3742);
  border-color: transparent;
  color: white;
}

.app-container .btn.danger:hover {
  background: linear-gradient(135deg, #ff3742, #ff2f3a);
  transform: translateY(-1px);
}

.app-container .btn.small {
  padding: 8px 16px;
  font-size: 14px
}

.app-container .btn.large {
  padding: 18px 35px;
  font-size: 16px;
  font-weight: 700
}

/* Badges (Original theme) */
.app-container .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  color: var(--muted)
}

.app-container .badge.green {
  background: rgba(16, 185, 129, .12);
  color: #86efac;
  border-color: rgba(16, 185, 129, .25)
}

.app-container .badge.amber {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, .25)
}

/* Card & General Typography (Original theme) */
.app-container .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.app-container .card:hover {
  border-color: #233055
}

.app-container .title {
  font-weight: 800;
  margin: 6px 0 2px 0
}

.app-container .muted {
  color: var(--muted)
}

/* Final '.avatar' style from the newer theme */
.app-container .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-blue);
  box-shadow: var(--shadow);
}

/* Form Elements (Original theme) */
.app-container .input,
.app-container select,
.app-container textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  width: 100%;
}

label {
  display: block;
  margin: 8px 0 6px 0;
  color: #d3d9e5;
  font-weight: 500
}

form .row {
  gap: 10px
}

.notice {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted)
}

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

.list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line)
}

.score b {
  font-weight: 800
}

/* Bracket (Original theme) */
.se-bracket-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 14px;
  align-items: start
}

.se-round-title {
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600
}

.se-match {
  display: block;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease
}

.se-match:hover {
  transform: translateY(-1px)
}

.se-match .row {
  justify-content: space-between
}


/* ===== NEW 3-PLAQUE LAYOUT STYLES (Kept as the final version) ===== */

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Top Bar - Plaque 1 */
.top-bar {
  background: rgba(45, 55, 72, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--gap);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

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

.logo-container {
  display: flex;
  align-items: center;
}

.logo-square {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: white;
  box-shadow: var(--shadow);
}

.logo-text {
  letter-spacing: 1px;
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.breadcrumb-item {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.breadcrumb-item:hover {
  color: var(--text-primary);
}

.breadcrumb-separator {
  color: var(--text-muted);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

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

.top-bar-right .superadmin-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  z-index: 1001 !important;
  top: auto !important;
  right: auto !important;
}

.action-btn.notification-style {
  position: relative;
  height: 40px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 0 20px;
  min-height: 40px;
}

.action-btn.notification-style:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.action-btn.notification-style i {
  color: var(--text-secondary);
  font-size: 16px;
}

.action-btn.notification-style span {
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
  margin-left: 8px;
}

.notification-icon {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notification-icon:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.notification-icon i {
  color: var(--text-secondary);
  font-size: 16px;
}

.notification-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px !important;
  background: var(--error);
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  display: none;
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 12px;
  min-width: 16px;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px;
  height: auto !important;
}

.coin-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 215, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.coin-balance:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-decoration: none;
  color: inherit;
}

.coin-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.coin-icon i {
  color: #1A1F2E;
  font-size: 16px;
  font-weight: bold;
}

/* CESO Coin Icon Image */
.coin-icon-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(1);
}

/* Coin Redemption Actions */
.coin-redemption-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.coin-redemption-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 1px solid #2B57F5;
  background: transparent;
  color: #2B57F5;
}

.coin-redemption-actions .btn:hover {
  background: #2B57F5;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(43, 87, 245, 0.3);
}

.coin-redemption-actions .btn i {
  font-size: 16px;
}

@media (max-width: 768px) {
  .coin-redemption-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .coin-redemption-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

.prize-coins-icon {
  width: 21px;
  height: 21px;
  object-fit: contain;
  margin-left: 5px;
}

.page-title-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(85%) sepia(100%) saturate(1000%) hue-rotate(45deg) brightness(1.2) contrast(1.2);
  margin-right: 12px;
}

.coin-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.coin-value {
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.coin-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.user-menu {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.user-menu:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

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

.user-name-small {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.app-container .dropdown-arrow {
  color: var(--text-secondary);
  font-size: 12px;
  transition: transform 0.3s ease;
}

.app-container .user-menu:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* Superadmin menu styling */
.superadmin-menu {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(147, 51, 234, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.superadmin-menu:hover {
  background: rgba(147, 51, 234, 0.2);
  border-color: rgba(147, 51, 234, 0.5);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.superadmin-icon {
  font-size: 20px;
  color: #9333EA;
}

.superadmin-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(45, 55, 72, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-width: 280px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  margin-top: var(--gap);
}

.superadmin-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(45, 55, 72, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-width: 280px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  margin-top: var(--gap);
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.app-container .dropdown-header {
  padding: 16px 16px 8px 16px;
}

.app-container .dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-container .dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-container .dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initial {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.app-container .dropdown-user-details {
  flex: 1;
}

.app-container .dropdown-user-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.app-container .dropdown-user-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.role-gamer {
  background: rgba(0, 194, 255, 0.2);
  color: var(--accent-blue);
}

.role-host {
  background: rgba(72, 187, 120, 0.2);
  color: var(--success);
}

.role-streamer {
  background: rgba(114, 91, 242, 0.2);
  color: #725BF2;
}

.role-admin {
  background: rgba(255, 136, 0, 0.2);
  color: var(--accent-orange);
}

.role-superadmin {
  background: rgba(147, 51, 234, 0.2);
  color: #9333EA;
}

.app-container .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.app-container .dropdown-item:hover {
  background: var(--hover-bg);
  color: var(--accent-blue);
}

.app-container .dropdown-item i {
  width: 16px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.app-container .dropdown-item:hover i {
  color: var(--accent-blue);
}

.notification-badge-orange {
  margin-left: auto;
  background: #FF8800;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1;
}

.app-container .dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

.dropdown-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 0px 16px;
  color: var(--accent-orange);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.dropdown-section-header i {
  font-size: 14px;
  color: var(--accent-orange);
}

.admin-item {
  color: var(--accent-orange);
}

.admin-item i {
  color: var(--accent-orange);
}

.logout-item {
  color: var(--error);
}

.logout-item i {
  color: var(--error);
}

.logout-item:hover {
  background: rgba(245, 101, 101, 0.1);
  color: var(--error);
}

.user-menu.gamer {
  border-color: var(--accent-blue);
}

.user-menu.host {
  border-color: var(--success);
}

.user-menu.admin {
  border-color: var(--accent-orange);
}

.user-menu.superadmin {
  border-color: #9333EA;
}

.user-menu.guest {
  border-color: var(--border-color);
}

/* Guest avatar styling: yellow background and black icon */
.user-menu.guest .user-avatar-small {
  background: #FFCC00;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu.guest .user-avatar-small i {
  color: #000000;
}

/* Main Layout Container - Plaques 2 & 3 */
.main-layout {
  display: flex;
  flex: 1;
  gap: var(--gap);
  padding: var(--gap);
  min-height: calc(100vh - 80px);
  position: relative;
  flex-direction: row;
}

/* Sidebar (280px) - Plaque 2 */
.sidebar {
  width: 280px;
  background: rgba(45, 55, 72, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: calc(100vh - (67px + 2 * var(--gap)));
  position: sticky;
  top: calc(67px + var(--gap));
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar scrollbar styling (same as modal) */
/* WebKit browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

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

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

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

/* Firefox scrollbar styling */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.user-profile {
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid var(--border-color);
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--error);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 3px solid var(--card-bg);
}

.user-greeting {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 4px;
}

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

/* Guest Welcome Section */
.guest-welcome {
  text-align: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid var(--border-color);
}



.guest-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guest-actions .btn {
  width: 100%;
  justify-content: center;
}

.app-container .nav-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-container .nav-title {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display:none;
}

.app-container .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
}

.app-container .nav-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.app-container .nav-item.active {
  background: var(--accent-blue);
  color: white;
}

.app-container .nav-item.active .nav-icon {
  color: white !important;
}

.app-container .nav-icon {
  width: 20px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.app-container .nav-item:hover .nav-icon {
  color: var(--accent-blue);
}

.app-container .nav-badge {
  background: var(--accent-orange);
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}

.premium-card {
  background: rgba(74, 85, 104, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.premium-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.premium-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.premium-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.premium-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius);
}

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

.premium-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.premium-btn {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.premium-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Sidebar Feedback Buttons */
.sidebar-feedback-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: auto;
}

.premium-card + .sidebar-feedback-buttons {
  margin-top: 0;
}

.feedback-buttons-right {
  display: flex;
  gap: 12px;
}

.feedback-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feedback-btn:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.feedback-btn i {
  color: var(--text-secondary);
  font-size: 16px;
}

/* Sidebar Countdown Timer Styles */
.sidebar-countdown-timer {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 12px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.sidebar-countdown-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-orange);
  line-height: 1;
  margin-bottom: 1px;
}

.sidebar-countdown-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* Content Area - Plaque 3 */
.content-area {
  flex: 1;
  background: rgba(45, 55, 72, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  justify-content: space-between;
}

/* --- CONSOLIDATED & FINAL SECTION STYLES --- */

/* Final '.section-title' style, merged from multiple definitions. */
.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-top: 18px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 3rem;
}

.section-title.left {
  text-align: left;
}

/* Hero Section (Original) */
.hero {
  padding: 80px 0;
  background: radial-gradient(800px 400px at 85% 10%, rgba(43, 87, 245, .18), transparent), radial-gradient(600px 300px at 10% 10%, rgba(255, 204, 0, .12), transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 18px;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 48px;
  line-height: 1.1;
  margin: 0;
  font-weight: 900
}

.hero h1 .highlight {
  color: var(--acc);
  display: block;
}

.hero-subtitle {
  color: #c3cbdb;
  margin: 20px 0 30px 0;
  font-size: 18px;
  line-height: 1.5
}

/* Final '.hero-buttons' style, last definition wins. */
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

.hero-buttons .btn {
  min-width: 180px;
  padding: 15px 25px;
  font-weight: 600
}

/* Final '.games-section' style. */
.games-section {
  padding: 80px 20px;
  background: transparent;
  margin: 0 -20px;
}

/* Final '.games-grid' style. */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

/* Final '.game-item' styles, merged from multiple definitions. */
.game-item {
  background: var(--card-bg);
  border: 2px solid var(--accent-orange);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.game-item:hover {
  background: var(--hover-bg);
  transform: translateY(-5px);
}

/* Final '.tournaments-section' style. */
.tournaments-section {
  padding: 80px 20px;
  background: transparent;
  margin: 0 -20px;
}

/* Final '.tournaments-grid' style. */
.tournaments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 32px;
  margin-bottom: 60px;
  align-items: stretch;
}

/* Final '.tournament-card' style. */
.tournament-card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: rgba(74, 85, 104, 0.2);
  box-shadow: 0 10px 30px rgba(7, 21, 40, .35);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.tournament-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(7, 21, 40, .45);
}

.tournament-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 19px;
  pointer-events: none;
  outline: 1px solid rgba(42, 74, 112, .55);
  outline-offset: -1px;
  mix-blend-mode: overlay;
}

/* Final '.tournament-header' style. */
.tournament-header {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 10px;
  margin: 10px 10px 0 10px;
}

.tournament-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 40%, rgba(8, 20, 38, .85) 100%);
}

.tournament-header > * {
  position: relative;
  z-index: 2;
}

/* Final '.tournament-status' style. */
.tournament-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tournament-status.published,
.status-published {
  background: rgba(0, 194, 255, 0.2);
  color: var(--accent-blue);
}

.tournament-status.running,
.status-running {
  background: rgba(72, 187, 120, 0.2);
  color: var(--success);
}

.tournament-status.finished,
.status-finished {
  background: rgba(160, 174, 192, 0.2);
  color: var(--text-muted);
}

.tournament-status.cancelled,
.status-cancelled {
  background: rgba(245, 101, 101, 0.2);
  color: var(--error);
}

/* Final '.tournament-game' style, merged from multiple definitions. */
.tournament-game {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Final '.tournament-title' style. */
.tournament-title {
  margin: 4px 0 6px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .2px;
  color: #e6eef7;
  font-weight: 700;
}

/* Final '.tournament-details' style. */
.tournament-details {
  padding: 14px 16px 12px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px
}

.detail-label {
  color: var(--text-muted);
}

.detail-value {
  color: var(--text-primary);
  font-weight: 600
}

/* Final '.tournament-footer' style. */
.tournament-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: rgba(0, 0, 0, 0.2);
  margin-top: auto;
}

/* Final '.participants' style. */
.participants {
  color: var(--text-secondary);
  font-size: 14px
}

/* Final '.partners-section' style. */
.partners-section {
  padding: 80px 20px;
  background: transparent;
  margin: 0 -20px;
}

/* Final '.partners-grid' style. */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

/* Final '.partner-card' style. */
.partner-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s;
}

.partner-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-orange);
}

.partner-card h3,
.partner-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 16px;
}

.partner-card p,
.partner-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Join Section (Original) */
.join-section {
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(43, 87, 245, .1), rgba(255, 204, 0, .1))
}

.join-section h2 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.2
}

.join-section p {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 30px;
  line-height: 1.6
}



.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px
}

.match-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease
}

.match-card:hover {
  background: rgba(255, 255, 255, .05);
  transform: translateY(-2px)
}

.match-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px
}

.match-header .game {
  font-weight: 600;
  color: var(--acc)
}

.match-header .round {
  color: var(--muted);
  font-size: 14px
}

.match-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1
}

.player .name {
  font-weight: 600;
  margin-bottom: 5px
}

.player .score {
  font-size: 24px;
  font-weight: 700;
  color: var(--acc)
}

.vs {
  color: var(--muted);
  font-weight: 600;
  margin: 0 20px
}

.match-status {
  text-align: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(29, 185, 84, .2);
  color: #86efac
}

/* Final '.battle-section' styles */
.battle-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, rgba(255, 82, 0, 0.1), rgba(0, 0, 0, 0.8)), url('/assets/images/spartan.png') center/cover;
  text-align: center;
  margin: 0 -20px;
}

.battle-section h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.battle-section p {
  font-size: 1.25rem;
  color: #ccc;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* --- Remaining Unconflicted Styles --- */

.footer {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  margin-top: 40px
}

/* Prize Management */
.prize-type-selection {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.prize-type-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 16px;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  flex: 1;
}

.prize-type-option:hover {
  background: rgba(0, 194, 255, 0.1);
  border-color: rgba(0, 194, 255, 0.3);
}

.prize-type-option input[type="radio"] {
  display: none;
}

.prize-type-option input[type="radio"]:checked+.prize-type-label {
  color: var(--accent-blue);
}

.prize-type-option input[type="radio"]:checked {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
}

.prize-type-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.prize-type-label i {
  font-size: 16px;
}

.prize-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.prize-coin-suffix {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#totalPrizePool {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(0, 194, 255, 0.1);
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(0, 194, 255, 0.3);
  transition: all 0.3s ease;
}

#totalPrizePool.valid {
  background: rgba(0, 255, 0, 0.1);
  border-color: rgba(0, 255, 0, 0.3);
  color: #00ff00;
}

#totalPrizePool.invalid {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.3);
  color: #ff4444;
}

.prize-coin-input:invalid {
  border-color: #ff4444 !important;
  box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

.prize-coin-input:valid {
  border-color: #00ff00;
  box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
}

/* Main Footer */
.main-footer {
  background: rgba(74, 85, 104, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 70px -20px -20px -20px !important;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: auto;
  flex-shrink: 0;
}

.main-footer .container {
  padding: 40px 24px;
}

.main-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.main-footer .footer-section h3 {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.main-footer .footer-section h4 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.main-footer .footer-section p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.main-footer .social-links {
  display: flex;
  gap: 16px;
}

.main-footer .social-link {
  width: 40px;
  height: 40px;
  background: var(--secondary-bg);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
}

.main-footer .social-link:hover {
  background: var(--accent-blue);
  color: var(--primary-bg);
  transform: translateY(-2px);
}

.main-footer .footer-links {
  list-style: none;
  padding: 0;
}

.main-footer .footer-links li {
  margin-bottom: 12px;
}

.main-footer .footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-footer .footer-links a:hover {
  color: var(--accent-blue);
}

.main-footer .footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.main-footer .footer-copyright {
  color: var(--text-muted);
  font-size: 14px;
}

.main-footer .footer-meta {
  display: flex;
  gap: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Map & Prize Styles */
#map,
#editMap {
  border-radius: 8px !important;
  border: 1px solid #2A3441 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.leaflet-container {
  background: #1A1F2E !important;
}

.leaflet-popup-content-wrapper {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.leaflet-popup-tip {
  background: var(--card-bg) !important;
}

#searchResults,
#editSearchResults {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid #2A3441 !important;
  background: var(--card-bg) !important;
}

#searchResults div,
#editSearchResults div {
  transition: background-color 0.2s ease;
}

#searchResults div:hover,
#editSearchResults div:hover {
  background-color: var(--hover-bg) !important;
}

.prize-item {
  margin-bottom: 10px;
}

.prize-item .btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 60px;
}

.prize-item span {
  font-size: 14px;
  font-weight: 600;
}

.map-container {
  height: 300px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2A3441;
  margin-bottom: 10px;
  overflow: hidden;
}

.map-container .leaflet-container {
  scroll-behavior: auto !important;
}

.map-container .leaflet-container .leaflet-pane {
  overflow: hidden !important;
}

.map-container .leaflet-container .leaflet-map-pane {
  overflow: hidden !important;
}

.map-search-container {
  position: relative;
  margin-bottom: 10px;
}

.map-search-input {
  margin-bottom: 10px;
}

select option {
  background: #242228;
  color: #fff;
}

/* Firefox-specific select styling */
@-moz-document url-prefix() {
  select.form-select {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
  }
  
  select.form-select option {
    background: #242228 !important;
    color: #fff !important;
  }
  
  select.form-select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
  }
}

/* Additional Firefox select styling */
select.form-select {
  appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

select.form-select option {
  background: #242228 !important;
  color: #fff !important;
}

select.form-select option:hover,
select.form-select option:focus,
select.form-select option:checked,
select.form-select option:selected {
  background: #2a2a2a !important;
  color: #fff !important;
}

/* Tournament Form Styles */
.platform-group-hidden,
.team-players-group-hidden,
.prize-remove-btn-hidden {
  display: none;
}

.bracket-explanation-inline {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background: rgba(0, 194, 255, 0.1);
  border-radius: 6px;
}

.total-coins-display {
  margin-top: 10px;
  padding: 8px;
  background: rgba(43, 87, 245, 0.1);
  border: 1px solid rgba(43, 87, 245, 0.3);
  border-radius: 6px;
  display: none;
}

.total-coins-display i {
  color: #FFD700;
  margin-right: 5px;
}

.map-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid #2A3441;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.map-coordinates-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.map-instructions {
  color: #A8B0BF;
  font-size: 0.875rem;
}

.prize-container {
  margin-bottom: 10px;
}

.prize-item-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.prize-place-label {
  font-weight: 600;
  min-width: 85px;
  font-size: 14px;
}

.prize-place-1st {
  color: #FFD700;
}

.prize-place-2nd {
  color: #C0C0C0;
}

.prize-place-3rd {
  color: #CD7F32;
}

.prize-place-4th {
  color: #4A4A4A;
}

.prize-place-5th {
  color: #8B4513;
}

.prize-remove-btn {
  display: none;
}

.prize-remove-btn.visible {
  display: inline-block;
}

.add-prize-btn {
  margin-top: 10px;
}

.prize-instructions {
  color: #A8B0BF;
  font-size: 0.875rem;
  display: block;
  margin-top: 5px;
}

.form-label.required::after {
  content: " *";
  color: #FF6B6B;
  font-weight: bold;
}

/* DateTime Input Styling */
input[type="datetime-local"] {
  color-scheme: dark;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
}

input[type="datetime-local"]:focus {
  border-color: #2B57F5;
  box-shadow: 0 0 0 2px rgba(43, 87, 245, 0.2);
  outline: none;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-color: #2B57F5;
  border-radius: 4px;
  cursor: pointer;
  filter: invert(1);
  padding: 4px;
  margin-left: 8px;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  background-color: #7AA0FF;
}

/* Bracket Explanation Styling */
.bracket-explanation {
  margin-top: 8px;
  padding: 12px;
  background-color: rgba(0, 194, 255, 0.1);
  border: 1px solid rgba(0, 194, 255, 0.3);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

.bracket-explanation h4 {
  margin: 0 0 8px 0;
  color: var(--accent-blue);
  font-size: 16px;
  font-weight: 600;
}

.bracket-explanation p {
  margin: 0;
  color: #A8B0BF;
}

.bracket-explanation ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.bracket-explanation li {
  margin: 4px 0;
  color: #A8B0BF;
}

/* Footer Components */
.newsletter-form {
  display: flex;
  gap: 8px;
}

.newsletter-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 14px;
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.1);
}

.newsletter-btn {
  background: var(--accent-blue);
  color: var(--primary-bg);
  border: none;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
}

/* Community Stats Styling */
.community-stats {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}

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

.stat-number {
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 18px;
}

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

/* Developer Link Styling */
.developer-link {
  color: var(--accent-blue);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.developer-link:hover {
  color: #0099CC;
  text-decoration: underline;
}

/* ========================================
   PLAYER PROFILE PAGE STYLES
   ======================================== */

/* Player Profile Header */
.profile-player-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.3), rgba(29, 37, 56, 0.3));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    margin-top: 70px;
    backdrop-filter: blur(10px);
}

.profile-avatar-section {
    position: relative;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--accent-blue);
    position: relative;
}

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

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--accent-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
}

.profile-status {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--primary-bg);
    border-radius: 20px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--accent-blue);
}

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

.profile-status-indicator.status-active { background: #28a745; }
.profile-status-indicator.status-pending { background: #ffc107; }
.profile-status-indicator.status-banned { background: #dc3545; }
.profile-status-indicator.status-non-active { background: #6c757d; }

.profile-status-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-info {
    flex: 1;
}

.profile-identity {
    margin-bottom: 20px;
}

.profile-handle {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.profile-name {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.profile-role {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-role-badge.role-superadmin { 
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}
.profile-role-badge.role-admin { 
    background: rgba(253, 126, 20, 0.2);
    color: #fd7e14;
    border: 1px solid rgba(253, 126, 20, 0.3);
}
.profile-role-badge.role-host { 
    background: rgba(111, 66, 193, 0.2);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.3);
}
.profile-role-badge.role-streamer { 
    background: rgba(114, 91, 242, 0.2);
    color: #725BF2;
    border: 1px solid rgba(114, 91, 242, 0.3);
}
.profile-role-badge.role-gamer { 
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.profile-stats {
    display: flex;
    gap: 30px;
}

.profile-stat-item {
    text-align: center;
}

.profile-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-blue);
    line-height: 1;
    margin-bottom: 4px;
}

.profile-stat-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Player Profile Details Grid */
.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.profile-detail-card {
    background: rgba(45, 55, 72, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.profile-card-header {
    background: rgba(15, 21, 36, 0.8);
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-card-content {
    padding: 20px;
}

/* Profile Info Items */
.profile-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.profile-info-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 14px;
}

.profile-info-value {
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Profile Coin Balance */
.profile-coin-balance {
    text-align: center;
    margin-bottom: 20px;
}

.profile-coin-amount {
    font-size: 36px;
    font-weight: 700;
    color: #FFD700;
    line-height: 1;
    margin-bottom: 8px;
}

.profile-coin-label {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Profile Social Links */
.profile-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.profile-social-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Steam-specific styling */
.profile-social-link.social-steam {
    background: rgba(0, 100, 150, 0.1);
    border-color: rgba(0, 100, 150, 0.3);
    color: #66C0F4;
}

.profile-social-link.social-steam:hover {
    background: rgba(0, 100, 150, 0.2);
    border-color: #66C0F4;
    color: #66C0F4;
}

/* Profile Bio */
.profile-bio {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Points Calculation Display */
.points-calculation {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.calculation-item {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.calc-count {
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(43, 87, 245, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.calc-points {
    font-weight: 700;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* Profile Teams and Tournaments Lists */
.profile-teams-list, .profile-tournaments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-team-item, .profile-tournament-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.profile-team-info, .profile-tournament-info {
    flex: 1;
}

.profile-team-name, .profile-tournament-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.profile-tournament-game {
    font-size: 12px;
    color: var(--text-muted);
}

.profile-team-role, .profile-tournament-status {
    margin-top: 4px;
}

.profile-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-status-badge.status-published { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.profile-status-badge.status-running { background: rgba(0, 123, 255, 0.2); color: #007bff; }
.profile-status-badge.status-finished { background: rgba(108, 117, 125, 0.2); color: #6c757d; }
.profile-status-badge.status-draft { background: rgba(255, 193, 7, 0.2); color: #ffc107; }

/* Profile Empty State */
.profile-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.profile-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--text-muted);
}

.profile-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Player Profile Responsive Design */
@media (max-width: 768px) {
    .profile-player-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .profile-stats {
        justify-content: center;
        gap: 20px;
    }
    
    .profile-details-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ========================================
   NEWSLETTER SUBSCRIPTIONS PAGE STYLES
   ======================================== */

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

.newsletter-stat-card {
    background: rgba(45, 55, 72, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(10px);
}

.newsletter-stat-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-blue);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

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

.newsletter-stat-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.newsletter-stat-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Newsletter Page Header */
.newsletter-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.newsletter-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.newsletter-page-title-icon {
    font-size: 24px;
    color: #2B57F5;
}

.newsletter-page-title h1 {
    color: #f7f7f7;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.newsletter-subscription-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.newsletter-stats-label {
    color: #A8B0BF;
    font-size: 14px;
    font-weight: 500;
}

.newsletter-stats-amount {
    color: #2B57F5;
    font-size: 20px;
    font-weight: 700;
}

/* Newsletter Table Container */
.newsletter-subscriptions-table-container {
    background: #1D2538;
    border-radius: 12px;
    border: 1px solid #333;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
}

.newsletter-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #0F1524;
    border-bottom: 2px solid #333;
}

.newsletter-table-header h3 {
    color: #f7f7f7;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* Newsletter Table Styling */
.newsletter-subscriptions-table {
    width: 100%;
    border-collapse: collapse;
    background: #1D2538;
}

.newsletter-subscriptions-table thead {
    background: #0F1524;
    border-bottom: 2px solid #333;
}

.newsletter-subscriptions-table th {
    color: #f7f7f7;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    text-align: left;
}

.newsletter-subscriptions-table tbody tr {
    border-bottom: 1px solid #2A3441;
    transition: background-color 0.2s ease;
}

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

.newsletter-subscriptions-table tbody tr:last-child {
    border-bottom: none;
}

.newsletter-subscriptions-table td {
    padding: 16px 20px;
    vertical-align: middle;
}

/* Newsletter User Info Styling */
.newsletter-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.newsletter-user-avatar {
    width: 32px;
    height: 32px;
    background: var(--accent-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.newsletter-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.newsletter-user-name {
    font-weight: 600;
    color: #f7f7f7;
    font-size: 14px;
}

.newsletter-user-handle {
    font-size: 12px;
    color: #A8B0BF;
}

/* Newsletter Email Styling */
.newsletter-email-text {
    color: #f7f7f7;
    font-size: 14px;
    font-weight: 500;
}

/* Newsletter Role Badge Styling */
.newsletter-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.newsletter-role-badge.role-superadmin { 
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}
.newsletter-role-badge.role-admin { 
    background: rgba(253, 126, 20, 0.2);
    color: #fd7e14;
    border: 1px solid rgba(253, 126, 20, 0.3);
}
.newsletter-role-badge.role-host { 
    background: rgba(111, 66, 193, 0.2);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.3);
}
.newsletter-role-badge.role-streamer { 
    background: rgba(114, 91, 242, 0.2);
    color: #725BF2;
    border: 1px solid rgba(114, 91, 242, 0.3);
}
.newsletter-role-badge.role-gamer { 
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.newsletter-role-badge i {
    font-size: 10px;
}

/* Newsletter Date Styling */
.newsletter-subscription-date-cell {
    text-align: right;
}

.newsletter-date-text {
    display: block;
    color: #f7f7f7;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.newsletter-time-text {
    display: block;
    color: #A8B0BF;
    font-size: 12px;
    font-weight: 400;
}

/* Newsletter Status Badge Styling */
.newsletter-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.newsletter-status-badge.status-active {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.newsletter-status-badge.status-inactive {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.newsletter-status-badge i {
    font-size: 10px;
}

/* Newsletter Bonus Badge Styling */
.newsletter-bonus-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.newsletter-bonus-badge.claimed {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.newsletter-bonus-badge.not-claimed {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.newsletter-bonus-badge i {
    font-size: 10px;
}

/* Newsletter Action Buttons */
.newsletter-action-buttons {
    display: flex;
    gap: 8px;
}

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

/* Newsletter Empty State */
.newsletter-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #1D2538;
    border-radius: 0 12px 12px 0;
    border: 1px solid #333;
}

.newsletter-empty-icon {
    font-size: 48px;
    color: #A8B0BF;
    margin-bottom: 20px;
}

.newsletter-empty-title {
    color: #f7f7f7;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.newsletter-empty-description {
    color: #A8B0BF;
    font-size: 16px;
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Newsletter Responsive Design */
@media (max-width: 768px) {
    .newsletter-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .newsletter-subscription-stats {
        align-items: flex-start;
    }
    
    .newsletter-table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .newsletter-subscriptions-table th,
    .newsletter-subscriptions-table td {
        padding: 12px 16px;
    }
    
    .newsletter-subscription-date-cell {
        text-align: left;
    }
    
    .newsletter-date-text,
    .newsletter-time-text {
        display: inline;
    }
    
    .newsletter-time-text {
        margin-left: 8px;
    }
}

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: rgba(0, 194, 255, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: var(--primary-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 194, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: rgba(0, 194, 255, 0.9);
  box-shadow: 0 12px 32px rgba(0, 194, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Form Components (New theme) */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}


.form-help {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

/* Avatar Selection Styles */
.avatar-selection-container {
  margin-top: 15px;
}

.avatar-selection-group {
  margin-bottom: 20px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar-option {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #ff8800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.avatar-option:hover {
  transform: scale(1.05);
  border-color: #00ff00;
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
}

.avatar-option.avatar-selected {
  border-color: #00ff00;
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.4);
  transform: scale(1.05);
}

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

.avatar-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #A8B0BF;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
}

.avatar-upload-group {
  margin-top: 20px;
}

.upload-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.file-name {
  color: #A8B0BF;
  font-size: 14px;
}

.current-avatar-display {
  text-align: center;
  margin-bottom: 20px;
}

.current-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 10px;
  overflow: hidden;
  border: 3px solid #FF5200;
  box-shadow: 0 4px 12px rgba(255, 82, 0, 0.3);
}

/* User Status Styles */
.app-container .dropdown-user-status {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 50px;
  display: inline-block;
  text-transform: uppercase;
}

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

.status-pending {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

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

.status-non-active {
  color: #6B7280;
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.1);
}

.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-select:focus {
  outline: none;
  border-color: #2B57F5;
  box-shadow: 0 0 0 3px rgba(43, 87, 245, 0.1);
}

/* Image Preview */
.image-preview {
  margin-top: 10px;
  text-align: center;
  display: none;
}

.image-preview.show {
  display: block;
}

.preview-img {
  max-width: 200px;
  max-height: 120px;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
}

.preview-error {
  color: var(--error);
  padding: 10px;
  background: rgba(245, 101, 101, 0.1);
  border-radius: 4px;
  border: 1px solid var(--error);
}


/* --- PAGE SPECIFIC STYLES (FINAL VERSIONS) --- */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  margin: 20px 0;
}

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

.hero-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.game-image {
  background-size: cover;
  background-position: center;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.game-title {
  color: var(--text-primary);
  font-weight: 600;
}

.partner-logo-container {
  margin-bottom: 20px;
}

.partner-logo {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.avatar-gradient {
  background: linear-gradient(135deg, #00C2FF, #FF8800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
}

.avatar-gradient.small {
  font-size: 14px;
}

.avatar-gradient.large {
  font-size: 24px;
}

/* Tournaments Page Styles */
.add-tournament-btn {
  background: var(--accent-blue);
  color: var(--primary-bg);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.add-tournament-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 194, 255, 0.4);
}

.tournament-countdown-timer {
  font-family: var(--font-family);
  letter-spacing: 1px;
}

.tournament-game-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  color: #d6e4f4;
  background: rgba(34, 61, 96, .8);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.tournament-game-tag i {
  font-size: 14px;
  color: #00C2FF;
}

.tournament-game-tag .fab {
  font-size: 16px;
}

.tournament-tags {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.tournament-tags .tournament-game-tag {
  position: static;
  margin: 0;
}

/* Banner info tags (match tournament-game-tag styling) */
.platform-icons .banner-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  color: #d6e4f4;
  background: rgba(34, 61, 96, .8);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.platform-icons .banner-platform-separator {
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 6px;
}

/* Players Section */

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

/* Player Card Loading Animation */
.player-card.loading {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: playerCardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.player-card.loading:nth-child(1) { animation-delay: 0.1s; }
.player-card.loading:nth-child(2) { animation-delay: 0.15s; }
.player-card.loading:nth-child(3) { animation-delay: 0.2s; }
.player-card.loading:nth-child(4) { animation-delay: 0.25s; }
.player-card.loading:nth-child(5) { animation-delay: 0.3s; }
.player-card.loading:nth-child(6) { animation-delay: 0.35s; }
.player-card.loading:nth-child(7) { animation-delay: 0.4s; }
.player-card.loading:nth-child(8) { animation-delay: 0.45s; }
.player-card.loading:nth-child(9) { animation-delay: 0.5s; }
.player-card.loading:nth-child(10) { animation-delay: 0.55s; }
.player-card.loading:nth-child(11) { animation-delay: 0.6s; }
.player-card.loading:nth-child(12) { animation-delay: 0.65s; }

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

/* Filter Animation States */
.filters-row {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filters-row.filtering {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Loading Skeleton for Player Cards */
.player-card-skeleton {
  width: 100%;
  height: 140px;
  border-radius: 18px;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes skeletonLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Grid Animation for Filter Changes */
.players-grid.filtering {
  opacity: 0.3;
  transform: scale(0.98);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.players-grid.loading {
  pointer-events: none;
}

/* Filter Input Animations */
.filter-input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-input:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(43, 87, 245, 0.2);
}

.filter-input.loading {
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.2) 25%, 
    rgba(74, 85, 104, 0.3) 50%, 
    rgba(74, 85, 104, 0.2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
}

/* Loading Spinner for Filters */
.filter-loading {
  position: relative;
}

.filter-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(43, 87, 245, 0.3);
  border-top: 2px solid var(--accent-blue);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: spin 1s linear infinite;
}

/* Player Card */
.player-card {
  width: 100%;
  border-radius: 18px;
  background: rgba(74, 85, 104, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 10px 30px rgba(7, 21, 40, .35);
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.player-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(7, 21, 40, .45);
  border-color: rgba(255, 255, 255, 0.2);
}

.player-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Player Profile Avatar */
.profile-player-avatar {
  margin-bottom: 12px;
  position: relative;
}

/* Smaller avatars within player cards only */
.player-card .avatar-image,
.player-card .avatar-placeholder {
  width: 64px;
  height: 64px;
}

.avatar-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #7ad1ff;
  transition: all 0.3s ease;
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(74, 85, 104, 0.3);
  backdrop-filter: blur(15px);
  border: 3px solid var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 136, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.avatar-placeholder i {
  color: var(--accent-orange);
  font-size: 32px;
}

.player-card:hover .avatar-image,
.player-card:hover .avatar-placeholder {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Player Info */
.player-info {
  margin-bottom: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.player-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0;
  color: #ffffff;
  font-family: 'Exo 2', sans-serif;
  line-height: 1.25;
  transition: color 0.3s ease;
}

.player-handle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 0;
  font-weight: 500;
}

.player-role {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Player role variants */
.player-role.role-gamer {
  background: rgba(0, 194, 255, 0.12);
  color: #7ad1ff;
  border: 1px solid rgba(0, 194, 255, 0.25);
}

/* Players page: remove avatar glow and set role-based border colors */
.players-section .avatar-image,
.players-section .avatar-placeholder {
  box-shadow: none !important;
}

.players-section .player-card:hover .avatar-image,
.players-section .player-card:hover .avatar-placeholder {
  box-shadow: none !important;
}

/* Role-based avatar borders */
.players-section .player-card.role-gamer .avatar-image,
.players-section .player-card.role-gamer .avatar-placeholder { 
  border-color: #7ad1ff !important; 
}

.players-section .player-card.role-host .avatar-image,
.players-section .player-card.role-host .avatar-placeholder { 
  border-color: #ffd24d !important; 
}

.players-section .player-card.role-streamer .avatar-image,
.players-section .player-card.role-streamer .avatar-placeholder { 
  border-color: #725BF2 !important; 
}

.players-section .player-card.role-admin .avatar-image,
.players-section .player-card.role-admin .avatar-placeholder { 
  border-color: #7ee2a4 !important; 
}

.players-section .player-card.role-superadmin .avatar-image,
.players-section .player-card.role-superadmin .avatar-placeholder { 
  border-color: #ff9aa5 !important; 
}

.player-role.role-host {
  background: rgba(255, 193, 7, 0.15);
  color: #ffd24d;
  border: 1px solid rgba(255, 193, 7, 0.35);
}

.player-role.role-streamer {
  background: rgba(114, 91, 242, 0.15);
  color: #725BF2;
  border: 1px solid rgba(114, 91, 242, 0.35);
}

.player-role.role-admin {
  background: rgba(40, 167, 69, 0.15);
  color: #7ee2a4;
  border: 1px solid rgba(40, 167, 69, 0.35);
}

.player-role.role-superadmin {
  background: rgba(220, 53, 69, 0.15);
  color: #ff9aa5;
  border: 1px solid rgba(220, 53, 69, 0.35);
}

/* Player Action - Removed view profile button */

/* Superadmin Actions for Player Cards */
.player-card .superadmin-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 99;
}

.player-card:hover .superadmin-actions {
  opacity: 1;
}

.player-card .action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
}

.player-card .edit-btn {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.player-card .edit-btn:hover {
  background: var(--accent-blue);
}

.player-card .delete-btn {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}

.player-card .delete-btn:hover {
  background: var(--error);
}

.player-card .login-as-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.player-card .login-as-btn:hover {
  background: linear-gradient(135deg, #5568d3 0%, #5d3a82 100%);
  transform: scale(1.1);
}

/* Player Status Styling */
.player-status {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 12px;
}

/* Player status variants */
.player-status.status-active {
  background: rgba(40, 167, 69, 0.12);
  color: #7ee2a4;
  border: 1px solid rgba(40, 167, 69, 0.25);
  border-radius: 12px;
}

.player-status.status-inactive,
.player-status.status-banned {
  background: rgba(220, 53, 69, 0.12);
  color: #ff9aa5;
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 12px;
}

.player-status.status-pending {
  background: rgba(255, 193, 7, 0.12);
  color: #ffd24d;
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 12px;
}

/* Matches Section */

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* Match Card Loading Animation */
.match-card.loading {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: matchCardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.match-card.loading:nth-child(1) { animation-delay: 0.1s; }
.match-card.loading:nth-child(2) { animation-delay: 0.15s; }
.match-card.loading:nth-child(3) { animation-delay: 0.2s; }
.match-card.loading:nth-child(4) { animation-delay: 0.25s; }
.match-card.loading:nth-child(5) { animation-delay: 0.3s; }
.match-card.loading:nth-child(6) { animation-delay: 0.35s; }
.match-card.loading:nth-child(7) { animation-delay: 0.4s; }
.match-card.loading:nth-child(8) { animation-delay: 0.45s; }

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

/* Tournament Card Animations */
.tournament-card.loading {
  opacity: 0;
  animation: tournamentCardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tournament-card.loading:nth-child(1) { animation-delay: 0.1s; }
.tournament-card.loading:nth-child(2) { animation-delay: 0.15s; }
.tournament-card.loading:nth-child(3) { animation-delay: 0.2s; }
.tournament-card.loading:nth-child(4) { animation-delay: 0.25s; }
.tournament-card.loading:nth-child(5) { animation-delay: 0.3s; }
.tournament-card.loading:nth-child(6) { animation-delay: 0.35s; }
.tournament-card.loading:nth-child(7) { animation-delay: 0.4s; }
.tournament-card.loading:nth-child(8) { animation-delay: 0.45s; }
.tournament-card.loading:nth-child(9) { animation-delay: 0.5s; }
.tournament-card.loading:nth-child(10) { animation-delay: 0.55s; }
.tournament-card.loading:nth-child(11) { animation-delay: 0.6s; }
.tournament-card.loading:nth-child(12) { animation-delay: 0.65s; }

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

.tournaments-grid.loading {
  pointer-events: none;
}

/* Loading Skeleton for Match Cards */
.match-card-skeleton {
  width: 100%;
  height: 200px;
  border-radius: 18px;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tournament Card Skeleton Loading */
.tournament-card.skeleton {
  width: 100%;
  height: 400px;
  border-radius: 18px;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tournament-card.skeleton .skeleton-header {
  height: 120px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
}

.tournament-card.skeleton .skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  margin: 8px 0;
}

.tournament-card.skeleton .skeleton-line.short {
  width: 60%;
}

.tournament-card.skeleton .skeleton-line.medium {
  width: 80%;
}

.tournament-card.skeleton .skeleton-line.long {
  width: 100%;
}

.tournament-card.skeleton .skeleton-button {
  height: 36px;
  width: 100px;
  border-radius: 18px;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  margin: 8px 4px;
  display: inline-block;
}

.tournament-card.skeleton .skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg, 
    rgba(74, 85, 104, 0.1) 25%, 
    rgba(74, 85, 104, 0.2) 50%, 
    rgba(74, 85, 104, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  margin: 0 2px;
  display: inline-block;
}

/* Grid Animation for Filter Changes */
.tournaments-grid.filtering {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.matches-grid.filtering {
  opacity: 0.3;
  transform: scale(0.98);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.matches-grid.loading {
  pointer-events: none;
}

/* Match Card */
.match-card {
  width: 100%;
  border-radius: 18px;
  background: rgba(74, 85, 104, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 10px 30px rgba(7, 21, 40, .35);
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.match-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(7, 21, 40, .45);
  border-color: rgba(255, 255, 255, 0.2);
}

.match-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Tournament Info */
.match-tournament-info {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.round-info {
  color: #A8B0BF;
  font-size: 12px;
  font-weight: 500;
}

/* Match Participants */
.match-participants {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.participant-a {
  text-align: center;
}

.participant-b {
  text-align: center;
  flex-direction: column-reverse;
}

.participant-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4A5568, #2D3748);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8B0BF;
  font-size: 20px;
  border-radius: 50%;
}

.bye-avatar {
  background: linear-gradient(135deg, #ff8800, #ff6b00);
  color: #000;
  font-weight: 700;
  font-size: 12px;
}

.participant-info {
  margin-bottom: 8px;
  min-width: 0;
}

.participant-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Exo 2', sans-serif;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-handle {
  font-size: 12px;
  color: #A8B0BF;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-score {
  font-size: 24px;
  font-weight: 900;
  color: #ff8800;
  font-family: 'Exo 2', sans-serif;
  min-width: 40px;
  text-align: center;
}

/* VS Separator */
.vs-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 0 8px;
}

.vs-text {
  font-size: 14px;
  font-weight: 700;
  color: #A8B0BF;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.score-display {
  font-size: 18px;
  font-weight: 900;
  color: #ff8800;
  font-family: 'Exo 2', sans-serif;
  background: rgba(255, 136, 0, 0.1);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 136, 0, 0.2);
}

/* Match Footer */
.match-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.match-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.match-status i {
  font-size: 8px;
}

.status-pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-running {
  background: rgba(0, 194, 255, 0.2);
  color: #00c2ff;
  border: 1px solid rgba(0, 194, 255, 0.3);
}

.status-finished {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-cancelled {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.match-time {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A8B0BF;
  font-size: 12px;
  font-weight: 500;
}

.match-time i {
  font-size: 10px;
}

/* Superadmin Actions for Match Cards */
.match-card .superadmin-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 99;
}

.match-card:hover .superadmin-actions {
  opacity: 1;
}

.match-card .action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
}

.match-card .edit-btn {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.match-card .edit-btn:hover {
  background: var(--accent-blue);
}

.match-card .delete-btn {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}

.match-card .delete-btn:hover {
  background: var(--error);
}

/* Hover Effects */
.match-card:hover .participant-avatar {
  transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
  .matches-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .match-participants {
    gap: 12px;
  }
  
  .participant-avatar {
    width: 50px;
    height: 50px;
  }
  
  .participant-name {
    font-size: 14px;
  }
  
  .participant-score {
    font-size: 20px;
  }
  
  .vs-separator {
    min-width: 60px;
  }
  
  .score-display {
    font-size: 16px;
    padding: 6px 10px;
  }
  
  .match-card-link {
    padding: 20px;
  }
}

.status-active {
  background: rgba(72, 187, 120, 0.2);
  color: var(--success);
}

.status-inactive {
  background: rgba(160, 174, 192, 0.2);
  color: var(--text-muted);
}

.status-restricted {
  background: rgba(255, 193, 7, 0.2);
  color: var(--warning);
}

.status-banned {
  background: rgba(245, 101, 101, 0.2);
  color: var(--error);
}

.tournament-game-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tournament-organizer-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tournament-timer {
  position: absolute;
  top: 12px;
  left: 110px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(10, 25, 45, .75);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  color: #d9e6f5;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  border-radius: 8px;
}

.tournament-timer i {
  font-size: 12px;
  color: inherit;
}

/* Ensure icons inherit the dynamic status colors */
.tournament-timer[data-status="finished"] i {
  color: inherit;
}

.tournament-timer[data-status="running"] i {
  color: inherit;
}

.tournament-timer[data-status="cancelled"] i {
  color: inherit;
}

.tournament-timer[data-status="draft"] i {
  color: inherit;
}

/* Blinking animation for LIVE status */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes smoothPulse {
  0% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.4; 
    transform: scale(1.1);
  }
  100% { 
    opacity: 1; 
    transform: scale(1);
  }
}

.timer-status {
  font-weight: 600;
}

.timer-countdown {
  font-family: 'Courier New', monospace;
}

/* Tournament Status Display */
.tournament-status-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.tournament-status-display .status-text {
  font-weight: 600;
}

.tournament-status-display i {
  font-size: 12px;
}

/* Status-specific colors */
.tournament-timer[data-status="finished"] {
  color: #28a745 !important;
}

.tournament-timer[data-status="running"] {
  color: #dc3545 !important;
  font-weight: bold;
}

.tournament-timer[data-status="cancelled"] {
  color: #dc3545 !important;
}

.tournament-timer[data-status="draft"] {
  color: #6c757d !important;
}

.tournament-league-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 194, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 25px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 194, 255, 0.3);
}

.tournament-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
}

.tournament-date-time {
  color: #95a7be;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 10.5px;
  margin: 0;
}

.tournament-meta-separator {
  color: #95a7be;
  font-weight: 800;
  font-size: 10.5px;
  opacity: 0.6;
}

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

.tournament-description {
  margin: 0 0 14px;
  color: #b9c7db;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tournament-actions {
  display: flex;
  align-items: stretch;
}

.tournament-prize {
  background: #ffcc00;
  color: #1e2735;
  font-size: 14px;
  width:50%;
  border: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 10px 0 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.3s ease;
  height: 40px;
}

.tournament-prize:hover {
  background: #ffed4e;
  transform: translateY(-1px);
}

.clickable-prize {
  position: relative;
  overflow: hidden;
}

.clickable-prize::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.clickable-prize:hover::after {
  left: 100%;
}

.clickable-prize:hover {
  background: #ffed4e;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.clickable-prize:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.participation-cost-container {
  position: relative;
}

.participation-cost-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: #A8B0BF;
}

.participation-cost-info i {
  color: #FFD700;
  font-size: 14px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid #333;
  margin-top: 60px;
}

/* Homepage tournaments section header styling */
.homepage-tournaments-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: none;
  margin-top: 60px;
}

.homepage-tournaments-title {
  display: flex;
  flex-direction: column;
}

.homepage-tournaments-subtitle {
  color: #A8B0BF;
  font-size: 16px;
  margin-top: 8px;
}

/* Homepage hosts section header styling */
.homepage-hosts-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: none;
  margin-top: 0px;
}

.homepage-hosts-title {
  display: flex;
  flex-direction: column;
}

.homepage-hosts-subtitle {
  color: #A8B0BF;
  font-size: 16px;
  margin-top: 8px;
}

/* Hosts Grid */
.hosts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

/* Host Card */
.host-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.host-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(7, 21, 40, 0.35);
}


/* Host Avatar */
.host-avatar {
  margin-bottom: 16px;
  position: relative;
}

.host-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffd24d;
  transition: all 0.3s ease;
}

.host-card:hover .host-avatar img {
  border-color: rgba(255, 82, 0, 0.5);
  transform: scale(1.05);
}

/* Host Info */
.host-info {
  margin-bottom: 16px;
}

.host-name {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.host-handle {
  color: #A8B0BF;
  font-size: 14px;
  margin: 0 0 12px 0;
}

.host-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.host-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A8B0BF;
  font-size: 14px;
}

.host-stat i {
  color: #FFD700;
  font-size: 16px;
}

/* Host Badge */
.host-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #FF5200, #FF8800);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(255, 82, 0, 0.3);
}

.host-badge i {
  font-size: 10px;
}

/* Homepage teams section header styling */
.homepage-teams-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: none;
  margin-top: 0px;
}

.homepage-teams-title {
  display: flex;
  flex-direction: column;
}

.homepage-teams-subtitle {
  color: #A8B0BF;
  font-size: 16px;
  margin-top: 8px;
}

/* Teams Grid */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

/* Team Card */
.team-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(7, 21, 40, 0.35);
}

/* Team Logo */
.team-logo {
  margin-bottom: 16px;
  position: relative;
}

.team-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.team-card:hover .team-logo img {
  border-color: rgba(43, 87, 245, 0.5);
  transform: scale(1.05);
}

/* Team Info */
.team-info {
  margin-bottom: 16px;
}

.team-name {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.team-platform {
  color: #A8B0BF;
  font-size: 14px;
  margin: 0 0 12px 0;
}

.team-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.team-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A8B0BF;
  font-size: 14px;
}

.team-stat i {
  color: #2B57F5;
  font-size: 16px;
}

/* Team Badge */
.team-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #2B57F5, #1e3fd4);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(43, 87, 245, 0.3);
}

.team-badge i {
  font-size: 10px;
}

/* Homepage games section header styling */
.homepage-games-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: none;
  margin-top: 0px;
}

.homepage-games-title {
  display: flex;
  flex-direction: column;
}

.homepage-games-subtitle {
  color: #A8B0BF;
  font-size: 16px;
  margin-top: 8px;
}

/* Homepage Games Grid */
.homepage-games .games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

/* Homepage Game Card */
.homepage-games .game-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.homepage-games .game-card:hover {
  transform: translateY(-5px);
}

/* Game Image Container */
.game-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.game-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF5200, #FF8800);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.game-image-placeholder i {
  font-size: 3rem;
  color: white;
}

.game-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Game Info */
.homepage-games .game-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.game-title {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.game-platform-info {
  margin-bottom: 12px;
}

.game-platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-stats {
  margin-top: auto;
}

.game-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A8B0BF;
  font-size: 14px;
}

.game-stat i {
  color: #FFD700;
  font-size: 16px;
}

/* Banner action buttons */
.banner-join-btn {
  min-width: 180px;
  padding: 12px 24px;
  background: #ffcc00;
  color: #1e2735;
  border: none;
  font-weight: 700;
  font-size: 16px;
}

.banner-join-btn:hover {
  background: #ffed4e;
  transform: translateY(-1px);
}

.banner-join-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.banner-join-btn:disabled:hover {
  background: #ffcc00;
  transform: none;
}

/* Ensure join button stays yellow when combined with .btn base styles */
.app-container .btn.banner-join-btn {
  background: #ffcc00;
  color: #1e2735;
  border: none;
}

.app-container .btn.banner-join-btn:hover {
  background: #ffed4e;
}

.app-container .btn.banner-join-btn:disabled,
.app-container .btn.banner-join-btn:disabled:hover {
  background: #ffcc00;
}

.banner-exit-btn {
  min-width: 180px;
  padding: 12px 24px;
  background: #dc3545;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.banner-exit-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

.banner-login-btn {
  min-width: 180px;
  padding: 12px 24px;
  background: #2B57F5;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 16px;
}

.banner-login-btn:hover {
  background: #1e3fd4;
  transform: translateY(-1px);
}

.banner-participate-btn {
  min-width: 180px;
  padding: 12px 24px;
  background: #ffcc00;
  color: #1e2735;
  border: none;
  font-weight: 700;
  font-size: 16px;
}

.banner-participate-btn:hover {
  background: #ffed4e;
  transform: translateY(-1px);
}

/* Ensure participate button stays yellow when combined with .btn base styles */
.app-container .btn.banner-participate-btn {
  background: #ffcc00;
  color: #1e2735;
  border: none;
}

.app-container .btn.banner-participate-btn:hover {
  background: #ffed4e;
}

.banner-how-it-works-btn {
  min-width: 180px;
  padding: 12px 24px;
  font-size: 16px;
}

.banner-actions {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Banner Games Section */
.banner-games {
  margin-top: 30px;
  padding: 0;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.banner-game-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  transition: all 0.3s ease;
  cursor: pointer;
}

.banner-game-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.banner-game-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #1D2538;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff8800;
  font-size: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.banner-game-placeholder:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: #2A3441;
}

/* Active game icon indication */
.banner-game-icon.active,
.banner-game-placeholder.active {
  border: 2px solid #ff8800;
  box-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
  transform: translateY(-2px);
}

.banner-game-icon.active:hover,
.banner-game-placeholder.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255, 136, 0, 0.7);
}

/* Banner fade animations */
.banner-fade-out {
  animation: bannerFadeOut 0.2s ease-out forwards;
}

.banner-fade-in {
  animation: bannerFadeIn 0.2s ease-in forwards;
}

@keyframes bannerFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes bannerFadeIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Video crossfade animation */
.video-fade-out {
  animation: videoFadeOut 0.25s ease-out forwards;
}

.video-fade-in {
  animation: videoFadeIn 0.3s ease-in forwards;
}

@keyframes videoFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes videoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

.page-title i {
  font-size: 24px;
  color: #ff8800;
}

.page-title h1 {
  color: #f7f7f7;
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.page-header-label {
  color: #A8B0BF;
  font-size: 14px;
  font-weight: 500;
}

.page-header-value {
  color: #ff8800;
  font-size: 18px;
  font-weight: 700;
}

.prize-amount {
  font-weight: 800;
}

.coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8b8 0%, #ffe56b 38%, #ffc600 60%, #f2b800 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  position: relative;
}

.coin::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  filter: blur(.5px);
}

.tournament-actions {
  display: flex;
  gap: 0px;
  margin-top: auto;
}

.tournament-actions form {
  width: 50%;
}

.tournament-join-btn {
  background: #FFD700;
  color: #000;
  width: 100%;
  height: 40px;
  border-radius: 10px 0 0 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  flex: 1;
}

.tournament-join-btn:hover {
  background: #FFC107;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.tournament-join-btn-disabled {
  background: #6c757d !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.6;
  border: 2px solid rgba(108, 117, 125, 0.3) !important;
  box-shadow: none !important;
}

.tournament-join-btn-disabled:hover {
  background: #6c757d !important;
  transform: none !important;
  box-shadow: none !important;
}

.tournament-info-btn {
  background: var(--accent-blue);
  color: white;
  width: 50%;
  height: 40px;
  border-radius: 0 10px 10px 0;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(0, 194, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 194, 255, 0.3);
  flex: 1;
}

.tournament-info-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.4);
}

/* When More Info button is the only button visible, make it full width with rounded corners */
.tournament-info-btn:only-child {
  width: 100%;
  border-radius: 10px;
}

.tournament-participants {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tournament-avatars {
  display: flex;
  gap: -8px;
  align-items: center;
}

.tournament-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #7ad1ff;
  object-fit: cover;
  background: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  margin-left: -12px;
}

.tournament-avatar:first-child {
  margin-left: 0;
}

.tournament-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tournament-avatar.empty-avatar {
  background: rgba(168, 176, 191, 0.2);
  border: 2px solid rgba(168, 176, 191, 0.3);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}

/* Winner avatar styling */
.tournament-avatar.winner-1st {
  border: 2px solid #FFD700;
}

.tournament-avatar.winner-2nd {
  border: 2px solid #C0C0C0;
}

.tournament-avatar.winner-3rd {
  border: 2px solid #CD7F32;
}

.tournament-avatar.winner-4th {
  border: 2px solid #4A4A4A;
}

/* Tournament avatar link styling */
.tournament-avatar {
  text-decoration: none;
  transition: transform 0.2s ease;
}

.tournament-avatar:hover {
  transform: scale(1.05);
}

.tournament-slots {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  margin-left: 15px;
}

.participants-info {
  color: var(--text-muted);
  font-size: 14px;
}

.view-details-btn {
  background: var(--accent-blue);
  color: var(--primary-bg);
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.view-details-btn:hover {
  background: #0099CC;
  transform: translateY(-1px);
  color: var(--primary-bg);
  text-decoration: none;
}

.tournament-card .superadmin-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 99;
}

.tournament-card:hover .superadmin-actions {
  opacity: 1;
}

.tournament-card .action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 14px;
}

.tournament-card .edit-btn {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.tournament-card .edit-btn:hover {
  background: var(--accent-blue);
}

.tournament-card .delete-btn {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}

.tournament-card .delete-btn:hover {
  background: var(--error);
}

.tournament-card .status-btn {
  background: rgba(255, 193, 7, 0.8);
  color: #1e2735;
}

.tournament-card .status-btn:hover {
  background: var(--acc);
  color: black;
}

/* Tournament Organizer Links */
.tournament-organizer-link {
  position: absolute;
  top: 12px;
  left: 60px;
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
  text-decoration: none;
}

.tournament-organizer-link:hover {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.tournament-organizer-text-link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 600;
}

.tournament-organizer-text-link:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

/* Status Modal Styles */
.status-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.status-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--card-bg);
}

.status-option:hover {
  border-color: var(--accent-blue);
  background: rgba(43, 87, 245, 0.05);
}

.status-option.selected {
  border-color: var(--accent-blue);
  background: rgba(43, 87, 245, 0.1);
}

.status-option input[type="radio"] {
  margin: 0 12px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent-blue);
}

.status-option-content {
  flex: 1;
}

.status-option-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.status-option-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: var(--card-bg);
  border-radius: 16px;
  border: 2px dashed var(--border-color);
}

.empty-icon {
  font-size: 4rem;
  color: var(--accent-blue);
  margin-bottom: 20px;
}

.empty-title {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.empty-description {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 0;
}

/* Games Page Styles */
.platform-badge {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.platform-badge.pc {
  background: rgba(255, 82, 0, 0.9);
  color: white;
}

.platform-badge.playstation {
  background: rgba(0, 102, 204, 0.9);
  color: white;
}

.platform-badge.xbox {
  background: rgba(16, 124, 16, 0.9);
  color: white;
}

.platform-badge.nintendo {
  background: rgba(230, 0, 18, 0.9);
  color: white;
}

.platform-badge.mobile {
  background: rgba(52, 168, 83, 0.9);
  color: white;
}

.platform-badge.unknown {
  background: rgba(168, 176, 191, 0.9);
  color: white;
}

.platform-display {
  color: #A8B0BF;
  font-size: 0.875rem;
  background: rgba(255, 82, 0, 0.1);
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 82, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
}

.platform-display:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.platform-display.pc {
  color: #FF5200;
  background: rgba(255, 82, 0, 0.15);
  border-color: rgba(255, 82, 0, 0.4);
}

.platform-display.playstation {
  color: #0066CC;
  background: rgba(0, 102, 204, 0.15);
  border-color: rgba(0, 102, 204, 0.4);
}

.platform-display.xbox {
  color: #107C10;
  background: rgba(16, 124, 16, 0.15);
  border-color: rgba(16, 124, 16, 0.4);
}

.platform-display.nintendo {
  color: #E60012;
  background: rgba(230, 0, 18, 0.15);
  border-color: rgba(230, 0, 18, 0.4);
}

.platform-display.mobile {
  color: #34A853;
  background: rgba(52, 168, 83, 0.15);
  border-color: rgba(52, 168, 83, 0.4);
}

.platform-display.unknown {
  color: #A8B0BF;
  background: rgba(168, 176, 191, 0.15);
  border-color: rgba(168, 176, 191, 0.4);
}

.tournament-btn {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 194, 255, 0.3);
}

.tournament-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 194, 255, 0.4);
}

.game-platform-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 120px;
  justify-content: flex-end;
}

.game-platform-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.game-platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-actions {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-card:hover .game-actions {
  opacity: 1;
}

.btn-edit,
.btn-delete {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-edit:hover {
  background: rgba(255, 136, 0, 0.9);
}

.btn-delete {
  background: rgba(220, 53, 69, 0.9);
}

.btn-delete:hover {
  background: rgba(220, 53, 69, 1);
}

.btn-edit i,
.btn-delete i {
  font-size: 0.8rem;
}

.game-card-wrapper {
  display: flex;
  flex-direction: column;
}

.game-card:hover .game-actions {
  opacity: 1 !important;
}

.game-card {
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px);
}

.superadmin-badge {
  background: linear-gradient(135deg, #FF5200, #FF8800);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Register & Login Page Styles */
.register-hero,
.login-hero {
  background: linear-gradient(135deg, rgba(26, 32, 44, 0.95), rgba(45, 55, 72, 0.9)), url('/assets/images/homebg.png') center/cover;
  min-height: 50vh;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

.register-hero-content,
.login-hero-content {
  text-align: center;
  color: white;
  max-width: 800px;
  margin: 0 auto;
}

.register-title,
.login-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FFFFFF, #00C2FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.register-subtitle,
.login-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
}

.register-form-section,
.login-form-section {
  padding: 60px 0;
  background: var(--primary-bg);
}

.register-form-container,
.login-form-container {
  max-width: 500px;
  margin: 0 auto;
}

.register-form-card,
.login-form-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.register-btn,
.login-btn {
  width: 100%;
  background: var(--accent-blue);
  color: var(--primary-bg);
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.register-btn:hover,
.login-btn:hover {
  background: #0099CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 194, 255, 0.4);
}

.avatar-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.avatar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-option input[type="radio"] {
  display: none;
}

.avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-preview.default {
  background: var(--secondary-bg);
  color: var(--text-muted);
  font-size: 24px;
}

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

.avatar-option input[type="radio"]:checked+.avatar-preview {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.3);
}

.avatar-label {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Tournament Banner */
.tournament-banner {
  padding: 100px 0 0px 0;
  margin-bottom: 0px;
  position: relative;
  overflow: visible;
  min-height: 400px;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 10px 10px 0px 0px;
  background: transparent;
}

.tournament-banner::before {
  display: none;
}

.mask-vertical {
  overflow: hidden;
    border-radius: 0 10px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  max-width: 60vw;
  z-index:-1;
}

.mask-horizontal {
  -webkit-mask-image: linear-gradient( to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient( to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.vid {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.banner-container {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.banner-left {
  display: flex;
  justify-content: center;
}

.game-cover {
  position: relative;
  width: 100%;
  height: 465px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.3s ease;
}

.game-cover:hover {
  transform: perspective(1000px) rotateY(0deg);
}

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

.banner-center {
  text-align: left;
  color: white;
}

.banner-stats-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 5px;
}

.member-count {
  color: #E0E0E0;
}

.platform-icons {
  display: flex;
  gap: 12px;
}

.platform-icons i {
  font-size: 18px;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.banner-content {
  margin-bottom: 30px;
}

.banner-heading {
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 10px 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 900px;
}

.banner-subheading {
  font-size: 18px;
  color: #E0E0E0;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  max-width: 50%;
}

.banner-stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  align-items: center;
  padding: 15px 15px 15px 0;
}

.banner-stats-bar::before {
  content: "";
  position: absolute;
  left: -5%;
  width: 105%;
  height: 100%;
  z-index: -2;
  border-radius: 12px;
  background: linear-gradient( to right, rgba(88, 0, 160, .18), rgba(20, 30, 70, .12)), rgba(10, 14, 30, .45);
  backdrop-filter: blur(30px) saturate(135%) contrast(115%) brightness(88%);
  -webkit-backdrop-filter: blur(30px) saturate(135%) contrast(115%) brightness(88%);
}

.banner-stats-bar::after {
  content: "";
  position: absolute;
  left: -5%;
  width: 105%;
  height: 100%;
  z-index: -1;
  border-radius: 12px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.banner-stats-left {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 30px;
}

.tournament-stat-item {
  display: flex;
  align-items: start;
  gap: 15px;
}

.tournament-stat-item i {
  font-size: 28px;
  color: #B0B0B0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  margin-bottom: 0px;
}

.stat-label {
  font-size: 16px;
  color: #B0B0B0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 600;
  text-transform: uppercase;
}

.banner-stats-right {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 20px;
}

.banner-stats-right .player-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 0;
}

.banner-stats-right .player-number {
  font-size: 28px;
  font-weight: 600;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  margin-bottom: 0px;
}

.banner-stats-right .player-label {
  font-size: 16px;
  color: #B0B0B0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.banner-stats-right .player-avatars {
  display: flex;
  align-items: center;
}

.banner-player-avatar img{
background: #202020;
}

.banner-stats-right .banner-player-avatar {
  width: 55px;
  height: 55px;
  border-radius: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  border: 2px solid #7ad1ff; /* Default gamer color */
}

/* Role-based avatar borders for homepage banner - matching players page */
.banner-stats-right .banner-player-avatar.role-gamer {
  border-color: #7ad1ff !important;
}

.banner-stats-right .banner-player-avatar.role-host {
  border-color: #ffd24d !important;
}

.banner-stats-right .banner-player-avatar.role-streamer {
  border-color: #725BF2 !important;
}

.banner-stats-right .banner-player-avatar.role-admin {
  border-color: #7ee2a4 !important;
}

.banner-stats-right .banner-player-avatar.role-superadmin {
  border-color: #ff9aa5 !important;
}

/* Avatar link styling */
.banner-stats-right .banner-player-avatar {
  text-decoration: none;
  transition: transform 0.2s ease;
}

.banner-stats-right .banner-player-avatar:hover {
  transform: scale(1.05);
}

.banner-stats-right .banner-player-avatar.avatar-2,.banner-stats-right .banner-player-avatar.avatar-3,.banner-stats-right .banner-player-avatar.avatar-4,.banner-stats-right .banner-player-avatar.avatar-5,.banner-stats-right .banner-player-avatar.avatar-6,.banner-stats-right .banner-player-avatar.avatar-7{
margin-left: -10px;
}

.banner-stats-right .banner-player-avatar.avatar-1{
z-index: 6;
}

.banner-stats-right .banner-player-avatar.avatar-2{
z-index: 5;
}

.banner-stats-right .banner-player-avatar.avatar-3{
z-index: 4;
}

.banner-stats-right .banner-player-avatar.avatar-4{
z-index: 3;
}

.banner-stats-right .banner-player-avatar.avatar-5{
z-index: 2;
}


/* Tournament Info Items */
.tournament-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.tournament-info-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.tournament-info-item i {
  font-size: 16px;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.tournament-info-item span {
  font-size: 12px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Inline Countdown within tournament-info-item */
.tournament-info-item .tournament-countdown-label {
  font-size: 12px;
  color: #B0B0B0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tournament-info-item .tournament-countdown-time {
  font-size: 14px;
  color: white;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.tournament-info-item .tournament-countdown-time span {
  color: #FFD700;
}

.tournament-info-item i {
  font-size: 12px;
  color: #FFD700;
}

/* Tournament Author */
.tournament-author {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.author-text {
  font-size: 12px;
  color: #B0B0B0;
  font-weight: 500;
}

.author-text strong {
  color: #FFD700;
  font-weight: 700;
}

.author-link {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

.author-link:hover {
  color: #FFD700;
  text-decoration: none;
}

.author-link:hover strong {
  color: #FFFFFF;
}

/* Prize Items in Banner */
.prize-item .stat-number {
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.prize-text {
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: relative;
  cursor: help;
  display: inline-block !important;
}


/* Tooltip styles */
.prize-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.prize-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.prize-tooltip.show {
  opacity: 1;
  visibility: visible;
}

.prize-item .stat-label {
  font-size: 11px;
  line-height: 1.2;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prize-item i.fas.fa-trophy {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.3));
}

.banner-stats-right .banner-player-avatar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: 12px;
  filter: brightness(1.3) saturate(1.4);
  z-index: 1;
}

.banner-stats-right .banner-player-avatar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 1;
}

/* Modal System */
.app-container .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container .modal-overlay.active {
  opacity: 1;
  visibility: visible;
  animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-container .modal-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  max-width: 600px;
  position: relative;
  transform: scale(0.8) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.app-container .modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

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

@keyframes modalFadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

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

.app-container .modal-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.app-container .modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 87, 245, 0.5), transparent);
}

.app-container .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-container .modal-title i {
  color: var(--pri);
  font-size: 18px;
}

.app-container .modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.app-container .modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  transform: scale(1.05);
}

.app-container .modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
  color: var(--white);
  line-height: 1.6;
}

.app-container .modal-body::-webkit-scrollbar {
  width: 6px;
}

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

.app-container .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.app-container .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox scrollbar styling for modal */
.app-container .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.app-container .modal-footer {
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;
}

.app-container .modal-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 87, 245, 0.3), transparent);
}

.app-container .modal-container.small {
  max-width: 400px;
}

.app-container .modal-container.medium {
  max-width: 600px;
}

.app-container .modal-container.large {
  max-width: 800px;
}

.app-container .modal-container.extra-large {
  max-width: 1000px;
}

.app-container .modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--muted);
}

.app-container .modal-loading i {
  margin-right: 12px;
  animation: spin 1s linear infinite;
}

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

/* --- RESPONSIVE STYLES --- */

/* Hide mobile navigation elements on desktop */
.hamburger-menu {
  display: none;
}

.mobile-nav-dropdown {
  display: none;
}

@media (max-width: 1200px) {
  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .main-layout {
    flex-direction: column;
    gap: var(--gap);
  }
  .sidebar {
    width: 100%;
    position: static;
  }
  .content-area {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
    gap: 0;
  }
  .sidebar {
    display: none;
  }
  .content-area {
    min-height: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .main-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .main-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .tournaments-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  .banner-container {
    grid-template-columns: 200px 1fr;
    gap: 30px;
  }
  .banner-heading {
    font-size: 36px;
  }
  .banner-stats-bar {
    gap: 30px;
  }
  .banner-stats-right .player-number {
    font-size: 40px;
  }
  .banner-stats-right .banner-player-avatar {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 768px) {
  .top-bar {
    padding: 8px var(--gap);
  }
  .top-bar-content {
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Mobile action buttons - show only plus icon */
  .action-btn.notification-style i {
    display: none;
  }
  
  .action-btn.notification-style span {
    display: none;
  }
  
  .action-btn.notification-style::before {
    content: '+';
    font-size: 16px;
    font-weight: normal;
    color: var(--text-secondary);
  }
  
  .top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .top-bar-right {
    width: auto;
    justify-content: flex-end;
    gap: 8px;
  }
  .breadcrumbs {
    display: none;
  }
  .logo-square {
    font-size: 12px;
  }
  
  /* Show mobile navigation elements on mobile */
  .hamburger-menu {
    display: flex;
  }
  
  .mobile-nav-dropdown {
    display: block;
  }
  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  .tournaments-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .register-title,
  .login-title {
    font-size: 2.5rem;
  }
  .register-form-card,
  .login-form-card {
    padding: 30px 20px;
  }
  .avatar-selection {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .page-header-info {
    align-items: flex-start;
  }
  .banner-container {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .banner-left {
    order: 2;
  }
  .banner-center {
    order: 1;
  }
  .banner-right {
    order: 3;
    height: 200px;
  }
  .banner-heading {
    font-size: 28px;
  }
  .banner-stats-bar {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .banner-stats-right {
    justify-content: center;
    gap: 15px;
  }
  .banner-stats-right .player-number {
    font-size: 36px;
  }
  .banner-stats-right .banner-player-avatar {
    width: 45px;
    height: 45px;
  }
  .modal-container {
    margin: 10px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  .modal-header {
    padding: 20px 20px 12px 20px;
  }
  .modal-body {
    padding: 20px;
    max-height: 50vh;
  }
  .modal-footer {
    padding: 12px 20px 20px 20px;
    flex-direction: column;
    gap: 8px;
  }
  .app-container .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Mobile Navigation Styles */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: rgba(74, 85, 104, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .hamburger-menu:hover {
    background: rgba(0, 194, 255, 0.2);
    border-color: rgba(0, 194, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .hamburger-line {
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
  }
  
  .hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  .mobile-nav-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .mobile-nav-dropdown.show {
    opacity: 1;
    visibility: visible;
  }
  
  .mobile-nav-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: rgba(45, 55, 72, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 20px;
  }
  
  .mobile-nav-dropdown.show .mobile-nav-content {
    transform: translateX(0);
  }
  
  .mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
  }
  
  .mobile-nav-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
  }
  
  .mobile-nav-close {
    aspect-ratio: 1/1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .mobile-nav-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .mobile-nav-section {
    margin-bottom: 30px;
  }
  
  .mobile-nav-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    min-height: 44px;
  }
  
  .mobile-nav-item:hover {
    background: rgba(0, 194, 255, 0.2);
    border-color: rgba(0, 194, 255, 0.4);
    transform: translateX(4px);
  }
  
  .mobile-nav-item.active {
    background: rgba(0, 194, 255, 0.3);
    border-color: rgba(0, 194, 255, 0.6);
  }
  
  .mobile-nav-icon {
    font-size: 16px;
    color: var(--text-secondary);
    width: 20px;
    text-align: center;
  }
  
  .mobile-nav-item.active .mobile-nav-icon {
    color: var(--accent-blue);
  }
  
  .mobile-nav-text {
    font-size: 16px;
    font-weight: 500;
    flex: 1;
  }
  
  .mobile-nav-badge {
    background: var(--accent-blue);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
  }
  
  .mobile-nav-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
  }
  
  .mobile-nav-btn {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
  }
  
  .mobile-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }
  
  .mobile-nav-btn.primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
    border-color: transparent;
  }
  
  .mobile-nav-btn.primary:hover {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-blue));
  }
  
  /* Tournament Banner Mobile Styles */
  .tournament-banner {
    padding-top: 50px;
  }
  
  .banner-container {
    max-width: 100%;
  }
  
  .banner-subheading {
    max-width: 100%;
  }
  
  .mask-vertical {
    max-width: 100vw;
    height: 100vw;
  }
  
  .mask-horizontal {
    width: 100%;
    height: 100%;
  }
  
  .vid {
    height: 100%;
  }
  
  /* Mobile Banner Layout Reordering */
  .banner-left {
    display: none;
  }
  
  .banner-stats-left {
    display: none;
  }
  
  .banner-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .banner-center {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
  
  .banner-content {
    order: 1;
  }
  
  .banner-stats-top {
    order: 2;
  }
  
  .banner-games {
    order: 3;
    margin-top: 0;
    margin-bottom: 20px;
  }
  
  .banner-actions {
    order: 4;
  }
  
  .banner-stats-bar {
    order: 5;
    padding-left: 15px;
  }
  
  .banner-stats-bar::before,.banner-stats-bar::after {
    width: 100%;
    left: 0;
  }
  
  /* Make buttons 100% width on mobile */
  .banner-actions .btn {
    width: 100%;
  }
  
  /* Show 4 avatars in banner-stats-right on mobile */
  .banner-stats-right .player-avatars {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Hide extra avatars beyond the first 5 on mobile */
  .banner-stats-right .player-avatars .banner-player-avatar:nth-child(n+6) {
    display: none;
  }
  
  /* Container full width on mobile */
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  /* Homepage section headers mobile layout */
  .homepage-tournaments-header,
  .homepage-games-header,
  .homepage-hosts-header,
  .homepage-teams-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .homepage-hosts-header {
    padding: 0;
  }
  
  .homepage-tournaments-title,
  .homepage-games-title,
  .homepage-hosts-title,
  .homepage-teams-title {
    order: 1;
  }
  
  .homepage-tournaments-header .btn,
  .homepage-games-header .btn,
  .homepage-hosts-header .btn,
  .homepage-teams-header .btn {
    order: 2;
    width: auto;
    justify-content: center;
  }
  
  /* Homepage horizontal scrolling sections - only for homepage sections */
  .homepage-tournaments .tournaments-grid,
  .homepage-games .games-grid,
  .homepage-hosts .hosts-grid,
  .homepage-teams .teams-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 0 20px;
    margin: 0 -20px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .homepage-tournaments .tournaments-grid::-webkit-scrollbar,
  .homepage-games .games-grid::-webkit-scrollbar,
  .homepage-hosts .hosts-grid::-webkit-scrollbar,
  .homepage-teams .teams-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .homepage-tournaments .tournament-card,
  .homepage-games .game-card-wrapper,
  .homepage-hosts .host-card,
  .homepage-teams .team-card {
    flex: 0 0 80vw;
    min-width: 80vw;
  }
  
  /* Normal grid layout for standalone games-grid on mobile (like games page) */
  .games-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* Hide user name on mobile */
  .user-name-small {
    display: none;
  }
  
  /* Mobile Premium Card */
  .mobile-nav-premium-card {
    margin-top: 20px;
    padding: 30px 0 0 0;
  }
  
  .mobile-nav-premium-card .premium-card {
    margin-top: 0;
    padding: 16px;
    background: rgba(74, 85, 104, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .mobile-nav-premium-card .premium-logo {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
  }
  
  .mobile-nav-premium-card .premium-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .mobile-nav-premium-card .premium-desc {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .mobile-nav-premium-card .premium-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .mobile-nav-premium-card .sidebar-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .mobile-nav-premium-card .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  
  .mobile-nav-premium-card .countdown-number {
    font-size: 12px;
    font-weight: 700;
    color: #FFD700;
  }
  
  .mobile-nav-premium-card .countdown-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Mobile Feedback Buttons */
  .mobile-nav-feedback-buttons {
    margin-top: 20px;
    padding: 0 0 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .mobile-feedback-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 85, 104, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .mobile-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .mobile-feedback-btn i {
    font-size: 16px;
  }
  
  .mobile-feedback-buttons-right {
    display: flex;
    gap: 12px;
  }
  
  .mobile-feedback-btn.contact-btn:hover {
    background: rgba(0, 194, 255, 0.2);
    border-color: rgba(0, 194, 255, 0.4);
    color: var(--accent-blue);
    box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .mobile-feedback-btn.bug-btn:hover {
    background: rgba(255, 82, 0, 0.2);
    border-color: rgba(255, 82, 0, 0.4);
    color: var(--accent-orange);
    box-shadow: 0 6px 20px rgba(255, 82, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .mobile-feedback-btn.suggestion-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
    color: #FFD700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .modal-body .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* --- NOTIFICATION SYSTEM STYLES --- */
.notification {
  margin-bottom: 10px;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  max-width: 400px;
  word-wrap: break-word;
  position: relative;
}

.notification.show {
  transform: translateX(0);
}

.notification.hide {
  transform: translateX(100%);
}

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

.notification-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-symbol {
  font-size: 16px;
}

.notification-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
}

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

.notification-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-btn.primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.notification-btn.primary:hover {
  background: rgba(255, 255, 255, 0.3);
}

.notification-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.notification-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.notification-close {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Notification type colors */
.notification-success {
  background: #28a745;
  color: white;
}

.notification-error {
  background: #dc3545;
  color: white;
}

.notification-warning {
  background: #ffc107;
  color: #212529;
}

.notification-info {
  background: #17a2b8;
  color: white;
}

.notification-persistent {
  background: #6f42c1;
  color: white;
}

/* Original notification system action buttons */
.notification-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.notification-btn.primary {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.notification-btn.primary:hover {
  background: rgba(255, 255, 255, 0.4);
}

.notification-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.notification-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Notification Dropdown Styles */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  margin-top: 8px;
}

.notification-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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

.notification-dropdown-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-dropdown-header-actions {
  display: flex;
  gap: 8px;
}

.notification-dropdown-header-actions button {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown-header-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.notification-dropdown-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

.notification-dropdown-loading,
.notification-dropdown-empty,
.notification-dropdown-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.notification-dropdown-loading i {
  font-size: 18px;
  color: var(--accent-blue);
}

.notification-dropdown-empty i {
  font-size: 24px;
  color: var(--text-muted);
}

.notification-dropdown-error i {
  font-size: 18px;
  color: var(--error);
}

.notification-dropdown-item {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
  position: relative;
}

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

.notification-dropdown-item.unread {
  background: rgba(0, 194, 255, 0.05);
  border-left: 3px solid var(--accent-blue);
}

.notification-dropdown-item.read {
  opacity: 0.7;
}

.notification-dropdown-item-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.notification-dropdown-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-dropdown-item.unread .notification-dropdown-item-icon {
  background: rgba(0, 194, 255, 0.2);
  color: var(--accent-blue);
}

.notification-dropdown-item.read .notification-dropdown-item-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.notification-dropdown-item-icon i {
  font-size: 14px;
}

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

.notification-dropdown-item-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 14px;
}

.notification-dropdown-item-message {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.notification-dropdown-item-time {
  color: var(--text-muted);
  font-size: 12px;
}

.notification-dropdown-item-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.notification-dropdown-item-controls button {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.notification-dropdown-item-controls button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.notification-dropdown-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-dropdown-action-btn {
  padding: 6px 12px;
  background: rgba(0, 194, 255, 0.1);
  border: 1px solid rgba(0, 194, 255, 0.3);
  border-radius: 6px;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-dropdown-action-btn:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: var(--accent-blue);
}

.notification-dropdown-action-btn.primary {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.notification-dropdown-action-btn.primary:hover {
  background: #0099cc;
  border-color: #0099cc;
}

.notification-dropdown-action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

.notification-dropdown-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.notification-dropdown-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.notification-dropdown-view-all-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.notification-dropdown-view-all-link:hover {
  color: #0099cc;
  text-decoration: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .notification-dropdown {
    width: 320px;
    max-width: 95vw;
  }
  
  .notification-dropdown-item {
    padding: 12px 16px;
  }
  
  .notification-dropdown-item-header {
    gap: 8px;
  }
  
  .notification-dropdown-item-icon {
    width: 28px;
    height: 28px;
  }
  
  .notification-dropdown-item-title {
    font-size: 13px;
  }
  
  .notification-dropdown-item-message {
    font-size: 12px;
  }
}

/* Password field styles */
.password-field-container {
  position: relative;
  flex: 1;
}

.password-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}

.btn-icon {
  padding: 4px;
  background: none;
  border: none;
  color: #A8B0BF;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.btn-icon:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Tournament Tabs Section */
.tournament-tabs-section {
  padding: 60px 0;
  background: transparent;
}

.tournament-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tournament-tab {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 15px 30px;
  color: #e6eef7;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tournament-tab:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.tournament-tab.active {
  background: rgba(43, 87, 245, 0.2);
  border-color: rgba(43, 87, 245, 0.3);
}

.tournament-tab-content {
  position: relative;
}

.tab-pane {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 40px;
  color: #e6eef7;
  display: none;
}

.tab-pane.active {
  display: block;
}

.tab-pane h3 {
  color: #e6eef7;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
}

/* Venue Tab Styles */
.venue-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.venue-details {
  display: grid;
  gap: 30px;
}

.venue-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.venue-item i {
  font-size: 24px;
  color: #2B57F5;
}

.venue-text h4 {
  color: #e6eef7;
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
}

.venue-text p {
  margin: 0;
  color: #A8B0BF;
}

.venue-text p:not(:last-child) {
  margin-bottom: 5px;
}

.venue-map {
  position: relative;
  width: 100%;
  height: 400px;
}

#tournament-map {
  width: 100% !important;
  height: 400px !important;
  border-radius: 12px;
  overflow: hidden;
}

.venue-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #A8B0BF;
}

.venue-map-placeholder i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #2B57F5;
}

.venue-map-placeholder p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

/* Responsive design for venue layout */
@media (max-width: 768px) {
  .venue-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .venue-map-placeholder {
    height: 300px;
  }
  
  #tournament-map {
    height: 300px !important;
  }
}

/* Participants Tab Styles */
.participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.participant-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.participant-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
}

.participant-card.empty {
  opacity: 0.6;
}

/* Winner Participant Cards */
.participant-card.winner-1st {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 193, 7, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.participant-card.winner-1st:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.15));
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.participant-card.winner-2nd {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.1));
  border: 2px solid rgba(192, 192, 192, 0.4);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.2);
}

.participant-card.winner-2nd:hover {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.15));
  border-color: rgba(192, 192, 192, 0.6);
  box-shadow: 0 0 30px rgba(192, 192, 192, 0.3);
}

.participant-card.winner-3rd {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(184, 115, 51, 0.1));
  border: 2px solid rgba(205, 127, 50, 0.4);
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.2);
}

.participant-card.winner-3rd:hover {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(184, 115, 51, 0.15));
  border-color: rgba(205, 127, 50, 0.6);
  box-shadow: 0 0 30px rgba(205, 127, 50, 0.3);
}

.participant-card.winner-4th {
  background: linear-gradient(135deg, rgba(74, 74, 74, 0.15), rgba(74, 74, 74, 0.1));
  border: 2px solid rgba(74, 74, 74, 0.4);
  box-shadow: 0 0 20px rgba(74, 74, 74, 0.2);
}

.participant-card.winner-4th:hover {
  background: linear-gradient(135deg, rgba(74, 74, 74, 0.2), rgba(74, 74, 74, 0.15));
  border-color: rgba(74, 74, 74, 0.6);
  box-shadow: 0 0 30px rgba(74, 74, 74, 0.3);
}

/* Winner ranking badges */
.participant-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.participant-card.winner-1st::before {
  content: '1st';
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #000;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #FFD700;
}

.participant-card.winner-2nd::before {
  content: '2nd';
  background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  color: #000;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #C0C0C0;
}

.participant-card.winner-3rd::before {
  content: '3rd';
  background: linear-gradient(135deg, #CD7F32, #B87333);
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #CD7F32;
}

.participant-card.winner-4th::before {
  content: '4th';
  background: linear-gradient(135deg, #4A4A4A, #3A3A3A);
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #4A4A4A;
}

.participant-admin-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.participant-card:hover .participant-admin-actions {
  opacity: 1;
}

/* Always show drag button for superadmin */
.participant-admin-actions .drag-btn {
  opacity: 1 !important;
}

/* Show admin actions container when it only contains drag button */
.participant-admin-actions:has(.drag-btn:only-child) {
  opacity: 1 !important;
}

.participant-admin-actions .action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 12px;
}

.participant-admin-actions .add-btn {
  background: rgba(40, 167, 69, 0.8);
  color: white;
}

.participant-admin-actions .add-btn:hover {
  background: #28a745;
  transform: scale(1.1);
}

.participant-admin-actions .remove-btn {
  background: rgba(220, 53, 69, 0.8);
  color: white;
}

.participant-admin-actions .remove-btn:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.participant-admin-actions .drag-btn {
  background: rgba(108, 117, 125, 0.8);
  color: white;
  cursor: grab;
}

.participant-admin-actions .drag-btn:hover {
  background: #6c757d;
  transform: scale(1.1);
}

.participant-admin-actions .drag-btn:active {
  cursor: grabbing;
}

/* Drag and drop styles */
.participant-card.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
}

.participant-card.drag-over {
  border: 2px dashed #2B57F5;
  background: rgba(43, 87, 245, 0.1);
}

.participants-grid {
  position: relative;
}

.participants-grid.drag-active {
  cursor: grabbing;
}

.participants-grid.drag-active .participant-card {
  transition: all 0.2s ease;
}

/* User Selection Modal Styles */
.user-selection-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-option {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-option:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  border-color: rgba(43, 87, 245, 0.3);
}

.user-option-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-option-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-option-info h4 {
  margin: 0 0 4px 0;
  color: #e6eef7;
  font-size: 14px;
  font-weight: 600;
}

.user-option-info p {
  margin: 0;
  color: #A8B0BF;
  font-size: 12px;
}

/* User Search Styles */
.user-search-container {
  margin-bottom: 20px;
}

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

.search-icon {
  position: absolute;
  left: 12px;
  color: #A8B0BF;
  font-size: 14px;
  z-index: 2;
}

.user-search-input {
  width: 100%;
  padding: 12px 40px 12px 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e6eef7;
  font-size: 14px;
  transition: all 0.3s ease;
}

.user-search-input:focus {
  outline: none;
  border-color: rgba(43, 87, 245, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.user-search-input::placeholder {
  color: #A8B0BF;
}

.clear-search-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #A8B0BF;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
  z-index: 2;
}

.clear-search-btn:hover {
  color: #e6eef7;
  background: rgba(255, 255, 255, 0.1);
}

.no-results-message {
  text-align: center;
  padding: 40px 20px;
  color: #A8B0BF;
}

.no-results-message i {
  font-size: 2rem;
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-results-message p {
  margin: 0;
  font-size: 14px;
}

/* Start Tournament Button Styles */
.bracket-actions {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.start-tournament-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.start-tournament-btn:hover {
  background: linear-gradient(135deg, #218838, #1ea085);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.start-tournament-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}

.start-tournament-btn i {
  font-size: 14px;
}

.regenerate-bracket-btn {
  background: linear-gradient(135deg, #6f42c1, #e83e8c);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
}

.regenerate-bracket-btn:hover {
  background: linear-gradient(135deg, #5a32a3, #d63384);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
}

.regenerate-bracket-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(111, 66, 193, 0.3);
}

.regenerate-bracket-btn i {
  font-size: 14px;
}

/* Tournament Bracket Styles - Unique Classes */
.tournament-bracket {
  margin-top: 20px;
}

/* Main Tournament Bracket */
.tb-main-bracket {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.tb-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  min-width: max-content;
  position: relative;
}

.tb-column {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  position: relative;
}

.tb-round-title {
  text-align: center;
  color: #e6eef7;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 193, 7, 0.2));
  border-radius: 6px;
  border: 1px solid rgba(255, 204, 0, 0.3);
  position: relative;
}

.tb-round-title::before {
  content: "🏆";
  margin-right: 6px;
  font-size: 14px;
}

.tb-matches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

.tb-match {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.tb-match:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 204, 0, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.2);
}

.tb-participant {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

.tb-participant:last-child {
  border-bottom: none;
}

.tb-participant.tb-winner {
  background: rgba(255, 204, 0, 0.1);
  border-left: 2px solid #FFCC00;
}

.tb-participant.tb-winner .tb-name {
  color: #FFCC00;
  font-weight: 700;
}

.tb-participant.tb-winner .tb-score {
  color: #FFCC00;
  font-weight: 700;
}

.tb-avatar {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  flex-shrink: 0;
}

.tb-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tb-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tb-avatar-placeholder.tb-bye {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.4);
}

.tb-avatar-placeholder.tb-tbd {
  background: rgba(108, 117, 125, 0.2);
  color: #6c757d;
  border-color: rgba(108, 117, 125, 0.4);
}

/* Submit Score Form Styles */
.ms-score-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ms-games-input-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ms-game-input-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.ms-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ms-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.ms-input:focus {
  border-color: var(--accent-blue);
  background: rgba(0, 194, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.15);
}

.ms-input-score {
  text-align: center;
}

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

@media (max-width: 640px) {
  .ms-game-input-row {
    grid-template-columns: 1fr;
  }
}

.tb-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tb-name {
  color: #e6eef7;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-score {
  color: #FFCC00;
  font-size: 16px;
  font-weight: 700;
  min-width: 16px;
  text-align: right;
}

/* Connecting Lines */
.tb-lines {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 1px;
  z-index: 1;
}

.tb-line-h {
  width: 10px;
  height: 1px;
  background: rgba(255, 204, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
}

.tb-line-v {
  width: 1px;
  height: 20px;
  background: rgba(255, 204, 0, 0.6);
  position: absolute;
  top: -10px;
  right: 0;
}

/* Hide lines for last column */
.tb-column:last-child .tb-lines {
  display: none;
}

/* Adjust line heights for different rounds */
.tb-column:nth-child(2) .tb-line-v {
  height: 30px;
  top: -15px;
}

.tb-column:nth-child(3) .tb-line-v {
  height: 60px;
  top: -30px;
}

.tb-column:nth-child(4) .tb-line-v {
  height: 120px;
  top: -60px;
}

.tb-column:nth-child(5) .tb-line-v {
  height: 240px;
  top: -120px;
}

/* Original participant classes for participants tab */
.participant-avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin: 0 auto 15px;
  overflow: hidden;
}

/* More specific selector for tournament participants tab - Updated 2024 */
.participants-grid .participant-avatar {
  border: 2px solid #7ad1ff !important;
}

/* Force participant avatar styling for tournament page */
.tournament-tab-content .participants-grid .participant-avatar {
  border: 2px solid #7ad1ff !important;
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  margin: 0 auto 15px !important;
  overflow: hidden !important;
}

.tournament-tab-content .participants-grid .participant-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/* Winner avatar border colors */
.participant-card.winner-1st .participant-avatar {
  border-color: #FFD700 !important;
}

.participant-card.winner-2nd .participant-avatar {
  border-color: #C0C0C0 !important;
}

.participant-card.winner-3rd .participant-avatar {
  border-color: #CD7F32 !important;
}

.participant-card.winner-4th .participant-avatar {
  border-color: #4A4A4A !important;
}

/* More specific selectors for participants grid */
.participants-grid .participant-card.winner-1st .participant-avatar {
  border-color: #FFD700 !important;
}

.participants-grid .participant-card.winner-2nd .participant-avatar {
  border-color: #C0C0C0 !important;
}

.participants-grid .participant-card.winner-3rd .participant-avatar {
  border-color: #CD7F32 !important;
}

.participants-grid .participant-card.winner-4th .participant-avatar {
  border-color: #4A4A4A !important;
}

/* Force winner border colors for tournament page */
.tournament-tab-content .participants-grid .participant-card.winner-1st .participant-avatar {
  border-color: #FFD700 !important;
}

.tournament-tab-content .participants-grid .participant-card.winner-2nd .participant-avatar {
  border-color: #C0C0C0 !important;
}

.tournament-tab-content .participants-grid .participant-card.winner-3rd .participant-avatar {
  border-color: #CD7F32 !important;
}

.tournament-tab-content .participants-grid .participant-card.winner-4th .participant-avatar {
  border-color: #4A4A4A !important;
}

/* Participant card link styling */
.participant-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease;
}

.participant-card-link:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.participant-card-link:hover .participant-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Banner avatar winner border colors */
.banner-player-avatar.winner-1st {
  border: 2px solid #FFD700 !important;
}

.banner-player-avatar.winner-2nd {
  border: 2px solid #C0C0C0 !important;
}

.banner-player-avatar.winner-3rd {
  border: 2px solid #CD7F32 !important;
}

.banner-player-avatar.winner-4th {
  border: 2px solid #4A4A4A !important;
}

/* Banner avatar link styling */
.banner-player-avatar {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}

.banner-player-avatar:hover {
  transform: scale(1.1);
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

.banner-player-avatar:hover img {
  box-shadow: 0 0 15px rgba(122, 209, 255, 0.6);
  z-index: 2;
}

.participant-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8B0BF;
  font-size: 24px;
}

.participant-info h4 {
  color: #e6eef7;
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
}

.participant-info p {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
}

/* SE Bracket specific participant classes */
.se-participant-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 15px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.se-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.se-participant-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8B0BF;
  font-size: 24px;
}

.se-participant-info h4 {
  color: #e6eef7;
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
}

.se-participant-info p {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
}

/* Bracket Tab Styles */
.se-bracket-info {
  text-align: center;
}

.se-bracket-status {
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.se-bracket-status i {
  font-size: 48px;
  color: #2B57F5;
  margin-bottom: 20px;
}

.se-bracket-status p {
  margin: 0;
  color: #A8B0BF;
  font-size: 18px;
}

/* No Participants State */
.no-participants {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #A8B0BF;
}

.no-participants i {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no-participants p {
  font-size: 18px;
  margin: 0;
}


/* Lower Bracket Styles */
.tb-lower-bracket {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
}

.tb-third-place {
  border-left: 4px solid #CD7F32; /* Bronze color */
}

.tb-fourth-place {
  border-left: 4px solid #4A4A4A; /* Dark gray color */
  margin-top: 20px;
}


/* Status Messages */
.tb-status {
  text-align: center;
  padding: 30px 20px;
  color: #6c757d;
}

.tb-status i {
  font-size: 36px;
  margin-bottom: 12px;
  color: #FFCC00;
}

.tb-status p {
  font-size: 16px;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tb-container {
    gap: 15px;
  }
  
  .tb-column {
    min-width: 160px;
  }
  
  
  .tb-avatar {
    width: 24px;
    height: 24px;
  }
  
  .tb-name {
    font-size: 12px;
    max-width: 60px;
  }
  
  .tb-score {
    font-size: 14px;
  }
  
  .tb-lower-match {
    min-width: 200px;
  }
  
  .tb-round-title {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  .tb-lower-title {
    font-size: 16px;
    padding: 10px 14px;
  }
}

/* Campaign Poll System Styles */
.campaign-modal-content {
  max-width: 100%;
}

.campaign-description {
  margin-bottom: 25px;
}

.campaign-poll-games-section {
  margin-bottom: 25px;
}

.campaign-poll-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.campaign-poll-game-item {
  display: flex;
  align-items: center;
}

.campaign-poll-game-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.campaign-poll-game-checkbox:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.campaign-poll-game-checkbox input[type="checkbox"] {
  display: none;
}

.campaign-poll-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #ff8800;
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.campaign-poll-game-checkbox input[type="checkbox"]:checked + .campaign-poll-checkbox-custom {
  background: #ff8800;
  border-color: #ff8800;
}

.campaign-poll-game-checkbox input[type="checkbox"]:checked + .campaign-poll-checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.campaign-poll-game-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.campaign-poll-game-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  margin-right: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.campaign-poll-game-icon:not([src]) {
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-poll-game-icon:not([src])::before {
  content: '🎮';
  font-size: 16px;
}

.campaign-poll-game-title {
  color: #F7FAFC;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.campaign-poll-email-section {
  margin-top: 25px;
}

.campaign-poll-email-input {
  margin-bottom: 15px;
}

.campaign-poll-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #F7FAFC;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
}

.campaign-poll-input:focus {
  outline: none;
  border-color: #ff8800;
  box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.1);
}

.campaign-poll-input::placeholder {
  color: #A8B0BF;
}

.campaign-poll-input:disabled {
  background-color: #1a2332 !important;
  color: #7AA0FF !important;
  border-color: rgba(122, 160, 255, 0.3) !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}

.campaign-poll-input:disabled::placeholder {
  color: #7AA0FF !important;
  opacity: 0.7;
}

.campaign-poll-terms {
  margin-top: 20px;
  padding: 15px;
  background: rgba(43, 87, 245, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(43, 87, 245, 0.3);
}

.campaign-poll-terms p {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.5;
}

/* Promo Campaigns Admin Page Styles */
.promo-campaigns-page {
  padding: 20px;
}

.promo-campaigns-title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.promo-campaigns-title-icon {
  font-size: 2rem;
  color: #2B57F5;
  margin-right: 15px;
}

.promo-campaigns-title h1 {
  margin: 0;
  color: #F7FAFC;
  font-size: 2rem;
  font-weight: 600;
}

.promo-campaigns-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.promo-stat-card {
  background: rgba(29, 37, 56, 0.8);
  border: 1px solid rgba(43, 87, 245, 0.3);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.promo-stat-card:hover {
  border-color: rgba(43, 87, 245, 0.5);
  transform: translateY(-2px);
}

.promo-stat-icon {
  width: 50px;
  height: 50px;
  background: rgba(43, 87, 245, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.promo-stat-icon i {
  font-size: 1.5rem;
  color: #2B57F5;
}

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

.promo-stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #F7FAFC;
  margin-bottom: 5px;
}

.promo-stat-label {
  font-size: 14px;
  color: #A8B0BF;
  font-weight: 500;
}

.promo-campaigns-table-container {
  background: rgba(29, 37, 56, 0.8);
  border: 1px solid rgba(43, 87, 245, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.promo-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(43, 87, 245, 0.3);
}

.promo-table-header h3 {
  margin: 0;
  color: #F7FAFC;
  font-size: 1.2rem;
  font-weight: 600;
}

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

.promo-campaigns-table th,
.promo-campaigns-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(43, 87, 245, 0.2);
}

.promo-campaigns-table th {
  background: rgba(43, 87, 245, 0.1);
  color: #7AA0FF;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promo-campaigns-table td {
  color: #F7FAFC;
  font-size: 14px;
}

.promo-campaigns-table tr:hover {
  background: rgba(43, 87, 245, 0.05);
}

.promo-campaign-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promo-campaign-status.active {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.promo-campaign-status.inactive {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

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

.promo-campaign-actions .btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.promo-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #A8B0BF;
}

.promo-empty-icon {
  font-size: 3rem;
  color: #2B57F5;
  margin-bottom: 20px;
}

.promo-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #F7FAFC;
  margin-bottom: 10px;
}

.promo-empty-description {
  font-size: 16px;
  color: #A8B0BF;
}

/* Modal Content Styling */
.modal-content-container {
  text-align: left;
}

.modal-section {
  background: #141a27;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.modal-section-title {
  margin: 0 0 8px 0;
  color: #ff8800;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-section-description {
  margin: 6px 0 8px 0;
  color: #A8B0BF;
  font-size: 14px;
}

.modal-section-list {
  margin: 0;
  padding-left: 18px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.55;
}

.modal-help-text {
  color: #A8B0BF;
  font-size: 12px;
}

.modal-loading-container {
  text-align: center;
  padding: 40px 20px;
}

.modal-loading-spinner {
  font-size: 2rem;
  color: #2B57F5;
  margin-bottom: 15px;
}

.modal-loading-text {
  margin: 0;
  color: #A8B0BF;
}

.modal-success-container {
  text-align: center;
  padding: 20px;
}

.modal-success-icon {
  font-size: 3rem;
  color: #28a745;
  margin-bottom: 20px;
}

.modal-success-title {
  margin: 0 0 15px 0;
  color: #F7FAFC;
  font-size: 16px;
}

.modal-success-message {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
}

/* Bug Report Modal Styles */
.bug-report-details {
  max-width: 100%;
}

.contact-message-details {
  max-width: 100%;
}

.contact-detail-section {
  background: #141a27;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.contact-detail-section h4 {
  margin: 0 0 12px 0;
  color: #ff8800;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-detail-item {
  margin-bottom: 8px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.5;
}

.contact-detail-item strong {
  color: #F7FAFC;
  font-weight: 600;
  margin-right: 8px;
}

.contact-category-badge,
.contact-priority-badge,
.contact-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-category-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.contact-category-badge.category-support {
  background: rgba(45, 212, 191, 0.15);
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.25);
}

.contact-category-badge.category-billing {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.25);
}

.contact-category-badge.category-partnership {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.25);
}

.contact-category-badge.category-other {
  background: rgba(156, 163, 175, 0.2);
  color: #e5e7eb;
  border-color: rgba(156, 163, 175, 0.3);
}

.contact-priority-badge.priority-high {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.contact-priority-badge.priority-medium {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.contact-priority-badge.priority-low {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.contact-status-badge.status-new {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.contact-status-badge.status-in_progress {
  background: rgba(255, 193, 7, 0.2);
  color: #ffe082;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.contact-status-badge.status-resolved {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.contact-status-badge.status-closed {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.contact-message-text,
.contact-browser-text,
.contact-response-text {
  background: #0f1524;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.contact-response-text {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #b4d5ff;
}

.bug-detail-section {
  background: #141a27;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.bug-detail-section h4 {
  margin: 0 0 12px 0;
  color: #ff8800;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bug-detail-item {
  margin-bottom: 8px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.5;
}

.bug-detail-item strong {
  color: #F7FAFC;
  font-weight: 600;
  margin-right: 8px;
}

.bug-severity-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bug-severity-badge.severity-critical {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.bug-severity-badge.severity-high {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.bug-severity-badge.severity-medium {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.bug-severity-badge.severity-low {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.bug-status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bug-status-badge.status-open {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.bug-status-badge.status-in_progress {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.bug-status-badge.status-resolved {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.bug-status-badge.status-closed {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.bug-description-text,
.bug-additional-text,
.bug-browser-text,
.bug-resolution-text {
  background: #0f1524;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.bug-resolution-text {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.1);
  color: #86efac;
}

/* Suggestion Modal Styles */
.suggestion-details {
  max-width: 100%;
}

.suggestion-detail-section {
  background: #141a27;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.suggestion-detail-section h4 {
  margin: 0 0 12px 0;
  color: #ff8800;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-detail-item {
  margin-bottom: 8px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.5;
}

.suggestion-detail-item strong {
  color: #F7FAFC;
  font-weight: 600;
  margin-right: 8px;
}

.suggestion-category-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-category-badge.category-ui_ux {
  background: rgba(139, 69, 19, 0.2);
  color: #d2b48c;
  border: 1px solid rgba(139, 69, 19, 0.3);
}

.suggestion-category-badge.category-feature {
  background: rgba(75, 0, 130, 0.2);
  color: #dda0dd;
  border: 1px solid rgba(75, 0, 130, 0.3);
}

.suggestion-category-badge.category-performance {
  background: rgba(255, 140, 0, 0.2);
  color: #ffb347;
  border: 1px solid rgba(255, 140, 0, 0.3);
}

.suggestion-category-badge.category-security {
  background: rgba(220, 20, 60, 0.2);
  color: #ff6b6b;
  border: 1px solid rgba(220, 20, 60, 0.3);
}

.suggestion-category-badge.category-other {
  background: rgba(128, 128, 128, 0.2);
  color: #d3d3d3;
  border: 1px solid rgba(128, 128, 128, 0.3);
}

.suggestion-priority-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-priority-badge.priority-critical {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.suggestion-priority-badge.priority-high {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.suggestion-priority-badge.priority-medium {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.suggestion-priority-badge.priority-low {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.suggestion-status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-status-badge.status-open {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.suggestion-status-badge.status-under_review {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.suggestion-status-badge.status-in_progress {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.suggestion-status-badge.status-completed {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.suggestion-status-badge.status-rejected {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.suggestion-description-text,
.suggestion-additional-text,
.suggestion-browser-text,
.suggestion-resolution-text {
  background: #0f1524;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-resolution-text {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.1);
  color: #86efac;
}

/* Roadmap Page Styles */
.roadmap-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  padding-top: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.roadmap-page-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.roadmap-page-title-icon {
  font-size: 2rem;
  color: #FF5200;
}

.roadmap-page-title h1 {
  margin: 0;
  color: #F7FAFC;
  font-size: 2rem;
  font-weight: 700;
}

.roadmap-description {
  max-width: 500px;
}

.roadmap-description p {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.5;
}

/* Roadmap Table Container */
.roadmap-table-container {
  background: #0F1524;
  border-radius: 12px;
  border: 1px solid #2A3441;
  overflow: hidden;
}

.roadmap-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #2A3441;
  background: #121A2B;
}

/* Roadmap Tabs */
.roadmap-tabs {
  display: flex;
  gap: 8px;
}

.roadmap-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #1D2538;
  border: 1px solid #2A3441;
  border-radius: 8px;
  color: #A8B0BF;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.roadmap-tab:hover {
  background: #121A2B;
  border-color: #555;
  color: #f7f7f7;
}

.roadmap-tab.active {
  background: #2B57F5;
  border-color: #2B57F5;
  color: white;
}

.roadmap-tab i {
  font-size: 16px;
}

/* Roadmap Tab Content */
.roadmap-tab-content {
  display: none;
  padding: 20px;
}

.roadmap-tab-content.active {
  display: block;
}

/* Roadmap Items Grid */
.roadmap-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

/* Roadmap Item Cards */
.roadmap-item-card {
  background: #141a27;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.roadmap-item-card:hover {
  border-color: rgba(255, 82, 0, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.roadmap-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.roadmap-item-title h3 {
  margin: 0 0 8px 0;
  color: #F7FAFC;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.roadmap-item-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.roadmap-item-id {
  color: #A8B0BF;
  font-size: 12px;
  font-weight: 500;
}

.roadmap-item-url {
  color: #7AA0FF;
  font-size: 12px;
  text-decoration: none;
}

.roadmap-item-url:hover {
  text-decoration: underline;
}

.roadmap-item-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  min-width: 140px;
}

.roadmap-status-badge,
.roadmap-category-badge,
.roadmap-priority-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roadmap-status-badge.status-under_review {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.roadmap-status-badge.status-in_progress {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.roadmap-status-badge.status-completed {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.roadmap-status-badge.status-resolved {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.roadmap-category-badge.category-ui_ux {
  background: rgba(139, 69, 19, 0.2);
  color: #d2b48c;
  border: 1px solid rgba(139, 69, 19, 0.3);
}

.roadmap-category-badge.category-feature {
  background: rgba(75, 0, 130, 0.2);
  color: #dda0dd;
  border: 1px solid rgba(75, 0, 130, 0.3);
}

.roadmap-category-badge.category-performance {
  background: rgba(255, 140, 0, 0.2);
  color: #ffb347;
  border: 1px solid rgba(255, 140, 0, 0.3);
}

.roadmap-category-badge.category-security {
  background: rgba(220, 20, 60, 0.2);
  color: #ff6b6b;
  border: 1px solid rgba(220, 20, 60, 0.3);
}

.roadmap-category-badge.category-other {
  background: rgba(128, 128, 128, 0.2);
  color: #d3d3d3;
  border: 1px solid rgba(128, 128, 128, 0.3);
}

.roadmap-priority-badge.priority-critical {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.roadmap-priority-badge.priority-high {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.roadmap-priority-badge.priority-medium {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.roadmap-priority-badge.priority-low {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.roadmap-item-description {
  margin-bottom: 20px;
}

.roadmap-item-description p,
.roadmap-description-text {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.roadmap-description-text.expanded {
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  overflow: visible;
}

.roadmap-read-more {
  margin-top: 8px;
  background: none;
  border: none;
  color: #2B57F5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
  display: none;
}

.roadmap-read-more:hover {
  color: #7AA0FF;
  text-decoration: underline;
}

.roadmap-read-more .read-less-text,
.roadmap-read-more .read-more-text {
  display: inline;
}

.roadmap-item-resolution {
  margin: 15px 0;
  padding: 10px 12px;
  background: rgba(43, 87, 245, 0.08);
  border-left: 2px solid #2B57F5;
  border-radius: 4px;
}

.roadmap-resolution-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #7AA0FF;
  font-size: 11px;
  font-weight: 600;
}

.roadmap-resolution-header i {
  font-size: 11px;
}

.roadmap-resolution-content {
  color: #E6EEF7;
  font-size: 12px;
  line-height: 1.5;
}

.roadmap-resolution-content p {
  margin: 0;
  color: #E6EEF7;
}

.roadmap-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roadmap-item-submitter {
  flex: 1;
}

.roadmap-submitter-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roadmap-submitter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF5200;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.roadmap-submitter-details {
  display: flex;
  flex-direction: column;
}

.roadmap-submitter-name {
  color: #F7FAFC;
  font-size: 14px;
  font-weight: 500;
}

.roadmap-submitter-handle {
  color: #A8B0BF;
  font-size: 12px;
}

.roadmap-item-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.roadmap-vote-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.roadmap-vote-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #A8B0BF;
  font-size: 14px;
  font-weight: 500;
}

.roadmap-vote-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #A8B0BF;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.roadmap-vote-btn:hover:not(:disabled) {
  background: rgba(255, 82, 0, 0.2);
  border-color: rgba(255, 82, 0, 0.4);
  color: #FF5200;
}

.roadmap-vote-btn.voted {
  background: rgba(255, 82, 0, 0.2);
  border-color: rgba(255, 82, 0, 0.4);
  color: #FF5200;
}

.roadmap-vote-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.roadmap-item-date {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #A8B0BF;
  font-size: 12px;
}

/* Roadmap Empty State */
.roadmap-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}

.roadmap-empty-icon {
  font-size: 4rem;
  color: #A8B0BF;
  margin-bottom: 20px;
}

.roadmap-empty-title {
  margin: 0 0 10px 0;
  color: #F7FAFC;
  font-size: 24px;
  font-weight: 600;
}

.roadmap-empty-description {
  margin: 0;
  color: #A8B0BF;
  font-size: 16px;
}

/* Roadmap Button Styles */
.feedback-btn.roadmap-btn {
  background: rgba(74, 85, 104, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.feedback-btn.roadmap-btn:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  color: var(--accent-blue);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mobile-feedback-btn.roadmap-btn {
  background: rgba(74, 85, 104, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.mobile-feedback-btn.roadmap-btn:hover {
  background: rgba(0, 194, 255, 0.2);
  border-color: rgba(0, 194, 255, 0.4);
  color: var(--accent-blue);
  box-shadow: 0 6px 20px rgba(0, 194, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Vote Count Display */
.newsletter-vote-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #A8B0BF;
  font-size: 14px;
  font-weight: 500;
}

.newsletter-vote-count i {
  color: #FF5200;
}

/* Avatar Image Styling */
.newsletter-user-avatar img,
.roadmap-submitter-avatar img,
.voter-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.newsletter-user-avatar,
.roadmap-submitter-avatar,
.voter-avatar {
  position: relative;
  overflow: hidden;
}

/* Voters Table Styles */
.voters-table-container {
  max-height: 400px;
  overflow-y: auto;
}

.voters-table {
  width: 100%;
  border-collapse: collapse;
  background: #141a27;
  border-radius: 8px;
  overflow: hidden;
}

.voters-table th {
  background: #0f1524;
  color: #F7FAFC;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.voters-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #A8B0BF;
  font-size: 14px;
}

.voters-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.voter-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF5200;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.voter-name {
  color: #F7FAFC;
  font-weight: 500;
}

.voter-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.voter-role-badge.role-gamer {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.voter-role-badge.role-host {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.voter-role-badge.role-streamer {
  background: rgba(114, 91, 242, 0.2);
  color: #725BF2;
}

.voter-role-badge.role-admin {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

.voter-role-badge.role-superadmin {
  background: rgba(75, 0, 130, 0.2);
  color: #dda0dd;
}

/* Responsive Design */
@media (max-width: 768px) {
  .roadmap-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .roadmap-items-grid {
    grid-template-columns: 1fr;
  }
  
  .roadmap-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .roadmap-item-badges {
    flex-direction: row;
    align-items: flex-start;
  }
  
  .roadmap-item-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .roadmap-item-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Campaign Modal Specific Styles */
.campaign-poll-email-input {
  margin-top: 16px;
}

.campaign-poll-input {
  width: 100%;
  margin-bottom: 10px;
}

.campaign-poll-email-info {
  margin: 0;
  color: #A8B0BF;
  font-size: 14px;
  line-height: 1.55;
}

.campaign-poll-email-info i {
  margin-right: 5px;
  color: #ff8800;
}

/* Changelog Modal Specific Styles */
.changelog-entry {
  background: #101624;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

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

.changelog-entry-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.changelog-entry-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 87, 245, 0.15);
  color: #7AA0FF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Exo 2', sans-serif;
  min-width: 28px;
  flex-shrink: 0;
}

.changelog-entry-title {
  margin: 0;
  color: #e6eef7;
  font-size: 15px;
}

.changelog-entry-date {
  color: #A8B0BF;
  font-size: 12px;
}

.changelog-entry-list {
  margin: 0;
  padding-left: 18px;
  color: #A8B0BF;
  font-size: 14px;
}

.changelog-footer {
  color: #A8B0BF;
  font-size: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .campaign-poll-games-grid {
    grid-template-columns: 1fr;
  }
  
  .campaign-poll-game-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
  
  .campaign-poll-game-title {
    font-size: 13px;
  }
  
  .promo-campaigns-stats {
    grid-template-columns: 1fr;
  }
  
  .promo-table-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .promo-campaigns-table-container {
    overflow: visible;
  }
  
  .promo-campaigns-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .promo-campaigns-table {
    font-size: 12px;
    min-width: 600px;
  }
  
  .promo-campaigns-table th,
  .promo-campaigns-table td {
    padding: 10px 15px;
  }
  
  /* Transactions Table Mobile Scrolling */
  .transactions-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .transactions-table {
    min-width: 500px;
  }
  
  /* Coupons Table Mobile Scrolling */
  .coupons-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .coupons-table {
    min-width: 800px;
  }
  
  /* Email Logs Table Mobile Scrolling */
  .email-logs-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .email-logs-table {
    min-width: 700px;
  }
  
  /* Newsletter Subscriptions Table Mobile Scrolling */
  .newsletter-subscriptions-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .newsletter-subscriptions-table {
    min-width: 800px;
  }
  
  /* Permissions Table Mobile Scrolling */
  .permissions-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .permissions-table {
    min-width: 600px;
  }
}


/* Site-Wide Notification Banner Styles */
.site-notifications-container {
    position: relative;
    width: 100%;
    z-index: 10000;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.site-notification {
    width: 100%;
    background: linear-gradient(135deg, rgba(43, 87, 245, 0.95), rgba(122, 160, 255, 0.95));
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(43, 87, 245, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out;
}

.site-notifications-container.site-notifications-bottom .site-notification {
    border-bottom: none;
    border-top: 2px solid rgba(43, 87, 245, 0.5);
}

.site-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.site-notification.dismissing {
    transform: translateY(-100%);
    opacity: 0;
}

.site-notification-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.site-notification-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: #FFCC00;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.site-notification-game-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: opacity 0.15s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
}

.site-notification-text {
    flex: 1;
    min-width: 200px;
}

.site-notification-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: #F7FAFC;
    line-height: 1.3;
}

.site-notification-message {
    margin: 0;
    font-size: 14px;
    color: #E6EEF7;
    line-height: 1.5;
}

.site-notification-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.site-notification-actions .btn {
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.site-notification-actions .btn-primary {
    background: #FFCC00;
    color: #0B0F19;
    border: none;
}

.site-notification-actions .btn-primary:hover {
    background: #FFD633;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
}

.site-notification-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #F7FAFC;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.site-notification-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.site-notification-close i {
    font-size: 14px;
}

/* Notification type variants */
.site-notification-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(74, 222, 128, 0.95));
    border-bottom-color: rgba(34, 197, 94, 0.5);
}

.site-notification-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(253, 224, 71, 0.95));
    border-bottom-color: rgba(251, 191, 36, 0.5);
}

.site-notification-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(248, 113, 113, 0.95));
    border-bottom-color: rgba(239, 68, 68, 0.5);
}

.site-notification-announcement {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(196, 181, 253, 0.95));
    border-bottom-color: rgba(168, 85, 247, 0.5);
}

/* Responsive design */
@media (max-width: 768px) {
    .site-notification-content {
        padding: 12px 16px;
        gap: 12px;
    }

    .site-notification-icon {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .site-notification-title {
        font-size: 16px;
    }

    .site-notification-message {
        font-size: 13px;
    }

    .site-notification-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .site-notification-actions .btn {
        flex: 1;
        min-width: 120px;
    }

    .site-notification-close {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .site-notification-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-notification-actions {
        width: 100%;
        justify-content: space-between;
    }

    .site-notification-close {
        position: absolute;
        top: 12px;
        right: 12px;
    }
}

/* UCY Page */
.ucy-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
}

.ucy-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, rgba(43, 87, 245, 0.2), rgba(122, 160, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
}

.ucy-hero-content {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ucy-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--pri2);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: fit-content;
    align-self: flex-start;
}

.ucy-hero-navigation {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ucy-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ucy-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 87, 245, 0.3);
}

.ucy-nav-btn i {
    font-size: 1.1rem;
}

.ucy-nav-waze {
    background: linear-gradient(135deg, #33ccff 0%, #0066cc 100%);
    border-color: #33ccff;
}

.ucy-nav-waze:hover {
    background: linear-gradient(135deg, #4dd0ff 0%, #0077e6 100%);
    box-shadow: 0 4px 12px rgba(51, 204, 255, 0.3);
}

.ucy-hero h1 {
    font-size: 2.5rem;
    margin: 12px 0;
}

.ucy-hero-slider {
    flex: 1 1 400px;
    position: relative;
}

.ucy-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.3;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(15, 21, 36, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ucy-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.ucy-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

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

.ucy-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(43, 87, 245, 0.8);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.ucy-slider-btn:hover {
    background: rgba(43, 87, 245, 1);
    transform: translateY(-50%) scale(1.1);
}

.ucy-slider-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.ucy-slider-prev {
    left: 16px;
}

.ucy-slider-next {
    right: 16px;
}

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

.ucy-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.ucy-slider-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.ucy-slider-dot.active {
    background: rgba(43, 87, 245, 1);
    width: 24px;
    border-radius: 5px;
}

.ucy-slider-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 0.3;
    background: rgba(15, 21, 36, 0.8);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--muted);
}

.ucy-slider-placeholder i {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.ucy-slider-placeholder p {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .ucy-hero-slider {
        flex: 1 1 100%;
    }

    .ucy-slider-container {
        aspect-ratio: 1 / 0.3;
    }

    .ucy-slider-btn {
        width: 36px;
        height: 36px;
    }

    .ucy-slider-prev {
        left: 8px;
    }

    .ucy-slider-next {
        right: 8px;
    }

    .ucy-slider-dots {
        bottom: 12px;
    }
}

.ucy-section {
    background: rgba(15, 21, 36, 0.75);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 28px;
}

.ucy-section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.ucy-games-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ucy-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.ucy-game-card {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ucy-game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 87, 245, 0.6);
}

.ucy-game-media img {
    width: 100%;
    aspect-ratio: 400/550;
    object-fit: cover;
    display: block;
}

.ucy-game-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ucy-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ucy-chip {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(43, 87, 245, 0.15);
    color: var(--pri2);
    font-size: 0.8rem;
}

.ucy-chip.ucy-player-mode {
    background: rgba(255, 204, 0, 0.15);
    color: var(--acc);
}

.ucy-chip.ucy-account {
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.ucy-chip.ucy-account.ucy-account-own {
    background: rgba(255, 255, 255, 0.08);
    color: #9EE8FF;
    border-color: rgba(158, 232, 255, 0.3);
}

.ucy-chip.ucy-account.ucy-account-hybrid {
    background: rgba(255, 90, 95, 0.12);
    color: #FF9EA2;
    border-color: rgba(255, 90, 95, 0.35);
}

/* Full Screen Games Preview Modal */
.app-container .modal-overlay.ucy-games-preview-modal-fullscreen {
    padding: 0 !important;
    align-items: stretch !important;
}

.app-container .modal-overlay.ucy-games-preview-modal-fullscreen .modal-container {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    transform: none !important;
}

.app-container .modal-overlay.ucy-games-preview-modal-fullscreen.active .modal-container {
    transform: none !important;
}

.app-container .modal-overlay.ucy-games-preview-modal-fullscreen .modal-header {
    display: none !important;
}

.app-container .modal-overlay.ucy-games-preview-modal-fullscreen .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none !important;
    height: 100vh !important;
}

.app-container .modal-overlay.ucy-games-preview-modal-fullscreen .modal-footer {
    display: none !important;
}

/* Preview Layout - Horizontal Split */
.ucy-preview-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Static Sidebar - 2/5 of viewport */
.ucy-preview-static-sidebar {
    width: 40%;
    flex: 0 0 40%;
    background: transparent;
    border-right: 2px solid rgba(43, 87, 245, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Static Header Content */
.ucy-preview-static-header {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    background: transparent;
}

.ucy-preview-status {
    text-align: center;
    padding: 16px 0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.ucy-preview-open-flash {
    display: inline-block;
    font-size: 3.5rem;
    font-weight: 900;
    color: #FFCC00;
    text-shadow: 
        0 0 20px rgba(255, 204, 0, 1),
        0 0 40px rgba(255, 204, 0, 0.9),
        0 0 60px rgba(255, 204, 0, 0.7),
        0 0 80px rgba(255, 204, 0, 0.5);
    letter-spacing: 8px;
    animation: ucy-flash-text 1s ease-in-out infinite;
    text-transform: uppercase;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0.1) 100%);
    border: 4px solid rgba(255, 204, 0, 0.8);
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ucy-preview-open-flash:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 6px;
}

.ucy-preview-open-flash.ucy-status-closed {
    color: #FF5A5F;
    text-shadow:
        0 0 20px rgba(255, 90, 95, 1),
        0 0 40px rgba(255, 90, 95, 0.9),
        0 0 60px rgba(255, 90, 95, 0.7),
        0 0 80px rgba(255, 90, 95, 0.5);
    border: 4px solid rgba(255, 90, 95, 0.8);
    background: linear-gradient(135deg, rgba(255, 90, 95, 0.25) 0%, rgba(255, 90, 95, 0.1) 100%);
    animation: ucy-flash-text-closed 1s ease-in-out infinite;
}

.ucy-preview-open-flash::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: ucy-shine 2s infinite;
}

.ucy-preview-open-flash.ucy-status-closed::before {
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

@keyframes ucy-flash-text {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 
            0 0 20px rgba(255, 204, 0, 0.8),
            0 0 40px rgba(255, 204, 0, 0.6),
            0 0 60px rgba(255, 204, 0, 0.4);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
        box-shadow: 
            0 0 30px rgba(255, 204, 0, 1),
            0 0 60px rgba(255, 204, 0, 0.8),
            0 0 90px rgba(255, 204, 0, 0.6);
    }
}

@keyframes ucy-flash-text-closed {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 20px rgba(255, 90, 95, 0.8),
            0 0 40px rgba(255, 90, 95, 0.6),
            0 0 60px rgba(255, 90, 95, 0.4);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.97);
        box-shadow:
            0 0 10px rgba(255, 90, 95, 0.6),
            0 0 20px rgba(255, 90, 95, 0.4),
            0 0 30px rgba(255, 90, 95, 0.2);
    }
}

@keyframes ucy-shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.ucy-preview-info-sections {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 16px;
    flex: 1;
}

.ucy-preview-info-section {
    background: rgba(18, 26, 43, 0.4);
    border: 1px solid rgba(43, 87, 245, 0.3);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.ucy-preview-section-title {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #7AA0FF;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(43, 87, 245, 0.3);
    padding-bottom: 8px;
}

.ucy-preview-pricing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ucy-preview-pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 12px;
    border-bottom: 2px solid rgba(255, 204, 0, 0.2);
    background: rgba(255, 204, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.15);
}

.ucy-preview-pricing-item:last-child {
    border-bottom: 2px solid rgba(255, 204, 0, 0.2);
    margin-bottom: 0;
}

/* Reservation Block */
.ucy-preview-reservation {
    margin-top: 20px;
    padding: 16px;
    background: rgba(43, 87, 245, 0.15);
    border: 2px solid rgba(43, 87, 245, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.ucy-preview-reservation-title {
    margin: 0 0 16px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #7AA0FF;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ucy-preview-reservation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.ucy-preview-qr-code {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucy-preview-qr-code img {
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 4px;
}

.ucy-preview-label {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ucy-preview-value {
    font-size: 1.5rem;
    color: #FFCC00;
    font-weight: 900;
    text-shadow: 
        0 0 10px rgba(255, 204, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.ucy-preview-setup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ucy-preview-setup-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    background: rgba(43, 87, 245, 0.2);
    border-radius: 10px;
    border: 2px solid rgba(43, 87, 245, 0.4);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(43, 87, 245, 0.2);
    margin-bottom: 10px;
}

.ucy-preview-setup-item:last-child {
    margin-bottom: 0;
}

.ucy-preview-setup-item i {
    font-size: 1.6rem;
    color: #7AA0FF;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(122, 160, 255, 0.6);
}

.ucy-preview-setup-label {
    font-size: 0.85rem;
    color: #7AA0FF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    min-width: 90px;
    flex-shrink: 0;
}

.ucy-preview-setup-value {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 800;
    flex: 1;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

.ucy-preview-empty {
    color: #A8B0BF;
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
}

/* Announcement Block */
.ucy-preview-announcement {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.2) 0%, rgba(255, 152, 0, 0.2) 100%);
    border: 3px solid rgba(255, 152, 0, 0.6);
    border-radius: 16px;
    padding: 24px;
    margin: 0;
    position: relative;
    box-shadow: 
        0 6px 20px rgba(255, 152, 0, 0.3),
        inset 0 0 30px rgba(255, 152, 0, 0.15);
    animation: ucy-announcement-pulse 3s ease-in-out infinite;
}

@keyframes ucy-announcement-pulse {
    0%, 100% {
        box-shadow: 
            0 4px 12px rgba(255, 152, 0, 0.2),
            inset 0 0 20px rgba(255, 152, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 4px 20px rgba(255, 152, 0, 0.4),
            inset 0 0 30px rgba(255, 152, 0, 0.2);
    }
}

.ucy-preview-announcement-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.ucy-preview-announcement-icon {
    font-size: 2rem;
    color: #FF9800;
    text-align: center;
    animation: ucy-icon-bounce 2s ease-in-out infinite;
    margin-bottom: 8px;
}

@keyframes ucy-icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.ucy-preview-announcement-content {
    flex: 1;
}

.ucy-preview-announcement-title {
    margin: 0 0 12px 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: #FF9800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 152, 0, 0.5);
    line-height: 1.2;
}

.ucy-preview-announcement-text {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.6;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.ucy-preview-announcement-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(43, 87, 245, 0.2);
    border: 1px solid rgba(43, 87, 245, 0.4);
    color: #7AA0FF;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ucy-preview-announcement-edit-btn:hover {
    background: rgba(43, 87, 245, 0.3);
    border-color: rgba(43, 87, 245, 0.6);
    transform: scale(1.05);
}

.ucy-preview-announcement-empty {
    background: rgba(43, 87, 245, 0.1);
    border: 2px dashed rgba(43, 87, 245, 0.3);
    padding: 20px;
    text-align: center;
}

.ucy-preview-announcement-add-btn {
    background: rgba(43, 87, 245, 0.2);
    border: 1px solid rgba(43, 87, 245, 0.4);
    color: #7AA0FF;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s ease;
}

.ucy-preview-announcement-add-btn:hover {
    background: rgba(43, 87, 245, 0.3);
    border-color: rgba(43, 87, 245, 0.6);
    transform: translateY(-2px);
}

.ucy-preview-announcement-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ucy-preview-announcement-editor label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ucy-preview-announcement-editor label span {
    font-size: 0.8rem;
    color: #A8B0BF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ucy-preview-announcement-editor input,
.ucy-preview-announcement-editor textarea {
    background: rgba(18, 26, 43, 0.8);
    border: 1px solid rgba(43, 87, 245, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
}

.ucy-preview-announcement-editor input:focus,
.ucy-preview-announcement-editor textarea:focus {
    outline: none;
    border-color: rgba(43, 87, 245, 0.6);
    box-shadow: 0 0 0 2px rgba(43, 87, 245, 0.2);
}

.ucy-preview-announcement-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ucy-preview-announcement-actions .btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Games Container - Remaining space (50%) */
.ucy-games-preview-container {
    width: 50%;
    flex: 0 0 50%;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 0;
}

/* Right Sidebar - 10% with CESO Logo and Times */
.ucy-preview-right-sidebar {
    width: 10%;
    flex: 0 0 10%;
    background: transparent;
    border-left: 2px solid rgba(43, 87, 245, 0.3);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 24px;
    justify-content: flex-start;
}

.ucy-preview-ceso-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ucy-preview-ceso-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(43, 87, 245, 0.3));
    border-radius: 16px;
}

.ucy-preview-ceso-logo-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: #7AA0FF;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.ucy-preview-times {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    flex: 1;
}

.ucy-preview-time-section {
    background: rgba(18, 26, 43, 0.4);
    border: 1px solid rgba(43, 87, 245, 0.3);
    border-radius: 10px;
    padding: 12px;
    backdrop-filter: blur(5px);
    text-align: center;
}

.ucy-preview-time-label {
    font-size: 0.7rem;
    color: #A8B0BF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ucy-preview-time-value {
    font-size: 1rem;
    color: #FFCC00;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ucy-preview-working-hours {
    background: rgba(18, 26, 43, 0.4);
    border: 1px solid rgba(43, 87, 245, 0.3);
    border-radius: 10px;
    padding: 16px 12px;
    backdrop-filter: blur(5px);
    text-align: center;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
}

.ucy-preview-hours-title {
    font-size: 1rem;
    color: #7AA0FF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ucy-preview-hours-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ucy-preview-hours-day-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(43, 87, 245, 0.08);
    border: 1px solid rgba(43, 87, 245, 0.2);
    transition: all 0.2s ease;
}

.ucy-preview-hours-day-item.ucy-preview-hours-today {
    background: rgba(43, 87, 245, 0.25);
    border: 2px solid rgba(43, 87, 245, 0.6);
    box-shadow: 0 0 15px rgba(43, 87, 245, 0.4);
    transform: scale(1.05);
}

.ucy-preview-hours-day-name {
    font-size: 0.95rem;
    color: #A8B0BF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ucy-preview-hours-day-item.ucy-preview-hours-today .ucy-preview-hours-day-name {
    color: #7AA0FF;
    text-shadow: 0 0 8px rgba(122, 160, 255, 0.6);
}

.ucy-preview-hours-day-time {
    font-size: 0.9rem;
    color: #FFCC00;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ucy-preview-hours-day-item.ucy-preview-hours-today .ucy-preview-hours-day-time {
    color: #FFCC00;
    font-size: 0.95rem;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(255, 204, 0, 0.4);
}

.ucy-games-preview-scroll {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ucy-games-preview-scroll-wrapper {
    display: flex;
    flex-direction: column;
    animation: ucy-scroll-vertical 60s linear infinite;
    will-change: transform;
}

.ucy-games-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    padding: 20px;
    flex-shrink: 0;
}

.ucy-games-preview-grid-duplicate {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    padding: 20px;
    flex-shrink: 0;
}

@keyframes ucy-scroll-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.ucy-games-preview-grid .ucy-game-card {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ucy-games-preview-grid .ucy-game-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 4px 16px rgba(43, 87, 245, 0.4);
    border-color: rgba(43, 87, 245, 0.6);
}

.ucy-games-preview-grid .ucy-game-media {
    position: relative;
    width: 100%;
    aspect-ratio: 400 / 550;
    overflow: hidden;
}

.ucy-games-preview-grid .ucy-game-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ucy-games-preview-grid .ucy-game-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ucy-games-preview-grid .ucy-game-body h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
}

.ucy-games-preview-grid .ucy-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ucy-games-preview-grid .ucy-chip {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(43, 87, 245, 0.15);
    color: #7AA0FF;
    font-size: 0.7rem;
    font-weight: 500;
}

.ucy-games-preview-grid .ucy-chip.ucy-player-mode {
    background: rgba(255, 204, 0, 0.15);
    color: #FFCC00;
}

.ucy-platform-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ucy-pill {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.8rem;
    color: var(--muted);
}

.ucy-empty-state {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: var(--muted);
}

.ucy-empty-state i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--pri2);
}

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

.ucy-faq-item {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    background: rgba(12, 16, 28, 0.85);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.ucy-faq-item.expanded {
    border-color: rgba(43, 87, 245, 0.5);
}

.ucy-faq-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ucy-faq-toggle i {
    transition: transform 0.2s ease;
}

.ucy-faq-item.expanded .ucy-faq-toggle i {
    transform: rotate(180deg);
}

.ucy-faq-answer {
    padding: 0 20px 0 20px;
    color: var(--muted);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.ucy-faq-answer p{
    margin-bottom: 10px;
}

.ucy-faq-item.expanded .ucy-faq-answer {
    max-height: 500px;
}

.ucy-faq-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px 20px;
}

.ucy-faq-editor {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 14, 25, 0.9);
    display: none;
    flex-direction: column;
    gap: 16px;
}

.ucy-faq-editor label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--muted);
}

.ucy-faq-editor input,
.ucy-faq-editor textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--white);
    font-size: 1rem;
}

.ucy-faq-editor textarea {
    resize: vertical;
}

.ucy-faq-editor-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ucy-faq-item.editing .ucy-faq-view {
    display: none;
}

.ucy-faq-item.editing .ucy-faq-editor {
    display: flex !important;
}

.ucy-faq-editor[hidden] {
    display: none !important;
}

.ucy-faq-admin-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ucy-admin-hint {
    color: var(--muted);
    font-size: 0.9rem;
}

/* UCY Notices */
.ucy-notices-section {
    position: relative;
}

.ucy-notices-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ucy-notice-item {
    border: 2px solid rgba(220, 53, 69, 0.4);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(200, 35, 51, 0.1) 100%);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.ucy-notice-item:hover {
    border-color: rgba(220, 53, 69, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.ucy-notice-item.editing .ucy-notice-view {
    display: none;
}

.ucy-notice-item.editing .ucy-faq-editor {
    display: flex;
}

.ucy-notice-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
    background: rgba(220, 53, 69, 0.05);
    position: relative;
}

.ucy-notice-header::before {
    content: '⚠';
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 1.5rem;
    opacity: 0.3;
}

.ucy-notice-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ff6b7a;
    margin: 0;
    letter-spacing: -0.02em;
}

.ucy-notice-content {
    padding: 20px 24px 24px;
    color: rgba(255, 200, 200, 0.9);
    background: rgba(220, 53, 69, 0.03);
}

.ucy-notice-content p {
    margin: 0;
    line-height: 1.7;
    font-size: 0.95rem;
}

.ucy-notices-section .ucy-section-header h2 {
    color: #ff6b7a;
}

.ucy-notices-section .ucy-section-header h2::before {
    content: '⚠ ';
    font-size: 1.1em;
}

/* UCY Specs Grid */
.ucy-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ucy-spec-item {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ucy-spec-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.ucy-spec-label i {
    color: var(--pri2);
    font-size: 0.85rem;
}

.ucy-spec-value {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

/* UCY Peripherals Grid */
.ucy-peripherals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.ucy-peripheral-card {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ucy-peripheral-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 87, 245, 0.6);
}

.ucy-peripheral-icon {
    font-size: 2.5rem;
    color: var(--pri2);
    margin-bottom: 12px;
}

.ucy-peripheral-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--white);
}

.ucy-peripheral-card p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* UCY Controllers Info */
.ucy-controllers-info {
    padding: 20px;
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
}

.ucy-controller-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ok);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.ucy-controller-status i {
    font-size: 1.3rem;
}

.ucy-controller-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ucy-controller-quantity {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* UCY Pricing */
.ucy-pricing-compact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ucy-pricing-item.ucy-pricing-hourly {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ucy-pricing-item.ucy-pricing-hourly:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 87, 245, 0.6);
}

.ucy-pricing-item-header h4 {
    font-size: 1.2rem;
    color: var(--white);
    margin: 0;
}

.ucy-pricing-item-rate {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pri2);
    margin-top: 4px;
}

.ucy-pricing-item-label {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

.ucy-pricing-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ucy-hourly-pricing h3,
.ucy-packages h3 {
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: var(--white);
}

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

.ucy-pricing-item {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ucy-pricing-type {
    color: var(--muted);
    font-size: 0.9rem;
}

.ucy-pricing-rate {
    color: var(--pri2);
    font-size: 1.3rem;
    font-weight: 600;
}

.ucy-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.ucy-package-card {
    background: rgba(18, 26, 43, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ucy-package-card:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 87, 245, 0.6);
}

.ucy-package-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.ucy-package-header h4 {
    font-size: 1.2rem;
    color: var(--white);
    margin: 0;
}

.ucy-package-savings {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.3), rgba(255, 220, 50, 0.3));
    color: var(--acc);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255, 204, 0, 0.4);
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ucy-package-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

.ucy-package-hours i {
    color: var(--pri2);
}

.ucy-package-regular-price {
    font-size: 1rem;
    color: var(--muted);
    text-decoration: line-through;
    margin-top: 4px;
}

.ucy-package-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pri2);
    margin-top: 4px;
}

.ucy-package-savings-amount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ok);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ucy-package-savings-amount::before {
    content: "💰";
    font-size: 1.1rem;
}

.ucy-package-description {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    margin-top: 4px;
}

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

    .ucy-section {
        padding: 20px;
    }

    .ucy-specs-grid {
        grid-template-columns: 1fr;
    }

    .ucy-peripherals-grid {
        grid-template-columns: 1fr;
    }

    .ucy-pricing-grid {
        grid-template-columns: 1fr;
    }

    .ucy-packages-grid {
        grid-template-columns: 1fr;
    }

    .ucy-pricing-compact-grid {
        grid-template-columns: 1fr;
    }

    .ucy-faq-actions {
        flex-direction: column;
    }
}