:root{
  --bg:#0f131c;
  --panel:#121722;
  --panel-2:#1d2332;
  --line:#3a4050;
  --text:#f7f9ff;
  --muted:#aab1c2;
  --lime:#98cf12;
  --score:#eef1f6;
  --score-text:#121722;
  --win:#28c76f;
  --draw:#f0b84d;
  --loss:#ff5b5b;
}
body[data-theme="light"]{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#e8edf7;
  --line:#cfd6e4;
  --text:#101522;
  --muted:#596173;
  --lime:#75b800;
  --score:#111827;
  --score-text:#ffffff;
  --win:#07874c;
  --draw:#a86800;
  --loss:#d22e3a;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body.modal-open{overflow:hidden}
body[data-theme="light"]{
  background:
    linear-gradient(180deg,#ffffff 0,#f4f6fb 260px),
    var(--bg);
}
button{font:inherit}
.app-shell{
  width:min(980px,calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 36px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.brand-lockup img{
  width:112px;
  height:112px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.topbar p{
  margin:0 0 4px;
  color:var(--lime);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.74rem;
  font-weight:900;
}
h1,h2,h3{
  font-family:Archivo,Manrope,sans-serif;
  letter-spacing:0;
  margin:0;
}
h1{
  font-size:clamp(1.8rem,4vw,3.5rem);
  line-height:.95;
  text-transform:uppercase;
}
.season-badge,.chip{
  border-radius:9px;
  background:var(--panel-2);
  color:var(--text);
  font-weight:900;
  padding:10px 13px;
  white-space:nowrap;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.theme-toggle{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-2);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  cursor:pointer;
  font-weight:950;
}
.theme-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(90deg,var(--text) 0 50%,transparent 50% 100%);
  border:2px solid var(--text);
}
body[data-theme="light"] .theme-icon{
  background:var(--text);
  box-shadow:0 0 0 5px rgba(117,184,0,.2);
}
.main-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:10px;
}
.tab{
  min-height:46px;
  border:0;
  border-radius:8px;
  background:#2b3142;
  color:var(--text);
  cursor:pointer;
  text-transform:uppercase;
  font-weight:950;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
body[data-theme="light"] .tab{
  background:#dde4f0;
  color:#101522;
  text-shadow:none;
}
.tab.active{
  background:var(--lime);
  color:#fff;
}
.round-strip{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center;
  background:var(--panel-2);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:24px;
}
.round-tabs{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
.round-tabs::-webkit-scrollbar{display:none}
.round-arrow,.round-tab{
  border:0;
  background:transparent;
  color:white;
  cursor:pointer;
  font-weight:950;
  min-height:46px;
}
.round-arrow{
  background:var(--lime);
}
.round-arrow.prev{
  background:#d93832;
}
.round-arrow{
  font-size:2rem;
  line-height:1;
}
.round-tab{
  flex:0 0 auto;
  padding:0 14px;
  font-size:1rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.25);
}
.round-tab.played{
  background:#d93832;
}
.round-tab.pending{
  background:var(--lime);
}
.round-tab.active{
  box-shadow:inset 0 -4px 0 white, inset 0 0 0 999px rgba(255,255,255,.16);
}
.view{display:none}
.view.active{display:block}
.view-head,.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  margin-bottom:16px;
}
.view-head p,.panel-head p{
  margin:0 0 4px;
  color:var(--lime);
  text-transform:uppercase;
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.08em;
}
.view-head h2,.panel-head h2{
  font-size:1.6rem;
  text-transform:uppercase;
}
.selection-hint{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
}
.matches-list{
  border-top:1px solid var(--line);
}
.game-row{
  display:grid;
  grid-template-columns:132px minmax(145px,1fr) 58px minmax(145px,1fr) 30px;
  gap:10px;
  align-items:center;
  min-height:86px;
  border-bottom:1px solid var(--line);
  padding:14px 8px;
}
.game-row.compact{
  grid-template-columns:112px minmax(120px,1fr) 54px minmax(120px,1fr) 26px;
  min-height:66px;
  padding:9px 0;
}
.game-status strong{
  display:block;
  font-weight:950;
  color:var(--text);
}
.game-status span{
  display:block;
  color:var(--muted);
  font-size:.78rem;
  margin-top:3px;
  font-weight:800;
  text-transform:uppercase;
}
.club{
  border:0;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  cursor:pointer;
  font-weight:950;
}
.club.home{justify-content:flex-end;text-align:right}
.club.away{justify-content:flex-start;text-align:left}
.club span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.club:hover span{text-decoration:underline;text-underline-offset:4px}
.logo{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.logo.small{width:28px;height:28px}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.score-box{
  min-height:30px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:var(--score);
  color:var(--score-text);
  font-family:Archivo,sans-serif;
  font-size:1.18rem;
  font-weight:900;
  white-space:nowrap;
}
.score-box.muted{
  background:transparent;
  color:var(--muted);
  font-size:1.3rem;
}
.more{
  border:0;
  background:transparent;
  color:var(--text);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.bye-row{grid-template-columns:132px 1fr 58px 1fr 30px}
.split-layout{
  display:block;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
}
.standings-panel{
  width:100%;
}
.history-modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  padding:28px;
}
.history-modal.open{
  display:grid;
  place-items:center;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(7px);
}
.modal-panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(86vh,820px);
  overflow:auto;
  box-shadow:0 28px 90px rgba(0,0,0,.45);
}
.close-history{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel-2);
  color:var(--text);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  font-weight:800;
}
.table-head,.team-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 42px 38px 38px 38px 44px;
  gap:8px;
  align-items:center;
}
.table-head{
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  font-weight:950;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.team-row{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:11px 0;
  text-align:left;
  cursor:pointer;
}
.team-row.active{color:var(--lime)}
.pos,.num{
  font-family:Archivo,sans-serif;
  font-weight:900;
}
.team-cell{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.team-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:950;
}
.num{text-align:center}
.dif.posi{color:var(--win)}
.dif.nega{color:var(--loss)}
#teamHeader{
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  padding-right:48px;
}
.history-label{
  margin:0 0 10px;
  color:var(--lime);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.76rem;
  font-weight:950;
}
.empty-history{
  min-height:240px;
  display:grid;
  place-content:center;
  gap:8px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:10px;
  padding:22px;
  background:rgba(152,207,18,.05);
}
.empty-history strong{
  font-family:Archivo,Manrope,sans-serif;
  font-size:1.35rem;
  text-transform:uppercase;
}
.empty-history span{
  color:var(--muted);
  font-weight:800;
  max-width:420px;
}
.team-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.team-title .logo{
  width:56px;
  height:56px;
}
.team-title h2{
  font-size:1.5rem;
  text-transform:uppercase;
}
.team-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-weight:900;
}
.next-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:14px 0;
  padding:12px;
  background:#0f131c;
  border-radius:8px;
}
.next-note span{
  color:var(--lime);
  text-transform:uppercase;
  font-size:.74rem;
  font-weight:950;
}
.next-note strong{text-align:right}
.stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.stats div{
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px;
  text-align:center;
}
.stats small{
  display:block;
  color:var(--muted);
  font-size:.66rem;
  font-weight:950;
}
.stats strong{
  display:block;
  font-family:Archivo,sans-serif;
  font-size:1.25rem;
}
.filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 0;
}
.filter-row h2{font-size:1.1rem}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filter{
  border:0;
  border-radius:7px;
  background:#2b3142;
  color:white;
  min-height:34px;
  padding:0 10px;
  cursor:pointer;
  font-weight:900;
}
body[data-theme="light"] .filter{
  background:#dde4f0;
  color:#101522;
}
.filter.active{
  background:var(--lime);
  color:white;
}
.timeline{
  display:grid;
  gap:8px;
}
.mini-match{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 12px;
  padding:11px;
  border:1px solid var(--line);
  border-left:5px solid var(--line);
  border-radius:8px;
}
.mini-match.win{border-left-color:var(--win)}
.mini-match.draw{border-left-color:var(--draw)}
.mini-match.loss{border-left-color:var(--loss)}
.mini-match.upcoming{border-left-color:var(--lime)}
.mini-match span{
  grid-column:1/-1;
  color:var(--muted);
  font-size:.76rem;
  font-weight:900;
}
.mini-match strong{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.mini-match em{
  font-style:normal;
  font-family:Archivo,sans-serif;
  font-weight:900;
}
.fixture-list{
  display:grid;
  gap:18px;
}
.fixture-round{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:10px;
  padding:14px 16px;
}
.fixture-round-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.fixture-round-head h3{
  font-size:1.25rem;
  text-transform:uppercase;
}
.fixture-round-head span{
  color:var(--muted);
  font-weight:900;
}
.fixture-bye{
  color:var(--muted);
  font-weight:900;
  padding-top:12px;
}
.fixture-bye button{
  border:0;
  background:transparent;
  color:var(--text);
  font-weight:950;
  cursor:pointer;
}
@media(max-width:760px){
  body{overflow-x:hidden}
  .app-shell{width:100%;padding:12px 10px 28px}
  .topbar{align-items:stretch;flex-direction:column;gap:12px;margin-bottom:12px}
  .brand-lockup{gap:12px;align-items:center}
  .brand-lockup img{width:74px;height:74px}
  .topbar p{font-size:.64rem;margin-bottom:3px}
  h1{font-size:1.65rem;line-height:.98}
  .top-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-content:stretch}
  .theme-toggle,.season-badge{min-height:40px;justify-content:center;font-size:.82rem;padding:0 8px}
  .main-tabs{gap:6px;margin-bottom:8px;position:sticky;top:0;z-index:5;background:var(--bg);padding-top:3px}
  .tab{font-size:.78rem;min-height:44px;border-radius:7px}
  .round-strip{grid-template-columns:34px minmax(0,1fr) 34px;margin-bottom:18px;border-radius:7px;position:sticky;top:55px;z-index:4}
  .round-tab{font-size:.88rem;padding:0 12px;min-height:44px}
  .round-arrow{min-height:44px;font-size:1.8rem}
  .view{padding:0 2px}
  .view-head,.panel-head{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:12px}
  .view-head h2,.panel-head h2{font-size:1.34rem}
  .game-row,.game-row.compact{
    grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
    gap:9px;
    min-height:auto;
    padding:12px;
    margin-bottom:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
  }
  .matches-list{border-top:0}
  .game-status{
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding-bottom:2px;
  }
  .game-status strong,.game-status span{font-size:.74rem}
  .club{flex-direction:column;gap:6px;text-align:center;justify-content:flex-start}
  .club.home{justify-content:flex-start;text-align:center}
  .club.away{justify-content:flex-start;text-align:center}
  .club.home .logo{order:-1}
  .club span{white-space:normal;font-size:.82rem;line-height:1.12;text-shadow:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .logo,.logo.small{width:36px;height:36px}
  .score-box{min-height:34px;font-size:1rem;align-self:center}
  .more{display:none}
  .split-layout{grid-template-columns:1fr}
  .standings-panel{overflow-x:auto}
  .table-head,.team-row{min-width:560px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .bye-row{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
  .panel{border-radius:12px;padding:12px}
  .history-modal{padding:10px}
  .modal-panel{max-height:92vh;border-radius:14px}
  .detail-panel{margin-top:0}
  .team-title .logo{width:58px;height:58px}
  .team-title h2{font-size:1.32rem;line-height:1.05}
  .next-note{align-items:flex-start;flex-direction:column;gap:5px}
  .next-note strong{text-align:left}
  .filter-row{align-items:flex-start;flex-direction:column}
  .filters{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .filter{min-height:38px}
  .fixture-round{padding:12px;border-radius:12px}
  .fixture-round .game-row{margin-bottom:8px}
}
@media(max-width:460px){
  .brand-lockup img{width:68px;height:68px}
  h1{font-size:1.48rem}
  .top-actions{grid-template-columns:1fr}
  .season-badge,.chip{font-size:.76rem}
  .table-head,.team-row{grid-template-columns:24px minmax(88px,1fr) 31px 28px 28px 28px 31px;gap:4px}
  .table-head,.team-row{min-width:520px}
  .table-head{font-size:.56rem}
  .team-row{min-height:54px;padding:9px 0}
  .team-cell{gap:7px}
  .team-name{font-size:.9rem}
  .team-cell .logo{width:28px;height:28px}
  .pos,.num{font-size:.82rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .mini-match{grid-template-columns:1fr;gap:7px}
  .mini-match em{justify-self:start}
}