:root {
  --navy:#263976; --navy-deep:#1c2a56; --navy-soft:#eef2fb;
  --ink:#202a3c; --muted:#738095; --paper:#f5f7fa; --surface:#fff;
  --line:#e4e8ef; --green:#18835c; --green-soft:#edf8f2;
  --red:#bd4051; --red-soft:#fdf0f2; --gold:#937326;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif; }
body { margin:0; min-width:320px; }
button,input,textarea { font:inherit; -webkit-tap-highlight-color:transparent; font-variant-numeric:tabular-nums; }
button { cursor:pointer; touch-action:manipulation; transition:background .15s,border-color .15s; }
button:focus-visible { outline:3px solid #a4b7ec; outline-offset:3px; }
button:disabled { opacity:.55; cursor:wait; }
button:active { filter:brightness(.97); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:1.4rem; font-weight:750; }
h2 { margin-bottom:0; font-size:1.1rem; font-weight:700; }
.button-reset { padding:0; color:inherit; text-align:inherit; background:transparent; border:0; }
.ui-icon,.ui-icon svg { display:block; width:21px; height:21px; flex:0 0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { width:min(100%,820px); min-height:100vh; min-height:100dvh; margin:auto; padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; padding:14px 20px; background:white; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand > span:last-child { min-width:0; }
.brand-mark,.topbar-actions { flex-shrink:0; }
.brand small { max-width:240px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; color:white; background:var(--navy); border-radius:12px; font-size:1.3rem; font-weight:750; }
.brand strong,.brand small { display:block; }
.brand strong { color:var(--navy); font-size:1.15rem; }
.brand small { margin-top:2px; color:var(--muted); font-size:.75rem; }
.topbar-actions { display:flex; gap:8px; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; color:var(--navy); background:#f4f6fb; border:1px solid var(--line); border-radius:12px; }
main { padding:22px 18px 0; }
.view { display:none; }
.view.active { display:block; }
.home-heading,.page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.customer-count-pill { display:flex; align-items:baseline; gap:5px; color:var(--muted); font-size:.78rem; }
.customer-count-pill strong { color:var(--navy); font-size:1rem; }
.home-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:18px; padding:14px 3px; background:white; border:1px solid var(--line); border-radius:14px; }
.home-summary > div { min-width:0; padding:0 6px; text-align:center; border-inline-end:1px solid var(--line); }
.home-summary > div:last-child { border:0; }
.home-summary span,.home-summary strong { display:block; }
.home-summary span { color:var(--muted); font-size:.66rem; }
.home-summary strong { margin-top:7px; direction:ltr; unicode-bidi:isolate; color:var(--navy); font-size:clamp(.68rem,2.7vw,.95rem); font-weight:750; overflow-wrap:anywhere; }
.summary-debt strong,.summary-balance strong { color:var(--red); }
.summary-paid strong,.summary-balance.credit strong { color:var(--green); }
.summary-balance.settled strong { color:var(--muted); }
.search-box { min-height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; background:white; border:1px solid var(--line); border-radius:12px; }
.search-box > .ui-icon { color:var(--muted); }
.search-box input { width:100%; min-width:0; height:48px; padding:0; color:var(--ink); background:none; border:0; outline:none; font-size:.9rem; }
.search-box:focus-within { border-color:#8da2d5; box-shadow:0 0 0 3px #edf1fa; }
.home-search { margin-bottom:12px; }
.workspace-card { margin:0 0 22px; }
.transaction-launch { width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; color:white; background:var(--navy); border:0; border-radius:12px; font-size:.94rem; }
.transaction-launch strong { font-weight:650; }
.due-alert { display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:10px 12px; color:#876820; background:#fff9e9; border:1px solid #f0e6c7; border-radius:11px; font-size:.78rem; }
.due-alert > div { flex:1; }
.due-alert button { min-height:36px; padding:5px 9px; color:inherit; background:transparent; border:0; font-weight:700; }
.section-heading { margin:0 2px 10px; }
.section-heading h2 { color:var(--muted); font-size:.79rem; font-weight:650; }
.customer-list { display:grid; gap:9px; }
.customer-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 12px; padding:13px 14px 7px; background:white; border:1px solid var(--line); border-radius:13px; }
.customer-main { min-width:0; display:block; text-align:right; }
.customer-main > span { display:block; min-width:0; }
.customer-main strong { display:block; font-size:.96rem; font-weight:650; line-height:1.6; overflow-wrap:anywhere; }
.customer-main small { display:block; margin-top:2px; color:var(--muted); font-size:.67rem; line-height:1.7; }
.customer-main bdi { white-space:nowrap; }
.customer-amount { min-width:75px; text-align:left; align-self:start; padding-top:2px; }
.customer-amount small { display:block; color:var(--muted); font-size:.63rem; }
.customer-amount strong { display:block; margin-top:4px; direction:ltr; unicode-bidi:isolate; color:var(--red); font-size:.89rem; font-weight:750; }
.customer-amount.credit strong { color:var(--green); }
.customer-amount.settled strong { color:var(--muted); }
.customer-channels { grid-column:1/-1; display:flex; justify-content:flex-end; gap:2px; }
.mini-channel { width:40px; height:40px; display:grid; place-items:center; padding:0; color:var(--muted); background:transparent; border:0; border-radius:10px; }
.mini-channel svg { width:20px; height:20px; }
.mini-channel.whatsapp { color:var(--green); }
.mini-channel.sms { color:#78859c; }
.bottom-nav { position:fixed; z-index:20; right:50%; bottom:0; width:min(100%,820px); display:grid; grid-template-columns:repeat(4,1fr); gap:4px; transform:translateX(50%); padding:7px 12px calc(7px + env(safe-area-inset-bottom)); background:white; border-top:1px solid var(--line); }
.bottom-nav button { min-height:55px; display:grid; align-content:center; justify-items:center; gap:5px; padding:7px 3px; color:var(--muted); background:transparent; border:0; border-radius:11px; font-size:.68rem; font-weight:600; }
.bottom-nav button.active { color:var(--navy); background:var(--navy-soft); }
.bottom-nav .nav-add { color:var(--navy); }
.empty-state { grid-column:1/-1; padding:42px 20px; text-align:center; background:white; border:1px solid var(--line); border-radius:13px; }
.empty-state > span { display:grid; place-items:center; width:46px; height:46px; margin:0 auto 12px; color:#8b9ab6; background:#f3f5fa; border-radius:14px; }
.empty-state svg { width:25px; height:25px; }
.empty-state strong { display:block; font-size:.96rem; font-weight:650; }
.empty-state p { margin:7px 0 0; color:var(--muted); font-size:.8rem; line-height:1.8; }
.settings-card { margin-bottom:14px; padding:20px 17px; background:white; border:1px solid var(--line); border-radius:14px; }
.settings-card h2 { margin-bottom:17px; font-size:.98rem; }
.settings-card > p { margin:-6px 0 16px; color:var(--muted); font-size:.79rem; line-height:1.8; }
.field { margin-bottom:16px; }
.field > label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; color:#4a566c; font-size:.8rem; font-weight:650; }
.field label span { color:var(--muted); font-size:.68rem; font-weight:400; }
.field input,.field textarea { width:100%; min-width:0; min-height:48px; padding:11px 13px; color:var(--ink); background:white; border:1px solid #d9e0eb; border-radius:10px; outline:none; font-size:.93rem; }
.field textarea { resize:vertical; }
.field input:focus,.field textarea:focus { border-color:#8da2d5; box-shadow:0 0 0 3px #edf1fa; }
input::placeholder,textarea::placeholder { color:#9aa4b4; opacity:1; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.prefix-input { direction:ltr; display:flex; align-items:center; padding-left:12px; color:var(--muted); border:1px solid #d9e0eb; border-radius:10px; }
.prefix-input input { border:0; background:transparent; box-shadow:none; }
.main-button,.outline-button,.danger-button { min-height:46px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; font-weight:650; font-size:.87rem; }
.main-button { color:white; background:var(--navy); border-color:var(--navy); }
.main-button.full { width:100%; }
.outline-button { display:flex; align-items:center; gap:12px; color:var(--navy); text-align:right; background:white; }
.outline-button .ui-icon { width:21px; height:21px; }
.outline-button strong,.outline-button small { display:block; }
.outline-button small { margin-top:4px; color:var(--muted); font-size:.7rem; font-weight:400; }
.outline-button.center { justify-content:center; }
.danger-button { color:var(--red); background:var(--red-soft); border-color:#edcbd1; }
.stack-actions { display:grid; gap:10px; }
.stack-actions .outline-button { min-height:68px; background:#fafbfd; }
.reminders-list { display:grid; gap:12px; }
.reminder-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:16px; background:white; border:1px solid var(--line); border-radius:13px; }
.reminder-date { grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.reminder-date strong { color:var(--navy); font-size:.78rem; }
.reminder-date small { color:var(--muted); font-size:.67rem; }
.reminder-card.due .reminder-date strong { color:#96731f; }
.reminder-body strong,.reminder-body span { display:block; }
.reminder-body strong { font-size:.92rem; }
.reminder-body span { margin-top:4px; color:var(--muted); font-size:.78rem; line-height:1.7; overflow-wrap:anywhere; }
.reminder-actions { display:flex; align-items:center; gap:2px; }
.done-button { min-width:40px; min-height:40px; padding:5px; color:var(--green); background:var(--green-soft); border:0; border-radius:9px; font-size:.8rem; }
.modal { width:min(calc(100% - 24px),450px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:0; overflow:auto; color:var(--ink); background:white; border:0; border-radius:18px; box-shadow:0 25px 80px rgba(18,30,58,.2); }
.modal::backdrop,.pdf-preview-dialog::backdrop { background:rgba(20,31,52,.48); backdrop-filter:blur(2px); }
.modal > form { padding:22px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:.7rem; font-weight:500; }
.close-button,.transaction-close { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; padding:0; color:#7d899b; background:#f3f5f8; border:0; border-radius:50%; font-size:1.45rem; line-height:1; }
.dialog-copy { margin:0 0 18px; color:var(--muted); font-size:.85rem; line-height:1.9; }
.account-type-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 20px; padding:0; border:0; }
.account-type-picker legend { margin-bottom:8px; color:#4a566c; font-size:.8rem; font-weight:650; }
.account-type-picker input { position:absolute; opacity:0; }
.account-type-picker label { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:7px; color:var(--muted); background:#fafbfd; border:1px solid var(--line); border-radius:10px; font-size:.83rem; cursor:pointer; }
.account-type-picker input:checked + label { color:var(--navy); background:var(--navy-soft); border-color:#b3c1e3; }
.account-type-picker input:focus-visible + label { outline:3px solid #a4b7ec; }
.phone-field { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:8px; }
.phone-field button { display:grid; place-items:center; padding:0; color:var(--navy); background:var(--navy-soft); border:1px solid #dce3f2; border-radius:10px; }
.international-phone-input { direction:ltr; text-align:left; }
.phone-hint { display:block; margin:-5px 0 18px; color:var(--muted); font-size:.73rem; line-height:1.8; }
.transaction-modal > form { padding:20px; }
.transaction-modal-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.transaction-heading { display:flex; flex-direction:column-reverse; gap:4px; }
.transaction-heading strong { font-size:1.15rem; font-weight:750; color:var(--navy); }
.transaction-heading small { color:var(--muted); font-size:.7rem; }
.compact-entry-field { position:relative; }
.compact-entry-row { min-height:51px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:center; padding:0 11px; border:1px solid #d9e0eb; border-radius:11px; }
.compact-entry-icon { display:grid; place-items:center; width:22px; height:22px; color:#8591a8; }
.compact-entry-row input,.compact-entry-row textarea { min-height:49px; padding:10px 0; border:0; border-radius:0; background:transparent; box-shadow:none !important; }
.compact-entry-row:focus-within { border-color:#8da2d5; box-shadow:0 0 0 3px #edf1fa; }
.amount-field input { font-size:1.15rem; font-weight:700; }
.entry-currency { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.entry-contact-button { width:38px; height:40px; display:grid; place-items:center; margin-inline-end:-5px; padding:0; color:var(--navy); background:transparent; border:0; border-inline-start:1px solid var(--line); }
.entry-contact-button .ui-icon { width:19px; height:19px; }
.note-field textarea { min-height:70px; height:70px; resize:vertical; line-height:1.7; }
.customer-mini { display:none !important; }
.customer-search-hint { display:block; margin:6px 1px 0; color:var(--muted); font-size:.67rem; line-height:1.6; }
.customer-search-hint:empty { display:none; }
.search-results,.note-suggestions { position:absolute; top:100%; z-index:12; right:0; left:0; max-height:180px; overflow:auto; margin-top:4px; padding:4px; background:white; border:1px solid var(--line); border-radius:11px; box-shadow:0 12px 24px rgba(29,43,75,.12); }
.search-results button,.note-suggestions button { width:100%; min-height:46px; display:flex; align-items:center; gap:10px; padding:10px; color:var(--ink); text-align:right; background:white; border:0; border-radius:7px; font-size:.84rem; }
.search-results button:hover,.note-suggestions button:hover { background:var(--navy-soft); }
.search-results .avatar { display:none; }
.search-results strong,.search-results small { display:block; }
.search-results small { margin-top:3px; color:var(--muted); font-size:.7rem; }
.reminder-toggle { display:flex; align-items:center; gap:9px; margin:0 0 15px; color:var(--muted); font-size:.78rem; cursor:pointer; }
.reminder-toggle input { width:18px; height:18px; margin:0; accent-color:var(--navy); }
.transaction-message-choice { margin:0; padding:14px 0 0; border:0; border-top:1px solid var(--line); }
.transaction-message-choice legend { float:right; width:100%; margin-bottom:10px; padding:0; color:#4a566c; font-size:.77rem; font-weight:650; }
.transaction-channel-options { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.transaction-channel-options label { min-height:43px; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 3px; color:var(--muted); background:#f8f9fc; border:1px solid var(--line); border-radius:9px; font-size:.73rem; cursor:pointer; white-space:nowrap; }
.transaction-channel-options .ui-icon { display:none; }
.transaction-channel-options input { width:14px; height:14px; margin:0; accent-color:var(--navy); }
.transaction-channel-options label:has(input:checked) { color:var(--navy); background:var(--navy-soft); border-color:#b4c2e5; }
.transaction-submit-actions { display:grid; grid-template-columns:1fr 1fr .7fr; gap:8px; margin-top:17px; }
.transaction-submit-actions button { min-height:49px; padding:9px 5px; border:1px solid transparent; border-radius:10px; font-size:.92rem; font-weight:750; }
.submit-payment { color:var(--green); background:var(--green-soft); border-color:#b4d9c7 !important; }
.submit-debt { color:var(--red); background:var(--red-soft); border-color:#e7bac3 !important; }
.submit-cancel { color:var(--muted); background:#f5f6f9; }
.send-options,.modal-actions,.transaction-manage-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.channel-button { display:grid; place-items:center; min-height:76px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.channel-button.whatsapp { color:var(--green); background:var(--green-soft); }
.channel-button.sms { color:var(--navy); background:var(--navy-soft); }
.channel-button .ui-icon,.channel-button svg { width:28px; height:28px; }
.transaction-manage-actions button { display:flex; align-items:center; justify-content:center; gap:7px; }
.transaction-manage-actions strong { font-weight:650; }
.transaction-manage-actions svg { width:18px; height:18px; }
.customer-sheet { width:min(100%,820px); max-width:820px; height:100vh; max-height:100vh; height:100dvh; max-height:100dvh; margin:0 auto; border-radius:0; overflow:hidden; }
#customer-detail { height:100%; overflow-y:auto; padding-bottom:calc(105px + env(safe-area-inset-bottom)); background:var(--paper); }
.sheet-head { position:sticky; z-index:8; top:0; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px; background:white; border-bottom:1px solid var(--line); }
.sheet-back { width:40px; height:40px; display:grid; place-items:center; padding:0; color:var(--navy); background:#f3f5f9; border:0; border-radius:10px; }
.sheet-back svg { width:20px; height:20px; }
.customer-profile { min-width:0; }
.customer-profile .eyebrow { display:none; }
.customer-profile h2 { font-size:.96rem; line-height:1.6; overflow-wrap:anywhere; }
.customer-profile [data-edit-phone] { display:inline-flex; align-items:center; gap:5px; min-height:27px; padding:2px 0; color:var(--muted); background:none; border:0; font-size:.65rem; }
.customer-profile [data-edit-phone] svg { width:13px; height:13px; }
.sheet-channels { display:flex; gap:2px; }
.sheet-channels button { width:35px; height:40px; display:grid; place-items:center; padding:0; color:var(--navy); background:transparent; border:0; border-radius:8px; }
.sheet-channels svg { width:20px; height:20px; }
.ledger-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; gap:8px; padding:14px 12px 10px; }
.ledger-controls label { min-width:0; display:flex; align-items:center; gap:5px; padding:7px 9px; background:white; border:1px solid var(--line); border-radius:9px; }
.ledger-controls label span { color:var(--muted); font-size:.66rem; }
.ledger-controls input { width:100%; min-width:0; min-height:26px; padding:0; direction:ltr; color:var(--ink); background:transparent; border:0; font-size:.71rem; }
.ledger-controls > button { display:grid; place-items:center; color:var(--navy); background:white; border:1px solid var(--line); border-radius:9px; }
.ledger-controls > button svg { width:20px; height:20px; }
.ledger-controls > button span { display:none; }
.ledger-currency { grid-column:1/-1; display:flex; justify-content:space-between; padding:0 3px; color:var(--muted); font-size:.67rem; }
.ledger-currency strong { font-weight:500; }
.ledger-table { margin:0 8px; overflow-x:auto; background:white; border:1px solid var(--line); border-radius:12px; }
.ledger-table-head,.ledger-row { display:grid; grid-template-columns:74px minmax(60px,.8fr) minmax(80px,1.5fr) minmax(62px,.8fr) 36px; min-width:312px; }
.ledger-table-head { color:#576680; background:#edf1f7; font-size:.72rem; font-weight:650; }
.ledger-table-head span { min-height:39px; display:grid; place-items:center; padding:6px 3px; }
.ledger-row { min-height:74px; border-bottom:1px solid var(--line); }
.ledger-row:last-child { border-bottom:0; }
.ledger-row > div { min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:12px 4px; text-align:center; }
.ledger-date strong { direction:ltr; font-size:.62rem; font-weight:500; white-space:nowrap; }
.ledger-date small { color:var(--muted); font-size:.58rem; }
.ledger-amount,.ledger-balance { direction:ltr; font-size:.72rem; font-weight:700; overflow-wrap:anywhere; }
.ledger-row.debt .ledger-amount,.ledger-balance.debt { color:var(--red); }
.ledger-row.payment .ledger-amount,.ledger-balance.credit { color:var(--green); }
.ledger-balance.settled { color:var(--muted); }
.ledger-details strong { width:100%; font-size:.73rem; font-weight:500; line-height:1.7; overflow-wrap:anywhere; }
.ledger-details small { color:var(--muted); font-size:.6rem; }
.ledger-manage button { width:32px; min-height:40px; display:grid; place-items:center; padding:0; color:#8190a8; background:transparent; border:0; border-radius:8px; }
.ledger-manage svg { width:17px; height:17px; }
.ledger-manage button span { display:none; }
.ledger-manage > span { font-size:.56rem; color:var(--muted); }
.ledger-row.cancelled { opacity:.6; background:#f9fafc; }
.ledger-empty { padding:40px 12px; color:var(--muted); font-size:.82rem; text-align:center; }
.ledger-bottom-bar { position:fixed; z-index:9; right:50%; bottom:0; width:min(100%,820px); display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:10px; transform:translateX(50%); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:white; border-top:1px solid var(--line); }
.ledger-summary { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; }
.ledger-summary > div { min-width:0; display:flex; align-items:baseline; gap:5px; }
.ledger-summary span { color:var(--muted); font-size:.63rem; white-space:nowrap; }
.ledger-summary strong { direction:ltr; font-size:.7rem; overflow-wrap:anywhere; }
.account-paid strong,.account-balance.credit strong { color:var(--green); }
.account-debt strong,.account-balance.debt strong { color:var(--red); }
.account-balance.settled strong { color:var(--muted); }
.ledger-summary .account-balance { grid-column:1/-1; padding-top:4px; }
.ledger-summary .account-balance strong { font-size:.85rem; }
.ledger-add-button { width:48px; height:48px; display:grid; place-items:center; padding:0; color:white; background:var(--navy); border:0; border-radius:14px; }
.ledger-add-button svg { width:24px; height:24px; }
.pdf-preview-dialog { width:min(calc(100% - 24px),760px); height:min(calc(100dvh - 24px),1050px); max-height:1050px; margin:auto; padding:0; overflow:hidden; color:var(--ink); background:#edf0f6; border:0; border-radius:16px; }
.pdf-preview-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.pdf-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:white; border-bottom:1px solid var(--line); }
.pdf-preview-head small { display:block; margin-bottom:4px; color:var(--muted); font-size:.72rem; }
.pdf-preview-head h2 { font-size:1rem; }
.pdf-preview-head button { width:38px; height:38px; flex:0 0 38px; color:var(--muted); background:#f3f5f8; border:0; border-radius:50%; font-size:1.45rem; }
.pdf-preview-pages { min-height:0; overflow:auto; padding:16px; overscroll-behavior:contain; }
.pdf-preview-page { width:100%; max-width:640px; margin:0 auto 18px; }
.pdf-preview-page img { width:100%; display:block; background:white; box-shadow:0 4px 20px #dce1ed; }
.pdf-preview-page figcaption { padding-top:8px; color:var(--muted); text-align:center; font-size:.78rem; direction:ltr; }
.pdf-preview-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:white; border-top:1px solid var(--line); }
.pdf-preview-actions button { min-height:49px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; color:var(--navy); background:white; border:1px solid #cdd7ec; border-radius:10px; font-size:.85rem; font-weight:650; }
.pdf-preview-actions button:first-child { color:white; background:var(--navy); border-color:var(--navy); }
.toast { position:fixed; z-index:100; right:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translateX(50%); width:max-content; max-width:calc(100% - 32px); padding:12px 17px; color:white; text-align:center; background:#263247; border-radius:11px; font-size:.82rem; line-height:1.7; opacity:0; pointer-events:none; }
.toast.show { opacity:1; }
@media (min-width:680px) {
  .app-shell { border-inline:1px solid var(--line); }
  main { padding-inline:26px; }
  .customer-list { grid-template-columns:1fr 1fr; }
  .home-summary { padding-block:19px; }
  .home-summary span { font-size:.76rem; }
  .home-summary strong { font-size:1.05rem; }
  .ledger-table-head,.ledger-row { grid-template-columns:110px 110px minmax(150px,1fr) 110px 48px; }
  .ledger-date strong,.ledger-amount,.ledger-balance,.ledger-details strong { font-size:.86rem; }
}
@media (max-width:360px) {
  main { padding-inline:12px; }
  .topbar { padding-inline:14px; }
  .modal > form,.transaction-modal > form { padding:18px 16px; }
  .customer-card { gap:4px 8px; padding-inline:11px; }
  .customer-main strong { font-size:.87rem; }
  .customer-amount strong { font-size:.76rem; }
  .transaction-channel-options label { font-size:.65rem; gap:3px; }
  .sheet-head { grid-template-columns:34px minmax(0,1fr); gap:6px; padding:11px; }
  .sheet-back { width:34px; height:38px; }
  .sheet-channels { grid-column:2; justify-content:flex-end; margin-top:-3px; }
  .sheet-channels button { height:34px; }
  .ledger-controls { gap:5px; padding-inline:8px; }
  .ledger-controls label { padding-inline:5px; }
  .ledger-table { margin-inline:4px; border-radius:9px; }
  .ledger-bottom-bar { padding-inline:9px; gap:7px; }
  .ledger-summary strong { font-size:.65rem; }
}
@media (max-width:600px) {
  .pdf-preview-dialog { width:100%; max-width:100%; height:100vh; max-height:100vh; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .pdf-preview-pages { padding:10px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* البيع والمخزون */
[hidden] { display:none !important; }
.bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
.bottom-nav button { font-size:.63rem; }
.section-heading .text-action { margin-inline-start:auto; padding:7px 9px; color:var(--navy); background:var(--navy-soft); border:0; border-radius:8px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sale-card h2 { margin-bottom:13px; }
.scan-actions { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:18px; }
.scan-actions .main-button { display:flex; align-items:center; justify-content:center; gap:8px; flex:1 1 220px; }
.scan-actions .ui-icon { width:20px; height:20px; }
.scan-actions > span { color:var(--muted); font-size:.73rem; }
.scan-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.scan-input-row > input { min-width:0; direction:ltr; text-align:left; }
.scan-input-row > button { min-width:54px; justify-content:center; }
.scan-input-row .ui-icon { width:21px; height:21px; }
.sale-product { margin:4px 0 18px; padding:14px; background:#f8faff; border:1px solid #dce5f4; border-radius:12px; }
.sale-product-name { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:14px; }
.sale-product-name strong { color:var(--navy); font-size:.94rem; }
.sale-product-name small { color:var(--muted); font-size:.72rem; }
.sale-product .field { margin-bottom:12px; }
.sale-product .main-button:disabled { opacity:.5; }
.sale-cart { padding-top:16px; border-top:1px solid var(--line); }
.sale-cart h3 { margin:0 0 10px; font-size:.87rem; }
.sale-line { display:grid; grid-template-columns:minmax(0,1fr) auto 30px; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.sale-line strong,.sale-line small { display:block; }
.sale-line strong { font-size:.8rem; }
.sale-line small { margin-top:3px; color:var(--muted); font-size:.72rem; }
.sale-line button { width:28px; height:28px; padding:0; color:var(--red); background:var(--red-soft); border:0; border-radius:8px; font-size:1.15rem; }
.sale-total { display:flex; align-items:center; justify-content:space-between; margin:15px 0 18px; font-size:.87rem; }
.sale-total strong { color:var(--navy); font-size:1.15rem; }
.sale-cart select { width:100%; min-height:48px; padding:10px; color:var(--ink); background:white; border:1px solid #d9e0eb; border-radius:10px; font-size:.84rem; }
.field-hint { margin:-3px 0 16px; color:var(--muted); font-size:.73rem; line-height:1.7; }
.simple-list { display:grid; gap:10px; }
.simple-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:14px; background:white; border:1px solid var(--line); border-radius:12px; }
.simple-row > div { min-width:0; }
.simple-row strong,.simple-row small,.simple-row span { display:block; }
.simple-row strong { font-size:.86rem; line-height:1.6; overflow-wrap:anywhere; }
.simple-row small { margin-top:4px; color:var(--muted); font-size:.69rem; overflow-wrap:anywhere; }
.simple-row span { margin-top:6px; color:var(--navy); font-size:.78rem; font-weight:700; }
.simple-row span.stock-empty { color:var(--red); }
.simple-row button { flex:0 0 auto; min-width:50px; min-height:36px; padding:7px 8px; color:var(--navy); background:var(--navy-soft); border:0; border-radius:8px; font-size:.72rem; font-weight:700; }
.scanner-shell { padding:20px; }
#scanner-video { display:block; width:100%; min-height:220px; max-height:55vh; object-fit:cover; background:#172236; border-radius:12px; }
.scanner-shell .field-hint { margin:12px 0 0; text-align:center; }
.page-heading .outline-button.compact { min-height:38px; padding:7px 11px; font-size:.76rem; }
.sale-search-field { position:relative; }
.sale-search-field .scan-input-row > input { direction:rtl; text-align:right; }
.sale-search-field .field-hint { display:block; margin:6px 2px 0; }
.scan-trigger { width:51px; min-width:51px !important; display:grid; place-items:center; padding:0; }
.sale-search-field .search-results { top:77px; }
.search-no-match { padding:13px; color:var(--muted); font-size:.78rem; }
.sale-line { grid-template-columns:minmax(72px,1fr) auto auto 28px; gap:7px; }
.sale-line-info { min-width:0; }
.sale-line-quantity { display:flex; align-items:center; gap:3px; white-space:nowrap; }
.sale-line-quantity span { min-width:16px; text-align:center; font-size:.8rem; font-weight:700; }
.sale-line-quantity button { width:25px; height:25px; color:var(--navy); background:var(--navy-soft); font-size:1rem; }
.sale-line-total { white-space:nowrap; font-size:.77rem !important; }
.sale-line .sale-line-remove { width:25px; height:25px; }
.scanner-stage { position:relative; min-height:0; }
.scanner-aim { position:absolute; inset:22% 18%; border:2px solid rgba(255,255,255,.8); border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.13); pointer-events:none; }
.scanner-cart { min-height:0; overflow:auto; padding:13px 16px 18px; border-top:1px solid var(--line); }
.scanner-cart-title strong,.scanner-cart-title small { display:block; }
.scanner-cart-title strong { color:var(--navy); font-size:.91rem; }
.scanner-cart-title small { margin-top:3px; color:var(--muted); font-size:.7rem; }
.scanner-empty { padding:25px 8px; color:var(--muted); text-align:center; font-size:.83rem; }
.scanner-cart .sale-cart { border:0; padding-top:10px; }
.scanner-cart .sale-cart h3 { display:none; }
.scanner-modal.sales-scanning { width:min(calc(100% - 12px),650px); height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); overflow:hidden; }
.scanner-modal.sales-scanning .scanner-shell { height:100%; display:grid; grid-template-rows:auto minmax(160px,42%) auto minmax(0,1fr); padding:0; }
.scanner-modal.sales-scanning .modal-head { margin:0; padding:12px 16px; }
.scanner-modal.sales-scanning #scanner-video { width:100%; height:100%; min-height:0; max-height:none; border-radius:0; }
.scanner-modal.sales-scanning .scanner-shell > .field-hint { margin:0; padding:9px 14px; background:#eef3fc; }
.scanner-cart .sale-line { padding:7px 0; }
.scanner-cart .sale-total { margin:9px 0 11px; }
.scanner-cart .sale-cart > .field { display:inline-block; width:calc(50% - 8px); margin-bottom:8px; vertical-align:top; }
.scanner-cart .sale-cart > .field + .field { margin-inline-start:6px; }
.scanner-cart .sale-cart > .field label { min-height:28px; align-items:end; font-size:.69rem; }
.scanner-cart .sale-cart select { min-height:38px; padding:7px 5px; font-size:.72rem; }
.scanner-cart #sale-customer-hint { margin:0 0 7px; font-size:.65rem; }
.scanner-cart #save-sale { position:sticky; bottom:-18px; z-index:2; box-shadow:0 -6px 12px rgba(255,255,255,.95); }
.cash-accounts-shell { padding:20px; }
.cash-accounts-shell .dialog-copy { margin-top:-8px; }
.cash-account-row span { font-size:.98rem; }
#cash-account-form { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
#cash-account-form h3 { margin:0 0 14px; font-size:.88rem; }
.cash-account-actions { display:flex; gap:8px; }
.cash-account-actions .main-button { flex:1; }