:root{
  --bg1:#0b3d91;
  --bg2:#d61f2a;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.14);
  --shadow:0 10px 30px rgba(2,6,23,.12);
  --shadow2:0 6px 16px rgba(2,6,23,.10);
  --radius:16px;
  --radius2:22px;
  --focus:rgba(11,61,145,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
}

a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:18px}
h1,h2{margin:0 0 10px}
h1{font-size:28px;letter-spacing:-.02em}
h2{font-size:20px;letter-spacing:-.01em}
.small{font-size:12px}
.muted{color:var(--muted)}
.right{text-align:right}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  font-weight:700;font-size:12px;
}

.topbar{position:sticky;top:0;z-index:20;background:rgba(248,250,252,.86);border-bottom:1px solid var(--line);backdrop-filter: blur(10px)}
.topbar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 12px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.topbar-actions .nav{margin-left:0}
.topbar-inner--compact{justify-content:flex-end}
.topbar-inner--compact .nav{margin-left:0}
.brand{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.brand img{height:125px;width:auto;display:block}
.brand .brandtext{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand .brandname{font-weight:900;font-size:14px;letter-spacing:.02em}
.brand .brandsub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.navlink{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition:transform .04s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.navlink:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.navlink.active{background:rgba(11,61,145,.10);border-color:rgba(11,61,145,.25)}
.nav-spacer{flex:1}

.page{
  margin-top:14px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  padding:16px;
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sep{height:1px;background:var(--line);margin:14px 0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.btn.primary{background:rgba(11,61,145,.10);border-color:rgba(11,61,145,.25)}
.btn.danger{background:rgba(214,31,42,.10);border-color:rgba(214,31,42,.25)}
.btn:focus,.input:focus{outline:3px solid var(--focus);outline-offset:2px}

.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
}
select.input{appearance:none}

.kpi{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;margin-top:12px;
}
.kpi .box{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.kpi .label{font-size:12px;color:var(--muted);font-weight:800}
.kpi .value{font-size:18px;font-weight:900;margin-top:6px}

.podium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.podium-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;box-shadow:var(--shadow2)}
.podium-medal{font-size:32px}
.podium-name{font-size:16px;font-weight:900;margin-top:4px}
.podium-meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff;font-size:12px;font-weight:800}

.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.08)}
table th, table td{text-align:left}
table .right{text-align:left}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
tr:last-child td{border-bottom:none}

.standings-cards{display:none;grid-template-columns:1fr;gap:10px;margin-top:10px}
.standcard{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;box-shadow:var(--shadow2);display:flex;justify-content:space-between;gap:10px}
.rank{width:34px;height:34px;border-radius:12px;background:rgba(11,61,145,.10);display:flex;align-items:center;justify-content:center;font-weight:900}
.stand-left{display:flex;gap:10px;align-items:center}
.stand-name{font-weight:900}
.stand-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.metric{border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff;font-size:12px;font-weight:900}

.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;align-items:start}
.chartcard{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;box-shadow:var(--shadow2)}
.chartcard.span2{grid-column:1 / -1}
.charttitle{font-weight:900}
.chartbox{margin-top:10px}

.section{margin-top:14px}
.section-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}

.center{display:flex;justify-content:center}
.authwrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}
.auth{
  width:100%;
  max-width:520px;
  margin:0;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  padding:18px;
}
.auth-head{display:flex;justify-content:flex-end;margin-bottom:6px}
.auth-head .lang-switch{margin-left:auto}
.auth img{max-width:260px;width:100%;height:auto;display:block;margin:0 auto 12px}
.auth h1{text-align:center;margin:0 0 12px}
.auth .row{justify-content:space-between}
.auth-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.auth-note{flex:1 1 auto}

@media (max-width: 820px){
  .podium-grid{grid-template-columns:1fr}
  table{min-width:520px}
  .charts{grid-template-columns:1fr}
  .chartcard.span2{grid-column:auto}
}

@media (max-width: 520px){
  .wrap{padding:12px}
  .topbar-inner{padding:10px 12px}
  .brand .brandsub{display:none}
  .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
  .navlink{flex:1}
  .page{padding:12px}
  table{min-width:520px}
}

  .nav::-webkit-scrollbar{height:6px}
  .nav::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:999px}
  .navlink{flex:0 0 auto;white-space:nowrap}
  .brand img{height:162px}
}

#standings{margin-top:16px}

.moremenu{position:relative}
.moremenu summary{list-style:none}
.moremenu summary::-webkit-details-marker{display:none}
.morepanel{
  position:absolute; right:0; top:44px;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow: var(--shadow2);
  padding:8px; display:flex; flex-direction:column; gap:6px;
  min-width:180px;
}
.morepanel .navlink{border-radius:12px; justify-content:flex-start}
}

.dashhero{display:flex;justify-content:center;margin:10px 0 6px}
.dashhero img{max-width:520px;width:100%;height:auto}

.leaguepill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:12px;
  background:rgba(11,61,145,.08);
  border:1px dashed rgba(11,61,145,.25);
  color:rgba(15,23,42,.9);
  font-weight:900;font-size:12px;
}

.leaguebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.league-admin{display:none}


.stack-mobile{align-items:center}

.responsive-table{min-width:0}

/* leagues table responsive */
.leagues-table{min-width:0}
@media (max-width: 520px){
  .leagues-table{width:100%}
  .leagues-table thead{display:none}
  .leagues-table, .leagues-table tbody, .leagues-table tr, .leagues-table td{display:block;width:100%}
  .leagues-table tr{
    border:1px solid var(--line);border-radius:14px;
    padding:10px;margin-bottom:10px;background:#fff;box-shadow:var(--shadow2)
  }
  .leagues-table td{border:none;padding:6px 0}
  .leagues-table td:before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:2px;
  }
  .leagues-table td:last-child{margin-top:6px}
  .leagues-table .btn{width:100%}
}

@media (max-width: 720px){
  .topbar{position:static}
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .topbar-actions{width:100%}
  .nav{width:100%;flex-wrap:wrap;margin-left:0}
  .navlink{flex:1}
  .brand img{height:162px}
  .leaguepill{align-self:flex-start}
  .league-admin{display:inline-flex}
  .logout-link{order:99;align-self:flex-end;margin-left:auto}
  .leagues-topbar .lang-switch{order:-1}
  .stack-mobile{flex-direction:column;align-items:stretch}
  .stack-mobile > *{width:100%}

  .responsive-table thead{display:none}
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td{display:block;width:100%}
  .responsive-table tr{
    border:1px solid var(--line);border-radius:14px;
    padding:10px;margin-bottom:10px;background:#fff;box-shadow:var(--shadow2)
  }
  .responsive-table td{border:none;padding:6px 0}
  .responsive-table td:before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:2px;
  }
  .responsive-table td:last-child{margin-top:6px}
  .responsive-table .btn{width:100%}
  .responsive-table .action-row{display:flex;flex-direction:column;gap:8px}
  .members-table,
  .players-table{margin-top:12px}
}

.page{
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  padding:16px;
}

@media (max-width:520px){.brand img{height:162px}}

.chartcard{margin-bottom:0}
.chartbox{min-height:unset}

.moremenu{z-index:9999}
.morepanel{z-index:10000}

@media (max-width:520px){
  .leagues-table thead{display:none}
  .leagues-table tr{
    display:block;
    border:1px solid rgba(0,0,0,.15);
    border-radius:14px;
    margin-bottom:12px;
    padding:10px;
    background:#fff;
  }
  .leagues-table td{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    border:none;
  }
  .leagues-table td:before{
    content: attr(data-label);
    font-weight:700;
    color:#555;
  }
}

/* v4.3 chart spacing fix */
.chartcard:first-child{margin-bottom:4px}
.chartbox{margin-bottom:0}

/* v4.3 beheer dropdown z-index fix */
.moremenu{position:relative;z-index:9999}
.morepanel{position:absolute;z-index:10000}

/* v4.3 leagues mobile final layout */
@media (max-width:520px){
  .leagues-table,
  .tablewrap{display:none !important}

  .leagues-cards{
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
  }

  .lcard{
    border:1px solid rgba(0,0,0,.15);
    border-radius:16px;
    padding:12px;
    background:#fff;
  }

  .lcard-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
  }

  .lcard-name{font-weight:900;font-size:16px}
  .lcard-role{font-size:12px;color:#666}

  .lcard-row{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:13px;
  }

  .lcard-actions{margin-top:12px}
  .lcard-actions > *{display:block}
  .lcard-actions > * + *{margin-top:8px}
  .lcard-actions .btn{width:100%;text-align:center}
}

/* v4.4 remove excess chart whitespace */
.charts{row-gap:8px}
.chartcard{margin-bottom:0}
.chartbox{padding-bottom:0;min-height:auto}
canvas{max-height:240px}

@media (max-width:520px){
  .standings-cards{display:grid}
}

/* v4.4 dropdown always above everything */
.moremenu{position:relative;z-index:99999}
.morepanel{position:absolute;z-index:100000}
.topbar, .topbar *{z-index:1}

/* v4.4 leagues mobile guaranteed visible */
@media (max-width:520px){
  .leagues-cards{display:grid !important}
  .leagues-table{display:none !important}
  .tablewrap{display:none !important}
}

/* v4.5 chart whitespace hard fix */
.charts{row-gap:6px !important}
.chartcard{margin-bottom:0 !important}
.chartbox{padding-bottom:0 !important}
canvas{margin-bottom:0 !important}

/* v4.5 beheer dropdown always visible */
.moremenu{position:relative !important; z-index:99999 !important}
.morepanel{position:absolute !important; z-index:100000 !important}

/* v4.5 mobile leagues menu fix */
@media (max-width:520px){
  .leagues-cards{display:grid !important}
  .leagues-table{display:none !important}
  .tablewrap{display:none !important}
}

/* v4.6 tighter chart spacing */
.charts{row-gap:6px}
.chartcard{margin-bottom:4px}
.chartbox{padding-bottom:0}

/* v4.6 dropdown on top */
.moremenu, .morepanel{
  z-index:999999 !important;
  position:relative;
}

