*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#060b18;--surf:rgba(255,255,255,0.05);--surfh:rgba(255,255,255,0.09);--bdr:rgba(255,255,255,0.09);--bdra:rgba(56,189,248,0.35);--txt:#e2e8f0;--dim:#64748b;--acc:#38bdf8;--accd:rgba(56,189,248,0.13);--ok:#34d399;--warn:#fbbf24;--err:#f87171;--gold:#ffd700;--silver:#c0c0c0;--bronze:#cd7f32}
html,body{min-height:100vh;background:var(--bg);font-family:'Trebuchet MS',system-ui,sans-serif;color:var(--txt)}
::placeholder{color:rgba(100,116,139,0.55)!important}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:4px}
select option{background:#1e293b;color:#e2e8f0}
input,select,button{font-family:inherit}
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.4}}
.fu{animation:fu .35s ease both}
.pu{animation:pu 1.5s ease infinite}
.page{display:none}.page.active{display:block}
@keyframes spin { to { transform: rotate(360deg); } }

/* Topbar */
#topbar{position:sticky;top:0;z-index:200;background:rgba(6,11,24,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr)}
#topbar-inner{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;height:58px}
#back-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;border-radius:8px}
#back-btn:hover{color:var(--txt)}
#page-title{font-weight:900;font-size:15px;color:var(--txt);letter-spacing:.5px}
#page-sub{font-size:11px;color:var(--dim);margin-top:1px}
#topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* Cards */
.card{background:var(--surf);backdrop-filter:blur(10px);border:1px solid var(--bdr);border-radius:14px;padding:20px}
.card-hover{cursor:pointer;transition:background .18s}
.card-hover:hover{background:var(--surfh)}

/* Inputs */
.inp{width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--bdr);border-radius:10px;padding:10px 14px;color:var(--txt);font-size:13px;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--acc)}

/* Buttons */
.btn{border:none;border-radius:10px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;letter-spacing:.3px}
.btn-primary{background:linear-gradient(135deg,#38bdf8,#3b82f6);color:#fff}
.btn-success{background:linear-gradient(135deg,#34d399,#059669);color:#fff}
.btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);color:#fff}
.btn-ghost{background:rgba(255,255,255,0.07);color:var(--dim);border:1px solid var(--bdr)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:not(:disabled):hover{filter:brightness(1.12);transform:translateY(-1px)}

/* Badge */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}

/* Label */
.lbl{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}

/* Grid */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

/* Tabs */
.tabs{display:flex;gap:4px;background:rgba(255,255,255,0.04);border-radius:12px;padding:4px;margin-bottom:28px;flex-wrap:wrap}
.tab-btn{flex:1;padding:10px 6px;border:none;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s;background:transparent;color:var(--dim)}
.tab-btn.active{background:linear-gradient(135deg,#38bdf8,#3b82f6);color:#fff}

/* Drop zone */
.dropzone{border:2px dashed var(--bdr);border-radius:16px;padding:50px 24px;text-align:center;cursor:pointer;transition:all .2s}
.dropzone:hover,.dropzone.drag{border-color:var(--acc);background:var(--accd)}
.dropzone input[type=file]{display:none}

/* Team row */
.team-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--bdr);cursor:pointer}
.team-row:hover{background:rgba(255,255,255,0.02)}
.player-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);align-items:center}

/* Login page */
#login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 60%,#0f1f3d,var(--bg) 60%);padding:20px}
.orb{position:fixed;border-radius:50%;pointer-events:none}

/* Scrollable log */
.log-box{background:rgba(0,0,0,.4);border-radius:10px;padding:14px;font-family:monospace;font-size:12px;max-height:220px;overflow-y:auto}

/* Flex helpers */
.flex{display:flex}.flex-col{flex-direction:column}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.items-center{align-items:center}.jc-between{justify-content:space-between}.flex-1{flex:1}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.mb-28{margin-bottom:28px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}
.fw-800{font-weight:800}.fw-700{font-weight:700}.fw-600{font-weight:600}
.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-15{font-size:15px}.fs-17{font-size:17px}.fs-22{font-size:22px}
.txt-acc{color:var(--acc)}.txt-dim{color:var(--dim)}.txt-ok{color:var(--ok)}.txt-warn{color:var(--warn)}.txt-err{color:var(--err)}.txt-main{color:var(--txt)}
.w100{width:100%}.ta-center{text-align:center}.ta-right{text-align:right}
.alert{border-radius:10px;padding:12px 16px;font-size:13px}
.alert-ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:var(--ok)}
.alert-warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--warn)}
.alert-err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--err)}
.alert-acc{background:var(--accd);border:1px solid var(--bdra);color:var(--acc)}

/* Name resolve pills */
.name-pill{border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;border:1px solid var(--bdr);background:rgba(255,255,255,0.05);color:var(--txt)}
.name-pill.selected{background:var(--accd);border-color:var(--acc);color:var(--acc)}
.name-pill.keep-orig{color:var(--dim)}
.name-pill.keep-orig.selected{background:rgba(248,113,113,.15);border-color:var(--err);color:var(--err)}

/* Player tag */
.ptag{display:inline-block;border-radius:6px;padding:3px 9px;font-size:11px;border:1px solid var(--bdr);background:rgba(255,255,255,0.06);color:var(--txt);margin:2px}
.ptag.corrected{background:rgba(52,211,153,.15);border-color:var(--ok);color:var(--ok)}

