
:root{
  --ink:#202e31;
  --muted:#778080;
  --green:#216651;
  --lime:#dcec9d;
  --line:#e4e8e3;
  --paper:#f5f6f2;
  --white:#fff;
  --nav:#192d2a}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{
  color:inherit;
  text-decoration:none}
button,input,select,textarea{
  font:inherit}
button,a,input,select,textarea{
  outline-offset:4px}
button{
  cursor:pointer}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:254px;
  background:var(--nav);
  color:#d9e5de;
  padding:38px 22px;
  display:flex;
  flex-direction:column}
.brand{
  font-size:31px;
  letter-spacing:-1.5px;
  font-weight:750;
  color:#fff;
  padding-left:12px}
.brand span{
  color:var(--lime);
  font-size:17px;
  margin-left:3px}
.brand-caption{
  font-size:12px;
  color:#9caea7;
  margin:4px 12px 42px}
.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:8px}
.sidebar nav a{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:8px;
  font-size:14px;
  align-items:center}
.sidebar nav a:hover{
  background:#ffffff0a}
.sidebar nav a[aria-current]{
  background:#dcec9d;
  color:#263b2b;
  font-weight:650}
.sidebar-bottom{
  margin-top:auto;
  font-size:12px;
  padding:14px 12px;
  color:#a0b4aa}
.private-dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--lime);
  border-radius:50%;
  margin-right:6px}
.logout{
  border:0;
  background:none;
  color:#a0b4aa;
  padding:15px 0 0;
  font-size:12px}
main{
  margin-left:254px;
  padding:0 42px 20px;
  max-width:1800px}
.topline{
  height:74px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:1.7px;
  color:var(--muted)}
header{
  margin:34px 0 28px}
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
.eyebrow{
  font-size:10px;
  letter-spacing:2px;
  color:var(--green);
  font-weight:700;
  margin:0 0 8px}
h1{
  font-size:36px;
  font-weight:600;
  letter-spacing:-1.3px;
  line-height:1.2;
  margin:0 0 9px}
h2{
  font-size:18px;
  letter-spacing:-.35px;
  font-weight:650;
  margin:0 0 8px}
p{
  margin:8px 0 16px}
.muted{
  color:var(--muted);
  font-size:13px}
.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid #d7dfd6;
  border-radius:7px;
  padding:10px 16px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:600}
.button:hover{
  filter:brightness(.96)}
.primary{
  background:var(--green);
  color:#fff;
  border-color:var(--green)}
.month-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px}
.month-nav select{
  min-width:180px;
  background:transparent;
  border:0;
  font-weight:600;
  padding:5px 10px}
.icon-button{
  display:flex;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff}
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  margin-bottom:26px}
.metric{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  min-height:142px}
.metric>span{
  font-size:12px;
  color:var(--muted)}
.metric strong{
  font-size:29px;
  letter-spacing:-1px;
  font-weight:600;
  margin:8px 0 5px;
  font-variant-numeric:tabular-nums}
.metric small{
  font-size:10px;
  color:var(--muted)}
.metric.featured{
  background:var(--green);
  border-color:var(--green);
  color:white}
.metric.featured span,.metric.featured small{
  color:#c9ddd4}
.positive{
  color:var(--green)!important}
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  margin-bottom:24px;
  min-width:0}
.section-heading{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:18px}
.section-heading h2{
  margin:0}
.section-heading p{
  margin:5px 0 0}
.text-link{
  color:var(--green);
  font-size:12px;
  font-weight:600}
.table-wrap{
  overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  text-align:left}
th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:500;
  padding:13px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap}
