/* Theme: Matte Black / Warm Amber-Gold / Cream White */
:root{
  --bg:#f6f1e4; --panel:#fffdf6; --ink:#1a1712; --muted:#8a8069;
  --brand:#c08a1e; --brand-dark:#9a6e15; --accent:#d9a441;
  --line:#e9e1cc; --red:#a8402f; --gold:#8a6a10; --black:#232019;
  --radius:10px; --shadow:0 1px 3px rgba(35,32,25,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--brand-dark)}
#app{display:flex;min-height:100vh}
#side{width:220px;background:#191611;color:#d9cfb8;flex-shrink:0}
#side .logo{padding:18px 16px;border-bottom:1px solid rgba(217,164,65,.18)}
#side .logo b{color:#f6f1e4;font-size:16px;display:block}
#side .logo span{font-size:11px;color:#a8996f}
#side nav{padding:10px 0}
#side nav a{display:block;color:#d9cfb8;padding:11px 18px;font-size:13.5px;text-decoration:none;border-left:3px solid transparent}
#side nav a:hover{background:rgba(217,164,65,.10)}
#side nav a.on{background:rgba(217,164,65,.22);border-left-color:var(--accent);color:#ffe9bd}
#side .foot{padding:12px 16px;font-size:11px;color:#a8996f;border-top:1px solid rgba(217,164,65,.18)}
#main{flex:1;padding:22px 26px;max-width:1200px}
h1{font-size:20px;margin-bottom:2px}
.sub{color:var(--muted);margin-bottom:18px;font-size:12.5px}
h2{font-size:15px;margin:18px 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card .t{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.card .v{font-size:19px;font-weight:600;margin-top:4px}
.card .v.pos{color:var(--gold)} .card .v.neg{color:var(--red)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:18px}
table{width:100%;border-collapse:collapse}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:8px;border-bottom:2px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:#faf5e6}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.paid,.pill.income,.pill.active{background:#f3e6c3;color:#7a5c0d}
.pill.unpaid{background:#f2e0da;color:var(--red)}
.pill.partial{background:#efe7d4;color:#8a6a10}
.pill.expense,.pill.expired{background:#e6e2d6;color:var(--black)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end}
label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
input[type=text],input[type=number],input[type=date],input[type=month],select,textarea{
  width:100%;padding:8px 9px;border:1px solid #d3c8a8;border-radius:6px;font-size:13.5px;background:#fffdf6;font-family:inherit}
input:focus,select:focus{outline:2px solid rgba(217,164,65,.35);border-color:var(--brand)}
.btn,input[type=submit]{background:var(--black);color:#f6e7c3;border:none;padding:9px 16px;border-radius:6px;font-size:13.5px;cursor:pointer;font-weight:600}
.btn:hover{background:var(--brand-dark);color:#fffdf6}
.btn.ghost{background:#fffdf6;color:var(--ink);border:1px solid #d3c8a8;font-weight:500}
.btn.warn{background:var(--red);color:#fffdf6}
.mini{background:none;border:1px solid #d3c8a8;border-radius:5px;padding:3px 8px;font-size:11.5px;cursor:pointer;color:var(--ink);text-decoration:none}
.mini:hover{border-color:var(--red);color:var(--red)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.right{margin-left:auto}
.hbar{height:9px;background:#ece5d2;border-radius:5px;overflow:hidden;min-width:120px}
.hbar>div{height:100%;border-radius:5px;background:var(--brand)}
.hbar>div.over{background:var(--red)}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:8px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar-wrap{display:flex;align-items:flex-end;gap:3px;height:130px}
.bar{width:16px;border-radius:3px 3px 0 0;min-height:2px}
.bar.inc{background:var(--accent)} .bar.exp{background:var(--black)}
.bar-lbl{font-size:10.5px;color:var(--muted)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-bottom:6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.empty{color:var(--muted);text-align:center;padding:24px;font-size:13px}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.tot td{font-weight:700;border-top:2px solid var(--line)}
.msg{padding:9px 12px;border-radius:6px;background:#f3e6c3;color:#7a5c0d;margin-bottom:12px;font-size:13px}
.msg.err{background:#f2e0da;color:var(--red)}
@media print{#side,.no-print,input,select,.btn,.mini{display:none !important}#main{padding:0;max-width:none}body{background:#fff}}
@media (max-width:760px){#app{flex-direction:column}#side{width:100%}#main{padding:14px}}

/* ---------- responsive ---------- */
.panel{overflow-x:auto}
@media (max-width:1000px){
  #main{padding:16px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
}
@media (max-width:760px){
  #app{flex-direction:column}
  #side{width:100%}
  #side .logo{padding:12px 16px}
  #side nav{display:flex;overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch}
  #side nav a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:11px 13px}
  #side nav a.on{border-bottom-color:var(--accent)}
  #side .foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  #main{padding:12px}
  .grid{grid-template-columns:1fr 1fr}
  .row{flex-direction:row}
  .panel table{min-width:560px}
  input,select,textarea{font-size:16px} /* prevents mobile zoom-on-focus */
}
@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  h1{font-size:17px}
  .card .v{font-size:16px}
}