*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#17243d;background:#fff}.container{width:min(1120px,92%);margin:auto}header{height:70px;border-bottom:1px solid #e5eaf1;background:#fff;position:sticky;top:0;z-index:10}.nav{height:100%;display:flex;align-items:center}.brand{font-weight:900;font-size:22px;text-decoration:none;color:#17243d;margin-right:auto}.brand span{color:#176b3a}nav{display:flex;gap:25px}nav a{color:#69768d;text-decoration:none;font-size:14px;font-weight:700}.hero{padding:80px 0;background:linear-gradient(135deg,#f7faff,#fff)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2px;color:#176b3a;font-weight:900;margin:0 0 12px}h1{font-size:58px;line-height:1.03;letter-spacing:-3px;margin:0 0 20px}h1 span{color:#176b3a}.lead{color:#6e7b91;line-height:1.75;max-width:600px}.button{display:inline-block;text-decoration:none;padding:13px 19px;border-radius:10px;font-weight:800}.primary{background:#176b3a;color:#fff}.notes{display:flex;gap:20px;color:#69768d;font-size:12px;margin-top:20px}.info-card{background:#fff;border:1px solid #e1e7f0;border-radius:20px;padding:35px;box-shadow:0 25px 60px #183b7514}.info-card p{font-size:10px;letter-spacing:2px;color:#8b96a9;font-weight:900}.info-card strong{font-size:40px}.info-card small{color:#8994a7}.line{height:1px;background:#e7ebf1;margin:25px 0}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-stats div{background:#f7f9fc;padding:15px;border-radius:10px}.mini-stats b,.mini-stats small{display:block}.section{padding:75px 0}.gray{background:#f7f9fc}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}h2{font-size:34px;margin:0;letter-spacing:-1px}.heading input{height:42px;border:1px solid #dbe2ed;border-radius:10px;padding:0 14px;outline:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid #e1e7f0;border-radius:16px;overflow:hidden;background:#fff;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #183b7514}.avatar{height:175px;background:linear-gradient(135deg,#dcefe3,#f5f7ff);display:flex;align-items:center;justify-content:center;color:#176b3a;font-size:36px;font-weight:900}.card-body{padding:18px}.card-body h3{margin:0 0 6px;font-size:17px}.card-body p{color:#8994a7;font-size:12px;margin:0 0 18px}.row{display:flex;justify-content:space-between;align-items:center}.vote-count{font-size:12px;font-weight:800;color:#52617a}.vote{border:0;border-radius:9px;background:#176b3a;color:#fff;padding:10px 14px;font-weight:800;cursor:pointer}.result{background:#fff;border:1px solid #e2e8f1;border-radius:12px;padding:17px;margin-bottom:12px;display:grid;grid-template-columns:40px 190px 1fr 65px;gap:14px;align-items:center}.rank{font-weight:900;color:#8a96a9}.result-name{font-weight:800}.bar{height:9px;background:#edf1f6;border-radius:20px;overflow:hidden}.bar div{height:100%;background:#176b3a}.pct{font-weight:900;color:#176b3a;text-align:right}.live{font-size:11px;color:#15945b;background:#eaf9f1;padding:8px 12px;border-radius:20px;font-weight:900}.center{text-align:center;margin-bottom:35px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps div{border:1px solid #e1e7f0;border-radius:15px;padding:25px}.steps b{display:flex;width:40px;height:40px;background:#eaf1ff;color:#176b3a;border-radius:10px;align-items:center;justify-content:center}.steps h3{margin-bottom:7px}.steps p{color:#7d899d;font-size:13px;line-height:1.6}footer{border-top:1px solid #e7ebf1;padding:25px;color:#8994a7;font-size:12px}.modal{position:fixed;inset:0;background:#07142ecc;display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.hidden{display:none}.modal-box{background:#fff;width:min(480px,100%);border-radius:18px;padding:30px;position:relative;box-shadow:0 30px 80px #0005}.close{position:absolute;right:15px;top:15px;border:0;background:#f1f3f7;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer}.modal-box h2{margin-bottom:8px}.muted{color:#7d899d;font-size:13px}.amount{font-size:30px;font-weight:900;margin:20px 0}.qty{display:flex;gap:9px;align-items:center}.qty button{width:42px;height:42px;background:#fff;border:1px solid #dbe2ed;border-radius:9px;font-size:20px;cursor:pointer}.qty input{width:65px;height:42px;text-align:center;border:1px solid #dbe2ed;border-radius:9px}.pay-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.pay{padding:13px;border:1px solid #dbe2ed;background:#fff;border-radius:10px;text-align:left;cursor:pointer}.pay.selected{border-color:#176b3a;background:#f1f5ff}.pay b,.pay span{display:block}.pay span{font-size:11px;color:#7d899d;margin-top:4px}.full{width:100%;border:0}.success{text-align:center}.success-icon{width:60px;height:60px;border-radius:50%;background:#eaf9f1;color:#15945b;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;margin:auto}@media(max-width:850px){nav{display:none}.hero-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}h1{font-size:45px}}@media(max-width:520px){.grid{grid-template-columns:1fr}.notes{flex-direction:column}.result{grid-template-columns:35px 1fr}.bar,.pct{grid-column:2}.pct{text-align:left}}

