/* ========================================================================
   RESET & BASE
   ======================================================================== */
   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       --bg-primary: #0a0a14;
       --bg-secondary: #0f0f1a;
       --bg-card: rgba(255, 255, 255, 0.04);
       --bg-card-hover: rgba(255, 255, 255, 0.08);
       --bg-nav: rgba(15, 15, 26, 0.92);
       --bg-header: linear-gradient(135deg, #0a0a14, #12122a, #0f1a2e);
       --text-primary: #f0f4ff;
       --text-secondary: #b0c4de;
       --text-muted: #7a8aa0;
       --accent: #1e90ff;
       --accent-glow: rgba(30, 144, 255, 0.25);
       --accent-dim: rgba(30, 144, 255, 0.08);
       --danger: #ff4444;
       --success: #44d47c;
       --warning: #ffaa2a;
       --radius: 16px;
       --radius-sm: 12px;
       --radius-xs: 6px;
       --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
       --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       --font: 'Cairo', sans-serif;
   
       /* Match card specific */
       --match-bg: rgba(255, 255, 255, 0.03);
       --match-border: rgba(255, 255, 255, 0.06);
       --match-time-color: #4aa8ff;
       --match-team-color: #ffffff;
       --match-status-upcoming: #ffaa2a;
       --match-status-live: #ff4444;
       --match-status-finished: #44d47c;
       --match-status-bg-upcoming: rgba(255, 170, 42, 0.12);
       --match-status-bg-live: rgba(255, 68, 68, 0.14);
       --match-status-bg-finished: rgba(68, 212, 124, 0.12);
   }
   
   html {
       font-family: var(--font);
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%;
   }
   
   body {
       background: var(--bg-secondary);
       color: var(--text-primary);
       min-height: 100vh;
       overflow-x: hidden;
       line-height: 1.6;
       display: flex;
       flex-direction: column;
   }
   
   a {
       color: var(--accent);
       text-decoration: none;
       transition: var(--transition);
   }
   a:hover {
       color: #4aa8ff;
   }
   
   img {
       max-width: 100%;
       display: block;
   }
   button {
       cursor: pointer;
       font-family: var(--font);
       border: none;
       background: none;
       color: inherit;
   }
   input,
   textarea,
   select {
       font-family: var(--font);
   }
   
   /* ========================================================================
      SCROLLBAR
      ======================================================================== */
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   ::-webkit-scrollbar-track {
       background: var(--bg-secondary);
   }
   ::-webkit-scrollbar-thumb {
       background: var(--accent);
       border-radius: 10px;
   }
   ::-webkit-scrollbar-thumb:hover {
       background: #4aa8ff;
   }
   
   /* ========================================================================
      SKELETON LOADER
      ======================================================================== */
   .skeleton {
       background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: var(--radius-sm);
       min-height: 60px;
   }
   
   .skeleton-text {
       height: 14px;
       margin: 6px 0;
       border-radius: 4px;
       background: rgba(255, 255, 255, 0.05);
   }
   .skeleton-text.w60 {
       width: 60%;
   }
   .skeleton-text.w40 {
       width: 40%;
   }
   .skeleton-text.w80 {
       width: 80%;
   }
   
   @keyframes shimmer {
       0% {
           background-position: -200% 0;
       }
       100% {
           background-position: 200% 0;
       }
   }
   
   /* ========================================================================
      UTILITY
      ======================================================================== */
   .container {
       width: 92%;
       max-width: 1140px;
       margin: 0 auto;
       padding: 0 12px;
   }
   
   .section-title {
       font-size: clamp(1.2rem, 3vw, 1.8rem);
       font-weight: 700;
       color: var(--accent);
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
   }
   .section-title i {
       font-size: 0.85em;
   }
   
   .hidden {
       display: none !important;
   }
   
   /* ========================================================================
      HEADER – TOP BAR
      ======================================================================== */
   .top-bar {
       background: var(--bg-secondary);
       border-bottom: 1px solid rgba(255, 255, 255, 0.04);
       padding: 0 16px;
       height: 38px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 13px;
       color: var(--text-secondary);
   }
   
   .top-bar .top-links {
       display: flex;
       gap: 18px;
       list-style: none;
       flex-wrap: wrap;
   }
   .top-bar .top-links a {
       color: var(--text-secondary);
       padding: 2px 8px;
       border-radius: var(--radius-xs);
       transition: var(--transition);
       font-size: 12.5px;
       background: rgba(255, 255, 255, 0.02);
   }
   .top-bar .top-links a:hover {
       color: var(--accent);
       background: rgba(30, 144, 255, 0.10);
   }
   
   /* ========================================================================
      HEADER – MAIN
      ======================================================================== */
   .main-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 4%;
       height: 100px;
       background: var(--bg-header);
       position: sticky;
       top: 0;
       z-index: 100;
       border-bottom: 1px solid rgba(255, 255, 255, 0.04);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
   }
   
   .main-header .logo img {
       height: 70px;
       width: auto;
       transition: var(--transition);
   }
   
   .desktop-nav {
       display: flex;
       gap: 32px;
       list-style: none;
       font-weight: 700;
       font-size: 17px;
   }
   .desktop-nav a {
       color: var(--text-secondary);
       padding: 6px 14px;
       border-radius: var(--radius-sm);
       transition: var(--transition);
       display: flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.02);
   }
   .desktop-nav a:hover,
   .desktop-nav a.active {
       color: #fff;
       background: var(--accent-dim);
   }
   .desktop-nav a.active {
       color: var(--accent);
       background: rgba(30, 144, 255, 0.15);
       box-shadow: 0 0 20px rgba(30, 144, 255, 0.05);
   }
   .desktop-nav a i {
       font-size: 0.85em;
   }
   
   .social-icons {
       display: flex;
       gap: 4px;
       list-style: none;
   }
   .social-icons a {
       color: var(--text-secondary);
       font-size: 22px;
       padding: 4px 6px;
       transition: var(--transition);
       border-radius: var(--radius-xs);
   }
   .social-icons a:hover {
       color: var(--accent);
       background: rgba(30, 144, 255, 0.10);
   }
   
   .menu-toggle {
       display: none;
       background: transparent;
       border: none;
       color: #fff;
       font-size: 26px;
       padding: 6px;
       cursor: pointer;
       z-index: 101;
   }
   
   /* ========================================================================
      MOBILE NAV
      ======================================================================== */
   .mobile-overlay {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.70);
       z-index: 998;
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
   }
   .mobile-overlay.active {
       display: block;
   }
   
   .mobile-nav {
       position: fixed;
       top: 0;
       right: -320px;
       width: 300px;
       max-width: 85vw;
       height: 100vh;
       background: linear-gradient(180deg, #0f0f1a, #1a1a2e);
       z-index: 999;
       transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       padding: 80px 24px 30px;
       overflow-y: auto;
       box-shadow: -8px 0 40px rgba(0, 0, 0, 0.60);
   }
   .mobile-nav.active {
       right: 0;
   }
   
   .mobile-nav ul {
       list-style: none;
   }
   .mobile-nav ul li {
       margin-bottom: 4px;
   }
   .mobile-nav ul li a {
       color: var(--text-secondary);
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       border-radius: var(--radius-sm);
       font-size: 17px;
       font-weight: 600;
       transition: var(--transition);
   }
   .mobile-nav ul li a:hover {
       background: rgba(255, 255, 255, 0.06);
       color: #fff;
   }
   .mobile-nav ul li a i {
       width: 24px;
       text-align: center;
       color: var(--accent);
   }
   
   .mobile-nav .mobile-social {
       margin-top: 30px;
       padding-top: 20px;
       border-top: 1px solid rgba(255, 255, 255, 0.06);
       text-align: center;
   }
   .mobile-nav .mobile-social h4 {
       color: var(--text-muted);
       font-size: 14px;
       margin-bottom: 12px;
   }
   .mobile-nav .mobile-social .icons {
       display: flex;
       justify-content: center;
       gap: 16px;
   }
   .mobile-nav .mobile-social .icons a {
       color: var(--text-secondary);
       font-size: 24px;
       transition: var(--transition);
   }
   .mobile-nav .mobile-social .icons a:hover {
       color: var(--accent);
       transform: scale(1.05);
   }
   
   /* ========================================================================
      SPA CONTENT
      ======================================================================== */
   .spa-content {
       flex: 1;
       padding: 28px 0 20px;
   }
   
   .page-section {
       display: none;
       animation: fadeUp 0.35s ease;
   }
   .page-section.active {
       display: block;
   }
   
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(18px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ========================================================================
      MATCHES HEADER (tabs)
      ======================================================================== */
   .matches-header {
       background: var(--accent-dim);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       border-radius: var(--radius);
       padding: 16px 24px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 14px;
       margin-bottom: 28px;
       border: 1px solid rgba(30, 144, 255, 0.08);
   }
   .matches-header h2 {
       font-size: clamp(1rem, 2.2vw, 1.4rem);
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 8px;
       color: #fff;
   }
   .matches-header h2 i {
       color: var(--accent);
   }
   
   .matches-tabs {
       display: flex;
       gap: 6px;
       flex-wrap: wrap;
   }
   .matches-tabs button {
       padding: 6px 18px;
       border-radius: 30px;
       font-size: 14px;
       font-weight: 600;
       color: var(--text-secondary);
       background: rgba(255, 255, 255, 0.04);
       transition: var(--transition);
       border: 1px solid transparent;
   }
   .matches-tabs button:hover {
       background: rgba(255, 255, 255, 0.08);
       color: #fff;
   }
   .matches-tabs button.active {
       background: var(--accent);
       color: #fff;
       box-shadow: 0 4px 20px rgba(30, 144, 255, 0.25);
   }
   
   /* ========================================================================
      MATCH CARDS – REDESIGNED WITH PLAY BUTTON OVERLAY
      ======================================================================== */
   .matches-list {
       display: flex;
       flex-direction: column;
       gap: 16px;
       align-items: center;
   }
   
   /* ── Match Card ── */
   .match-card {
       position: relative;
       background: linear-gradient(135deg, #262a3f 0%, #16182a 55%, #101120 100%);
       border: 1px solid rgba(255, 255, 255, 0.05);
       border-radius: 20px;
       padding: 28px 36px;
       cursor: pointer;
       width: 90%;
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       align-items: center;
       column-gap: 18px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
       transition: var(--transition);
   }
   
   .match-card::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(30, 144, 255, 0.06), transparent 55%);
       opacity: 0;
       transition: var(--transition);
       pointer-events: none;
   }
   
   .match-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 168, 255, 0.06) inset;
   }
   
   .match-card:hover::before {
       opacity: 1;
   }
   
   /* ── Individual team (logo stacked above name, centered) ── */
   .match-team {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
       gap: 12px;
       text-align: center;
       min-width: 0;
   }
   
   .match-team .team-logo {
       width: 75px;
       height: 75px;
       object-fit: contain;
       padding: 6px;
       flex-shrink: 0;
       transition: var(--transition);
   }
   
   .match-team .team-name {
       font-weight: 700;
       font-size: 16px;
       color: #ffffff;
       letter-spacing: 0.1px;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   /* ── Center column: time + status pill, stacked ── */
   .match-center {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 10px;
       flex-shrink: 0;
       padding: 0 8px;
   }
   
   .match-time {
       font-weight: 800;
       color: var(--match-time-color);
       font-size: 22px;
       letter-spacing: 0.5px;
       font-feature-settings: "tnum";
       text-align: center;
       line-height: 1;
   }
   
   /* Status Badge (pill) */
   .match-status {
       font-size: 13px;
       font-weight: 600;
       padding: 6px 18px;
       border-radius: 30px;
       white-space: nowrap;
       transition: var(--transition);
       flex-shrink: 0;
       background: rgba(30, 41, 59, 0.75);
       color: var(--text-secondary);
       border: 1px solid rgba(74, 168, 255, 0.35);
   }
   
   .match-status.live {
       background: var(--match-status-bg-live);
       color: var(--match-status-live);
       border-color: rgba(255, 68, 68, 0.35);
   }
   
   .match-status.finished {
       background: var(--match-status-bg-finished);
       color: var(--match-status-finished);
       border-color: rgba(68, 212, 124, 0.3);
   }
   
   @keyframes pulse-live {
       0%,
       100% {
           opacity: 1;
           transform: scale(1);
       }
       50% {
           opacity: 0.6;
           transform: scale(0.97);
       }
   }
   
   /* ── PLAY BUTTON OVERLAY ── */
   .match-play-btn {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0.75);
       width: 64px;
       height: 64px;
       border-radius: 50%;
       background: radial-gradient(circle at 30% 30%, #4aa8ff, #0a5ca6);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
       cursor: pointer;
       z-index: 20;
       box-shadow: 0 0 0 rgba(30, 144, 255, 0);
       pointer-events: none;
       border: 2px solid rgba(255, 255, 255, 0.15);
   }
   
   .match-card:hover .match-play-btn {
       opacity: 1;
       transform: translate(-50%, -50%) scale(1);
       pointer-events: auto;
       box-shadow: 0 0 40px rgba(30, 144, 255, 0.5), 0 0 80px rgba(30, 144, 255, 0.2);
   }
   
   .match-play-btn:hover {
       transform: translate(-50%, -50%) scale(1.08) !important;
       box-shadow: 0 0 60px rgba(30, 144, 255, 0.7), 0 0 120px rgba(30, 144, 255, 0.3) !important;
       border-color: rgba(255, 255, 255, 0.3);
   }
   
   .match-play-btn:active {
       transform: translate(-50%, -50%) scale(0.92) !important;
   }
   
   .match-play-btn i {
       color: #fff;
       font-size: 26px;
       margin-left: 4px;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
   }
   
   /* ── No matches ── */
   .no-matches {
       text-align: center;
       padding: 48px 20px;
       color: var(--text-muted);
       background: var(--bg-card);
       border-radius: var(--radius);
       border: 1px dashed rgba(255, 255, 255, 0.06);
   }
   .no-matches i {
       font-size: 36px;
       margin-bottom: 14px;
       display: block;
       opacity: 0.4;
   }
   
   /* ── Responsive: match card ── */
   @media (max-width: 768px) {
       .match-card {
           padding: 20px 16px;
           column-gap: 10px;
           border-radius: 16px;
       }
   
       .match-time {
           font-size: 18px;
       }
   
       .match-team {
           gap: 8px;
       }
   
       .match-team .team-logo {
           width: 46px;
           height: 46px;
       }
   
       .match-team .team-name {
           font-size: 13px;
       }
   
       .match-status {
           font-size: 11px;
           padding: 4px 12px;
       }
   
       .match-center {
           gap: 6px;
           padding: 0 4px;
       }
   
       .match-play-btn {
           width: 50px;
           height: 50px;
       }
       .match-play-btn i {
           font-size: 20px;
           margin-left: 3px;
       }
   }
   
   @media (max-width: 480px) {
       .match-card {
           padding: 16px 10px;
           column-gap: 6px;
           border-radius: 14px;
       }
   
       .match-time {
           font-size: 16px;
       }
   
       .match-team {
           gap: 6px;
       }
   
       .match-team .team-logo {
           width: 38px;
           height: 38px;
           padding: 4px;
       }
   
       .match-team .team-name {
           font-size: 11.5px;
       }
   
       .match-status {
           font-size: 10px;
           padding: 3px 10px;
       }
   
       .match-play-btn {
           width: 42px;
           height: 42px;
       }
       .match-play-btn i {
           font-size: 17px;
           margin-left: 2px;
       }
   }
   
   @media (max-width: 380px) {
       .match-team .team-name {
           font-size: 10.5px;
       }
       .match-team .team-logo {
           width: 32px;
           height: 32px;
       }
       .match-time {
           font-size: 14px;
       }
       .match-status {
           font-size: 9px;
           padding: 2px 8px;
       }
       .match-play-btn {
           width: 36px;
           height: 36px;
       }
       .match-play-btn i {
           font-size: 14px;
           margin-left: 2px;
       }
   }
   
   /* ========================================================================
      ABOUT PAGE
      ======================================================================== */
   .about-hero {
       background: var(--accent-dim);
       border-radius: var(--radius);
       padding: 30px 28px;
       text-align: center;
       margin-bottom: 30px;
       border: 1px solid rgba(30, 144, 255, 0.08);
   }
   .about-hero h1 {
       font-size: clamp(1.6rem, 4vw, 2.4rem);
       color: var(--accent);
       margin-bottom: 8px;
   }
   .about-hero p {
       color: var(--text-secondary);
       font-size: 15px;
       max-width: 600px;
       margin: 0 auto;
   }
   
   .about-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 20px;
       margin-top: 10px;
   }
   .about-card {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 24px 20px;
       text-align: center;
       transition: var(--transition);
       border: 1px solid rgba(255, 255, 255, 0.03);
   }
   .about-card:hover {
       background: var(--bg-card-hover);
       transform: translateY(-3px);
   }
   .about-card i {
       font-size: 34px;
       color: var(--accent);
       margin-bottom: 12px;
       display: inline-block;
   }
   .about-card h3 {
       font-size: 18px;
       margin-bottom: 6px;
       color: #fff;
   }
   .about-card p {
       color: var(--text-secondary);
       font-size: 14px;
       line-height: 1.7;
   }
   
   /* ========================================================================
      PRIVACY & TERMS
      ======================================================================== */
   .privacy-grid,
   .terms-grid {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }
   .privacy-card,
   .terms-card {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 22px 24px;
       border: 1px solid rgba(255, 255, 255, 0.03);
       transition: var(--transition);
   }
   .privacy-card:hover,
   .terms-card:hover {
       background: var(--bg-card-hover);
   }
   .privacy-card h3,
   .terms-card h3 {
       display: flex;
       align-items: center;
       gap: 10px;
       color: var(--accent);
       font-size: 18px;
       margin-bottom: 6px;
   }
   .privacy-card p,
   .terms-card p {
       color: var(--text-secondary);
       font-size: 14px;
       line-height: 1.7;
   }
   
   /* ========================================================================
      CONTACT
      ======================================================================== */
   .contact-wrap {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 30px;
       align-items: start;
   }
   @media (max-width: 720px) {
       .contact-wrap {
           grid-template-columns: 1fr;
       }
   }
   
   .contact-form {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 28px;
       border: 1px solid rgba(255, 255, 255, 0.03);
   }
   .contact-form label {
       display: block;
       font-weight: 600;
       font-size: 14px;
       color: var(--text-secondary);
       margin-bottom: 4px;
   }
   .contact-form input,
   .contact-form textarea {
       width: 100%;
       padding: 12px 16px;
       border-radius: var(--radius-sm);
       border: 1px solid rgba(255, 255, 255, 0.06);
       background: rgba(255, 255, 255, 0.03);
       color: #fff;
       font-size: 15px;
       transition: var(--transition);
       margin-bottom: 16px;
       resize: vertical;
   }
   .contact-form input:focus,
   .contact-form textarea:focus {
       outline: none;
       border-color: var(--accent);
       background: rgba(255, 255, 255, 0.06);
       box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.10);
   }
   .contact-form input::placeholder,
   .contact-form textarea::placeholder {
       color: rgba(255, 255, 255, 0.25);
   }
   .contact-form button {
       padding: 12px 32px;
       border-radius: var(--radius-sm);
       background: var(--accent);
       color: #fff;
       font-weight: 700;
       font-size: 16px;
       transition: var(--transition);
       border: none;
       width: 100%;
   }
   .contact-form button:hover {
       background: #4aa8ff;
       box-shadow: 0 4px 24px rgba(30, 144, 255, 0.25);
   }
   .contact-form button:disabled {
       opacity: 0.6;
       cursor: not-allowed;
   }
   
   .contact-info {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 28px;
       border: 1px solid rgba(255, 255, 255, 0.03);
   }
   .contact-info h3 {
       color: #fff;
       font-size: 18px;
       margin-bottom: 12px;
   }
   .contact-info p {
       color: var(--text-secondary);
       font-size: 14px;
       line-height: 1.8;
   }
   .contact-info .social-row {
       display: flex;
       gap: 12px;
       margin-top: 16px;
       flex-wrap: wrap;
   }
   .contact-info .social-row a {
       color: var(--text-secondary);
       font-size: 28px;
       transition: var(--transition);
   }
   .contact-info .social-row a:hover {
       color: var(--accent);
       transform: scale(1.05);
   }
   
   /* ========================================================================
      DASHBOARD (Admin)
      ======================================================================== */
   .admin-section {
       background: var(--bg-card);
       border-radius: var(--radius);
       padding: 24px;
       border: 1px solid rgba(255, 255, 255, 0.03);
       margin-top: 20px;
   }
   .admin-section h2 {
       color: var(--accent);
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       gap: 10px;
   }
   .admin-section .admin-form {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
   }
   .admin-section .admin-form .full-width {
       grid-column: 1 / -1;
   }
   .admin-section .admin-form label {
       display: block;
       font-size: 13px;
       color: var(--text-secondary);
       margin-bottom: 4px;
   }
   .admin-section .admin-form input,
   .admin-section .admin-form select,
   .admin-section .admin-form textarea {
       width: 100%;
       padding: 10px 14px;
       border-radius: var(--radius-sm);
       border: 1px solid rgba(255, 255, 255, 0.06);
       background: rgba(255, 255, 255, 0.03);
       color: #fff;
       font-size: 14px;
   }
   .admin-section .admin-form input:focus,
   .admin-section .admin-form select:focus,
   .admin-section .admin-form textarea:focus {
       outline: none;
       border-color: var(--accent);
   }
   .admin-section .admin-form button {
       padding: 10px 20px;
       border-radius: var(--radius-sm);
       background: var(--accent);
       color: #fff;
       font-weight: 700;
       font-size: 15px;
       transition: var(--transition);
       border: none;
       margin-top: 8px;
   }
   .admin-section .admin-form button:hover {
       background: #4aa8ff;
   }
   .admin-section .admin-form .btn-danger {
       background: var(--danger);
   }
   .admin-section .admin-form .btn-danger:hover {
       background: #cc0000;
   }
   .admin-section .admin-list {
       margin-top: 20px;
   }
   .admin-section .admin-list .item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: rgba(255, 255, 255, 0.02);
       border-radius: var(--radius-sm);
       margin-bottom: 8px;
       flex-wrap: wrap;
       gap: 8px;
   }
   .admin-section .admin-list .item .info {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
   }
   .admin-section .admin-list .item .info img {
       width: 32px;
       height: 32px;
       object-fit: contain;
       border-radius: 4px;
       background: rgba(255, 255, 255, 0.04);
   }
   .admin-section .admin-list .item .actions button {
       padding: 4px 12px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600;
       margin-left: 6px;
   }
   .admin-section .admin-list .item .actions .edit {
       background: var(--warning);
       color: #000;
   }
   .admin-section .admin-list .item .actions .delete {
       background: var(--danger);
       color: #fff;
   }
   .admin-section .admin-list .item .stream-indicator {
       font-size: 12px;
       padding: 2px 10px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.06);
       color: var(--text-muted);
   }
   .admin-section .admin-list .item .stream-indicator.has-stream {
       color: var(--success);
       background: rgba(68, 212, 124, 0.12);
   }
   .admin-section .admin-list .item .stream-indicator.no-stream {
       color: var(--text-muted);
       background: rgba(255, 255, 255, 0.04);
   }
   
   .login-card {
       max-width: 400px;
       margin: 30px auto;
       padding: 28px;
       background: var(--bg-card);
       border-radius: var(--radius);
       border: 1px solid rgba(255, 255, 255, 0.03);
   }
   .login-card h3 {
       text-align: center;
       color: #fff;
       margin-bottom: 16px;
   }
   .login-card input {
       width: 100%;
       padding: 12px 16px;
       border-radius: var(--radius-sm);
       border: 1px solid rgba(255, 255, 255, 0.06);
       background: rgba(255, 255, 255, 0.03);
       color: #fff;
       font-size: 15px;
       margin-bottom: 12px;
   }
   .login-card input:focus {
       outline: none;
       border-color: var(--accent);
   }
   .login-card button {
       width: 100%;
       padding: 12px;
       border-radius: var(--radius-sm);
       background: var(--accent);
       color: #fff;
       font-weight: 700;
       font-size: 16px;
       border: none;
       transition: var(--transition);
   }
   .login-card button:hover {
       background: #4aa8ff;
   }
   .login-card .error {
       color: var(--danger);
       font-size: 14px;
       text-align: center;
       margin-top: 10px;
   }
   
   /* ========================================================================
      TOAST
      ======================================================================== */
   .toast {
       position: fixed;
       bottom: 30px;
       right: 30px;
       padding: 14px 24px;
       border-radius: var(--radius-sm);
       background: var(--accent);
       color: #fff;
       font-weight: 600;
       font-size: 15px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
       z-index: 9999;
       transform: translateY(80px);
       opacity: 0;
       transition: transform 0.4s ease, opacity 0.4s ease;
       max-width: 90vw;
   }
   .toast.show {
       transform: translateY(0);
       opacity: 1;
   }
   .toast.error {
       background: var(--danger);
   }
   .toast.success {
       background: var(--success);
       color: #0a0a14;
   }
   
   /* ========================================================================
      FOOTER
      ======================================================================== */
   .site-footer {
       text-align: center;
       padding: 24px 16px 18px;
       color: var(--text-muted);
       font-size: 13px;
       border-top: 1px solid rgba(255, 255, 255, 0.04);
       margin-top: 10px;
   }
   .site-footer a {
       color: var(--accent);
   }
   
   /* ========================================================================
      RESPONSIVE (general)
      ======================================================================== */
   @media (max-width: 1024px) {
       .main-header {
           height: 80px;
           padding: 0 3%;
       }
       .main-header .logo img {
           height: 56px;
       }
       .desktop-nav {
           gap: 18px;
           font-size: 15px;
       }
       .desktop-nav a {
           padding: 4px 10px;
       }
   }
   
   @media (max-width: 820px) {
       .desktop-nav {
           display: none;
       }
       .social-icons {
           display: none;
       }
       .menu-toggle {
           display: block;
       }
       .main-header {
           height: 70px;
           padding: 0 14px;
       }
       .main-header .logo img {
           height: 50px;
       }
       .main-header .logo {
           margin-right: auto;
           margin-left: 12px;
       }
       .top-bar .top-links {
           gap: 8px;
       }
       .top-bar .top-links a {
           font-size: 11px;
           padding: 1px 6px;
       }
   
       .admin-section .admin-form {
           grid-template-columns: 1fr;
       }
   }
   
   @media (max-width: 480px) {
       .main-header {
           height: 62px;
       }
       .main-header .logo img {
           height: 42px;
       }
       .top-bar {
           height: 32px;
           font-size: 11px;
           padding: 0 10px;
       }
       .top-bar .top-links a {
           font-size: 10px;
           padding: 1px 4px;
       }
   
       .matches-header {
           padding: 12px 16px;
           flex-direction: column;
           align-items: stretch;
       }
       .matches-tabs {
           justify-content: center;
       }
       .matches-tabs button {
           font-size: 12px;
           padding: 4px 12px;
       }
   
       .about-grid {
           grid-template-columns: 1fr;
       }
       .contact-form {
           padding: 18px;
       }
       .contact-info {
           padding: 18px;
       }
   
       .mobile-nav {
           width: 260px;
           right: -280px;
           padding: 70px 18px 20px;
       }
       .mobile-nav ul li a {
           font-size: 15px;
           padding: 10px 12px;
       }
   
       .toast {
           bottom: 16px;
           right: 16px;
           padding: 12px 18px;
           font-size: 13px;
           max-width: calc(100vw - 32px);
       }
   }