* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Arial, sans-serif; }
html { background:#d1d5db; }
body {
  background:#f3f4f6; color:#1f2937;
  max-width:480px; margin:0 auto;
  min-height:100vh;
  box-shadow:0 0 24px rgba(0,0,0,0.15);
}
body.bulkbar-open { padding-bottom:120px; }

.navbar {
  background:#111827; color:#fff; padding:16px 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.navbar h1 { font-size:18px; }
.navbar a { color:#e5e7eb; text-decoration:none; margin-left:20px; font-size:13px; }
.navbar a:hover { color:#fff; text-decoration:underline; }

.topbar {
  background:#111827; color:#fff; padding:14px 16px;
  display:flex; align-items:center; justify-content:center;
  position:sticky; top:0; z-index:20;
}
.hamburger-btn {
  background:none; border:none; color:#fff; font-size:22px;
  cursor:pointer; padding:4px 10px; line-height:1; border-radius:6px;
}
.hamburger-btn:hover, .hamburger-btn:active { background:rgba(255,255,255,0.08); }


.drawer-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:29;
}
.drawer-overlay.open { display:block; }

.drawer {
  position:fixed; top:0; left:0; height:100%; width:280px; max-width:82vw;
  background:#0b1220; color:#e5e7eb; z-index:30;
  transform:translateX(-100%); transition:transform 0.25s ease;
  overflow-y:auto; box-shadow:2px 0 16px rgba(0,0,0,0.35);
}
.drawer.open { transform:translateX(0); }
.drawer-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 16px; border-bottom:1px solid #1f2937;
}
.drawer-header h2 { font-size:15px; color:#fff; }
.drawer-close { background:none; border:none; color:#9ca3af; font-size:18px; cursor:pointer; padding:2px 8px; }
.drawer-close:hover { color:#fff; }
.drawer-items { padding:14px; display:flex; flex-direction:column; gap:10px; }
.drawer-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px;
  background:#131c2e; border:1px solid #1f2937; color:#e5e7eb;
  text-decoration:none; font-size:14px; font-weight:600;
}
.drawer-item:hover { background:#1a2436; }
.drawer-item.active { border-color:#2563eb; background:#152238; color:#93c5fd; }
.drawer-item-danger { color:#fca5a5; }
.drawer-item-danger:hover { background:#2a1518; border-color:#7f1d1d; }
.drawer-icon { font-size:16px; width:22px; text-align:center; }

.drawer-items-context { display:flex; flex-direction:column; gap:10px; border-top:1px solid #1f2937; margin-top:4px; padding-top:16px; }
.drawer-context-label { font-size:11px; color:#6b7280; font-weight:600; padding:0 4px 10px; }
.drawer-items-context form { margin:0; }
.drawer-item-button { border:none; background:none; font:inherit; box-sizing:border-box; width:100%; cursor:pointer; text-align:left; }

.container { margin:20px auto; padding:0 14px; }

.card {
  background:#fff; border-radius:10px; padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1); margin-bottom:20px;
}
.party-title { text-align:center; word-break:break-word; }

table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
th, td { text-align:left; border-bottom:1px solid #e5e7eb; border-right:1px solid #e5e7eb; font-size:11px; padding:8px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th:last-child, td:last-child { border-right:none; }
th { background:#f9fafb; font-weight:600; color:#374151; text-align:center; border-bottom:2px solid #d1d5db; }
tbody tr:nth-child(even) { background:#fafbfc; }
tr:hover { background:#f3f4f6; }

.badge { padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.badge-milk    { background:#dbeafe; color:#1e40af; }
.badge-shop    { background:#fef3c7; color:#92400e; }
.badge-loan    { background:#fce7f3; color:#9d174d; }
.badge-payment { background:#dcfce7; color:#166534; }
.badge-general { background:#e5e7eb; color:#374151; }

.balance-positive { color:#166534; font-weight:700; }
.balance-negative { color:#991b1b; font-weight:700; }
.balance-zero { color:#6b7280; font-weight:700; }

.btn { display:inline-block; padding:8px 16px; border-radius:6px; text-decoration:none; font-size:13px; font-weight:600; border:none; cursor:pointer; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
form input:disabled, form select:disabled { background:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
form input:read-only { background:#f9fafb; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-given { background:#dc2626; color:#fff; }
.btn-given:hover { background:#b91c1c; }
.btn-received { background:#16a34a; color:#fff; }
.btn-received:hover { background:#15803d; }
.btn-small { padding:5px 12px; font-size:11px; }

.link-btn { background:none; border:none; color:#2563eb; font-size:12px; text-decoration:underline; cursor:pointer; padding:0; font-family:inherit; }

.form-error {
  margin:10px 0; padding:10px 12px; border-radius:8px;
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  font-size:12.5px; font-weight:600; line-height:1.5;
}

.party-list a { text-decoration:none; color:inherit; display:block; }
.party-link { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.party-link { position:relative; }
.hold-strip { display:none; position:relative; height:26px; margin:0 0 10px; border-radius:6px; overflow:hidden; background:#fee2e2; }
.party-link.armed .hold-strip { display:block; }
.hold-fill { position:absolute; inset:0 auto 0 0; width:0%; background:#ef4444; transition:width .1s linear; }
.hold-label { position:relative; display:block; line-height:26px; text-align:center; font-size:11px; font-weight:700; color:#7f1d1d; }
.party-link.armed .party-row { background:#fef2f2; }
.party-link.holding .hold-label { color:#fff; }
.party-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #e5e7eb; }
.party-row:last-child { border-bottom:none; }
.party-row:hover { background:#f9fafb; }

form label { display:block; margin-top:12px; margin-bottom:4px; font-size:13px; font-weight:600; }
form input, form select { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; font-family:inherit; }
form button { display:block; margin:20px auto 0; width:fit-content; }
form button.drawer-item-button,
form button.btn-small { margin:0; }

form label.inline-check {
  display:flex; align-items:flex-start; gap:8px;
  margin-top:10px; font-size:12px; font-weight:500; color:#4b5563; line-height:1.5;
}
form label.inline-check input[type=checkbox] { width:16px; height:16px; flex:none; cursor:pointer; margin-top:1px; }


.type-toggle { display:flex; gap:10px; margin-top:12px; }
.type-toggle label { flex:1; margin:0; padding:12px; border:2px solid #d1d5db; border-radius:8px; text-align:center; cursor:pointer; font-size:13px; transition:border-color 0.15s, box-shadow 0.15s; }
.type-toggle label:has(input:checked) { border-color:#111827; box-shadow:0 0 0 1px #111827 inset; font-weight:700; }
.type-toggle input[type=radio] { width:auto; display:inline; margin-right:6px; }

.summary-bar { display:flex; padding:16px 10px; background:#111827; color:#fff; border-radius:10px; margin-bottom:20px; }
.summary-bar > div { text-align:center; flex:1 1 0; min-width:0; padding:0 6px; }
.summary-bar > div + div { border-left:1px solid rgba(255,255,255,0.18); }
.summary-bar .val { font-size:clamp(12px, 4.4vw, 20px); font-weight:700; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.3px; }
.summary-bar .lbl { font-size:11px; color:#9ca3af; margin-top:2px; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis; }

.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:0 4px; }
.table-scroll table { width:100%; }
#ledgerTable { table-layout:fixed; }
#ledgerTable th:nth-child(2), #ledgerTable td:nth-child(2) { width:20%; font-size:9.5px; }
#ledgerTable th:nth-child(3), #ledgerTable td:nth-child(3) { width:34%; }
#ledgerTable th:nth-child(4), #ledgerTable td:nth-child(4) { width:22%; }
#ledgerTable th:nth-child(5), #ledgerTable td:nth-child(5) { width:24%; }
td[data-label="विवरण"] { white-space:normal; text-align:center; }
td[data-label="तारीख"] { white-space:normal; }
td.trash-actions { white-space:normal; }
td[data-label="खाता"], td[data-label="एंट्री"] { white-space:normal; text-align:center; }

.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.pager .btn { background:#e5e7eb; color:#1f2937; }
.pager .btn:hover { background:#d1d5db; }
.pager-info { font-size:11px; color:#6b7280; text-align:center; flex:1; }

.select-cell { display:none; width:34px; text-align:center; padding-left:4px; padding-right:4px; }
table.select-mode .select-cell { display:table-cell; }
.select-cell input[type=checkbox] { width:18px; height:18px; cursor:pointer; }

.bulk-actions-bar {
  display:none; flex-direction:column; gap:10px;
  position:fixed; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:480px; background:#111827; color:#fff;
  padding:14px 20px; box-shadow:0 -2px 10px rgba(0,0,0,0.2); z-index:15;
}
.bulk-actions-bar.open { display:flex; }
.bulk-actions-bar span { font-size:13px; font-weight:600; }
.bulk-actions-bar-buttons { display:flex; gap:10px; }
.bulk-actions-bar-buttons > button,
.bulk-actions-bar-buttons > form { flex:1 1 0; min-width:0; margin:0; }
.bulk-actions-bar-buttons button {
  width:100%; height:44px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8px 10px; margin:0;
}

.entry-meta { font-size:10.5px; color:#6b7280; margin-top:3px; line-height:1.45; white-space:normal; }

.calc-preview {
  margin-top:14px; padding:10px 12px; border-radius:8px;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;
  font-size:12px; font-weight:600; line-height:1.5;
}

.calc-tabs { display:flex; gap:8px; margin-bottom:4px; }
.calc-tabs button {
  flex:1; padding:11px 8px; border-radius:8px; cursor:pointer;
  border:2px solid #d1d5db; background:#fff; color:#374151;
  font-size:12.5px; font-weight:600; font-family:inherit;
}
.calc-tabs button.active { border-color:#111827; background:#111827; color:#fff; }

.calc-form label { display:block; margin-top:12px; margin-bottom:4px; font-size:13px; font-weight:600; }
.calc-form input, .calc-form select { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; font-family:inherit; }

.field-pair { display:flex; gap:8px; }
.field-pair > input { flex:1.2; min-width:0; }
.field-pair > select { flex:1; min-width:0; }

.result-box { margin-top:18px; border-radius:10px; background:#111827; color:#fff; padding:16px; }
.result-main { text-align:center; }
.result-main .big { font-size:24px; font-weight:700; line-height:1.3; word-break:break-word; }
.result-main .cap { font-size:11px; color:#9ca3af; margin-top:3px; }
.result-rows { margin-top:14px; border-top:1px solid rgba(255,255,255,0.15); padding-top:12px; display:flex; flex-direction:column; gap:9px; }
.result-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px; }
.result-row span:first-child { color:#9ca3af; flex:none; }
.result-row span:last-child { font-weight:700; text-align:right; word-break:break-word; }

.result-stats-row { display:flex; gap:12px; }
.result-stat { flex:1; text-align:center; background:rgba(255,255,255,0.06); border-radius:8px; padding:10px 8px; }
.result-stat-value { font-size:15px; font-weight:700; }
.result-stat-label { font-size:11px; color:#9ca3af; margin-top:2px; }

.calc-error {
  margin-top:14px; padding:10px 12px; border-radius:8px;
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  font-size:12px; font-weight:600;
}

.calc-note { font-size:11.5px; color:#6b7280; margin-top:6px; line-height:1.6; }
.calc-sub { font-size:13px; margin-top:18px; margin-bottom:8px; text-align:center; color:#374151; }
.calc-table th, .calc-table td { text-align:center; font-size:10.5px; padding:7px 3px; }

.copy-btn { margin:16px auto 0; }

.hk-modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:60; align-items:center; justify-content:center; padding:22px;
}
.hk-modal-overlay.open { display:flex; }
.hk-modal {
  background:#fff; border-radius:12px; width:100%; max-width:340px;
  padding:20px; box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.hk-modal-text {
  font-size:13.5px; color:#1f2937; line-height:1.7; font-weight:600;
  white-space:pre-line; text-align:center;
}
.hk-modal-actions { display:flex; gap:10px; margin-top:20px; }
.hk-modal-btn {
  flex:1 1 0; min-width:0; padding:11px 10px; border:none; border-radius:8px;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
}
.hk-modal-cancel { background:#e5e7eb; color:#1f2937; }
.hk-modal-cancel:hover { background:#d1d5db; }
.hk-modal-ok { background:#dc2626; color:#fff; }
.hk-modal-ok:hover { background:#b91c1c; }

.ledger-note {
  margin-top:12px; padding:9px 12px; border-radius:8px;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  font-size:12px; font-weight:700; line-height:1.6; text-align:center;
}