*{box-sizing:border-box}
body{margin:0;background:#f6f8f6;color:#203133;font:14px Arial,sans-serif;display:flex}
aside{background:#163f3b;color:#d1e0da;width:235px;min-height:100vh;padding:30px 17px;position:fixed}
.brand{font-size:25px;font-weight:bold;color:#e8b95c;padding:0 12px 36px}
.brand span{color:#fff}
.brand small{display:block;font-size:9px;letter-spacing:2px;color:#9dbbb1;margin:4px 0 0 26px}
nav{display:grid;gap:5px}
nav a{color:#c1d4cd;text-decoration:none;font-weight:bold;padding:12px;border-radius:7px}
nav a:hover,nav a.active{background:#285953;color:#fff}
.side-user{position:absolute;bottom:30px;left:29px;font-size:12px;line-height:1.6;color:#acc6bd}
main{margin-left:235px;width:calc(100% - 235px);padding:34px 42px;max-width:1550px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
header>span{color:#748080;font-weight:bold}
.eyebrow{font-size:10px;letter-spacing:1.6px;color:#167064;font-weight:bold;margin:0 0 5px}
h1,h2{margin:0;color:#1e3030}
h1{font-size:30px}
h2{font-size:20px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:23px}
.cards article,.panel{background:#fff;border:1px solid #e2eae6;border-radius:11px;box-shadow:0 4px 14px #18342d08}
.cards article{padding:20px}
.cards small,.cards span{display:block;color:#75827f}
.cards strong{font-size:27px;display:block;margin:9px 0 5px}
.cards .danger strong{color:#b9474b}
.panel{padding:22px;overflow:auto}
.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}
.panel-title p{margin:5px 0 0;color:#75827f}
.grid{display:grid;grid-template-columns:minmax(285px,.7fr) minmax(480px,1.4fr);gap:21px}
.form h2{margin-bottom:17px}
form{display:grid;gap:13px}
label{display:grid;gap:6px;font-size:12px;font-weight:bold;color:#50615e}
input,select,textarea{width:100%;border:1px solid #d8e2dd;border-radius:7px;padding:10px;font:14px Arial;color:#203133;background:#fff}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button,.button{background:#176e62;color:#fff;border:0;border-radius:7px;padding:10px 13px;font-weight:bold;text-decoration:none;cursor:pointer;display:inline-block}
.button.light{background:#e9f3ef;color:#176e62}
.pay{padding:8px 10px;white-space:nowrap;font-size:12px}
table{width:100%;border-collapse:collapse;text-align:left}
th{color:#788582;text-transform:uppercase;font-size:10px;letter-spacing:1px;padding:11px 9px;border-bottom:1px solid #e6ece9}
td{padding:13px 9px;border-bottom:1px solid #eef2ef}
td small{color:#75827f;line-height:1.5}
.empty{text-align:center;color:#75827f;padding:33px!important}
.state{display:inline-block;padding:5px 9px;border-radius:14px;font-size:11px;font-style:normal;font-weight:bold;text-transform:capitalize}
.paid{background:#dff2e8;color:#17734e}
.overdue{background:#f8e0e1;color:#a83d42}
.unpaid,.pending{background:#fff0d4;color:#93630c}
.active{background:#e0f0ec;color:#176e62}
.filters{display:flex;gap:6px}
.filters a{background:#edf5f2;color:#176e62;padding:7px 9px;text-decoration:none;border-radius:6px;font-weight:bold;font-size:12px}
.alert{background:#e3f2e9;color:#176e62;border:1px solid #c3e2d0;border-radius:7px;padding:12px 14px;margin:-7px 0 18px}
.alert.error{background:#fae2e2;color:#a83d42;border-color:#edc5c7}
dialog{border:0;border-radius:11px;width:min(450px,94vw);padding:24px;box-shadow:0 18px 50px #0004}
dialog::backdrop{background:#10272466}
.dialog-title{display:flex;justify-content:space-between;align-items:center}
.x{background:none;color:#203133;font-size:26px;padding:0}
dialog p{color:#75827f;margin:6px 0 12px}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-box{background:#fff;width:min(420px,100%);padding:32px;border-radius:12px;border:1px solid #e2eae6;box-shadow:0 12px 36px #18342d14}
.auth-box>p:not(.eyebrow){color:#75827f;line-height:1.55;margin:8px 0 22px}
.auth-box small{display:block;color:#75827f;margin-top:18px}
.auth-box a{color:#176e62}
@media(max-width:900px){aside{width:190px}
main{margin-left:190px;width:calc(100% - 190px);padding:28px}
.cards{grid-template-columns:1fr 1fr}
.grid{grid-template-columns:1fr}
}
@media(max-width:620px){body{display:block}
aside{width:100%;min-height:auto;position:relative;padding:16px}
.brand{padding:0 4px 14px}
.side-user{display:none}
nav{display:flex;overflow:auto}
nav a{white-space:nowrap;padding:9px}
main{margin:0;width:100%;padding:22px 14px}
.cards{gap:9px}
.cards article{padding:14px}
.cards strong{font-size:20px}
.panel{padding:14px}
table{min-width:650px}
.two{grid-template-columns:1fr}
header>span{font-size:11px}
}
.actions{white-space:nowrap}.actions form{display:inline-grid;margin-left:6px}.danger-button{background:#b9474b}.cancel{color:#176e62;text-align:center;font-weight:bold}.statement-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:23px}.statement-cards article{background:#fff;border:1px solid #e2eae6;border-radius:11px;padding:20px}.statement-cards small,.statement-cards span{display:block;color:#75827f}.statement-cards strong{display:block;font-size:19px;margin:8px 0}.payment-box{margin-bottom:23px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px;margin-bottom:21px}.security-grid hr{border:0;border-top:1px solid #e2eae6;margin:22px 0}@media(max-width:900px){.statement-cards{grid-template-columns:1fr 1fr}.security-grid{grid-template-columns:1fr}}@media(max-width:620px){.statement-cards,.three{grid-template-columns:1fr}}