:root{--indigo-900: #1a1440;--indigo-700: #2c2266;--indigo-600: #3a2c86;--indigo-500: #4c3aa8;--indigo-100: #ece9fb;--teal-600: #0d9488;--teal-500: #14b8a6;--teal-100: #d8f5f1;--bg: #f5f4fb;--surface: #ffffff;--surface-alt: #faf9ff;--border: #e4e1f3;--text: #1c1738;--text-muted: #635f7d;--danger: #c53d54;--danger-bg: #fbe9ec;--success: #1f8a5f;--success-bg: #e6f6ee;--warning: #b3790f;--warning-bg: #fdf1dc;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-body: "Public Sans", system-ui, -apple-system, sans-serif;--text-2xs: .6875rem;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.125rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-7: 2rem;--space-8: 2.5rem;--space-9: 3rem;--radius-xs: 8px;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 22px;--radius-pill: 999px;--shadow-sm: 0 1px 3px rgba(26, 20, 64, .07);--shadow-md: 0 10px 28px rgba(26, 20, 64, .1);--shadow-lg: 0 20px 48px rgba(26, 20, 64, .16);--shadow-focus: 0 0 0 3px rgba(76, 58, 168, .25);--ease-standard: cubic-bezier(.2, 0, 0, 1);--duration-fast: .12s;--duration-base: .2s;--shell-max-width: 480px;--nav-height: 60px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;color:var(--indigo-900);letter-spacing:-.01em}p{margin:0}button,input,select,textarea{font-family:inherit}a{color:var(--indigo-600)}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}.app-shell{min-height:100%;display:flex;flex-direction:column;max-width:var(--shell-max-width);margin:0 auto;background:var(--bg);position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-4);background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.topbar-rows{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.topbar-top-row{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:var(--space-2)}.brand-mark{width:30px;height:30px;border-radius:var(--radius-xs);background:var(--indigo-700);position:relative;flex-shrink:0}.brand-mark:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--teal-500);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #14b8a633}.brand-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--indigo-900)}.brand-tag{font-size:var(--text-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}.btn-logout{display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);font-size:var(--text-xs);cursor:pointer;font-weight:600;transition:border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.btn-logout:hover{border-color:var(--indigo-500);color:var(--indigo-700);background:var(--surface-alt)}.role-switch{display:flex;background:var(--indigo-100);border-radius:var(--radius-pill);padding:3px;gap:2px}.role-switch button{flex:1;border:none;background:transparent;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:700;color:var(--indigo-700);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-1);transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}.role-switch button svg{width:15px;height:15px}.role-switch button.active{background:var(--indigo-700);color:#fff;box-shadow:var(--shadow-sm)}.role-switch button:disabled{opacity:.6;cursor:wait}.role-switch-label{font-size:var(--text-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:var(--space-1)}main.content{flex:1;padding:var(--space-5);padding-bottom:calc(var(--nav-height) + var(--space-6))}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--shell-max-width);display:flex;background:var(--surface);border-top:1px solid var(--border);padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));z-index:20}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:transparent;color:var(--text-muted);font-size:var(--text-2xs);font-weight:700;padding:var(--space-2) var(--space-1);border-radius:var(--radius-xs);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.nav-tab .nav-icon{display:flex}.nav-tab .nav-icon svg{width:20px;height:20px}.nav-tab.active{color:var(--indigo-700);background:var(--indigo-100)}.nav-tab:hover{color:var(--indigo-700)}.page-header{margin-bottom:var(--space-5)}.page-header h1{font-size:var(--text-xl);margin-bottom:var(--space-1)}.page-header p{color:var(--text-muted);font-size:var(--text-sm)}.hero-pay{position:relative;overflow:hidden;background:var(--indigo-700);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);color:#fff;margin-bottom:var(--space-5);box-shadow:var(--shadow-md)}.hero-pay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 90% at 8% -10%,rgba(255,255,255,.16),transparent 60%)}.hero-pay>*{position:relative}.hero-pay .hero-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;opacity:.8;font-weight:700}.hero-pay .hero-amount{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;margin:var(--space-2) 0 2px;font-variant-numeric:tabular-nums}.hero-pay .hero-due{font-size:var(--text-sm);opacity:.9;margin-bottom:var(--space-5)}.btn-hero{width:100%;border:none;border-radius:var(--radius-sm);background:#fff;color:var(--indigo-700);padding:var(--space-4);font-weight:700;font-size:var(--text-base);cursor:pointer;transition:transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.btn-hero:hover:not(:disabled){box-shadow:0 6px 16px #0000002e;transform:translateY(-1px)}.btn-hero:active:not(:disabled){transform:translateY(0);box-shadow:none}.btn-hero:disabled{opacity:.7}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-6)}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm)}.stat-label{font-size:var(--text-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-weight:700}.stat-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--indigo-900);margin-top:var(--space-1);font-variant-numeric:tabular-nums}.stat-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px}.stat-value.positive{color:var(--success)}.stat-value.negative{color:var(--danger)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--space-4)}.card-header{padding:var(--space-4);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.card-header h2{font-size:var(--text-md)}.card-body{padding:var(--space-4)}table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}th{text-align:left;padding:var(--space-2) var(--space-3);color:var(--text-muted);font-weight:700;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--border)}td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border)}tr:last-child td{border-bottom:none}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.table-scroll{overflow-x:auto}.list-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);font-size:var(--text-base)}.list-row:last-child{border-bottom:none}.list-row .lr-title{font-weight:600}.list-row .lr-meta{color:var(--text-muted);font-size:var(--text-xs);margin-top:2px}.list-row .lr-amount.credit{color:var(--success);font-weight:700;font-variant-numeric:tabular-nums}.list-row .lr-amount.debit{color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:700}.badge-teal{background:var(--teal-100);color:var(--teal-600)}.badge-indigo{background:var(--indigo-100);color:var(--indigo-700)}.badge-warn{background:var(--warning-bg);color:var(--warning)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-success{background:var(--success-bg);color:var(--success)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:none;border-radius:var(--radius-xs);padding:var(--space-3) var(--space-5);font-weight:700;font-size:var(--text-base);cursor:pointer;transition:filter var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);width:100%}.btn:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:var(--indigo-700);color:#fff}.btn-primary:hover:not(:disabled){background:var(--indigo-600);box-shadow:var(--shadow-sm)}.btn-primary:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed}.btn-danger{background:var(--danger-bg);color:var(--danger)}.btn-danger:hover:not(:disabled){background:#f6d9de}.btn-ghost{background:var(--surface-alt);color:var(--indigo-700);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){border-color:var(--indigo-500);background:var(--indigo-100)}.btn-sm{width:auto;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-xs)}.approval-item{padding:var(--space-4);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-3)}.approval-item:last-child{border-bottom:none}.approval-main{flex:1}.approval-title{font-weight:700;margin-bottom:var(--space-1);font-size:var(--text-base)}.approval-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2);line-height:1.5}.approval-amount{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--indigo-900);font-variant-numeric:tabular-nums}.approval-actions{display:flex;gap:var(--space-2);align-items:center}.field{margin-bottom:var(--space-4)}.field label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-muted);margin-bottom:var(--space-2)}.field input,.field select,.field textarea{width:100%;padding:var(--space-3);border-radius:var(--radius-xs);border:1px solid var(--border);font-size:var(--text-base);background:var(--surface-alt);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.field textarea{resize:vertical;min-height:88px}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo-500);box-shadow:var(--shadow-focus)}select{padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);border:1px solid var(--border);font-family:inherit;font-size:var(--text-sm);background:var(--surface)}.select-row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}.toggle-row{display:flex;gap:var(--space-2)}.toggle-chip{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-xs);border:1.5px solid var(--border);background:var(--surface);font-weight:700;font-size:var(--text-sm);cursor:pointer;text-align:center;color:var(--text-muted);transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.toggle-chip svg{width:15px;height:15px}.toggle-chip.active{border-color:var(--indigo-600);background:var(--indigo-100);color:var(--indigo-700)}.toggle-chip.urgent.active{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}.stepper-mini{display:flex;align-items:center;gap:2px;margin-top:var(--space-2);flex-wrap:wrap}.stepper-mini .dot{width:8px;height:8px;border-radius:50%;background:var(--border)}.stepper-mini .dot.done{background:var(--teal-500)}.stepper-mini .dot.current{background:var(--indigo-700)}.stepper-mini .seg{width:14px;height:2px;background:var(--border)}.stepper-mini .seg.done{background:var(--teal-500)}.stepper{display:flex;align-items:center;gap:4px;margin:var(--space-2) 0 var(--space-4);flex-wrap:wrap}.stepper .step{padding:4px var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:700;background:var(--border);color:var(--text-muted)}.stepper .step.done{background:var(--success-bg);color:var(--success)}.stepper .step.current{background:var(--indigo-700);color:#fff}.stepper .arrow{color:var(--text-muted);font-size:var(--text-xs)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,var(--indigo-100),var(--bg) 60%);padding:var(--space-5)}.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-8) var(--space-6);width:100%;max-width:380px}.login-card .brand{justify-content:center;margin-bottom:var(--space-5)}.login-card h1{font-size:var(--text-lg);text-align:center;margin-bottom:var(--space-2)}.login-card .sub{text-align:center;color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}.login-error{background:var(--danger-bg);color:var(--danger);padding:var(--space-3);border-radius:var(--radius-xs);font-size:var(--text-sm);margin-bottom:var(--space-4)}.login-hint{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--border);font-size:var(--text-xs);color:var(--text-muted);line-height:1.6}.login-hint code{background:var(--surface-alt);padding:1px 5px;border-radius:4px}.login-hint+.login-hint{margin-top:var(--space-3);padding-top:var(--space-3);border-top:none}.loading-row{padding:var(--space-9) var(--space-5);text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--indigo-100);border-top-color:var(--indigo-600);animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{padding:var(--space-8) var(--space-5);text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.empty-state .icon{color:var(--text-muted);opacity:.7}.empty-state .icon svg{width:28px;height:28px}.toast{position:fixed;bottom:calc(var(--nav-height) + var(--space-4));left:50%;transform:translate(-50%);background:var(--indigo-900);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-sm);box-shadow:var(--shadow-lg);z-index:50;max-width:90%;text-align:center}.toast.error{background:var(--danger)}.toast.success{background:var(--success)}.statement-line{display:flex;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px dashed var(--border);font-size:var(--text-sm)}.statement-line:last-child{border-bottom:none}.statement-total{display:flex;justify-content:space-between;padding-top:var(--space-3);margin-top:var(--space-2);border-top:2px solid var(--indigo-900);font-weight:600;font-family:var(--font-display);font-size:var(--text-md)}.filter-bar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;padding:var(--space-3);border-bottom:1px solid var(--border);background:var(--surface-alt);overflow-x:auto}.filter-chip{padding:5px var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:var(--text-xs);font-weight:700;cursor:pointer;color:var(--text-muted);white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.filter-chip:hover:not(.active){border-color:var(--indigo-500);color:var(--indigo-700)}.filter-chip.active{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff}.inbox-row{display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:var(--space-3);border-bottom:1px solid var(--border);font-size:var(--text-base);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}.inbox-row:hover,.inbox-row:active{background:var(--surface-alt)}.inbox-row.header-row{display:none}.inbox-row .ir-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}.inbox-row .ir-title{font-weight:700}.inbox-row .ir-meta{color:var(--text-muted);font-size:var(--text-xs)}.inbox-row .ir-actions{display:flex;gap:var(--space-2);margin-top:4px}.routing-box{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--teal-100);border:1px solid rgba(13,148,136,.22);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4)}.routing-box .routing-icon{flex-shrink:0;color:var(--teal-600);margin-top:2px}.routing-box .routing-icon svg{width:18px;height:18px}.routing-box .routing-label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--teal-600);margin-bottom:var(--space-1)}.routing-box .routing-vendor{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;color:var(--indigo-900)}.routing-box .routing-reason{font-size:var(--text-sm);color:var(--text);margin-top:4px}.log-entry{padding:var(--space-2) 0;border-bottom:1px dashed var(--border);font-size:var(--text-sm)}.log-entry:last-child{border-bottom:none}.log-entry .log-subject{font-weight:700}.log-entry .log-meta{color:var(--text-muted);font-size:var(--text-xs);margin-top:2px}.log-entry .log-body{margin-top:4px;color:var(--text)}.calendar-group{margin-bottom:var(--space-5)}.calendar-group h3{font-size:var(--text-md);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}.calendar-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:var(--space-2);font-size:var(--text-sm)}.calendar-row .cal-days{font-family:var(--font-display);font-weight:600;min-width:54px;text-align:right}.urgency-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}.urgency-dot--urgent{background:var(--danger)}.urgency-dot--soon{background:var(--warning)}.urgency-dot--watch{background:#d4a90f}.urgency-dot--later{background:var(--success)}.form-grid{display:flex;flex-direction:column;gap:var(--space-3)}@media (min-width: 481px){.app-shell{border-left:1px solid var(--border);border-right:1px solid var(--border);box-shadow:var(--shadow-md)}}