:root{--brand:#0f766e;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f6f7fb}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.btn{border:none;background:var(--brand);color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn-outline{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.input,.select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:10px;font-size:14px}
.tbl{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #f1f5f9;padding:10px;text-align:left;font-size:14px;vertical-align:top}
th{color:#334155}.row{display:grid;gap:10px}.row-2{grid-template-columns:1fr 1fr}.row-3{grid-template-columns:1fr 1fr 1fr}.row-4{grid-template-columns:1fr 1fr 1fr 1fr}
.topbar{height:56px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.nav a{display:inline-block;margin-right:8px}
.badge{display:inline-flex;gap:6px;align-items:center;border-radius:9999px;background:#f1f5f9;padding:4px 10px;font-size:12px}
.dot{width:8px;height:8px;border-radius:9999px;display:inline-block}
.small{font-size:12px;color:var(--muted)}
/* NAV look & feel */
.card.nav a { text-decoration: none !important }
.btn, .btn:link, .btn:visited { text-decoration: none }
.card.nav .nav-btn:nth-of-type(1){ background: #E6F4FF; color:#0B3B73 }
.card.nav .nav-btn:nth-of-type(2){ background: #EAF7F1; color:#14532d }
.card.nav .nav-btn:nth-of-type(3){ background: #FFF4EA; color:#7c2d12 }
.card.nav .nav-btn:nth-of-type(4){ background: #F3EEFF; color:#3730a3 }
.card.nav .nav-btn:hover{ filter: brightness(0.98) }