:root{
  --bg:#EEF1EC; --surface:#FFFFFF; --surface-alt:#E3E9E2; --surface-sunk:#E7ECE5;
  --ink:#16231F; --ink-dim:#56645C; --muted:#8B948B; --line:#D7DED5; --line-strong:#C2CBBF;
  --accent:#2E6F5C; --accent-ink:#FFFFFF; --accent-soft:#DEEAE4;
  --ok:#3F8A5D; --ok-soft:#DDEEE1;
  --warn:#B8752A; --warn-soft:#F5E6D2;
  --danger:#A6433C; --danger-soft:#F3DEDB;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(22,35,31,.06), 0 4px 14px rgba(22,35,31,.05);
  --font-display:"Noto Serif Georgian","Noto Serif",Georgia,serif;
  --font-body:"Noto Sans Georgian","Noto Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101613; --surface:#1A2320; --surface-alt:#212B27; --surface-sunk:#161D1A;
    --ink:#E8ECE6; --ink-dim:#A8B2AA; --muted:#6E786F; --line:#2B3632; --line-strong:#3B4844;
    --accent:#57B394; --accent-ink:#0B1411; --accent-soft:#213A32;
    --ok:#5FC685; --ok-soft:#1D3527;
    --warn:#E0A45C; --warn-soft:#3B2E1B;
    --danger:#E08981; --danger-soft:#3A2320;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#101613; --surface:#1A2320; --surface-alt:#212B27; --surface-sunk:#161D1A;
  --ink:#E8ECE6; --ink-dim:#A8B2AA; --muted:#6E786F; --line:#2B3632; --line-strong:#3B4844;
  --accent:#57B394; --accent-ink:#0B1411; --accent-soft:#213A32;
  --ok:#5FC685; --ok-soft:#1D3527;
  --warn:#E0A45C; --warn-soft:#3B2E1B;
  --danger:#E08981; --danger-soft:#3A2320;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  margin:0; padding-inline:16px; padding-block:0;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance;}
button, input, select{font-family:inherit; font-size:inherit; color:inherit;}
input, select{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  padding:7px 9px; min-width:0; width:100%;
}
select{max-width:100%;}
input:focus-visible, select:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
label{font-size:12.5px; color:var(--ink-dim); display:block; margin-bottom:3px;}
.num{font-variant-numeric:tabular-nums;}
.wrap{max-width:1180px; margin:0 auto; padding-block:22px 60px;}
a{color:var(--accent);}

/* ---------- top bar ---------- */
.topbar{
  max-width:1180px; margin:0 auto; padding-block:18px 6px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:16px; flex:none;
}
.brand h1{font-size:19px; letter-spacing:.2px;}
.brand small{display:block; color:var(--ink-dim); font-size:12px; margin-top:1px;}
.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.user-chip{font-size:12.5px; color:var(--ink-dim);}
.user-chip b{color:var(--ink); font-weight:600;}

.btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong);
  background:var(--surface); border-radius:8px; padding:8px 13px; cursor:pointer;
  font-weight:500; white-space:nowrap; transition:background .12s, border-color .12s;
  text-decoration:none; color:inherit;
}
.btn:hover{background:var(--surface-alt);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; filter:none;}
.btn-ghost{border-color:transparent; background:transparent;}
.btn-ghost:hover{background:var(--surface-alt);}
.btn-sm{padding:5px 9px; font-size:12.5px; border-radius:7px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- period + upload ---------- */
.control-row{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-block:14px 18px;
}
.field{display:flex; flex-direction:column; gap:3px;}
.field input[type="month"]{width:auto; min-width:150px;}

.dropzone{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--surface);
  padding:36px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .15s, background .15s;
}
.dropzone.drag{border-color:var(--accent); background:var(--accent-soft);}
.dropzone svg{opacity:.55;}
.dropzone p{margin:0; color:var(--ink-dim); font-size:13.5px; max-width:46ch;}
.dropzone .btn{margin-top:4px;}

.empty-note{
  display:flex; gap:10px; align-items:flex-start; background:var(--surface-alt);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-top:14px;
  font-size:13px; color:var(--ink-dim); line-height:1.55;
}
.empty-note b{color:var(--ink); font-weight:600;}

