:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--bg:#19142a;--surface:#281f3d;--ink:#f8f6ff;--muted:#aaa4be;--line:#433557;--accent:#7555f6;--soft:#35294f;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.55;cursor:default}a{color:#b9a4ff;text-decoration:none}[hidden]{display:none!important}
.icons{position:absolute;width:0;height:0;overflow:hidden}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.initial-loading{padding:4px 3px;color:var(--muted);font-size:14px}body:not(.app-ready) .tab-bar{visibility:hidden}
.app-shell{max-width:520px;min-height:100dvh;margin:auto;background:linear-gradient(180deg,#201934,#19142a 80%);box-shadow:0 0 45px #08051344}main{padding:29px 18px calc(100px + env(safe-area-inset-bottom));min-height:100dvh}
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:0 3px 24px}.page-heading h1{font-size:30px;line-height:1.12;letter-spacing:-1.25px;margin:0;font-weight:800}.page-heading p{font-size:14px;color:var(--muted);margin:7px 0 0}.page-heading img{width:37px;height:37px;object-fit:contain;flex:none}
.access-card{height:268px;border-radius:25px;background:linear-gradient(135deg,#4b3180,#3b2a69 55%,#2e224e);border:1px solid #7455ad88;box-shadow:0 15px 30px #0d08254d;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:22px;color:#fff}.access-card:before{content:"";position:absolute;right:-77px;top:-85px;width:235px;height:235px;border:1px solid #b39cff2d;border-radius:50%;box-shadow:0 0 0 35px #b09cff0d,0 0 0 70px #b09cff07}.access-card .watermark{position:absolute;right:-40px;bottom:-31px;width:195px;height:195px;object-fit:contain;opacity:.11;filter:brightness(2)}.access-card>*:not(.watermark){position:relative;z-index:1}.access-top,.access-foot{display:flex;justify-content:space-between;align-items:center}.access-top{color:#d6c9f3;font-size:11px;letter-spacing:.1em;font-weight:800}.access-badge{border:1px solid #c8b7ff72;border-radius:30px;padding:7px 10px;color:#fff;font-size:10px}.access-card strong{display:block;margin:auto 0 0;font-size:37px;line-height:1.03;letter-spacing:-1.9px}.access-card p{font-size:14px;color:#d0c3ed;margin:12px 0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.access-foot{border-top:1px solid #ffffff35;padding-top:14px;font-size:11px;color:#e3d9f6;gap:8px}.access-foot span:last-child{text-align:right}.status-dot{display:inline-block;width:7px;height:7px;background:#b8a5ec;border-radius:50%;margin-right:7px}.status-dot.on{background:#6fe4bb}
.primary{border:0;width:100%;min-height:53px;border-radius:13px;color:#fff;background:linear-gradient(110deg,#7351fa,#7952fb);box-shadow:0 8px 18px #7351fa26;font-weight:750;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}.primary svg{width:17px;height:17px}.access-card+.primary{margin-top:18px}.action-note,.quiet{font-size:12px;line-height:1.45;color:var(--muted)}.action-note{text-align:center;margin:12px 8px 0}.quiet{margin:15px 0 0}.section-caption{color:#aa99cc;font-size:11px;font-weight:800;letter-spacing:.09em;margin:28px 4px 12px}.section-caption.first{margin-top:5px}
.card{background:var(--surface);border-radius:20px;border:1px solid #493a6159;padding:18px;margin-bottom:12px}.card h2{font-size:17px;letter-spacing:-.3px;margin:0 0 6px}.card p{font-size:13px;line-height:1.45;color:var(--muted);margin:7px 0 0}.card h2:not(:first-child){margin-top:22px}.plan-row,.quick-row,.referral-card{display:flex;align-items:center;justify-content:space-between;gap:10px}.plan-row h2,.quick-row h2,.referral-card h2{font-size:16px}.plan-row strong{font-size:22px;display:block;margin-top:7px}.plan-row strong small{font-size:12px;color:var(--muted);font-weight:500}.plan-row p,.quick-row p,.referral-card p{font-size:11px;margin:4px 0 0}.small-button{border:1px solid #9277e9;border-radius:11px;background:#4a3775;color:#f5f0ff;font-size:13px;font-weight:700;padding:11px 13px;white-space:nowrap}.link-button,.text-link{border:0;background:none;color:#bda9ff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:2px}.link-button svg,.text-link svg{width:16px;height:16px}.text-link{padding:12px 3px}
.platforms{display:flex;gap:3px;background:#2d2343;padding:4px;border-radius:14px}.platforms button{flex:1;border:0;border-radius:11px;background:none;color:#b0a6c3;padding:11px 3px;font-size:12px;font-weight:650}.platforms button.selected{background:#534078;color:#fff;box-shadow:0 2px 7px #110b2255}.install-card{margin-top:17px}.app-row{display:flex;align-items:center;gap:13px}.app-row img{height:47px;width:47px;object-fit:cover;border-radius:12px}.app-row h2{margin:0}.app-row p{font-size:11px;margin:3px 0 0}.store-list{border:1px solid #635178;border-radius:12px;overflow:hidden;margin-top:16px}.store-list a{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;background:#3a2d54;font-size:13px;font-weight:650;color:#d5c6ff}.store-list a+a{border-top:1px solid #65527e}.store-list svg{height:17px;width:17px}.install-card+.section-caption{margin-top:25px}.card .primary{margin-top:17px}
.profile-card{background:linear-gradient(130deg,#3a2b66,#2b2343);min-height:130px}.profile-card h2{font-size:21px}.status-pill{display:inline-block;color:#e2d5ff;background:#594581;padding:7px 10px;border-radius:30px;font-size:11px;font-weight:700;margin:6px 0 8px}.profile-card p{font-size:12px}.devices-card{margin-top:15px}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.card-header h2{margin:0}.card-header strong{font-size:16px;color:#cab8ff}.device-row{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);padding:14px 0}.device-icon{height:37px;width:37px;display:grid;place-items:center;flex:none;color:#bda7ff;background:#443364;border-radius:11px}.device-icon svg{width:23px;height:23px}.device-text{min-width:0;flex:1}.device-text strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-text small{display:block;color:var(--muted);font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-button{background:none;border:0;color:#c9b7f7;font-size:12px;padding:8px 0 8px 7px}.devices-card .quiet{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-size:11px}.referral-card{background:linear-gradient(130deg,#382964,#2c2346)}.settings{padding:3px 16px}.settings button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);min-height:57px;padding:10px 0;font-size:13px}.settings button:last-child{border-bottom:0}.settings button>svg:first-child{color:#b79eff}.settings button>svg:last-child{margin-left:auto;width:18px;height:18px;color:#aa9ac4}.switch{margin-left:auto;width:38px;height:23px;background:#675775;border-radius:30px;position:relative}.switch:before{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;background:#fff;border-radius:50%}.switch.on{background:var(--accent)}.switch.on:before{transform:translateX(15px)}.outline-button{width:100%;min-height:47px;border:1px solid #9378dc;color:#cbbaff;background:transparent;border-radius:12px;font-weight:700}
.tab-bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);height:calc(74px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);padding:5px 8px env(safe-area-inset-bottom);background:#241b37ef;backdrop-filter:blur(18px);border-top:1px solid #433454;z-index:7}.tab-bar button{border:0;background:none;color:#978da9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px}.tab-bar button.active{color:#ae92ff;font-weight:700}.tab-bar button svg{width:23px;height:23px;stroke-width:1.7}.tab-bar button.active svg{stroke-width:2.1}
.platforms button,.small-button,.link-button,.primary,.method,.settings button,.device-row,.card{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.primary:active,.small-button:active{transform:scale(.97)}
.tab-bar button svg{transition:transform .18s ease,stroke-width .18s ease}.tab-bar button:active svg{transform:scale(.88)}
.link-button:active,.outline-button:active,.method:active,.sheet-close:active{transform:scale(.985)}
.primary{position:relative;overflow:hidden}.primary.shine-once:after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:32%;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:translateX(-350%) skewX(-23deg);animation:button-shine .9s cubic-bezier(.2,.7,.2,1) 1.1s both}
@keyframes button-shine{0%{opacity:0;transform:translateX(-350%) skewX(-23deg)}18%{opacity:.65}76%{opacity:.5}100%{opacity:0;transform:translateX(500%) skewX(-23deg)}}
.access-card:before{animation:access-ring-drift 19s ease-in-out infinite}
.access-card .watermark{animation:access-mark-drift 17s ease-in-out infinite}
@keyframes access-ring-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-13px,9px,0) scale(1.035)}}
@keyframes access-mark-drift{0%,100%{transform:translate3d(0,0,0) rotate(0);opacity:.11}50%{transform:translate3d(-10px,-7px,0) rotate(-3deg);opacity:.15}}
.block-enter{animation:block-in-left .44s cubic-bezier(.22,1,.36,1) both}
.block-enter:nth-child(even){animation-name:block-in-right}
@keyframes block-in-left{from{opacity:0;transform:translate3d(-14px,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes block-in-right{from{opacity:0;transform:translate3d(14px,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.modal:not([hidden]){animation:modal-in .2s ease-out both}
.modal:not([hidden]) .sheet{animation:sheet-in .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes modal-in{from{opacity:0}}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:reduce){.access-card:before,.access-card .watermark{animation:none!important}}
.modal{position:fixed;inset:0;background:#0b0817bd;z-index:10;display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(100%,520px);background:#2d2342;border-radius:25px 25px 0 0;padding:17px 19px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -16px 38px #0008}.sheet-handle{display:block;width:37px;height:4px;border-radius:8px;background:#766589;margin:0 auto 18px}.sheet h2{font-size:23px;margin:0;letter-spacing:-.5px}.sheet>p{color:var(--muted);font-size:12px;line-height:1.4;margin:7px 0 17px}.amount{display:flex;align-items:center;justify-content:space-between;background:#3b2d58;border:1px solid #604b80;border-radius:15px;padding:17px}.amount b{font-size:13px}.amount strong{font-size:22px}.sheet .section-caption{margin:20px 2px 11px}.method{display:block;width:100%;min-height:47px;text-align:left;border:1px solid #615079;border-radius:12px;background:#372a4f;color:#eee8f7;margin-bottom:9px;padding:11px 15px;font-size:13px}.method.selected{background:#493668;border-color:#a98ef2}.method.selected:before{content:"●";color:#bba7ff;margin-right:10px}.method:not(.selected):before{content:"○";color:#9e90ad;margin-right:10px}.sheet .primary{margin-top:13px}.sheet .quiet{text-align:center;font-size:11px;margin:10px 0 0}.sheet-close{border:0;background:none;color:#c7b5e1;display:block;margin:9px auto 0;padding:10px}
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:20;width:max-content;max-width:min(90vw,450px);background:#4a3170;color:white;border-radius:12px;padding:12px 16px;text-align:center;font-size:13px;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
body:not(.dark){--bg:#faf9ff;--surface:#fff;--ink:#1c1438;--muted:#85819a;--line:#e9e5f2;--soft:#f2eeff;background:var(--bg)}body:not(.dark) .app-shell{background:linear-gradient(180deg,#f8f6ff,#fff 60%,#faf9ff)}body:not(.dark) .tab-bar{background:#ffffffed;border-color:#e9e5f2}body:not(.dark) .settings button{color:var(--ink)}body:not(.dark) .devices-card .device-icon{background:#eee8ff;color:#7655f4}body:not(.dark) .referral-card,body:not(.dark) .profile-card{background:#f1ecff}body:not(.dark) .plan-row strong{color:var(--ink)}body:not(.dark) .modal{background:#1b123e9c}body:not(.dark) .sheet{background:#fff;color:var(--ink)}body:not(.dark) .amount,body:not(.dark) .method{background:#f5f1ff;color:var(--ink)}body:not(.dark) .method.selected{background:#eee7ff}
@media(max-width:350px){main{padding:23px 13px 98px}.page-heading h1{font-size:27px}.access-card{padding:19px;height:250px}.access-card strong{font-size:33px}.access-foot{font-size:10px}.device-row{gap:8px}.remove-button{font-size:11px}}