/* ─────────────────────────────────────────────────────────────────
   FANTAPROF — RESTYLING TOTALE v3.0
   Design: Dark Brutalist Premium
   Palette: #0f0f0f bg · #FFE600 accent · #FAFAF0 text
   Fonts: Bebas Neue (display) + DM Sans (body)
   By NeW Studios
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,900;1,9..40,400&family=Bebas+Neue&display=swap');

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

:root {
  --y:      #FFE600;
  --bk:     #0f0f0f;
  --w:      #FAFAF0;
  --g:      #1c1c1c;
  --card:   #141414;
  --border: #2a2a2a;
  --red:    #FF3B3B;
  --green:  #22C55E;
  --purple: #9B5DE5;
  --blue:   #00BFFF;
  --muted:  #555;
  --text2:  #888;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', 'Nunito', sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--bk);
  color: var(--w);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100vh; }
::selection { background: var(--y); color: #000; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--y); }

/* ── BUTTONS ── */
.btn {
  cursor: pointer; border: none;
  font-family: var(--font-body); font-weight: 800; font-size: .78rem;
  padding: 9px 18px; text-transform: uppercase; letter-spacing: 1.2px;
  transition: transform .12s, box-shadow .12s, background .12s;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative; overflow: hidden;
}
.btn:active { transform: translate(2px,2px) !important; box-shadow: none !important; }

