:root{
  --gold:#E1AA42; --gold-dark:#C08F2E; --ink:#2A2622; --bg:#F6F4F1; --card:#fff;
  --line:#E7E1D8; --muted:#8B8177; --green:#2E9E68; --green-bg:#E8F6EF;
  --amber:#C77A18; --amber-bg:#FDF3E3; --slate:#6B7280; --slate-bg:#F1F2F4;
  --red:#C4453B; --shadow:0 1px 2px rgba(42,38,34,.05),0 8px 24px rgba(42,38,34,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  background:var(--bg); color:var(--ink); direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--gold-dark)}
.hidden{display:none !important}

/* ---------- login ---------- */
#login{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#2A2622,#3B342C 55%,#4A3E2C); padding:20px;
}
#login .box{
  background:#fff; border-radius:20px; padding:34px 30px; width:100%; max-width:380px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
#login h1{margin:0 0 4px; font-size:23px; font-weight:800; letter-spacing:-.3px}
#login .sub{color:var(--muted); font-size:14px; margin-bottom:22px}
#login label{display:block; font-size:13px; font-weight:600; margin:14px 0 6px}
#login input{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px;
  background:#FBFAF8; outline:none;
}
#login input:focus{border-color:var(--gold); background:#fff}
#login button{
  width:100%; margin-top:22px; padding:13px; border:0; border-radius:11px; cursor:pointer;
  background:var(--ink); color:#fff; font-weight:700; font-size:15px;
}
#login button:hover{background:#000}
/* must come after #login button - same ID specificity, later wins */
#login .whopick{display:flex; gap:9px; margin-top:6px}
#login .whopick button{
  flex:1; margin:0; padding:14px 10px; border:2px solid var(--line); border-radius:12px;
  background:#FBFAF8; color:var(--muted); font-weight:700; font-size:17px;
}
#login .whopick button:hover{background:#F1EDE6; border-color:var(--muted)}
#login .whopick button.on{background:var(--gold); border-color:var(--gold-dark); color:#3A2E12}
.err{color:var(--red); font-size:13.5px; margin-top:12px; min-height:19px; font-weight:500}

