/* Reference home: cinema backdrop, teal glass and a raised active tile. */
html:has(.home-reference), body.home-reference {
  --uno-cyan: #70B8A5;
  --yellow-accent: #70B8A5;
  --yellow-glow: #70B8A566;
  --yellow-glow-subtle: #70B8A533;
  --text-white: #F2F4F1;
  --text-muted: #e0e8e7;
  background: #121717;
}
.home-reference .tv-dashboard { border: 2px solid #516667; }
.home-reference .bg-room-layer, body.home-reference.home-ui-ready .bg-room-layer {
  background: url('../images/bg-room.jpg') center/cover no-repeat;
  /* Overscan keeps the blurred photograph from exposing bright edge seams. */
  filter: blur(clamp(2px, .2vw, 4px)) brightness(.68) saturate(.8);
  transform: scale(1.015);
  animation: none;
}
.home-reference .vignette-layer {
  background:
    linear-gradient(180deg, rgba(3, 14, 16,.30), rgba(4, 16, 17,.18) 55%, rgba(3, 14, 16,.32)),
    linear-gradient(90deg, rgba(3, 14, 16,.30), transparent 55%, rgba(2, 11, 13,.22));
}
.home-reference .dashboard-header { background: none; }
.home-reference .brand-logo { top: 17.3vh; }
.home-reference .brand-logo .uno-logo { width: 15.5vw; min-width: 184px; max-width: 334px; }
.home-reference .top-controls { top: 9.5vh; right: 4.2vw; gap: 1.1vw; }
html body.home-reference .tv-dashboard .top-controls :is(.icon-circle-btn,.user-avatar-btn,.uno-header-control) {
  width: var(--uno-control-size) !important; height: var(--uno-control-size) !important;
  min-width: 0; flex-basis: auto; border: 2px solid #F2F4F106 !important;
  background: #253234b3 !important; box-shadow: none;
}
html body.home-reference .top-controls .uno-header-control > svg { width: 38%; height: 38%; }
html body.home-reference .top-controls .uno-profile-avatar { padding: 6px !important; }
.home-reference .carousel-container { top: 58.6%; width: 91%; }
.home-reference .cards-track { gap: 1.15vw; padding: 0; }
html body.home-reference .tv-dashboard .iptv-card { width: calc((100% - 2.3vw)/3); aspect-ratio: 1.58; border-radius: 1.9vw; }
html body.home-reference .tv-dashboard .card-glass-surface {
  background: linear-gradient(125deg,#263536aa,#1b26289c);
  border: 1px solid #a0b8b64d; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 1px #F2F4F10d;
}
html body.home-reference .tv-dashboard .iptv-card.active { transform: translateY(-4.4vh) rotate(-3.8deg); }
html body.home-reference .tv-dashboard .iptv-card.active .card-glass-surface {
  background: linear-gradient(125deg,#3c817b8c,#244946a8 55%,#376f6799);
  border-color: #70B8A5; box-shadow: inset 0 0 22px #7ce4d544,0 20px 40px #0005;
}
html body.home-reference .tv-dashboard .iptv-card.active.is-pressed { transform: translateY(-3vh) rotate(-3deg) scale(.98); }
html body.home-reference .tv-dashboard .iptv-card:focus-visible { outline: 2px solid #F2F4F1; outline-offset: 5px; }
html body.home-reference .tv-dashboard .pill-tab-glow { top: -10px; width: 32%; height: 18px; z-index: -1; }
html body.home-reference .tv-dashboard .pill-tab { background: #70B8A5; border-radius: 10px; box-shadow: none; animation: none; }
.home-reference .card-content-grid { padding: 3.2vw 2.7vw 2.6vw; }
.home-reference .card-title { font-family: Arial,sans-serif; font-size: clamp(25px,2.5vw,52px); font-weight: 600; }
.home-reference .card-info { flex: 1; }
.home-reference .card-metrics { gap: .65vw; }
.home-reference .stat-count { font-family: Arial,sans-serif; font-size: var(--uno-label-size); font-weight: 400; white-space: nowrap; }
.home-reference .update-sync { font-size: clamp(10px,.85vw,16px); gap: 6px; }
.home-reference .update-text { max-width: 14vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-reference .card-icon-wrapper { position: absolute; right: 2.7vw; top: 30%; transform: rotate(10deg); }
html body.home-reference .tv-dashboard .custom-card-icon { width: 10.2vw; height: 10.2vw; filter: none; animation: none; }
.home-reference .dashboard-footer { left: 4%; right: 4.3%; bottom: 8.4vh; }
html body.home-reference .tv-dashboard #timeshiftBtn { padding: 0; gap: 1.5vw; border: 0; background: transparent; box-shadow: none; }
html body.home-reference .tv-dashboard .timeshift-btn { width: 5.3vw; height: 5.3vw; min-width: 50px; min-height: 50px; background: #253234b3; border: 1px solid #F2F4F106; box-shadow: none; }
.home-reference .timeshift-label { font-size: var(--uno-label-size); font-weight: 400; }
.home-reference .clock-display, .home-reference .city-name { font-family: Arial,sans-serif; font-size: clamp(23px,2.1vw,40px); font-weight: 400; }
.home-reference .vertical-divider { height: 5.6vh; margin: 0 2.2vw; }
.home-reference .humidity-label { font-size: 1vw; }
.home-reference .temp-display { font-size: 1.7vw; }
.home-reference .weather-icon { width: 3.6vw; height: 3.6vw; }
html body.home-reference .tv-dashboard :is(.uno-header-control,#timeshiftBtn):focus-visible { outline: 2px solid #F2F4F1; outline-offset: 4px; }
.home-reference .app-splash { background: #0a1718; }
.home-reference .splash-loader::after { background: #70B8A5; }
.home-reference #unoHomeShelves { background: #121717; }
.home-reference .uno-home-art { background: #203536; }
.home-reference .uno-home-poster:focus-visible { outline-color: #70B8A5; }
@media(max-width:820px) {
  .home-reference .brand-logo .uno-logo { min-width: 0; width: 160px; }
  .home-reference .carousel-container { width: 100%; }
  .home-reference .cards-track { gap: 24px; padding: 14px 0; }
  html body.home-reference .tv-dashboard .iptv-card { width: 100%; min-height: 210px; aspect-ratio: 1.8; border-radius: 22px; }
  html body.home-reference .tv-dashboard .iptv-card.active { transform: none; }
  .home-reference .card-content-grid { padding: 28px; }
  .home-reference .card-title { font-size: 30px; }
  .home-reference .stat-count { font-size: 20px; }
  .home-reference .update-sync { font-size: 12px; }
  .home-reference .update-text { max-width: 48vw; }
  .home-reference .card-icon-wrapper { right: 28px; top: 30%; }
  html body.home-reference .tv-dashboard .custom-card-icon { width: 110px; height: 110px; }
  .home-reference .dashboard-footer { gap: 24px; }
  .home-reference .humidity-label { font-size: 12px; }
  .home-reference .temp-display { font-size: 22px; }
  .home-reference .weather-icon { width: 42px; height: 42px; }
}
@media(prefers-reduced-motion:reduce) { .home-reference .iptv-card { transition: none; } }

.home-reference #homeWeatherIcon [fill="#70B8A5"] { fill: #70B8A5; }
.home-reference #homeWeatherIcon [stroke="#70B8A5"] { stroke: #70B8A5; }
@media(max-width:820px) {
  .home-reference .brand-logo { top: auto; }
  .home-reference .top-controls { top: auto; right: auto; gap: 10px; }
  .home-reference .dashboard-header { background: transparent !important; }
}