/* Basic dark neon-inspired stylesheet tuned to the MULTIMALL logo colors */
:root {
  /* Main colors */
  --accent: #f03b75;
  --accent-hover: #e23370;
  --bg: #111111;
  --bg-card: #1e1e1e;
  --bg-card-dark: #2a2a2a;
  --bg-card-darker: #252525;
  --text: #eeeeee;
  --muted: #bdbdbd;
  
  /* Podium colors */
  --gold: #FFD700;
  --silver: #C0C0C0;
  --bronze: #CD7F32;
  
  /* Spacing */
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  
  /* Shadows */
  --shadow-base: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-hover: 0 6px 16px rgba(255,64,129,0.2);
  
  /* Borders */
  --border: #333;
  --border-input: #444;
  --border-light: rgba(255,255,255,0.05);
  
  /* Transitions */
  --transition: 0.2s ease;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Arial, Helvetica, sans-serif;
  margin:0; padding:0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.text-muted-light { color: var(--muted) !important; }

header {
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 20px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}

nav { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-left: auto; 
}

nav a { 
  color: var(--text); 
  text-decoration: none; 
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  font-weight: 500;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

nav a.login-btn {
  background: var(--accent);
  color: white;
  padding: 8px 20px;
  font-weight: 600;
}

nav a.login-btn:hover {
  background: var(--accent-hover);
  color: white;
}

/* User Menu Dropdown */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text);
}

.user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.user-name {
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  transition: transform var(--transition);
  color: var(--muted);
}

.user-menu-trigger:hover .dropdown-arrow {
  color: var(--accent);
}

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

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
  z-index: 1000;
  padding: 6px 0;
}

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

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition);
  font-weight: 500;
  font-size: 1rem;
}

.dropdown-item svg {
  color: var(--muted);
  transition: color var(--transition);
}

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

.dropdown-item:hover svg {
  color: var(--accent);
}

.dropdown-item.logout {
  color: #F44336;
}

.dropdown-item.logout svg {
  color: #F44336;
}

.dropdown-item.logout:hover {
  background: rgba(244, 67, 54, 0.1);
  color: #ff5252;
}

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


.discord-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #5865F2;
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

.discord-btn:hover {
  background: #4752C4;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
  color: white;
}

.discord-btn svg { width: 20px; height: 20px; }

h1,h2,h3,h4 { color:var(--accent); }
.event { border:1px solid rgba(255,255,255,0.03); padding:10px; margin:12px 0; background: rgba(255,255,255,0.01); }
button { background:var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:var(--radius-xs); cursor:pointer; }

main { flex: 1; }

footer { 
  padding: 40px 20px 20px; 
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); 
  border-top: 1px solid var(--border-light); 
  margin-top: 60px; 
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-section h4 {
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-section p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  line-height: 1.6;
}

.social-links { display: flex; gap: 15px; }

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: white;
}

.social-icon.discord:hover {
  background: #5865F2;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.social-icon.twitch:hover {
  background: #9146FF;
  box-shadow: 0 4px 12px rgba(145, 70, 255, 0.4);
}

.social-icon.youtube:hover {
  background: #FF0000;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}

.contact-email:hover { color: var(--accent); }
.contact-email svg { flex-shrink: 0; }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.footer-bottom p {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  margin: 0;
}

/* ===== SHARED COMPONENT STYLES ===== */

/* Event Cards - Shared across multiple pages */
body.page-events .event-card,
body.page-admin-index .event-card,
body.page-admin-events .event-card,
body.page-home .event-card,
body.page-account-dashboard .event-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-base);
  transition: transform var(--transition), box-shadow var(--transition);
}

body.page-events .event-card:hover,
body.page-admin-index .event-card:hover,
body.page-admin-events .event-card:hover,
body.page-home .event-card:hover,
body.page-account-dashboard .event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Event card specific overrides */
body.page-events .event-card { margin: 15px 0; }
body.page-admin-index .event-card,
body.page-admin-events .event-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.page-account-dashboard .event-card { 
  padding: 15px 20px;
  margin-bottom: 12px;
  transform: none;
}
body.page-account-dashboard .event-card:hover { transform: translateY(-3px); }