/* ---------- summary bar ---------- */
.summary{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-block:18px;
}
@media (max-width:640px){ .summary{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; display:flex; flex-direction:column; gap:2px;
}
.stat .n{font-family:var(--font-display); font-size:21px; font-weight:600; font-variant-numeric:tabular-nums;}
.stat .l{font-size:12px; color:var(--ink-dim);}
.stat.warn .n{color:var(--warn);}

/* ---------- compact rows table ---------- */
.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow);
}
.rows-table{width:100%; min-width:920px; border-collapse:collapse;}
.rows-table th{
  text-align:left; font-size:11px; font-weight:600; color:var(--ink-dim); letter-spacing:.2px;
  padding:9px 8px; border-bottom:1px solid var(--line); background:var(--surface-alt);
  white-space:nowrap; position:sticky; top:0; z-index:1;
}
.rows-table td{
  padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px;
}
.rows-table tr.data-row:last-of-type td, .rows-table tr.new-row:last-of-type td{border-bottom:none;}
.rows-table tr.data-row:hover{background:var(--surface-alt);}
.rows-table tr.data-row.excluded{opacity:.5;}
.rows-table td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.rows-table select, .rows-table input{padding:5px 7px; font-size:12.5px;}
.rows-table input[type="checkbox"]{width:15px; height:15px; padding:0; display:block; margin:0 auto;}
.rows-table td.col-check{text-align:center;}

.col-status{width:160px;} .col-recipient{width:170px;} .col-date{width:100px;}
.col-category{width:150px;} .col-ptype{width:150px;} .col-rate{width:100px;} .col-check{width:52px;}

.status-cell{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.pill{
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:99px; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.pill::before{content:""; width:6px; height:6px; border-radius:99px; background:currentColor; flex:none;}
.pill-ok{background:var(--ok-soft); color:var(--ok);}
.pill-warn{background:var(--warn-soft); color:var(--warn);}
.pill-off{background:var(--surface-sunk); color:var(--muted);}

.rate-note{font-size:11px; color:var(--muted); margin-top:2px;}

.new-row td{background:var(--surface-sunk); padding:10px 8px;}
.new-recipient{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.new-recipient .hint{
  font-size:12px; color:var(--warn); display:flex; gap:6px; align-items:center; flex:1 1 100%;
}
.new-recipient input, .new-recipient select{width:auto; flex:1 1 150px; min-width:120px;}
.new-recipient .btn{flex:none;}

.check{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-dim); cursor:pointer;}
.check input{width:15px; height:15px; padding:0;}

select.recipient-select{font-weight:500;}

/* ---------- footer action bar ---------- */
.action-bar{
  position:sticky; bottom:0; margin-top:20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.action-bar .totals{font-size:13px; color:var(--ink-dim);}
.action-bar .totals b{color:var(--ink); font-family:var(--font-display); font-size:16px; font-weight:600;}

/* ---------- drawer ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(15,20,18,.42); opacity:0; pointer-events:none;
  transition:opacity .16s; z-index:20;
}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:var(--shadow); transform:translateX(100%);
  transition:transform .18s; z-index:21; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px;
  border-bottom:1px solid var(--line);
}
.drawer-body{padding:12px 16px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px;}
.rcpt-card{border:1px solid var(--line); border-radius:10px; padding:10px 11px;}
.rcpt-card .rname{font-weight:600; font-size:13.5px;}
.rcpt-card .rmeta{font-size:11.5px; color:var(--muted); margin-top:1px;}
.rcpt-card .rgrid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px;}
.rcpt-card .rgrid .full{grid-column:1/-1;}

.toast-wrap{position:fixed; top:16px; right:16px; z-index:40; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:9px; font-size:13px;
  box-shadow:var(--shadow); max-width:320px;
}
.toast.err{background:var(--danger);}

[hidden]{display:none !important;}
::selection{background:var(--accent-soft);}

/* ---------- auth pages (login / register / settings) ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding-block:40px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:26px 24px;
}
.auth-card h1{font-size:19px; margin-bottom:4px;}
.auth-card .sub{font-size:12.5px; color:var(--ink-dim); margin:0 0 18px;}
.auth-field{margin-bottom:12px;}
.auth-actions{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.auth-alt{font-size:12.5px; color:var(--ink-dim); text-align:center;}
.auth-error{
  background:var(--danger-soft); color:var(--danger); border-radius:8px; padding:9px 11px;
  font-size:12.5px; margin-bottom:14px;
}
.auth-ok{
  background:var(--ok-soft); color:var(--ok); border-radius:8px; padding:9px 11px;
  font-size:12.5px; margin-bottom:14px;
}