html, body { height: 100%; margin: 0; background: #0b0f17; color: #eaf0ff; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; }
#app { height: 100%; display: flex; flex-direction: column; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { font-weight: 700; letter-spacing: .2px; }
.status { font-size: 12px; opacity: .85; }
.stage { flex: 1; display:flex; align-items:center; justify-content:center; position: relative; overflow:hidden; background:#000; }
.footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; opacity: .8; display:flex; gap:10px; align-items:center; }
.sep { opacity: .35; }
.card { width: min(520px, 92vw); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.card h1 { margin: 6px 0 8px; font-size: 22px; }
.card p { margin: 0 0 14px; opacity: .85; }
input { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); color:#fff; outline:none; font-size: 16px; text-transform: uppercase; }
button { width:100%; margin-top: 10px; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.14); color:#fff; font-weight: 700; cursor:pointer; }
button:hover { background: rgba(255,255,255,.18); }
.hint { margin-top: 10px; font-size: 12px; opacity: .85; min-height: 16px; }
.media { width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; }
.media img, .media video, .media iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
.media iframe { background: #000; }
.badge { position:absolute; top: 14px; right: 14px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }

/* svaki media layer ide preko cijelog stage-a */
.media { position: absolute; inset: 0; opacity: 0; transition: opacity 180ms ease; will-change: opacity; }

.media.is-active { opacity: 1; }

/* cover za slike i video */
.media img, .media video { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }

/* iframe (web) isto full */
.media iframe { width: 100%; height: 100%; border: 0; }