:root{
  --bg:#1b1714; --panel:#241f1b; --line:#3a322c; --ink:#f3ece3; --mut:#b3a596;
  --terra:#c2643a; --ochre:#d7a24b; --green:#6fa15a; --red:#cf6b5a; --blue:#6f97c2; --cream:#efe6d8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.4;}
#app{max-width:780px;margin:0 auto;padding:14px 14px 60px;}
a{color:var(--blue)}
h1{font-size:19px;margin:4px 0 8px;font-weight:650;}
h1 .sub{font-size:12px;color:var(--mut);font-weight:400;display:block;margin-top:2px;}
.summary{color:var(--mut);font-size:13px;margin-bottom:8px;}
.summary b{color:var(--ink)}
.warn{background:#2c2317;border:1px solid #4a3a1f;color:#e7cfa0;border-radius:8px;
  padding:8px 10px;font-size:12.5px;margin-bottom:12px;}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.toolbar input,.toolbar select{background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:9px 10px;font-size:14px;}
.toolbar input{flex:1;min-width:140px;}

.list{display:flex;flex-direction:column;gap:7px;}
.row{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;cursor:pointer;}
.row:active{background:#2c2620}
.row .nm{flex:1;min-width:0;}
.row .nm .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .nm .m{color:var(--mut);font-size:12px;}
.row .amt{text-align:right;white-space:nowrap;}
.row .amt .c{color:var(--ochre);font-weight:600;}
.row .amt .v{font-size:12px;color:var(--green);}
.row .amt .v.none{color:var(--mut)}
.badge{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:20px;border:1px solid var(--line);margin-left:4px;}
.badge.pending{color:var(--mut)}
.badge.verified{color:var(--green);border-color:var(--green)}
.badge.settled{color:var(--blue);border-color:var(--blue)}
.badge.tocall{color:var(--terra);border-color:var(--terra)}
.empty{color:var(--mut);text-align:center;padding:30px;}

/* detail sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.sheet-card{background:var(--bg);border:1px solid var(--line);border-radius:14px 14px 0 0;
  width:100%;max-width:780px;max-height:92vh;overflow:auto;padding:16px 14px 30px;}
@media(min-width:640px){.sheet{align-items:center}.sheet-card{border-radius:14px}}
.sheet-head{display:flex;align-items:flex-start;gap:10px;}
.d-name{font-size:18px;font-weight:650;flex:1;}
.x{background:none;border:none;color:var(--mut);font-size:20px;cursor:pointer;}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:90px;}
.chip .l{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.chip .v{font-size:17px;font-weight:600;margin-top:2px;}
.reconcile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;}
.reconcile label{display:block;color:var(--mut);font-size:12px;margin-bottom:5px;}
.reconcile input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:10px;font-size:16px;}
.rec-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:9px 12px;font-size:13.5px;cursor:pointer;}
.btn.primary{background:var(--terra);border-color:var(--terra);color:#fff;font-weight:600;}
.btn.ghost{color:var(--mut)}
.savemsg{font-size:12.5px;margin-top:8px;min-height:16px;}
.savemsg.ok{color:var(--green)} .savemsg.err{color:var(--red)}
.d-comment{font-size:13px;color:var(--cream);background:#221c2a;border:1px solid #3a3147;
  border-radius:8px;padding:8px 10px;margin:8px 0;white-space:pre-wrap;}
.scroll-x{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--bg);}
td.num{text-align:right;font-variant-numeric:tabular-nums;}
.pos{color:var(--green)} .neg{color:var(--red)} .m{color:var(--mut)}