:root{
  --bg:#081224;
  --panel:rgba(16,30,66,.055);
  --panel-2:rgba(8,18,42,.020);
  --panel-strong:rgba(12,24,56,.09);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.18);
  --text:#eef3ff;
  --muted:rgba(238,243,255,.82);
  --muted-2:rgba(238,243,255,.58);
  --accent:#3f7cff;
  --accent-2:#6aa8ff;
  --success:#31c56d;
  --danger:#d9534f;
  --warning:#f0ad4e;
  --shadow:0 8px 20px rgba(0,0,0,.06);
  --shadow-soft:0 4px 12px rgba(0,0,0,.04);
  --radius:18px;
  --radius-sm:14px;
  --sidebar-w:236px;
  --header-h:88px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(5,10,20,.08), rgba(5,10,20,.20)),
    url('/assets/bg-rink.png') center center / cover no-repeat fixed;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.app{
  min-height:100vh;
  display:flex;
}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:linear-gradient(180deg, rgba(8,18,36,.28), rgba(7,16,31,.17));
  border-right:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(11px) saturate(114%);
  -webkit-backdrop-filter:blur(11px) saturate(114%);
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  height:100vh;
  padding:20px 18px;
  overflow:hidden;
  z-index:30;
}

.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(91,148,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 16%);
  pointer-events:none;
}

.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:30px;
  z-index:1;
}

.brand-logo{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#2281ff,#1d4ed8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  box-shadow:0 12px 26px rgba(29,78,216,.36);
}

.brand-text{
  line-height:1.02;
}

.brand-text strong{
  display:block;
  font-size:18px;
  letter-spacing:.35px;
}

.brand-text span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.nav{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1;
}

.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  color:var(--muted);
  transition:all .18s ease;
  border:1px solid transparent;
  font-size:15px;
}

.nav a:hover,
.nav a.active{
  color:#fff;
  background:rgba(63,124,255,.16);
  border-color:rgba(106,168,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.nav .icon{
  width:22px;
  text-align:center;
  opacity:.95;
  font-size:15px;
}

.nav-logout{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:14px !important;
}

.nav-logout:hover{
  background:rgba(217,83,79,.12) !important;
  border-color:rgba(217,83,79,.22) !important;
}

/* MAIN */
.main{
  flex:1;
  min-width:0;
  padding:18px 22px 30px 18px;
  position:relative;
  z-index:1;
}

/* TOPBAR */
.topbar{
  height:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  position:relative;
  z-index:50;
}

.topbar-left{
  padding-top:4px;
}

.topbar-left h1{
  margin:0;
  font-size:42px;
  line-height:1;
  font-weight:900;
  letter-spacing:.1px;
  text-shadow:0 2px 20px rgba(0,0,0,.18);
}

.topbar-left .subnav{
  margin-top:10px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.topbar-left .subnav a{
  color:var(--muted);
  padding-bottom:7px;
  border-bottom:3px solid transparent;
  transition:.15s ease;
  font-size:15px;
}

.topbar-left .subnav a.active{
  color:#fff;
  border-color:#fff;
}

.topbar-left .subnav a:hover{
  color:#fff;
}

.topbar-right{
  display:flex;
  align-items:flex-start;
  gap:12px;
  position:relative;
  z-index:60;
}

.icon-btn{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px) saturate(112%);
  -webkit-backdrop-filter:blur(6px) saturate(112%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:var(--shadow-soft);
}

/* USER CARD + MENU */
.user-card{
  min-width:306px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.010)),
    linear-gradient(180deg, rgba(20,38,78,.11), rgba(16,28,59,.06));
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(8px) saturate(112%);
  -webkit-backdrop-filter:blur(8px) saturate(112%);
  box-shadow:var(--shadow);
  position:relative;
  z-index:80;
}

.user-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.user-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#2281ff,#1d4ed8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  box-shadow:0 10px 20px rgba(29,78,216,.28);
}

.user-meta strong{
  display:block;
  font-size:15px;
  line-height:1.15;
}

.user-meta span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}

.user-score{
  font-size:14px;
  color:#d8e7ff;
  font-weight:800;
  white-space:nowrap;
}

.user-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
}

.user-menu{
  position:relative;
  cursor:pointer;
}

