/* Preserve icon colors inside buttons, not affected by theme */
.btn svg, .btn img, .flag-btn svg, .flag-btn img, .radio-btn svg, .radio-btn img {
  color: #e9fbff !important;
  fill: #e9fbff !important;
}
.open-index-btn,
.tv-all-title {
  background: #1565c0 !important;
  color: #fff !important;
  border: 2px solid #1565c0 !important;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(21,101,192,0.12);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  filter: none !important;
}
.open-index-btn:hover,
.open-index-btn:focus-visible,
.tv-all-title:hover,
.tv-all-title:focus-visible {
  background: #003c8f !important;
  border-color: #003c8f !important;
  color: #fff !important;
}
:root {
  --menu-accent: hsl(180deg, 92%, 60%);
  --menu-accent-strong: hsl(180deg, 100%, 50%);
  --menu-bg: #05202d;
  --menu-panel: rgba(8, 32, 46, 0.94);
  --menu-border: rgba(0, 255, 255, 0.65);
  --menu-text: #eaffff;
  --menu-muted: #bfefff;
  --menu-glow: rgba(0, 255, 255, 0.35);
  --menu-shadow: 0 0 20px rgba(0, 255, 255, 0.25), inset 0 0 12px rgba(0, 255, 255, 0.18);
  --menu-nav-height: 53px;
  --welcome-accent-rgb: 0, 255, 255;
  --welcome-shimmer-alpha: 0.18;
  --welcome-scan-alpha: 0.16;
  --welcome-shimmer-duration: 6s;
  --welcome-scan-duration: 6s;
  --welcome-hero-image: url("/assets/welcome-hero-bg.png");
  --mobile-search-top: calc(env(safe-area-inset-top, 0px) + 63px);
  --mobile-search-right: 18px;
  --mobile-search-width: calc(9ch + 20px);
  --mobile-search-width-expanded: calc(13ch + 64px);
  --mobile-search-z: 3000002;
  --mobile-menu-gap: 5px;
  --mobile-menu-btn-font-size: 10px;
  --mobile-menu-btn-pad-y: 5px;
  --mobile-menu-btn-pad-x: 6px;
  --mobile-menu-btn-letter-spacing: 0.01em;
  --mobile-menu-btn-min-height: 30px;
  --flag-btn-bg: #102730;
  --flag-btn-border: #2a344f;
  --flag-btn-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  --flag-btn-active: #00f5ff;
  --flag-btn-hover: #7ffcff;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  background: var(--menu-bg);
  color: var(--menu-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

body.theme-dark,
html.theme-dark {
  --menu-accent: #58a6ff;
  --menu-accent-strong: #1f6feb;
  --menu-bg: #0d1117;
  --menu-panel: rgba(22, 27, 34, 0.92);
  --menu-border: #30363d;
  --menu-text: #c9d1d9;
  --menu-muted: #8b949e;
  --menu-glow: rgba(88, 166, 255, 0.2);
  --menu-shadow: none;
}

body.theme-grey,
html.theme-grey {
  --menu-accent: #9aa7b3;
  --menu-accent-strong: #c5d1dd;
  --menu-bg: #141414;
  --menu-panel: #1f1f1f;
  --menu-border: #353535;
  --menu-text: #e2e6ea;
  --menu-muted: #aab2bb;
  --menu-glow: rgba(120, 150, 180, 0.2);
  --menu-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.02);
  --flag-btn-bg: #2b2b2b;
  --flag-btn-border: #3a3a3a;
  --flag-btn-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  --flag-btn-active: #cbd5e1;
  --flag-btn-hover: #b9c3ce;
  --welcome-accent-rgb: 160, 190, 220;
  --welcome-shimmer-alpha: 0.2;
  --welcome-scan-alpha: 0.1;
  --welcome-shimmer-duration: 9s;
  --welcome-scan-duration: 10s;
}

body.theme-white,
html.theme-white {
  --menu-accent: #2468a8;
  --menu-accent-strong: #1a5090;
  --menu-bg: linear-gradient(180deg, rgba(240, 248, 255, 0.68), rgba(220, 235, 250, 0.5));
  --menu-panel: linear-gradient(180deg, rgba(240, 248, 255, 0.65), rgba(220, 235, 250, 0.45));
  --menu-border: rgba(140, 170, 210, 0.5);
  --menu-text: #1a1a1a;
  --menu-muted: #333333;
  --menu-glow: rgba(60, 130, 210, 0.1);
  --menu-shadow: 0 2px 8px rgba(0, 20, 60, 0.1);
  --flag-btn-bg: linear-gradient(180deg, rgba(255,255,255,.8), rgba(228,235,245,.55));
  --flag-btn-border: rgba(140, 170, 210, 0.55);
  --flag-btn-shadow: 0 1px 3px rgba(0, 20, 60, 0.08);
  --flag-btn-active: #2468a8;
  --flag-btn-hover: #1a5090;
  --welcome-accent-rgb: 36, 104, 168;
  --welcome-shimmer-alpha: 0.06;
  --welcome-scan-alpha: 0.04;
  --welcome-shimmer-duration: 8s;
  --welcome-scan-duration: 9s;
}

body.theme-light,
html.theme-light {
  --menu-accent: #0078d4;
  --menu-accent-strong: #106ebe;
  --menu-bg: #f3f3f3;
  --menu-panel: #ffffff;
  --menu-border: #e1e1e1;
  --menu-text: #1a1a1a;
  --menu-muted: #4a4a4a;
  --menu-glow: rgba(0, 120, 212, 0.08);
  --menu-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --flag-btn-bg: #ffffff;
  --flag-btn-border: #e1e1e1;
  --flag-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --flag-btn-active: #0078d4;
  --flag-btn-hover: #106ebe;
  --welcome-accent-rgb: 0, 120, 212;
  --welcome-shimmer-alpha: 0.04;
  --welcome-scan-alpha: 0.03;
  --welcome-shimmer-duration: 8s;
  --welcome-scan-duration: 9s;
}

body.menu-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
  box-sizing: border-box;
  min-height: 100vh;
  height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  width: 100%;
}

body.menu-root {
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

#top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  min-height: 53px;
  border-bottom: 2px solid var(--menu-accent);
  background: var(--menu-panel);
  box-shadow: 0 0 12px var(--menu-glow);
  position: sticky;
  top: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
  z-index: 1000;
  overflow: visible;
  width: 100%;
  height: auto;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.menu-left,
.menu-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.menu-left {
  min-width: 36px;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto;
}

.menu-brand {
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--menu-accent);
  text-shadow: 0 0 10px var(--menu-glow);
}

.menu-group {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding-left: 5px;
  padding-right: 5px;
  transition: gap 0.25s ease;
  position: relative;
  z-index: 2;
  perspective: 600px;
}

.menu-right {
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 184px;
  max-width: min(260px, calc(100vw - 220px));
  transform-origin: right center;
  will-change: opacity, transform, width;
  transition:
    opacity 0.28s cubic-bezier(.22, 1, .36, 1),
    transform 0.38s cubic-bezier(.22, 1, .36, 1),
    width 0.32s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0.32s;
}

.menu-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid var(--menu-accent);
  background: transparent;
  color: var(--menu-accent);
  box-shadow: 0 0 10px var(--menu-glow);
  cursor: pointer;
  line-height: 1;
}
.menu-search-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.menu-search-toggle:hover,
.menu-search-toggle:focus-visible {
  background: var(--menu-accent);
  color: #00131a;
  outline: none;
}

.menu-search-toggle[aria-expanded="true"] {
  background: var(--menu-accent);
  color: #00131a;
  box-shadow: 0 0 18px var(--menu-glow), 0 10px 28px rgba(0, 0, 0, 0.22);
}

html.theme-white .menu-search-toggle,
body.theme-white .menu-search-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(228,235,245,.6));
  border-color: rgba(140,170,210,.55);
  box-shadow: 0 1px 3px rgba(0,20,60,.08), inset 0 1px 0 rgba(255,255,255,.7);
}

html.theme-white .menu-search-toggle:hover,
html.theme-white .menu-search-toggle:focus-visible,
body.theme-white .menu-search-toggle:hover,
body.theme-white .menu-search-toggle:focus-visible {
  background: #2468a8;
  color: #ffffff;
  border-color: #1a5090;
}

html.theme-light .menu-search-toggle,
body.theme-light .menu-search-toggle {
  background: #ffffff;
  border-color: #e1e1e1;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

html.theme-light .menu-search-toggle:hover,
html.theme-light .menu-search-toggle:focus-visible,
body.theme-light .menu-search-toggle:hover,
body.theme-light .menu-search-toggle:focus-visible {
  background: #0078d4;
  color: #ffffff;
  border-color: #0078d4;
}

html.theme-white .menu-search-toggle[aria-expanded="true"],
body.theme-white .menu-search-toggle[aria-expanded="true"] {
  background: #2468a8;
  color: #ffffff;
  border-color: #1a5090;
}

html.theme-light .menu-search-toggle[aria-expanded="true"],
body.theme-light .menu-search-toggle[aria-expanded="true"] {
  background: #0078d4;
  color: #ffffff;
  border-color: #0078d4;
}

.mobile-quick-toggle.in-top-menu {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

@media (min-width: 901px) {
  .menu-search-toggle {
    display: inline-flex;
  }
  #top-menu:hover {
    /* Avoid changing top/bottom padding on hover to prevent layout shift. */
    box-shadow: 0 0 18px var(--menu-glow);
    transition-delay: 0s;
  }
  #top-menu:not(:hover) {
    transition-delay: 0.4s;
  }
  #top-menu .menu-group {
    gap: 4px;
  }
  #top-menu .menu-group:has(.menu-btn:hover),
  #top-menu .menu-group:has(.menu-btn:focus-visible) {
    gap: 14px;
  }
  #top-menu {
    padding-right: 12px;
  }
  #top-menu .menu-search {
    position: absolute;
    right: var(--menu-search-toggle-space, 50px);
    top: 50%;
    width: min(296px, calc(100vw - 340px));
    max-width: min(296px, calc(100vw - 340px));
    margin-left: 0;
    margin-right: 0;
    align-self: center;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    filter: saturate(0.92);
    transform: translateY(-50%) translateX(16px) scale(0.94);
  }
  #top-menu .menu-search.is-expanded,
  #top-menu .menu-search:focus-within,
  #top-menu .menu-search.has-text {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    filter: none;
    transform: translateY(-50%) translateX(0) scale(1);
    transition-delay: 0s;
  }
}
@media (min-width: 901px) {
  body.tts-visible #top-menu .menu-right {
    position: static;
    transform: none;
    margin-left: auto;
  }
}

.menu-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  color: color-mix(in srgb, var(--menu-muted), transparent 8%);
  transform: translateY(-50%);
  opacity: 0.82;
  pointer-events: none;
  z-index: 1;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.menu-search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.menu-search input {
  width: 100%;
  max-width: 100%;
  padding: 5px 32px 5px 33px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--menu-border), transparent 28%);
  outline: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--menu-panel), transparent 25%);
  color: var(--menu-text);
  font-weight: 600;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  transition:
    width 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.menu-search-handle {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    color-mix(in srgb, var(--menu-panel), transparent 18%);
  border: 1px solid color-mix(in srgb, var(--menu-border), transparent 40%);
  cursor: grab;
  touch-action: none;
  opacity: 0.78;
  z-index: 2;
  box-sizing: border-box;
}
.menu-search-handle:active {
  cursor: grabbing;
  opacity: 1;
}
.menu-search-handle {
  display: none;
  pointer-events: none;
}

@media (max-width: 900px) {
  .menu-search-handle {
    display: block;
    pointer-events: auto;
  }
}
.menu-search input[type="search"]::-webkit-search-cancel-button,
.menu-search input[type="search"]::-webkit-search-decoration,
.menu-search input[type="search"]::-webkit-search-results-button,
.menu-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.menu-search input[type="search"]::-ms-clear {
  display: none;
}

.menu-search input::placeholder {
  color: var(--menu-muted);
}

.menu-search::before,
.menu-search::after {
  display: none;
}

@media (min-width: 901px) {
  #top-menu .menu-search input {
    padding-left: 33px;
    padding-right: 32px;
  }
  #top-menu .menu-search.is-expanded input,
  #top-menu .menu-search:focus-within input,
  #top-menu .menu-search.has-text input {
    border-color: color-mix(in srgb, var(--menu-accent), transparent 24%);
    background: color-mix(in srgb, var(--menu-panel), transparent 10%);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.2),
      0 0 0 4px color-mix(in srgb, var(--menu-accent), transparent 88%),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .menu-search {
    display: inline-flex;
  }
}

.menu-search > button {
  position: absolute;
  top: 50%;
  right: 8px;
  border: none;
  background: color-mix(in srgb, var(--menu-border), transparent 70%);
  color: color-mix(in srgb, var(--menu-accent), white 12%);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.menu-search.has-text > button,
body.search-open .menu-search > button {
  opacity: 1;
  pointer-events: auto;
}

.menu-search > button:hover,
.menu-search > button:focus-visible {
  color: color-mix(in srgb, var(--menu-accent-strong), white 10%);
  outline: none;
}

.menu-search.has-text .menu-search-icon,
.menu-search:focus-within .menu-search-icon,
.menu-search:hover .menu-search-icon {
  color: var(--menu-accent);
  opacity: 0.95;
}

.menu-search-results {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 4px);
  width: min(420px, 85vw);
  min-width: 260px;
  min-height: 140px;
  max-height: 60vh;
  overflow-y: auto;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--menu-panel), rgba(255, 255, 255, 0.1) 10%),
      color-mix(in srgb, var(--menu-panel), rgba(0, 0, 0, 0.12) 12%)
    );
  border: 1px solid color-mix(in srgb, var(--menu-border), transparent 10%);
  border-radius: 10px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--menu-border), transparent 62%),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 4px;
  box-sizing: border-box;
  display: none;
  z-index: 1001;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top right;
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  font-family: "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR",
    "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Thai",
    "Noto Sans Armenian", "Noto Sans Georgian", "Noto Sans Bengali", "Noto Sans Tamil",
    "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati",
    "Noto Sans Gurmukhi", "Noto Sans Sinhala", "Noto Sans Lao", "Noto Sans Khmer",
    "Noto Sans Myanmar", "Noto Sans Ethiopic", "Noto Sans Tibetan", "Noto Sans Mongolian",
    "Noto Sans Symbols", "Noto Sans Symbols 2", "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji",
    "Arial Unicode MS", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  text-rendering: optimizeLegibility;
}
.menu-search-results,
.menu-search-results * {
  mix-blend-mode: normal !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
@media (max-width: 900px) {
  .menu-search-results {
    position: absolute;
    top: calc(100% + 4px);
    right: auto;
    left: 0;
    width: 100%;
    min-width: 0;
    min-height: 90px;
    max-width: none;
    max-height: min(36vh, calc(100vh - 200px));
    z-index: 1001;
  }

}
@media (min-width: 901px) {
  .menu-search-results {
    left: auto;
    right: 0;
    width: min(420px, calc(100vw - 48px));
    min-width: min(260px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    min-height: 140px;
    max-height: 35vh;
  }
}

/* Floating search box — mobile only */
@media (max-width: 900px) {
  .menu-search {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 50%;
    right: auto;
    margin: 0;
    padding: 0;
    z-index: 1001;
    pointer-events: auto;
    touch-action: manipulation;
    min-height: 30px;
  }
}
@media (min-width: 901px) {
  .menu-search {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 1001;
    pointer-events: auto;
    min-height: 30px;
  }
}
@media (max-width: 900px) {
  body.menu-auto-hide .menu-search {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 50%;
    right: auto;
  }
}
@media (max-width: 900px) {
  .menu-search {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 50%;
    right: auto;
    width: min(var(--mobile-search-width), calc(100vw - 24px));
  }
  .menu-search input {
    width: 100%;
    min-width: 120px;
    max-width: 100%;
  }
  .menu-search.is-expanded {
    width: min(var(--mobile-search-width-expanded), calc(100vw - 24px));
  }
}
@media (min-width: 901px) {
  .menu-search input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

.menu-search-results.open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: menuSearchResultsReveal 280ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes menuSearchResultsReveal {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-search-item {
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--menu-border), transparent 82%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--menu-panel), transparent 18%);
  color: var(--menu-text);
  padding: 10px 12px;
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  position: relative;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.menu-search-item:last-child {
  margin-bottom: 0;
}

.menu-search-item:hover,
.menu-search-item:focus-visible {
  background: color-mix(in srgb, var(--menu-accent), transparent 88%);
  border-color: color-mix(in srgb, var(--menu-accent), transparent 56%);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px) !important;
  outline: none;
}

.menu-search-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.menu-search-snippet,
.menu-search-empty {
  font-size: 11px;
  color: var(--menu-muted);
  margin-top: 0;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.menu-search-empty {
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--menu-border), transparent 55%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--menu-panel), transparent 16%);
}

.menu-btn {
  background: transparent;
  color: var(--menu-accent);
  border: 2px solid var(--menu-accent);
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.2s ease, transform 0.35s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px var(--menu-glow);
  transform-origin: center;
  transform-style: preserve-3d;
  position: relative;
}

.menu-btn:hover {
  background: var(--menu-accent);
  color: #00131a;
  box-shadow: 0 0 20px var(--menu-glow), 0 8px 24px rgba(0,0,0,.35);
  transform: scale(1.25) rotateX(-4deg) translateZ(8px);
  z-index: 2;
}

.menu-btn:active {
  transform: scale(1.1) rotateX(2deg) translateZ(2px);
  transition-duration: 0.08s;
}

.menu-btn.is-active {
  background: var(--menu-accent);
  color: #00131a;
  border-color: var(--menu-accent-strong);
}

@media (min-width: 901px) {
  body.desktop-hires #top-menu {
    min-height: 66px;
    gap: 15px;
    padding: 0 15px;
  }

  body.desktop-hires .menu-left,
  body.desktop-hires .menu-right {
    gap: 10px;
  }

  body.desktop-hires .menu-left {
    min-width: 45px;
    left: 22px;
  }

  body.desktop-hires .menu-right {
    right: 29px;
  }

  body.desktop-hires .menu-group {
    gap: 5px;
    padding-left: 10px;
    padding-right: 10px;
  }

  body.desktop-hires .menu-btn {
    padding: 11px 15px;
    font-size: 1.125em;
    border-radius: 8px;
  }

  body.desktop-hires .menu-search-toggle {
    width: 43px;
    height: 38px;
    border-radius: 8px;
  }

  body.desktop-hires {
    --menu-search-toggle-space: 60px;
  }

  body.desktop-hires .menu-search-toggle svg {
    width: 19px;
    height: 19px;
  }
}

.menu-tts-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

body.tts-visible .menu-tts-btn {
  display: inline-flex;
}

.menu-tts-btn:hover,
.menu-tts-btn:focus-visible,
.menu-tts-btn:active {
  transform: none !important;
}

body.theme-dark .menu-btn,
html.theme-dark .menu-btn {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border: 1px solid #30363d !important;
  box-shadow: none !important;
}

body.theme-dark .menu-btn:hover,
html.theme-dark .menu-btn:hover {
  border-color: #58a6ff !important;
  color: #f0f6fc !important;
  box-shadow: 0 0 0 1px #58a6ff inset !important;
}

body.theme-dark .menu-btn.is-active,
html.theme-dark .menu-btn.is-active {
  border-color: #58a6ff !important;
  color: #f0f6fc !important;
  box-shadow: 0 0 0 1px #58a6ff inset !important;
}

body.theme-grey .menu-btn,
html.theme-grey .menu-btn {
  background: #2d2d2d !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  box-shadow: none !important;
}

body.theme-grey .menu-btn:hover,
html.theme-grey .menu-btn:hover {
  border-color: #007acc !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #007acc inset !important;
}

body.theme-grey .menu-btn.is-active,
html.theme-grey .menu-btn.is-active {
  background: #007acc !important;
  color: #ffffff !important;
  border-color: #007acc !important;
  box-shadow: none !important;
}

body.theme-white .menu-btn,
html.theme-white .menu-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(228,235,245,.6)) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(140,170,210,.55) !important;
  box-shadow: 0 1px 3px rgba(0,20,60,.08), inset 0 1px 0 rgba(255,255,255,.7) !important;
  text-shadow: none !important;
}

body.theme-white .menu-btn:hover,
html.theme-white .menu-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(235,242,250,.8)) !important;
  border-color: #2468a8 !important;
  color: #0a0a0a !important;
  box-shadow: 0 2px 8px rgba(0,20,60,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

body.theme-white .menu-btn.is-active,
html.theme-white .menu-btn.is-active {
  background: linear-gradient(180deg, #2468a8, #1a5090) !important;
  color: #ffffff !important;
  border-color: #1a5090 !important;
  box-shadow: 0 2px 6px rgba(0,20,60,.15), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

body.theme-light .menu-btn,
html.theme-light .menu-btn {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e1e1e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  text-shadow: none !important;
}

body.theme-light .menu-btn:hover,
html.theme-light .menu-btn:hover {
  background: #e8e8e8 !important;
  border-color: #0078d4 !important;
  color: #1a1a1a !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}

body.theme-light .menu-btn.is-active,
html.theme-light .menu-btn.is-active {
  background: #0078d4 !important;
  color: #ffffff !important;
  border-color: #0078d4 !important;
  box-shadow: none !important;
}

#menu-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

@media (min-width: 901px) {
  #menu-main {
    padding: 10px 12px 12px;
    gap: 10px;
  }
  .menu-panel {
    padding: 12px;
  }
  body.menu-page--radio {
    align-items: center;
  }
  body.menu-page--radio .menu-panel {
    width: 60vw;
    max-width: 60vw;
  }
}

.embed-wrap {
  flex: 1;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
}

#menu-embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: radial-gradient(circle at 20% 10%, #0d3852 0%, #082738 42%, #05202d 100%);
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--menu-accent) 20%, var(--menu-bg)) 0%, color-mix(in srgb, var(--menu-accent) 8%, var(--menu-bg)) 42%, var(--menu-bg) 100%);
}

body.theme-dark #menu-embed  { background: #0d1117; }
body.theme-grey #menu-embed  { background: #141414; }
body.theme-white #menu-embed { background: linear-gradient(180deg, #c6dff6 0%, #e8f0f8 35%, #dce8f4 65%, #b8d4ef 100%); }
body.theme-light #menu-embed { background: #f3f3f3; }

body.menu-root #menu-main {
  height: calc(100vh - var(--menu-nav-height));
  height: calc(100dvh - var(--menu-nav-height));
}

.menu-panel {
  width: 100%;
  max-width: none;
  background: var(--menu-panel);
  border: 2px solid var(--menu-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--menu-shadow);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

.menu-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  text-align: center;
  color: var(--menu-text);
  text-shadow: 0 0 12px var(--menu-glow);
}

.menu-title--desktop-only {
  display: block;
}

.menu-subtitle {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--menu-muted);
  text-align: center;
}

.menu-frame {
  width: 100%;
  border: 2px solid var(--menu-border);
  border-radius: 10px;
  overflow: hidden;
  background: #05080f;
  box-shadow: var(--menu-shadow);
  flex: 1 1 auto;
  min-height: 0;
}

.menu-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #05080f;
}

body.embedded-page .menu-panel {
  border: 0;
  box-shadow: none;
  padding: 10px;
}

body.embedded-page .menu-frame {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.country-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 12px 0;
}

.country-flag {
  width: 30px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--flag-btn-border);
  background: var(--flag-btn-bg);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--flag-btn-shadow);
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.country-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.country-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.country-flag.active {
  border-color: var(--flag-btn-active);
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.6), 0 0 24px rgba(0, 245, 255, 0.35);
  opacity: 1;
}

.country-flag.dim {
  opacity: 0.5;
  box-shadow: none;
  filter: none;
}

.country-flag:hover,
.country-flag:focus-visible {
  border-color: var(--flag-btn-hover);
  box-shadow: 0 0 12px rgba(127, 252, 255, 0.35);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

.country-flag.dim:hover,
.country-flag.dim:focus-visible {
  opacity: 1;
}

.country-flag.planet-link {
  background: transparent;
  border-color: #2a344f;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

.country-flag.planet-link .planet-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.country-flag.planet-link:hover,
.country-flag.planet-link:focus-visible {
  border-color: #7ffcff;
  box-shadow: 0 0 12px rgba(127, 252, 255, 0.35);
}

body.menu-page .country-flag:not(.planet-link),
html body.menu-page .country-flag:not(.planet-link) {
  background: #0b1222 !important;
  border: 2px solid #2a344f !important;
  border-radius: 4px !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35) !important;
  color: inherit !important;
  filter: none !important;
}

body.theme-dark.menu-page .country-flag:not(.planet-link),
html.theme-dark body.menu-page .country-flag:not(.planet-link) {
  filter: saturate(1.176) brightness(1.667) contrast(0.833) !important;
}

body.theme-grey.menu-page .country-flag:not(.planet-link),
html.theme-grey body.menu-page .country-flag:not(.planet-link),
body.theme-white.menu-page .country-flag:not(.planet-link),
html.theme-white body.menu-page .country-flag:not(.planet-link),
body.theme-light.menu-page .country-flag:not(.planet-link),
html.theme-light body.menu-page .country-flag:not(.planet-link) {
  filter: none !important;
}

body.neon-demo.menu-page:not(.theme-dark) .country-flag:not(.planet-link),
html body.neon-demo.menu-page:not(.theme-dark) .country-flag:not(.planet-link) {
  filter: hue-rotate(calc(-1 * var(--hue-rotate, 0deg))) saturate(0.6667) brightness(0.9091) !important;
}

body.menu-page .country-flag .flag-img {
  filter: none !important;
}

body.menu-page .country-flag.active:not(.planet-link),
html body.menu-page .country-flag.active:not(.planet-link) {
  background: #0b1222 !important;
  border-color: #00f5ff !important;
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.6), 0 0 24px rgba(0, 245, 255, 0.35) !important;
}

body.menu-page .country-flag:hover:not(.planet-link),
body.menu-page .country-flag:focus-visible:not(.planet-link),
html body.menu-page .country-flag:hover:not(.planet-link),
html body.menu-page .country-flag:focus-visible:not(.planet-link) {
  background: #101a30 !important;
  border-color: #7ffcff !important;
  box-shadow: 0 0 12px rgba(127, 252, 255, 0.35) !important;
  color: inherit !important;
}

body.menu-page .country-flag.dim:not(.planet-link),
html body.menu-page .country-flag.dim:not(.planet-link) {
  background: #0b1222 !important;
  border-color: #2a344f !important;
  box-shadow: none !important;
}

.menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.menu-link {
  border: 2px solid var(--menu-accent);
  color: var(--menu-accent);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--menu-panel), transparent 35%);
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 0 10px var(--menu-glow);
}

.menu-link:hover {
  background: var(--menu-accent);
  color: #041018;
}

.menu-tools-row-break {
  display: none;
}
@media (min-width: 901px) {
  .menu-tools-row-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
  body.menu-page--tools .menu-panel {
    max-width: 60vw;
    margin-inline: auto;
  }
}

.menu-link-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 320px;
}

.menu-link-toggle {
  cursor: pointer;
  appearance: none;
  background: color-mix(in srgb, var(--menu-panel), transparent 35%);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
}

.menu-link-toggle::after {
  content: "▾";
  font-size: 0.75em;
  transition: transform 0.2s ease;
}

.menu-link-group.is-open .menu-link-toggle::after {
  transform: rotate(180deg);
}

.menu-submenu-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--menu-accent), transparent 50%);
  background: color-mix(in srgb, var(--menu-panel), transparent 20%);
  margin-top: 6px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  max-height: 500px;
  opacity: 1;
}
.menu-link-group:not(.is-open) .menu-submenu-links {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}

.menu-submenu-links .menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.menu-link-desc {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--menu-muted);
  opacity: 0.85;
  text-align: center;
}

body.theme-dark .menu-link,
html.theme-dark .menu-link {
  border-color: #30363d !important;
  color: #c9d1d9 !important;
  background: #21262d !important;
  box-shadow: none !important;
}

body.theme-dark .menu-link:hover,
html.theme-dark .menu-link:hover {
  border-color: #58a6ff !important;
  color: #f0f6fc !important;
  box-shadow: 0 0 0 1px #58a6ff inset !important;
}

body.theme-grey .menu-link,
html.theme-grey .menu-link {
  border-color: #3c3c3c !important;
  color: #d4d4d4 !important;
  background: #2d2d2d !important;
  box-shadow: none !important;
}

body.theme-grey .menu-link:hover,
html.theme-grey .menu-link:hover {
  border-color: #007acc !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #007acc inset !important;
}

body.theme-white .menu-link,
html.theme-white .menu-link {
  border: 1px solid rgba(140, 170, 210, 0.55) !important;
  color: #1a3a5c !important;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(228,235,245,.6)) !important;
  box-shadow: 0 1px 4px rgba(0, 20, 60, 0.1), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

body.theme-white .menu-link:hover,
html.theme-white .menu-link:hover {
  border-color: #2468a8 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #2d7abf, #1a5090) !important;
  box-shadow: 0 2px 8px rgba(36, 104, 168, 0.3), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

body.theme-white .menu-submenu-links,
html.theme-white .menu-submenu-links {
  background: linear-gradient(180deg, rgba(240,248,255,.65), rgba(220,235,250,.45)) !important;
  border-color: rgba(140, 170, 210, 0.4) !important;
}

body.theme-white .menu-link-desc,
html.theme-white .menu-link-desc {
  color: #4a4a4a !important;
}

body.theme-light .menu-link,
html.theme-light .menu-link {
  border: 1px solid #e1e1e1 !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .menu-link:hover,
html.theme-light .menu-link:hover {
  border-color: #0078d4 !important;
  color: #fff !important;
  background: #0078d4 !important;
  box-shadow: 0 1px 4px rgba(0, 120, 212, 0.25) !important;
}

body.theme-light .menu-submenu-links,
html.theme-light .menu-submenu-links {
  background: #f9f9f9 !important;
  border-color: #e1e1e1 !important;
}

body.theme-light .menu-link-desc,
html.theme-light .menu-link-desc {
  color: #666666 !important;
}

.menu-info {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--menu-muted);
  text-align: center;
}

body.home-welcome {
  position: relative;
}

body.home-welcome::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

body.home-welcome::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("/assets/noise.svg");
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

body.theme-grey.home-welcome::before {
  opacity: 0.18;
}

body.theme-grey.home-welcome::after {
  opacity: 0.12;
}

body.welcome-preload * {
  transition: none !important;
  animation: none !important;
}

#menu-main.welcome-active {
  padding: 0;
  gap: 0;
}

#welcome-main {
  flex: 1 1 auto;
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  min-height: 0;
}

body.home-welcome #welcome-main {
  display: flex;
}

body.home-welcome #embed-wrap {
  display: none;
}

body:not(.home-welcome) #welcome-main {
  display: none;
}

body:not(.home-welcome) #embed-wrap {
  display: flex;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "text status";
  gap: 24px;
  align-items: center;
  padding: 24px;
  min-height: clamp(280px, 38vw, 420px);
  border-radius: 16px;
  background: transparent;
  border: 1px solid var(--menu-border);
  box-shadow: var(--menu-shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0.52) 0%, rgba(2, 6, 14, 0.18) 48%, rgba(2, 6, 14, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 6, 14, 0.1) 0%, rgba(2, 6, 14, 0.28) 100%);
  z-index: 1;
  pointer-events: none;
}

body.home-welcome.welcome-ready .hero-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero-panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  filter: none;
}

.hero-panel::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 60%;
  height: 220%;
  background: linear-gradient(120deg, transparent, rgba(var(--welcome-accent-rgb), var(--welcome-shimmer-alpha)), transparent);
  transform: translateX(-120%);
  animation: shimmer var(--welcome-shimmer-duration) ease-in-out infinite;
  z-index: 3;
}

.hero-label {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: var(--menu-muted);
  text-shadow:
    0 0 6px rgba(100, 180, 255, 0.6),
    0 0 14px rgba(100, 180, 255, 0.35);
}

.hero-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hero-text h1 {
  margin: 10px 0 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.02;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02em;
  text-shadow:
    0 0 10px rgba(100, 180, 255, 0.9),
    0 0 24px rgba(100, 180, 255, 0.5),
    0 0 48px rgba(80, 160, 255, 0.3);
  -webkit-text-stroke: 0.5px rgba(0,0,0,.35);
  user-select: none;
  -webkit-user-select: none;
  transform-origin: left top;
  will-change: font-size;
}

.hero-heading-label,
.hero-heading-name {
  display: block;
}

.hero-heading-label {
  white-space: nowrap;
}

.hero-heading-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  max-width: 100%;
  min-width: 0;
}

.hero-heading-avatar {
  width: 1.08em;
  height: 1.08em;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 14px rgba(100, 180, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.hero-heading-name {
  max-width: min(68vw, 560px);
  margin-top: -0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
}

.hero-sub {
  margin: 0 0 18px;
  font-size: clamp(0.96rem, 1.18vw, 1.08rem);
  color: var(--menu-muted);
  line-height: 1.6;
  max-width: 520px;
  user-select: none;
  -webkit-user-select: none;
  text-shadow:
    0 0 6px rgba(100, 180, 255, 0.5),
    0 0 14px rgba(100, 180, 255, 0.25);
  will-change: font-size;
}

@keyframes hero-title-shrink {
  0% {
    font-size: clamp(1.8rem, 3vw, 3rem);
  }
  100% {
    font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  }
}

@keyframes hero-sub-shrink {
  0% {
    font-size: clamp(0.96rem, 1.18vw, 1.08rem);
  }
  100% {
    font-size: clamp(0.77rem, 0.95vw, 0.86rem);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  box-shadow: 0 0 20px var(--menu-glow);
}

.ghost-btn {
  background: transparent;
  color: var(--menu-text);
  border: 2px solid rgba(0, 255, 255, 0.35);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ghost-btn:hover {
  border-color: var(--menu-accent);
  color: var(--menu-accent);
  box-shadow: 0 0 12px var(--menu-glow);
}

.hero-status {
  grid-area: status;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.hero-text {
  grid-area: text;
  position: relative;
  z-index: 2;
}

@media (min-width: 901px) {
  body.home-welcome.welcome-ready .hero-text h1 {
    animation: none;
  }
}

.status-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.status-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.65rem;
  color: var(--menu-accent);
  text-shadow: 0 0 8px var(--menu-glow);
}
@media (max-width: 900px) {
  .hero-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "text";
    align-items: stretch;
    padding: 18px 18px 14px;
  }
  .hero-text {
    min-height: clamp(220px, 50vw, 300px);
    padding-right: min(46vw, 190px);
  }
  .hero-copy {
    display: block;
  }
  .hero-sub {
    position: absolute;
    left: 0;
    bottom: 2px;
    margin: 0;
    max-width: min(48vw, 230px);
    font-size: clamp(0.54rem, 1.76vw, 0.61rem);
    line-height: 1.35;
  }
  .hero-panel-video {
    opacity: 0.9;
  }
  .hero-panel::after {
    opacity: 0.22;
  }
  .hero-status {
    position: absolute;
    right: 14px;
    bottom: 10px;
    width: min(42vw, 180px);
    gap: 6px;
    justify-items: stretch;
    align-content: end;
  }
  .hero-status .status-card {
    padding: 6px 7px;
    border-radius: 10px;
    min-height: 0;
  }
  .hero-status .status-label {
    font-size: 0.4rem;
    letter-spacing: 0.1em;
  }
  .hero-status .status-value {
    margin-top: 3px;
    font-size: 0.68rem;
    line-height: 1.1;
  }
  .hero-status .network-card,
  .hero-status .service-card,
  .hero-status .profile-card {
    display: none;
  }
  .hero-status .status-card.visitor-card .status-network-services {
    display: none;
  }
  .hero-status .status-card.visitor-card,
  .hero-status .status-card.upload-card,
  .welcome-stats .welcome-stat.visitor-card {
    margin-top: 0;
  }
  body.home-welcome.welcome-ready .hero-text h1 {
    animation: none;
  }
}

@keyframes hero-title-shrink-m {
  from { font-size: clamp(1.8rem, 3vw, 3rem); }
  to   { font-size: clamp(1.1rem, 2vw, 1.8rem); }
}
@keyframes hero-sub-shrink-m {
  from { font-size: clamp(0.54rem, 1.76vw, 0.61rem); }
  to   { font-size: clamp(0.44rem, 1.4vw, 0.49rem); }
}

.status-value {
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 10px rgba(200, 230, 255, 0.3);
}

.status-network-services {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.network-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.network-service-name {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 248, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.network-service-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(190, 225, 255, 0.24);
  background: rgba(16, 28, 46, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8f7ff;
  text-shadow: none;
}

.network-service-pill[data-state="online"] {
  border-color: rgba(130, 255, 184, 0.45);
  background: rgba(18, 62, 38, 0.62);
  color: #c9ffd9;
}

.network-service-pill[data-state="offline"] {
  border-color: rgba(255, 130, 150, 0.45);
  background: rgba(74, 24, 36, 0.62);
  color: #ffd0d8;
}

.network-service-pill[data-state="checking"] {
  border-color: rgba(140, 206, 255, 0.4);
  background: rgba(22, 40, 66, 0.62);
  color: #d7efff;
}

#welcome-main .welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#welcome-main .welcome-card {
  background: color-mix(in srgb, var(--menu-panel), transparent 10%);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1), box-shadow 0.2s ease;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}

#welcome-main .welcome-card-movies,
#welcome-main .welcome-card-tools,
#welcome-main .welcome-card-tv,
.welcome-landing .welcome-card-movies,
.welcome-landing .welcome-card-tools,
.welcome-landing .welcome-card-tv {
  position: relative;
  overflow: hidden;
  background: rgba(4, 6, 12, 0.32) !important;
  isolation: isolate;
}

#welcome-main .welcome-card-movies::before,
#welcome-main .welcome-card-tools::before,
#welcome-main .welcome-card-tv::before,
.welcome-landing .welcome-card-movies::before,
.welcome-landing .welcome-card-tools::before,
.welcome-landing .welcome-card-tv::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: none !important;
  z-index: 0;
  pointer-events: none;
}

#welcome-main .welcome-card-movies::after,
#welcome-main .welcome-card-tools::after,
#welcome-main .welcome-card-tv::after,
.welcome-landing .welcome-card-movies::after,
.welcome-landing .welcome-card-tools::after,
.welcome-landing .welcome-card-tv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#welcome-main .welcome-card-movies > *,
#welcome-main .welcome-card-tools > *,
#welcome-main .welcome-card-tv > *,
.welcome-landing .welcome-card-movies > *,
.welcome-landing .welcome-card-tools > *,
.welcome-landing .welcome-card-tv > * {
  position: relative;
  z-index: 2;
}

#welcome-main .welcome-card-movies,
.welcome-landing .welcome-card-movies {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 18px rgba(255, 196, 90, 0.18);
}

#welcome-main .welcome-card-movies::before,
.welcome-landing .welcome-card-movies::before {
  background-image: url("/assets/welcome-movies-bg.png");
}

#welcome-main .welcome-card-movies::after,
.welcome-landing .welcome-card-movies::after {
  background: linear-gradient(135deg, rgba(4, 6, 12, 0.45), rgba(4, 6, 12, 0.08));
}

#welcome-main .welcome-card-movies h2,
#welcome-main .welcome-card-movies p,
.welcome-landing .welcome-card-movies h2,
.welcome-landing .welcome-card-movies p {
  color: #f8fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#welcome-main .welcome-card-radio,
.welcome-landing .welcome-card-radio {
  position: relative;
  overflow: hidden;
  background: rgba(4, 6, 12, 0.28);
  border-color: rgba(140, 230, 255, 0.35);
  box-shadow: 0 0 18px rgba(120, 230, 255, 0.2);
  isolation: isolate;
}

#welcome-main .welcome-card-radio::before,
.welcome-landing .welcome-card-radio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/welcome-radio-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(var(--theme-brightness, 1));
  z-index: 0;
  pointer-events: none;
}

#welcome-main .welcome-card-radio::after,
.welcome-landing .welcome-card-radio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(2, 6, 14, 0.45), rgba(2, 6, 14, 0.08));
  z-index: 1;
  pointer-events: none;
}

#welcome-main .welcome-card-radio > *,
.welcome-landing .welcome-card-radio > * {
  position: relative;
  z-index: 2;
}

#welcome-main .welcome-card-radio h2,
#welcome-main .welcome-card-radio p,
.welcome-landing .welcome-card-radio h2,
.welcome-landing .welcome-card-radio p {
  color: #f6fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#welcome-main .welcome-card-tools,
.welcome-landing .welcome-card-tools {
  border-color: rgba(255, 180, 90, 0.35);
  box-shadow: 0 0 18px rgba(255, 160, 90, 0.2);
}

#welcome-main .welcome-card-tools::before,
.welcome-landing .welcome-card-tools::before {
  background-image: url("/assets/welcome-tools-bg.png");
}

#welcome-main .welcome-card-tools::after,
.welcome-landing .welcome-card-tools::after {
  background: linear-gradient(135deg, rgba(4, 6, 12, 0.48), rgba(4, 6, 12, 0.1));
}

#welcome-main .welcome-card-tools h2,
#welcome-main .welcome-card-tools p,
.welcome-landing .welcome-card-tools h2,
.welcome-landing .welcome-card-tools p {
  color: #fdf7f2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

#welcome-main .welcome-card-tv,
.welcome-landing .welcome-card-tv {
  border-color: rgba(120, 210, 255, 0.35);
  box-shadow: 0 0 18px rgba(120, 200, 255, 0.2);
}

#welcome-main .welcome-card-tv::before,
.welcome-landing .welcome-card-tv::before {
  background-image: url("/assets/welcome-tv-bg.png");
}

#welcome-main .welcome-card-tv::after,
.welcome-landing .welcome-card-tv::after {
  background: linear-gradient(135deg, rgba(4, 6, 12, 0.48), rgba(4, 6, 12, 0.1));
}

#welcome-main .welcome-card-tv h2,
#welcome-main .welcome-card-tv p,
.welcome-landing .welcome-card-tv h2,
.welcome-landing .welcome-card-tv p {
  color: #f6fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

body.home-welcome.welcome-ready #welcome-main .welcome-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#welcome-main .welcome-card:nth-child(1) { transition-delay: 0.05s; }
#welcome-main .welcome-card:nth-child(2) { transition-delay: 0.1s; }
#welcome-main .welcome-card:nth-child(3) { transition-delay: 0.15s; }
#welcome-main .welcome-card:nth-child(4) { transition-delay: 0.2s; }
#welcome-main .welcome-card[data-welcome-target] {
  cursor: pointer;
}

#welcome-main .welcome-card[data-welcome-target]:focus {
  outline: 2px solid rgba(0, 255, 255, 0.45);
  outline-offset: 2px;
}

#welcome-main .welcome-card:hover {
  box-shadow: 0 0 22px rgba(0, 255, 255, 0.25);
  transform: translateY(-2px);
  border-color: var(--menu-accent, rgba(0, 255, 255, 0.7));
}

#welcome-main .welcome-card-movies:hover,
.welcome-landing .welcome-card-movies:hover {
  box-shadow: 0 0 22px rgba(255, 196, 90, 0.24);
}

#welcome-main .welcome-card-tools:hover,
.welcome-landing .welcome-card-tools:hover {
  box-shadow: 0 0 22px rgba(255, 160, 90, 0.24);
}

#welcome-main .welcome-card-tv:hover,
.welcome-landing .welcome-card-tv:hover {
  box-shadow: 0 0 22px rgba(120, 200, 255, 0.24);
}

#welcome-main .welcome-card h2 {
  font-size: 16px;
  margin: 0 0 6px 0;
  color: var(--menu-text);
}

#welcome-main .welcome-card p {
  margin: 0;
  font-size: 13px;
  color: var(--menu-muted);
  line-height: 1.4;
}

.quick-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.quick-item {
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed rgba(0, 255, 255, 0.4);
  background: rgba(0, 10, 30, 0.6);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1), border-color 0.2s ease;
  will-change: opacity, transform;
}

body.home-welcome.welcome-ready .quick-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.quick-item:nth-child(1) { transition-delay: 0.15s; }
.quick-item:nth-child(2) { transition-delay: 0.2s; }
.quick-item:nth-child(3) { transition-delay: 0.25s; }

.quick-title {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--menu-accent);
}

.quick-sub {
  margin-top: 6px;
  color: var(--menu-muted);
  font-size: 0.85rem;
}

.quick-item-clickable {
  cursor: pointer;
}

.quick-item-clickable:focus {
  outline: 2px solid var(--menu-accent, rgba(0, 255, 255, 0.45));
  outline-offset: 2px;
}

.quick-item:hover {
  border-color: var(--menu-accent, rgba(0, 255, 255, 0.7));
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
  transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quick-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--menu-text, #e9f6ff);
  margin-top: 4px;
}

.scanline {
  display: none;
  position: fixed;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(var(--welcome-accent-rgb), var(--welcome-scan-alpha)), transparent);
  opacity: 0.22;
  animation: scan var(--welcome-scan-duration) linear infinite;
  z-index: 1;
  pointer-events: none;
}

body.home-welcome .scanline {
  display: block;
}

body.theme-grey.home-welcome .hero-panel::after {
  animation-name: shimmer-soft;
}

body.theme-grey.home-welcome .scanline {
  animation-name: scan-soft;
}

body.theme-grey.home-welcome .hero-text h1 {
  -webkit-text-stroke: 0.5px rgba(0,0,0,.4);
}

body.theme-grey.home-welcome .hero-panel {
  background-color: #111722;
  background-image:
    linear-gradient(135deg, rgba(7, 20, 40, 0.48), rgba(78, 28, 18, 0.24) 52%, rgba(12, 34, 56, 0.4)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.08)),
    var(--welcome-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(118, 196, 255, 0.42);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 32px rgba(74, 154, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-grey.home-welcome .status-card {
  border-color: rgba(160, 210, 255, 0.34);
  box-shadow: inset 0 0 16px rgba(95, 165, 255, 0.14), 0 10px 20px rgba(0, 0, 0, 0.18);
}

body.theme-grey.home-welcome .hero-status .status-card:nth-child(1) {
  background: linear-gradient(135deg, rgba(17, 42, 72, 0.82), rgba(14, 24, 40, 0.64));
}

body.theme-grey.home-welcome .hero-status .status-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(28, 60, 42, 0.82), rgba(12, 28, 24, 0.62));
}

body.theme-grey.home-welcome .hero-status .status-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(74, 40, 18, 0.84), rgba(26, 20, 14, 0.62));
}

body.theme-grey.home-welcome .hero-status .status-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(58, 22, 78, 0.84), rgba(20, 16, 34, 0.62));
}

body.theme-grey.home-welcome #welcome-main .welcome-card,
body.theme-grey.home-welcome .welcome-card {
  background-color: rgba(15, 23, 34, 0.22);
  border-color: rgba(198, 224, 255, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 20px rgba(95, 165, 255, 0.14);
}

body.theme-grey.home-welcome #welcome-main .welcome-card:hover,
body.theme-grey.home-welcome .welcome-card:hover {
  border-color: #007acc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 26px rgba(120, 190, 255, 0.22);
}

body.theme-grey.home-welcome .quick-item:hover {
  border-color: #007acc;
  box-shadow: 0 0 18px rgba(0, 122, 204, 0.3);
  transform: translateY(-2px);
}

body.theme-grey.home-welcome .quick-item {
  border-color: rgba(170, 214, 255, 0.34);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-grey.home-welcome .quick-item:nth-child(1) {
  background: linear-gradient(135deg, rgba(11, 47, 78, 0.8), rgba(17, 28, 44, 0.72));
}

body.theme-grey.home-welcome .quick-item:nth-child(2) {
  background: linear-gradient(135deg, rgba(72, 42, 12, 0.82), rgba(30, 20, 12, 0.72));
}

body.theme-grey.home-welcome .quick-item:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 58, 24, 0.82), rgba(16, 26, 16, 0.72));
}

/* ── White / Aero Glass welcome overrides ── */
body.theme-white.home-welcome::before {
  background-image:
    linear-gradient(90deg, rgba(36, 104, 168, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(36, 104, 168, 0.04) 1px, transparent 1px);
  opacity: 0.15;
}

body.theme-white.home-welcome::after {
  opacity: 0.06;
  mix-blend-mode: multiply;
}

body.theme-white.home-welcome .hero-panel::after {
  animation-name: shimmer-soft;
}

body.theme-white.home-welcome .scanline {
  animation-name: scan-soft;
}

body.theme-white.home-welcome .hero-panel {
  background-color: rgba(255, 255, 255, 0.15);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, transparent 50%),
    var(--welcome-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,.7);
  box-shadow:
    0 8px 32px rgba(0,20,60,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

body.theme-white.home-welcome .hero-text {
  user-select: none;
  -webkit-user-select: none;
}

body.theme-white.home-welcome .hero-label {
  color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 0 12px rgba(0,0,0,.3);
  font-weight: 700;
}

body.theme-white.home-welcome .hero-text h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.8),
    0 0 8px rgba(0,0,0,.6),
    0 0 20px rgba(0,0,0,.35),
    0 0 40px rgba(0,20,80,.2);
  -webkit-text-stroke: 0.5px rgba(0,0,0,.35);
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-white.home-welcome .hero-sub {
  color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.55),
    0 0 10px rgba(0,0,0,.25);
}

body.theme-white.home-welcome .status-label {
  color: rgba(255,255,255,.9) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  font-weight: 600;
}

body.theme-white.home-welcome .status-value {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  font-weight: 700;
}

body.theme-white.home-welcome .status-card {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.24);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  user-select: none;
  -webkit-user-select: none;
}

body.theme-white.home-welcome .hero-status .status-card:nth-child(1),
body.theme-white.home-welcome .hero-status .status-card:nth-child(2),
body.theme-white.home-welcome .hero-status .status-card:nth-child(3),
body.theme-white.home-welcome .hero-status .status-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

body.theme-white.home-welcome .network-service-name,
body.theme-white.home-welcome .network-service-pill {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

body.theme-white.home-welcome #welcome-main .welcome-card,
body.theme-white.home-welcome .welcome-card {
  background-color: rgba(0, 10, 40, 0.32);
  border: 1px solid rgba(140, 170, 210, 0.55);
  box-shadow: 0 4px 16px rgba(0, 20, 60, 0.12), 0 0 12px rgba(36, 104, 168, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.theme-white.home-welcome #welcome-main .welcome-card-radio,
body.theme-white.home-welcome .welcome-card-radio {
  background-color: rgba(4, 6, 12, 0.18);
  border-color: rgba(140, 230, 255, 0.35);
  box-shadow: 0 0 18px rgba(120, 230, 255, 0.2);
}

body.theme-white.home-welcome #welcome-main .welcome-card:hover,
body.theme-white.home-welcome .welcome-card:hover {
  border-color: rgba(36, 104, 168, 0.6);
  box-shadow: 0 6px 20px rgba(0, 20, 60, 0.12), 0 0 16px rgba(36, 104, 168, 0.1);
}

body.theme-white.home-welcome .quick-item:hover {
  border-color: rgba(36, 104, 168, 0.6);
  box-shadow: 0 0 14px rgba(36, 104, 168, 0.15);
  transform: translateY(-2px);
}

body.theme-white.home-welcome #welcome-main .welcome-card h2,
body.theme-white.home-welcome .welcome-card h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.22);
}

body.theme-white.home-welcome #welcome-main .welcome-card p,
body.theme-white.home-welcome .welcome-card p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.2);
}

body.theme-white.home-welcome .quick-item {
  border-color: rgba(140, 170, 210, 0.4);
  box-shadow: 0 4px 12px rgba(0, 20, 60, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.theme-white.home-welcome .quick-item:nth-child(1) {
  background: linear-gradient(135deg, rgba(225, 240, 255, 0.75), rgba(200, 225, 250, 0.55));
}

body.theme-white.home-welcome .quick-item:nth-child(2) {
  background: linear-gradient(135deg, rgba(255, 240, 220, 0.75), rgba(245, 230, 210, 0.55));
}

body.theme-white.home-welcome .quick-item:nth-child(3) {
  background: linear-gradient(135deg, rgba(220, 245, 230, 0.75), rgba(200, 235, 215, 0.55));
}

/* ── Light / Win10 welcome overrides ── */
body.theme-light.home-welcome::before {
  background-image:
    linear-gradient(90deg, rgba(0, 120, 212, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(0, 120, 212, 0.04) 1px, transparent 1px);
  opacity: 0.15;
}

body.theme-light.home-welcome::after {
  opacity: 0.06;
  mix-blend-mode: multiply;
}

body.theme-light.home-welcome .hero-panel::after {
  animation-name: shimmer-soft;
}

body.theme-light.home-welcome .scanline {
  animation-name: scan-soft;
}

body.theme-light.home-welcome .hero-panel {
  background-color: rgba(255, 255, 255, 0.15);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, transparent 50%),
    var(--welcome-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(225,225,225,.6);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

body.theme-light.home-welcome .hero-text {
  user-select: none;
  -webkit-user-select: none;
}

body.theme-light.home-welcome .hero-label {
  color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 0 12px rgba(0,0,0,.3);
  font-weight: 700;
}

body.theme-light.home-welcome .hero-text h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.8),
    0 0 8px rgba(0,0,0,.6),
    0 0 20px rgba(0,0,0,.35),
    0 0 40px rgba(0,20,80,.2);
  -webkit-text-stroke: 0.5px rgba(0,0,0,.35);
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-light.home-welcome .hero-sub {
  color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.55),
    0 0 10px rgba(0,0,0,.25);
}

body.theme-light.home-welcome .status-label {
  color: rgba(255,255,255,.9) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  font-weight: 600;
}

body.theme-light.home-welcome .status-value {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  font-weight: 700;
}

body.theme-light.home-welcome .status-card {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.24);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  user-select: none;
  -webkit-user-select: none;
}

body.theme-light.home-welcome .hero-status .status-card:nth-child(1),
body.theme-light.home-welcome .hero-status .status-card:nth-child(2),
body.theme-light.home-welcome .hero-status .status-card:nth-child(3),
body.theme-light.home-welcome .hero-status .status-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

body.theme-light.home-welcome .network-service-name,
body.theme-light.home-welcome .network-service-pill {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

body.theme-light.home-welcome #welcome-main .welcome-card,
body.theme-light.home-welcome .welcome-card {
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 120, 212, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

body.theme-light.home-welcome #welcome-main .welcome-card-radio,
body.theme-light.home-welcome .welcome-card-radio {
  background-color: rgba(4, 6, 12, 0.18);
  border-color: rgba(140, 230, 255, 0.35);
  box-shadow: 0 0 18px rgba(120, 230, 255, 0.2);
}

body.theme-light.home-welcome #welcome-main .welcome-card:hover,
body.theme-light.home-welcome .welcome-card:hover {
  border-color: rgba(0, 120, 212, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.theme-light.home-welcome .quick-item:hover {
  border-color: #0078d4;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.18);
  transform: translateY(-2px);
}

body.theme-light.home-welcome #welcome-main .welcome-card h2,
body.theme-light.home-welcome .welcome-card h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.22);
}

body.theme-light.home-welcome #welcome-main .welcome-card p,
body.theme-light.home-welcome .welcome-card p {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.2);
}

body.theme-light.home-welcome .quick-item {
  border-color: #d0d0d0;
  border-style: solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.theme-light.home-welcome .quick-item:nth-child(1) {
  background: linear-gradient(135deg, #e8f0fe, #dce8f8);
  border-left: 3px solid #0078d4;
}

body.theme-light.home-welcome .quick-item:nth-child(2) {
  background: linear-gradient(135deg, #fff4e0, #fcecd0);
  border-left: 3px solid #ffb900;
}

body.theme-light.home-welcome .quick-item:nth-child(3) {
  background: linear-gradient(135deg, #e6f5ea, #d8eede);
  border-left: 3px solid #107c10;
}

@keyframes shimmer {
  0% { transform: translateX(-120%); }
  60% { transform: translateX(180%); }
  100% { transform: translateX(180%); }
}

@keyframes shimmer-soft {
  0% { transform: translateX(-120%) scale(1); opacity: 0.6; }
  55% { transform: translateX(180%) scale(1.02); opacity: 0.95; }
  100% { transform: translateX(180%) scale(1); opacity: 0.7; }
}

@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(140%); }
}

@keyframes scan-soft {
  0% { transform: translateY(0); opacity: 0.12; }
  55% { opacity: 0.22; }
  100% { transform: translateY(140%); opacity: 0.12; }
}

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 8px 0;
}

.welcome-card {
  background: color-mix(in srgb, var(--menu-panel), transparent 10%);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
}

.welcome-card h2 {
  font-size: 16px;
  margin: 0 0 6px 0;
  color: var(--menu-text);
}

.welcome-card p {
  margin: 0;
  font-size: 13px;
  color: var(--menu-muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  :root {
    --welcome-hero-image: url("/assets/welcome-hero-bg-mobile.png");
  }
  body.menu-page {
    padding: 12px;
  }
  body.menu-auto-hide.menu-page {
    padding-top: 0 !important;
  }
    #top-menu {
      position: fixed;
      top: 0;
      bottom: auto;
      width: 100%;
      border-top: 0;
      border-bottom: 2px solid var(--menu-accent);
      padding: 0 5px;
      padding-top: calc(env(safe-area-inset-top, 0px));
      background: var(--menu-panel);
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: var(--mobile-menu-gap);
      overflow: visible;
      transition: none;
    }
  .menu-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    order: 1;
    overflow: hidden;
    justify-content: flex-start;
    align-content: center;
    gap: var(--mobile-menu-gap);
    padding-bottom: 0;
    pointer-events: auto;
    transition: none;
  }
  .menu-left,
  .menu-right {
    display: none;
  }
    .menu-btn {
      width: auto;
      min-width: 0;
      max-width: 100%;
      flex: 1 1 0;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #top-menu .menu-group .menu-btn[data-page="home"] { order: 1; }
    #top-menu .menu-group .menu-btn[data-page="movies"] { order: 2; }
    #top-menu .menu-group .menu-btn[data-page="radio"] { order: 3; }
    #top-menu .menu-group .menu-btn[data-page="tools"] { order: 4; }
    #top-menu .menu-group .menu-btn[data-page="tv"] { order: 5; }
    #top-menu .menu-group .menu-btn[data-page="clips"] { order: 6; }
    #top-menu .menu-group .menu-btn[data-page="games"] { display: none !important; }
    #top-menu .menu-group .menu-btn[data-page="auctioneer"] { display: none !important; }
    #top-menu .menu-group .menu-btn[data-page="contact"] { display: none !important; }
    #top-menu .menu-group .menu-btn[data-page="tools"] { display: none !important; }
  .mobile-quick-toggle.in-top-menu {
    order: 0;
    align-self: center;
    position: static;
    margin-right: 5px;
    flex: 0 0 auto;
  }
  .menu-search-toggle {
    display: inline-flex;
    order: 100;
    flex: 0 0 auto;
  }
  body.search-open .menu-search-toggle {
    display: none;
  }
  .menu-search {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-6px) scale(0.98);
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    flex: 0 0 auto;
    margin-left: 0;
    padding-left: 0;
    order: 99;
    display: flex;
    justify-content: flex-start;
    padding-top: 0;
    pointer-events: none;
    width: min(var(--mobile-search-width), calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    overflow: visible;
  }
  body.search-open .menu-search {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  body.search-open .menu-search[data-positioned="1"] {
    transform: none;
  }
  .menu-tts-btn {
    order: 98;
  }
  body.tts-visible .menu-tts-btn {
    position: static;
  }
  body.menu-auto-hide #top-menu {
    align-items: center;
    gap: 4px;
    padding-bottom: 0;
    padding-top: calc(env(safe-area-inset-top, 0px));
    padding-left: 6px;
    padding-right: 6px;
    min-height: calc(env(safe-area-inset-top, 0px) + 32px);
  }
  body.menu-auto-hide #top-menu .menu-group {
    width: 100%;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    overflow: visible;
    pointer-events: auto;
    z-index: 10;
  }
  body.menu-auto-hide .menu-search {
    flex: 0 0 auto;
    width: min(var(--mobile-search-width), calc(100vw - 24px));
    margin-left: auto;
    padding-top: 0;
    padding-left: 6px;
    z-index: 999;
  }
  body.menu-auto-hide.tts-visible .menu-tts-btn {
    position: static !important;
    right: auto;
    top: auto;
    margin-right: 6px;
  }
  body.menu-auto-hide {
    --menu-nav-height: 0px;
  }
  body.menu-auto-hide .menu-panel {
    margin-top: 0;
  }
    .menu-search {
      margin-left: auto;
      width: min(var(--mobile-search-width), calc(100vw - 24px));
      justify-content: flex-start;
      transform-origin: center top;
    }
    .menu-search input {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 6px 24px 6px 33px;
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0;
      border-width: 1px;
      background: var(--menu-panel);
    background: color-mix(in srgb, var(--menu-panel), transparent 30%);
    border-color: var(--menu-border);
    color: var(--menu-text);
    box-shadow: none;
  }
  .menu-search > button {
    right: 6px;
    font-size: 12px;
  }
  .menu-search.is-compact input {
      width: 100%;
      padding: 6px 24px 6px 33px;
      background: var(--menu-panel);
    background: color-mix(in srgb, var(--menu-panel), transparent 55%);
    border-color: var(--menu-border);
    color: var(--menu-muted);
    box-shadow: none;
  }
    .menu-search.is-compact {
      animation: menuSearchRetractPulse 280ms ease;
    }
    @keyframes menuSearchRetractPulse {
      0% { transform: scale(1); }
      50% { transform: scale(0.5); }
      100% { transform: scale(1); }
    }
  .menu-search.is-compact input::placeholder {
    color: var(--menu-muted);
  }
    .menu-search.is-expanded {
      width: min(var(--mobile-search-width-expanded), calc(100vw - 24px));
    }
    .menu-search.is-expanded input {
      width: 100%;
      max-width: 100%;
      padding: 6px 24px 6px 33px;
      border-color: var(--menu-border);
      color: var(--menu-text);
    background: var(--menu-panel);
    background: color-mix(in srgb, var(--menu-panel), transparent 20%);
    box-shadow: none;
  }
  .menu-search.is-expanded input::placeholder {
    color: var(--menu-muted);
  }
  .menu-search-results {
    width: 100%;
    left: 0;
    right: auto;
    max-width: none;
  }
  .menu-panel {
    padding: 12px;
  }
  .menu-title {
    font-size: 22px;
  }

  .menu-title--desktop-only {
    display: none;
  }
  .menu-frame iframe {
    height: 100%;
    min-height: 0;
  }
  .country-flag {
    width: 24px;
    height: 16px;
  }
    .menu-btn {
      font-size: var(--mobile-menu-btn-font-size);
      padding: var(--mobile-menu-btn-pad-y) var(--mobile-menu-btn-pad-x);
      white-space: nowrap;
      text-align: center;
      letter-spacing: var(--mobile-menu-btn-letter-spacing);
      min-height: var(--mobile-menu-btn-min-height);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: none;
      text-transform: none;
      font-weight: 600;
    }
    .menu-tts-btn {
      font-size: var(--mobile-menu-btn-font-size);
      padding: var(--mobile-menu-btn-pad-y) var(--mobile-menu-btn-pad-x);
      letter-spacing: .04em;
      min-height: max(26px, calc(var(--mobile-menu-btn-min-height) - 2px));
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .menu-btn[data-page="home"],
    .menu-btn[data-page="movies"],
    .menu-btn[data-page="radio"],
    .menu-btn[data-page="tools"],
    .menu-btn[data-page="tv"] {
      align-self: start;
      justify-self: center;
    }
    .menu-btn:hover,
    .menu-btn:focus-visible,
    .menu-btn:active {
      transform: none !important;
    }
    body.menu-auto-hide #top-menu .menu-group .menu-btn {
      opacity: 0;
      transform: none;
      max-width: 0;
      min-width: 0;
      width: 0;
      padding-left: 0;
      padding-right: 0;
      margin: 0;
      border-width: 0;
      pointer-events: auto;
      overflow: hidden;
      transition: none !important;
    }
    body.menu-auto-hide #top-menu .menu-group .menu-btn.is-active {
      opacity: 1;
      transform: none;
      max-width: none;
      min-width: max-content;
      width: max-content;
      padding-left: 6px;
      padding-right: 6px;
      border-width: 1px;
      pointer-events: auto;
      z-index: 10;
    }
    body.menu-auto-hide.tts-visible #top-menu .menu-group .menu-btn.menu-tts-btn {
      opacity: 1;
      transform: scale(1);
      max-width: 100%;
      min-width: 0;
      width: auto;
      padding-left: 6px;
      padding-right: 6px;
      border-width: 1px;
      pointer-events: auto;
      display: inline-flex;
      flex: 0 1 auto;
    }
    .menu-btn[data-page="home"] {
      letter-spacing: 0.01em;
    }
  #menu-main {
    padding: calc(10px + var(--menu-nav-height)) 10px calc(12px + env(safe-area-inset-bottom, 0px)) 10px;
    margin-top: 0;
  }
  #welcome-main {
    padding: calc(10px + var(--menu-nav-height)) 10px 14px;
    gap: 12px;
  }
  body.menu-auto-hide #menu-main,
  body.menu-auto-hide #welcome-main {
    padding-top: 0 !important;
  }
  body.menu-auto-hide.embedded-page #menu-main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 32px) !important;
  }
  .hero-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
  }
  .hero-label {
    font-size: calc(0.72rem - 1px);
  }
  .hero-text h1 {
    margin: 2px 0 2px;
    font-size: clamp(calc(1.56rem - 1px), calc(4.95vw - 1px), calc(2.28rem - 1px));
    display: inline-flex;
    transform-origin: left top;
    max-width: min(88vw, 360px);
  }
  .hero-heading-name {
    max-width: 100%;
  }
  .hero-heading-avatar {
    width: 1em;
    height: 1em;
  }
  .hero-sub {
    display: inline-block;
    transform-origin: left top;
  }
  body.home-welcome.welcome-ready .hero-panel {
    transition-delay: 0.15s;
  }
  body.home-welcome.welcome-ready .hero-text h1 {
    animation: none;
  }
  body.home-welcome.welcome-ready .hero-status {
    animation: hero-status-tight 1.2s ease forwards;
    animation-delay: 0.15s;
  }
  .hero-sub {
    margin: 0 0 4px;
    font-size: calc(1rem - 1px);
    line-height: 1.5;
  }
  .hero-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "visitor upload";
    gap: 8px;
    align-items: stretch;
    align-content: start;
    justify-items: stretch;
    margin-top: -15px;
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-flow: row;
  }
  .hero-status .status-card {
    min-width: 0;
    height: 100%;
  }
  .hero-status .visitor-card { grid-area: visitor; }
  .hero-status .status-card:nth-child(3) { grid-area: upload; }
  #welcome-main .welcome-grid {
    grid-template-columns: 1fr;
  }
  .quick-panel {
    grid-template-columns: 1fr;
  }
  .scanline {
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
  }
  .status-card {
    padding: 9px;
  }
  .status-label {
    font-size: calc(0.65rem - 1px);
    letter-spacing: 0.16em;
  }
  .status-value {
    margin-top: 4px;
    font-size: calc(1.1rem - 1px);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #welcome-main .quick-panel .quick-item:nth-child(2),
  #welcome-main .quick-panel .quick-item:nth-child(3) {
    display: none;
  }
  body.menu-root #menu-main {
    height: calc(100vh - var(--menu-nav-height));
    height: calc(100dvh - var(--menu-nav-height));
  }
  .embed-wrap {
    min-height: 0;
  }
}

body.is-mobile .hero-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "visitor upload";
  gap: 8px;
  align-items: stretch;
  align-content: start;
  justify-items: stretch;
  margin-top: -15px;
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: row;
}
body.is-mobile .hero-status .status-card {
  min-width: 0;
  height: 100%;
}
body.is-mobile .hero-status .visitor-card { grid-area: visitor; }
body.is-mobile .hero-status .status-card:nth-child(3) { grid-area: upload; }
body.is-mobile .hero-status .status-card.visitor-card .status-network-services {
  display: none;
}