:root {
 --mat-sys-primary: rgb(22, 90, 80);
 --mat-sys-secondary: rgb(194, 253, 117);
 --mat-sys-tertiary: rgb(194, 253, 117);
 --app-primary: var(--mat-sys-primary);
 --app-accent: var(--mat-sys-secondary);
 --app-ink: #172521;
 --app-muted: #71817c;
 --app-border: #e4ebe7;
 --app-bg: #f6f8f6;
 --bs-primary: #165a50;
 --bs-primary-rgb: 22,90,80;
 --bs-body-font-family: 'Onest', sans-serif;
 --bs-body-color: var(--app-ink);
}
* { box-sizing: border-box; }
body { background: var(--app-bg); font-family: 'Onest', sans-serif; color: var(--app-ink); min-height: 100vh; }
.app-container { max-width: 1440px; padding-left: clamp(16px, 3vw, 42px); padding-right: clamp(16px, 3vw, 42px); }
.app-navbar { background: #fff; border-bottom: 1px solid var(--app-border); padding: 14px 0; }
.navbar-brand { color: var(--app-primary); font-size: 1.1rem; font-weight: 800; letter-spacing: -.04em; }
.navbar-brand:hover { color: var(--app-primary); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--app-primary); color: var(--app-accent); border-radius: 11px; font-size: 24px; line-height: 1; }
.brand-light { color: #83918b; font-weight: 500; }
.nav-link { color: #66756f; font-size: .92rem; font-weight: 600; padding: 10px 14px !important; border-radius: 10px; }
.nav-link.active, .nav-link:hover { color: var(--app-primary); background: #eef5f0; }
.page-title { font-weight: 800; letter-spacing: -.045em; font-size: clamp(1.7rem, 3vw, 2.25rem); }
.page-subtitle { color: var(--app-muted); margin-bottom: 0; }
.btn { font-weight: 600; border-radius: 11px; padding: 10px 16px; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: #10483f; --bs-btn-hover-border-color: #10483f; --bs-btn-color: #fff; }
.btn-accent { background: var(--app-accent); color: #18382f; border: 1px solid var(--app-accent); }
.btn-accent:hover { background: #b2ee65; color: #18382f; }
.btn-outline-dark { border-color: #d8e1dc; }
.card, .panel { border: 1px solid var(--app-border); border-radius: 18px; box-shadow: 0 4px 18px rgba(19,50,39,.025); background: #fff; }
.card-body { padding: 22px; }
.stat-label { color: var(--app-muted); font-size: .84rem; font-weight: 600; }
.stat-number { font-size: 2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.15; margin-top: 8px; }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #edf5ef; color: var(--app-primary); font-size: 1.15rem; font-weight: 800; }
.section-heading { font-weight: 750; letter-spacing: -.025em; font-size: 1.05rem; }
.form-label { font-size: .88rem; font-weight: 650; margin-bottom: 7px; }
.form-control, .form-select { border-color: #dfe7e2; border-radius: 11px; padding: 11px 13px; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: #78aa9c; box-shadow: 0 0 0 .22rem rgba(22,90,80,.10); }
.table { --bs-table-bg: transparent; vertical-align: middle; }
.table thead th { color: #78857f; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; font-weight: 700; border-bottom-color: var(--app-border); white-space: nowrap; padding: 14px 16px; }
.table tbody td { padding: 16px; border-bottom-color: #edf1ee; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.company-name { font-weight: 700; color: #20332c; text-decoration: none; }
.company-name:hover { color: var(--app-primary); }
.small-muted { color: var(--app-muted); font-size: .82rem; }
.badge { font-weight: 650; padding: .48em .7em; border-radius: 8px; }
.reminder-row { border: 1px solid var(--app-border); border-radius: 13px; padding: 14px; }
.reminder-row + .reminder-row { margin-top: 10px; }
.reminder-time { font-size: .78rem; font-weight: 700; color: #9a5b00; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--app-muted); }
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 10px; }
.app-footer { padding: 20px 0; color: #85918b; font-size: .8rem; border-top: 1px solid var(--app-border); background: #fff; }
.login-wrap { max-width: 430px; margin: 6vh auto; }
.login-card { padding: clamp(24px, 5vw, 38px); }
.login-symbol { width: 54px; height: 54px; display: grid; place-items: center; background: var(--app-primary); color: var(--app-accent); font-weight: 800; font-size: 2rem; border-radius: 16px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.text-primary { color: var(--app-primary) !important; }
@media (max-width: 767px) {
 .card-body { padding: 18px; }
 .table thead th, .table tbody td { padding: 13px 12px; }
 .stat-number { font-size: 1.7rem; }
}