@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--font-family:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-primary:#0a0d14;--bg-secondary:#121824;--bg-card:#161e31b3;--bg-card-hover:#1e2943d9;--bg-nav:#0a0d14d9;--color-primary:#00d2ff;--color-secondary:#06f;--grad-primary:linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);--grad-accent:linear-gradient(135deg, #38ef7d 0%, #11998e 100%);--grad-warning:linear-gradient(135deg, #f857a6 0%, #ff5858 100%);--grad-danger:linear-gradient(135deg, #f80759 0%, #bc4e9c 100%);--color-success:#00e676;--color-warning:#ffb300;--color-danger:#ff1744;--color-info:#00b0ff;--text-primary:#fff;--text-secondary:#90a1b6;--text-tertiary:#5d6e83;--text-inverse:#0a0d14;--border-color:#ffffff14;--border-color-focus:#00d2ff66;--border-radius-sm:8px;--border-radius-md:16px;--border-radius-lg:24px;--border-radius-xl:32px;--shadow-sm:0 4px 6px -1px #0003;--shadow-md:0 10px 15px -3px #0000004d, 0 4px 6px -2px #0003;--shadow-lg:0 20px 25px -5px #0006, 0 10px 10px -5px #0000004d;--shadow-glow-cyan:0 0 20px #00f2fe4d;--shadow-glow-green:0 0 20px #00e67640;--shadow-glow-warning:0 0 20px #ffb30040;--shadow-glow-danger:0 0 20px #ff174440;--backdrop-blur:blur(16px);--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-spring:.4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-family);-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{color:var(--text-primary);background-color:#05070a;justify-content:center;align-items:center;min-height:100vh;display:flex;overflow:hidden}.app-container{background-color:var(--bg-primary);border:1px solid var(--border-color);width:100%;max-width:480px;height:100vh;max-height:920px;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;position:relative;overflow:hidden}@media (width<=480px){.app-container{border:none;border-radius:0;max-width:100%;height:100dvh;max-height:100dvh}}.scroll-content{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;padding:20px 16px 100px;overflow-y:auto}.scroll-content::-webkit-scrollbar{width:4px}.scroll-content::-webkit-scrollbar-track{background:0 0}.scroll-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.flex-row{align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.grid-2{grid-template-columns:1fr 1fr;gap:12px;display:grid}.safe-top{padding-top:env(safe-area-inset-top,0px)}.safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-glow{0%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}to{opacity:.5;transform:scale(.95)}}.animate-fade-in-up{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeInUp}.animate-fade-in{animation:.3s ease-out forwards fadeIn}.login-container{background:radial-gradient(circle at 100% 0,#0066ff26,#0000 60%),radial-gradient(circle at 0 100%,#00f2fe1a,#0000 60%);flex-direction:column;justify-content:center;align-items:center;height:100%;padding:24px;display:flex}.login-header{text-align:center;margin-bottom:40px}.login-logo-glow{background:var(--grad-primary);width:64px;height:64px;box-shadow:var(--shadow-glow-cyan);color:var(--text-inverse);border-radius:20px;justify-content:center;align-items:center;margin:0 auto 16px;display:flex}.login-header h1{letter-spacing:-.5px;background:var(--grad-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:28px;font-weight:700}.login-header p{color:var(--text-secondary);margin-top:8px;font-size:14px}.login-form{background:var(--bg-card);width:100%;-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:24px}.form-group{margin-bottom:20px}.form-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px;font-size:12px;font-weight:600;display:block}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:var(--text-tertiary);position:absolute;left:14px}.form-control{border:1px solid var(--border-color);border-radius:var(--border-radius-md);width:100%;height:48px;color:var(--text-primary);transition:var(--transition-fast);background:#ffffff0a;padding:0 16px 0 44px;font-size:15px}.form-control:focus{border-color:var(--color-primary);background:#ffffff14;outline:none;box-shadow:0 0 0 3px #00d2ff26}.btn-primary{background:var(--grad-primary);border-radius:var(--border-radius-md);width:100%;height:50px;color:var(--text-inverse);cursor:pointer;transition:var(--transition-normal);box-shadow:var(--shadow-glow-cyan);border:none;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.btn-primary:active{transform:scale(.98);box-shadow:0 0 10px #00f2fe33}.quick-login-btn{border:1px dashed var(--border-color);color:var(--color-primary);border-radius:var(--border-radius-md);cursor:pointer;width:100%;transition:var(--transition-fast);background:0 0;margin-top:16px;padding:10px;font-size:13px}.quick-login-btn:hover{border-color:var(--color-primary);background:#00d2ff0d}.bottom-nav{background:var(--bg-nav);height:72px;-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);border-top:1px solid var(--border-color);z-index:100;padding-bottom:env(safe-area-inset-bottom,0px);justify-content:space-around;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.nav-item{color:var(--text-tertiary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 12px;font-size:11px;font-weight:500;display:flex}.nav-item.active{color:var(--color-primary)}.nav-item.active svg{filter:drop-shadow(0 2px 8px #00f2fe66);transform:translateY(-2px)}.nav-item svg{transition:var(--transition-spring)}.header-row{margin-bottom:24px}.welcome-text h2{letter-spacing:-.5px;font-size:24px;font-weight:700}.welcome-text p{color:var(--text-secondary);font-size:13px}.avatar{background:var(--grad-primary);width:42px;height:42px;color:var(--text-inverse);box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex}.stats-grid{grid-template-columns:1fr;gap:14px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);transition:var(--transition-normal);cursor:pointer;justify-content:space-between;align-items:center;padding:18px;display:flex}.stat-card:hover{background:var(--bg-card-hover);border-color:#ffffff26;transform:translateY(-2px)}.stat-info h3{color:var(--text-secondary);margin-bottom:4px;font-size:13px;font-weight:500}.stat-value{letter-spacing:-.5px;font-size:24px;font-weight:700}.stat-icon-wrapper{border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-card.cyan .stat-icon-wrapper{color:var(--color-primary);background:#00d2ff1a}.stat-card.cyan .stat-value{color:var(--color-primary)}.stat-card.warning .stat-icon-wrapper{color:var(--color-warning);background:#ffb3001a}.stat-card.warning .stat-value{color:var(--color-warning)}.stat-card.danger .stat-icon-wrapper{color:var(--color-danger);background:#ff17441a}.stat-card.danger .stat-value{color:var(--color-danger)}.section-title{color:var(--text-primary);align-items:center;gap:8px;margin:20px 0 12px;font-size:16px;font-weight:600;display:flex}.shortcut-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;display:grid}.shortcut-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);text-align:center;cursor:pointer;transition:var(--transition-normal);padding:16px}.shortcut-card:hover{background:var(--bg-card-hover);border-color:#ffffff26}.shortcut-icon{width:40px;height:40px;color:var(--text-primary);background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center;margin:0 auto 12px;display:flex}.shortcut-card h4{margin-bottom:4px;font-size:14px;font-weight:600}.shortcut-card p{color:var(--text-secondary);font-size:11px}.search-container{z-index:50;background:var(--bg-primary);border-bottom:1px solid #ffffff08;margin-bottom:12px;padding:8px 0 16px;position:sticky;top:0}.search-bar-row{gap:8px;display:flex}.search-input-wrapper{flex:1;align-items:center;display:flex;position:relative}.search-input-wrapper .search-icon{color:var(--text-tertiary);width:18px;height:18px;position:absolute;left:12px}.search-input{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);width:100%;height:42px;color:var(--text-primary);transition:var(--transition-fast);padding:0 16px 0 40px;font-size:14px}.search-input:focus{border-color:var(--color-primary);background:var(--bg-card-hover);outline:none}.category-scroll{scrollbar-width:none;gap:8px;padding:8px 0 2px;display:flex;overflow-x:auto}.category-scroll::-webkit-scrollbar{display:none}.cat-pill{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:var(--transition-fast);background:#ffffff0a;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500}.cat-pill.active{background:var(--grad-primary);color:var(--text-inverse);border-color:#0000;box-shadow:0 4px 10px #00f2fe33}.stock-list{flex-direction:column;gap:12px;display:flex}.stock-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-spring);flex-direction:column;gap:10px;padding:16px;display:flex}.stock-card:hover{background:var(--bg-card-hover);border-color:#ffffff26;transform:translateY(-2px)}.stock-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.stock-info{flex:1}.stock-sku{color:var(--color-primary);letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px;font-size:11px;font-weight:600}.stock-name{color:var(--text-primary);font-size:15px;font-weight:600;line-height:1.3}.stock-card-footer{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;margin-top:4px;padding-top:8px;display:flex}.stock-qty{color:var(--text-secondary);font-size:13px}.stock-qty strong{color:var(--text-primary);font-size:16px}.stock-price{color:#00e676;font-size:15px;font-weight:700}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:10px;font-weight:700;display:inline-flex}.badge-in_stock{color:var(--color-success);background:#00e6761a;border:1px solid #00e67633}.badge-low_stock{color:var(--color-warning);background:#ffb3001a;border:1px solid #ffb30033}.badge-out_stock{color:var(--color-danger);background:#ff17441a;border:1px solid #ff174433}.customer-list{flex-direction:column;gap:12px;display:flex}.customer-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-normal);padding:16px}.customer-card:hover{background:var(--bg-card-hover);border-color:#ffffff26;transform:translateY(-2px)}.customer-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.customer-code{font-color:var(--text-tertiary);font-size:11px;font-weight:500}.customer-name{color:var(--text-primary);margin-bottom:4px;font-size:16px;font-weight:600;line-height:1.3}.customer-rep{color:var(--text-secondary);align-items:center;gap:4px;font-size:12px;display:flex}.customer-aging-bar{background:#ffffff0d;border-radius:3px;height:6px;margin:12px 0;display:flex;overflow:hidden}.aging-segment{height:100%}.aging-details-summary{justify-content:space-between;align-items:center;font-size:12px;display:flex}.outstanding-amount{font-size:14px;font-weight:700}.outstanding-amount.good{color:var(--text-secondary)}.outstanding-amount.warning{color:var(--color-warning)}.outstanding-amount.blocked{color:var(--color-danger)}.drawer-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#05070ab3;flex-direction:column;justify-content:flex-end;animation:.25s ease-out fadeIn;display:flex;position:absolute;inset:0}.drawer-content{background:var(--bg-secondary);border-top-left-radius:var(--border-radius-xl);border-top-right-radius:var(--border-radius-xl);border-top:1px solid var(--border-color);flex-direction:column;gap:20px;max-height:80%;padding:24px;animation:.35s cubic-bezier(.16,1,.3,1) fadeInUp;display:flex;overflow-y:auto;box-shadow:0 -10px 25px #00000080}.drawer-handle{background:var(--border-color);border-radius:3px;width:40px;height:5px;margin:-12px auto 8px}.drawer-header{justify-content:space-between;align-items:flex-start;display:flex}.drawer-close{width:32px;height:32px;color:var(--text-primary);cursor:pointer;transition:var(--transition-fast);background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.drawer-close:hover{background:#ffffff1a}.drawer-section{flex-direction:column;gap:8px;display:flex}.drawer-section h4{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #ffffff0d;padding-bottom:6px;font-size:12px;font-weight:600}.drawer-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.grid-cell label{color:var(--text-secondary);margin-bottom:2px;font-size:11px;display:block}.grid-cell span{color:var(--text-primary);font-size:14px;font-weight:500}.wh-row{border-bottom:1px solid #ffffff08;justify-content:space-between;padding:10px 0;font-size:13px;display:flex}.wh-row:last-child{border-bottom:none}.action-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.btn-action{border-radius:var(--border-radius-md);border:1px solid var(--border-color);height:48px;color:var(--text-primary);cursor:pointer;transition:var(--transition-fast);background:#ffffff08;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;display:flex}.btn-action:hover{background:#ffffff14;border-color:#ffffff26}.btn-action.whatsapp{color:#25d366}.btn-action.phone-btn{color:var(--color-primary)}.aging-breakdown-card{border:1px solid var(--border-color);border-radius:var(--border-radius-md);background:#ffffff05;padding:16px}.chart-wrapper{justify-content:center;align-items:center;height:160px;margin:10px 0;display:flex;position:relative}.chart-donut-text{text-align:center;flex-direction:column;justify-content:center;display:flex;position:absolute}.chart-donut-lbl{color:var(--text-secondary);font-size:11px}.chart-donut-val{color:var(--text-primary);font-size:18px;font-weight:700}.chart-legend{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;display:grid}.legend-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:11px;display:flex}.legend-color{border-radius:3px;width:10px;height:10px}.aging-period-row{border-bottom:1px dashed #ffffff0a;justify-content:space-between;padding:8px 0;font-size:13px;display:flex}.aging-period-row:last-child{border-bottom:none}.period-lbl{align-items:center;gap:8px;display:flex}.period-dot{border-radius:50%;width:8px;height:8px}.period-val{font-weight:600}.invoice-table{border-collapse:collapse;width:100%;margin-top:4px;font-size:12px}.invoice-table th{text-align:left;color:var(--text-secondary);border-bottom:1px solid var(--border-color);padding:8px;font-weight:600}.invoice-table td{border-bottom:1px solid #ffffff08;padding:8px}.invoice-table tr:last-child td{border-bottom:none}.days-overdue-tag{border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600}.days-overdue-tag.overdue{color:var(--color-danger);background:#ff17441a}.days-overdue-tag.not-overdue{color:var(--color-success);background:#00e6761a}.profile-header{text-align:center;border-radius:var(--border-radius-lg);background:linear-gradient(#0066ff14 0%,#0000 100%);margin-bottom:24px;padding:24px 0}.profile-avatar-large{background:var(--grad-primary);width:72px;height:72px;color:var(--text-inverse);box-shadow:var(--shadow-glow-cyan);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 12px;font-size:28px;font-weight:700;display:flex}.profile-name{font-size:20px;font-weight:700}.profile-role{color:var(--text-secondary);margin-top:2px;font-size:13px}.settings-list{flex-direction:column;gap:12px;display:flex}.settings-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);justify-content:space-between;align-items:center;padding:16px;display:flex}.settings-item:hover{background:var(--bg-card-hover)}.settings-item-left{align-items:center;gap:14px;display:flex}.settings-icon-wrapper{color:var(--color-primary)}.settings-text h5{font-size:14px;font-weight:600}.settings-text p{color:var(--text-secondary);font-size:11px}.btn-logout{width:100%;height:48px;color:var(--color-danger);border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-fast);background:#ff17441a;border:1px solid #ff174433;justify-content:center;align-items:center;gap:8px;margin-top:32px;font-size:14px;font-weight:600;display:flex}.btn-logout:hover{background:#ff174426;border-color:#ff17444d}html,body{background-color:#05070a;width:100%;height:100%;margin:0;padding:0;overflow:hidden}