body.telegram-miniapp-page { min-height: 100vh; margin: 0; overflow-x: hidden; color: #f4f2fb; background: #08090d; font-family: Manrope, sans-serif; }
body.telegram-miniapp-page::before { position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 0, rgba(111,73,171,.2), transparent 48%); content: ""; pointer-events: none; }
.telegram-miniapp { box-sizing: border-box; width: min(100%,620px); min-height: 100vh; margin: 0 auto; padding: max(18px,env(safe-area-inset-top)) 20px calc(106px + env(safe-area-inset-bottom)); }
.miniapp-header { display:flex; align-items:center; justify-content:space-between; padding:8px 0 24px; }
.miniapp-brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:15px; font-weight:800; }
.miniapp-brand small { display:block; margin-top:2px; color:#8d8999; font:9px "DM Mono",monospace; letter-spacing:.12em; }
.miniapp-mark { display:grid; width:38px; aspect-ratio:1; place-items:center; border:1px solid rgba(190,159,255,.35); border-radius:50%; background:radial-gradient(circle,rgba(130,89,207,.25),rgba(255,255,255,.03)); color:#e4d5ff; font:700 12px "DM Mono",monospace; }
.miniapp-live,.miniapp-card-top>span:first-child,.miniapp-section-title>div>span,.miniapp-eyebrow { color:#a99dbd; font:10px "DM Mono",monospace; letter-spacing:.12em; }
.miniapp-live { display:flex; align-items:center; gap:7px; } .miniapp-live i { width:6px; height:6px; border-radius:50%; background:#b59aeb; box-shadow:0 0 12px #a888ec; }
.miniapp-welcome { padding:22px 0 28px; } .miniapp-welcome h1 { margin:12px 0 10px; font:600 clamp(29px,8vw,40px)/1.13 Sora,Manrope,sans-serif; letter-spacing:-.04em; } .miniapp-welcome h1 em { color:#c3a8f4; font-style:normal; } .miniapp-welcome p { max-width:390px; margin:0; color:#a8a4b1; font-size:14px; line-height:1.6; }
.miniapp-content { display:grid; gap:12px; }
.miniapp-balance { position:relative; overflow:hidden; padding:20px; border:1px solid rgba(183,147,246,.25); border-radius:22px; background:linear-gradient(135deg,rgba(49,38,66,.85),rgba(20,19,27,.92) 60%); box-shadow:0 20px 60px rgba(0,0,0,.24); }
.miniapp-balance::after { position:absolute; top:-70px; right:-40px; width:180px; aspect-ratio:1; border-radius:50%; background:rgba(142,99,203,.11); filter:blur(35px); content:""; pointer-events:none; }
.miniapp-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .miniapp-shield { padding:6px 9px; border:1px solid rgba(157,210,178,.17); border-radius:99px; color:#a8d0b4; font:9px "DM Mono",monospace; letter-spacing:.08em; }
.miniapp-balance>strong { display:block; margin-top:23px; font:600 38px/1 Sora,sans-serif; letter-spacing:-.04em; } .miniapp-balance>strong small { color:#c9b7e7; font-size:24px; } .miniapp-balance>p { margin:8px 0 19px; color:#aaa5b4; font-size:12px; }
.miniapp-balance>a,.miniapp-open-web { display:flex; align-items:center; justify-content:space-between; color:#eee7fa; text-decoration:none; font-size:13px; font-weight:700; } .miniapp-balance>a span,.miniapp-open-web span { color:#c2a5f2; font-size:18px; }
.miniapp-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 2px 3px; } .miniapp-section-title h2 { margin:7px 0 0; font-size:18px; font-weight:650; }
.miniapp-avatar { display:grid; width:38px; aspect-ratio:1; flex:0 0 auto; place-items:center; border:1px solid rgba(191,164,235,.25); border-radius:50%; background:#24202e; color:#e3d5f8; font-weight:700; }
.miniapp-data-card { display:flex; align-items:center; gap:13px; min-height:68px; padding:12px 14px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.035); }
.miniapp-data-icon { display:grid; width:40px; aspect-ratio:1; flex:0 0 auto; place-items:center; border:1px solid rgba(177,145,224,.18); border-radius:13px; background:rgba(141,101,192,.1); color:#cfb8f3; font-size:18px; }
.miniapp-data-card>div:nth-child(2) { min-width:0; flex:1; } .miniapp-data-card strong { font-size:13px; } .miniapp-data-card p { margin:4px 0 0; color:#9994a2; font-size:11px; } .miniapp-data-card>a { display:grid; width:34px; aspect-ratio:1; flex:0 0 auto; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:50%; color:#e7def4; text-decoration:none; }
.miniapp-open-web { min-height:48px; margin-top:3px; padding:0 15px; border:1px solid rgba(185,153,233,.22); border-radius:14px; background:rgba(140,103,188,.08); } .miniapp-footnote { margin:2px 5px 0; color:#817c89; font-size:10px; line-height:1.5; }
.miniapp-nav { position:fixed; z-index:20; right:50%; bottom:max(12px,env(safe-area-inset-bottom)); display:flex; width:min(calc(100% - 28px),440px); justify-content:space-around; padding:9px 6px; transform:translateX(50%); border:1px solid rgba(255,255,255,.13); border-radius:19px; background:rgba(17,16,22,.9); box-shadow:0 10px 35px rgba(0,0,0,.3); backdrop-filter:blur(20px); }
.miniapp-nav a { display:grid; min-width:78px; gap:3px; justify-items:center; color:#8e8996; text-decoration:none; font-size:10px; } .miniapp-nav a span { font-size:18px; line-height:1; } .miniapp-nav a.is-active { color:#e4d2ff; }
.miniapp-loading,.miniapp-error { display:grid; min-height:170px; align-content:center; justify-items:center; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.035); text-align:center; } .miniapp-loading p,.miniapp-error p { color:#a7a1ae; font-size:13px; line-height:1.6; }
.miniapp-loading>span { width:25px; aspect-ratio:1; border:2px solid rgba(196,166,240,.25); border-top-color:#c3a4ef; border-radius:50%; animation:miniapp-spin .8s linear infinite; } .miniapp-error>span { color:#f1eafa; font-weight:700; } .miniapp-error a { color:#d5b9ff; font-size:13px; }
@keyframes miniapp-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .miniapp-loading>span { animation-duration:2s; } }