@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono.woff2") format("woff2");font-weight:400;font-display:swap}

/* NEW COLOR SCHEME - Royal Blue + Yellow Accent */
:root{
  --brand-ink:#000;
  --brand-blue:#0B5394;
  --brand-royal:#15599C;
  --brand-yellow:#FFC107;
  --brand-red:#D32F2F;
  --brand-white:#fff;
  --brand-gray:#f8f8f8;
  --font-display:"Space Grotesk","Arial Narrow",sans-serif;
  --font-body:"IBM Plex Sans",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --brand-shadow:8px 8px 0 var(--brand-ink);
  --primary:var(--brand-blue);
  --secondary:var(--brand-yellow);
  --background:var(--brand-white);
  --surface:var(--brand-white);
  --text:var(--brand-ink);
  --muted:var(--brand-blue);
  --danger:var(--brand-red);
  --border:var(--brand-ink)
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{color:var(--brand-ink);background:var(--brand-white);font:16px/1.55 var(--font-body)}
h1,h2,h3,legend,.button,button{font-family:var(--font-display)}
h1,h2,h3{color:var(--brand-ink);letter-spacing:-.035em}
h1{font-size:clamp(2rem,5vw,3.7rem);line-height:.98;font-weight:700;text-wrap:balance}
h2{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.05}
a{color:var(--brand-blue);text-underline-offset:.18em}
a:hover{color:var(--brand-ink)}
:focus-visible{outline:3px solid var(--brand-yellow);outline-offset:3px}

.eyebrow,.brand-kicker{color:var(--brand-yellow);font:600 .76rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.tag,.admin-metric-label,.admin-results-heading{font:600 .76rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:2px solid var(--brand-ink);display:inline-block;background:var(--brand-white)}

/* Tag color variants */
.tag-checkpoint,.tag[data-exam="checkpoint"]{background:var(--brand-blue);color:var(--brand-white);border-color:var(--brand-ink)}
.tag-igcse,.tag[data-exam="igcse"]{background:var(--brand-yellow);color:var(--brand-ink);border-color:var(--brand-ink)}
.tag-alevel,.tag[data-exam="alevel"]{background:var(--brand-red);color:var(--brand-white);border-color:var(--brand-ink)}

.site-head{display:block;background:var(--brand-white);border-bottom:4px solid var(--brand-ink);padding:12px clamp(16px,4vw,64px)}
.site-head-inner{width:min(100%,1240px);max-width:1240px;min-height:76px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.school-brand{display:inline-flex;align-items:center;gap:13px;color:var(--brand-ink);text-decoration:none}
.school-brand:hover{color:var(--brand-ink)}
.sgia-school-logo{width:54px;height:62px;flex:0 0 auto;object-fit:contain}
.school-brand-copy{display:grid;gap:2px}
.school-brand-copy strong{font:700 clamp(.85rem,1.6vw,1.08rem)/1.05 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
.school-brand-copy small{color:var(--brand-yellow);font:500 .72rem/1.35 var(--font-mono)}
.cambridge-brand{display:flex;align-items:center;justify-content:center;min-width:174px;max-width:225px;min-height:58px;padding:5px 12px;border:3px solid var(--brand-ink);background:var(--brand-white)}
.cambridge-international-logo{width:100%;max-height:58px;object-fit:contain}

.wrap{width:calc(100% - 40px);max-width:1180px;margin:34px auto 52px;padding:0}
.wrap>a:first-child:not(.button){display:inline-block;margin-bottom:16px;font:600 .78rem/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--brand-white);background:var(--brand-blue);padding:8px 16px;border:3px solid var(--brand-ink);text-decoration:none;box-shadow:4px 4px 0 var(--brand-ink)}

/* HERO - Blue background like the image */
.hero{margin:30px 0 36px;padding:clamp(26px,5vw,58px);border:4px solid var(--brand-ink);background:var(--brand-royal);color:var(--brand-white);box-shadow:var(--brand-shadow)}
.hero:before{content:"SGIA / EXAM REGISTRATION";display:block;width:fit-content;margin-bottom:24px;padding:8px 14px;border:3px solid var(--brand-ink);background:var(--brand-yellow);color:var(--brand-ink);font:700 .72rem var(--font-mono);letter-spacing:.08em}
.hero h1{max-width:850px;margin:0 0 18px;text-transform:uppercase;color:var(--brand-white)}
.hero>p:last-child{max-width:58ch;margin-bottom:0;font-size:1.08rem;color:var(--brand-white)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.card,.panel{min-width:0;padding:22px;border:4px solid var(--brand-ink);border-radius:0;background:var(--brand-white);box-shadow:8px 8px 0 var(--brand-ink)}
.card{display:flex;flex-direction:column}
.card h2{margin:14px 0 8px;color:var(--brand-ink)}
.card p{color:var(--brand-ink)}
.card dl{display:grid;grid-template-columns:minmax(94px,.8fr) 1.2fr;gap:6px 12px;margin:14px 0 22px;font-size:.92rem}
.card dt{color:var(--brand-blue);font:500 .72rem/1.45 var(--font-mono);text-transform:uppercase}
.card dd{margin:0;font-weight:600;color:var(--brand-ink)}
.card .button{margin-top:auto;align-self:flex-start}

/* BUTTONS - Yellow with black border and shadow */
.button,button,input[type=submit]{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:3px solid var(--brand-ink);border-radius:0;background:var(--brand-yellow);box-shadow:6px 6px 0 var(--brand-ink);color:var(--brand-ink);font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform 120ms ease,box-shadow 120ms ease}
.button:hover,button:hover,input[type=submit]:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--brand-ink)}
.button-secondary{background:var(--brand-white);color:var(--brand-ink)}

.center{margin:34px auto;text-align:center}
.center a{color:var(--brand-blue);font-weight:600}

.notice,.admin-page .notice,.admin-auth .notice{padding:14px 16px;margin:16px 0;border:3px solid var(--brand-ink);border-radius:0;background:var(--brand-gray);color:var(--brand-ink);font-weight:600}
.notice.error,.admin-page .notice.error,.admin-auth .notice.error{border-left-width:8px;border-left-color:var(--brand-red);background:var(--brand-white)}
.notice.error:before,.admin-page .notice.error:before,.admin-auth .notice.error:before{content:"CHECK / ";font:600 .72rem var(--font-mono)}

table{width:100%;border-collapse:collapse;background:var(--brand-white)}
th,td{padding:11px 13px;border:2px solid var(--brand-ink);text-align:left}
th{background:var(--brand-gray);font:600 .76rem/1.4 var(--font-mono);text-transform:uppercase;color:var(--brand-ink)}

label{color:var(--brand-ink);font-weight:600}
input,select,textarea{border:2px solid var(--brand-ink);border-radius:0;background:var(--brand-white);color:var(--brand-ink);font:inherit;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-yellow);outline-offset:1px}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-blue)}

