:root{
  --teal:#0f8a7e; --blue:#0b5cad; --ink:#0b3b52; --bg:#f4f7f9;
  --line:#dbe3e8; --muted:#5b6b76; --danger:#c0392b; --ok:#1e8a4c; --warn:#b9770a;
  --radius:12px; --shadow:0 2px 10px rgba(11,59,82,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Top bar (manual/impl/testing + language) ---- */
.topbar{background:var(--ink);color:#dfeef2;font-size:.82rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;
  max-width:1080px;margin:auto;padding:.4rem .9rem}
.topbar a{color:#bfe3ea}
.topbar .sp{margin-left:auto}

/* ---- Header with logo (setiap window) ---- */
header.app{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
header.app .wrap{display:flex;align-items:center;gap:1rem;max-width:1080px;margin:auto;padding:.6rem .9rem}
header.app img.logo{height:38px}
header.app .user{margin-left:auto;font-size:.85rem;color:var(--muted);text-align:right}
.badge{display:inline-block;background:#e7f4f2;color:var(--teal);border-radius:20px;
  padding:.1rem .6rem;font-size:.72rem;font-weight:600}

/* ---- Layout ---- */
.container{max-width:1080px;margin:1rem auto;padding:0 .9rem;display:flex;gap:1rem}
nav.side{flex:0 0 220px}
nav.side .grp{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.8rem .4rem .2rem}
nav.side a{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--ink);font-size:.9rem}
nav.side a:hover{background:#eaf1f4;text-decoration:none}
nav.side a.active{background:var(--teal);color:#fff}
main{flex:1;min-width:0}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.1rem 1.2rem;margin-bottom:1rem}
.card h2{margin:.1rem 0 .8rem;font-size:1.15rem}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem}
.stat b{display:block;font-size:1.6rem;color:var(--blue)}
.stat span{color:var(--muted);font-size:.82rem}

/* ---- Forms ---- */
label{display:block;font-size:.85rem;font-weight:600;margin:.6rem 0 .2rem}
input,select,textarea{width:100%;padding:.6rem;border:1px solid var(--line);
  border-radius:8px;font-size:.95rem;background:#fff}
.btn{display:inline-block;background:var(--teal);color:#fff;border:0;border-radius:8px;
  padding:.6rem 1.1rem;font-size:.95rem;font-weight:600;cursor:pointer}
.btn:hover{opacity:.92;text-decoration:none}
.btn.blue{background:var(--blue)} .btn.gray{background:#5b6b76}
.btn.danger{background:var(--danger)} .btn.sm{padding:.35rem .7rem;font-size:.82rem}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.55rem .5rem;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.tablewrap{overflow-x:auto}
.chk{width:auto;transform:scale(1.15)}

/* ---- Alerts ---- */
.alert{padding:.7rem .9rem;border-radius:8px;margin-bottom:.9rem;font-size:.9rem}
.alert.ok{background:#e7f6ec;color:var(--ok)} .alert.err{background:#fdecea;color:var(--danger)}
.alert.warn{background:#fff4e0;color:var(--warn)}
.pill{font-size:.72rem;padding:.15rem .5rem;border-radius:20px}
.pill.active{background:#e7f6ec;color:var(--ok)} .pill.suspended{background:#fdecea;color:var(--danger)}

/* ---- Auth screens ---- */
.auth{max-width:380px;margin:6vh auto;padding:0 1rem}
.auth .card{padding:1.6rem}
.auth img.logo{height:44px;display:block;margin:0 auto 1rem}
.center{text-align:center}
.muted{color:var(--muted);font-size:.85rem}

/* ---- Credit footer (scroll paling bawah, configurable) ---- */
footer.credit{background:var(--ink);color:#cfe3ea;text-align:center;font-size:.8rem;
  padding:.9rem;margin-top:2rem}

/* ---- Mobile ---- */
@media(max-width:760px){
  .container{flex-direction:column}
  nav.side{flex:none}
  nav.side{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem}
  nav.side .grp{grid-column:1/-1}
  header.app .user{font-size:.78rem}
}