/**
 * Liquid glass UI — frosted surfaces, mesh backdrop, specular edges
 */

body {
  background-color: var(--tv-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--tv-mesh-bg);
  background-color: var(--tv-bg);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: tv-mesh-drift 22s ease-in-out infinite alternate;
  }
}

@keyframes tv-mesh-drift {
  0% {
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg);
  }
  100% {
    transform: scale(1.04) translate(-1%, 1%);
    filter: hue-rotate(8deg);
  }
}

/* Shared glass surface */
.tv-glass {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border: 1px solid var(--tv-glass-border-outer);
  box-shadow: var(--tv-glass-shadow);
}

.tv-glass--strong {
  background: var(--tv-glass-bg-strong);
  box-shadow: var(--tv-glass-shadow-lg);
}

/* Header */
.tv-header {
  background: var(--tv-glass-bg-strong);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border-bottom-color: var(--tv-glass-border-outer);
  box-shadow: inset 0 1px 0 var(--tv-glass-highlight);
}

.tv-header.is-scrolled {
  box-shadow: var(--tv-glass-shadow-lg);
}

/* Theme switcher */
.tv-theme {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(16px) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: inset 0 1px 0 var(--tv-glass-highlight);
}

/* Ghost buttons */
.tv-btn--ghost {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(14px) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: inset 0 1px 0 var(--tv-glass-highlight);
}

.tv-btn--ghost:hover {
  background: var(--tv-glass-bg-strong);
  border-color: color-mix(in srgb, var(--tv-primary) 30%, var(--tv-glass-border-outer));
}

