/* Device frames and the store-screenshot canvas. */

.device { position: absolute; }
.device .dev-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.device .frame { position: absolute; inset: 0; background: #0b0c0f; box-shadow: inset 0 0 0 1.5px #3a3d45, inset 0 0 0 4px #121318, 0 40px 90px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.4); }
.device.dev-iphone .frame { background: #16171b; box-shadow: inset 0 0 0 2px #6b6f78, inset 0 0 0 4px #2a2c32, inset 0 0 0 7px #050506, 0 40px 90px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.4); }
.device.dev-ipad .frame { background: #121316; box-shadow: inset 0 0 0 2px #5d6068, inset 0 0 0 5px #1d1e22, 0 40px 90px rgba(0,0,0,.55); }
.device.dev-fold .frame { background: #0e0f12; box-shadow: inset 0 0 0 2px #4a4d55, inset 0 0 0 5px #15161a, 0 40px 90px rgba(0,0,0,.55); }
.device.is-tv .frame { background: #07080a; box-shadow: inset 0 0 0 1px #2a2c33, 0 50px 120px rgba(0,0,0,.6); }
.device .screen { position: absolute; overflow: hidden; background: #000; isolation: isolate; }
.device .screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 35%); z-index: 100; }
.device .cam { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #050507; box-shadow: inset 0 0 0 2px #15171c, inset 2px 2px 3px rgba(80,110,160,.35); z-index: 120; }
.device .island { position: absolute; background: #000; border-radius: 20px; z-index: 120; }
.device .crease { position: absolute; top: 0; bottom: 0; left: 50%; width: 30px; margin-left: -15px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.035) 40%, rgba(0,0,0,.18) 50%, rgba(255,255,255,.035) 60%, transparent); z-index: 99; pointer-events: none; }
.device .btn-v { position: absolute; width: 4px; border-radius: 2px; background: #2a2c32; }
.device .btn-h { position: absolute; height: 4px; border-radius: 2px; background: #2a2c32; }
.device .stand { position: absolute; left: 0; right: 0; }
.device .dev-glow { position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, rgba(79,124,255,.55), rgba(52,72,190,.25) 60%, transparent); filter: blur(60px); transform: scale(1.25); }
.device.bare { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }

/* Canvas: one store screenshot at its exact export size. */
.shot { position: relative; overflow: hidden; color: #fff; font-family: 'IBM Plex Sans', Inter, system-ui, sans-serif; background: #0E1320; }
.shot .bg { position: absolute; inset: 0; }
.shot .copy { position: absolute; z-index: 20; }
.shot .headline { font-family: Sora, 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; margin: 0; outline: none; white-space: pre-line; }
.shot .headline em { font-style: normal; background: linear-gradient(90deg, #4F7CFF, #8AB4F8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shot .sub { font-weight: 500; color: #A9C6FF; margin-top: .55em; line-height: 1.3; outline: none; white-space: pre-line; }
.shot .brand { display: flex; align-items: center; gap: .4em; margin-bottom: .9em; }
.shot .pop { position: absolute; z-index: 30; }
.shot .tag { display: inline-flex; align-items: center; gap: .45em; border-radius: 999px; padding: .45em 1em .45em .75em; background: rgba(138,180,248,.12); border: 1px solid rgba(138,180,248,.35); color: #DCE7FF; font-weight: 600; white-space: nowrap; backdrop-filter: blur(8px); }
.shot .tag .dot { width: .8em; height: .8em; border-radius: 50%; background: #4F7CFF; box-shadow: 0 0 0 .18em rgba(138,180,248,.25); }
.shot .fine { position: absolute; z-index: 40; bottom: 0 !important; padding-top: 5em !important; padding-bottom: 2.2em !important; background: linear-gradient(transparent, rgba(6,8,17,.92) 55%); color: rgba(220,231,255,.55); font-weight: 500; text-align: center; left: 0; right: 0; }
.shot [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(138,180,248,.4); border-radius: 6px; }
.shot.exporting [contenteditable]:hover { box-shadow: none; }

/* Pop-out cards that break out of the device (Proton / TiviMate style). */
.popcard { background: #1A1F28; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3); color: #E3E6EB; font-family: Roboto, system-ui, sans-serif; overflow: hidden; }
.popcard.ios { font-family: -apple-system, 'SF Pro Text', Inter, system-ui, sans-serif; background: #26262A; }