:root { color-scheme:dark; --bg:#060d1b; --panel:#101d30; --panel2:#12243c; --line:rgba(177,207,255,.14); --text:#f6f8fe; --muted:#9aa9c3; --blue:#3170de; --blue2:#2355ae; --mint:#55dfbf; }
* { box-sizing:border-box; }
html { background:#020712; scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% -10%,#173e78 0%,transparent 38%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.app-shell { width:min(100%,560px); min-height:100vh; margin:0 auto; padding:env(safe-area-inset-top) 18px calc(102px + env(safe-area-inset-bottom)); position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(20,53,99,.30),transparent 31%),var(--bg); }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; padding:0; border:0; color:var(--text); background:transparent; font-weight:760; letter-spacing:-.02em; font-size:18px; cursor:pointer; }
.brand-logo { width:37px; height:37px; display:grid; place-items:center; overflow:hidden; border-radius:12px; border:1px solid rgba(133,180,255,.47); background:linear-gradient(145deg,#c9e1ff,#fff); box-shadow:0 9px 28px rgba(46,108,218,.28); }
.brand-logo img { width:72px; height:72px; object-fit:cover; transform:scale(1.55); }
.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid rgba(133,180,255,.44); background:linear-gradient(145deg,#2769d6,#112d62); box-shadow:0 9px 28px rgba(46,108,218,.28); color:#fff; font-weight:900; font-size:14px; cursor:pointer; }
.page-stage { position:relative; }
.page { display:none; animation:page-enter .34s cubic-bezier(.2,.7,.2,1); }
.page.is-active { display:block; }
@keyframes page-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.hero { text-align:center; padding:24px 4px 20px; position:relative; isolation:isolate; }
.orb { position:absolute; border-radius:50%; filter:blur(4px); z-index:-1; opacity:.7; }.orb-one { width:270px; height:270px; top:-20px; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(42,121,245,.42),transparent 66%); }.orb-two { width:190px; height:190px; top:70px; right:-130px; background:#174f9f; filter:blur(55px); }
.hero-logo { width:126px; height:126px; overflow:hidden; border:1px solid rgba(172,210,255,.48); border-radius:33px; display:grid; place-items:center; margin:0 auto 25px; background:linear-gradient(145deg,#d4eaff,#fff); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 26px 55px rgba(0,0,0,.28); }.hero-logo img { width:250px; height:250px; object-fit:cover; transform:scale(1.44); }
.status { margin:0 0 18px; color:#eaf5ff; font-size:15px; font-weight:680; }.status i { display:inline-block; width:10px; height:10px; background:var(--mint); border-radius:50%; margin:0 8px 1px 0; box-shadow:0 0 15px var(--mint); }
h1 { margin:0; font-size:clamp(36px,10vw,53px); line-height:.98; letter-spacing:-.06em; }.hero-copy { max-width:390px; margin:18px auto 0; color:var(--muted); font-size:16px; line-height:1.45; }
.actions,.profile-actions { display:grid; gap:11px; margin-top:15px; }.action { min-height:72px; width:100%; text-align:left; border-radius:18px; display:grid; grid-template-columns:36px 1fr 28px; align-items:center; padding:0 20px; border:1px solid var(--line); color:var(--text); background:rgba(15,29,49,.86); font-size:18px; font-weight:760; box-shadow:0 12px 25px rgba(0,0,0,.14); cursor:pointer; transition:transform .18s ease,filter .18s ease; }.action:hover,.feature-card:hover,.platform-card:hover { transform:translateY(-2px); filter:brightness(1.12); }.action-primary { border:0; background:linear-gradient(105deg,#2769db,#386dd0); box-shadow:0 14px 28px rgba(32,93,212,.34); }.action b { font-size:25px; font-weight:400; text-align:right; }.action-icon { font-size:25px; opacity:.96; }.power-icon { font-size:35px; font-weight:300; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0; }.feature-card { min-height:236px; text-align:left; color:var(--text); position:relative; overflow:hidden; padding:20px 17px; border-radius:23px; border:1px solid var(--line); background:radial-gradient(circle at 100% 100%,rgba(45,102,208,.25),transparent 54%),linear-gradient(145deg,#132740,#0c1728); box-shadow:0 16px 35px rgba(0,0,0,.18); cursor:pointer; transition:transform .18s ease,filter .18s ease; }.feature-card h2 { margin:0; font-size:18px; line-height:1.1; letter-spacing:-.03em; }.feature-card p { margin:12px 0; color:#aab9cf; line-height:1.42; font-size:15px; }.feature-card img { position:absolute; width:150px; right:-16px; bottom:-9px; object-fit:contain; mix-blend-mode:screen; opacity:.93; }.profile-card img { width:178px; right:-38px; bottom:1px; }.card-arrow { position:absolute; left:18px; bottom:18px; font-size:29px; color:#c8d9f9; }
.page-heading { padding:22px 2px 19px; }.page-heading .eyebrow { display:block; margin-bottom:8px; }.page-heading h1 { font-size:39px; }.page-heading p { margin:13px 0 0; color:var(--muted); font-size:16px; line-height:1.4; }.eyebrow { color:#76a9ff; font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.platform-card { min-height:125px; padding:16px; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:18px; background:rgba(15,29,49,.85); cursor:pointer; transition:transform .18s ease,filter .18s ease,border-color .18s ease,background .18s ease; }.platform-card.is-selected { border-color:#5790f2; background:linear-gradient(145deg,rgba(42,102,210,.54),rgba(14,36,71,.9)); box-shadow:inset 0 0 0 1px rgba(148,191,255,.16); }.platform-card span { display:block; margin-bottom:15px; font-size:28px; color:#a8c8ff; }.platform-card b { display:block; font-size:16px; letter-spacing:-.02em; }.platform-card small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.setup-card,.profile-section,.account-card { margin-top:17px; border:1px solid var(--line); border-radius:21px; background:linear-gradient(145deg,rgba(18,38,65,.94),rgba(10,22,39,.89)); box-shadow:0 16px 35px rgba(0,0,0,.14); }.setup-card { padding:20px; }.setup-copy h2,.profile-section h2 { margin:7px 0 8px; font-size:21px; letter-spacing:-.04em; }.setup-copy p,.account-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.46; }.app-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:19px; }.app-link { min-height:48px; padding:9px 12px; display:grid; place-items:center; text-align:center; border-radius:13px; border:1px solid rgba(141,181,245,.22); color:#dceaff; background:#12243d; font-size:13px; font-weight:720; cursor:pointer; }.app-link-primary { border:0; background:#2d68cf; color:#fff; }.after-connect { display:flex; gap:11px; margin-top:18px; padding-top:17px; border-top:1px solid var(--line); }.after-connect span { width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#06182b; background:var(--mint); font-weight:900; }.after-connect p { margin:0; color:#b5c4d9; font-size:14px; line-height:1.45; }.after-connect b { color:#f2f6ff; }
.account-card { padding:17px; display:grid; grid-template-columns:43px 1fr; align-items:center; gap:12px; }.account-avatar { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#2769d6,#112d62); font-weight:900; }.account-card strong { font-size:16px; }.account-card .outline-button { grid-column:2; justify-self:start; margin-top:1px; }.outline-button,.copy-button { padding:10px 14px; border:1px solid rgba(126,171,240,.37); border-radius:11px; color:#dceaff; background:rgba(33,70,119,.45); font-size:13px; font-weight:700; cursor:pointer; }.profile-section { padding:19px; }.profile-section h2 { margin-top:0; }.account-data { margin:0; }.account-data div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(177,207,255,.1); }.account-data div:last-child { border-bottom:0; padding-bottom:0; }.account-data dt { color:var(--muted); font-size:14px; }.account-data dd { margin:0; color:#edf3ff; font-weight:680; font-size:14px; text-align:right; }.subscription-url { overflow:hidden; padding:11px 12px; border:1px solid rgba(132,176,242,.16); border-radius:11px; color:#b6d2ff; background:#0a1729; white-space:nowrap; text-overflow:ellipsis; font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.copy-button { width:100%; margin-top:3px; }.toast { position:fixed; left:50%; bottom:100px; z-index:8; width:min(calc(100% - 40px),450px); padding:13px 16px; border:1px solid rgba(138,181,248,.27); border-radius:14px; color:#eff6ff; background:rgba(18,39,69,.96); box-shadow:0 14px 35px rgba(0,0,0,.34); transform:translate(-50%,18px); opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; font-size:14px; line-height:1.35; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:6; width:min(100%,560px); display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(151,188,255,.13); background:rgba(5,12,25,.88); backdrop-filter:blur(20px); }.bottom-nav button { border:0; padding:0; text-align:center; display:grid; gap:5px; color:#a0aec5; background:transparent; font-size:11px; font-weight:650; cursor:pointer; }.bottom-nav span { font-size:23px; line-height:1; }.bottom-nav button.active { color:#78aaff; }
@media (min-width:700px) { body { padding:20px; }.app-shell { min-height:calc(100vh - 40px); border:1px solid rgba(157,192,255,.12); border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.4); }.bottom-nav { bottom:20px; border-radius:0 0 28px 28px; } }
[hidden] { display:none !important; }
.is-unauthenticated .topbar { justify-content:center; }.is-unauthenticated .brand { pointer-events:none; }.auth-screen { max-width:420px; margin:0 auto; padding:18px 0 10px; text-align:center; animation:page-enter .35s cubic-bezier(.2,.7,.2,1); }.welcome-logo { width:116px; height:116px; margin:0 auto 20px; display:grid; place-items:center; overflow:hidden; border-radius:32px; border:1px solid rgba(172,210,255,.48); background:#fff; box-shadow:0 22px 52px rgba(19,72,153,.28); }.welcome-logo img { width:228px; height:228px; object-fit:cover; transform:scale(1.46); }.welcome-lead { margin:12px 0 21px; color:#bac9df; font-size:18px; }.auth-card { padding:20px; text-align:left; border:1px solid var(--line); border-radius:23px; background:linear-gradient(145deg,rgba(18,38,65,.96),rgba(10,22,39,.94)); box-shadow:0 18px 38px rgba(0,0,0,.2); }.auth-heading h2 { margin:7px 0 8px; font-size:24px; letter-spacing:-.045em; }.auth-heading p { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.4; }.auth-card form { display:grid; gap:12px; }.auth-card label { display:grid; gap:7px; color:#c5d3e9; text-align:left; font-size:13px; font-weight:700; }.auth-card input:not([type="checkbox"]) { width:100%; height:48px; padding:0 13px; border:1px solid rgba(139,181,243,.25); border-radius:12px; outline:0; color:#eff6ff; background:#091628; font:inherit; }.auth-card input:focus { border-color:#629cf4; box-shadow:0 0 0 3px rgba(72,132,236,.14); }.terms-field { grid-template-columns:18px 1fr; align-items:start; gap:9px !important; color:var(--muted) !important; font-weight:500 !important; line-height:1.35; }.terms-field input { margin:2px 0 0; accent-color:#4c87eb; }.auth-hint,.form-message { margin:0; padding:10px 12px; border-radius:11px; color:#afc7e8; background:rgba(45,91,157,.16); font-size:12px; line-height:1.4; }.form-message.is-error { color:#ffd0d0; background:rgba(181,65,65,.19); }.auth-submit { min-height:50px; border:0; border-radius:13px; color:#fff; background:linear-gradient(105deg,#2769db,#386dd0); box-shadow:0 12px 25px rgba(32,93,212,.25); font-weight:800; cursor:pointer; }.auth-submit:disabled { opacity:.65; cursor:wait; }.auth-switches { display:flex; justify-content:center; gap:18px; padding:16px 0; }.auth-switches button { padding:0; border:0; color:#9ec2ff; background:transparent; font-size:13px; cursor:pointer; }.telegram-auth-button { min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(115,188,255,.4); border-radius:13px; color:#e8f4ff; background:rgba(34,115,181,.22); font-size:14px; font-weight:750; }.telegram-auth-button span { font-size:19px; color:#68baff; }.profile-menu { position:relative; }.profile-dropdown { position:absolute; top:43px; right:0; z-index:9; width:228px; padding:14px; border:1px solid rgba(144,186,245,.24); border-radius:16px; background:#10223a; box-shadow:0 18px 42px rgba(0,0,0,.35); }.profile-dropdown strong { display:block; font-size:14px; }.profile-dropdown > span { display:block; overflow:hidden; margin:5px 0 12px; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.profile-dropdown button { width:100%; padding:10px 4px; border:0; border-top:1px solid rgba(177,207,255,.1); color:#d8e8ff; text-align:left; background:transparent; font-size:13px; cursor:pointer; }.profile-dropdown button:last-child { color:#ffb8b8; }.app-link { grid-template-columns:25px 1fr; align-items:center; text-align:left; }.app-link em { width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(170,205,255,.3); border-radius:50%; font-style:normal; font-size:12px; }.app-link-primary em { border-color:rgba(255,255,255,.55); }.welcome-modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(2,8,19,.72); backdrop-filter:blur(10px); }.welcome-modal > div { width:min(100%,370px); padding:28px 22px 22px; text-align:center; border:1px solid rgba(149,190,249,.3); border-radius:25px; background:linear-gradient(145deg,#142e52,#0b172a); box-shadow:0 25px 70px rgba(0,0,0,.44); animation:page-enter .35s ease; }.welcome-modal-logo { width:86px; height:86px; display:grid; place-items:center; overflow:hidden; margin:0 auto 17px; border-radius:25px; background:#fff; }.welcome-modal-logo img { width:166px; height:166px; object-fit:cover; transform:scale(1.5); }.welcome-modal h2 { margin:7px 0 7px; font-size:29px; letter-spacing:-.05em; }.welcome-modal p { margin:0 0 20px; color:#b8c8dd; }