@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#030712;
  --bg2:#0a0f1e;
  --bg3:#0f1629;
  --surface:rgba(255,255,255,0.035);
  --surface2:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.12);
  --text:#f0f4ff;
  --muted:rgba(200,210,255,0.5);
  --muted2:rgba(200,210,255,0.28);
  --green:#00e5a0;
  --green2:#00b87a;
  --blue:#4f8ef7;
  --blue2:#2563eb;
  --purple:#a855f7;
  --gold:#fbbf24;
  --gold2:#f59e0b;
  --red:#f43f5e;
  --cyan:#22d3ee;
  --r:18px;
  --r2:12px;
  --glow-green:0 0 30px rgba(0,229,160,0.18);
  --glow-blue:0 0 30px rgba(79,142,247,0.18);
  --glow-gold:0 0 30px rgba(251,191,36,0.2);
}

.avatar-box {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  display: block;
}
.avatar-box.empty {
  border: 1px dashed rgba(255,255,255,0.2);
}
.avatar-hd { width: 42px; height: 42px; margin-right: 6px; }

/* اصلاح جدول جوایز برای جا دادن ستون عکس */
.psum-header {
  display: grid;
  grid-template-columns: 36px 1fr 100px 90px;
  padding: 10px 18px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  align-items: center;
}

.psum-row {
  display: grid;
  grid-template-columns: 36px 1fr 100px 90px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 13px;
  gap: 8px;
  transition: background .15s;
}

html { scroll-behavior: smooth; }

body{
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  direction:rtl;
  overflow-x:hidden;
}

/* ── ANIMATED BACKGROUND ── */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(79,142,247,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(0,229,160,0.06) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(168,85,247,0.04) 0%,transparent 50%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.012'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  opacity:0.5;
}

