:root{
  --black:#07080c;
  --black2:#0f1118;
  --panel:#151821;
  --panel2:#1c202b;
  --line:#2a2f3b;
  --red:#b1121b;
  --red2:#ef233c;
  --gold:#f7c948;
  --green:#22c55e;
  --amber:#f59e0b;
  --danger:#ef4444;
  --text:#f8fafc;
  --muted:#a7adbb;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(239,35,60,.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(177,18,27,.18), transparent 25%),
    var(--black);
  color:var(--text);
}
header{
  background:
    linear-gradient(135deg, rgba(7,8,12,.96), rgba(177,18,27,.92), rgba(239,35,60,.88)),
    radial-gradient(circle at top, rgba(255,255,255,.18), transparent 35%);
  color:white;
  padding:26px 10px 30px;
  text-align:center;
  border-bottom-left-radius:34px;
  border-bottom-right-radius:34px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.club-logo{
  width:min(96vw,760px);
  max-height:235px;
  object-fit:contain;
  background:#fff;
  border-radius:28px;
  padding:6px 8px;
  box-shadow:0 16px 38px rgba(0,0,0,.46);
  margin-bottom:14px;
}
header h1{
  margin:6px 0 0;
  font-size:34px;
  font-weight:950;
  letter-spacing:.4px;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}
nav{
  display:flex;
  overflow-x:auto;
  gap:8px;
  padding:10px;
  background:rgba(12,14,20,.92);
  backdrop-filter:blur(10px);
  position:sticky;
  top:0;
  z-index:5;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
}
nav button{
  border:1px solid #2d3340;
  background:#151821;
  padding:10px 12px;
  border-radius:999px;
  white-space:nowrap;
  font-weight:800;
  color:#f8fafc;
}
nav button.active{
  background:linear-gradient(135deg,#7f0d13,#ef233c);
  color:white;
  border-color:#ef233c;
  box-shadow:0 0 16px rgba(239,35,60,.35);
}
main{padding:16px;max-width:1160px;margin:auto}
.tab{display:none}.tab.active{display:block}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card,.panel,.media-card{
  background:linear-gradient(180deg, rgba(28,32,43,.96), rgba(15,17,24,.96));
  padding:16px;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(0,0,0,.36);
  border:1px solid var(--line);
  border-top:4px solid var(--red2);
}
.card span{color:var(--muted);font-size:13px;display:block;margin-bottom:8px}
.card strong{font-size:21px;color:#fff}
.balance{
  border:2px solid var(--red2);
  background:linear-gradient(180deg, rgba(177,18,27,.24), rgba(15,17,24,.96));
}
h2{margin-top:26px;font-size:20px;color:#fff}
.panel{display:grid;gap:10px;margin:12px 0}
input,select,button,textarea{
  width:100%;
  padding:12px;
  border:1px solid #384152;
  border-radius:13px;
  font-size:16px;
}
input,select,textarea{
  background:#0f1118;
  color:#fff;
}
textarea{min-height:80px}
button{
  background:linear-gradient(135deg,#7f0d13,#b1121b);
  color:white;
  border:0;
  font-weight:900;
}
.secondary{background:#475569}.danger{background:var(--danger)}
.table-wrap{
  background:#11141c;
  border-radius:20px;
  overflow-x:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.36);
  border:1px solid var(--line);
}
table{width:100%;border-collapse:collapse;min-width:980px}
th,td{
  padding:12px;
  border-bottom:1px solid #252b36;
  text-align:left;
  vertical-align:middle;
}
th{
  background:#1e2230;
  color:#ffccd2;
  font-size:13px;
}
td{color:#f8fafc}
.hint{margin:8px 0 0;color:var(--muted);font-size:13px}
.month-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.locked{
  background:#2a1015;
  border-left:5px solid var(--danger);
  padding:10px;
  border-radius:12px;
  font-weight:900;
  color:#fecaca;
}
.status-paid{color:#bbf7d0;background:#14532d;font-weight:950;padding:6px 10px;border-radius:999px;display:inline-block}
.status-partial{color:#fef3c7;background:#78350f;font-weight:950;padding:6px 10px;border-radius:999px;display:inline-block}
.status-unpaid{color:#fee2e2;background:#7f1d1d;font-weight:950;padding:6px 10px;border-radius:999px;display:inline-block}
.status-notrequired{color:#e5e7eb;background:#374151;font-weight:950;padding:6px 10px;border-radius:999px;display:inline-block}
.whatsapp-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:#22c55e;
  color:white;
  font-weight:950;
  text-decoration:none;
  margin-left:8px;
  box-shadow:0 0 14px rgba(34,197,94,.35);
}
.profile-photo,.dash-photo{
  border-radius:50%;
  object-fit:cover;
  background:#2d3340;
  border:2px solid #ef233c;
}
.profile-photo{width:64px;height:64px}
.dash-photo{width:42px;height:42px;margin-right:8px;vertical-align:middle}
.player-cell{display:flex;align-items:center;gap:8px}
.gallery-grid,.champion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.media-card img,.champion-card img{width:100%;max-height:240px;object-fit:cover;border-radius:14px}
.media-card a{color:#93c5fd;font-weight:900;text-decoration:none}
.chart-card{
  background:linear-gradient(180deg, rgba(28,32,43,.96), rgba(15,17,24,.96));
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  margin:14px 0;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
canvas{width:100%;height:280px;background:#0f1118;border-radius:16px;border:1px solid #2a2f3b}
.trophy-banner{
  display:none;
  align-items:center;
  gap:16px;
  background:
    radial-gradient(circle at top left, rgba(247,201,72,.24), transparent 36%),
    linear-gradient(135deg, #17100a, #3a1517, #11141c);
  border:1px solid rgba(247,201,72,.45);
  border-radius:24px;
  padding:18px;
  margin:16px 0;
  box-shadow:0 0 28px rgba(247,201,72,.18),0 10px 28px rgba(0,0,0,.38);
}
.trophy-icon{
  font-size:54px;
  animation:trophyPulse 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(247,201,72,.75));
}
@keyframes trophyPulse{
  0%,100%{transform:scale(1) rotate(-3deg)}
  50%{transform:scale(1.16) rotate(4deg)}
}
.trophy-title{font-size:20px;font-weight:950;color:#fff}
.trophy-meta{color:#fde68a;font-weight:800;margin-top:5px}
.champion-card{
  background:linear-gradient(180deg,#211307,#11141c);
  border:1px solid rgba(247,201,72,.45);
  border-radius:20px;
  padding:14px;
  box-shadow:0 0 26px rgba(247,201,72,.12);
}
.champion-badge{color:#fde68a;font-weight:950;margin-top:8px}
.export-box{border:2px dashed var(--red2);background:#1d1115}
footer{text-align:center;color:var(--muted);padding:22px}
@media(max-width:560px){
  .cards,.month-actions{grid-template-columns:1fr}
  .club-logo{max-height:165px}
  header h1{font-size:24px}
  table{min-width:1050px}
  .trophy-banner{align-items:flex-start}
}


/* Player photo upload improvements */
.dash-photo{
  width:60px !important;
  height:60px !important;
  border:3px solid #ef233c;
  box-shadow:0 0 16px rgba(239,35,60,.35);
}
.photo-upload-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:220px;
}
.photo-upload-row input[type=file]{
  background:#0f1118;
  color:#f8fafc;
  font-size:13px;
  padding:8px;
}
.photo-remove-btn{
  background:#7f1d1d !important;
  padding:8px !important;
  font-size:13px !important;
}
.photo-preview-small{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
  background:#2d3340;
  border:3px solid #ef233c;
  box-shadow:0 0 16px rgba(239,35,60,.32);
}
@media(max-width:560px){
  .dash-photo{width:52px !important;height:52px !important;}
}


/* Coming soon tournament teaser + round analytics */
.trophy-banner{
  display:flex !important;
}
.trophy-coming-soon{
  background:
    radial-gradient(circle at top left, rgba(247,201,72,.28), transparent 38%),
    linear-gradient(135deg, #120b05, #431216, #10131b);
}
.trophy-coming-soon .trophy-title{
  color:#fff7cc;
}
.round-analytics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin:14px 0;
}
.round-card{
  background:linear-gradient(180deg, rgba(28,32,43,.96), rgba(15,17,24,.96));
  border:1px solid var(--line);
  border-top:4px solid var(--red2);
  border-radius:22px;
  padding:18px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.36);
}
.round-card h3{
  margin:8px 0;
  color:#fff;
}
.round-card p{
  margin:4px 0;
  color:var(--muted);
  font-weight:800;
}
.donut{
  width:160px;
  height:160px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  position:relative;
  box-shadow:inset 0 0 24px rgba(0,0,0,.4), 0 0 20px rgba(239,35,60,.18);
}
.donut::after{
  content:"";
  width:104px;
  height:104px;
  background:#10131b;
  border-radius:50%;
  position:absolute;
  box-shadow:inset 0 0 18px rgba(0,0,0,.55);
}
.donut strong{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:22px;
}


/* Dashboard champion trophy holders */
.trophy-banner{
  position:relative;
  overflow:hidden;
  justify-content:space-between;
}
.trophy-main-content{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.dashboard-champions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  padding-left:10px;
}
.champion-mini{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #f7c948;
  box-shadow:0 0 16px rgba(247,201,72,.6);
  background:#2d3340;
}
.champion-mini-wrap{
  position:relative;
}
.champion-mini-wrap::after{
  content:"🏆";
  position:absolute;
  right:-7px;
  bottom:-8px;
  font-size:20px;
  animation:trophyPulse 1.5s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(247,201,72,.85));
}
.champion-mini-label{
  font-size:11px;
  color:#fde68a;
  font-weight:900;
  text-align:center;
  margin-top:4px;
  max-width:70px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:700px){
  .trophy-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .dashboard-champions{
    margin-left:0;
    padding-left:0;
    padding-top:8px;
    flex-wrap:wrap;
  }
}


/* Dashboard month/date selector visibility fix */
input[type="month"],
input[type="date"]{
  background:#ffffff !important;
  color:#111827 !important;
  border:2px solid #ef233c !important;
  font-weight:900;
  color-scheme: light;
}
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:none !important;
  opacity:1 !important;
  cursor:pointer;
}
.panel label{
  color:#ffffff;
  font-weight:900;
}