fieldset{border:3px solid var(--brand-ink);border-radius:0;padding:20px}
fieldset legend{padding:0 8px;font-weight:700}

.grid{gap:12px 18px}
.subject{border:2px solid var(--brand-ink);border-radius:0;background:var(--brand-white);padding:12px}
.subject:nth-child(even){background:var(--brand-gray)}
.total{color:var(--brand-blue);font:700 1.25rem var(--font-display)}

/* ADMIN THEME */
.admin-page,.admin-auth{color:var(--brand-ink);background:var(--brand-white);font-family:var(--font-body)}
.admin-page a,.admin-auth a{color:var(--brand-blue)}
.admin-shell{max-width:1280px;margin:auto;padding:clamp(18px,3.2vw,40px) clamp(16px,3.5vw,36px)}
.admin-header{border-bottom:4px solid var(--brand-yellow);background:var(--brand-ink);color:var(--brand-white)}
.admin-header-inner{max-width:1280px;min-height:86px;margin:auto;padding:12px clamp(16px,3.5vw,36px);display:flex;align-items:center;justify-content:space-between;gap:22px}
.admin-brand-lockup{display:flex;align-items:center;gap:11px;min-width:0}
.admin-school-logo{width:42px;height:50px;object-fit:contain;background:var(--brand-white);padding:2px}
.admin-brand{color:var(--brand-white)!important;font:700 1rem/1.05 var(--font-display);text-decoration:none;text-transform:uppercase}
.admin-brand small{display:block;margin-top:5px;color:var(--brand-yellow);font:500 .65rem/1.3 var(--font-mono)}
.admin-cambridge{width:118px;max-height:45px;padding:3px 7px;border:2px solid var(--brand-ink);background:var(--brand-white);object-fit:contain}
.admin-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.admin-tools nav{display:flex;gap:7px;flex-wrap:wrap}
.admin-tools nav a{padding:8px 10px;border:2px solid var(--brand-yellow);border-radius:0;color:var(--brand-white);font:500 .7rem/1.2 var(--font-mono);text-transform:uppercase;text-decoration:none}
.admin-tools nav a[aria-current=page],.admin-tools nav a:hover{background:var(--brand-yellow);color:var(--brand-ink)}
.admin-user{color:var(--brand-yellow);font:500 .68rem var(--font-mono)}
.admin-logout{margin:0}
.admin-logout button{min-height:38px;padding:7px 10px;border:2px solid var(--brand-yellow);border-radius:0;background:transparent;box-shadow:none;color:var(--brand-white);font:500 .72rem var(--font-mono)}
.admin-logout button:hover{background:var(--brand-yellow);color:var(--brand-ink)}

.admin-auth{min-height:100vh;padding:24px;background:var(--brand-gray)}
.admin-auth-card{width:min(100%,520px);padding:clamp(22px,4vw,38px);background:var(--brand-white);border:4px solid var(--brand-ink);box-shadow:8px 8px 0 var(--brand-ink)}
.admin-auth-marks{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding:12px;border:3px solid var(--brand-ink);background:var(--brand-gray)}
.admin-auth-school-logo{width:62px;height:74px;object-fit:contain}
.admin-auth-cambridge-logo{width:min(70%,210px);max-height:70px;object-fit:contain}
.admin-auth-ib-logo,.admin-auth-icas-logo{width:70px;height:70px;object-fit:contain;background:var(--brand-white)}
.admin-auth-card .admin-brand{display:block;margin-bottom:14px;color:var(--brand-ink)!important}
.admin-auth-card .admin-brand small{color:var(--brand-yellow)}
.admin-login-form{margin-top:20px}
.admin-auth-card .admin-setup{display:inline-block;margin-top:20px;padding-bottom:3px;border-bottom:2px solid currentColor;font:500 .72rem var(--font-mono);text-transform:uppercase}
.admin-pagination{font-family:var(--font-mono)}

