:root { --bg:#f5f7fb; --surface:#ffffff; --surface-2:#edf2f8; --text:#11182b; --muted:#6f7889; --line:#e1e7f0; --lime:#b9f42a; --blue:#1688f8; --purple:#7658ee; --orange:#ff8a3d; --danger:#ef5454; --safe-bottom:max(14px,env(safe-area-inset-bottom)); }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--text); font-family:"DM Sans",sans-serif; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 70% -10%,#dcecff 0,transparent 36%),var(--bg); }
button,input,textarea { font:inherit; }
button:disabled { cursor:not-allowed; opacity:.48; }
button,a { -webkit-tap-highlight-color:transparent; }
.app-shell { width:min(100%,560px); min-height:100vh; margin:auto; position:relative; }
.topbar { height:70px; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; position:sticky; top:0; z-index:20; background:linear-gradient(#f5f7fbf2 70%,transparent); backdrop-filter:blur(12px); }
.brand { color:var(--text); text-decoration:none; font:800 21px "Manrope"; display:flex; align-items:center; gap:8px; }
.brand-mark { width:31px; height:31px; border:0; border-radius:50%; display:block; object-fit:cover; box-shadow:0 5px 14px #1688f830; }
.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--text); background:var(--surface); display:grid; place-items:center; cursor:pointer; }
.icon-button svg { width:19px; fill:currentColor; }
.avatar { background:linear-gradient(135deg,var(--purple),#ff7392); font-weight:800; font-size:12px; border:0; }
main { padding:4px 18px 120px; }
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1 { font:800 clamp(34px,10vw,49px)/.99 "Manrope"; letter-spacing:-.045em; margin-bottom:14px; }
h2 { font:800 24px/1.1 "Manrope"; letter-spacing:-.025em; }
.muted { color:var(--muted); }
.hero { padding:24px 2px 20px; }
.hero p { max-width:390px; font-size:16px; line-height:1.55; }
.hero-actions { display:flex; gap:10px; margin:24px 0 4px; }
.button { border:0; min-height:48px; border-radius:14px; padding:0 18px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.button.primary { background:var(--blue); color:#fff; flex:1; box-shadow:0 8px 20px #1688f82c; }
.button.secondary { background:var(--surface); color:var(--text); border:1px solid var(--line); }
.stats { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; margin:18px 0 30px; }
.stat-card,.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:0 10px 30px #14386a0b; }
.stat-card:first-child { background:var(--lime); color:#111; border:0; }
.stat-label { font-size:12px; font-weight:600; opacity:.65; }
.stat-value { font:800 27px "Manrope"; margin-top:8px; }
.stat-trend { font-size:12px; margin-top:9px; font-weight:700; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:24px 0 14px; }
.section-head h2 { margin:0; }
.section-head a { color:var(--muted); font-size:13px; text-decoration:none; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quick-card { min-height:137px; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:20px; padding:16px; background:var(--surface); cursor:pointer; position:relative; overflow:hidden; }
.quick-card:nth-child(2) { background:#fff8ee; }
.quick-card:nth-child(3) { background:#f7f3ff; }
.quick-card:nth-child(4) { background:#effbf8; }
.quick-icon { width:38px; height:38px; border-radius:12px; background:#1688f812; display:grid; place-items:center; font-size:19px; margin-bottom:20px; color:#1688f8; }
.quick-card strong { display:block; font-size:15px; }
.quick-card span:last-child { color:var(--muted); font-size:12px; }
.product-list { display:grid; gap:11px; }
.product { display:grid; grid-template-columns:64px 1fr auto; gap:13px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:19px; padding:10px; cursor:pointer; }
.product-art { width:64px; aspect-ratio:1; border-radius:14px; display:grid; place-items:center; font-size:27px; background:linear-gradient(135deg,#ad84ff,#6442d9); }
.product:nth-child(2) .product-art { background:linear-gradient(135deg,#ffad69,#e6603a); }
.product:nth-child(3) .product-art { background:linear-gradient(135deg,#a9ff63,#3f8e53); }
.product-name { font-weight:700; font-size:14px; }
.product-meta { color:var(--muted); font-size:12px; margin-top:4px; }
.price { font-weight:800; white-space:nowrap; }
.store-cover { margin:12px 0 20px; min-height:210px; border-radius:27px; padding:24px; display:flex; flex-direction:column; justify-content:end; overflow:hidden; background:radial-gradient(circle at 80% 20%,#c8ff46 0 5%,transparent 6%),linear-gradient(135deg,#dcebff,#ffffff 65%); border:1px solid #d5e4f6; position:relative; }
.store-cover:after { content:"AK"; position:absolute; right:20px; top:28px; width:96px; height:96px; border-radius:30px; transform:rotate(8deg); background:linear-gradient(145deg,#c9ff4a,#78d674); color:#12120d; display:grid; place-items:center; font:800 30px "Manrope"; box-shadow:0 20px 50px #0008; }
.store-cover h1 { font-size:33px; max-width:250px; margin:8px 0 6px; }
.tabs { display:flex; gap:8px; overflow:auto; margin-bottom:15px; scrollbar-width:none; }
.tabs button { color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 14px; white-space:nowrap; cursor:pointer; }
.tabs button.active { color:#fff; background:var(--blue); border-color:var(--blue); font-weight:700; }
.page-title { padding:24px 0 8px; }
.form-card { display:grid; gap:15px; }
label { display:grid; gap:7px; font-size:12px; color:var(--muted); font-weight:600; }
input,textarea { border:1px solid var(--line); background:#f8fafd; color:var(--text); border-radius:14px; padding:14px; outline:none; }
select { border:1px solid var(--line); background:#f8fafd; color:var(--text); border-radius:14px; padding:14px; outline:none; width:100%; }
input:focus,textarea:focus { border-color:var(--lime); box-shadow:0 0 0 3px #c9ff4a16; }
.checkout-toggle { display:flex; grid-template-columns:20px 1fr; align-items:center; gap:10px; color:var(--text); font-size:13px; }
.checkout-toggle input { width:20px; height:20px; margin:0; padding:0; accent-color:var(--blue); }
.type-picker { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.type-picker button { padding:13px 8px; border-radius:14px; border:1px solid var(--line); background:#f8fafd; color:var(--muted); cursor:pointer; }
.type-picker button.active { border-color:#1688f8; color:#0d64c2; background:#eaf4ff; }
.activity-item { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.activity-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#edf3fb; color:#1688f8; }
.amount { color:#128c6a; font-weight:700; }
.bottom-nav { position:fixed; z-index:30; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,560px); display:grid; grid-template-columns:repeat(5,1fr); padding:8px 8px var(--safe-bottom); background:#ffffffef; backdrop-filter:blur(18px); border-top:1px solid var(--line); box-shadow:0 -10px 30px #1a3c6810; }
.bottom-nav a { color:#77767d; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-weight:600; }
.bottom-nav a.active { color:var(--text); }
.nav-icon { font-size:21px; line-height:28px; }
.plus { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:10px; font-size:23px; line-height:1; box-shadow:0 5px 14px #1688f838; }
.toast { position:fixed; z-index:60; left:50%; bottom:100px; transform:translate(-50%,20px); color:#111; background:var(--lime); border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:#000a; backdrop-filter:blur(5px); align-items:end; justify-content:center; }
.modal-backdrop:not([hidden]) { display:flex; }
.sheet { width:min(100%,560px); background:#fff; border-radius:28px 28px 0 0; border:1px solid var(--line); padding:12px 20px calc(24px + env(safe-area-inset-bottom)); animation:rise .24s ease-out; }
.grabber { width:38px; height:4px; border-radius:4px; background:#49484e; margin:0 auto 20px; }
.sheet-row { display:flex; justify-content:space-between; align-items:center; margin:18px 0; }
.sheet .button { width:100%; }
.success-orbit { width:80px; height:80px; margin:5px auto 20px; border:2px solid var(--lime); border-radius:50%; display:grid; place-items:center; color:var(--lime); font-size:36px; }
.empty { padding:50px 20px; text-align:center; color:var(--muted); }
.balance-card { background:linear-gradient(145deg,#2188ff,#7758ff); border-radius:27px; padding:22px; min-height:235px; position:relative; overflow:hidden; box-shadow:0 20px 55px #226eff28; }
.balance-card:after { content:""; position:absolute; width:220px; height:220px; border:1px solid #ffffff1f; border-radius:50%; right:-70px; top:-80px; box-shadow:0 0 0 35px #ffffff08,0 0 0 70px #ffffff07; }
.balance-card>div:first-child { display:grid; gap:6px; }
.balance-card>div:first-child span { font-size:12px; color:#ffffffb2; }
.balance-card>div:first-child strong { font:800 42px "Manrope"; letter-spacing:-.04em; }
.balance-ring { position:absolute; right:22px; top:22px; width:58px; height:58px; border-radius:50%; border:7px solid #ffffff3b; border-top-color:var(--lime); display:grid; place-items:center; transform:rotate(18deg); }
.balance-ring span { font-size:11px; font-weight:800; transform:rotate(-18deg); }
.balance-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; position:absolute; left:22px; right:22px; bottom:22px; }
.balance-meta span { background:#0c12252e; border:1px solid #ffffff1e; border-radius:15px; padding:12px; font-size:11px; color:#ffffffa8; }
.balance-meta b { color:#fff; font-size:17px; line-height:1.8; }
.module-list { display:grid; gap:9px; }
.module-row { display:grid; grid-template-columns:48px 1fr auto auto; align-items:center; gap:12px; min-height:78px; padding:12px; border:1px solid var(--line); border-radius:19px; background:var(--surface); color:var(--text); text-decoration:none; }
.module-row span:nth-child(2) { min-width:0; }
.module-row strong { display:block; font-size:14px; }
.module-row small { display:block; color:var(--muted); font-size:11px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-row em { color:var(--muted); font-size:10px; font-style:normal; white-space:nowrap; }
.module-row>b { color:#5f5e65; font-size:20px; }
.module-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:21px; background:#edf2f8; flex:0 0 auto; }
.module-icon.blue { background:#197cf026; color:#5eadff; }.module-icon.purple{background:#815eff24;color:#ac92ff}.module-icon.orange{background:#ff833526;color:#ffa264}.module-icon.green{background:#71dd6824;color:#91ec86}.module-icon.pink{background:#ff669525;color:#ff89ad}.module-icon.yellow{background:#fbd94d24;color:#ffe77a}
.detail-title { position:relative; padding-top:15px; }
.detail-title .module-icon { margin:26px 0 14px; width:64px; height:64px; border-radius:20px; font-size:27px; }
.back-link { color:var(--muted); text-decoration:none; font-size:13px; }
.feature-card>p { line-height:1.6; }
.feature-preview { border:1px solid var(--line); background:#f8fafd; border-radius:18px; padding:14px; margin:20px 0; }
.check-list { display:grid; gap:12px; color:#4f5d72; font-size:13px; }
.mini-chart { height:105px; display:flex; align-items:end; gap:7px; }
.mini-chart i { flex:1; min-height:10px; border-radius:6px 6px 3px 3px; background:linear-gradient(#67aaff,#765bff); }
.metric-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.metric-row span { background:#edf2f8; border-radius:12px; padding:10px; color:var(--muted); font-size:11px; }
.metric-row b { color:var(--text); float:right; }
.payout-line,.variant,.plan,.toggle-line { display:flex; justify-content:space-between; align-items:center; min-height:47px; border-bottom:1px solid var(--line); font-size:13px; }
.payout-line:last-child,.variant:last-child,.plan:last-child { border-bottom:0; }
.toggle { width:38px; height:22px; border-radius:999px; background:#38383d; padding:3px; }
.toggle:after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:white; transition:.2s; }
.toggle.on { background:var(--lime); }.toggle.on:after { transform:translateX(16px); background:#111; }
.form-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.settings-list { padding:0; overflow:hidden; }
.settings-list button { width:100%; min-height:55px; padding:0 16px; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.settings-list button:last-child { border:0; }
.payment-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#f7f9fc; border-radius:12px; padding:10px 12px; font-size:12px; color:var(--muted); }
.notice { display:grid; gap:4px; padding:13px 14px; margin:10px 0 16px; border:1px solid #bddbff; background:#edf6ff; border-radius:15px; color:#164f89; }
.notice strong { font-size:13px; }
.notice span { font-size:11px; line-height:1.45; }
.status-pill { display:inline-flex; margin-top:6px; padding:3px 7px; border-radius:999px; background:#edf2f8; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.compact-form { display:grid; grid-template-columns:1fr 110px; align-items:end; gap:9px; margin-bottom:18px; }
.compact-form .button { min-height:46px; grid-column:1/-1; }
.plan small { display:block; color:var(--muted); font-size:9px; margin-top:3px; text-transform:uppercase; }
.policy-note { color:var(--muted); font-size:11px; line-height:1.5; padding:11px 12px; border-radius:12px; background:#f2f5f9; margin:2px 0 8px; }
.loading { min-height:65vh; display:grid; place-content:center; justify-items:center; gap:16px; color:var(--muted); }
.loading-orbit { width:52px; height:52px; border:4px solid #d8e8fa; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
.empty strong { display:block; color:var(--text); margin-bottom:6px; }
.empty p { margin:0; font-size:12px; line-height:1.5; }
.sheet h2 { margin:8px 0; }
.sheet .notice { margin-top:14px; }
.center { text-align:center; padding-top:80px; }.center .button { width:100%; }.center .success-orbit { margin-left:auto; margin-right:auto; }
.toast.error { background:var(--danger); color:white; }
@keyframes rise { from { transform:translateY(35px); opacity:.4; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (min-width:700px) { body { padding:30px 0; } .app-shell { min-height:820px; border:1px solid var(--line); border-radius:34px; overflow:hidden; box-shadow:0 30px 100px #244f8322; background:#f9fbfe; } .bottom-nav { bottom:30px; border-radius:0 0 34px 34px; } }
body.telegram-native { padding:0; }
body.telegram-native .app-shell { min-height:100vh; border:0; border-radius:0; box-shadow:none; }
body.telegram-native .bottom-nav { bottom:0; border-radius:0; }