body.page-events .event-card h3,
body.page-admin-index .event-card h3,
body.page-admin-events .event-card h3,
body.page-home .event-card h3 { 
  color: var(--accent); 
  font-size: 1.2em; 
  margin-bottom: 10px; 
}

body.page-account-dashboard .event-card h5 { 
  color: var(--accent); 
  margin-bottom: 6px; 
}

/* Admin Container Styles - Shared */
body[class*="page-admin"] .admin-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

body[class*="page-admin"] .admin-container h2 {
  color: var(--accent);
  text-align: center;
  margin-bottom: 25px;
}

body[class*="page-admin"] .back-link {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--accent);
  text-decoration: none;
}

body[class*="page-admin"] .back-link:hover { text-decoration: underline; }

/* Admin Form Controls - Shared */
body[class*="page-admin"] .form-control,
body[class*="page-admin"] .form-select {
  background-color: var(--bg-card-dark);
  color: var(--text);
  border: 1px solid var(--border-input);
}

body[class*="page-admin"] .form-control:focus,
body[class*="page-admin"] .form-select:focus {
  background-color: var(--bg-card-dark);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(240, 59, 117, 0.25);
}

/* Button Styles - Shared */
.btn-main,
body.page-event .btn-main,
body.page-account-dashboard .btn-main {
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  transition: background-color var(--transition);
  cursor: pointer;
}

.btn-main:hover,
body.page-event .btn-main:hover,
body.page-account-dashboard .btn-main:hover {
  background-color: var(--accent-hover);
}

body.page-account-dashboard .btn-main { padding: 6px 12px; font-size: 0.9em; }

/* Shared Podium Styles for Homepage & Event Page */
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin-top: 15px;
  padding: 10px 0;
}

.podium-place {
  flex: 0 0 100px;
  background: linear-gradient(145deg, var(--bg-card-dark), var(--bg-card));
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border: 2px solid var(--border-light);
}

.podium-place:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
}

.podium-place.place-1 {
  flex: 0 0 110px;
  padding: 15px 12px;
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(255, 215, 0, 0.3);
}

.podium-place.place-1:hover {
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
}

.podium-place.place-2 {
  border-color: var(--silver);
  box-shadow: 0 4px 15px rgba(192, 192, 192, 0.2);
}

.podium-place.place-2:hover {
  box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3);
}

.podium-place.place-3 {
  border-color: var(--bronze);
  box-shadow: 0 4px 15px rgba(205, 127, 50, 0.2);
}

.podium-place.place-3:hover {
  box-shadow: 0 6px 20px rgba(205, 127, 50, 0.3);
}

