:root { color-scheme: dark; --green:#04f57f; --cyan:#74FFC4; --yellow:#ffdf4d; --red:#ff4d4d; --navy:#07183f; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { width:100%; max-width:100%; overflow-x:hidden; }
body { margin:0; width:100%; min-width:0; min-height:100vh; overflow-x:hidden; background: radial-gradient(circle at 30% 0%, rgba(4,245,127,.34), transparent 35%), linear-gradient(160deg, #061032, #041021 58%, #020611); color:#fff; scroll-padding-top:190px; }
a { color: var(--cyan); font-weight: 800; text-decoration: none; }
.shell { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding:186px 0 48px; }
.topbar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  align-items:stretch;
  width:min(1180px, calc(100% - 28px));
  max-width:calc(100% - 28px);
  margin:0;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:25px;
  background:linear-gradient(180deg, rgba(6,16,50,.18), rgba(4,16,33,.14));
  box-shadow:0 16px 38px rgba(0,0,0,.34);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(14px);
}
.admin-topbar-main { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; width:100%; }
.admin-menu-toggle { display:none; align-items:center; justify-content:center; gap:9px; min-height:42px; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:10px 14px; background:linear-gradient(135deg, rgba(255,223,77,.22), rgba(4,245,127,.14)); color:#fff; font:inherit; font-weight:950; letter-spacing:.02em; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.20); }
.admin-menu-toggle:hover, .admin-menu-toggle:focus-visible { border-color:rgba(116,255,196,.54); background:rgba(4,245,255,.14); outline:none; }
.admin-menu-icon { position:relative; display:inline-block; width:20px; height:14px; flex:0 0 auto; }
.admin-menu-icon::before, .admin-menu-icon::after, .admin-menu-icon span { content:''; position:absolute; left:0; width:100%; height:2px; border-radius:999px; background:currentColor; transition:transform .18s ease, opacity .18s ease, top .18s ease; }
.admin-menu-icon::before { top:0; }
.admin-menu-icon span { top:6px; }
.admin-menu-icon::after { top:12px; }
.topbar.nav-open .admin-menu-icon::before { top:6px; transform:rotate(45deg); }
.topbar.nav-open .admin-menu-icon span { opacity:0; }
.topbar.nav-open .admin-menu-icon::after { top:6px; transform:rotate(-45deg); }
.brand { display:flex; gap:12px; align-items:center; min-width:0; font-weight:950; letter-spacing:.02em; }
.brand a { display:flex; gap:12px; align-items:center; min-width:0; color:#fff; }
.brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand img { width:84px; height:84px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));display:block; }
.nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; width:100%; max-width:100%; font-size: 14px; pointer-events:auto; }
.nav a, .button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:9px 14px; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; font-weight:850; cursor:pointer; white-space:nowrap; }
.nav a:hover, .button:hover { background:rgba(4,245,255,.16); border-color:rgba(4,245,255,.45); }
.nav a.active { background:linear-gradient(135deg, rgba(255,223,77,.28), rgba(4,245,127,.20)); border-color:rgba(255,223,77,.45); color:#fff; box-shadow:0 0 0 1px rgba(255,223,77,.08) inset; }
h1 { margin:0 0 8px; font-size:clamp(32px, 7vw, 54px); line-height:.95; }
h2 { margin:0 0 14px; font-size:24px; }
p { color:rgba(255,255,255,.78); line-height:1.55; }
.grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.two-col { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.card { border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:20px; background:rgba(6,24,63,.78); box-shadow:0 24px 70px rgba(0,0,0,.25); }
.stat { font-size:34px; font-weight:950; color:var(--yellow); }
.muted { color:rgba(255,255,255,.62); }
.section { margin-top:18px; }
.table-wrap { overflow:auto; border-radius:18px; border:1px solid rgba(255,255,255,.12); }
table { width:100%; border-collapse:collapse; min-width:720px; background:rgba(0,0,0,.12); }
th, td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left; vertical-align:top; }
th { color:#bdfcec; background:rgba(255,255,255,.06); font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:0; }
input, select, textarea { width:100%; border:1px solid rgba(255,255,255,.20); border-radius:15px; padding:12px 14px; background:rgba(0,0,0,0.09); color:#8A8A8A; font:inherit; }
textarea { min-height:220px; resize:vertical; line-height:1.5; color:#fff; }
label { display:block; margin:0 0 8px; font-weight:850; }
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.check-row { display:flex; align-items:center; gap:10px; padding:12px 0; }
.check-row input { width:auto; transform:scale(1.25); }
.danger-zone { border-color:rgba(255,77,77,.42); background:rgba(255,77,77,.10); }
.compact-table { min-width:520px; }
.primary { background:linear-gradient(135deg, var(--yellow), var(--green)); color:#071321; border:0; box-shadow:0 12px 28px rgba(4,245,127,.24); }
.danger { background:linear-gradient(135deg, #ffdf4d, #ff4d4d); color:#210706; border:0; }
.notice { margin:14px 0; padding:13px 15px; border-radius:16px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); font-weight:800; }
.notice.error { background:rgba(255,77,77,.18); border-color:rgba(255,77,77,.45); }
.notice.success { background:rgba(4,245,127,.14); border-color:rgba(4,245,127,.38); }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin:18px 0 14px; }
.search-form { display:flex; gap:10px; flex:1 1 420px; align-items:flex-end; }
.search-form label { flex:1 1 260px; margin:0; }
.search-form .button { flex:0 0 auto; }
.results-meta { color:rgba(255,255,255,.68); font-weight:800; margin:8px 0 0; }
.pagination { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:16px; }
.page-link { min-width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:8px 12px; color:#fff; background:rgba(255,255,255,.08); text-decoration:none; font-weight:900; }
.page-link:hover { background:rgba(4,245,255,.16); border-color:rgba(4,245,255,.45); }
.page-link.active { background:linear-gradient(135deg, var(--yellow), var(--green)); color:#071321; border:0; }
.page-link.disabled { opacity:.45; pointer-events:none; }
code { color:var(--yellow); font-weight:850; }
.admin-mail-link { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:6px 10px; border-radius:999px; color:#071321; background:linear-gradient(135deg, var(--cyan), var(--green)); text-decoration:none; font-size:13px; font-weight:950; white-space:nowrap; box-shadow:0 10px 22px rgba(4,245,255,.16); }
.admin-mail-link:hover, .admin-mail-link:focus-visible { filter:brightness(1.08); transform:translateY(-1px); outline:none; }
.admin-mail-link.secondary { background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.mail-compose-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:18px; align-items:start; }
.recipient-summary { display:grid; gap:10px; margin:14px 0; }
.recipient-summary div { padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(0,0,0,.14); }
.recipient-list { display:grid; gap:8px; max-height:360px; overflow:auto; padding-right:4px; }
.recipient-card { display:flex; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(0,0,0,.14); }
.recipient-card span:first-child { overflow-wrap:anywhere; }
.compose-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.team-player-details { min-width:260px; }
.team-player-details summary { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:900; }
.team-player-details[open] summary { background:rgba(4,245,255,.16); border-color:rgba(4,245,255,.40); }
.team-player-actions { margin-top:10px; }
.team-player-list { display:grid; gap:8px; margin-top:10px; }
.team-player-card { display:grid; grid-template-columns:minmax(140px, 1fr) auto auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(0,0,0,.14); }
.team-player-card strong { overflow-wrap:anywhere; }
.team-player-card .score-pill { color:#071321; background:var(--yellow); border-radius:999px; padding:5px 9px; font-weight:950; white-space:nowrap; }
.dashboard-team-players { margin-top:8px; }
.money { color:var(--green); font-weight:950; white-space:nowrap; }
.rate-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:8px 12px; background:rgba(255,223,77,.15); border:1px solid rgba(255,223,77,.36); color:var(--yellow); font-weight:950; }
.pot-total { font-size:38px; font-weight:950; color:var(--green); line-height:1; }
.analytics-filter { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; align-items:end; }
.analytics-chart-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:14px; }
.analytics-chart-card { min-width:0; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(0,0,0,.13); }
.analytics-chart-card h3 { margin:0 0 10px; font-size:15px; color:#bdfcec; letter-spacing:.04em; text-transform:uppercase; }
.analytics-chart { min-height:220px; display:grid; align-items:center; }
.analytics-svg-chart { display:block; width:100%; height:auto; overflow:visible; }
.analytics-svg-chart text { fill:rgba(255,255,255,.68); font-size:18px; font-weight:800; }
.analytics-svg-chart circle { fill:#fff; stroke:rgba(0,0,0,.28); stroke-width:2; }
.analytics-svg-chart rect { fill:#ffdf4d; opacity:.9; }
.analytics-grid-lines line { stroke:rgba(255,255,255,.14); stroke-width:1; }
.analytics-hbars { display:grid; gap:11px; }
.analytics-hbar-row { display:grid; grid-template-columns:minmax(92px, 1fr) minmax(120px, 2fr) auto; gap:10px; align-items:center; }
.analytics-hbar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-weight:850; }
.analytics-hbar-track { height:15px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.10); }
.analytics-hbar-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--yellow), var(--green), var(--cyan)); box-shadow:0 0 22px rgba(4,245,255,.18); }
.analytics-hbar-value { color:var(--yellow); font-size:13px; font-weight:950; white-space:nowrap; }
.analytics-empty-chart { min-height:180px; display:grid; place-items:center; border:1px dashed rgba(255,255,255,.18); border-radius:16px; color:rgba(255,255,255,.62); font-weight:850; text-align:center; padding:16px; }
.analytics-kpi { min-height:148px; display:flex; flex-direction:column; justify-content:space-between; }
.analytics-kpi .stat { font-size:clamp(28px, 5vw, 38px); }
.analytics-substat { margin-top:8px; color:rgba(255,255,255,.64); font-size:13px; font-weight:750; line-height:1.35; }
.analytics-bar { display:block; height:9px; min-width:22px; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--cyan)); box-shadow:0 0 18px rgba(4,245,255,.18); }
.analytics-bar.event-bar { background:linear-gradient(90deg, var(--yellow), var(--green)); }
.event-pill { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; border:1px solid rgba(4,245,255,.28); background:rgba(4,245,255,.10); color:#bdfcec; font-size:12px; font-weight:950; white-space:nowrap; }
.share-kpi { border-color:rgba(255,40,130,.34); background:radial-gradient(circle at 8% 10%, rgba(255,40,130,.20), transparent 46%), rgba(6,24,63,.78); }
.share-method-split { min-height:220px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.share-method-split div { display:grid; place-items:center; align-content:center; gap:8px; min-height:170px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.07); text-align:center; }
.share-method-split strong { color:var(--yellow); font-size:clamp(34px, 6vw, 52px); line-height:1; }
  strong{color:rgba(0,255,140,1.00);}
.share-method-split span { color:rgba(255,255,255,.72); font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:12px; }
.analytics-mode { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); font-weight:900; }
.analytics-mode.demo { border-color:rgba(255,223,77,.42); background:rgba(255,223,77,.14); color:var(--yellow); }
.desktop-admin-nav { display:flex; }
.mobile-admin-nav { display:none; }
@media (min-width: 761px) {
  body.admin-menu-open { overflow:auto; }
  .topbar {
    position:fixed !important;
    top:12px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(1180px, calc(100% - 28px));
    max-width:calc(100% - 28px);
    margin:0;
  }
  .admin-menu-toggle { display:none !important; }
  .desktop-admin-nav { display:flex !important; flex-wrap:nowrap !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; position:static !important; overflow-x:auto !important; overflow-y:hidden !important; max-height:none !important; scrollbar-width:thin; }
  .desktop-admin-nav a { flex:0 0 auto; }
  .mobile-admin-nav, .topbar.nav-open .mobile-admin-nav { display:none !important; }
  .nav a { pointer-events:auto; }
}
@media (max-width: 900px) { .analytics-filter { grid-template-columns:repeat(2, minmax(0, 1fr)); } .analytics-chart-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  body.admin-menu-open { overflow:hidden; }
  .shell { width:100%; max-width:100%; padding:96px 10px 48px; }
  .topbar {
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    transform:none;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    width:100%;
    max-width:none;
    margin:0;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
    border-radius:0 0 22px 22px;
    border-left:0;
    border-right:0;
    border-top:0;
  }
  .admin-topbar-main { width:100%; justify-content:space-between; gap:12px; }
  .admin-menu-toggle { display:inline-flex; flex:0 0 auto; }
  .brand { min-width:0; flex:1 1 auto; }
  .brand a { min-width:0; }
  .brand span { max-width:44vw; }
  .brand img { width:58px; height:58px; }
  .desktop-admin-nav { display:none !important; }
  .mobile-admin-nav {
    display:none;
    width:100%;
    max-width:100%;
    margin-top:10px;
    padding:10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:rgba(2,6,17,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    overflow-x:hidden;
    overflow-y:auto;
    max-height:calc(100svh - 106px);
    flex-direction:column;
    flex-wrap:nowrap;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .topbar.nav-open .mobile-admin-nav { display:flex; }
  .mobile-admin-nav a {
    width:100%;
    min-height:46px;
    flex:0 0 auto;
    justify-content:flex-start;
    border-radius:15px;
    padding:12px 13px;
  }
  .mobile-admin-nav a.active { background:linear-gradient(135deg, var(--yellow), var(--green)); color:#071321; border-color:transparent; }
  .grid, .form-grid, .two-col, .mail-compose-grid, .analytics-filter { grid-template-columns:1fr; }
  .analytics-hbar-row { grid-template-columns:1fr; gap:5px; }
  .team-player-card { grid-template-columns:1fr; }
  .toolbar, .search-form { width:100%; }
  .search-form { flex-direction:column; align-items:stretch; }
  .search-form label, .search-form .button { width:100%; flex:1 1 auto; }
  .card { padding:16px; border-radius:20px; }
}

/* External admin navigation guards. Desktop and mobile menus are intentionally separate. */
@media (min-width: 761px) {
  .desktop-admin-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .desktop-admin-nav a {
    flex: 0 0 auto;
  }

  .mobile-admin-nav,
  .admin-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .desktop-admin-nav {
    display: none !important;
  }

  .topbar.nav-open .mobile-admin-nav {
    display: flex !important;
  }
}

/* Admin menu icons */
.nav a {
  gap: 7px;
}

.admin-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  min-width: 1.25em;
  line-height: 1;
  font-size: 1.04em;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.24));
}

.admin-nav-label {
  display: inline-block;
  min-width: 0;
}

.mobile-admin-nav .admin-nav-icon {
  width: 1.5em;
  min-width: 1.5em;
  font-size: 1.1em;
}

/* Admin management area icons */
h1,
h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-area-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.65em;
  min-width: 1.65em;
  height: 1.65em;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.30), transparent 32%),
    linear-gradient(135deg, rgba(255,223,77,.24), rgba(4,245,127,.18));
  box-shadow: 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
  font-size: .74em;
  line-height: 1;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.22));
}

h1 .admin-area-icon {
  width: 1.35em;
  min-width: 1.35em;
  height: 1.35em;
  border-radius: 20px;
  font-size: .62em;
}

h2 .admin-area-icon {
  width: 1.8em;
  min-width: 1.8em;
  height: 1.8em;
  border-radius: 14px;
  font-size: .78em;
}

.admin-metric-card,
.admin-management-card {
  position: relative;
  overflow: hidden;
}

.admin-metric-card::after,
.admin-management-card::after {
  content: '';
  position: absolute;
  inset: auto -28px -36px auto;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,223,77,.13), transparent 70%);
  pointer-events: none;
}

.admin-card-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,223,77,.24), rgba(4,245,127,.16));
  box-shadow: 0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
  font-size: 20px;
  line-height: 1;
}

.admin-notice-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-notice-with-icon .admin-area-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 15px;
}

@media (max-width: 760px) {
  h1,
  h2 {
    gap: 8px;
  }

  h1 .admin-area-icon {
    border-radius: 16px;
  }

  .admin-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 18px;
    margin-bottom: 10px;
  }
}