/* ==========================================================
   BOSSTIDD-TV V5.3 — Premium / Responsive / Tesla MCU2 UI
   Loaded after main.css so the original application remains
   easy to roll back and all existing controllers keep working.
   ========================================================== */

:root {
  --v53-rail: 88px;
  --v53-rail-open: 236px;
  --v53-top-mobile: 56px;
  --v53-bottom-mobile: 72px;
  --v53-orange: #ff7b35;
  --v53-orange-2: #ff9a52;
  --v53-black: #060505;
  --v53-panel: #11100f;
  --v53-panel-2: #181512;
  --v53-border: rgba(255, 123, 53, 0.16);
  --v53-border-strong: rgba(255, 123, 53, 0.32);
  --v53-text: #fff7f2;
  --v53-muted: #9e897f;
}

html, body {
  background: var(--v53-black);
}

body::before {
  background:
    radial-gradient(circle at 70% 8%, rgba(255,123,53,.11), transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(255,123,53,.055), transparent 25%);
}
body::after { background: linear-gradient(180deg, rgba(6,5,5,.08), rgba(6,5,5,.62)); }

/* ---------- Desktop application shell ---------- */
@media (min-width: 721px) {
  #app { display: block; height: 100dvh; overflow: hidden; }

  .navbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--v53-rail);
    height: 100dvh;
    padding: 14px 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-right: 1px solid rgba(255,255,255,.055);
    border-bottom: 0;
    background: rgba(7,6,6,.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
    z-index: 300;
    transition: width 220ms ease;
  }
  .navbar::after { display: none; }
  .navbar:hover, .navbar:focus-within { width: var(--v53-rail-open); box-shadow: 18px 0 45px rgba(0,0,0,.36); }

  .navbar-brand {
    min-height: 58px;
    width: 100%;
    gap: 13px;
    padding: 0 10px;
    margin-bottom: 14px;
    white-space: nowrap;
    overflow: hidden;
  }
  .navbar .logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,123,53,.22), rgba(255,123,53,.08));
    border-color: rgba(255,123,53,.25);
    box-shadow: none;
  }
  .navbar .logo svg { width: 23px; height: 28px; }
  .brand-text {
    opacity: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.045em;
    transition: opacity 140ms ease;
  }
  .version-badge { opacity: 0; transition: opacity 140ms ease; }
  .navbar:hover .brand-text, .navbar:focus-within .brand-text,
  .navbar:hover .version-badge, .navbar:focus-within .version-badge { opacity: 1; }

  .navbar-menu {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: 100%;
  }
  .nav-link {
    flex: 0 0 50px;
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 15px;
    border-radius: 14px;
    gap: 15px;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid transparent;
    color: #91877f;
    background: transparent;
  }
  .nav-link span:last-child:not(.nav-icon):not(.now-playing-text) { opacity: 0; transition: opacity 140ms ease; }
  .navbar:hover .nav-link span:last-child:not(.nav-icon):not(.now-playing-text),
  .navbar:focus-within .nav-link span:last-child:not(.nav-icon):not(.now-playing-text) { opacity: 1; }
  .nav-link .nav-icon { flex: 0 0 24px; width: 24px; display: grid; place-items: center; }
  .nav-link .nav-icon .icon { width: 22px; height: 22px; }
  .nav-link:hover { background: #171411; color: #fff; border-color: rgba(255,255,255,.055); }
  .nav-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(255,123,53,.20), rgba(255,123,53,.045));
    border-color: rgba(255,123,53,.22);
    box-shadow: inset 3px 0 0 var(--v53-orange);
  }
  .navbar-menu .nav-link[data-page="settings"] { margin-top:auto; }
  .navbar-menu #logout-btn { margin-top:0; }
  .now-playing-indicator { order: 20; }

  .main-content {
    margin-left: var(--v53-rail);
    width: calc(100% - var(--v53-rail));
    height: 100dvh;
    overflow: hidden;
    transition: none;
  }
}

/* ---------- Home V5.3 ---------- */
#page-home { background: var(--v53-black); }
.dashboard-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 1.7vw, 26px) clamp(14px, 2.2vw, 34px) 42px;
}

