/* =============================================================================
   qa-devices.css — device frames for the live demo (pure CSS, no images).
   Each device is drawn at its REAL pixel size inside `.qa-dev`, then the whole
   thing is scaled to fit its container by qa-stage.js (sets --s).
   ============================================================================= */
.qa-slot { position: relative; width: 100%; }
.qa-slot > .qa-dev { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, .5)); }
.qa-dev { --ink-status: #0a223d; --ind: rgba(10,34,61,.85); }
.qa-dev[data-ui="dark"] { --ink-status: #fff; --ind: rgba(255,255,255,.9); }
.qa-dev iframe { border: 0; display: block; background: #0b0d12; color-scheme: normal; }
.qa-dev .qa-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #0a223d; z-index: 1; transition: opacity .5s; }
.qa-dev .qa-loading img { width: 120px; opacity: .85; animation: qa-pulse 1.6s ease-in-out infinite; }
.qa-dev.ready .qa-loading { opacity: 0; pointer-events: none; }
@keyframes qa-pulse { 50% { opacity: .35; transform: scale(.96); } }

/* ---- iPhone ---------------------------------------------------------------- */
.qa-phone { width: 417px; height: 876px; padding: 12px; border-radius: 70px; position: relative;
  background: linear-gradient(145deg, #e6e7ea 0%, #a6a9b1 22%, #7d8089 50%, #b9bcc3 78%, #dfe0e4 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55) inset, 0 40px 80px -20px rgba(0,0,0,.55), 0 14px 30px -10px rgba(0,0,0,.4); }
.qa-phone::before, .qa-phone::after { content: ""; position: absolute; width: 4px; border-radius: 3px; background: #8d9098; }
.qa-phone::before { left: -3px; top: 150px; height: 64px; box-shadow: 0 90px 0 #8d9098; }
.qa-phone::after  { right: -3px; top: 220px; height: 96px; }
.qa-phone .screen { position: relative; width: 393px; height: 852px; border-radius: 58px; overflow: hidden; background: #000; box-shadow: 0 0 0 7px #05060a; }
.qa-phone .island { position: absolute; top: 12px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 22px; background: #000; z-index: 5; }
.qa-phone .island::after { content: ""; position: absolute; right: 16px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3550, #07090f 70%); }
.qa-phone .status { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 34px 0 42px; font: 600 16.5px/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; color: var(--ink-status); pointer-events: none; }
.qa-phone .status .sys { display: flex; align-items: center; gap: 6px; }
.qa-phone .status svg { height: 13px; fill: var(--ink-status); }
.qa-phone .home-ind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ind); z-index: 5; pointer-events: none; }

/* ---- Tablet (wall or portable) ------------------------------------------- */
.qa-tablet { width: 1052px; height: 668px; padding: 14px; border-radius: 34px; position: relative;
  background: linear-gradient(160deg, #1c1f26, #0a0b0f 60%, #16181d);
  box-shadow: 0 0 0 2px #2b2f38 inset, 0 0 0 1px rgba(255,255,255,.06), 0 38px 70px -24px rgba(0,0,0,.6); }
.qa-tablet .screen { width: 1024px; height: 640px; border-radius: 20px; overflow: hidden; position: relative; background: #000; }
.qa-tablet .screen iframe { transform: scale(.8); transform-origin: 0 0; }   /* 1280 x 800 page shown in a 1024 x 640 screen */
.qa-tablet .cam { position: absolute; top: 50%; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #20242e; transform: translateY(-50%); }
.qa-tablet.wall { box-shadow: 0 0 0 2px #2b2f38 inset, 0 0 0 1px rgba(255,255,255,.06), 0 30px 46px -26px rgba(0,0,0,.7), 0 70px 90px -40px rgba(0,0,0,.45); }
.qa-tablet.wall::after { /* shadow gap from the wall */
  content: ""; position: absolute; inset: -6px; border-radius: 40px; z-index: -1; background: rgba(0,0,0,.14); filter: blur(14px); }
.qa-tablet-stand { position: relative; padding-bottom: 96px; }
.qa-tablet.portable { transform: perspective(1800px) rotateX(4deg); transform-origin: 50% 100%; }
.qa-tablet-stand .stand { position: absolute; left: 50%; bottom: 0; width: 330px; margin-left: -165px; height: 130px; z-index: -1; }
.qa-tablet-stand .stand::before { content: ""; position: absolute; left: 50%; top: 0; width: 150px; height: 100px; margin-left: -75px;
  background: linear-gradient(180deg, #2a2d35, #14161b); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.qa-tablet-stand .stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #3a3e48, #15171c); box-shadow: 0 24px 40px -10px rgba(0,0,0,.55); }
.qa-batt { position: absolute; z-index: 6; top: 14px; right: 22px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font: 600 12px/1 system-ui; color: #cfd6e4; background: rgba(0,0,0,.45); }
.qa-batt i { display: block; width: 18px; height: 9px; border: 1.5px solid #cfd6e4; border-radius: 3px; position: relative; }
.qa-batt i::after { content: ""; position: absolute; inset: 1px; right: 5px; background: #5fd38a; border-radius: 1px; }

/* ---- TV ---------------------------------------------------------------------- */
.qa-tv { width: 1944px; height: 1104px; padding: 12px; border-radius: 10px; position: relative; background: linear-gradient(180deg, #17181c, #050507);
  box-shadow: 0 0 0 2px #2a2c33 inset, 0 40px 80px -24px rgba(0,0,0,.65); }
.qa-tv .screen { width: 1920px; height: 1080px; position: relative; overflow: hidden; background: #000; }
.qa-tv-wrap { position: relative; width: 1944px; height: 1196px; }
.qa-tv-wrap .qa-tv { position: absolute; left: 0; top: 0; }
.qa-tv-wrap .foot { position: absolute; left: 50%; bottom: 0; width: 520px; margin-left: -260px; height: 92px; }
.qa-tv-wrap .foot::before { content: ""; position: absolute; left: 50%; top: 0; width: 120px; height: 70px; margin-left: -60px; background: linear-gradient(180deg, #1a1b1f, #0b0b0d); }
.qa-tv-wrap .foot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 8px; background: linear-gradient(180deg, #2a2c33, #0e0f12); box-shadow: 0 18px 36px -10px rgba(0,0,0,.55); }
.qa-tv-ovl { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; color: #e8edf6; opacity: 0; pointer-events: none; transition: opacity .7s; font-family: system-ui, sans-serif; }
.qa-tv-ovl[data-mode="off"] { opacity: 1; pointer-events: auto; background: #020305; }
.qa-tv-ovl[data-mode="stream"] { opacity: 1; pointer-events: auto; background: radial-gradient(1200px 700px at 30% 20%, #1c3b66, #0a1426 70%); }
.qa-tv-ovl .led { position: absolute; left: 50%; bottom: 26px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 14px #c0392b; display: none; }
.qa-tv-ovl[data-mode="off"] .led { display: block; }
.qa-tv-ovl .inp { display: none; }
.qa-tv-ovl[data-mode="stream"] .inp { display: grid; gap: 14px; }
.qa-tv-ovl small { font-size: 26px; letter-spacing: .26em; opacity: .65; }
.qa-tv-ovl b { font: 600 92px/1.1 var(--font-head, system-ui); letter-spacing: -.02em; }
.qa-tv-ovl span { font-size: 30px; opacity: .7; }
.qa-tv::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: #3b3f49; }

/* ---- Handheld remote — drawn after the real hardware (photo): silver rim, slim screen, Back/Home/Power,
        D-pad ring with Vol and Ch columns, Mute/Mic/Menu, transport keys, four colour keys, logo. ------- */
.qa-remote { width: 407px; height: 1460px; padding: 28px 24px 0; border-radius: 52px 52px 66px 66px; position: relative;
  border: 5px solid transparent;
  background: linear-gradient(172deg, #1c1e23, #0c0d11 38%, #08090c) padding-box,
              linear-gradient(165deg, #e6e9ed, #9399a3 34%, #d0d5db 58%, #868d97) border-box;
  box-shadow: 0 44px 80px -26px rgba(0,0,0,.7), 0 14px 30px -10px rgba(0,0,0,.5); }
.qa-remote .screen { width: 349px; height: 582px; border-radius: 16px; overflow: hidden; background: #000; position: relative;
  box-shadow: 0 0 0 4px #040507, 0 0 0 5px #2b2f37; }
.qa-remote .keys { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; width: 349px; }
.qa-remote .keys > * { min-width: 0; }
/* Keys: glossy black pads with a crisp edge and bright white glyphs, like the real remote (clearly readable, not dark-on-dark). */
.qa-key { appearance: none; border: 0; cursor: pointer; color: #f3f6fb; display: grid; place-items: center; user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #343841 0%, #20232a 48%, #15171c 100%); border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.5), 0 5px 8px -4px rgba(0,0,0,.9);
  transition: transform .08s, background .15s, box-shadow .08s; }
.qa-key:hover { background: linear-gradient(180deg, #3f444e 0%, #262a32 48%, #191c21 100%); }
.qa-key:active, .qa-key.down { transform: translateY(1px); background: linear-gradient(180deg, #2a2d34, #181a1f);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4); }
.qa-key svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(185,210,255,.32)); }
.qa-key.flat { height: 58px; font: 500 32px/1 system-ui, sans-serif; text-shadow: 0 0 5px rgba(185,210,255,.3); }
.qa-remote .r1, .qa-remote .r3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); gap: 8px; }
.qa-remote .home, .qa-remote .mic { border-radius: 29px; background: linear-gradient(180deg, #2b2f36, #14161a); }
.qa-remote .pad { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 8px; height: 268px; }
.qa-remote .side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.qa-remote .side .qa-key { height: auto; border-radius: 12px; }
.qa-remote .ring { position: relative; justify-self: center; align-self: center; width: 208px; height: 208px; max-width: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #3c4048, #1a1c21 74%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.55), 0 12px 20px -8px rgba(0,0,0,.85); }
.qa-remote .ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.085) 0 2px, rgba(0,0,0,.26) 2px 4px); pointer-events: none; }
.qa-remote .ring .qa-key { position: absolute; background: none; box-shadow: none; width: 62px; height: 62px; border-radius: 50%; color: #e9eef6; }
.qa-remote .ring .qa-key:hover { background: rgba(255,255,255,.06); }
.qa-remote .ring .qa-key:active, .qa-remote .ring .qa-key.down { background: rgba(255,255,255,.1); transform: scale(.95); }
.qa-remote .ring .u { top: 8px; left: 73px; } .qa-remote .ring .d { bottom: 8px; left: 73px; }
.qa-remote .ring .l { left: 8px; top: 73px; } .qa-remote .ring .r { right: 8px; top: 73px; }
.qa-remote .ring .ok { left: 62px; top: 62px; width: 84px; height: 84px; color: #ffffff; font: 600 20px/1 system-ui, sans-serif; text-shadow: 0 0 6px rgba(185,210,255,.35);
  background: radial-gradient(circle at 50% 30%, #2e3138, #0e1013 78%); box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.22), 0 5px 9px -2px rgba(0,0,0,.9); }
.qa-remote .r4, .qa-remote .r5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qa-remote .r4 .qa-key, .qa-remote .r5 .qa-key { height: 56px; }
.qa-remote .clr i { display: block; width: 30px; height: 4px; border-radius: 3px; }
.qa-remote .clr.red i { background: #ff5a4d; box-shadow: 0 0 9px 1px rgba(255,90,77,.65); } .qa-remote .clr.green i { background: #3fe07f; box-shadow: 0 0 9px 1px rgba(63,224,127,.6); }
.qa-remote .clr.blue i { background: #4a95ff; box-shadow: 0 0 9px 1px rgba(74,149,255,.65); } .qa-remote .clr.yellow i { background: #ffcb3a; box-shadow: 0 0 9px 1px rgba(255,203,58,.6); }
.qa-remote .rlogo { position: absolute; left: 29px; right: 29px; bottom: 46px; display: grid; place-items: center; pointer-events: none; }
.qa-remote .rlogo img { height: 24px; width: auto; opacity: .85; }