@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800;900&family=Share+Tech+Mono&display=swap');

html {
  font-size: 15px;
}
@media (min-width: 1024px) {
  html {
    font-size: 17px; /* Optimize for projector displays, keeping more content visible */
  }
}

:root {
  --bg: #060913;
  --bg2: #0b1221;
  --panel: rgba(11,18,33,0.85);
  --border: rgba(255,255,255,0.07);
  --text: #f0f4f9;
  --muted: #7a8ba3;
  --green: #9bf00b;
  --cyan: #00d2ff;
  --purple: #9d4edd;
  --red: #ff334b;
  --gold: #ffbe0b;
  --silver: #e2e8f0;
  --font: 'Outfit', sans-serif;
  --mono: 'Share Tech Mono', monospace;
  --speed: 0.25s;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(at 10% 20%,rgba(155,240,11,.03) 0,transparent 50%),
  radial-gradient(at 90% 5%,rgba(0,210,255,.03) 0,transparent 50%);}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan);}

/* ─── HEADER ─── */
.main-header{
  background:linear-gradient(180deg,rgba(10,17,33,.95) 0%,rgba(6,9,19,.9) 100%);
  border-bottom:1px solid var(--border);
  padding:.4rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);
  gap:1rem;
}

.brand{display:flex;align-items:center;gap:1rem;}
.brand-logo h1{font-weight:900;font-style:italic;font-size:1.6rem;letter-spacing:-1px;line-height:1;
  background:linear-gradient(90deg,#fff 0%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.brand-logo small{font-size:.65rem;letter-spacing:4px;color:var(--muted);text-transform:uppercase;display:block;}

.telk-badge{background:var(--red);color:#fff;font-weight:800;font-size:.7rem;padding:.25rem .6rem;border-radius:4px;letter-spacing:1px;}

/* ─── NAV TABS ─── */
.nav-tabs{display:flex;background:rgba(255,255,255,.03);padding:4px;border-radius:30px;border:1px solid var(--border);gap:2px;}
.tab-btn{background:transparent;border:none;color:var(--muted);padding:.5rem 1.1rem;border-radius:25px;cursor:pointer;
  font-weight:600;font-size:.82rem;transition:all var(--speed);display:flex;align-items:center;gap:.4rem;font-family:var(--font);}
.tab-btn.active{background:linear-gradient(135deg,var(--cyan),rgba(0,210,255,.5));color:#fff;box-shadow:0 0 15px rgba(0,210,255,.25);}
.tab-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,.06);}

.clock-panel{font-family:var(--mono);background:rgba(0,0,0,.3);border:1px solid var(--border);
  padding:.4rem .8rem;border-radius:8px;color:var(--cyan);font-size:.8rem;white-space:nowrap;
  display:flex;align-items:center;gap:.4rem;}

.slogan{text-align:right;font-size:.72rem;font-style:italic;color:var(--muted);line-height:1.4;}
.slogan span{color:var(--green);font-weight:600;}

/* ─── LIVE COURTS BAR ─── */
.live-courts-bar{
  padding: 0.5rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
}
.live-courts-bar-inner{
  max-width: 100%;
}
.live-courts-bar-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.live-courts-bar-title{
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.live-glow-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--red);
  background: rgba(255, 51, 75, 0.15);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 51, 75, 0.25);
}
.courts-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* ─── VIEWS ─── */
.view-container{padding:0.6rem 1.5rem;}
.view-content{display:none;animation:fadeIn .3s ease;}
.view-content.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ─── BABAK GRUP: 2:1 GRID ─── */
.group-stage-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;align-items:start;}
@media(max-width:1100px){.group-stage-grid{grid-template-columns:1fr;}}

/* ─── PANEL CARD ─── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  backdrop-filter:blur(15px);box-shadow:0 6px 24px rgba(0,0,0,.35);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--cyan),transparent);}
.card.accent-green::before{background:linear-gradient(90deg,var(--green),transparent);}
.card.accent-purple::before{background:linear-gradient(90deg,var(--purple),transparent);}
.card.accent-red::before{background:linear-gradient(90deg,var(--red),transparent);}
.card.accent-gold::before{background:linear-gradient(90deg,var(--gold),transparent);}
.card-inner{padding:0.75rem;}
.card-header{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:0.6rem;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:.4rem;}
.card-header h2{font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;gap:.5rem;}
.card-header h2 i{color:var(--cyan);}
.card-subtitle{font-size:.72rem;color:var(--muted);}

/* ─── KLASEMEN GROUPS GRID ─── */
.groups-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:800px){.groups-2col{grid-template-columns:1fr;}}

