:root{--hijau:#28b99a;--hijau-tua:#0f766e;--bg:#f6fbfa;--teks:#12312d}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--teks);
  background:linear-gradient(160deg,#f7fffc,#eaf6f3);min-height:100vh;padding:20px 14px 44px}
.bungkus{max-width:720px;margin:0 auto}
header{text-align:center;margin-bottom:18px}
.logo{font-size:34px}
h1{margin:6px 0;font-size:24px;color:var(--hijau-tua)}
.sub{margin:0;font-size:13px;color:#5b7a74;line-height:1.5}
.masuk{background:#fff;border-radius:18px;padding:18px;border:1px solid #dff2ec;box-shadow:0 10px 26px rgba(15,118,110,.08)}
.masuk label{font-size:13px;font-weight:700;color:#5b7a74;display:block;margin-bottom:8px}
.baris{display:flex;gap:8px}
input{flex:1;padding:12px 14px;border:2px solid #d7ece6;border-radius:12px;font-size:17px;font-weight:700;
  letter-spacing:.16em;text-align:center;text-transform:uppercase;outline:none;background:#fbfffe;font-family:inherit}
input:focus{border-color:var(--hijau)}
button{font-family:inherit;font-size:15px;font-weight:700;border:0;border-radius:12px;padding:12px 18px;cursor:pointer}
.utama{background:linear-gradient(135deg,#2ecfae,#1fa183);color:#fff}
.petunjuk{font-size:12px;color:#7a9c96;margin:8px 0 0}
.ringkas{background:linear-gradient(135deg,#e7faf4,#d6f5ec);border-radius:16px;padding:14px 16px;margin:16px 0;
  font-size:14px;color:var(--hijau-tua);font-weight:600;text-align:center}
.kartu{background:#fff;border-radius:20px;padding:18px;border:1px solid #dff2ec;box-shadow:0 12px 30px rgba(15,118,110,.09);margin-bottom:16px}
.kepala{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px dashed #dff2ec}
.kepala .av{font-size:38px}
.kepala .nm{font-size:19px;font-weight:800;color:var(--hijau-tua)}
.kepala .kl{font-size:12px;color:#7a9c96}
.stat{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.stat .k{flex:1;min-width:96px;background:#f6fffc;border:1px solid #e2f4ee;border-radius:14px;padding:10px;text-align:center}
.stat .k b{display:block;font-size:20px;color:var(--hijau-tua)}
.stat .k span{font-size:11px;color:#7a9c96}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#7a9c96;margin:16px 0 8px}
.baris-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f0f8f6;font-size:14px}
.baris-item:last-child{border-bottom:0}
.baris-item .kanan{font-size:12px;color:#7a9c96;text-align:right;white-space:nowrap}
.nilai{display:inline-block;min-width:34px;text-align:center;font-weight:800;border-radius:8px;padding:2px 7px;font-size:12px}
.nilai.baik{background:#dcfce7;color:#166534}
.nilai.sedang{background:#fef3c7;color:#92400e}
.nilai.kurang{background:#fee2e2;color:#991b1b}
.kosong{font-size:13px;color:#9db8b3;font-style:italic}
.daftar-karya{margin-top:4px}
.karya-item{align-items:flex-start}
.judul-karya{word-break:break-word;font-weight:600}
.lencana{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:#fff0dc;color:#c2703a;text-transform:uppercase;letter-spacing:.03em}
.lencana.selesai{background:#dcfce7;color:#166534}
.tautan{display:block;text-align:center;margin-top:16px;font-weight:700;color:var(--hijau-tua);text-decoration:none;font-size:14px}
.pesan{min-height:20px;text-align:center;font-size:13px;color:#c2410c;margin-top:14px}