:root{--ink:#29243e;--muted:#918ba5;--purple:#7958db;--purple-dark:#5d42bd;--pink:#ed79b8;--pale:#f8f6fc;--line:#eeeaf5;--shadow:0 24px 70px rgba(51,34,92,.13)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 13% 5%,#faf2fc 0,transparent 31%),radial-gradient(circle at 94% 38%,#eef0ff 0,transparent 35%),#f5f3f8;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.shell{max-width:1430px;margin:auto;padding:48px 38px 30px}
.page-header{padding:8px 6px 20px}
.brandline{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.04em;color:#66509d}
.brandstar{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;color:#fff;background:linear-gradient(140deg,#9d72fa,#e478bd);box-shadow:0 6px 13px #bc91ed66}
.brand-divider{display:inline-block;width:1px;height:13px;background:#c9bfdc}
.page-header h1{font-size:42px;letter-spacing:-.035em;line-height:1.17;margin:30px 0 10px}
.page-header p{font-size:15px;color:#8f89a2;margin:0}
.header-rule{height:1px;background:linear-gradient(90deg,#d9d2e9,transparent);margin-top:30px}
.section-title{display:flex;align-items:center;gap:16px;margin:30px 6px 22px}
.section-index{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#ebe3fb;color:#8e6edf;font-weight:800;letter-spacing:.03em}
.section-title h2{font-size:20px;margin:0 0 4px;letter-spacing:-.02em}
.section-title p{color:#a29aaf;font-size:13px;margin:0}
.second-section{margin-top:58px}
.phone-grid{display:grid;gap:24px}
.auth-grid{grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;column-gap:52px;row-gap:34px}
.core-grid{grid-template-columns:repeat(2,390px);gap:32px}
.mockup{min-width:0}
.mockup-label{height:35px;display:flex;justify-content:space-between;align-items:flex-start;padding:0 4px;color:#777087;font-size:13px}
.mockup-label b{color:#4f4862;font-weight:700}
.mockup-label span{font-size:11px;letter-spacing:.08em;color:#a79eb4}
.phone-stage{width:min(100%,390px);position:relative;margin:0 auto}
.phone{width:390px;height:844px;border:0;border-radius:40px;background:#fff;box-shadow:0 0 0 7px #302b3b,0 8px 0 7px #211e29,0 23px 42px #352b5360,0 50px 85px #79699f20;position:absolute;top:0;left:0;overflow:hidden;transform-origin:top left}
.phone:before{content:"";position:absolute;z-index:30;left:50%;top:8px;transform:translateX(-50%);width:104px;height:24px;border-radius:0 0 16px 16px;background:#302b3b}
.screen{position:absolute;inset:0;overflow:hidden;background:#fff}
.status{height:40px;padding:12px 25px 0;display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:8;font-size:12px;font-weight:700;letter-spacing:.015em;color:#2e2941}
.system-icons{font-size:10px;letter-spacing:1px}
.light-status{color:#fff}
.home-indicator{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);height:5px;width:118px;background:#fff;border-radius:4px;z-index:11}
.home-indicator.dark{background:#302a3c}
.welcome-screen{color:#fff;background:radial-gradient(circle at 95% 34%,#bc82fa 0,transparent 28%),radial-gradient(circle at 1% 39%,#b46def 0,transparent 37%),linear-gradient(157deg,#6550bc 0%,#8f5edf 50%,#ed87b9 100%)}
.welcome-glow{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,#8a55c914 63%,#472574aa 100%);pointer-events:none}
.welcome-top{position:relative;z-index:2;display:flex;gap:9px;align-items:center;margin:25px 0 0 30px;font-size:22px;font-weight:800;letter-spacing:.08em}
.logo-mark{font-size:20px;color:#ffe5a5}
.welcome-copy{position:relative;z-index:2;margin:55px 30px 0}
.eyebrow{font-size:9px;letter-spacing:.27em;font-weight:800}
.welcome-copy .eyebrow{color:#f3d5ff}
.welcome-copy h3{margin:13px 0 14px;font-size:36px;letter-spacing:-.045em;line-height:1.25;font-weight:800}
.welcome-copy p{font-size:14px;letter-spacing:.06em;color:#f4e5ff;margin:0}
.planet{position:absolute;z-index:2;width:111%;left:-5%;top:282px;filter:drop-shadow(0 36px 28px #4d23765e)}
.welcome-actions{position:absolute;z-index:4;bottom:55px;left:28px;right:28px}
.primary-btn{border:0;border-radius:16px;min-height:54px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(105deg,#9c70ee,#e77ebc);color:#fff;box-shadow:0 12px 25px #b77cd652;font-size:16px;font-weight:700;letter-spacing:.025em}
.primary-btn svg{width:16px;height:16px;stroke-width:2.2}
.welcome-actions .primary-btn{background:#fff;color:#6747bc;box-shadow:0 15px 27px #53258f39}
.ghost-btn{height:50px;border:1px solid #ffffff8c;background:#ffffff15;width:100%;border-radius:16px;color:#fff;font-size:15px;font-weight:700;margin-top:12px}
.agreement{display:flex;align-items:flex-start;gap:6px;margin-top:18px;color:#eee4fb;font-size:10px;line-height:1.55;justify-content:center}
.check{display:inline-grid;place-items:center;flex:none;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;font-size:9px}
.check.checked{background:#fff;color:#9161d2;border-color:#fff}
.agreement u,.auth-foot u{text-decoration:none;color:#fff}
.auth-screen{background:radial-gradient(circle at 92% 11%,#fbe3f3 0,transparent 23%),linear-gradient(180deg,#f7f3ff 0,#fff 46%);color:var(--ink)}
.back{position:absolute;top:48px;left:18px;z-index:4;width:40px;height:40px;border:0;border-radius:13px;background:#ffffffb8;display:grid;place-items:center;color:#746789}
.back svg{width:18px;height:18px}
.auth-orbit{position:absolute;right:34px;top:89px;width:72px;height:72px;border:1px solid #d8b9f5;border-radius:50%;transform:rotate(-24deg);color:#e8a2d2;text-align:center;line-height:17px;font-size:16px}
.auth-orbit:before{content:"";position:absolute;left:-8px;top:28px;width:87px;height:28px;border:1px solid #d4b3f8;border-radius:50%}
.auth-orbit span{display:block;transform:rotate(24deg);font-size:27px;color:#b386ef;padding-top:21px}
.auth-heading{position:relative;margin:98px 30px 0}
.auth-heading .eyebrow{color:#bd9add}
.auth-heading h3{font-size:26px;line-height:1.23;letter-spacing:-.04em;margin:10px 0 6px;font-weight:800}
.auth-heading p{font-size:12px;color:#a29aad;margin:0}
.segmented{height:44px;margin:26px 30px 0;background:#f4f0fa;border-radius:13px;display:flex;padding:4px;gap:3px}
.segmented button{flex:1;background:none;border:0;border-radius:10px;color:#9f97ad;font-weight:700;font-size:12px}
.segmented button.active{background:#fff;color:#7859d3;box-shadow:0 3px 9px #9187a119}
.auth-fields{margin:24px 30px 0}
.auth-fields label{display:block;font-size:11px;font-weight:700;color:#6e687f;margin:0 0 7px}
.input-row{height:48px;background:#f8f7fb;border:1px solid #eeebf5;border-radius:13px;display:flex;align-items:center;margin:0 0 16px;padding:0 14px;color:#4e485d}
.input-row:focus-within{border-color:#ae8de7;box-shadow:0 0 0 3px #ad8be71a}
.input-row input{width:100%;min-width:0;border:0;outline:none;background:transparent;color:#302b40;font-size:13px}
.input-row input::placeholder{color:#b8b3c1}
.prefix{font-size:14px;font-weight:700;padding-right:12px;margin-right:12px;border-right:1px solid #e3deea}
.code-btn{border:0;background:transparent;white-space:nowrap;color:#825ed6;font-size:11px;font-weight:700;padding:6px 0 6px 10px}
.input-eye{width:18px;height:18px;color:#b0aaba}
.auth-submit{margin-top:5px;min-height:50px;border-radius:14px;font-size:14px}
.form-links{display:flex;align-items:center;justify-content:space-between;margin-top:17px}
.form-links button{border:0;background:none;color:#8a66db;font-size:12px;padding:0;font-weight:700}
.form-links button+button{font-weight:500;color:#9b91ac}
.form-links span{color:#afa8ba;font-size:12px}
.form-links.centered{justify-content:center;gap:5px}
.auth-foot{position:absolute;bottom:64px;left:18px;right:18px;display:flex;justify-content:center;align-items:center;gap:6px;color:#aaa4b2;font-size:10px;white-space:nowrap}
.auth-foot .check.checked{background:#8663d8;color:#fff;border-color:#8663d8}
.auth-foot u{color:#8363d2}
.register-screen .auth-heading{margin-top:85px}
.register-decor{position:absolute;right:37px;top:83px;width:85px;height:75px;color:#d8b4f0;font-size:20px}
.register-decor span{position:absolute}
.register-decor span:nth-child(1){top:0;right:5px;font-size:37px;color:#c69bef}
.register-decor span:nth-child(2){top:47px;left:4px;color:#f0aacd}
.register-decor span:nth-child(3){top:52px;right:5px;font-size:11px;color:#e6a9d9}
.register-progress{display:flex;align-items:center;gap:5px;margin:18px 30px 0}
.register-progress i{height:5px;width:36px;border-radius:9px;background:#eadff6}
.register-progress i.active{width:53px;background:linear-gradient(90deg,#9b75ed,#e987c0)}
.register-progress span{color:#aaa1b2;font-size:11px;margin-left:8px}
.register-screen .auth-fields{margin-top:22px}
.register-screen .input-row{margin-bottom:12px}
.register-screen .auth-submit{margin-top:5px}
.app-screen{background:#faf9fc}
.app-scroll{position:absolute;top:40px;bottom:75px;width:100%;overflow-y:auto;scrollbar-width:none}
.app-scroll::-webkit-scrollbar{display:none}
.home-top{position:relative;padding:0 20px 12px;background:radial-gradient(circle at 85% 12%,#f9d4f0 0,transparent 41%),linear-gradient(180deg,#f9f3ff,#faf9fc)}
.home-header{height:60px;display:flex;justify-content:space-between;align-items:center}
.app-logo{font-size:24px;font-weight:850;letter-spacing:-.08em;color:#4b386a}
.app-logo span{color:#e782bc;font-size:22px;margin-right:4px}
.location{display:flex;align-items:center;gap:4px;border:0;background:#ffffffbe;color:#716580;border-radius:25px;padding:7px 10px;font-size:12px}
.location svg{width:14px;height:14px}
.location .down{width:11px;height:11px;transform:rotate(90deg)}
.home-nav{display:flex;align-items:center;justify-content:space-between;margin-top:3px;margin-bottom:22px}
.home-nav div{display:flex;align-items:center;gap:20px}
.home-nav div button{font-size:15px;border:0;background:transparent;color:#9e95ae;padding:8px 0;position:relative}
.home-nav div button.active{font-size:21px;font-weight:800;color:#2d2741}
.home-nav div button.active:after{content:"";position:absolute;width:15px;height:4px;border-radius:4px;background:#d37ece;bottom:0;left:2px}
.circle-icon{border:0;background:#fff;box-shadow:0 4px 12px #76649613;color:#685b7c;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.circle-icon svg{width:18px;height:18px}
.home-hero{height:178px;position:relative;overflow:hidden;border-radius:25px;background:linear-gradient(118deg,#6d53c3 0%,#9b68d9 48%,#e995c1 100%);padding:21px 22px;color:#fff;box-shadow:0 13px 22px #a576d23d}
.home-hero:before{content:"";position:absolute;width:220px;height:220px;border:1px solid #ffffff5c;border-radius:50%;right:-65px;top:-80px}
.home-hero:after{content:"";position:absolute;width:140px;height:140px;background:radial-gradient(circle,#ffddeb 0,#e29ede66 42%,transparent 70%);right:-12px;bottom:-37px}
.hero-kicker{position:relative;z-index:2;font-size:8px;letter-spacing:.2em;font-weight:800;color:#f5ddfc}
.home-hero h3{position:relative;z-index:2;font-size:21px;line-height:1.24;letter-spacing:-.025em;margin:8px 0 7px}
.home-hero p{position:relative;z-index:2;color:#f3e8fc;font-size:11px;margin:0}
.home-hero button{position:relative;z-index:2;border:0;background:#fff;color:#7354bf;border-radius:18px;height:27px;padding:0 12px;font-size:10px;font-weight:800;display:flex;align-items:center;gap:6px;margin-top:13px}
.home-hero button svg{width:11px;height:11px}
.hero-spark{position:absolute;right:44px;top:22px;color:#ffe8a4;font-size:68px;transform:rotate(10deg);text-shadow:0 0 18px #ffe3c6}
.hero-orbit{position:absolute;right:-23px;top:10px;width:170px;height:117px;border:2px solid #ffffff63;border-radius:50%;transform:rotate(-29deg)}
.home-section-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 13px}
.home-section-head h4{font-size:17px;letter-spacing:-.02em;margin:0 0 4px}
.home-section-head h4 span{color:#e79bc9}
.home-section-head p{color:#aaa1b3;font-size:11px;margin:0}
.home-section-head button{display:flex;align-items:center;gap:2px;border:0;background:transparent;color:#9e91b3;font-size:11px;padding:3px 0}
.home-section-head button svg{width:12px;height:12px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 20px 22px}
.profile-card{height:226px;position:relative;border-radius:18px;overflow:hidden;background:#d9cdd9;box-shadow:0 8px 20px #44375513;cursor:pointer}
.profile-card img{width:100%;height:100%;object-fit:cover}
.photo-shade{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#21172c9c)}
.online{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:4px;border-radius:20px;color:#fff;background:#1a203259;backdrop-filter:blur(7px);font-size:9px;font-weight:700;padding:4px 7px}
.online i{width:5px;height:5px;border-radius:50%;background:#66edbc;box-shadow:0 0 8px #60e9b0}
.profile-caption{position:absolute;left:12px;bottom:12px;color:#fff;display:grid;gap:4px}
.profile-caption b{font-size:15px}
.profile-caption b span{font-size:11px;font-weight:500;margin-left:3px}
.profile-caption small{font-size:10px;color:#f1e9f1}
.bottom-nav{position:absolute;z-index:7;bottom:0;left:0;right:0;height:75px;background:#fff;box-shadow:0 -3px 18px #2e1c5710;display:flex;justify-content:space-around;padding:9px 10px 17px}
.bottom-nav button{width:23%;border:0;background:none;color:#a7a0b2;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600}
.bottom-nav button svg{width:22px;height:22px}
.bottom-nav button.active{color:#805dd3}
.bottom-nav button.active svg{fill:#a889e12b;stroke-width:2.1}
.mine-screen{background:#f9f8fb}
.mine-top{padding:0 20px 23px;background:radial-gradient(circle at 85% 30%,#f6d6f1 0,transparent 45%),linear-gradient(180deg,#f5f0ff,#fbf8fd);border-radius:0 0 31px 31px}
.mine-title{height:59px;display:flex;justify-content:space-between;align-items:center}
.mine-title h3{font-size:24px;margin:0;font-weight:800}
.mine-profile{display:flex;align-items:center;gap:11px;margin-top:13px}
.mine-profile>img{width:63px;height:63px;border-radius:21px;object-fit:cover;border:3px solid white;box-shadow:0 7px 16px #8d7ab54c}
.mine-profile>div{flex:1;min-width:0}
.profile-hint{font-size:10px;color:#b291ca}
.mine-profile h4{margin:5px 0 4px;font-size:17px;letter-spacing:-.02em}
.mine-profile h4 span{display:inline-grid;place-items:center;background:#ffe1ee;color:#e271a9;border-radius:50%;font-size:10px;width:16px;height:16px;vertical-align:2px}
.mine-profile p{font-size:10px;color:#9e95ab;margin:0}
.mine-profile p span{color:#9774cf;margin-left:5px}
.mine-profile>button{border:0;background:none;color:#ad9dbd;padding:0}
.mine-profile>button svg{width:17px;height:17px}
.mine-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px}
.mine-stats button{border:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:4px;position:relative}
.mine-stats button:not(:last-child):after{content:"";position:absolute;right:0;top:9px;width:1px;height:23px;background:#e6dced}
.mine-stats b{font-size:17px;color:#403657}
.mine-stats span{font-size:10px;color:#aaa0b3}
.mine-body{padding:16px 20px 22px}
.balance-card{height:129px;border-radius:21px;overflow:hidden;background:linear-gradient(113deg,#6250af,#8f64d2 58%,#cf87d1);position:relative;color:#fff;padding:18px 20px;box-shadow:0 11px 21px #7e60bd3d}
.balance-card span{font-size:11px;display:flex;align-items:center;gap:3px;color:#e6ddf6}
.balance-card span svg{width:11px;height:11px}
.balance-card b{display:block;font-size:28px;margin:10px 0 3px;letter-spacing:-.02em}
.balance-card b small{font-size:11px;font-weight:500;margin-left:3px}
.balance-card p{font-size:10px;color:#e1d7f1;margin:0}
.balance-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,#edafe8,transparent 68%);right:-50px;top:-60px}
.wallet-mark{position:absolute;width:60px;height:60px;right:26px;bottom:26px;color:#ffffff67;stroke-width:1}
.mine-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:18px;margin-top:12px;box-shadow:0 8px 18px #2e24570b;padding:12px 5px}
.mine-shortcuts button{display:flex;align-items:center;flex-direction:column;gap:7px;border:0;background:transparent;color:#554b62;font-size:11px;font-weight:700}
.shortcut-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center}
.shortcut-icon svg{width:20px;height:20px}
.shortcut-icon.peach{background:#fff1e7;color:#ec9d68}
.shortcut-icon.lilac{background:#eee9ff;color:#9877dd}
.shortcut-icon.pink{background:#ffeaf5;color:#e682b5}
.mine-module{margin-top:21px}
.module-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px}
.module-head h4{font-size:16px;margin:0}
.module-head span{font-size:10px;color:#b1a9ba}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#fff;padding:16px 5px;border-radius:18px;box-shadow:0 8px 18px #2e24570b}
.service-grid button{border:0;background:none;display:flex;align-items:center;flex-direction:column;padding:0;min-width:0}
.service-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:14px;margin-bottom:9px}
.service-icon svg{width:19px;height:19px}
.service-icon.a{background:#efeaff;color:#8f70dd}
.service-icon.b{background:#ffe9f3;color:#e882b4}
.service-icon.c{background:#fff0e4;color:#eba46c}
.service-icon.d{background:#e8f7f2;color:#72baaa}
.service-grid b{font-size:10px;color:#554d62;white-space:nowrap}
.service-grid small{font-size:8px;color:#b1a9bb;white-space:nowrap;margin-top:4px}
.mine-list{background:#fff;border-radius:18px;margin-top:13px;padding:0 14px;box-shadow:0 8px 18px #2e24570b}
.mine-list button{width:100%;border:0;border-bottom:1px solid #f2eff6;background:none;height:49px;display:flex;justify-content:space-between;align-items:center;color:#5d5568}
.mine-list button:last-child{border-bottom:0}
.mine-list button span{display:flex;align-items:center;gap:11px;font-size:11px;font-weight:600}
.mine-list button span svg{color:#9d8abf;width:17px;height:17px}
.mine-list button>svg{width:14px;height:14px;color:#bcb3c9}
.switch-head{margin:22px 0 11px}
.mine-switches{background:#fff;border-radius:18px;padding:0 15px;box-shadow:0 8px 18px #2e24570b}
.mine-switches>div{height:49px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f2eff6;font-size:11px;color:#5d5568;font-weight:600}
.mine-switches>div:last-child{border-bottom:0}
.mine-switches i{display:block;width:32px;height:19px;border-radius:12px;position:relative}
.mine-switches i:after{content:"";position:absolute;width:15px;height:15px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #52476326}
.switch-on{background:#a77ee3}.switch-on:after{right:2px}
.switch-off{background:#d9d5df}.switch-off:after{left:2px}
.page-footer{display:flex;justify-content:space-between;color:#aba5b5;font-size:12px;margin-top:65px;padding-top:18px;border-top:1px solid #ddd7e7}
#toast{position:fixed;z-index:100;bottom:28px;left:50%;transform:translate(-50%,30px);padding:10px 16px;border-radius:20px;background:#332b4c;color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1250px){.core-grid{justify-content:center}}
@media(max-width:850px){.core-grid{grid-template-columns:minmax(0,390px)}}
@media(max-width:850px){.auth-grid{grid-template-columns:minmax(0,390px)}}
@media(max-width:500px){.shell{padding:22px 18px}.page-header h1{font-size:32px}.phone-grid{gap:28px}.section-title{margin-left:4px}.page-footer{padding-left:4px;padding-right:4px}}