/* ── HEADER ── */
.header{
  background:rgba(3,7,18,0.85);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(79,142,247,0.15);
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 1px 0 rgba(79,142,247,0.1), 0 4px 24px rgba(0,0,0,0.4);
}
.header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:0.01em}
.logo-icon{font-size:24px;filter:drop-shadow(0 0 8px rgba(251,191,36,0.5))}
.logo-icon-img{height:30px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(251,191,36,0.45))}
.logo-text{background:linear-gradient(135deg,#fbbf24,#f0f4ff 60%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.user-pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,229,160,0.07);
  border:1px solid rgba(0,229,160,0.2);
  border-radius:999px;padding:6px 16px;
  font-size:12px;
  box-shadow:0 0 16px rgba(0,229,160,0.08);
  transition:all .3s;
}
.user-pill:hover{background:rgba(0,229,160,0.12);border-color:rgba(0,229,160,0.3)}
.user-score{color:var(--green);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.badge-admin{background:linear-gradient(135deg,var(--red),#e11d48);color:#fff;font-size:9px;padding:2px 7px;border-radius:8px;font-weight:700;letter-spacing:0.05em}
.admin-icon{font-size:15px;line-height:1;display:inline-flex;align-items:center}
.btn-logout{
  padding:5px;
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  opacity:0.85;
}
.btn-logout:hover{opacity:1;transform:scale(1.1)}

/* ── MAIN ── */
.main{max-width:960px;margin:0 auto;padding:170px 16px 22px;position:relative;z-index:1}

/* ── NAV ── */
.nav{
  position:fixed;
  top:60px;
  left:0;
  right:0;
  width:100%;
  display:flex;
  gap:2px;
  margin:0;
  padding:6px;
  background:rgba(3,7,18,0.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(79,142,247,0.15);
  z-index:150;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.nav-btn{
  flex:1;
  height:95px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0;
  border-radius:10px;
  font-size:13px;font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  position:relative;
  overflow:hidden;
}
.nav-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  opacity:0;
  transition:opacity .25s;
}
.nav-btn:hover{color:var(--text);border-color:var(--border2);transform:translateY(-1px)}
.nav-btn.active{
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 20px rgba(79,142,247,0.35);
  transform:translateY(-1px);
}
.nav-btn span{position:relative;z-index:1}
.nav-icon{font-size:16px;position:relative;z-index:1}
.nav-label{position:relative;z-index:1;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}

/* ── CARDS ── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  backdrop-filter:blur(8px);
  transition:border-color .2s;
}
.card+.card{margin-top:14px}
.card-title{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}

/* ── LOGIN ── */
#loginPage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  position:relative;
}
#loginPage::before{
  content:'2026';
  position:absolute;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(120px,25vw,300px);
  color:rgba(255,255,255,0.02);
  letter-spacing:-0.05em;
  pointer-events:none;
  z-index:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  user-select:none;
}
.login-box{
  width:440px;
  max-width:100%;
  background:rgba(10,15,30,0.8);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  border:1px solid rgba(79,142,247,0.2);
  border-radius:28px;
  padding:48px 40px;
  box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset, var(--glow-blue);
  position:relative;
  z-index:1;
  animation:loginEntrance .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes loginEntrance{from{opacity:0;transform:translateY(32px) scale(0.96)}to{opacity:1;transform:none}}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo .emoji{
  font-size:64px;
  display:block;
  margin-bottom:10px;
  filter:drop-shadow(0 0 20px rgba(251,191,36,0.5));
  animation:floatBall 3s ease-in-out infinite;
}
@keyframes floatBall{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.login-emoji-img{
  height:88px;width:auto;display:block;margin:0 auto 12px;
  filter:drop-shadow(0 0 20px rgba(251,191,36,0.45));
  animation:floatBall 3s ease-in-out infinite;
}
.login-logo h1{font-size:22px;font-weight:800;color:var(--text);letter-spacing:0.01em}
.login-logo p{color:var(--muted);font-size:13px;margin-top:6px}
.tab-row{
  display:flex;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:14px;
  padding:5px;
  margin-bottom:26px;
}
.tab-btn{
  flex:1;padding:10px 0;
  border:none;border-radius:10px;
  cursor:pointer;
  font-size:14px;font-weight:600;
  font-family:inherit;
  transition:all .25s;
  background:transparent;
  color:var(--muted);
}
.tab-btn.active{
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  color:#fff;
  box-shadow:0 4px 14px rgba(79,142,247,0.3);
}
.form-input{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  outline:none;
  text-align:right;
  margin-bottom:10px;
  transition:all .25s;
}
.form-input:focus{
  border-color:rgba(79,142,247,0.5);
  background:rgba(79,142,247,0.06);
  box-shadow:0 0 0 3px rgba(79,142,247,0.1);
}
.btn-primary{
  width:100%;padding:15px;
  background:linear-gradient(135deg,var(--green2),var(--green));
  border:none;border-radius:14px;
  color:#fff;font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;
  box-shadow:0 8px 28px rgba(0,229,160,0.3);
  transition:all .2s;
  margin-top:4px;
  letter-spacing:0.02em;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,229,160,0.4)}
.btn-primary:active{transform:translateY(0)}
.err-msg{
  color:#fb7185;
  font-size:13px;text-align:center;
  background:rgba(244,63,94,0.08);
  border:1px solid rgba(244,63,94,0.15);
  border-radius:10px;padding:9px 14px;
  margin-bottom:12px;
}
.hint{color:var(--muted2);font-size:11px;text-align:center;margin-top:18px}

/* ── CUSTOM SELECT ── */
.filter-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px;
  padding-left: 32px;
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
}
.custom-select:focus {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f8ef7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.custom-select option {
  background: var(--bg2);
  color: var(--text);
  font-family: inherit;
}

/* ── DATE DIVIDER ── */
.date-div{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.date-div span{
  font-size:12px;color:var(--muted);
  white-space:nowrap;
  background:var(--bg2);
  padding:3px 12px;
  border-radius:999px;
  border:1px solid var(--border);
}
.date-div::before,.date-div::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* ── MATCH CARD ── */
.match-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:10px;
  transition:all .25s;
  position:relative;
  overflow:hidden;
}
.match-card::before{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:3px;
  background:transparent;
  transition:background .25s;
}
.match-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.match-card.has-result{border-color:rgba(0,229,160,0.18)}
.match-card.has-result::before{background:linear-gradient(180deg,var(--green),transparent)}
.match-card.is-past{border-color:rgba(244,63,94,0.12)}
.match-card.is-past::before{background:linear-gradient(180deg,var(--red),transparent)}
.match-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;font-size:11px;color:var(--muted);
  flex-wrap:wrap;gap:4px;
}
.match-label{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  padding:3px 10px;border-radius:999px;
  font-weight:600;
}
.match-label.knockout{
  color:var(--gold);
  background:rgba(245,158,11,0.1);
  border-color:rgba(245,158,11,0.2);
}
.countdown{
  color:var(--gold);font-weight:700;
  font-variant-numeric:tabular-nums;
  background:rgba(251,191,36,0.1);
  border:1px solid rgba(251,191,36,0.2);
  padding:2px 8px;border-radius:8px;
  font-size:11px;
}
.teams-row{display:flex;align-items:center;gap:10px}
.team-side{flex:1;display:flex;align-items:center;gap:8px}
.team-side.home{justify-content:flex-end}
.team-name{font-size:13px;font-weight:700;letter-spacing:0.01em}
.flag{font-size:28px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.score-inp{
  width:46px;padding:8px 4px;
  text-align:center;
  background:rgba(79,142,247,0.1);
  border:1px solid rgba(79,142,247,0.3);
  border-radius:10px;
  color:#fff;font-size:18px;font-weight:700;
  font-family:inherit;outline:none;
  -moz-appearance:textfield;
  transition:all .2s;
}
.score-inp:focus{border-color:rgba(79,142,247,0.6);box-shadow:0 0 0 3px rgba(79,142,247,0.15);background:rgba(79,142,247,0.15)}
.score-inp::-webkit-inner-spin-button{-webkit-appearance:none}
.score-inp:disabled{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06);color:rgba(255,255,255,0.25)}
.vs{color:var(--muted2);font-weight:700;font-size:14px}
.result-row{
  margin-top:10px;
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.final-score{
  font-size:22px;font-weight:800;
  color:var(--green);
  text-shadow:0 0 12px rgba(0,229,160,0.3);
}
.pts-badge{font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px}
.pts-6{color:#00e5a0;background:rgba(0,229,160,0.12);border:1px solid rgba(0,229,160,0.25)}
.pts-3{color:#fbbf24;background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.25)}
.pts-1{color:#818cf8;background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.2)}
.actions-row{
  margin-top:12px;
  display:flex;gap:7px;
  justify-content:center;
  flex-wrap:wrap;align-items:center;
}
.btn-small{
  padding:7px 18px;border-radius:999px;
  font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  border:none;transition:all .2s;
  letter-spacing:0.02em;
}
.btn-predict{
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  color:#fff;
  box-shadow:0 4px 14px rgba(79,142,247,0.3);
}
.btn-predict:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,142,247,0.4)}
.btn-saved{
  background:linear-gradient(135deg,var(--green2),var(--green));
  color:#fff;
  box-shadow:0 4px 14px rgba(0,229,160,0.25);
}
.btn-saved:hover{transform:translateY(-1px)}
.pred-pill{
  font-size:12px;font-weight:600;
  color:var(--blue);
  background:rgba(79,142,247,0.1);
  border:1px solid rgba(79,142,247,0.2);
  padding:5px 14px;border-radius:999px;
  display:flex;align-items:center;gap:5px;
}
.admin-result-row{display:flex;align-items:center;gap:5px;margin-top:4px}
.admin-inp{
  width:36px;padding:5px;text-align:center;
  background:rgba(244,63,94,0.08);
  border:1px solid rgba(244,63,94,0.2);
  border-radius:8px;color:#fb7185;
  font-size:12px;font-family:inherit;outline:none;
  -moz-appearance:textfield;
}
.admin-inp::-webkit-inner-spin-button{-webkit-appearance:none}
.btn-admin-set{
  padding:5px 12px;
  background:rgba(244,63,94,0.12);
  border:1px solid rgba(244,63,94,0.25);
  border-radius:8px;color:#fb7185;
  font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.btn-admin-set:hover{background:rgba(244,63,94,0.2)}
.btn-admin-reset{
  padding:4px 10px;
  background:rgba(251,191,36,0.08);
  border:1px solid rgba(251,191,36,0.2);
  border-radius:6px;color:#fbbf24;
  font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.btn-admin-del{
  padding:4px 10px;
  background:rgba(244,63,94,0.07);
  border:1px solid rgba(244,63,94,0.15);
  border-radius:6px;color:#f87171;
  font-size:10px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.admin-team-inp{
  width:74px;padding:5px 7px;
  background:rgba(79,142,247,0.08);
  border:1px solid rgba(79,142,247,0.2);
  border-radius:7px;color:#93c5fd;
  font-size:11px;font-family:inherit;
  outline:none;text-align:right;
}

/* ── REACTIONS ── */
.reactions-row{margin-top:12px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.react-btn{
  padding:4px 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:999px;cursor:pointer;
  font-size:15px;display:flex;align-items:center;gap:4px;
  transition:all .15s;font-family:inherit;
}
.react-btn:hover{background:rgba(255,255,255,0.1);transform:scale(1.08);border-color:rgba(255,255,255,0.15)}
.react-cnt{font-size:11px;color:var(--muted);font-weight:600}
.comment-toggle{
  margin-right:auto;padding:4px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:999px;color:var(--muted);
  font-size:11px;cursor:pointer;
  font-family:inherit;transition:all .2s;
  font-weight:600;
}
.comment-toggle:hover{background:rgba(255,255,255,0.08);color:var(--text)}

/* ── COMMENTS ── */
.comments-box{margin-top:12px;border-top:1px solid rgba(255,255,255,0.05);padding-top:12px}
.comments-list-wrap [id^="clist_"]:not(:empty){margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.05)}
.comment-item{display:flex;gap:9px;margin-bottom:8px}
.comment-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 8px rgba(79,142,247,0.3);
  object-fit:cover;
}
img.comment-avatar{background:none}
.comment-body{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:10px;padding:6px 12px;flex:1;
}
.comment-user{font-size:11px;color:#93c5fd;font-weight:700}
.comment-text{font-size:12px;color:rgba(255,255,255,0.65);margin-top:1px}
.comment-form{display:flex;gap:7px;margin-top:8px}
.comment-input{
  flex:1;padding:8px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:10px;color:var(--text);
  font-size:12px;font-family:inherit;
  outline:none;text-align:right;
  transition:all .2s;
}
.comment-input:focus{border-color:rgba(79,142,247,0.4);background:rgba(79,142,247,0.05)}
.btn-send{
  padding:8px 16px;
  background:var(--blue2);
  border:none;border-radius:10px;
  color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.btn-send:hover{background:var(--blue)}

/* ── LEGEND ── */
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.legend-item{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:10px;
  font-size:11px;font-weight:600;
  border:1px solid transparent;
}

/* ── LEADERBOARD ── */
.lb-row{
  display:flex;align-items:center;
  padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:all .15s;
}
.lb-row:hover{background:rgba(255,255,255,0.03)}
.lb-row.me{
  background:rgba(79,142,247,0.07);
  border-right:2px solid var(--blue);
}
.lb-rank{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;flex-shrink:0;margin-left:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.lb-info{flex:1}
.lb-name{font-weight:700;font-size:14px}
.lb-sub{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lb-score{
  font-size:20px;font-weight:800;
  color:var(--green);
  text-shadow:0 0 12px rgba(0,229,160,0.25);
}

/* ── ACHIEVEMENTS MENU ── */
.ach-wrap{position:relative;display:inline-flex}
.ach-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  background:rgba(245,158,11,0.1);
  border:1px solid rgba(245,158,11,0.25);
  color:var(--gold);font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s;
}
.ach-btn:hover{background:rgba(245,158,11,0.18)}
.ach-btn.active{background:rgba(245,158,11,0.22);border-color:rgba(245,158,11,0.5)}
.ach-count{
  background:rgba(245,158,11,0.3);color:#fde68a;
  border-radius:999px;min-width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;padding:0 4px;
}
.ach-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:50;
  min-width:190px;max-height:260px;overflow-y:auto;
  background:#1a1d29;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  padding:6px;
  display:none;
}
.ach-menu.open{display:block;animation:achFade .12s ease}
@keyframes achFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ach-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:8px;
  font-size:12px;color:rgba(255,255,255,0.85);
}
.ach-item:hover{background:rgba(255,255,255,0.04)}
.ach-item.shame{color:#fca5a5}
.ach-ico{font-size:16px;flex-shrink:0}
.ach-name{font-weight:600}

/* ── PODIUM (سکوی قهرمانی) ── */
.podium{
  display:flex;justify-content:center;align-items:flex-end;
  gap:10px;padding:24px 12px 0;margin-bottom:14px;
}
.podium-spot{
  display:flex;flex-direction:column;align-items:center;
  flex:1;max-width:120px;
}
.podium-av-wrap{position:relative;margin-bottom:8px}
.podium-av{
  border-radius:50%;object-fit:cover;display:block;
  background:#1a1d29;
}
.podium-av.empty{border:1px dashed rgba(255,255,255,0.2)}
.podium-1 .podium-av{width:72px;height:72px;border:3px solid #f59e0b;box-shadow:0 0 18px rgba(245,158,11,0.45)}
.podium-2 .podium-av{width:60px;height:60px;border:3px solid #94a3b8;box-shadow:0 0 14px rgba(148,163,184,0.35)}
.podium-3 .podium-av{width:60px;height:60px;border:3px solid #b45309;box-shadow:0 0 14px rgba(180,83,9,0.35)}
.podium-medal{
  position:absolute;bottom:-6px;right:-4px;
  font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.podium-name{
  font-size:12px;font-weight:700;color:#fff;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;
}
.podium-val{font-size:12px;font-weight:800;margin-top:2px}
.podium-1 .podium-val{color:var(--gold)}
.podium-2 .podium-val{color:#cbd5e1}
.podium-3 .podium-val{color:#fcd34d}
.podium-base{
  width:100%;border-radius:10px 10px 0 0;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:8px;font-size:20px;font-weight:900;color:rgba(0,0,0,0.45);
  margin-top:8px;
}
.podium-1 .podium-base{height:78px;background:linear-gradient(180deg,#fde047,#f59e0b)}
.podium-2 .podium-base{height:58px;background:linear-gradient(180deg,#cbd5e1,#64748b)}
.podium-3 .podium-base{height:44px;background:linear-gradient(180deg,#d97706,#92400e)}

/* ── CHAMPION ── */
.team-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.team-pick-btn{
  padding:8px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:999px;
  color:rgba(255,255,255,0.65);
  font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.team-pick-btn:hover{
  background:rgba(251,191,36,0.1);
  border-color:rgba(251,191,36,0.35);
  color:var(--gold);
  transform:scale(1.04);
}
.champ-chosen{text-align:center;padding:28px 0}
.champ-logo-img{height:64px;width:auto;display:inline-block;filter:drop-shadow(0 0 14px rgba(251,191,36,0.4))}
.team-pick-btn.selected{border-color:var(--gold);background:rgba(245,158,11,0.15);color:var(--gold)}
.champ-countdown{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);border-radius:12px;padding:10px;margin-bottom:14px}
.champ-countdown .cd-label{font-size:12px;color:var(--muted)}
.champ-countdown .cd-box{font-size:14px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bar-track{flex:2;height:7px;background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden}
.bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue2),var(--purple));
  border-radius:4px;transition:width .6s cubic-bezier(.34,1.56,.64,1);
}

/* ── BADGES ── */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.badge-card{
  border-radius:18px;padding:22px 16px;
  text-align:center;
  transition:all .25s;
  position:relative;
  overflow:hidden;
}
.badge-card::before{
  content:'';position:absolute;
  inset:0;border-radius:18px;
  opacity:0;transition:opacity .25s;
}
.badge-card:hover{transform:translateY(-3px)}
.badge-card.earned{
  background:rgba(79,142,247,0.08);
  border:1px solid rgba(79,142,247,0.22);
  box-shadow:0 4px 20px rgba(79,142,247,0.1);
}
.badge-card.earned:hover{box-shadow:0 8px 28px rgba(79,142,247,0.2)}
.badge-card.shame-card.earned{
  background:rgba(244,63,94,0.07);
  border:1px solid rgba(244,63,94,0.2);
  box-shadow:0 4px 20px rgba(244,63,94,0.1);
}
.badge-card.shame-card.earned:hover{box-shadow:0 8px 28px rgba(244,63,94,0.18)}
.badge-card.locked{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  opacity:.4;
}
.badge-icon{
  font-size:44px;margin-bottom:12px;
  display:block;line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transition:transform .2s;
}
.badge-card:hover .badge-icon{transform:scale(1.1) rotate(-3deg)}
.badge-name{font-size:13px;font-weight:700;color:#93c5fd;margin-bottom:6px}
.badge-card.shame-card .badge-name{color:#fda4af}
.badge-desc{font-size:11px;color:var(--muted);line-height:1.5}
.badge-earned-tag{margin-top:10px;font-size:11px;color:var(--green);font-weight:700}
.badge-card.shame-card .badge-earned-tag{color:var(--red)}
.shame-section-title{
  font-size:14px;font-weight:700;
  color:#fda4af;
  margin:24px 0 14px;
  display:flex;align-items:center;gap:8px;
}
.shame-section-title::before,.shame-section-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,63,94,0.3),transparent);
}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.stat-card{
  border-radius:16px;padding:18px 14px;
  text-align:center;transition:all .2s;
  border:1px solid var(--border);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.stat-icon{font-size:26px;margin-bottom:8px}
.stat-val{font-size:24px;font-weight:800}
.stat-label{font-size:11px;color:var(--muted);margin-top:5px;font-weight:500}
.score-bars{display:flex;align-items:flex-end;gap:3px;height:80px}
.score-bar{flex:0 0 10px;border-radius:4px 4px 0 0;min-height:4px;transition:height .5s}
.pred-stat-row{margin-bottom:12px}
.pred-stat-label{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.pred-bar-row{display:flex;height:9px;border-radius:5px;overflow:hidden;gap:1px}

/* ── ADMIN ── */
.admin-list{max-height:380px;overflow-y:auto}
.admin-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:10px;margin-bottom:6px;
  flex-wrap:wrap;gap:6px;
  transition:border-color .2s;
}
.admin-item:hover{border-color:var(--border2)}
.add-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.add-match-grid .form-input{margin-bottom:0}
.field-label{font-size:11px;color:var(--muted);display:block;margin-bottom:4px;font-weight:600}
.btn-green{
  padding:10px 20px;
  background:rgba(0,229,160,0.1);
  border:1px solid rgba(0,229,160,0.25);
  border-radius:12px;color:var(--green);
  font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.btn-green:hover{background:rgba(0,229,160,0.18)}
.btn-save{
  width:100%;padding:11px;
  background:linear-gradient(135deg,var(--green2),var(--green));
  border:none;border-radius:12px;
  color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;
  margin-top:8px;
  box-shadow:0 4px 16px rgba(0,229,160,0.25);
}
.btn-cancel{
  width:100%;padding:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;color:var(--muted);
  font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;margin-top:5px;
}
.weekly-row{
  display:flex;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:13px;
}

/* ── PROFILE ── */
.profile-row{
  display:flex;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);
}
.profile-key{color:var(--muted);font-size:13px;font-weight:500}
.profile-val{font-weight:700;font-size:13px}

/* ── LOADING / TOAST ── */
.loading{text-align:center;padding:48px;color:var(--muted);font-size:13px}
.loading::before{
  content:'⚽';
  display:block;font-size:32px;
  margin-bottom:12px;
  animation:spinBall 1.2s linear infinite;
}
@keyframes spinBall{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%);
  background:rgba(15,22,41,0.95);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:13px 24px;
  font-size:13px;font-weight:700;
  z-index:999;
  animation:toastIn .4s cubic-bezier(.34,1.56,.64,1) both;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(0.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* ── PRIZE ── */
.prize-banner{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,rgba(251,191,36,0.1),rgba(245,158,11,0.05));
  border:1px solid rgba(251,191,36,0.22);
  border-radius:12px;padding:8px 14px;
  margin-top:10px;font-size:13px;flex-wrap:wrap;
  box-shadow:0 2px 12px rgba(251,191,36,0.08);
}
.prize-amount{font-size:15px;font-weight:800;color:var(--gold)}
.prize-breakdown-wrap{
  margin-top:10px;
  border:1px solid rgba(251,191,36,0.16);
  border-radius:14px;overflow:hidden;
  background:rgba(251,191,36,0.03);
}
.prize-breakdown-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  background:rgba(251,191,36,0.07);
  border-bottom:1px solid rgba(251,191,36,0.12);
  font-size:12px;font-weight:700;color:#fcd34d;
}
.prize-breakdown-header{
  display:grid;grid-template-columns:1fr 70px 60px 90px;
  padding:7px 16px;border-bottom:1px solid var(--border);
  font-size:10px;color:var(--muted);font-weight:600;gap:4px;
}
.prize-row{
  display:grid;grid-template-columns:1fr 70px 60px 90px;
  align-items:center;padding:8px 16px;
  border-bottom:1px solid rgba(255,255,255,0.025);
  font-size:12px;gap:4px;transition:background .15s;
}
.prize-row:last-child{border-bottom:none}
.prize-row.me-row{background:rgba(79,142,247,0.08)}
.prize-row:hover{background:rgba(255,255,255,0.03)}
.payout-val{font-weight:700;color:var(--gold);text-align:left}
.prize-footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;
  padding:8px 16px;font-size:11px;color:var(--muted);
  background:rgba(0,0,0,0.15);border-top:1px solid var(--border);
}
.admin-prize-row{display:flex;align-items:center;gap:7px;margin-top:8px}
.prize-inp{
  flex:1;padding:7px 12px;
  background:rgba(251,191,36,0.06);
  border:1px solid rgba(251,191,36,0.2);
  border-radius:10px;color:#fcd34d;
  font-size:12px;font-family:inherit;
  outline:none;text-align:right;
}
.btn-set-prize{
  padding:6px 14px;
  background:rgba(251,191,36,0.12);
  border:1px solid rgba(251,191,36,0.28);
  border-radius:10px;color:var(--gold);
  font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
/* ── PRIZE SUMMARY PAGE ── */
.psum-header{
  display:grid;grid-template-columns:36px 1fr 100px 90px;
  padding:8px 18px;font-size:10px;color:var(--muted);
  font-weight:700;border-bottom:1px solid var(--border);gap:8px;
  align-items:center;
}
.psum-row{
  display:grid;grid-template-columns:36px 1fr 100px 90px;
  align-items:center;padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:13px;gap:8px;transition:background .15s;
}
.psum-row.me-row{background:rgba(79,142,247,0.07)}
.psum-row:hover{background:rgba(255,255,255,0.03)}
.psum-rank{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;flex-shrink:0;
}
.psum-payout{font-weight:800;color:var(--gold);text-align:left}
.psum-score{font-weight:600;color:#93c5fd;text-align:left}

/* ── SECTION HEADERS ── */
.section-title{
  font-size:18px;font-weight:800;
  margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.section-sub{color:var(--muted);font-size:13px;margin-bottom:20px}

.hidden{display:none!important}

/* ── MATCH EDIT PAGE ── */
.edit-page-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;
}
.btn-back{
  padding:8px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border2);
  border-radius:12px;
  color:var(--muted);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .2s;display:flex;align-items:center;gap:5px;
}
.btn-back:hover{background:rgba(255,255,255,0.1);color:var(--text)}
.ko-match-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:10px;
  transition:border-color .2s;
}
.ko-match-card:hover{border-color:var(--border2)}
.ko-match-card.tbd{border-color:rgba(251,191,36,0.2);background:rgba(251,191,36,0.03)}
.ko-stage-label{
  font-size:10px;font-weight:700;letter-spacing:0.08em;
  color:var(--gold);
  background:rgba(251,191,36,0.1);
  border:1px solid rgba(251,191,36,0.2);
  padding:2px 10px;border-radius:999px;
  display:inline-block;margin-bottom:10px;
}
.ko-teams-row{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.ko-team{flex:1;display:flex;flex-direction:column;gap:4px}
.ko-team.right{align-items:flex-end;text-align:right}
.ko-team.left{align-items:flex-start}
.ko-flag-inp{
  width:54px;padding:6px;text-align:center;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-size:20px;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.ko-flag-inp:focus{border-color:rgba(79,142,247,0.5)}
.ko-name-inp{
  width:100%;padding:7px 10px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-size:13px;font-family:inherit;
  outline:none;text-align:right;
  transition:border-color .2s;
}
.ko-name-inp:focus{border-color:rgba(79,142,247,0.5)}
.ko-vs{color:var(--muted2);font-size:13px;font-weight:700;flex-shrink:0}
.ko-meta-row{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.ko-meta-inp{
  flex:1;min-width:100px;padding:7px 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-size:12px;font-family:inherit;
  outline:none;text-align:right;
  transition:border-color .2s;
}
.ko-meta-inp:focus{border-color:rgba(79,142,247,0.5)}
.ko-save-btn{
  width:100%;padding:9px;
  background:linear-gradient(135deg,var(--blue2),var(--purple));
  border:none;border-radius:10px;
  color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(79,142,247,0.3);
}
.ko-save-btn:hover{opacity:.88;transform:translateY(-1px)}
.ko-saved{border-color:rgba(0,229,160,0.35)!important;background:rgba(0,229,160,0.04)!important}
.tbd-badge{
  font-size:10px;color:var(--gold);
  background:rgba(251,191,36,0.1);
  border:1px solid rgba(251,191,36,0.2);
  padding:1px 8px;border-radius:6px;font-weight:700;
}
.stage-divider{
  font-size:12px;font-weight:700;
  color:var(--muted);
  margin:18px 0 10px;
  display:flex;align-items:center;gap:10px;
}
.stage-divider::before,.stage-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}