/* Full Deimos app, Cinema / Jellyfin-style chrome */
html[data-ui="cinema"] {
  --bg: #101010;
  --bg-elev: #141414;
  --bg-header: #202020;
  --bg-card: #141414;
  --border: #2a2a2a;
}
html[data-ui="cinema"] body { font-family: Noto Sans, Inter, system-ui, sans-serif; }
html[data-ui="cinema"] .header { height: 56px; background: #202020; border: 0; box-shadow: 0 2px 8px #0006; }
html[data-ui="cinema"] .layout { display: block; }
html[data-ui="cinema"] .sidebar {
  position: sticky; top: 56px; z-index: 15;
  width: auto; height: auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px; padding: 8px 20px; border: 0; background: #181818;
}
html[data-ui="cinema"] .nav-label { display: none; }
html[data-ui="cinema"] .nav-item { padding: 6px 10px; border-radius: 4px; }
html[data-ui="cinema"] .nav-item.active { background: #00a4dc22; color: #00a4dc; }
html[data-ui="cinema"] .main { padding: 20px 24px 48px; max-width: none; }
html[data-ui="cinema"] .grid {
  display: flex; flex-wrap: wrap; gap: 16px;
}
html[data-ui="cinema"] .card {
  width: 148px; background: transparent; border: 0; padding: 0;
}
html[data-ui="cinema"] .card .thumb {
  aspect-ratio: 2/3; height: auto; border-radius: 6px; overflow: hidden;
  box-shadow: 0 8px 18px #0007;
}
html[data-ui="cinema"] .card:hover .thumb { outline: 3px solid var(--green, #00a4dc); }
html[data-ui="cinema"] .card h3 { font-size: 14px; margin: 8px 0 0; }
html[data-ui="cinema"] .player-wrap { background: #000; border-radius: 8px; overflow: hidden; }
html[data-ui="cinema"] .btn-green { background: var(--green); }

html[data-home="tv"] .header .search-wrap,
html[data-home="tv"] .sidebar,
html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"] .layout { display: block; min-height: 100vh; }
html[data-home="tv"] .main { padding: 0; }
html[data-home="tv"] .header { background: transparent; box-shadow: none; position: absolute; width: 100%; }

.tv-home { position: relative; min-height: calc(100vh - 56px); overflow: hidden; background: #0a0610; }
.tv-comic {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, #3a1a0a66 0%, transparent 48%),
    linear-gradient(180deg, #050308 0%, #12080c 45%, #050308 100%);
  animation: none;
  filter: none;
}
.tv-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.12);
}
.tv-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 10%, #0008 70%, #000d 100%),
    linear-gradient(180deg, #0006 0%, transparent 28%, #000a 100%);
  pointer-events: none;
}
.tv-stage {
  position: relative; z-index: 2;
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 16px 64px;
}
.tv-mark {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 12px 40px #000a; margin-bottom: 12px;
}
.tv-stage h1 {
  margin: 0 0 8px; font-size: 34px; font-weight: 750; letter-spacing: .6px;
  color: #e8f4ff; text-shadow: 0 2px 18px #000c;
}
.tv-hint {
  margin: 0 0 24px; max-width: 520px; font-size: 13px; color: #b8c4d4;
  text-shadow: 0 1px 8px #000;
}
.tv-row {
  display: flex; flex-flow: row nowrap; gap: 12px;
  justify-content: center; align-items: center;
  overflow-x: auto; max-width: 100%; padding: 8px 4px 16px;
}
.tv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 148px; height: 52px; padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a1a1acc, #0c0c0ce6);
  border: 1px solid #ffffff14;
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 24px #0008, inset 0 1px 0 #fff2;
  backdrop-filter: blur(10px);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  font-weight: 650;
}
.tv-btn:hover, .tv-btn:focus {
  transform: translateY(-4px);
  outline: none;
  border-color: var(--green, #00a4dc);
  box-shadow: 0 16px 36px #000a, 0 0 0 1px var(--green, #00a4dc);
}
.tv-btn .icon {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  background: var(--green, #00a4dc);
}
.tv-btn.videos .icon { background: linear-gradient(135deg, #00a4dc, #005b9a); }
.tv-btn.gallery .icon { background: linear-gradient(135deg, #ff8a00, #ff3d6d); }
.tv-btn.live .icon { background: linear-gradient(135deg, #ff4d4d, #a10); }
.tv-btn.photos .icon { background: linear-gradient(135deg, #a78bfa, #6366f1); }
.tv-btn.license .icon { background: linear-gradient(135deg, #7bffb2, #00c2a8); }
.tv-btn.guide .icon { background: linear-gradient(135deg, #ffd76b, #ff7b00); }
.tv-btn .label { text-align: left; line-height: 1.05; }
.tv-btn .sub { display: block; font-size: 11px; color: #9aa3ad; font-weight: 500; margin-top: 3px; }
.beta-wrap { position: relative; display: inline-block; }
.beta-tag {
  position: absolute; top: 0; right: 6px; transform: translateY(-50%) rotate(10deg);
  background: linear-gradient(90deg, #ff6b6b, #ff3d3d); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 8px;
  box-shadow: 0 6px 12px #0007; z-index: 3; pointer-events: none;
}
@media (max-width: 720px) {
  .tv-stage h1 { font-size: 22px; }
  .tv-btn { min-width: 120px; height: 46px; }
}