:root{
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;
  --bg:#ffeccb; --ink:#2b2516; --muted:#7a5a3c; --title:#ffc233;
  --card:#1540c9; --ledge:#0e2f9e;
  --field:#ffffff; --field-ink:#16224a; --field-brd:#c9d3f2;
  --accent:#ffb81f; --accent-ledge:#b77f00; --good:#15a65a; --bad:#e23b3b;
  --btn-bg:#ffffff; --btn-ink:#1b2340; --btn-brd:#ecca8c;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1018; --ink:#f0ead6; --muted:#c7b393; --title:#ffc84d;
  --card:#1d4fe0; --ledge:#1338a6;
  --field:#0e1630; --field-ink:#dfe6ff; --field-brd:#2a3f7a;
  --accent:#ffc233; --accent-ledge:#a9780a; --good:#16a34a; --bad:#ef4444;
  --btn-bg:#1a2233; --btn-ink:#e9eefc; --btn-brd:#2c374f;
}}
:root[data-theme="dark"]{
  --bg:#0d1018; --ink:#f0ead6; --muted:#c7b393; --title:#ffc84d;
  --card:#1d4fe0; --ledge:#1338a6;
  --field:#0e1630; --field-ink:#dfe6ff; --field-brd:#2a3f7a;
  --accent:#ffc233; --accent-ledge:#a9780a; --good:#16a34a; --bad:#ef4444;
  --btn-bg:#1a2233; --btn-ink:#e9eefc; --btn-brd:#2c374f;
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{font-family:var(--font);color:var(--ink);background:var(--bg);min-height:100svh;
  padding:max(14px,env(safe-area-inset-top)) clamp(14px,4vw,26px) calc(40px + env(safe-area-inset-bottom))}
.wrap{max-width:1000px;margin:0 auto}
.wrap.narrow{max-width:430px}
a{color:inherit}
/* header */
.top{display:flex;align-items:center;gap:12px;margin:6px 2px 10px;flex-wrap:wrap}
.dot{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#241a08;flex:0 0 auto;
  background:var(--accent);box-shadow:0 4px 0 var(--accent-ledge),inset 0 2px 0 rgba(255,255,255,.4)}
.dot svg{width:26px;height:26px}
.htext{margin-right:auto;min-width:0}
.htext h1{font-size:clamp(1.25rem,4.5vw,1.8rem);font-weight:800;margin:0;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.htext p{margin:3px 0 0;color:var(--muted);font-size:clamp(.8rem,2.6vw,.92rem);font-weight:600}
.theme-toggle{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--btn-ink);
  background:var(--btn-bg);border:1.5px solid var(--btn-brd);box-shadow:0 3px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3);flex:0 0 auto}
.theme-toggle:active{transform:translateY(2px)}
.theme-toggle svg{width:19px;height:19px}
.ic-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ic-sun{display:block}:root:not([data-theme="light"]) .ic-moon{display:none}}
:root[data-theme="dark"] .ic-sun{display:block}:root[data-theme="dark"] .ic-moon{display:none}
:root[data-theme="light"] .ic-sun{display:none}:root[data-theme="light"] .ic-moon{display:block}
/* buttons */
.btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.85rem;color:var(--btn-ink);
  background:var(--btn-bg);border:1.5px solid var(--btn-brd);padding:10px 15px;border-radius:12px;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.accent{background:var(--accent);color:#241a08;border-color:transparent;box-shadow:0 3px 0 var(--accent-ledge),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.good{background:var(--good);color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.danger{background:var(--bad);color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.sm{padding:7px 11px;font-size:.78rem;border-radius:10px}
.btn svg{width:15px;height:15px}
/* ===== colored cards (login / panel) ===== */
.login,.panel{color:#fff;border:0;border-radius:20px;background:var(--card);
  box-shadow:0 7px 0 var(--cl,var(--ledge)),0 18px 34px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.2)}
.login{padding:24px 22px;margin-top:22px}
.panel{padding:18px 16px;margin-top:16px}
.login h2,.panel h2{margin:0 0 6px;font-weight:800;color:#fff}
.login h2{font-size:1.3rem}.panel h2{font-size:1.14rem;margin-bottom:12px}
.login .sub,.sub{margin:0 0 16px;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:500;line-height:1.5}
/* fields */
.field{margin-bottom:14px}
.field label,.checks label{color:#fff}
.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px}
.inp{width:100%;font:inherit;font-weight:600;font-size:.95rem;color:var(--field-ink);background:var(--field);
  border:1.5px solid var(--field-brd);border-radius:11px;padding:12px 14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.14)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,184,31,.35)}
/* messages (solid, readable on any bg) */
.msg{border-radius:12px;padding:11px 14px;font-size:.88rem;font-weight:700;margin-bottom:14px;color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.msg.err{background:var(--bad)}
.msg.ok{background:var(--good)}
.msg.info{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45)}
/* course grid */
.lead{color:var(--muted);font-size:clamp(.88rem,2.8vw,1rem);line-height:1.55;margin:14px 2px 6px;font-weight:500}
.eyebrow{margin:22px 2px 2px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px}
@media (min-width:720px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .grid{grid-template-columns:1fr} }
.course{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#fff;
  border-radius:20px;padding:20px 18px 18px;min-height:160px;overflow:hidden;
  box-shadow:0 7px 0 var(--cl,rgba(0,0,0,.3)),0 16px 30px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.2);transition:transform .12s}
.course:active{transform:translateY(3px)}
@media(hover:hover){ .course:hover{transform:translateY(-4px)} }
.ci{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto;margin-bottom:12px;
  background:var(--accent);color:#241a08;box-shadow:0 3px 0 var(--accent-ledge),inset 0 1px 0 rgba(255,255,255,.45)}
.ci svg{width:26px;height:26px}
.course h3{font-size:clamp(1.02rem,2.7vw,1.18rem);font-weight:800;margin:0;line-height:1.18}
.course .meta{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;font-weight:800;font-size:.85rem}
.course .meta svg{width:16px;height:16px}
/* admin table */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:620px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.25);vertical-align:top;color:#fff}
th{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
td .pw{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;background:var(--accent);color:#241a08;
  padding:4px 9px;border-radius:8px;box-shadow:0 2px 0 var(--accent-ledge)}
.tag{display:inline-block;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:999px;margin:2px 3px 2px 0;
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4)}
.checks{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.checks label{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}
.checks input{width:17px;height:17px;accent-color:var(--accent)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1 1 140px;margin-bottom:0}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.foot{margin-top:26px;text-align:center;color:var(--muted);font-size:.8rem;line-height:1.7}
.foot b{color:var(--ink)}
/* ===== color-block palette — DIAKHIR biar menang dari .panel/.course/.login ===== */
.c-kobalt{background:#1540c9;--cl:#0e2f9e}
.c-blue{background:#1b4fd1;--cl:#12349b}
.c-teal{background:#0e8a86;--cl:#0a635f}
.c-magenta{background:#c42a84;--cl:#8f1d60}
.c-amber{background:#c77d0a;--cl:#8f5a06}
.c-indigo{background:#4338ca;--cl:#2f2790}
.c-violet{background:#5b34d6;--cl:#3f2399}
.c-green{background:#0e9f6e;--cl:#0a7150}