:root{--bg: #0e1621;--bg-card: rgba(255, 255, 255, .06);--bg-card-strong: rgba(255, 255, 255, .1);--accent: #2aabee;--accent-dim: #17547a;--danger: #e5484d;--danger-bg: rgba(229, 72, 77, .15);--warn-bg: rgba(240, 180, 41, .15);--text: #ffffff;--text-dim: #708499;--radius: 16px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at 50% 30%,#17212b 0%,var(--bg) 65%);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;min-height:100%;max-width:480px;margin:0 auto;padding:16px 16px 88px}.view{flex:1;display:flex;flex-direction:column;gap:12px}.view-fade{display:contents}.view-fade>.view{animation:viewIn .28s cubic-bezier(.22,1,.36,1)}@keyframes viewIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.hero{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 0 20px}.shield{position:relative;width:92px;height:92px;border-radius:26px;display:flex;align-items:center;justify-content:center;transition:color .3s}.shield:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle at 50% 35%,rgba(42,171,238,.35),transparent 70%);transition:opacity .4s}.shield.on{color:var(--accent)}.shield.on:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:30px;border:2px solid var(--accent);opacity:.5;animation:pulse 2.4s ease-out infinite}.shield.off{color:var(--text-dim)}.shield.off:before{opacity:.35}@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.18);opacity:0}to{opacity:0}}.wordmark{font-size:26px;font-weight:800;letter-spacing:-.6px}.wordmark span{color:var(--accent);margin-left:3px}.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:6px 14px;border-radius:999px;background:var(--bg-card)}.status-pill .dot{width:7px;height:7px;border-radius:50%}.status-pill.on{color:#6fd08c}.status-pill.on .dot{background:#4fd06a;box-shadow:0 0 #4fd06a99;animation:blip 2s ease-out infinite}.status-pill.off{color:var(--text-dim)}.status-pill.off .dot{background:var(--text-dim)}@keyframes blip{0%{box-shadow:0 0 #4fd06a8c}70%{box-shadow:0 0 0 7px #4fd06a00}to{box-shadow:0 0 #4fd06a00}}.sub-meta{display:flex;align-items:center;gap:10px;margin-top:4px}.sub-meta .meta-item{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}.sub-meta .meta-label{font-size:11px;color:var(--text-dim)}.sub-meta .meta-value{font-size:15px;font-weight:600}.status-line{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:16px}.status-line h1{font-size:28px;font-weight:700;letter-spacing:-.5px}.status-line .sub{color:var(--accent);font-size:14px;margin-top:2px}.expiry{font-size:18px;font-weight:600;text-align:right}.chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg-card-strong);color:var(--accent);border:none;border-radius:999px;padding:7px 13px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}.chip:active{transform:scale(.95)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:var(--radius);padding:16px;font-size:16px;font-weight:600;cursor:pointer;color:var(--text);background:var(--bg-card);transition:transform .12s ease,filter .15s ease}.btn:active{transform:scale(.98)}.btn svg,.chip svg,.status-pill svg,.list-item svg{flex-shrink:0}.btn-lead{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}.btn-trail{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-size:14px;white-space:nowrap;opacity:.92}.btn-trail.muted{color:var(--text-dim);opacity:1}.btn.split{font-size:15px;padding-left:18px;padding-right:16px}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 20px -6px #2aabee99}.btn.primary:active{filter:brightness(.94)}.btn.danger{background:var(--danger);color:#fff}.btn.split{justify-content:space-between}.btn:disabled{opacity:.5;cursor:default;box-shadow:none}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--bg-card-strong);border-top-color:var(--accent);animation:spin .7s linear infinite}.spinner.sm{width:20px;height:20px;border-width:2.5px}@keyframes spin{to{transform:rotate(360deg)}}.row{display:flex;gap:12px}.row .btn{flex:1}.card{background:var(--bg-card);border-radius:var(--radius);padding:16px}.card h3{font-size:16px;margin-bottom:4px}.card .hint{color:var(--text-dim);font-size:13px}.list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}.list-item:last-child{border-bottom:none}.list-item.faq{align-items:flex-start}.list-item.faq .title{font-weight:600}.list-item .icon{width:38px;height:38px;border-radius:11px;background:var(--bg-card-strong);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dim))}.list-item .title{font-size:15px;font-weight:500}.list-item .subtitle{font-size:12px;color:var(--text-dim)}.tariff-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tariff{position:relative;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);padding:14px;cursor:pointer;text-align:left;color:var(--text)}.tariff.selected{border-color:var(--accent)}.tariff .period{font-size:14px;color:var(--text-dim)}.tariff .price{font-size:22px;font-weight:700;margin-top:8px}.tariff .per-month{font-size:12px;color:var(--text-dim)}.tariff .star{position:absolute;top:10px;right:12px}.strike{text-decoration:line-through;opacity:.55;font-weight:400;font-size:14px}.slider-dots{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);border-radius:999px;padding:10px 14px}.slider-dots button{width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;background:var(--accent-dim);color:transparent;font-size:12px;transition:all .15s}.slider-dots button.active{background:var(--accent);color:#fff;transform:scale(1.25);font-weight:700}.notice{border-radius:12px;padding:12px;font-size:14px}.notice.icon-row{display:flex;align-items:center;gap:8px}.notice.icon-row svg{flex-shrink:0;color:var(--accent)}.notice.danger.icon-row svg{color:inherit}.notice.info{background:var(--bg-card-strong)}.notice.danger{background:var(--danger-bg);color:#ff9a9d}.notice.warn{background:var(--warn-bg);color:#f0c869}.tabbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:6px;background:#17212bd1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.07);border-radius:999px;padding:7px;box-shadow:0 8px 28px -8px #0000008c}.tabbar button{display:flex;align-items:center;justify-content:center;width:60px;height:44px;border:none;border-radius:999px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .18s ease,background .18s ease,transform .12s ease}.tabbar button:active{transform:scale(.9)}.tabbar button.active{background:var(--accent);color:#fff}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet{width:100%;max-width:480px;background:#17212b;border-radius:20px 20px 0 0;padding:20px 16px 24px;display:flex;flex-direction:column;gap:14px}.sheet-header{display:flex;justify-content:space-between;align-items:center}.sheet-header h2{font-size:20px}.sheet-header .close{background:var(--bg-card-strong);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.step-hero{text-align:center;padding:20px 0 8px;display:flex;flex-direction:column;align-items:center}.step-hero .big-icon{width:88px;height:88px;border-radius:26px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:radial-gradient(circle at 50% 35%,rgba(42,171,238,.22),transparent 72%);animation:badgeIn .4s cubic-bezier(.22,1,.36,1)}.step-hero .big-icon.done{color:#4fd06a;background:radial-gradient(circle at 50% 35%,rgba(79,208,106,.22),transparent 72%)}@keyframes badgeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.step-hero h2{font-size:24px}.step-hero p{color:var(--text-dim);margin-top:8px;font-size:14px}.copy-box{display:flex;align-items:center;gap:8px;background:var(--bg-card);border-radius:12px;padding:12px}.copy-box .url{flex:1;font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-box button{background:var(--bg-card-strong);border:none;border-radius:8px;color:var(--accent);padding:9px 11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .1s}.copy-box button:active{transform:scale(.9)}.copy-box button:disabled{color:var(--text-dim);opacity:.6}.stat-row{display:flex;gap:12px}.stat{flex:1;background:var(--bg-card);border-radius:var(--radius);padding:16px}.stat .value{font-size:26px;font-weight:700}.stat .label{font-size:12px;color:var(--text-dim);margin-top:4px}.tx{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}.tx:last-child{border-bottom:none}.tx .date{color:var(--text-dim);font-size:12px}.tx .amount{color:var(--accent);font-weight:600;white-space:nowrap}.center{text-align:center}.loading{display:flex;align-items:center;justify-content:center;flex:1;color:var(--text-dim);padding:48px 0}