/* Primary button — glassy gradient shell */
.tv-btn--primary {
  border: 1px solid color-mix(in srgb, var(--tv-primary-foreground) 35%, transparent);
  box-shadow: var(--tv-shadow-primary), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

/* Cards */
.tv-card {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: var(--tv-glass-shadow);
}

.tv-card:hover {
  background: var(--tv-glass-bg-strong);
  box-shadow: var(--tv-glass-shadow-lg);
}

.tv-card__icon {
  background: color-mix(in srgb, var(--tv-glass-bg-strong) 80%, var(--tv-primary-soft));
  border-color: var(--tv-glass-border-outer);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Sections — let mesh show through */
.tv-section--alt {
  background: color-mix(in srgb, var(--tv-glass-bg-strong) 70%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-block-color: var(--tv-glass-border-outer);
}

.tv-section--muted {
  background: color-mix(in srgb, var(--tv-glass-bg) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tv-hero,
.tv-dl-hero {
  border-bottom-color: var(--tv-glass-border-outer);
}

.tv-glow {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(95, 109, 244, 0.25), transparent 55%),
    radial-gradient(ellipse 60% 45% at 85% 10%, rgba(139, 93, 222, 0.18), transparent 50%),
    radial-gradient(ellipse 80% 55% at 50% -15%, var(--tv-hero-glow), transparent);
}

/* Product mock */
.tv-mock {
  background: var(--tv-glass-bg-strong);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: var(--tv-glass-shadow-lg);
}

.tv-mock__nav,
.tv-mock__chat,
.tv-mock__side,
.tv-mock__result {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--tv-glass-border-outer);
}

.tv-mock__body {
  background: color-mix(in srgb, var(--tv-glass-bg) 50%, transparent);
}

/* Pricing */
.tv-price {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: var(--tv-glass-shadow);
}

.tv-price.is-featured {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--tv-primary-foreground) 25%, transparent);
}

/* Cards — ensure readable text on glass */
.tv-card h3 {
  color: var(--tv-text);
}

.tv-card p {
  color: var(--tv-text-muted);
}

/* Dark tinted glass panel (AI Apps, final CTA) */
.tv-panel {
  position: relative;
  overflow: hidden;
  background: var(--tv-panel-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-color: color-mix(in srgb, var(--tv-primary) 42%, rgba(255, 255, 255, 0.12));
  box-shadow: var(--tv-glass-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--tv-panel-fg);
}

.tv-panel .tv-eyebrow {
  color: var(--tv-primary-muted);
}

.tv-panel .tv-lead,
.tv-panel .tv-display,
.tv-panel h2,
.tv-panel h3 {
  color: var(--tv-panel-fg);
}

.tv-panel .tv-lead {
  color: var(--tv-panel-fg-muted);
}

.tv-panel .tv-card {
  background: var(--tv-panel-card-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-color: var(--tv-panel-card-border);
  color: var(--tv-panel-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tv-panel .tv-card h3 {
  color: var(--tv-panel-fg);
}

.tv-panel .tv-card p {
  color: var(--tv-panel-fg-muted);
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: pretty;
}

.tv-panel .tv-card:hover {
  background: color-mix(in srgb, var(--tv-panel-card-bg) 140%, rgba(255, 255, 255, 0.06));
  border-color: color-mix(in srgb, var(--tv-primary) 45%, var(--tv-panel-card-border));
}

/* Footer */
.tv-footer {
  background: color-mix(in srgb, var(--tv-glass-bg) 40%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top-color: var(--tv-glass-border-outer);
}

/* Download page */
.tv-dl-status {
  background: var(--tv-glass-bg-strong);
  backdrop-filter: blur(16px) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: inset 0 1px 0 var(--tv-glass-highlight);
}

.tv-dl-showcase {
  background: var(--tv-glass-bg-strong);
  backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  -webkit-backdrop-filter: blur(var(--tv-glass-blur)) saturate(var(--tv-glass-saturate));
  border-color: var(--tv-glass-border-outer);
  box-shadow: var(--tv-glass-shadow-lg);
}

.tv-dl-card:not(.tv-dl-card--featured):not(.tv-dl-card--note) {
  background: color-mix(in srgb, var(--tv-bg-elevated) 94%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: var(--tv-border);
  box-shadow: none;
}

.tv-dl-card:not(.tv-dl-card--featured):not(.tv-dl-card--note):hover {
  background: var(--tv-bg-elevated);
  border-color: var(--tv-border-strong);
  box-shadow: var(--tv-shadow-sm);
}

.tv-dl-card--featured {
  background: var(--tv-primary-gradient);
  color: var(--tv-primary-foreground);
  border-color: transparent;
  box-shadow: var(--tv-shadow-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tv-dl-card--featured:hover {
  background: var(--tv-primary-gradient);
  box-shadow: 0 16px 40px -10px rgba(95, 109, 244, 0.45);
}

.tv-dl-card--featured h3 {
  color: var(--tv-primary-foreground);
}

.tv-dl-card--featured .tv-dl-card__desc,
.tv-dl-card--featured .tv-dl-meta {
  color: color-mix(in srgb, var(--tv-primary-foreground) 85%, transparent);
}

.tv-dl-card--featured .tv-dl-card__icon {
  background: color-mix(in srgb, var(--tv-primary-foreground) 14%, transparent);
  border-color: color-mix(in srgb, var(--tv-primary-foreground) 28%, transparent);
  color: var(--tv-primary-foreground);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tv-dl-card--featured .tv-dl-pill-btn {
  background: color-mix(in srgb, var(--tv-primary-foreground) 18%, transparent);
  border-color: color-mix(in srgb, var(--tv-primary-foreground) 35%, transparent);
  color: var(--tv-primary-foreground);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tv-primary-foreground) 25%, transparent);
}

.tv-dl-card--featured .tv-dl-pill-btn:hover {
  background: color-mix(in srgb, var(--tv-primary-foreground) 28%, transparent);
  border-color: color-mix(in srgb, var(--tv-primary-foreground) 45%, transparent);
}

.tv-dl-card--note {
  background: color-mix(in srgb, var(--tv-bg-muted) 40%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--tv-border);
  box-shadow: none;
}

.tv-dl-card--note:hover {
  background: color-mix(in srgb, var(--tv-bg-muted) 55%, transparent);
  box-shadow: none;
}

.tv-dl-card--note .tv-dl-card__icon--sm {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tv-dl-card:not(.tv-dl-card--featured):not(.tv-dl-card--note) .tv-dl-card__icon {
  background: var(--tv-bg-muted);
  border-color: var(--tv-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tv-dl-pill-btn {
  background: var(--tv-glass-bg);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-color: var(--tv-glass-border-outer);
  box-shadow: inset 0 1px 0 var(--tv-glass-highlight);
  color: var(--tv-text);
}

/* Download showcase device chrome — tokens drive light/dark appearance */
[data-theme="dark"] .tv-dl-browser__dots span:nth-child(1),
[data-theme="midnight"] .tv-dl-browser__dots span:nth-child(1) {
  background: #ff5f57;
}

[data-theme="dark"] .tv-dl-browser__dots span:nth-child(2),
[data-theme="midnight"] .tv-dl-browser__dots span:nth-child(2) {
  background: #febc2e;
}

[data-theme="dark"] .tv-dl-browser__dots span:nth-child(3),
[data-theme="midnight"] .tv-dl-browser__dots span:nth-child(3) {
  background: #28c840;
}

.tv-dl-channel-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}