:root{font-family:system-ui,sans-serif;color:#28231e;background:#f5f1eb}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{max-width:1180px;margin:auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
h1,h2,p{margin:0}
header p{color:#746a61}
.head-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card{background:white;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 3px 14px #513a1a12}
.login{max-width:420px;margin:80px auto}
.login input,.login button{display:block;width:100%;padding:14px;margin-top:12px;border:1px solid #d6cec3;border-radius:12px;font-size:16px}
button{background:#8a5b25;color:white;border:0;font-weight:700;cursor:pointer;border-radius:10px}
.secondary{padding:10px 16px;background:#efe7db;color:#5a4326;border:1px solid #ddd1c0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}
.grid.summary{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid .card{display:flex;flex-direction:column;margin-bottom:0}
.grid span{color:#746a61;font-size:14px}
.grid strong{font-size:26px;margin-top:6px}
.pill{padding:8px 12px;border-radius:99px;background:#e6ded2;font-size:13px}
.ok{background:#d9efdf;color:#175f2d}
.stale{background:#ffe7bc;color:#7b4800}
.rows>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee6dd}
.rows small{color:#746a61}
#error{color:#b3261e;margin-top:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{background:#efe7db;color:#5a4326;padding:10px 16px}
.tabs button.active{background:#8a5b25;color:white}
.rangebar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{background:#efe7db;color:#5a4326;padding:8px 14px}
.chips button.active{background:#8a5b25;color:white}
.custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.custom label{font-size:13px;color:#746a61;display:flex;flex-direction:column;gap:2px}
.custom input{padding:8px;border:1px solid #d6cec3;border-radius:8px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #eee6dd;white-space:nowrap}
th{color:#746a61;font-weight:600;position:sticky;top:0;background:white}
td.num,th.num{text-align:right}
tr.warn td{background:#fff3e0}
.tag{padding:2px 8px;border-radius:99px;font-size:12px;font-weight:700}
.tag.paid{background:#d9efdf;color:#175f2d}
.tag.credit{background:#ffe0e0;color:#8a1f1f}
.empty{color:#746a61;padding:16px 0}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.card-head h2{margin:0}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.rowbtns button{padding:6px 12px;font-size:13px}
.btn-deposit{background:#efe7db;color:#5a4326;border:1px solid #ddd1c0}
.btn-sell{background:#8a5b25;color:#fff}
.modal{position:fixed;inset:0;background:#00000066;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;z-index:50}
.modal-box{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:460px;box-shadow:0 12px 40px #0004;margin:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h2{margin:0}
.iconbtn{background:none;color:#746a61;font-size:26px;line-height:1;padding:0 6px}
.modal label{display:block;font-size:13px;color:#746a61;margin:12px 0 4px}
.modal input,.modal select{width:100%;padding:11px;border:1px solid #d6cec3;border-radius:10px;font-size:15px}
.modal .two{display:flex;gap:10px}
.modal .two>div{flex:1}
.calc{background:#f7f2ea;border-radius:12px;padding:12px;margin-top:14px}
.calc div{display:flex;justify-content:space-between;padding:3px 0}
.calc strong{font-size:15px}
.seg{display:flex;gap:8px;margin-top:12px}
.seg button{flex:1;background:#efe7db;color:#5a4326;padding:9px}
.seg button.active{background:#8a5b25;color:#fff}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.err{color:#b3261e;margin:10px 0 0;min-height:1em}
@media(max-width:520px){main{padding:14px}.grid{grid-template-columns:1fr 1fr}}