/* iiyama ProLite TW1025LASC bezel — proportions from the datasheet:
   product 259.5×178.5 mm, active screen 218.4×137.2 mm → ~9% bezel.
   Modelled at native 1280×800 screen + a proportional matte frame;
   the whole device is CSS-scaled to the viewport (see index.html). */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(1200px 700px at 50% 20%, #0e2335 0%, #06101a 55%, #030710 100%);
  color: #cdd8e3;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

/* Device: 1480×1000 = 1280×800 screen + ~100px bezel all round. */
.device {
  position: relative;
  width: 1480px;
  height: 1000px;
  transform-origin: center center;
}

/* RGB LED bar around the screen — the panel's signature. Colour is
   driven by the app state (postMessage from the iframe). --led is an
   "r,g,b" triplet so one box-shadow rule serves every state. */
.led {
  position: absolute;
  inset: -10px;
  border-radius: 46px;
  pointer-events: none;
  --led: 10, 214, 232; /* blue (idle) */
  box-shadow:
    0 0 26px 6px rgba(var(--led), 0.55),
    0 0 64px 18px rgba(var(--led), 0.28),
    inset 0 0 16px 3px rgba(var(--led), 0.40);
  animation: ledIdle 7s ease-in-out infinite;
}

/* Default: delicate, deliberately UNEVEN blue pulse (non-uniform
   keyframe stops so it never looks like a metronome). */
@keyframes ledIdle {
  0%   { opacity: 0.30; }
  14%  { opacity: 0.56; }
  29%  { opacity: 0.38; }
  46%  { opacity: 0.66; }
  61%  { opacity: 0.34; }
  78%  { opacity: 0.52; }
  100% { opacity: 0.30; }
}

.led.state-idle {
  --led: 10, 214, 232;
  animation: ledIdle 7s ease-in-out infinite;
}

/* Waiting for authorisation → amber, steady medium pulse. */
.led.state-awaiting {
  --led: 245, 158, 11;
  animation: ledAmber 1.5s ease-in-out infinite;
}
@keyframes ledAmber {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

/* Success → bright, clearly visible green flash. */
.led.state-success {
  --led: 94, 230, 160;
  box-shadow:
    0 0 34px 9px rgba(var(--led), 0.85),
    0 0 90px 26px rgba(var(--led), 0.45),
    inset 0 0 22px 5px rgba(var(--led), 0.6);
  animation: ledFlash 0.7s ease-out infinite alternate;
}
@keyframes ledFlash {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Error → strong steady red. */
.led.state-error {
  --led: 255, 107, 107;
  box-shadow:
    0 0 32px 8px rgba(var(--led), 0.8),
    0 0 80px 22px rgba(var(--led), 0.4),
    inset 0 0 20px 4px rgba(var(--led), 0.55);
  animation: none;
  opacity: 0.92;
}

.bezel {
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background:
    linear-gradient(180deg, #1a1a1c 0%, #0c0c0d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 2px 6px rgba(255,255,255,0.06),
    0 30px 70px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Front camera dot, top-centre (5 MP per datasheet). */
.cam {
  position: absolute;
  top: 44px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #2a2f33;
  box-shadow: inset 0 0 0 2px #15171a, 0 0 4px rgba(0,0,0,0.6);
}

.screen {
  width: 1280px;
  height: 800px;
  border-radius: 8px;
  overflow: hidden;
  background: #06101a;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.5);
}

#app {
  width: 1280px;
  height: 800px;
  border: 0;
  display: block;
}

/* Capacitive power button, bottom edge. */
.power {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 46px;
  height: 5px;
  margin-left: -23px;
  border-radius: 3px;
  background: #2a2f33;
}

.caption {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #8aa0b4;
  white-space: nowrap;
}
.caption strong { color: #cdd8e3; font-weight: 600; }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #0ad6e8;
  background: rgba(10,214,232,0.12);
  border: 1px solid rgba(10,214,232,0.45);
}