.group-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:10px;padding:.55rem;transition:all var(--speed);}
.group-card:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}

.group-header{font-weight:800;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:5px;margin-bottom:.3rem;}
.g-A{background:rgba(0,210,255,.12);color:#00d2ff;border-left:3px solid #00d2ff;}
.g-B{background:rgba(155,240,11,.12);color:#9bf00b;border-left:3px solid #9bf00b;}
.g-C{background:rgba(247,127,0,.12);color:#f77f00;border-left:3px solid #f77f00;}
.g-D{background:rgba(157,78,221,.12);color:#9d4edd;border-left:3px solid #9d4edd;}
.g-E{background:rgba(255,190,11,.12);color:#ffbe0b;border-left:3px solid #ffbe0b;}
.g-F{background:rgba(0,150,255,.12);color:#0096ff;border-left:3px solid #0096ff;}
.g-G{background:rgba(255,51,75,.12);color:#ff334b;border-left:3px solid #ff334b;}
.g-H{background:rgba(0,220,120,.12);color:#00dc78;border-left:3px solid #00dc78;}

/* Standings Table */
.tbl{width:100%;border-collapse:collapse;font-size:.78rem;}
.tbl th{color:var(--muted);font-weight:600;padding:.3rem .2rem;border-bottom:1px solid rgba(255,255,255,.05);text-align:left;}
.tbl td{padding:.2rem .2rem;border-bottom:1px solid rgba(255,255,255,.03);}
.tbl tr:last-child td{border-bottom:none;}
.tc{text-align:center !important;}
.tr{text-align:right !important;}
.bold{font-weight:800;color:#fff;}
.rnum{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;
  border-radius:3px;font-weight:800;font-size:.7rem;margin-right:.35rem;}
.rank-1 .rnum{background:rgba(155,240,11,.2);color:var(--green);}
.rank-2 .rnum{background:rgba(0,210,255,.2);color:var(--cyan);}
.rank-3 .rnum{background:rgba(255,255,255,.08);color:var(--muted);}
.tname{font-size:0.8rem;font-weight:600;line-height:1.2;word-break:break-word;}

/* ─── LAPANGAN LIVE ─── */
.courts-stack{display:flex;flex-direction:column;gap:.85rem;}
.court-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:10px;padding:.9rem;transition:all var(--speed);}
.court-card.active-live{border-color:rgba(255,51,75,.3);box-shadow:inset 0 0 15px rgba(255,51,75,.04);}
.court-card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.court-name{font-weight:800;font-size:.8rem;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;}
.court-info{font-size:.7rem;color:var(--muted);margin-bottom:.4rem;}
.court-teams{font-size:.85rem;font-weight:600;line-height:1.4;}
.court-vs{color:var(--muted);font-weight:400;font-size:.75rem;}
.court-score-row{display:flex;justify-content:center;gap:.5rem;margin-top:.6rem;font-family:var(--mono);}
.court-score-num{font-size:1.4rem;font-weight:bold;color:var(--green);
  background:rgba(0,0,0,.4);padding:.1rem .5rem;border-radius:5px;min-width:36px;text-align:center;}
.court-score-sep{font-size:1.2rem;color:var(--muted);align-self:center;}

.btn-see-all{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1rem;padding:.55rem;border-radius:7px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  color:var(--text);font-weight:600;font-size:.8rem;cursor:pointer;
  transition:all var(--speed);width:100%;}
.btn-see-all:hover{background:rgba(255,255,255,.07);color:var(--cyan);border-color:var(--cyan);}

/* ─── STATUS BADGES ─── */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .45rem;
  border-radius:10px;font-size:.67rem;font-weight:700;text-transform:uppercase;}
.badge-live{background:rgba(255,51,75,.12);color:var(--red);border:1px solid rgba(255,51,75,.25);}
.badge-finished{background:rgba(155,240,11,.1);color:var(--green);border:1px solid rgba(155,240,11,.2);}
.badge-upcoming{background:rgba(255,255,255,.05);color:var(--muted);}
.pulse-dot{width:0.4rem;height:0.4rem;background:var(--red);border-radius:50%;
  box-shadow:0 0 6px var(--red);animation:pDot 1.2s infinite;}
@keyframes pDot{0%,100%{transform:scale(.9);opacity:.5;}50%{transform:scale(1.3);opacity:1;}}

/* ─── GROUP TAG ─── */
.g-tag{display:inline-block;padding:.1rem .4rem;border-radius:4px;font-size:.65rem;font-weight:700;}

/* ─── JADWAL TABLE ─── */
.jadwal-table-wrap{overflow-x:auto;}
.jadwal-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.jadwal-table thead th{background:rgba(0,0,0,.3);color:var(--muted);font-weight:600;
  padding:.6rem .8rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;}
.jadwal-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background var(--speed);}
.jadwal-table tbody tr:hover{background:rgba(255,255,255,.03);}
.jadwal-table td{padding:.6rem .8rem;vertical-align:middle;}
.score-cell{font-family:var(--mono);font-weight:bold;font-size:.9rem;color:var(--green);}
.winner-a{font-weight:700;color:#fff;}
.winner-b{font-weight:700;color:#fff;}
.match-num{font-weight:800;color:var(--cyan);}

/* ─── BRACKET ─── */
.bracket-scroll{overflow-x:auto;padding:1rem 0;}
.bracket-flex{display:flex;gap:1.5rem;min-width:700px;}
.bracket-col{display:flex;flex-direction:column;justify-content:space-around;width:175px;}
.bracket-col-title{text-align:center;font-size:.7rem;text-transform:uppercase;color:var(--muted);
  letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:.3rem;margin-bottom:.5rem;}
.bracket-match{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:8px;margin:.5rem 0;transition:all var(--speed);cursor:pointer;position:relative;}
.bracket-match:hover{border-color:rgba(255,255,255,.15);}
.bracket-match-lbl{position:absolute;left:-0.5rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;border-radius:50%;background:#1e293b;border:1px solid var(--border);
  font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;color:var(--cyan);}
.bracket-team{display:flex;justify-content:space-between;align-items:center;
  padding:.35rem .55rem;font-size:.73rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.03);}
.bracket-team:last-child{border-bottom:none;}
.bracket-team.bwinner{color:var(--green);}
.bracket-team.bloser{color:var(--muted);}
.bracket-sc{font-family:var(--mono);font-size:.7rem;background:rgba(0,0,0,.3);
  padding:.1rem .3rem;border-radius:3px;}
.bracket-team.bwinner .bracket-sc{color:var(--green);}

/* ─── LIVE MATCH SCOREBOARD (Babak Gugur) ─── */
.knockout-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;align-items:start;}
@media(max-width:1100px){.knockout-grid{grid-template-columns:1fr;}}
.right-col{display:flex;flex-direction:column;gap:1.25rem;}

.scoreboard-card{background:linear-gradient(135deg,rgba(10,18,35,.95),rgba(15,27,52,.95));
  border:1px solid rgba(0,210,255,.15);border-radius:14px;padding:1.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 20px rgba(0,210,255,.03);}
.sb-hdr{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:.75rem;margin-bottom:1rem;}
.sb-live-tag{display:flex;align-items:center;gap:.4rem;color:var(--red);font-weight:700;font-size:.8rem;text-transform:uppercase;}
.sb-court{color:var(--muted);font-size:.8rem;}

.sb-body{display:flex;flex-direction:column;gap:.75rem;}
.sb-team-row{display:grid;grid-template-columns:3fr 1fr 1.5fr;align-items:center;}
.sb-team-info{display:flex;flex-direction:column;}
.sb-team-color{font-size:.68rem;font-weight:700;text-transform:uppercase;}
.sb-team-color.blue{color:var(--cyan);}
.sb-team-color.red{color:var(--red);}
.sb-team-names{font-size:1rem;font-weight:800;}
.sb-set-score{font-size:1.2rem;font-weight:bold;text-align:center;color:var(--muted);}
.sb-set-score.won{color:var(--green);}
.sb-games-score{font-family:var(--mono);font-size:2rem;font-weight:800;text-align:center;
  color:var(--green);text-shadow:0 0 15px rgba(155,240,11,.5);
  background:rgba(0,0,0,.4);border-radius:8px;padding:.2rem .5rem;}

.sb-points-row{display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.2);border-radius:8px;padding:.7rem 1rem;margin:.5rem 0;}
.sb-pt-lbl{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.sb-pt-lbl.active{color:var(--green);}
.sb-pt-nums{display:flex;align-items:center;gap:1rem;font-family:var(--mono);font-size:2.5rem;font-weight:bold;}
.sb-pt-num{min-width:70px;text-align:center;color:rgba(255,255,255,.7);}
.sb-pt-num.active{color:var(--green);text-shadow:0 0 15px rgba(155,240,11,.4);}
.sb-pt-div{font-size:1.2rem;color:var(--muted);}
.sb-footer{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);
  border-top:1px solid rgba(255,255,255,.05);padding-top:.75rem;margin-top:.75rem;}
.sb-duration{font-family:var(--mono);color:#fff;font-weight:bold;}

/* VS Banner */
.vs-banner{background:linear-gradient(135deg,rgba(8,15,30,.95),rgba(18,30,58,.9));
  border:1px solid var(--border);border-radius:14px;padding:1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;}
.vs-stage{font-size:.75rem;font-weight:700;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.vs-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem;}
.vs-player{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.vs-icon{width:3.5rem;height:3.5rem;border-radius:50%;background:#162238;border:2px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--muted);}
.vs-player.blue .vs-icon{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,210,255,.2);}
.vs-player.red .vs-icon{border-color:var(--red);box-shadow:0 0 12px rgba(255,51,75,.2);}
.vs-name{font-weight:800;font-size:.9rem;}
.vs-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;}
.vs-player.blue .vs-label{color:var(--cyan);}
.vs-player.red .vs-label{color:var(--red);}
.vs-mid{font-size:1.8rem;font-weight:900;color:var(--muted);flex-shrink:0;}

/* ─── RANKINGS TABLE ─── */
.rank-tbl{width:100%;border-collapse:collapse;font-size:.82rem;}
.rank-tbl th{color:var(--muted);font-weight:600;padding:.5rem .4rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;}
.rank-tbl td{padding:.5rem .4rem;border-bottom:1px solid rgba(255,255,255,.03);}
.rank-tbl tr:hover td{background:rgba(255,255,255,.02);}
.rbadge{width:1.4rem;height:1.4rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.7rem;}
.r1{background:var(--gold);color:#000;}
.r2{background:var(--silver);color:#000;}
.r3{background:#d97706;color:#fff;}
.rn{background:rgba(255,255,255,.07);color:var(--muted);}

/* ─── INFO / POSTER ─── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
@media(max-width:900px){.info-grid{grid-template-columns:1fr;}}
.poster{background:linear-gradient(135deg,rgba(8,15,30,.95),rgba(15,25,45,.95));
  border:1px solid var(--border);border-radius:16px;padding:2rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;}
.poster-logo{color:var(--red);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:3px;margin-bottom:.75rem;}
.poster-title{font-size:2.2rem;font-weight:900;font-style:italic;
  background:linear-gradient(90deg,#fff 0%,var(--green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.poster-sub{color:var(--cyan);font-size:.9rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-top:.25rem;}
.poster-std{background:var(--green);color:#000;font-weight:900;font-size:1.5rem;
  padding:.4rem 1.5rem;transform:rotate(-3deg);border-radius:4px;margin:1.25rem 0;}
.poster-details{display:flex;flex-direction:column;gap:.75rem;width:100%;margin-bottom:1.25rem;}
.poster-detail{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:.9rem;}
.poster-detail i{color:var(--cyan);}
.poster-stats{display:flex;gap:1rem;justify-content:center;}
.pstat{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:.65rem 1rem;text-align:center;}
.pstat-val{font-size:1.1rem;font-weight:800;color:var(--green);}
.pstat-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;margin-top:.15rem;}
.ball-deco{position:absolute;bottom:-35px;right:-35px;width:120px;height:120px;
  background:radial-gradient(circle at 30% 30%,#dcfc2a 0%,#87a003 70%);border-radius:50%;opacity:.5;
  box-shadow:0 0 30px rgba(135,160,3,.3),inset -8px -8px 20px rgba(0,0,0,.4);
  animation:spinBall 20s linear infinite;pointer-events:none;}
@keyframes spinBall{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ─── LEGEND ─── */
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--muted);padding:.5rem 0;}
.legend-item{display:flex;align-items:center;gap:.35rem;}
.ldot{width:0.5rem;height:0.5rem;border-radius:2px;}
.ldot-g{background:var(--green);box-shadow:0 0 4px var(--green);}
.ldot-b{background:var(--cyan);box-shadow:0 0 4px var(--cyan);}
.ldot-gr{background:rgba(255,255,255,.25);}

/* ─── ADMIN PAGE ─── */
.admin-header{background:linear-gradient(180deg,rgba(10,17,33,.95),rgba(6,9,19,.9));
  border-bottom:1px solid var(--border);padding:.75rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);}
.admin-header h1{font-size:1.1rem;font-weight:800;color:var(--cyan);}
.admin-nav-links{display:flex;gap:.75rem;align-items:center;}
.btn-back{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);
  padding:.45rem 1rem;border-radius:8px;font-weight:600;font-size:.82rem;cursor:pointer;
  text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:all var(--speed);}
.btn-back:hover{background:rgba(255,255,255,.1);color:var(--cyan);}

.admin-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:1.25rem;padding:1.25rem 1.5rem;}
@media(max-width:1100px){.admin-grid{grid-template-columns:1fr;}}
.admin-left,.admin-right{display:flex;flex-direction:column;gap:1.25rem;}

/* Admin Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;
  border:none;border-radius:7px;font-weight:600;font-size:.82rem;cursor:pointer;
  transition:all var(--speed);font-family:var(--font);}
.btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;}
.btn-primary:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px rgba(37,99,235,.3);transform:translateY(-1px);}
.btn-success{background:linear-gradient(135deg,var(--green),#4d7c0f);color:#000;}
.btn-success:hover{background:linear-gradient(135deg,#a3e635,var(--green));box-shadow:0 0 12px rgba(155,240,11,.3);}
.btn-danger{background:linear-gradient(135deg,var(--red),#b91c1c);color:#fff;}
.btn-danger:hover{background:linear-gradient(135deg,#ef4444,var(--red));box-shadow:0 0 12px rgba(255,51,75,.3);}
.btn-secondary{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);}
.btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff;}
.btn-sm{padding:.3rem .7rem;font-size:.75rem;}

/* Team Editor */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem;
  max-height:420px;overflow-y:auto;padding-right:.3rem;margin-bottom:1rem;}
.team-group-box{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:.75rem;}
.team-group-title{font-weight:800;font-size:.78rem;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;}
.team-input-wrap{margin-bottom:.4rem;}
.team-input-wrap label{font-size:.68rem;color:var(--muted);display:block;margin-bottom:2px;}
.field{background:rgba(0,0,0,.35);border:1px solid var(--border);color:#fff;
  border-radius:5px;padding:.35rem .5rem;font-size:.8rem;width:100%;font-family:var(--font);}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 5px rgba(0,210,255,.2);}
select.field option{background:#1e293b;}

/* Admin Match Filters */
.admin-filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.85rem;}

/* Admin Match List */
.admin-match-list{max-height:560px;overflow-y:auto;padding-right:.3rem;}
.admin-match-item{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
  border-radius:8px;padding:.7rem .9rem;margin-bottom:.55rem;
  display:flex;justify-content:space-between;align-items:center;transition:all var(--speed);}
.admin-match-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.admin-match-item.umpire-active{border-color:var(--cyan);background:rgba(0,210,255,.03);}
.ami-info{display:flex;flex-direction:column;gap:.2rem;}
.ami-title{font-size:.78rem;font-weight:800;display:flex;align-items:center;gap:.4rem;}
.ami-teams{font-size:.82rem;color:var(--muted);}
.ami-actions{display:flex;gap:.4rem;flex-shrink:0;}

/* Umpire Controller */
.umpire-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.umpire-team-box{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;padding:.9rem;text-align:center;display:flex;flex-direction:column;gap:.6rem;}
.umpire-team-box.serving{border-color:var(--green);box-shadow:inset 0 0 10px rgba(155,240,11,.07);}
.umpire-team-name{font-size:.85rem;font-weight:800;min-height:2rem;display:flex;align-items:center;justify-content:center;}
.btn-point{flex:1;padding:.5rem;background:linear-gradient(135deg,var(--green),#4d7c0f);
  color:#000;font-weight:800;font-size:.9rem;border:none;border-radius:6px;cursor:pointer;transition:all var(--speed);}
.btn-point:hover{background:linear-gradient(135deg,#aef92a,var(--green));}
.umpire-ctrl-row{grid-column:span 2;display:flex;gap:.6rem;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.05);padding-top:.85rem;margin-top:.2rem;}
@media(max-width:600px){.umpire-grid{grid-template-columns:1fr;}.umpire-ctrl-row{grid-column:span 1;flex-direction:column;}}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(5px);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--speed);}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-box{background:rgba(11,18,33,.98);border:1px solid rgba(255,255,255,.1);border-radius:14px;
  width:90%;max-width:460px;padding:1.75rem;position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(-15px);transition:transform var(--speed);}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-close{position:absolute;top:.9rem;right:.9rem;background:transparent;border:none;
  color:var(--muted);font-size:1.1rem;cursor:pointer;}
.modal-close:hover{color:#fff;}
.modal-title{font-size:1.1rem;font-weight:800;margin-bottom:1.1rem;
  border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.5rem;}
.form-row{display:flex;align-items:center;gap:.6rem;background:rgba(0,0,0,.2);
  padding:.5rem;border-radius:6px;margin-bottom:.7rem;}
.score-in{width:50px;background:rgba(0,0,0,.3);border:1px solid var(--border);color:#fff;
  border-radius:4px;padding:.35rem;font-size:.95rem;text-align:center;}
.score-in:focus{outline:none;border-color:var(--cyan);}
.sep{color:var(--muted);}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.3rem;}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.05);padding-top:1rem;}

/* Toast */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:rgba(11,18,33,.98);
  border:1px solid var(--green);border-radius:10px;padding:.7rem 1.2rem;
  color:var(--green);font-weight:600;font-size:.85rem;z-index:9999;
  transform:translateY(100px);opacity:0;transition:all .4s;box-shadow:0 4px 16px rgba(0,0,0,.4);}
