:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #163244;
  background: #eef4f7;
  font-synthesis: none;
  --navy: #0b4765;
  --navy-dark: #073349;
  --blue: #126f96;
  --teal: #0c8c8d;
  --line: #d8e4ea;
  --soft: #f7fafb;
  --danger: #a33b35;
  --warning: #8a5b08;
  --success: #20734a;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button,input,select { font: inherit; }
button { cursor: pointer; }
.shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:linear-gradient(120deg,var(--navy-dark),var(--navy)); color:white; padding:18px 24px; box-shadow:0 2px 10px #0a385020; }
.brand { max-width:1200px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-title { font-size:1.42rem; font-weight:800; letter-spacing:.02em; }
.brand-subtitle { font-size:.82rem; opacity:.88; margin-top:3px; max-width:760px; }
.main { width:min(1200px,calc(100% - 28px)); margin:24px auto; flex:1; }
.footer { text-align:center; color:#627783; font-size:.78rem; padding:22px; }
.card { background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px #1537470d; }
.auth-wrap { width:min(500px,100%); margin:5vh auto 0; }
.auth-card { padding:26px; }
.auth-card h1 { margin:0 0 8px; color:var(--navy); font-size:1.55rem; }
.muted { color:#6a7d88; font-size:.9rem; }
.notice { padding:12px 14px; border-radius:10px; margin:14px 0; background:#eef7fb; border:1px solid #cde5ef; font-size:.88rem; }
.notice.warning { background:#fff8e8; border-color:#f0d99f; color:#65480a; }
.notice.success { background:#edf8f2; border-color:#c9e8d7; color:#195d3c; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; background:#edf3f6; padding:5px; border-radius:11px; margin:18px 0; }
.tabs button { border:0; background:transparent; padding:10px; border-radius:8px; color:#526975; }
.tabs button.active { background:white; color:var(--navy); font-weight:700; box-shadow:0 2px 8px #123b4c16; }
.field { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.field label { font-size:.84rem; font-weight:700; color:#355363; }
.field input,.field select { width:100%; border:1px solid #c8d8e0; border-radius:10px; padding:11px 12px; outline:none; background:white; }
.field input:focus,.field select:focus { border-color:#4c9cba; box-shadow:0 0 0 3px #4c9cba1a; }
.btn { border:0; border-radius:10px; padding:11px 15px; font-weight:750; background:var(--navy); color:white; }
.btn:hover { background:#0b587b; }
.btn.secondary { background:#eef4f7; color:var(--navy); }
.btn.ghost { background:transparent; color:var(--navy); border:1px solid #bad0da; }
.btn.danger { background:var(--danger); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.link-button { border:0; background:transparent; color:var(--blue); padding:5px 0; text-decoration:underline; }
.dashboard-head { display:flex; gap:14px; justify-content:space-between; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; }
.context-box { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.context-box select { border:1px solid #c7d8e0; border-radius:9px; padding:8px 10px; background:white; }
.kpis { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:12px; margin:15px 0 22px; }
.kpi { padding:16px; }
.kpi .label { font-size:.78rem; color:#66808d; font-weight:650; }
.kpi .value { font-size:1.6rem; font-weight:850; margin-top:5px; color:var(--navy); }
.kpi .sub { font-size:.75rem; color:#7b909b; margin-top:4px; }
.toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.filters { display:flex; gap:7px; flex-wrap:wrap; }
.chip { border:1px solid #c8dae3; color:#416170; background:white; border-radius:999px; padding:7px 11px; font-size:.8rem; }
.chip.active { background:var(--navy); color:white; border-color:var(--navy); }
.search { min-width:240px; border:1px solid #c8dae3; border-radius:9px; padding:9px 11px; }
.table-card { overflow:hidden; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:800px; }
th { background:#f1f6f8; color:#415e6c; font-size:.76rem; text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); }
td { padding:12px; border-bottom:1px solid #e8eff2; font-size:.84rem; vertical-align:middle; }
tr:hover td { background:#fafcfd; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 8px; font-size:.72rem; font-weight:750; background:#edf3f6; color:#4b6877; }
.badge.success { background:#e9f7ef; color:var(--success); }
.badge.warning { background:#fff6df; color:var(--warning); }
.badge.lock { background:#ecf2f7; color:#38566a; }
.empty { padding:35px; text-align:center; color:#718691; }
.modal-backdrop { position:fixed; inset:0; background:#061e2b88; display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.modal { width:min(620px,100%); max-height:90vh; overflow:auto; background:white; border-radius:16px; padding:22px; box-shadow:0 22px 70px #061e2b55; }
.modal h2 { margin:0; color:var(--navy); }
.school-results { border:1px solid #d4e1e6; border-radius:10px; max-height:230px; overflow:auto; margin-top:6px; }
.school-option { display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #edf2f4; background:white; padding:10px 12px; }
.school-option:hover { background:#f3f8fa; }
.school-option strong { display:block; color:#20485b; }
.school-option span { font-size:.74rem; color:#70838c; }
.selected-school { margin-top:8px; padding:10px 12px; border-radius:9px; background:#edf8f2; color:#245f43; font-size:.84rem; }
.monitor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:12px; }
.monitor-item { padding:13px; border:1px solid #dce7ec; border-radius:11px; background:white; }
.monitor-item strong { color:var(--navy); }
.toast { position:fixed; right:18px; bottom:18px; max-width:380px; background:#133e52; color:white; padding:12px 15px; border-radius:10px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; z-index:100; box-shadow:0 12px 30px #061e2b33; }
.toast.show { opacity:1; transform:translateY(0); }
@media (max-width:900px) { .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:580px) { .topbar { padding:15px 14px; } .main { width:min(100% - 18px,1200px); margin-top:12px; } .kpis { grid-template-columns:repeat(2,1fr); } .auth-card { padding:19px; } .brand-subtitle { display:none; } }


/* Kemasan HALUAN V2.1 */
.editBtn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:720px) {
  .brand { align-items:flex-start; }
  .brand > .actions { margin-left:auto; }
  .context-box select, .brand select { max-width:180px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .kpi { padding:13px; }
  .kpi .value { font-size:1.35rem; }
  .toolbar { align-items:stretch; }
  .filters { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; }
  .chip { white-space:nowrap; }
  .search { width:100%; min-width:0; }
  .table-scroll { overflow:visible; padding:0 10px 10px; }
  table { min-width:0; border-collapse:separate; border-spacing:0 10px; }
  thead { display:none; }
  tbody, tr, td { display:block; width:100%; }
  tr { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; box-shadow:0 4px 14px #1537470a; }
  td { display:grid; grid-template-columns:108px minmax(0,1fr); gap:8px; padding:9px 11px; border-bottom:1px solid #edf2f4; font-size:.82rem; }
  td:last-child { border-bottom:0; }
  td::before { content:attr(data-label); color:#607985; font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.02em; }
  td .editBtn { width:100%; }
  .modal-backdrop { padding:8px; align-items:flex-end; }
  .modal { max-height:94vh; border-radius:16px 16px 0 0; padding:18px; }
  .monitor-grid { grid-template-columns:1fr; }
  .toast { left:10px; right:10px; bottom:10px; max-width:none; text-align:center; }
}
@media (max-width:420px) {
  .topbar { padding:12px; }
  .brand-title { font-size:1.2rem; }
  .brand > .actions { width:100%; justify-content:space-between; margin-top:8px; }
  .main { width:calc(100% - 12px); }
  .kpis { grid-template-columns:1fr 1fr; }
  td { grid-template-columns:92px minmax(0,1fr); }
}


/* HALUAN v4 final mobile polish */
@media (max-width:720px) {
  .topbar { padding:10px 12px; }
  .brand { gap:8px; align-items:center; flex-wrap:nowrap; }
  .brand-title { font-size:1.08rem; line-height:1.15; }
  .brand > div:first-child { min-width:0; }
  .brand > .actions { margin-left:auto; width:auto; flex-wrap:nowrap; gap:6px; }
  .brand select { max-width:148px; padding:6px 7px; font-size:.78rem; }
  .brand .btn { padding:8px 10px; font-size:.82rem; white-space:nowrap; }
  .dashboard-head { margin-bottom:12px; }
  .kpis { margin:10px 0 16px; }
  .table-scroll { padding:0 7px 7px; }
  table { border-spacing:0 7px; }
  tr { border-radius:11px; }
  td { grid-template-columns:92px minmax(0,1fr); gap:6px; padding:7px 9px; line-height:1.25; }
  td::before { font-size:.69rem; }
  .badge { padding:4px 7px; }
  .editBtn { padding:9px 11px; }
}
@media (max-width:420px) {
  .topbar { padding:9px 10px; }
  .brand-title { font-size:1rem; }
  .brand > .actions { width:auto; margin-top:0; }
  .brand select { max-width:132px; font-size:.72rem; }
  .brand .btn { padding:7px 9px; font-size:.78rem; }
  .main { margin-top:9px; }
  td { grid-template-columns:82px minmax(0,1fr); padding:7px 8px; }
}


/* HALUAN v5 Admin Console */
.admin-tabs { padding:10px; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.admin-panel { padding:18px; margin-top:14px; }
.admin-summary { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.admin-list { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.admin-row { border:1px solid var(--line); border-radius:12px; padding:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; }
.admin-row .actions { justify-content:flex-end; }
.membership-pills { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.temp-pin { font-size:2.4rem; letter-spacing:.22em; font-weight:900; color:var(--navy); background:#eef6f9; border:2px dashed #8db8c9; border-radius:14px; text-align:center; padding:18px; margin:16px 0; }
.admin-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.admin-panel h3 { margin-top:0; color:var(--navy); }
.admin-panel textarea { width:100%; border:1px solid #c8d8e0; border-radius:10px; padding:11px 12px; resize:vertical; font:inherit; }
.checkline { display:flex; gap:9px; align-items:center; margin:11px 0; color:#355363; font-size:.88rem; font-weight:650; }
@media (max-width:800px){ .admin-summary{grid-template-columns:1fr 1fr}.admin-settings-grid{grid-template-columns:1fr}.admin-row{align-items:flex-start;flex-direction:column}.admin-row .actions{width:100%;justify-content:flex-start}.admin-row .actions .btn{flex:1}.temp-pin{font-size:2rem} }

/* HALUAN MBPK - Mod Latihan */
.demo-ribbon{background:#fff3cd;border-bottom:1px solid #e7d18b;color:#6b5100;text-align:center;padding:9px 14px;font-weight:800;font-size:.82rem;letter-spacing:.02em}
.demo-ribbon span{font-weight:600}
.training-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.training-account{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafcfd}
.training-account strong{display:block;color:var(--navy);margin-bottom:3px}
.training-account code{font-size:.78rem;word-break:break-all}
.demo-note{font-size:.78rem;color:#667d89;margin-top:8px}
.scenario-card{padding:16px;margin:0 0 16px;border-left:5px solid var(--teal)}
.scenario-card h3{margin:0 0 6px;color:var(--navy)}
.scenario-card ol{margin:8px 0 0;padding-left:20px;font-size:.86rem;color:#46616e}
.demo-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#fff3cd;color:#6b5100;font-size:.72rem;font-weight:850;margin-left:8px}
.reset-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.state-draft{background:#eef4fb;color:#315e87}
@media(max-width:650px){.training-grid{grid-template-columns:1fr}.demo-ribbon{font-size:.76rem}.reset-bar{width:100%}}


/* Mod Latihan v2 - Panduan terbina dalam */
.training-help-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.guide-modal{width:min(700px,100%)}
.guide-steps{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.guide-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fbfdfe}
.guide-num{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-weight:850}
.guide-step strong{display:block;color:var(--navy);margin-bottom:3px}
.guide-step p{margin:0;color:#58717e;font-size:.86rem;line-height:1.45}
.guide-tip{padding:12px 14px;border-radius:11px;background:#edf7f8;border-left:4px solid var(--teal);color:#315664;font-size:.86rem}
@media(max-width:650px){.guide-step{grid-template-columns:32px minmax(0,1fr);padding:10px}.guide-num{width:30px;height:30px}.reset-bar{gap:5px}.reset-bar .btn{padding:8px 9px;font-size:.78rem}}