/* v4.6 mobile leagues restore */
@media (max-width:520px){
  .leagues-cards{display:block !important}
  .leagues-cards .lcard{margin-bottom:12px}
  .leagues-table{display:none !important}
}

.tcenter{text-align:center !important}

.leagues-table th{ text-align:center }

/* v4.6.3 leagues cards list */
.leagues-cards-list{display:none;gap:12px;margin:10px 0}
@media (max-width:520px){
  .leagues-cards-list{display:grid}
  .tablewrap{display:none !important}
}

.morepanel{z-index:1000000 !important; position:absolute !important}
.moremenu{z-index:999999 !important; position:relative !important}

/* Mobile match scores */
.match-scores-mobile{display:none;margin-top:8px}
.ms-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #ddd}
.ms-player{font-weight:600}
.ms-points{font-weight:700}
@media (max-width:520px){
  .match-scores-mobile{display:block}
  .matchtable{display:none}
}

/* v4.6.6 chartPoints spacing */
#chartPoints{display:block;width:100% !important}

@media (max-width:520px){
  .match-scores-mobile{display:block}
  .matchtable{display:none}
}

@media (max-width:520px){
  .nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .navlink{padding:8px 10px;font-size:12px;border-radius:14px}
  .topbar-inner{gap:10px}
  .brand img{height:64px}
  .admin-only{display:none !important}
  .logout-link{order:3;align-self:stretch;margin-left:0}
}

/* v4.6.9 mobile overview cash chip */
@media (max-width:520px){
  .ms-meta{flex-wrap:wrap;justify-content:flex-end}
  .ms-chip{font-size:11px;padding:4px 9px}
}

/* v4.7 overview mobile: stack chips */
@media (max-width:520px){
  .ms-meta{flex-direction:column;align-items:flex-end;gap:6px}
}

/* v4.7 login mobile improvements */
@media (max-width:520px){
  .auth{margin:0; padding:14px; border-radius:16px}
  .auth img{max-width:220px}
  .input{font-size:16px} /* prevent iOS zoom */
  .btn{width:100%}
  .row{flex-direction:column;align-items:stretch}
  .auth-actions{flex-direction:column;align-items:stretch}
  .auth-note{text-align:center}
}

/* v4.7.1 remove user pills spacing */
.topbar-inner{align-items:flex-start}

@media (max-width:520px){
  .brand img{
    height:100px !important;
    width:auto !important;
    display:block;
  }
}

.chart-title{
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 2px;
}
.chart-subtitle{
  color: rgba(0,0,0,.6);
  font-size: 12px;
  margin: 0 0 10px;
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#fff;
  border:2px solid var(--text);
  padding:8px 12px;
  border-radius:10px;
  z-index:999999;
}
.skip-link:focus{left:10px}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

/* Landing */
.landing-topbar{
  max-width:1140px;
  margin:0 auto;
  padding:16px 18px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 70%, rgba(255,255,255,.65) 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.landing{max-width:1140px;margin:0 auto;padding:0 18px 40px}
.landing-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:stretch}
.landing-hero--compact{grid-template-columns:1fr .9fr}
.landing-hero-text{
  padding:18px 20px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow2);
}
.landing-hero-text h1{font-size:34px;margin-bottom:6px}
.landing-hero-text p{font-size:16px;line-height:1.5}
.landing-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.landing-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow2);
}
.landing-card ol,
.landing-card ul{margin:8px 0 0;padding-left:18px}
.landing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.landing-showcase{margin-top:20px}
.landing-showcase-card{display:grid;grid-template-columns:1fr;gap:18px}
.landing-showcase-text{display:grid;gap:10px}
.landing-emphasis{
  font-weight:700;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(11,61,145,.08);
  border:1px solid rgba(11,61,145,.15);
}
.landing-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.landing-mini-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow2);
}
.landing-shot-card{display:flex;justify-content:center;align-items:center}
.landing-shot{width:100%;max-width:520px;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow2)}
.landing-actions{margin-top:12px}
.landing-footer{margin-top:20px;text-align:center}
.lang-switch{display:flex;gap:6px;align-items:center}
.lang-link{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  text-decoration:none;font-weight:700;background:#fff;
}
.lang-link.active{background:rgba(11,61,145,.10);border-color:rgba(11,61,145,.25)}

.dash-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.dash-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow2)}
.streak-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.streak-card{border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.streak-name{font-weight:900}
.streak-meta{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.achievement-list{display:grid;gap:10px}
.achievement-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.achievement-name{font-weight:900}
.achievement-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.public-chart-note{margin:8px 0 0}

@media (max-width: 820px){
  .landing-hero{grid-template-columns:1fr}
  .landing-grid{grid-template-columns:1fr}
  .dash-split{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .lang-switch{position:fixed;top:10px;right:10px;z-index:30}
  .topbar-inner{padding-top:40px}
  .landing-topbar{flex-direction:row;align-items:flex-start;padding-top:40px}
  .landing{padding:0 12px 24px}
  .landing-shot{max-width:240px}
}

@media (max-width: 520px){
  .leagues-topbar .lang-switch{position:static}
  .leagues-topbar .nav{margin-top:0}
}