@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

*{box-sizing:border-box}
body{margin:0;background:#E9ECF3;font-family:'Nunito',-apple-system,sans-serif;color:#1E1B2E}
h1,h2,h3{font-family:'Poppins',sans-serif;margin:0}
a{text-decoration:none;color:inherit}
.muted{color:#6B7280}

/* Bingkai ala ponsel, di-tengah untuk tampilan desktop juga terlihat rapi */
.app-shell{max-width:430px;margin:0 auto;min-height:100vh;background:#F3F6FB;position:relative;padding-bottom:92px}

.hero{background:linear-gradient(135deg,#0D9488 0%,#7C3AED 100%);padding:24px 22px 30px;border-radius:0 0 28px 28px;color:#fff}
.hero h1{font-size:19px}
.hero .sub{font-size:12px;opacity:.85;margin-top:4px}

.pill{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700}
.chip{display:inline-flex;padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;background:#fff;color:#6B7280;border:1px solid #E7EAF0;white-space:nowrap;margin-right:8px}
.chip.active,.chip:hover{background:#0D9488;color:#fff;border-color:#0D9488;cursor:pointer}

.card{background:#fff;border-radius:18px;box-shadow:0 2px 10px rgba(30,27,46,.06)}
.icon-circle{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

.stat-grid{padding:0 20px;margin-top:-26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-card{padding:16px}
.stat-card .num{font-size:26px;font-weight:800;margin-top:4px}

.section{padding:18px 20px 0}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.section-title h3{font-size:15px}
.section-title a{font-size:11.5px;font-weight:800;color:#0D9488}

.case-row{padding:13px 14px;display:flex;align-items:center;gap:12px;margin-bottom:10px}
.case-row .avatar{width:38px;height:38px;font-weight:800;font-size:12px}
.case-row .meta{flex:1}
.case-row .title{font-weight:800;font-size:13px}
.case-row .sub{font-size:11px;margin-top:1px}

.navbar{position:fixed;left:0;right:0;bottom:0;max-width:430px;margin:0 auto;height:74px;background:#fff;border-top:1px solid #ECEFF4;display:flex;align-items:center;justify-content:space-around;box-sizing:border-box;padding:0 6px 8px}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#9AA3B2;flex:1}
.nav-item.active{color:#0D9488}
.nav-item svg{display:block}

.fab{position:fixed;right:calc(50% - 195px);bottom:96px;width:56px;height:56px;border-radius:50%;background:#F59E0B;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(245,158,11,.4);border:none;cursor:pointer}
@media (max-width:430px){ .fab{right:20px} }

label{font-size:12px;font-weight:800;color:#1E1B2E;display:block;margin-bottom:6px}
input,select,textarea{font-family:inherit;font-size:13.5px;padding:11px 13px;border:1.5px solid #E7EAF0;border-radius:12px;background:#fff;color:#1E1B2E;width:100%}
textarea{resize:none}
.field{margin-bottom:16px}
.btn{display:inline-block;width:100%;background:#0D9488;color:#fff;font-weight:800;font-size:14px;padding:14px;border-radius:14px;border:none;cursor:pointer;text-align:center}
.btn-ghost{background:#fff;color:#0D9488;border:1.5px solid #0D9488}

.alert-warn{background:#FBEFD9;border-radius:14px;padding:13px 15px;font-size:11.5px;color:#7A5510;margin-bottom:16px}
.alert-error{background:#FDE8E8;border-radius:14px;padding:13px 15px;font-size:12.5px;color:#9B2C2C;margin-bottom:16px}

.login-wrap{max-width:390px;margin:60px auto;padding:0 24px}