*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#4f46e5;--brand-light:#eef2ff;--brand-dark:#3730a3;--bg:#f1f5f9;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;--subtle:#f8fafc;--green:#10b981;--red:#ef4444;--amber:#f59e0b;--radius:14px;--radius-lg:20px;--radius-xl:28px;--shadow:0 1px 4px #00000012,0 4px 16px #0000000a;--shadow-lg:0 8px 32px #0000001a;--sidebar:240px;--bottom-nav:68px}[data-theme=dark]{--brand:#818cf8;--brand-light:#312e81;--brand-dark:#a5b4fc;--bg:#0f172a;--surface:#1e293b;--border:#334155;--text:#f8fafc;--muted:#94a3b8;--subtle:#0f172a}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Inter,sans-serif}#root{flex-direction:column;height:100%;display:flex;overflow:hidden}img{display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit}.hide{display:none!important}#splash{z-index:9999;background:#0f172a;flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:fixed;inset:0}#splash img{object-fit:cover;border:3px solid #ffffff26;border-radius:24px;width:100px;height:100px;animation:1.6s ease-in-out infinite pulse}#splash h1{color:#fff;letter-spacing:2px;margin-top:20px;font-size:22px;font-weight:900}#splash p{color:#94a3b8;margin-top:6px;font-size:13px;font-weight:500}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 #6366f166}50%{transform:scale(1.06);box-shadow:0 0 0 16px #6366f100}}#login-screen{z-index:1000;background:#0f172a;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.login-box{text-align:center;background:#1e293b;border-radius:24px;width:100%;max-width:400px;padding:40px 32px}.login-box img{object-fit:cover;border:2px solid #ffffff1a;border-radius:20px;width:80px;height:80px;margin:0 auto 20px;animation:2s infinite pulse}.login-box h1{color:#fff;margin-bottom:6px;font-size:26px;font-weight:900}.login-box p{color:#94a3b8;margin-bottom:28px;font-size:14px}.btn-google{color:#0f172a;background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:12px;width:100%;padding:14px 20px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.btn-google:hover{background:#f1f5f9;transform:translateY(-1px)}.btn-google svg{flex-shrink:0;width:20px;height:20px}#login-error{color:#f87171;background:#ef44441a;border-radius:10px;margin-top:14px;padding:10px;font-size:13px}#app{height:100%;display:flex;position:relative;overflow:hidden}#main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}#page-content{padding:20px;padding-bottom:calc(var(--bottom-nav) + 24px);-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}@media (width>=769px){#page-content{padding-bottom:20px}}#sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-brand{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:20px 16px;display:flex}.sidebar-brand img{object-fit:cover;border-radius:10px;width:38px;height:38px}.sidebar-brand span{color:var(--text);font-size:15px;font-weight:800}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 8px;display:flex;overflow-y:auto}.nav-btn{width:100%;color:var(--muted);text-align:left;border-radius:12px;align-items:center;gap:12px;padding:11px 14px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.sidebar-footer{border-top:1px solid var(--border);padding:12px 8px}.logout-btn{color:#ef4444;border-radius:12px;align-items:center;gap:10px;width:100%;padding:11px 14px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.logout-btn:hover{background:#fff5f5}#topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:60px;padding:0 20px;display:flex}.topbar-left{align-items:center;gap:12px;min-width:0;display:flex}.topbar-hamburger{background:var(--subtle);width:36px;height:36px;color:var(--muted);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;display:none}.topbar-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:18px;font-weight:800;overflow:hidden}.topbar-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.topbar-date{color:var(--muted);white-space:nowrap;font-size:13px;font-weight:500}.topbar-avatar{object-fit:cover;border:2px solid var(--border);border-radius:50%;width:36px;height:36px}#global-filter-bar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:8px 14px;display:flex}#global-filter-bar .gf-label{color:var(--muted);white-space:nowrap;font-size:12px;font-weight:700}#global-filter-bar select{border:1px solid var(--border);color:var(--text);background:var(--bg);cursor:pointer;appearance:none;border-radius:8px;outline:none;padding:5px 10px;font-size:13px;font-weight:600}#global-filter-bar .gf-badge{background:var(--brand);color:#fff;white-space:nowrap;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;display:none}#global-filter-bar .gf-clear{color:var(--brand);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;display:none}#bottom-nav{height:var(--bottom-nav);background:var(--surface);border-top:1px solid var(--border);z-index:100;padding-bottom:env(safe-area-inset-bottom);align-items:stretch;display:none;position:fixed;bottom:0;left:0;right:0}.bnav-btn{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:4px 0;font-size:11px;font-weight:600;transition:all .15s;display:flex}#mobile-drawer{top:0;left:-var(--sidebar);width:var(--sidebar);background:var(--surface);z-index:201;height:100%;box-shadow:var(--shadow-lg);flex-direction:column;transition:transform .25s;display:flex;position:fixed;transform:translate(-100%)}.page{animation:.25s fadeUp}.page.active{display:block}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);padding:20px}.card-sm{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:16px}.section-title{color:var(--text);margin-bottom:16px;font-size:17px;font-weight:800}.label{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-size:11px;font-weight:700}.value-xl{letter-spacing:-1px;font-size:32px;font-weight:900;line-height:1}.value-lg{font-size:24px;font-weight:800}.metric-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px;display:grid}.metric-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow);flex-direction:column;gap:10px;padding:18px;display:flex}.metric-icon{border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;display:flex}.form-group{margin-bottom:14px}.form-label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:12px;font-weight:700;display:block}.form-input{background:var(--subtle);border:1.5px solid var(--border);width:100%;color:var(--text);appearance:none;border-radius:10px;outline:none;padding:11px 14px;font-size:14px;font-weight:500;transition:all .15s}.form-input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px #6366f11a}.form-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}.btn-danger{color:var(--red);background:#fef2f2;border:1px solid #fee2e2}.btn-danger:hover{background:#fee2e2}.btn-success{color:var(--green);background:#f0fdf4;border:1px solid #bbf7d0}.btn-success:hover{background:#dcfce7}.btn-full{width:100%;padding:13px}.btn-sm{border-radius:8px;padding:7px 13px;font-size:13px}.btn-icon{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:13px;display:flex}.table-wrap{-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--border);overflow-x:auto}.data-table,table{border-collapse:collapse;width:100%;font-size:14px}thead{background:var(--subtle)}th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:2px solid var(--border);padding:12px 16px;font-size:11px;font-weight:700}td{border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;padding:13px 16px}tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--subtle)}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=768px){.grid-2{grid-template-columns:1fr}}.nav-btn{width:100%;color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:12px;padding:11px 14px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.nav-btn i{text-align:center;width:18px;font-size:15px}.nav-btn:hover{background:var(--subtle);color:var(--text)}.nav-btn.active{background:var(--brand-light);color:var(--brand)}.bnav-btn{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:4px 0;font-size:11px;font-weight:600;text-decoration:none;transition:all .15s;display:flex}.bnav-btn i{font-size:20px;transition:all .15s}.bnav-btn.active{color:var(--brand)}.bnav-btn.active i{transform:scale(1.1)}#drawer-overlay{z-index:200;background:#00000080;display:none;position:fixed;inset:0}#mobile-drawer{width:var(--sidebar);background:var(--surface);z-index:201;height:100%;box-shadow:var(--shadow-lg);flex-direction:column;transition:transform .25s;display:flex;position:fixed;top:0;left:0;transform:translate(-100%)}#mobile-drawer.open{transform:translate(0)}.badge{text-transform:uppercase;letter-spacing:.4px;border-radius:20px;align-items:center;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.badge-green{color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0}.badge-red{color:#dc2626;background:#fef2f2;border:1px solid #fee2e2}.badge-amber{color:#d97706;background:#fffbeb;border:1px solid #fde68a}#toast{bottom:calc(var(--bottom-nav)16px);color:#fff;opacity:0;z-index:9000;white-space:nowrap;pointer-events:none;background:#0f172a;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .3s;position:fixed;left:50%;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}.empty{text-align:center;color:var(--muted);padding:48px 20px}.empty i{opacity:.3;margin-bottom:12px;font-size:40px}.empty p{font-size:14px;font-weight:500}.modal-overlay{z-index:500;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#0f172a66;justify-content:center;align-items:flex-end;padding:0;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.show{opacity:1;pointer-events:auto}@media (width>=600px){.modal-overlay{align-items:center;padding:20px}}.modal-box{-webkit-backdrop-filter:blur(20px);background:#ffffffd9;border:1px solid #fff9;border-radius:28px 28px 0 0;width:100%;max-width:520px;max-height:90vh;padding:32px 24px;transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;transform:translateY(100%);box-shadow:0 12px 48px #00000026}.modal-overlay.show .modal-box{transform:translateY(0)}@media (width>=600px){.modal-box{border-radius:28px;padding:36px;transform:translateY(40px)scale(.95)}.modal-overlay.show .modal-box{transform:translateY(0)scale(1)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-title{color:var(--text);letter-spacing:-.5px;font-size:20px;font-weight:800}.modal-close{cursor:pointer;width:36px;height:36px;color:var(--text);background:#0000000d;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;transition:all .2s;display:flex}.modal-close:hover{background:#0000001a;transform:scale(1.05)}.chart-wrap{width:100%;height:220px;position:relative}@media (width<=768px){#sidebar{display:none}.topbar-hamburger{display:flex!important}#bottom-nav{display:flex}#topbar{height:56px;padding:0 14px}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:14px}.value-xl{font-size:24px}.form-grid{grid-template-columns:1fr}.card{padding:16px}.data-table{min-width:480px}#toast{bottom:calc(var(--bottom-nav)10px);font-size:13px}.topbar-date{display:none}#bottom-nav button.bnav-btn{background:0 0;border:none;font-family:inherit}}@media (width<=380px){.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:12px}.value-xl{font-size:20px}}@media (width<=600px){.np-charts-grid{grid-template-columns:1fr!important}}.wa-chip{color:#16a34a;cursor:pointer;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:700;transition:all .15s;display:inline-flex}.wa-chip:hover{background:#dcfce7;border-color:#16a34a;transform:scale(1.04)}.wa-chip i{font-size:11px}[data-theme=dark] .modal-box{background:#1e293bf2;border-color:#ffffff1a}[data-theme=dark] .form-input:focus{background:var(--surface)}.bill-editable{background:0 0;border:none;border-bottom:1px solid #0000;outline:none;width:100%;font-family:inherit;transition:all .15s;display:block}.bill-editable:hover{border-bottom-color:#d1d5db}.bill-editable:focus{border-bottom-color:#facc15}@media (width<=540px){#bill-doc>div:nth-child(3),#bill-doc>div:nth-child(5){grid-template-columns:1fr!important}#bill-doc>div:nth-child(5)>div:first-child{border-bottom:1px solid #f1f5f9;border-right:none!important;padding:16px!important}}@media print{#sidebar,#topbar,#bottom-nav,#global-filter-bar,footer,.no-print{display:none!important}body,#app,#main,#page-content{background:#fff!important;overflow:visible!important}#bill-doc,#report-doc{box-shadow:none!important;border-radius:0!important;max-width:100%!important}#page-content{padding:0!important}table{page-break-inside:auto}tr{page-break-inside:avoid;page-break-after:auto}thead{display:table-header-group}}