:root{--bg-app:#0b0f14;--bg-surface:#121821;--bg-elevated:#161d28;--text-primary:#fff;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent:#25d366;--accent-strong:#0f8;--accent-soft:rgba(37,211,102,.15);--error:#ff4d4f;--warning:#fbbf24;--border-subtle:hsla(0,0%,100%,.08);--radius-md:14px;--shadow-soft:0 25px 60px rgba(0,0,0,.5);--shadow-focus:0 0 0 6px rgba(37,211,102,.12)}html[data-theme=business]{--bg-app:#0a0d12;--bg-surface:#0f141c;--bg-elevated:#141b26;--text-primary:#f5f7fa;--text-secondary:#c1c7d0;--text-muted:#8b95a7;--accent:#3b82f6;--accent-strong:#22d3ee;--accent-soft:rgba(59,130,246,.15);--shadow-soft:0 30px 80px rgba(0,0,0,.65);--shadow-focus:0 0 0 6px rgba(59,130,246,.18)}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont;background:radial-gradient(1200px 600px at top,var(--bg-elevated),var(--bg-app));color:var(--text-primary)}.screen{flex-direction:column;align-items:center;justify-content:center}.center{text-align:center}.card,.login-card{width:100%;max-width:380px;background:linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,.01)),var(--bg-surface);border-radius:var(--radius-lg);padding:28px 24px 32px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center}.login-title,h2{margin:6px 0 4px;font-size:20px;font-weight:600;letter-spacing:-.01em}.desc,.login-subtitle{font-size:13px;color:var(--text-secondary);text-align:center}.input{width:100%;max-width:320px;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-app);color:var(--text-primary);font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input::placeholder{color:var(--text-muted)}.primary-btn{padding:14px;border-radius:var(--radius-sm);color:#062e14;font-weight:600;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.primary-btn:hover{box-shadow:0 12px 30px var(--accent-soft)}.link-btn{color:var(--accent)}.keypad{margin:18px 0}.keypad button,.keypad-btn{height:54px;border-radius:var(--radius-md);border:none;background:var(--bg-elevated);color:var(--text-primary);font-size:18px;font-weight:500;transition:all .12s var(--ease)}.keypad button:active,.keypad-btn:active{transform:scale(.96);background:var(--accent);color:#062e14}.keypad.disabled{opacity:.4;pointer-events:none}.pin-dots{gap:14px;margin-bottom:12px}.pin-dots .dot{width:14px;height:14px;border-radius:50%;background:var(--bg-elevated)}.pin-dots .dot.filled{background:var(--accent)}.error{color:var(--error);font-size:13px;text-align:center}.streak-badge{display:inline-block;background:var(--accent-soft);padding:6px 12px;border-radius:var(--radius-md);font-weight:500}.prime-hint,.streak-badge{color:var(--accent);font-size:13px}.prime-hint{margin-top:10px}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.shake{animation:shake .3s ease-in-out}.landing-bg{min-height:100vh;background:radial-gradient(1200px 600px at 50% -200px,rgba(109,40,217,.12),transparent 60%),linear-gradient(180deg,#fff,#f8fafc 60%,#eef2ff);color:#0f172a}.landing-bg .card{background:hsla(0,0%,100%,.9);border:1px solid rgba(15,23,42,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(15,23,42,.08),inset 0 1px 0 hsla(0,0%,100%,.6)}.home-title{font-size:2.4rem;font-weight:800;letter-spacing:-.02em}.home-subtitle{color:#475569;font-size:1rem}[data-theme=light] .landing-bg{min-height:100vh;background:radial-gradient(1200px 600px at 50% -200px,rgba(109,40,217,.12),transparent 60%),linear-gradient(180deg,#fff,#f8fafc 60%,#eef2ff);color:#0f172a}[data-theme=light] .landing-bg .card{background:hsla(0,0%,100%,.95);border:1px solid rgba(15,23,42,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(15,23,42,.08),inset 0 1px 0 hsla(0,0%,100%,.6)}[data-theme=light] .home-title{color:#020617}[data-theme=light] .home-subtitle{color:#475569}[data-theme=light] .footer{color:#64748b}:root{--bg-app:#0a0e14;--bg-surface:#121826;--bg-elevated:#1a2233;--bg-glass:hsla(0,0%,100%,.06);--text-primary:#f9fafb;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--accent:#22c55e;--accent-strong:#4ade80;--error:#fb7185;--warning:#facc15;--border-subtle:hsla(0,0%,100%,.18);--radius-lg:26px;--radius-md:16px;--radius-sm:12px;--shadow-soft:0 30px 80px rgba(0,0,0,.65);--shadow-focus:0 0 0 6px rgba(34,197,94,.25);--ease:cubic-bezier(0.22,1,0.36,1)}*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(1200px 600px at top,var(--bg-elevated),var(--bg-app));color:var(--text-primary)}.screen{min-height:100vh;padding:24px;display:flex}.center{justify-content:center;align-items:center}.footer{margin-top:24px;font-size:12px;color:var(--text-muted);text-align:center}.card{width:100%;max-width:380px;background:linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.02)),var(--bg-surface);border-radius:var(--radius-lg);padding:32px 26px;display:flex;flex-direction:column;align-items:center;gap:18px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-soft)}.home-title,h1{margin:0;font-size:28px;font-weight:700;text-align:center}h2{font-size:20px;font-weight:600;text-align:center}.desc,.home-subtitle{font-size:15px;text-align:center;color:var(--text-secondary)}.control{width:100%;height:52px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-glass);color:var(--text-primary);font-size:15px;padding:0 16px}.control-lg{height:56px;font-size:16px}.control::placeholder{color:var(--text-muted)}.control:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}.primary-btn{width:100%;max-width:320px;height:54px;border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#052e16;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 14px 36px rgba(34,197,94,.55);transition:all .16s var(--ease)}.primary-btn:hover{transform:translateY(-1px)}.link-btn{background:none;border:none;color:var(--accent-strong);font-size:14px;font-weight:600;cursor:pointer}.field{position:relative;width:100%}.phone-field{display:flex;align-items:center;height:54px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-glass);overflow:hidden;transition:all .18s var(--ease)}.phone-field:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus)}.country-select{background:hsla(0,0%,100%,.08);color:var(--text-secondary);font-size:14px;padding:0 12px;cursor:pointer}.country-select,.phone-input{height:100%;border:none;outline:none}.phone-input{flex:1 1;background:transparent;color:var(--text-primary);font-size:16px;padding:0 14px}.field label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text-muted);pointer-events:none;background:var(--bg-surface);padding:0 6px;transition:all .15s var(--ease)}.field.filled label,.phone-input:focus+label{top:-8px;font-size:12px;color:var(--accent)}.otp-row{display:flex;justify-content:center;gap:8px;width:100%;overflow:hidden}.otp-box{width:40px;height:52px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-glass);color:var(--text-primary);font-size:18px;font-weight:600;text-align:center;flex-shrink:0;transition:all .16s var(--ease)}.otp-box:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}.resend-wrap{margin-top:8px;text-align:center}.resend-timer{font-size:13px;color:var(--text-muted)}.resend-btn{background:transparent;border:1px dashed var(--border-subtle);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}.resend-btn:hover{border-color:var(--accent);background:rgba(34,197,94,.08)}.success-wrap{flex-direction:column;gap:14px;text-align:center;animation:fade-up .5s ease-out both}.success-badge,.success-wrap{display:flex;align-items:center}.success-badge{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-strong));justify-content:center;box-shadow:0 18px 40px rgba(34,197,94,.5)}.success-badge .check{font-size:32px;font-weight:800;color:#052e16}.success-text{font-size:14px;color:var(--text-secondary)}.profile-nudge{width:100%;max-width:360px;padding:16px 18px;border-radius:var(--radius-md);background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.02));border:1px dashed var(--border-subtle);box-shadow:0 12px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}.nudge-title{margin:0;font-size:15px;font-weight:600}.nudge-message{margin:0;font-size:13px;line-height:1.5;color:var(--text-secondary)}.nudge-actions{display:flex;gap:12px}.nudge-primary{padding:6px 14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#052e16;font-weight:600}.nudge-primary,.nudge-secondary{border:none;font-size:13px;cursor:pointer}.nudge-secondary{background:none;color:var(--text-muted)}.animate-card{animation:card-pop .8s var(--ease) both}.animate-fade-up{opacity:0;transform:translateY(16px);animation:fade-up .7s ease-out forwards}@keyframes card-pop{0%{opacity:0;transform:scale(.96) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fade-up{to{opacity:1;transform:translateY(0)}}.primary-btn{position:relative;isolation:isolate}.primary-btn:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,hsla(0,0%,100%,.35),hsla(0,0%,100%,0));opacity:0;transition:opacity .18s var(--ease);pointer-events:none}.primary-btn:hover:after{opacity:1}.primary-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}.secondary-btn{width:100%;max-width:320px;height:48px;border-radius:999px;border:1px solid var(--border-subtle);background:hsla(0,0%,100%,.04);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .16s var(--ease)}.secondary-btn:hover{border-color:var(--accent);background:rgba(34,197,94,.08)}.link-btn{position:relative;padding:6px 4px}.link-btn:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}.link-btn:hover:after{transform:scaleX(1)}.link-muted{background:none;border:none;font-size:14px;color:var(--text-muted);cursor:pointer;transition:color .15s var(--ease)}.link-muted:hover{color:var(--text-secondary)}.cta-group{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;align-items:stretch}.footer a{color:var(--text-muted);text-decoration:none;font-weight:500}.footer a:hover{color:var(--accent)}@media (max-width:420px){.otp-row{gap:6px}.otp-box{width:36px;height:48px;font-size:16px}}.role-card{position:relative;width:100%;padding:22px;border-radius:22px;background:linear-gradient(180deg,hsla(0,0%,100%,.14),hsla(0,0%,100%,.04));overflow:hidden;transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}.role-card:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 hsla(0,0%,100%,.35)}.role-card:active{transform:scale(.985)}.role-card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,hsla(0,0%,100%,.25),transparent 65%);opacity:0;transform:translateX(-100%);transition:all .42s var(--ease);pointer-events:none}.role-card:hover:after{opacity:1;transform:translateX(100%)}.role-icon-wrap{flex-shrink:0}.role-icon{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(135deg,hsla(0,0%,100%,.35),hsla(0,0%,100%,.08));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.6),0 14px 36px rgba(0,0,0,.45)}.role-icon.customer{color:var(--accent)}.role-icon.shop{color:var(--accent-strong)}.role-content h3{margin:6px 0 0;font-size:18px;font-weight:700}.role-content p{margin:8px 0 12px}.role-content span{color:var(--text-muted)!important}.role-action span{font-size:18px;transition:transform .18s var(--ease)}.role-card:hover .role-action span{transform:translateX(4px)}.login-screen{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:hidden}.login-card{width:100%;max-width:380px;margin:0 auto}.pin-slot{width:44px;height:56px;border-radius:14px;background:var(--bg-glass);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--accent);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04)}.pin-slot.filled:after{content:"●"}.keypad-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:999}.keypad{width:100%;max-width:360px;padding:20px;background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.02));border-radius:24px 24px 0 0;box-shadow:0 -20px 40px rgba(0,0,0,.6)}.keypad button{height:54px;border-radius:14px;border:1px solid var(--border-subtle)}.keypad button:active{background:rgba(34,197,94,.2)}.keypad .action{color:var(--accent)}.pin-dots{display:flex;gap:12px;margin:12px 0 18px}.dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border-subtle);background:transparent}.dot.filled{background:var(--accent);border-color:var(--accent)}.keypad{margin:14px 0 20px}.keypad button{background:hsla(0,0%,100%,.06);font-size:18px;transition:all .14s var(--ease)}.keypad button:hover{background:rgba(34,197,94,.15)}.role-options{display:flex;flex-direction:column;gap:16px;width:100%}.role-card{display:grid;grid-template-columns:56px 1fr;grid-gap:16px;gap:16px;padding:20px;border-radius:18px;border:1px solid var(--border-subtle);background:linear-gradient(180deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.02));text-align:left;cursor:pointer;transition:all .22s var(--ease)}.role-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 18px 42px rgba(0,0,0,.45)}.role-icon-wrap{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.08)}.role-icon-wrap.customer{background:rgba(34,197,94,.18)}.role-icon-wrap.shop{background:rgba(74,222,128,.18)}.role-icon{font-size:26px;line-height:1}.role-content{display:flex;flex-direction:column;gap:8px}.role-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-muted)}.role-content h3{margin:0;font-size:17px;font-weight:600;color:var(--text-primary)}.role-content p{margin:0;font-size:14px;line-height:1.6;color:var(--text-secondary)}.role-action{margin-top:4px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--accent)}.role-action .arrow{font-size:18px;transition:transform .16s var(--ease)}.role-card:hover .arrow{transform:translateX(3px)}.pin-display{display:flex;justify-content:center;gap:10px;margin:16px 0 8px}.pin-slot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border-subtle);background:transparent;transition:all .18s var(--ease)}.pin-slot.filled{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:transparent;box-shadow:0 0 0 4px rgba(34,197,94,.25)}.keypad-sheet{position:fixed;left:0;right:0;bottom:0;z-index:30}.keypad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}.keypad button{height:56px;border-radius:16px;border:none;background:hsla(0,0%,100%,.08);color:var(--text-primary);font-size:20px;font-weight:600;cursor:pointer;transition:all .16s var(--ease)}.keypad button:hover{background:hsla(0,0%,100%,.14)}.keypad button:active{transform:scale(.96)}.keypad .action{font-size:16px;color:var(--text-muted)}.keypad-wrapper{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:420px;z-index:30}.keypad-sheet{width:100%;padding:20px 18px 28px;background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.02)),var(--bg-surface);border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 -20px 60px rgba(0,0,0,.6)}.pin-card{position:relative;z-index:10}.keypad-backdrop{position:fixed;inset:0;background:rgba(10,14,20,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20}.hero-card{background:radial-gradient(600px 200px at top,rgba(34,197,94,.18),transparent 60%),linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,.03)),var(--bg-surface);border-radius:var(--radius-lg);padding:36px 28px;text-align:center;border:1px solid rgba(34,197,94,.35);box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 0 1px rgba(34,197,94,.25);animation:hero-glow 6s ease-in-out infinite}.hero-value{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--accent-strong)}.hero-sub{font-size:13px;color:var(--text-secondary);margin-top:6px}@keyframes hero-glow{0%,to{box-shadow:0 40px 90px rgba(0,0,0,.75),0 0 0 1px rgba(34,197,94,.25)}50%{box-shadow:0 50px 110px rgba(0,0,0,.85),0 0 0 2px rgba(34,197,94,.45)}}.chart-frame{width:100%;padding:14px;border-radius:18px;background:linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.02));border:1px solid hsla(0,0%,100%,.16);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.25),inset 0 -1px 0 rgba(0,0,0,.35)}.chart-frame img{width:100%;border-radius:14px}.card.primary{border-color:rgba(34,197,94,.45)}.card.secondary{opacity:.9}.metric-row{display:flex;justify-content:space-between;width:100%;font-size:13px;color:var(--text-secondary)}.metric-row strong{color:var(--text-primary);font-weight:600}.data-live:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,hsla(0,0%,100%,.12),transparent 60%);opacity:0;animation:data-shimmer 5s infinite}@keyframes data-shimmer{0%{opacity:0;transform:translateX(-100%)}40%{opacity:.6}60%{opacity:.6}to{opacity:0;transform:translateX(100%)}}.dashboard-toggles{display:flex;gap:16px;align-items:center;justify-content:flex-end}.toggle-group{display:flex;align-items:center;gap:10px}.toggle-label{font-size:13px;color:var(--text-muted);font-weight:600}.pill-toggle{display:flex;background:hsla(0,0%,100%,.06);border:1px solid var(--border-subtle);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.04)}.pill-toggle button{padding:6px 14px;border-radius:999px;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:all .16s var(--ease)}.pill-toggle button.active{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#052e16;box-shadow:0 8px 20px rgba(34,197,94,.45)}.icon-toggle{display:flex;background:hsla(0,0%,100%,.06);border:1px solid var(--border-subtle);border-radius:999px;padding:4px}.icon-toggle button{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--text-secondary);font-size:16px;cursor:pointer;transition:all .16s var(--ease)}.icon-toggle button.active{background:hsla(0,0%,100%,.18);color:var(--text-primary);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.25)}.dashboard-card{width:100%;background:linear-gradient(180deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.01)),var(--bg-surface);border-radius:18px;padding:16px;border:1px solid var(--border-subtle);display:flex;flex-direction:column;align-items:flex-start;gap:8px;box-shadow:0 12px 28px rgba(0,0,0,.45)}.dashboard-card h3{margin:0;font-size:14px;font-weight:600}.dashboard-card p{margin:0;font-size:12px;color:var(--text-muted)}[data-role=customer]{--accent:#22c55e;--accent-strong:#4ade80}[data-role=shop]{--accent:#2563eb;--accent-strong:#60a5fa}[data-theme=light]{--bg-app:#f8fafc;--bg-surface:#fff;--bg-elevated:#f1f5f9;--bg-glass:rgba(0,0,0,.04);--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border-subtle:rgba(0,0,0,.12);--shadow-soft:0 20px 40px rgba(0,0,0,.08);--shadow-focus:0 0 0 5px rgba(37,99,235,.25)}