:root{--bg: #ffffff;--surface: #f8fafc;--surface-alt: #f1f5f9;--border: #e2e8f0;--primary: #1d4ed8;--primary-dark: #1e40af;--primary-soft: #eff6ff;--text: #0f172a;--text-muted: #475569;--text-faint: #94a3b8;--text-on-primary: #ffffff;--paid: #15803d;--paid-soft: #f0fdf4;--overdue: #b91c1c;--overdue-soft: #fef2f2;--pending: #b45309;--pending-soft: #fffbeb;--info: #0e7490;--info-soft: #ecfeff;--disabled: #cbd5e1;--shadow: 0 10px 25px rgba(15, 23, 42, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--touch: 48px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}.app{max-width:560px;margin:0 auto;min-height:100%;height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative}.screen{flex:1;min-height:0;overflow-y:auto;padding:16px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}.screen-flush{padding:0;gap:0}.screen-flush>.scroll-body{flex:1;overflow-y:auto;padding:16px;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));scrollbar-gutter:stable;display:flex;flex-direction:column;gap:12px}.tabbar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:560px;display:flex;background:var(--bg);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);z-index:30}.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:var(--text-faint);text-decoration:none;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}.tabbar-item.active{color:var(--primary)}.tabbar-item svg{display:block}.tabbar-item .icon-box{width:30px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--surface-alt)}.tabbar-item.active .icon-box{background:var(--primary-soft)}.topbar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg)}.topbar-title{font-size:16px;font-weight:600;flex:1}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch);min-height:var(--touch);border:none;background:transparent;color:var(--text);border-radius:var(--radius-sm);cursor:pointer;padding:0 8px}.icon-button:hover{background:var(--surface)}.icon-button:disabled{opacity:.4;cursor:default}.card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px}.card-title{font-size:16px;font-weight:600}.segmented{display:flex;background:var(--surface-alt);border-radius:var(--radius-md);padding:3px;gap:2px}.segment{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:var(--radius-sm);font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer}.segment.active{background:var(--bg);color:var(--primary)}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:0 12px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill, 999px);border:1px solid var(--border);background:var(--bg);font-family:inherit;font-size:12px;color:var(--text-muted);cursor:pointer;white-space:nowrap}.chip.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}.pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.status-row{display:flex;gap:8px;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:4px}.field-label{font-size:13px;color:var(--text-muted);font-weight:500}.input,.select,.date-input{width:100%;min-height:var(--touch);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 12px;font-family:inherit;font-size:16px;color:var(--text);background:var(--surface)}.select,.date-input{-moz-appearance:none;appearance:none;-webkit-appearance:none}.select-wrap{position:relative;display:flex}.select-wrap:after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);transform:translateY(-70%) rotate(45deg);pointer-events:none}.select-wrap select{padding-right:32px}.input:focus,.select:focus,.date-input:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}.input:disabled{background:var(--surface-alt);color:var(--text-faint)}.readonly-text{font-size:15px;color:var(--text-muted);min-height:var(--touch);display:flex;align-items:center;padding:0 4px}.hint{font-size:12px;color:var(--text-faint)}.error-text{font-size:13px;color:var(--overdue)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);border-radius:var(--radius-md);font-family:inherit;font-size:15px;font-weight:600;padding:0 16px;cursor:pointer;border:1px solid transparent;gap:8px}.btn-primary{background:var(--primary);color:var(--text-on-primary)}.btn-primary:hover{background:var(--primary-dark)}.btn-ghost{background:var(--bg);border-color:var(--border);color:var(--text)}.btn-danger{background:var(--bg);border-color:var(--border);color:var(--overdue)}.btn-sm{min-height:40px;font-size:14px;padding:0 12px}.btn-block{width:100%}.btn:disabled{background:var(--disabled);color:var(--text-on-primary);cursor:default;border-color:var(--disabled)}.btn-ghost:disabled{background:var(--bg);color:var(--text-faint)}.row{display:flex;justify-content:space-between;gap:12px}.row-label{font-size:13px;color:var(--text-muted);flex:1}.row-value{font-size:14px;font-weight:600;flex:1.4;text-align:right;word-break:break-word}.row-value.paid{color:var(--paid)}.row-value.overdue{color:var(--overdue)}.section-title{font-size:16px;font-weight:600;margin-top:8px}.progress-track{height:6px;border-radius:3px;background:var(--surface-alt);overflow:hidden}.progress-fill{height:6px;background:var(--primary)}.dot-row{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}.dot{width:8px;height:8px;border-radius:50%;background:var(--border)}.dot-paid{background:var(--paid)}.dot-missed{background:var(--overdue)}.modal-dialog{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;padding:16px;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;border:0;color:var(--text);background:transparent}.modal-dialog[open]{display:flex;align-items:flex-end;justify-content:center}.modal-dialog::backdrop{background:#0f172a7a}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-header h2{margin:0}body:has(dialog[open]) .screen{overflow:hidden}.modal-card{background:var(--bg);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:100%;overflow-y:auto;padding:20px;box-shadow:var(--shadow);overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;animation:slide-up .18s ease-out}@keyframes slide-up{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-title{font-size:19px;font-weight:700}.modal-actions{display:flex;gap:12px;margin-top:8px;position:sticky;bottom:-20px;background:var(--bg);padding:12px 0}@media(min-width:640px){.modal-dialog[open]{align-items:center}}@media(prefers-reduced-motion:reduce){.modal-card{animation:none}}.modal-actions .btn{flex:1}.customer-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:6px}.customer-card .card-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.customer-card .card-name{font-size:16px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-card .card-meta{font-size:12px;color:var(--text-faint)}.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.amount-cell .amount-label{font-size:12px;color:var(--text-faint)}.amount-cell .amount-value{font-size:15px;font-weight:700}.amount-cell .amount-value.paid{color:var(--paid)}.amount-cell .amount-value.overdue{color:var(--overdue)}.card-actions{display:flex;gap:8px;margin-top:4px}.card-actions .btn{flex:1}.list-header{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--text-muted)}.search-input{width:100%;min-height:var(--touch);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 12px;font-family:inherit;font-size:15px;color:var(--text);background:var(--surface)}.search-input:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:6px;text-align:center}.empty-title{font-size:16px;font-weight:600}.empty-body{font-size:14px;color:var(--text-muted)}.spinner-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0}.spinner{position:relative;display:grid;place-items:center;width:40px;height:40px}.spinner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid var(--surface-alt);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.spinner-icon{position:relative;display:inline-flex;color:var(--primary)}.spinner-label{font-size:12px;color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}.day-summary{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg)}.day-summary .ds-header{display:flex;justify-content:space-between;align-items:center}.day-summary .ds-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin-top:8px}.ds-cell .ds-label{font-size:12px;color:var(--text-faint)}.ds-cell .ds-value{font-size:16px;font-weight:700}.ds-cell .ds-value.paid{color:var(--paid)}.ds-cell .ds-value.overdue{color:var(--overdue)}.ds-toggle{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--primary);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.key{min-height:52px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);font-family:inherit;font-size:18px;font-weight:600;cursor:pointer}.key:active{background:var(--surface-alt)}.key.wide{grid-column:span 2}.key.primary{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary)}.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;font-size:12px;color:var(--text-faint);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}.table td{padding:6px 8px;border-bottom:1px solid var(--surface-alt)}.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}.settings-section{display:flex;flex-direction:column;gap:8px}.settings-section-title{font-size:16px;font-weight:600}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--touch);border-bottom:1px solid var(--surface-alt)}.setting-row .row-label{font-size:15px}.setting-action{display:flex;align-items:center;justify-content:space-between;min-height:var(--touch);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 12px;background:var(--bg);font-family:inherit;font-size:15px;color:var(--text);cursor:pointer;text-align:left;width:100%}.setting-action:hover{background:var(--surface)}.enroll-screen{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}.enroll-title{font-size:22px;font-weight:700}.amount-input-row{display:flex;align-items:stretch;gap:8px}.amount-input-row .input{flex:1}.keypad-toggle{min-height:var(--touch);min-width:var(--touch);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-alt);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted)}.total-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.total-label{font-size:16px;font-weight:600}.total-value{font-size:19px;font-weight:700}.schedule-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}.schedule-seq{width:24px;color:var(--text-faint)}.schedule-date{flex:1}.schedule-amount{text-align:right;font-variant-numeric:tabular-nums}.ring{position:relative}.ring-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.clickable{cursor:pointer}.no-select{-webkit-user-select:none;user-select:none}.flex-between{display:flex;justify-content:space-between;align-items:center;gap:8px}.flex-gap{display:flex;gap:8px;align-items:center}.mt-sm{margin-top:8px}.mt-md{margin-top:12px}.mb-sm{margin-bottom:8px}.text-muted{color:var(--text-muted)}.text-faint{color:var(--text-faint)}.text-small{font-size:12px}.text-overdue{color:var(--overdue)}.text-paid{color:var(--paid)}@media(min-width:561px){.app{border-left:1px solid var(--border);border-right:1px solid var(--border)}}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-links{display:flex;flex-direction:column;gap:10px;margin-top:16px}.auth-link{color:var(--primary);font-weight:600;text-decoration:none;font-size:14px}.device-row,.tenant-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.device-row:last-child,.tenant-row:last-child{border-bottom:none}.device-row>div:first-child,.tenant-row>div:first-child{min-width:0;overflow-wrap:anywhere}.tenant-row{flex-wrap:wrap}.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.invite-link{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--surface-alt);border-radius:var(--radius-sm);padding:10px;overflow-wrap:anywhere;margin:8px 0}.support-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--warning-bg, #fff4e5);color:var(--warning-text, #8a4b00);border:1px solid var(--warning-border, #f5c983);border-radius:var(--radius-md);padding:10px 12px;font-size:13px}.table-scroll{overflow-x:auto;margin:8px 0}.data-table{border-collapse:collapse;font-size:12px;width:100%}.data-table th,.data-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap}.data-table th{color:var(--text-muted);font-weight:600;text-transform:capitalize}