.placement-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.placement-badge.badge-gold {
  background: linear-gradient(135deg, var(--gold), #FFA500);
  color: #000;
}

.placement-badge.badge-silver {
  background: linear-gradient(135deg, #E8E8E8, var(--silver));
  color: #000;
}

.placement-badge.badge-bronze {
  background: linear-gradient(135deg, var(--bronze), #B8733B);
  color: #fff;
}

.trophy-icon {
  font-size: 2.5rem;
  margin: 10px 0;
  animation: trophy-glow 2s ease-in-out infinite;
}

@keyframes trophy-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
    transform: scale(1.05);
  }
}

.podium-content {
  margin-top: 8px;
}

.podium-content + .podium-content {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.podium-username {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0;
  transition: color var(--transition);
}

.podium-place.place-1 .podium-username {
  font-size: 1rem;
  color: var(--gold);
}

.podium-place.place-2 .podium-username {
  color: #E8E8E8;
}

.podium-place.place-3 .podium-username {
  color: var(--bronze);
}

.podium-username:hover { opacity: 0.8; }

.podium-record {
  font-size: 0.95rem;
  font-weight: bold;
  color: #00e676;
  letter-spacing: 0.5px;
}

.podium-place.place-1 .podium-record {
  font-size: 1.05rem;
}

/* Event Page Specific Podium Overrides */
body.page-event .podium {
  gap: 15px;
  margin: 20px 0;
  padding: 20px 0;
}

body.page-event .podium-place {
  flex: 0 0 140px;
  padding: 20px 15px;
}

body.page-event .podium-place.place-1 {
  flex: 0 0 160px;
  padding: 25px 20px;
  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
}

body.page-event .trophy-icon {
  font-size: 3rem;
  margin: 15px 0;
}

body.page-event .podium-content { margin-top: 10px; }

body.page-event .podium-content + .podium-content {
  margin-top: 10px;
  padding-top: 10px;
}

body.page-event .podium-username {
  font-size: 1rem;
  margin-bottom: 8px;
}

body.page-event .podium-place.place-1 .podium-username {
  font-size: 1.2rem;
}

body.page-event .podium-place.place-1 .podium-record {
  font-size: 1.1rem;
}

/* ===== PAGE-SPECIFIC STYLES ===== */

/* pages/admin/events/create_event.php */
body.page-admin-events-create_event .admin-container { 
  max-width: 700px; 
  padding: 25px; 
  background-color: var(--bg-card); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-base); 
}

body.page-admin-events-create_event form { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}

body.page-admin-events-create_event label { 
  font-weight: 600; 
  color: var(--accent); 
  margin-bottom: 4px; 
}

body.page-admin-events-create_event input[type="text"], 
body.page-admin-events-create_event input[type="datetime-local"], 
body.page-admin-events-create_event textarea, 
body.page-admin-events-create_event select { 
  background-color: var(--bg-card-dark); 
  color: var(--text); 
  border: 1px solid var(--border-input); 
  border-radius: var(--radius-xs); 
  padding: 10px; 
  width: 100%; 
  box-sizing: border-box; 
}

body.page-admin-events-create_event textarea { 
  min-height: 100px; 
  resize: vertical; 
}

body.page-admin-events-create_event button { 
  background-color: var(--accent); 
  color: var(--text); 
  border: none; 
  border-radius: var(--radius-xs); 
  padding: 12px; 
  font-weight: bold; 
  cursor: pointer; 
  transition: background-color 0.25s ease; 
}

body.page-admin-events-create_event button:hover { 
  background-color: var(--accent-hover); 
}

body.page-admin-events-create_event .alert { 
  background-color: #2e7d32; 
  color: var(--text); 
  border-radius: var(--radius-sm); 
  padding: 12px; 
  text-align: center; 
  margin-bottom: 20px; 
}

/* pages/events.php */
body.page-events h2 { color: var(--accent); margin-top: 30px; text-align: center; }
body.page-events .event-card p { margin-bottom: 6px; }
body.page-events .event-meta { font-size: 0.9rem; color: #ccc; }
body.page-events .btn-join { background-color: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: var(--radius-sm); transition: background-color var(--transition); }
body.page-events .btn-join:hover { background-color: var(--accent-hover); }

/* pages/event.php */
body.page-event .container { max-width: 900px; margin: 40px auto; }
body.page-event .event-header {
  position: relative;
  background: linear-gradient(135deg, rgba(255,64,129,0.35), rgba(226,51,112,0.35));
  padding: 20px 20px 18px;
  border-radius: var(--radius-lg);
  text-align: left;
  color: white;
  box-shadow: 0 2px 8px rgba(255,64,129,0.18);
}

body.page-event .event-header h2 { font-size: 1.8rem; margin-bottom: 6px; }
body.page-event .event-header p { color: #fff; opacity: 0.9; }
body.page-event .event-header .rules-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}

body.page-event .event-section { 
  background-color: var(--bg-card); 
  border-radius: var(--radius-lg); 
  padding: 25px; 
  margin-top: 25px; 
  box-shadow: var(--shadow-base); 
}

body.page-event .event-section h3 { 
  color: var(--accent); 
  border-bottom: 1px solid var(--border); 
  padding-bottom: 6px; 
  margin-bottom: 15px; 
}

body.page-event .team-card { 
  background-color: var(--bg-card-dark); 
  border-radius: var(--radius-md); 
  padding: 15px; 
  margin-bottom: 10px; 
}

body.page-event .team-card strong { color: var(--accent); }
body.page-event #bracket-wrap { background-color: var(--bg-card); border-radius: var(--radius-lg); padding: 25px; margin-top: 25px; }
body.page-event #tournament { background-color: #151515; border-radius: var(--radius-md); padding: 15px; }
body.page-event .text-muted { color: #bbb !important; }
body.page-event .text-pink { color: var(--accent); }
body.page-event .rounded-circle { object-fit: cover; border: 2px solid var(--border); }

/* Event Final Results Section */
body.page-event .event-results-list {
  background-color: var(--bg-card-darker);
  border-radius: var(--radius-md);
  padding: 20px;
}

body.page-event .event-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 8px;
  background-color: var(--bg-card-dark);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), transform var(--transition);
}

body.page-event .event-result-item:hover {
  background-color: var(--border);
  transform: translateX(5px);
}

body.page-event .result-placement {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent);
  min-width: 50px;
}

