:root{
  --ink:#15130F; --surface:#1C1A14; --surface-2:#242019;
  --bone:#EAE3D2; --bone-dim:#9B937F; --bone-faint:#6E6858;
  --brass:#A98A52; --brass-dim:#7C6640; --brass-glow:rgba(169,138,82,0.12);
  --oxblood:#A85A4E; --sage:#7C8F6B;
  --hair:rgba(234,227,210,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--ink); color:var(--bone); font-family:'Inter',system-ui,sans-serif;
  font-weight:300; font-size:14.5px; display:flex; min-height:100vh;
}
.mono{font-family:'JetBrains Mono', monospace;}
.serif{font-family:'Fraunces', serif;}
a{color:inherit; text-decoration:none;}

/* ---- SIDEBAR ---- */
aside{
  width:236px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; padding:26px 20px; position:sticky; top:0; height:100vh;
}
.side-brand{display:flex; align-items:center; gap:10px; margin-bottom:44px; padding-left:2px;}
.side-brand svg{width:26px; height:26px; flex-shrink:0;}
.side-brand-name{font-family:'Fraunces',serif; font-size:15px; letter-spacing:.03em;}
.side-brand-sub{font-size:9px; letter-spacing:.14em; color:var(--bone-faint); text-transform:uppercase;}
nav.side-nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:5px;
  font-size:13px; color:var(--bone-dim); cursor:pointer; transition:all .18s; border:1px solid transparent;
}
.nav-item svg{width:15px; height:15px; opacity:.75;}
.nav-item:hover{background:var(--surface-2); color:var(--bone);}
.nav-item.active{background:var(--brass-glow); color:var(--brass); border-color:rgba(169,138,82,0.25);}
.nav-item.active svg{opacity:1;}
.side-foot{margin-top:auto; padding-top:20px; border-top:1px solid var(--hair);}
.side-foot-label{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:6px;}
.side-foot-val{font-size:12.5px; color:var(--bone-dim);}
.side-foot a{color:var(--oxblood); font-size:12.5px;}

/* ---- MAIN ---- */
main{flex:1; padding:36px 44px 60px; max-width:1180px;}
.topbar{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:36px;}
.page-title{font-family:'Fraunces',serif; font-size:26px; font-weight:400;}
.page-date{font-size:12.5px; color:var(--bone-faint);}

/* ---- KPI CARDS ---- */
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px;}
.kpi{background:var(--surface); border:1px solid var(--hair); border-radius:8px; padding:20px 22px;}
.kpi-label{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:12px;}
.kpi-value{font-family:'Fraunces',serif; font-size:24px; font-weight:500; color:var(--bone);}
.kpi-delta{font-size:11.5px; margin-top:8px;}
.kpi-delta.up{color:var(--sage);}

/* ---- PANELS ---- */
.panel{background:var(--surface); border:1px solid var(--hair); border-radius:8px; margin-bottom:28px; overflow:hidden;}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--hair);}
.panel-title{font-family:'Fraunces',serif; font-size:16.5px; font-weight:500;}
.panel-sub{font-size:12px; color:var(--bone-faint); margin-top:3px;}
.panel-body{padding:22px 24px;}

/* ---- TABLE ---- */
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-faint); font-weight:400; padding:0 14px 12px; border-bottom:1px solid var(--hair);}
th.num, td.num{text-align:right;}
td{padding:14px; border-bottom:1px solid var(--hair); font-size:13.5px;}
tr:last-child td{border-bottom:none;}
td.num{font-family:'JetBrains Mono', monospace; font-size:13px;}
.co-name{font-weight:500; color:var(--bone);}
.pos{color:var(--sage);}
.row-total td{border-top:1.5px solid var(--brass-dim); font-weight:500; color:var(--bone); padding-top:16px;}

/* ---- FILTER PILLS ---- */
.pills{display:flex; gap:8px;}
.pill{
  font-size:12px; padding:7px 14px; border-radius:20px; border:1px solid var(--hair); color:var(--bone-dim);
  cursor:pointer; transition:all .18s; display:inline-block;
}
.pill.active{border-color:var(--brass); color:var(--brass); background:var(--brass-glow);}

/* ---- FORMS ---- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; align-items:end;}
.field label{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:8px;}
.field input, .field select{
  width:100%; background:var(--surface-2); border:1px solid var(--hair); color:var(--bone);
  padding:10px 12px; border-radius:5px; font-family:'Inter',sans-serif; font-size:13.5px;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--brass);}
.btn{
  background:var(--brass); color:var(--ink); border:none; padding:11px 20px; border-radius:5px;
  font-size:13px; font-weight:500; cursor:pointer; transition:opacity .18s;
}
.btn:hover{opacity:.88;}
.btn-outline{
  background:transparent; border:1px solid var(--hair); color:var(--bone-dim); padding:11px 20px; border-radius:5px;
  font-size:13px; cursor:pointer;
}

/* ---- LOGIN PAGE ---- */
.login-wrap{width:100%; display:flex; align-items:center; justify-content:center; min-height:100vh;}
.login-box{width:340px; background:var(--surface); border:1px solid var(--hair); border-radius:10px; padding:40px 32px;}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px;}
.login-brand svg{width:38px; height:38px;}
.login-title{font-family:'Fraunces',serif; font-size:18px;}
.login-sub{font-size:11.5px; color:var(--bone-faint); text-align:center; margin-bottom:24px;}
.error-msg{background:rgba(168,90,78,0.12); border:1px solid rgba(168,90,78,0.3); color:var(--oxblood); font-size:12.5px; padding:10px 14px; border-radius:5px; margin-bottom:18px;}

/* ---- ALERTS ---- */
.alert-ok{background:rgba(124,143,107,0.12); border:1px solid rgba(124,143,107,0.3); color:var(--sage); font-size:12.5px; padding:10px 14px; border-radius:5px; margin-bottom:20px;}