:root {
  --bg-0: #08101a;
  --bg-1: #0e1828;
  --bg-2: #05070c;
  --text: #ffffff;
  --muted: #d5dae5;
  --chip: rgba(15,24,39,.72);
  --glass-1: rgba(21,35,49,.18);
  --glass-2: rgba(16,26,41,.12);
  --stroke: rgba(255,255,255,.10);
  --tile-stroke: rgba(255,255,255,.08);
  --focus: #e0f2fe;
  --primary: #38bdf8;
  --secondary: #8b5cf6;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: #05070c;
  color: var(--text);
}
button { font: inherit; color: inherit; }
.app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--bg-0), var(--bg-1) 50%, var(--bg-2));
}
.bg-layer { position: absolute; inset: 0; pointer-events: none; }
.bg-a { background: linear-gradient(45deg, rgba(14,165,233,.14), transparent 45%, rgba(139,92,246,.12)); }
.bg-b { background: linear-gradient(0deg, rgba(0,0,0,.22), transparent 45%, rgba(0,0,0,.44)); }
.bg-c { background: radial-gradient(circle at 18% 18%, rgba(56,189,248,.13), transparent 26%), radial-gradient(circle at 85% 22%, rgba(139,92,246,.16), transparent 30%); }
.tv-app {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 16px 22px 14px;
}
.scene { display: none; width: 100%; height: 100%; }
.scene.active { display: block; }
.glass-panel {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(21,35,49,.20), rgba(11,18,30,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.topbar {
  height: 96px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 168px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
}
.logo-wrap {
  width: 168px; height: 52px; border-radius: 16px;
  background: rgba(0,0,0,.10); border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
}
.logo-img { max-width: 90%; max-height: 70%; object-fit: contain; }
.hotel-title { font-size: 22px; font-weight: 700; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-action {
  position: relative;
  width: 42px; height: 42px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}
.top-action img { width: 20px; height: 20px; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.chip {
  border-radius: 18px; padding: 8px 14px; background: rgba(15,24,39,.62); border: 1px solid rgba(255,255,255,.09);
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.clock-chip { font-size: 23px; }
.hero-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(420px, 1.1fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.hero-panel {
  min-height: 160px;
  border-radius: 28px;
  padding: 16px 22px;
  background: linear-gradient(180deg, rgba(21,33,49,.16), rgba(11,17,27,.11));
  border: 1px solid rgba(255,255,255,.07);
}
.welcome-panel { display: flex; flex-direction: column; justify-content: center; }
.welcome-panel h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.welcome-guest { margin: 6px 0 0; color: #e5e7eb; font-size: 16px; }
.welcome-message { margin: 10px 0 0; max-width: 42ch; color: var(--muted); font-size: 14px; line-height: 1.45; }
.promo-card {
  position: relative; border-radius: 26px; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
  background: linear-gradient(180deg, rgba(21,35,49,.22), rgba(11,18,30,.18));
  min-height: 160px; padding: 0; cursor: pointer;
}
.promo-card-wide { }
.promo-media { position: absolute; inset: 0; }
.movie-fill {
  background: linear-gradient(135deg, rgba(59,130,246,.38), rgba(17,24,39,.15) 45%, rgba(139,92,246,.35));
  display: flex; align-items: center; justify-content: center;
}
.movie-icon { width: 124px; opacity: .16; filter: invert(1); }
.movie-play {
  position: absolute; width: 64px; height: 64px; border-radius: 999px;
  background: rgba(15,23,42,.62); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 5px;
}
.slides-fill { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 12px; }
.slide-thumb { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); }
.slide-1 { background-image: linear-gradient(180deg, rgba(14,165,233,.75), rgba(3,7,18,.15)); }
.slide-2 { background-image: linear-gradient(180deg, rgba(139,92,246,.70), rgba(3,7,18,.15)); }
.slide-3 { background-image: linear-gradient(180deg, rgba(59,130,246,.68), rgba(3,7,18,.15)); }
.promo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.10) 45%, rgba(0,0,0,.75)); }
.promo-copy { position: absolute; inset: auto 0 0 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.promo-copy h2 { margin: 0; font-size: 18px; }
.promo-copy p { margin: 0; font-size: 12px; color: var(--muted); }
.tiles-grid, .more-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  min-height: 170px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(21,35,49,.20), rgba(11,18,30,.16));
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 45%, rgba(255,255,255,.01));
  pointer-events: none;
}
.tile-accent {
  position: absolute; inset: 0; border-radius: inherit; opacity: .28;
  background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(139,92,246,.06));
}
.tile-apps .tile-accent, .tile-more .tile-accent { background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(56,189,248,.06)); }
.tile-icon { position: relative; width: 52px; height: 52px; margin-bottom: 10px; }
.tile-title, .tile-subtitle { position: relative; display: block; }
.tile-title { font-size: 18px; font-weight: 700; color: #fff; }
.tile-subtitle { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.80); line-height: 1.35; }
.remote-hint {
  position: absolute; left: 22px; right: 22px; bottom: 12px;
  display: flex; gap: 22px; justify-content: center;
  color: rgba(255,255,255,.72); font-size: 13px;
}
.screen-header {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px;
}
.screen-header h1 { margin: 0; font-size: 30px; }
.screen-header p { margin: 6px 0 0; color: var(--muted); }
.back-chip {
  border: 1px solid rgba(255,255,255,.10); background: rgba(15,23,42,.42); border-radius: 999px; padding: 12px 16px; cursor: pointer;
}
.apps-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.app-card {
  min-height: 140px; border-radius: 24px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(21,35,49,.20), rgba(11,18,30,.16));
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
}
.app-logo {
  width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.netflix { background: #141414; color: #e50914; font-size: 32px; }
.youtube { background: #ff0000; color: #fff; font-size: 28px; }
.prime { background: #0f79af; color: #fff; font-size: 14px; text-transform: lowercase; }
.disney { background: #113ccf; color: #fff; font-size: 26px; }
.max { background: #1e1b4b; color: #fff; font-size: 20px; }
.globo { background: linear-gradient(135deg, #ff6b6b, #8b5cf6); color: #fff; font-size: 26px; }
.spotify { background: #1db954; color: #fff; font-size: 24px; }
.yt { background: #ff3d00; color: #fff; font-size: 24px; }
.cast-layout {
  height: 100%; display: grid; grid-template-columns: minmax(520px, 1fr) minmax(360px, 1fr); gap: 32px; align-items: center;
}
.cast-copy h1 { margin: 18px 0 0; font-size: 30px; }
.status-chip {
  display: inline-flex; align-items: center; margin-top: 12px; border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 700;
  background: rgba(15,24,39,.58); border: 1px solid rgba(255,255,255,.10);
}
.cast-protocol { margin: 18px 0 0; color: #93c5fd; font-size: 16px; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.guide-panel {
  margin-top: 14px; padding: 18px; border-radius: 28px; white-space: pre-line; line-height: 1.6;
  background: linear-gradient(180deg, rgba(21,35,49,.20), rgba(11,18,30,.12)); border: 1px solid rgba(255,255,255,.08);
  color: #e5e7eb; font-size: 18px;
}
.tv-btn {
  border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(21,35,49,.24), rgba(11,18,30,.12));
  border-radius: 16px; padding: 12px 18px; cursor: pointer;
}
.tv-btn.active { background: linear-gradient(180deg, rgba(56,189,248,.30), rgba(37,99,235,.24)); }
.payload-link { margin: 18px 0 0; color: #9ca3af; font-size: 12px; }
.payload-hint { margin: 8px 0 0; color: #c7cbd6; font-size: 13px; }
.cast-qr-wrap {
  height: min(72vh, 760px); border-radius: 28px; padding: 18px; display: flex; align-items: center; justify-content: center;
}
.qr-image { width: 100%; max-width: 620px; max-height: 100%; object-fit: contain; }
.overlay {
  position: absolute; inset: 0; background: rgba(2,6,23,.56); display: flex; align-items: center; justify-content: center; padding: 30px;
}
.overlay-card { position: relative; width: min(920px, 100%); min-height: 420px; border-radius: 28px; padding: 28px; }
.overlay-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: rgba(15,23,42,.42);
}
.overlay-content h2 { margin: 0 0 10px; font-size: 30px; }
.overlay-content p { color: #d5dae5; line-height: 1.6; }
.info-list { display: grid; gap: 12px; margin-top: 18px; }
.info-item {
  border-radius: 18px; border: 1px solid rgba(255,255,255,.08); padding: 14px 16px; background: rgba(15,23,42,.38);
}
.info-item strong { display: block; margin-bottom: 4px; }
.focusable { outline: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; }
.focused {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--focus), 0 16px 40px rgba(2,6,23,.45);
  border-color: rgba(224,242,254,.95) !important;
}
.top-action.focused {
  background: linear-gradient(180deg, rgba(56,189,248,.96), rgba(37,99,235,.92));
}
.back-chip.focused, .tv-btn.focused, .overlay-close.focused {
  background: linear-gradient(180deg, rgba(56,189,248,.28), rgba(37,99,235,.22));
}
.scene#scene-home { position: relative; }
@media (max-width: 1500px) {
  .hero-row { grid-template-columns: 1fr 1fr; }
  .welcome-panel { grid-column: 1 / -1; }
  .tiles-grid, .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}