/* ---------- shell ---------- */
header{
  background:var(--ink); color:#fff; padding:12px 18px;
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20;
}
header .brand{font-weight:800; font-size:17px; letter-spacing:-.2px}
header .brand span{color:var(--gold)}
header .spacer{flex:1}
header .who{font-size:13px; color:#C9C2B8; white-space:nowrap}
header button{
  background:transparent; border:1px solid rgba(255,255,255,.22); color:#fff;
  border-radius:9px; padding:6px 11px; cursor:pointer; font-size:13px;
}
header button:hover{background:rgba(255,255,255,.1)}

nav.tabs{
  background:#fff; border-bottom:1px solid var(--line); display:flex; gap:2px;
  padding:0 10px; overflow-x:auto; position:sticky; top:53px; z-index:19;
  scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  background:none; border:0; border-bottom:3px solid transparent; padding:13px 14px;
  cursor:pointer; color:var(--muted); font-weight:600; white-space:nowrap; font-size:14.5px;
}
nav.tabs button.on{color:var(--ink); border-bottom-color:var(--gold)}

main{padding:18px 16px 60px; max-width:1180px; margin:0 auto}
.page{display:none}
.page.on{display:block}

/* ---------- bits ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
h2.title{font-size:20px; font-weight:800; margin:0 0 2px; letter-spacing:-.3px}
.sub{color:var(--muted); font-size:13.5px}

.btn{
  border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 14px;
  cursor:pointer; font-weight:600; font-size:14px; white-space:nowrap;
}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.primary:hover{background:#000}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#3A2E12}
.btn.gold:hover{background:var(--gold-dark)}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:9px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.chips{display:flex; gap:7px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 15px;
  cursor:pointer; white-space:nowrap; font-size:14px; font-weight:600; color:var(--muted);
}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700}
.pill.draft{background:var(--slate-bg); color:var(--slate)}
.pill.final{background:var(--amber-bg); color:var(--amber)}
.pill.paid{background:var(--green-bg); color:var(--green)}

.banner{
  background:var(--amber-bg); border:1px solid #F0DCB5; color:#7A4F0B; border-radius:12px;
  padding:12px 14px; margin-bottom:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.empty{text-align:center; padding:52px 20px; color:var(--muted)}
.empty .big{font-size:44px; margin-bottom:10px}
.empty h3{margin:0 0 6px; color:var(--ink); font-size:18px}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; background:#fff}
thead th{
  text-align:right; font-size:12.5px; font-weight:700; color:var(--muted); padding:11px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:#FCFBF9;
}
tbody td{padding:10px 12px; border-bottom:1px solid #F2EEE8; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tfoot td{padding:13px 12px; font-weight:800; background:#FCFBF9; border-top:2px solid var(--line)}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.name{font-weight:700}
.muted{color:var(--muted)}
.money-in{
  width:112px; padding:8px 10px; border:1.5px solid var(--line); border-radius:9px; text-align:right;
  background:#FBFAF8; font-variant-numeric:tabular-nums;
}
.money-in:focus{border-color:var(--gold); background:#fff; outline:none}
.money-in.saved{border-color:var(--green); background:var(--green-bg)}
select.status{padding:7px 9px; border:1.5px solid var(--line); border-radius:9px; background:#fff; cursor:pointer}
.clip{
  border:1px solid var(--line); background:#fff; border-radius:9px; padding:6px 10px; cursor:pointer;
  font-size:13px; font-weight:600; white-space:nowrap;
}
.clip.has{border-color:var(--gold); background:#FEF8EC}

/* ---------- mobile cards ---------- */
@media (max-width:760px){
  main{padding:14px 11px 70px}
  header{padding:11px 13px}
  header .brand{white-space:nowrap; font-size:16px}
  nav.tabs{top:49px}
  .tbl-wrap{border:0; box-shadow:none; overflow:visible}
  table.cards, table.cards tbody, table.cards tr, table.cards td{display:block; width:100%}
  table.cards thead, table.cards tfoot tr th{display:none}
  table.cards tr{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    margin-bottom:11px; padding:6px 4px; box-shadow:var(--shadow);
  }
  table.cards tbody td{
    border:0; border-bottom:1px dashed #F0EBE3; display:flex; align-items:center;
    justify-content:space-between; gap:10px; padding:9px 13px;
  }
  table.cards tbody td:last-child{border-bottom:0}
  table.cards tbody td::before{
    content:attr(data-label); font-size:12.5px; font-weight:700; color:var(--muted);
  }
  table.cards tbody td.card-head{
    background:#FCFBF9; border-radius:10px; margin:2px 4px 4px; font-size:16px;
  }
  table.cards tbody td.card-head::before{content:''}
  table.cards tfoot{display:block}
  table.cards tfoot tr{background:var(--ink); color:#fff; border:0}
  table.cards tfoot td{display:flex; justify-content:space-between; background:transparent; border:0; color:#fff}
  table.cards tfoot td::before{content:attr(data-label); font-weight:700; opacity:.75}
  table.cards tfoot td:empty{display:none}
  .money-in{width:120px}
}
@media (max-width:560px){
  header .who{display:none}   /* the brand must never wrap to a second line */
}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:16px}
.modal.on{display:flex}
.modal .backdrop{position:absolute; inset:0; background:rgba(28,24,20,.5)}
.modal .panel{
  position:relative; background:#fff; border-radius:18px; width:100%; max-width:520px;
  max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.modal .panel header{
  background:#fff; color:var(--ink); border-bottom:1px solid var(--line); padding:16px 20px;
  position:sticky; top:0; border-radius:18px 18px 0 0;
}
.modal .panel header .t{font-weight:800; font-size:17px}
.modal .panel header button{border-color:var(--line); color:var(--muted)}
.modal .body{padding:18px 20px}
.modal .foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-start; position:sticky; bottom:0; background:#fff}
label.f{display:block; font-size:13px; font-weight:700; margin:14px 0 6px; color:#4A443D}
label.f:first-child{margin-top:0}
.f-in{
  width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px;
  background:#FBFAF8; outline:none;
}
.f-in:focus{border-color:var(--gold); background:#fff}
.f-hint{font-size:12.5px; color:var(--muted); margin-top:5px}
.checks{display:flex; flex-wrap:wrap; gap:8px}
.checks label{
  display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px;
  padding:7px 11px; cursor:pointer; font-size:14px;
}
.drop{
  border:2px dashed var(--line); border-radius:12px; padding:26px 16px; text-align:center;
  color:var(--muted); cursor:pointer; background:#FBFAF8;
}
.drop.over{border-color:var(--gold); background:#FEF8EC; color:var(--ink)}

.rlist{display:flex; flex-direction:column; gap:8px}
.ritem{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; background:#fff;
}
.ritem .fn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.ritem .meta{font-size:12px; color:var(--muted); white-space:nowrap}

#toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:999px; font-weight:600;
  font-size:14px; z-index:200; transition:transform .22s ease; box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:92vw; text-align:center;
}
#toast.on{transform:translateX(-50%) translateY(0)}
#toast.bad{background:var(--red)}