: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}.hero{display:flex;flex-direction:column;align-items:center;padding:32px 0 16px}.hero .logo{width:96px;height:96px;border-radius:28px;display:flex;align-items:center;justify-content:center;font-size:48px;background:radial-gradient(circle,rgba(42,171,238,.25),transparent 70%)}.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:6px;background:var(--bg-card-strong);color:var(--accent);border:none;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer}.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)}.btn.primary{background:var(--accent);color:#fff}.btn.danger{background:var(--danger);color:#fff}.btn.split{justify-content:space-between}.btn:disabled{opacity:.5;cursor:default}.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 .icon{width:36px;height:36px;border-radius:10px;background:var(--bg-card-strong);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.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.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:10px;background:#0e1621e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;padding:8px}.tabbar button{width:64px;height:44px;border:none;border-radius:999px;background:var(--bg-card);color:var(--text);font-size:20px;cursor:pointer}.tabbar button.active{background:var(--accent)}.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}.step-hero{text-align:center;padding:24px 0}.step-hero .big-icon{font-size:64px;margin:24px 0}.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(--text);padding:8px 10px;cursor:pointer}.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}
