:root {
  --bg: #f1f5f9;
  --kartu: #ffffff;
  --garis: #cbd5e1;
  --teks: #0f172a;
  --redup: #64748b;
  --primer: #2563eb;
  --primer-tua: #1d4ed8;
  --bahaya: #dc2626;
  --hijau: #16a34a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--teks);
}

.pusat { text-align: center; padding: 3rem 1rem; color: var(--redup); }

header.atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--kartu);
  border-bottom: 1px solid var(--garis);
}

header.atas .merek { font-weight: 700; }
header.atas .merek small { color: var(--redup); font-weight: 400; margin-left: .5rem; }

nav.samping {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem 1rem;
  background: var(--kartu);
  border-bottom: 1px solid var(--garis);
}

nav.samping a {
  padding: .4rem .8rem;
  border-radius: .5rem;
  text-decoration: none;
  color: var(--teks);
}

nav.samping a:hover { background: var(--bg); }
nav.samping a.aktif { background: var(--primer); color: #fff; }

main#view { padding: 1.25rem; max-width: 70rem; margin: 0 auto; }

.judul-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

h1 { font-size: 1.35rem; margin: 0 0 .5rem; }

.ringkas { color: var(--redup); margin: .25rem 0 .75rem; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: .5rem;
  overflow: hidden;
  font-size: .92rem;
}

th, td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--garis); }
th { background: #e2e8f0; font-weight: 600; }
tr:last-child td { border-bottom: none; }

button {
  font: inherit;
  padding: .4rem .8rem;
  border-radius: .5rem;
  border: 1px solid var(--primer);
  background: var(--primer);
  color: #fff;
  cursor: pointer;
}

button:hover { background: var(--primer-tua); }
button.sekunder { background: #fff; color: var(--teks); border-color: var(--garis); }
button.sekunder:hover { background: var(--bg); }
button.bahaya { background: var(--bahaya); border-color: var(--bahaya); }
button.mini { padding: .2rem .5rem; font-size: .82rem; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: .45rem .55rem;
  border: 1px solid var(--garis);
  border-radius: .5rem;
  background: #fff;
}

label { display: block; margin-bottom: .75rem; font-size: .9rem; }
label small { display: block; color: var(--redup); font-weight: 400; margin-top: .15rem; }

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: .75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.kartu > h2 {
  font-size: 1rem;
  margin: 0 0 .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--garis);
}

.kartu > h2:last-child { margin-bottom: 0; }

.kartu p:last-child { margin-bottom: 0; }

.kartu > form { max-width: 34rem; }

.pusat .kartu { max-width: 26rem; margin-left: auto; margin-right: auto; text-align: left; }

.kartu.grid { max-width: none; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.kartu.grid form { max-width: 30rem; }

.modal-latar {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
}

.modal {
  background: var(--kartu);
  border-radius: .75rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow: auto;
}

.modal h2 { margin: 0 0 1rem; font-size: 1.05rem; }

.aksi { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Deret tombol pada judul halaman: ikuti barisnya, bukan bawah blok. */
.judul-baris .aksi { margin-top: 0; }

#toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: .5rem;
  z-index: 60;
}

#toast div {
  background: var(--teks);
  color: #fff;
  padding: .6rem .9rem;
  border-radius: .5rem;
  max-width: 22rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

#toast div.gagal { background: var(--bahaya); }
#toast div.berhasil { background: var(--hijau); }

.baris-atas { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.baris-atas select, .baris-atas input { width: auto; min-width: 12rem; }
.baris-atas label { margin: 0; }
.petunjuk { color: var(--redup); font-size: .85rem; }
.pil { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .78rem; background: #e2e8f0; }
.pil.aktif { background: #dcfce7; color: #166534; }
.pil.nonaktif { background: #fee2e2; color: #991b1b; }

.pil.status-missing { background: #e2e8f0; color: #475569; }
.pil.status-ungraded { background: #dbeafe; color: #1e40af; }
.pil.status-waiting { background: #fef9c3; color: #854d0e; }
.pil.status-graded { background: #dcfce7; color: #166534; }
.pil.status-revision { background: #ffedd5; color: #9a3412; }
.pil.status-late { background: #fee2e2; color: #991b1b; }

.jawaban { margin-top: .25rem; font-size: .88rem; white-space: normal; }
td small { color: var(--redup); }

/* ---------- beranda, profil, pengaturan, log ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 48rem) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30rem) {
  .stat-grid { grid-template-columns: 1fr; }
}

.stat {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-top: 4px solid var(--primer);
  border-radius: .75rem;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.stat-label { color: var(--redup); font-size: .82rem; }
.stat-nilai { font-size: 1.5rem; line-height: 1.2; }
.stat small { color: var(--redup); }

.tabel-gulir { overflow-x: auto; }

.kartu .tabel-gulir > table { border: 0; }
.kartu .tabel-gulir th, .kartu .tabel-gulir td { border-bottom: 1px solid var(--garis); }
.kartu .tabel-gulir tr:last-child th, .kartu .tabel-gulir tr:last-child td { border-bottom: 0; }

.tabel-aktivitas th, .tabel-aktivitas td { white-space: nowrap; }
.tabel-aktivitas td:last-child, .tabel-aktivitas td:nth-child(5) { white-space: normal; }

.tabel-identitas th {
  width: 12rem;
  color: var(--redup);
  font-weight: 600;
  background: var(--bg);
}

.daftar-aktivitas, .daftar-ringkas { list-style: none; margin: 0; padding: 0; }

.daftar-aktivitas li, .daftar-ringkas li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--garis);
  flex-wrap: wrap;
}

.daftar-aktivitas li:last-child, .daftar-ringkas li:last-child { border-bottom: 0; }

.daftar-aktivitas small, .daftar-ringkas small { margin-left: auto; color: var(--redup); }

.daftar-ringkas a { color: var(--primer); text-decoration: none; font-weight: 600; }
.daftar-ringkas a:hover { text-decoration: underline; }

.pil.aktivitas { background: #e0e7ff; color: #3730a3; }

.filter-baris { display: flex; gap: 1rem; flex-wrap: wrap; }
.filter-baris label { margin: 0; }

.paginasi { justify-content: space-between; align-items: center; }