.btn-y { background: var(--y); color: #000; box-shadow: 4px 4px 0 #a89a00; font-weight: 900; }
.btn-y::after {
  content:''; position: absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .45s;
}
.btn-y:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #a89a00; }
.btn-y:hover::after { transform: translateX(100%); }

.btn-bk     { background: #1a1a1a; color: var(--w); border: 1.5px solid var(--border); }
.btn-bk:hover { background: #252525; border-color: #444; }
.btn-red    { background: var(--red); color: #fff; box-shadow: 4px 4px 0 #900; }
.btn-red:hover { transform: translate(-2px,-2px); }
.btn-green  { background: var(--green); color: #000; box-shadow: 4px 4px 0 #0a4; }
.btn-green:hover { transform: translate(-2px,-2px); }
.btn-ghost  { background: transparent; color: var(--w); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--w); }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 4px 4px 0 #5b21b6; }
.btn-purple:hover { transform: translate(-2px,-2px); }
.btn-outline-y { background: transparent; color: var(--y); border: 2px solid var(--y); }
.btn-outline-y:hover { background: var(--y); color: #000; }
.btn-lg { padding: 13px 28px; font-size: .9rem; }
.btn-sm { padding: 5px 12px; font-size: .7rem; }

/* ── HEADER ── */
.header {
  background: rgba(11,11,11,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--y); padding: 0 20px; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.logo { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 4px; color: var(--y); cursor: pointer; user-select: none; transition: opacity .15s; }
.logo:hover { opacity: .8; }
.logo span { color: #000; background: var(--y); padding: 0 5px; }
.hdr-r { display: flex; gap: 6px; align-items: center; }
.dm-toggle {
  background: transparent; border: 1.5px solid var(--border); color: var(--w);
  width: 32px; height: 32px; cursor: pointer; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.dm-toggle:hover { border-color: var(--y); background: #1a1a1a; }

/* ── PAGE ── */
.page { padding: 28px 18px 52px; max-width: 940px; margin: 0 auto; animation: fadeUp .28s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.pg-title { font-family: var(--font-display); font-size: 2.8rem; letter-spacing: 2px; line-height: 1; margin-bottom: 6px; color: var(--w); }
.pg-title span { background: var(--y); color: #000; padding: 2px 8px; }
.subtitle { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .8px; margin-bottom: 24px; text-transform: uppercase; }

.sec-title {
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 2px;
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  color: var(--w); display: flex; align-items: center; gap: 8px;
}
.sec-title::before { content:''; display:inline-block; width:3px; height:18px; background:var(--y); flex-shrink:0; }

.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
.row     { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.f1      { flex:1; min-width:0; }
.back-link {
  cursor:pointer; font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:1.2px; margin-bottom:18px; display:inline-flex; align-items:center; gap:6px;
  color:var(--muted); transition:color .15s;
}
.back-link:hover { color:var(--y); }

/* ── BADGES ── */
.badge { font-size:.66rem; font-weight:800; padding:3px 9px; text-transform:uppercase; letter-spacing:.8px; display:inline-block; }
.by { background:var(--y); color:#000; }
.bb { background:#1e1e1e; color:var(--y); border:1px solid #333; }
.bg { background:var(--green); color:#000; }
.br { background:var(--red); color:#fff; }
.bp { background:var(--purple); color:#fff; }

/* ── FORMS ── */
.fg { margin-bottom:14px; }
.fg label { display:block; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; color:var(--text2); }
.fp-inp {
  width:100%; padding:10px 13px; border:1.5px solid var(--border);
  font-family:var(--font-body); font-size:.9rem;
  background:#1a1a1a; color:var(--w); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.fp-inp::placeholder { color:#383838; }
.fp-inp:focus { border-color:var(--y); box-shadow:0 0 0 3px rgba(255,230,0,.1); }
.fp-ta {
  width:100%; padding:10px 13px; border:1.5px solid var(--border);
  font-family:var(--font-body); font-size:.9rem;
  background:#1a1a1a; color:var(--w); outline:none; resize:vertical; min-height:80px;
}
.fp-ta:focus { border-color:var(--y); }
select { width:100%; padding:10px 13px; border:1.5px solid var(--border); font-family:var(--font-body); font-size:.9rem; background:#1a1a1a; color:var(--w); outline:none; cursor:pointer; }
select:focus { border-color:var(--y); }
.err-box { background:rgba(255,59,59,.07); border:1.5px solid var(--red); border-left:4px solid var(--red); color:var(--red); padding:10px 13px; font-size:.8rem; font-weight:700; margin-bottom:14px; }

/* ── AUTH ── */
.auth-page {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 58px); padding:40px 16px;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,230,0,.07) 0%, transparent 70%), #0f0f0f;
  position:relative; overflow:hidden;
}
.auth-page::after {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255,230,0,.022) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,230,0,.022) 40px);
  pointer-events:none;
}
.auth-brand { font-family:var(--font-display); font-size:3.2rem; letter-spacing:6px; color:var(--w); margin-bottom:4px; animation:fadeUp .3s ease both; position:relative; z-index:1; cursor:pointer; }
.auth-brand span { background:var(--y); color:#000; padding:0 8px; }
.auth-tagline { font-size:.66rem; font-weight:700; letter-spacing:3px; color:var(--muted); text-transform:uppercase; margin-bottom:32px; animation:fadeUp .3s .06s ease both; position:relative; z-index:1; }
.auth-card {
  background:#141414; border:1px solid var(--border); border-top:3px solid var(--y);
  box-shadow:0 32px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,230,0,.04);
  padding:36px 32px; width:100%; max-width:420px;
  animation:cardPop .4s cubic-bezier(.34,1.56,.64,1) both; position:relative; z-index:1;
}
@keyframes cardPop { from{transform:scale(.92) translateY(20px);opacity:0;} to{transform:none;opacity:1;} }
.auth-title    { font-family:var(--font-display); font-size:2rem; letter-spacing:2px; margin-bottom:4px; color:var(--w); }
.auth-subtitle { font-size:.76rem; font-weight:500; color:var(--muted); margin-bottom:20px; }
.auth-divider  { width:40px; height:3px; background:var(--y); margin-bottom:22px; }
.auth-sw       { margin-top:18px; text-align:center; font-size:.8rem; color:var(--text2); }
.auth-sw a     { font-weight:800; text-decoration:underline; cursor:pointer; color:var(--y); }
.auth-hint     { margin-top:18px; padding:12px 14px; background:rgba(255,230,0,.04); border-left:3px solid rgba(255,230,0,.25); font-size:.72rem; font-weight:500; color:var(--muted); line-height:1.6; }

/* ── LEAGUE GRID ── */
.lg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:12px; margin-top:18px; }
.lc {
  background:var(--card); border:1px solid var(--border); border-top:3px solid transparent;
  padding:0; cursor:pointer; transition:transform .18s, border-top-color .18s, box-shadow .18s;
  overflow:hidden; display:flex; flex-direction:column; position:relative;
}
.lc:hover { transform:translate(-2px,-3px); border-top-color:var(--y); box-shadow:6px 6px 0 rgba(255,230,0,.1), 0 12px 32px rgba(0,0,0,.4); }
.lc.susp  { opacity:.45; border-style:dashed; border-color:var(--red); cursor:not-allowed; }
.lc-accent { height:3px; background:var(--y); width:100%; flex-shrink:0; }
.lc-body   { padding:18px; flex:1; position:relative; }
.lc-name   { font-family:var(--font-display); font-size:1.4rem; letter-spacing:1px; margin-bottom:3px; color:var(--w); }
.lc-owner  { font-size:.68rem; font-weight:600; color:var(--muted); margin-bottom:10px; }
.lc-pos    { font-family:var(--font-display); font-size:1.1rem; color:var(--y); margin-bottom:8px; }
.lc-body::after { content:'→'; position:absolute; right:16px; bottom:16px; font-size:1.1rem; color:var(--y); opacity:0; transition:opacity .15s, transform .15s; }
.lc:hover .lc-body::after { opacity:1; transform:translateX(3px); }
.add-c {
  border:1.5px dashed #2a2a2a; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:136px; cursor:pointer; transition:border-color .15s, background .15s; box-shadow:none;
}
.add-c:hover { border-color:var(--y); background:rgba(255,230,0,.03); }
.add-c .plus { font-size:1.9rem; font-weight:900; color:#333; line-height:1; transition:color .15s; }
.add-c:hover .plus { color:var(--y); }
.add-c span  { font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }

/* ── MODAL ── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; z-index:400; padding:14px; backdrop-filter:blur(4px); }
.modal { background:#141414; border:1px solid var(--border); border-top:3px solid var(--y); box-shadow:0 40px 80px rgba(0,0,0,.8); padding:30px 26px; width:100%; max-width:490px; max-height:92vh; overflow-y:auto; animation:modalIn .28s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes modalIn { from{transform:scale(.92) translateY(16px);opacity:0;} to{transform:none;opacity:1;} }
.modal-title { font-family:var(--font-display); font-size:1.8rem; letter-spacing:1.5px; margin-bottom:20px; color:var(--w); }
.modal-acts  { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }

/* ── TOAST ── */
.toast { position:fixed; bottom:20px; right:20px; background:#1a1a1a; color:var(--w); padding:12px 18px; font-weight:700; font-size:.82rem; border:1px solid var(--border); border-left:3px solid var(--y); z-index:999; max-width:300px; animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) both; box-shadow:0 16px 40px rgba(0,0,0,.6); }
@keyframes toastIn { from{transform:translateY(50px) scale(.9);opacity:0;} to{transform:none;opacity:1;} }

/* ── TABS ── */
.tabs { display:flex; border-bottom:1px solid var(--border); flex-wrap:nowrap; margin-bottom:22px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { padding:10px 16px; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; cursor:pointer; border:none; background:transparent; font-family:var(--font-body); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.tab:hover  { color:var(--w); }
.tab.active { color:var(--y); border-bottom-color:var(--y); }
.tab .tab-n { background:var(--red); color:#fff; font-size:.54rem; font-weight:900; min-width:14px; height:14px; border-radius:7px; padding:0 3px; display:inline-flex; align-items:center; justify-content:center; margin-left:5px; vertical-align:middle; animation:notifPulse 2s ease-in-out infinite; }
@keyframes notifPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.2);} }

/* ── TEAMS LIST ── */
.teams-list { display:flex; flex-direction:column; gap:5px; margin-bottom:26px; }
.team-row { background:var(--card); border:1px solid var(--border); border-left:3px solid transparent; padding:13px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; transition:background .12s, border-left-color .12s; }
.team-row:hover { background:#1c1c1c; border-left-color:var(--y); }
.team-row.mine  { border-left-color:var(--y); background:rgba(255,230,0,.04); }
.team-row.open .xi { transform:rotate(180deg); opacity:1; }
.rk { font-family:var(--font-display); font-size:1.2rem; width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.r1 { background:#FFD700; color:#000; }
.r2 { background:#B0B0B0; color:#000; }
.r3 { background:#CD7F32; color:#fff; }
.rx { background:#1a1a1a; color:var(--muted); border:1px solid #2a2a2a; }
.tname { font-weight:800; font-size:.9rem; color:var(--w); }
@keyframes fp-glitch {
  0%,100% { text-shadow:none; transform:translate(0); }
  20%      { text-shadow:-2px 0 #FF3B3B, 2px 0 #00BFFF; transform:translate(-1px,0); }
  40%      { text-shadow:2px 0 #FF3B3B, -2px 0 #00BFFF; transform:translate(1px,0); }
  60%      { text-shadow:-1px 0 #FF3B3B, 1px 0 #00BFFF; }
  80%      { text-shadow:1px 1px #FF3B3B,-1px -1px #00BFFF; transform:translate(1px,-1px); }
}
@keyframes fp-neon {
  0%,100% { text-shadow:0 0 5px var(--y), 0 0 10px var(--y); }
  50%     { text-shadow:0 0 10px var(--y), 0 0 24px var(--y), 0 0 48px var(--y); }
}
@keyframes fp-rainbow {
  0%{color:#FF3B3B;} 17%{color:#FF9900;} 33%{color:#FFE600;}
  50%{color:#22C55E;} 67%{color:#00BFFF;} 83%{color:#9B5DE5;} 100%{color:#FF3B3B;}
}
.tname-glitch  { animation:fp-glitch  1.2s infinite; }
.tname-neon    { animation:fp-neon    1.6s ease-in-out infinite; color:var(--y); }
.tname-rainbow { animation:fp-rainbow 2.4s linear infinite; font-style:italic; }
.town  { font-size:.68rem; color:var(--muted); font-weight:500; }
.tsc   { font-family:var(--font-display); font-size:2rem; min-width:60px; text-align:right; color:var(--w); }
.sp    { color:var(--green); font-weight:800; }
.sn    { color:var(--red);   font-weight:800; }
.sz    { color:var(--muted); }
.xi    { font-size:.78rem; opacity:.28; transition:transform .2s; flex-shrink:0; }
.team-det { width:100%; display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); flex-direction:column; gap:3px; }
.team-row.open .team-det { display:flex; }
.pd-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#111; font-size:.74rem; font-weight:600; color:var(--text2); }
.pd-pts { font-family:var(--font-display); font-size:.88rem; min-width:48px; text-align:right; }
.epos   { color:var(--green); font-weight:800; }
.eneg   { color:var(--red);   font-weight:800; }

/* ── PROFS GRID ── */
.profs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(218px,1fr)); gap:10px; margin-bottom:26px; }
.pc { background:var(--card); border:1px solid var(--border); padding:15px; transition:transform .18s, border-color .18s, box-shadow .18s; }
.pc:hover { transform:translateY(-3px); border-color:#333; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.pn    { font-weight:800; font-size:.9rem; margin-bottom:2px; color:var(--w); }
.ps    { font-size:.68rem; color:var(--muted); font-weight:500; margin-bottom:8px; }
.pcost { font-family:var(--font-display); font-size:1rem; background:var(--y); color:#000; display:inline-block; padding:1px 8px; }
.ev-list { display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.ev-row  { display:flex; align-items:center; justify-content:space-between; font-size:.7rem; padding:4px 8px; background:#111; color:var(--text2); }

/* ── BONUS/MALUS ── */
.bm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(194px,1fr)); gap:5px; }
.bmi { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border:1px solid var(--border); border-left:3px solid transparent; font-size:.76rem; font-weight:600; transition:transform .12s, border-left-color .12s; background:var(--card); color:var(--text2); }
.bmi:hover { transform:translateX(3px); }
.bmi.bon { border-left-color:var(--green); background:rgba(34,197,94,.04); }
.bmi.mal { border-left-color:var(--red); background:rgba(255,59,59,.04); }
.bpp { color:var(--green); font-family:var(--font-display); font-size:.96rem; }
.bpm { color:var(--red);   font-family:var(--font-display); font-size:.96rem; }

/* ── SEASON BANNER ── */
.sban { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--y); padding:12px 18px; margin-bottom:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sban.pause { border-left-color:#333; }
.sban.final { border-left-color:#f59e0b; background:rgba(245,158,11,.04); }
.sb-ic { font-size:1.4rem; flex-shrink:0; }
.sb-in { flex:1; }
.sb-t  { font-family:var(--font-display); font-size:.96rem; letter-spacing:1px; color:var(--w); }
.sb-s  { font-size:.68rem; font-weight:500; opacity:.55; margin-top:2px; }
.sb-ct { font-family:var(--font-display); font-size:1.25rem; background:var(--y); color:#000; padding:3px 13px; flex-shrink:0; }
.sban.pause .sb-ct { background:#222; color:var(--muted); }

/* ── ADMIN ── */
.mem-row { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid var(--border); margin-bottom:5px; font-weight:600; flex-wrap:wrap; background:var(--card); }
.ev-log  { display:flex; flex-direction:column; gap:3px; max-height:196px; overflow-y:auto; }
.el-row  { display:flex; align-items:center; gap:8px; font-size:.74rem; padding:6px 9px; background:#111; }
.el-pts  { font-family:var(--font-display); font-size:.88rem; }
.el-date { color:var(--muted); font-size:.66rem; font-weight:600; }

/* ── RULES PAGE ── */
.rules-page {
  min-height:calc(100vh - 58px);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,230,0,.06) 0%, transparent 60%), #0b0b0b;
  display:flex; align-items:center; justify-content:center; padding:32px 16px; position:relative; overflow:hidden;
}
.rules-page::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(90deg,transparent 0,transparent 59px,rgba(255,230,0,.018) 60px), repeating-linear-gradient(0deg,transparent 0,transparent 59px,rgba(255,230,0,.018) 60px); pointer-events:none; }
.rw  { position:relative; z-index:1; width:100%; max-width:700px; }
.rh  { text-align:center; margin-bottom:36px; }
.rh-title { font-family:var(--font-display); font-size:clamp(3rem,10vw,5rem); color:var(--y); letter-spacing:6px; line-height:.9; margin-bottom:12px; }
.rh-sub   { color:var(--muted); font-weight:600; font-size:.8rem; letter-spacing:2.5px; text-transform:uppercase; }
.r-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
@media (max-width:540px) { .r-grid { grid-template-columns:1fr; } }
.rc { background:rgba(255,255,255,.02); border:1px solid rgba(255,230,0,.1); padding:18px; transition:border-color .2s, background .2s; }
.rc:hover { border-color:rgba(255,230,0,.3); background:rgba(255,230,0,.04); }
.rc.wide  { grid-column:1/-1; }
.rc-ic { font-size:1.5rem; margin-bottom:8px; display:block; }
.rc-t  { font-family:var(--font-display); font-size:1.1rem; color:var(--y); letter-spacing:1.5px; margin-bottom:6px; }
.rc-b  { color:#777; font-size:.76rem; font-weight:500; line-height:1.6; }
.rc-b strong { color:var(--y); font-weight:800; }
.rbm-row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.74rem; font-weight:500; color:#666; }
.rbm-row:last-child { border:none; }
.rbp     { color:#4ade80; font-family:var(--font-display); font-size:.9rem; }
.rbm-neg { color:#f87171; font-family:var(--font-display); font-size:.9rem; }
.stl { display:flex; align-items:center; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.stp { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:70px; }
.sti { font-size:1.3rem; width:42px; height:42px; display:flex; align-items:center; justify-content:center; }
.cy  { background:var(--y); }
.cb  { background:#1a1a1a; border:1px solid #2a2a2a; }
.cg  { background:var(--green); }
.stl-l { font-family:var(--font-display); font-size:.82rem; color:var(--y); text-align:center; letter-spacing:1px; }
.stl-s { font-size:.62rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; text-align:center; }
.st-arr { color:#2a2a2a; font-size:1.1rem; padding:0 4px; margin-bottom:18px; flex-shrink:0; }
.r-cta  { text-align:center; margin-top:14px; }
.r-note { color:#383838; font-size:.7rem; font-weight:700; margin-top:10px; text-transform:uppercase; letter-spacing:1px; }

/* ── NEWS ── */
.news-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.news-card { background:var(--card); border:1px solid var(--border); border-left:3px solid transparent; padding:22px; transition:border-left-color .15s, background .15s; }
.news-card:hover { background:#1a1a1a; border-left-color:#2a2a2a; }
.news-card.pinned { border-left-color:var(--y); background:rgba(255,230,0,.03); }
.news-card.news-read { opacity:.5; }
.news-pin   { display:inline-block; background:var(--y); color:#000; font-size:.68rem; font-weight:800; padding:2px 9px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.news-title { font-family:var(--font-display); font-size:1.6rem; letter-spacing:1px; margin-bottom:8px; color:var(--w); }
.news-body  { font-size:.88rem; font-weight:400; color:#999; line-height:1.7; margin-bottom:13px; }
.news-meta  { font-size:.68rem; font-weight:700; color:#383838; text-transform:uppercase; letter-spacing:.8px; }
.news-empty { text-align:center; padding:60px 0; color:var(--muted); }
.news-empty .ei { font-size:2.6rem; margin-bottom:12px; }
.news-empty p   { font-weight:600; font-size:.88rem; }
.ann-ban { background:rgba(255,230,0,.05); border:1px solid rgba(255,230,0,.18); border-left:4px solid var(--y); padding:12px 16px; margin-bottom:18px; cursor:pointer; transition:background .15s; }
.ann-ban:hover { background:rgba(255,230,0,.08); }
.ann-bt { font-weight:800; font-size:.84rem; color:var(--y); margin-bottom:3px; }
.ann-bb { font-size:.72rem; font-weight:500; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── SUPERADMIN ── */
.sa-page { background:#080810; color:#ddd; min-height:calc(100vh - 58px); padding:0 0 40px; }
.sa-page .page { padding-left:18px; padding-right:18px; }
.sa-page .sec-title { color:var(--w); border-bottom-color:#1a1a2e; }
.sa-page .sec-title::before { background:var(--purple); }
.sa-hdr {
  background:linear-gradient(135deg, #0d0d20 0%, #12082a 100%);
  border-bottom:1px solid #1a1a2e; padding:24px 20px 20px; position:relative; overflow:hidden;
}
.sa-hdr::after { content:'🛡️'; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:5rem; opacity:.05; pointer-events:none; }
.sa-hdr-top   { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.sa-hdr-ic    { font-size:2rem; }
.sa-hdr h1    { font-family:var(--font-display); font-size:1.8rem; color:var(--purple); letter-spacing:4px; }
.sa-hdr p     { color:#383838; font-size:.7rem; font-weight:600; margin-top:2px; }
.sa-hdr-stats     { display:flex; gap:24px; flex-wrap:wrap; }
.sa-hdr-stat      { text-align:center; }
.sa-hdr-stat-val  { font-family:var(--font-display); font-size:1.7rem; color:#fff; line-height:1; }
.sa-hdr-stat-lbl  { font-size:.56rem; font-weight:800; color:#383838; text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.sa-tabs-wrap { background:#0a0a18; padding:0 18px; border-bottom:1px solid #1a1a2e; }
.sa-tabs { display:flex; border-bottom:none; margin-bottom:0; overflow-x:auto; scrollbar-width:none; }
.sa-tabs::-webkit-scrollbar { display:none; }
.sa-tabs .tab { color:#333; }
.sa-tabs .tab:hover { color:#888; background:transparent; }
.sa-tabs .tab.active { color:var(--purple); border-bottom-color:var(--purple); background:transparent; }
.sa-content { padding:22px 18px; }
.sa-content > * { animation:fadeUp .2s ease both; }
.sa-lg-row { background:#0f0f1e; border:1px solid #1a1a2e; border-left:3px solid var(--purple); padding:13px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; transition:border-left-color .15s, background .12s; margin-bottom:4px; }
.sa-lg-row:hover { border-left-color:#c084fc; background:#12122a; }
.sa-lg-row.susp  { border-left-color:var(--red); opacity:.5; }
.sa-lname { font-family:var(--font-display); font-size:1.2rem; color:#ddd; letter-spacing:1px; flex:1; }
.sa-det   { background:#090918; border:1px solid #1a1a2e; border-top:none; padding:16px; margin-bottom:4px; }
.sa-mem   { padding:5px 10px; background:#0f0f22; font-size:.76rem; font-weight:600; color:#888; margin-bottom:3px; }
.sa-team  { padding:5px 10px; background:#0f0e00; border-left:3px solid rgba(255,230,0,.35); font-size:.76rem; font-weight:600; color:#888; margin-bottom:3px; }
.sa-form-box { background:#0d0d1e; border:1px solid #2a2a4a; border-top:2px solid var(--purple); padding:18px; margin-bottom:20px; }
.sa-fg    { margin-bottom:13px; }
.sa-lbl   { display:block; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; color:#444; }
.sa-form-inp { width:100%; padding:10px 13px; border:1px solid #2a2a3a; background:#12122a; color:#ddd; font-family:var(--font-body); font-size:.86rem; outline:none; transition:border-color .15s, box-shadow .15s; }
.sa-form-inp:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(155,93,229,.15); }
.sa-form-ta { width:100%; padding:10px 13px; border:1px solid #2a2a3a; background:#12122a; color:#ddd; font-family:var(--font-body); font-size:.86rem; outline:none; resize:vertical; min-height:80px; }
.sa-form-ta:focus { border-color:var(--purple); }
.sa-ann-item  { background:#0f0f22; border-left:4px solid var(--purple); padding:12px 14px; margin-bottom:8px; position:relative; }
.sa-ann-item.pinned { border-color:var(--y); }
.sa-ann-pin   { position:absolute; top:8px; right:8px; font-size:.78rem; }
.sa-ann-title { font-weight:800; font-size:.88rem; color:#ddd; margin-bottom:3px; }
.sa-ann-body  { font-size:.76rem; color:#444; font-weight:500; line-height:1.5; }
.sa-ann-meta  { font-size:.65rem; color:#2a2a2a; font-weight:700; margin-top:5px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.info-cell { background:#0f0f22; padding:8px 10px; border:1px solid #1a1a2e; }
.info-k    { font-size:.64rem; color:#2a2a2a; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.info-v    { font-weight:700; color:#bbb; font-size:.82rem; margin-top:2px; }
.sa-user-row { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #1a1a2e; margin-bottom:5px; background:#0f0f1e; flex-wrap:wrap; }
.sa-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:24px; }
.sa-stat-cell  { background:#0f0f1e; border:1px solid #1a1a2e; border-top:2px solid var(--purple); padding:14px 10px; text-align:center; }
.sa-stat-icon  { font-size:1.3rem; margin-bottom:5px; }
.sa-stat-val   { font-family:var(--font-display); font-size:1.7rem; color:#fff; line-height:1; }
.sa-stat-lbl   { font-size:.6rem; font-weight:700; color:#333; text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.sa-top-row    { display:flex; align-items:center; gap:10px; padding:8px 11px; background:#0f0f1e; border:1px solid #1a1a2e; margin-bottom:4px; }
.sa-top-rank   { font-family:var(--font-display); font-size:1.4rem; color:var(--purple); width:24px; text-align:center; flex-shrink:0; }
.sa-top-name   { font-weight:700; color:#bbb; font-size:.84rem; }
.sa-box        { background:#0d0d1e; border:1px solid #2a2a3a; padding:14px; margin-bottom:10px; display:flex; flex-direction:column; gap:4px; }
.sa-section-lbl { font-weight:800; font-size:.7rem; color:#383838; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; margin-top:4px; }
.sa-hint       { font-size:.76rem; color:#444; font-weight:500; line-height:1.5; margin-bottom:8px; }
.sa-hint code  { background:#1a1a2e; padding:1px 5px; font-size:.74rem; color:var(--purple); }
.sa-code       { background:#080810; border:1px solid #1a1a2e; padding:10px 12px; font-family:monospace; font-size:.76rem; color:#7dcfff; line-height:1.6; white-space:pre-wrap; word-break:break-all; }
.sa-chevron    { color:#2a2a2a; font-size:.78rem; flex-shrink:0; }
.sa-team-row   { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#0f0d00; border-left:3px solid rgba(255,230,0,.25); margin-bottom:3px; }
.sa-team-name  { font-size:.76rem; font-weight:700; color:#888; }
.sa-team-name.suspended { text-decoration:line-through; color:#333; }
.sa-acts       { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid #1a1a2e; }
.sa-trade-row  { background:#0f0f1e; border:1px solid #1a1a2e; padding:12px; margin-bottom:5px; }
.sa-trade-users { font-weight:800; font-size:.86rem; color:#ddd; }
.sa-trade-profs { font-size:.78rem; color:#777; font-weight:600; margin-bottom:4px; }
.sa-trade-meta  { font-size:.68rem; color:#333; font-weight:600; }
.sa-user-name  { font-weight:800; font-size:.86rem; color:#ddd; }
.sa-user-meta  { font-size:.68rem; color:#333; font-weight:600; margin-top:2px; }
.sa-user-row.banned { border-color:var(--red); opacity:.7; }
.sa-empty      { color:#222; font-weight:700; font-size:.8rem; padding:16px 0; }
.sa-mode-banner { padding:10px 16px; font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; border:1px solid; }
.sa-mode-estate { background:rgba(245,158,11,.06); color:#f59e0b; border-color:rgba(245,158,11,.25); }
.sa-mode-maint  { background:#0a0a0a; color:#444; border-color:#1a1a1a; }
.sa-mode-status { font-weight:600; color:#444; font-size:.8rem; margin-bottom:8px; }
.sa-code-result { background:#0a0a18; border:2px solid var(--purple); padding:14px; font-family:var(--font-display); font-size:1.4rem; letter-spacing:5px; text-align:center; color:var(--y); cursor:pointer; margin-bottom:8px; transition:background .15s; }
.sa-code-result:hover { background:#12122a; }
.sa-code-row   { display:flex; align-items:flex-start; gap:10px; background:#0f0f1e; border:1px solid #1a1a2e; padding:12px; margin-bottom:5px; }
.sa-code-row.used { opacity:.4; }
.sa-code-str   { font-family:var(--font-display); font-size:1rem; letter-spacing:2px; color:var(--y); cursor:pointer; margin-bottom:3px; }
.sa-code-str:hover { text-decoration:underline; }
.sa-code-meta  { font-size:.68rem; color:#444; font-weight:600; }
.sa-code-date  { font-size:.66rem; color:#2a2a2a; font-weight:700; margin-top:2px; }

/* ── PREMIUM ── */
.prem-page { max-width:600px; margin:0 auto; padding-bottom:48px; }
.prem-hero { text-align:center; background:linear-gradient(135deg,#0d0d0d 0%,#1a1a00 100%); color:var(--y); border:1px solid rgba(255,230,0,.18); border-top:3px solid var(--y); padding:36px 20px 28px; margin-bottom:20px; position:relative; overflow:hidden; }
.prem-hero::before { content:'⚡'; position:absolute; right:-10px; bottom:-24px; font-size:9rem; opacity:.05; pointer-events:none; }
.prem-hero-icon  { font-size:2.4rem; margin-bottom:6px; }
.prem-hero-title { font-family:var(--font-display); font-size:2.5rem; letter-spacing:5px; line-height:1; margin-bottom:8px; }
.prem-hero-title span { color:var(--w); }
.prem-hero-sub   { font-size:.78rem; font-weight:600; color:var(--muted); }
.prem-how { background:var(--card); border:1px solid var(--border); border-top:2px solid var(--purple); padding:18px; margin-bottom:8px; }
.prem-how-title  { font-family:var(--font-display); font-size:1.18rem; letter-spacing:1.5px; color:var(--purple); margin-bottom:14px; }
.prem-step       { display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); }
.prem-step:last-of-type { border:none; }
.prem-step-n     { font-family:var(--font-display); font-size:1.4rem; color:var(--y); line-height:1; flex-shrink:0; width:18px; text-align:center; }
.prem-step-t     { font-size:.8rem; font-weight:600; padding-top:2px; color:#bbb; }
.prem-ig-btn     { display:block; text-align:center; margin-top:14px; text-decoration:none; font-size:.78rem; }
.prem-sec-title  { font-family:var(--font-display); font-size:1.5rem; letter-spacing:2.5px; color:var(--y); border-bottom:1px solid rgba(255,230,0,.18); padding-bottom:6px; margin:28px 0 12px; }
.prem-bundle-note { font-size:.7rem; font-weight:700; color:#383838; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.prem-pro-card   { background:#0d0d00; color:var(--y); border:1px solid rgba(255,230,0,.18); border-top:3px solid var(--y); padding:20px; margin-bottom:10px; }
.prem-pro-top    { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.prem-pro-name   { font-family:var(--font-display); font-size:1.5rem; letter-spacing:2px; }
.prem-pro-price  { display:flex; align-items:baseline; gap:1px; }
.prem-price-num  { font-family:var(--font-display); font-size:2.8rem; line-height:1; }
.prem-price-cur  { font-family:var(--font-display); font-size:1.4rem; }
.prem-pro-note   { font-size:.7rem; font-weight:600; color:#777; margin-bottom:14px; }
.prem-feat       { display:flex; gap:10px; align-items:flex-start; font-size:.8rem; font-weight:600; padding:5px 0; color:var(--w); }
.prem-feat-ck    { color:var(--green); font-weight:900; flex-shrink:0; margin-top:1px; }
.prem-divider    { border:none; border-top:1px solid rgba(255,230,0,.08); margin:14px 0 10px; }
.prem-lg-row     { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid rgba(255,230,0,.06); font-size:.78rem; font-weight:600; color:var(--w); }
.prem-skins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:10px; }
.prem-skin-card  { padding:16px 10px; text-align:center; border:1px solid var(--border); background:var(--card); }
.prem-skin-card.owned { border-width:2px; border-color:var(--y); }
.prem-skin-emoji { font-size:1.8rem; margin-bottom:6px; }
.prem-skin-name  { font-weight:800; font-size:.74rem; margin-bottom:8px; color:var(--w); }
.prem-skin-price { font-family:var(--font-display); font-size:.9rem; padding:2px 10px; display:inline-block; background:var(--y); color:#000; }
.prem-skin-owned { font-size:.66rem; color:var(--green); font-weight:800; margin-top:5px; }
.prem-bundle-box { display:flex; align-items:center; gap:12px; background:rgba(255,230,0,.04); border:1px dashed rgba(255,230,0,.18); padding:12px 16px; margin-bottom:10px; font-size:.8rem; font-weight:700; color:#888; }
.prem-bundle-price { font-family:var(--font-display); font-size:1.8rem; color:var(--y); white-space:nowrap; }
.prem-status-box { background:var(--card); border:1px solid var(--border); padding:12px; margin-bottom:8px; }
.prem-badges-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:10px; }
.prem-badge-card  { background:var(--card); border:1px solid var(--border); padding:16px 10px; text-align:center; }
.prem-badge-card.owned { border-color:var(--y); background:rgba(255,230,0,.04); }
.prem-badge-emoji { font-size:2rem; margin-bottom:6px; }
.prem-badge-name  { font-weight:800; font-size:.82rem; margin-bottom:3px; color:var(--w); }
.prem-badge-desc  { font-size:.66rem; color:var(--muted); font-weight:500; line-height:1.4; margin-bottom:8px; }
.prem-badge-price { font-family:var(--font-display); font-size:.9rem; color:var(--y); }
.prem-badge-card.owned .prem-badge-price { color:var(--green); }
.prem-redeem-box  { background:var(--card); border:1px solid var(--border); border-top:2px solid var(--purple); padding:18px; margin-bottom:8px; }
.prem-code-inp    { text-transform:uppercase; letter-spacing:3px; font-family:var(--font-display); font-size:1.2rem; margin-bottom:10px; }
.prem-redeem-btn  { width:100%; justify-content:center; }
.prem-skin-pick-row { padding:12px; border:1px solid var(--border); margin-bottom:6px; cursor:pointer; transition:transform .1s; display:flex; align-items:center; gap:10px; background:var(--card); }
.prem-skin-pick-row:hover  { transform:translateX(3px); border-color:#333; }
.prem-skin-pick-row.active { border-color:var(--y); background:rgba(255,230,0,.04); }

/* ── EFFECTS ── */
.spark { position:fixed; font-family:var(--font-display); font-size:1.6rem; font-weight:900; pointer-events:none; z-index:9999; animation:sparkUp 1.2s ease-out forwards; }
@keyframes sparkUp { 0%{opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(-110px) scale(1.4);} }
.lim-flash { position:fixed; inset:0; z-index:9998; pointer-events:none; display:flex; align-items:center; justify-content:center; animation:limFlash 1.8s ease-out forwards; }
.lim-txt   { font-family:var(--font-display); font-size:3rem; color:#fff; letter-spacing:5px; animation:limTxt 1.8s ease-out forwards; }
@keyframes limFlash { 0%{opacity:0;background:rgba(255,50,200,.85);} 15%{opacity:1;background:rgba(50,200,255,.85);} 40%{background:rgba(255,230,0,.85);} 65%{background:rgba(50,255,100,.85);} 100%{opacity:0;background:transparent;} }
@keyframes limTxt   { 0%{transform:scale(.5) rotate(-6deg);opacity:0;} 18%{transform:scale(1.2) rotate(2deg);opacity:1;} 80%{transform:scale(1);opacity:1;} 100%{transform:scale(1.5);opacity:0;} }

/* ── EMPTY STATE ── */
.empty   { text-align:center; padding:48px 20px; color:#2a2a2a; }
.ei      { font-size:2.4rem; margin-bottom:12px; }
.empty p { font-weight:600; font-size:.84rem; }

/* ── HALL OF FAME ── */
.lh-section { background:var(--card); border:1px solid var(--border); padding:16px; margin-bottom:10px; }
.lh-title   { font-family:var(--font-display); font-size:1.1rem; letter-spacing:1.5px; color:var(--w); margin-bottom:12px; }

/* ── LEAGUE INFO BAR ── */
.lg-info-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-left:4px solid var(--y); margin-bottom:18px; flex-wrap:wrap; }
.lg-info-bar .lg-ib-name { font-family:var(--font-display); font-size:1.3rem; letter-spacing:1px; color:var(--w); }
.lg-info-bar .lg-ib-meta { font-size:.68rem; font-weight:600; color:var(--muted); margin-left:auto; }

/* ── RESPONSIVE ── */
@media (max-width:480px) {
  .auth-card { padding:24px 18px; }
  .modal     { padding:24px 16px; }
  .pg-title  { font-size:2.2rem; }
  .page      { padding:20px 14px 52px; }
  .header    { padding:0 14px; }
  .btn-sm    { font-size:.66rem; padding:5px 10px; }
}

/* ── DARK MODE COMPATIBILITY (already dark by default) ── */
body.dark { background:var(--bk); color:var(--w); }
body.dark .lc     { background:var(--card); border-color:var(--border); }
body.dark .add-c  { background:transparent; border-color:#2a2a2a; }
body.dark .fp-inp { background:#1a1a1a; color:var(--w); border-color:var(--border); }
body.dark .fp-ta  { background:#1a1a1a; color:var(--w); border-color:var(--border); }
body.dark select  { background:#1a1a1a; color:var(--w); border-color:var(--border); }
body.dark .modal  { background:var(--card); border-color:var(--border); }
body.dark .toast  { background:#1c1c1c; border-color:var(--border); }
body.dark .tabs   { border-bottom-color:var(--border); }
body.dark .sec-title { color:var(--w); border-bottom-color:var(--border); }
body.dark .team-row  { background:var(--card); border-color:var(--border); }
body.dark .team-row.mine { background:rgba(255,230,0,.04); }
body.dark .pd-row    { background:#0f0f0f; }
body.dark .pc        { background:var(--card); border-color:var(--border); }
body.dark .btn-ghost { color:var(--w); border-color:var(--border); }
body.dark .news-card { background:var(--card); border-color:var(--border); }
body.dark .mem-row   { background:var(--card); border-color:var(--border); }
body.dark .bmi       { background:var(--card); }

/* ── NEW STUDIOS FOOTER ── */
.new-studios-footer {
  text-align:center; padding:18px 0 0;
  font-size:.58rem; font-weight:800;
  letter-spacing:3.5px; text-transform:uppercase;
  color:#1e1e1e; border-top:1px solid #1a1a1a; margin-top:40px;
}
.new-studios-footer span { color:var(--y); }