@media(max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-header-inner{align-items:flex-start;flex-wrap:wrap}
  .admin-tools{justify-content:flex-start}
}

@media(max-width:760px){
  .site-head-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;min-width:0}
  .school-brand{grid-column:1;width:100%;min-width:0}
  .cambridge-brand{grid-column:1;justify-self:end;margin-left:0}
  .cards{grid-template-columns:1fr}
  .hero{margin:24px 0 30px}
  .admin-header-inner{flex-direction:column;gap:14px}
  .admin-tools{width:100%;align-items:flex-start}
  .admin-tools nav{width:100%}
  .admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .site-head-inner{align-items:flex-start}
  .sgia-school-logo{width:44px;height:52px}
  .school-brand-copy strong{font-size:.78rem}
  .school-brand-copy small{font-size:.61rem}
  .cambridge-brand{min-width:140px;max-width:175px;min-height:46px;padding:4px 8px}
  .wrap{width:calc(100% - 28px);max-width:1180px;margin:22px auto 38px;padding:0}
  .hero{padding:22px 18px;box-shadow:6px 6px 0 var(--brand-ink)}
  .card,.panel{padding:17px;box-shadow:6px 6px 0 var(--brand-ink)}
  .card dl{grid-template-columns:1fr;gap:3px}
  .card dd{margin-bottom:8px}
  .grid{grid-template-columns:1fr}
  .subject{flex-wrap:wrap}
  .subject .level-select{width:100%;max-width:none}
  .admin-metrics{grid-template-columns:1fr}
  .admin-shell{padding:20px 14px}
  .admin-filters{grid-template-columns:1fr}
  .admin-filters .filter-search{grid-column:auto}
  .admin-settings>fieldset{grid-template-columns:1fr;padding:15px}
  .admin-auth{padding:14px}
  .admin-auth-marks{align-items:center}
  .admin-auth-school-logo{width:50px;height:60px}
  .admin-auth-cambridge-logo{width:min(74%,170px)}
  .admin-auth-ib-logo,.admin-auth-icas-logo{width:50px;height:60px}
}

@media(max-width:420px){
  .admin-auth{padding:12px}
  .admin-auth-card{padding:18px;box-shadow:5px 5px 0 var(--brand-ink)}
  .admin-auth-marks{gap:10px;padding:9px;min-width:0}
  .admin-auth-school-logo{width:44px;height:54px;flex:0 0 auto}
  .admin-auth-cambridge-logo{width:calc(100% - 54px);max-width:150px;max-height:54px;min-width:0}
  .admin-auth-ib-logo,.admin-auth-icas-logo{display:none}
}
.sgia-school-logo{width:80px;height:92px;flex:0 0 auto;object-fit:contain}
.school-brand-copy small{display:none}

.exam-logos{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.exam-logo-item{display:flex;align-items:center;justify-content:center;padding:6px 10px;border:2px solid var(--brand-ink);background:var(--brand-white);min-height:65px}
.ib-logo{height:55px;width:auto;object-fit:contain}
.cambridge-logo{height:50px;width:auto;max-width:180px;object-fit:contain}
.icas-logo{height:50px;width:auto;max-width:140px;object-fit:contain}

@media(max-width:980px){
.sgia-school-logo{width:70px;height:80px}
.exam-logos{gap:12px}
.exam-logo-item{padding:5px 8px;min-height:58px}
.ib-logo{height:48px}
.cambridge-logo{height:45px;max-width:160px}
.icas-logo{height:45px;max-width:120px}
}

@media(max-width:760px){
.site-head-inner{flex-direction:column;gap:12px}
.school-brand{width:100%;justify-content:center}
.exam-logos{width:100%;justify-content:center;gap:10px}
.sgia-school-logo{width:60px;height:70px}
.exam-logo-item{padding:4px 7px;min-height:52px}
.ib-logo{height:42px}
.cambridge-logo{height:40px;max-width:140px}
.icas-logo{height:40px;max-width:110px}
}

/* ADMIN HEADER — logo seragam dan proporsional */
.admin-header .admin-brand-lockup{gap:14px}
.admin-header .admin-school-logo{height:40px;width:auto;max-width:48px;padding:4px 6px;background:var(--brand-white);border:0;object-fit:contain}
.admin-header .admin-cambridge{height:30px;width:auto;max-width:120px;padding:3px 8px;border:0;background:var(--brand-white);object-fit:contain}
.admin-header .admin-brand{white-space:nowrap}
@media(max-width:560px){
  .admin-header .admin-school-logo{height:34px;max-width:42px}
  .admin-header .admin-cambridge{height:26px;max-width:104px}
}