:root {
  --ucim-v1-final-gap: 18px;
}

.topbar-search {
  min-height: 56px;
}

.desktop-page-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.desktop-page-head__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ucim-v1-text);
  line-height: 1.2;
}
.desktop-page-head__sub {
  font-size: 12px;
  color: var(--ucim-v1-muted);
  line-height: 1.5;
}

.version-chip--desk,
.version-chip--mobile {
  display: none;
}

@media (min-width: 1100px) {
  html, body {
    min-height: 100%;
  }

  body {
    overflow: hidden;
  }

  .app {
    grid-template-columns: 92px 248px minmax(0, 1fr) !important;
    grid-template-rows: 88px minmax(0, 1fr) !important;
    gap: var(--ucim-v1-final-gap) !important;
    padding: 0 var(--ucim-v1-final-gap) var(--ucim-v1-final-gap) var(--ucim-v1-final-gap) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    align-items: stretch !important;
  }

  .bottom-dock-row {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    z-index: 30 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .tabbar,
  .dock-pill {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dock-pill {
    height: calc(100vh - var(--ucim-v1-final-gap)) !important;
    height: calc(100dvh - var(--ucim-v1-final-gap)) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .desktop-context-nav {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .topbar {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    align-self: start !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    margin: 0 !important;
    min-height: 88px !important;
    width: auto !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 16px 22px !important;
  }

  .main {
    grid-column: 3 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  .topbar-search {
    display: flex !important;
    align-items: center !important;
    background: var(--ucim-v1-surface-soft) !important;
    border: 1px solid var(--ucim-v1-border) !important;
    min-height: 56px !important;
  }

  .topbar-search__icon,
  .topbar-search input {
    display: none !important;
  }

  .topbar-search {
    padding: 10px 16px !important;
  }

  .version-chip--desk {
    display: inline-flex !important;
  }
}

@media (max-width: 1099px) {
  .topbar-search {
    display: none !important;
  }

  .version-chip--mobile {
    display: inline-flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-pill,
  .topbar,
  .desktop-context-nav {
    scroll-behavior: auto !important;
  }
}


@media (min-width: 1100px) {
  .app {
    grid-template-columns: 84px 214px minmax(0, 1fr) !important;
    grid-template-rows: 88px minmax(0, 1fr) !important;
    padding-top: 0 !important;
    gap: 14px !important;
    background: transparent !important;
  }

  .bottom-dock-row {
    align-self: start !important;
    top: 0 !important;
  }

  .dock-pill {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 10px !important;
    gap: 12px !important;
    background: var(--ucim-v1-surface-strong) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
  }

  .desktop-context-nav {
    background: var(--ucim-v1-surface-strong) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    padding: 14px 12px !important;
    border-radius: 24px !important;
  }

  .topbar {
    top: 0 !important;
    margin-top: 0 !important;
    min-height: 84px !important;
    background: var(--ucim-v1-surface-strong) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  }

  .main {
    padding-top: 0 !important;
    background: transparent !important;
  }

  #page-home.active {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #homeWorldSection,
  #homeCharacterSection {
    display: none !important;
  }

  .brand-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-sub--versions {
    display: none !important;
  }
}

@media (max-width: 1099px) {
  .brand-sub--versions {
    display: flex !important;
  }

  #homeWorldSection {
    display: none !important;
  }
}

#homeWorldSection {
  display: none !important;
}

.topbar-search {
  background: transparent !important;
}