:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#080d19; --panel:#11182a; --panel2:#151e33; --line:rgba(255,255,255,.09); --text:#f7f8ff; --muted:#8f9ab4; --purple:#7868ff; --purple2:#a16fff; --green:#35d595; --red:#ff6c80; --orange:#ffc06b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); overflow-anchor:none; }
body { overflow-x:hidden; }
button,input { font:inherit; }
button,a { -webkit-user-select:none; user-select:none; }
.hidden { display:none !important; }
.ambient { position:fixed; width:360px; height:360px; border-radius:50%; filter:blur(90px); opacity:.18; pointer-events:none; }
.ambient-one { background:#6350ff; top:-180px; left:-170px; }.ambient-two { background:#00c99d; right:-230px; bottom:0; }
.auth-screen { min-height:100svh; display:grid; place-items:center; padding:28px 20px; position:relative; z-index:1; }
.auth-card { width:min(440px,100%); padding:28px 24px; border:1px solid var(--line); border-radius:28px; background:rgba(16,23,40,.88); box-shadow:0 28px 80px #0008; backdrop-filter:blur(22px); }
.logo { display:flex; align-items:center; gap:11px; font-size:22px; }.logo span { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,var(--purple),var(--purple2)); box-shadow:0 10px 28px #6d5aff55; }.logo.compact { font-size:19px; }.logo.compact span { width:34px; height:34px; border-radius:11px; }
.eyebrow { color:#a99fff; font-size:11px; font-weight:800; letter-spacing:1.7px; }
.auth-card .eyebrow { margin-top:34px; }.auth-card h1 { margin:8px 0 8px; font-size:30px; letter-spacing:-.8px; }.auth-card>p { color:var(--muted); line-height:1.5; margin:0 0 22px; }
label { display:grid; gap:7px; margin:14px 0; color:#bbc4da; font-size:13px; font-weight:650; }
input { width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:14px; outline:0; background:#0b1120; color:white; font-size:16px; } input:focus { border-color:var(--purple); box-shadow:0 0 0 3px #7868ff22; }
.button { display:flex; align-items:center; justify-content:center; min-height:49px; padding:12px 17px; border:0; border-radius:14px; color:white; text-decoration:none; font-weight:750; cursor:pointer; }.button.primary { background:linear-gradient(135deg,var(--purple),#9164f3); box-shadow:0 13px 30px #6655ff33; }.button.success { background:linear-gradient(135deg,#19a872,var(--green)); color:#04170f; }.button.success.waiting { pointer-events:none; color:#aab2c7; background:rgba(255,255,255,.035); border:1px solid var(--line); box-shadow:none; }.button.ghost { border:1px solid var(--line); background:rgba(255,255,255,.035); }.button.danger { background:#8f3347; }.button.full { width:100%; margin-top:12px; }.button:disabled { opacity:.43; }
.text-button { width:100%; border:0; padding:15px; color:#aea4ff; background:none; }.security-note { margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:12px; line-height:1.45; }.form-error { min-height:20px; color:#ff9daa; text-align:center; margin-top:7px; font-size:13px; }
.app { min-height:100svh; padding:env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom)); position:relative; z-index:1; }.app-header { height:70px; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:680px; margin:auto; }.avatar { width:38px; height:38px; border-radius:13px; border:1px solid var(--line); background:var(--panel2); color:white; font-weight:800; }
main { max-width:680px; margin:auto; padding:4px 18px 30px; }.page { display:none; }.page.active { display:block; }
.hello { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:18px 2px; }.hello h1,.page-title h1 { margin:5px 0 0; font-size:28px; letter-spacing:-.8px; }.pill { flex:none; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; }.pill.active { color:var(--green); border-color:#35d59544; background:#35d59511; }.pill.pending { color:var(--orange); border-color:#ffc06b44; }
.connect-card { padding:25px 20px 21px; border:1px solid var(--line); border-radius:27px; background:linear-gradient(150deg,rgba(24,32,55,.96),rgba(13,19,34,.96)); box-shadow:0 22px 65px #0005; text-align:center; overflow:hidden; }.signal { width:124px; height:124px; margin:2px auto 18px; display:grid; place-items:center; position:relative; }.signal-ring { position:absolute; border:1px solid #8f80ff44; border-radius:50%; }.ring-1 { inset:0; }.ring-2 { inset:17px; border-color:#8f80ff77; }.signal-core { width:65px; height:65px; display:grid; place-items:center; border-radius:22px; background:linear-gradient(135deg,var(--purple),var(--purple2)); font-size:31px; box-shadow:0 14px 40px #735eff66; }.signal.online .ring-1 { border-color:#35d59544; }.signal.online .ring-2 { border-color:#35d59577; }.signal.online .signal-core { background:linear-gradient(135deg,#18a773,var(--green)); color:#061c13; }
.access-label { color:var(--muted); font-size:13px; }.countdown { min-height:35px; margin:4px 0; font-size:29px; font-weight:850; font-variant-numeric:tabular-nums; letter-spacing:-.7px; }.connect-card p { margin:7px auto 16px; max-width:380px; color:var(--muted); font-size:13px; line-height:1.48; }.notice { margin-top:13px; padding:12px; border-radius:13px; text-align:left; font-size:12px; line-height:1.45; }.notice.warning { color:#ffd795; background:#ffc06b14; border:1px solid #ffc06b2c; }
.info-card { display:flex; gap:14px; margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:19px; background:rgba(18,25,44,.72); }.info-icon { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:13px; background:#7968ff1b; color:#b4aaff; font-size:22px; }.info-card strong { font-size:14px; }.info-card p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.plan-card { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:19px; border:1px solid #8f80ff33; border-radius:20px; color:white; text-align:left; background:linear-gradient(135deg,#6757e922,#9d6fff0c); }.plan-card strong,.plan-card small { display:block; }.plan-card strong { margin-top:5px; font-size:17px; }.plan-card small { margin-top:4px; color:var(--muted); }.price { display:grid; gap:5px; justify-items:end; font-size:18px; font-weight:850; white-space:nowrap; }.price span { color:#ad9fff; }
.device-usage { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:14px; padding-top:14px; border-top:1px solid #ffffff12; color:var(--muted); font-size:13px; }.device-usage strong { color:#fff; font-size:14px; }
.plan-options { display:grid; gap:9px; margin:16px 0; }.plan-option { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; border:1px solid #ffffff15; border-radius:16px; background:#10182b; color:#fff; text-align:left; }.plan-option strong,.plan-option span { display:block; }.plan-option span { margin-top:4px; color:var(--muted); font-size:12px; }.plan-option b { white-space:nowrap; font-size:17px; }.plan-option.selected { border-color:#8e7cff; background:#7060e725; box-shadow:0 0 0 2px #7969ee20 inset; }
.section-caption { display:grid; gap:4px; margin:22px 2px 10px; }.section-caption span { color:var(--muted); font-size:12px; line-height:1.45; }.device-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px; border:1px solid #ffffff12; border-radius:16px; background:#101727; }.device-item div { display:grid; gap:3px; min-width:0; }.device-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.device-item span { color:var(--muted); font-size:12px; }.device-item button { flex:0 0 auto; border:0; border-radius:10px; padding:8px 10px; color:#ff9ca8; background:#ff53651a; }.device-item.current { border-color:#45db9c45; }
.page-title { margin:23px 2px 22px; }.page-title p { color:var(--muted); margin:7px 0; }.stack { display:grid; gap:11px; }.payment-item,.settings-card { padding:17px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }.payment-item { display:flex; align-items:center; justify-content:space-between; gap:14px; }.payment-item strong,.payment-item span { display:block; }.payment-item span { color:var(--muted); font-size:12px; margin-top:4px; }.status { padding:7px 9px; border-radius:999px; font-size:11px; white-space:nowrap; }.status.pending { color:var(--orange); background:#ffc06b15; }.status.approved { color:var(--green); background:#35d59515; }.status.rejected { color:var(--red); background:#ff6c8015; }.empty { padding:45px 18px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:19px; }
.setting-row { display:flex; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }.setting-row:last-child { border-bottom:0; }.setting-row span { color:var(--muted); }.link-button { margin-top:10px; }
.bottom-nav { position:fixed; z-index:8; left:50%; bottom:0; transform:translateX(-50%); width:min(680px,100%); height:calc(70px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); padding:8px 14px env(safe-area-inset-bottom); border-top:1px solid var(--line); background:rgba(8,13,25,.92); backdrop-filter:blur(20px); }.bottom-nav button { border:0; color:#7f899f; background:none; font-size:10px; font-weight:700; }.bottom-nav button span { display:block; margin-bottom:4px; font-size:21px; }.bottom-nav button.active { color:#a99fff; }
.sheet-backdrop { position:fixed; inset:0; z-index:20; display:flex; align-items:end; justify-content:center; background:#02040aa8; backdrop-filter:blur(7px); }.sheet { width:min(680px,100%); max-height:92svh; overflow:auto; padding:9px 20px calc(23px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:27px 27px 0 0; background:#10172a; animation:sheet .25s ease-out; } @keyframes sheet{from{transform:translateY(40%);opacity:.5}}.sheet-handle { width:45px; height:5px; margin:2px auto 18px; border-radius:9px; background:#ffffff2b; }.sheet-head { display:flex; justify-content:space-between; align-items:start; }.sheet h2 { margin:5px 0 0; font-size:24px; }.close-button { width:38px; height:38px; border:0; border-radius:12px; color:white; background:#ffffff0d; font-size:25px; }.requisites { display:grid; gap:6px; margin:19px 0 13px; padding:17px; border:1px dashed #9c8cff66; border-radius:17px; background:#7868ff10; }.requisites span { color:var(--muted); font-size:12px; }.requisites strong { font-size:21px; letter-spacing:.8px; }.mini-button { justify-self:start; margin-top:8px; border:0; border-radius:10px; padding:8px 11px; color:#c4bcff; background:#7868ff22; }.muted { color:var(--muted); font-size:13px; line-height:1.5; }.upload-box { place-items:center; padding:20px; border:1px dashed #ffffff27; border-radius:17px; background:#080d1977; text-align:center; }.upload-box small { color:var(--muted); }.upload-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:#ffffff0d; font-size:23px; }
.toast { position:fixed; z-index:40; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:calc(100% - 36px); max-width:520px; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:#222b43; box-shadow:0 15px 45px #0008; text-align:center; font-size:13px; }
@media(min-width:700px){.bottom-nav{border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:18px 18px 0 0}.connect-card{padding-left:60px;padding-right:60px}}