.home-shell {
  display: flex;
  height: 100%;
}

.home-view {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 32px 48px 60px;
  background:
    radial-gradient(1400px 700px at 80% -10%, rgba(228, 32, 47, 0.05), transparent 60%),
    var(--bg-primary);
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.home-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-title {
  /* Era o unico lugar do produto que escrevia a marca em vez de mostra-la, e e
     a tela mais vista. Agora o simbolo carrega o vermelho e a palavra fica em
     texto normal — o mesmo arranjo do login e da landing. */
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.home-title img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.home-greeting {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.home-greeting-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.home-greeting-sub {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Search entry point, top-right of the header (where users expect it). */
.home-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 22px;
  color: var(--text-secondary);
  background: var(--surface-a);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.home-search-btn.focused,
.home-search-btn:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--surface-b);
}

/* Featured hero banner */
.home-hero {
  position: relative;
  height: 44vh;
  min-height: 300px;
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-secondary);
  box-shadow: var(--elev-2);
  border: 1px solid var(--border);
}

.home-hero-badge {
  margin-bottom: 12px;
}

.badge-pill {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  /* Era um terceiro vermelho (#dc202b) que nao era nem --accent nem
     --accent-text, com um #ff5e6c solto no texto. */
  background: var(--accent-quiet);
  color: var(--accent-text);
  border: 1px solid var(--accent-dim);
  box-shadow: var(--glow-accent);
}

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

/* The image lives on its own layer so a poster-only hero can be blurred to fill
   the wide frame (instead of being cropped/stretched), like the big streamers. */
.home-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center 20%;
}

.home-hero-poster .home-hero-bg {
  filter: blur(28px) brightness(0.7);
  transform: scale(1.2);
}

.home-hero-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(11, 5, 6, 0.92) 0%, rgba(11, 5, 6, 0.6) 45%, rgba(11, 5, 6, 0.15) 100%),
    linear-gradient(0deg, rgba(11, 5, 6, 0.85), transparent 55%);
}

.home-hero-content {
  position: absolute;
  bottom: 32px;
  left: 36px;
  right: 36px;
  max-width: 640px;
}

.home-hero-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 12px;
}

.home-hero-plot {
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-hero-btn.focused {
  border-color: var(--focus-gap) !important;
  transform: scale(var(--focus-scale));
}

/* Carousel arrows + position dots */
.home-hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.home-hero-prev { left: 16px; }
.home-hero-next { right: 16px; }
.home-hero-arrow.focused,
.home-hero-arrow:hover {
  background: var(--accent);
  color: #04121a;
  border-color: #fff;
}

.home-hero-dots {
  position: absolute;
  right: 36px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.home-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-c);
  transition: width 0.2s ease, background 0.2s ease;
}
.home-hero-dot.active {
  width: 24px;
  border-radius: var(--radius-sm);
  background: var(--accent);
}

/* First-run welcome (no playlist configured) */
.home-welcome {
  max-width: 720px;
  margin: 24px 0 36px;
  padding: 28px 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.home-welcome-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
}
.home-welcome-text {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Section shortcut tiles */
.home-tiles {
  display: flex;
  gap: 18px;
  margin-bottom: 34px;
}

.home-tile {
  flex: 1;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

/* One neutral surface for all three. The purple and cyan washes here predated
   the neutral palette and read as three unrelated brands sitting side by side.
   Colour now carries meaning instead: only the live tile takes the accent,
   because "ao vivo" is the one state red actually signals. */
.home-tile-live,
.home-tile-movie,
.home-tile-series {
  background: linear-gradient(135deg, var(--surface-a) 0%, var(--bg-secondary) 62%);
}

.home-tile-live .icon { color: var(--accent-text); }

.home-tile-movie .icon,
.home-tile-series .icon { color: var(--text-secondary); }

.home-tile-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.home-tile-icon .icon {
  width: 38px;
  height: 38px;
}

.home-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-tile-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.home-tile-sub {
  font-size: 18px;
  color: var(--text-muted);
}

.home-tile.focused {
  border-color: var(--focus-gap) !important;
  box-shadow: var(--focus-shadow), 0 16px 40px rgba(0, 0, 0, 0.75);
  transform: scale(var(--focus-scale));
}

.home-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 78, 90, 0.28);
  border-radius: var(--radius-art);
  background: linear-gradient(135deg, rgba(241, 50, 64, 0.18), rgba(23, 9, 12, 0.92));
}

.home-upgrade-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-upgrade strong {
  display: block;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.35;
}

/* Horizontal content rails */
.home-rail { margin-bottom: 36px; }

.home-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.home-rail-title { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); }

.home-rail-more {
  font-size: 20px;
  color: var(--accent-text);
  cursor: pointer;
  padding: 6px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius);
}

.home-rail-more.focused {
  border-color: var(--focus-gap) !important;
  background: var(--bg-tertiary);
}

.home-rail-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 4px 12px;
}

.home-rail-empty {
  color: var(--text-muted);
  font-size: 18px;
  padding: 32px;
  background: var(--surface-a);
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  text-align: center;
  width: 100%;
}

.home-card {
  flex: 0 0 auto;
  width: 200px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  padding: 6px;
  transition: transform var(--transition);
}

.home-card-thumb {
  position: relative;
  width: 100%;
  height: 270px;
  border-radius: var(--radius-art);
  overflow: hidden;
  background: var(--bg-tertiary);
  box-shadow: var(--elev-1);
  border: 1px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Live channel logos aren't posters — show them smaller and uncropped. */
/* Continue-watching progress bar at the bottom of the thumb. */
.resume-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(0, 0, 0, 0.55);
}

.resume-bar-fill {
  height: 100%;
  background: var(--accent);
}

.home-card-live .home-card-thumb { height: 150px; }
.home-card-live .poster-img { object-fit: contain; }

.home-card-title {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card-sub {
  margin-top: 2px;
  font-size: 18px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card.focused {
  border-color: var(--focus-gap) !important;
  background: var(--bg-tertiary);
  transform: scale(var(--focus-scale));
  z-index: 5;
}

.home-card.focused .home-card-thumb {
  /* Matches the card border: one focus colour across the UI. Red here sat at
     3.79:1 against the artwork's dark edges — the ring has to be the most
     legible thing on screen, not the least. */
  box-shadow: var(--focus-shadow), 0 16px 40px rgba(0, 0, 0, 0.75);
}

/* "Remove from Continue watching" (X) — top-right of the thumb. Shown on
   hover/focus (web), and always visible once it (or its card) is focused. */
.resume-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}

.home-card-thumb:hover .resume-remove,
.home-card.focused .resume-remove,
.resume-remove.focused {
  opacity: 1;
}

.resume-remove.focused {
  border-color: var(--focus-ring);
  background: var(--accent);
}