/* Mini product screens used by the style samples (illustrative UI, not real data). */
.wg{background:#fff;color:#0b1410;border-radius:18px;padding:16px;font:500 13px/1.4 'General Sans',system-ui,sans-serif;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 50px -24px rgba(0,0,0,.45);text-align:left}
.wg *{box-sizing:border-box}
.wg-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;margin-bottom:12px;letter-spacing:-.01em}
.wg-h img{width:24px;height:24px;border-radius:50%}
.wg-h small{margin-left:auto;font:500 10.5px 'General Sans',sans-serif;color:#7e8b84;font-weight:500}
.wg .mono{font-family:'General Sans',sans-serif;font-variant-numeric:tabular-nums}
.wg .mut{color:#7e8b84;font-size:11.5px}
.wg .ok{color:#0c8f52;font-weight:700}
.wg .pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;background:#e4f6ec;color:#0c8f52;font-size:11px;font-weight:700}
.wg .pill.o{background:#fff1e5;color:#c25a0a}
.wg .btnx{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:9px;background:#0b1410;color:#fff;font-size:11.5px;font-weight:700}
/* domains */
.ds{display:flex;align-items:center;height:40px;border:1.5px solid #0b1410;border-radius:12px;padding:0 4px 0 12px;gap:8px;margin-bottom:8px}
.ds span{flex:1;font-weight:600}.ds span i{display:inline-block;width:1.5px;height:15px;background:#7b52ff;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dr{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;border-top:1px solid #eef0ec;font-weight:600}
.dr b{font-weight:700}.dr s{color:#9aa49f;font-weight:500;margin-right:6px;font-size:11px}
/* vps */
.spark{width:100%;height:54px;display:block}
.bar{height:6px;border-radius:6px;background:#eef0ec;overflow:hidden;margin:4px 0 9px}.bar i{display:block;height:100%;border-radius:6px;background:var(--bc,#1dbf73)}
.kv{display:flex;justify-content:space-between;font-size:11.5px;color:#4b5852}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cell{background:#f6f7f4;border-radius:10px;padding:8px 10px}.cell b{display:block;font-size:15px;letter-spacing:-.02em}.cell span{font-size:10.5px;color:#7e8b84}
/* steps */
.steps{display:flex;flex-direction:column;gap:7px}
.st{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600}
.st i{width:18px;height:18px;border-radius:50%;border:1.5px solid #cfd5d1;flex:none;display:grid;place-items:center;font-style:normal;font-size:10px}
.st.d i{background:#1dbf73;border-color:#1dbf73;color:#fff}.st.a i{border-color:#fc8230;box-shadow:0 0 0 3px #ffe8d6}
.st.d{color:#7e8b84;text-decoration:line-through}
/* person */
.pp{display:flex;gap:11px;align-items:center}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none}
.pp b{display:block;font-size:13.5px}.stars{color:#f5a524;font-size:11px;letter-spacing:1px}
/* chart */
.bars{display:flex;align-items:flex-end;gap:5px;height:60px;margin-top:8px}
.bars i{flex:1;border-radius:5px 5px 2px 2px;background:#ffd3a3}.bars i:last-child{background:#ffa539}
.big{font-size:24px;font-weight:800;letter-spacing:-.04em}
/* chat */
.msg{padding:8px 11px;border-radius:12px;font-size:12px;margin-bottom:7px;max-width:92%}
.msg.u{background:#0b1410;color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.a{background:#eef3ff;color:#1b3a8a;border-bottom-left-radius:4px}
.typing{display:inline-flex;gap:3px}.typing i{width:5px;height:5px;border-radius:50%;background:#4f8bff;animation:tp 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes tp{30%{transform:translateY(-3px);opacity:.4}}
/* course */
.cv{height:74px;border-radius:12px;margin-bottom:10px;background:linear-gradient(135deg,#2fb3cf,#0b6f8a);position:relative;overflow:hidden}
.cv::after{content:"LIVE";position:absolute;left:10px;top:10px;background:#ff3b3b;color:#fff;font:800 9.5px 'General Sans';padding:3px 6px;border-radius:5px}
.cv::before{content:"";position:absolute;right:-20px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.18)}
/* books */
.books{display:flex;gap:8px;align-items:flex-end;height:96px}
.bk{flex:1;border-radius:4px 8px 8px 4px;padding:8px 6px;color:#fff;font:800 9.5px/1.15 'General Sans';display:flex;align-items:flex-end;box-shadow:inset 4px 0 0 rgba(0,0,0,.18)}
/* product */
.prod{height:86px;border-radius:12px;background:radial-gradient(circle at 50% 60%,#fff 0 28%,transparent 29%),linear-gradient(135deg,#fff3b0,#ffe45c);margin-bottom:10px;position:relative}
.prod::after{content:"-30%";position:absolute;right:8px;top:8px;background:#0b1410;color:#ffe45c;font:800 10.5px 'General Sans';padding:4px 7px;border-radius:7px}
.prod::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-16px 0 0 -19px;border-radius:10px;background:#0b1410;transform:rotate(-12deg)}
/* games */
.gg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gg i{aspect-ratio:1.3;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:20px}
/* cart */
.ci{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #eef0ec;font-size:12px;font-weight:600}
.ci i{width:26px;height:26px;border-radius:8px;flex:none}
.ci b{margin-left:auto}
/* real content screens: stores, yayvo, games */
.wg .mk{display:flex;flex-direction:column;gap:7px;margin:12px 0}
.wg .mk div{display:grid;grid-template-columns:76px 1fr 44px;align-items:center;gap:8px;font-size:11.5px;font-weight:600}
.wg .mk i{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--bc) var(--w),#eef0ec 0)}
.wg .mk b{text-align:right}
.wg .ts{display:flex;gap:10px;align-items:center;padding-top:10px;border-top:1px solid #eef0ec}
.wg .ts img{width:40px;height:40px;border-radius:9px;object-fit:cover;object-position:50% 20%;flex:none}
.wg .ts b{display:block;font-size:12px;line-height:1.25}
.wg .pimg{position:relative;height:124px;border-radius:12px;overflow:hidden;margin-bottom:10px;background:#f3efe6}
.wg .pimg img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.wg .pimg span{position:absolute;right:8px;top:8px;background:#0b1410;color:#ffe45c;font:800 10.5px 'General Sans',sans-serif;padding:4px 7px;border-radius:7px}
.wg .gg{gap:6px}
.wg .gt{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.wg .gt img{width:100%;height:100%;object-fit:cover}
.wg .gt em{position:absolute;left:0;right:0;bottom:0;padding:14px 7px 5px;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;line-height:1.15;background:linear-gradient(transparent,rgba(0,0,0,.75))}