:root{
  --ink:#1E2A22; --ink-70: rgba(30,42,34,.7); --ink-50: rgba(30,42,34,.5);
  --paper:#F2EFE4; --paper-raised:#FFFDF7;
  --teal:#1F5C52; --ochre:#B98530; --brick:#9C4A3A;
  --line: rgba(30,42,34,.16); --line-soft: rgba(30,42,34,.09);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.5;}
h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; margin:0;}
.num{font-variant-numeric: tabular-nums;}
a{color:var(--teal);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:14px;}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

.shell{display:flex; min-height:100vh;}
.sidebar{width:236px; flex:0 0 236px; background:var(--ink); color:#EFEAD9; display:flex; flex-direction:column; padding:22px 0;}
.brand{padding:0 20px 18px 20px; border-bottom:1px solid rgba(239,234,217,.14); margin-bottom:6px;}
.brand .mark{font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:#EFEAD9;}
.brand .sub{font-size:12px; color:rgba(239,234,217,.55); margin-top:3px;}
.nav{list-style:none; margin:6px 0; padding:0; flex:1;}
.nav li a{display:block; text-decoration:none; color:rgba(239,234,217,.72); padding:10px 20px; font-size:13.5px; border-left:3px solid transparent;}
.nav li a:hover{color:#EFEAD9; background:rgba(239,234,217,.05);}
.nav li a.active{color:#fff; border-left-color:var(--ochre); background:rgba(239,234,217,.07); font-weight:600;}
.side-foot{padding:14px 20px 0 20px; border-top:1px solid rgba(239,234,217,.14);}
.who{display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(239,234,217,.85); margin-bottom:10px;}
.avatar{width:24px;height:24px;border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;}
.link-btn{background:none;border:none;color:rgba(239,234,217,.6); font-size:12.5px; padding:0; text-decoration:underline;}

.main{flex:1; min-width:0; padding:28px 34px 60px 34px;}
.topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.topbar h1{font-size:26px;}
.topbar .today{font-size:12.5px; color:var(--ink-50);}

.section{margin-bottom:34px;}
.section-head{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px;}
.section-head h2{margin:0; font-size:16px;}
.muted{color:var(--ink-50);} .small{font-size:12.5px;}

.plates{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:26px;}
.plate{background:var(--paper-raised); border:1px solid var(--line); padding:15px 16px; position:relative;}
.plate .k-label{font-size:11.5px; color:var(--ink-50); margin-bottom:6px;}
.plate .k-value{font-family:'Fraunces',serif; font-size:23px; font-weight:600;}
.plate .k-note{font-size:12px; color:var(--ink-50); margin-top:4px;}
.pos{color:var(--teal);} .neg{color:var(--brick);}

.panel{background:var(--paper-raised); border:1px solid var(--line); padding:18px 20px;}
.grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:18px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:980px){.grid2{grid-template-columns:1fr;} .grid3{grid-template-columns:1fr 1fr;}}

.ledger{width:100%; border-collapse:collapse;}
.ledger th{text-align:left; font-size:11.5px; color:var(--ink-50); font-weight:600; padding:0 10px 8px 10px; border-bottom:1px solid var(--line);}
.ledger td{padding:10px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle;}
.ledger tr:last-child td{border-bottom:none;}
.ledger td.num, .ledger th.num{text-align:right;}
.row-actions{display:flex; gap:8px; justify-content:flex-end;}
.empty{padding:22px 10px; text-align:center; color:var(--ink-50); font-size:13.5px;}

.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--ink); background:var(--ink); color:#fff; padding:8px 14px; font-size:13px; font-weight:600; text-decoration:none;}
.btn.secondary{background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:500;}
.btn.ghost{background:none; border:none; color:var(--teal); font-weight:600; padding:4px 6px;}
.btn.danger{background:none; border:none; color:var(--brick); font-weight:500; padding:4px 6px; font-size:12.5px;}
.btn.sm{padding:5px 10px; font-size:12px;}

.badge{display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--line); color:var(--ink-70);}
.badge.due-soon{border-color:var(--ochre); color:var(--ochre);}
.badge.due-late{border-color:var(--brick); color:var(--brick);}
.badge.ok{border-color:var(--teal); color:var(--teal);}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 8px; background:var(--paper); border:1px solid var(--line); margin:0 8px 8px 0;}
.dot{width:8px;height:8px;border-radius:50%; display:inline-block;}

form.inline-form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:14px; background:var(--paper); border:1px dashed var(--line); margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:11.5px; color:var(--ink-50);}
.field input, .field select, .field textarea{padding:7px 9px; border:1px solid var(--line); background:#fff; color:var(--ink); min-width:120px;}
.field.grow{flex:1; min-width:180px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.form-grid .field.full{grid-column:1/-1;}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.checkline{display:flex; align-items:center; gap:7px; font-size:13px;}

.pills{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
.pill{border:1px solid var(--line); background:var(--paper-raised); padding:6px 13px; font-size:12.5px; color:var(--ink-70); text-decoration:none; display:inline-block;}
.pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.note-box{font-size:12.5px; color:var(--ink-70); background:var(--paper); border-left:3px solid var(--ochre); padding:10px 12px; margin-top:10px;}
.flash{padding:10px 14px; margin-bottom:16px; border-left:3px solid var(--teal); background:var(--paper-raised); font-size:13.5px;}
.flash.error{border-left-color:var(--brick);}

.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px;}
.login-card{width:100%; max-width:420px; background:var(--paper-raised); border:1px solid var(--line); padding:34px;}
.setup-card{width:100%; max-width:640px; background:var(--paper-raised); border:1px solid var(--line); padding:34px;}
.profiles{display:flex; gap:14px; flex-wrap:wrap; margin:22px 0;}
.profile-btn{flex:1; min-width:140px; border:1px solid var(--line); background:#fff; padding:16px 10px; text-align:center; text-decoration:none; color:var(--ink); display:block;}
.avatar-lg{width:44px;height:44px;border-radius:50%; margin:0 auto 8px auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px;}

@media (max-width:860px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; flex:none; flex-direction:row; align-items:center; padding:12px 10px; overflow-x:auto;}
  .brand{border:none; padding:0 12px; margin:0;}
  .nav{display:flex; flex:none;}
  .nav li a{border-left:none; border-bottom:3px solid transparent; padding:8px 12px; white-space:nowrap;}
  .nav li a.active{border-left:none; border-bottom-color:var(--ochre);}
  .side-foot{border:none; padding:0 12px; display:flex; align-items:center;}
  .main{padding:20px 16px 50px 16px;}
}