:root {
  color-scheme: dark;
  --bg: #080808;
  --surface: #111111;
  --surface-raised: #181818;
  --surface-hover: #202020;
  --border: #292929;
  --border-soft: #1d1d1d;
  --text: #f5f5f5;
  --muted: #929292;
  --quiet: #626262;
  --lime: #ffffff;
  --lime-dark: #d7d7d7;
  --font: "DM Sans", sans-serif;
  --display: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 238px; padding: 27px 16px 16px; background: #0b0b0b; border-right: 1px solid var(--border-soft); }
.brand { display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 0 44px 8px; width: fit-content; }
.brand-logo-frame { position: relative; display: block; width: 40px; height: 48px; overflow: hidden; }
.brand-logo { position: absolute; top: -26px; left: -29px; width: 96px; height: 96px; max-width: none; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.9px; }
.brand-period { color: var(--lime); }
.sidebar-label { display: flex; align-items: center; gap: 9px; padding: 0 11px; color: #64656f; font-size: 10px; font-weight: 700; letter-spacing: 1.15px; }
.sidebar-label:after { height: 1px; flex: 1; background: #1d1d1d; content: ""; }
.sidebar-label-spaced { margin-top: 23px; }
.primary-nav { display: grid; gap: 4px; margin-top: 11px; }
.nav-link { position: relative; display: flex; min-height: 41px; align-items: center; gap: 12px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: #a4a5ad; font-size: 13px; font-weight: 500; transition: background .17s ease, color .17s ease, transform .17s ease, border-color .17s ease; }
.nav-link:hover { color: var(--text); background: var(--surface-hover); transform: translateX(2px); }
.nav-link.active { color: #fff; background: #1b1c21; border-color: #27282e; }
.nav-link.active:before { position: absolute; left: -17px; width: 2px; height: 19px; content: ""; background: var(--lime); border-radius: 0 4px 4px 0; }
.nav-icon { display: grid; width: 17px; place-items: center; color: #92939c; font-size: 17px; line-height: 1; }
.nav-icon svg, .notification-button svg, .access-lock svg, .owner-mark svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.nav-icon svg { transition: transform .24s cubic-bezier(.2,.8,.2,1), color .2s ease; }
.nav-link:hover .nav-icon svg { transform: scale(1.13) rotate(-6deg); }
.nav-link.active .nav-icon { color: var(--lime); }
.nav-count { margin-left: auto; color: #62636d; font-size: 11px; }
#staff-nav-links { display: grid; gap: 4px; }
.sidebar-bottom { margin-top: auto; }
.league-access-card { display: grid; grid-template-columns: 31px 1fr 26px; align-items: center; gap: 9px; padding: 12px 9px; margin-bottom: 12px; border: 1px solid #252525; border-radius: 10px; background: linear-gradient(135deg,#171717,#101010); }
.access-orb { display: grid; width: 30px; height: 30px; place-items: center; color: var(--lime); background: #252525; border-radius: 8px; }
.league-access-card strong, .league-access-card span { display: block; }
.league-access-card strong { font-size: 11px; }
.league-access-card div:nth-child(2) span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid transparent; border-radius: 9px; color: #c1c2c9; background: transparent; cursor: pointer; transition: background .17s ease, color .17s ease, transform .17s ease, border-color .17s ease; }
.icon-button:hover { color: #fff; background: #202127; border-color: #303139; transform: translateY(-2px); }
.access-info { width: 25px; height: 25px; color: var(--muted); font-size: 12px; }
.access-orb { transition: transform .28s ease, box-shadow .28s ease; }
.league-access-card:hover .access-orb { transform: rotate(12deg) scale(1.08); box-shadow: 0 0 18px #ffffff1a; }
.account-chip { display: flex; align-items: center; width: 100%; gap: 10px; padding: 10px 8px 7px; border: 0; border-top: 1px solid var(--border-soft); margin-top: 10px; background: transparent; text-align: left; cursor: pointer; transition: background .17s ease, transform .17s ease; }
.account-chip:hover { background: #15161a; transform: translateY(-2px); }
.avatar-placeholder { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #343434; border-radius: 50%; color: var(--lime); background: #202020; font-weight: 700; }
.avatar-placeholder img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar-placeholder.has-avatar { overflow: hidden; padding: 0; }
.account-copy { display: grid; gap: 3px; }
.account-copy strong { font-size: 11px; font-weight: 600; }
.account-copy small { color: var(--muted); font-size: 10px; }
.account-arrow { margin-left: auto; color: #73747d; }

.main-area { min-height: 100vh; margin-left: 238px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 44px; border-bottom: 1px solid var(--border-soft); background: rgb(8 8 8 / 92%); backdrop-filter: blur(15px); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #74757e; font-size: 12px; }
.breadcrumb b { color: #474850; font-weight: 400; }
.breadcrumb strong { color: #e7e7ea; font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.global-search { position: relative; display: flex; width: clamp(165px, 24vw, 290px); height: 36px; flex: 0 1 290px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #282828; border-radius: 7px; margin: 0 16px; background: #101010; transition: border-color .17s ease, background .17s ease; }
.global-search:focus-within { border-color: #606060; background: #141414; }
.search-icon { color: #969696; font-size: 19px; line-height: 1; }
.global-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.global-search input::placeholder { color: #777; }
.global-search input::-webkit-search-cancel-button { cursor: pointer; }
.search-shortcut { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border: 1px solid #303030; border-radius: 4px; color: #777; font-size: 10px; }
.search-results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 30; overflow: hidden; border: 1px solid #303030; border-radius: 9px; background: #111; box-shadow: 0 18px 48px #000b; }
.search-result { display: flex; width: 100%; min-height: 53px; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-bottom: 1px solid #202020; background: transparent; text-align: left; cursor: pointer; transition: background .15s ease; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result:focus-visible { background: #1c1c1c; }
.search-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #343434; border-radius: 50%; color: #eee; background: #222; font-size: 11px; font-weight: 700; }
.search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-team-avatar { border-radius: 8px; }
.search-result-copy { display: grid; min-width: 0; gap: 3px; }
.search-result-copy strong { overflow: hidden; color: #eee; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy small { color: #858585; font-size: 9px; }
.search-arrow { margin-left: auto; color: #777; font-size: 12px; }
.search-empty { padding: 16px 12px; color: #929292; font-size: 10px; line-height: 1.5; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.points-pill { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #2a2b31; border-radius: 8px; background: #141519; font-family: var(--display); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.points-pill:hover { border-color: #777; transform: translateY(-2px); }
.points-star { color: var(--lime); font-size: 13px; }
.points-pill small { color: #85868e; font-family: var(--font); font-size: 9px; letter-spacing: .6px; }
.player-value-pill { display: grid; min-height: 34px; align-content: center; gap: 2px; padding: 5px 9px; border: 1px solid #303030; border-radius: 7px; background: #121212; white-space: nowrap; }
.player-value-pill[hidden] { display: none; }
.player-value-pill small { color: #858585; font-size: 7px; letter-spacing: .7px; }
.player-value-pill strong { color: #eee; font-family: var(--display); font-size: 10px; }
.notification-wrap { position: relative; }
.notification-button { position: relative; border-color: #292a30; background: #131418; font-size: 19px; }
.notification-button svg { width: 17px; height: 17px; transition: transform .23s ease; }
.notification-button:hover svg { transform: rotate(-12deg) translateY(-1px); }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border: 1px solid var(--bg); border-radius: 50%; background: var(--lime); }
.notification-popover { position: absolute; top: 46px; right: 0; width: 290px; overflow: hidden; border: 1px solid #2b2c33; border-radius: 12px; background: #131418; box-shadow: 0 18px 50px #0009; }
.popover-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.popover-heading strong { font-size: 13px; }
.popover-heading span { color: var(--muted); font-size: 10px; }
.popover-empty { display: grid; justify-items: center; gap: 7px; padding: 25px 20px 29px; text-align: center; }
.popover-empty > span { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--lime); background: #252525; }
.popover-empty strong { font-size: 12px; }
.popover-empty small { max-width: 195px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sign-in-button { display: flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #34353d; border-radius: 8px; background: #f0f0f2; color: #16171a; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .17s ease, transform .17s ease; }
.sign-in-button:hover { background: #dedede; transform: translateY(-2px); }
.discord-mark { font-size: 16px; }
.menu-button { display: none; }
.content { width: min(1120px, 100%); padding: 57px 44px 20px; margin: 0 auto; }

.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 36px; }
.eyebrow { color: #9697a0; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.welcome-row .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.live-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px #ffffff60; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 13px; font-family: var(--display); font-size: clamp(36px, 5vw, 55px); line-height: 1.05; letter-spacing: -2.7px; }
h1 span { color: var(--lime); }
.welcome-copy { max-width: 430px; margin-bottom: 0; color: #9697a0; font-size: 13px; line-height: 1.75; }
.welcome-actions { display: flex; gap: 9px; padding-bottom: 3px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 15px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .17s ease, background .17s ease, border-color .17s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: #111; }
.button-primary:hover { background: #dedede; }
.button-secondary { border-color: #303138; background: #15161a; color: #e5e5e8; }
.button-secondary:hover { border-color: #5a5b64; background: #1c1d22; }

.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.feature-card { position: relative; min-height: 212px; overflow: hidden; padding: 17px 18px; border: 1px solid #292a30; border-radius: 12px; background: linear-gradient(145deg,#141519 5%,#101115 80%); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: #737373; box-shadow: 0 8px 28px #0005, 0 0 26px #ffffff12; }
.feature-top { display: flex; justify-content: space-between; align-items: center; }
.feature-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #313239; border-radius: 8px; color: var(--lime); background: #1a1b1e; font-size: 15px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.feature-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; transition: transform .25s ease; }
.feature-card:hover .feature-icon svg { transform: scale(1.13) rotate(7deg); }
.feature-card:hover .feature-icon { transform: translateY(-2px) rotate(-7deg); border-color: #696969; background: #252525; }
.feature-arrow { color: #73747e; font-size: 14px; transition: transform .17s ease,color .17s ease; }
.feature-card:hover .feature-arrow { color: var(--lime); transform: translate(2px,-2px); }
.feature-metric { margin-top: 15px; color: #e5e5e7; font-family: var(--display); font-size: 21px; font-weight: 600; }
.feature-title { margin-top: 1px; color: #fff; font-size: 12px; font-weight: 700; }
.feature-card p { max-width: 220px; margin: 6px 0 0; color: #85868f; font-size: 10px; line-height: 1.5; }
.mini-pitch { position: absolute; right: 0; bottom: 0; width: 105px; height: 52px; border: 1px solid #383838; border-bottom: 0; border-right: 0; border-radius: 54px 0 0 0; opacity: .44; }
.mini-pitch:before { position: absolute; top: 0; right: 50px; width: 1px; height: 51px; background: #606647; content: ""; }
.mini-pitch:after { position: absolute; top: 15px; right: 50px; width: 20px; height: 20px; border: 1px solid #606647; border-radius: 50%; content: ""; }
.mini-pitch i:first-child { position: absolute; right: 0; bottom: 0; width: 27px; height: 28px; border: 1px solid #606647; border-bottom: 0; border-right: 0; }
.mini-pitch i:nth-child(2) { position: absolute; right: 84px; bottom: 0; width: 17px; height: 19px; border: 1px solid #606647; border-bottom: 0; border-left: 0; }
.mini-pitch i:nth-child(3) { position: absolute; right: 22px; top: -1px; width: 17px; height: 2px; background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.mini-pitch b { position: absolute; right: 64px; top: 23px; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.league-decoration { position: absolute; right: 14px; bottom: 13px; display: flex; align-items: center; gap: 6px; color: #6a6b63; font-family: var(--display); font-size: 12px; font-weight: 700; opacity: .53; }
.league-decoration span, .league-decoration b { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #565656; border-radius: 50%; }
.league-decoration i { color: var(--lime); font-size: 16px; font-style: normal; }
.player-decoration { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 4px; color: #aaa; font-family: var(--display); font-size: 8px; opacity: .5; }
.player-decoration span { padding: 5px 6px; border: 1px solid #55564e; border-radius: 5px; }

.lower-grid { display: grid; grid-template-columns: 1.48fr 1fr; gap: 13px; margin-top: 15px; }
.panel { min-height: 227px; padding: 19px 19px 12px; border: 1px solid #26272d; border-radius: 11px; background: #101115; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading .eyebrow { margin-bottom: 5px; font-size: 8px; }
h2 { margin-bottom: 0; font-family: var(--display); font-size: 17px; letter-spacing: -.45px; }
.text-link { color: #a5a6ad; font-size: 10px; transition: color .17s ease; }
.text-link span { padding-left: 4px; color: var(--lime); }
.text-link:hover { color: #fff; }
.empty-state { display: grid; justify-items: center; text-align: center; }
.compact-empty { padding: 26px 15px 19px; }
.empty-symbol { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #353535; border-radius: 10px; margin-bottom: 9px; color: var(--lime); background: #1a1a1a; font-size: 19px; }
.empty-state strong, .leaderboard-empty > strong { font-size: 11px; }
.empty-state p, .leaderboard-empty p { max-width: 300px; margin: 5px 0 0; color: #81828b; font-size: 10px; line-height: 1.55; }
.leaderboard-empty { display: grid; justify-items: center; padding-top: 17px; text-align: center; }
.empty-ranks { display: flex; height: 47px; align-items: flex-end; gap: 5px; margin-bottom: 9px; }
.empty-ranks span { display: grid; width: 24px; height: 27px; place-items: start center; padding-top: 4px; border: 1px solid #34353b; border-bottom: 0; border-radius: 5px 5px 0 0; color: #767780; background: #191a1e; font-size: 9px; }
.empty-ranks .rank-first { height: 38px; border-color: #777; color: var(--lime); background: #252525; }
.site-footer { display: flex; justify-content: space-between; gap: 10px; padding: 19px 2px 6px; color: #62636d; font-size: 8px; font-weight: 600; letter-spacing: .6px; }
.site-footer a { color: #8d8e96; font-size: 9px; letter-spacing: 0; }
.site-footer a:hover { color: var(--lime); }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading h1 { margin: 10px 0 8px; font-size: clamp(33px,4vw,44px); letter-spacing: -2px; }
.page-heading p { max-width: 570px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.eyebrow-normal { color: var(--lime); }
.page-panel { min-height: 320px; }
.empty-symbol, .dialog-symbol, .team-emblem, .search-avatar, .profile-avatar, .avatar-placeholder { transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease; }
.empty-state:hover .empty-symbol, .dialog-symbol:hover, .team-card:hover .team-emblem, .team-member:hover .avatar-placeholder { transform: translateY(-3px) rotate(-7deg); border-color: #777; box-shadow: 0 5px 18px #fff1; }
.empty-large { padding: 67px 20px; }
.empty-large .empty-symbol { width: 43px; height: 43px; margin-bottom: 13px; font-size: 21px; }
.empty-large strong { font-size: 13px; }
.empty-large p { max-width: 390px; font-size: 11px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 12px 9px; border-bottom: 1px solid var(--border); color: #777881; font-size: 9px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.data-table td { padding: 13px 9px; border-bottom: 1px solid var(--border-soft); color: #c3c4ca; font-size: 11px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.filter-chip { padding: 7px 10px; border: 1px solid #2d2e35; border-radius: 7px; color: #9b9ca4; background: #121317; font-size: 10px; }
.filter-chip.active { border-color: #777; color: var(--lime); background: #222; }
.tier-badge { display: inline-flex; min-width: 35px; justify-content: center; padding: 4px 6px; border: 1px solid #454545; border-radius: 5px; color: var(--lime); background: #202020; font-size: 9px; font-weight: 700; }
.subtle-note { color: #85868f; font-size: 10px; line-height: 1.6; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 17px 0; }
.stat-tile { padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: #141519; }
.stat-tile span { display: block; color: #888992; font-size: 9px; }
.stat-tile strong { display: block; margin-top: 7px; font-family: var(--display); font-size: 20px; }
.page-tabs { display: flex; gap: 17px; border-bottom: 1px solid var(--border); margin: 0 0 17px; }
.page-tab { position: relative; padding: 0 0 10px; border: 0; color: #8a8b94; background: transparent; font-size: 11px; cursor: pointer; }
.page-tab.active { color: white; }
.page-tab.active:after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--lime); content: ""; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.news-filter { display: flex; align-items: center; gap: 9px; }
.access-lock { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #393939; border-radius: 14px; margin-bottom: 14px; color: var(--lime); background: #202020; font-size: 18px; }
.access-lock svg { width: 21px; height: 21px; }
.permission-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #343434; border-radius: 8px; margin-top: 15px; color: #999aa1; background: #171717; font-size: 10px; line-height: 1.6; }
.permission-note b { color: var(--lime); font-size: 14px; }
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 17px; }
.guide-card { padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: #131418; }
.guide-card span { color: var(--lime); font-size: 12px; }
.guide-card strong { display: block; margin: 8px 0 4px; font-size: 11px; }
.guide-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.account-profile-panel { display: grid; align-content: start; gap: 22px; }
.account-profile { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 9px; background: #111; }
.profile-avatar { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #444; border-radius: 50%; color: #fff; background: #222; font-size: 20px; font-weight: 700; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-profile .eyebrow { margin-bottom: 5px; font-size: 8px; }
.account-profile strong, .account-profile small { display: block; }
.account-profile strong { font-size: 14px; }
.account-profile small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.connected-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #333; border-radius: 20px; margin-left: auto; color: #c8c8c8; font-size: 9px; }
.connected-badge span { width: 6px; height: 6px; border-radius: 50%; background: #d7d7d7; }
.account-profile-panel > .subtle-note { max-width: 500px; margin: 0; }
.player-profile { display: grid; max-width: 1050px; gap: 15px; margin: 0 auto; }
.player-profile-banner { position: relative; min-height: 310px; overflow: hidden; isolation: isolate; border: 1px solid #333; border-radius: 16px; background: radial-gradient(ellipse at 78% 12%,#ffffff18,transparent 42%),radial-gradient(ellipse at 18% 0%,#77777720,transparent 48%),linear-gradient(120deg,#252525,#111 58%,#1a1a1a); box-shadow: 0 24px 65px #0007; }
.player-profile-banner:before { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-position: center; background-size: 44px 44px; content: ""; mask-image: linear-gradient(90deg,#000,transparent 85%); }
.player-profile-banner:after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#080808d9 0%,#08080870 52%,#08080810 100%),linear-gradient(0deg,#080808e8 0%,transparent 80%); content: ""; pointer-events: none; }
.player-profile-banner.has-banner:after { background: linear-gradient(90deg,#080808c7 0%,#0808086b 52%,#08080812 100%),linear-gradient(0deg,#080808ec 0%,transparent 80%); }
.player-profile-banner-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.profile-banner-topline { position: absolute; top: 17px; right: 19px; left: 19px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-card-brand { display: inline-flex; align-items: center; gap: 7px; color: #c6c6c6; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; }
.profile-card-brand > span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #ffffff3b; border-radius: 7px; color: #fff; background: #111a; font-family: var(--display); font-size: 9px; letter-spacing: -.5px; }
.profile-card-brand i { color: #777; font-style: normal; }
.profile-edit-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #ffffff30; border-radius: 7px; color: #eee; background: #0909098c; font-size: 9px; text-decoration: none; backdrop-filter: blur(8px); transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.profile-edit-link:hover { transform: translateY(-2px); border-color: #fff8; background: #090909d9; }
.player-profile-identity { position: absolute; right: 24px; bottom: 23px; left: 24px; z-index: 1; display: flex; align-items: center; gap: 16px; }
.player-profile-identity .profile-avatar { width: 102px; height: 102px; border: 3px solid #d5d5d5; border-radius: 20px; background: linear-gradient(145deg,#454545,#171717); box-shadow: 0 12px 32px #0009,0 0 0 5px #0a0a0a66; font-size: 34px; }
.player-profile-identity .profile-avatar img { display: block; }
.profile-name { display: grid; min-width: 0; gap: 5px; align-self: end; padding: 0 0 4px; }
.profile-name-kicker { color: #aaa; font-size: 8px; font-weight: 800; letter-spacing: 1.7px; }
.profile-name strong { overflow: hidden; color: #fff; font-family: var(--display); font-size: clamp(24px,4vw,36px); font-weight: 800; letter-spacing: -.8px; line-height: 1.02; text-overflow: ellipsis; }
.profile-name > small { color: #999; font-size: 11px; }
.profile-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.profile-status-badge { display: inline-flex; min-height: 22px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #ffffff24; border-radius: 20px; color: #ddd; background: #0909098c; font-size: 8px; font-weight: 650; backdrop-filter: blur(6px); }
.profile-status-badge > span { color: #aaa; font-size: 9px; }
.profile-status-badge.is-verified { border-color: #e6e6e659; color: #fff; background: #eeeeee18; }
.profile-status-badge.is-verified > span { color: #fff; }
.profile-status-badge.is-owner { border-color: #d7bc7466; color: #ead9a5; }
.profile-status-badge.is-owner > span { color: #ead9a5; }
.profile-market-card { display: grid; min-width: 190px; gap: 5px; padding: 12px 15px; border: 1px solid #ffffff35; border-radius: 10px; margin: 0 0 2px auto; background: linear-gradient(145deg,#111d,#080808d9); box-shadow: 0 10px 30px #0005; backdrop-filter: blur(10px); }
.profile-market-card > span { color: #aaa; font-size: 7px; font-weight: 800; letter-spacing: 1.2px; }
.profile-market-card > strong { color: #fff; font-family: var(--display); font-size: 23px; letter-spacing: -.4px; }
.profile-market-card > small { color: #aaa; font-size: 9px; }
.profile-market-card > small b { color: #eee; font-weight: 700; }
.profile-section { min-height: auto; padding: 20px; border-color: #292929; border-radius: 12px; background: linear-gradient(145deg,#141414,#0d0d0d); }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.profile-section-heading .eyebrow { margin-bottom: 5px; color: #858585; font-size: 8px; }
.profile-section-heading h2 { margin: 0; color: #f1f1f1; font-family: var(--display); font-size: 17px; letter-spacing: -.2px; }
.profile-data-note, .profile-club-count { display: inline-flex; align-items: center; gap: 6px; color: #999; font-size: 8px; }
.profile-data-note > span { width: 6px; height: 6px; border-radius: 50%; background: #ddd; box-shadow: 0 0 9px #fff8; }
.profile-club-count { padding: 6px 9px; border: 1px solid #303030; border-radius: 20px; color: #bbb; background: #111; }
.profile-performance-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.profile-performance-stat { position: relative; display: grid; min-height: 113px; align-content: end; gap: 7px; overflow: hidden; padding: 13px; border: 1px solid #2a2a2a; border-radius: 9px; background: radial-gradient(ellipse at 100% 0%,#ffffff0d,transparent 58%),linear-gradient(145deg,#191919,#101010); transition: transform .2s ease,border-color .2s ease,background .2s ease; }
.profile-performance-stat:hover { transform: translateY(-3px); border-color: #555; background-color: #181818; }
.profile-stat-icon { position: absolute; top: 11px; right: 12px; display: grid; min-width: 25px; height: 25px; place-items: center; border: 1px solid #ffffff14; border-radius: 7px; color: #aaa; background: #ffffff08; font-size: 10px; font-weight: 800; }
.profile-stat-label { max-width: 115px; color: #909090; font-size: 9px; line-height: 1.35; }
.profile-performance-stat > strong { color: #f5f5f5; font-family: var(--display); font-size: 26px; font-weight: 750; line-height: 1; }
.profile-team-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,210px),1fr)); gap: 9px; }
.profile-team-card { display: flex; min-width: 0; min-height: 66px; align-items: center; gap: 11px; padding: 10px; border: 1px solid #2b2b2b; border-radius: 9px; color: inherit; background: linear-gradient(130deg,#171717,#101010); text-align: left; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.profile-team-card:hover { transform: translateY(-2px); border-color: #696969; box-shadow: 0 8px 22px #0005; }
.profile-team-mark { display: grid; width: 41px; height: 41px; flex: 0 0 auto; place-items: center; border: 1px solid #414141; border-radius: 10px; color: #ddd; background: linear-gradient(145deg,#282828,#121212); font-size: 16px; }
.profile-team-copy { display: grid; min-width: 0; gap: 4px; }
.profile-team-copy small { color: #818181; font-size: 7px; font-weight: 800; letter-spacing: 1.1px; }
.profile-team-copy strong { overflow: hidden; color: #eee; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-team-arrow { margin-left: auto; color: #777; font-size: 13px; transition: transform .18s ease,color .18s ease; }
.profile-team-card:hover .profile-team-arrow { transform: translate(2px,-2px); color: #eee; }
.profile-empty { display: grid; min-height: 94px; justify-items: center; align-content: center; gap: 6px; padding: 14px; border: 1px dashed #333; border-radius: 9px; color: #888; background: #101010; text-align: center; }
.profile-empty > span { color: #aaa; font-size: 17px; }
.profile-empty > strong { color: #ccc; font-size: 10px; }
.profile-empty > small { color: #777; font-size: 9px; }
.profile-editor { padding: 17px; border: 1px solid #292929; border-radius: 9px; background: #101010; }
.profile-editor-heading, .profile-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-editor-heading { margin-bottom: 14px; }
.profile-editor-heading .eyebrow { margin-bottom: 5px; font-size: 8px; }
.profile-editor-heading h2 { font-size: 14px; }
.profile-editor-heading > span { color: #777; font-size: 9px; }
.profile-upload-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.upload-control { display: grid; gap: 8px; padding: 11px; border: 1px solid #292929; border-radius: 7px; background: #141414; }
.upload-control > span { color: #ddd; font-size: 10px; font-weight: 600; }
.upload-control input { width: 100%; color: #999; font-size: 9px; }
.upload-control input::file-selector-button { padding: 6px 8px; border: 1px solid #333; border-radius: 5px; margin-right: 7px; color: #eee; background: #202020; font: inherit; cursor: pointer; }
.upload-control small { color: #777; font-size: 9px; }
.profile-editor-actions { margin-top: 13px; }
.profile-editor-actions > span { color: #888; font-size: 9px; line-height: 1.5; }
.profile-editor-actions .button { min-height: 34px; flex: 0 0 auto; }
.profile-editor-actions .button:disabled { opacity: .6; cursor: wait; }
.profile-avatar:hover, .search-avatar:hover { transform: scale(1.06); border-color: #999; box-shadow: 0 0 18px #ffffff20; }
.team-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.team-card { min-width: 0; min-height: auto; }
.team-card-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #252525; }
.team-emblem { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid #353535; border-radius: 9px; color: #ddd; background: #1b1b1b; }
.team-card-heading h2 { margin: 0 0 4px; font-size: 13px; }
.team-card-heading small { color: #858585; font-size: 9px; }
.team-roster { display: grid; gap: 2px; padding-top: 8px; }
.team-member { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 6px 4px; border: 0; border-radius: 5px; color: #ccc; background: transparent; text-align: left; cursor: pointer; }
.team-member:hover { background: #191919; }
.team-member img, .team-member .avatar-placeholder { width: 27px; height: 27px; flex: 0 0 auto; }
.team-member > span:not(.avatar-placeholder) { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.team-member b { margin-left: auto; color: #777; font-size: 10px; }
.button-small { min-height: 29px; gap: 6px; padding: 0 9px; font-size: 9px; }
.button-danger { border-color: #543232; color: #f0b5b5; background: #241515; }
.button-danger:hover { border-color: #854949; background: #321919; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.team-create-form, .team-invitation-panel { min-height: auto; margin-bottom: 12px; }
.management-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.management-form > label { display: grid; min-width: 0; gap: 6px; color: #c9c9c9; font-size: 10px; font-weight: 600; }
.management-form input:not([type="file"]), .management-form textarea, .management-form select,
.admin-managed-row select { width: 100%; min-height: 36px; padding: 8px 9px; border: 1px solid #343434; border-radius: 6px; color: #eee; background: #111; font: inherit; font-size: 10px; }
.management-form textarea { resize: vertical; }
.management-form input[type="file"] { width: 100%; color: #999; font-size: 9px; }
.management-form input[type="file"]::file-selector-button { padding: 6px 8px; border: 1px solid #333; border-radius: 5px; margin-right: 7px; color: #eee; background: #202020; font: inherit; cursor: pointer; }
.management-form small { color: #777; font-size: 9px; font-weight: 400; }
.management-form > button { justify-self: start; align-self: end; }
.team-create-form .profile-section-heading { margin-bottom: 14px; }
.team-directory { margin-top: 12px; }
.team-card { overflow: hidden; padding: 0 16px 16px; }
.team-banner { height: 75px; margin: 0 -16px 12px; background: radial-gradient(ellipse at 70% 20%,#363636,transparent 58%),linear-gradient(110deg,#202020,#101010); }
.team-banner.has-image { position: relative; }
.team-banner-image { width: 100%; height: 100%; object-fit: cover; }
.team-logo { width: 37px; height: 37px; object-fit: cover; border-radius: 9px; }
.team-bio { min-height: 28px; margin: 11px 0; color: #aaa; font-size: 10px; line-height: 1.5; }
.team-member-row { display: flex; align-items: center; gap: 7px; }
.team-member-row .team-member { flex: 1; }
.team-no-members { display: block; padding: 10px 4px; color: #808080; font-size: 10px; }
.team-manager-tools { padding-top: 11px; border-top: 1px solid #282828; margin-top: 10px; }
.team-manager-tools summary { color: #ddd; font-size: 10px; font-weight: 700; cursor: pointer; }
.team-manager-tools[open] summary { margin-bottom: 12px; }
.team-manager-tools .management-form { padding: 10px 0; border-top: 1px solid #202020; }
.team-pending-list, .league-applications { display: grid; gap: 7px; padding: 10px 0; border-top: 1px solid #202020; }
.team-pending-list strong, .league-applications > strong { color: #ddd; font-size: 10px; }
.team-pending-list > span { color: #888; font-size: 9px; }
.invitation-row { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-top: 1px solid #242424; }
.invitation-row > strong, .invitation-row > span { flex: 1; color: #ddd; font-size: 10px; }
.league-card { min-height: auto; }
.league-team-list { display: grid; gap: 4px; margin-top: 12px; }
.league-team-list > div { display: flex; align-items: center; gap: 9px; min-height: 36px; }
.league-team-list > div > strong { color: #ddd; font-size: 10px; }
.league-team-logo { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; }
.league-directory { display: grid; gap: 14px; margin-top: 12px; }
.league-tiles { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 12px; margin-top: 12px; }
.league-tile { position: relative; display: block; min-width: 0; overflow: hidden; aspect-ratio: 1.9; border: 1px solid color-mix(in srgb,var(--league-primary) 44%,#303030); border-radius: 10px; color: #fff; background: #111; box-shadow: 0 8px 24px #0005,0 0 18px color-mix(in srgb,var(--league-primary) 16%,transparent); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.league-tile:hover, .league-tile:focus-visible { transform: translateY(-3px); border-color: var(--league-primary); box-shadow: 0 12px 30px #0009,0 0 27px color-mix(in srgb,var(--league-primary) 42%,transparent); }
.league-tile-banner { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 15%,color-mix(in srgb,var(--league-primary) 32%,transparent),transparent 55%),linear-gradient(115deg,#242424,#101010 60%,#1d1d1d); background-position: center; background-size: cover; transition: transform .35s ease; }
.league-tile:hover .league-tile-banner { transform: scale(1.04); }
.league-tile:after { position: absolute; inset: 25% 0 0; background: linear-gradient(transparent,#000b); content: ""; pointer-events: none; }
.league-tile-info { position: absolute; right: 9px; bottom: 9px; left: 9px; z-index: 1; display: flex; min-width: 0; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #ffffff24; border-radius: 7px; background: #080808d9; backdrop-filter: blur(8px); }
.league-tile-logo { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb,var(--league-primary) 72%,#ffffff35); border-radius: 6px; object-fit: cover; background: #191919; box-shadow: 0 0 12px color-mix(in srgb,var(--league-primary) 30%,transparent); }
.league-tile-logo-fallback { color: #ddd; font-size: 15px; }
.league-tile-info strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.league-tile-info > span:last-child { margin-left: auto; color: #aaa; font-size: 13px; }
.league-detail-back { flex: 0 0 auto; }
.league-card { overflow: hidden; padding: 0 16px 16px; border-color: color-mix(in srgb,var(--league-primary) 42%,#292929); box-shadow: 0 0 27px color-mix(in srgb,var(--league-primary) 13%,transparent); }
.league-banner { height: 112px; margin: 0 -16px 0; border-bottom: 1px solid color-mix(in srgb,var(--league-primary) 45%,#252525); background: radial-gradient(ellipse at 75% 15%,color-mix(in srgb,var(--league-primary) 38%,transparent),transparent 55%),linear-gradient(115deg,#242424,#101010 60%,#1d1d1d); background-position: center; background-size: cover; }
.league-card-heading { display: flex; align-items: center; gap: 11px; margin-top: -21px; }
.league-card-heading > div { padding-top: 21px; }
.league-card-heading h2 { margin: 0 0 5px; font-size: 16px; }
.league-card-heading small, .league-muted { color: #888; font-size: 9px; }
.league-logo, .league-logo-fallback { width: 56px; height: 56px; flex: 0 0 auto; border: 3px solid color-mix(in srgb,var(--league-primary) 75%,#111); border-radius: 13px; object-fit: cover; background-color: #181818; box-shadow: 0 0 16px color-mix(in srgb,var(--league-primary) 34%,transparent); }
.league-logo-fallback { font-size: 20px; }
.league-bio { max-width: 760px; margin: 10px 0; color: #aaa; font-size: 10px; line-height: 1.65; }
.league-manager-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 0; border-top: 1px solid #242424; }
.league-manager-list > strong { margin-right: 4px; color: #aaa; font-size: 9px; }
.league-manager-list > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 4px; border: 1px solid #2d2d2d; border-radius: 20px; color: #ddd; background: #161616; font-size: 9px; }
.league-staff-avatar, .league-player-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.league-section { padding-top: 14px; border-top: 1px solid #262626; margin-top: 14px; }
.league-card .league-section-heading .eyebrow { color: color-mix(in srgb,var(--league-primary) 74%,#999); }
.league-card .league-table th { color: color-mix(in srgb,var(--league-primary) 72%,#ddd); }
.league-color-control { grid-column: 1 / -1; }
.league-color-control input[type="color"] { width: 100%; min-height: 38px; padding: 4px; border: 1px solid #373737; border-radius: 6px; background: #141414; cursor: pointer; }
.league-color-control small { color: #888; font-size: 9px; }
.league-tier-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; }
.league-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.league-section-heading .eyebrow { color: #777; font-size: 8px; }
.league-section-heading h3 { margin: 3px 0 0; color: #eee; font-size: 13px; }
.league-group-teams { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.league-group-teams > span, .league-table-team { display: inline-flex; min-width: 0; align-items: center; gap: 7px; }
.league-group-teams > span { padding: 5px 8px; border: 1px solid #292929; border-radius: 7px; color: #ccc; background: #141414; font-size: 9px; }
.league-group-teams .league-team-logo { width: 22px; height: 22px; }
.league-team-placeholder { display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid #333; color: #aaa; background: #171717; }
.league-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #252525; border-radius: 7px; }
.league-table { min-width: 480px; }
.league-table th, .league-table td { padding: 8px 9px; white-space: nowrap; }
.league-table th { color: #777; font-size: 8px; }
.league-table td { color: #bbb; font-size: 9px; }
.league-table-team { color: #ddd; }
.league-table-team b { overflow: hidden; max-width: 200px; text-overflow: ellipsis; }
.league-table-team .league-team-logo { width: 23px; height: 23px; }
.league-stats-table { min-width: 610px; }
.league-player-link { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px; border: 0; border-radius: 5px; color: #ddd; background: transparent; font: inherit; font-size: 9px; cursor: pointer; }
.league-player-link:hover { background: #222; }
.league-fixtures { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 8px; }
.league-fixture { min-width: 0; padding: 10px; border: 1px solid #282828; border-radius: 8px; background: #121212; }
.league-fixture-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.league-fixture-teams > span { display: flex; min-width: 0; align-items: center; gap: 6px; color: #ddd; }
.league-fixture-teams > span:last-child { justify-content: flex-end; text-align: right; }
.league-fixture-teams b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
.league-fixture-teams .league-team-logo { width: 25px; height: 25px; flex: 0 0 auto; }
.league-fixture-teams > strong { color: #eee; font-family: var(--display); font-size: 12px; white-space: nowrap; }
.league-fixture > small { display: block; margin-top: 8px; color: #858585; font-size: 8px; }
.league-result-form { display: flex; align-items: end; gap: 5px; padding-top: 9px; }
.league-result-form label { display: grid; gap: 3px; color: #888; font-size: 8px; }
.league-result-form input { width: 48px; min-height: 29px; padding: 4px; border: 1px solid #333; border-radius: 5px; color: #eee; background: #0c0c0c; }
.league-result-form .button { margin-left: auto; }
.league-staff-panel { padding-top: 12px; border-top: 1px solid #303030; margin-top: 14px; }
.league-staff-panel > summary { color: #eee; font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.league-staff-panel > summary::-webkit-details-marker { display: none; }
.league-staff-panel > summary::after { float: right; content: "＋"; color: #aaa; }
.league-staff-panel[open] > summary::after { content: "−"; }
.league-staff-panel > summary span { display: block; margin-top: 4px; color: #888; font-size: 9px; font-weight: 400; }
.league-staff-content { display: grid; gap: 12px; padding-top: 13px; }
.league-staff-content > .management-form { padding-top: 12px; border-top: 1px solid #252525; }
.league-staff-content .league-team-select select { min-height: 90px; }
.league-staff-content .league-publish-option { display: flex; align-items: center; gap: 9px; align-self: end; min-height: 36px; }
.league-staff-content .league-publish-option input { width: 16px; height: 16px; accent-color: #eee; }
.league-staff-content .league-schedule-input input:disabled { opacity: .5; }
.admin-member-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 3px 4px; border: 1px solid transparent; border-radius: 7px; }
.admin-member-row:hover { border-color: #303030; background: #131313; }
.admin-member-row .admin-member { min-width: 0; }
.admin-member-row .admin-member:hover { transform: none; border-color: transparent; background: transparent; }
.member-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.verified-mark { display: inline-grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; margin-left: 5px; color: #111; background: #eee; font-size: 9px; font-style: normal; vertical-align: 1px; }
.admin-management-panel { display: grid; gap: 13px; margin-top: 13px; }
.admin-managed-heading { padding-top: 12px; border-top: 1px solid #252525; margin: 2px 0 0; }
.admin-managed-list { display: grid; gap: 6px; }
.admin-managed-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,1.3fr) minmax(180px,.8fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid #262626; border-radius: 7px; }
.admin-managed-row > div { display: grid; gap: 4px; }
.admin-managed-row > form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
.admin-managed-row > form button { white-space: nowrap; }
.admin-managed-row strong { color: #ddd; font-size: 10px; }
.admin-managed-row small { color: #888; font-size: 9px; }
.owner-badge { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #505050; border-radius: 6px; color: #eee; background: linear-gradient(135deg,#242424,#121212); font-size: 10px; font-weight: 700; }
.owner-badge > span { font-size: 14px; transition: transform .24s ease; }
.owner-badge:hover > span { transform: rotate(25deg) scale(1.18); }
.owner-account-chip .account-copy strong:after { display: inline-block; padding: 3px 5px; border: 1px solid #555; border-radius: 4px; margin-left: 6px; color: #eee; content: "OWNER"; font-size: 7px; letter-spacing: .5px; vertical-align: 1px; }
.owner-status-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #3b3b3b; border-radius: 9px; margin-bottom: 17px; background: radial-gradient(ellipse at 2% 5%,#ffffff13 0,transparent 57%),#101010; }
.owner-mark { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border: 1px solid #555; border-radius: 12px; color: #eee; background: #222; transition: transform .25s ease, box-shadow .25s ease; }
.owner-mark svg { width: 21px; height: 21px; fill: currentColor; stroke-width: .8; }
.owner-status-card:hover .owner-mark { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 0 20px #d5b86b2b; }
.owner-status-card > div { display: grid; gap: 5px; }
.owner-status-card .eyebrow { color: #aaa; font-size: 8px; }
.owner-status-card strong { color: #eee; font-size: 13px; }
.owner-status-card small { color: #999; font-size: 9px; line-height: 1.5; }
.owner-live { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #444; border-radius: 20px; margin-left: auto; color: #ddd; font-size: 9px; white-space: nowrap; }
.owner-live i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; box-shadow: 0 0 8px #fff7; }
.admin-overview-section { margin-bottom: 16px; }
.admin-overview-section > .profile-section-heading { margin-bottom: 10px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.admin-stat { display: grid; min-height: 76px; align-content: center; gap: 8px; padding: 12px; border: 1px solid #292929; border-radius: 7px; background: linear-gradient(145deg,#141414,#0d0d0d); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.admin-stat:hover { transform: translateY(-3px); border-color: #5a503b; background: #171512; }
.admin-stat span { color: #888; font-size: 9px; }
.admin-stat strong { color: #eee; font-family: var(--display); font-size: 21px; }
.admin-members-panel { min-height: auto; }
.admin-member-list { display: grid; gap: 3px; }
.admin-member { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.admin-member:hover { transform: translateX(3px); border-color: #303030; background: #171717; }
.admin-member-avatar { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #333; border-radius: 50%; color: #eee; background: #202020; font-size: 11px; font-weight: 700; }
.admin-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-member-copy { display: grid; min-width: 130px; gap: 4px; }
.admin-member-copy strong { overflow: hidden; color: #e5e5e5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-copy small, .admin-member-teams { overflow: hidden; color: #888; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-teams { margin-left: auto; }
.admin-member-link { color: #888; font-size: 12px; }
.admin-empty { padding: 22px 10px; color: #888; font-size: 10px; text-align: center; }
.admin-data-note { margin: 12px 0 0; }
.admin-signin { margin-top: 17px; }

.app-dialog { position: fixed; width: min(430px, calc(100vw - 32px)); max-width: unset; padding: 29px; border: 1px solid #34353c; border-radius: 16px; color: var(--text); background: #131418; box-shadow: 0 25px 100px #000b; }
.app-dialog::backdrop { background: #050608c9; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 29px; height: 29px; border-color: #303138; font-size: 20px; }
.dialog-symbol { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #4d4d4d; border-radius: 12px; margin-bottom: 17px; color: var(--lime); background: #242424; font-size: 19px; }
.dialog-eyebrow { margin-bottom: 8px; color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.app-dialog h2 { margin-bottom: 9px; font-size: 21px; }
.app-dialog p { margin-bottom: 18px; color: #9c9da5; font-size: 11px; line-height: 1.7; }
.dialog-footnote { padding-top: 12px; border-top: 1px solid var(--border); color: #73747d; font-size: 9px; line-height: 1.6; }
.dialog-actions { display: flex; gap: 8px; margin-top: 19px; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; gap: 8px; }
.toast { max-width: 340px; padding: 12px 15px; border: 1px solid #3b3b3b; border-radius: 9px; color: #e8e9e4; background: #191919; box-shadow: 0 10px 30px #0006; font-size: 11px; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.loading-placeholder { color: var(--muted); font-size: 10px; }

@media (min-width: 1450px) {
  .content { padding-top: 70px; }
  .feature-card { min-height: 225px; padding: 20px; }
  .panel { min-height: 241px; }
}
@media (max-width: 1050px) {
  .sidebar { width: 208px; }
  .main-area { margin-left: 208px; }
  .content { padding-right: 27px; padding-left: 27px; }
  .topbar { padding-right: 27px; padding-left: 27px; }
  .welcome-row { align-items: flex-start; flex-direction: column; }
  .welcome-actions { padding: 0; }
}
@media (max-width: 760px) {
  .sidebar { width: 250px; overflow-y: auto; transform: translateX(-101%); transition: transform .22s ease; box-shadow: 20px 0 45px #0008; }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .topbar { height: 61px; padding: 0 15px; }
  .menu-button { display: grid; }
  .breadcrumb { display: none; }
  .global-search { width: auto; min-width: 100px; height: 34px; flex: 1 1 auto; margin: 0 8px; padding: 0 8px; }
  .global-search input { font-size: 9px; }
  .search-shortcut { display: none; }
  .search-results { position: fixed; top: 55px; right: 10px; left: 60px; }
  .topbar-actions { gap: 7px; }
  .sign-in-button { width: 36px; min-height: 36px; justify-content: center; overflow: hidden; padding: 0; font-size: 0; }
  .discord-mark { font-size: 16px; }
  .points-pill { gap: 5px; padding: 7px; }
  .points-pill small { display: none; }
  .player-value-pill { min-height: 34px; padding: 6px; }
  .player-value-pill small { display: none; }
  .player-value-pill strong { font-size: 9px; }
  .notification-button { width: 34px; height: 34px; }
  .content { padding: 39px 17px 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 173px; }
  .lower-grid { grid-template-columns: 1fr; }
  .welcome-row { padding-bottom: 26px; }
  h1 { font-size: 43px; }
  .site-footer { flex-wrap: wrap; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .guide-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .account-profile { align-items: flex-start; flex-wrap: wrap; }
  .connected-badge { margin-left: 70px; }
  .profile-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-upload-row, .team-directory { grid-template-columns: 1fr; }
  .profile-editor-heading { align-items: flex-start; flex-direction: column; }
  .player-profile-banner { min-height: 390px; }
  .profile-banner-topline { top: 12px; right: 12px; left: 12px; }
  .profile-card-brand { gap: 5px; font-size: 7px; letter-spacing: .8px; }
  .profile-edit-link { padding: 7px 8px; }
  .player-profile-identity { right: 13px; bottom: 14px; left: 13px; display: grid; grid-template-columns: 67px minmax(0,1fr); align-items: center; gap: 11px; }
  .player-profile-identity .profile-avatar { width: 67px; height: 67px; border-radius: 15px; }
  .profile-name { gap: 4px; padding: 0; }
  .profile-name strong { max-width: 100%; font-size: 20px; }
  .profile-name > small { font-size: 10px; }
  .profile-status-row { gap: 4px; margin-top: 2px; }
  .profile-status-badge { min-height: 20px; padding: 0 6px; font-size: 7px; }
  .player-profile-identity .profile-market-card { grid-column: 1 / -1; width: auto; min-width: 0; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; margin: 0; padding: 10px 12px; }
  .profile-market-card > span { grid-column: 1; }
  .profile-market-card > strong { grid-column: 1; font-size: 20px; }
  .profile-market-card > small { grid-column: 2; grid-row: 1 / 3; }
  .profile-section { padding: 15px; }
  .profile-editor-actions { align-items: flex-start; flex-direction: column; }
  .admin-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-member { gap: 7px; padding: 6px 2px; }
  .admin-member-copy { min-width: 0; }
  .admin-member-teams { display: none; }
  .owner-status-card { align-items: flex-start; flex-wrap: wrap; }
  .owner-live { margin-left: 57px; }
  .management-form, .admin-managed-row, .admin-managed-row > form { grid-template-columns: 1fr; }
  .management-form > button, .admin-managed-row > button { justify-self: stretch; }
  .admin-member-row { grid-template-columns: 1fr; }
  .member-admin-actions { justify-content: flex-start; padding-left: 5px; }
}
@media (max-width: 520px) {
  .profile-performance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-performance-stat { min-height: 98px; }
  .profile-performance-stat:last-child { grid-column: 1 / -1; }
  .profile-data-note { font-size: 0; }
  .profile-data-note > span { width: 7px; height: 7px; }
}
@media (max-width: 420px) {
  .content { padding-right: 13px; padding-left: 13px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .button { flex: 1; gap: 7px; padding-right: 9px; padding-left: 9px; }
  .topbar-actions { gap: 5px; }
  .notification-popover { position: fixed; top: 55px; right: 10px; }
  .panel { padding-right: 14px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bright matchday accents for the new community and training areas. */
.sidebar { overflow-x: hidden; overflow-y: scroll; scrollbar-color: #858585 #101010; scrollbar-width: auto; scrollbar-gutter: stable; }
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: #101010; }
.sidebar::-webkit-scrollbar-thumb { border: 2px solid #101010; border-radius: 8px; background: linear-gradient(#aaa,#555); }
.sidebar::-webkit-scrollbar-thumb:hover { background: linear-gradient(#eee,#888); }
.main-area { background: radial-gradient(ellipse at 77% 0%,#29292975,transparent 42%),linear-gradient(155deg,#111 0%,#080808 48%,#0d0d0d 100%); }
.sidebar-label { color: #85808f; }
.nav-link[data-route="wheel"] .nav-icon, .nav-link[data-route="giveaways"] .nav-icon, .nav-link[data-route="training"] .nav-icon { color: #c5c5c5; }
.nav-link[data-route="wheel"]:hover, .nav-link[data-route="giveaways"]:hover, .nav-link[data-route="training"]:hover { background: linear-gradient(90deg,#ffffff12,transparent); }
.content > * { animation: section-arrive .38s cubic-bezier(.2,.8,.2,1) both; }
.content > *:nth-child(2) { animation-delay: .035s; }
.content > *:nth-child(3) { animation-delay: .07s; }
.content > *:nth-child(4) { animation-delay: .105s; }
.feature-card, .team-card, .training-card, .league-card { transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.feature-card:hover { transform: translateY(-4px); }
.score-feature:hover { box-shadow: 0 15px 34px #5eaaff14; border-color: #416493; }
.league-feature:hover { box-shadow: 0 15px 34px #a976ff15; border-color: #66518a; }
.player-feature:hover { box-shadow: 0 15px 34px #66d99a14; border-color: #456b55; }
.team-card:hover, .league-card:hover { transform: translateY(-3px); border-color: #514968; box-shadow: 0 12px 30px #8e6dff12; }
.button-primary { background: linear-gradient(110deg,#f0f0f0,#d4e3ff); }
.fun-badge, .training-badge { border-color: #484848; color: #e2e2e2; background: linear-gradient(120deg,#242424,#111); }
.wheel-panel { display: grid; grid-template-columns: minmax(220px, .9fr) 1.1fr; align-items: center; gap: 34px; min-height: 330px; overflow: hidden; background: radial-gradient(ellipse at 18% 40%,#ffffff12,transparent 48%),#111; }
.spin-wheel-wrap { position: relative; display: grid; width: min(250px, 100%); aspect-ratio: 1; place-items: center; justify-self: center; filter: drop-shadow(0 10px 24px #fff2); }
.spin-wheel { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 7px solid #282828; border-radius: 50%; background: conic-gradient(#f5f5f5 0 60deg,#bdbdbd 60deg 120deg,#777 120deg 180deg,#e1e1e1 180deg 240deg,#999 240deg 300deg,#fafafa 300deg); transition: transform 3.2s cubic-bezier(.12,.75,.1,1); }
.spin-wheel:before { position: absolute; inset: 20%; border: 1px solid #ffffff75; border-radius: 50%; content: ""; }
.spin-wheel span { position: absolute; top: 50%; left: 50%; width: 67px; color: #171717; font-size: 8px; font-weight: 900; letter-spacing: .3px; text-align: center; transform: translate(-50%,-50%) rotate(30deg) translateY(-77px) rotate(-30deg); }
.spin-wheel span:nth-child(2) { transform: translate(-50%,-50%) rotate(90deg) translateY(-77px) rotate(-90deg); }
.spin-wheel span:nth-child(3) { color: #fff; transform: translate(-50%,-50%) rotate(150deg) translateY(-77px) rotate(-150deg); }
.spin-wheel span:nth-child(4) { transform: translate(-50%,-50%) rotate(210deg) translateY(-77px) rotate(-210deg); }
.spin-wheel span:nth-child(5) { color: #fff; transform: translate(-50%,-50%) rotate(270deg) translateY(-77px) rotate(-270deg); }
.spin-wheel span:nth-child(6) { transform: translate(-50%,-50%) rotate(330deg) translateY(-77px) rotate(-330deg); }
.wheel-hub { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; width: 51px; height: 51px; place-items: center; border: 4px solid #262626; border-radius: 50%; color: #eee; background: radial-gradient(circle at 35% 25%,#555,#141414 75%); font-family: var(--display); font-size: 11px; font-weight: 700; box-shadow: 0 2px 12px #000b; transform: translate(-50%,-50%); }
.wheel-pointer { position: absolute; top: -4px; z-index: 1; width: 0; height: 0; border-right: 13px solid transparent; border-bottom: 23px solid #fff; border-left: 13px solid transparent; filter: drop-shadow(0 2px 4px #000); }
.wheel-copy { max-width: 390px; }
.wheel-copy .eyebrow { color: #ccc; }
.wheel-copy h2 { margin: 9px 0; font-family: var(--display); font-size: 25px; }
.wheel-copy p { color: #aaa; font-size: 11px; line-height: 1.7; }
.wheel-timer { min-height: 16px; margin: 6px 0; color: #ddd !important; font-family: var(--display); font-size: 12px !important; font-weight: 600; letter-spacing: .5px; }
.spin-button { margin-top: 7px; background: linear-gradient(110deg,#fff,#bbb); }
.spin-button span { display: inline-block; font-size: 16px; }
.coach-panel { min-height: auto; margin-top: 15px; border-color: #393939; background: radial-gradient(ellipse at 8% 2%,#ffffff12,transparent 55%),#111; }
.coach-heading { display: flex; align-items: center; gap: 11px; }
.coach-avatar { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid #555; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#424242,#1c1c1c); box-shadow: 0 0 18px #fff2; animation: coach-pulse 2.8s ease-in-out infinite; }
.coach-heading > div { display: grid; gap: 4px; }
.coach-heading .eyebrow { color: #ccc; font-size: 8px; }
.coach-heading h2 { margin: 0; font-size: 14px; }
.coach-heading small { color: #93909c; font-size: 9px; }
.coach-online { padding: 5px 8px; border: 1px solid #454545; border-radius: 20px; margin-left: auto; color: #ddd; background: #171717; font-size: 8px; }
.coach-messages { display: grid; max-height: 300px; gap: 8px; overflow-y: auto; padding: 13px 0 4px; margin-top: 14px; }
.coach-message { max-width: min(90%,560px); padding: 9px 11px; border: 1px solid #30303a; border-radius: 8px; background: #17171d; animation: message-arrive .2s ease-out; }
.coach-message strong { color: #ddd; font-size: 9px; }
.coach-message p { margin: 4px 0 0; color: #d3d0db; font-size: 10px; line-height: 1.65; white-space: pre-line; }
.coach-question-bubble { justify-self: end; border-color: #484848; background: #202020; }
.coach-question-bubble strong { color: #fff; }
.coach-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.coach-prompt { padding: 6px 9px; border: 1px solid #454545; border-radius: 20px; color: #ddd; background: #1b1b1b; font-size: 9px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.coach-prompt:hover { transform: translateY(-2px); border-color: #aaa; background: #262626; }
.coach-form { display: flex; gap: 8px; }
.coach-form input { width: 100%; min-width: 0; min-height: 39px; padding: 0 11px; border: 1px solid #393540; border-radius: 7px; color: #eee; background: #0e0e12; font: inherit; font-size: 10px; }
.coach-form input:focus { border-color: #aaa; outline: 1px solid #aaa5; }
.coach-form .button-primary { flex: 0 0 auto; background: linear-gradient(110deg,#fff,#bbb); }
.coach-disclosure { margin: 9px 0 0; color: #77727f; font-size: 8px; }
.training-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.training-card { min-height: auto; overflow: hidden; }
.training-card:hover { transform: translateY(-4px); }
.training-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.training-card-top span { font-family: var(--display); font-size: 12px; }
.training-card-top b { padding: 5px 7px; border: 1px solid currentColor; border-radius: 5px; font-size: 8px; letter-spacing: .6px; }
.training-card .eyebrow { font-size: 8px; }
.training-card h2 { margin: 7px 0; font-family: var(--display); font-size: 17px; }
.training-card p { min-height: 42px; color: #a4a4a4; font-size: 10px; line-height: 1.55; }
.training-card ol { display: grid; gap: 9px; padding: 13px 0 0 17px; border-top: 1px solid #ffffff24; margin: 13px 0 0; color: #c9c9c9; font-size: 9px; }
.training-touch, .training-speed, .training-passing { border-color: #373737; background: linear-gradient(145deg,#202020,#111); }
.training-touch .eyebrow, .training-touch .training-card-top, .training-speed .eyebrow, .training-speed .training-card-top, .training-passing .eyebrow, .training-passing .training-card-top { color: #ddd; }
@keyframes section-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coach-pulse { 50% { box-shadow: 0 0 24px #fff4; } }
@keyframes message-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .wheel-panel { grid-template-columns: 1fr; gap: 20px; }
  .spin-wheel-wrap { width: min(220px, 80%); }
  .wheel-copy { text-align: center; }
  .training-grid { grid-template-columns: 1fr; }
  .training-card p { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .content > *, .coach-avatar { animation: none !important; }
  .spin-wheel { transition-duration: .01ms !important; }
}

/* Restrained monochrome styling: clear hierarchy, quiet borders and less visual noise. */
.sidebar { width: 220px; padding: 22px 14px 14px; background: #080808; }
.brand { height: 45px; margin: 0 0 38px 9px; }
.brand-logo-frame { width: 44px; height: 49px; }
.brand-logo { top: -28px; left: -32px; width: 104px; height: 104px; }
.sidebar-label { color: #777; font-size: 9px; letter-spacing: 1.4px; }
.primary-nav { gap: 2px; margin-top: 9px; }
.nav-link { min-height: 38px; gap: 11px; border-radius: 6px; color: #a0a0a0; font-size: 12px; }
.nav-link:hover { background: #151515; }
.nav-link.active { border-color: #292929; background: #191919; }
.nav-link.active:before { left: -15px; width: 2px; height: 16px; }
.nav-icon { color: #858585; font-size: 15px; }
.main-area { margin-left: 220px; }
.topbar { height: 62px; padding-right: clamp(22px, 4vw, 48px); padding-left: clamp(22px, 4vw, 48px); }
.content { width: min(1050px, 100%); padding: 53px clamp(22px, 4vw, 48px) 25px; }
.welcome-row { align-items: flex-end; gap: 30px; padding-bottom: 28px; }
.welcome-row .eyebrow { margin-bottom: 13px; }
.eyebrow { color: #878787; font-size: 9px; letter-spacing: 1.5px; }
h1 { margin-bottom: 11px; font-size: clamp(37px, 4.1vw, 49px); letter-spacing: -2.2px; }
.welcome-copy { max-width: 390px; color: #929292; font-size: 12px; line-height: 1.7; }
.welcome-actions { flex-shrink: 0; gap: 8px; }
.button { min-height: 37px; border-radius: 6px; font-size: 10px; }
.feature-grid { gap: 10px; }
.feature-card { min-height: 184px; padding: 15px 16px; border-color: #252525; border-radius: 8px; background: #0e0e0e; }
.feature-card:hover { border-color: #666; box-shadow: 0 8px 24px #0006; }
.feature-icon { width: 28px; height: 28px; border-color: #303030; border-radius: 6px; background: #171717; }
.feature-metric { margin-top: 17px; font-size: 19px; }
.feature-title { font-size: 11px; }
.feature-card p { color: #858585; font-size: 10px; }
.mini-pitch, .league-decoration, .player-decoration { opacity: .17; }
.lower-grid { gap: 10px; margin-top: 12px; }
.panel { min-height: 210px; padding: 17px; border-color: #252525; border-radius: 8px; background: #0e0e0e; }
.panel-heading .eyebrow { color: #797979; font-size: 8px; }
h2 { font-size: 15px; letter-spacing: -.3px; }
.text-link { font-size: 9px; }
.compact-empty { padding-top: 22px; }
.empty-symbol { width: 30px; height: 30px; border-color: #2b2b2b; border-radius: 7px; background: #171717; }
.empty-state strong, .leaderboard-empty > strong { font-size: 10px; }
.empty-state p, .leaderboard-empty p { color: #777; font-size: 9px; }
.site-footer { padding-top: 17px; color: #626262; font-size: 8px; }
.points-pill { border-color: #282828; border-radius: 6px; background: #121212; }
.notification-button { border-color: #282828; border-radius: 6px; background: #121212; }
.sign-in-button { min-height: 34px; border-color: #eee; border-radius: 6px; background: #f5f5f5; font-size: 10px; }
.league-access-card { border-radius: 7px; background: #101010; }
.account-chip { border-top-color: #242424; }
.page-heading h1 { font-size: clamp(34px, 3.8vw, 43px); }
.filter-chip, .tier-badge { border-radius: 5px; }
.stat-tile, .guide-card { border-radius: 7px; background: #101010; }
.app-dialog { border-radius: 10px; }

@media (max-width: 1050px) {
  .sidebar { width: 208px; }
  .main-area { margin-left: 208px; }
  .content { padding-right: 27px; padding-left: 27px; }
}
@media (max-width: 760px) {
  .sidebar { width: 250px; }
  .main-area { margin-left: 0; }
  .content { padding: 35px 17px 18px; }
  .welcome-row { gap: 19px; }
}

.hero-panel {
  position: relative;
  display: grid;
  min-height: 330px;
  grid-template-columns: minmax(0, .9fr) minmax(290px, 1.1fr);
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 10px;
  background: #0c0c0c;
}
.hero-copy { position: relative; z-index: 1; align-self: center; padding: 38px 0 34px 36px; }
.hero-eyebrow { margin-bottom: 19px; }
.hero-copy h1 { margin-bottom: 14px; font-size: clamp(42px, 5vw, 61px); line-height: .99; letter-spacing: -3.2px; }
.hero-copy h1 span { color: #a7a7a7; }
.hero-copy .welcome-copy { max-width: 345px; }
.hero-copy .welcome-actions { margin-top: 21px; }
.hero-meta { display: flex; align-items: center; gap: 9px; margin-top: 28px; color: #737373; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.hero-meta span:first-child { color: #fff; }
.hero-meta i { width: 23px; height: 1px; background: #4a4a4a; }
.hero-art { position: relative; display: grid; min-height: 330px; place-items: center; overflow: hidden; color: #777; }
.hero-art:before { position: absolute; inset: 18px 22px 18px 0; border: 1px solid #242424; border-radius: 7px; content: ""; transform: perspective(650px) rotateY(-12deg) rotateZ(-5deg) scale(1.05); }
.hero-art:after { position: absolute; inset: 0; background: linear-gradient(90deg, #0c0c0c 0%, transparent 32%, transparent 76%, #0c0c0c 100%); content: ""; }
.hero-art-glow { position: absolute; top: 50%; left: 50%; width: 290px; height: 190px; border-radius: 50%; background: #fff; filter: blur(115px); opacity: .07; transform: translate(-43%,-50%); }
.hero-pitch { position: relative; z-index: 1; width: min(94%, 490px); transform: perspective(650px) rotateY(-12deg) rotateZ(-5deg); }
.pitch-label { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; color: #8e8e8e; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.pitch-label-top { top: 31px; right: 33px; }
.pitch-label-top span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #686868; border-radius: 50%; color: #fff; font-family: var(--display); font-size: 8px; letter-spacing: 0; }
.pitch-label-bottom { right: 37px; bottom: 30px; color: #eee; }
.pitch-label-bottom span { color: #777; }
.hero-watermark { position: absolute; right: 39px; bottom: -96px; color: #fff; font-family: var(--display); font-size: 245px; font-weight: 700; line-height: 1; opacity: .025; }
.overview-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: center; gap: 14px; padding: 19px 3px; border-bottom: 1px solid #292929; margin-bottom: 15px; }
.overview-strip > div { display: grid; grid-template-columns: 27px 1fr; align-items: center; column-gap: 8px; }
.strip-index { grid-row: span 2; color: #6f6f6f; font-family: var(--display); font-size: 9px; }
.overview-strip strong { font-size: 10px; font-weight: 600; }
.overview-strip small { margin-top: 3px; color: #777; font-size: 7px; letter-spacing: .9px; }
.overview-strip > a { display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 8px; font-weight: 700; letter-spacing: .7px; white-space: nowrap; }
.overview-strip > a:hover { color: #fff; }
.overview-strip > a span { color: #fff; }
.hero-panel + .overview-strip + .feature-grid { margin-top: 16px; }
.hero-panel ~ .lower-grid { margin-top: 16px; }
.feature-card { min-height: 164px; }
.feature-card p { max-width: 200px; }
.mini-pitch, .league-decoration, .player-decoration { opacity: .12; }

@media (max-width: 760px) {
  .hero-panel { min-height: 400px; grid-template-columns: 1fr; }
  .hero-copy { padding: 31px 24px 24px; }
  .hero-copy h1 { font-size: 49px; }
  .hero-copy .welcome-copy { max-width: 300px; }
  .hero-meta { margin-top: 20px; }
  .hero-art { position: absolute; inset: auto 0 0 0; min-height: 195px; opacity: .62; }
  .hero-art:before { inset: 15px 20px 10px; }
  .hero-pitch { width: min(84%, 390px); }
  .pitch-label-top { top: 15px; right: 20px; }
  .pitch-label-bottom { right: 24px; bottom: 14px; }
  .overview-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
  .overview-strip > a { grid-column: 1/-1; padding-top: 6px; }
}
@media (max-width: 420px) {
  .hero-panel { min-height: 390px; }
  .hero-copy { padding-left: 19px; }
  .hero-copy h1 { font-size: 44px; }
  .hero-art { min-height: 170px; }
  .overview-strip > div { grid-template-columns: 19px 1fr; column-gap: 4px; }
  .overview-strip small { font-size: 6px; letter-spacing: .5px; }
}