td{
  padding:13px 12px;
  border-bottom:1px solid #eff1ed}
td strong{
  display:block;
  font-size:12px;
  font-weight:600}
td small{
  display:block;
  font-size:10px;
  color:var(--muted);
  max-width:290px}
tbody tr:hover{
  background:#fafbf8}
.numeric{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap}
.amount{
  font-weight:600}
.center{
  text-align:center}
tfoot td{
  padding-top:20px;
  border:0;
  font-weight:700}
.tag{
  display:inline-block;
  background:#edf3e9;
  color:#567048;
  border:1px solid #e2e9dc;
  border-radius:5px;
  padding:3px 8px;
  font-size:10px;
  white-space:nowrap}
.installment{
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums}
.status{
  width:25px;
  height:25px;
  border-radius:50%;
  border:1px solid #dbe3d9;
  background:white;
  color:#b6c0b4;
  font-size:13px;
  line-height:20px;
  padding:0}
.status.done{
  background:#e8f1e7;
  color:#3f7650;
  border-color:#d2e3cf}
.two-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px}
.detail-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid #edf0e9;
  font-size:12px}
.detail-row strong{
  font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums}
.help{
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin-top:15px}
footer{
  font-size:10px;
  color:#9aa09b;
  margin:26px 0 10px}
.form-panel{
  max-width:760px}
form p label{
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px}
input:not([type=checkbox]):not([type=hidden]),select,textarea{
  border:1px solid #d7dfd6;
  border-radius:6px;
  background:white;
  color:var(--ink);
  padding:10px 12px;
  max-width:100%}
.form-panel input:not([type=checkbox]),.form-panel select,.form-panel textarea,.two-columns form select,.two-columns form input{
  width:100%}
input[type=checkbox]{
  accent-color:var(--green);
  width:18px;
  height:18px}
label:has(+input[type=checkbox]){
  display:inline-block;
  margin-right:10px}
.errorlist{
  color:#ae4433;
  font-size:12px;
  padding-left:20px}
.notice{
  border:1px solid #dfdfc4;
  background:#fbfbe9;
  padding:13px 16px;
  border-radius:7px;
  margin:16px 0;
  font-size:13px}
.notice.success{
  background:#edf6ed;
  border-color:#cce0ca}
.notice.error{
  background:#fff0ed;
  border-color:#ebc9c2}
.danger-link{
  border:0;
  background:none;
  color:#a44b3a;
  font-size:12px;
  margin-top:30px;
  padding:0}
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:end}
.filter-bar label{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:6px}
.filter-bar input{
  width:95px}
.filter-bar select{
  max-width:220px}
.ranking-row{
  padding:5px 0 12px}
.ranking-row .detail-row{
  border:0;
  padding-bottom:8px}
.bar-track{
  height:5px;
  border-radius:4px;
  background:#f0f3ec}
.bar{
  height:100%;
  border-radius:4px;
  background:#9fb875}
.chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0}
details{
  margin-top:22px}
summary{
  color:var(--green);
  font-size:12px;
  cursor:pointer}
.empty{
  text-align:center;
  padding:70px 20px}
.empty .actions{
  justify-content:center;
  margin-top:22px}
.empty-symbol{
  display:block;
  font-size:50px;
  color:#a2b895;
  margin-bottom:16px}
.empty-cell{
  text-align:center;
  padding:40px;
  color:var(--muted)}
.login{
  max-width:500px;
  margin:70px auto}
.login h1{
  font-size:34px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
@media(min-width:1450px){
  main{
  padding-left:60px;
  padding-right:60px}
.metric strong{
  font-size:34px}
}
@media(max-width:1100px){
  .sidebar{
  width:210px;
  padding:30px 14px}
main{
  margin-left:210px;
  padding:0 24px}
.page-header{
  align-items:flex-start;
  flex-direction:column}
.metrics{
  grid-template-columns:repeat(2,1fr)}
.two-columns{
  grid-template-columns:1fr}
}
@media(max-width:700px){
  .sidebar{
  position:relative;
  width:100%;
  padding:16px}
.brand{
  font-size:25px}
.brand-caption,.sidebar-bottom{
  display:none}
.sidebar nav{
  flex-direction:row;
  overflow:auto;
  margin-top:14px;
  gap:5px}
.sidebar nav a{
  white-space:nowrap;
  font-size:11px;
  padding:8px}
main{
  margin:0;
  padding:0 16px}
.topline{
  height:46px}
h1{
  font-size:29px}
.metric{
  padding:16px}
.metric strong{
  font-size:24px}
.metric small{
  font-size:9px}
.panel{
  padding:16px}
.section-heading{
  align-items:flex-start}
.login{
  margin-top:25px}
.filter-bar>div{
  flex:1;
  min-width:130px}
.filter-bar select{
  width:100%}
}


.recurrence-toggle {
  border: 1px solid #d7dfd6;
  border-radius: 5px;
  padding: 4px 9px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}
.recurrence-toggle.active {
  background: #e8f1e7;
  border-color: #d2e3cf;
  color: var(--green);
}
.helptext {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.document-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:24px;align-items:start}.pdf-preview{position:sticky;top:20px}.pdf-preview iframe{width:100%;height:75vh;border:1px solid #ddd;background:white}.pdf-drop{border:2px dashed #7e9c95;padding:24px;border-radius:12px}fieldset label,details label{display:block;margin:10px 0}fieldset input[type=checkbox],details input[type=checkbox]{width:auto}@media(max-width:1000px){.document-layout{grid-template-columns:1fr}.pdf-preview{position:static}}

.pdf-preview select{width:100%;padding:10px;margin:8px 0 12px}.linked-documents{list-style:none;padding:0}.linked-documents li{border-bottom:1px solid #ddd;padding:10px 0;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.document-choice{color:#244e43;text-align:left;text-decoration:underline;overflow-wrap:anywhere}.pdf-preview .button{margin-top:12px}

.button:disabled{opacity:.45;cursor:not-allowed;background:#e5e7e5;color:#626963;border-color:#d5d9d5}#payment-documents{scroll-margin-top:24px}

.btn{display:inline-block;padding:10px 16px;border:1px solid #cdd4ce;border-radius:8px;background:white;color:#244e43;cursor:pointer;margin:6px 0}.btn-primary{background:#315d50;color:white}.btn:disabled{opacity:.4;cursor:default}main>form input:not([type=checkbox]),main>form select{padding:10px;max-width:100%;border:1px solid #cdd4ce;border-radius:8px}.mfa-secret{overflow-wrap:anywhere}.mfa-qr{max-width:100%;width:240px;background:white;padding:12px}
