:root{--primary: #4f46e5;--primary-dark: #4338ca;--primary-light: #eef2ff;--accent: #7c3aed;--bg: #f4f4fb;--surface: #ffffff;--text: #1e1b2e;--muted: #6b7280;--outline: #e5e7eb;--green: #16a34a;--red: #dc2626;--radius: 18px;--shadow-sm: 0 1px 3px rgba(30, 27, 46, .06), 0 1px 2px rgba(30, 27, 46, .04);--shadow-md: 0 8px 24px -8px rgba(79, 70, 229, .18), 0 2px 8px rgba(30, 27, 46, .05)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #121018;--surface: #1c1a26;--text: #f1f0f7;--muted: #9ca3af;--outline: #2e2b3c}}:root[data-theme=dark]{--bg: #121018;--surface: #1c1a26;--text: #f1f0f7;--muted: #9ca3af;--outline: #2e2b3c}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);background-image:radial-gradient(circle at top,rgba(124,58,237,.06),transparent 55%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:.1px}.muted{color:var(--muted)}.small{font-size:12px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}.spinner{width:34px;height:34px;border:3px solid var(--outline);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.error-card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);padding:20px;max-width:380px;text-align:center}.auth-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}.auth-card{background:var(--surface);border-radius:22px;padding:36px 26px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow-md);border:1px solid rgba(79,70,229,.06)}.auth-logo{width:60px;height:60px;border-radius:18px;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 16px -4px #4f46e580}.auth-card h1{font-size:21px;margin:0 0 6px;font-weight:800;letter-spacing:-.2px}.auth-card p{margin:0 0 22px;font-size:13.5px;line-height:1.5}.phone-input{display:flex;align-items:center;gap:8px;border:1.5px solid var(--outline);border-radius:12px;padding:12px 14px;margin-bottom:14px}.phone-input span{color:var(--muted);font-weight:600}.phone-input input{border:none;outline:none;flex:1;font-size:16px;background:transparent;color:var(--text)}.otp-input{width:100%;text-align:center;letter-spacing:10px;font-size:24px;font-weight:700;padding:14px;border:1.5px solid var(--outline);border-radius:12px;margin-bottom:14px;background:transparent;color:var(--text)}.error-text{color:var(--red);font-size:13px;margin:-6px 0 12px}.field{text-align:left;margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}.field input,.field select,.textarea{width:100%;border:1.5px solid var(--outline);border-radius:12px;padding:11px 12px;font-size:14px;background:transparent;color:var(--text);font-family:inherit}.field input:focus,.field select:focus,.textarea:focus{outline:none;border-color:var(--primary)}.textarea{resize:vertical;margin-bottom:12px}.status-pill{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#fef3c7;color:#92400e;margin:10px 0}.btn-primary{width:100%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;border-radius:13px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s;box-shadow:0 6px 16px -6px #4f46e58c}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px -6px #4f46e599}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-link{background:none;border:none;color:var(--primary);font-weight:700;font-size:13px;margin-top:14px;cursor:pointer}.btn-outline{display:flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--outline);color:var(--text);border-radius:11px;padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;transition:border-color .12s}.btn-outline:hover{border-color:var(--primary)}.dashboard{max-width:520px;margin:0 auto;padding:16px 16px 48px}.dash-header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 20px}.dash-header-left{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700}.dash-header-actions{display:flex;align-items:center;gap:8px}.icon-btn{background:var(--surface);border:1px solid var(--outline);border-radius:11px;padding:8px;cursor:pointer;color:var(--text);display:flex;box-shadow:var(--shadow-sm);transition:border-color .12s}.icon-btn:hover{border-color:var(--primary);color:var(--primary)}.banner{border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600;margin-bottom:14px}.banner-warn{background:#fef3c7;color:#92400e}.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.card-title{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14.5px;margin-bottom:10px;color:var(--text)}.card-title svg{color:var(--primary)}.code-card{display:flex;flex-direction:column;gap:12px;padding:20px;background:linear-gradient(145deg,var(--primary) 0%,var(--accent) 100%);border:none;color:#fff;box-shadow:0 12px 28px -10px #4f46e58c}.code-card>span{color:#ffffffd9!important;font-weight:600}.code-row{display:flex;align-items:center;gap:10px}.code{flex:1;text-align:center;font-size:24px;font-weight:900;letter-spacing:4px;background:#ffffff29;border:1.5px dashed rgba(255,255,255,.5);border-radius:12px;padding:13px 0;color:#fff}.code-card .btn-outline{background:#ffffff24;border-color:#fff6;color:#fff}.code-card .btn-outline:hover{border-color:#fff}.code-card .btn-primary{background:#fff;color:var(--primary);box-shadow:0 6px 16px -6px #00000059}.code-card .btn-primary:hover{background:#fff}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.tile{background:var(--surface);border:1px solid var(--outline);border-radius:15px;padding:15px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .12s}.tile-icon{color:var(--primary);background:var(--primary-light);border-radius:10px;padding:6px;width:30px;height:30px}.tile strong{font-size:16.5px;font-weight:800}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);border-color:var(--primary)}.customer-list{display:flex;flex-direction:column;gap:8px}.customer-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg);border-radius:13px;border:1px solid transparent;transition:border-color .12s}.customer-row:hover{border-color:var(--outline)}.customer-row-right{text-align:right}.menu-row{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg);border-radius:13px;border:1px solid transparent;transition:border-color .12s;cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit}.menu-row:hover{border-color:var(--outline)}.menu-row-icon{color:var(--primary);flex-shrink:0}.menu-row-label{flex:1;font-weight:700;font-size:14px}.menu-row-chevron{color:var(--muted);flex-shrink:0}.icon-btn-badge{position:relative}.icon-btn-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--red, #dc2626);border:1.5px solid var(--surface)}.notif-row{display:flex;gap:10px;padding:13px 14px;background:var(--bg);border-radius:13px;margin-bottom:8px;border-left:3px solid transparent}.notif-row.unread{border-left-color:var(--primary);background:var(--primary-light)}.notif-row-body{flex:1}.notif-row-title{font-weight:800;font-size:13.5px;margin-bottom:2px}.notif-row-text{font-size:12.5px;color:var(--text)}.empty-state{text-align:center;padding:22px 12px}.empty-state-icon{width:48px;height:48px;border-radius:14px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}.toggle-row{display:flex;gap:8px;margin-bottom:4px}.toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border-radius:11px;border:1.5px solid var(--outline);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .12s}.toggle-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;color:#fff}.status-pill-sm{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}.status-pill-sm.status-pending{background:#fef3c7;color:#92400e}.status-pill-sm.status-approved{background:#dbeafe;color:#1e40af}.status-pill-sm.status-rejected{background:#fee2e2;color:#991b1b}.status-pill-sm.status-paid{background:#dcfce7;color:#166534}.explainer-card{background:var(--surface);border-radius:22px;padding:30px 24px;max-width:420px;width:100%;box-shadow:var(--shadow-md);border:1px solid rgba(79,70,229,.06);text-align:center}.explainer-title{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.2px}.explainer-sub{margin:0 0 22px}.explainer-steps{display:flex;flex-direction:column;gap:16px;text-align:left;margin-bottom:24px}.explainer-step{display:flex;align-items:flex-start;gap:13px}.explainer-step-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center}.explainer-step strong{display:block;font-size:14px;margin-bottom:2px}.explainer-step p{margin:0;line-height:1.45}.install-icon{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px #4f46e580}.ios-install-steps{display:flex;flex-direction:column;gap:16px;text-align:left;margin-bottom:8px}.dashboard{padding-bottom:86px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;align-items:center;background:var(--surface);border-top:1px solid var(--outline);box-shadow:0 -4px 16px #1e1b2e0f;padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--muted);font-size:11px;font-weight:600;padding:6px 14px;border-radius:12px;cursor:pointer;transition:color .12s,background .12s}.bottom-nav-item.active{color:var(--primary);background:var(--primary-light)}.status-pill-sm.segment-never_ordered{background:#f1f5f9;color:#475569}.status-pill-sm.segment-first_order{background:#dbeafe;color:#1e40af}.status-pill-sm.segment-repeat{background:#dcfce7;color:#166534}.status-pill-sm.segment-inactive{background:#fee2e2;color:#991b1b}.segment-summary{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px}.segment-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--outline);border-radius:14px;padding:8px 14px;min-width:76px}.segment-chip strong{font-size:15px;font-weight:800}.segment-chip span{font-size:10.5px;color:var(--muted);font-weight:600;text-align:center}.segment-chip{cursor:pointer;transition:border-color .12s,background .12s}.segment-chip.active{border-color:var(--primary);background:var(--primary-light)}.segment-chip.active strong{color:var(--primary)}.referral-detail-row{font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
