/* src/app/globals.css */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hotel-font-0.ttf) format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hotel-font-1.ttf) format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hotel-font-2.ttf) format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hotel-font-3.ttf) format("truetype");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hotel-font-4.ttf) format("truetype");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hotel-font-5.ttf) format("truetype");
}
:root {
  --bg:#101a1b;
  --panel:#1a2829;
  --gold:#ddbd83;
  --text:#f4f1e9;
  --muted:#a7b4b1;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "DM Sans",
    Arial,
    sans-serif;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
}
button:focus {
  outline: 4px solid #f7d898;
  outline-offset: 6px;
  box-shadow: 0 0 0 10px rgba(221,189,131,0.12549);
  transform: translateY(-2px);
}
button:hover {
  filter: brightness(1.12);
}
button {
  transition: transform .15s, background .15s;
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-family:
    "Playfair Display",
    Georgia,
    serif;
  font-weight: 400;
  font-size: calc(3.9vw * var(--tv-font-scale,1));
  letter-spacing: -1.5px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  h1 {
    font-size: calc(max(36px, min(3.9vw, 66px)) * var(--tv-font-scale,1));
  }
}
h2 {
  font-size: calc(28px * var(--tv-font-scale,1));
  font-weight: 500;
}
.tv-shell {
  min-height: 100vh;
  padding: 0 4.8vw;
  background:
    radial-gradient(
      ellipse at 90% 20%,
      rgba(41,66,59,0.33333),
      transparent 55%);
  display: flex;
  flex-direction: column;
}
header {
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07451);
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: calc(21px * var(--tv-font-scale,1));
  letter-spacing: 4px;
}
.brand small {
  display: block;
  font-size: calc(9px * var(--tv-font-scale,1));
  letter-spacing: 3.7px;
  margin-top: 9px;
  color: var(--gold);
}
.brand-mark {
  font-family: Georgia, serif;
  font-size: calc(42px * var(--tv-font-scale,1));
  color: var(--gold);
  letter-spacing: -12px;
  border: 1px solid rgba(221,189,131,0.31373);
  width: 64px;
  height: 64px;
  text-align: center;
  padding-right: 12px;
  line-height: 64px;
}
.brand-mark span {
  font-size: calc(30px * var(--tv-font-scale,1));
}
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: calc(12px * var(--tv-font-scale,1));
  letter-spacing: 2px;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.room-pill {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: 16px;
  background: rgba(255,255,255,0.02745);
  border: 1px solid rgba(255,255,255,0.08235);
  border-radius: 6px;
  padding: 15px 21px;
  color: var(--text);
  font-size: calc(14px * var(--tv-font-scale,1));
  letter-spacing: 2px;
}
.cart-shortcut {
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 6px;
  color: var(--gold);
}
main {
  flex: 1;
  padding: 40px 0 34px;
  animation: appear .3s ease;
}
footer {
  border-top: 1px solid rgba(255,255,255,0.07451);
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: calc(12px * var(--tv-font-scale,1));
  gap: 20px;
}
.key {
  display: inline-block;
  margin: 0 7px 0 18px;
  border: 1px solid rgba(255,255,255,0.1451);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: calc(11px * var(--tv-font-scale,1));
  color: #d7ddd9;
}
.key:first-child {
  margin-left: 0;
}
.footer-dot {
  color: var(--gold);
  margin: 0 14px;
  font-size: calc(8px * var(--tv-font-scale,1));
}
.eyebrow {
  color: var(--gold);
  font-size: calc(12px * var(--tv-font-scale,1));
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 17px;
}
.welcome {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  min-height: calc(100vh - 280px);
  grid-gap: 20px;
  gap: 20px;
}
.welcome h1 {
  font-size: calc(4.8vw * var(--tv-font-scale,1));
  line-height: 1.19;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .welcome h1 {
    font-size: calc(max(46px, min(4.8vw, 82px)) * var(--tv-font-scale,1));
  }
}
.welcome h1 em {
  color: var(--gold);
  font-style: normal;
}
.intro {
  font-size: calc(20px * var(--tv-font-scale,1));
  line-height: 1.7;
  color: var(--muted);
  margin: 27px 0 35px;
}
.primary {
  background: var(--gold);
  color: #192222;
  padding: 19px 25px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  font-weight: 600;
  border-radius: 5px;
  font-size: calc(18px * var(--tv-font-scale,1));
}
.welcome-button {
  min-width: 350px;
}
.welcome-note {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(12px * var(--tv-font-scale,1));
  color: var(--muted);
  margin-top: 31px;
}
.welcome-note svg {
  color: var(--gold);
}
.architecture {
  position: relative;
  height: 460px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 55% 15%,
      rgba(156,165,122,0.1451),
      transparent 65%);
  border-radius: 220px 220px 8px 8px;
}
.arch {
  position: absolute;
  border-radius: 200px 200px 0 0;
  background:
    linear-gradient(
      100deg,
      #716e58,
      #c5bd93 55%,
      #746f52);
  box-shadow: 20px 20px 40px rgba(0,0,0,0.33333);
}
.arch-back {
  width: 310px;
  height: 430px;
  right: 15%;
  top: 32px;
}
.arch-front {
  width: 240px;
  height: 350px;
  right: 20%;
  top: 82px;
  border: 25px solid #a49e7d;
  border-bottom: 0;
  background:
    linear-gradient(
      #c2cbb9,
      #8fa89d 58%,
      #517775 59%,
      #203b3c);
  overflow: hidden;
}
.sea {
  position: absolute;
  top: 60%;
  width: 100%;
  height: 40%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,transparent 12px,
      rgba(200,211,187,0.09412) 13px, rgba(200,211,187,0.09412) 14px);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      rgba(200,211,187,0.09412) 13px 14px);
}
.horizon {
  height: 1px;
  background: #dfd6af;
  position: absolute;
  top: 59%;
  width: 100%;
}
.sun {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #dfc997;
  position: absolute;
  right: 38%;
  top: 115px;
  z-index: 1;
  filter: blur(1px);
  opacity: .55;
}
.plinth {
  height: 65px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background:
    linear-gradient(
      10deg,
      #404337,
      #99997c);
  transform: skewY(-5deg);
}
.visual-caption {
  position: absolute;
  bottom: 26px;
  left: 30px;
  font-size: calc(10px * var(--tv-font-scale,1));
  letter-spacing: 3px;
  color: #fff;
  z-index: 2;
}
.visual-caption span {
  display: block;
  font-size: calc(8px * var(--tv-font-scale,1));
  margin-top: 8px;
  color: #dfd8bd;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}
.page-heading h1 {
  font-size: calc(46px * var(--tv-font-scale,1));
}
.page-heading p:last-child {
  color: var(--muted);
  font-size: calc(17px * var(--tv-font-scale,1));
  margin-top: 14px;
}
.back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: rgba(255,255,255,0.03137);
  border: 1px solid rgba(255,255,255,0.12549);
  border-radius: 5px;
  font-size: calc(16px * var(--tv-font-scale,1));
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 22px;
  gap: 22px;
}
.menu-card {
  text-align: left;
  height: 285px;
  padding: 28px;
  background:
    linear-gradient(
      145deg,
      #2a3c39,
      #1b2929);
  border: 1px solid rgba(255,255,255,0.07059);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-food {
  background:
    linear-gradient(
      145deg,
      #514435,
      #2b2b25);
}
.card-room {
  background:
    linear-gradient(
      145deg,
      #343e40,
      #202c2d);
}
.card-cart {
  background:
    linear-gradient(
      145deg,
      #303a31,
      #1e2925);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);
}
.card-top > span {
  font-family: Georgia;
  font-size: calc(16px * var(--tv-font-scale,1));
  color: rgba(255,255,255,0.25098);
}
.card-bottom strong {
  display: block;
  font-size: calc(26px * var(--tv-font-scale,1));
  font-weight: 500;
  margin-bottom: 11px;
}
.card-bottom small {
  font-size: calc(14px * var(--tv-font-scale,1));
  color: var(--muted);
  display: block;
}
.card-arrow {
  display: block;
  margin-top: 22px;
  color: var(--gold);
}
.service-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  border: 1px solid rgba(255,255,255,0.07451);
  padding: 20px 25px;
  border-radius: 6px;
  color: var(--gold);
}
.service-strip strong {
  display: block;
  color: var(--text);
  font-size: calc(15px * var(--tv-font-scale,1));
  font-weight: 500;
}
.service-strip div span {
  display: block;
  color: var(--muted);
  font-size: calc(13px * var(--tv-font-scale,1));
  margin-top: 5px;
}
.demo-label {
  margin-left: auto;
  font-size: calc(10px * var(--tv-font-scale,1));
  letter-spacing: 2px;
  color: var(--muted);
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 22px;
  gap: 22px;
}
.info-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.06275);
  border-radius: 8px;
  padding: 28px;
}
.info-card svg {
  color: var(--gold);
  margin-bottom: 19px;
}
.info-card p {
  color: var(--muted);
  margin-bottom: 8px;
}
.info-card h2 {
  margin-bottom: 15px;
  color: var(--text);
}
.info-card span {
  color: var(--muted);
  font-size: calc(17px * var(--tv-font-scale,1));
  line-height: 1.7;
}
.room-grid,
.food-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}
.room-grid .info-card {
  min-height: 300px;
  padding: 34px;
}
.room-grid h2 {
  margin: 10px 0 24px;
}
.food-card {
  border: 1px solid rgba(255,255,255,0.07843);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.food-art {
  height: 165px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  color: #e1bd86;
  background:
    radial-gradient(
      ellipse,
      #665339,
      #302d23);
}
.food-art.pizza {
  background:
    radial-gradient(
      ellipse,
      #665c3b,
      #30392d);
}
.food-art.cola {
  background:
    radial-gradient(
      ellipse,
      #476166,
      #253438);
}
.food-art svg {
  transform: rotate(-12deg);
  filter: drop-shadow(4px 10px 6px rgba(0,0,0,0.33333));
}
.food-art span {
  position: absolute;
  bottom: 12px;
  font-size: calc(8px * var(--tv-font-scale,1));
  letter-spacing: 2px;
  color: rgba(255,255,255,0.37647);
}
.food-copy {
  padding: 22px;
}
.food-copy h2 {
  font-size: calc(26px * var(--tv-font-scale,1));
}
.food-copy p {
  font-size: calc(14px * var(--tv-font-scale,1));
  line-height: 1.6;
  color: var(--muted);
  min-height: 48px;
  margin: 10px 0 19px;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-row strong {
  font-size: calc(24px * var(--tv-font-scale,1));
  color: var(--gold);
  font-weight: 500;
}
.add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 5px;
  background: rgba(221,189,131,0.08235);
  color: var(--gold);
  border: 1px solid rgba(221,189,131,0.25098);
}
.food-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
.food-bottom > span {
  color: var(--muted);
  font-size: calc(16px * var(--tv-font-scale,1));
}
.cart-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-gap: 30px;
  gap: 30px;
}
.cart-row {
  background: var(--panel);
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(255,255,255,0.07059);
  border-radius: 7px;
  margin-bottom: 16px;
}
.cart-row h2 {
  font-size: calc(23px * var(--tv-font-scale,1));
  margin-bottom: 10px;
}
.cart-row div > span {
  font-size: calc(15px * var(--tv-font-scale,1));
  color: var(--muted);
}
.cart-row > div:first-child {
  flex: 1;
}
.cart-row > strong {
  font-size: calc(22px * var(--tv-font-scale,1));
  min-width: 100px;
  text-align: right;
  color: var(--gold);
}
.quantity {
  display: flex;
  align-items: center;
  gap: 18px;
}
.quantity button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04314);
  border: 1px solid rgba(255,255,255,0.13333);
  border-radius: 4px;
  width: 46px;
  height: 46px;
}
.quantity span {
  min-width: 20px;
  text-align: center;
}
.summary {
  background: var(--panel);
  border: 1px solid rgba(221,189,131,0.18824);
  padding: 30px;
  border-radius: 8px;
}
.summary > div {
  display: flex;
  justify-content: space-between;
  margin: 24px 0;
  font-size: calc(18px * var(--tv-font-scale,1));
}
.summary > div > span {
  color: var(--muted);
}
.summary .total {
  border-top: 1px solid rgba(255,255,255,0.12549);
  padding-top: 27px;
  font-size: calc(25px * var(--tv-font-scale,1));
}
.total strong {
  color: var(--gold);
}
.summary .primary {
  width: 100%;
  font-size: calc(17px * var(--tv-font-scale,1));
  gap: 12px;
}
.summary small {
  display: block;
  color: var(--muted);
  font-size: calc(12px * var(--tv-font-scale,1));
  line-height: 1.7;
  margin-top: 18px;
}
.empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.empty > svg {
  color: var(--gold);
}
.empty p {
  font-size: calc(18px * var(--tv-font-scale,1));
  color: var(--muted);
}
.empty .primary {
  margin-top: 10px;
}
.success-icon {
  background: rgba(221,189,131,0.09412);
  border: 1px solid rgba(221,189,131,0.31373);
  border-radius: 50%;
  padding: 20px;
  display: flex;
  color: var(--gold);
}
.empty .muted {
  font-size: calc(14px * var(--tv-font-scale,1));
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1700px) {
  header {
    height: 150px;
  }
  main {
    padding-top: 55px;
  }
  .menu-card {
    height: 350px;
  }
  .food-art {
    height: 230px;
  }
  .food-copy {
    padding: 30px;
  }
  footer {
    height: 95px;
  }
  .architecture {
    height: 570px;
  }
  .arch-back {
    height: 530px;
    width: 390px;
  }
  .arch-front {
    height: 440px;
    width: 310px;
  }
}
@media (max-width: 1000px) {
  .header-right {
    font-size: 0;
    gap: 8px;
  }
  .room-pill {
    font-size: calc(12px * var(--tv-font-scale,1));
  }
  .menu-grid {
    gap: 14px;
  }
  .menu-card {
    padding: 20px;
  }
  .card-bottom strong {
    font-size: calc(22px * var(--tv-font-scale,1));
  }
  .card-bottom small {
    font-size: calc(12px * var(--tv-font-scale,1));
  }
  .architecture {
    height: 390px;
  }
  .welcome-button {
    min-width: 300px;
  }
  footer {
    font-size: calc(10px * var(--tv-font-scale,1));
  }
  .page-heading h1 {
    font-size: calc(38px * var(--tv-font-scale,1));
  }
  .food-copy {
    padding: 17px;
  }
  .price-row strong {
    font-size: calc(20px * var(--tv-font-scale,1));
  }
  .cart-layout {
    grid-template-columns: 1.4fr 1fr;
  }
  .cart-row {
    gap: 15px;
    padding: 18px;
  }
}
@media (max-width: 700px) {
  header {
    height: 100px;
  }
  .brand {
    font-size: calc(15px * var(--tv-font-scale,1));
    letter-spacing: 2px;
  }
  .brand-mark {
    width: 45px;
    height: 50px;
    line-height: 50px;
    font-size: calc(32px * var(--tv-font-scale,1));
  }
  .brand small {
    font-size: calc(7px * var(--tv-font-scale,1));
    letter-spacing: 2px;
  }
  .live-dot {
    display: none;
  }
  .room-pill {
    padding: 10px;
    margin: 0;
  }
  .welcome {
    grid-template-columns: 1fr;
  }
  .architecture {
    display: none;
  }
  .welcome h1 {
    font-size: calc(48px * var(--tv-font-scale,1));
  }
  .menu-grid,
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .menu-card {
    height: 220px;
  }
  .room-grid,
  .food-grid,
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .page-heading {
    gap: 15px;
  }
  .page-heading h1 {
    font-size: calc(32px * var(--tv-font-scale,1));
  }
  .page-heading p:last-child {
    font-size: calc(14px * var(--tv-font-scale,1));
  }
  .eyebrow {
    font-size: calc(10px * var(--tv-font-scale,1));
  }
  .service-strip {
    padding: 15px;
  }
  .demo-label {
    display: none;
  }
  footer {
    flex-wrap: wrap;
    padding: 18px 0;
  }
  .cart-row {
    gap: 12px;
  }
  .quantity {
    gap: 10px;
  }
  .cart-row > strong {
    min-width: 70px;
    font-size: calc(17px * var(--tv-font-scale,1));
  }
  .quantity button {
    width: 36px;
    height: 40px;
  }
}
@media (min-width: 701px) and (max-height: 800px) {
  header {
    height: 90px;
  }
  main {
    padding: 24px 0;
  }
  .page-heading {
    margin-bottom: 24px;
  }
  .page-heading h1 {
    font-size: calc(36px * var(--tv-font-scale,1));
  }
  .page-heading p:last-child {
    margin-top: 10px;
  }
  .eyebrow {
    margin-bottom: 12px;
  }
  .menu-card {
    height: 245px;
  }
  .info-card {
    padding: 20px;
  }
  .info-card svg {
    height: 28px;
    margin-bottom: 12px;
  }
  .info-card h2 {
    font-size: calc(25px * var(--tv-font-scale,1));
    margin-bottom: 10px;
  }
  .info-card span {
    font-size: calc(15px * var(--tv-font-scale,1));
  }
  .info-grid {
    gap: 16px;
  }
  .room-grid .info-card {
    min-height: 260px;
    padding: 25px;
  }
  .food-art {
    height: 125px;
  }
  .food-art svg {
    height: 80px;
  }
  .food-copy {
    padding: 18px;
  }
  .food-copy p {
    margin: 8px 0 12px;
  }
  .food-bottom {
    margin-top: 20px;
  }
  .primary {
    padding: 15px 22px;
  }
  footer {
    min-height: 56px;
  }
  .welcome {
    min-height: calc(100vh - 195px);
  }
  .architecture {
    height: 420px;
  }
  .intro {
    margin: 22px 0;
  }
  .welcome-note {
    margin-top: 25px;
  }
}

/* src/features/tv/tv-media.css */
.tv-shell .tv-unified-media {
  pointer-events: none;
  z-index: 0;
}
.tv-shell .tv-unified-media .welcome-media,
.tv-shell .tv-unified-media .welcome-video-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
}
.tv-shell .tv-unified-media .welcome-video-frame video {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-frame-media {
  position: fixed;
  overflow: hidden;
  border-radius: 20px;
}
.tv-frame-media .welcome-video-frame video {
  object-fit: contain !important;
  opacity: 1 !important;
}
.tv-sound-control {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 40;
}
.tv-sound-control button {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14px * var(--tv-font-scale,1));
  padding: 8px 12px;
  background: rgba(12, 22, 30, .9);
  color: white;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
}
.tv-sound-control button:focus {
  outline: 3px solid #e1be82;
  outline-offset: 2px;
}
.tv-zoom-frame > [data-tv-media-host] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
.tv-zoom-content {
  position: relative;
  z-index: 1;
}
.tv-zoom-frame .tv-media-root {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  min-height: 0;
  display: block;
  isolation: auto;
  background: transparent;
}
.tv-zoom-frame.has-cinematic-media .tv-zoom-content > .tv-shell {
  background: transparent;
}
.tv-zoom-frame.has-cinematic-media .tv-zoom-content > .tv-shell:before,
.tv-zoom-frame.has-cinematic-media .tv-zoom-content > .tv-shell:after {
  display: none;
}
.tv-media-root .welcome-video-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--property-image,linear-gradient(135deg,#142b30,#152020));
  background-size: cover;
  background-position: center;
}
.tv-media-root .cinematic-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* src/features/tv/tv-zoom.css */
.tv-zoom-frame {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
.tv-zoom-content {
  transform-origin: top left;
}
.tv-zoom-control {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 110;
  color: #fff;
}
.tv-zoom-control button {
  background: #12242f;
  border: 1px solid #dcbc7c;
  border-radius: 9px;
  color: #fff;
  padding: 9px 12px;
  font-size: calc(16px * var(--tv-font-scale,1));
}
.tv-zoom-control button:focus {
  outline: 4px solid #f5d18b;
  outline-offset: 2px;
}
.tv-zoom-control > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 350px;
  padding: 12px;
  margin-top: 8px;
  background: rgba(8,21,31,0.96078);
  border: 1px solid #dcbc7c;
  border-radius: 12px;
}
.tv-zoom-control button[aria-pressed=true] {
  background: #dcbc7c;
  color: #172223;
}

/* src/features/tv/tv-baseline.css */
@supports not (width:clamp(1px, 2vw, 3px)) {
  .tv-shell h1 {
    font-size: calc(calc(4 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  }
  .tv-shell .welcome h1 {
    font-size: calc(calc(4.8 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  }
  .tv-shell > header {
    height: calc(10 * var(--tv-vh,1vh));
    min-height: 64px;
    max-height: 124px;
  }
  .tv-shell > footer {
    min-height: 44px;
  }
  .tv-shell .food-menu-layout.food-viewport-fit {
    grid-template-columns: 20% minmax(0, 1fr);
  }
  .tv-shell .food-tile-photo {
    height: calc(24 * var(--tv-physical-vh,1vh));
    min-height: 145px;
    max-height: 260px;
  }
  .tv-shell .sales-category-card > img {
    height: calc(20 * var(--tv-physical-vh,1vh));
    min-height: 140px;
    max-height: 215px;
  }
  .tv-shell .food-product-grid,
  .tv-shell .sales-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tv-shell .phone-menu-qr img {
    width: 180px;
    height: auto;
    max-width: calc(100% - 12px);
  }
  .menu-reference-layout {
    gap: 16px;
  }
  .menu-property-brand {
    font-size: calc(22px * var(--tv-font-scale,1));
  }
  .menu-clock strong {
    font-size: calc(30px * var(--tv-font-scale,1));
  }
  .menu-reference-hero {
    min-height: 95px;
  }
  .menu-reference-hero > p {
    font-size: calc(40px * var(--tv-font-scale,1)) !important;
  }
  .menu-reference-hero h1 {
    font-size: calc(32px * var(--tv-font-scale,1));
  }
  .menu-reference-hero > span {
    font-size: calc(16px * var(--tv-font-scale,1));
  }
  .tv-shell.menu-reference-shell > main.screen-menu {
    padding: 20px 8px !important;
  }
  .tv-shell.menu-reference-shell .screen-menu .menu-grid.menu-reference-cards {
    gap: 12px !important;
  }
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card {
    height: calc(24 * var(--tv-vh,1vh));
    min-height: 140px;
    max-height: 260px;
  }
  .menu-panel-heading h2 {
    font-size: calc(16px * var(--tv-font-scale,1)) !important;
  }
  .menu-live-reading > strong {
    font-size: calc(20px * var(--tv-font-scale,1)) !important;
  }
  .menu-mini-panel {
    min-height: 130px;
  }
  .tv-shell.cinematic-content .menu-card,
  .tv-shell.cinematic-content .info-card,
  .tv-shell.cinematic-content .summary,
  .tv-shell.cinematic-content .cart-row {
    background: rgba(20,32,45,0.86667);
    color: #f5f5f6;
  }
  .tv-shell.cinematic-content .card-bottom,
  .tv-shell.cinematic-content .card-top {
    background: transparent;
  }
}
.tv-zoom-frame[data-flex-gap=no] .food-subgroups button + button,
.tv-zoom-frame[data-flex-gap=no] .food-scroll-buttons button + button {
  margin-left: 8px;
}
.tv-zoom-frame[data-flex-gap=no] .food-categories button + button {
  margin-top: 3px;
}
.tv-zoom-frame[data-flex-gap=no] .header-right > * + *,
.tv-zoom-frame[data-flex-gap=no] .menu-room-clock > * + * {
  margin-left: 16px;
}
.tv-zoom-frame[data-flex-gap=no] .food-tile-action > span svg,
.tv-zoom-frame[data-flex-gap=no] .tv-sound-control svg {
  margin-right: 6px;
}
.tv-zoom-frame[data-flex-gap=no] .menu-reference-layout > * + * {
  margin-top: 14px;
}

/* src/features/tv/themes.css */
.tv-shell {
  position: relative;
  isolation: isolate;
}
.tv-shell.has-background {
  background: var(--bg);
}
.tv-shell.has-background:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background-image: var(--property-image);
  background-size: cover;
  background-position: center;
}
.tv-shell.has-background:after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: rgba(16,26,27,0.85098);
}
.food-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.food-art.has-image > span {
  background: rgba(0,0,0,0.46667);
  padding: 6px;
  border-radius: 4px;
}
.tv-error {
  font-size: calc(16px * var(--tv-font-scale,1));
  color: #e09a82;
  margin-top: 16px;
  line-height: 1.5;
}
.tv-shell button:disabled {
  opacity: .45;
  cursor: wait;
}
.theme-glass {
  --bg:#e7eef0;
  --panel:rgba(255,255,255,0.85098);
  --gold:#49757e;
  --text:#243c46;
  --muted:#627985;
  background:
    radial-gradient(
      at 12% 5%,
      #d1e2ef,
      transparent 55%),
    radial-gradient(
      at 85% 85%,
      #dce3cd,
      transparent 60%),
    #eef3f4;
}
.theme-sand {
  --bg:#f3eddf;
  --panel:rgba(255,252,244,0.90196);
  --gold:#927341;
  --text:#574931;
  --muted:#91826a;
  background:
    radial-gradient(
      at 90% 5%,
      #eadbc2,
      transparent 60%),
    #f5f0e6;
}
.theme-glass.has-background:after {
  background: rgba(229,237,241,0.72157);
}
.theme-sand.has-background:after {
  background: rgba(243,236,220,0.78039);
}
.theme-glass .menu-card,
.theme-sand .menu-card {
  background:
    linear-gradient(
      140deg,
      rgba(255,255,255,0.90196),
      rgba(255,255,255,0.65882));
  border: 1px solid rgba(255,255,255,0.92941);
  box-shadow: 0 8px 28px rgba(43,72,90,0.03137);
  border-radius: 24px;
}
.theme-glass .menu-card.card-food {
  background:
    linear-gradient(
      140deg,
      rgba(245,242,232,0.9098),
      rgba(233,239,236,0.85098));
}
.theme-glass .menu-card.card-room {
  background:
    linear-gradient(
      140deg,
      rgba(231,240,245,0.92941),
      rgba(255,255,255,0.72157));
}
.theme-glass .card-top > span,
.theme-sand .card-top > span {
  color: var(--muted);
}
.theme-glass header,
.theme-glass footer,
.theme-glass .service-strip,
.theme-sand header,
.theme-sand footer,
.theme-sand .service-strip {
  border-color: rgba(140,155,165,0.18824);
}
.theme-glass .room-pill,
.theme-sand .room-pill {
  background: rgba(255,255,255,0.50196);
  border-color: rgba(255,255,255,0.6902);
  border-radius: 15px;
}
.theme-glass .brand-mark,
.theme-sand .brand-mark {
  border-color: rgba(139,158,165,0.30196);
}
.theme-glass .primary {
  background: #547b87;
  color: #fff;
  border-radius: 14px;
}
.theme-sand .primary {
  background: #a38754;
  color: #fff;
  border-radius: 12px;
}
.theme-glass .back,
.theme-sand .back {
  background: rgba(255,255,255,0.66667);
  border: 1px solid rgba(255,255,255,0.81569);
  border-radius: 13px;
}
.theme-glass .info-card,
.theme-glass .food-card,
.theme-glass .summary,
.theme-glass .cart-row,
.theme-sand .info-card,
.theme-sand .food-card,
.theme-sand .summary,
.theme-sand .cart-row {
  border-color: rgba(255,255,255,0.81569);
  border-radius: 19px;
  box-shadow: 0 8px 30px rgba(52,76,88,0.02745);
}
.theme-glass .service-strip,
.theme-sand .service-strip {
  background: rgba(255,255,255,0.39608);
  border-radius: 16px;
}
.theme-glass button:focus {
  outline-color: #4b7c91;
  box-shadow: 0 0 0 10px rgba(73,117,139,0.06275);
}
.theme-sand button:focus {
  outline-color: #b69451;
  box-shadow: 0 0 0 10px rgba(166,139,69,0.08235);
}
.theme-glass .add,
.theme-sand .add {
  background: rgba(255,255,255,0.6902);
  border-color: rgba(135,159,165,0.31373);
  border-radius: 12px;
}
.theme-glass .quantity button,
.theme-sand .quantity button {
  background: rgba(255,255,255,0.6902);
  border-color: rgba(157,173,171,0.25098);
  border-radius: 10px;
}
.theme-glass .summary .total,
.theme-sand .summary .total {
  border-color: rgba(135,151,154,0.25098);
}
.theme-glass .key,
.theme-sand .key {
  border-color: rgba(141,159,165,0.31373);
  color: var(--muted);
}
.theme-glass .welcome h1 {
  color: #334d59;
}
.theme-sand .welcome h1 {
  color: #695638;
}
.theme-glass .architecture,
.theme-sand .architecture {
  opacity: .85;
}
.theme-glass .success-icon {
  background: rgba(73,108,128,0.06275);
  border-color: rgba(88,127,128,0.31373);
}
.theme-glass .food-art {
  background:
    radial-gradient(
      ellipse,
      #c6d7dc,
      #e0e9e8);
  color: #567987;
}
.theme-glass .food-art.pizza {
  background:
    radial-gradient(
      ellipse,
      #d9d9ba,
      #ecede2);
  color: #8a9366;
}
.theme-glass .food-art.cola {
  background:
    radial-gradient(
      ellipse,
      #c1d4dc,
      #e5ecf0);
  color: #5c8095;
}
.theme-glass .food-art span {
  color: #64818d;
}
.theme-sand .food-art {
  background:
    radial-gradient(
      ellipse,
      #d7c298,
      #eee3ce);
  color: #8b744b;
}
.theme-sand .food-art span {
  color: #907b56;
}
.theme-glass .tv-error,
.theme-sand .tv-error {
  color: #a05242;
}
.tv-actions {
  display: flex;
  gap: 10px;
}
.tv-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(135,159,165,0.31373);
  border-radius: 13px;
  padding: 13px 15px;
  letter-spacing: 0;
  font-size: calc(14px * var(--tv-font-scale,1));
  white-space: nowrap;
}
.tv-actions button svg {
  color: var(--gold);
}
@media (max-width: 1100px) {
  .tv-actions {
    gap: 7px;
  }
  .tv-actions button {
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    font-size: calc(11px * var(--tv-font-scale,1));
  }
  .tv-shell.has-tv-actions .brand {
    font-size: calc(16px * var(--tv-font-scale,1));
    letter-spacing: 2px;
  }
  .tv-shell.has-tv-actions .header-right {
    gap: 8px;
  }
  .tv-shell.has-tv-actions .room-pill {
    margin-left: 0;
    padding: 10px;
    font-size: calc(11px * var(--tv-font-scale,1));
  }
}
@media (min-width: 701px) {
  .tv-shell {
    height: calc(100 * var(--tv-vh,1vh));
    height: calc(100 * var(--tv-vh,1dvh));
    min-height: 0;
    padding: calc(2 * var(--tv-vh,1vh)) calc(4.8 * var(--tv-vw,1vw));
    overflow: hidden;
  }
  .tv-shell > header {
    height: calc(10 * var(--tv-vh,1vh));
    flex: 0 0 auto;
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell > header {
      height: max(64px, min(calc(10 * var(--tv-vh,1vh)), 124px));
    }
  }
  .tv-shell > footer {
    height: auto;
    min-height: calc(7 * var(--tv-vh,1vh));
    flex: 0 0 auto;
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell > footer {
      min-height: max(44px, min(calc(7 * var(--tv-vh,1vh)), 78px));
    }
  }
  .tv-shell > main {
    min-height: 0;
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 10px;
    scroll-padding: 12px;
    scrollbar-width: thin;
  }
  .tv-shell .welcome {
    min-height: 100%;
    height: auto;
  }
  .tv-shell .architecture {
    height: calc(55 * var(--tv-vh,1vh));
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell .architecture {
      height: max(260px, min(calc(55 * var(--tv-vh,1vh)), 570px));
    }
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell > main {
    padding: 16px 10px;
  }
  .tv-shell .page-heading {
    margin-bottom: 18px;
  }
  .tv-shell .page-heading h1 {
    font-size: calc(30px * var(--tv-font-scale,1));
  }
  .tv-shell .page-heading p:last-child {
    font-size: calc(14px * var(--tv-font-scale,1));
    margin-top: 8px;
  }
  .tv-shell .eyebrow {
    font-size: calc(10px * var(--tv-font-scale,1));
    margin-bottom: 8px;
  }
  .tv-shell .menu-card {
    height: 180px;
    padding: 18px;
  }
  .tv-shell .card-top svg {
    width: 30px;
    height: 30px;
  }
  .tv-shell .card-bottom strong {
    font-size: calc(21px * var(--tv-font-scale,1));
    margin-bottom: 6px;
  }
  .tv-shell .card-bottom small {
    font-size: calc(12px * var(--tv-font-scale,1));
  }
  .tv-shell .card-arrow {
    margin-top: 12px;
  }
  .tv-shell .service-strip {
    padding: 14px 18px;
    margin-top: 18px;
  }
  .tv-shell .welcome h1 {
    font-size: calc(42px * var(--tv-font-scale,1));
  }
  .tv-shell .intro {
    font-size: calc(16px * var(--tv-font-scale,1));
    line-height: 1.5;
    margin: 16px 0;
  }
  .tv-shell .welcome-note {
    margin-top: 18px;
  }
  .tv-shell .food-art {
    height: 80px;
  }
  .tv-shell .food-art svg {
    height: 60px;
  }
  .tv-shell .food-copy {
    padding: 14px;
  }
  .tv-shell .food-copy h2 {
    font-size: calc(22px * var(--tv-font-scale,1));
  }
  .tv-shell .food-copy p {
    font-size: calc(12px * var(--tv-font-scale,1));
    min-height: 36px;
    margin: 6px 0 8px;
  }
  .tv-shell .primary,
  .tv-shell .add {
    padding: 11px 16px;
    font-size: calc(15px * var(--tv-font-scale,1));
  }
  .tv-shell .info-card {
    padding: 15px;
  }
  .tv-shell .info-card svg {
    margin-bottom: 6px;
  }
  .tv-shell .info-card h2 {
    font-size: calc(21px * var(--tv-font-scale,1));
    margin-bottom: 8px;
  }
  .tv-shell .room-grid .info-card {
    min-height: 200px;
    padding: 18px;
  }
  .tv-shell .summary {
    padding: 18px;
  }
  .tv-shell .summary > div {
    margin: 16px 0;
    font-size: calc(16px * var(--tv-font-scale,1));
  }
  .tv-shell .summary .total {
    padding-top: 16px;
    font-size: calc(20px * var(--tv-font-scale,1));
  }
  .tv-shell .cart-row {
    padding: 16px;
    margin-bottom: 12px;
  }
  .tv-shell .empty {
    min-height: 220px;
    gap: 14px;
  }
}
.tv-shell button[data-tv-selected=true],
.tv-shell a[data-tv-selected=true] {
  outline: 4px solid var(--gold);
  outline-offset: 5px;
  box-shadow: 0 0 0 9px rgba(73,117,139,0.09412);
  transform: none;
}
.tv-shell button:focus {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .tv-shell main {
    animation: none;
  }
  .tv-shell button {
    transition: none;
  }
}
.tv-shell .welcome-media {
  min-width: 0;
  align-self: center;
  width: 100%;
}
.tv-shell .welcome-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
}
.tv-shell .welcome-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tv-shell .welcome-video-frame p {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 30px;
  text-align: center;
  color: white;
  background: #162329;
}
.tv-shell .welcome-video-controls {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.tv-shell .welcome-video-controls button {
  padding: 12px 18px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--panel);
  font-size: calc(16px * var(--tv-font-scale,1));
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell .welcome-video-frame {
    max-height: calc(38 * var(--tv-vh,1vh));
  }
  .tv-shell .welcome-video-controls {
    margin-top: 10px;
  }
}
.tv-shell .hotel-info-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: stretch;
}
.tv-shell .hotel-facts {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.tv-shell .hotel-fact {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
}
.tv-shell .hotel-fact > svg {
  margin: 0;
  flex-shrink: 0;
}
.tv-shell .hotel-fact h2 {
  font-size: calc(25px * var(--tv-font-scale,1));
  margin: 5px 0;
}
.tv-shell .hotel-fact p {
  margin: 0;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .hotel-fact span {
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .wifi-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 10px;
}
.tv-shell .wifi-card > svg {
  margin: 0;
}
.tv-shell .wifi-card h2 {
  font-size: calc(22px * var(--tv-font-scale,1));
  margin: 0;
  overflow-wrap: anywhere;
}
.tv-shell .wifi-card p {
  margin: 0;
}
.tv-shell .wifi-card span {
  font-size: calc(14px * var(--tv-font-scale,1));
  max-width: 320px;
}
.tv-shell .wifi-qr {
  width: calc(25 * var(--tv-vh,1vh));
  height: calc(25 * var(--tv-vh,1vh));
  background: white;
  border-radius: 8px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .wifi-qr {
    width: max(160px, min(calc(25 * var(--tv-vh,1vh)), 280px));
    height: max(160px, min(calc(25 * var(--tv-vh,1vh)), 280px));
  }
}
@media (min-width: 701px) {
  .tv-shell > main.screen-food {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
  }
  .tv-shell .screen-food .page-heading {
    flex: none;
    margin: 0;
  }
  .tv-shell .screen-food .page-heading h1 {
    font-size: calc(calc(3 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  }
  @supports (font-size:clamp(1px, 2vw, 3px)) {
    .tv-shell .screen-food .page-heading h1 {
      font-size: calc(max(28px, min(calc(3 * var(--tv-vw,1vw)), 42px)) * var(--tv-font-scale,1));
    }
  }
  .tv-shell .screen-food .page-heading p:last-child {
    font-size: calc(15px * var(--tv-font-scale,1));
    margin-top: 7px;
  }
  .tv-shell .screen-food .page-heading .eyebrow {
    margin-bottom: 8px;
  }
  .tv-shell .food-grid {
    flex: 1;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 6px;
  }
  .tv-shell .food-card {
    display: flex;
    min-height: 0;
    min-width: 0;
    border-radius: 15px;
    overflow: hidden;
  }
  .tv-shell .food-art {
    width: 29%;
    height: 100%;
    flex: none;
    min-width: 0;
  }
  .tv-shell .food-art svg {
    width: calc(4 * var(--tv-vw,1vw));
    height: calc(4 * var(--tv-vw,1vw));
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-art svg {
      width: max(30px, min(calc(4 * var(--tv-vw,1vw)), 65px));
      height: max(30px, min(calc(4 * var(--tv-vw,1vw)), 65px));
    }
  }
  .tv-shell .food-art span {
    display: none;
  }
  .tv-shell .food-copy {
    min-width: 0;
    flex: 1;
    padding: calc(1.2 * var(--tv-vh,1vh));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-copy {
      padding: max(8px, min(calc(1.2 * var(--tv-vh,1vh)), 18px));
    }
  }
  .tv-shell .food-copy h2 {
    font-size: calc(calc(1.45 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @supports (font-size:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-copy h2 {
      font-size: calc(max(16px, min(calc(1.45 * var(--tv-vw,1vw)), 25px)) * var(--tv-font-scale,1));
    }
  }
  .tv-shell .food-copy p {
    font-size: calc(13px * var(--tv-font-scale,1));
    line-height: 1.35;
    min-height: 0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tv-shell .price-row {
    gap: 5px;
  }
  .tv-shell .price-row strong {
    font-size: calc(calc(1.2 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
    white-space: nowrap;
  }
  @supports (font-size:clamp(1px, 2vw, 3px)) {
    .tv-shell .price-row strong {
      font-size: calc(max(16px, min(calc(1.2 * var(--tv-vw,1vw)), 22px)) * var(--tv-font-scale,1));
    }
  }
  .tv-shell .add {
    padding: 8px 11px;
    font-size: calc(14px * var(--tv-font-scale,1));
    gap: 4px;
  }
  .tv-shell .add svg {
    width: 17px;
    height: 17px;
  }
  .tv-shell .food-bottom {
    flex: none;
    margin: 0;
    gap: 12px;
    min-height: 44px;
  }
  .tv-shell .food-bottom > .primary {
    padding: 12px 18px;
    font-size: calc(16px * var(--tv-font-scale,1));
  }
  .tv-shell .food-bottom > span {
    font-size: calc(14px * var(--tv-font-scale,1));
  }
  .tv-shell .food-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .tv-shell .food-pagination button {
    background: var(--panel);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: calc(14px * var(--tv-font-scale,1));
  }
}
@media (min-width: 701px) and (max-height: 800px) {
  .tv-shell .food-copy p {
    display: none;
  }
  .tv-shell .hotel-info-layout {
    gap: 16px;
  }
  .tv-shell .hotel-facts {
    gap: 10px;
  }
  .tv-shell .hotel-fact {
    padding: 14px 18px;
  }
  .tv-shell .hotel-fact h2 {
    font-size: calc(22px * var(--tv-font-scale,1));
  }
  .tv-shell .wifi-card {
    padding: 14px;
    gap: 6px;
  }
  .tv-shell .wifi-qr {
    width: 180px;
    height: 180px;
  }
  .tv-shell .room-grid .info-card {
    min-height: 0;
    padding: 22px;
  }
  .tv-shell .room-grid h2 {
    margin: 10px 0 16px;
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell > main.screen-food {
    gap: 10px;
    padding: 12px 10px;
  }
  .tv-shell .screen-food .page-heading h1 {
    font-size: calc(28px * var(--tv-font-scale,1));
  }
  .tv-shell .screen-food .page-heading p:last-child {
    display: none;
  }
  .tv-shell .food-grid {
    gap: 10px;
  }
  .tv-shell .wifi-qr {
    width: 145px;
    height: 145px;
  }
  .tv-shell .hotel-fact {
    padding: 10px 15px;
    gap: 14px;
  }
  .tv-shell .hotel-fact span {
    font-size: calc(12px * var(--tv-font-scale,1));
  }
  .tv-shell .wifi-card span {
    font-size: calc(12px * var(--tv-font-scale,1));
  }
  .tv-shell .hotel-fact h2 {
    font-size: calc(20px * var(--tv-font-scale,1));
  }
  .tv-shell .food-bottom > .primary {
    padding: 10px 14px;
    font-size: calc(14px * var(--tv-font-scale,1));
  }
}
@media (max-width: 700px) {
  .tv-shell .hotel-info-layout {
    grid-template-columns: 1fr;
  }
  .tv-shell .food-grid {
    grid-template-rows: none !important;
  }
  .tv-shell .food-pagination {
    display: flex;
    gap: 10px;
  }
}
.guest-language {
  position: absolute;
  right: calc(5 * var(--tv-vw,1vw));
  top: calc(1 * var(--tv-vh,1vh));
  display: flex;
  gap: 8px;
  z-index: 5;
}
.guest-language button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--gold);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: calc(12px * var(--tv-font-scale,1));
}
.guest-language button[aria-pressed=true] {
  background: var(--gold);
  color: white;
}
.guest-name {
  display: block;
  margin-top: 14px;
  letter-spacing: 0;
  font-size: calc(2.2vw * var(--tv-font-scale,1));
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-transform: none;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .guest-name {
    font-size: calc(max(26px, min(2.2vw, 40px)) * var(--tv-font-scale,1));
  }
}
.guest-notification {
  position: fixed;
  right: calc(5 * var(--tv-vw,1vw));
  top: calc(14 * var(--tv-vh,1vh));
  z-index: 100;
  max-width: 420px;
  background: #183a43;
  color: white;
  border: 1px solid #94b7b6;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  font-size: calc(21px * var(--tv-font-scale,1));
  pointer-events: none;
}
.tv-shell .screen-menu .menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tv-shell .screen-menu .menu-card {
  height: calc(20 * var(--tv-vh,1vh));
  padding: 20px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-menu .menu-card {
    height: max(135px, min(calc(20 * var(--tv-vh,1vh)), 205px));
  }
}
.tv-shell .screen-menu .card-top svg {
  width: 30px;
  height: 30px;
}
.tv-shell .screen-menu .card-bottom strong {
  font-size: calc(calc(1.7 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  margin-bottom: 6px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-menu .card-bottom strong {
    font-size: calc(max(19px, min(calc(1.7 * var(--tv-vw,1vw)), 27px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-menu .card-bottom small {
  font-size: calc(12px * var(--tv-font-scale,1));
}
.tv-shell .screen-menu .card-arrow {
  display: none;
}
.tv-shell .screen-menu .page-heading {
  margin-bottom: 20px;
}
.tv-shell .screen-menu .service-strip {
  margin-top: 18px;
  padding: 14px 20px;
}
.guest-portal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 6px;
}
.guest-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.guest-tabs button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(135,159,165,0.31373);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: calc(16px * var(--tv-font-scale,1));
}
.guest-tabs button[aria-pressed=true] {
  background: var(--gold);
  color: #fff;
}
.guest-service-grid,
.guest-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
}
.guest-service-grid button,
.guest-content-card,
.guest-order,
.guest-reservation,
.guest-balance {
  background: var(--panel);
  border: 1px solid rgba(135,159,165,0.25098);
  border-radius: 18px;
  padding: 24px;
  text-align: left;
}
.guest-service-grid button {
  font-size: calc(21px * var(--tv-font-scale,1));
  min-height: 110px;
}
.guest-service-grid small {
  display: block;
  color: var(--muted);
  font-size: calc(14px * var(--tv-font-scale,1));
  margin-top: 12px;
}
.guest-balance {
  display: flex;
  gap: 15px;
  flex-direction: column;
}
.guest-balance strong {
  font-size: calc(36px * var(--tv-font-scale,1));
  color: var(--gold);
}
.guest-balance small {
  color: var(--muted);
}
.guest-order > div,
.guest-history-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.guest-order p {
  margin: 16px 0;
  line-height: 1.6;
}
.guest-order > div span {
  color: var(--muted);
}
.guest-content-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.guest-content-card p {
  color: var(--muted);
  line-height: 1.6;
}
.guest-content-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}
.guest-history-row {
  padding: 15px;
  background: var(--panel);
  border-radius: 12px;
}
.guest-message {
  padding: 18px;
  border: 1px solid var(--gold);
  border-radius: 12px;
}
.guest-reservation {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 701px) and (max-height: 800px) {
  .tv-shell .screen-menu .menu-card {
    height: 130px;
    padding: 17px;
  }
  .tv-shell .screen-menu .page-heading h1 {
    font-size: calc(34px * var(--tv-font-scale,1));
  }
  .tv-shell .screen-menu .page-heading p:last-child {
    margin-top: 7px;
  }
  .tv-shell .screen-menu .eyebrow {
    margin-bottom: 8px;
  }
  .tv-shell .screen-menu .service-strip {
    margin-top: 14px;
  }
  .guest-service-grid button {
    font-size: calc(18px * var(--tv-font-scale,1));
    padding: 17px;
  }
  .guest-tabs button {
    padding: 11px 14px;
    font-size: calc(14px * var(--tv-font-scale,1));
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell .screen-menu .menu-card {
    height: 100px;
    padding: 12px;
  }
  .tv-shell .screen-menu .card-top svg {
    width: 22px;
    height: 22px;
  }
  .tv-shell .screen-menu .card-bottom strong {
    font-size: calc(18px * var(--tv-font-scale,1));
  }
  .tv-shell .screen-menu .card-bottom small {
    font-size: calc(10px * var(--tv-font-scale,1));
  }
  .tv-shell .screen-menu .page-heading p:last-child {
    display: none;
  }
  .tv-shell .screen-menu .service-strip {
    display: none;
  }
  .guest-language {
    top: 0;
  }
  .guest-service-grid,
  .guest-content-grid {
    gap: 12px;
  }
}
@media (max-width: 700px) {
  .guest-service-grid,
  .guest-content-grid {
    grid-template-columns: 1fr;
  }
  .tv-shell .screen-menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.theme-harbor {
  --bg:#153948;
  --panel:#fcfbf4;
  --gold:#d9bf88;
  --text:#f5f0e3;
  --muted:#c8d7d7;
  background:
    linear-gradient(
      125deg,
      #153948,
      #275968);
}
.theme-harbor-sand {
  --bg:#e5d7b9;
  --panel:#fffdf6;
  --gold:#977847;
  --text:#4b493b;
  --muted:#796f5d;
  background:
    linear-gradient(
      125deg,
      #e7d8b9,
      #f7f2e6);
}
.theme-harbor-sage {
  --bg:#e0e6d7;
  --panel:#fffef7;
  --gold:#66816a;
  --text:#314d43;
  --muted:#65796b;
  background:
    linear-gradient(
      125deg,
      #d4dfcc,
      #edf2e8);
}
.tv-shell[class*=theme-harbor] .room-pill {
  background: rgba(255,255,255,0.08627);
  border-radius: 14px;
}
.tv-shell[class*=theme-harbor] .primary {
  border-radius: 12px;
}
.tv-shell[class*=theme-harbor] .screen-menu .menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.tv-shell[class*=theme-harbor] .screen-menu .menu-card {
  height: calc(43 * var(--tv-vh,1vh));
  padding: 0;
  background: var(--panel);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.53333);
  box-shadow: 0 10px 35px rgba(0,0,0,0.13333);
  justify-content: flex-start;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell[class*=theme-harbor] .screen-menu .menu-card {
    height: max(245px, min(calc(43 * var(--tv-vh,1vh)), 440px));
  }
}
.tv-shell[class*=theme-harbor] .screen-menu .card-top {
  height: 60%;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(
      140deg,
      #5e8890,
      #b2c9be);
  position: relative;
  color: #fff;
}
.tv-shell[class*=theme-harbor] .screen-menu .card-top > svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}
.tv-shell[class*=theme-harbor] .screen-menu .card-top > span {
  position: absolute;
  left: 18px;
  top: 18px;
  color: #fff;
  font-size: calc(16px * var(--tv-font-scale,1));
}
.tv-shell[class*=theme-harbor] .screen-menu .card-room .card-top {
  background:
    linear-gradient(
      140deg,
      #a99876,
      #ded2b5);
}
.tv-shell[class*=theme-harbor] .screen-menu .card-food .card-top {
  background:
    linear-gradient(
      140deg,
      #877354,
      #cfb88b);
}
.tv-shell[class*=theme-harbor] .screen-menu .card-cart .card-top {
  background:
    linear-gradient(
      140deg,
      #596e67,
      #a4b7a1);
}
.tv-shell[class*=theme-harbor] .screen-menu .card-bottom {
  padding: 20px;
  color: #233d44;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.tv-shell[class*=theme-harbor] .screen-menu .card-bottom small {
  color: #62767a;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell[class*=theme-harbor] .screen-menu .card-bottom strong {
  font-size: calc(calc(1.6 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell[class*=theme-harbor] .screen-menu .card-bottom strong {
    font-size: calc(max(19px, min(calc(1.6 * var(--tv-vw,1vw)), 29px)) * var(--tv-font-scale,1));
  }
}
.harbor-secondary {
  display: flex;
  gap: 16px;
  margin-top: 22px;
}
.harbor-secondary button {
  background: rgba(255,255,255,0.07059);
  border: 1px solid rgba(255,255,255,0.25098);
  color: var(--text);
  padding: 13px 20px;
  border-radius: 12px;
  font-size: calc(17px * var(--tv-font-scale,1));
}
.tv-shell[class*=theme-harbor] .info-card,
.tv-shell[class*=theme-harbor] .guest-content-card,
.tv-shell[class*=theme-harbor] .guest-service-grid button,
.tv-shell[class*=theme-harbor] .guest-balance,
.tv-shell[class*=theme-harbor] .guest-order,
.tv-shell[class*=theme-harbor] .guest-reservation,
.tv-shell[class*=theme-harbor] .guest-history-row,
.tv-shell[class*=theme-harbor] .food-copy,
.tv-shell[class*=theme-harbor] .summary,
.tv-shell[class*=theme-harbor] .cart-row {
  color: #263f45;
  --text:#263f45;
  --muted:#63797b;
  border-radius: 16px;
}
.tv-shell[class*=theme-harbor] .guest-tabs button,
.tv-shell[class*=theme-harbor] .guest-language button {
  color: #263f45;
}
.tv-shell[class*=theme-harbor] .back {
  background: rgba(255,255,255,0.08627);
  border-radius: 12px;
}
.tv-shell[class*=theme-harbor] .service-strip {
  background: rgba(255,255,255,0.03922);
  border-radius: 12px;
}
@media (min-width: 701px) and (max-height: 800px) {
  .tv-shell[class*=theme-harbor] .screen-menu .menu-card {
    height: 300px;
  }
  .tv-shell[class*=theme-harbor] .screen-menu .card-top {
    height: 55%;
  }
  .harbor-secondary {
    margin-top: 16px;
  }
  .harbor-secondary button {
    padding: 10px 16px;
    font-size: calc(15px * var(--tv-font-scale,1));
  }
  .tv-shell[class*=theme-harbor] .screen-menu .service-strip {
    display: none;
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell[class*=theme-harbor] .screen-menu .menu-card {
    height: 230px;
  }
  .tv-shell[class*=theme-harbor] .screen-menu .card-bottom {
    padding: 13px;
  }
  .tv-shell[class*=theme-harbor] .screen-menu .card-bottom small {
    font-size: calc(11px * var(--tv-font-scale,1));
  }
  .tv-shell[class*=theme-harbor] .screen-menu .card-top > svg {
    width: 44px;
    height: 44px;
  }
  .harbor-secondary {
    margin-top: 14px;
  }
}
@media (max-width: 700px) {
  .tv-shell[class*=theme-harbor] .screen-menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .harbor-secondary {
    flex-wrap: wrap;
  }
}
.guest-sync {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--gold);
  background: var(--panel);
  border-radius: 14px;
  font-size: calc(18px * var(--tv-font-scale,1));
}
.guest-sync button {
  margin-left: auto;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid var(--gold);
  background: var(--panel);
  color: var(--text);
}
.guest-sync p {
  flex-basis: 100%;
  margin: 0;
}
.guest-sync[aria-busy=true] {
  border-style: dashed;
}
@media (min-width: 701px) {
  .tv-shell .food-art {
    width: 58%;
    overflow: hidden;
  }
  .tv-shell .food-copy {
    width: 42%;
    padding: calc(1 * var(--tv-vh,1vh));
    gap: 5px;
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-copy {
      padding: max(8px, min(calc(1 * var(--tv-vh,1vh)), 14px));
    }
  }
  .tv-shell .food-copy h2 {
    font-size: calc(calc(1.05 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
    white-space: normal;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @supports (font-size:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-copy h2 {
      font-size: calc(max(14px, min(calc(1.05 * var(--tv-vw,1vw)), 20px)) * var(--tv-font-scale,1));
    }
  }
  .tv-shell .food-copy p {
    font-size: calc(12px * var(--tv-font-scale,1));
    line-height: 1.3;
  }
  .tv-shell .price-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .tv-shell .price-row strong {
    font-size: calc(calc(1.1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  }
  @supports (font-size:clamp(1px, 2vw, 3px)) {
    .tv-shell .price-row strong {
      font-size: calc(max(14px, min(calc(1.1 * var(--tv-vw,1vw)), 20px)) * var(--tv-font-scale,1));
    }
  }
  .tv-shell .food-copy .add {
    padding: 7px 10px;
    font-size: calc(12px * var(--tv-font-scale,1));
    gap: 5px;
  }
  .tv-shell .food-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tv-shell .food-card:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold);
  }
}
.cart-product {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.cart-product img {
  width: calc(5 * var(--tv-vw,1vw));
  height: calc(5 * var(--tv-vw,1vw));
  object-fit: cover;
  border-radius: 10px;
  flex: none;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .cart-product img {
    width: max(44px, min(calc(5 * var(--tv-vw,1vw)), 80px));
    height: max(44px, min(calc(5 * var(--tv-vw,1vw)), 80px));
  }
}
.cart-product > div {
  min-width: 0;
}
.cart-product span {
  font-size: calc(14px * var(--tv-font-scale,1));
  color: var(--muted);
}
.tv-shell .welcome-video-frame {
  width: min(100%, calc(calc(60 * var(--tv-vh,1vh)) * var(--welcome-video-ratio,1.77778)));
  aspect-ratio: var(--welcome-video-ratio,1.77778);
  max-height: calc(60 * var(--tv-vh,1vh));
  margin-left: auto;
  margin-right: auto;
}
.tv-shell .welcome-video-frame video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell .welcome-video-frame {
    width: min(100%, calc(calc(48 * var(--tv-vh,1vh)) * var(--welcome-video-ratio,1.77778)));
    max-height: calc(48 * var(--tv-vh,1vh));
  }
}
.tv-shell > main.screen-food {
  display: block;
  overflow-y: auto;
  scroll-padding-block: 24px;
}
.tv-shell .screen-food .page-heading {
  margin-bottom: 22px;
}
.tv-shell .screen-food .food-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none !important;
  grid-gap: 24px;
  gap: 24px;
  flex: none;
  min-height: 0;
  overflow: visible;
}
.tv-shell .screen-food .food-card {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border-radius: 22px;
}
.tv-shell .screen-food .food-art {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  flex: none;
  position: relative;
}
.tv-shell .screen-food .food-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-shell .screen-food .food-art > span {
  display: none;
}
.tv-shell .screen-food .food-copy {
  width: 100%;
  padding: 18px 20px;
  gap: 8px;
  flex: 1;
}
.tv-shell .screen-food .food-copy h2 {
  font-size: calc(calc(1.5 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.2;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .food-copy h2 {
    font-size: calc(max(20px, min(calc(1.5 * var(--tv-vw,1vw)), 29px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-food .food-copy p {
  display: -webkit-box;
  font-size: calc(calc(1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  min-height: 2.6em;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .food-copy p {
    font-size: calc(max(13px, min(calc(1 * var(--tv-vw,1vw)), 18px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-food .price-row {
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.tv-shell .screen-food .price-row strong {
  font-size: calc(calc(1.5 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .price-row strong {
    font-size: calc(max(20px, min(calc(1.5 * var(--tv-vw,1vw)), 28px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-food .food-copy .add {
  font-size: calc(calc(1.1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  padding: 12px 18px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .food-copy .add {
    font-size: calc(max(15px, min(calc(1.1 * var(--tv-vw,1vw)), 20px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-food .food-bottom {
  position: sticky;
  bottom: -24px;
  z-index: 3;
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--gold);
}
.tv-shell .screen-food .food-card:focus-within {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13333);
}
.tv-shell .screen-food .food-card:focus-within img {
  filter: brightness(1.04);
}
@media (max-width: 700px) {
  .tv-shell .screen-food .food-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .tv-shell .screen-food .food-copy {
    padding: 12px;
  }
  .tv-shell .screen-food .food-copy .add {
    padding: 9px;
  }
  .tv-shell .screen-food .food-bottom {
    bottom: 0;
  }
}
.tv-shell > main.screen-food {
  scroll-padding-bottom: 120px;
}
.tv-shell .screen-food .food-bottom {
  box-shadow: 0 -10px 24px var(--bg);
}
.tv-shell.content-shell {
  height: calc(100 * var(--tv-vh,1vh));
  height: calc(100 * var(--tv-vh,1dvh));
  min-height: 0;
  padding: 0 calc(3 * var(--tv-vw,1vw));
  overflow: hidden;
}
.tv-shell.content-shell > main {
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 24px 0;
  overflow-y: auto;
  scroll-padding-top: 85px;
}
.content-navigation {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: -24px;
  z-index: 8;
  pointer-events: none;
  margin-bottom: 18px;
  min-height: 48px;
}
.content-navigation .back {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--gold);
  border-radius: 12px;
  font-size: calc(18px * var(--tv-font-scale,1));
}
.tv-shell.content-shell .screen-menu .menu-grid {
  margin-top: 0;
}
.tv-shell.content-shell .guest-notification {
  top: 24px;
}
.tv-shell.content-shell .screen-food .food-bottom {
  bottom: -24px;
}
@media (max-height: 650px) {
  .tv-shell.content-shell > main {
    padding: 16px 0;
  }
  .content-navigation {
    top: -16px;
    margin-bottom: 12px;
  }
  .tv-shell.content-shell .screen-food .food-grid {
    gap: 16px;
  }
}
.tv-shell.content-shell > main {
  min-width: 0;
  overflow-x: hidden;
}
.tv-shell.content-shell > main.screen-menu {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  padding-right: 12px;
}
.tv-shell.content-shell .screen-menu .menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  padding: 12px;
  gap: calc(2 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.content-shell .screen-menu .menu-grid {
    gap: max(16px, min(calc(2 * var(--tv-vh,1vh)), 28px));
  }
}
.tv-shell.content-shell .screen-menu .menu-card {
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: calc(3 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.content-shell .screen-menu .menu-card {
    padding: max(20px, min(calc(3 * var(--tv-vh,1vh)), 40px));
  }
}
.tv-shell.content-shell .screen-menu .card-bottom strong {
  font-size: calc(calc(2 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  overflow-wrap: anywhere;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell.content-shell .screen-menu .card-bottom strong {
    font-size: calc(max(20px, min(calc(2 * var(--tv-vw,1vw)), 36px)) * var(--tv-font-scale,1));
  }
}
.tv-shell.content-shell[class*=theme-harbor] .screen-menu .menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tv-shell.content-shell[class*=theme-harbor] .screen-menu .menu-card {
  padding: 0;
}
@media (max-width: 700px) {
  .tv-shell.content-shell .screen-menu .menu-grid,
  .tv-shell.content-shell[class*=theme-harbor] .screen-menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.welcome-video-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      #243d46,
      #17272d);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.welcome-video-cover span {
  padding: 14px 22px;
  color: #f4f1e9;
  font-size: calc(calc(1.5 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.46667);
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .welcome-video-cover span {
    font-size: calc(max(16px, min(calc(1.5 * var(--tv-vw,1vw)), 28px)) * var(--tv-font-scale,1));
  }
}
.welcome-video-frame video::-webkit-media-controls,
.welcome-video-frame video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
.tv-shell.focus-spotlight .menu-card,
.tv-shell.focus-spotlight .food-card,
.tv-shell.focus-spotlight .guest-service-grid > button,
.tv-shell.focus-spotlight .guest-content-card {
  position: relative;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.tv-shell.focus-spotlight .menu-card:focus,
.tv-shell.focus-spotlight .food-card:focus-within,
.tv-shell.focus-spotlight .guest-service-grid > button:focus,
.tv-shell.focus-spotlight .guest-content-card:focus-within {
  z-index: 2;
  transform: scale(1.035);
  outline: 5px solid #f7cf7b;
  outline-offset: -5px;
  box-shadow: 0 0 0 5px rgba(247,207,123,0.33333), 0 16px 38px rgba(0,0,0,0.6);
  filter: none;
}
.tv-shell.focus-spotlight .menu-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight .food-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight .guest-service-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight .guest-content-grid:focus-within > :not(:focus-within) {
  opacity: .48;
}
.tv-shell.cinematic-content.focus-spotlight .menu-card:focus strong,
.tv-shell.cinematic-content.focus-spotlight .menu-card:focus h2,
.tv-shell.cinematic-content.focus-spotlight .menu-card:focus svg,
.tv-shell.cinematic-content.focus-spotlight .food-card:focus-within strong,
.tv-shell.cinematic-content.focus-spotlight .food-card:focus-within h2,
.tv-shell.cinematic-content.focus-spotlight .food-card:focus-within svg {
  color: #fff4d9;
}
.tv-shell.focus-spotlight button:focus {
  outline: 4px solid #f7cf7b;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(247,207,123,0.2);
}
.tv-shell.focus-spotlight.has-focused-card .cinematic-backdrop video {
  opacity: .42;
}
.tv-shell.focus-spotlight .food-grid {
  padding: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .tv-shell.focus-spotlight .menu-card,
  .tv-shell.focus-spotlight .food-card,
  .tv-shell.focus-spotlight .guest-service-grid > button,
  .tv-shell.focus-spotlight .guest-content-card {
    transition: none;
  }
}
.tv-shell.cinematic-content {
  --bg:#090d12;
  --panel:rgba(20,32,45,0.86667);
  --text:#f5f5f6;
  --muted:#c5cbd4;
  --gold:#e1be82;
  background: #090d12;
  color: var(--text);
}
.tv-shell.cinematic-content.has-background:after {
  display: none;
}
.tv-shell .cinematic-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cinematic-content .cinematic-backdrop .welcome-media,
.cinematic-content .cinematic-backdrop .welcome-video-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
}
.cinematic-content .cinematic-backdrop video {
  object-fit: cover;
  opacity: .65;
}
.cinematic-content .cinematic-backdrop:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      90deg,
      rgba(9,13,18,0.92941),
      rgba(9,13,18,0.6) 65%,
      rgba(9,13,18,0.46667)),
    linear-gradient(
      0deg,
      rgba(9,13,18,0.86667),
      transparent 45%,
      rgba(9,13,18,0.65882));
  pointer-events: none;
}
.tv-shell.cinematic-content .menu-card,
.tv-shell.cinematic-content .info-card,
.tv-shell.cinematic-content .food-card,
.tv-shell.cinematic-content .summary,
.tv-shell.cinematic-content .cart-row,
.tv-shell.cinematic-content .service-strip,
.tv-shell.cinematic-content .guest-content-card,
.tv-shell.cinematic-content .guest-order,
.tv-shell.cinematic-content .guest-account-total,
.tv-shell.cinematic-content .guest-reservation,
.tv-shell.cinematic-content .guest-sync {
  background: rgba(20,32,45,0.72941);
  border-color: rgba(255,255,255,0.18824);
  color: var(--text);
  box-shadow: none;
}
.tv-shell.cinematic-content .card-food,
.tv-shell.cinematic-content .card-room {
  background: rgba(20,32,45,0.72941);
}
.tv-shell.cinematic-content .card-bottom,
.tv-shell.cinematic-content .card-top {
  background: transparent;
  color: var(--muted);
}
.tv-shell.cinematic-content h1,
.tv-shell.cinematic-content h2,
.tv-shell.cinematic-content h3,
.tv-shell.cinematic-content strong {
  color: var(--text);
}
.tv-shell.cinematic-content p,
.tv-shell.cinematic-content small,
.tv-shell.cinematic-content .card-top > span,
.tv-shell.cinematic-content .food-copy p {
  color: var(--muted);
}
.tv-shell.cinematic-content .back,
.tv-shell.cinematic-content .add,
.tv-shell.cinematic-content .quantity button,
.tv-shell.cinematic-content .guest-tabs button,
.tv-shell.cinematic-content .guest-service-grid button,
.tv-shell.cinematic-content .harbor-secondary button {
  background: rgba(23,33,44,0.85098);
  border-color: rgba(255,255,255,0.25098);
  color: var(--text);
}
.tv-shell.cinematic-content .primary {
  background: #e1be82;
  color: #101820;
}
.tv-shell.cinematic-content button:focus {
  outline-color: #e1be82;
  box-shadow: 0 0 0 8px rgba(225,190,130,0.10196);
}
.tv-shell.cinematic-content .food-footer {
  background: rgba(16,27,39,0.94902);
  border-color: rgba(255,255,255,0.20784);
  color: var(--text);
}
.tv-shell.cinematic-content .food-footer span {
  color: var(--muted);
}
.tv-shell.cinematic-content .food-art {
  background: #14202d;
}
.tv-shell.cinematic-content .price-row {
  flex-wrap: wrap;
}
.tv-shell.cinematic-content .price-row strong {
  flex: 1 1 180px;
  white-space: normal;
}
.tv-shell.cinematic-content .price-row button {
  flex: 0 0 auto;
}
.tv-shell.cinematic-welcome {
  --bg:#090d12;
  --panel:#17212c;
  --text:#f5f5f6;
  --muted:#c5cbd4;
  --gold:#e1be82;
  background: #090d12;
}
.tv-shell.cinematic-welcome.has-background:after {
  display: none;
}
.tv-shell.cinematic-welcome .welcome-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.tv-shell.cinematic-welcome .welcome-video-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
}
.tv-shell.cinematic-welcome .welcome-video-frame video {
  object-fit: cover;
  opacity: .78;
}
.tv-shell.cinematic-welcome .welcome-media:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      90deg,
      #090d12 0%,
      rgba(9,13,18,0.94118) 20%,
      rgba(9,13,18,0.72157) 44%,
      rgba(9,13,18,0.25098) 75%,
      rgba(9,13,18,0.18824)),
    linear-gradient(
      0deg,
      rgba(9,13,18,0.87843),
      transparent 35%,
      transparent 70%,
      rgba(9,13,18,0.56471));
  pointer-events: none;
}
.tv-shell.cinematic-welcome .welcome {
  grid-template-columns: 1fr;
}
.tv-shell.cinematic-welcome .welcome-copy {
  width: 58%;
  max-width: 950px;
  position: relative;
}
.tv-shell.cinematic-welcome .welcome h1 {
  color: var(--text);
  text-shadow: 0 3px 18px rgba(0,0,0,0.26667);
}
.tv-shell.cinematic-welcome header,
.tv-shell.cinematic-welcome footer {
  border-color: rgba(255,255,255,0.12549);
}
.tv-shell.cinematic-welcome .room-pill,
.tv-shell.cinematic-welcome .tv-actions button,
.tv-shell.cinematic-welcome .guest-language button {
  background: rgba(23,33,44,0.72157);
  border-color: rgba(255,255,255,0.20784);
  color: var(--text);
}
.tv-shell.cinematic-welcome .primary {
  background: #f2f2f2;
  color: #18202a;
  border-radius: 12px;
}
.tv-shell.cinematic-welcome .welcome-video-cover span {
  margin-left: 40%;
}
@media (max-width: 700px) {
  .tv-shell.cinematic-welcome .welcome-copy {
    width: 100%;
  }
  .tv-shell.cinematic-welcome .welcome-media:after {
    background: rgba(9,13,18,0.72157);
  }
}
.tv-shell.cinematic-welcome > main {
  animation: none;
  overflow: visible;
}
.tv-shell .screen-food .food-copy h2 {
  font-size: calc(calc(2 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.2;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .food-copy h2 {
    font-size: calc(max(25px, min(calc(2 * var(--tv-vw,1vw)), 38px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .screen-food .price-row {
  gap: 12px;
  align-items: center;
}
.tv-shell .screen-food .price-row strong {
  font-size: calc(calc(1.6 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.35;
  min-width: 0;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .screen-food .price-row strong {
    font-size: calc(max(20px, min(calc(1.6 * var(--tv-vw,1vw)), 30px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .guest-order {
  padding: 28px;
}
.tv-shell .guest-order p {
  font-size: calc(calc(1.8 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  font-weight: 600;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .guest-order p {
    font-size: calc(max(22px, min(calc(1.8 * var(--tv-vw,1vw)), 34px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .guest-order > strong {
  font-size: calc(calc(2 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  color: var(--gold);
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .guest-order > strong {
    font-size: calc(max(24px, min(calc(2 * var(--tv-vw,1vw)), 38px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .guest-order > div b {
  font-size: calc(calc(1.4 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .guest-order > div b {
    font-size: calc(max(19px, min(calc(1.4 * var(--tv-vw,1vw)), 27px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .guest-order > div span {
  font-size: calc(calc(1.1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .guest-order > div span {
    font-size: calc(max(15px, min(calc(1.1 * var(--tv-vw,1vw)), 21px)) * var(--tv-font-scale,1));
  }
}
.cart-reservation {
  grid-column: 1/-1;
  width: 100%;
  padding: 12px 0;
}
.reservation-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reservation-controls button {
  padding: 12px 16px;
  min-height: 44px;
}
.tv-shell {
  color: var(--text);
}
.tv-shell .cinematic-backdrop {
  z-index: 0;
}
.tv-shell.cinematic-content > header,
.tv-shell.cinematic-content > main {
  position: relative;
  z-index: 1;
}
.tv-shell.cinematic-welcome .welcome-media {
  z-index: 0;
}
.tv-shell.cinematic-welcome .welcome-copy {
  position: relative;
  z-index: 1;
}
.tv-shell.has-background:before,
.tv-shell.has-background:after {
  z-index: 0;
}
.tv-shell.has-background > header,
.tv-shell.has-background > main,
.tv-shell.has-background > footer,
.tv-shell.cinematic-content > footer {
  position: relative;
  z-index: 1;
}
.tv-shell .cinematic-backdrop,
.tv-shell.cinematic-welcome .welcome-media,
.tv-shell.cinematic-welcome .welcome-media:after,
.tv-shell .cinematic-backdrop:after,
.tv-shell .welcome-video-frame video,
.tv-shell .welcome-video-cover {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.tv-shell.theme-glass {
  --tv-theme-page:#e7eef0;
  --tv-theme-surface:rgba(255,255,255,.94);
  --tv-theme-ink:#243c46;
  --tv-theme-secondary:#627985;
  --tv-theme-accent:#49757e;
  --tv-theme-accent-ink:#ffffff;
  --tv-theme-border:rgba(73,117,126,.4);
}
.tv-shell.theme-sand {
  --tv-theme-page:#f3eddf;
  --tv-theme-surface:rgba(255,252,244,.94);
  --tv-theme-ink:#574931;
  --tv-theme-secondary:#796b54;
  --tv-theme-accent:#927341;
  --tv-theme-accent-ink:#ffffff;
  --tv-theme-border:rgba(146,115,65,.4);
}
.tv-shell.theme-dark {
  --tv-theme-page:#101a1b;
  --tv-theme-surface:rgba(22,39,39,.94);
  --tv-theme-ink:#f4f0e7;
  --tv-theme-secondary:#c1ceca;
  --tv-theme-accent:#d8bb82;
  --tv-theme-accent-ink:#101a1b;
  --tv-theme-border:rgba(216,187,130,.4);
}
.tv-shell.theme-harbor {
  --tv-theme-page:#153948;
  --tv-theme-surface:rgba(21,57,72,.94);
  --tv-theme-ink:#f5f0e3;
  --tv-theme-secondary:#c8d7d7;
  --tv-theme-accent:#d9bf88;
  --tv-theme-accent-ink:#153948;
  --tv-theme-border:rgba(217,191,136,.4);
}
.tv-shell.theme-harbor-sand {
  --tv-theme-page:#e5d7b9;
  --tv-theme-surface:rgba(255,253,246,.94);
  --tv-theme-ink:#4b493b;
  --tv-theme-secondary:#796f5d;
  --tv-theme-accent:#977847;
  --tv-theme-accent-ink:#ffffff;
  --tv-theme-border:rgba(151,120,71,.4);
}
.tv-shell.theme-harbor-sage {
  --tv-theme-page:#e0e6d7;
  --tv-theme-surface:rgba(255,254,247,.94);
  --tv-theme-ink:#314d43;
  --tv-theme-secondary:#65796b;
  --tv-theme-accent:#66816a;
  --tv-theme-accent-ink:#ffffff;
  --tv-theme-border:rgba(102,129,106,.4);
}

/* src/features/tv/phone-menu-qr.css */
.tv-shell .food-sidebar > .phone-menu-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.phone-menu-qr img {
  display: block;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  background: white;
  border: 6px solid white;
  box-sizing: content-box;
  border-radius: 4px;
}
@media (max-height: 650px) {
  .phone-menu-qr img {
    width: 144px;
    height: 144px;
  }
}
.tv-shell .food-sidebar > .phone-menu-qr-pending {
  justify-content: flex-start;
  font-size: calc(14px * var(--tv-font-scale,1));
  text-align: left;
  padding: 8px 4px;
}
.phone-menu-qr-pending p {
  margin: 0 0 6px;
  line-height: 1.35;
  color: inherit;
}
.phone-menu-qr-pending button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 6px 10px;
}
.phone-menu-qr-pending button:focus {
  outline: 3px solid #e9c785;
  outline-offset: 2px;
}

/* src/features/tv/food-menu.css */
.tv-shell.content-shell > main.screen-food {
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}
.tv-shell .screen-food .content-navigation {
  position: absolute;
  top: 12px;
  right: 0;
  margin: 0;
  min-height: 0;
}
.tv-shell .food-menu-layout {
  display: grid;
  grid-template-columns: calc(21 * var(--tv-vw,1vw)) minmax(0, 1fr);
  grid-gap: 20px;
  gap: 20px;
  height: calc(calc(100 * var(--tv-vh,1dvh)) - 32px);
  min-height: 0;
  color: var(--text);
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .food-menu-layout {
    grid-template-columns: max(215px, min(calc(21 * var(--tv-vw,1vw)), 290px)) minmax(0, 1fr);
  }
}
.tv-shell .food-menu-layout h2 {
  font-family: inherit;
  font-size: calc(24px * var(--tv-font-scale,1));
  letter-spacing: 0;
}
.tv-shell .food-section-label {
  font-size: calc(12px * var(--tv-font-scale,1));
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--gold);
}
.tv-shell .food-sidebar {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 4px;
}
.tv-shell .food-categories {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scroll-padding: 8px;
  padding: 0 4px 6px;
}
.tv-shell .food-categories > .food-section-label {
  padding: 7px 8px 12px;
  flex-shrink: 0;
}
.tv-shell .food-categories button {
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 8px;
  font-size: calc(16px * var(--tv-font-scale,1));
  min-height: 46px;
  flex-shrink: 0;
  color: var(--muted);
}
.tv-shell .food-categories button span {
  flex: 1;
}
.tv-shell .food-categories button small {
  font-size: calc(12px * var(--tv-font-scale,1));
}
.tv-shell .food-categories button img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 7px;
  flex-shrink: 0;
}
.tv-shell .food-categories button.selected {
  background: var(--panel);
  border-color: var(--gold);
  color: var(--text);
}
.tv-shell .food-catalog {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.tv-shell .food-catalog-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 125px 12px 6px;
  min-height: 46px;
  flex-shrink: 0;
}
.tv-shell .food-catalog-heading h2 {
  margin: 0;
  line-height: 1.2;
}
.tv-shell .food-catalog-heading > span {
  font-size: calc(13px * var(--tv-font-scale,1));
  color: var(--muted);
  white-space: nowrap;
}
.tv-shell .food-subgroups {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 6px 10px;
  flex-shrink: 0;
}
.tv-shell .food-subgroups button {
  border: 1px solid rgba(255,255,255,0.18824);
  border-radius: 10px;
  padding: 7px 11px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .food-subgroups button[aria-pressed=true] {
  background: #127c82;
  border-color: #8cf4ec;
  color: white;
}
.tv-shell .food-product-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  flex: 1;
  scroll-padding: 10px;
  padding: 6px 8px 12px 6px;
}
.tv-shell .food-product-grid,
.tv-shell .sales-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
}
.tv-shell .food-product-tile,
.tv-shell .sales-category-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.18824);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.tv-shell .food-product-tile.selected {
  border-color: var(--gold);
}
.tv-shell .food-tile-photo {
  position: relative;
  width: 100%;
  height: calc(17 * var(--tv-vh,1vh));
  flex-shrink: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  background: rgba(255,255,255,0.04314);
  overflow: hidden;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .food-tile-photo {
    height: max(100px, min(calc(17 * var(--tv-vh,1vh)), 185px));
  }
}
.tv-shell .food-tile-photo img,
.tv-shell .sales-category-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tv-shell .sales-category-card > img {
  height: calc(20 * var(--tv-vh,1vh));
  flex-shrink: 0;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .sales-category-card > img {
    height: max(110px, min(calc(20 * var(--tv-vh,1vh)), 215px));
  }
}
.tv-shell .food-basket-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: #182122;
  border-radius: 20px;
  padding: 4px 9px;
  font-size: calc(13px * var(--tv-font-scale,1));
}
.tv-shell .food-tile-copy {
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tv-shell .food-tile-copy h3 {
  font-size: calc(20px * var(--tv-font-scale,1));
  line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 600;
  height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-shell .food-tile-copy p {
  font-size: calc(13px * var(--tv-font-scale,1));
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.7em;
  margin: 0 0 8px;
}
.tv-shell .food-tile-copy strong {
  display: block;
  color: var(--gold);
  font-size: calc(20px * var(--tv-font-scale,1));
  margin-top: auto;
}
.tv-shell .food-tile-copy small {
  display: block;
  color: var(--muted);
  font-size: calc(12px * var(--tv-font-scale,1));
  line-height: 16px;
  margin-top: 4px;
  min-height: 16px;
}
.tv-shell .food-tile-action {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03922);
  border-top: 1px solid rgba(255,255,255,0.12549);
  padding: 7px;
  margin: 10px -12px -12px;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .sales-category-card > div {
  padding: 14px;
  flex: 1;
}
.tv-shell .sales-category-card h3 {
  font-size: calc(20px * var(--tv-font-scale,1));
  margin: 0 0 7px;
  line-height: 1.2;
  height: 2.4em;
}
.tv-shell .sales-category-card p {
  font-size: calc(13px * var(--tv-font-scale,1));
  color: var(--muted);
  line-height: 1.4;
  min-height: 2.8em;
  margin: 0 0 8px;
}
.tv-shell .sales-category-card span {
  font-size: calc(13px * var(--tv-font-scale,1));
  color: var(--gold);
}
.tv-shell .food-sidebar-basket {
  flex-shrink: 0;
  min-width: 0;
}
.tv-shell .food-cart-summary {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.18824);
  border-radius: 14px;
  padding: 12px;
}
.tv-shell .food-cart-summary h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(19px * var(--tv-font-scale,1));
  margin: 0 0 8px;
}
.tv-shell .food-cart-summary h2 > span {
  margin-left: auto;
  font-size: calc(14px * var(--tv-font-scale,1));
  color: var(--gold);
}
.tv-shell .food-cart-lines {
  max-height: 95px;
  overflow: auto;
  color: var(--muted);
  font-size: calc(13px * var(--tv-font-scale,1));
  margin: 8px 0;
}
.tv-shell .food-cart-lines p {
  margin: 6px 0;
}
.tv-shell .food-cart-lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}
.tv-shell .food-cart-lines > div > span {
  width: 100%;
}
.tv-shell .food-cart-lines strong {
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}
.tv-shell .food-cart-adjust {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.tv-shell .food-cart-adjust button {
  width: 32px;
  height: 32px;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.25098);
  background: var(--panel);
  border-radius: 8px;
  color: var(--text);
}
.tv-shell .food-cart-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.12549);
  font-size: calc(15px * var(--tv-font-scale,1));
}
.tv-shell .food-cart-total strong {
  color: var(--gold);
  font-size: calc(19px * var(--tv-font-scale,1));
}
.tv-shell .food-checkout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--gold);
  color: #172223;
  border-radius: 9px;
  padding: 10px;
  font-weight: 600;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .food-feedback {
  font-size: calc(12px * var(--tv-font-scale,1));
  line-height: 1.3;
  color: var(--muted);
  margin: 8px 0 0;
}
.tv-shell .food-feedback:empty {
  display: none;
}
.tv-shell .food-menu-layout button:disabled {
  opacity: .45;
}
.tv-shell .food-menu-layout button:focus {
  outline: 4px solid var(--gold);
  outline-offset: -4px;
  box-shadow: 0 0 0 3px rgba(225,190,130,0.25098);
  transform: none;
  position: relative;
  z-index: 2;
}
.tv-shell .food-product-tile:focus .food-tile-action {
  background: var(--gold);
  color: #172223;
}
.tv-shell .food-empty {
  padding: 20px;
  color: var(--muted);
}
@media (min-width: 1600px) {
  .tv-shell .food-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .tv-shell .food-menu-layout {
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 12px;
  }
  .tv-shell .food-product-grid,
  .tv-shell .sales-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .tv-shell.content-shell > main.screen-food {
    overflow-y: auto;
    padding-top: 68px;
  }
  .tv-shell .food-menu-layout {
    height: auto;
    grid-template-columns: 1fr;
  }
  .tv-shell .food-sidebar {
    overflow: visible;
  }
  .tv-shell .food-categories {
    flex-direction: row;
    overflow-x: auto;
    flex: none;
  }
  .tv-shell .food-categories > .food-section-label {
    display: none;
  }
  .tv-shell .food-categories button {
    white-space: nowrap;
  }
  .tv-shell .food-cart-lines {
    max-height: 95px;
  }
  .tv-shell .food-catalog-heading {
    padding-right: 0;
  }
  .tv-shell .food-product-scroll {
    max-height: none;
    overflow: visible;
  }
  .tv-shell .food-product-grid,
  .tv-shell .sales-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 701px) and (max-height: 800px) {
  .tv-shell .food-tile-photo {
    height: calc(16 * var(--tv-vh,1vh));
  }
  @supports (width:clamp(1px, 2vw, 3px)) {
    .tv-shell .food-tile-photo {
      height: max(85px, min(calc(16 * var(--tv-vh,1vh)), 128px));
    }
  }
  .tv-shell .food-tile-copy p {
    display: none;
  }
  .tv-shell .food-tile-copy h3 {
    margin-bottom: 6px;
  }
  .tv-shell .food-product-tile {
    min-height: 0;
  }
  .tv-shell .sales-category-card > img {
    height: calc(16 * var(--tv-vh,1vh));
  }
  .tv-shell .sales-category-card > div {
    padding: 12px;
  }
  .tv-shell .sales-category-card p {
    margin-bottom: 4px;
  }
}
.tv-shell .food-tile-photo {
  height: calc(24 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .food-tile-photo {
    height: max(145px, min(calc(24 * var(--tv-vh,1vh)), 260px));
  }
}
.tv-shell .food-tile-photo::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent, rgba(6,16,24,0.9098));
  pointer-events: none;
}
.tv-shell .food-tile-photo h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  color: #fff;
  font-size: calc(20px * var(--tv-font-scale,1));
  line-height: 1.2;
  font-weight: 600;
  padding: 10px 12px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px #000;
}
.tv-shell .food-basket-badge {
  z-index: 2;
}
.tv-shell .food-tile-copy {
  padding: 9px 12px 0;
  flex: 1;
}
.tv-shell .food-tile-copy p {
  display: -webkit-box;
  height: 2.7em;
  min-height: 0;
  margin: 0 0 8px;
  font-size: calc(13px * var(--tv-font-scale,1));
  line-height: 1.35;
}
.tv-shell .food-tile-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: auto -12px 0;
  padding: 9px 12px;
  font-size: calc(14px * var(--tv-font-scale,1));
}
.tv-shell .food-tile-action > span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tv-shell .food-tile-action strong {
  font-size: calc(19px * var(--tv-font-scale,1));
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  color: inherit;
}
.tv-shell .food-product-tile:focus .food-tile-action strong {
  color: inherit;
}
.tv-shell .food-product-grid,
.tv-shell .sales-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}
.tv-zoom-frame .tv-zoom-content .tv-shell .food-product-grid,
.tv-zoom-frame .tv-zoom-content .tv-shell .sales-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--shop-card-width,260px), 100%), 1fr));
}
.tv-zoom-content .tv-shell[data-display-size=small] {
  --shop-card-width:215px;
}
.tv-zoom-content .tv-shell[data-display-size=large] {
  --shop-card-width:330px;
}
.tv-zoom-content .tv-shell .food-tile-photo {
  height: calc(24 * var(--tv-physical-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-zoom-content .tv-shell .food-tile-photo {
    height: max(145px, min(calc(24 * var(--tv-physical-vh,1vh)), 260px));
  }
}
.tv-zoom-content .tv-shell .sales-category-card > img {
  height: calc(20 * var(--tv-physical-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-zoom-content .tv-shell .sales-category-card > img {
    height: max(140px, min(calc(20 * var(--tv-physical-vh,1vh)), 215px));
  }
}
.tv-shell .food-cart-compact .food-cart-total {
  border: 0;
  padding: 0 0 10px;
  align-items: center;
}
.tv-shell .food-cart-compact .food-cart-total > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tv-shell .food-menu-layout.food-viewport-fit {
  grid-template-columns: 20vw minmax(0, 1fr);
  overflow: hidden;
  box-sizing: border-box;
  gap: 14px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .food-menu-layout.food-viewport-fit {
    grid-template-columns: max(175px, min(20vw, 250px)) minmax(0, 1fr);
  }
}
.tv-shell .food-viewport-fit .food-sidebar {
  overflow: hidden;
  min-height: 0;
  gap: 6px;
}
.tv-shell .food-viewport-fit .food-categories {
  overflow: auto;
  flex: 1;
  min-height: 0;
  gap: 6px;
  justify-content: space-between;
}
.tv-shell .food-viewport-fit .food-categories button {
  min-height: 52px;
  padding: 8px;
  font-size: calc(18px * var(--tv-font-scale,1));
  flex: 1 0 auto;
}
.tv-shell .food-viewport-fit .food-categories button img {
  width: 34px;
  height: 34px;
  margin-right: 6px;
}
.tv-shell .food-viewport-fit .phone-menu-qr img {
  width: 180px;
  height: auto;
  max-width: calc(100% - 12px);
}
.tv-shell .food-viewport-fit .food-catalog {
  height: 100%;
  overflow: hidden;
}
.tv-shell .food-viewport-fit .food-product-scroll {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
}
.tv-zoom-frame .tv-zoom-content .tv-shell .food-viewport-fit .food-product-grid,
.tv-zoom-frame .tv-zoom-content .tv-shell .food-viewport-fit .sales-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tv-shell .food-viewport-fit .food-scroll-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 8px 4px;
  flex-shrink: 0;
}
.tv-shell .food-viewport-fit .food-scroll-buttons button {
  font: inherit;
  font-size: calc(17px * var(--tv-font-scale,1));
  min-width: 120px;
  min-height: 44px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  padding: 8px 20px;
}
.tv-shell .food-viewport-fit .food-scroll-buttons button:disabled {
  opacity: .35;
}

/* src/features/tv/room-iot.css */
.tv-shell .iot-section {
  grid-column: 1/-1;
  min-width: 0;
}
.tv-shell .iot-section-label {
  color: var(--muted);
  font-size: calc(calc(1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  letter-spacing: 2px;
  margin: 0 0 14px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .iot-section-label {
    font-size: calc(max(12px, min(calc(1 * var(--tv-vw,1vw)), 18px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  grid-gap: 20px;
  gap: 20px;
}
.tv-shell .room-iot-card {
  min-width: 0;
  min-height: 0 !important;
  padding: calc(2 * var(--tv-vw,1vw)) !important;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-iot-card {
    padding: max(18px, min(calc(2 * var(--tv-vw,1vw)), 32px)) !important;
  }
}
.tv-shell .iot-card-title {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.tv-shell .iot-device-icon {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 16px;
  color: var(--gold);
}
.tv-shell .iot-device-icon svg {
  margin: 0;
  width: 28px;
  height: 28px;
}
.tv-shell .room-iot-card h2 {
  margin: 0 !important;
  font-size: calc(calc(1.8 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-iot-card h2 {
    font-size: calc(max(22px, min(calc(1.8 * var(--tv-vw,1vw)), 32px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-connection {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: calc(14px * var(--tv-font-scale,1));
  color: var(--muted);
}
.tv-shell .iot-connection i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}
.tv-shell .iot-connection i.is-online {
  background: #5b9e7a;
}
.tv-shell .iot-readings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
}
.tv-shell .iot-reading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tv-shell .iot-reading > span {
  font-size: calc(calc(1.15 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  color: var(--muted);
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .iot-reading > span {
    font-size: calc(max(16px, min(calc(1.15 * var(--tv-vw,1vw)), 22px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-reading strong {
  font-size: calc(calc(3 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .iot-reading strong {
    font-size: calc(max(32px, min(calc(3 * var(--tv-vw,1vw)), 54px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-reading small {
  font-size: calc(.5em * var(--tv-font-scale,1));
  margin-left: 8px;
  color: var(--muted);
}
.tv-shell .iot-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.tv-shell .iot-controls button {
  min-height: 58px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--gold);
  border-radius: 14px;
  font-size: calc(calc(1.5 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .iot-controls button {
    font-size: calc(max(20px, min(calc(1.5 * var(--tv-vw,1vw)), 26px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-controls button svg {
  margin: 0;
  width: 22px;
  height: 22px;
}
.tv-shell .iot-controls button:focus {
  background: var(--gold);
  color: var(--bg);
  outline: 4px solid var(--gold);
  outline-offset: 5px;
  transform: scale(1.04);
}
.tv-shell .iot-feedback {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  font-size: calc(20px * var(--tv-font-scale,1));
}
@media (min-width: 900px) {
  .tv-shell .iot-section-room .room-iot-card:only-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 160px !important;
  }
  .tv-shell .iot-section-room .room-iot-card.has-controls:only-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .tv-shell .iot-section-room .room-iot-card:only-child .iot-readings {
    justify-content: flex-end;
  }
}
@media (min-width: 701px) and (max-height: 650px) {
  .tv-shell .room-iot-card {
    gap: 12px;
    padding: 16px !important;
  }
  .tv-shell .iot-section-room .room-iot-card:only-child {
    min-height: 125px !important;
  }
  .tv-shell .iot-section-label {
    margin-bottom: 8px;
  }
  .tv-shell .iot-device-icon {
    width: 44px;
    height: 44px;
  }
  .tv-shell .iot-controls button {
    min-width: 90px;
    min-height: 48px;
    padding: 10px 14px;
  }
  .tv-shell .iot-device-grid {
    gap: 14px;
  }
}
.iot-card-action {
  display: flex;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  gap: 18px;
  align-items: center;
  border-radius: 16px;
}
.iot-card-action:disabled {
  opacity: 1;
}
.iot-card-action:focus-visible {
  outline: 5px solid #eadba7;
  outline-offset: 10px;
}
.room-iot-card.device-lit {
  background: rgba(244, 232, 181, .85) !important;
  color: #182c2b !important;
  border-color: #ebd98a !important;
}
.room-iot-card.device-dark {
  background: rgba(12, 27, 31, .86) !important;
  color: #edf4f4 !important;
}
.iot-power-label {
  margin-left: auto;
  font-size: calc(19px * var(--tv-font-scale,1));
}
.iot-climate-controls {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  margin-top: 22px;
}
.iot-climate-controls > div {
  display: flex;
  gap: 14px;
}
.iot-climate-controls button {
  padding: 14px 22px;
  border-radius: 14px;
  font-size: calc(24px * var(--tv-font-scale,1));
}
.iot-target {
  align-items: center;
  justify-content: space-between;
}
.iot-target span {
  text-align: center;
}
.iot-target strong {
  display: block;
  font-size: calc(30px * var(--tv-font-scale,1));
}
.iot-target small {
  font-size: calc(15px * var(--tv-font-scale,1));
}
.tv-shell .iot-device-details {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tv-shell .iot-device-details p {
  font-size: calc(16px * var(--tv-font-scale,1));
  line-height: 1.5;
  margin: 0;
}
.tv-shell .iot-detail-context {
  color: #eed299;
  font-weight: 600;
}
.tv-shell .iot-detail-hint {
  font-size: calc(13px * var(--tv-font-scale,1));
  margin: 2px 0;
  color: inherit;
  opacity: .8;
}
.tv-shell .iot-device-details .iot-controls,
.tv-shell .iot-device-details .iot-climate-controls > div {
  flex-wrap: wrap;
  gap: 10px;
}
.tv-shell .iot-device-details button {
  min-width: 48px;
  min-height: 48px;
  border: 2px solid #ddc488;
  border-radius: 10px;
  background: #192a32;
  color: #fff;
  padding: 10px 14px;
  font-size: calc(18px * var(--tv-font-scale,1));
}
.tv-shell .iot-device-details button:disabled {
  opacity: .4;
}
.tv-shell .iot-device-details button:focus,
.tv-shell .iot-device-details button[data-tv-selected=true] {
  outline: 4px solid #fff1c9;
  outline-offset: 2px;
  background: #eed299;
  color: #14232b;
  transform: scale(1.06);
}
.tv-shell .iot-device-details .iot-target {
  flex-wrap: nowrap;
  gap: 8px;
}
.tv-shell .iot-device-details .iot-target strong {
  font-size: calc(24px * var(--tv-font-scale,1));
}
.tv-shell .iot-device-details .iot-target small {
  font-size: calc(12px * var(--tv-font-scale,1));
}
.tv-shell .iot-detail-close {
  width: 100%;
}
.tv-shell .room-scene-content {
  scroll-padding: 18px;
}
@media (max-width: 700px) {
  .tv-shell .iot-device-details button {
    font-size: calc(16px * var(--tv-font-scale,1));
    padding: 8px;
  }
  .tv-shell .iot-device-details p {
    font-size: calc(14px * var(--tv-font-scale,1));
  }
}
.tv-shell .iot-remote-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.tv-shell .iot-remote-keys button {
  min-width: 0;
  padding: 8px 4px;
  font-size: calc(16px * var(--tv-font-scale,1));
  overflow-wrap: anywhere;
}

/* src/features/tv/room-scene.css */
.tv-shell .room-scene {
  position: relative;
  isolation: isolate;
  min-height: calc(68 * var(--tv-vh,1vh));
  overflow: hidden;
  border-radius: 26px;
  background: #101719;
  color: #f5f1e6;
  padding: 24px !important;
  display: flex;
  justify-content: flex-end;
}
.room-scene-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background: url(/images/room/bungalow.jpg) left center/100% 100% no-repeat;
}
.room-scene-photo:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      90deg,
      transparent 25%,
      rgba(3, 9, 12, .3) 50%,
      rgba(3, 9, 12, .95) 78%);
}
.room-scene-content {
  width: 38%;
  min-width: 320px;
  padding: 18px;
  z-index: 1;
}
.tv-shell .room-scene .iot-device-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tv-shell .room-scene .room-iot-card {
  padding: 18px !important;
  gap: 12px;
  display: flex !important;
  min-height: 0 !important;
  background: rgba(16, 25, 28, .94);
  border: 1px solid #576162;
  border-radius: 20px;
}
.tv-shell .room-scene .room-iot-card h2 {
  font-size: calc(calc(1.7 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-scene .room-iot-card h2 {
    font-size: calc(max(20px, min(calc(1.7 * var(--tv-vw,1vw)), 30px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .room-scene .iot-readings {
  justify-content: flex-start !important;
  gap: 20px;
}
.tv-shell .room-scene .iot-reading strong {
  font-size: calc(calc(2.4 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-scene .iot-reading strong {
    font-size: calc(max(28px, min(calc(2.4 * var(--tv-vw,1vw)), 44px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .room-scene .iot-device-icon {
  width: 44px;
  height: 44px;
}
.room-scene .iot-connection {
  font-size: calc(13px * var(--tv-font-scale,1));
}
.scene-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}
.scene-zone.state-off {
  background: url(/images/room/bungalow-off.jpg) left center/100% 100% no-repeat;
}
.zone-eaves {
  -webkit-clip-path: polygon(26% 12%, 35% 10%, 47% 55%, 41% 63%, 27% 27%, 18% 66%, 12% 64%);
          clip-path: polygon(26% 12%, 35% 10%, 47% 55%, 41% 63%, 27% 27%, 18% 66%, 12% 64%);
}
.zone-wall {
  -webkit-clip-path: polygon(44% 27%, 70% 42%, 75% 70%, 55% 59%, 41% 43%);
          clip-path: polygon(44% 27%, 70% 42%, 75% 70%, 55% 59%, 41% 43%);
}
.zone-pool {
  -webkit-clip-path: ellipse(12% 10% at 53% 58%);
          clip-path: ellipse(12% 10% at 53% 58%);
}
.zone-garden {
  -webkit-clip-path: polygon(0 48%, 20% 64%, 35% 56%, 56% 67%, 71% 73%, 70% 100%, 0 100%);
          clip-path: polygon(0 48%, 20% 64%, 35% 56%, 56% 67%, 71% 73%, 70% 100%, 0 100%);
}
.room-scene .iot-feedback {
  font-size: calc(16px * var(--tv-font-scale,1));
}
.room-scene .iot-card-action:focus {
  outline: 4px solid #ffd478;
  outline-offset: 5px;
}
.room-scene .device-lit .iot-device-icon {
  color: #9d6718;
}
.room-scene .iot-section-label {
  color: #eadba7;
}
.room-scene .iot-climate-controls {
  margin: 0;
  gap: 8px;
}
.room-scene .iot-climate-controls button {
  font-size: calc(20px * var(--tv-font-scale,1));
  padding: 10px 16px;
}
@media (max-width: 900px) {
  .room-scene-content {
    width: 48%;
    min-width: 280px;
    padding: 4px;
  }
  .tv-shell .room-scene {
    padding: 16px !important;
  }
}
@media (max-width: 620px) {
  .room-scene-content {
    width: 100%;
    min-width: 0;
  }
  .room-scene-photo:after {
    background: rgba(3, 9, 12, .7);
  }
}
.tv-shell .room-scene {
  min-height: 0 !important;
  padding: 16px !important;
}
.room-scene-content {
  padding: 8px;
}
.tv-shell .room-scene .room-iot-card {
  padding: 12px 16px !important;
  gap: 8px;
}
.tv-shell .room-scene .room-iot-card h2 {
  font-size: calc(calc(1.65 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-scene .room-iot-card h2 {
    font-size: calc(max(20px, min(calc(1.65 * var(--tv-vw,1vw)), 29px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit button,
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit h2,
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit p,
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit span,
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit strong,
.tv-shell .room-scene .device-lit,
.tv-shell .room-scene .device-lit small {
  color: #17262b !important;
}
.tv-shell .room-scene .device-lit .iot-device-icon {
  color: #916117 !important;
}
.tv-shell .room-scene .iot-card-action {
  min-height: 0 !important;
}
.tv-shell .room-scene .iot-reading strong {
  font-size: calc(32px * var(--tv-font-scale,1));
}
.tv-shell .room-scene .iot-section-label {
  margin-bottom: 12px;
}
.tv-shell .room-scene .iot-card-action:disabled {
  opacity: 1 !important;
}
.tv-shell .room-scene .device-lit .iot-device-icon svg {
  color: #805516 !important;
}
.tv-shell .room-scene .iot-power-label {
  color: inherit !important;
}
.tv-shell .room-scene {
  min-height: calc(72 * var(--tv-vh,1vh)) !important;
  border-radius: 24px;
  padding: 24px !important;
}
.room-scene-photo,
.scene-zone.state-off {
  background-size: cover;
  background-position: center;
}
.room-scene-content {
  width: 36%;
  min-width: 340px;
  max-height: calc(72 * var(--tv-vh,1vh));
  overflow-y: auto;
  scrollbar-width: thin;
  background: rgba(11,17,21,0.85098);
  border: 1px solid rgba(255,255,255,0.14118);
  border-radius: 22px;
  padding: 20px;
}
.scene-heading {
  font-size: calc(30px * var(--tv-font-scale,1));
  margin: 0 0 16px !important;
  color: #fff !important;
}
.scene-labels {
  position: absolute;
  top: 0;
  right: 38%;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}
.scene-label {
  position: absolute;
  background: rgba(11,17,25,0.85098);
  border: 1px solid #d9b46c;
  border-radius: 12px;
  color: #fff;
  padding: 12px 18px;
  font-size: calc(20px * var(--tv-font-scale,1));
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.label-eaves {
  left: 8%;
  top: 18%;
}
.label-wall {
  right: 4%;
  top: 35%;
}
.label-pool {
  right: 8%;
  top: 57%;
}
.label-garden {
  left: 20%;
  bottom: 16%;
}
.zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #919ca0;
}
.zone-dot.state-on {
  background: #ffd46a;
  box-shadow: 0 0 10px #ffc855;
}
.zone-dot.state-off {
  background: #36454b;
}
.scene-empty p {
  font-size: calc(20px * var(--tv-font-scale,1));
  line-height: 1.45;
  margin: 14px 0;
  color: #c5cbd4;
}
.scene-empty a {
  display: inline-block;
  font-size: calc(20px * var(--tv-font-scale,1));
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid #e7cc8b;
  color: #e7cc8b;
  margin: 18px 0;
}
.scene-empty a:focus {
  background: #e7cc8b;
  color: #14232b;
  outline: 4px solid white;
}
.tv-shell .room-scene .room-iot-card {
  margin: 0 !important;
}
.tv-shell .room-scene .iot-card-action:focus {
  background: #fff1c9;
  color: #12232a;
  transform: scale(1.04);
  outline: 4px solid white;
}
.tv-shell .room-scene .iot-card-action:focus h2 {
  color: #12232a !important;
}
@media (max-width: 800px) {
  .scene-label {
    font-size: calc(15px * var(--tv-font-scale,1));
    padding: 8px;
  }
  .room-scene-content {
    width: 46%;
    min-width: 270px;
  }
  .scene-labels {
    right: 48%;
  }
}
@media (max-width: 620px) {
  .scene-labels {
    display: none;
  }
  .room-scene-content {
    width: 100%;
    min-width: 0;
  }
}
.iot-section-hotel .scene-labels,
.iot-section-hotel .scene-heading {
  display: none;
}
.room-scene-photo {
  background: none;
}
.room-scene-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.room-scene-art image[data-zone] {
  transition: opacity 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .room-scene-art image[data-zone] {
    transition: none;
  }
}
.tv-shell .room-scene {
  height: calc(72 * var(--tv-vh,1vh));
  min-height: 0 !important;
  padding: 14px !important;
  align-items: flex-start;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-scene {
    height: max(350px, min(calc(72 * var(--tv-vh,1vh)), 760px));
  }
}
.room-scene-content {
  width: 28%;
  min-width: 0;
  max-height: 100%;
  padding: 12px;
  overflow-y: auto;
  scroll-padding-block: 12px;
}
.room-scene-photo:after {
  background:
    linear-gradient(
      90deg,
      transparent 40%,
      rgba(3,9,12,0.13333) 64%,
      rgba(3,9,12,0.46667) 100%);
}
.scene-labels {
  right: 30%;
}
.scene-label {
  font-size: calc(calc(1.25 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  padding: 8px 12px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .scene-label {
    font-size: calc(max(14px, min(calc(1.25 * var(--tv-vw,1vw)), 22px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .room-scene .iot-device-grid {
  gap: 8px;
}
.tv-shell .room-scene .room-iot-card {
  padding: 8px 10px !important;
  border-radius: 12px;
  gap: 4px;
}
.tv-shell .room-scene .room-iot-card h2 {
  font-size: calc(calc(1.3 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  margin: 0 !important;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell .room-scene .room-iot-card h2 {
    font-size: calc(max(16px, min(calc(1.3 * var(--tv-vw,1vw)), 23px)) * var(--tv-font-scale,1));
  }
}
.tv-shell .room-scene .iot-device-icon {
  width: 26px;
  height: 26px;
  flex: none;
}
.tv-shell .room-scene .iot-device-icon svg {
  width: 24px;
  height: 24px;
  margin: 0 !important;
}
.tv-shell .room-scene .iot-card-action {
  gap: 8px;
  padding: 0 !important;
}
.tv-shell .room-scene .iot-connection {
  font-size: calc(11px * var(--tv-font-scale,1));
  margin: 3px 0 0 !important;
}
.tv-shell .room-scene .iot-power-label {
  font-size: calc(13px * var(--tv-font-scale,1));
}
.tv-shell .room-scene .iot-readings:empty {
  display: none;
}
.tv-shell .room-scene .iot-reading strong {
  font-size: calc(25px * var(--tv-font-scale,1));
}
.tv-shell .room-scene .iot-reading span {
  font-size: calc(12px * var(--tv-font-scale,1));
}
.tv-shell .room-scene .room-iot-card:focus {
  outline: 3px solid #ffd478;
  outline-offset: 2px;
}
.tv-shell .room-scene:focus {
  outline: 3px solid #e7cc8b;
  outline-offset: -3px;
}
.scene-empty p {
  font-size: calc(16px * var(--tv-font-scale,1));
  margin: 8px 0;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .room-scene-content {
    width: 34%;
  }
  .scene-labels {
    right: 36%;
  }
}
@media (max-width: 500px) {
  .room-scene-content {
    width: 45%;
  }
  .scene-labels {
    display: none;
  }
}

/* src/features/tv/guest-messages.css */
.guest-message-overlay {
  position: fixed;
  top: calc(5 * var(--tv-vh,1vh));
  right: calc(4 * var(--tv-vw,1vw));
  z-index: 9999;
  color: #fff;
  max-width: calc(40 * var(--tv-vw,1vw));
}
.guest-message-overlay article {
  background: rgba(21,38,43,0.96078);
  border: 1px solid #dac58c;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.53333);
}
.guest-message-overlay img {
  display: block;
  width: 100%;
  max-height: calc(35 * var(--tv-vh,1vh));
  object-fit: contain;
  border-radius: 12px;
}
.guest-message-overlay p {
  font-size: calc(calc(2.3 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.4;
  white-space: pre-wrap;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .guest-message-overlay p {
    font-size: calc(max(24px, min(calc(2.3 * var(--tv-vw,1vw)), 42px)) * var(--tv-font-scale,1));
  }
}
.guest-message-overlay.requires-ack {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: none;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  background: rgba(0,0,0,0.6);
}
.guest-message-overlay.requires-ack article {
  width: min(calc(65 * var(--tv-vw,1vw)), 900px);
}
.guest-message-overlay button {
  font-size: calc(28px * var(--tv-font-scale,1));
  padding: 16px 48px;
  background: #e7cc8b;
  color: #12232a;
  border-radius: 14px;
}
.guest-message-overlay button:focus {
  outline: 5px solid white;
  outline-offset: 5px;
}
.guest-message-overlay button {
  border: 2px solid #647a80;
  transition: transform .16s, background-color .16s;
  min-height: 64px;
  margin: 8px 12px 8px 0;
  background: #243e46;
  color: #fff;
  font-weight: 700;
}
.guest-message-overlay button:focus {
  background: #fff1c9;
  color: #12232a;
  transform: scale(1.06);
  outline: 4px solid #ffd473;
  outline-offset: 4px;
}
.tv-shell .quantity button {
  transition: transform .16s, background-color .16s;
  border-radius: 16px;
  overflow: visible;
}
.tv-shell .quantity button:focus,
.tv-shell .quantity button[data-tv-selected=true] {
  background: #ffe6a0 !important;
  color: #172d34 !important;
  transform: scale(1.18);
  outline: 4px solid #fff !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(246,190,80,0.4);
  animation: control-focus-pulse 1.4s ease-in-out infinite;
}
.tv-shell .summary .primary:focus,
.tv-shell .summary .primary[data-tv-selected=true] {
  background: #ffe6a0 !important;
  color: #172d34 !important;
  transform: scale(1.04);
  outline: 4px solid white !important;
  outline-offset: 5px;
  animation: confirm-focus-pulse 1.4s ease-in-out infinite;
}
@keyframes control-focus-pulse {
  0%, 100% {
    transform: scale(1.14);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes confirm-focus-pulse {
  0%, 100% {
    transform: scale(1.02);
  }
  50% {
    transform: scale(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-shell .quantity button,
  .tv-shell .summary .primary {
    animation: none !important;
  }
}

/* src/features/tv/guest-survey.css */
.guest-survey-invitation {
  position: fixed;
  z-index: 45;
  bottom: 75px;
  right: 3%;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #122e38;
  color: #fff;
  border: 1px solid #81bfc7;
  border-radius: 16px;
  padding: 15px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.26667);
}
.guest-survey-invitation > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.guest-survey-invitation strong {
  font-size: calc(19px * var(--tv-font-scale,1));
}
.guest-survey-invitation span {
  font-size: calc(14px * var(--tv-font-scale,1));
  color: #c0d7dc;
}
.guest-survey-invitation button,
.guest-survey-modal button {
  background: #224954;
  color: #fff;
  border: 1px solid #81bfc7;
  border-radius: 9px;
  min-height: 45px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.guest-survey-invitation button:focus,
.guest-survey-modal button:focus {
  outline: 4px solid #f4d698;
  outline-offset: 4px;
  transform: scale(1.04);
}
.guest-survey-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.73333);
  z-index: 90;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 25px;
}
.guest-survey-modal article {
  width: min(620px, calc(90 * var(--tv-vw,1vw)));
  background: #102731;
  color: #fff;
  border: 1px solid #6b9ba7;
  border-radius: 22px;
  padding: 28px;
  text-align: center;
  display: grid;
  justify-items: center;
  grid-gap: 15px;
  gap: 15px;
}
.guest-survey-modal h2,
.guest-survey-modal p {
  margin: 0;
}
.guest-survey-modal h2 {
  font-size: calc(28px * var(--tv-font-scale,1));
}
.guest-survey-modal p {
  font-size: calc(18px * var(--tv-font-scale,1));
  line-height: 1.5;
}
.guest-survey-modal img {
  width: min(260px, calc(30 * var(--tv-vh,1vh)));
  aspect-ratio: 1;
  background: #fff;
  border: 12px solid #fff;
  border-radius: 12px;
}
.guest-survey-modal small {
  color: #bad0d7;
  font-size: calc(15px * var(--tv-font-scale,1));
}
@media (max-width: 800px) {
  .guest-survey-invitation {
    left: 3%;
    bottom: 60px;
    flex-wrap: wrap;
  }
  .guest-survey-invitation > div {
    flex: 1;
  }
  .guest-survey-invitation strong {
    font-size: calc(16px * var(--tv-font-scale,1));
  }
}
.guest-survey-entry {
  position: fixed;
  right: 3%;
  bottom: 20px;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #81bfc7;
  border-radius: 10px;
  padding: 10px 15px;
  background: #122e38;
  color: #fff;
  font-size: calc(16px * var(--tv-font-scale,1));
}
.guest-survey-entry:focus {
  outline: 4px solid #f4d698;
  outline-offset: 3px;
  transform: scale(1.04);
}

/* src/features/tv/display-settings.css */
.tv-shell .food-grid {
  align-items: stretch;
  justify-content: center;
}
.tv-shell .food-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tv-shell .food-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.tv-shell .food-copy .price-row {
  margin-top: auto;
  align-items: center;
}
.tv-shell .food-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tv-shell .menu-grid {
  align-items: stretch;
  justify-content: center;
}
.tv-shell .menu-card {
  min-width: 0;
}
.tv-shell .info-grid,
.tv-shell .room-grid {
  align-items: stretch;
}
.tv-shell .cart-row {
  align-items: center;
}
.tv-shell .cart-product img {
  object-fit: cover;
  object-position: center;
}
.tv-shell {
  --food-columns:3;
  --food-image-height:180px;
  --menu-width:100%;
  --menu-gap:22px;
  --cart-thumb:100px;
}
.tv-shell[data-display-size=small] {
  --food-columns:4;
  --food-image-height:125px;
  --menu-width:86%;
  --menu-gap:16px;
  --cart-thumb:72px;
}
.tv-shell[data-display-size=large] {
  --food-columns:2;
  --food-image-height:230px;
  --menu-width:100%;
  --menu-gap:28px;
  --cart-thumb:125px;
}
.tv-shell .screen-food .food-grid {
  grid-template-columns: repeat(var(--food-columns), minmax(0, 1fr)) !important;
  gap: var(--menu-gap) !important;
}
.tv-shell .screen-food .food-art {
  height: var(--food-image-height) !important;
  aspect-ratio: auto !important;
}
.tv-shell .screen-food .food-copy {
  padding: 16px 18px !important;
}
.tv-shell.content-shell .screen-menu .menu-grid {
  width: var(--menu-width);
  margin-left: auto;
  margin-right: auto;
  gap: var(--menu-gap);
  grid-auto-rows: minmax(160px, 1fr);
}
.tv-shell[data-display-size=small].content-shell .screen-menu .menu-grid {
  flex: 0;
  grid-auto-rows: 170px;
  margin-top: auto;
  margin-bottom: auto;
}
.tv-shell .cart-product img {
  width: var(--cart-thumb) !important;
  height: var(--cart-thumb) !important;
  flex: none;
}
.tv-shell .food-copy h2 {
  font-size: calc(28px * var(--tv-font-scale,1)) !important;
}
.tv-shell .food-copy p {
  font-size: calc(17px * var(--tv-font-scale,1)) !important;
}
.tv-shell .food-copy .price-row strong {
  font-size: calc(24px * var(--tv-font-scale,1)) !important;
}
.tv-shell .food-card {
  height: 100%;
}
@media (max-width: 850px) {
  .tv-shell {
    --food-columns:2;
  }
  .tv-shell[data-display-size=small] {
    --food-columns:3;
  }
  .tv-shell[data-display-size=large] {
    --food-columns:2;
  }
}
@media (max-width: 600px) {
  .tv-shell .screen-food .food-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.tv-shell.content-shell > main.screen-menu {
  display: block !important;
}
.tv-shell.content-shell .screen-menu .menu-grid {
  margin: 0 auto !important;
  flex: none !important;
  grid-auto-rows: var(--menu-card-height) !important;
  align-content: start !important;
}
.tv-shell {
  --menu-card-height:calc(26 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell {
    --menu-card-height:max(115px, min(calc(26 * var(--tv-vh,1vh)), 225px));
  }
}
.tv-shell[data-display-size=small] {
  --menu-card-height:calc(23 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell[data-display-size=small] {
    --menu-card-height:max(105px, min(calc(23 * var(--tv-vh,1vh)), 190px));
  }
}
.tv-shell[data-display-size=large] {
  --menu-card-height:calc(31 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell[data-display-size=large] {
    --menu-card-height:max(140px, min(calc(31 * var(--tv-vh,1vh)), 270px));
  }
}
.tv-shell.content-shell .screen-menu .menu-card {
  padding: 18px !important;
}
.tv-shell.content-shell[class*=theme-harbor] .screen-menu .menu-card {
  padding: 0 !important;
}
.tv-shell.content-shell > main.screen-room {
  display: block;
  scroll-padding-block: 80px 24px;
}
.tv-shell .screen-room .room-grid {
  display: block;
}
.room-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 20px;
  padding: 8px;
}
.room-guide-grid .info-card:focus {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
  background: var(--panel);
}
@media (max-width: 700px) {
  .room-guide-grid {
    grid-template-columns: 1fr;
  }
}
.tv-shell .food-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tv-shell[data-display-size=small] .food-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tv-shell[data-display-size=large] .food-product-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}
.tv-shell[data-display-size=small] .food-tile-photo {
  aspect-ratio: 2;
}
.tv-shell[data-display-size=large] .food-tile-photo {
  aspect-ratio: 2.1;
}
.tv-shell .food-tile-copy h3 {
  font-size: calc(20px * var(--tv-font-scale,1));
}
.tv-shell .food-tile-copy p {
  font-size: calc(13px * var(--tv-font-scale,1));
}
.tv-shell .food-tile-copy strong {
  font-size: calc(20px * var(--tv-font-scale,1));
}
@media (max-width: 1000px) {
  .tv-shell[data-display-size=small] .food-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* src/features/iot/room-climate.css */
.welcome-room-climate {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 20px 0 8px;
  color: inherit;
  font-size: max(18px, min(1.5vw, 28px));
}
.welcome-room-climate > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.welcome-room-climate strong {
  font-weight: 600;
  letter-spacing: .01em;
}
.welcome-room-climate small {
  flex-basis: 100%;
  font-size: 14px;
  opacity: .7;
}
.room-temperature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 8px;
  background: #eaf3ef;
  color: #245b45;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.room-temperature.unavailable,
.room-temperature.no-sensor {
  background: #f0f2f4;
  color: #78838d;
}
.a-room-card-top > span:first-child {
  flex-wrap: wrap;
}
.a-room-card-top {
  flex-wrap: wrap;
  gap: 8px;
}
.a-room-card-top > span:first-child {
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.room-temperature.no-sensor {
  display: none;
}
.tv-shell .welcome-footer {
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}
.welcome-footer .welcome-footer-navigation,
.welcome-footer .welcome-footer-brand {
  flex: 1 1 auto;
}
.welcome-footer .welcome-footer-brand {
  text-align: right;
}
.welcome-footer .welcome-room-climate {
  flex: 0 0 auto;
  margin: 0;
  gap: 8px 18px;
  font-size: max(15px, min(1.2vw, 22px));
  align-items: center;
  justify-content: center;
}
.welcome-footer .welcome-room-climate svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.welcome-footer .welcome-room-climate small {
  font-size: 12px;
  text-align: center;
}
@media (max-width: 700px) {
  .welcome-footer .welcome-room-climate {
    order: 3;
    width: 100%;
    padding-top: 8px;
  }
  .welcome-footer .welcome-footer-brand {
    text-align: left;
  }
}

/* src/features/tv/cinematic-menus.css */
.tv-shell.cinematic-content {
  --bg:var(--tv-theme-page);
  --panel:var(--tv-theme-surface);
  --text:var(--tv-theme-ink);
  --muted:var(--tv-theme-secondary);
  --gold:var(--tv-theme-accent);
  background: var(--bg);
  color: var(--text);
}
.tv-shell.cinematic-content.has-background:after {
  display: none;
}
.tv-shell .cinematic-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cinematic-content .cinematic-backdrop .welcome-media,
.cinematic-content .cinematic-backdrop .welcome-video-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
}
.cinematic-content .cinematic-backdrop video {
  object-fit: cover;
  opacity: .65;
}
.cinematic-content .cinematic-backdrop:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      90deg,
      rgba(9,13,18,0.92941),
      rgba(9,13,18,0.6) 65%,
      rgba(9,13,18,0.46667)),
    linear-gradient(
      0deg,
      rgba(9,13,18,0.86667),
      transparent 45%,
      rgba(9,13,18,0.65882));
  pointer-events: none;
}
.tv-shell.cinematic-content .menu-card,
.tv-shell.cinematic-content .info-card,
.tv-shell.cinematic-content .food-card,
.tv-shell.cinematic-content .summary,
.tv-shell.cinematic-content .cart-row,
.tv-shell.cinematic-content .service-strip,
.tv-shell.cinematic-content .guest-content-card,
.tv-shell.cinematic-content .guest-order,
.tv-shell.cinematic-content .guest-balance,
.tv-shell.cinematic-content .guest-reservation,
.tv-shell.cinematic-content .guest-sync,
.tv-shell.cinematic-content .guest-history-row {
  --text:var(--tv-theme-ink);
  --muted:var(--tv-theme-secondary);
  background: var(--panel);
  border-color: var(--tv-theme-border);
  color: var(--text);
  box-shadow: none;
}
.tv-shell.cinematic-content .card-food,
.tv-shell.cinematic-content .card-room {
  background: var(--panel);
}
.tv-shell.cinematic-content .card-bottom,
.tv-shell.cinematic-content .card-top {
  background: transparent;
  color: var(--muted);
}
.tv-shell.cinematic-content h1,
.tv-shell.cinematic-content h2,
.tv-shell.cinematic-content h3,
.tv-shell.cinematic-content strong {
  color: var(--text);
}
.tv-shell.cinematic-content p,
.tv-shell.cinematic-content small,
.tv-shell.cinematic-content .card-top > span,
.tv-shell.cinematic-content .food-copy p {
  color: var(--muted);
}
.tv-shell.cinematic-content .back,
.tv-shell.cinematic-content .add,
.tv-shell.cinematic-content .quantity button,
.tv-shell.cinematic-content .guest-tabs button,
.tv-shell.cinematic-content .guest-service-grid button,
.tv-shell.cinematic-content .harbor-secondary button,
.tv-shell.cinematic-content .iot-controls button {
  background: var(--panel);
  border-color: var(--tv-theme-border);
  color: var(--text);
}
.tv-shell.cinematic-content .primary {
  background: var(--gold);
  color: var(--tv-theme-accent-ink);
}
.tv-shell.cinematic-content button:focus {
  outline-color: var(--gold);
  box-shadow: 0 0 0 8px rgba(225,190,130,0.10196);
}
.tv-shell.cinematic-content .iot-controls button:focus {
  background: var(--gold);
  color: var(--tv-theme-accent-ink);
}
.tv-shell.cinematic-content .food-footer {
  background: var(--panel);
  border-color: var(--tv-theme-border);
  color: var(--text);
}
.tv-shell.cinematic-content .food-footer span {
  color: var(--muted);
}
.tv-shell.cinematic-content .food-art {
  background: #14202d;
}
.tv-shell.cinematic-content .price-row {
  flex-wrap: wrap;
}
.tv-shell.cinematic-content .price-row strong {
  flex: 1 1 180px;
  white-space: normal;
}
.tv-shell.cinematic-content .price-row button {
  flex: 0 0 auto;
}
.tv-shell.cinematic-content .menu-card.card-food,
.tv-shell.cinematic-content .menu-card.card-room {
  background: var(--panel);
  color: var(--text);
}

/* src/features/tv/main-menu-reference.css */
.tv-shell.menu-reference-shell {
  --bg:var(--tv-theme-page);
  --panel:var(--tv-theme-surface);
  --text:var(--tv-theme-ink);
  --muted:var(--tv-theme-secondary);
  --gold:var(--tv-theme-accent);
  background: var(--bg);
  color: var(--text);
}
.tv-shell.menu-reference-shell.has-background:after {
  display: block;
  background:
    linear-gradient(
      90deg,
      rgba(6,16,25,0.85098),
      rgba(7,16,24,0.18824) 75%),
    linear-gradient(
      0deg,
      rgba(7,16,24,0.94902),
      transparent 70%);
}
.tv-shell.menu-reference-shell > main.screen-menu {
  position: relative;
  display: block !important;
  padding: calc(3 * var(--tv-vh,1vh)) 8px !important;
  scroll-padding-top: 24px;
  margin-bottom: 44px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell > main.screen-menu {
    padding: max(18px, min(calc(3 * var(--tv-vh,1vh)), 32px)) 8px !important;
  }
}
.menu-reference-shell .content-navigation {
  position: absolute;
  right: 8px;
  top: 22px;
  margin: 0;
  min-height: 0;
}
.menu-reference-shell .content-navigation .back {
  padding: 10px 16px;
  background: var(--panel);
  border-color: var(--tv-theme-border);
  font-size: calc(16px * var(--tv-font-scale,1));
}
.menu-reference-layout {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(2.2 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .menu-reference-layout {
    gap: max(14px, min(calc(2.2 * var(--tv-vh,1vh)), 26px));
  }
}
.menu-reference-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-right: 120px;
  min-height: 50px;
}
.menu-property-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-family: Georgia, serif;
  font-size: calc(calc(1.65 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  letter-spacing: 3px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-property-brand {
    font-size: calc(max(17px, min(calc(1.65 * var(--tv-vw,1vw)), 29px)) * var(--tv-font-scale,1));
  }
}
.menu-property-brand svg {
  color: var(--gold);
  flex-shrink: 0;
}
.menu-property-brand small {
  display: block;
  font-family: Arial, sans-serif;
  letter-spacing: 3px;
  color: var(--muted);
  font-size: calc(9px * var(--tv-font-scale,1));
  margin-top: 7px;
}
.menu-room-clock {
  display: flex;
  align-items: center;
  gap: 24px;
}
.menu-room-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--tv-theme-border);
  background: var(--panel);
  border-radius: 16px;
  padding: 10px 16px;
  white-space: nowrap;
  font-size: calc(17px * var(--tv-font-scale,1));
}
.menu-room-badge svg {
  color: var(--gold);
}
.menu-clock {
  text-align: right;
  white-space: nowrap;
}
.menu-clock strong {
  font-family: Georgia, serif;
  font-size: calc(calc(2.4 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  font-weight: 400;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-clock strong {
    font-size: calc(max(22px, min(calc(2.4 * var(--tv-vw,1vw)), 40px)) * var(--tv-font-scale,1));
  }
}
.menu-clock span {
  display: block;
  color: var(--muted);
  font-size: calc(11px * var(--tv-font-scale,1));
  margin-top: 2px;
}
.menu-reference-hero {
  flex: 1;
  min-height: calc(19 * var(--tv-vh,1vh));
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 64%;
  padding: 8px 16px;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .menu-reference-hero {
    min-height: max(95px, min(calc(19 * var(--tv-vh,1vh)), 215px));
  }
}
.menu-reference-hero > p {
  font-family: Georgia, serif;
  font-size: calc(calc(3.7 * var(--tv-vw,1vw)) * var(--tv-font-scale,1)) !important;
  line-height: 1.1;
  color: var(--gold) !important;
  margin-bottom: 8px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-reference-hero > p {
    font-size: calc(max(30px, min(calc(3.7 * var(--tv-vw,1vw)), 67px)) * var(--tv-font-scale,1)) !important;
  }
}
.menu-reference-hero h1 {
  font-family: Georgia, serif;
  font-size: calc(calc(2.7 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.2;
  color: var(--text) !important;
  letter-spacing: -.5px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-reference-hero h1 {
    font-size: calc(max(26px, min(calc(2.7 * var(--tv-vw,1vw)), 48px)) * var(--tv-font-scale,1));
  }
}
.menu-reference-hero > span {
  display: block;
  max-width: 560px;
  color: var(--muted);
  font-size: calc(calc(1.2 * var(--tv-vw,1vw)) * var(--tv-font-scale,1));
  line-height: 1.5;
  margin-top: 12px;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-reference-hero > span {
    font-size: calc(max(14px, min(calc(1.2 * var(--tv-vw,1vw)), 21px)) * var(--tv-font-scale,1));
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-grid.menu-reference-cards {
  display: grid;
  width: 100% !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-gap: calc(1 * var(--tv-vw,1vw)) !important;
  gap: calc(1 * var(--tv-vw,1vw)) !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  flex: none !important;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell .screen-menu .menu-grid.menu-reference-cards {
    gap: max(10px, min(calc(1 * var(--tv-vw,1vw)), 18px)) !important;
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card {
  height: auto !important;
  min-height: calc(24 * var(--tv-vh,1vh)) !important;
  padding: calc(1.8 * var(--tv-vh,1vh)) !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 15px;
  background: var(--panel) !important;
  border: 1px solid var(--tv-theme-border);
  box-shadow: none;
  gap: 14px;
  overflow: visible;
  transition:
    transform .16s ease, background .16s ease, border-color .16s ease;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card {
    height: auto !important;
    min-height: max(155px, min(calc(24 * var(--tv-vh,1vh)), 260px)) !important;
    padding: max(15px, min(calc(1.8 * var(--tv-vh,1vh)), 28px)) !important;
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-top {
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--gold) !important;
  position: relative;
  width: 100%;
  flex: none;
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-top svg {
  width: calc(3 * var(--tv-vw,1vw)) !important;
  height: calc(3 * var(--tv-vw,1vw)) !important;
  filter: none;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-top svg {
    width: max(30px, min(calc(3 * var(--tv-vw,1vw)), 51px)) !important;
    height: max(30px, min(calc(3 * var(--tv-vw,1vw)), 51px)) !important;
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-top > span {
  display: none;
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-bottom {
  padding: 0 !important;
  flex: none;
  color: var(--text) !important;
  background: transparent !important;
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-bottom strong {
  color: var(--text) !important;
  font-size: calc(calc(1.45 * var(--tv-vw,1vw)) * var(--tv-font-scale,1)) !important;
  line-height: 1.22;
  margin: 0 0 9px !important;
  font-weight: 500;
  overflow-wrap: normal;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-bottom strong {
    font-size: calc(max(17px, min(calc(1.45 * var(--tv-vw,1vw)), 25px)) * var(--tv-font-scale,1)) !important;
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-bottom small {
  font-size: calc(calc(.95 * var(--tv-vw,1vw)) * var(--tv-font-scale,1)) !important;
  line-height: 1.4;
  color: var(--muted) !important;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .card-bottom small {
    font-size: calc(max(12px, min(calc(.95 * var(--tv-vw,1vw)), 17px)) * var(--tv-font-scale,1)) !important;
  }
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card:focus,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card[data-tv-selected=true] {
  background: var(--gold) !important;
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 20px rgba(87,207,232,0.30196);
  transform: scale(1.035);
}
.menu-bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.1fr;
  grid-gap: 14px;
  gap: 14px;
  padding: 0 6px;
}
.menu-mini-panel {
  min-width: 0;
  border: 1px solid var(--tv-theme-border);
  border-radius: 14px;
  background: var(--panel);
  padding: 15px 16px;
  min-height: calc(19 * var(--tv-vh,1vh));
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .menu-mini-panel {
    min-height: max(135px, min(calc(19 * var(--tv-vh,1vh)), 205px));
  }
}
.menu-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 13px;
}
.menu-panel-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: calc(calc(1.1 * var(--tv-vw,1vw)) * var(--tv-font-scale,1)) !important;
  margin: 0;
  color: var(--text) !important;
  white-space: nowrap;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-panel-heading h2 {
    font-size: calc(max(16px, min(calc(1.1 * var(--tv-vw,1vw)), 20px)) * var(--tv-font-scale,1)) !important;
  }
}
.menu-guest-highlight .menu-panel-heading h2 {
  color: var(--gold) !important;
}
.menu-link-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(10px * var(--tv-font-scale,1));
  color: var(--muted);
  white-space: nowrap;
}
.menu-link-state i {
  width: 6px;
  height: 6px;
  background: #59ad9a;
  border-radius: 50%;
}
.menu-link-state.unavailable i {
  background: #d39c6a;
}
.menu-live-readings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.menu-live-reading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  gap: 7px;
  text-align: center;
  background: rgba(255,255,255,0.01176);
  border: 1px solid var(--tv-theme-border);
  border-radius: 11px;
  padding: 9px 4px;
}
.menu-live-reading svg {
  color: var(--gold);
}
.menu-live-reading > span {
  font-size: calc(12px * var(--tv-font-scale,1));
  color: var(--muted);
  line-height: 1.2;
}
.menu-live-reading > strong {
  font-size: calc(calc(1.5 * var(--tv-vw,1vw)) * var(--tv-font-scale,1)) !important;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text) !important;
}
@supports (font-size:clamp(1px, 2vw, 3px)) {
  .menu-live-reading > strong {
    font-size: calc(max(17px, min(calc(1.5 * var(--tv-vw,1vw)), 27px)) * var(--tv-font-scale,1)) !important;
  }
}
.menu-empty-state {
  grid-column: 1/-1;
  color: var(--muted) !important;
  font-size: calc(14px * var(--tv-font-scale,1));
  line-height: 1.5;
  padding: 14px 2px;
}
.menu-all-devices {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.01961);
  border: 1px solid var(--tv-theme-border);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: calc(11px * var(--tv-font-scale,1));
  white-space: nowrap;
}
.menu-quick-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.menu-quick-controls > button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--tv-theme-border);
  border-radius: 10px;
  padding: 9px 10px;
  text-align: left;
  color: var(--muted);
}
.menu-quick-controls > button > span {
  min-width: 0;
  font-size: calc(12px * var(--tv-font-scale,1));
  flex: 1;
  line-height: 1.2;
}
.menu-quick-controls > button small {
  display: block;
  margin-top: 4px;
  font-size: calc(11px * var(--tv-font-scale,1));
  color: var(--muted) !important;
}
.menu-quick-controls > button svg {
  flex-shrink: 0;
  color: var(--gold);
}
.menu-quick-controls > button > i {
  width: 9px;
  height: 9px;
  background: #4c5b67;
  border-radius: 50%;
  flex-shrink: 0;
}
.menu-quick-controls > button.is-on {
  background: rgba(60,51,25,0.41176);
  border-color: rgba(190,156,91,0.40392);
}
.menu-quick-controls > button.is-on > i {
  background: #edc873;
}
.menu-quick-controls .menu-open-room {
  grid-column: 1/-1;
  min-height: 72px;
}
.menu-control-message {
  margin-top: 8px;
  font-size: calc(11px * var(--tv-font-scale,1));
  line-height: 1.3;
  color: var(--muted) !important;
}
.menu-highlight-content {
  display: flex;
  gap: 13px;
  align-items: center;
  text-align: left;
  background: transparent;
  width: 100%;
  padding: 3px 0;
  border-radius: 9px;
  color: var(--text);
}
.menu-highlight-content > img {
  width: 82px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.menu-highlight-content > span {
  min-width: 0;
  flex: 1;
}
.menu-highlight-content strong {
  display: block;
  font-size: calc(17px * var(--tv-font-scale,1)) !important;
  line-height: 1.25;
  color: var(--text) !important;
}
.menu-highlight-content small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(13px * var(--tv-font-scale,1)) !important;
  line-height: 1.45;
  margin-top: 8px;
  color: var(--muted) !important;
}
.menu-highlight-content em {
  display: block;
  font-size: calc(11px * var(--tv-font-scale,1));
  color: var(--gold);
  font-style: normal;
  margin-top: 9px;
}
.menu-highlight-content > svg {
  flex-shrink: 0;
  color: var(--gold);
}
.menu-reference-shell .menu-bottom-panels button:focus,
.menu-reference-shell .menu-bottom-panels button[data-tv-selected=true] {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(114,199,221,0.21961);
  transform: translateY(-1px);
}
@media (max-width: 1100px) {
  .menu-reference-top {
    padding-right: 108px;
  }
  .menu-clock span {
    display: none;
  }
  .menu-property-brand {
    letter-spacing: 1.5px;
  }
  .menu-property-brand small {
    letter-spacing: 1.6px;
  }
  .menu-room-clock {
    gap: 12px;
  }
  .menu-bottom-panels {
    grid-template-columns: 1fr 1fr;
  }
  .menu-guest-highlight {
    display: none;
  }
  .menu-panel-heading h2 {
    font-size: calc(16px * var(--tv-font-scale,1)) !important;
  }
  .menu-link-state {
    font-size: calc(9px * var(--tv-font-scale,1));
  }
}
@media (max-width: 850px) {
  .tv-shell.menu-reference-shell .screen-menu .menu-grid.menu-reference-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .menu-reference-hero {
    min-height: 90px;
    max-width: 85%;
  }
  .menu-reference-top {
    padding-right: 100px;
  }
  .menu-clock {
    display: none;
  }
  .menu-property-brand {
    font-size: calc(16px * var(--tv-font-scale,1));
  }
  .menu-room-badge {
    font-size: calc(13px * var(--tv-font-scale,1));
    padding: 9px;
  }
  .menu-property-brand svg {
    width: 23px;
  }
  .menu-property-brand small {
    font-size: calc(7px * var(--tv-font-scale,1));
  }
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card {
    height: auto !important;
    min-height: 135px !important;
  }
  .menu-bottom-panels {
    grid-template-columns: 1fr;
  }
  .menu-mini-panel {
    min-height: 130px;
  }
}
@media (max-height: 650px) and (min-width: 851px) {
  .menu-reference-layout {
    gap: 10px;
  }
  .menu-reference-hero {
    min-height: 70px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .menu-reference-hero > p {
    font-size: calc(32px * var(--tv-font-scale,1)) !important;
  }
  .menu-reference-hero h1 {
    font-size: calc(28px * var(--tv-font-scale,1));
  }
  .menu-reference-hero > span {
    font-size: calc(13px * var(--tv-font-scale,1));
    margin-top: 7px;
  }
  .tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card {
    height: auto !important;
    min-height: 135px !important;
    gap: 9px;
  }
  .menu-mini-panel {
    min-height: 120px;
    padding: 11px 12px;
  }
  .menu-panel-heading {
    margin-bottom: 8px;
  }
  .menu-live-reading {
    min-height: 70px;
    gap: 4px;
  }
  .menu-highlight-content small {
    font-size: calc(12px * var(--tv-font-scale,1)) !important;
  }
  .menu-highlight-content > img {
    height: 65px;
    width: 65px;
  }
}
.tv-shell.menu-reference-shell > main.screen-menu {
  overflow: hidden;
}
.menu-reference-layout.tv-menu-fit {
  transform-origin: top left;
  box-sizing: border-box;
}
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card:focus .card-top,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card:focus .card-bottom strong,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card:focus .card-bottom small,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card[data-tv-selected=true] .card-top,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card[data-tv-selected=true] .card-bottom strong,
.tv-shell.menu-reference-shell .screen-menu .menu-reference-cards .menu-card[data-tv-selected=true] .card-bottom small {
  color: var(--tv-theme-accent-ink) !important;
}
.tv-shell.menu-reference-shell.cinematic-content .menu-property-brand,
.tv-shell.menu-reference-shell.cinematic-content .menu-reference-hero h1 {
  color: #f8f4eb !important;
}
.tv-shell.menu-reference-shell.cinematic-content .menu-property-brand small,
.tv-shell.menu-reference-shell.cinematic-content .menu-reference-hero > span {
  color: #c7cdd0;
}
.tv-shell.menu-reference-shell.cinematic-content .menu-clock {
  color: #f8f4eb;
}
.tv-shell.menu-reference-shell.cinematic-content .menu-clock span {
  color: #c7cdd0;
}

/* src/features/tv/focus-blur.css */
.tv-shell.focus-spotlight.focus-blur .menu-grid > *,
.tv-shell.focus-spotlight.focus-blur .food-grid > *,
.tv-shell.focus-spotlight.focus-blur .food-product-grid > *,
.tv-shell.focus-spotlight.focus-blur .guest-service-grid > *,
.tv-shell.focus-spotlight.focus-blur .guest-content-grid > *,
.tv-shell.focus-spotlight.focus-blur .iot-device-grid > *,
.tv-shell.focus-spotlight.focus-blur .menu-quick-controls > * {
  transition:
    transform 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
  filter: none;
}
.tv-shell.focus-spotlight.focus-blur .menu-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .food-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .food-product-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .guest-service-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .guest-content-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .iot-device-grid:focus-within > :not(:focus-within),
.tv-shell.focus-spotlight.focus-blur .menu-quick-controls:focus-within > :not(:focus-within) {
  filter: blur(.65px);
  opacity: .72;
}
.tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
.tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
.tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
.tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
.tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
.tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
.tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
.tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within {
  position: relative;
  z-index: 2;
  filter: none;
  opacity: 1;
  transform: scale(1.025);
  outline: 4px solid #ffe1a0;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px rgba(255,225,160,0.4), 0 8px 20px rgba(0,0,0,0.4);
}
.tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within {
  filter: none;
  opacity: 1;
  transform: scale(1.025);
  outline: 4px solid #ffe1a0;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px rgba(255,225,160,0.4), 0 8px 20px rgba(0,0,0,0.4);
}
.tv-shell.focus-spotlight.focus-blur button:focus {
  filter: none;
  outline: 4px solid #ffe1a0;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,225,160,0.26667);
}
.tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
.tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
.tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
.tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
.tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
.tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus {
  transform: scale(1.08);
  background: #ffe1a0;
  color: #14232c;
}
.tv-shell.focus-spotlight.focus-blur .food-categories > button {
  transition:
    transform 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
  filter: none;
}
.tv-shell.focus-spotlight.focus-blur .food-categories:focus-within > button:not(:focus-within) {
  filter: blur(.65px);
  opacity: .72;
}
.tv-shell.focus-spotlight.focus-blur .cinematic-backdrop video {
  opacity: .65;
}
@media (prefers-reduced-motion: reduce) {
  .tv-shell.focus-spotlight.focus-blur .menu-grid > *,
  .tv-shell.focus-spotlight.focus-blur .food-grid > *,
  .tv-shell.focus-spotlight.focus-blur .food-product-grid > *,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > *,
  .tv-shell.focus-spotlight.focus-blur .guest-content-grid > *,
  .tv-shell.focus-spotlight.focus-blur .iot-device-grid > *,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > * {
    transition: none;
  }
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-product-tile:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .food-categories > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .guest-content-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .room-iot-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .food-quantity > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-controls > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-target > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-remote-keys > button:focus,
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls > button:focus-within,
  .tv-shell.focus-spotlight.focus-blur .screen-menu .menu-reference-cards .menu-card:focus-within,
  .tv-shell.focus-spotlight.focus-blur .iot-climate-controls > div > button:focus {
    transform: none;
  }
  .tv-shell.focus-spotlight.focus-blur .food-categories > button {
    transition: none;
  }
}
@media (prefers-contrast: more) {
  .tv-shell.focus-spotlight.focus-blur .menu-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .food-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .food-product-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .guest-service-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .guest-content-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .iot-device-grid:focus-within > :not(:focus-within),
  .tv-shell.focus-spotlight.focus-blur .menu-quick-controls:focus-within > :not(:focus-within) {
    filter: none;
    opacity: 1;
  }
}
@media (prefers-contrast: more) {
  .tv-shell.focus-spotlight.focus-blur .food-categories:focus-within > button:not(:focus-within) {
    filter: none;
    opacity: 1;
  }
}

/* src/features/tv/menu-device-panels.css */
.menu-device-panels.no-status-panel,
.menu-device-panels.no-controls-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-device-panels.no-status-panel.no-controls-panel {
  grid-template-columns: minmax(0, 1fr);
}
.menu-device-panels .menu-live-readings,
.menu-device-panels .menu-quick-controls {
  max-height: calc(15 * var(--tv-vh,1vh));
  overflow: auto;
  scroll-padding: 6px;
  padding: 3px;
  scrollbar-width: thin;
}
@supports (width:clamp(1px, 2vw, 3px)) {
  .menu-device-panels .menu-live-readings,
  .menu-device-panels .menu-quick-controls {
    max-height: max(100px, min(calc(15 * var(--tv-vh,1vh)), 165px));
  }
}
.menu-device-panels .menu-quick-controls > .menu-empty-state {
  grid-column: 1/-1;
}
.menu-device-panels.no-status-panel.no-controls-panel .menu-guest-highlight {
  display: block;
}
@media (max-width: 1100px) {
  .menu-device-panels.no-status-panel,
  .menu-device-panels.no-controls-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 850px) {
  .menu-device-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}
.menu-device-panels .menu-live-readings {
  overflow: hidden;
  max-height: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.menu-device-panels .menu-live-reading {
  min-width: 0;
}
.menu-device-panels .menu-live-reading span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.menu-pool-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-device-panels.no-pool-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-device-panels.no-pool-panel.no-status-panel,
.menu-device-panels.no-pool-panel.no-controls-panel {
  grid-template-columns: minmax(0, 1fr);
}
.tv-shell.menu-reference-shell .menu-device-panels {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}
.tv-shell.menu-reference-shell .menu-device-panels > .menu-mini-panel {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
}
.tv-zoom-frame[data-flex-gap=no] .menu-device-panels > .menu-mini-panel + .menu-mini-panel {
  margin-left: 14px;
}
.menu-device-panels .menu-panel-heading {
  flex-wrap: wrap;
}
.menu-device-panels .menu-panel-heading h2 {
  white-space: normal;
  overflow-wrap: break-word;
}
.menu-device-panels .menu-link-state {
  margin-left: auto;
}
@media (max-width: 639px) {
  .tv-shell.menu-reference-shell .menu-device-panels {
    flex-wrap: wrap;
  }
  .tv-shell.menu-reference-shell .menu-device-panels > .menu-mini-panel {
    flex-basis: 100%;
  }
  .tv-zoom-frame[data-flex-gap=no] .menu-device-panels > .menu-mini-panel + .menu-mini-panel {
    margin-left: 0;
    margin-top: 14px;
  }
}

/* src/features/tv/tv-profile.css */
html.tv-no-grid .welcome {
  display: flex;
}
html.tv-no-grid .welcome > div {
  width: 50%;
  min-width: 0;
}
html.tv-no-grid .tv-shell .menu-grid.menu-reference-cards {
  display: flex !important;
  flex-wrap: wrap;
}
html.tv-no-grid .menu-reference-cards > .menu-card {
  width: 15.65% !important;
  margin: 0 .5%;
}
html.tv-no-grid .menu-bottom-panels,
html.tv-no-grid .menu-live-readings,
html.tv-no-grid .menu-quick-controls {
  display: flex;
  flex-wrap: wrap;
}
html.tv-no-grid .menu-bottom-panels > .menu-mini-panel {
  width: 32%;
  margin-right: 1%;
}
html.tv-no-grid .menu-live-readings > .menu-live-reading {
  flex: 1;
  min-width: 0;
  margin: 0 3px;
}
html.tv-no-grid .menu-quick-controls > button {
  width: 48%;
  margin: 1%;
}
html.tv-no-grid .tv-shell .food-menu-layout {
  display: flex;
}
html.tv-no-grid .food-sidebar {
  width: 20%;
  flex: none;
  margin-right: 24px;
}
html.tv-no-grid .food-catalog {
  flex: 1;
  min-width: 0;
}
html.tv-no-grid .food-product-grid,
html.tv-no-grid .sales-category-grid {
  display: flex !important;
  flex-wrap: wrap;
}
html.tv-no-grid .food-product-grid > .food-product-tile,
html.tv-no-grid .sales-category-grid > .sales-category-card {
  width: 31.3%;
  margin: 0 1% 16px;
}
html.tv-no-grid .info-grid,
html.tv-no-grid .iot-grid,
html.tv-no-grid .guest-content-grid {
  display: flex;
  flex-wrap: wrap;
}
html.tv-no-grid .info-grid > *,
html.tv-no-grid .iot-grid > *,
html.tv-no-grid .guest-content-grid > * {
  width: 48%;
  margin: 1%;
}
html.tv-level-1 .focus-blur:before,
html.tv-level-2 .focus-blur:before {
  display: none !important;
}
html.tv-level-1 .tv-shell *,
html.tv-level-2 .tv-shell * {
  backdrop-filter: none !important;
  filter: none !important;
  animation: none !important;
}
html.tv-level-1 .tv-shell *,
html.tv-level-2 .tv-shell * {
  transition: none !important;
}
html.tv-level-1 .tv-media-root video {
  visibility: hidden !important;
}
html.tv-level-1 .welcome-video-cover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.tv-no-grid .cart-layout {
  display: flex;
}
html.tv-no-grid .cart-layout > section {
  flex: 1;
}
html.tv-no-grid .cart-layout > aside {
  width: 30%;
  margin-left: 20px;
}
.tv-runtime-report-button {
  position: fixed;
  left: 16px;
  bottom: 10px;
  z-index: 1000;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid #9b8a67;
  border-radius: 6px;
  background: #142331;
  color: #ead4a8;
}
.tv-runtime-report {
  position: fixed;
  left: 8%;
  right: 8%;
  top: 8%;
  bottom: 8%;
  z-index: 2000;
  background: #11202c;
  color: #f4f2e9;
  border: 2px solid #ddbd83;
  border-radius: 16px;
  padding: 30px;
  overflow: auto;
  font: 20px/1.6 Arial, sans-serif;
}
.tv-runtime-report button {
  font-size: 20px;
  padding: 12px 20px;
  margin: 15px 15px 0 0;
  background: #dfc48f;
  color: #13222b;
}
html .tv-zoom-frame .tv-media-root {
  background: transparent !important;
  z-index: 0 !important;
}
html .tv-zoom-frame .tv-media-root:before,
html .tv-zoom-frame .tv-media-root:after {
  display: none !important;
}
html .tv-zoom-frame .tv-media-root .cinematic-backdrop.tv-unified-media {
  z-index: 0 !important;
}
html.tv-no-grid .cinematic-welcome .welcome > .welcome-copy {
  width: 58%;
  max-width: 950px;
}
html.tv-no-grid .cinematic-welcome .welcome h1 {
  font-size: calc(4.8 * var(--tv-vw,1vw)) !important;
}
.tv-zoom-frame[data-flex-gap=no] .brand > div {
  margin-left: 17px;
}
.tv-zoom-frame[data-flex-gap=no] .primary svg {
  margin-left: 20px;
}
html .tv-zoom-frame > [data-tv-media-host] > .tv-media-root {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box;
}