:root {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #10172b);
  --card: var(--tg-theme-secondary-bg-color, #1b2540);
  --text: var(--tg-theme-text-color, #f8f7ff);
  --muted: #acb6d6;
  --pink: #ff5cb9;
  --violet: #8868ff;
  --line: rgba(255, 255, 255, .1);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.screen { position: relative; overflow: hidden; width: min(100%, 560px); min-height: 100vh; margin: 0 auto; padding: 28px 18px calc(28px + env(safe-area-inset-bottom)); }
.glow { position: absolute; width: 230px; height: 230px; border-radius: 50%; filter: blur(60px); opacity: .28; pointer-events: none; }
.glow-left { top: -85px; left: -125px; background: var(--pink); } .glow-right { top: 210px; right: -145px; background: var(--violet); }
.top, .hero-card, .info-card, .link-card, .share-button, .toast { position: relative; z-index: 1; }
.top { display: flex; align-items: center; gap: 12px; margin: 4px 4px 24px; }
.brand-mark { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, var(--pink), var(--violet)); color: #fff; font-size: 31px; font-weight: 900; box-shadow: 0 10px 30px rgba(136,104,255,.35); }
.eyebrow, .card-kicker { margin: 0; color: #c8c1ff; font-size: 11px; font-weight: 800; letter-spacing: .12em; } h1 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.04em; }
.hero-card, .info-card, .link-card { border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(145deg, rgba(38,50,85,.96), rgba(22,30,54,.96)); box-shadow: 0 15px 45px rgba(0,0,0,.18); }
.hero-card { padding: 21px; } .progress-row { display: flex; align-items: center; gap: 17px; margin-top: 17px; } h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; } p { margin: 0; } .progress-row p, .info-card p, .hint { color: var(--muted); font-size: 14px; margin-top: 5px; }
.progress-ring { display: grid; place-items: center; flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--pink) 0deg, var(--violet) 0deg, rgba(255,255,255,.12) 0deg); position: relative; transition: background .6s ease; }
.progress-ring::before { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: #17203a; } .progress-ring span { position: relative; font-weight: 900; font-size: 19px; }
.segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 22px; }.segment { height: 8px; border-radius: 99px; background: rgba(255,255,255,.13); transition: transform .3s, background .3s; }.segment.done { background: linear-gradient(90deg, var(--pink), var(--violet)); box-shadow: 0 0 13px rgba(255,92,185,.45); }
.info-card { display: flex; gap: 13px; align-items: flex-start; margin-top: 14px; padding: 17px; }.info-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; background: rgba(255,193,94,.14); font-size: 22px; }
.link-card { margin-top: 14px; padding: 18px; }.link-button { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; border: 1px dashed rgba(216,204,255,.5); border-radius: 16px; margin-top: 12px; padding: 14px; color: var(--text); background: rgba(12,17,33,.42); text-align: left; cursor: pointer; }.link-button span { overflow: hidden; color: #e4defe; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.link-button b { color: #ffc3e5; font-size: 13px; }
.share-button { width: 100%; border: 0; border-radius: 18px; margin-top: 18px; padding: 17px 16px; color: #fff; background: linear-gradient(100deg, var(--pink), var(--violet)); box-shadow: 0 14px 30px rgba(136,104,255,.31); font: inherit; font-weight: 800; cursor: pointer; }.toast { min-height: 22px; margin-top: 12px; color: #d9d3ff; text-align: center; font-size: 14px; }
.sticker { position: absolute; z-index: 0; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(32,43,77,.68); backdrop-filter: blur(8px); font-size: 27px; }.sticker-heart { top: 115px; right: -8px; transform: rotate(13deg); animation: float 3.2s ease-in-out infinite; }.sticker-star { top: 329px; left: -10px; transform: rotate(-10deg); animation: float 3.9s ease-in-out .3s infinite; }
@keyframes float { 50% { transform: translateY(-9px) rotate(8deg) scale(1.07); } }