/* Live-site showcase (browser + phone) inside the case dialog */
.site-show{margin:0 22px 28px;border:1px solid #333;border-radius:14px;overflow:hidden;background:#081230}
.site-show-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #ffffff1f;font-size:10px;letter-spacing:.12em;color:#b9bfd0;background:#0b1636}
.site-show-head>span{display:flex;align-items:center;gap:9px}
.site-show-head .live-dot{background:#c9a45c;box-shadow:0 0 12px #c9a45caa}
.site-show-head a{letter-spacing:.04em;font-size:12px;color:var(--yellow);border-bottom:1px solid #ffe50070;padding-bottom:3px;white-space:nowrap}
.ss-stage{position:relative;height:clamp(440px,46vw,600px);overflow:hidden;background:radial-gradient(90% 80% at 22% 0%,#20367a 0%,#0c1a42 52%,#060d24 100%)}
.ss-stage:after{content:'';position:absolute;right:-8%;bottom:-30%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c9a45c33,transparent 65%);pointer-events:none}
.ss-browser{position:absolute;left:6%;top:9%;width:71%;bottom:0;display:flex;flex-direction:column;background:#f3f1ec;border-radius:12px 12px 0 0;overflow:hidden;box-shadow:0 30px 90px #000a,0 0 0 1px #ffffff14;z-index:1}
.ss-bar{flex:none;height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#e7e3da;border-bottom:1px solid #d6d0c3}
.ss-bar i{width:10px;height:10px;border-radius:50%;background:#cdc6b7}
.ss-url{margin:0 auto;transform:translateX(-24px);font-size:11px;color:#6b6457;background:#f8f6f1;border-radius:6px;padding:4px 44px;white-space:nowrap}
.ss-screen{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:none;background:#f3f1ec}
.ss-screen::-webkit-scrollbar{display:none}
.ss-screen:focus-visible{box-shadow:inset 0 0 0 3px var(--blue)}
.ss-screen img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.ss-browser .ss-screen{flex:1}
.ss-phone{position:absolute;right:6%;bottom:7%;width:clamp(150px,19%,236px);aspect-ratio:9/19;padding:9px;background:#0e0e0e;border-radius:34px;box-shadow:0 30px 80px #000c,inset 0 0 0 1px #3a3a3a;z-index:2}
.ss-phone .ss-screen{height:100%;border-radius:26px}
.ss-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:32%;height:15px;border-radius:10px;background:#0e0e0e;z-index:3;pointer-events:none}
.ss-play{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:7px;border:1px solid #ffffff55;border-radius:100px;background:#060d24b3;backdrop-filter:blur(8px);color:#fff;font:inherit;font-size:11px;padding:7px 13px;cursor:pointer}
.ss-play span{font-size:9px}
.ss-play:hover{border-color:#c9a45c;color:#e2c58a}
.site-show-note{margin:0;padding:14px 18px 16px;font-size:12px;line-height:1.7;color:#9aa1b5;border-top:1px solid #ffffff1f;background:#0b1636}
@media(max-width:650px){
  .site-show{margin:0 10px 20px}
  .site-show-head{padding:12px 14px;font-size:8px}
  .site-show-head a{font-size:11px}
  .ss-stage{height:430px}
  .ss-browser{left:4%;top:6%;width:80%}
  .ss-bar{height:26px;gap:5px;padding:0 10px}
  .ss-bar i{width:7px;height:7px}
  .ss-url{font-size:9px;padding:3px 18px;transform:none}
  .ss-phone{width:38%;right:4%;bottom:5%;padding:6px;border-radius:24px}
  .ss-phone .ss-screen{border-radius:19px}
  .ss-notch{top:11px;height:10px}
  .ss-play{left:12px;bottom:12px}
  .site-show-note{padding:12px 14px}
}