/* Cinebank overlay for TesPlay.
   Inspired by the live Jellyfin theme (ElegantFin + Cinebank logos).
   Loaded after TesPlay CSS. Do not change TesPlayer layout or behaviour.
   Re-applied by cinebank/apply.sh after git pull. */

:root {
  --bg: #111827;
  --surface: #1d2635;
  --raised: #253044;
  --text: #f3f4f6;
  --secondary: #d1d5db;
  --muted: #9ca3af;
  --line: rgba(71, 80, 92, 0.7);
  --accent: #775bf4;
  --accent-strong: #756fe2;
  --header: rgba(30, 40, 54, 0.92);
}

html,
body {
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(119, 91, 244, 0.16), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(45, 199, 255, 0.07), transparent 50%),
    var(--bg);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: #a78bfa;
}

.text-button:hover {
  color: #c4b5fd;
}

.icon-button.active {
  color: var(--accent);
}

/* Logo must escape TesPlay's global `img { width: 100% }` rule. */
.brand {
  gap: 0;
}
.brand > svg,
.brand-dot {
  display: none;
}
img.brand-logo,
.brand .brand-logo {
  display: block;
  width: auto !important;
  height: 44px;
  max-width: min(280px, 46vw);
  object-fit: contain;
  object-position: left center;
}
img.brand-logo.compact,
.brand .brand-logo.compact {
  height: 40px;
  width: 40px !important;
  max-width: 40px;
  object-position: center;
}
.auth-header .brand-logo {
  height: 52px;
  max-width: min(340px, 62vw);
}
.navigation-brand .brand-logo,
.topbar .brand-logo {
  height: 46px;
}
.app-footer .brand-logo {
  height: 32px;
  max-width: 200px;
  filter: none;
}

.auth-screen {
  background: transparent;
}
.auth-header,
.auth-footer {
  background: var(--header);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}
.auth-card {
  background: rgba(30, 40, 54, 0.88);
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.auth-intro h1 {
  text-wrap: balance;
}
.auth-caption-line {
  background: var(--accent);
}
.auth-header > span,
.auth-footer {
  color: var(--muted);
}

.topbar,
.phone-remote-header,
.rear-header {
  background: var(--header);
  border-color: var(--line);
}

.search-bar {
  background: #1a2333;
  border-color: var(--line);
}

.button.primary {
  background: #eef2ff;
  color: #111827;
}
.button.primary:hover {
  background: #ffffff;
  color: #111827;
}

.tesplayer-big-play,
.tesplayer .tesplayer-play,
.eyebrow > span,
.watched-badge {
  box-shadow: none;
}

/* Slightly larger chrome for the Tesla screen; player chrome is unchanged. */
.auth-card input,
.auth-card .button {
  min-height: 52px;
  font-size: 17px;
}
.auth-card h2,
.auth-card .qr-login h3 {
  font-size: 30px;
}

@media (max-width: 680px) {
  img.brand-logo,
  .brand .brand-logo {
    height: 36px;
    max-width: min(220px, 58vw);
  }
}