.user-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:rgba(10,20,42,.82);
  border:1px solid var(--line);
  border-radius:14px;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  padding:8px;
  display:none;
  flex-direction:column;
  z-index:9999;
}

.user-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  font-size:14px;
}

.user-dropdown a:hover{
  background:rgba(63,124,255,.14);
  color:#fff;
}

.user-dropdown .divider{
  height:1px;
  background:var(--line);
  margin:6px 0;
}

.user-dropdown .danger{
  color:#ff8e8e;
}

.user-menu:hover .user-dropdown{
  display:flex;
}

.logout-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:13px;
  font-weight:800;
  transition:all .18s ease;
  white-space:nowrap;
}

.logout-link:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.24);
}

/* GLASS PANELS */
.glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028) 0%, rgba(255,255,255,.009) 18%, rgba(255,255,255,.003) 42%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(7px) saturate(112%);
  -webkit-backdrop-filter:blur(7px) saturate(112%);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.005) 24%, rgba(255,255,255,0) 48%),
    radial-gradient(circle at top left, rgba(122,173,255,.022), transparent 34%);
  pointer-events:none;
}

/* ROUND TABS */
.round-tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  overflow:hidden;
  min-height:92px;
}

.round-tab{
  padding:18px 18px 14px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.10);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  cursor:pointer;
}

.round-tab:last-child{
  border-right:0;
}

.round-tab .kicker{
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
  text-shadow:0 2px 10px rgba(0,0,0,.12);
}

.round-tab .meta{
  color:var(--muted);
  font-size:15px;
}

.round-tab.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    linear-gradient(180deg, rgba(11,36,92,.72), rgba(8,28,76,.60));
}

.round-tab:hover{
  background:rgba(255,255,255,.04);
}

.live-pill{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:8px;
  background:#d64b3b;
  color:#fff;
  font-size:12px;
  font-weight:800;
  vertical-align:middle;
  box-shadow:0 8px 18px rgba(214,75,59,.26);
}

/* LEAGUE TABS */
.league-tabs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:14px;
  overflow:hidden;
  min-height:62px;
}

.league-tab{
  padding:18px 14px;
  text-align:center;
  font-size:18px;
  font-weight:900;
  border-right:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}

.league-tab:last-child{
  border-right:0;
}

.league-tab.active{
  background:linear-gradient(180deg, rgba(79,125,255,.24), rgba(38,76,184,.20));
}

/* GRID */
.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}

.dashboard-bottom{
  display:grid;
  grid-template-columns:1.45fr .85fr;
  gap:16px;
  margin-top:16px;
}

.dashboard-bottom-equal{
  grid-template-columns:1fr 1fr;
}

@media (max-width:1200px){
  .dashboard-grid,
  .dashboard-bottom,
  .dashboard-bottom-equal{
    grid-template-columns:1fr;
  }
}

/* CARD HEAD */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 10px;
}

.card-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
}

.card-filter{
  color:var(--muted);
  font-size:14px;
}

/* RANK LIST */
.rank-list{
  padding:10px 14px 16px;
}

