/* ---------- devices ---------- */
.laptop{width:100%;position:relative}
.laptop .lid{background:linear-gradient(180deg,#1c1c1f,#0a0a0b);border-radius:22px 22px 10px 10px;padding:1.5% 1.5% 2%;box-shadow:0 0 0 1.5px #3a3a3f inset,0 30px 70px rgba(20,25,50,.22),0 8px 20px rgba(20,25,50,.12)}
.scr{position:relative;overflow:hidden;background:#0c0e13;border-radius:6px}
.laptop .scr{aspect-ratio:16/10}
.scr>.ui{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,.5))}
.laptop .base{position:relative;width:112%;margin-left:-6%;height:0;padding-top:2.3%;background:linear-gradient(180deg,#e9eaee 0%,#c9cbd1 55%,#a9abb3 100%);border-radius:2px 2px 50% 50%/2px 2px 100% 100%;box-shadow:0 18px 30px rgba(20,25,50,.18)}
.laptop .base::after{content:"";position:absolute;left:43%;top:0;width:14%;height:38%;background:linear-gradient(180deg,#b5b7be,#d2d4d9);border-radius:0 0 10px 10px}
.phone{position:relative;background:#0a0a0b;border-radius:13%/6.2%;padding:3.6%;box-shadow:0 0 0 1.5px #3a3a3f inset,0 0 0 4px #d6d7dc,0 30px 60px rgba(20,25,50,.25)}
.phone .scr{aspect-ratio:390/844;border-radius:10%/4.6%}
.phone .island{position:absolute;z-index:5;left:50%;top:5.2%;width:30%;height:3.2%;transform:translateX(-50%);background:#000;border-radius:20px}

/* ---------- app UI (dark) ---------- */
.ui{--u-bg:#0c0e13;--u-p:#141821;--u-p2:#1a1f2b;--u-b:rgba(255,255,255,.07);--u-t:#eef1f7;--u-m:#8b92a3;--u-acc:linear-gradient(100deg,#3f7bff,#8a5cff 60%,#d95cff);
  --r-blue:#4b7bff;--r-purple:#8c5cff;--r-pink:#d64ce8;--r-red:#ff4d5e;--r-gold:#f2b640;
  background:radial-gradient(1000px 500px at 80% -10%,rgba(122,92,255,.18),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(10,108,255,.12),transparent 60%),var(--u-bg);
  color:var(--u-t);font-family:"Inter";font-size:14px;overflow:hidden}
.ui *{letter-spacing:-.005em}
.u-top{height:64px;display:flex;align-items:center;gap:28px;padding:0 28px;border-bottom:1px solid var(--u-b);background:rgba(12,14,19,.7)}
.u-logo{display:flex;align-items:center;gap:10px;font-family:"InterD";font-weight:700;font-size:18px}
.u-logo i{width:28px;height:28px;border-radius:8px;background:var(--u-acc);position:relative}
.u-logo i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff;opacity:.9}
.u-nav{display:flex;gap:6px}
.u-nav span{padding:8px 14px;border-radius:9px;color:var(--u-m);font-weight:500}
.u-nav span.on{color:var(--u-t);background:rgba(255,255,255,.06)}
.u-sp{flex:1}
.u-search{width:260px;height:38px;border-radius:10px;background:var(--u-p);border:1px solid var(--u-b);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--u-m)}
.u-search svg{width:16px;height:16px;fill:none;stroke:#8b92a3;stroke-width:2}
.u-bal{display:flex;align-items:center;gap:10px}
.u-bal b{font-weight:650;font-variant-numeric:tabular-nums}
.u-btn{height:38px;padding:0 16px;border-radius:10px;background:var(--u-acc);color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.u-btn.ghost{background:rgba(255,255,255,.07);color:var(--u-t)}
.u-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ffb36b,#ff5c9a);border:2px solid rgba(255,255,255,.15)}
.u-live{height:96px;display:flex;align-items:center;gap:10px;padding:0 28px;border-bottom:1px solid var(--u-b);overflow:hidden;position:relative}
.u-live .lab{flex:none;width:72px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--u-m)}
.u-live .lab::before{content:"";width:8px;height:8px;border-radius:50%;background:#22d07a;box-shadow:0 0 10px #22d07a}
.u-live .row{display:flex;gap:8px}
.drop{flex:none;width:120px;height:76px;border-radius:10px;background:linear-gradient(180deg,var(--u-p2),var(--u-p));position:relative;overflow:hidden;border-bottom:2px solid var(--rc)}
.drop::before{content:"";position:absolute;inset:0;background:radial-gradient(80px 50px at 50% 100%,color-mix(in srgb,var(--rc) 45%,transparent),transparent 70%)}
.drop img{position:absolute;left:10%;top:8%;width:80%;height:62%;object-fit:contain}
.drop span{position:absolute;left:8px;bottom:5px;font-size:10px;color:var(--u-m);white-space:nowrap}
.drop.new{animation:dropin .8s cubic-bezier(.2,.8,.1,1)}
@keyframes dropin{from{margin-left:-128px;opacity:0}to{margin-left:0;opacity:1}}
.r-blue{--rc:var(--r-blue)}.r-purple{--rc:var(--r-purple)}.r-pink{--rc:var(--r-pink)}.r-red{--rc:var(--r-red)}.r-gold{--rc:var(--r-gold)}
.u-body{padding:22px 28px}
.u-hero{height:200px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(110deg,#1b2140 0%,#2a1f55 55%,#40205a 100%);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 40px}
.u-hero h4{font-family:"InterD";font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.u-hero p{color:#b9bfd0;font-size:15px;margin:10px 0 18px}
.u-hero img{position:absolute;right:60px;top:-6px;height:220px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.u-hero .tag{position:absolute;right:330px;top:30px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:600}
.u-filt{display:flex;gap:8px;margin:22px 0 16px;align-items:center}
.u-filt span{padding:8px 14px;border-radius:999px;background:var(--u-p);border:1px solid var(--u-b);color:var(--u-m);font-weight:500;font-size:13px}
.u-filt span.on{background:#fff;color:#0c0e13;border-color:#fff}
.u-filt .sort{margin-left:auto}
.u-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.u-case{border-radius:14px;background:linear-gradient(180deg,var(--u-p2),var(--u-p));border:1px solid var(--u-b);padding:12px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.u-case img{width:88%;margin:4px 0 2px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.u-case b{font-size:13.5px;font-weight:600}
.u-case em{font-style:normal;font-size:12.5px;font-weight:650;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07)}
.u-case .hot{position:absolute;left:10px;top:10px;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;background:#ff4d5e;letter-spacing:.04em}

/* case open */
.u-open{padding:26px 28px}
.u-crumb{color:var(--u-m);font-size:13px;margin-bottom:14px}
.u-oh{display:flex;align-items:center;gap:22px}
.u-oh img{width:120px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.u-oh h4{font-family:"InterD";font-size:30px;font-weight:700;letter-spacing:-.02em}
.u-oh p{color:var(--u-m);font-size:13.5px;margin-top:4px}
.u-oh .fair{margin-left:auto;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;background:rgba(34,208,122,.1);color:#5fe3a1;font-weight:600;font-size:13px;border:1px solid rgba(34,208,122,.25)}
.u-reel{margin:22px 0 18px;height:190px;border-radius:16px;background:linear-gradient(180deg,#10131a,#0b0d12);border:1px solid var(--u-b);position:relative;overflow:hidden}
.u-reel::before,.u-reel::after{content:"";position:absolute;top:0;bottom:0;width:180px;z-index:3;pointer-events:none}
.u-reel::before{left:0;background:linear-gradient(90deg,#0b0d12,transparent)}
.u-reel::after{right:0;background:linear-gradient(-90deg,#0b0d12,transparent)}
.u-reel .mark{position:absolute;z-index:4;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,#f2b640,#ffde8a,#f2b640);box-shadow:0 0 18px rgba(242,182,64,.8)}
.u-reel .mark::before,.u-reel .mark::after{content:"";position:absolute;left:-7px;border:8.5px solid transparent}
.u-reel .mark::before{top:0;border-top:10px solid #f2b640}
.u-reel .mark::after{bottom:0;border-bottom:10px solid #f2b640}
.u-strip{position:absolute;top:15px;left:0;display:flex;gap:10px;will-change:transform}
.ri{flex:none;width:170px;height:160px;border-radius:12px;background:linear-gradient(180deg,var(--u-p2),var(--u-p));position:relative;overflow:hidden;border-bottom:3px solid var(--rc);transition:box-shadow .5s,transform .5s}
.ri::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 50% 100%,color-mix(in srgb,var(--rc) 40%,transparent),transparent 70%)}
.ri img{position:absolute;left:8%;top:12%;width:84%;height:56%;object-fit:contain}
.ri b{position:absolute;left:12px;bottom:26px;font-size:12px;font-weight:600}
.ri span{position:absolute;left:12px;bottom:9px;font-size:11px;color:var(--u-m)}
.ri.win{box-shadow:0 0 0 2px var(--rc),0 0 40px color-mix(in srgb,var(--rc) 60%,transparent);transform:scale(1.04)}
.u-act{display:flex;gap:10px;justify-content:center;align-items:center}
.u-act .u-btn{height:46px;padding:0 26px;font-size:15px}
.u-act .x{color:var(--u-m);font-size:13px;margin:0 6px}
.u-cont{margin-top:22px}
.u-cont h5{font-size:14px;font-weight:600;color:var(--u-m);margin-bottom:12px;display:flex;justify-content:space-between}
.u-items{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.u-items .ri{width:auto;height:120px}
.u-items .ri img{top:8%;height:52%}
.u-items .ri b{bottom:24px;font-size:11.5px}
.u-items .ri span{bottom:8px;font-size:10.5px}
.u-items .ri i{position:absolute;right:8px;top:8px;font-style:normal;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.35);color:#dfe3ec}

/* ---------- refined device frames (v2) ---------- */
.laptop .lid{background:#0b0b0d;border-radius:3.2%/5%;padding:1.25% 1.25% 1.9%;box-shadow:0 0 0 2px #b9bac0,0 0 0 3px #e4e5e9,0 40px 80px rgba(20,25,50,.20),0 10px 24px rgba(20,25,50,.10)}
.laptop .scr{border-radius:.6%/1%}
.laptop .scr::before{content:"";position:absolute;z-index:6;left:50%;top:0;width:13%;height:3.6%;transform:translateX(-50%);background:#0b0b0d;border-radius:0 0 10px 10px}
.laptop .base{width:116%;margin-left:-8%;padding-top:2.1%;background:linear-gradient(180deg,#f0f1f4 0%,#d7d8dd 40%,#a7a9b0 100%);border-radius:3px 3px 40% 40%/3px 3px 100% 100%;box-shadow:0 24px 40px rgba(20,25,50,.20)}
.laptop .base::after{left:42%;width:16%;height:42%;background:linear-gradient(180deg,#a9abb2,#cfd1d6);border-radius:0 0 12px 12px}
.phone{background:#0b0b0d;border-radius:15%/7%;padding:3.4%;box-shadow:0 0 0 2px #b9bac0,0 0 0 4px #e4e5e9,0 40px 80px rgba(20,25,50,.25)}
.phone .scr{border-radius:12%/5.6%}
.phone .island{top:4.6%;width:28%;height:3.4%}

/* ---------- phone win screen ---------- */
.pw{display:flex;flex-direction:column;align-items:center;padding:62px 22px 26px;background:radial-gradient(420px 420px at 50% 34%,rgba(255,77,94,.28),transparent 65%),#0c0e13}
.pw-top{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:15px}
.pw-top .bk{font-size:28px;line-height:1;color:var(--u-m);width:60px}
.pw-top .bal{width:60px;text-align:right;font-weight:650;font-size:13px;white-space:nowrap}
.pw-win{position:relative;width:330px;height:300px;margin-top:22px}
.pw-win .halo{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 55%,transparent),transparent);animation:halo 3s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.12);opacity:.8}}
.pw-win img{position:absolute;left:0;top:18%;width:100%;height:64%;object-fit:contain;transform:rotate(-10deg);filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}
.pw-rar{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff6b78}
.pw-name{font-family:"InterD";font-weight:700;font-size:30px;letter-spacing:-.02em;margin-top:6px}
.pw-price{font-size:18px;font-weight:600;color:#cfd3dc;margin-top:4px}
.pw-btns{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:30px}
.pw-btns .u-btn{height:52px;justify-content:center;font-size:16px;border-radius:14px}
.pw-more{margin-top:18px;font-size:14px;color:var(--u-m)}
.pw-fair{margin-top:auto;font-size:13px;color:#5fe3a1;font-weight:600}