:root {
  --g: #2E7D52;
  --gl: #E8F2EC;
  --gd: #1D5235;
  --yellow: #F5CB00;
  --blue: #1565C0;
  --white: #FFFFFF;
  --bg: #F2F5F2;
  --border: #D8E8D8;
  --text: #1A1A1A;
  --muted: #6B7280;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --warn-bg: #FEF3C7;
  --warn: #B45309;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;background:var(--bg);color:var(--text);overscroll-behavior:none;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}

/* Checker band */
.checker{height:20px;background-image:conic-gradient(var(--g) 90deg,var(--yellow) 90deg 180deg,var(--g) 180deg 270deg,var(--yellow) 270deg);background-size:20px 20px}

/* Header */
.hac-header{background:var(--g);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.hac-header img{width:36px;height:36px;border-radius:18px;background:#fff;object-fit:contain}
.hac-header .title{font-size:17px;font-weight:500}
.hac-header .sub{font-size:12px;color:rgba(255,255,255,0.75);margin-top:1px}
.hac-header-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Bottom nav */
.bot-nav{position:fixed;bottom:0;left:0;right:0;height:64px;background:#fff;border-top:0.5px solid var(--border);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:100}
.bot-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--muted);border:none;background:none;text-decoration:none}
.bot-nav a.active{color:var(--g);font-weight:500}
.bot-nav a svg{width:22px;height:22px}
.main{padding:0 0 72px}

/* Cards */
.card{background:#fff;border-radius:12px;border:0.5px solid var(--border);overflow:hidden;margin:0 16px 12px}
.card-header{padding:12px 16px;border-bottom:0.5px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:14px;font-weight:500}

/* Rows */
.row{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:0.5px solid #f5f5f5}
.row:last-child{border-bottom:none}
.row-icon{width:38px;height:38px;border-radius:19px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.row-body{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:500}
.row-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* Pills */
.pill{font-size:11px;padding:3px 9px;border-radius:99px;font-weight:500;white-space:nowrap}
.pill-green{background:var(--gl);color:var(--g)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-danger{background:var(--danger-bg);color:var(--danger)}
.pill-gray{background:#F5F5F5;color:var(--muted)}
.pill-blue{background:#DBEAFE;color:#1D4ED8}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px}
.stat{background:#fff;border-radius:12px;border:0.5px solid var(--border);padding:12px 8px;text-align:center}
.stat-num{font-size:26px;font-weight:500;color:var(--g)}
.stat-label{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3}

/* Buttons */
.btn{display:block;width:100%;padding:14px;border-radius:8px;font-size:15px;font-weight:500;border:none;text-align:center}
.btn-primary{background:var(--g);color:#fff}
.btn-danger{background:#fff;color:var(--danger);border:0.5px solid #FCA5A5}
.btn-ghost{background:#fff;color:var(--text);border:0.5px solid var(--border)}

/* Forms */
.form-group{margin-bottom:14px}
.form-label{font-size:13px;font-weight:500;color:var(--muted);display:block;margin-bottom:5px}
.form-input{width:100%;padding:11px 13px;border:0.5px solid var(--border);border-radius:8px;font-size:16px;background:#fff;color:var(--text)}
.form-input:focus{outline:none;border-color:var(--g)}

/* Section head */
.section-head{padding:8px 16px 4px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0.03em;background:var(--bg)}

/* Login page */
.login-wrap{min-height:100vh;display:flex;flex-direction:column}
.login-body{flex:1;padding:24px 20px;display:flex;flex-direction:column;justify-content:center;max-width:400px;margin:0 auto;width:100%}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo img{width:80px;height:80px}
.login-title{font-size:22px;font-weight:500;margin-bottom:4px;text-align:center}
.login-sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:28px}

/* Toast */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1A1A1A;color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;z-index:999;display:none}

/* Empty state */
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:14px}

/* Page header (green) */
.page-head{background:var(--g);padding:14px 16px}
.page-head h2{color:#fff;font-size:20px;font-weight:500}
.page-head p{color:rgba(255,255,255,0.75);font-size:13px;margin-top:2px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:flex-end}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:16px 16px 0 0;width:100%;padding:20px 20px 32px;max-height:90vh;overflow-y:auto}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.modal h3{font-size:17px;font-weight:500;margin-bottom:16px}

@media(min-width:768px){
  
  .main{padding:0}
  .login-body{padding:40px}
}