:root{--bg: #f3f5f9;--card: #ffffff;--ink: #1e293b;--muted: #64748b;--accent: #1f3b73;--accent-2: #2f54a0;--border: #e2e8f0;--danger: #dc2626;--ok: #15803d;--radius: 14px;--shadow: 0 1px 3px rgba(15, 23, 42, .08)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;background:var(--bg);color:var(--ink)}h1,h2,h3{margin:0 0 12px}h1,h3{display:flex;align-items:center;gap:8px}h2{font-size:1.3rem}h3{font-size:1.05rem;color:var(--accent)}.layout{min-height:100vh;display:flex;flex-direction:column}.topbar{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;position:sticky;top:0;z-index:30}.brand{font-weight:800;font-size:1.1rem;white-space:nowrap;display:flex;align-items:center;gap:6px}.topbar .nav{display:none}.userbox{display:flex;align-items:center;gap:10px;min-width:0}.company{font-weight:600;font-size:.9rem;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.username{display:none}.logout{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.85rem}.settings-link{color:#fff;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:8px;text-decoration:none}.settings-link:hover{background:#ffffff1f}.install-wrap{position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:45}.install-btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:999px;font-size:.9rem;font-weight:700;min-height:0;box-shadow:0 6px 18px #1f3b7359;animation:install-pulse 1.6s ease-in-out infinite}.install-btn:hover{background:var(--accent-2);animation:none;transform:scale(1.04)}@keyframes install-pulse{0%,to{transform:scale(1);box-shadow:0 6px 18px #1f3b7359}50%{transform:scale(1.06);box-shadow:0 6px 26px #1f3b738c}}.install-hint{position:fixed;right:16px;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:260px;background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:12px;font-size:.85rem;line-height:1.5;z-index:46;text-align:left}.install-hint .icon-btn{position:absolute;top:4px;right:4px}.install-hint b{color:var(--accent)}.onboarding{max-width:420px;gap:12px}.onboarding .modal-head h3{font-size:1.05rem;line-height:1.3}.onboarding-intro{margin:0;color:var(--muted)}.onboarding-step{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:12px}.onboarding-step h4{margin:0 0 6px;color:var(--accent);font-size:.95rem}.onboarding-step p{margin:4px 0;line-height:1.5;font-size:.9rem}.onboarding-step ul{margin:6px 0 0;padding-left:18px}.onboarding-step li{margin:4px 0;line-height:1.5;font-size:.9rem}.onboarding-result{padding:0 2px}.onboarding-result p{margin:6px 0;line-height:1.5;font-size:.9rem}.onboarding-tip{background:#eef4ff;border:1px solid #c9daf5;border-radius:10px;padding:10px 12px;color:var(--accent)}.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));z-index:30}.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;padding:6px 8px;text-decoration:none;color:var(--muted);font-size:.66rem;font-weight:600;border-radius:10px}.bottomnav a .bn-icon{font-size:1.25rem;line-height:1}.bottomnav a.active{color:var(--accent)}.content{padding:16px 16px 96px;width:100%;max-width:960px;margin:0 auto}.page,.page form{display:flex;flex-direction:column;gap:14px}.row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.title-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}.actions{display:flex;gap:8px;flex-wrap:wrap}.date-today{color:var(--muted);font-size:.95rem;font-weight:600}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card>h3{margin-bottom:12px}label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--muted)}input,select{font:inherit;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink);width:100%}input:focus,select:focus{outline:2px solid var(--accent);border-color:transparent}button{font:inherit;font-weight:600;cursor:pointer;border-radius:10px;padding:12px 16px;border:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:var(--accent);color:#fff}.primary:hover:not(:disabled){background:var(--accent-2)}.primary.big{width:100%;padding:14px;font-size:1.05rem}.secondary{background:#eef2f8;color:var(--accent);border:1px solid var(--border)}.secondary:hover:not(:disabled){background:#e2e8f2}.secondary.ghost{background:transparent}.danger{background:#fee2e2;color:var(--danger)}.danger:hover{background:#fecaca}.icon-btn{background:transparent;color:var(--muted);padding:8px 12px;border-radius:8px}.icon-btn:hover{color:var(--danger);background:#fee2e2}.grid2{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}.info-card{padding:12px 16px}.info-card h3{margin-bottom:8px;font-size:.95rem}.info-grid{display:grid;grid-template-columns:1fr;gap:10px}.hint{color:var(--muted);font-size:.85rem;margin:0 0 12px}.voice-field{display:flex;flex-direction:column;gap:6px}.voice-field label{font-size:.85rem;font-weight:600;color:var(--muted)}.voice-row{display:flex;gap:8px;align-items:center}.voice-row input{flex:1}.mic-btn{border-radius:50%;width:48px;height:48px;padding:0;font-size:1.2rem;background:#eef2f8;border:1px solid var(--border);flex:none}.mic-btn.listening{background:var(--danger);color:#fff;animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.1)}}.dictate-block{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.dictate-block .hint{margin:0}.dictate-block>button{align-self:flex-start}.items-head{display:grid;grid-template-columns:1fr .8fr 1fr 44px;gap:8px;padding:0 0 8px;font-size:.75rem;font-weight:700;color:var(--muted)}.item-row{display:grid;grid-template-columns:1fr .8fr 1fr 44px;gap:8px;align-items:center;margin-bottom:10px}.items-head span:nth-child(4),.item-row .total{display:none}.totals{display:flex;justify-content:stretch}.totals-inner{flex:1;display:flex;flex-direction:column;gap:6px}.totals-inner>div,.totals-inline>div{display:flex;justify-content:space-between;gap:24px}.totals-inner .grand,.totals-inline .grand{font-size:1.2rem;color:var(--accent);border-top:2px solid var(--accent);padding-top:8px}.totals-inner .acm-fee{font-size:.6rem;color:var(--muted);font-weight:500}.totals-inline{display:flex;flex-direction:column;gap:6px;margin-top:14px}.error{background:#fee2e2;color:var(--danger);border:1px solid #fecaca;border-radius:10px;padding:12px 14px;font-weight:500}.success{background:#dcfce7;color:var(--ok);border:1px solid #bbf7d0;border-radius:10px;padding:12px 14px;font-weight:500}.toast-container{position:fixed;top:12px;right:12px;z-index:1200;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,380px)}.toast{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 6px 20px #0000002e;border:1px solid var(--border);animation:toast-in .2s ease}.toast-error{border-left:0px solid var(--danger)}.toast-error>svg{color:var(--danger);flex-shrink:0}.toast-success{border-left:0px solid var(--ok)}.toast-success>svg{color:var(--ok);flex-shrink:0}.toast-info{border-left:0px solid var(--accent)}.toast-info>svg{color:var(--accent);flex-shrink:0}.toast-msg{flex:1;font-weight:500;font-size:.9rem}.toast-close{border:none;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;padding:2px}.toast-close:hover{color:var(--text)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.table-wrap{padding:0}table.invoices{width:100%;border-collapse:collapse}table.invoices thead{display:none}table.invoices tr{display:block;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow);padding:10px 14px;margin-bottom:10px}table.invoices td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:none;padding:6px 0;font-size:.95rem}table.invoices td:before{content:attr(data-label);color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}table.invoices td:last-child{justify-content:flex-end}table.invoices td.right{justify-content:space-between}.small-btn{color:var(--accent);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;display:inline-block}.filter-bar{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding:10px 12px}.filter-range,.filter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.filter-range input[type=date]{padding:6px 8px;font-size:.8rem;width:auto;flex:1;min-width:0}.filter-sep{color:var(--muted)}.filter-bar button{min-height:0;padding:6px 10px;font-size:.8rem}.awards{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px}.award{display:flex;flex-direction:column;gap:4px;padding:12px 16px}.award-title{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.award-name{color:var(--accent);font-size:1.15rem}.award-sub{color:var(--muted);font-size:.8rem}.kpis{display:grid;grid-template-columns:1fr;gap:12px}.kpi{display:flex;flex-direction:column;gap:8px}.kpi span{color:var(--muted);font-size:.9rem}.kpi .big{font-size:1.4rem;color:var(--accent)}.empty{color:var(--muted)}.empty a{color:var(--accent)}.invoice-view p{margin:4px 0}.invoice-view table.invoices{margin-top:12px}.wa-card .wa-send{flex:none}.wa-card .client-select{width:100%;padding:12px;margin-bottom:10px;border:1px solid #d5dbe6;border-radius:10px;font-size:15px;background:#fff}.ok{color:#1a7f37;background:#e6f4ea;border-radius:8px;padding:8px 12px;margin:8px 0}.client-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:14px;font-weight:600}.client-form input{padding:12px;border:1px solid #d5dbe6;border-radius:10px;font-size:15px}.client-list{list-style:none;padding:0}.client-list li{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #eef1f6}.client-list li:last-child{border-bottom:none}.cl-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:#e8edf7;color:#1f3b73;display:flex;align-items:center;justify-content:center}.cl-info{display:flex;flex-direction:column;flex:1;min-width:0}.cl-name{font-weight:600}.cl-phone{color:#6b7484;font-size:14px}.small-btn.danger{color:#b3261e;background:#fdecec;border:none}.seller-field{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed #d5dbe6;border-radius:10px;background:#f8fafc}.seller-icon{flex:none;width:40px;height:40px;border-radius:50%;background:#e8edf7;color:#1f3b73;display:flex;align-items:center;justify-content:center}.seller-field>div{display:flex;flex-direction:column;min-width:0}.seller-label{font-size:13px;color:#6b7484}.seller-name{font-weight:600;font-size:15px}.staff-form h3,.staff-form .grid2{margin-bottom:12px}.inline-actions{display:inline-flex;gap:6px}.hint-card p{display:flex;align-items:center;gap:8px;margin:0;color:#6b7484}.hint.block{display:block;margin:4px 0 10px;text-align:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.modal{background:var(--card);border-radius:var(--radius);width:100%;max-width:360px;padding:18px;box-shadow:0 10px 30px #0f172a40;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow-y:auto}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h3{margin:0}.qr-box{align-self:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}.pay-tabs{display:flex;gap:8px}.pay-tabs button{flex:1;padding:10px;background:#eef2f8;color:var(--muted);border:1px solid var(--border)}.pay-tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.pay-code{align-self:center;font-family:ui-monospace,Consolas,monospace;font-size:1.05rem;font-weight:700;color:var(--accent);background:#eef2f8;border:1px solid var(--border);border-radius:8px;padding:8px 14px}.pay-amount{text-align:center;font-size:1.05rem;font-weight:600}.pay-instruction{margin:0;font-size:.9rem;color:var(--muted)}.pay-config{display:flex;flex-direction:column;gap:10px}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1f3b73,#2f54a0);padding:20px}.auth-card{width:100%;max-width:420px;text-align:center}.auth-card h1{font-size:1.7rem;color:var(--accent);justify-content:center}.subtitle{color:var(--muted);margin:0 0 16px}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{flex:1;background:#eef2f8;color:var(--muted);border:1px solid var(--border);padding:10px}.tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.auth-card form{display:flex;flex-direction:column;gap:14px;text-align:left}.auth-switch{margin:16px 0 0;color:var(--muted);font-size:.9rem;text-align:center}.auth-switch a{color:var(--accent);font-weight:600}@media(min-width:768px){.topbar{padding:12px 24px}.topbar .nav{display:flex;gap:4px;flex-wrap:wrap}.nav a{color:#dbe4f5;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.95rem}.nav a:hover{background:#ffffff1f}.nav a.active{background:#fff;color:var(--accent);font-weight:600}.company{max-width:none}.username{display:inline;color:#b9c7e4;font-size:.85rem}.bottomnav{display:none}.content{padding:24px}.grid2{grid-template-columns:1fr 1fr;gap:16px}.info-grid{grid-template-columns:2fr 1fr;gap:12px}.items-head,.item-row{grid-template-columns:2fr .7fr 1fr 1fr 40px}.items-head span:nth-child(4),.item-row .total{display:block}.item-row .total{text-align:right;color:var(--ink);font-weight:600;white-space:nowrap}.totals{justify-content:flex-end}.totals-inner{flex:none;min-width:260px}.totals-inline{max-width:320px;margin-left:auto}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}table.invoices{min-width:560px}table.invoices thead{display:table-header-group}table.invoices tr{display:table-row;border:none;border-radius:0;box-shadow:none;padding:0;margin:0}table.invoices td{display:table-cell;padding:12px 16px;border-bottom:1px solid var(--border)}table.invoices td:before{content:none}table.invoices th{text-align:left;padding:12px 16px;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:2px solid var(--border)}table.invoices tr:hover td{background:#f8fafc}table.invoices .right,td.right{text-align:right}.filter-bar{flex-direction:row;align-items:center;justify-content:space-between}.filter-range input[type=date]{flex:none}.awards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.kpi .big{font-size:1.6rem}.small-btn{padding:4px 8px}}.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}.presets button{min-height:38px;padding:8px 14px}.presets button.active-preset{background:var(--accent);color:#fff;border-color:var(--accent)}.phone-row{display:flex;align-items:center;gap:8px}.phone-icon{color:var(--muted);display:inline-flex;flex:none}.otp-block{background:#f8fafc}.otp-block form{display:flex;flex-direction:column;gap:10px}.ussd-block{background:#f8fafc;text-align:center}.ussd-code{font-size:1.5rem;font-weight:800;letter-spacing:.08em;color:var(--accent);background:#fff;border:2px dashed var(--accent);border-radius:12px;padding:18px;margin:8px 0;word-break:break-all}.tx-type{display:inline-flex;align-items:center;gap:6px;font-weight:600}.tx-type.debit{color:var(--danger)}.tx-type.credit{color:var(--ok)}.tx-amount{font-weight:700}.tx-amount.debit{color:var(--danger)}.tx-amount.credit{color:var(--ok)}.badge{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.badge.success{background:#dcfce7;color:var(--ok)}.badge.pending{background:#fef9c3;color:#a16207}.badge.failed,.badge.canceled{background:#fee2e2;color:var(--danger)}.balance-text{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem;font-weight:700;white-space:nowrap}.balance-text.low{color:var(--danger)}.recharge-btn{min-height:38px;padding:8px 14px;background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}.recharge-btn:hover{background:var(--accent-2)}.recharge-cta{margin-top:10px}.recharge-cta a{border-color:#fecaca;color:var(--danger)}.low-balance{display:flex;flex-direction:column;gap:14px;align-items:stretch;background:#fffbeb;border-color:#fde68a}.low-balance.zero{background:#fee2e2;border-color:#fecaca}.low-balance-text{display:flex;flex-direction:column;gap:4px}.low-balance-text b{font-size:1rem}.low-balance.zero .low-balance-text b{color:var(--danger)}.low-balance-text span{color:var(--muted);font-size:.9rem}.low-balance .primary{width:100%}@media(min-width:640px){.low-balance{flex-direction:row;align-items:center;justify-content:space-between}.low-balance .primary{width:auto;flex:none}}.chart-box{width:100%;overflow-x:auto}.chart-svg{width:100%;min-width:340px;height:auto;display:block}.grid-line{stroke:#e6e9f0;stroke-width:1}.chart-area{fill:#1f3b731f;stroke:none}.chart-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.chart-dot{fill:var(--accent);stroke:#fff;stroke-width:2}.chart-label{fill:var(--muted);font-size:12px}.chart-x{font-size:10px}.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}.chart-legend-item{font-size:.75rem;color:var(--muted)}.chart-legend-item b{color:var(--text)}.barchart{display:flex;flex-direction:column;gap:10px}.bar-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px}.bar-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:18px;background:#eef1f7;border-radius:9px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#4f6bb5);border-radius:9px;min-width:2px;transition:width .4s ease}.bar-value{font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap}.bar-sub{color:var(--muted);font-weight:500}.empchart{display:flex;flex-direction:column;gap:6px}.empchart-head,.empchart-row{display:grid;grid-template-columns:110px repeat(7,1fr) 80px;align-items:center;gap:6px}.empchart-head{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.empchart-name{font-weight:600;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empchart-day{text-align:center}.empchart-cell{display:flex;flex-direction:column;align-items:center;gap:2px}.empchart-bar{width:100%;max-width:26px;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}.empchart-cell small{font-size:.6rem;color:var(--muted);white-space:nowrap}.empchart-count{font-weight:700;color:var(--accent)}.empchart-amount{color:var(--muted)}.empchart-total{text-align:right;font-weight:700;font-size:.8rem;white-space:nowrap}.empchart-row{border-top:1px solid var(--border);padding-top:6px}@media(max-width:640px){.empchart{overflow-x:auto}.empchart-head,.empchart-row{min-width:560px}}.ranking{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0}.rank-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f8fafc;border:1px solid var(--border);border-radius:10px}.rank-row.rank-first{background:#eef2fb;border-color:#c9d6f2}.rank-pos{width:26px;height:26px;flex:none;border-radius:50%;background:#e8edf7;color:var(--accent);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}.rank-first .rank-pos{background:var(--accent);color:#fff}.rank-name{flex:1;min-width:0;font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-trend{color:#9aa3b2;display:flex}.rank-trend.up{color:var(--ok)}.rank-value{font-weight:700;white-space:nowrap;font-size:.9rem}.rank-count{color:var(--muted);font-size:.75rem;white-space:nowrap}.rank-hint{margin-top:10px}