:root{
  --premium-bg:#040a12;
  --premium-surface:rgba(13,26,43,.78);
  --premium-surface-strong:rgba(15,30,49,.94);
  --premium-elevated:rgba(20,39,62,.82);
  --premium-hairline:rgba(196,216,235,.12);
  --premium-hairline-strong:rgba(202,255,40,.24);
  --premium-text:#f8fafc;
  --premium-muted:#91a7bc;
  --premium-lime:#caff28;
  --premium-lime-soft:#e6ff8e;
  --premium-shadow:0 30px 90px rgba(0,0,0,.38);
  --premium-shadow-soft:0 14px 44px rgba(0,0,0,.24);
  --premium-radius-xl:26px;
  --premium-radius-lg:20px;
  --premium-radius-md:15px;
}

html{background:var(--premium-bg)}
body{
  background:
    radial-gradient(circle at 82% -8%,rgba(202,255,40,.105),transparent 27%),
    radial-gradient(circle at -10% 24%,rgba(69,121,171,.085),transparent 28%),
    linear-gradient(180deg,#07111e 0%,#050e19 48%,#040a12 100%)!important;
  color:var(--premium-text);
  font-feature-settings:"ss01" 1,"cv11" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:before{
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    radial-gradient(circle at 72% -12%,rgba(202,255,40,.1),transparent 31%)!important;
  background-size:42px 42px,42px 42px,auto!important;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
  opacity:.78;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.022;
  background-image:radial-gradient(circle at 30% 30%,#fff .55px,transparent .7px);
  background-size:5px 5px;
  mix-blend-mode:soft-light;
}

::selection{background:rgba(202,255,40,.28);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(202,255,40,.2) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(202,255,40,.18);border-radius:999px}

.app-shell,.page-shell{isolation:isolate}
main{position:relative;z-index:1}

/* Brand / chrome */
.topbar{
  min-height:76px!important;
  background:linear-gradient(180deg,rgba(5,12,21,.92),rgba(5,12,21,.72),rgba(5,12,21,0))!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
}
.brand{
  font-size:26px!important;
  letter-spacing:-.07em!important;
  text-shadow:0 1px 28px rgba(255,255,255,.07);
  position:relative;
}
.brand:after{
  content:"PLAYER OS";
  display:inline-flex;
  margin-left:11px;
  vertical-align:middle;
  transform:translateY(-2px);
  font-size:7px;
  letter-spacing:.16em;
  font-weight:900;
  color:#7790a7;
  border:1px solid rgba(158,183,211,.14);
  background:rgba(255,255,255,.025);
  border-radius:999px;
  padding:4px 6px;
}
.avatar{
  box-shadow:0 8px 24px rgba(202,255,40,.14),inset 0 1px 0 rgba(255,255,255,.45)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.avatar:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 12px 30px rgba(202,255,40,.22),inset 0 1px 0 rgba(255,255,255,.5)!important}
.account-state,.top-actions>span,#accountState{font-size:10px!important;letter-spacing:.04em;color:#7890a7!important}

/* Type hierarchy */
.hero,.welcome{position:relative}
.hero h1,.welcome h1{
  letter-spacing:-.064em!important;
  text-wrap:balance;
  text-shadow:0 12px 44px rgba(0,0,0,.2);
}
.hero h1 span,.welcome h1 span{color:#cdd7e1!important}
.eyebrow,.kicker,.modal-kicker,.question-kicker{
  color:var(--premium-lime)!important;
  letter-spacing:.19em!important;
  font-weight:950!important;
}
.intro,.hero>p:not(.eyebrow):not(.kicker){color:#9db0c2!important;line-height:1.62!important}
.section-head h2,.results-head h2{letter-spacing:-.045em!important;font-weight:900!important}

/* Universal premium surfaces */
.account-card,.connect-card,.metric-card,.tournament-card,.league-card,
.finder-panel,.my-team-card,.team-card,.start-card,.quiz-card,.result-card,
.next-card,.match-card,.player-card,.table-wrap,.modal,.account-note,
.season-stats article,.empty-calendar,.calendar-item{
  border-color:var(--premium-hairline)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--premium-shadow-soft);
}
.account-card,.connect-card,.metric-card,.tournament-card,.finder-panel,.my-team-card,
.start-card,.quiz-card,.result-card,.next-card,.modal{
  background:
    linear-gradient(145deg,rgba(22,42,66,.9),rgba(8,20,34,.94))!important;
}
.account-card,.connect-card,.finder-panel,.my-team-card,.start-card,.quiz-card,.result-card,.next-card{
  border-radius:var(--premium-radius-xl)!important;
  overflow:hidden;
  position:relative;
}
.account-card:before,.connect-card:before,.finder-panel:before,.my-team-card:before,.start-card:before,.result-card:before,.next-card:before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.metric-card,.team-card,.match-card,.player-card,.season-stats article{
  background:linear-gradient(145deg,rgba(18,36,58,.78),rgba(8,20,34,.82))!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.team-card:hover,.match-card:hover,.player-card:hover,.metric-card:hover{
  transform:translateY(-2px);
  border-color:rgba(202,255,40,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 55px rgba(0,0,0,.3);
}
.accent-card,.my-team-card,.next-card.gameday{
  border-color:rgba(202,255,40,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.34),0 0 50px rgba(202,255,40,.035)!important;
}

/* Buttons */
.primary,.secondary,.reset,.favorite-filter,.link-button,.share-match-button,.league-share,.standings-info-button{
  transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  -webkit-tap-highlight-color:transparent;
}
.primary{
  background:linear-gradient(180deg,#e8ff9a 0%,#caff28 55%,#b7ed12 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 28px rgba(202,255,40,.12)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  position:relative;
  overflow:hidden;
}
.primary:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.28) 42%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s ease;
  pointer-events:none;
}
.primary:hover:before{transform:translateX(120%)}
.primary:hover{transform:translateY(-1px);filter:brightness(1.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px rgba(202,255,40,.17)!important}
.primary:active,.secondary:active,.favorite-filter:active,.reset:active{transform:translateY(1px) scale(.992)}
.secondary,.favorite-filter,.reset{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(178,201,222,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.secondary:hover,.favorite-filter:hover,.reset:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(202,255,40,.2)!important}
.link-button{font-weight:850!important;color:#9db0c2!important}
.link-button:hover{color:var(--premium-lime)!important}

/* Chips / tags */
.tag,.chips span,.chip,.match-pill,.hero-meta span,.modal-meta span{
  border-color:rgba(179,204,227,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.tag,.match-pill{color:var(--premium-lime)!important}
.chips span,.chip,.hero-meta span,.modal-meta span{background:rgba(255,255,255,.03)!important;color:#b8c7d5!important}
.chip.active,.chips .active,.favorite-filter.active{background:rgba(202,255,40,.1)!important;border-color:rgba(202,255,40,.28)!important;color:var(--premium-lime)!important}

/* Inputs */
input,select{
  background:rgba(3,11,19,.46)!important;
  border-color:rgba(174,199,222,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
input:hover,select:hover{border-color:rgba(194,215,234,.22)!important}
input:focus,select:focus{
  border-color:rgba(202,255,40,.52)!important;
  box-shadow:0 0 0 3px rgba(202,255,40,.075),inset 0 1px 0 rgba(255,255,255,.025)!important;
  background:rgba(4,14,24,.64)!important;
  outline:none!important;
}
.search-field{position:relative}
.search-field input{min-height:54px!important}

/* Main dashboard */
.metric-grid{gap:12px!important}
.metric-card{border-radius:21px!important;padding:19px!important;min-height:154px!important}
.metric-card p{color:#7890a7!important}
.metric-value{font-variant-numeric:tabular-nums;text-shadow:0 8px 34px rgba(202,255,40,.06)}
.completion-track{background:rgba(255,255,255,.055)!important;box-shadow:inset 0 1px 4px rgba(0,0,0,.2)}
.completion-track i{box-shadow:0 0 18px rgba(202,255,40,.2)}
.calendar-badge,.calendar-date{background:linear-gradient(145deg,rgba(22,41,63,.85),rgba(7,18,31,.9))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* Tournament finder */
.results-head{padding-top:8px}
.tournament-list{gap:12px!important}
.tournament-list .tournament-card{position:relative;overflow:hidden}
.tournament-list .tournament-card:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-70px;
  top:-70px;
  border-radius:50%;
  background:rgba(202,255,40,.035);
  pointer-events:none;
}
.pagination a,.pagination button{
  border-color:var(--premium-hairline)!important;
  background:rgba(255,255,255,.03)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.pagination .active{background:var(--premium-lime)!important;color:#07111e!important}

/* Liga */
.teams-grid{gap:12px!important}
.team-card{border-radius:20px!important;overflow:hidden}
.my-team-card .tag{background:rgba(202,255,40,.08)!important}
.roster .player-card,.roster-grid .player-card{box-shadow:none}
.league-card.league-card-enhanced{box-shadow:var(--premium-shadow-soft)!important}
.league-live-summary{background:linear-gradient(180deg,rgba(3,13,23,.18),rgba(3,13,23,.38))!important}
.league-stat{background:rgba(255,255,255,.026)!important;border-color:rgba(183,206,226,.1)!important}
.league-countdown{backdrop-filter:blur(10px)}

/* Hold page */
.next-card{padding:22px!important}
.season-stats{gap:10px!important}
.season-stats article{border-radius:17px!important}
.table-wrap{background:rgba(4,13,23,.52)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 55px rgba(0,0,0,.24)!important}
thead{background:rgba(255,255,255,.018)}
tbody tr{transition:background .16s ease}
tbody tr:hover{background:rgba(255,255,255,.025)}
tr.mine{background:linear-gradient(90deg,rgba(202,255,40,.105),rgba(202,255,40,.035))!important}
.standings-info-button{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.rules-modal{box-shadow:0 40px 120px rgba(0,0,0,.54)!important}
.rule-item{background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.018))!important;border-color:rgba(184,207,227,.1)!important}

/* Level test */
.account-note{background:rgba(202,255,40,.045)!important;border-color:rgba(202,255,40,.14)!important}
.start-grid>div{position:relative}
.start-grid .num{color:var(--premium-lime)!important;opacity:.82}
.quiz-card{box-shadow:var(--premium-shadow)!important}
.progress{background:rgba(255,255,255,.055)!important;overflow:hidden}
.progress>div{box-shadow:0 0 20px rgba(202,255,40,.22)}
.answers button,.answer{
  background:rgba(255,255,255,.028)!important;
  border-color:rgba(180,203,224,.12)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.answers button:hover,.answer:hover{transform:translateY(-1px);border-color:rgba(202,255,40,.22)!important;background:rgba(202,255,40,.045)!important}
.answers button.selected,.answer.selected{background:rgba(202,255,40,.1)!important;border-color:rgba(202,255,40,.42)!important;box-shadow:0 0 0 3px rgba(202,255,40,.045)!important}
.result-card .score{color:var(--premium-lime)!important;text-shadow:0 14px 45px rgba(202,255,40,.12)}
.focus-list>*{border-color:var(--premium-hairline)!important;background:rgba(255,255,255,.025)!important}

/* Modal / toast */
.modal-backdrop{
  background:rgba(1,5,10,.76)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
}
.modal{border-color:rgba(191,213,233,.14)!important;box-shadow:0 38px 120px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)!important}
.modal-close{background:rgba(255,255,255,.035)!important;transition:transform .16s ease,background .16s ease}
.modal-close:hover{transform:rotate(3deg);background:rgba(255,255,255,.07)!important}
.toast{box-shadow:0 18px 55px rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.14)}

/* Premium app dock */
.bottom-nav{
  background:rgba(5,12,21,.82)!important;
  border-color:rgba(177,202,225,.12)!important;
  backdrop-filter:blur(26px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;
  box-shadow:0 -8px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.bottom-nav a,.bottom-nav button{position:relative;transition:color .16s ease,transform .16s ease!important}
.bottom-nav a:hover,.bottom-nav button:hover{color:#c6d3df!important;transform:translateY(-1px)}
.bottom-nav a.active,.bottom-nav button.active{color:var(--premium-lime)!important}
.bottom-nav a.active:before,.bottom-nav button.active:before{
  content:"";
  position:absolute;
  top:0;
  width:34px;
  height:2px;
  border-radius:999px;
  background:var(--premium-lime);
  box-shadow:0 0 14px rgba(202,255,40,.38);
}

:focus-visible{outline:2px solid rgba(202,255,40,.72)!important;outline-offset:3px!important}

@keyframes premium-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main>section{animation:premium-rise .42s cubic-bezier(.22,.8,.24,1) both}
main>section:nth-child(2){animation-delay:.035s}
main>section:nth-child(3){animation-delay:.07s}
main>section:nth-child(4){animation-delay:.105s}
main>section:nth-child(5){animation-delay:.14s}

@media(min-width:680px){
  .bottom-nav{
    border-radius:24px!important;
    background:rgba(6,15,25,.8)!important;
    box-shadow:0 22px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04)!important;
  }
  .topbar{min-height:82px!important}
  .modal{border-radius:28px!important}
}

@media(max-width:520px){
  .brand:after{display:none}
  .hero h1,.welcome h1{letter-spacing:-.057em!important}
  .account-card,.connect-card,.finder-panel,.my-team-card,.start-card,.quiz-card,.result-card,.next-card{border-radius:22px!important}
  .metric-card{border-radius:18px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
}