:root {
  color-scheme: dark;
  --bg: #080b14; --panel: rgba(19, 24, 40, .88); --text: #f7f7fc; --muted: #8992a8;
  --accent: #7b64ff; --line: rgba(255, 255, 255, .075); --tg-bg: var(--bg); --tg-text: var(--text);
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { width:100%; height:100%; overflow:hidden; background:#070a12; touch-action:manipulation; }
body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--tg-bg); color:var(--tg-text); -webkit-tap-highlight-color:transparent; transition:background .4s ease; }
button, input { font: inherit; }
.page { position:relative; z-index:2; display:flex; flex-direction:column; width:min(100%,600px); height:100dvh; margin:auto; overflow:hidden; padding:max(11px,env(safe-area-inset-top)) 14px max(8px,env(safe-area-inset-bottom)); }
.noise { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.glow { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.glow-one { width:340px; height:340px; background:#755cff; top:-180px; right:-130px; opacity:.21; }
.glow-two { width:310px; height:310px; background:#08a991; bottom:-170px; left:-150px; opacity:.12; }
body[data-section="home"] { --section-color:#8c7cff; }
body[data-section="games"] { --section-color:#35a3ff; }
body[data-section="snapchat"] { --section-color:#ffd21f; }
body[data-section="bots"] { --section-color:#38d49b; }
body[data-section="sites"] { --section-color:#ff9c42; }
body[data-section] .glow-one { background:var(--section-color); transition:background .35s ease; }
body[data-section] { background:radial-gradient(circle at 85% -10%,color-mix(in srgb,var(--section-color) 17%,transparent),transparent 42%),radial-gradient(circle at 5% 105%,color-mix(in srgb,var(--section-color) 9%,transparent),transparent 38%),#080b14; }
body[data-section] .profile-header { border-color:color-mix(in srgb,var(--section-color) 35%,rgba(255,255,255,.1)); background:linear-gradient(120deg,color-mix(in srgb,var(--section-color) 16%,#20253a),rgba(14,18,31,.98) 72%); box-shadow:0 17px 45px rgba(0,0,0,.3),0 0 28px color-mix(in srgb,var(--section-color) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.05); }
body[data-section] .profile-header::before { background:var(--section-color); transition:background .35s ease; }
body[data-section] .profile-photo { border-color:color-mix(in srgb,var(--section-color) 68%,#fff); box-shadow:0 8px 24px color-mix(in srgb,var(--section-color) 28%,transparent); }
body[data-section] .verified-name svg { fill:var(--section-color); }
body[data-section] .owner-label,body[data-section] .profile-link { color:color-mix(in srgb,var(--section-color) 70%,#fff); }
body[data-section] .profile-link b { border-color:color-mix(in srgb,var(--section-color) 35%,transparent); background:color-mix(in srgb,var(--section-color) 12%,transparent); }
body[data-section] .profile-link b svg { stroke:color-mix(in srgb,var(--section-color) 58%,#fff); }
body[data-section] .tiny-label,body[data-section] .footer-logo { color:var(--section-color); }
body[data-section] .bot-card { --card-color:var(--section-color)!important; }
.app-bar { position:relative; display:flex; flex:0 0 28px; align-items:center; justify-content:flex-end; padding:0 3px; }.app-identity { position:absolute; left:50%; direction:ltr; display:flex; align-items:center; gap:6px; color:#dce0ed; font-size:8px; font-weight:900; letter-spacing:1.8px; transform:translateX(-50%); }.app-identity img { position:relative; z-index:2; width:22px; height:22px; overflow:visible; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--section-color,#8c7cff) 45%,transparent)); animation:cloudTravel 4.6s ease-in-out infinite; }.dancing-313 { display:inline-flex; direction:ltr; gap:1px; color:var(--section-color,#8c7cff); font-weight:1000; letter-spacing:0; text-shadow:0 0 11px color-mix(in srgb,var(--section-color,#8c7cff) 70%,transparent); perspective:40px; }.dancing-313 i { display:inline-block; font-style:normal; transform-origin:center; }.dancing-313 i:nth-child(1) { animation:spinFirst 1.8s ease-in-out infinite; }.dancing-313 i:nth-child(2) { animation:flipMiddle 1.45s ease-in-out infinite; }.dancing-313 i:nth-child(3) { animation:walkLast 1.6s ease-in-out infinite; }.live-badge { display:flex; align-items:center; gap:5px; color:#677185; font-size:7px; font-weight:800; letter-spacing:1px; }.live-badge i { width:5px; height:5px; border-radius:50%; background:#44dda1; box-shadow:0 0 8px #44dda1; animation:liveBlink 1.15s ease-in-out infinite; }
@keyframes liveBlink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.18; transform:scale(.65); } }
.profile-header { position:relative; display:flex; flex:0 0 92px; align-items:center; justify-content:space-between; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:13px; background:linear-gradient(120deg,rgba(34,39,64,.98),rgba(17,21,36,.97)); box-shadow:0 17px 45px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045); transform:perspective(700px) rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg)); transform-style:preserve-3d; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; will-change:transform; }
.profile-header:hover { border-color:rgba(142,124,255,.3); box-shadow:0 20px 48px rgba(0,0,0,.32),0 0 28px rgba(117,92,255,.09),inset 0 1px 0 rgba(255,255,255,.06); }
.profile-header::before { content:""; position:absolute; width:150px; height:150px; top:-100px; left:20%; border-radius:50%; background:#7860f6; filter:blur(55px); opacity:.19; }
.profile-main,.profile-link { z-index:2; }
.section-orbits { position:absolute; z-index:1; inset:0; pointer-events:none; overflow:hidden; }
.section-orbits span { position:absolute; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--section-color) 35%,transparent); color:color-mix(in srgb,var(--section-color) 65%,#fff); background:color-mix(in srgb,var(--section-color) 8%,transparent); box-shadow:0 0 18px color-mix(in srgb,var(--section-color) 12%,transparent); }
.section-orbits svg { width:58%; height:58%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.section-orbits span:nth-child(1) { width:25px; height:25px; top:9px; left:34%; border-radius:9px; font-size:10px; animation:bannerFloat 3.7s ease-in-out infinite; }
.section-orbits span:nth-child(2) { width:17px; height:17px; right:47%; bottom:8px; border-radius:50%; font-size:7px; animation:bannerFloat 3.1s .5s ease-in-out infinite reverse; }
.section-orbits span:nth-child(3) { width:31px; height:31px; top:31px; left:20%; border-radius:11px; font-size:9px; opacity:.55; animation:bannerSpin 7s linear infinite; }
.content-section[hidden] { display:none!important; }
.profile-main { display:flex; align-items:center; min-width:0; gap:11px; }.profile-photo-wrap { position:relative; isolation:isolate; flex:0 0 auto; width:55px; height:55px; }.profile-photo-wrap::before { content:""; position:absolute; z-index:-1; inset:-4px; border:1px solid rgba(222,229,240,.48); border-radius:21px; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(142,154,174,.04)); box-shadow:inset 0 0 7px rgba(255,255,255,.12),0 0 8px rgba(198,210,230,.12); }.profile-photo-wrap::after { content:""; position:absolute; z-index:3; left:-3px; top:-3px; width:7px; height:7px; border-radius:50%; background:#f8fbff; box-shadow:0 0 4px #fff,0 0 9px #e5edfa,0 0 16px rgba(207,221,243,.85); offset-path:inset(-4px round 21px); offset-distance:0%; animation:silverRail 2s linear infinite; pointer-events:none; }.profile-photo { display:block; width:100%; height:100%; border:2px solid rgba(204,214,230,.66); border-radius:17px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.28); }.online-dot { display:none; }
@keyframes silverRail { to { offset-distance:100%; } }
.profile-copy { position:relative; min-width:0; }.owner-label { display:block; margin-bottom:3px; color:#a99dff; font-size:7px; font-weight:800; letter-spacing:.4px; }.verified-name { display:flex; align-items:center; gap:5px; }.profile-copy h1 { overflow:hidden; margin:0; font-size:16px; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.1px; }.verified-name svg { width:15px; height:15px; fill:#7965ef; }.verified-name svg path:last-child { fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.profile-copy p { overflow:hidden; max-width:190px; margin:4px 0 0; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.profile-link { position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; margin-right:5px; color:#8f86ca; text-decoration:none; font-size:7px; }.profile-link b { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(148,130,255,.27); border-radius:11px; background:linear-gradient(145deg,rgba(124,99,245,.22),rgba(95,75,190,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }.profile-link b svg { width:17px; fill:none; stroke:#b6aaff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.profile-link span { max-width:67px; overflow:hidden; text-overflow:ellipsis; }
.main-nav { display:grid; flex:0 0 56px; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:6px; }
.main-nav button { --nav-color:#7b64ff; position:relative; overflow:hidden; min-height:56px; border:1.5px solid color-mix(in srgb,var(--nav-color) 58%,transparent); border-radius:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--nav-color) 9%,#151a2a),rgba(11,15,26,.92)); color:color-mix(in srgb,var(--nav-color) 70%,#fff); font-size:10.5px; font-weight:900; letter-spacing:-.15px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 16px rgba(0,0,0,.16); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.main-nav button::after { content:""; position:absolute; right:18%; bottom:-12px; left:18%; height:18px; border-radius:50%; background:var(--nav-color); filter:blur(13px); opacity:.15; transition:.2s; }
.main-nav button[data-section="home"] { --nav-color:#8c7cff; }
.main-nav button[data-section="games"] { --nav-color:#35a3ff; }
.main-nav button[data-section="snapchat"] { --nav-color:#ffd21f; }
.main-nav button[data-section="bots"] { --nav-color:#38d49b; }
.main-nav button[data-section="sites"] { --nav-color:#ff9c42; }
.main-nav button.active { border-color:var(--nav-color); background:linear-gradient(145deg,color-mix(in srgb,var(--nav-color) 21%,#171c2d),rgba(12,16,27,.96)); color:#fff; box-shadow:0 0 0 1px color-mix(in srgb,var(--nav-color) 23%,transparent),0 10px 27px color-mix(in srgb,var(--nav-color) 21%,transparent),inset 0 1px 0 rgba(255,255,255,.1); transform:translateY(-1px); }
.main-nav button.active::after { opacity:.42; }
.main-nav button:active { transform:scale(.96); }
.home-section { flex:1 1 auto; min-height:0; margin:0; padding:4px 2px 18px; overflow-y:auto; scrollbar-width:none; }
.home-section::-webkit-scrollbar { display:none; }
.home-section[hidden] { display:none!important; }
.news-ticker { position:relative; display:flex; align-items:center; height:47px; overflow:hidden; border:1px solid color-mix(in srgb,var(--section-color) 38%,transparent); border-radius:15px; background:color-mix(in srgb,var(--section-color) 7%,rgba(14,18,30,.9)); box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035); }
.page > .news-ticker { flex:0 0 47px; margin-top:4px; transition:border-color .35s ease,background .35s ease,box-shadow .35s ease; }
.news-badge { z-index:2; display:flex; align-self:stretch; align-items:center; gap:5px; padding:0 12px; background:color-mix(in srgb,var(--section-color) 17%,#111625); color:#fff; font-size:8px; font-weight:900; }
.news-badge i { width:6px; height:6px; border-radius:50%; background:#ff3d54; box-shadow:0 0 9px #ff3d54; animation:newsPulse 1.25s ease-in-out infinite; }
.news-track { direction:ltr; min-width:0; flex:1; overflow:hidden; }
.news-marquee { display:flex; width:max-content; align-items:center; gap:22px; padding-left:22px; color:#d9dbea; font-size:10px; font-weight:700; white-space:nowrap; animation:newsSlide 9s linear infinite; }
.news-marquee span { direction:rtl; }
.news-marquee b { color:var(--section-color); font-size:11px; }
.news-ticker > svg { flex:0 0 auto; width:17px; margin:0 11px; fill:none; stroke:var(--section-color); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@keyframes newsSlide { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes newsPulse { 50% { opacity:.35; transform:scale(.75); } }
.mag-cover { position:relative; display:flex; min-height:174px; margin-top:11px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:20px; background:linear-gradient(130deg,color-mix(in srgb,var(--section-color) 38%,#171b2c),#101421 68%); box-shadow:0 18px 38px rgba(0,0,0,.25); }
.mag-cover > div:first-child { z-index:2; max-width:66%; }.mag-cover > div > span,.mag-cover small { color:#bcb4ff; font-size:7px; font-weight:900; letter-spacing:1px; }.mag-cover h2 { margin:10px 0 7px; font-size:22px; line-height:1.25; }.mag-cover h2 b { color:var(--section-color); }.mag-cover p { margin:0; color:#929aaf; font-size:8px; line-height:1.7; }
.cover-art { position:absolute; left:-8px; top:0; width:42%; height:100%; }.cover-art i { position:absolute; z-index:2; top:50%; left:50%; color:#fff; font-size:27px; font-style:normal; font-weight:1000; transform:translate(-50%,-50%) rotate(-8deg); text-shadow:0 0 25px var(--section-color); }.cover-art b,.cover-art span { position:absolute; top:50%; left:50%; border:1px solid color-mix(in srgb,var(--section-color) 48%,transparent); border-radius:30%; transform:translate(-50%,-50%) rotate(20deg); animation:coverOrbit 8s linear infinite; }.cover-art b { width:88px; height:88px; }.cover-art span { width:60px; height:60px; animation-direction:reverse; }
.mag-story,.trend-card,.fact-card,.soon-card { margin-top:10px; border:1px solid rgba(255,255,255,.075); border-radius:18px; background:rgba(16,20,33,.86); }
.mag-story { display:flex; align-items:center; gap:14px; padding:15px; }.mag-number { color:var(--section-color); font-size:31px; font-weight:1000; opacity:.7; }.mag-story small,.trend-card small,.soon-card small,.mag-heading small { color:var(--section-color); font-size:7px; font-weight:900; letter-spacing:1.2px; }.mag-story h3,.trend-card h3,.soon-card h3,.mag-heading h3 { margin:3px 0; font-size:12px; }.mag-story p,.trend-card p,.soon-card p { margin:0; color:#858ea3; font-size:8px; line-height:1.6; }
.mag-block { margin-top:10px; border:1px solid rgba(255,255,255,.075); border-radius:18px; padding:14px; background:rgba(16,20,33,.78); }.mag-heading { display:flex; align-items:center; justify-content:space-between; }.mag-heading > span { color:#747d91; font-size:7px; }.picks-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }.picks-row button { display:flex; flex-direction:column; align-items:center; gap:5px; border:1px solid color-mix(in srgb,var(--section-color) 22%,transparent); border-radius:13px; padding:10px 4px; background:color-mix(in srgb,var(--section-color) 6%,transparent); color:#dfe1ec; font-size:8px; }.picks-row b { font-size:20px; }
.trend-card { display:flex; align-items:center; justify-content:space-between; padding:15px; }.trend-card strong { display:flex; flex-direction:column; align-items:center; font-size:25px; }.trend-card strong span { color:var(--section-color); font-size:8px; }
.fact-card { position:relative; overflow:hidden; padding:15px 16px; }.fact-card span { display:inline-block; border-radius:20px; padding:4px 8px; background:color-mix(in srgb,var(--section-color) 15%,transparent); color:var(--section-color); font-size:8px; font-weight:900; }.fact-card p { position:relative; z-index:2; max-width:82%; margin:8px 0 0; color:#bbc0cf; font-size:9px; line-height:1.7; }.fact-card > b { position:absolute; left:14px; bottom:-19px; color:var(--section-color); font-size:70px; opacity:.12; }
.soon-card { display:flex; align-items:center; justify-content:space-between; padding:15px; }.soon-card > span { display:flex; align-items:center; gap:5px; border:1px solid rgba(72,229,166,.2); border-radius:20px; padding:6px 8px; color:#68dbae; font-size:7px; white-space:nowrap; }.soon-card > span i { width:5px; height:5px; border-radius:50%; background:#48e5a6; animation:newsPulse 1.5s infinite; }
@keyframes coverOrbit { to { transform:translate(-50%,-50%) rotate(380deg); } }
.brand-mark { width: 46px; height: 46px; border-radius: 15px; box-shadow: 0 11px 30px rgba(96,72,235,.3); transform: rotate(-3deg); }
.brand-mark img { display:block; width:100%; height:100%; filter:drop-shadow(0 5px 8px rgba(0,0,0,.13)); }
.eyebrow { margin: 0 0 1px; color: var(--muted); font-size: 10px; }
h1 { margin: 0; font-size: 18px; letter-spacing: -.4px; }
.user-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #171c2c; color: #b9afff; font-size: 13px; font-weight: 800; }
.welcome { flex:0 0 auto; padding:15px 2px 11px; }
.welcome-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(51,218,150,.16); border-radius: 99px; background: rgba(51,218,150,.07); color: #7ae8b8; font-size: 9px; }
.welcome-pill i { width: 5px; height: 5px; border-radius: 50%; background: #41de9d; box-shadow: 0 0 8px #41de9d; }
.welcome > p:first-of-type { margin:0 0 3px; color:#aca2ff; font-size:10px; font-weight:700; }
.welcome h2 { margin:0 0 3px; font-size:clamp(19px,5.5vw,25px); line-height:1.3; letter-spacing:-.7px; }
.welcome h2 span { background: linear-gradient(90deg,#9b8dff,#6edbcc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome > p:last-child { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }
.featured { position: relative; display: flex; justify-content: space-between; min-height: 124px; margin: 4px 0 18px; overflow: hidden; border: 1px solid rgba(132,110,255,.22); border-radius: 22px; padding: 20px; background: linear-gradient(120deg,rgba(95,70,221,.35),rgba(20,26,47,.9) 60%,rgba(9,130,123,.2)); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.featured-copy { position: relative; z-index: 1; max-width: 72%; }
.featured-label { color: #b8afff; font-size: 9px; font-weight: 700; }
.featured h3 { margin: 8px 0 5px; font-size: 17px; }
.featured p { margin: 0; color: #9ca5bb; font-size: 10px; line-height: 1.6; }
.featured-art { position: relative; display: grid; place-items: center; width: 78px; }
.featured-art span { z-index: 2; display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: linear-gradient(145deg,#8a76ff,#4d3bc0); font-size: 23px; box-shadow: 0 12px 32px rgba(93,70,219,.42); transform: rotate(-8deg); }
.featured-art i,.featured-art b { position: absolute; border: 1px solid rgba(136,118,255,.24); border-radius: 50%; }
.featured-art i { width: 82px; height: 82px; }.featured-art b { width: 112px; height: 112px; }
.search-wrap { display: flex; align-items: center; gap: 10px; height: 49px; border: 1px solid var(--line); border-radius: 15px; padding: 0 14px; background: rgba(18,23,38,.82); transition: border-color .2s; }
.search-wrap:focus-within { border-color: rgba(123,100,255,.6); }
.search-wrap svg { width: 18px; fill: none; stroke: #7e879d; stroke-linecap: round; stroke-width: 1.7; }
.search-wrap input { width: 100%; border: 0; outline: 0; background: none; color: var(--text); font-size: 12px; }
.search-wrap input::placeholder { color: #697287; }
.categories { display: flex; gap: 7px; margin: 12px 0 24px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
.categories button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; background: rgba(18,23,38,.65); color: var(--muted); font-size: 10px; cursor: pointer; }
.categories button.active { border-color: rgba(125,103,255,.55); background: #6c57e1; color: #fff; box-shadow: 0 7px 20px rgba(92,71,205,.23); }
.page > section:last-of-type { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; padding-top:13px; }.section-title { display:flex; flex:0 0 40px; align-items:center; justify-content:space-between; padding:0 3px; }.section-title h3 { margin:1px 0 0; font-size:14px; letter-spacing:-.3px; }.tiny-label { display:block; color:#6e778b; font-size:6px; font-weight:900; letter-spacing:1.7px; }.count { border:1px solid rgba(255,255,255,.065); border-radius:20px; padding:5px 9px; background:rgba(255,255,255,.025); color:#818a9e; font-size:8px; }
.bot-grid { display:grid; flex:1 1 auto; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:9px; }
.bot-card { position:relative; display:grid; grid-template-columns:54px 1fr 68px; grid-template-rows:auto auto; align-content:center; align-items:center; column-gap:12px; min-height:0; overflow:hidden; text-align:right; color:var(--text); border:1px solid rgba(255,255,255,.075); border-radius:20px; padding:11px 12px; background:linear-gradient(110deg,color-mix(in srgb,var(--card-color) 9%,#171c2c),rgba(14,18,30,.97) 70%); cursor:pointer; box-shadow:0 10px 27px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025); transition:transform .18s,border-color .18s,background .18s; animation:cardIn .42s var(--delay) both; }
.bot-card::after { content:""; position:absolute; width:110px; height:110px; right:-65px; top:50%; border:1px solid color-mix(in srgb,var(--card-color) 18%,transparent); border-radius:50%; transform:translateY(-50%); box-shadow:0 0 0 15px color-mix(in srgb,var(--card-color) 3%,transparent),0 0 0 30px color-mix(in srgb,var(--card-color) 2%,transparent); }
.bot-card:active { transform: scale(.97); }.bot-card:hover { border-color: color-mix(in srgb,var(--card-color) 50%,transparent); background: rgba(24,30,49,.95); }
.card-shine { position:absolute; width:130px; height:90px; right:-20px; top:-45px; border-radius:50%; background:var(--card-color); filter:blur(55px); opacity:.13; }
.bot-icon { grid-row:1 / 3; display:block; width:52px; height:52px; margin:0; border-radius:16px; box-shadow:0 10px 24px color-mix(in srgb,var(--card-color) 24%,transparent); transform:rotate(-2deg); }.bot-icon img { display:block; width:100%; height:100%; border-radius:16px; }
.bot-status { position:absolute; top:10px; left:12px; color:#737d91; font-size:6px; font-weight:700; letter-spacing:.2px; }.bot-status i { display:inline-block; width:4px; height:4px; border-radius:50%; background:#39df9a; box-shadow:0 0 7px #39df9a; }
.bot-name { align-self:end; display:block; margin:0 0 2px; font-size:13px; }.bot-description { align-self:start; display:block; min-height:0; color:var(--muted); font-size:8px; line-height:1.45; }.open-label { z-index:2; grid-column:3; grid-row:1 / 3; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; margin:0; color:#8f98aa; font-size:7px; }.open-label b { display:grid; place-items:center; width:29px; height:29px; border:1px solid color-mix(in srgb,var(--card-color) 25%,transparent); border-radius:10px; background:color-mix(in srgb,var(--card-color) 11%,transparent); }.open-label svg { width:14px; fill:none; stroke:#d8d4f7; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bot-card { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:14px 12px 12px; text-align:center; }
.bot-card .bot-icon { display:grid; flex:0 0 auto; place-items:center; width:76px; height:76px; margin:0; overflow:hidden; border-radius:18px; transform:none; }
.bot-card .bot-icon img { grid-area:1/1; object-fit:cover; transition:transform .3s ease; }
.bot-card:hover .bot-icon img { transform:scale(1.07); }
.emoji-icon { grid-area:1/1; font-size:29px; line-height:1; }
.bot-card .bot-name { position:relative; z-index:3; display:block; width:100%; margin:1px 0 0; color:#f7f8ff; font-size:13px; font-weight:900; line-height:1.35; text-align:center; letter-spacing:-.15px; }
.bot-card .bot-description { position:relative; z-index:3; display:-webkit-box; width:92%; min-height:22px; margin:0 auto; overflow:hidden; color:#9099ad; font-size:8px; font-weight:500; line-height:1.5; text-align:center; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.bot-card::before { content:""; position:absolute; z-index:1; right:12%; bottom:7px; left:12%; height:48%; border-radius:50%; background:var(--card-color); filter:blur(38px); opacity:.055; pointer-events:none; }
.bot-card .open-label { position:absolute; top:9px; left:9px; display:block; margin:0; }
.bot-card .open-label b { width:25px; height:25px; }
.bot-card.disabled { cursor:default; opacity:.58; }
.bot-card.disabled .open-label { display:none; }
.like-button { position:absolute; z-index:4; top:9px; right:9px; display:flex; align-items:center; gap:4px; min-width:32px; height:25px; border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:0 6px; background:rgba(8,11,20,.62); color:#8d96aa; backdrop-filter:blur(8px); cursor:pointer; }
.like-button svg { width:12px; fill:none; stroke:currentColor; stroke-width:1.8; transition:.2s; }
.like-button b { font-size:7px; }
.like-button.liked { border-color:rgba(255,91,125,.38); color:#ff6685; background:rgba(255,73,111,.1); }
.like-button.liked svg { fill:currentColor; transform:scale(1.08); }
.like-button.loading { opacity:.45; pointer-events:none; }
body[data-section="snapchat"] .bot-grid { grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; overflow:hidden; padding:0; }
body[data-section="snapchat"] .bot-card { gap:3px; min-height:0; border-color:rgba(255,210,31,.32); border-radius:16px; padding:7px 8px 6px; background:linear-gradient(155deg,#171717 0%,#080808 70%); box-shadow:0 9px 20px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07); }
body[data-section="snapchat"] .bot-card::after { border-color:rgba(255,210,31,.3); box-shadow:0 0 0 15px rgba(255,210,31,.035),0 0 0 30px rgba(255,210,31,.018); }
body[data-section="snapchat"] .bot-card .bot-icon { width:58px; height:58px; border:2px solid #ffd21f; border-radius:15px; box-shadow:0 7px 18px rgba(255,210,31,.18); }
body[data-section="snapchat"] .bot-card .bot-name { margin:0; color:#fff; font-size:10px; line-height:1.2; }
body[data-section="snapchat"] .bot-card .bot-description { min-height:12px; color:#c9c9c9; font-size:6.5px; line-height:1.2; }
body[data-section="snapchat"] .bot-card .open-label { top:6px; left:6px; }
body[data-section="snapchat"] .bot-card .open-label b { width:21px; height:21px; border-color:rgba(255,210,31,.55); border-radius:7px; background:#ffd21f; }
body[data-section="snapchat"] .bot-card .open-label svg { width:11px; }
body[data-section="snapchat"] .bot-card .open-label svg { stroke:#080808; }
body[data-section="snapchat"] .like-button { top:6px; right:6px; min-width:27px; height:21px; padding:0 5px; border-color:rgba(255,210,31,.28); border-radius:7px; background:rgba(0,0,0,.72); color:#ffd21f; }
body[data-section="snapchat"] .like-button.liked { border-color:#ffd21f; background:#ffd21f; color:#080808; box-shadow:0 0 16px rgba(255,210,31,.28); }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }.empty-state span { display: block; font-size: 38px; }.empty-state strong { display: block; margin: 8px; color: var(--text); font-size: 14px; }.empty-state p { font-size: 10px; }
footer { display:flex; flex:0 0 auto; justify-content:center; align-items:center; gap:6px; height:21px; text-align:center; color:#5f687d; font-size:7px; }.footer-logo { direction:ltr; display:inline-flex; align-items:center; gap:3px; color:#8c7cff; font-weight:900; }footer a { color:var(--section-color,#8c7cff); font-size:8px; font-weight:900; letter-spacing:1px; text-decoration:none; text-shadow:0 0 10px color-mix(in srgb,var(--section-color,#8c7cff) 42%,transparent); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bannerFloat { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-7px) rotate(6deg); } }
@keyframes bannerSpin { to { transform:rotate(360deg); } }
@keyframes spinFirst { 0%,18%,100% { transform:rotate(0); } 70% { transform:rotate(360deg); } }
@keyframes flipMiddle { 0%,15%,100% { transform:rotateX(0); } 62% { transform:rotateX(360deg); } }
@keyframes walkLast { 0%,18%,100% { transform:translateX(0) rotate(0); } 38% { transform:translateX(3px) rotate(10deg); } 58% { transform:translateX(7px) rotate(-8deg); } 78% { transform:translateX(3px) rotate(7deg); } }
@keyframes cloudTravel { 0%,100% { transform:translateX(0) translateY(0) scale(1); } 18% { transform:translateX(-18px) translateY(-2px) scale(.94); } 34% { transform:translateX(0) translateY(0) scale(1); } 52% { transform:translateX(39px) translateY(-1px) scale(.97); } 70% { transform:translateX(76px) translateY(-2px) scale(.92); } 86% { transform:translateX(0) translateY(0) scale(1); } }
.service-ad { min-height:222px; }
.service-ad { isolation:isolate; min-height:205px; background-image:linear-gradient(90deg,rgba(7,10,19,.28),rgba(7,10,19,.8) 45%,rgba(7,10,19,.98) 100%),url("assets/services-background-v2.png"); background-position:center; background-size:cover; }
.service-ad::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(rgba(140,124,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(140,124,255,.055) 1px,transparent 1px); background-size:19px 19px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 88%); mask-image:linear-gradient(90deg,#000,transparent 88%); }
.service-ad::after { content:""; position:absolute; z-index:-1; width:190px; height:190px; left:-55px; top:-45px; border-radius:50%; background:var(--section-color); filter:blur(75px); opacity:.22; animation:serviceGlow 4s ease-in-out infinite; }
.service-copy { position:relative; z-index:3; display:flex; width:72%; max-width:72%!important; flex-direction:column; align-items:flex-start; }
.service-copy > span { color:#bdb4ff!important; font-size:6.5px!important; letter-spacing:1.3px!important; }
.service-copy h2 { margin:8px 0 0; font-size:19px; line-height:1.35; letter-spacing:-.45px; }
.service-copy h2 b { font-size:17px; font-weight:900; }
.service-list { display:grid; width:100%; grid-template-columns:1fr 1fr; gap:7px 10px; margin:11px 0 13px; }
.service-list i { display:flex; align-items:center; gap:5px; color:#d0d4df; font-size:7.5px; font-style:normal; font-weight:650; line-height:1.45; text-shadow:0 2px 5px rgba(0,0,0,.7); animation:serviceLine 3.2s ease-in-out infinite; }
.service-list i:nth-child(2) { animation-delay:.35s; }.service-list i:nth-child(3) { animation-delay:.7s; }.service-list i:nth-child(4) { animation-delay:1.05s; }
.service-list i b { color:var(--section-color); font-size:6px; text-shadow:0 0 8px var(--section-color); }
.service-tags { display:flex; flex-wrap:wrap; gap:5px; margin:9px 0 11px; }
.service-tags i { border:1px solid color-mix(in srgb,var(--section-color) 28%,transparent); border-radius:20px; padding:4px 7px; background:color-mix(in srgb,var(--section-color) 8%,transparent); color:#bec3d2; font-size:7px; font-style:normal; white-space:nowrap; animation:serviceTag 3s ease-in-out infinite; }
.service-tags i:nth-child(2) { animation-delay:.35s; }.service-tags i:nth-child(3) { animation-delay:.7s; }.service-tags i:nth-child(4) { animation-delay:1.05s; }
.service-copy > a { display:inline-flex; align-items:center; gap:7px; border:1px solid color-mix(in srgb,var(--section-color) 58%,transparent); border-radius:11px; padding:8px 11px; background:color-mix(in srgb,var(--section-color) 22%,rgba(7,10,19,.7)); color:#fff; font-size:8px; font-weight:850; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--section-color) 12%,transparent); backdrop-filter:blur(8px); }
.service-copy > a b { color:var(--section-color); font-size:11px; }
.service-copy > a strong { color:color-mix(in srgb,var(--section-color) 70%,#fff); font-size:7px; font-weight:700; direction:ltr; }
.service-art { opacity:.42; }.service-art > i { font-size:18px; }.code-pieces { direction:ltr; display:flex; align-items:center; justify-content:center; gap:1px; }.code-pieces u { display:inline-block; color:#fff; font-style:normal; text-decoration:none; transform-origin:center; text-shadow:0 0 18px var(--section-color); }.code-pieces u:nth-child(1) { animation:codeLeft 2.8s ease-in-out infinite; }.code-pieces u:nth-child(2) { color:var(--section-color); animation:codeMiddle 2.8s ease-in-out infinite; }.code-pieces u:nth-child(3) { animation:codeRight 2.8s ease-in-out infinite; }.service-art em { position:absolute; top:20%; left:20%; width:7px; height:7px; border-radius:50%; background:var(--section-color); box-shadow:0 0 13px var(--section-color); animation:serviceDot 2.2s ease-in-out infinite; }
.services-flip-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:8px; padding-bottom:2px; perspective:900px; }
.flip-service-card { min-width:0; aspect-ratio:1.18; border:0; padding:0; background:none; color:#fff; cursor:pointer; perspective:700px; }
.flip-service-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.25,1); }
.flip-service-card.flipped .flip-service-inner { transform:rotateY(180deg); }
.flip-front,.flip-back { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:1px solid color-mix(in srgb,var(--section-color) 30%,rgba(255,255,255,.08)); border-radius:16px; padding:8px 6px; background:linear-gradient(145deg,color-mix(in srgb,var(--section-color) 11%,#191e30),#0f1422); box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 9px 22px rgba(0,0,0,.2); text-align:center; opacity:1; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:opacity .16s ease; transform:rotateY(0) translateZ(1px); -webkit-font-smoothing:antialiased; }
.flip-front::after,.flip-back::after { content:""; position:absolute; width:70px; height:70px; right:-36px; bottom:-40px; border-radius:50%; background:var(--section-color); filter:blur(28px); opacity:.16; }
.flip-front b { position:relative; z-index:1; font-size:25px; line-height:1; filter:drop-shadow(0 5px 9px rgba(0,0,0,.25)); }
.flip-front strong { position:relative; z-index:1; margin-top:8px; font-size:9px; line-height:1.35; }
.flip-front small { position:relative; z-index:1; margin-top:4px; color:color-mix(in srgb,var(--section-color) 62%,#aaa); font-size:6px; }
.flip-back { opacity:0; transform:rotateY(180deg) translateZ(1px); border-color:color-mix(in srgb,var(--section-color) 58%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--section-color) 22%,#171c2d),#0e1320); }
.flip-service-card.flipped .flip-front { opacity:0; }
.flip-service-card.flipped .flip-back { opacity:1; }
.flip-back strong { position:relative; z-index:1; color:color-mix(in srgb,var(--section-color) 68%,#fff); font-size:9px; }
.flip-back p { position:relative; z-index:1; margin:5px 0 0; color:#d2d6e1; font-size:7.2px; line-height:1.5; }
.flip-service-card:active .flip-service-inner { scale:.97; }
@keyframes codeLeft { 0%,18%,100% { transform:translate(0) rotate(0); opacity:1; } 48% { transform:translate(-13px,-9px) rotate(-34deg); opacity:.48; } 72% { transform:translate(-4px,2px) rotate(-8deg); } }
@keyframes codeMiddle { 0%,18%,100% { transform:translate(0) rotate(0) scale(1); } 48% { transform:translateY(12px) rotate(180deg) scale(.7); opacity:.42; } 72% { transform:translateY(3px) rotate(20deg); } }
@keyframes codeRight { 0%,18%,100% { transform:translate(0) rotate(0); opacity:1; } 48% { transform:translate(13px,-9px) rotate(34deg); opacity:.48; } 72% { transform:translate(4px,2px) rotate(8deg); } }
@keyframes serviceTag { 50% { border-color:color-mix(in srgb,var(--section-color) 62%,transparent); color:#fff; transform:translateY(-2px); } }
@keyframes serviceDot { 50% { transform:translate(45px,80px) scale(.6); opacity:.35; } }
@keyframes serviceLine { 50% { color:#fff; transform:translateX(-2px); } }
@keyframes serviceGlow { 50% { opacity:.32; transform:scale(1.12); } }
@media (min-width:560px) { .profile-copy p { max-width:300px; }.bot-card { grid-template-columns:58px 1fr 80px; } }
@media (max-height:610px) { .app-bar { flex-basis:23px; }.profile-header { flex-basis:76px; padding:8px 10px; }.profile-photo-wrap { width:48px; height:48px; }.page > section:last-of-type { padding-top:8px; }.section-title { flex-basis:32px; }.bot-description { display:none; }.bot-icon { width:43px; height:43px; }.bot-card { grid-template-columns:44px 1fr 60px; padding:7px 10px; }.profile-copy p { margin-top:2px; }footer { height:15px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }