/* TapLine Store — fidelity pass vs design-references 01–04 */
:root {
  --font: Onest, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bg: #f4f6fa;
  --bg2: #eef1f7;
  --panel: #ffffff;
  --panel-glass: rgba(255, 255, 255, 0.94);
  --sidebar: rgba(248, 250, 253, 0.96);
  --text: #1a2744;
  --muted: #7384a3;
  --line: rgba(70, 100, 160, 0.12);
  /* Calmer slate-blue — less neon than #3b82ff */
  --accent: #4a74d4;
  --accent2: #6b8fdc;
  --accent3: #6a6ab8;
  --glow: rgba(74, 116, 212, 0.22);
  --shadow: 0 12px 30px rgba(40, 60, 110, 0.08);
  --shadow-soft: 0 6px 16px rgba(20, 35, 70, 0.05);
  --radius: 18px;
  --radius-lg: 24px;
  /* App icons: rounded squares (Material-like), not circles */
  --icon-radius: 22%;
  --side-w: 236px;
  --nav-h: 72px;
  --nav-gap: 10px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: 220ms cubic-bezier(.22, .8, .28, 1);
  --focus: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--accent) 70%, #94a3b8), 0 0 14px var(--glow);
  --hero-day: url('/assets/img/hero-day.jpg');
  --hero-night: url('/assets/img/hero-night.jpg');
  --hero-m-day: url('/assets/img/hero-mobile-day.jpg');
  --hero-m-night: url('/assets/img/hero-mobile-night.jpg');
  font-family: var(--font);
}

[data-theme="dark"] {
  --bg: #06142b;
  --bg2: #041022;
  --panel: rgba(8, 24, 54, 0.78);
  --panel-glass: rgba(9, 28, 61, 0.78);
  --sidebar: rgba(5, 16, 36, 0.92);
  --text: #eef4ff;
  --muted: #9eb3da;
  --line: rgba(100, 149, 255, 0.16);
  --accent: #4da3ff;
  --accent2: #6bb4ff;
  --glow: rgba(40, 160, 255, 0.58);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.32);
  --focus: 0 0 0 2px #eaf4ff, 0 0 0 4px #4da3ff, 0 0 30px rgba(77, 163, 255, 0.75);
  --icon-radius: 22%;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html.theme-animating,
html.theme-animating body,
html.theme-animating .sidebar,
html.theme-animating .main,
html.theme-animating .store-footer,
html.theme-animating .bottom-nav,
html.theme-animating .app-card,
html.theme-animating .side-link,
html.theme-animating .icon-btn,
html.theme-animating .btn {
  transition:
    background-color 320ms ease,
    background 320ms ease,
    color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 88% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(760px 460px at -5% 105%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 72%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  overflow-x: hidden;
}
[data-theme="dark"] body {
  background:
    radial-gradient(920px 480px at 85% -12%, rgba(40, 90, 220, 0.22), transparent 68%),
    radial-gradient(780px 520px at 0% 110%, rgba(20, 70, 180, 0.24), transparent 70%),
    linear-gradient(165deg, #030a19 0%, #06152d 55%, #081a36 100%);
}
/* Soft starfield (dark only) */
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 12%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 41% 18%, rgba(200,230,255,.7), transparent),
    radial-gradient(1px 1px at 63% 28%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 91% 42%, rgba(180,210,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 15% 72%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 48% 66%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 72% 80%, rgba(200,230,255,.5), transparent),
    radial-gradient(1px 1px at 88% 68%, rgba(255,255,255,.45), transparent);
}
.app-shell { position: relative; z-index: 1; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.muted { color: var(--muted); }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.phone-only { display: none !important; }
.tv-only { display: none !important; }
.phone-chrome { display: grid; place-items: center; }

.app-shell { min-height: 100%; display: grid; grid-template-columns: 1fr; }
.sidebar { display: none; }
.main {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 14px calc(var(--nav-h) + var(--nav-gap) + var(--safe-b) + 20px);
}
#pageContent {
  flex: 1 0 auto;
  min-width: 0;
}

/* Brand + logo */
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 17px; letter-spacing: -.03em;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.brand b { color: var(--accent); font-weight: 800; }
.brand-logo {
  width: 40px; height: 40px; flex: 0 0 auto;
  object-fit: contain; display: block;
  /* Soft mark — old 6×14 / 28% glow was too heavy next to chips */
  filter: drop-shadow(0 2px 4px rgba(28, 69, 233, 0.14));
}
/* Top — stable grid: search slot | actions (pinned right) */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
  min-height: 48px;
  position: relative;
  z-index: 40;
}
.top-search-slot {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
  justify-self: end;
  margin-left: 0;
}
.icon-btn {
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-glass);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  flex: 0 0 auto;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn.avatar {
  padding: 0; overflow: hidden; border: 0;
  background: transparent;
  box-shadow: 0 8px 18px rgba(60, 90, 200, 0.28);
}
.avatar-orb {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 18%, transparent 42%),
    radial-gradient(circle at 70% 78%, rgba(40, 20, 120, .35), transparent 45%),
    linear-gradient(145deg, #7dd3fc 0%, #3b82f6 42%, #8b5cf6 78%, #6366f1 100%);
  box-shadow: inset 0 -6px 14px rgba(30, 40, 120, .28), inset 0 6px 10px rgba(255,255,255,.35);
}
.avatar-wrap { position: relative; flex: 0 0 auto; }
.profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 240px; max-width: min(300px, calc(100vw - 24px)); padding: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
  z-index: 80; display: grid; gap: 4px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.profile-menu[hidden] { display: none !important; }
.profile-guest-items {
  display: grid;
  grid-auto-flow: row;
  gap: 6px;
  width: 100%;
}
.profile-menu button,
.profile-menu-item {
  border: 0; background: transparent; text-align: left;
  padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14px;
  color: var(--text); cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  width: 100%;
}
.profile-menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.profile-item-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.profile-item-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.profile-item-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
.profile-item-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}
.profile-menu button:hover,
.profile-menu button.is-focused,
.profile-menu button:focus-visible,
.profile-menu-item:hover,
.profile-menu-item.is-focused,
.profile-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  outline: none;
}
.profile-menu-item:hover .profile-item-sub,
.profile-menu-item.is-focused .profile-item-sub,
.profile-menu-item:focus-visible .profile-item-sub {
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
.profile-menu-item:hover .profile-item-ico,
.profile-menu-item.is-focused .profile-item-ico,
.profile-menu-item:focus-visible .profile-item-ico {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.profile-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.profile-user {
  padding: 8px 12px 6px; font-size: 12px; font-weight: 700; color: var(--muted);
}
.profile-menu button.is-focused,
.profile-menu button:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.profile-menu button:not(:focus-visible):not(.is-focused):not(:hover) {
  color: var(--text);
}
.profile-menu button:not(.profile-menu-item):not(:focus-visible):not(.is-focused):not(:hover) {
  background: transparent;
}
#profileGuestItems[hidden],
#profileUserItems[hidden] { display: none !important; }
#btnTheme .theme-moon { display: none; }
html[data-theme="dark"] #btnTheme .theme-sun { display: none; }
html[data-theme="dark"] #btnTheme .theme-moon { display: block; }
.clock {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); min-width: 56px; text-align: right; font-size: 14px;
  flex: 0 0 auto;
}

/* ===== SEARCH FIELD ===== */
.search,
.top-search {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: visible;
  background: color-mix(in srgb, var(--panel) 88%, #e8f0ff);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    max-width 280ms cubic-bezier(.22, .8, .28, 1),
    opacity 220ms ease,
    padding 280ms cubic-bezier(.22, .8, .28, 1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}
[data-theme="dark"] .search,
[data-theme="dark"] .top-search {
  background: color-mix(in srgb, var(--panel) 92%, #071428);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.search { padding: 0 18px; height: 58px; margin-bottom: 14px; width: 100%; max-width: 100%; box-sizing: border-box; }
.search .search-ico,
.top-search .search-ico {
  width: 20px; height: 20px; color: #8a97b0; flex: 0 0 auto; pointer-events: none;
}
[data-theme="dark"] .search .search-ico,
[data-theme="dark"] .top-search .search-ico { color: #9eb6d8; }
.search input,
.top-search input {
  border: 0; outline: 0; background: transparent;
  /* flex: keep clear button inside the field on narrow screens */
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  max-width: 100%;
  color: var(--text); font-size: 15px; line-height: 1.3;
  padding: 0; height: 100%;
}
.search input::placeholder,
.top-search input::placeholder { color: var(--muted); opacity: .92; }
.search input[type="search"]::-webkit-search-decoration,
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-results-button,
.top-search input[type="search"]::-webkit-search-decoration,
.top-search input[type="search"]::-webkit-search-cancel-button,
.top-search input[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none; appearance: none; display: none;
}
.search:focus-within,
.top-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, #c5d4ea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-soft);
}
[data-theme="dark"] .search:focus-within,
[data-theme="dark"] .top-search:focus-within {
  border-color: rgba(80, 170, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(46, 140, 255, 0.22), 0 0 22px rgba(40, 140, 255, 0.28);
}

.search-mic,
.search-clear {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  margin-left: 4px;
  border: 0;
  border-radius: 999px;
  background: #e7eef8;
  color: #5f6f8c;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.search-mic svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.search-mic:hover,
.search-mic:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  transform: scale(1.06);
}
.search-mic.is-listening {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #ef4444;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
  animation: mic-pulse 1.1s ease-in-out infinite;
}
.search-mic[hidden] { display: none !important; }
.search-mic.is-focused,
.search-mic:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
[data-theme="dark"] .search-mic {
  color: #c5d6f0;
  background: rgba(120, 160, 220, 0.14);
}
[data-theme="dark"] .search-mic:hover,
[data-theme="dark"] .search-mic:focus-visible {
  background: rgba(46, 140, 255, 0.28);
  color: #eaf4ff;
}
[data-theme="dark"] .search-mic.is-listening {
  background: rgba(239, 68, 68, 0.22);
  color: #ff8b8b;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28);
}
@keyframes mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.search-clear svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2.1; stroke-linecap: round;
  pointer-events: none;
}
.search-clear:hover,
.search-clear:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  transform: scale(1.06);
}
[data-theme="dark"] .search-clear {
  color: #c5d6f0;
  background: rgba(120, 160, 220, 0.14);
}
[data-theme="dark"] .search-clear:hover,
[data-theme="dark"] .search-clear:focus-visible {
  background: rgba(46, 140, 255, 0.28);
  color: #eaf4ff;
}
.search-clear.is-focused,
.search-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.search-clear[hidden] { display: none !important; }
.search-clear:not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* TV expandable top search — fills LEFT slot only; actions stay pinned */
.top-search {
  width: 100%;
  max-width: 0;
  height: 56px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
  flex: 1 1 auto;
}
.topbar.is-search-open .top-search {
  max-width: 100%;
  opacity: 1;
  pointer-events: auto;
  padding: 0 16px;
  border-width: 1px;
  overflow: visible;
}
/* Keep search button space so avatar/theme/clock never shift */
.topbar.is-search-open #btnTopSearch {
  visibility: hidden;
  pointer-events: none;
}

/* ===== HERO ===== */
.hero-wrap { position: relative; margin-bottom: 16px; }
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 200px;
  aspect-ratio: 2 / 1;
  max-height: 280px;
  /* Extra side inset so copy/arrows aren't flush to the carousel edge */
  padding: 22px 56px 26px 56px;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.05) inset;
  background:
    linear-gradient(100deg, rgba(8, 28, 64, .82) 0%, rgba(12, 40, 80, .48) 34%, rgba(8, 30, 60, .16) 58%, rgba(255,255,255,.02) 100%),
    var(--hero-m-day) 62% center / cover no-repeat;
  cursor: pointer;
  scroll-margin: 20px;
  transition: box-shadow var(--ease);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Stable layer while the page scrolls — reduces week-carousel jank on phones */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero.is-swiping .hero-copy,
.hero.is-swiping .hero-icon { pointer-events: none; }
.hero .hero-copy,
.hero .hero-icon,
.hero .dots {
  transition:
    opacity 340ms cubic-bezier(.22, .8, .28, 1),
    transform 340ms cubic-bezier(.22, .8, .28, 1);
  will-change: opacity, transform;
}
/* Slide + fade out / in — feels like a carousel scroll, not a title flash */
.hero.is-hero-out-next .hero-copy,
.hero.is-hero-out-next .hero-icon {
  opacity: 0;
  transform: translateX(-36px);
}
.hero.is-hero-out-next .hero-icon {
  transform: translateY(-54%) translateX(-36px);
}
.hero.is-hero-out-prev .hero-copy,
.hero.is-hero-out-prev .hero-icon {
  opacity: 0;
  transform: translateX(36px);
}
.hero.is-hero-out-prev .hero-icon {
  transform: translateY(-54%) translateX(36px);
}
.hero.is-hero-prep-next .hero-copy,
.hero.is-hero-prep-next .hero-icon {
  opacity: 0;
  transform: translateX(36px);
  transition: none;
}
.hero.is-hero-prep-next .hero-icon {
  transform: translateY(-54%) translateX(36px);
}
.hero.is-hero-prep-prev .hero-copy,
.hero.is-hero-prep-prev .hero-icon {
  opacity: 0;
  transform: translateX(-36px);
  transition: none;
}
.hero.is-hero-prep-prev .hero-icon {
  transform: translateY(-54%) translateX(-36px);
}
.hero.is-hero-out-next .dots,
.hero.is-hero-out-prev .dots,
.hero.is-hero-prep-next .dots,
.hero.is-hero-prep-prev .dots {
  opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-copy,
  .hero .hero-icon,
  .hero .dots {
    transition: none !important;
  }
}
[data-theme="dark"] .hero {
  background:
    linear-gradient(100deg, rgba(2, 8, 20, .88) 0%, rgba(4, 16, 36, .58) 40%, rgba(3, 12, 28, .24) 100%),
    var(--hero-m-night) 62% center / cover no-repeat;
  box-shadow: var(--shadow), 0 0 40px rgba(46, 120, 255, 0.18);
}
.hero.has-custom-banner { background-size: cover !important; background-position: center !important; }
.hero-shade { display: none; }
.hero-copy { position: relative; z-index: 2; max-width: 56%; margin-left: 4px; }
.eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: #c5dcff; margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.hero h2 {
  margin: 0; font-size: clamp(26px, 7vw, 34px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero p {
  margin: 6px 0 12px; font-size: 13px; line-height: 1.4; opacity: .94;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero-icon {
  position: absolute; right: 56px; top: 50%; transform: translateY(-54%);
  width: 96px; height: 96px; border-radius: var(--icon-radius, 22%); object-fit: cover;
  z-index: 2; background: #0b1220;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 40%, transparent);
}
.dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1; display: flex; gap: 6px; }
.dots span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.35); transition: width var(--ease), background var(--ease); }
.dots span.on { width: 18px; background: #fff; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-glass); color: var(--text);
  font-size: 28px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  transition: transform var(--ease);
}
.hero-arrow:hover { transform: translateY(-50%) scale(1.05); }
.hero-arrow.left { left: 28px; }
.hero-arrow.right { right: 28px; }

/* Chips — padded scroller so active glow is never clipped */
.chips {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 14px;
  padding: 10px 4px 14px;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border: 1.5px solid var(--line);
  background: var(--panel-glass);
  color: var(--text);
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  transform: none;
}
.chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not(.active) { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 16%, transparent); }
}

.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 2px 0 10px;
}
.section-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }

/* Apps catalog: category chips + sort */
.apps-head {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.apps-head h3 {
  flex: 1 1 auto;
  min-width: 0;
}
.apps-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.apps-sort-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted, var(--subtext));
  white-space: nowrap;
}
.apps-sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--line);
  background: var(--panel-glass, var(--panel))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23889' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--text);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 34px 0 14px;
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  max-width: min(220px, 58vw);
}
.apps-sort-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.apps-chips {
  margin-top: 2px;
  margin-bottom: 10px;
}
body.is-tv .apps-sort-label { font-size: 13px; }
body.is-tv .apps-sort-select {
  min-height: 46px;
  font-size: 15px;
  padding-right: 38px;
}
@media (max-width: 520px) {
  .apps-head { align-items: stretch; }
  .apps-sort { width: 100%; justify-content: space-between; }
  .apps-sort-select { flex: 1 1 auto; max-width: none; }
}
.see-all {
  border: 0; background: transparent; color: var(--accent);
  font-weight: 700; font-size: 13px; padding: 4px 0;
  transition: opacity var(--ease);
}
.see-all:hover { opacity: 0.8; }
.row-block { margin-bottom: 16px; }
.h-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Web: keep first card off the left edge while paging */
  padding: 10px 14px 16px;
  scroll-padding-inline: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { touch-action: manipulation; }

/* Phone vertical cards */
.card-v {
  flex: 0 0 156px;
  scroll-snap-align: start;
  background: var(--panel-glass);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 6px;
  scroll-margin: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  cursor: pointer;
}
.card-v:hover { transform: translateY(-3px); }
.card-v img {
  width: 72px; height: 72px; border-radius: var(--icon-radius, 22%); object-fit: cover;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.card-v .t { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-v .d {
  color: var(--muted); font-size: 12px; line-height: 1.35; min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-v .m { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.card-v .m .star { color: #f5b301; }
.card-v .btn { margin-top: auto; width: 100%; }

/* Phone recommend rows */
.list-stack { display: grid; gap: 10px; }
.list-row {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center;
  background: var(--panel-glass); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow-soft);
  scroll-margin: 16px;
  backdrop-filter: blur(12px);
  transition: transform var(--ease), box-shadow var(--ease);
  cursor: pointer;
}
.list-row:hover { transform: translateY(-2px); }
.list-row img { width: 58px; height: 58px; border-radius: var(--icon-radius, 22%); object-fit: cover; }
.list-row .info { min-width: 0; }
.list-row .t { font-weight: 800; font-size: 14px; }
.list-row .d { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tag {
  font-size: 11px; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px; padding: 2px 8px;
}

/* TV compact horizontal cards */
.app-card {
  position: relative;
  flex: 0 0 210px;
  scroll-snap-align: start;
  background: var(--panel-glass);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 11px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 10px; row-gap: 4px;
  align-items: start;
  min-height: 118px;
  scroll-margin: 24px;
  box-sizing: border-box;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
  will-change: transform;
  outline: none;
  cursor: pointer;
}
.app-card:hover,
.app-card.is-focused,
.app-card:focus-visible { cursor: pointer; }
.app-card:hover { transform: translateY(-3px); }
body.is-tv .app-card:hover { transform: none; }
.app-card img {
  width: 54px; height: 54px; border-radius: var(--icon-radius, 22%); object-fit: cover;
  grid-row: 1 / span 2;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.app-card .card-title {
  font-weight: 800; font-size: 13.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-card .card-desc {
  color: var(--muted); font-size: 11.5px; line-height: 1.3; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.app-card .card-meta {
  grid-column: 1 / -1;
  color: var(--muted); font-size: 11.5px;
  display: flex; align-items: center; gap: 4px;
}
.app-card .card-meta .star { color: #f5b301; }
.app-card .btn {
  grid-column: 1 / -1;
  width: auto; justify-self: start;
  padding: 6px 14px; font-size: 12px;
  margin-top: 2px;
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding-bottom: 20px;
}

/* Settings */
.settings-stack,
.settings-panel {
  display: grid;
  gap: 14px;
  max-width: 760px;
  width: min(760px, 100%);
  padding: 6px 4px 28px;
}
/* Must beat .settings-stack { display:grid } or hub never hides on PC */
.settings-stack[hidden],
.settings-panel[hidden],
.settings-back[hidden] {
  display: none !important;
}
#settingsHead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-back {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.settings-group {
  display: grid;
  gap: 0;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.settings-block-head {
  display: grid;
  gap: 4px;
  padding: 14px 16px 8px;
}
.settings-block-head strong { font-size: 15px; }
.settings-block-head span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 160ms ease;
}
.settings-group > .settings-row:last-child,
.settings-group > .settings-toggle-row:last-child { border-bottom: 0; }
.settings-row:hover,
.settings-row.is-focused,
.settings-row:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: none !important; /* never outer TV ring — looked crooked in groups */
}
/* Keep focus fill inside rounded group — no crooked inset ring */
.settings-group > .settings-row:first-child.is-focused,
.settings-group > .settings-row:first-child:focus-visible,
.settings-group > .settings-row:first-child:hover {
  border-radius: 16px 16px 0 0;
}
.settings-group > .settings-row:last-child.is-focused,
.settings-group > .settings-row:last-child:focus-visible,
.settings-group > .settings-row:last-child:hover {
  border-radius: 0 0 16px 16px;
}
.settings-group > .settings-row:only-child.is-focused,
.settings-group > .settings-row:only-child:focus-visible,
.settings-group > .settings-row:only-child:hover {
  border-radius: 16px;
}
.settings-row-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.settings-row-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.settings-row-title {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}
.settings-row-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}
.settings-toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.settings-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-switch {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  position: relative;
  flex: 0 0 auto;
  transition: background 160ms ease;
}
.settings-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform 160ms ease;
}
.settings-toggle-row input:checked + .settings-switch {
  background: var(--accent);
}
.settings-toggle-row input:checked + .settings-switch::after {
  transform: translateX(18px);
}
.settings-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  flex: 0 0 auto;
  position: relative;
}
.settings-radio.is-on {
  border-color: var(--accent);
}
.settings-radio.is-on::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.settings-security {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 20px;
}
.settings-security-badge { font-size: 42px; line-height: 1; }
.settings-security-brand {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: lowercase;
}
.settings-security h4 { margin: 4px 0 0; font-size: 20px; max-width: 22ch; }
.settings-security .btn { margin-top: 8px; min-width: 180px; }
.settings-security-list {
  width: 100%;
  margin-top: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.settings-security-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 650;
}
.settings-about {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 20px;
}
.settings-about h4 { margin: 0; font-size: 22px; }
body.is-tv .settings-row,
body.is-tv .settings-toggle-row {
  min-height: 64px;
  padding: 16px 18px;
}

/* TV: settings match content width (same as search / footer) */
body.is-tv .settings-stack,
body.is-tv .settings-panel {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
/* About page fills the main column — no empty strip under a short card */
body.is-tv #viewSettings.view.active {
  display: block;
  width: 100%;
}
body.is-tv #settingsPanel-about:not([hidden]) {
  display: block;
  max-width: none;
  width: 100%;
  padding-bottom: 16px;
}
body.is-tv .settings-about {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo title"
    "logo ver"
    "logo desc"
    "links links";
  justify-items: start;
  align-items: center;
  align-content: center;
  text-align: left;
  column-gap: 40px;
  row-gap: 12px;
  padding: 48px 52px;
  min-height: min(420px, 55vh);
  border-radius: 24px;
}
body.is-tv .settings-about > img {
  grid-area: logo;
  width: 96px;
  height: 96px;
  padding: 14px;
  box-sizing: content-box;
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border: 1px solid var(--line);
  align-self: center;
  justify-self: center;
}
body.is-tv .settings-about > h4 {
  grid-area: title;
  font-size: 30px;
  margin: 0;
}
body.is-tv .settings-about > #settingsAboutVersion {
  grid-area: ver;
  font-size: 16px;
  margin: 0;
}
body.is-tv .settings-about > p.tiny {
  grid-area: desc;
  font-size: 16px;
  line-height: 1.5;
  max-width: none;
  margin: 0;
}
body.is-tv .settings-about > .store-footer-links {
  grid-area: links;
  display: flex;
  margin-top: 18px;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
body.is-tv .settings-about .store-footer-links a {
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
body.is-tv .settings-security {
  width: 100%;
  box-sizing: border-box;
  padding: 36px 40px;
  border-radius: 24px;
  max-width: none;
}
body.is-tv .settings-row.is-focused,
body.is-tv .settings-row:focus-visible,
body.is-tv .settings-toggle-row:focus-within {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: none;
  border-color: var(--line);
  border-bottom-color: var(--line);
}
body.is-tv .settings-group > .settings-row:last-child.is-focused,
body.is-tv .settings-group > .settings-row:last-child:focus-visible {
  border-bottom-color: transparent;
}

/* Buttons */
.btn {
  border: 0; border-radius: 999px; padding: 9px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn.update {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}
.btn.open {
  /* Same solid accent as Install — Open must not look like a secondary/ghost CTA */
  background: linear-gradient(135deg, var(--accent), var(--accent2, #5b9dff));
  color: #fff;
  border: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn.ghost {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: none; padding: 8px 14px;
}
.btn.block { width: 100%; padding: 13px 16px; font-size: 15px; }

/* Focus / TV remote — single ring, no scale (avoids double/misaligned outline) */
.is-focused, :focus-visible { outline: none; }
.side-link.is-focused, .side-link:focus-visible, .side-link.active,
.nav-item.is-focused, .btn.is-focused,
.icon-btn:focus-visible, .hero:focus-visible, .hero-arrow:focus-visible,
.btn:focus-visible, .nav-item:focus-visible, .see-all:focus-visible {
  box-shadow: var(--focus);
  border-color: var(--accent);
}
.chip.is-focused:not(.active),
.chip:focus-visible:not(.active) {
  box-shadow: var(--focus);
  border-color: var(--accent);
}
.chip.active.is-focused,
.chip.active:focus-visible {
  /* Keep the active pill shape — no second outer ring that clips in the scroller */
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent);
}
.card-v.is-focused, .card-v:focus-visible,
.list-row.is-focused, .list-row:focus-visible,
.app-card.is-focused, .app-card:focus-visible {
  z-index: 3;
  border-color: transparent;
  transform: none; /* no lift — on TV it looked like the selection “jumped” */
  box-shadow:
    0 0 0 3px var(--accent),
    0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
body.is-phone .card-v.is-focused,
body.is-phone .list-row.is-focused,
body.is-phone .app-card.is-focused,
body.is-phone .card-v:focus-visible,
body.is-phone .list-row:focus-visible,
body.is-phone .app-card:focus-visible {
  transform: translateY(-3px);
}
[data-theme="dark"] .app-card.is-focused,
[data-theme="dark"] .app-card:focus-visible,
[data-theme="dark"] .card-v.is-focused,
[data-theme="dark"] .card-v:focus-visible {
  box-shadow:
    0 0 0 3px #3b8cff,
    0 0 22px rgba(59, 140, 255, .55),
    0 12px 30px rgba(0, 0, 0, .35);
}
/* Mouse hover on PC = same ring as the focused card (not on TV remotes / touch). */
@media (hover: hover) and (pointer: fine) {
  body:not(.is-tv) .app-card:hover,
  body:not(.is-tv) .card-v:hover {
    z-index: 3;
    border-color: transparent;
    box-shadow:
      0 0 0 3px var(--accent),
      0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  [data-theme="dark"] body:not(.is-tv) .app-card:hover,
  [data-theme="dark"] body:not(.is-tv) .card-v:hover {
    box-shadow:
      0 0 0 3px #3b8cff,
      0 0 22px rgba(59, 140, 255, .55),
      0 12px 30px rgba(0, 0, 0, .35);
  }
}

/* Views — light fade only (no absolute leave / no layout jump) */
.page-content {
  position: relative;
  min-height: 40vh;
}
.view { display: none; }
.view.active {
  display: block;
  animation: viewFadeIn 220ms ease both;
}
.page-content.is-switching .view.active {
  animation: viewFadeIn 220ms ease both;
}
@keyframes viewFadeIn {
  from { opacity: 0.72; }
  to { opacity: 1; }
}
@keyframes contentIn {
  from { opacity: 0.72; }
  to { opacity: 1; }
}
body.is-page-leaving {
  opacity: 0.86;
  transition: opacity 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .view.active,
  .page-content.is-switching .view.active {
    animation: none !important;
  }
  body.is-page-leaving { transition: none; opacity: 1; }
}
.skeleton-screen {
  display: grid; gap: 16px; padding: 4px 0 20px;
}
.skeleton-screen[hidden] { display: none !important; }
html.is-booting .page-content > .view { display: none !important; }
html.is-booting .skeleton-screen[hidden] { display: grid !important; }
html.is-booting #clock { visibility: hidden; }
.sk {
  border-radius: 16px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 8%, #e8f1ff) 0%,
    color-mix(in srgb, var(--accent) 16%, #f7fbff) 50%,
    color-mix(in srgb, var(--accent) 8%, #e8f1ff) 100%);
  background-size: 200% 100%;
  animation: skShine 1.2s ease infinite;
}
[data-theme="dark"] .sk {
  background: linear-gradient(90deg,
    rgba(20, 40, 80, .9) 0%,
    rgba(40, 70, 130, .75) 50%,
    rgba(20, 40, 80, .9) 100%);
  background-size: 200% 100%;
}
@keyframes skShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.sk-hero { height: 200px; border-radius: 22px; }
.sk-row { display: flex; gap: 12px; overflow: hidden; }
.sk-card { flex: 0 0 210px; height: 118px; }

/* Detail */
.detail-hero {
  position: relative;
  background:
    radial-gradient(500px 220px at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--panel-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* While ⋯ menu is open, don't clip the dropdown under the poster/icon */
.detail-hero:has(#appMoreMenu:not([hidden])) {
  overflow: visible;
}
/* Variant 1 — poster with left→right gradient darken */
.detail-hero.has-poster {
  border-color: transparent;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: #071428;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
/* Scrim on its own layer — WebView-safe (inline multi-bg often drops the gradient) */
.detail-hero.has-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      100deg,
      rgba(2, 8, 20, 0.94) 0%,
      rgba(3, 10, 24, 0.88) 22%,
      rgba(4, 14, 30, 0.62) 48%,
      rgba(5, 16, 34, 0.28) 72%,
      rgba(5, 16, 34, 0.06) 88%,
      transparent 100%
    );
}
.detail-hero.has-poster > * {
  position: relative;
  z-index: 1;
}
/* Toolbar (+ ⋯ menu) must sit above poster/icon block, otherwise menu paints under it */
.detail-hero > .detail-toolbar,
.detail-hero.has-poster > .detail-toolbar {
  z-index: 6;
}
.detail-hero.has-poster .detail-head h2,
.detail-hero.has-poster #dTitle {
  color: #fff;
}
.detail-hero.has-poster #dSub,
.detail-hero.has-poster #dMetaLine,
.detail-hero.has-poster .install-hint,
.detail-hero.has-poster .muted {
  color: rgba(232, 240, 255, 0.82) !important;
}
.detail-hero.has-poster .detail-back,
.detail-hero.has-poster .detail-fav-btn,
.detail-hero.has-poster #btnAppMore {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail-hero.has-poster .detail-fav-btn .share-ico {
  color: #fff;
}
.detail-hero.has-poster .detail-fav-btn.is-fav .share-ico {
  color: #fb7185;
  fill: rgba(251, 113, 133, 0.35);
  stroke: #fb7185;
}
.detail-hero.has-poster .btn-share {
  background: rgba(14, 28, 52, 0.72) !important;
  color: #eef5ff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.detail-hero.has-poster .btn-share .share-ico {
  color: #cfe3ff;
}
.detail-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.detail-back { margin: 0; }
.detail-toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.detail-more-wrap {
  position: relative;
  z-index: 8;
}
.detail-more-menu {
  right: 0;
  left: auto;
  z-index: 120;
  /* Keep menu readable on dark poster */
  background: var(--panel) !important;
  color: var(--text);
}
.detail-fav-btn .share-ico {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  color: var(--accent);
}
.detail-fav-btn.is-fav .share-ico {
  color: #e11d48;
  fill: rgba(225, 29, 72, .28);
  stroke: #e11d48;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.detail-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "cta cta"
    "sec sec"
    "manage manage";
  gap: 10px 14px;
  align-items: start;
  margin-bottom: 14px;
}
.detail-head > img,
.detail-head > #dIcon { grid-area: icon; }
.detail-head-copy { grid-area: copy; min-width: 0; display: grid; gap: 6px; justify-items: start; }
/* CTA always full width under icon+title */
.detail-head > .detail-cta-row,
.detail-head .detail-cta-row {
  grid-area: cta;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}
.detail-head > .detail-cta-secondary,
.detail-head #dCtaSecondary {
  grid-area: sec;
  grid-column: 1 / -1;
}
.detail-head > .detail-manage,
.detail-head #dManage {
  grid-area: manage;
  grid-column: 1 / -1;
}
.detail-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.detail-cta-secondary .install-hint,
.detail-cta-secondary .detail-cta-meta {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12.5px;
  line-height: 1.35;
  overflow: visible;
  white-space: normal;
}
.btn-share-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-share-mini .share-ico {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.btn-share-mini:hover, .btn-share-mini.is-focused, .btn-share-mini:focus-visible {
  outline: none; filter: brightness(1.08);
}
.detail-hero.has-poster .btn-share-mini { color: #9fd0ff; }
.detail-hero.has-poster .detail-cta-secondary .install-hint { color: rgba(220, 235, 255, .88); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.detail-meta-line { font-size: 13px; line-height: 1.35; }
.compat-devices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.compat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-soft);
}
.compat-chip .compat-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-theme="dark"] .compat-chip {
  background: color-mix(in srgb, var(--accent) 14%, #0c1e3d);
  border-color: rgba(70, 150, 255, 0.32);
}
.detail-cta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  justify-self: stretch;
}
.detail-cta-row > .btn-cta,
.detail-cta-row > .btn-share {
  min-width: 0;
  width: 100% !important;
  max-width: none;
  min-height: 50px;
  height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px !important;
  border-radius: 15px !important;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
/* Primary actions only: Install/Update + Open — equal columns, one row */
.detail-cta-row > #dInstall { grid-column: 1; grid-row: 1; }
.detail-cta-row > #dOpen:not([hidden]) { grid-column: 2; grid-row: 1; }
.detail-cta-row:not(.has-open) { grid-template-columns: 1fr; }
.detail-cta-row:not(.has-open) > #dInstall { grid-column: 1 / -1; }
.detail-cta-row.has-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.btn-cta {
  background: linear-gradient(135deg, #3f6ec4 0%, #5482d0 55%, #6a93d8 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(55, 90, 160, 0.22) !important;
  justify-self: stretch;
}
.btn-cta.open {
  /* Match Install / primary CTA — solid blue, white label */
  background: linear-gradient(135deg, #3f6ec4 0%, #5482d0 55%, #6a93d8 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(55, 90, 160, 0.22) !important;
}
.btn-cta.update {
  background: linear-gradient(135deg, #3d7ab8, #3f6ec4) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(55, 90, 160, 0.22) !important;
}
.btn-share {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-share:hover,
.btn-share.is-focused,
.btn-share:focus-visible,
.btn-cta:hover,
.btn-cta.is-focused,
.btn-cta:focus-visible {
  filter: brightness(1.03);
  /* Soft outline — no neon double-ring glow */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
    0 6px 14px rgba(55, 90, 160, 0.16) !important;
}
.btn-cta.open:hover,
.btn-cta.open.is-focused,
.btn-cta.open:focus-visible {
  filter: brightness(1.03);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
    0 6px 14px rgba(55, 90, 160, 0.16) !important;
}
.btn-share .share-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}
.btn-share > span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  min-width: 0;
}
.install-hint { font-size: 12px; margin-top: 2px; }
.share-modal { z-index: 220; }
.share-card {
  width: min(420px, calc(100vw - 28px));
  gap: 12px;
}
.share-card h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.share-sub { margin: 0; font-size: 14px; }
.share-link-label { font-size: 13px; font-weight: 650; color: var(--muted); }
.share-link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.share-link-row input {
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 11px 12px;
  font-size: 13px;
}
.share-copied {
  margin: 0;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
}
.share-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 0 4px;
}
.share-qr-wrap[hidden] { display: none !important; }
.share-qr-wrap img {
  width: 168px;
  height: 168px;
  border-radius: 16px;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line);
  object-fit: contain;
}
[data-theme="dark"] .btn-share {
  background:
    linear-gradient(145deg, #0b1f42 0%, #091830 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}
[data-theme="dark"] .btn-share:hover,
[data-theme="dark"] .btn-share.is-focused,
[data-theme="dark"] .btn-share:focus-visible {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #2e7bff 28%, #0c2248),
      color-mix(in srgb, #1ac0ff 14%, #081830)) !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-share .share-ico { color: #7dd3fc; }
[data-theme="dark"] .btn-cta.open {
  color: #fff !important;
  background: linear-gradient(135deg, #3f6ec4 0%, #5482d0 55%, #6a93d8 100%) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(55, 90, 160, 0.28) !important;
}
[data-theme="dark"] .updates-badge {
  border-color: #0b1a33;
  background: linear-gradient(135deg, #3b82f6, #7c5cff);
}

/* ===== Reviews / rating card ===== */
.reviews-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.10);
  margin-bottom: 20px;
}
.reviews-card > h3 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: -.02em;
}
.reviews-grid {
  display: grid;
  gap: 16px;
}
.reviews-summary { min-width: 0; }
.reviews-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviews-score {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
  min-width: 1.6ch;
}
.reviews-summary-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.reviews-count {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.star-display {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
}
.star-display .star-ico-wrap {
  display: grid;
  place-items: center;
  line-height: 0;
}
.star-display .star-ico {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  max-height: 18px;
  flex: none !important;
  stroke: none !important;
  fill: color-mix(in srgb, var(--muted) 50%, transparent) !important;
}
.star-display .star-ico-wrap.on .star-ico {
  fill: #ffb300 !important;
}
.reviews-bars {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  max-width: 320px;
}
.reviews-bar {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: center;
}
.reviews-bar > span {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.reviews-bar .bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.reviews-bar .bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb300, #ffcc33);
  transition: width 220ms ease;
}
.reviews-divider {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}
.reviews-user h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 750;
}
.rate-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 100%;
}
.star-btn {
  --star-size: 28px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  border-radius: 12px;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}
.star-btn .star-ico {
  width: var(--star-size);
  height: var(--star-size);
  max-width: var(--star-size);
  max-height: var(--star-size);
  display: block;
  stroke: none !important;
  fill: currentColor !important;
  flex: none !important;
  pointer-events: none;
}
.star-btn.on,
.star-btn.is-preview {
  color: #ffb300;
}
.star-btn:hover {
  transform: scale(1.08);
  color: #ffb300;
}
.star-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.star-btn:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}
.reviews-user-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  min-height: 1.3em;
}
.rate-status {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
  text-align: left;
  width: 100%;
}
.rate-guest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
}
.rate-guest-actions[hidden] { display: none !important; }
.rate-login-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  min-height: 40px;
}
.rate-register-link {
  padding: 0 !important;
  font-size: 13px;
}
.rate-edit {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}
.rate-edit:hover { text-decoration: underline; }
.rate-edit:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.rate-confirm {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-glass));
  display: grid;
  gap: 10px;
}
.rate-confirm[hidden] { display: none !important; }
.rate-confirm-text {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
.rate-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rate-confirm-actions .btn {
  padding: 8px 14px;
  font-size: 13px;
}
.rate-thanks {
  margin: 10px 0 0;
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
}
.rate-thanks[hidden] { display: none !important; }
[data-theme="dark"] .rate-thanks { color: #4ade80; }

[data-theme="dark"] .reviews-card {
  background: #0c1e3d;
  border-color: rgba(70, 150, 255, 0.28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .star-btn,
  .star-btn:hover,
  .reviews-bar .bar > i {
    transition: none !important;
    transform: none !important;
  }
}

@media (min-width: 900px) {
  .reviews-card { padding: 22px 24px; border-radius: 24px; }
  .reviews-grid {
    grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  .reviews-divider {
    width: 1px;
    height: 100%;
    min-height: 120px;
    margin: 0;
    align-self: stretch;
  }
  .reviews-score { font-size: 52px; }
  .star-display .star-ico { width: 20px; height: 20px; }
  .reviews-bars { display: grid; margin-top: 16px; }
  .star-btn { --star-size: 30px; gap: 0; }
  .rate-row { gap: 6px; }
}
.danger-item { color: #e11d48 !important; }
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(6, 14, 32, .52);
  display: grid;
  place-items: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: modalFade .18s ease;
}
/* Hide phone bottom nav while any modal is open — it lives outside .app-shell */
body.modal-open .bottom-nav.phone-only {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Soft keyboard open: keep bottom nav off-screen (do not ride up with IME / adjustResize) */
body.is-phone.kb-open .bottom-nav.phone-only {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate3d(0, 140%, 0) !important;
}
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
  margin: auto;
  animation: modalPop .2s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.auth-card { gap: 0; padding: 22px; max-width: 100%; }
.auth-panel { display: grid; gap: 12px; }
.auth-panel[hidden] { display: none !important; }
.auth-card h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.auth-sub { margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.auth-social {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.auth-social-label {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
}
.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  box-shadow: var(--shadow-soft);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.auth-google-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.auth-google-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.auth-google-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: none;
}
[data-theme="dark"] .auth-google-btn {
  background: #fff;
  color: #111827;
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.auth-terms {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.auth-terms input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.auth-terms a {
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-terms a:hover { color: var(--accent2); }
.auth-field {
  display: grid; gap: 6px;
  font-weight: 650; font-size: 13px; color: var(--text);
}
.auth-field input,
.modal-card input {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--panel) 88%, #fff);
  color: var(--text);
  width: 100%;
  font: inherit;
}
.auth-field input:focus,
.modal-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-pass-wrap {
  position: relative;
  display: block;
}
.auth-pass-wrap input { padding-right: 44px; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
}
.auth-eye:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap;
}
.auth-switch {
  margin: 4px 0 0; text-align: center; color: var(--muted); font-size: 13px;
}
.auth-switch-btn {
  border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0;
}
.auth-switch-btn:hover { text-decoration: underline; }
[data-theme="dark"] .auth-card {
  background: #0c1e3d;
  border-color: rgba(70, 150, 255, 0.28);
}
.err {
  color: #e11d48;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  min-height: 1.2em;
}
.err[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card { animation: none !important; }
}
.detail-head img {
  width: 92px; height: 92px; border-radius: var(--icon-radius, 22%); object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.detail-head img.is-zoomable {
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.detail-head img.is-zoomable:hover,
.detail-head img.is-zoomable:focus-visible {
  transform: scale(1.04);
  box-shadow: var(--focus);
  outline: none;
}
.detail-head h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
/* Detail stats: one row of compact cards, outline icon left of value + caption */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel-glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.stat-ico {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: #2f6bff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-ico-text { fill: #2f6bff; stroke: none; font-family: Onest, Inter, system-ui, sans-serif; font-weight: 750; }
.stat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .stat-ico { stroke: #60a5fa; }
[data-theme="dark"] .stat-ico-text { fill: #60a5fa; }
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* «⋯» on the app page: available to everyone, admin items appended for editors */
.detail-more-btn .more-ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.detail-more-menu { min-width: 232px; }
.detail-more-menu > button { display: flex; align-items: center; gap: 10px; }
.detail-more-menu > [hidden] { display: none !important; }
.detail-more-menu .menu-ico {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}
.detail-section { margin-bottom: 20px; }
.detail-section h3 { margin: 0 0 10px; font-size: 17px; }
.desc-block {
  color: var(--muted); line-height: 1.55; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.desc-block.expanded { display: block; -webkit-line-clamp: unset; }
.link-more {
  border: 0; background: transparent; color: var(--accent);
  font-weight: 700; padding: 8px 0 0; font-size: 13px;
}
.screens {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.screens::-webkit-scrollbar { height: 6px; }
.screens::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px;
}
.screens .shot-btn-wrap {
  border: 0; padding: 0; background: transparent; cursor: zoom-in;
  border-radius: 16px; flex: 0 0 auto; scroll-snap-align: start;
}
.screens .shot-btn-wrap:focus-visible {
  outline: none; box-shadow: var(--focus);
}
.screens .shot-btn-wrap img {
  display: block;
  height: 190px; width: auto; max-width: min(420px, 78vw);
  border-radius: 16px; border: 1px solid var(--line);
  object-fit: contain; background: color-mix(in srgb, var(--panel) 88%, #000);
  box-shadow: var(--shadow-soft);
}
.screens .shot-btn-wrap.is-landscape img {
  height: 160px; max-width: min(560px, 88vw);
}
.screens .shot-ph {
  height: 120px; min-width: 160px; border-radius: 16px; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--muted); font-size: 12px; padding: 12px; text-align: center;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.shot-lightbox {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(4, 10, 24, .88);
  display: grid; place-items: center; padding: 20px;
  touch-action: pan-y;
}
.shot-lightbox[hidden] { display: none !important; }
.shot-lightbox img {
  max-width: min(1200px, 92vw); max-height: 84vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.45);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.shot-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 22px; cursor: pointer;
  z-index: 2;
}
.shot-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, rgba(8,20,40,.7));
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.shot-lightbox-prev { left: 10px; }
.shot-lightbox-next { right: 10px; }
.shot-lightbox-counter {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 20, 40, .72); color: #e8f3ff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.btn.is-disabled,
button.btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
  transform: none !important;
  pointer-events: none;
}
.app-dialog { z-index: 420; }
.app-dialog-card {
  width: min(380px, calc(100vw - 28px));
  background: linear-gradient(165deg, color-mix(in srgb, var(--panel) 92%, #0b1a36), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow), 0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app-dialog-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--text);
}
.app-dialog-msg {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}
[data-theme="dark"] .app-dialog-card {
  background: linear-gradient(165deg, #0c2248, #081830);
  border-color: rgba(70, 150, 255, 0.35);
}
.empty-state, .empty {
  text-align: center; color: var(--muted); padding: 40px 16px;
}
.empty-state {
  background: var(--panel-glass); border: 1px solid var(--line); border-radius: var(--radius);
}
.empty-state h3 { margin: 0 0 6px; color: var(--text); }
/* Bottom nav — phone floating bar (hidden on TV/desktop via .phone-only) */
.bottom-nav {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(8px + var(--safe-b));
  height: var(--nav-h);
  min-height: var(--nav-h);
  max-height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  padding: 4px 6px 6px;
  z-index: 100;
  overflow: visible;
}
.updates-item {
  /* same flex column as .nav-item — do not add extra layout */
  overflow: visible;
}
.updates-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: visible;
  line-height: 0;
}
.top-updates-wrap {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.updates-top .updates-bell {
  width: 22px;
  height: 22px;
  display: block;
}
/* Web browser: hide self-update bell. Native phone/TV keep it (see overrides below TV rules). */
.updates-top .updates-badge {
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  border-width: 2px;
}
.updates-icon {
  width: 24px;
  height: 24px;
  display: block;
}
.updates-badge {
  position: absolute;
  top: -4px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 1px 5px 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #3f6ec4, #5b7fd0);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 2px solid color-mix(in srgb, var(--panel) 92%, #081a36);
  box-sizing: border-box;
  box-shadow: 0 0 8px rgba(63, 110, 196, 0.35);
  pointer-events: none;
  z-index: 3;
}
.updates-badge.is-new {
  animation: updates-badge-pop 0.7s ease;
}
@keyframes updates-badge-pop {
  0% { transform: scale(0.6); opacity: 0.4; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.icon-btn.has-updates-pulse,
.updates-top.has-updates-pulse {
  animation: updates-bell-soft 1.2s ease 2;
}
@keyframes updates-bell-soft {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
}
.updates-badge[hidden] { display: none !important; }
.side-link { position: relative; overflow: visible; }
/* Same icon column as other side-links (prevents «Обновления» shift) */
.side-link .side-ico-slot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: visible;
  line-height: 0;
}
.side-link .side-ico-slot .si {
  width: 20px;
  height: 20px;
}
.side-updates-wrap {
  width: 20px;
  height: 20px;
  margin-right: 0;
}
.side-link .updates-badge {
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
}
.updates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.updates-head h3 { margin: 0; }
.updates-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.updates-head-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.updates-head-actions .btn[hidden] {
  display: none !important;
}
.updates-list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 4px;
}
#viewUpdates,
#viewLibrary {
  /* Extra bottom room so last card actions clear the bottom nav + Android nav bar */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
body.is-phone #viewUpdates,
html.is-android-webview #viewUpdates,
body.is-native #viewUpdates {
  /* Clear floating bottom nav + gesture/nav bar so last «Обновить» stays tappable */
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.update-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel-glass);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.update-card.is-blocked { opacity: .85; }
.update-card .update-title {
  color: var(--text);
}
.update-card:active {
  filter: brightness(0.985);
}
.update-icon {
  width: 64px; height: 64px; border-radius: var(--icon-radius, 22%); object-fit: cover;
  border: 1px solid var(--line); background: var(--panel);
}
.update-title { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.update-meta { margin-top: 4px; line-height: 1.35; }
.update-warn { margin-top: 8px; color: #e11d48; font-size: 13px; font-weight: 650; }
.update-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.self-update-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px 16px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}
/* display:flex must not override the hidden attribute (empty round card bug) */
.self-update-banner[hidden] {
  display: none !important;
}
.self-update-banner.is-flash {
  animation: self-banner-flash 1.4s ease;
}
@keyframes self-banner-flash {
  0%, 100% { box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12); }
  35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 12px 32px rgba(37, 99, 235, 0.28); }
}
.updates-badge.self-badge {
  /* Bell badge = TapLine Store self-update (always shows as 1) */
  min-width: 18px;
}
[data-theme="dark"] .self-update-banner,
[data-theme="dark"] .update-card {
  background: #0c1e3d;
  border-color: rgba(70, 150, 255, 0.28);
}
.nav-item {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  transition: color var(--ease);
  overflow: visible;
  align-self: stretch;
}
.nav-item > svg,
.nav-item .updates-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
}
.nav-item .nav-label {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.15;
  flex: 0 0 auto;
}
.nav-item.active { color: var(--accent); }
.nav-item.active > svg,
.nav-item.active .updates-icon { filter: drop-shadow(0 0 5px var(--glow)); }
.nav-item.center {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  max-width: 100%;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  /* Keep center FAB aligned with other tabs (was floating too high) */
  transform: translateY(2px);
  background: linear-gradient(145deg, var(--accent), #6d4dff);
  color: #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
    0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent);
  display: grid;
  place-items: center;
}
.nav-item.center svg { width: 22px; height: 22px; }
.nav-item.center .nav-label,
.nav-item.center span { display: none; }
.nav-item.center.active {
  color: #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ===== PHONE ===== */
body.is-phone .brand.phone-only,
body.is-phone .search.phone-only,
body.is-phone .chips.phone-only { display: flex !important; }
body.is-phone .icon-btn.phone-only,
body.is-phone .icon-btn.phone-chrome,
body.is-phone .top-actions .avatar { display: grid !important; }
body.is-phone .row-block.phone-only { display: block !important; }
body.is-phone .bottom-nav.phone-only { display: grid !important; }
body.is-phone .sidebar { display: none !important; }
body.is-phone .tv-only { display: none !important; }
body.is-phone {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}
body.is-phone .app-shell {
  grid-template-columns: 1fr;
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
}
body.is-phone .main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-b) + 32px);
  scrollbar-width: none;
}
body.is-phone .main::-webkit-scrollbar { display: none; }
body.is-phone .brand-logo {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 1px 2px rgba(28, 69, 233, 0.12));
}
body.is-phone .hero {
  aspect-ratio: 1.95 / 1;
  max-height: 220px;
  min-height: 176px;
  padding: 18px 14px 22px 22px;
}
body.is-phone .hero-icon { width: 86px; height: 86px; right: 12px; border-radius: var(--icon-radius, 22%); }
body.is-phone .card-v { flex-basis: min(158px, 43vw); }
body.is-phone .topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}
body.is-phone .topbar .brand {
  min-width: 0;
  overflow: hidden;
  grid-column: 1;
}
body.is-phone .top-search-slot { display: none !important; }
body.is-phone .top-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  flex: 0 0 auto;
  grid-column: 2;
  justify-self: end;
  visibility: visible !important;
  opacity: 1 !important;
}
body.is-phone .topbar .icon-btn.phone-only,
body.is-phone .topbar .phone-chrome,
body.is-phone .topbar .avatar {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}
body.is-tv .phone-chrome { display: none !important; }

@media (max-width: 1099px) {
  .top-actions { display: flex !important; visibility: visible !important; }
  .top-actions .phone-chrome,
  .top-actions .avatar {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px; height: 40px;
  }
  .bottom-nav.phone-only {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .brand.phone-only,
  .search.phone-only,
  .chips.phone-only { display: flex !important; }
  .row-block.phone-only { display: block !important; }
}
body.is-phone .search {
  margin: 0 0 16px;
  height: 60px;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 999px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  gap: 14px;
  background: color-mix(in srgb, var(--panel) 90%, #e8f0ff);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-soft);
}
body.is-phone[data-theme="dark"] .search,
html[data-theme="dark"] body.is-phone .search {
  background: color-mix(in srgb, var(--panel) 92%, #071428);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
body.is-phone .search .search-ico {
  width: 24px;
  height: 24px;
}
body.is-phone .search input {
  font-size: 17px;
  line-height: 1.35;
}

/* Phone detail page: compact stats, rating, spacing, clearance above nav */
body.is-phone .detail-hero {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 20px;
}
body.is-phone .detail-toolbar { margin-bottom: 10px; }
body.is-phone .detail-head {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "cta cta"
    "sec sec"
    "manage manage";
  gap: 10px 12px;
  margin-bottom: 0;
}
body.is-phone .detail-head img {
  width: 72px;
  height: 72px;
  border-radius: var(--icon-radius, 22%);
}
body.is-phone .detail-head h2 { font-size: 20px; margin: 0 0 2px; }
body.is-phone .detail-head-copy { gap: 4px; }
body.is-phone .detail-head > .detail-cta-row,
body.is-phone .detail-head .detail-cta-row,
html.is-android-webview .detail-head > .detail-cta-row,
html.is-android-webview .detail-head .detail-cta-row,
body.is-native .detail-head > .detail-cta-row,
body.is-native .detail-head .detail-cta-row {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin-top: 2px;
  gap: 8px;
}
body.is-phone .detail-cta-row > .btn-cta,
body.is-phone .detail-cta-row > .btn-share,
html.is-android-webview .detail-cta-row > .btn-cta,
html.is-android-webview .detail-cta-row > .btn-share,
body.is-native .detail-cta-row > .btn-cta,
body.is-native .detail-cta-row > .btn-share {
  min-width: 0;
  width: 100% !important;
  flex: none;
  max-width: none;
  min-height: 48px;
  height: 48px;
  padding: 10px 10px !important;
  font-size: 13.5px;
  gap: 6px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
body.is-phone .detail-cta-row > .btn-share .share-ico,
html.is-android-webview .detail-cta-row > .btn-share .share-ico,
body.is-native .detail-cta-row > .btn-share .share-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
body.is-phone .detail-cta-row > .btn-share > span,
html.is-android-webview .detail-cta-row > .btn-share > span,
body.is-native .detail-cta-row > .btn-share > span {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
body.is-phone .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
body.is-phone .stat {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-height: 92px;
  height: auto;
  padding: 12px 6px;
  border-radius: 16px;
}
body.is-phone .stat-txt { align-items: center; }
body.is-phone .stat-ico { width: 22px; height: 22px; }
body.is-phone .stat strong { font-size: 16px; }
body.is-phone .stat-label { font-size: 11.5px; }
body.is-phone .detail-section { margin-bottom: 18px; }
body.is-phone .detail-section h3 { font-size: 16px; margin: 0 0 8px; }
body.is-phone .reviews-card {
  width: 100%;
  padding: 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}
body.is-phone .reviews-card > h3 { margin-bottom: 12px; font-size: 17px; }
body.is-phone .reviews-grid { gap: 14px; }
body.is-phone .reviews-score { font-size: 40px; }
body.is-phone .reviews-score-row { gap: 12px; }
body.is-phone .reviews-bars { display: none; } /* histogram on desktop/tablet */
body.is-phone .rate-row {
  gap: 4px;
  width: max-content;
  max-width: 100%;
  justify-content: flex-start;
}
body.is-phone .star-btn { --star-size: 27px; }
body.is-phone .reviews-user h4 { margin-bottom: 10px; }
body.is-phone .auth-card {
  width: min(420px, calc(100vw - 24px));
  padding: 16px 14px;
  border-radius: 18px;
  gap: 0;
  /* Height follows visualViewport via --vvh (JS); fall back to dvh */
  max-height: calc(var(--vvh, 100dvh) - 16px - env(safe-area-inset-top, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.is-phone .auth-panel { gap: 10px; }
body.is-phone .auth-card h3 { font-size: 20px; }
body.is-phone .auth-sub { font-size: 12.5px; margin-bottom: 0; }
body.is-phone .auth-field { gap: 5px; }
body.is-phone .auth-field input,
body.is-phone .modal-card input { padding: 10px 12px; }
body.is-phone .modal.auth-modal {
  align-items: end;
  justify-items: center;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  /* Bound overlay to visual viewport when keyboard is open */
  top: var(--vv-offset-top, 0px);
  height: var(--vvh, 100dvh);
  bottom: auto;
  inset-inline: 0;
}
body.is-phone .rate-login-btn { width: auto; }
body.is-phone .screens { padding-bottom: 4px; margin-bottom: 4px; gap: 10px; }
body.is-phone .screens .shot-btn-wrap img { height: 148px; }
body.is-phone .screens .shot-btn-wrap.is-landscape img { height: 120px; }
body.is-phone #viewDetail {
  padding-bottom: 8px;
}

body.is-phone .bottom-nav {
  left: 12px;
  right: 12px;
  bottom: calc(8px + var(--safe-b));
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  padding: 4px 4px 6px;
  border-radius: 24px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
body.is-phone .nav-item {
  font-size: 11px;
  min-height: 0;
  height: 100%;
  gap: 3px;
  overflow: visible;
  justify-content: center;
}
body.is-phone .nav-item .nav-label { font-size: 11px; line-height: 1.15; }
body.is-phone .nav-item > svg,
body.is-phone .nav-item .updates-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
body.is-phone .updates-icon-wrap {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
body.is-phone .updates-badge {
  top: -5px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 1px 5px 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
body.is-phone .nav-item.center {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  max-height: 54px;
  transform: translateY(2px);
  margin: 0;
  align-self: center;
  justify-self: center;
}
body.is-phone .nav-item.center svg { width: 22px; height: 22px; }
body.is-phone .chips {
  margin-left: -2px;
  margin-right: -2px;
  padding: 8px 12px 14px 2px;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
body.is-phone .chip {
  scroll-snap-align: start;
}
body.is-phone .chip {
  height: 44px;
  min-height: 44px;
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(15, 35, 80, 0.06);
}
body.is-phone .chip.active,
body.is-phone .chip.active:hover,
body.is-phone .chip.active.is-focused,
body.is-phone .chip.active:focus-visible {
  /* Soft short glow — the old 8×20 / 38% blue smear was too heavy on phones */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
body.is-phone .chip:hover:not(.active) {
  transform: none;
  box-shadow: 0 1px 2px rgba(15, 35, 80, 0.06);
}

@media (max-width: 380px) {
  body.is-phone .card-v { flex-basis: 140px; }
  body.is-phone .hero-icon { width: 72px; height: 72px; right: 10px; }
  body.is-phone .hero-copy { max-width: 62%; }
  body.is-phone .nav-item .nav-label { font-size: 10px; }
  body.is-phone .star-btn { --star-size: 26px; width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  body.is-phone .rate-row { gap: 2px; }
  body.is-phone .reviews-score { font-size: 36px; }
  body.is-phone .bottom-nav { left: 10px; right: 10px; }
  body.is-phone .nav-item.center { width: 52px; height: 52px; min-width: 52px; min-height: 52px; max-height: 52px; }
}

/* ===== TV / DESKTOP =====
   Android TV WebView often reports CSS width < 1100px.
   Use min-width:0 so body.is-tv layout always applies (was gated at 1100). */
@media (min-width: 0) {
  body.is-tv {
    overflow: hidden;
    height: 100vh;
  }
  body.is-tv .app-shell {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    height: 100vh;
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  body.is-tv .sidebar {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    padding: 22px 14px 16px;
    border-right: 1px solid var(--line);
    background: var(--sidebar);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    height: 100vh;
  }
  body.is-tv .sidebar .brand { margin-bottom: 18px; padding: 0 6px; font-size: 18px; }
  body.is-tv .brand-logo { width: 44px; height: 44px; }
  body.is-tv .side-nav,
  body.is-tv .side-bottom { display: grid; gap: 8px; width: 100%; }
  body.is-tv .side-divider {
    height: 1px; margin: 6px 8px 2px;
    background: var(--line);
  }
  /* Spacer no longer eats a hole before the last category («Игры»).
     Bottom block sticks via side-nav flex:1 + overflow instead. */
  body.is-tv .side-spacer { display: none; }
  body.is-tv .side-link {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid transparent;
    background: transparent;
    text-align: left;
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 600; font-size: 14px;
    color: var(--text);
    transition: transform var(--ease), background var(--ease), box-shadow var(--ease), border-color var(--ease);
  }
  body.is-tv .side-link > span:not(.side-ico-slot):not(.updates-badge) {
    min-width: 0;
    line-height: 1.2;
  }
  body.is-tv .side-link .si {
    width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted);
  }
  body.is-tv .side-link .side-ico-slot {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  body.is-tv .side-updates-wrap {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  body.is-tv .side-updates-wrap .si {
    width: 20px;
    height: 20px;
  }
  body.is-tv .detail-cta-row {
    gap: 12px;
    max-width: 480px;
  }
  body.is-tv .detail-cta-row > .btn-cta,
  body.is-tv .detail-cta-row > .btn-share {
    min-height: 52px;
    height: 52px;
    font-size: 16px;
    padding: 12px 12px !important;
  }
  body.is-tv .detail-cta-row > .btn-share .share-ico {
    width: 19px;
    height: 19px;
  }
  body.is-tv .side-link:hover {
    transform: none;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text);
  }
  /* Soft pill like launch screenshot — dark label, no white/glow “TV ring” */
  body.is-tv .side-link.active,
  body.is-tv .side-link.is-focused,
  body.is-tv .side-link:focus-visible,
  body.is-tv .side-link.active.is-focused,
  body.is-tv .side-link.active:focus-visible {
    background: color-mix(in srgb, var(--accent) 14%, #eef4ff);
    border-color: transparent;
    box-shadow: none;
    color: var(--text);
    font-weight: 700;
  }
  body.is-tv .side-link.active .si,
  body.is-tv .side-link.is-focused .si,
  body.is-tv .side-link:focus-visible .si,
  body.is-tv .side-link.active.is-focused .si,
  body.is-tv .side-link.active:focus-visible .si {
    color: var(--text);
  }
  /* D-pad focus slightly stronger than “current page” alone */
  body.is-tv .side-link.is-focused,
  body.is-tv .side-link:focus-visible,
  body.is-tv .side-link.active.is-focused,
  body.is-tv .side-link.active:focus-visible {
    background: color-mix(in srgb, var(--accent) 18%, #e8f0ff);
  }
  html[data-theme="dark"] body.is-tv .side-link.active,
  html[data-theme="dark"] body.is-tv .side-link.is-focused,
  html[data-theme="dark"] body.is-tv .side-link:focus-visible,
  html[data-theme="dark"] body.is-tv .side-link.active.is-focused,
  html[data-theme="dark"] body.is-tv .side-link.active:focus-visible {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--text);
    box-shadow: none;
    border-color: transparent;
  }
  html[data-theme="dark"] body.is-tv .side-link.active .si,
  html[data-theme="dark"] body.is-tv .side-link.is-focused .si,
  html[data-theme="dark"] body.is-tv .side-link:focus-visible .si,
  html[data-theme="dark"] body.is-tv .side-link.active.is-focused .si {
    color: var(--text);
  }

  body.is-tv .phone-only { display: none !important; }
  body.is-tv .row-block.tv-only { display: block !important; }
  body.is-tv .row-block.tv-only[hidden] { display: none !important; }
  body.is-tv .hero-arrow.tv-only { display: grid !important; }
  body.is-tv .clock.tv-only { display: flex !important; }
  body.is-tv .icon-btn.tv-only { display: grid !important; }
  body.is-tv .top-search-slot.tv-only {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    align-items: center;
  }
  body.is-tv .top-search,
  body.is-tv .top-search.tv-only,
  body.is-tv .topbar.is-search-open .top-search {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    max-width: none !important; /* fill row — no orphan empty middle */
    height: 48px;
    min-height: 48px;
    border-radius: 999px;
    opacity: 1;
    pointer-events: auto;
    padding: 0 18px;
    border-width: 1.5px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    align-items: center;
    background: var(--panel);
    box-shadow: none;
  }
  body.is-tv .top-search input {
    font-size: 15px;
    font-weight: 550;
  }
  body.is-tv .top-search .search-mic,
  body.is-tv .top-search .search-clear {
    width: 34px;
    height: 34px;
  }
  body.is-tv .topbar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    /* Full-bleed header inside .main — cancel main pad exactly */
    margin: 0 0 12px;
    margin-left: calc(-1 * var(--tv-pad-x));
    margin-right: calc(-1 * var(--tv-pad-x));
    width: calc(100% + 2 * var(--tv-pad-x));
    max-width: none;
    min-height: 64px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 60;
    padding: var(--tv-pad-top) var(--tv-pad-x) 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  html.is-android-tv body.is-tv .topbar,
  html[data-theme="dark"] body.is-tv .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  body.is-tv .top-actions {
    display: flex !important;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: 0 !important;
    height: 48px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--panel);
    box-sizing: border-box;
  }
  body.is-tv .top-actions .clock {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 40px;
    margin: 0;
    padding: 0 6px 0 4px;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0.02em;
    color: var(--text);
    text-align: center;
    border-right: 1px solid var(--line);
    padding-right: 10px;
    margin-right: 2px;
  }
  body.is-tv .top-actions .icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.is-tv .top-actions .icon-btn:hover {
    transform: none;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }
  body.is-tv .top-actions .icon-btn.avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin-left: 2px;
    box-shadow: 0 4px 10px rgba(60, 90, 200, 0.22);
  }
  body.is-tv .top-search.is-focused,
  body.is-tv .top-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  body.is-tv .top-actions:focus-within {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  }
  body.is-tv #btnTopSearch { display: none !important; }
  /* Bell only in native Android TV / phone app — not in desktop/web TV layout */
  body.is-tv.is-native #btnUpdatesTv {
    display: grid !important;
  }
  body.is-tv:not(.is-native) #btnUpdatesTv,
  body.is-phone:not(.is-native) #btnUpdatesTop,
  body:not(.is-native) #btnUpdatesTop,
  body:not(.is-native) #btnUpdatesTv {
    display: none !important;
  }

  body.is-tv .main {
    --tv-pad-x: max(20px, 1.5vw);
    --tv-pad-top: max(12px, env(safe-area-inset-top, 0px));
    height: 100vh;
    min-height: 100vh;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Top pad lives on .topbar so header is flush to the top edge */
    padding: 0 var(--tv-pad-x) 28px;
    scrollbar-width: thin;
    scrollbar-gutter: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }
  body.is-tv .pull-refresh {
    display: none !important;
  }
  body.is-tv #pageContent {
    /* Grow with content — do NOT flex-column-fill the viewport or the footer
       logo sits on top of reviews/description (WebView / TV scroll bug). */
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: visible;
  }
  body.is-tv #pageContent > .view.active {
    width: 100%;
  }
  body.is-tv .view.active {
    overflow: visible;
    /* inset content so outer 3px ring + soft shadow stay inside */
    padding: 8px 8px 12px;
    margin: 0 -8px;
    box-sizing: border-box;
  }
  body.is-tv .apps-grid {
    gap: 14px;
    padding: 6px 4px 22px;
    overflow: visible;
  }
  body.is-tv .updates-list,
  body.is-tv .list-stack {
    padding: 8px 6px 18px;
    margin: 0 -6px;
    overflow: visible;
    box-sizing: border-box;
  }
  body.is-tv .update-card.is-focused,
  body.is-tv .update-card:focus-visible,
  body.is-tv .list-row.is-focused,
  body.is-tv .list-row:focus-visible {
    box-shadow:
      0 0 0 3px #3b9bff,
      0 6px 14px rgba(59, 155, 255, 0.2);
  }
  body.is-tv .store-footer {
    margin-top: 28px;
    margin-bottom: 0;
  }

  body.is-tv .hero-wrap {
    /* Side gutters: arrows live beside the banner, not flush on the art */
    --hero-arrow-gutter: 56px;
    padding: 0 var(--hero-arrow-gutter);
    margin-bottom: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  body.is-tv .hero {
    aspect-ratio: 5.2 / 1;
    max-height: 240px;
    min-height: 180px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Arrows are outside — only need modest inset for copy/icon */
    padding: 24px 36px 28px 36px;
    border-radius: 22px;
    background:
      linear-gradient(100deg, rgba(8, 28, 64, .84) 0%, rgba(12, 40, 80, .46) 36%, rgba(8, 30, 60, .14) 64%, transparent 100%),
      var(--hero-day) center / cover no-repeat;
  }
  html[data-theme="dark"] body.is-tv .hero {
    background:
      linear-gradient(100deg, rgba(2, 8, 20, .9) 0%, rgba(4, 16, 36, .55) 40%, rgba(3, 12, 28, .2) 100%),
      var(--hero-night) center / cover no-repeat;
  }
  body.is-tv .hero h2 { font-size: 36px; }
  body.is-tv .hero p { font-size: 15px; max-width: 42ch; -webkit-line-clamp: 2; }
  body.is-tv .hero-icon {
    width: 112px;
    height: 112px;
    right: 36px;
    max-width: min(112px, 18%);
    border-radius: var(--icon-radius, 22%);
    box-sizing: border-box;
  }
  body.is-tv .hero-copy { max-width: 48%; }
  /* Center arrows in the side gutter — clear gap from banner edge */
  body.is-tv .hero-arrow.left {
    left: calc((var(--hero-arrow-gutter) - 44px) / 2);
  }
  body.is-tv .hero-arrow.right {
    right: calc((var(--hero-arrow-gutter) - 44px) / 2);
  }
  body.is-tv .hero-arrow {
    z-index: 3;
  }
  body.is-tv .eyebrow { font-size: 12px; letter-spacing: .16em; }

  body.is-tv .app-card {
    flex: 0 0 calc((100% - 48px) / 5);
    max-width: 220px;
    min-width: 168px;
    min-height: 124px;
    padding: 12px;
    border-radius: 16px;
  }
  body.is-tv .app-card img { width: 52px; height: 52px; border-radius: var(--icon-radius, 22%); }
  body.is-tv .h-scroll {
    gap: 14px;
    /* Edge inset so first/last cards aren't flush while scrolling */
    padding: 14px 16px 28px;
    margin: 0 -6px;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 16px;
    scroll-padding-block: 14px 28px;
  }
  body.is-tv .row-block {
    overflow: visible;
  }
  body.is-tv .app-card {
    scroll-margin-inline: 16px;
  }
  body.is-tv .screens {
    gap: 14px;
    padding: 12px 16px 28px;
    margin: 0 -8px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
  }
  body.is-tv .screens .shot-btn-wrap {
    scroll-margin-inline: 16px;
  }
  body.is-tv .screens .shot-btn-wrap.is-focused,
  body.is-tv .screens .shot-btn-wrap:focus-visible {
    box-shadow:
      0 0 0 3px #3b9bff,
      0 5px 12px rgba(59, 155, 255, 0.18);
  }
  body.is-tv .detail-section {
    margin-bottom: 28px;
  }
  body.is-tv .detail-hero {
    margin-bottom: 20px;
  }
  body.is-tv .section-head { margin: 4px 0 6px; }
  body.is-tv .section-head h3 { font-size: 20px; }
  body.is-tv .detail-hero { padding: 26px; max-width: 100%; box-sizing: border-box; }
  body.is-tv .detail-hero.has-poster {
    min-height: 220px;
    padding: 22px 28px 26px;
  }
  body.is-tv .detail-hero.has-poster .detail-head h2 { font-size: 32px; }
  body.is-tv .detail-head { grid-template-columns: 110px 1fr; min-width: 0; }
  body.is-tv .detail-head img { width: 110px; height: 110px; }
  body.is-tv .detail-head h2 { font-size: 30px; }
  body.is-tv .detail-head-copy { min-width: 0; }
  body.is-tv .screens .shot-btn-wrap img { height: 210px; }
  body.is-tv .screens .shot-btn-wrap.is-landscape img { height: 180px; }
  body.is-tv .updates-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.is-tv .update-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: 64px minmax(0, 1fr);
  }
  body.is-tv .update-body { min-width: 0; overflow: hidden; }
  body.is-tv .update-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-tv .app-card.is-focused,
  body.is-tv .app-card:focus-visible {
    border-color: transparent;
    transform: none;
    /* Tight ring + short shadow — fits grid / rail padding everywhere */
    box-shadow:
      0 0 0 3px #3b8cff,
      0 5px 12px rgba(59, 140, 255, .18);
  }
  body.is-tv .btn.is-focused,
  body.is-tv .btn:focus-visible,
  body.is-tv .btn-cta.is-focused,
  body.is-tv .btn-cta:focus-visible,
  body.is-tv .icon-btn.is-focused,
  body.is-tv .icon-btn:focus-visible,
  body.is-tv .profile-menu-item.is-focused,
  body.is-tv .profile-menu button.is-focused,
  body.is-tv .profile-menu-item:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px #3b8cff,
      0 0 12px rgba(59, 140, 255, .4);
    border-color: #cfe4ff;
  }
  body.is-tv .profile-menu {
    min-width: 280px;
  }
  body.is-tv .profile-menu button,
  body.is-tv .profile-menu-item {
    min-height: 48px;
  }
  html[data-theme="light"] body.is-tv .app-card.is-focused,
  html[data-theme="light"] body.is-tv .app-card:focus-visible {
    border-color: transparent;
    box-shadow:
      0 0 0 3px #1769ff,
      0 6px 14px rgba(23, 105, 255, .18);
  }

  /* STB: drop heavy blur / scale / long transitions — remote feels snappier */
  body.is-tv .sidebar,
  body.is-tv .app-card,
  body.is-tv .icon-btn,
  body.is-tv .top-search,
  body.is-tv .update-card,
  body.is-tv .detail-hero,
  body.is-tv .list-row {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.is-tv .app-card,
  body.is-tv .side-link,
  body.is-tv .btn,
  body.is-tv .icon-btn,
  body.is-tv .hero .hero-copy,
  body.is-tv .hero .hero-icon,
  body.is-tv .view {
    transition-duration: 80ms !important;
    animation: none !important;
    will-change: auto !important;
  }
  body.is-tv .app-card:hover,
  body.is-tv .side-link:hover,
  body.is-tv .btn:hover,
  body.is-tv .icon-btn:hover {
    transform: none;
  }
  body.is-tv .view.active {
    animation: none !important;
  }
}

@media (min-width: 1680px) {
  :root { --side-w: 248px; }
  body.is-tv .app-card {
    flex-basis: calc((100% - 60px) / 6);
  }
}

/* ===== Download toast (native APK) ===== */
.dl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--nav-gap) + var(--safe-b) + 18px);
  transform: translateX(-50%);
  z-index: 240;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
.dl-toast[hidden] { display: none !important; }
.dl-toast-card {
  pointer-events: auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .dl-toast-card {
  background: rgba(8, 22, 48, 0.92);
  border-color: rgba(70, 150, 255, 0.32);
}
.dl-toast.is-error .dl-toast-card {
  border-color: color-mix(in srgb, #ef4444 55%, var(--line));
}
.dl-toast-title {
  font-size: 13.5px;
  font-weight: 750;
  margin-bottom: 10px;
}
.dl-toast-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  overflow: hidden;
  margin-bottom: 12px;
}
.dl-toast-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 12px var(--glow);
  transition: width 280ms ease;
}
.dl-toast-bar.is-indeterminate i {
  width: 36% !important;
  animation: dl-indeterminate 1.1s ease-in-out infinite;
}
@keyframes dl-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
.dl-toast-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.dl-toast-actions .btn { padding: 7px 14px; font-size: 12.5px; }
body.is-tv .dl-toast { bottom: 28px; }

/* ===== Updates badge: never stretch into a blue strip ===== */
.nav-item .updates-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: visible;
  line-height: 0;
}
.side-link .updates-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: visible;
  line-height: 0;
}
.nav-item .updates-badge,
.side-link .updates-badge,
.updates-top .updates-badge {
  position: absolute !important;
  top: -4px !important;
  right: -7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 18px !important;
  max-width: 30px;
  height: 18px !important;
  padding: 1px 5px 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap;
  overflow: hidden;
  flex: none !important;
  align-self: auto !important;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}
.nav-item .updates-badge[hidden],
.side-link .updates-badge[hidden],
.updates-badge:empty {
  display: none !important;
}
/* Active tab = color only; never paint full button as a blue bar */
.nav-item.active:not(.center) {
  background: transparent !important;
  box-shadow: none;
}
.nav-item.updates-item.active {
  background: transparent !important;
}

/* ===== Native WebView: feel like an app, not mobile Chrome ===== */
html.is-android-webview,
html.is-android-webview body,
body.is-native.is-phone {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: auto;
}
html.is-android-webview body.is-phone,
body.is-native.is-phone {
  /* Keep chrome fixed; only #mainScroll moves */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html.is-android-webview body.is-phone .app-shell,
body.is-native.is-phone .app-shell {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}
html.is-android-webview body.is-phone .main,
body.is-native.is-phone .main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 28px);
}
/* Pin bottom nav flush to screen edge (no floating “browser tab” bounce) */
html.is-android-webview .bottom-nav.phone-only,
body.is-native .bottom-nav.phone-only {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 18px 18px 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  height: auto;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  max-height: none;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
}
html.is-android-webview .nav-item.center,
body.is-native .nav-item.center,
html.is-android-webview body.is-phone .nav-item.center,
body.is-native.is-phone .nav-item.center {
  transform: translateY(3px) !important;
}
html.is-android-webview .dl-toast,
body.is-native .dl-toast {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
}
/* Very narrow phones: stack actions full-width — never ellipsize «Поделиться» */
@media (max-width: 359px) {
  .detail-cta-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .detail-cta-row > .btn-cta,
  .detail-cta-row > .btn-share {
    font-size: 13px;
    padding-inline: 10px !important;
  }
}
@media (min-width: 900px) {
  .detail-cta-row > .btn-cta,
  .detail-cta-row > .btn-share {
    font-size: 15px;
    min-height: 52px;
    height: 52px;
  }
}
/* Press feedback for action buttons (Android WebView / phone) */
body.is-phone .detail-cta-row > .btn-cta:active,
body.is-phone .detail-cta-row > .btn-share:active,
html.is-android-webview .detail-cta-row > .btn-cta:active,
html.is-android-webview .detail-cta-row > .btn-share:active,
body.is-native .detail-cta-row > .btn-cta:active,
body.is-native .detail-cta-row > .btn-share:active {
  transform: scale(0.97);
  filter: brightness(0.94);
  transition: transform 160ms ease, filter 160ms ease;
}
body.is-tv .detail-cta-row > .btn-cta.is-focused,
body.is-tv .detail-cta-row > .btn-share.is-focused,
body.is-tv .detail-cta-row > .btn-cta:focus-visible,
body.is-tv .detail-cta-row > .btn-share:focus-visible {
  transform: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 45%, #94a3b8),
    0 6px 14px rgba(55, 90, 160, 0.18) !important;
}

/* ===== Touch: kill WebKit highlight; press scale; keep TV focus ===== */
html.is-android-webview,
body.is-android-webview,
body.is-phone {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body.is-phone .app-card,
body.is-phone .card-v,
body.is-phone .list-row,
body.is-phone .btn,
body.is-phone .nav-item,
body.is-phone .chip,
body.is-phone .icon-btn,
body.is-phone .side-link {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
body.is-phone .app-card:focus:not(:focus-visible),
body.is-phone .card-v:focus:not(:focus-visible),
body.is-phone .list-row:focus:not(:focus-visible),
body.is-phone .btn:focus:not(:focus-visible),
body.is-phone .nav-item:focus:not(:focus-visible),
body.is-phone .chip:focus:not(:focus-visible),
body.is-phone .icon-btn:focus:not(:focus-visible) {
  box-shadow: none;
  border-color: var(--line);
  transform: none;
}
/* Sticky TV focus ring only for keyboard / TV remote */
body.is-phone[data-input-mode="touch"] .app-card.is-focused,
body.is-phone[data-input-mode="touch"] .card-v.is-focused,
body.is-phone[data-input-mode="touch"] .list-row.is-focused,
body.is-phone[data-input-mode="touch"] .btn.is-focused,
body.is-phone[data-input-mode="touch"] .nav-item.is-focused,
body.is-phone[data-input-mode="touch"] .chip.is-focused,
body.is-phone[data-input-mode="touch"] .side-link.is-focused,
body.is-phone[data-input-mode="touch"] .app-card:focus-visible,
body.is-phone[data-input-mode="touch"] .card-v:focus-visible,
body.is-phone[data-input-mode="touch"] .list-row:focus-visible,
body.is-phone[data-input-mode="touch"] .btn:focus-visible,
body.is-phone[data-input-mode="touch"] .nav-item:focus-visible,
body.is-phone[data-input-mode="touch"] .chip:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--line);
  transform: none;
  filter: none;
}
body.is-phone .app-card.is-pressing {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  transition: transform 160ms ease, background 160ms ease;
}
body.is-phone .btn.is-pressing {
  transform: scale(0.97);
  filter: brightness(0.94);
  transition: transform 150ms ease, filter 150ms ease;
}
body.is-phone .nav-item.is-pressing > svg,
body.is-phone .nav-item.is-pressing .updates-icon {
  transform: scale(0.9);
  transition: transform 140ms ease;
}
body.is-phone .card-v.is-pressing,
body.is-phone .list-row.is-pressing,
body.is-phone .chip.is-pressing,
body.is-phone .icon-btn.is-pressing {
  transform: scale(0.97);
  filter: brightness(0.96);
}
body.is-phone .app-card:hover { transform: none; }
body.is-phone .btn:hover { transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) {
  body.is-phone .app-card:hover { transform: translateY(-3px); }
  body.is-phone .btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-toast-bar.is-indeterminate i { animation: none !important; }
  body.is-phone .app-card.is-pressing,
  body.is-phone .btn.is-pressing,
  body.is-phone .card-v.is-pressing,
  body.is-phone .list-row.is-pressing,
  body.is-phone .nav-item.is-pressing > svg,
  body.is-phone .nav-item.is-pressing .updates-icon {
    transform: none !important;
  }
}

/* Rating comment + reviews list */
.rate-review-wrap {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}
.rate-review-wrap[hidden] { display: none !important; }
.rate-review-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.rate-review-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.rate-review-input:focus {
  outline: 2px solid color-mix(in srgb, #38bdf8 55%, transparent);
  outline-offset: 1px;
}
.rate-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rate-review-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rate-review-submit {
  min-width: 110px;
}
.reviews-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 4px;
}
.reviews-list[hidden] { display: none !important; }
.review-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}
.review-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.review-author {
  font-size: 13px;
  font-weight: 700;
}
.review-stars {
  color: #ffb300;
  letter-spacing: 1px;
  font-size: 12px;
  white-space:nowrap;
}
.review-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* —— Reviews v2: white rating panel + separate review cards —— */
.reviews-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.reviews-panel {
  background: var(--panel, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .07);
}
.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.reviews-head h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.reviews-head-ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round;
}
.reviews-card .reviews-grid { grid-template-columns: 1fr; gap: 0; }
.reviews-card .reviews-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding-bottom: 18px;
}
.reviews-card .reviews-score-row { flex-direction: column; gap: 6px; padding: 0 6px; }
.reviews-card .reviews-summary-meta { justify-items: center; text-align: center; gap: 8px; }
.reviews-card .reviews-score { font-size: 30px; font-weight: 700; min-width: 0; }
.reviews-card .reviews-bars { max-width: none; margin-top: 0; gap: 10px; }
.reviews-card .reviews-bar { grid-template-columns: 16px 1fr; gap: 14px; }
.reviews-card .reviews-bar .bar { height: 8px; }
.reviews-card .reviews-bar .bar > i { background: #f5a800; }
.reviews-card .reviews-divider {
  width: auto; height: 1px; min-height: 0; margin: 0 0 16px; align-self: auto;
}
.reviews-card .reviews-user { position: relative; }
.reviews-card .reviews-user h4 { font-size: 16px; margin-bottom: 8px; }

/* Already rated: small stars + «Вы уже оставили отзыв», pill «Изменить» on the right */
.reviews-user.is-compact { padding-right: 150px; min-height: 64px; }
.reviews-user.is-compact .rate-row { gap: 0; }
.reviews-user.is-compact .star-btn {
  --star-size: 18px; width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  pointer-events: none;
}
.reviews-user.is-compact .reviews-user-meta { margin-top: 6px; }
.reviews-user.is-compact .rate-status { font-size: 12.5px; }
.reviews-user.is-compact .rate-edit {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.rate-edit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel, #fff);
  color: var(--text);
  font-size: 15px; font-weight: 600;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.rate-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.rate-edit:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rate-edit[hidden] { display: none !important; }
.rate-review-actions { display: inline-flex; gap: 8px; }
.rate-review-cancel[hidden] { display: none !important; }

.reviews-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 22px 2px 10px;
}
.reviews-list-head[hidden] { display: none !important; }
.reviews-list-head h4 { margin: 0; font-size: 17px; font-weight: 700; }
.reviews-list-head span { font-size: 13px; color: var(--muted); }
.reviews-card .reviews-list { margin-top: 0; padding-top: 0; gap: 12px; }
.reviews-card .review-item {
  background: var(--panel, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 18px;
  padding: 16px 18px 12px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .05);
}
.reviews-card .review-item-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px; margin-bottom: 14px;
}
.review-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #fff; font-size: 19px; font-weight: 700;
}
.review-who { display: grid; gap: 4px; min-width: 0; }
.reviews-card .review-author { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-sub { font-size: 12.5px; color: var(--muted); }
.reviews-card .review-stars { font-size: 17px; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 40%, transparent); align-self: center; }
.reviews-card .review-stars b { color: #f5a800; font-weight: inherit; }
.reviews-card .review-body { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.review-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.review-helpful,
.review-report {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 8px; margin: 0 -8px; border-radius: 10px;
  color: var(--muted); font: inherit;
}
.review-helpful { font-size: 15px; font-weight: 600; color: var(--text); }
.review-report { font-size: 13px; }
.review-helpful svg, .review-report svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}
.review-report svg { width: 15px; height: 15px; }
.review-helpful:hover, .review-report:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.review-helpful.is-on { color: var(--accent); }
.review-helpful.is-on svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.review-report:disabled { cursor: default; opacity: .7; }
.review-helpful:focus-visible, .review-report:focus-visible { outline: none; box-shadow: var(--focus); }

[data-theme="dark"] .reviews-card { background: transparent; border: 0; box-shadow: none; }
[data-theme="dark"] .reviews-panel,
[data-theme="dark"] .reviews-card .review-item,
[data-theme="dark"] .rate-edit {
  background: #0c1e3d;
  border-color: rgba(70, 150, 255, .28);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .rate-edit { box-shadow: none; }

body.is-phone .reviews-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
body.is-phone .reviews-panel { padding: 16px; border-radius: 18px; }
body.is-phone .reviews-card .reviews-summary { gap: 18px; }
body.is-phone .reviews-card .reviews-bars { display: grid; gap: 8px; }
body.is-phone .reviews-user.is-compact { padding-right: 0; }
body.is-phone .reviews-user.is-compact .rate-edit { position: static; transform: none; margin-top: 10px; }
body.is-phone .reviews-card .review-body { font-size: 15px; }
body.is-tv .review-helpful.is-focused,
body.is-tv .review-report.is-focused,
body.is-tv .rate-edit.is-focused { box-shadow: 0 0 0 3px #3b8cff; }

/* —— Store footer / legal —— */
.store-footer {
  /* Normal flow under page content — margin-top:auto made the logo overlay reviews. */
  margin: 28px 0 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  padding: 20px 20px 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  width: 100%;
  box-sizing: border-box;
}
.store-footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 20px;
  align-items: center;
}
.store-footer-mark {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: var(--shadow-soft);
}
.store-footer-mark img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(28, 69, 233, 0.22));
}
.store-footer-copyblock {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.store-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.store-footer-brand b { color: var(--accent); }
.store-footer-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}
.store-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.store-footer-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 0;
  transition: color var(--ease);
}
.store-footer-links a:hover,
.store-footer-links a:focus-visible {
  color: var(--accent2);
  text-decoration: none;
  outline: none;
}
.store-footer-copy {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.85;
}
body.is-phone .store-footer {
  /* Modest gap ABOVE footer (from updates list) — never use margin-top:auto (collapses to 0) */
  margin: 22px 4px 12px;
  padding: 16px 14px 18px;
  border-radius: 16px;
}
body.is-phone #viewLibrary {
  padding-bottom: 12px;
}
body.is-phone .store-footer-inner {
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
}
body.is-phone .store-footer-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
body.is-phone .store-footer-mark img {
  width: 36px;
  height: 36px;
}
body.is-tv .store-footer {
  /* Keep footer in normal flow under content (not over reviews/description). */
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding: 22px 24px;
  clear: both;
}
body.is-tv #viewDetail,
body.is-tv #viewDetail .detail-section,
body.is-tv #viewDetail .reviews-card {
  position: relative;
  z-index: 2;
}
body.is-tv .store-footer-mark {
  width: 80px;
  height: 80px;
  border-radius: 22px;
}
body.is-tv .store-footer-mark img {
  width: 52px;
  height: 52px;
}
.store-footer-links a:focus-visible {
  box-shadow: var(--focus);
  border-radius: 6px;
}
@media (max-width: 520px) {
  .store-footer-inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .store-footer-mark {
    width: 52px;
    height: 52px;
  }
  .store-footer-mark img {
    width: 34px;
    height: 34px;
  }
}

/* —— Legal pages (terms / privacy / rights) —— */
body.legal-body {
  min-height: 100%;
  min-height: 100dvh;
}
body.legal-body .app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}
body.legal-body .main {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 18px 20px 36px;
  overflow-x: hidden;
}
body.legal-body .topbar {
  margin-bottom: 18px;
}
body.legal-body .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
}
body.legal-body .brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.legal-page {
  display: grid;
  gap: 16px;
  margin: 0 0 8px;
}

.legal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel) 55%, color-mix(in srgb, var(--accent2) 10%, var(--panel))),
    var(--panel);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
}
[data-theme="dark"] .legal-hero {
  background:
    linear-gradient(125deg, rgba(46, 123, 255, 0.22), rgba(12, 28, 56, 0.92) 48%, rgba(26, 192, 255, 0.12)),
    rgba(10, 24, 48, 0.88);
}
.legal-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%);
  pointer-events: none;
}
.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.legal-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.legal-hero-lead {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.legal-updated {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.legal-updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}

.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.legal-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.legal-tabs a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.legal-tabs a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.legal-tabs a:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.legal-card {
  display: grid;
  gap: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.legal-section {
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel));
}
[data-theme="dark"] .legal-section {
  background: linear-gradient(180deg, rgba(46, 123, 255, 0.08), rgba(10, 24, 48, 0.55));
}
.legal-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.legal-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.legal-ico svg {
  width: 18px;
  height: 18px;
}
.legal-section h2 {
  margin: 2px 0 0;
  font-size: 16.5px;
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.legal-section p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.legal-section a:hover {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

.legal-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.legal-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.legal-steps .n {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.legal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent2) 8%, transparent));
}
.legal-cta p {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.legal-cta .btn {
  flex: 0 0 auto;
  text-decoration: none;
}

body.legal-body .store-footer {
  margin-top: 20px;
}
body.legal-body .store-footer-inner {
  max-width: none;
}

@media (max-width: 720px) {
  body.legal-body .main {
    padding: 12px 12px calc(24px + var(--safe-b));
  }
  .legal-hero {
    padding: 20px 16px 18px;
    border-radius: 18px;
  }
  .legal-card {
    padding: 12px;
    border-radius: 18px;
    gap: 10px;
  }
  .legal-section {
    padding: 14px 12px 12px;
    border-radius: 14px;
  }
  .legal-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .legal-tabs a { justify-content: flex-start; }
  .legal-cta { padding: 14px; }
}

/* ===== Android TV D-pad / updates diagnostics (2026-10-31) ===== */
.nav-item.active:not(.is-focused):not(.is-nav-focused) {
  /* Keep active tab tint without stealing focus glow */
  box-shadow: none;
}
.nav-item.is-focused,
.nav-item.is-nav-focused,
.nav-item:focus-visible {
  box-shadow: var(--focus) !important;
  transform: translateY(-1px);
}
.nav-item.center.is-focused,
.nav-item.center.is-nav-focused {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--accent),
    0 0 28px var(--glow) !important;
}
body.is-tv .app-card.is-focused,
body.is-tv .app-card:focus-visible,
body.is-tv .card-v.is-focused,
body.is-tv .card-v:focus-visible,
body.is-tv .update-card.is-focused,
body.is-tv .update-card:focus-visible,
body.is-tv .list-row.is-focused,
body.is-tv .list-row:focus-visible,
html.is-android-tv .app-card.is-focused,
html.is-android-tv .update-card.is-focused,
html.is-android-tv .list-row.is-focused {
  outline: none;
  /* Single ring everywhere — no double stroke / big glow that clips */
  box-shadow:
    0 0 0 3px #3b9bff,
    0 5px 12px rgba(59, 155, 255, 0.18) !important;
  transform: none;
  z-index: 2;
}
.update-status {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}
.update-status.is-ok { color: var(--accent); }
.update-status.is-warn { color: #d97706; }
[data-theme="dark"] .update-status.is-warn { color: #fbbf24; }
.update-card.is-blocked .btn.update[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
body.is-tv .update-card,
html.is-android-tv .update-card {
  padding: 16px;
  gap: 14px;
  border-radius: 18px;
}
body.is-tv .update-title,
html.is-android-tv .update-title {
  font-size: 18px;
}
body.is-tv .btn.update,
html.is-android-tv .btn.update {
  min-height: 48px;
  font-size: 16px;
  padding: 12px 18px;
}
/* Overscan-safe padding on Android TV — keep in sync with topbar bleed via --tv-pad-x */
html.is-android-tv body.is-tv .main-scroll,
html.is-android-tv body.is-tv .content,
html.is-android-tv body.is-tv .main {
  --tv-pad-x: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), 1.5vw);
  --tv-pad-top: max(14px, env(safe-area-inset-top, 0px));
  padding-left: var(--tv-pad-x);
  padding-right: var(--tv-pad-x);
}
html.is-android-tv body.is-tv .hero,
html.is-android-tv body.is-tv .update-card,
html.is-android-tv body.is-tv .detail-hero {
  max-width: 100%;
}

/* Large desktop windows run the TV layout: a mouse hover gets the same ring as the remote focus,
   and the remote-focused card drops its ring while another card is hovered (one ring at a time). */
@media (hover: hover) and (pointer: fine) {
  body.is-tv .app-card:hover {
    z-index: 3;
    border-color: transparent;
    transform: none;
    box-shadow:
      0 0 0 3px #3b8cff,
      0 5px 12px rgba(59, 140, 255, .18);
  }
  html[data-theme="light"] body.is-tv .app-card:hover {
    box-shadow:
      0 0 0 3px #1769ff,
      0 6px 14px rgba(23, 105, 255, .18);
  }
  body.is-tv:has(.app-card:hover) .app-card.is-focused:not(:hover),
  body.is-tv:has(.app-card:hover) .app-card:focus-visible:not(:hover) {
    z-index: auto;
    border-color: var(--line);
    box-shadow: var(--shadow-soft) !important;
  }
}

/* Categories v2: short active glow that fits inside the chip scroller; chips wrap on TV/PC */
.chip.active,
.chip.active.is-focused,
.chip.active:focus-visible {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 26%, transparent);
}
body.is-tv .chip.active.is-focused,
body.is-tv .chip.active:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 10px color-mix(in srgb, var(--accent) 26%, transparent);
}
body.is-tv .apps-chips {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 10px;
  padding: 6px 2px 12px;
}
/* Nested grid — avoid display:contents (WebView paints focus/active
   of the last cat into the sidebar gap below the scrollport). */
.side-cats {
  display: grid;
  gap: inherit;
  width: 100%;
}
body.is-tv .side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  align-content: start;
  scroll-padding-block: 10px;
  padding-bottom: 4px;
}
body.is-tv .side-bottom {
  flex: 0 0 auto;
  margin-top: 4px;
}
body.is-tv .side-nav::-webkit-scrollbar { display: none; }
body.is-tv .side-link[hidden] {
  display: none !important;
}
/* ===== Detail CTA v3: gradient primary + soft secondary (concept) ===== */
.detail-cta-row > .btn-cta,
.detail-cta-row > .btn-share {
  height: 52px;
  min-height: 52px;
  border-radius: 16px !important;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  gap: 9px;
  filter: none;
  transition: transform 160ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, filter 180ms ease;
}
.detail-cta-row > .btn-cta {
  background: linear-gradient(90deg, #2f6bff 0%, #1aa7f5 62%, #1fc1f2 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 20px -8px rgba(37, 110, 255, .55) !important;
}
.detail-cta-row > .btn-cta.update {
  background: linear-gradient(90deg, #3b5bff 0%, #6d5cff 55%, #8b5cf6 100%) !important;
  box-shadow: 0 10px 20px -8px rgba(99, 91, 255, .55) !important;
}
.detail-cta-row > .btn-cta.open {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow: 0 10px 20px -10px rgba(37, 99, 235, .5) !important;
}
.detail-cta-row > .btn-cta:disabled,
.detail-cta-row > .btn-cta.is-disabled {
  background: linear-gradient(90deg, #94a3b8, #a8b4c6) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.detail-cta-row > .btn-cta::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.detail-cta-row > .btn-cta.update::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5'/%3E%3C/svg%3E");
}
.detail-cta-row > .btn-cta.open::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}
.detail-cta-row > .btn-share {
  background: #eef5ff !important;
  color: #1d3b6e !important;
  border: 1px solid #c3d8f6 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.detail-cta-row > .btn-share .share-ico { color: #2563eb; width: 18px; height: 18px; flex: 0 0 18px; }
@media (hover: hover) and (pointer: fine) {
  .detail-cta-row > .btn-cta:hover { filter: brightness(1.06) saturate(1.05); }
  .detail-cta-row > .btn-share:hover { background: #e3eeff !important; border-color: #a9c8f3 !important; }
}
.detail-cta-row > .btn-cta:focus-visible,
.detail-cta-row > .btn-share:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35) !important;
}
.detail-cta-row > .btn-cta:active,
.detail-cta-row > .btn-share:active {
  transform: scale(.97);
  filter: brightness(.96);
  transition-duration: 90ms;
}
[data-theme="dark"] .detail-cta-row > .btn-cta {
  box-shadow: 0 10px 24px -8px rgba(34, 172, 245, .55), 0 0 18px -6px rgba(31, 193, 242, .45) !important;
}
[data-theme="dark"] .detail-cta-row > .btn-cta.update {
  box-shadow: 0 10px 24px -8px rgba(124, 92, 255, .6), 0 0 18px -6px rgba(139, 92, 246, .45) !important;
}
[data-theme="dark"] .detail-cta-row > .btn-share {
  background: #10284f !important;
  color: #e8f0ff !important;
  border: 1px solid rgba(96, 165, 250, .55) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .detail-cta-row > .btn-share .share-ico { color: #7dd3fc; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .detail-cta-row > .btn-share:hover { background: #143263 !important; border-color: rgba(125, 211, 252, .8) !important; }
}
.detail-hero.has-poster .detail-cta-row > .btn-share {
  background: rgba(10, 24, 52, .42) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.detail-hero.has-poster .detail-cta-row > .btn-share .share-ico { color: #bfe3ff; }
body.is-tv .detail-cta-row { max-width: 520px; }
body.is-tv .detail-cta-row > .btn-cta.is-focused,
body.is-tv .detail-cta-row > .btn-share.is-focused,
body.is-tv .detail-cta-row > .btn-cta:focus-visible,
body.is-tv .detail-cta-row > .btn-share:focus-visible {
  transform: none;
  filter: none;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px #3b8cff, 0 8px 18px -6px rgba(59, 140, 255, .45) !important;
}
/* PC in TV layout with a mouse: no remote ring until arrows/Tab are used */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn-cta:is(.is-focused, :focus-visible) {
    box-shadow: 0 10px 20px -8px rgba(37, 110, 255, .55) !important;
  }
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn-cta.update:is(.is-focused, :focus-visible) {
    box-shadow: 0 10px 20px -8px rgba(99, 91, 255, .55) !important;
  }
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn-cta:disabled:is(.is-focused, :focus-visible) {
    box-shadow: none !important;
  }
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn-share:is(.is-focused, :focus-visible) {
    box-shadow: none !important;
  }
}
body.is-phone .detail-cta-row > .btn-cta,
body.is-phone .detail-cta-row > .btn-share,
html.is-android-webview .detail-cta-row > .btn-cta,
html.is-android-webview .detail-cta-row > .btn-share,
body.is-native .detail-cta-row > .btn-cta,
body.is-native .detail-cta-row > .btn-share {
  height: 50px;
  min-height: 50px;
  font-size: 14px;
  gap: 7px;
}
body.is-phone .detail-cta-row > .btn-cta::before,
html.is-android-webview .detail-cta-row > .btn-cta::before,
body.is-native .detail-cta-row > .btn-cta::before { width: 16px; height: 16px; flex-basis: 16px; }
.detail-head .install-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 0;
}
.detail-head .install-hint[hidden] { display: none; }
.detail-head .install-hint::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* —— Reviews v3: concept card, site typography, actions menu —— */
.reviews-card,
.reviews-card button,
.reviews-card textarea,
.reviews-card input { font-family: inherit; }
.reviews-card .review-item {
  position: relative;
  padding: 18px 20px 12px;
  border-radius: 18px;
}
.reviews-card .review-item-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 12px;
}
.reviews-card .review-who { gap: 3px; padding-top: 3px; }
.review-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reviews-card .review-author {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--text);
}
.review-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
}
.review-date { font-size: 13px; font-weight: 450; color: var(--muted); }
.review-side { display: grid; justify-items: end; gap: 6px; }
.review-more {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  margin: -4px -8px 0 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.review-more svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.review-more:hover,
.review-more[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
.review-more:focus-visible { outline: none; box-shadow: var(--focus); }
.reviews-card .review-stars { font-size: 15px; letter-spacing: 1px; align-self: auto; }
.reviews-card .review-body {
  margin: 0 0 16px;
  font-size: 15.5px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--text);
}
.review-modnote {
  display: inline-flex;
  margin: -6px 0 14px;
  padding: 3px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: color-mix(in srgb, #b45309 85%, var(--text));
  font-size: 12px;
  font-weight: 600;
}
.reviews-card .review-foot { padding-top: 10px; }
.reviews-card .review-helpful {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--accent);
}
.reviews-card .review-helpful.is-static { cursor: default; color: var(--muted); }
.reviews-card .review-helpful.is-static:hover { background: transparent; }
.reviews-card .review-helpful svg { width: 17px; height: 17px; }
.review-menu {
  position: absolute;
  top: 48px;
  right: 14px;
  z-index: 20;
  min-width: 210px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: var(--panel, #fff);
  box-shadow: 0 14px 34px rgba(15, 35, 80, .16);
  animation: reviewMenuIn 140ms ease-out;
}
@keyframes reviewMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.review-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.review-menu-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.review-menu-item:hover,
.review-menu-item.is-focused,
.review-menu-item:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.review-menu-item.is-danger,
.review-menu-item.is-danger svg { color: #dc2626; }
.review-edit { display: grid; gap: 10px; margin: 0 0 14px; }
.review-edit-input { width: 100%; min-height: 96px; box-sizing: border-box; }
.review-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
[data-theme="dark"] .review-menu {
  background: #0f2448;
  border-color: rgba(96, 165, 250, .32);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .review-badge { background: rgba(96, 165, 250, .16); color: #93c5fd; }
[data-theme="dark"] .reviews-card .review-helpful:not(.is-static) { color: #7cb4ff; }
[data-theme="dark"] .review-menu-item.is-danger,
[data-theme="dark"] .review-menu-item.is-danger svg { color: #f87171; }
[data-theme="dark"] .review-modnote { color: #fbbf24; background: rgba(245, 158, 11, .14); }
body.is-phone .reviews-card .review-item { padding: 14px 14px 10px; }
body.is-phone .reviews-card .review-item-head { gap: 12px; }
body.is-phone .review-avatar { width: 42px; height: 42px; font-size: 17px; }
body.is-phone .reviews-card .review-body { font-size: 15px; }
body.is-phone .review-menu { right: 10px; top: 44px; min-width: 190px; }
body.is-tv .review-more.is-focused,
body.is-tv .review-menu-item.is-focused { box-shadow: 0 0 0 3px #3b8cff; }
/* Footer logo is a link/button to home */
button.store-footer-mark,
a.store-footer-mark {
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 180ms ease;
}
button.store-footer-mark:active,
a.store-footer-mark:active { transform: scale(.96); }
button.store-footer-mark:focus-visible,
a.store-footer-mark:focus-visible { outline: none; box-shadow: var(--focus); }
body.is-tv button.store-footer-mark.is-focused { box-shadow: 0 0 0 3px #3b8cff; }
/* ===== Detail CTA v4: single thin border, compact PC widths, lift/press, poster readability ===== */
.detail-cta-row > .btn-cta { --cta-glow: rgba(37, 110, 255, .55); }
.detail-cta-row > .btn-cta.update { --cta-glow: rgba(99, 91, 255, .55); }
.detail-cta-row > .btn-cta.open { --cta-glow: rgba(37, 99, 235, .5); }
html[data-theme] body .detail-cta-row > .btn.btn-cta {
  box-shadow: inset 0 0 0 1px rgba(191, 229, 255, .5), 0 10px 20px -8px var(--cta-glow) !important;
}
html[data-theme] body .detail-cta-row > .btn.btn-cta:disabled,
html[data-theme] body .detail-cta-row > .btn.btn-cta.is-disabled { box-shadow: none !important; }
html body .detail-cta-row > .btn.btn-cta.is-downloading {
  opacity: 1 !important;
  filter: none !important;
  color: #fff !important;
  cursor: progress;
  background: linear-gradient(90deg, #2f6bff, #22c3ee) 0 0 / var(--dl-pct, 0%) 100% no-repeat, #9fb0d0 !important;
  transition: background-size 200ms linear;
}
html[data-theme="dark"] body .detail-cta-row > .btn.btn-cta.is-downloading {
  background: linear-gradient(90deg, #2f6bff, #22c3ee) 0 0 / var(--dl-pct, 0%) 100% no-repeat, #2a3a5c !important;
}
.detail-cta-row > .btn-cta,
.detail-cta-row > .btn-share {
  transition: transform 180ms cubic-bezier(.22, .8, .28, 1), box-shadow 200ms ease, background 200ms ease, border-color 200ms ease, filter 200ms ease;
}
/* Share over a poster: translucent navy + light-blue border, readable on dark art */
.detail-hero.has-poster .detail-cta-row > .btn-share {
  background: rgba(24, 56, 110, .58) !important;
  color: #fff !important;
  border: 1px solid rgba(125, 200, 255, .7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail-hero.has-poster .detail-cta-row > .btn-share .share-ico { color: #a5dcff; }
[data-theme="dark"] .detail-hero:not(.has-poster) .detail-cta-row > .btn-share {
  background: #15315f !important;
  border-color: rgba(125, 200, 255, .55) !important;
}
/* PC / TV layout: compact buttons instead of stretching */
body.is-tv .detail-head > .detail-cta-row,
body.is-tv .detail-head .detail-cta-row {
  grid-template-columns: 272px 212px;
  justify-content: start;
  max-width: none;
}
/* Remote / keyboard focus: one light-blue ring, no white gap */
html body.is-tv .detail-cta-row > .btn.btn-cta.is-focused,
html body.is-tv .detail-cta-row > .btn.btn-cta:focus-visible {
  transform: none;
  box-shadow: 0 0 0 3px #8fd0ff, 0 10px 24px -8px var(--cta-glow) !important;
}
html body.is-tv .detail-cta-row > .btn.btn-share.is-focused,
html body.is-tv .detail-cta-row > .btn.btn-share:focus-visible {
  transform: none;
  box-shadow: 0 0 0 3px #8fd0ff !important;
}
@media (hover: hover) and (pointer: fine) {
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn.btn-cta:is(.is-focused, :focus-visible):not(:hover) {
    box-shadow: inset 0 0 0 1px rgba(191, 229, 255, .5), 0 10px 20px -8px var(--cta-glow) !important;
  }
  html:not(.is-android-tv):not([data-kbd]) body.is-tv .detail-cta-row > .btn.btn-share:is(.is-focused, :focus-visible):not(:hover) {
    box-shadow: none !important;
  }
  html body .detail-cta-row > .btn.btn-cta:hover:not(:disabled):not(.is-disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.05);
    box-shadow: inset 0 0 0 1px rgba(191, 229, 255, .75), 0 14px 28px -8px var(--cta-glow), 0 0 22px -6px rgba(56, 189, 248, .55) !important;
  }
  html body .detail-cta-row > .btn.btn-share:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .45) !important;
  }
  .detail-hero.has-poster .detail-cta-row > .btn-share:hover {
    background: rgba(32, 72, 138, .68) !important;
    border-color: rgba(165, 220, 255, .9) !important;
  }
}
html body .detail-cta-row > .btn.btn-cta:active:not(:disabled),
html body .detail-cta-row > .btn.btn-share:active {
  transform: scale(.97);
  filter: brightness(.96);
  transition-duration: 90ms;
}
/* Poster: blur only behind the title + buttons, right side stays sharp */
html:not(.is-android-tv) .detail-hero.has-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 50%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0, 0, 0, .55) 50%, transparent 66%);
}
html.is-android-tv .detail-hero.has-poster::before {
  background: linear-gradient(100deg, rgba(2, 8, 20, .96) 0%, rgba(3, 10, 24, .92) 30%, rgba(4, 14, 30, .7) 52%, rgba(5, 16, 34, .3) 74%, transparent 100%);
}
.detail-hero.has-poster #dTitle,
.detail-hero.has-poster .detail-head h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.detail-hero.has-poster #dSub,
.detail-hero.has-poster #dMetaLine,
.detail-hero.has-poster .install-hint { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
/* ===== Installed apps: open / uninstall / install issue / choice dialog / library menu ===== */
.detail-cta-row > [hidden],
.detail-manage[hidden],
.install-issue[hidden],
.install-issue [hidden] { display: none !important; }
.detail-cta-row > .btn-open-alt .share-ico { fill: none; }
body.is-tv .detail-head > .detail-cta-row.has-open,
body.is-tv .detail-head .detail-cta-row.has-open { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
body.is-phone .detail-cta-row.has-open,
html.is-android-webview body:not(.is-tv) .detail-cta-row.has-open {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.is-phone .detail-cta-row.has-open > .btn-cta,
body.is-phone .detail-cta-row.has-open > .btn-open-alt,
html.is-android-webview body:not(.is-tv) .detail-cta-row.has-open > .btn-cta,
html.is-android-webview body:not(.is-tv) .detail-cta-row.has-open > .btn-open-alt {
  grid-column: auto;
  width: 100% !important;
  min-height: 48px;
  height: 48px;
}
/* Phone: uninstall only in overflow menu — hide bulky manage row */
body.is-phone .detail-manage { display: none !important; }

/* «Удалить приложение» — quiet row, red accent only on text/icon */
.detail-head > .detail-manage {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  margin-top: 2px;
  padding-top: 4px;
}
body.is-tv .detail-head > .detail-manage { max-width: 496px; }
.manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.manage-row span { flex: 1; min-width: 0; }
.manage-row svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.manage-row .manage-chev { width: 18px; height: 18px; opacity: .55; }
.manage-row.is-danger { color: #dc2626; }
.manage-row:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .manage-row.is-danger:hover:not(:disabled) { background: rgba(239, 68, 68, .07); }
}
.manage-row:active:not(:disabled) { transform: scale(.985); }
.manage-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(248, 113, 113, .45); }
body.is-tv .manage-row.is-focused { box-shadow: 0 0 0 3px #8fd0ff; background: rgba(239, 68, 68, .08); }
[data-theme="dark"] .manage-row.is-danger { color: #f87171; }
.detail-hero.has-poster .detail-head > .detail-manage { border-top-color: rgba(255, 255, 255, .16); }
.detail-hero.has-poster .manage-row.is-danger { color: #fca5a5; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* Install / update failure card (under the hero) */
.install-issue {
  margin: 0 0 14px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(239, 68, 68, .26);
  background: linear-gradient(180deg, #fffafa, var(--panel, #fff));
  box-shadow: var(--shadow-soft);
}
.install-issue.is-ready {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel));
}
.install-issue.is-flash { animation: issueFlash 1.2s ease; }
@keyframes issueFlash {
  0%, 100% { box-shadow: var(--shadow-soft); }
  35% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .28), var(--shadow-soft); }
}
.install-issue-head { display: flex; align-items: center; gap: 10px; }
.install-issue-head h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; color: var(--text); }
.install-issue-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: #d97706; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.install-issue.is-ready .install-issue-ico { stroke: var(--accent); }
.install-issue-text { margin: 8px 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.install-issue-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.issue-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn.issue-btn.is-secondary { background: #eaf2ff; color: #1d4ed8; border: 1px solid #cfe0fb; }
.btn.issue-btn.is-danger { background: var(--panel, #fff); color: #b91c1c; border: 1px solid rgba(220, 38, 38, .42); }
.btn.issue-btn.is-primary { background: linear-gradient(90deg, #2f6bff, #1aa7f5 62%, #1fc1f2); color: #fff; border: 0; box-shadow: 0 10px 20px -10px rgba(37, 110, 255, .6); }
.btn.issue-btn:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn.issue-btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn.issue-btn.is-danger:hover:not(:disabled) { background: rgba(239, 68, 68, .06); }
}
body.is-tv .btn.issue-btn.is-focused { box-shadow: 0 0 0 3px #8fd0ff; transform: none; }
.install-issue-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: #b45309; font-size: 12.5px; line-height: 1.45; }
.install-issue-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
[data-theme="dark"] .install-issue {
  background: linear-gradient(180deg, #1a1c38, #0c1e3d);
  border-color: rgba(248, 113, 113, .34);
}
[data-theme="dark"] .install-issue.is-ready { background: #0c1e3d; border-color: rgba(96, 165, 250, .4); }
[data-theme="dark"] .btn.issue-btn.is-secondary { background: #143263; color: #bfdbfe; border-color: rgba(96, 165, 250, .4); }
[data-theme="dark"] .btn.issue-btn.is-danger { background: transparent; color: #fca5a5; border-color: rgba(248, 113, 113, .5); }
[data-theme="dark"] .install-issue-note { color: #fbbf24; }
body.is-phone .install-issue { margin: 12px 0; padding: 14px; }
body.is-phone .install-issue-actions .issue-btn { flex: 1 1 auto; }

/* Choice dialog (uninstall confirm, reinstall, install result) */
.choice-card { gap: 6px; width: min(440px, calc(100vw - 28px)); }
.choice-head { display: flex; align-items: center; gap: 12px; }
.choice-head h3 { margin: 0; }
.choice-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.choice-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.choice-ico.is-trash { background: rgba(239, 68, 68, .12); color: #dc2626; }
.choice-ico.is-warn { background: rgba(245, 158, 11, .14); color: #d97706; }
.choice-ico.is-ok { background: rgba(34, 197, 94, .13); color: #16a34a; }
.choice-msg { margin: 6px 0 4px; }
.choice-note { display: flex; gap: 8px; margin: 2px 0 8px; padding: 10px 12px; border-radius: 12px; background: rgba(245, 158, 11, .1); color: #92400e; font-size: 13px; line-height: 1.45; }
.choice-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.choice-actions { gap: 10px; }
.btn.choice-btn {
  min-height: 46px; padding: 0 18px; border-radius: 14px; font-size: 15px; font-weight: 700;
  flex: 1 1 auto; min-width: 120px; box-shadow: none;
  transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn.choice-btn.is-ghost { background: color-mix(in srgb, var(--panel) 80%, var(--line)); color: var(--text); border: 1px solid var(--line); }
.btn.choice-btn.is-secondary { background: #eaf2ff; color: #1d4ed8; border: 1px solid #cfe0fb; }
.btn.choice-btn.is-danger { background: linear-gradient(90deg, #ef4444, #dc2626); color: #fff; border: 0; box-shadow: 0 10px 20px -10px rgba(220, 38, 38, .6); }
.btn.choice-btn.is-primary { background: linear-gradient(90deg, #2f6bff, #1aa7f5 62%, #1fc1f2); color: #fff; border: 0; box-shadow: 0 10px 20px -10px rgba(37, 110, 255, .6); }
.btn.choice-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn.choice-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
}
body.is-tv .btn.choice-btn.is-focused,
.btn.choice-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #8fd0ff; transform: none; }
[data-theme="dark"] .btn.choice-btn.is-ghost { background: #132a52; color: #e8f0ff; border-color: rgba(96, 165, 250, .35); }
[data-theme="dark"] .btn.choice-btn.is-secondary { background: #143263; color: #bfdbfe; border-color: rgba(96, 165, 250, .4); }
[data-theme="dark"] .choice-note { background: rgba(245, 158, 11, .12); color: #fcd34d; }
body.is-phone .choice-actions { flex-direction: column-reverse; }
body.is-phone .btn.choice-btn { width: 100%; }

/* Library: «⋯» menu per installed app */
.update-card.lib-card,
body.is-tv .update-card.lib-card { position: relative; grid-template-columns: 64px minmax(0, 1fr) auto; }
.lib-more {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; transition: background 160ms ease, box-shadow 160ms ease;
}
.lib-more svg { width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .lib-more:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } }
.lib-more[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
body.is-tv .lib-more.is-focused,
.lib-more:focus-visible { outline: none; box-shadow: 0 0 0 3px #8fd0ff; }
.lib-menu {
  position: absolute; top: 54px; right: 12px; z-index: 25;
  min-width: 210px; display: grid; gap: 2px; padding: 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background: var(--panel, #fff);
  box-shadow: 0 14px 34px rgba(15, 35, 80, .16);
  animation: reviewMenuIn 140ms ease-out;
  cursor: default;
  scroll-margin: 96px 0 24px;
}
.lib-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.lib-menu-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.lib-menu-item:hover,
.lib-menu-item.is-focused,
.lib-menu-item:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 9%, transparent); }
body.is-tv .lib-menu-item.is-focused { box-shadow: 0 0 0 3px #8fd0ff; }
.lib-menu-item.is-danger,
.lib-menu-item.is-danger svg { color: #dc2626; }
.lib-issue { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: #b45309; font-size: 12.5px; line-height: 1.4; }
.lib-issue svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.link-more.is-danger { color: #dc2626; }
[data-theme="dark"] .lib-menu { background: #0f2448; border-color: rgba(96, 165, 250, .32); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
[data-theme="dark"] .lib-menu-item.is-danger,
[data-theme="dark"] .lib-menu-item.is-danger svg,
[data-theme="dark"] .link-more.is-danger { color: #f87171; }
[data-theme="dark"] .lib-issue { color: #fbbf24; }
body.is-phone .lib-menu { right: 8px; top: 50px; min-width: 196px; }

/* ===== Catalog view modes: grid (default) / poster / list ===== */
.apps-viewmode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--panel-glass, var(--panel));
  box-shadow: var(--shadow-soft);
  flex: 0 0 auto;
}
.vm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.vm-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-btn:hover { color: var(--text); }
.vm-btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.vm-btn.is-focused,
.vm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #3b8cff; }
body.is-phone .vm-btn span { display: none; }
body.is-phone .vm-btn { padding: 0 11px; }
@media (max-width: 860px) {
  .vm-btn span { display: none; }
  .vm-btn { padding: 0 11px; }
}

.apps-grid.apps-view-poster {
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 16px;
}
.app-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel-glass, var(--panel));
  border: 1.5px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  outline: none;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.poster-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.poster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) saturate(1.5);
  transform: scale(1.6);
  opacity: .9;
}
.poster-bg.is-banner { filter: none; transform: none; opacity: 1; }
.poster-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .32));
  pointer-events: none;
}
.poster-icon {
  position: relative;
  z-index: 1;
  width: 42%;
  max-width: 96px;
  aspect-ratio: 1;
  height: auto;
  border-radius: var(--icon-radius, 22%);
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.poster-bg.is-banner ~ .poster-icon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 56px;
}
.poster-body { display: grid; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.poster-title {
  font-weight: 800; font-size: 15px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poster-meta,
.row-meta {
  color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.poster-meta .star,
.row-meta .star { color: #f5b301; }
.app-poster .btn { justify-self: start; padding: 7px 16px; font-size: 12.5px; margin-top: 2px; }

.apps-grid.apps-view-list {
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  gap: 10px 14px;
}
.app-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--panel-glass, var(--panel));
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  outline: none;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.row-icon {
  width: 56px; height: 56px;
  border-radius: var(--icon-radius, 22%);
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
}
.row-info { display: grid; gap: 3px; min-width: 0; }
.row-title {
  font-weight: 800; font-size: 14.5px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-desc {
  color: var(--muted); font-size: 12.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row .btn { padding: 8px 16px; font-size: 12.5px; white-space: nowrap; }

@media (hover: hover) {
  .app-poster:hover,
  .app-row:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(23, 105, 255, .35); }
}
.app-poster.is-focused,
.app-poster:focus-visible,
.app-row.is-focused,
.app-row:focus-visible {
  border-color: transparent;
  box-shadow: 0 0 0 3px #3b8cff, 0 5px 12px rgba(59, 140, 255, .18);
}
body.is-phone .apps-grid.apps-view-poster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.is-phone .poster-body { padding: 10px 12px 12px; }
body.is-phone .poster-title { font-size: 14px; }
body.is-phone .app-row { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; }
body.is-phone .row-icon { width: 50px; height: 50px; }
body.is-phone .app-poster,
body.is-phone .app-row { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
body.is-tv .app-poster,
body.is-tv .app-row { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Web (desktop browser): slightly larger catalog tiles */
html:not(.is-android-tv) body.is-tv .apps-grid.apps-view-grid,
html:not(.is-android-tv) body.is-tv #searchList.apps-grid {
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 16px;
}
html:not(.is-android-tv) body.is-tv .apps-grid .app-card {
  max-width: none;
  min-width: 0;
  min-height: 142px;
  padding: 14px;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 5px;
  border-radius: 18px;
}
html:not(.is-android-tv) body.is-tv .apps-grid .app-card img { width: 64px; height: 64px; }
html:not(.is-android-tv) body.is-tv .apps-grid .app-card .card-title { font-size: 15px; }
html:not(.is-android-tv) body.is-tv .apps-grid .app-card .card-desc { font-size: 12.5px; }
html:not(.is-android-tv) body.is-tv .apps-grid .app-card .card-meta { font-size: 12px; }
html:not(.is-android-tv) body.is-tv .apps-grid .app-card .btn { padding: 7px 16px; font-size: 12.5px; }
html:not(.is-android-tv) body.is-tv .apps-grid.apps-view-poster { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }

/* Settings sub-page header: back + section icon + title, left aligned */
#settingsHead { justify-content: flex-start; gap: 12px; margin-bottom: 14px; }
.settings-head-text { display: grid; gap: 1px; min-width: 0; }
.settings-crumb { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.settings-crumb[hidden],
.settings-head-ico[hidden] { display: none !important; }
#settingsHead.is-sub h3 { font-size: 22px; line-height: 1.15; }
.settings-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.settings-back { box-shadow: var(--shadow-soft); transition: background var(--ease), border-color var(--ease); }
.settings-back:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.settings-head-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  color: var(--accent);
}
.settings-head-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.settings-toggle-row .settings-row-ico { flex: 0 0 40px; }
body.is-tv #settingsHead.is-sub h3 { font-size: 24px; }
body.is-tv .apps-grid .btn.update,
html.is-android-tv .apps-grid .btn.update,
body.is-tv .h-scroll .app-card .btn.update,
html.is-android-tv .h-scroll .app-card .btn.update {
  min-height: 0;
  font-size: 12.5px;
  padding: 7px 16px;
}

/* ===== Pull-to-refresh: 40px circle with arrow, rubber-band shift of the content (max 60px) ===== */
html:has(> body.is-phone), body.is-phone { overscroll-behavior-y: none; }
.pull-refresh {
  position: fixed; left: 0; right: 0; top: 0; height: 84px; z-index: 30;
  display: flex; justify-content: center;
  overflow: hidden; pointer-events: none; visibility: hidden;
}
.pull-refresh:not([data-state="idle"]) { visibility: visible; }
.ptr-pill {
  height: 40px; min-width: 40px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 4px; padding: 0;
  border-radius: 999px;
  background: var(--panel, #fff); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 6px 18px rgba(15, 40, 90, .16);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  transform: translate3d(0, var(--ptr-y, -46px), 0);
  opacity: var(--ptr-o, 1);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, color .2s ease, border-color .2s ease;
}
.pull-refresh.is-dragging .ptr-pill { transition: color .2s ease, border-color .2s ease; }
.ptr-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.ptr-ico svg {
  grid-area: 1 / 1; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.6);
  transition: opacity .16s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.pull-refresh[data-state="pull"] .ptr-arrow,
.pull-refresh[data-state="armed"] .ptr-arrow { opacity: 1; transform: none; }
.pull-refresh[data-state="armed"] .ptr-arrow { transform: rotate(180deg); }
.pull-refresh[data-state="loading"] .ptr-spin { opacity: 1; transform: none; animation: ptr-spin .8s linear infinite; }
.pull-refresh[data-state="done"] .ptr-check,
.pull-refresh[data-state="error"] .ptr-warn { opacity: 1; transform: none; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.ptr-label { display: none; white-space: nowrap; line-height: 1; max-width: calc(100vw - 84px); overflow: hidden; text-overflow: ellipsis; }
.pull-refresh:is([data-state="armed"], [data-state="loading"], [data-state="done"], [data-state="error"]) .ptr-label { display: inline; }
.pull-refresh:is([data-state="armed"], [data-state="loading"], [data-state="done"]) .ptr-pill { padding-right: 14px; }
.ptr-retry {
  display: none; align-items: center; height: 30px; margin-left: 6px; padding: 0 12px;
  border: 0; border-radius: 999px; pointer-events: auto; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2, #5b9bff)); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 750;
}
.pull-refresh[data-state="error"] .ptr-retry { display: inline-flex; }
.pull-refresh[data-state="error"] .ptr-pill { padding-right: 5px; color: #b45309; border-color: rgba(245, 158, 11, .45); pointer-events: auto; }
.pull-refresh[data-state="done"] .ptr-pill { color: #15803d; border-color: rgba(34, 197, 94, .38); }
[data-theme="dark"] .ptr-pill { background: #0f2448; border-color: rgba(96, 165, 250, .35); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
[data-theme="dark"] .pull-refresh[data-state="error"] .ptr-pill { color: #fcd34d; border-color: rgba(251, 191, 36, .45); }
[data-theme="dark"] .pull-refresh[data-state="done"] .ptr-pill { color: #86efac; border-color: rgba(74, 222, 128, .4); }
body.is-tv .pull-refresh { display: none !important; }
/* ===== Updates page: compact cards, sections, status accents ===== */
.updates-list .upd-section { display: grid; gap: 8px; }
.updates-list .upd-section + .upd-section { margin-top: 10px; }
.upd-section-head { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; }
.upd-section-head h4 { margin: 0; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--text); }
.upd-count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  display: inline-grid; place-items: center; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.upd-section.is-warn .upd-count { background: rgba(245, 158, 11, .16); color: #b45309; }
.upd-none { margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; }

.upd-card { --upd-tone: #2f7bff; --upd-tone-bg: rgba(47, 123, 255, .1); --upd-tone-text: #1d5fd6; }
.upd-card.tone-warn { --upd-tone: #f59e0b; --upd-tone-bg: rgba(245, 158, 11, .14); --upd-tone-text: #b45309; }
.upd-card.tone-neutral { --upd-tone: #94a3b8; --upd-tone-bg: rgba(148, 163, 184, .16); --upd-tone-text: #5b6b85; }
.updates-list .update-card.upd-card {
  position: relative;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center; gap: 10px 12px;
  padding: 10px 12px 10px 14px; border-radius: 16px; opacity: 1;
}
.updates-list .update-card.upd-card.tone-warn { border-color: rgba(245, 158, 11, .34); }
.upd-card.tone-warn::before,
.upd-card.tone-neutral::before,
.upd-card.is-blocked::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--upd-tone);
}
.updates-list .upd-card.tone-ok::before { content: none; }
.updates-list .upd-card .update-icon { width: 48px; height: 48px; align-self: center; }
.updates-list .upd-card .update-body { min-width: 0; }
.updates-list .upd-card .update-title,
.updates-list .lib-card .update-title {
  font-size: 15px; line-height: 1.25;
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: break-word;
}
.upd-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upd-ver b { color: var(--text); font-weight: 750; }
.upd-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upd-sep { opacity: .6; }
.upd-status {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  margin-top: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--upd-tone-bg); color: var(--upd-tone-text);
  font-size: 12px; font-weight: 750; line-height: 1.3;
}
.upd-status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--upd-tone); }
.upd-note { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.upd-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.upd-link { padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.upd-side { align-self: center; flex: 0 0 auto; }
.btn.upd-btn { min-height: 46px; padding: 0 16px; border-radius: 14px; font-size: 14px; white-space: nowrap; }
.upd-foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.upd-foot.is-single { grid-template-columns: 1fr; }
.upd-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 12px; border-radius: 14px;
  border: 1px solid #cfe0fb; background: #eaf2ff; color: #1d4ed8;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: transform 140ms ease, background 160ms ease, box-shadow 160ms ease;
}
.upd-act svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.upd-act.is-danger { background: var(--panel, #fff); color: #b91c1c; border-color: rgba(220, 38, 38, .42); }
.upd-act:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .upd-act:hover { filter: brightness(1.02); }
  .upd-act.is-danger:hover { background: rgba(239, 68, 68, .06); }
}
body.is-tv .upd-act.is-focused, .upd-act:focus-visible,
body.is-tv .upd-link.is-focused, .upd-link:focus-visible { outline: none; box-shadow: 0 0 0 3px #8fd0ff; }
body.is-tv .upd-link.is-focused { border-radius: 8px; padding: 6px 8px; }
[data-theme="dark"] .upd-card { --upd-tone: #4da3ff; --upd-tone-bg: rgba(77, 163, 255, .15); --upd-tone-text: #9ccbff; }
[data-theme="dark"] .upd-card.tone-warn { --upd-tone: #fbbf24; --upd-tone-bg: rgba(251, 191, 36, .14); --upd-tone-text: #fcd34d; }
[data-theme="dark"] .upd-card.tone-neutral { --upd-tone: #94a3b8; --upd-tone-bg: rgba(148, 163, 184, .14); --upd-tone-text: #cbd5e1; }
[data-theme="dark"] .updates-list .update-card.upd-card.tone-warn { border-color: rgba(251, 191, 36, .3); }
[data-theme="dark"] .upd-section.is-warn .upd-count { background: rgba(251, 191, 36, .16); color: #fcd34d; }
[data-theme="dark"] .upd-act { background: #143263; color: #bfdbfe; border-color: rgba(96, 165, 250, .4); }
[data-theme="dark"] .upd-act.is-danger { background: transparent; color: #fca5a5; border-color: rgba(248, 113, 113, .5); }
body.is-tv .updates-list .update-card.upd-card { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 16px 12px 16px; }
body.is-tv .updates-list .upd-card .update-icon { width: 56px; height: 56px; }
body.is-tv .updates-list .upd-card .update-title { font-size: 17px; }
body.is-tv .updates-list .upd-foot { grid-template-columns: repeat(2, minmax(0, 220px)); }
body.is-tv .updates-list .upd-foot.is-single { grid-template-columns: minmax(0, 220px); }

/* Library cards: same compact rhythm */
.updates-list .update-card.lib-card { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 10px 8px 10px 12px; }
.updates-list .lib-card .update-icon { width: 48px; height: 48px; align-self: center; }
.updates-list .lib-card .update-actions { margin-top: 6px; }
.updates-list .lib-card .update-actions .btn { min-height: 46px; padding: 0 18px; border-radius: 14px; font-size: 14px; }
body.is-tv .updates-list .update-card.lib-card { grid-template-columns: 56px minmax(0, 1fr) auto; }
body.is-tv .updates-list .lib-card .update-icon { width: 56px; height: 56px; }

/* Phone: keep tappable controls */
.updates-head-actions .btn { min-height: 46px; padding: 0 16px; border-radius: 14px; font-size: 14px; }
.btn.issue-btn { min-height: 46px; border-radius: 14px; }
body.is-phone .self-update-banner { padding: 10px 12px; border-radius: 16px; margin-top: 8px; }
body.is-phone .self-update-banner .btn { min-height: 46px; padding: 0 16px; border-radius: 14px; }
@media (max-width: 380px) {
  .updates-list .update-card.upd-card { grid-template-columns: 44px minmax(0, 1fr); }
  .updates-list .upd-card .update-icon { width: 44px; height: 44px; }
  .upd-side { grid-column: 1 / -1; }
  .upd-side .btn { width: 100%; }
}

/* ===== «Для вас»: center star button page ===== */
.nav-item.center { transition: transform .18s ease, box-shadow .25s ease, filter .25s ease; }
.nav-item.center:active { transform: translateY(2px) scale(.94); }
.nav-item.center.active {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 22px color-mix(in srgb, #7c5cff 55%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.fy-hub, .fy-page { display: grid; gap: 14px; padding-bottom: 8px; }
.fy-hub[hidden], .fy-page[hidden] { display: none; }
.fy-card {
  border-radius: 22px; padding: 18px 16px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  box-shadow: 0 10px 28px rgba(37, 99, 235, .08);
}
.fy-head { display: flex; align-items: center; gap: 14px; padding: 0 2px 16px; border-bottom: 1px solid var(--line); }
.fy-badge {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3b82f6, #7c5cff);
  box-shadow: 0 8px 20px rgba(91, 92, 255, .32);
}
.fy-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.fy-head-text { min-width: 0; }
.fy-head-text h3 { margin: 0; font-size: 21px; line-height: 1.2; color: var(--text); }
.fy-head-text p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.fy-menu { display: grid; padding-top: 6px; }
.fy-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 4px; border: 0; border-radius: 16px;
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: background .18s ease;
}
.fy-row + .fy-row { border-top: 1px solid var(--line); border-radius: 0; }
.fy-row:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fy-row-ico {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.fy-row-ico svg, .fy-row-chev, .fy-back svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fy-row-ico svg { width: 22px; height: 22px; }
.fy-row-text { display: grid; gap: 3px; min-width: 0; }
.fy-row-title { font-size: 16px; font-weight: 700; line-height: 1.25; }
.fy-row-sub { font-size: 13px; line-height: 1.3; color: var(--muted); }
.fy-row-peek { display: flex; padding-left: 8px; }
.fy-row-peek img {
  width: 26px; height: 26px; border-radius: 8px; margin-left: -8px; object-fit: cover;
  background: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}
.fy-row-chev { width: 18px; height: 18px; color: var(--muted); }
.fy-personal {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid var(--line);
}
.fy-personal-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.fy-personal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.fy-personal-sub { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.fy-switch {
  flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(148, 163, 184, .45); cursor: pointer; transition: background .2s ease;
}
.fy-switch span {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .25); transition: transform .2s ease;
}
.fy-switch.is-on { background: linear-gradient(135deg, #3b82f6, #7c5cff); }
.fy-switch.is-on span { transform: translateX(22px); }
.fy-page-head { display: flex; align-items: center; gap: 12px; }
.fy-back {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent);
}
.fy-back svg { width: 22px; height: 22px; }
.fy-page-text { min-width: 0; }
.fy-page-text h3 { margin: 0; font-size: 20px; line-height: 1.2; color: var(--text); }
.fy-page-text p { margin: 3px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
[data-theme="dark"] .fy-card {
  background: linear-gradient(180deg, #0c1e3d 0%, #0a1830 100%);
  border-color: rgba(70, 150, 255, .22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
[data-theme="dark"] .fy-row-ico { background: rgba(77, 163, 255, .14); color: #9ccbff; }
[data-theme="dark"] .fy-row-peek img { background: #0c1e3d; border-color: #0c1e3d; box-shadow: none; }
[data-theme="dark"] .fy-switch:not(.is-on) { background: rgba(148, 163, 184, .3); }
body.is-tv .fy-hub, body.is-tv .fy-page { max-width: 820px; }
body.is-tv .fy-row { padding: 12px 10px; }
body.is-tv .fy-row.is-focused, .fy-row:focus-visible,
body.is-tv .fy-back.is-focused, .fy-back:focus-visible,
body.is-tv .fy-switch.is-focused, .fy-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px #8fd0ff; border-radius: 16px; }
body.is-tv .fy-switch.is-focused { border-radius: 999px; }
@media (max-width: 379px) {
  .fy-row { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; }
  .fy-row-ico { width: 40px; height: 40px; }
  .fy-row-peek { display: none; }
}
/* === Versions entry (below poster) + sheet/modal === */
.versions-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line, #d7e3f4);
  border-radius: 18px;
  background: var(--panel, #fff);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.versions-entry[hidden] { display: none !important; }
.versions-entry:hover, .versions-entry.is-focused, .versions-entry:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.versions-entry-ico {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.versions-entry-ico svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.versions-entry-text { min-width: 0; display: grid; gap: 2px; }
.versions-entry-title { font-weight: 800; font-size: 15px; line-height: 1.25; }
.versions-entry-sub { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.versions-entry-chev {
  width: 18px; height: 18px; justify-self: end;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[data-theme="dark"] .versions-entry {
  background: #0c1e3d; border-color: rgba(70, 150, 255, .22);
}

.versions-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 18, 40, .48); padding: 0;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: versionsFadeIn 180ms ease;
}
.versions-overlay[hidden] { display: none !important; animation: none; }
@keyframes versionsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes versionsSheetUp {
  from { transform: translateY(28px); opacity: .92; }
  to { transform: translateY(0); opacity: 1; }
}
.versions-sheet {
  width: min(720px, 100%); max-height: min(88vh, 860px);
  display: flex; flex-direction: column;
  background: var(--panel, #fff); color: var(--text);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 40, 80, .18);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: versionsSheetUp 220ms cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.versions-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.versions-sheet-head h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; }
.versions-sheet-close { min-width: 44px; min-height: 44px; border-radius: 14px; flex: 0 0 auto; }
.versions-device-pick { margin-bottom: 12px; }
.versions-device-pick p { margin: 0 0 8px; }
.versions-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.versions-filters[hidden], .versions-device-pick[hidden] { display: none !important; }
.versions-filter {
  border: 1px solid var(--line, #d7e3f4);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.versions-filter.is-active, .versions-filter.is-focused, .versions-filter:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent); color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.versions-other {
  flex: 0 0 auto;
  margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line, #d7e3f4));
  padding-top: 4px;
  max-height: 42%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.versions-other[hidden] { display: none !important; }
.versions-other-list {
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.versions-other-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; text-align: left;
}
.versions-other-chev {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms ease;
}
.versions-other-toggle[aria-expanded="true"] .versions-other-chev { transform: rotate(180deg); }
.versions-other-list { padding: 4px 0 2px; }
.versions-other-list[hidden] { display: none !important; }
/* Open beside Update: outline secondary on poster hero */
.detail-hero.has-poster .detail-cta-row > .btn-open-alt {
  background: rgba(8, 20, 42, .35) !important;
  color: #f2f8ff !important;
  border: 1.5px solid rgba(210, 230, 255, .55) !important;
  box-shadow: none !important;
}
.detail-hero.has-poster .detail-cta-row > .btn-open-alt .share-ico { color: #e8f4ff; stroke: #e8f4ff; fill: none; }
.versions-item-more {
  margin-top: 2px; padding: 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.versions-item-details {
  margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted);
}
.versions-item-details[hidden] { display: none !important; }
.versions-item-badge.is-installed {
  background: rgba(37, 99, 235, .12); color: #1d4ed8;
}
.versions-item-badge.is-update {
  background: rgba(34, 197, 94, .14); color: #15803d;
}
[data-theme="dark"] .versions-item-badge.is-installed { background: rgba(96, 165, 250, .16); color: #93c5fd; }
[data-theme="dark"] .versions-item-badge.is-update { background: rgba(74, 222, 128, .14); color: #86efac; }
.versions-sheet-note { margin: 0 0 8px; }
.versions-sheet-list {
  overflow: auto; flex: 1; min-height: 0;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.versions-empty {
  text-align: center; padding: 36px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 16px; background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.versions-empty strong { display: block; margin-bottom: 6px; font-size: 15px; }
.versions-empty p { margin: 0; }
/* Compact card: info + download icon on one row (mock) */
.versions-card {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line, #d7e3f4));
  border-radius: 18px;
  background: color-mix(in srgb, #eaf2ff 55%, var(--panel, #fff));
  overflow: hidden;
}
.versions-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.versions-item + .versions-item {
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line, #d7e3f4));
}
.versions-item.is-warn { background: color-mix(in srgb, #f59e0b 7%, transparent); }
.versions-item-main { min-width: 0; display: grid; gap: 3px; }
.versions-item-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.versions-item-title {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  color: var(--text); line-height: 1.2;
}
.versions-item-badge {
  font-size: 11px; font-weight: 750; padding: 3px 9px; border-radius: 999px;
  line-height: 1.2;
}
.versions-item-badge.is-current {
  background: rgba(34, 197, 94, .14); color: #15803d;
}
.versions-item-badge.is-warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309;
}
.versions-item-meta {
  color: var(--muted); font-size: 13px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.versions-item-tech {
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 12px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.versions-item-note {
  margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: #b45309;
}
.versions-dl {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 16%, #e8f1ff);
  color: var(--accent);
  transition: transform 140ms ease, filter 140ms ease, background 160ms ease;
}
.versions-dl svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.versions-dl.is-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2, #5b9bff));
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.versions-dl:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .versions-dl:hover { filter: brightness(1.04); }
}
[data-theme="dark"] .versions-sheet {
  background: #0c1e3d; border: 1px solid rgba(70, 150, 255, .22); box-shadow: 0 -16px 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .versions-card {
  background: #0a1830; border-color: rgba(70, 150, 255, .22);
}
[data-theme="dark"] .versions-item + .versions-item { border-top-color: rgba(70, 150, 255, .16); }
[data-theme="dark"] .versions-item-badge.is-current { background: rgba(74, 222, 128, .14); color: #86efac; }
[data-theme="dark"] .versions-dl { background: #143263; color: #9ccbff; }
[data-theme="dark"] .versions-dl.is-primary { color: #fff; }
[data-theme="dark"] .versions-empty { border-color: rgba(70, 150, 255, .28); background: rgba(20, 50, 100, .25); }

/* Phone: bottom sheet above nav */
body.is-phone .versions-overlay,
html.is-android-webview .versions-overlay,
body.is-native:not(.is-tv) .versions-overlay {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  align-items: flex-end;
}
/* PC: centered modal ~720px */
@media (min-width: 880px) {
  .versions-overlay { align-items: center; padding: 28px; }
  .versions-sheet {
    border-radius: 20px; max-height: min(80vh, 760px); width: min(720px, 100%);
    padding: 20px 20px 18px;
    animation: versionsFadeIn 180ms ease;
  }
}
/* Android TV: large modal, D-pad friendly */
body.is-tv .versions-overlay,
html.is-android-tv .versions-overlay {
  align-items: center; padding: 40px; background: rgba(4, 12, 28, .66);
}
body.is-tv .versions-sheet,
html.is-android-tv .versions-sheet {
  width: min(920px, 92vw); max-height: 84vh; border-radius: 24px; padding: 22px 24px;
}
body.is-tv .versions-entry { min-height: 72px; padding: 16px 18px; border-radius: 20px; }
body.is-tv .versions-entry-title { font-size: 20px; }
body.is-tv .versions-entry.is-focused { box-shadow: 0 0 0 3px #8fd0ff; }
body.is-tv .versions-sheet-head h3 { font-size: 26px; }
body.is-tv .versions-filter { font-size: 16px; padding: 12px 18px; min-height: 48px; }
body.is-tv .versions-card { border-radius: 20px; }
body.is-tv .versions-item { padding: 16px 18px; gap: 16px; }
body.is-tv .versions-item-title { font-size: 22px; }
body.is-tv .versions-item-meta { font-size: 15px; }
body.is-tv .versions-item-tech { font-size: 14px; }
body.is-tv .versions-dl { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
body.is-tv .versions-dl svg { width: 26px; height: 26px; }
body.is-tv .versions-dl.is-focused, body.is-tv .versions-filter.is-focused,
body.is-tv .versions-sheet-close.is-focused {
  box-shadow: 0 0 0 3px #8fd0ff; outline: none;
}


/* Search: wrong-layout hint ('abh → эфир) */
.search-layout-hint {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 12px;
  color: var(--muted);
  font-size: 14px;
}
.search-layout-hint-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-glass, rgba(255,255,255,.55));
  color: var(--accent, #2b6cff);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search-layout-hint-btn:focus-visible,
.search-layout-hint-btn.is-focused {
  outline: 2px solid var(--accent, #2b6cff);
  outline-offset: 2px;
}
.search-empty .search-layout-hint-btn { margin-top: 12px; }
[data-theme="dark"] .search-layout-hint-btn {
  background: rgba(20, 50, 100, .35);
  border-color: rgba(70, 150, 255, .28);
}

/* Settings: no duplicate store mark under hub / About */
body.settings-no-footer #storeFooter,
#storeFooter[hidden] {
  display: none !important;
}
body.is-tv #settingsHub {
  padding-bottom: 24px;
}