:root{font-family:DM Sans,sans-serif;color:#19172a;background:#ddd9e8;font-synthesis:none;--violet:#6d4aff;--violet-dark:#4224c8;--coral:#ff6b4a;--ink:#19172a;--muted:#777387;--surface:#fff;--line:#eceaf2}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 10% 10%,#eee9ff,transparent 38%),radial-gradient(circle at 90% 90%,#ffe4dc,transparent 35%),#e7e4ed}button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{min-height:100vh;display:grid;place-items:center}.phone-frame{position:relative;width:100%;max-width:430px;min-height:100vh;background:#f8f8fb;overflow:hidden}.brand{display:flex;align-items:center;gap:9px;font:800 21px Manrope,sans-serif;letter-spacing:-1px}.brand>span>span{color:var(--coral)}.brand--light{color:#fff}.brand__logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 10px #2d16644d)}.brand__logo--compact{width:32px;height:32px}.splash{min-height:100vh;width:100%;max-width:430px;display:grid;place-content:center;justify-items:center;gap:28px;background:linear-gradient(145deg,#4c2cce,#7652ff 60%,#ff7452)}.spinner{width:26px;height:26px;border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-screen{background:#fff}.login-hero{position:relative;height:51vh;min-height:390px;padding:25px 27px 32px;color:#fff;background:linear-gradient(145deg,#3c20ac,#6843ec 55%,#7f5cff);border-radius:0 0 34px 34px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.login-hero:after{content:"";position:absolute;width:240px;height:240px;border:1px solid #ffffff18;border-radius:50%;right:-105px;top:-70px}.login-hero__glow{position:absolute;width:230px;height:230px;background:#ff7d5d42;filter:blur(34px);right:-70px;bottom:30px;border-radius:50%}.login-hero>div{position:relative;z-index:1}.hero-art{position:absolute!important;right:35px;top:90px;width:130px;height:130px}.hero-art__phone{position:absolute;inset:20px;display:grid;place-items:center;background:linear-gradient(145deg,#ff8b6e,#ff5d39);border-radius:28px;transform:rotate(9deg);box-shadow:0 20px 40px #25106870;border:1px solid #ffffff55}.hero-art__phone i{position:absolute;font-style:normal;right:-12px;top:-12px;background:#fff;color:#6b46f2;width:34px;height:34px;display:grid;place-items:center;border-radius:12px;transform:rotate(-9deg);box-shadow:0 8px 18px #28166955}.hero-art__orbit{position:absolute;border-radius:50%;background:#fff}.hero-art__orbit--one{width:7px;height:7px;left:0;top:15px}.hero-art__orbit--two{width:4px;height:4px;right:-3px;bottom:18px}.login-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.7px;color:#dcd4ff}.login-hero h1{font:800 32px/1.12 Manrope;letter-spacing:-1.4px;margin:8px 0 9px}.login-hero p{font-size:13px;line-height:1.55;color:#e8e3ff;margin:0;max-width:340px}.login-panel{padding:27px 27px 24px}.login-panel__title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.login-panel__title h2{font:800 21px Manrope;letter-spacing:-.6px;margin:0 0 4px}.login-panel__title p{margin:0;color:var(--muted);font-size:13px}.login-panel__title>span{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#f0edff;color:var(--violet)}.field-label{display:block;margin:15px 0 8px;font-size:12px;font-weight:700;color:#494657}.input-wrap{height:52px;border:1.5px solid #e7e4ed;border-radius:15px;display:flex;align-items:center;padding:0 15px;gap:11px;transition:.2s}.input-wrap:focus-within,.sheet-input:focus{border-color:var(--violet);box-shadow:0 0 0 4px #6d4aff12}.input-wrap input{border:0;outline:0;min-width:0;flex:1;font-size:15px}.input-wrap button{background:none;color:#888393;padding:5px}.country-code{font-weight:700;padding-right:11px;border-right:1px solid #ddd9e4}.primary-button{width:100%;height:53px;border-radius:16px;color:#fff;background:linear-gradient(100deg,var(--violet-dark),var(--violet));font-weight:700;display:flex;justify-content:center;align-items:center;gap:9px;margin-top:18px;box-shadow:0 12px 28px #6748e83d;transition:.2s}.primary-button:hover{transform:translateY(-1px)}.primary-button:disabled{opacity:.65}.forgot{display:block;margin:16px auto 0;background:none;color:var(--violet);font-size:13px;font-weight:700}.demo-hint{text-align:center;font-size:11px;color:#aaa5b4;margin:16px 0 0}.form-error{background:#fff0ee;color:#d4452a;padding:9px 12px;border-radius:10px;font-size:12px;margin:12px 0 0}.app-header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #f0eef4;position:sticky;top:0;z-index:5}.header-actions{display:flex;gap:7px}.header-actions button,.icon-button{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;background:#f5f4f8;color:#363243}.notification-dot{position:relative}.notification-dot:after{content:"";position:absolute;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:var(--coral);right:8px;top:7px}.dashboard-content{padding:20px 18px 100px;height:calc(100vh - 68px);overflow:auto}.welcome{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 17px}.welcome>div>span{font-size:12px;color:var(--muted)}.welcome h1{font:800 23px Manrope;letter-spacing:-.7px;margin:2px 0}.welcome h1 span{font-size:20px}.avatar{width:45px;height:45px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--coral),#ff9c65);font-weight:700;box-shadow:0 8px 20px #ff6b4a30}.balance-card{position:relative;padding:20px 19px 17px;border-radius:24px;background:linear-gradient(135deg,#2f1a85,#6542e6 65%,#7d58ff);color:#fff;overflow:hidden;box-shadow:0 15px 34px #5738c43d}.balance-card__orb{position:absolute;border-radius:50%;border:1px solid #ffffff14}.balance-card__orb--one{width:190px;height:190px;right:-70px;top:-85px}.balance-card__orb--two{width:100px;height:100px;right:20px;top:-40px;background:#ff7b5e1a}.balance-card__top{position:relative;display:flex;justify-content:space-between;align-items:start}.eyebrow{text-transform:uppercase;letter-spacing:1.2px;font-weight:700;font-size:10px;color:#a9a3b5}.balance-card .eyebrow{color:#c8bfff}.balance-card__amount{font:800 27px Manrope;letter-spacing:-1px;margin-top:4px}.icon-button--glass{color:#fff!important;background:#ffffff16!important}.points{margin-top:9px;font-size:12px;color:#e8e3ff}.points span{color:#ffb04f}.balance-actions{position:relative;margin-top:18px;padding-top:15px;border-top:1px solid #ffffff1f;display:grid;grid-template-columns:repeat(3,1fr)}.balance-actions button{background:none;color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:600}.balance-actions button+button{border-left:1px solid #ffffff1f}.balance-actions button span{display:grid;place-items:center}.content-section{margin-top:25px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:0 2px 14px}.section-heading h2{font:800 16px Manrope;letter-spacing:-.4px;margin:0}.section-heading button{background:none;color:var(--violet);font-size:11px;font-weight:700}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px 7px;background:#fff;padding:17px 8px;border-radius:22px;border:1px solid #f0eef4}.service{background:none;display:flex;align-items:center;flex-direction:column;gap:8px;color:#474354;font-size:10.5px}.service__icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;transition:.2s}.service:hover .service__icon{transform:translateY(-2px)}.pagination{display:flex;gap:4px}.pagination i{width:13px;height:4px;background:var(--violet);border-radius:4px}.pagination i+i{width:4px;background:#d8d4e0}.promo-list{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;margin-right:-18px;padding-right:18px}.promo{position:relative;overflow:hidden;flex:0 0 285px;min-height:127px;border-radius:20px;padding:18px;color:#fff;display:flex;justify-content:space-between}.promo--violet{background:linear-gradient(135deg,#7554ff,#4c2ec4)}.promo--coral{background:linear-gradient(135deg,#ff8264,#f24e55)}.promo__tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1px;background:#ffffff26;border:1px solid #ffffff2b;padding:5px 8px;border-radius:7px}.promo h3{font:800 16px Manrope;margin:10px 0 3px}.promo p{font-size:11px;color:#ffffffc9;margin:0}.promo button{align-self:flex-end;display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:#fff;color:var(--violet);z-index:2}.promo__shape{position:absolute;font:800 90px Manrope;opacity:.07;right:35px;top:5px}.transaction-list{background:#fff;border:1px solid #f0eef4;border-radius:20px;padding:2px 13px}.transaction{width:100%;display:flex;align-items:center;gap:11px;background:none;text-align:left;padding:14px 0}.transaction+.transaction{border-top:1px solid #f1eff5}.transaction__icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:13px;background:#f0edff;color:var(--violet)}.transaction__info{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.transaction strong{font-size:12px;color:#34303e}.transaction small{font-size:9.5px;color:#9994a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction__value{text-align:right;display:flex;flex-direction:column;gap:3px}.transaction__value small{color:#27a36f}.bottom-nav{position:absolute;z-index:6;bottom:0;left:0;right:0;height:77px;background:#fff;border-top:1px solid #ebe9ef;display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#aaa5b3;font-size:9.5px;font-weight:600}.bottom-nav button.active{color:var(--violet)}.bottom-nav button.active svg{filter:drop-shadow(0 4px 5px #6d4aff45)}.sheet-backdrop{position:absolute;inset:0;background:#201a3b75;z-index:10;display:flex;align-items:flex-end;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sheet{width:100%;background:#fff;border-radius:28px 28px 0 0;padding:9px 22px 26px;animation:slideup .25s ease}@keyframes slideup{0%{transform:translateY(100%)}}.sheet__handle{width:42px;height:4px;background:#dcd9e3;border-radius:5px;margin:0 auto 17px}.sheet header{display:flex;justify-content:space-between;align-items:center}.sheet h2{font:800 23px Manrope;margin:3px 0 0}.sheet-input{width:100%;height:50px;border:1.5px solid #e7e4ed;border-radius:14px;padding:0 14px;outline:none}.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.amount-grid button{height:43px;border-radius:12px;background:#f5f3f8;color:#4b4656;font-size:11px;font-weight:700;border:1.5px solid transparent}.amount-grid button.selected{color:var(--violet);background:#f0edff;border-color:#8067ef}.payment-row{display:flex;align-items:center;gap:8px;margin-top:17px;padding:14px;border-radius:14px;background:#f7f6fa;font-size:11px}.payment-row span{flex:1;color:var(--muted)}.success-state{text-align:center;padding:35px 0 45px;color:#35ae79}.success-state h3{font:800 24px Manrope;color:var(--ink);margin:12px 0 5px}.success-state p{color:var(--muted);margin:0;font-size:13px}.toast{position:absolute;z-index:20;left:50%;bottom:92px;transform:translate(-50%);color:#fff;background:#24202e;padding:11px 17px;border-radius:30px;box-shadow:0 8px 25px #0003;font-size:12px;white-space:nowrap}.subpage__head{margin:5px 2px 23px}.subpage__head h1{font:800 27px Manrope;margin:5px 0 3px}.subpage__head p{color:var(--muted);font-size:13px;margin:0}.menu-card,.profile-card{background:#fff;border:1px solid var(--line);border-radius:20px;margin-top:16px;padding:5px 14px}.menu-card button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;padding:15px 3px;color:var(--violet)}.menu-card button+button{border-top:1px solid var(--line)}.menu-card button>div{flex:1;display:flex;flex-direction:column;gap:3px}.menu-card strong{color:var(--ink);font-size:13px}.menu-card small{color:var(--muted);font-size:10px}.menu-card .danger,.menu-card .danger strong{color:#e45544}.profile-card{text-align:center;padding:25px}.avatar--large{width:67px;height:67px;border-radius:23px;margin:0 auto 12px;font-size:19px}.profile-card h2{font:800 18px Manrope;margin:0}.profile-card p{font-size:12px;color:var(--muted);margin:5px}.dashboard-loading{padding:30px 20px}.skeleton{background:linear-gradient(90deg,#eceaf0,#f8f7fa,#eceaf0);background-size:200%;animation:shimmer 1.2s infinite;border-radius:18px;margin-bottom:20px}@keyframes shimmer{to{background-position:-200%}}.skeleton--head{height:55px}.skeleton--card{height:190px}.skeleton--grid{height:200px}@media(min-width:600px){.phone-frame,.splash{min-height:min(900px,calc(100vh - 32px));height:min(900px,calc(100vh - 32px));border-radius:34px;box-shadow:0 25px 80px #30284b33}.login-hero{height:48%}.dashboard-content{height:calc(100% - 68px)}.sheet-backdrop{border-radius:34px}}@media(max-height:740px){.login-hero{min-height:340px;height:46vh}.hero-art{top:75px;transform:scale(.85)}.login-panel{padding-top:20px}.login-panel__title{margin-bottom:13px}.input-wrap{height:47px}.field-label{margin-top:11px}}.bottom-nav{position:fixed;left:50%;right:auto;width:100%;max-width:430px;height:calc(72px + env(safe-area-inset-bottom));padding:6px 12px env(safe-area-inset-bottom);grid-template-columns:repeat(3,1fr);transform:translate(-50%);box-shadow:0 -10px 30px #34276412}.bottom-nav button{border-radius:16px}.bottom-nav button.active{background:#f4f1ff}.dashboard-content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.app-shell{width:100%;min-height:100dvh;padding:20px}.phone-frame,.splash{width:min(390px,calc(100vw - 32px));min-height:0;height:min(844px,calc(100dvh - 40px));margin-inline:auto;border-radius:32px;box-shadow:0 24px 70px #251b4938}.login-screen{overflow-y:auto}.dashboard-screen{overflow:hidden}.dashboard-content{height:calc(100% - 68px)}@media(min-width:600px){.bottom-nav{position:absolute;left:0;transform:none}}@media(max-width:599px){.app-shell{padding:0}.phone-frame,.splash{width:100%;height:100dvh;min-height:100dvh;border-radius:0;box-shadow:none}}