:root{--navy:#073f63;--navy2:#0b2f50;--blue:#0878ad;--ink:#183247;--muted:#718393;--line:#dbe6ee;--bg:#f2f7fb;--green:#1c9c62;--red:#d94a5a;--shadow:0 14px 42px rgba(15,55,84,.10)}*{box-sizing:border-box}body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.login-page{min-height:100vh;background:linear-gradient(145deg,#052b48,#07557e 58%,#083350);display:grid;place-items:center;padding:24px}.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.brand{color:#fff}.brand img{width:min(350px,78%);max-height:105px;object-fit:contain;object-position:left center}.brand .eyebrow{margin-top:30px;color:#8ed7f7;font-size:12px;font-weight:900;letter-spacing:1.5px}.brand h1{font-size:54px;line-height:1.02;letter-spacing:-2.7px;margin:10px 0 16px}.brand p{color:#bdd4e3;line-height:1.7;max-width:540px}.login-card{background:#fff;border-radius:28px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-card h2{font-size:30px;margin:8px 0}.field{margin-top:16px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:1px solid #ccd9e3;background:#fbfdff;border-radius:13px;padding:13px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#1885b9;box-shadow:0 0 0 4px rgba(24,133,185,.09)}.btn{border:0;border-radius:13px;padding:13px 17px;font-weight:900;cursor:pointer}.btn-primary{background:#07557e;color:#fff}.btn-secondary{background:#fff;border:1px solid var(--line);color:#2a465b}.btn-danger{background:#fff0f2;color:#bd3048}.login-card .btn{width:100%;margin-top:20px}.error{background:#fff0f2;color:#a72b3e;border-radius:12px;padding:12px;margin-top:14px}.admin{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:#092f50;color:#d9eaf5;padding:22px 15px;position:sticky;top:0;height:100vh;overflow:auto}.side-logo{padding:8px 12px 22px}.side-logo img{width:190px;max-height:60px;object-fit:contain;object-position:left center}.side-section{font-size:10px;font-weight:900;letter-spacing:1.3px;color:#7ca7c6;margin:18px 11px 8px}.navbtn{border:0;background:transparent;color:#d9eaf5;width:100%;text-align:left;padding:11px 12px;border-radius:11px;font-weight:700;margin:3px 0;cursor:pointer}.navbtn.active,.navbtn:hover{background:rgba(255,255,255,.1);color:#fff}.main{padding:25px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.topbar h1{font-size:30px;margin:0}.topbar p{color:var(--muted);margin:5px 0 0}.user{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 10px}.avatar{width:36px;height:36px;border-radius:11px;background:#0c6e9f;color:#fff;display:grid;place-items:center;font-weight:900}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.stat span{font-size:11px;color:#708493;font-weight:800}.stat strong{display:block;font-size:30px;margin-top:7px}.panels{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px;box-shadow:var(--shadow);min-width:0}.panel h3{margin:0 0 5px}.panel p{margin:0 0 17px;color:var(--muted);font-size:13px}.bars{display:grid;gap:10px}.bar{display:grid;grid-template-columns:150px 1fr 40px;gap:8px;align-items:center;font-size:12px}.track{height:9px;background:#e8eff4;border-radius:999px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#0678ad,#15a1d7);border-radius:999px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{text-align:left;padding:11px 9px;border-bottom:1px solid #e5edf3;vertical-align:top}.table th{font-size:10px;letter-spacing:.6px;color:#6f8392;text-transform:uppercase}.status{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.ok{background:#e7f8ee;color:#197046}.bad{background:#fff0f2;color:#b82d43}.pending{background:#fff7df;color:#8b6810}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:15px}.toolbar input,.toolbar select{border:1px solid #ccd9e3;border-radius:11px;padding:10px;background:#fff}.toolbar .btn{padding:10px 13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}.toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.question-card{border:1px solid #e1e9ef;border-radius:14px;padding:14px;margin-bottom:10px}.question-card strong{display:block;margin-bottom:8px}.question-card ol{margin:6px 0 0;padding-left:20px;color:#607483}.question-card .correct{color:#168253;font-weight:800}.tiny{font-size:11px;color:#738594}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button:not(.btn){border:1px solid #d7e2ea;background:#fff;color:#29475c;border-radius:9px;padding:7px 9px;font-size:11px;font-weight:800}.actions .danger{color:#b52f45;background:#fff5f6}.modal{position:fixed;inset:0;background:rgba(7,30,48,.55);display:grid;place-items:center;padding:20px;z-index:100}.modal-card{width:min(700px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:24px}.toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#153a55;color:#fff;padding:11px 16px;border-radius:999px;font-weight:700;z-index:200}.mobile-menu{display:none}.cert-preview{aspect-ratio:1450/1024;background:#fff center/100% 100% no-repeat;border:1px solid var(--line);border-radius:12px}.upload{border:1.5px dashed #b9cfde;background:#f7fbfd;border-radius:14px;padding:22px;text-align:center}.audit{font-size:12px;display:grid;gap:9px}.audit>div{border-bottom:1px solid #e7eef3;padding-bottom:9px}.audit strong{display:block}@media(max-width:1000px){.stats{grid-template-columns:1fr 1fr}.panels{grid-template-columns:1fr}}@media(max-width:820px){.admin{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;top:0;width:260px;z-index:80;transition:.2s}.sidebar.open{left:0}.main{padding:16px}.mobile-menu{display:inline-block}.topbar h1{font-size:24px}.user .details{display:none}.form-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr}.brand{display:none}.bar{grid-template-columns:100px 1fr 34px}}@media(max-width:520px){.stats{grid-template-columns:1fr}.topbar{align-items:flex-start}.main{padding:12px}.panel{padding:14px}}

.mail-flash{padding:12px 14px;border-radius:12px;margin:12px 0 16px;font-size:12px}.mail-flash.ok{background:#eaf8f1;border:1px solid #b9e8d1;color:#087a52}.mail-flash.bad{background:#fff0f0;border:1px solid #f3c2c2;color:#a62626}.mail-flash strong{display:block;margin-bottom:3px}

.bulk-modal-card{width:min(880px,100%)}.bulk-guide{background:#f2f8fc;border:1px solid #d6e7f1;border-radius:13px;padding:13px 14px;margin:15px 0;color:#35536a;line-height:1.7;font-size:12px}.bulk-or{display:flex;align-items:center;gap:12px;color:#8999a6;font-size:10px;font-weight:900;letter-spacing:1px;margin:16px 0}.bulk-or:before,.bulk-or:after{content:"";height:1px;background:#e1e9ef;flex:1}.bulk-preview{border-radius:13px;padding:12px 14px;margin-top:13px;font-size:12px;line-height:1.6}.bulk-preview.ok{background:#eaf8f1;border:1px solid #b9e8d1;color:#087a52}.bulk-preview.bad{background:#fff0f0;border:1px solid #f3c2c2;color:#a62626}

.report-hub{border-top:4px solid #0878ad}.report-global-stats,.report-selected-stats{margin-top:14px}.report-selected-stats{grid-template-columns:repeat(5,1fr)}.report-index-table td:first-child{min-width:220px}.report-index-table td:last-child{min-width:235px}@media(max-width:1100px){.report-selected-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.report-selected-stats{grid-template-columns:1fr 1fr}.report-index-table td:last-child{min-width:180px}}


/* V11.0 Global Quiz Context */
.quiz-context{background:linear-gradient(105deg,#083d61,#075d87);color:#fff;border-radius:18px;padding:14px 16px;margin:-2px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 12px 30px rgba(8,61,97,.16)}
.quiz-context-main{display:flex;align-items:center;gap:12px;min-width:0}.quiz-context-icon{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:22px;font-weight:900;flex:0 0 auto}.quiz-context-copy{min-width:0}.quiz-context-copy span{display:block;font-size:9px;font-weight:900;letter-spacing:1.35px;color:#91d9fa;margin-bottom:3px}.quiz-context-copy strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:650px}.quiz-context-copy small{display:block;color:#c7e3f0;font-size:10px;margin-top:3px}.quiz-context-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}.quiz-context-actions select{min-width:290px;max-width:420px;border:1px solid rgba(255,255,255,.28);background:#fff;color:#183247;border-radius:11px;padding:10px 12px;font-weight:750}.quiz-context-actions .btn{padding:10px 13px;text-decoration:none;white-space:nowrap}.quiz-context .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.overview-scope{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 15px;margin-bottom:14px}.overview-scope>div:first-child{display:flex;flex-direction:column;gap:2px}.overview-scope strong{font-size:13px}.overview-scope span{font-size:10px;color:var(--muted)}.scope-switch{display:flex;background:#edf4f8;border-radius:10px;padding:3px}.scope-switch button{border:0;background:transparent;color:#617888;padding:7px 10px;border-radius:8px;font-size:10px;font-weight:900;cursor:pointer}.scope-switch button.active{background:#fff;color:#07557e;box-shadow:0 2px 8px rgba(20,60,85,.09)}
.scope-heading{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f1f8fc;border:1px solid #d8eaf3;border-radius:12px;margin-bottom:14px}.scope-heading span{font-size:9px;font-weight:900;letter-spacing:1px;color:#3482a5}.scope-heading strong{font-size:12px;color:#17425d}.scope-heading-standalone{margin:0 0 16px}.context-inline{margin-top:14px;padding:10px 12px;border-radius:12px;background:#f4f8fb;border:1px solid #dde9f0;color:#5c7282;font-size:11px}.context-inline strong{color:#17425d}.question-card.quiz-selected{border-color:#74b9da;background:#f2faff;box-shadow:0 0 0 2px rgba(8,120,173,.08)}
@media(max-width:900px){.quiz-context{align-items:stretch;flex-direction:column}.quiz-context-actions{width:100%}.quiz-context-actions select{min-width:0;max-width:none;flex:1}.quiz-context-copy strong{max-width:100%}}
@media(max-width:560px){.quiz-context-actions{flex-direction:column;align-items:stretch}.quiz-context-actions .btn{text-align:center}.overview-scope{align-items:stretch;flex-direction:column}.scope-switch{width:100%}.scope-switch button{flex:1}.scope-heading{align-items:flex-start;flex-direction:column;gap:2px}}

/* V11.1 certificate recipient layout controls */
.template-layout{grid-template-columns:.95fr 1.05fr}.soft-rule{border:0;border-top:1px solid #e4edf3;margin:24px 0}.cert-preview-live{position:relative;overflow:hidden}.preview-recipient{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px dashed rgba(8,120,173,.72);background:rgba(255,255,255,.12);min-width:0}.preview-name{width:100%;color:#273b86;font-weight:800;white-space:nowrap;line-height:1.08}.preview-ic{width:100%;color:#283548;font-weight:700;white-space:nowrap;line-height:1.15}.preview-safe-note{margin-top:10px;font-size:11px;color:#718393}.template-layout input[type=number]{font-variant-numeric:tabular-nums}@media(max-width:1000px){.template-layout{grid-template-columns:1fr}}

/* V12.0 – Platform workspace, lifecycle & secure quiz controls */
.secure-config{margin-top:8px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#f3f8fb,#edf6fa);border:1px solid #d9e8ef}.secure-config-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.secure-config-head>div{display:flex;flex-direction:column}.secure-config-head strong{font-size:14px;color:#173e58}.secure-config-head span{font-size:10px;color:#718796;margin-top:4px;line-height:1.45}.compact-grid{gap:12px}.integrity-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}.integrity-badge.normal{background:#eaf8f1;color:#137b50}.integrity-badge.review{background:#fff5db;color:#8a5a07}.integrity-badge.flagged{background:#fff0f1;color:#b03747}.quiz-featured{display:inline-flex;margin-left:7px;padding:4px 7px;border-radius:999px;background:#eaf4ff;color:#1765a1;font-size:8px;font-weight:900}.role-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#edf4f8;color:#41677d;font-size:9px;font-weight:800}.platform-workspace-note{margin:0 0 14px;padding:11px 13px;border:1px solid #dfeaf0;background:#f8fbfd;border-radius:12px;font-size:10px;color:#617989}.platform-workspace-note strong{color:#174761}@media(max-width:760px){.secure-config-head{display:block}.secure-config-head .toggle{margin-top:12px}}
.role-select{border:1px solid #d8e4eb;background:#fff;border-radius:9px;padding:7px 8px;font-size:10px;font-weight:700;color:#35566b;max-width:140px}


/* V12.2.3 – Admin button contrast hardening */
button.btn.btn-primary,
a.btn.btn-primary,
.actions .btn.btn-primary{
  background:#07557e;
  color:#fff;
  border:1px solid #07557e;
}
button.btn.btn-primary:hover,
a.btn.btn-primary:hover,
.actions .btn.btn-primary:hover{
  background:#06496c;
  color:#fff;
}
button.btn.btn-secondary,
a.btn.btn-secondary,
.actions .btn.btn-secondary{
  background:#fff;
  color:#29475c;
  border:1px solid #cfdce6;
}
button.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
.actions .btn.btn-secondary:hover{
  background:#f3f8fb;
  color:#183247;
}
button.btn.btn-danger,
a.btn.btn-danger,
.actions .btn.btn-danger{
  background:#fff0f2;
  color:#bd3048;
  border:1px solid #f1c8d0;
}
button:disabled,
.btn:disabled{
  opacity:.58;
  cursor:not-allowed;
}

/* V12.3 dashboard analytics composition */
.country-strip{margin-top:16px;padding:16px 18px}.country-strip-head h3{margin:0 0 4px}.country-strip-head p{margin:0 0 12px}.country-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.country-card{border:1px solid #dce8ef;background:#f8fbfd;border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.country-card span{font-size:11px;font-weight:800;color:#587488}.country-card strong{font-size:20px;color:#07557e}.dashboard-analytics{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:16px;margin-top:16px;align-items:stretch}.dashboard-state-panel{height:100%}.dashboard-right-stack{display:grid;grid-template-columns:1fr;gap:16px}.compact-bars{gap:8px}.compact-bars .bar{grid-template-columns:145px 1fr 36px}.top3-list{display:grid;gap:9px;margin-top:12px}.top3-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #e2ebf1;background:#fbfdfe;border-radius:13px;padding:10px 12px}.top3-rank{width:30px;height:30px;border-radius:10px;background:#eaf5fb;color:#0873a4;display:grid;place-items:center;font-size:11px;font-weight:900}.top3-copy{min-width:0}.top3-copy strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top3-copy span{display:block;font-size:9px;color:#7b8e9b;margin-top:2px}.top3-total{font-size:18px;font-weight:900;color:#123e59}@media(max-width:1100px){.dashboard-analytics{grid-template-columns:1fr}.dashboard-right-stack{grid-template-columns:1fr 1fr}.dashboard-right-stack .panel:first-child{grid-column:1/-1}}@media(max-width:720px){.country-cards{grid-template-columns:1fr}.dashboard-right-stack{grid-template-columns:1fr}.dashboard-right-stack .panel:first-child{grid-column:auto}.compact-bars .bar{grid-template-columns:100px 1fr 34px}}

/* V12.3.4 – Daftar Sijil search */
.certificate-search{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:10px 12px;align-items:end;margin:4px 0 18px;padding:14px;background:#f7fbfd;border:1px solid #dbe6ee;border-radius:15px}.certificate-search .field{margin:0}.certificate-search-actions{display:flex;gap:8px}.certificate-search-note{grid-column:1/-1}.certificate-search input[type=search]{width:100%;min-height:44px}@media(max-width:620px){.certificate-search{grid-template-columns:1fr;padding:12px}.certificate-search-actions{display:grid;grid-template-columns:1fr 1fr}.certificate-search-actions .btn{width:100%}.certificate-search-note{grid-column:1}.certificate-search input[type=search]{font-size:16px}}


/* V12.3.5 – Certificate download action */
.actions .btn-download-cert{
  background:#07557e;
  color:#fff;
  border:1px solid #07557e;
}
.actions .btn-download-cert:hover:not(:disabled){
  background:#06496c;
  color:#fff;
}
.actions .btn-download-cert:disabled{
  background:#eef3f6;
  color:#8a9aa6;
  border-color:#d9e3e9;
  cursor:not-allowed;
  opacity:1;
}

/* V12.3.8 – Negeri & Daerah master data */
.location-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 16px}.location-kpis>div{border:1px solid #dce8ef;background:#f8fbfd;border-radius:14px;padding:12px}.location-kpis span{display:block;font-size:9px;font-weight:900;letter-spacing:.6px;color:#718797}.location-kpis strong{display:block;margin-top:4px;font-size:24px;color:#07557e}.location-actions{margin-top:6px}.location-actions a{text-decoration:none}.location-actions+.tiny{margin-top:6px}@media(max-width:720px){.location-kpis{grid-template-columns:1fr}.location-actions{display:grid;grid-template-columns:1fr}.location-actions .btn{text-align:center}}


/* V12.3.11 – destructive action, logout emphasis & colourful dashboard charts */
#logoutBtn{
  background:#dc3545;
  color:#fff;
  margin-top:8px;
  box-shadow:0 8px 18px rgba(220,53,69,.20);
}
#logoutBtn:hover,
#logoutBtn:focus-visible{
  background:#bd2130;
  color:#fff;
}
.actions .btn.btn-danger,
.location-actions .btn.btn-danger{
  background:#dc3545;
  color:#fff;
  border:1px solid #dc3545;
}
.actions .btn.btn-danger:hover,
.location-actions .btn.btn-danger:hover{
  background:#bd2130;
  color:#fff;
  border-color:#bd2130;
}
.location-actions{align-items:center}

/* Colourful bars are intentionally scoped to Papan Pemuka only. */
.dashboard-analytics .bars .bar:nth-child(10n+1) .fill{background:linear-gradient(90deg,#168bd2,#53b8ec)}
.dashboard-analytics .bars .bar:nth-child(10n+2) .fill{background:linear-gradient(90deg,#16a765,#5bcc91)}
.dashboard-analytics .bars .bar:nth-child(10n+3) .fill{background:linear-gradient(90deg,#f08b2d,#f6b24f)}
.dashboard-analytics .bars .bar:nth-child(10n+4) .fill{background:linear-gradient(90deg,#7455d6,#a28af0)}
.dashboard-analytics .bars .bar:nth-child(10n+5) .fill{background:linear-gradient(90deg,#df4b7c,#f07ba2)}
.dashboard-analytics .bars .bar:nth-child(10n+6) .fill{background:linear-gradient(90deg,#0d9da2,#46c9cc)}
.dashboard-analytics .bars .bar:nth-child(10n+7) .fill{background:linear-gradient(90deg,#d49e12,#efc544)}
.dashboard-analytics .bars .bar:nth-child(10n+8) .fill{background:linear-gradient(90deg,#df5757,#f18787)}
.dashboard-analytics .bars .bar:nth-child(10n+9) .fill{background:linear-gradient(90deg,#465bc8,#7b8ae4)}
.dashboard-analytics .bars .bar:nth-child(10n+10) .fill{background:linear-gradient(90deg,#6eaa32,#a3ce64)}


/* V12.3.14 – Certificate action dropdown & participant correction */
.certificate-action-select{min-width:148px;border:1px solid #07557e;background:#07557e;color:#fff;border-radius:10px;padding:8px 34px 8px 11px;font-size:11px;font-weight:900;cursor:pointer;outline:none}.certificate-action-select:hover,.certificate-action-select:focus{background:#064768;border-color:#064768;box-shadow:0 0 0 3px rgba(7,85,126,.10)}.certificate-action-select option{background:#fff;color:#17324d;font-weight:700}.certificate-action-select option:disabled{color:#9aa8b2}.edit-participant-warning{margin:14px 0 2px;padding:12px 14px;border:1px solid #f0d79c;background:#fff9e8;color:#725818;border-radius:13px;font-size:12px;line-height:1.55}.participant-edit-actions{gap:8px}.participant-edit-actions .btn{margin:0}@media(max-width:620px){.certificate-action-select{min-width:132px;width:100%;font-size:12px}.participant-edit-actions{display:grid;grid-template-columns:1fr}.participant-edit-actions .btn{width:100%}}