.home-hero-v53 {
  min-height: clamp(360px, 48vh, 570px);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 4vw, 58px);
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(135deg, #221108, #0d0908 56%, #080707);
  isolation: isolate;
  margin-bottom: 30px;
}
.home-hero-v53::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,4,4,.98) 0%, rgba(5,4,4,.83) 34%, rgba(5,4,4,.28) 70%, rgba(5,4,4,.44) 100%),
    linear-gradient(0deg, var(--v53-black) 0%, transparent 44%);
}
.home-hero-v53 .hero-art {
  position: absolute;
  inset: 0 0 0 38%;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: -2;
  opacity: .72;
  filter: saturate(.88) contrast(1.04);
}
.home-hero-v53 .hero-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  right: 13%;
  top: -31%;
  background: rgba(255,123,53,.18);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}
.hero-copy-v53 { max-width: 610px; position: relative; z-index: 3; }
.hero-kicker-v53 {
  display: flex; align-items: center; gap: 9px;
  color: var(--v53-orange-2); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-kicker-v53::before { content:''; width: 28px; height: 2px; background: var(--v53-orange); }
.hero-title-v53 {
  margin: 0 0 12px;
  font-size: clamp(2.5rem, 5.2vw, 5.3rem);
  line-height: .93;
  font-family: 'Outfit','Space Grotesk',system-ui,sans-serif;
  font-weight: 800;
  letter-spacing: -.055em;
  color: #fff;
  text-wrap: balance;
}
.hero-title-v53 .accent { color: var(--v53-orange); }
.hero-meta-v53 { display: flex; flex-wrap: wrap; gap: 7px 12px; color: #d7cbc5; font-weight: 650; margin-bottom: 12px; font-size: .88rem; }
.hero-description-v53 { max-width: 560px; color: #b9aaa2; line-height: 1.58; font-size: .92rem; margin: 0 0 20px; }
.hero-actions-v53 { display:flex; flex-wrap:wrap; gap:10px; }
.hero-actions-v53 .btn { min-height: 48px; padding-inline: 20px; font-weight: 800; }
.hero-actions-v53 .btn-primary { color:#100906; }

.home-live-dock-v53 {
  position:absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  width: min(330px, 31vw);
  border-radius: 18px;
  padding: 16px;
  background: rgba(10,9,8,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 45px rgba(0,0,0,.34);
  color: var(--v53-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.live-dock-head-v53 { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.68rem; font-weight:900; letter-spacing:.08em; color:#b9aaa2; text-transform:uppercase; }
.live-badge-v53 { background:var(--v53-orange); color:#110907; border-radius:7px; padding:4px 7px; font-size:.62rem; }
.live-title-v53 { font-weight:800; font-size:1rem; margin-top:10px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-sub-v53 { font-size:.78rem; color:#8f7e75; margin:4px 0 10px; }
.live-progress-v53 { height:4px; border-radius:99px; background:#2a2420; overflow:hidden; }
.live-progress-v53 span { display:block; width:58%; height:100%; background:var(--v53-orange); }

.dashboard-section { margin-bottom: 34px; }
.section-header { margin-bottom: 13px; padding: 0 2px; }
.section-header h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.horizontal-scroll { gap: 12px; padding-bottom: 9px; scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar { display:none; }
.scroll-arrow { width: 42px; height:42px; background:rgba(8,7,7,.86); backdrop-filter:none; -webkit-backdrop-filter:none; }

.dashboard-card {
  flex: 0 0 178px;
  max-width: 178px;
  border-radius: 15px;
  background:#12100f;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}
.card-image { border-radius: 14px 14px 0 0; }
.card-info { padding:10px 11px 12px; }
.card-title { font-size:.88rem; font-weight:750; }
.card-subtitle { font-size:.72rem; color:#87786f; }
.dashboard-card:hover { transform:translateY(-4px); border-color:rgba(255,123,53,.36); box-shadow:0 16px 32px rgba(0,0,0,.32); }

/* Continue watching gets cinematic 16:9 cards. */
#continue-watching-list .dashboard-card { flex-basis: 310px; max-width:310px; }
#continue-watching-list .card-image { aspect-ratio: 16/9; }
#continue-watching-list .card-image img { object-position:center 28%; }
#continue-watching-list .card-info { background:linear-gradient(180deg,#15120f,#100e0c); }

.channel-tiles { gap: 10px; }
.channel-tile {
  flex:0 0 150px;
  min-height:92px;
  border-radius:15px;
  background:#11100f;
  border:1px solid rgba(255,255,255,.06);
  padding:10px;
}
.channel-tile:hover { border-color:rgba(255,123,53,.35); background:#17130f; }
.tile-logo { width:48px; height:48px; border-radius:12px; background:#1c1917; }
.tile-name { font-size:.74rem; max-width:130px; }

/* ---------- Page headers & premium controls ---------- */
.movies-header, .series-header, .guide-header {
  padding: 22px clamp(16px,2.2vw,32px) 16px;
  display: block;
  background: transparent;
  border-bottom: 0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.movies-header h2, .series-header h2, .guide-header h2 {
  font-family:'Outfit','Space Grotesk',system-ui,sans-serif;
  font-size: clamp(2rem, 3.3vw, 3.35rem);
  line-height:1;
  font-weight:800;
  letter-spacing:-.05em;
  margin-bottom:16px;
}
.movies-header h2::after, .series-header h2::after, .guide-header h2::after {
  display:block; content:'Catalogue premium'; color:#81736b; font-family:'Space Grotesk',system-ui,sans-serif; font-size:.78rem; font-weight:500; letter-spacing:0; margin-top:9px;
}
.series-header h2::after { content:'Saisons, épisodes et reprise de lecture'; }
.guide-header h2::after { content:'Programme en cours et à venir'; }

.movies-controls, .series-controls, .guide-controls {
  display:grid;
  grid-template-columns: repeat(4,minmax(150px,1fr)) minmax(210px,1.35fr) auto;
  gap:10px;
  align-items:end;
  width:100%;
  padding:12px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:18px;
  background:#0f0d0c;
}
.series-controls { grid-template-columns: repeat(5,minmax(140px,1fr)) minmax(200px,1.25fr) auto; }
.guide-controls { grid-template-columns: minmax(180px,1fr) minmax(220px,1.3fr) auto auto auto; }

.filter-field-v53 { min-width:0; }
.filter-field-v53 > label {
  display:block;
  margin:0 0 6px 2px;
  color:#806f66;
  font-size:.64rem;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.movies-controls .source-select, .series-controls .source-select, .guide-controls .source-select,
.movies-controls .search-input, .series-controls .search-input, .guide-controls .search-input {
  width:100%;
  min-width:0;
  height:56px;
  padding:0 14px;
  border:1px solid #332c28;
  border-radius:13px;
  background:#181513;
  color:#fffaf7;
  font-size:.88rem;
  font-weight:650;
  box-shadow:none;
}
.movies-controls .search-wrapper, .series-controls .search-wrapper, .guide-controls .search-wrapper { width:100%; min-width:0; }
.movies-controls .source-select:focus, .series-controls .source-select:focus, .guide-controls .source-select:focus,
.movies-controls .search-input:focus, .series-controls .search-input:focus, .guide-controls .search-input:focus {
  outline:none;
  border-color:var(--v53-orange);
  box-shadow:0 0 0 3px rgba(255,123,53,.11);
  background:#1d1815;
}
.movies-controls .btn, .series-controls .btn, .guide-controls .btn { min-height:56px; padding-inline:15px; font-weight:750; }
.catalog-filter-toggle-v53, .filter-panel-head-v53 { display:none; }

.movies-grid, .series-grid {
  height: calc(100dvh - 174px);
  gap: 13px;
  padding: 10px clamp(16px,2.2vw,32px) 30px;
  justify-content:flex-start;
}
.movie-card, .series-card {
  flex: 0 0 clamp(150px, 12.3vw, 196px);
  width: clamp(150px, 12.3vw, 196px);
  border-radius:15px;
  background:#12100f;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}
.movie-poster, .series-card .series-poster {
  width:100%;
  height:auto;
  aspect-ratio:2/3;
}
.movie-card:hover, .series-card:hover { transform:translateY(-4px); border-color:rgba(255,123,53,.35); box-shadow:0 16px 34px rgba(0,0,0,.30); }
.movie-info, .series-card-info { padding:10px 11px 12px; }

/* ---------- Live TV ---------- */
#page-live { background:var(--v53-black); }
.home-layout { gap:12px; padding:14px; }
.channel-sidebar {
  width:300px;
  min-width:300px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:#0f0d0c;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
}
.sidebar-header { background:#0f0d0c; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.055); }
.sidebar-controls .source-select { height:48px; font-size:.84rem; padding-inline:12px; background:#181513; border-color:#332c28; }
.channel-item { border-radius:12px; margin-bottom:4px; min-height:54px; }
.channel-item:hover { background:#181512; }
.channel-item.active { background:linear-gradient(90deg,rgba(255,123,53,.17),rgba(255,123,53,.035)); box-shadow:inset 3px 0 0 var(--v53-orange); }
.player-section { border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:#050505; }
.video-container { background:#030303; }

/* ---------- Guide ---------- */
.epg-grid { height:calc(100dvh - 174px); padding:0 clamp(16px,2.2vw,32px) 28px; }
.epg-time-header { background:#11100f; }
.epg-program { border-radius:10px; }


@media (min-width:721px) and (max-width:1200px) {
  .movies-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .series-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .guide-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .movies-grid,.series-grid { height:calc(100dvh - 245px); }
  .movie-card,.series-card { flex-basis:160px; width:160px; }
  .home-live-dock-v53 { width:290px; }
  .hero-copy-v53 { max-width:52%; }
}

/* ---------- Mobile top bar ---------- */
.v53-mobile-topbar { display:none; }

/* ---------- Responsive phone/tablet: true app mode ---------- */
@media (max-width:720px) {
  /* Override main.css's global html,body{overflow:hidden} for mobile only.
     #app is position:fixed + inset:0 with its own overflow:hidden, so it's
     already fully contained regardless of what html/body allow - locking the
     outer document's own scroll on top of that never contributed anything
     app content couldn't already do internally. A working sibling PWA on
     this same phone (salon-dreadlocks) never locks html/body at all and has
     no bottom-gap issue, which is the only real-device evidence available
     after three failed attempts that all kept this constraint. */
  html,body { overflow:visible; }
  /* main.css already defines --safe-area-inset-* from env(), but nothing here
     was adding it in - the fixed 56px bar never grew to clear a taller status
     bar (Dynamic Island call pill, etc.), so real notched-device content sat
     underneath and got overlapped. Playwright's device emulation can't
     reproduce this (env() always resolves to 0 there), which is why it
     passed every automated check despite being broken on a real iPhone. */
  /* position:fixed + inset:0 instead of a computed height: this anchors all
     four edges directly to the true viewport, the same browser-guaranteed
     mechanism .navbar's position:fixed already relies on - it cannot be
     wrong the way a height value derived from dvh/innerHeight/visualViewport
     can be, which matters specifically in iOS PWA standalone mode where
     those have documented inconsistencies this app couldn't otherwise avoid. */
  /* opacity:.999 is not decorative - iOS 26 Safari has a confirmed WebKit bug
     where a position:fixed element with a fully opaque (opacity:1) background
     is clipped short of the true viewport edge in PWA standalone mode (fixed
     upstream in Safari 26.1, but not on it yet). Any opacity below 1 routes
     the layer through the compositor instead of Safari's "simple fill" fast
     path, which is what actually reaches the real bottom edge. This is what
     the debug-color screenshot proof (solid #ffff00/#00ff00, opacity:1) was
     unknowingly triggering the whole time. */
  #app { position:fixed; inset:0; padding-top:calc(var(--v53-top-mobile) + var(--safe-area-inset-top)); padding-bottom:var(--v53-bottom-mobile); display:block; opacity:.999; }
  body::before { background: radial-gradient(circle at 72% 4%,rgba(255,123,53,.12),transparent 27%); }

  .v53-mobile-topbar {
    display:flex;
    position:fixed;
    inset:0 0 auto 0;
    /* Grow by the inset instead of just padding into a fixed height (box-sizing
       is border-box globally) - otherwise the safe-area padding eats into the
       56px meant for the logo/gear row, squeezing them instead of clearing the
       notch/Dynamic Island area. */
    height:calc(var(--v53-top-mobile) + var(--safe-area-inset-top));
    padding-top:var(--safe-area-inset-top);
    z-index:420;
    align-items:center;
    justify-content:space-between;
    padding-left:14px;
    padding-right:14px;
    background:rgba(7,6,6,.97);
    border-bottom:1px solid rgba(255,255,255,.055);
  }
  .v53-mobile-brand { display:flex; align-items:center; gap:9px; font-weight:900; letter-spacing:-.04em; }
  .v53-mobile-brand .mini-logo { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(255,123,53,.15); color:var(--v53-orange); }
  .v53-mobile-brand .mini-logo svg { width:15px; height:18px; }
  .v53-mobile-brand b span { color:var(--v53-orange); }
  /* This link also carries the .nav-link class (shared active-state styling),
     which main.css's older mobile dropdown menu (max-width:640px) still styles
     with padding + justify-content:flex-start - that pins this grid's track to
     the left edge even though place-items:center correctly centers the icon
     *within* that track, so both need an explicit override here too. */
  .v53-mobile-settings { width:42px; height:42px; border:1px solid #2d2926; border-radius:12px; background:#151311; color:#fff; display:grid; place-items:center; justify-content:center!important; padding:0!important; text-decoration:none; }
  .v53-mobile-settings .icon { width:19px; }

  .navbar {
    position:fixed;
    inset:auto 0 0 0;
    z-index:420;
    height:var(--v53-bottom-mobile);
    padding:0 max(5px,var(--safe-area-inset-right)) max(3px,var(--safe-area-inset-bottom)) max(5px,var(--safe-area-inset-left));
    background:rgba(8,7,7,.985);
    border:0;
    border-top:1px solid rgba(255,255,255,.065);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    display:block;
    /* Same iOS 26 Safari fixed-position-clipping bug as #app above - the
       .985 alpha on background-color alone wasn't enough to dodge it, this
       element's own opacity needs to be sub-1 too. */
    opacity:.999;
  }
  .navbar::after,.navbar-brand,.mobile-menu-toggle { display:none!important; }
  .navbar-menu {
    height:100%;
    /* main.css's older hamburger-dropdown .navbar-menu (max-width:640px) sets
       max-height:0 + visibility:hidden, collapsed until a .active toggle -
       this bottom-bar redesign has no such toggle, so those two leftover
       properties silently zero out the whole bar on real phones (<=640px)
       unless explicitly overridden here too. */
    max-height:none!important;
    visibility:visible!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    align-items:stretch;
    position:static!important;
    background:transparent!important;
    padding:0!important;
    border:0!important;
    transform:none!important;
  }
  .navbar-menu .nav-link {
    min-width:0;
    height:100%;
    padding:7px 2px 5px;
    border:0;
    border-radius:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:.64rem;
    font-weight:750;
    background:transparent;
    color:#81746d;
  }
  .navbar-menu .nav-link .nav-icon { width:auto; }
  .navbar-menu .nav-link .nav-icon .icon { width:20px; height:20px; }
  .navbar-menu .nav-link.active { color:var(--v53-orange); box-shadow:none; background:transparent; }
  .navbar-menu .nav-link[data-page="settings"], .navbar-menu #logout-btn, .navbar-menu .now-playing-indicator { display:none!important; }

  /* 100% of #app's own (now inset:0-guaranteed-correct) content box, instead
     of re-deriving the same number from viewport units independently - two
     separate calculations of "the same" height is exactly the kind of thing
     that silently drifts apart on a real device. */
  .main-content { width:100%; height:100%; margin:0; }
  .page { height:100%; }

  .dashboard-content { padding:10px 11px 24px; }
  .home-hero-v53 {
    min-height:390px;
    padding:22px 18px 150px;
    border-radius:20px;
    margin-bottom:24px;
  }
  .home-hero-v53 .hero-art { inset:0; width:100%; height:100%; opacity:.48; object-position:center 18%; }
  .home-hero-v53::before { background:linear-gradient(0deg,#060505 6%,rgba(6,5,5,.84) 45%,rgba(6,5,5,.18) 100%),linear-gradient(90deg,rgba(6,5,5,.7),transparent); }
  .home-hero-v53 .hero-glow { display:none; }
  .hero-title-v53 { font-size:clamp(2.5rem,12vw,3.7rem); max-width:95%; }
  .hero-description-v53 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.82rem; }
  .hero-actions-v53 .btn { flex:1 1 130px; min-height:48px; }
  .home-live-dock-v53 { left:16px; right:16px; bottom:16px; width:auto; padding:14px; border-radius:15px; }

  .dashboard-section { margin-bottom:26px; }
  .section-header h2 { font-size:1.08rem; }
  .horizontal-scroll { gap:10px; scroll-snap-type:x proximity; }
  .dashboard-card { flex:0 0 43%; max-width:43%; }
  #continue-watching-list .dashboard-card { flex:0 0 78%; max-width:78%; }
  .channel-tile { flex:0 0 116px; min-height:84px; }

  .movies-header,.series-header,.guide-header { padding:14px 12px 6px; }
  .movies-header h2,.series-header h2,.guide-header h2 { font-size:2rem; margin-bottom:9px; }
  .movies-header h2::after,.series-header h2::after,.guide-header h2::after { font-size:.72rem; margin-top:6px; }

  .catalog-filter-toggle-v53 {
    display:flex;
    width:calc(100% - 24px);
    min-height:54px;
    margin:4px 12px 10px;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:#171411;
    border:1px solid #342c28;
    border-radius:14px;
    color:#fff;
    font-size:.9rem;
    font-weight:800;
    cursor:pointer;
  }
  .catalog-filter-toggle-v53::before { content:'☷'; color:var(--v53-orange); font-size:1.1rem; }
  .movies-controls,.series-controls,.guide-controls {
    display:none;
    position:fixed;
    z-index:520;
    inset:auto 10px calc(var(--v53-bottom-mobile) + 8px) 10px;
    max-height:calc(var(--app-vh, 100dvh) - var(--v53-bottom-mobile) - 78px);
    overflow-y:auto;
    grid-template-columns:1fr;
    gap:11px;
    padding:16px;
    border-radius:22px;
    border:1px solid #37302c;
    background:#100e0d;
    box-shadow:0 -22px 65px rgba(0,0,0,.62);
  }
  .movies-controls.mobile-open-v53,.series-controls.mobile-open-v53,.guide-controls.mobile-open-v53 { display:grid; }
  .filter-panel-head-v53 { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; }
  .filter-panel-head-v53 strong { font-size:1.1rem; }
  .filter-panel-close-v53 { width:42px; height:42px; border-radius:12px; border:1px solid #34302c; background:#191614; color:#fff; font-size:1.35rem; }
  .filter-field-v53 > label { font-size:.68rem; }
  .movies-controls .source-select,.series-controls .source-select,.guide-controls .source-select,
  .movies-controls .search-input,.series-controls .search-input,.guide-controls .search-input { height:58px; font-size:16px; }
  .movies-controls .btn,.series-controls .btn,.guide-controls .btn { width:100%; min-height:56px; }
  .guide-controls .guide-date { text-align:center; padding:8px; }
  body.v53-filter-open .main-content::after { content:''; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.72); pointer-events:auto; }

  .movies-grid,.series-grid { height:calc(var(--app-vh, 100dvh) - var(--v53-top-mobile) - var(--v53-bottom-mobile) - 124px); padding:6px 10px 24px; gap:8px; justify-content:space-between; }
  .movie-card,.series-card { flex:0 0 calc(50% - 4px); width:calc(50% - 4px); border-radius:13px; }
  .movie-title,.series-title { font-size:.82rem; }

  .home-layout { display:block; padding:9px; }
  .channel-toggle-btn { display:flex; top:11px; left:11px; min-height:46px; border-radius:13px; background:#171411; border:1px solid #332c28; }
  .channel-sidebar { border-radius:0 18px 18px 0; }
  .player-section { height:100%; border-radius:16px; }

  .epg-grid { height:calc(var(--app-vh, 100dvh) - var(--v53-top-mobile) - var(--v53-bottom-mobile) - 120px); padding:5px 10px 20px; }

  /* TEMPORARY DEBUG round 2 - opacity:.999 fix didn't resolve the real-device
     gap, so re-checking with rgba() alpha instead of solid opacity:1 hex
     colors this time, since solid opaque debug fills would themselves
     retrigger the exact iOS 26 clipping bug being ruled in/out here. */
  html { background:rgba(255,0,255,.9)!important; }
  body { background:rgba(0,255,255,.9)!important; }
  #app { background:rgba(255,255,0,.9)!important; outline:6px solid rgba(255,0,0,.9)!important; }
  .main-content { background:rgba(0,0,255,.9)!important; }
  .navbar { background:rgba(0,255,0,.9)!important; outline:6px solid rgba(255,0,255,.9)!important; }
}

@media (max-width:430px) {
  .dashboard-card { flex-basis:48%; max-width:48%; }
  #continue-watching-list .dashboard-card { flex-basis:86%; max-width:86%; }
  .home-hero-v53 { min-height:420px; }
  .hero-title-v53 { font-size:2.65rem; }
}

/* ---------- Tesla MCU2 performance profile ----------
   Detection is performed by ui-profile.js (Tesla / QtCarBrowser UA).
   Same black/orange identity, fewer expensive paint effects. ---------- */
html[data-ui-profile="tesla"] {
  --v53-rail: 82px;
  --v53-rail-open: 82px;
}
html[data-ui-profile="tesla"] body::before,
html[data-ui-profile="tesla"] body::after { display:none; }
html[data-ui-profile="tesla"] * {
  text-shadow:none!important;
}
html[data-ui-profile="tesla"] .navbar,
html[data-ui-profile="tesla"] .channel-sidebar,
html[data-ui-profile="tesla"] .sidebar-header,
html[data-ui-profile="tesla"] .home-live-dock-v53,
html[data-ui-profile="tesla"] .btn,
html[data-ui-profile="tesla"] .modal-content {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
}
html[data-ui-profile="tesla"] .navbar .brand-text,
html[data-ui-profile="tesla"] .navbar .version-badge,
html[data-ui-profile="tesla"] .nav-link span:last-child:not(.nav-icon):not(.now-playing-text) { opacity:0!important; }
html[data-ui-profile="tesla"] .home-hero-v53 {
  min-height:470px;
  background:#100c09;
}
html[data-ui-profile="tesla"] .home-hero-v53 .hero-art { filter:none; opacity:.55; }
html[data-ui-profile="tesla"] .home-hero-v53 .hero-glow { display:none; }
html[data-ui-profile="tesla"] .dashboard-card,
html[data-ui-profile="tesla"] .movie-card,
html[data-ui-profile="tesla"] .series-card,
html[data-ui-profile="tesla"] .channel-tile { transition:none!important; }
html[data-ui-profile="tesla"] .dashboard-card:hover,
html[data-ui-profile="tesla"] .movie-card:hover,
html[data-ui-profile="tesla"] .series-card:hover { transform:none!important; box-shadow:none!important; }
html[data-ui-profile="tesla"] .card-image img { transition:none!important; }
html[data-ui-profile="tesla"] .dashboard-card:hover .card-image img { transform:none!important; }
html[data-ui-profile="tesla"] .scroll-arrow { display:none!important; }
html[data-ui-profile="tesla"] .horizontal-scroll { scroll-behavior:auto; }
html[data-ui-profile="tesla"] .movies-grid,
html[data-ui-profile="tesla"] .series-grid { gap:12px; }
html[data-ui-profile="tesla"] .movie-card,
html[data-ui-profile="tesla"] .series-card { flex-basis:172px; width:172px; }
html[data-ui-profile="tesla"] .source-select,
html[data-ui-profile="tesla"] .search-input,
html[data-ui-profile="tesla"] .btn { font-size:16px; }
html[data-ui-profile="tesla"] .nav-link { min-height:58px; justify-content:center!important; }
/* Tesla's rail never hover-expands (--v53-rail-open == --v53-rail above), so
   the label text next to each icon is permanently redundant - hiding it with
   opacity:0 (elsewhere) keeps it in normal flow, so it still occupies row
   space and nudges the icon off the button's true center. Remove it from
   layout entirely instead, at every width (not just the narrow-screen
   @media block below): a real Tesla's CSS viewport is well over 720px wide,
   so that block alone never reaches this. */
html[data-ui-profile="tesla"] .nav-link span:last-child:not(.nav-icon):not(.now-playing-text) {
  display:none!important;
}
html[data-ui-profile="tesla"] .navbar { width:82px; }
html[data-ui-profile="tesla"] .main-content { margin-left:82px; width:calc(100% - 82px); }

/* If the Tesla reports a narrower CSS viewport, preserve the left rail rather
   than falling into the phone bottom-nav layout. */
@media (max-width:720px) {
  html[data-ui-profile="tesla"] #app { padding:0; display:block; }
  html[data-ui-profile="tesla"] .v53-mobile-topbar { display:none; }
  html[data-ui-profile="tesla"] .navbar {
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    width:82px;
    height:var(--app-vh, 100dvh);
    padding:14px 9px;
    flex-direction:column;
    border-right:1px solid rgba(255,255,255,.06);
    border-top:0;
  }
  html[data-ui-profile="tesla"] .navbar-brand { display:flex!important; padding:0 9px; }
  html[data-ui-profile="tesla"] .navbar-menu { display:flex!important; flex-direction:column; gap:7px; height:auto; flex:1; }
  html[data-ui-profile="tesla"] .navbar-menu .nav-link {
    display:flex!important; flex-direction:row; align-items:center!important; justify-content:center!important;
    height:56px; min-height:56px; padding:0 15px; border-radius:14px;
  }
  /* The label text is opacity:0 (not display:none) elsewhere so it can be
     revealed on desktop's hover-to-expand rail - Tesla's rail never expands,
     but the invisible text still occupies row space next to the icon,
     nudging it off-center. Remove it from layout entirely here instead. */
  html[data-ui-profile="tesla"] .navbar-menu .nav-link span:last-child:not(.nav-icon):not(.now-playing-text) {
    display:none!important;
  }
  html[data-ui-profile="tesla"] .navbar-menu .nav-link[data-page="settings"] { display:flex!important; margin-top:auto; }
  html[data-ui-profile="tesla"] .navbar-menu #logout-btn { display:flex!important; }
  html[data-ui-profile="tesla"] .main-content { margin-left:82px; width:calc(100% - 82px); height:var(--app-vh, 100dvh); }
  html[data-ui-profile="tesla"] .home-hero-v53 { min-height:500px; padding:34px 28px 170px; }
  html[data-ui-profile="tesla"] .home-live-dock-v53 { left:24px; right:24px; bottom:24px; }
  html[data-ui-profile="tesla"] .dashboard-card { flex-basis:190px; max-width:190px; }
  html[data-ui-profile="tesla"] #continue-watching-list .dashboard-card { flex-basis:330px; max-width:330px; }
  html[data-ui-profile="tesla"] .catalog-filter-toggle-v53 { display:none; }
  html[data-ui-profile="tesla"] .movies-controls,
  html[data-ui-profile="tesla"] .series-controls,
  html[data-ui-profile="tesla"] .guide-controls {
    display:grid;
    position:static;
    max-height:none;
    overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:0;
    box-shadow:none;
  }
  html[data-ui-profile="tesla"] .filter-panel-head-v53 { display:none; }
  html[data-ui-profile="tesla"] .movies-grid,
  html[data-ui-profile="tesla"] .series-grid { height:calc(var(--app-vh, 100dvh) - 260px); grid-template-columns:none; justify-content:flex-start; }
}

/* Reduced motion is useful for accessibility and also protects low-power UIs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}