.rank-item{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.rank-item:first-child{
  border-top:0;
}

.rank-item-tall{
  align-items:flex-start;
}

.rank-item-section{
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:8px;
  padding-top:18px;
}

.rank-item-sub{
  margin-left:28px;
  background:rgba(255,255,255,.03);
  border-radius:14px;
}

.rank-avatar{
  width:50px;
  height:50px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
}

.rank-main strong{
  display:block;
  font-size:18px;
  margin-bottom:4px;
}

.rank-sub{
  font-size:13px;
  color:var(--muted);
}

.rank-points{
  text-align:right;
  font-weight:900;
  font-size:20px;
}

.rank-points span{
  color:#7fe28f;
  font-size:18px;
}

/* LINEUP */
.lineup-panel{
  padding:14px 18px 18px;
  min-height:190px;
}

.lineup-players{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  align-items:end;
  margin-top:12px;
}

.lineup-players-six{
  grid-template-columns:repeat(6,1fr);
}

.lineup-players-five{
  grid-template-columns:repeat(5,1fr);
}

.lineup-player{
  text-align:center;
}

.lineup-face{
  width:72px;
  height:72px;
  border-radius:16px;
  margin:0 auto 8px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.lineup-name{
  font-size:15px;
  font-weight:900;
}

.lineup-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.lineup-score{
  display:inline-block;
  margin-top:6px;
  background:rgba(255,255,255,.88);
  color:#1b2440;
  border-radius:8px;
  padding:2px 8px;
  font-size:12px;
  font-weight:900;
}

.lineup-cta{
  margin-top:18px;
}

/* BUTTONS */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(180deg,#43b96b,#2f9151);
  color:#fff;
  font-size:16px;
  font-weight:900;
  border:0;
  box-shadow:0 10px 22px rgba(49,197,109,.24);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:16px;
  font-weight:900;
}

/* RESULT */
.result-panel{
  padding:18px;
  min-height:190px;
}

.result-place{
  font-size:58px;
  font-weight:900;
  line-height:1;
}

.result-label{
  color:var(--muted);
  margin-top:6px;
}

.result-stats{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.mini-chart{
  margin-top:18px;
  height:84px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.mini-chart span{
  width:16px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,#7fb0ff,#346cff);
  opacity:.92;
  box-shadow:0 4px 14px rgba(52,108,255,.18);
}

.quick-note{
  color:var(--muted);
  font-size:14px;
  padding:0 20px 18px;
}

/* LINKS INSIDE CONTENT */
.card-filter a,
.lineup-name a,
.rank-main a{
  color:inherit;
}

.card-filter a:hover,
.lineup-name a:hover,
.rank-main a:hover{
  text-decoration:underline;
}

/* COMPETITION / DASHBOARD HEIGHT HELPERS */
.competition-panel-equal{
  display:flex;
  flex-direction:column;
}

.competition-lineup-panel{
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* PICK TEAM */
.pick-layout{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:16px;
  padding:0 16px 16px;
}

.pick-panel{
  padding-bottom:12px;
}

.pick-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:18px 18px 10px;
}

.pick-panel-title{
  font-size:20px;
  font-weight:900;
}

.pick-panel-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:5px;
}

.pick-slots{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 18px;
}

.pick-slot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.pick-slot-main{
  min-width:0;
}

.pick-slot-label{
  font-weight:900;
  margin-bottom:4px;
}

.pick-slot-name{
  font-size:17px;
  font-weight:800;
}

.pick-slot-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.pick-slot-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.pick-formbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:18px;
}

.pick-filters{
  display:grid;
  grid-template-columns:1fr 170px 170px 120px;
  gap:10px;
  padding:0 18px 14px;
}

.pick-filters input,
.pick-filters select{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}

.pick-player-list{
  max-height:620px;
  overflow:auto;
  padding:0 18px 8px;
}

.pick-player-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.pick-player-name{
  font-size:17px;
  font-weight:800;
}

.pick-player-meta{
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
}

.pick-ok{
  margin:0 16px 14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(49,197,109,.14);
  border:1px solid rgba(49,197,109,.22);
  color:#dff7e7;
}

.pick-err{
  margin:0 16px 14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(217,83,79,.14);
  border:1px solid rgba(217,83,79,.22);
  color:#ffe7e6;
}

/* AUTH */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(rgba(5,10,20,.18), rgba(5,10,20,.34)),
    url('/assets/bg-rink.png') center center / cover no-repeat fixed;
}

.auth-wrap{
  width:100%;
  max-width:460px;
  padding:24px;
}

.auth-card{
  padding:28px 24px;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.auth-title{
  margin:0;
  font-size:30px;
  font-weight:900;
}

.auth-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.auth-form label{
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.auth-form input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}

.auth-btn{
  margin-top:8px;
  width:100%;
}

.auth-links{
  margin-top:16px;
  color:var(--muted);
  font-size:14px;
}

.auth-links a{
  color:#fff;
  text-decoration:underline;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .pick-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:980px){
  .sidebar{
    display:none;
  }

  .main{
    padding:14px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
    min-height:auto;
  }

  .topbar-right{
    width:100%;
    flex-wrap:wrap;
  }

  .user-card{
    min-width:0;
    width:100%;
  }

  .round-tabs,
  .league-tabs{
    grid-template-columns:1fr;
  }

  .round-tab,
  .league-tab{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  .lineup-players-six,
  .lineup-players-five,
  .lineup-players{
    grid-template-columns:repeat(2,1fr);
  }

  .pick-filters{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:760px){
  .lineup-players{
    grid-template-columns:repeat(2,1fr);
  }

  .pick-filters{
    grid-template-columns:1fr;
  }

  .user-dropdown{
    left:0;
    right:auto;
    min-width:100%;
  }
}

.rank-avatar{
  object-fit:cover;
  overflow:hidden;
}

.lineup-face{
  object-fit:cover;
  overflow:hidden;
}

.profile-photo-large{
  width:92px;
  height:92px;
  border-radius:18px;
  object-fit:cover;
  background:rgba(255,255,255,.12);
  display:block;
}

.mini-lineup{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.mini-lineup-player{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  text-align:center;
}

.mini-lineup-face{
  width:52px;
  height:52px;
  border-radius:12px;
  margin:0 auto 8px;
  object-fit:cover;
  background:rgba(255,255,255,.12);
  display:block;
}

.mini-lineup-name{
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}

.mini-lineup-meta{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}

@media (max-width:980px){
  .mini-lineup{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .mini-lineup{
    grid-template-columns:1fr;
  }
}

.pick-layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:16px;
  margin-top:16px;
}

.pick-panel{
  padding:16px;
}

.pick-panel-sticky{
  position:sticky;
  top:96px;
  align-self:start;
}

.pick-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.pick-panel-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.04em;
}

.pick-panel-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.pick-summary-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.pick-summary-pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:800;
}

.pick-slots{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pick-slot{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}

.pick-slot-photo{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  display:block;
  background:rgba(255,255,255,.12);
}

.pick-slot-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
}

.pick-slot-name{
  font-size:15px;
  font-weight:900;
  margin-top:2px;
  line-height:1.25;
}

.pick-slot-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.pick-slot-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pick-formbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.pick-ok{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(49,197,109,.16);
  border:1px solid rgba(49,197,109,.34);
}

.pick-err{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(217,83,79,.14);
  border:1px solid rgba(217,83,79,.30);
}

.pick-filters{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.pick-filters input,
.pick-filters select{
  width:100%;
  min-width:0;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:var(--text);
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

.pick-filters input::placeholder{
  color:var(--muted-2);
}

.pick-filters select option{
  background:#0f1b35;
  color:#eef3ff;
}

.pick-filters input:focus,
.pick-filters select:focus{
  border-color:rgba(106,168,255,.60);
  box-shadow:0 0 0 3px rgba(106,168,255,.12);
}

.pick-filters-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  grid-column:1 / -1;
}

.pick-player-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pick-player-card{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.pick-player-card:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
}

.pick-player-card.is-selected{
  border-color:rgba(106,168,255,.45);
  background:rgba(63,124,255,.08);
}

.pick-player-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.pick-player-identity{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

.pick-player-avatar{
  width:60px;
  height:60px;
  border-radius:16px;
  object-fit:cover;
  display:block;
  background:rgba(255,255,255,.12);
  flex:0 0 auto;
}

.pick-player-name-wrap{
  min-width:0;
}

.pick-player-name-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.pick-player-name{
  font-size:16px;
  font-weight:900;
  line-height:1.25;
}

.pick-player-meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.pick-player-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 auto;
}

.btn-detail{
  white-space:nowrap;
}

.pick-player-stats{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
}

.pick-stat-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:10px;
}

.pick-stat-label{
  font-size:11px;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.pick-stat-value{
  margin-top:4px;
  font-size:15px;
  font-weight:900;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(106,168,255,.14);
  border:1px solid rgba(106,168,255,.30);
  font-size:11px;
  font-weight:800;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(240,173,78,.18);
  border:1px solid rgba(240,173,78,.35);
  font-size:11px;
  font-weight:900;
}

.note{
  font-size:13px;
  color:var(--muted);
}

@media (max-width:1180px){
  .pick-layout{
    grid-template-columns:1fr;
  }

  .pick-panel-sticky{
    position:static;
  }

  .pick-player-stats{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

@media (max-width:760px){
  .pick-filters{
    grid-template-columns:1fr;
  }

  .pick-slot{
    grid-template-columns:48px minmax(0,1fr);
  }

  .pick-slot-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }

  .pick-player-card-top{
    flex-direction:column;
    align-items:stretch;
  }

  .pick-player-actions{
    justify-content:flex-start;
  }

  .pick-player-stats{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}