body.page-event .result-username {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}

body.page-event .result-username:hover {
  color: var(--accent);
}

body.page-event .result-record {
  font-size: 0.9rem;
  font-weight: bold;
  color: #00e676;
}

/* pages/home.php */
body.page-home .hero { background-color: #1a1a1a; color: white; text-align: center; padding: 80px 20px; position: relative; }
body.page-home .hero img { max-width: 250px; margin-bottom: 20px; }
body.page-home .hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
body.page-home .hero p { font-size: 1.2rem; opacity: 0.9; }
body.page-home section { max-width: 1100px; margin: 50px auto; padding: 0 20px; }
body.page-home .section-title { font-size: 1.8rem; color: var(--accent); border-left: 4px solid var(--accent); padding-left: 10px; margin-bottom: 25px; }
body.page-home .event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
body.page-home .event-card p { margin: 5px 0; opacity: 0.85; }
body.page-home .event-card a { color: var(--accent); font-weight: bold; text-decoration: none; }
body.page-home .event-card a:hover { text-decoration: underline; }
body.page-home .result-box { background: linear-gradient(145deg, #1f1f1f, #292929); border-radius: var(--radius-md); padding: 15px 20px; text-align: center; box-shadow: var(--shadow-base); }
body.page-home .result-box h3 { color: var(--accent); margin-bottom: 15px; }
body.page-home .result-box .winner { font-size: 1.5rem; color: #00e676; font-weight: bold; }
body.page-home .youtube-section iframe { border-radius: var(--radius-md); width: 100%; height: 220px; }
body.page-home .youtube-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

/* pages/admin/events/manage_event.php */
body.page-admin-events-manage_event .section { 
  background-color: var(--bg-card); 
  border-radius: var(--radius-lg); 
  padding: 20px; 
  margin-bottom: 30px; 
  box-shadow: var(--shadow-base); 
}

body.page-admin-events-manage_event .section h3 { 
  color: var(--accent); 
  border-bottom: 1px solid var(--border); 
  padding-bottom: 6px; 
  margin-bottom: 15px; 
}

body.page-admin-events-manage_event .alert { 
  padding: 10px 15px; 
  border-radius: var(--radius-sm); 
  margin: 15px auto; 
  max-width: 900px; 
}

body.page-admin-events-manage_event .alert.success { background-color: #2e7d32; }
body.page-admin-events-manage_event .alert.error { background-color: #c62828; }
body.page-admin-events-manage_event .team-list div { background-color: var(--bg-card-dark); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 6px; }
body.page-admin-events-manage_event .match { background-color: var(--bg-card-dark); border-radius: var(--radius-md); padding: 15px; margin-bottom: 12px; }
body.page-admin-events-manage_event .match h4 { color: var(--accent); margin-bottom: 8px; }
body.page-admin-events-manage_event .match form { margin-top: 8px; }
body.page-admin-events-manage_event input[type="number"], 
body.page-admin-events-manage_event select, 
body.page-admin-events-manage_event input[type="text"] { 
  background-color: var(--bg-card); 
  color: var(--text); 
  border: 1px solid var(--border-input); 
  border-radius: var(--radius-xs); 
  padding: 4px 6px; 
}

body.page-admin-events-manage_event button { 
  background-color: var(--accent); 
  color: var(--text); 
  border: none; 
  border-radius: var(--radius-xs); 
  padding: 5px 10px; 
  cursor: pointer; 
  transition: background-color var(--transition); 
}

body.page-admin-events-manage_event button:hover { background-color: var(--accent-hover); }
body.page-admin-events-manage_event .btn-secondary { background-color: var(--border-input); }
body.page-admin-events-manage_event .btn-secondary:hover { background-color: #666; }

/* pages/admin/index.php */
body.page-admin-index .btn-create { 
  display: inline-block; 
  background-color: var(--accent); 
  color: var(--text); 
  padding: 10px 18px; 
  border-radius: var(--radius-sm); 
  text-decoration: none; 
  font-weight: 600; 
  transition: background-color var(--transition); 
}

body.page-admin-index .btn-create:hover { background-color: var(--accent-hover); }
body.page-admin-index .event-grid,
body.page-admin-events .event-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 20px; 
  margin-top: 25px; 
}

body.page-admin-index .event-info,
body.page-admin-events .event-info { 
  font-size: 0.9em; 
  color: #ccc; 
  margin-bottom: 15px; 
  line-height: 1.4em; 
}

body.page-admin-index .event-actions,
body.page-admin-events .event-actions { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

body.page-admin-index .btn-manage,
body.page-admin-events .btn-manage { 
  background-color: var(--border-input); 
  color: var(--text); 
  padding: 6px 12px; 
  border-radius: var(--radius-xs); 
  text-decoration: none; 
  font-size: 0.9em; 
  transition: background-color var(--transition); 
}

body.page-admin-index .btn-manage:hover,
body.page-admin-events .btn-manage:hover { 
  background-color: #666; 
}

/* Status badges - shared */
.status-badge,
body.page-admin-index .status-badge,
body.page-admin-events .status-badge { 
  display: inline-block; 
  padding: 3px 8px; 
  border-radius: var(--radius-xs); 
  font-weight: bold; 
  font-size: 0.8em; 
  text-transform: uppercase; 
}

body.page-admin-index .status-open,
body.page-admin-events .status-upcoming { background-color: #28a745; }
body.page-admin-index .status-running,
body.page-admin-events .status-running,
body.page-admin-events .status-ready { background-color: #ffc107; color: #000; }
body.page-admin-index .status-finished,
body.page-admin-events .status-finished { background-color: #dc3545; }

/* pages/account/dashboard.php */
body.page-account-dashboard .container { max-width: 900px; margin: 40px auto; }
body.page-account-dashboard .section { 
  background-color: var(--bg-card); 
  border-radius: var(--radius-lg); 
  padding: 25px; 
  margin-bottom: 30px; 
  box-shadow: var(--shadow-base); 
}

body.page-account-dashboard .section h3 { 
  color: var(--accent); 
  border-bottom: 1px solid var(--border); 
  padding-bottom: 6px; 
  margin-bottom: 15px; 
}

body.page-account-dashboard .event-meta { font-size: 0.9em; color: #ccc; }
body.page-account-dashboard .result-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-xs); font-weight: bold; font-size: 0.85em; }
body.page-account-dashboard .result-win { background-color: #28a745; color: var(--text); }
body.page-account-dashboard .result-loss { background-color: #dc3545; color: var(--text); }
body.page-account-dashboard .text-muted { color: #bbb !important; }
body.page-account-dashboard .btn-join { 
  background-color: var(--accent); 
  color: white; 
  border: none; 
  padding: 8px 16px; 
  border-radius: var(--radius-sm); 
  transition: background-color var(--transition); 
  text-decoration: none; 
  display: inline-block; 
}

body.page-account-dashboard .btn-join:hover { background-color: var(--accent-hover); }

/* pages/admin/gamemodes/manage_gamemodes.php */
body.page-admin-gamemodes .admin-container { max-width: 1000px; }
body.page-admin-gamemodes .table-responsive { 
  background-color: var(--bg-card); 
  border-radius: var(--radius-lg); 
  padding: 20px; 
  box-shadow: var(--shadow-base); 
}

body.page-admin-gamemodes .table { margin-bottom: 0; }
body.page-admin-gamemodes .table thead th { color: var(--accent); border-bottom: 2px solid var(--border); padding: 12px; }
body.page-admin-gamemodes .table tbody td { padding: 12px; vertical-align: middle; border-top: 1px solid var(--bg-card-dark); }
body.page-admin-gamemodes .table tbody tr:hover { background-color: var(--bg-card-darker); }
body.page-admin-gamemodes .modal-content { background-color: var(--bg-card); border: 1px solid var(--border); }
body.page-admin-gamemodes .modal-header { border-bottom: 1px solid var(--border); }
body.page-admin-gamemodes .modal-header .modal-title { color: var(--accent); }
body.page-admin-gamemodes .modal-footer { border-top: 1px solid var(--border); }
body.page-admin-gamemodes .btn-primary { background-color: var(--accent); border-color: var(--accent); }
body.page-admin-gamemodes .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
body.page-admin-gamemodes .btn-warning { background-color: #ffc107; border-color: #ffc107; color: #000; }
body.page-admin-gamemodes .btn-warning:hover { background-color: #e0a800; border-color: #e0a800; }
body.page-admin-gamemodes .btn-danger { background-color: #dc3545; border-color: #dc3545; }
body.page-admin-gamemodes .btn-danger:hover { background-color: #c82333; border-color: #c82333; }
body.page-admin-gamemodes .text-muted { color: #888 !important; }

/* pages/admin/content/manage_videos.php */
body.page-admin-content .admin-container { max-width: 1200px; }
body.page-admin-content .card { background-color: var(--bg-card); border: 1px solid var(--border); }
body.page-admin-content .card-header { background-color: var(--bg-card-darker); border-bottom: 1px solid var(--border); color: var(--accent); }
body.page-admin-content .btn-main { background-color: var(--accent); border-color: var(--accent); }
body.page-admin-content .btn-main:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
body.page-admin-content .table { margin-bottom: 0; }
body.page-admin-content .table thead th { color: var(--accent); border-bottom: 2px solid var(--border); }
body.page-admin-content .table tbody td { border-top: 1px solid var(--bg-card-dark); vertical-align: middle; }
body.page-admin-content .table tbody tr:hover { background-color: var(--bg-card-darker); }
body.page-admin-content .alert-success { background-color: #155724; border-color: #155724; color: #d4edda; }
body.page-admin-content .alert-danger { background-color: #721c24; border-color: #721c24; color: #f8d7da; }

/* Visual Bracket Styles */
.bracket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 15px;
}

.bracket-header h3 { color: var(--accent); margin: 0; }
.bracket-legend { display: flex; gap: 20px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #ccc; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-dot.pending, .legend-dot.placeholder { background-color: #666; }
.legend-dot.completed { background-color: #28a745; }

.bracket-wrapper {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 20px 0;
  min-height: 400px;
}

.bracket-round {
  min-width: 180px;
  display: flex;
  flex-direction: column;
}

.round-header {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 64, 129, 0.3);
}

.round-matches {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  justify-content: space-around;
}

.bracket-match {
  background-color: var(--bg-card-dark);
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  min-height: 80px;
}

.bracket-match:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 64, 129, 0.2);
  border-color: var(--accent);
}

.bracket-match.pending {
  background-color: #1a1a1a;
  border-color: var(--border-input);
  cursor: default;
}

.bracket-match.pending:hover,
.bracket-match.placeholder:hover,
.bracket-match:not([onclick]):hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-input);
  cursor: default;
}

.bracket-match.placeholder {
  background-color: #151515;
  border-color: #666;
  opacity: 0.7;
}

.bracket-match.ready { border-color: #007bff; }
.bracket-match.completed { background-color: #1b4332; border-color: #28a745; }

.match-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin: 2px 0;
  background-color: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border);
  transition: all var(--transition);
  font-size: 0.85rem;
}

.match-team.winner {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  font-weight: bold;
  border-color: #28a745;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.team-name { font-weight: 500; flex: 1; }

.team-score {
  background-color: var(--accent);
  color: white;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 0.8rem;
  margin-left: 8px;
}

.match-team.winner .team-score { background-color: rgba(255, 255, 255, 0.2); }
.no-bracket-message { text-align: center; padding: 60px 20px; color: #888; }

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
}

.modal-header {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  padding: 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 { margin: 0; color: white; }
.modal-close {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: white;
  opacity: 0.8;
  transition: opacity var(--transition);
}

.modal-close:hover { opacity: 1; }
.modal-body { padding: 25px; }

#modalMatchInfo {
  text-align: center;
  margin-bottom: 25px;
  padding: 15px;
  background-color: var(--bg-card-dark);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.score-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.score-group { display: flex; flex-direction: column; }
.score-group label { color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.score-group input {
  background-color: var(--bg-card-dark);
  color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xs);
  padding: 10px;
  font-size: 1rem;
  text-align: center;
}

.score-group input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 59, 117, 0.2);
}

.winner-selection { margin-bottom: 25px; }
.winner-selection label { display: block; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.winner-selection select {
  width: 100%;
  background-color: var(--bg-card-dark);
  color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xs);
  padding: 10px;
  font-size: 1rem;
}

.winner-selection select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 59, 117, 0.2);
}

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.btn-primary {
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-xs);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition);
}

.btn-primary:hover { background-color: var(--accent-hover); }

.btn-secondary {
  background-color: var(--border-input);
  color: white;
  border: none;
  border-radius: var(--radius-xs);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition);
}

.btn-secondary:hover { background-color: #666; }

/* ===== DATETIME & TIMEZONE ===== */
.local-datetime {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timezone-indicator {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* ===== NEWS SECTION ===== */
.news-section {
  margin: 3rem auto;
  max-width: 900px;
}

.news-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.news-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition);
  border-left: 3px solid var(--accent);
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-left-color: var(--accent-hover);
}

.news-header {
  margin-bottom: 1rem;
}

.news-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.news-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.news-author {
  font-weight: 500;
  color: var(--accent);
}

.news-date {
  color: rgba(255, 255, 255, 0.5);
}

.news-content {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  font-size: 1rem;
}

.news-content p {
  margin: 0 0 1rem 0;
}

.news-read-more {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition);
  margin-top: 1rem;
}

.news-read-more:hover {
  background: var(--accent);
  color: white;
}

.news-full-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .discord-btn span { display: none; }
  .discord-btn { padding: 8px; right: 10px; }
  
  .footer-content { grid-template-columns: 1fr; gap: 30px; }
  
  .podium,
  body.page-event .podium {
    flex-direction: column;
    align-items: center;
  }
  
  .podium-place,
  .podium-place.place-1,
  body.page-event .podium-place,
  body.page-event .podium-place.place-1 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 250px;
  }
  
  .bracket-wrapper { gap: 10px; }
  .bracket-round { min-width: 150px; }
  .bracket-match { min-height: 70px; padding: 8px; }
  
  .modal-content {
    margin: 20px;
    min-width: auto;
    max-width: none;
  }
  
  .score-inputs {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}