.sep{height:1px;background:var(--bdr);border:none;margin:0}

.leaderboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 🔥 THIS makes standings wider */
    gap: 16px;
  }

#top-performers-list{
  max-height: 700px;
  overflow-y: auto;
}

:root {
    --primary: #1a237e;
    --accent: #ffd700;
    --danger: #d32f2f;
    --success: #388e3c;
}

/* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

/* Modal Box */
.modal-content {
    background-color: #fff;
    margin: 5% auto;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Limits height */
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header */
.modal-header {
    padding: 20px;
    background: var(--primary);
    color: white;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 { margin: 0; font-size: 1.2rem; }

/* Body (Scrollable) */
.modal-body {
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
}

.rules-section { margin-bottom: 25px; }
.rules-section h3 { 
    border-bottom: 2px solid var(--primary); 
    padding-bottom: 5px; 
    color: var(--primary);
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: white;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

th { background: #f1f1f1; }
.sub-header { background: #e3f2fd; font-weight: bold; }
.neg { color: var(--danger); font-weight: bold; }
.multiplier { background: #fff9c4; padding: 10px; border-radius: 8px; border: 1px dashed #fbc02d; }

/* Buttons */
.close-btn { font-size: 28px; cursor: pointer; }
.btn-points { padding: 10px 20px; background: var(--primary); color: white; border: none; border-radius: 5px; cursor: pointer; }
.btn-close { padding: 10px 25px; background: #666; color: white; border: none; border-radius: 5px; cursor: pointer; }
.modal-footer { padding: 15px; border-top: 1px solid #eee; text-align: right; }

/* Update these specific sections in your CSS */

.modal-content {
    background-color: #fff;
    color: #1e293b; /* Add this: Darker text for the light background */
    /* ... rest of your code ... */
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
    color: #334155; /* Add this: Ensures all body text is readable */
}

/* Ensure table text isn't inheriting the light gray */
.modal-body table td, 
.modal-body table th {
    color: #1e293b;
}

/* Make the sub-headers darker for better visibility */
.sub-header { 
    background: #e3f2fd; 
    color: #1a237e; /* Dark Blue */
    font-weight: bold; 
}

.preview-card{
background:#1c1f2a;
border:1px solid #2b2f3e;
border-radius:10px;
padding:16px;
margin-bottom:14px;
}

.preview-card-header{
display:flex;
justify-content:space-between;
margin-bottom:12px;
}

.team-owner{
font-size:15px;
font-weight:700;
color:#fff;
}

.team-meta{
font-size:12px;
color:#9aa3b2;
}

.player-list{
display:flex;
flex-direction:column;
gap:6px;
}

.player-row{
display:flex;
justify-content:space-between;
font-size:13px;
color:#cfd6e6;
}

.player-price{
font-size:12px;
color:#f59e0b;
}

.corrected{
color:#22c55e;
}

.preview-stat{
margin-right:25px;
}

.stat-label{
font-size:11px;
color:#9aa3b2;
}

.stat-value{
font-size:16px;
font-weight:700;
color:white;
}

.stat-value.small{
font-size:12px;
}

.section-title{
font-size:15px;
font-weight:700;
margin-bottom:12px;
}

.cap-info-box{
background:#1c1f2a;
border:1px solid #2b2f3e;
padding:12px 14px;
border-radius:8px;
font-size:13px;
color:#aab2c5;
margin-bottom:18px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.mt{
margin-top:14px;
}

.full{
width:100%;
}

.form-label{
font-size:12px;
color:#aab2c5;
margin-bottom:6px;
display:block;
}

.meta-text{
font-size:11px;
color:#8a92a6;
margin-top:4px;
}

.cap-history-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 12px;
background:#1c1f2a;
border-radius:8px;
margin-bottom:8px;
}

.cap-meta{
font-size:11px;
color:#8a92a6;
margin-bottom:5px;
}

.cap-tags{
display:flex;
gap:8px;
}

.cap-tag{
font-size:12px;
font-weight:600;
padding:4px 8px;
border-radius:6px;
}

.cap-tag.captain{
background:#2a1f08;
color:#fbbf24;
}

.cap-tag.vc{
background:#1d1b3a;
color:#a78bfa;
}

.cap-delete{
background:none;
border:1px solid #2b2f3e;
border-radius:6px;
padding:4px 8px;
cursor:pointer;
color:#8a92a6;
}

.cap-delete:hover{
color:#a80000;
border-color:#ff6b6b;
}

.grid-3{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}

@media(max-width:800px){
  .leaderboard-grid{ grid-template-columns:1fr; }
}

@media(max-width:600px){
  .grid-cards, .grid-2, .grid-3 { grid-template-columns:1fr; }
  .wrap { padding:16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

.stat-block {
  margin-bottom:12px;
  background:rgba(255,255,255,0.03);
  padding:8px;
  border-radius:8px;
}

.stat-table{
  width:100%;
  font-size:11px;
}

.stat-table td{
  padding:3px 0;
}

.stat-block{
  margin-bottom:12px;
  padding:10px;
  border-radius:10px;
  background:var(--surf1); /* 🔥 matches your cards */
  border:1px solid var(--bdr);
}

.stat-table{
  width:100%;
  font-size:12px;
  color:black; /* 🔥 no dim */
}

.stat-table td{
  padding:4px 0;
}