.modal-candidate-photo{width:160px;height:160px;object-fit:cover;border-radius:16px;display:block;margin:0 auto 18px}.payment-info{font-size:13px;line-height:1.5;color:#7d899d;margin:12px 0}.empty{grid-column:1/-1;text-align:center;color:#8994a7;padding:30px}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.brimuda-brand{font-family:"Brimuda","Trebuchet MS",Arial,sans-serif;font-size:28px;font-weight:900;color:#145a31;letter-spacing:-1px}
.recap-section{background:#f5f8f6}.section-desc{color:#718276;line-height:1.6;margin:8px 0 0;font-size:13px}
.refresh-btn{border:1px solid #b9d4c3;background:#fff;color:#176b3a;border-radius:10px;padding:10px 15px;font-weight:800;cursor:pointer}
.winner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.winner-card{position:relative;min-height:190px;background:#fff;border:1px solid #d9e6de;border-radius:18px;padding:24px;overflow:hidden;box-shadow:0 10px 30px #153b2510}.winner-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#176b3a}
.winner-number{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:#e8f5ec;color:#176b3a;font-weight:900;margin-bottom:18px}.winner-category{color:#176b3a;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:900}.winner-content h3{font-size:22px;margin:8px 0;color:#173c27}.winner-school{color:#51675a;font-weight:700;margin:0 0 8px}.winner-note{color:#89998f;font-size:12px;line-height:1.5;margin:0}.winner-trophy{position:absolute;right:20px;top:20px;font-size:28px}.winner-empty{grid-column:1/-1;background:#fff;border:1px dashed #b9d4c3;border-radius:16px;padding:35px;text-align:center;color:#718276}.excel-info{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px;border:1px solid #d9e6de;border-radius:14px;background:#eef8f1}
.excel-icon{width:82px;height:82px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border-radius:12px;overflow:hidden}
.excel-icon img{width:82px;height:82px;object-fit:contain;display:block}
.excel-info strong{color:#17472d}
.excel-info p{color:#718276;font-size:12px;line-height:1.6;margin:4px 0}
.recap-updated{text-align:right;color:#89998f;font-size:11px;margin-top:12px}
@media(max-width:850px){.winner-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.winner-grid{grid-template-columns:1fr}.brimuda-brand{font-size:24px}}
@media(max-width:520px){.excel-icon{width:62px;height:62px}.excel-icon img{width:62px;height:62px}.excel-info{gap:12px}}

/* Logo Brimuda di halaman utama - VERSI KOTAK */
.hero-info-card{overflow:hidden}
.hero-logo-wrap{display:flex;justify-content:center;align-items:center;margin:-8px 0 28px}
.hero-logo{
  width:min(100%,420px);
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:20px;
  display:block;
  box-shadow:0 18px 45px #183b7520;
  border:6px solid #fff
}
@media(max-width:850px){
  .hero-logo{width:min(100%,320px)}
}


/* ===== BRIMUDA PRODUCTION / MOBILE POLISH ===== */
img{max-width:100%}
button,input{font:inherit}
button:disabled{opacity:.6;cursor:not-allowed}
.retry-btn{margin-top:12px;border:0;background:#176b3a;color:#fff;padding:10px 15px;border-radius:9px;font-weight:800;cursor:pointer}
.error-box{color:#b42318;background:#fff5f4;border:1px solid #ffd0cc;border-radius:14px}
.error-box p{color:#7d5a57;font-size:13px}
.card,.winner-card,.info-card,.steps div,.result{will-change:transform}
@media(max-width:850px){
  header{height:auto;position:sticky}
  .nav{padding:14px 0;gap:12px}
  .brand{margin-right:0}
  nav{display:flex;width:100%;overflow-x:auto;gap:16px;padding-bottom:3px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}
  .hero{padding:48px 0}
  .hero-grid{gap:35px}
  .heading{align-items:flex-start;gap:18px;flex-direction:column}
  .heading input{width:100%}
  .grid{grid-template-columns:repeat(2,1fr)}
  .winner-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .container{width:92%}
  .section{padding:55px 0}
  h1{font-size:40px;letter-spacing:-2px}
  h2{font-size:28px}
  .grid,.winner-grid{grid-template-columns:1fr}
  .result{grid-template-columns:34px 1fr;gap:8px}
  .bar,.pct{grid-column:2}
  .pct{text-align:left}
  .modal-box{padding:24px}
  .pay-options{grid-template-columns:1fr}
  .hero-logo{width:min(100%,230px)}
}

/* CSP-safe result bar widths */
.bar-0{width:0%}
.bar-1{width:1%}
.bar-2{width:2%}
.bar-3{width:3%}
.bar-4{width:4%}
.bar-5{width:5%}
.bar-6{width:6%}
.bar-7{width:7%}
.bar-8{width:8%}
.bar-9{width:9%}
.bar-10{width:10%}
.bar-11{width:11%}
.bar-12{width:12%}
.bar-13{width:13%}
.bar-14{width:14%}
.bar-15{width:15%}
.bar-16{width:16%}
.bar-17{width:17%}
.bar-18{width:18%}
.bar-19{width:19%}
.bar-20{width:20%}
.bar-21{width:21%}
.bar-22{width:22%}
.bar-23{width:23%}
.bar-24{width:24%}
.bar-25{width:25%}
.bar-26{width:26%}
.bar-27{width:27%}
.bar-28{width:28%}
.bar-29{width:29%}
.bar-30{width:30%}
.bar-31{width:31%}
.bar-32{width:32%}
.bar-33{width:33%}
.bar-34{width:34%}
.bar-35{width:35%}
.bar-36{width:36%}
.bar-37{width:37%}
.bar-38{width:38%}
.bar-39{width:39%}
.bar-40{width:40%}
.bar-41{width:41%}
.bar-42{width:42%}
.bar-43{width:43%}
.bar-44{width:44%}
.bar-45{width:45%}
.bar-46{width:46%}
.bar-47{width:47%}
.bar-48{width:48%}
.bar-49{width:49%}
.bar-50{width:50%}
.bar-51{width:51%}
.bar-52{width:52%}
.bar-53{width:53%}
.bar-54{width:54%}
.bar-55{width:55%}
.bar-56{width:56%}
.bar-57{width:57%}
.bar-58{width:58%}
.bar-59{width:59%}
.bar-60{width:60%}
.bar-61{width:61%}
.bar-62{width:62%}
.bar-63{width:63%}
.bar-64{width:64%}
.bar-65{width:65%}
.bar-66{width:66%}
.bar-67{width:67%}
.bar-68{width:68%}
.bar-69{width:69%}
.bar-70{width:70%}
.bar-71{width:71%}
.bar-72{width:72%}
.bar-73{width:73%}
.bar-74{width:74%}
.bar-75{width:75%}
.bar-76{width:76%}
.bar-77{width:77%}
.bar-78{width:78%}
.bar-79{width:79%}
.bar-80{width:80%}
.bar-81{width:81%}
.bar-82{width:82%}
.bar-83{width:83%}
.bar-84{width:84%}
.bar-85{width:85%}
.bar-86{width:86%}
.bar-87{width:87%}
.bar-88{width:88%}
.bar-89{width:89%}
.bar-90{width:90%}
.bar-91{width:91%}
.bar-92{width:92%}
.bar-93{width:93%}
.bar-94{width:94%}
.bar-95{width:95%}
.bar-96{width:96%}
.bar-97{width:97%}
.bar-98{width:98%}
.bar-99{width:99%}
.bar-100{width:100%}

/* Pemisahan jenjang SMP dan SMA */
.level-tabs{display:flex;gap:10px;margin:22px 0 12px}.level-tab{border:1px solid #dbe2ed;background:#fff;color:#52617a;border-radius:10px;padding:11px 22px;font-weight:800;cursor:pointer}.level-tab.active{background:#176b3a;border-color:#176b3a;color:#fff;box-shadow:0 6px 16px #176b3a24}.level-description{color:#718096;font-size:13px;margin:0 0 18px}.result-tabs{margin:0 0 18px}