:root {
  --bg: #08101f;
  --bg-soft: #101b31;
  --card: rgba(16, 27, 49, 0.88);
  --line: rgba(255,255,255,0.1);
  --text: #f4f7fb;
  --muted: #bfc9db;
  --red: #d70f19;
  --red-dark: #9f0c13;
  --gold: #e7d54d;
  --blue: #2954d1;
  --shadow: 0 22px 50px rgba(0,0,0,0.35);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(41,84,209,.28), transparent 32%),
    radial-gradient(circle at top right, rgba(215,15,25,.18), transparent 34%),
    linear-gradient(180deg, #07101d, #0b1425 48%, #07101a 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7,16,29,0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: .04em; }
.brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 14px; box-shadow: var(--shadow); }
.brand-text small { display:block; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.nav-links a {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-weight: 600; transition: .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: white; border-color: rgba(231,213,77,.65); background: rgba(231,213,77,.08); }
.hero { padding: 48px 0 30px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.panel-body { padding: 28px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size: .84rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
h1, h2, h3 { margin: 0 0 14px; line-height: 1.04; }
h1 { font-size: clamp(2.4rem, 5vw, 4.7rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.15rem; }
p { color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
.hero-actions, .cta-grid, .grid-2, .grid-3, .grid-4 { display:grid; gap: 16px; }
.hero-actions { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 18px; border-radius: 16px; border: 1px solid transparent; font-weight: 800;
  cursor: pointer; transition: .2s ease; text-align:center;
}
.btn-primary { background: linear-gradient(135deg, var(--red), #ff2531); color: white; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(215,15,25,.25); }
.btn-secondary { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: white; }
.btn-secondary:hover { border-color: rgba(231,213,77,.6); }
.section { padding: 18px 0 42px; }
.kpi { padding: 20px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,0.03); }
.kpi strong { display:block; font-size: 1.8rem; color: white; margin-bottom: 6px; }
.card { padding: 22px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,0.035); }
.card h3 { margin-bottom: 8px; }
.card .mini { color: var(--gold); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
label { display:flex; flex-direction:column; gap: 8px; font-size: .94rem; font-weight: 600; color: white; }
input, select, textarea {
  width:100%; padding: 14px 14px; border-radius: 14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(4,10,20,.5); color: white; font: inherit;
}
input::placeholder, textarea::placeholder { color: #97a5bd; }
.help { font-size: .88rem; color: var(--muted); }
.alert { padding: 14px 16px; border-radius: 14px; margin-top: 14px; font-weight: 700; }
.alert.success { background: rgba(57, 189, 120, .14); border: 1px solid rgba(57,189,120,.26); color: #9ff1be; }
.alert.error { background: rgba(215, 15, 25, .14); border: 1px solid rgba(215,15,25,.26); color: #ffc3c7; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius: 18px; }
table { width:100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); background: rgba(255,255,255,.03); }
tr:last-child td { border-bottom: 0; }
.badge { display:inline-flex; align-items:center; padding: 6px 10px; border-radius:999px; font-weight: 700; font-size: .8rem; }
.badge.gold { background: rgba(231,213,77,.12); color: var(--gold); }
.badge.red { background: rgba(215,15,25,.12); color: #ffb7bc; }
.badge.blue { background: rgba(41,84,209,.14); color: #bfd0ff; }
.badge.green { background: rgba(56,200,123,.14); color: #9cf2c0; }
.match-card { padding: 18px; border:1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.03); display:grid; gap: 10px; }
.match-line { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.score-box { display:flex; align-items:center; gap: 10px; }
.score-box input { width: 84px; text-align: center; }
.footer { padding: 28px 0 48px; color: var(--muted); }
.logo-panel { display:flex; justify-content:center; align-items:center; padding: 18px; min-height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.logo-panel img { max-height: 520px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.timeline { display:grid; gap: 12px; }
.timeline .step { display:grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.timeline .step strong { color: white; }
.division-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 18px; }
.division-tabs button { padding: 12px 14px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: white; font-weight: 700; cursor:pointer; }
.division-tabs button.active { border-color: rgba(231,213,77,.65); background: rgba(231,213,77,.08); color: var(--gold); }
.hidden { display:none !important; }
.center { text-align:center; }
@media (max-width: 980px) {
  .hero-grid, .grid-4, .grid-3, .grid-2, .form-grid, .hero-actions { grid-template-columns: 1fr; }
  .nav-row { flex-direction: column; align-items: stretch; }
  .brand { justify-content: center; }
  .nav-links { justify-content: center; }
  h1 { font-size: 2.6rem; }
}


.member-profile-card{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:start}
.identity-photo-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.identity-photo{width:120px;height:150px;border-radius:18px;object-fit:cover;border:1px solid rgba(255,255,255,.12);background:#0f1522;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.identity-photo-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;color:var(--muted)}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.photo-admin-cell{display:flex;align-items:center;gap:12px}
.photo-admin-thumb{width:48px;height:60px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12);background:#0f1522}
.photo-admin-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;padding:4px}
.admin-photo-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width: 760px){.member-profile-card{grid-template-columns:1fr}.identity-photo-wrap{align-items:center}}


.admin-partner-logo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.partner-logo-public{width:88px;height:88px;border-radius:16px;object-fit:contain;border:1px solid rgba(255,255,255,.12);background:#fff;margin-bottom:14px;padding:8px}
.partner-logo-admin{width:56px;height:56px;border-radius:12px;object-fit:contain;border:1px solid rgba(255,255,255,.12);background:#fff;padding:6px}
.partner-logo-admin.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;text-align:center;padding:4px}

#admin-partner-logo-preview.photo-admin-thumb{object-fit:contain;background:#fff;padding:6px}


.admin-division-list{display:grid;gap:12px}
.admin-division-item{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}
.admin-division-meta{color:var(--muted);font-size:13px}
.admin-division-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.admin-division-item input{min-width:0}
@media (max-width: 720px){
  .admin-division-item{grid-template-columns:1fr}
  .admin-division-actions{justify-content:flex-start}
}


.admin-division-config{display:grid;grid-template-columns:minmax(180px,1fr) 150px;gap:12px;align-items:end}
.admin-division-config input[type="number"]{width:100%}



/* Responsive upgrade: tablet + mobile */
@media (max-width: 1180px){
  .container{width:min(100% - 28px, 1000px)}
  .panel-body{padding:24px}
}

@media (max-width: 860px){
  .container{width:min(100% - 22px, 100%)}
  .panel-body{padding:20px}
  .hero{padding:28px 0 18px}
  .section{padding:14px 0 28px}
  .btn{width:100%}
  .hero-actions{grid-template-columns:1fr}
  .logo-panel img{max-height:280px}
  .match-line{align-items:flex-start}
  .score-box{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .score-box input{width:72px}
  .admin-partner-logo-row{align-items:flex-start}
  .table-wrap{border-radius:16px}
  table{min-width:680px}
}

@media (max-width: 640px){
  body{font-size:15px}
  .nav-row{padding:12px 0}
  .brand{gap:10px}
  .brand img{width:48px;height:48px}
  .brand-text{font-size:.96rem}
  .brand-text small{font-size:.78rem}
  .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .nav-links a{padding:11px 12px;text-align:center}
  .panel-body{padding:18px}
  .card,.kpi{padding:18px}
  .hero-grid,.grid-4,.grid-3,.grid-2,.form-grid,.hero-actions{grid-template-columns:1fr !important}
  .division-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .division-tabs button{width:100%}
  .table-wrap{margin:0 -2px}
  table{min-width:620px}
  th,td{padding:12px 10px}
  .admin-division-config{grid-template-columns:1fr}
  .admin-division-item{padding:12px}
  .partner-logo-public{width:76px;height:76px}
}

@media (max-width: 480px){
  .container{width:min(100% - 16px, 100%)}
  .hero{padding:22px 0 14px}
  .panel-body{padding:16px}
  .card,.kpi{padding:16px;border-radius:16px}
  .btn{padding:13px 14px;border-radius:14px}
  h1{font-size:2rem}
  h2{font-size:1.4rem}
  p{line-height:1.55}
  .nav-links{grid-template-columns:1fr}
  .division-tabs{grid-template-columns:1fr}
  .score-box{gap:8px}
  .score-box input{width:64px}
  .identity-photo{width:100px;height:128px}
  .partner-logo-public{width:68px;height:68px}
  .partner-logo-admin{width:52px;height:52px}
  table{min-width:560px}
}

/* Safer embeds/images on small screens */
iframe, video, canvas, img{max-width:100%}


.hero-panel-body{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero-pdl-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:8px 0 2px;
}
.hero-pdl-logo{
  width:min(100%, 620px);
  max-height:260px;
  object-fit:contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.hero-actions-wrap{
  width:100%;
}
@media (max-width: 860px){
  .hero-pdl-logo{
    width:min(100%, 520px);
    max-height:220px;
  }
}
@media (max-width: 640px){
  .hero-pdl-logo{
    width:100%;
    max-height:180px;
  }
  .hero-panel-body{
    gap:18px;
  }
}

.admin-calendar-note{margin:0 0 18px;color:var(--muted);}