.toast.show{transform:translateY(0);opacity:1;}


/* ChatGPT update: 3-column standings */
.group-stage-grid{
    display:grid !important;
    grid-template-columns:2.3fr 1fr !important;
    gap:24px;
    align-items:start;
}
.groups-container,.groups-2col{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:16px;
}
#panel-live-courts{max-width:420px;justify-self:end;}
@media (max-width: 1600px){
.groups-container,.groups-2col{grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width: 768px){
  .groups-container,.groups-2col{grid-template-columns:1fr!important;}
  .main-header {
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    align-items: stretch;
  }
  .brand {
    justify-content: space-between;
    width: 100%;
  }
  .nav-tabs {
    width: 100%;
    justify-content: space-around;
  }
  .tab-btn {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }
  .slogan {
    display: none !important;
  }
  .main-header > div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
  }
  .clock-panel {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    flex-grow: 1;
    text-align: center;
    justify-content: center;
  }
  .btn-back {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
  }
  .courts-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .group-stage-grid {
    grid-template-columns: 1fr !important;
  }
  #panel-live-courts {
    max-width: 100% !important;
    width: 100% !important;
  }
  .knockout-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-grid {
    grid-template-columns: 1fr !important;
  }
  .info-grid {
    grid-template-columns: 1fr !important;
  }
  .poster {
    padding: 1.5rem 1rem;
  }
  .poster-title {
    font-size: 1.6rem;
  }
  .vs-row {
    flex-direction: column;
    gap: 1rem;
  }
  .vs-mid {
    font-size: 1.4rem;
  }
  .sb-points-row {
    padding: 0.5rem;
  }
  .sb-pt-nums {
    font-size: 1.8rem;
  }
  .sb-pt-num {
    min-width: 50px;
  }
  .sb-games-score {
    font-size: 1.6rem;
  }
  .sb-team-names {
    font-size: 0.88rem;
  }
}