:root{--bg: #eef6ff;--surface: #ffffff;--ink: #0f2a47;--muted: #53708f;--line: #d3e5f8;--primary: #1f78d1;--primary-dark: #165fa8;--soft: #e1f0ff;--soft-2: #c7e2ff;--ok: #17935f;--danger: #cc3d3d;--radius: 14px;--shadow: 0 2px 10px rgba(31, 120, 209, .08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Plus Jakarta Sans,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}button,input,select,textarea{font:inherit;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8fc1f5;outline-offset:2px}.container{max-width:820px;margin:0 auto;padding:24px 16px 56px}.navbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.navbar-inner{max-width:820px;margin:0 auto;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:42px;height:42px}.brand-teks{display:flex;flex-direction:column;line-height:1.3}.brand-teks strong{font-size:1.05rem;font-weight:800}.brand-teks span{font-size:.78rem;color:var(--muted)}.menu{list-style:none;display:flex;gap:6px;background:var(--soft);padding:4px;border-radius:999px}.menu-link{background:none;border:none;padding:8px 20px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--muted);transition:background .15s,color .15s}.menu-link:hover{color:var(--primary-dark)}.menu-link.aktif{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;margin-bottom:20px;box-shadow:var(--shadow)}.hero-sub{color:var(--primary);font-weight:700;font-size:.9rem;margin-bottom:8px}.hero h1{font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.2;font-weight:800;margin-bottom:14px}.hero-desc{color:var(--muted);margin-bottom:22px;max-width:46ch}.hero-gambar{width:100%;max-width:340px;justify-self:center}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow)}.stat-nilai{font-size:2.1rem;font-weight:800;color:var(--primary);line-height:1.1}.stat-label{font-size:.88rem;color:var(--muted);margin-top:4px}.page-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.page-bar h2{font-size:1.5rem;font-weight:800}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}.card h2{font-size:1.15rem;margin-bottom:14px}.form label{display:block;font-size:.9rem;font-weight:600;margin-bottom:12px}.form input,.form select,.form textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fbff}.form input:focus,.form select:focus,.form textarea:focus{background:#fff;border-color:var(--primary)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-aksi{display:flex;gap:10px}.error{color:var(--danger);font-size:.9rem;margin-bottom:12px}.btn{border:none;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;transition:background .15s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-ghost{background:var(--surface);color:var(--primary);border:1px solid var(--soft-2);padding:8px 14px;font-size:.85rem}.btn-ghost:hover{background:var(--soft)}.btn-danger{background:var(--surface);color:var(--danger);border:1px solid #f0cccc;padding:8px 14px;font-size:.85rem}.btn-danger:hover{background:#fdf0f0}.search-filter{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.search{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow)}.filter-group{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--soft-2);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 16px;cursor:pointer;font-size:.85rem;font-weight:600}.chip:hover{background:var(--soft)}.chip.aktif{background:var(--primary);color:#fff;border-color:var(--primary)}.list{list-style:none;display:flex;flex-direction:column;gap:12px}.item{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}.item.selesai{border-left-color:var(--ok);background:#fafdff}.item.selesai h3{text-decoration:line-through;color:var(--muted)}.item-utama{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.item-utama input[type=checkbox]{width:20px;height:20px;accent-color:var(--ok);cursor:pointer}.item-teks{flex:1;min-width:160px}.item-teks h3{font-size:1rem}.meta{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px}.badge{padding:1px 10px;border-radius:999px;font-size:.75rem;font-weight:700}.badge-kuliah{background:var(--soft);color:var(--primary-dark)}.badge-pribadi{background:#ddf5ea;color:#11704a}.badge-organisasi{background:#fdeccd;color:#855500}.item-aksi{display:flex;gap:8px}.catatan{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:10px;color:var(--muted);font-size:.92rem}.kosong{text-align:center;color:var(--muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:#0f2a474d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 20px 50px #0f2a4738;animation:modal-masuk .2s ease-out}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-head h2{font-size:1.2rem;font-weight:800}.modal-tutup{width:36px;height:36px;border:none;border-radius:50%;background:var(--soft);color:var(--primary-dark);font-size:1.5rem;line-height:1;cursor:pointer}.modal-tutup:hover{background:var(--soft-2)}@keyframes modal-masuk{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.modal{animation:none}}.footer{text-align:center;padding:20px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);background:var(--surface)}@media (max-width: 700px){.hero{grid-template-columns:1fr;padding:24px}.hero-gambar{max-width:260px}.stats,.form-row{grid-template-columns:1fr}.navbar-inner{justify-content:center}.item-aksi{width:100%}}