/*
  Apple Glass final layer.
  This file is intentionally loaded after the legacy stylesheet and owns the
  visible MiniApp design without touching backend/data logic.
*/

:root {
  --bg: #000000;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --text: #f5f5f7;
  --text-2: rgba(255, 255, 255, 0.6);
  --text-3: rgba(255, 255, 255, 0.35);
  --blue: #0a84ff;
  --blue-soft: rgba(10, 132, 255, 0.12);
  --separator: rgba(255, 255, 255, 0.06);
  --blur-bg: rgba(0, 0, 0, 0.72);
  --input-bg: rgba(255, 255, 255, 0.06);
  --star-color: #ff9f0a;
  --shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

html.light,
html[data-theme="light"],
body.theme-light {
  --bg: #f2f2f7;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.86);
  --text: #1c1c1e;
  --text-2: rgba(0, 0, 0, 0.5);
  --text-3: rgba(0, 0, 0, 0.28);
  --blue: #007aff;
  --blue-soft: rgba(0, 122, 255, 0.08);
  --separator: rgba(0, 0, 0, 0.06);
  --blur-bg: rgba(242, 242, 247, 0.78);
  --input-bg: rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

html,
body {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html body.open-collection-ui {
  margin: 0 !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 8% -6%, rgba(10, 132, 255, 0.18), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(191, 90, 242, 0.12), transparent 30%),
    radial-gradient(circle at 40% 108%, rgba(255, 55, 95, 0.08), transparent 30%),
    var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, "SF Pro Display", Inter, "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

html body.open-collection-ui .oc-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 48px !important;
  padding: 8px 16px !important;
  border-bottom: 0.5px solid var(--separator) !important;
  background: var(--blur-bg) !important;
  color: var(--text) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

html body.open-collection-ui .oc-topbar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

html body.open-collection-ui .oc-topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.open-collection-ui .oc-icon-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--glass) !important;
  color: var(--text-2) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html body.open-collection-ui *,
html body.open-collection-ui *::before,
html body.open-collection-ui *::after {
  box-sizing: border-box !important;
}

html body.open-collection-ui .miniapp-shell {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 0 0 72px !important;
  background: transparent !important;
}

html body.open-collection-ui .panel,
html body.open-collection-ui .miniapp-head,
html body.open-collection-ui .miniapp-view-wrap,
html body.open-collection-ui .mini-route-head,
html body.open-collection-ui .post-comments-panel,
html body.open-collection-ui .post-recommendations,
html body.open-collection-ui .post-description-card {
  background: var(--glass) !important;
  border: 0.5px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

html body.open-collection-ui .miniapp-head {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  padding: 32px 20px 20px !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.open-collection-ui .miniapp-head-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

html body.open-collection-ui .hero-eyebrow {
  margin: 0 !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

html body.open-collection-ui .theme-toggle {
  position: static !important;
}

html body.open-collection-ui .miniapp-hero-grid {
  display: block !important;
  width: 100% !important;
}

html body.open-collection-ui .miniapp-title-group {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

html body.open-collection-ui .miniapp-head .miniapp-title-group h1 {
  margin: 0 0 10px !important;
  max-width: 350px !important;
  color: var(--text) !important;
  font-size: 34px !important;
  font-weight: 760 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.open-collection-ui .miniapp-head .miniapp-title-group h1 span {
  display: block !important;
  color: var(--text) !important;
  max-width: 100% !important;
}

html body.open-collection-ui .miniapp-head .miniapp-title-group h1 .title-accent {
  color: #9fd1ff !important;
}

html body.open-collection-ui .brand-note {
  max-width: 330px !important;
  margin: 0 !important;
  color: var(--text-2) !important;
  font-size: 15px !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

html body.open-collection-ui .hero-book-card {
  display: none !important;
  place-items: center !important;
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  border: 0.5px solid rgba(10, 132, 255, 0.26) !important;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.12), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.14) !important;
}

html body.open-collection-ui .hero-book-card::before {
  display: none !important;
}

html body.open-collection-ui .hero-book-icon {
  width: 42px !important;
  height: 42px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 18px rgba(10, 132, 255, 0.2)) !important;
}

html body.open-collection-ui .hero-book-icon path,
html body.open-collection-ui .hero-book-icon rect {
  fill: #f5f5f7 !important;
  stroke: #9fd1ff !important;
  stroke-width: 2.5px !important;
  stroke-linecap: round !important;
}

html body.open-collection-ui .mini-head-controls,
html body.open-collection-ui .mini-head-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 20px 0 0 !important;
}

html body.open-collection-ui .mini-head-actions:empty,
html body.open-collection-ui .mini-head-actions:not(:has(:not([hidden]))) {
  display: none !important;
}

html body.open-collection-ui .mini-head-actions .button-like[hidden] {
  display: none !important;
}

html body.open-collection-ui .button-like,
html body.open-collection-ui .secondary-button,
html body.open-collection-ui .feed-button,
html body.open-collection-ui .folder-open-button,
html body.open-collection-ui .reader-toggle,
html body.open-collection-ui .reader-control,
html body.open-collection-ui .comment-submit,
html body.open-collection-ui .load-more-button,
html body.open-collection-ui .new-feed-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 28px !important;
  height: auto !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--glass) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.open-collection-ui .mini-head-actions .button-like {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  background: var(--glass) !important;
  color: var(--text) !important;
  font-size: 15px !important;
}

html body.open-collection-ui .button-like:active,
html body.open-collection-ui .feed-button:active,
html body.open-collection-ui .folder-open-button:active,
html body.open-collection-ui .reader-toggle:active,
html body.open-collection-ui .reader-control:active {
  transform: scale(0.97) !important;
}

html body.open-collection-ui .mini-search-wrap,
html body.open-collection-ui .search-wrap {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--input-bg) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html body.open-collection-ui input,
html body.open-collection-ui textarea,
html body.open-collection-ui select {
  width: 100% !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--input-bg) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}

html body.open-collection-ui .global-search-filters,
html body.open-collection-ui .search-filter-chips,
html body.open-collection-ui .filter-chips,
html body.open-collection-ui .chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

html body.open-collection-ui .global-search-filters button,
html body.open-collection-ui .search-filter-chips button,
html body.open-collection-ui .filter-chips button,
html body.open-collection-ui .search-filter-chip,
html body.open-collection-ui .chip,
html body.open-collection-ui .tag-chip {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--glass) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.open-collection-ui.theme-dark .search-filter-chip,
html[data-theme="light"] body.open-collection-ui.theme-light .search-filter-chip,
body.open-collection-ui.theme-dark .search-filter-chip,
body.open-collection-ui.theme-light .search-filter-chip {
  width: auto !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--glass) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

html body.open-collection-ui .global-search-filters button.is-active,
html body.open-collection-ui .search-filter-chips button.is-active,
html body.open-collection-ui .filter-chips button.is-active,
html body.open-collection-ui .chip.on,
html body.open-collection-ui .tag-chip.is-active {
  background: var(--blue) !important;
  color: #fff !important;
}

html body.open-collection-ui input::placeholder,
html body.open-collection-ui textarea::placeholder {
  color: var(--text-3) !important;
}

html body.open-collection-ui .miniapp-view-wrap {
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.open-collection-ui .miniapp-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
}

html body.open-collection-ui .mini-route-head {
  padding: 6px 16px 10px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.open-collection-ui .mini-route-head h2,
html body.open-collection-ui .folder-title,
html body.open-collection-ui .section-title {
  margin: 0 0 12px !important;
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

html body.open-collection-ui .feed-grid,
html body.open-collection-ui .folder-grid,
html body.open-collection-ui .cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  align-items: stretch !important;
  padding: 0 16px 24px !important;
}

html body.open-collection-ui .latest-section .mini-route-head,
html body.open-collection-ui .latest-section .section-head,
html body.open-collection-ui .latest-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 16px 10px !important;
}

html body.open-collection-ui .latest-section {
  position: relative !important;
}

html body.open-collection-ui .latest-section h3,
html body.open-collection-ui .latest-section h2 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  letter-spacing: -0.03em !important;
}

html body.open-collection-ui .latest-toggle {
  width: auto !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--blue) !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

html body.open-collection-ui .latest-feed.feed-grid,
html body.open-collection-ui .latest-feed.uniform-cards-grid {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 16px 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body.open-collection-ui .latest-feed.feed-grid::-webkit-scrollbar,
html body.open-collection-ui .latest-feed.uniform-cards-grid::-webkit-scrollbar {
  display: none !important;
}

html body.open-collection-ui .latest-feed .feed-card {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  min-height: 151px !important;
  height: 151px !important;
  scroll-snap-align: start !important;
}

html body.open-collection-ui .feed-card,
html body.open-collection-ui .folder-card,
html body.open-collection-ui .post-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 148px !important;
  padding: 16px !important;
  gap: 10px !important;
  border-radius: 16px !important;
  border: 0.5px solid var(--glass-border) !important;
  background: var(--glass) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  overflow: hidden !important;
}

html body.open-collection-ui .feed-card:hover,
html body.open-collection-ui .folder-card:hover,
html body.open-collection-ui .post-card:hover {
  background: var(--glass-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow) !important;
}

html body.open-collection-ui .feed-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html body.open-collection-ui .feed-card-body h3,
html body.open-collection-ui .post-card-title,
html body.open-collection-ui .folder-card h3 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body.open-collection-ui .feed-card-body p,
html body.open-collection-ui .post-card-subtitle,
html body.open-collection-ui .folder-card p {
  margin: 0 !important;
  color: var(--text-2) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

html body.open-collection-ui .post-card-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body.open-collection-ui .post-card-meta-left-slot,
html body.open-collection-ui .post-card-meta-center-slot,
html body.open-collection-ui .post-card-meta-right-slot {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

html body.open-collection-ui .post-card-meta-left-slot {
  justify-content: flex-start !important;
}

html body.open-collection-ui .post-card-meta-center-slot {
  justify-content: center !important;
}

html body.open-collection-ui .post-card-meta-right-slot {
  justify-content: flex-end !important;
}

html body.open-collection-ui .post-rating-badge,
html body.open-collection-ui .post-readtime-badge,
html body.open-collection-ui .meta-favorite-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-3) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body.open-collection-ui .post-read-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--blue-soft) !important;
  color: var(--text-2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body.open-collection-ui .meta-favorite-icon.is-filled svg,
html body.open-collection-ui .meta-favorite-icon.is-filled svg path {
  fill: var(--star-color) !important;
  stroke: var(--star-color) !important;
}

html body.open-collection-ui .meta-favorite-icon.is-outline svg,
html body.open-collection-ui .meta-favorite-icon.is-outline svg path {
  fill: none !important;
  stroke: var(--text-3) !important;
}

html body.open-collection-ui .feed-button,
html body.open-collection-ui .folder-open-button {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body.open-collection-ui .post-hero-image,
html body.open-collection-ui .post-cover,
html body.open-collection-ui .post-media img,
html body.open-collection-ui .post-description img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

html body.open-collection-ui .post-description-card {
  padding: 20px !important;
}

html body.open-collection-ui .post-description,
html body.open-collection-ui .post-description *,
html body.open-collection-ui .article-content,
html body.open-collection-ui .article-content * {
  max-width: 100% !important;
  color: var(--text) !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
  line-height: 1.62 !important;
}

html body.open-collection-ui .post-description a,
html body.open-collection-ui .article-content a {
  color: #8ecbff !important;
  text-decoration-color: rgba(142, 203, 255, 0.38) !important;
}

html body.open-collection-ui .post-toolbar,
html body.open-collection-ui .reader-toolbar,
html body.open-collection-ui .post-actions,
html body.open-collection-ui .rating-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

html body.open-collection-ui .reader-control,
html body.open-collection-ui .reader-toggle {
  width: auto !important;
  min-width: 42px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

html body.open-collection-ui .floating-post-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 92px !important;
  transform: translateX(-50%) !important;
  z-index: 80 !important;
  display: flex !important;
  gap: 8px !important;
}

html body.open-collection-ui .floating-post-nav button,
html body.open-collection-ui .scroll-top-button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  border: 0.5px solid var(--glass-border) !important;
  background: var(--blur-bg) !important;
  color: var(--text) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: var(--shadow) !important;
}

html body.open-collection-ui .reading-float,
html body.open-collection-ui .floating-reader {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 70 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: var(--blur-bg) !important;
  border: 0.5px solid var(--glass-border) !important;
  color: var(--text) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

html body.open-collection-ui .post-comments-panel {
  padding: 20px !important;
}

html body.open-collection-ui .post-comments-panel h2,
html body.open-collection-ui .post-comments-panel h3 {
  margin: 0 0 12px !important;
  color: var(--text) !important;
  font-size: 22px !important;
  text-align: left !important;
}

html body.open-collection-ui .post-comments-panel .section-kicker,
html body.open-collection-ui .section-kicker {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--blue) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

html body.open-collection-ui .toast,
html body.open-collection-ui .toast-host > * {
  border-radius: 14px !important;
  background: var(--blur-bg) !important;
  color: var(--text) !important;
  border: 0.5px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
}

html.light body.open-collection-ui,
html[data-theme="light"] body.open-collection-ui,
body.theme-light.open-collection-ui {
  background:
    radial-gradient(circle at 16% -4%, rgba(0, 122, 255, 0.13), transparent 32%),
    radial-gradient(circle at 100% 18%, rgba(191, 90, 242, 0.07), transparent 28%),
    var(--bg) !important;
}

html.light body.open-collection-ui .miniapp-head .miniapp-title-group h1 .title-accent,
html[data-theme="light"] body.open-collection-ui .miniapp-head .miniapp-title-group h1 .title-accent,
body.theme-light.open-collection-ui .miniapp-head .miniapp-title-group h1 .title-accent {
  color: var(--blue) !important;
}

html.light body.open-collection-ui .button-like,
html.light body.open-collection-ui .secondary-button,
html.light body.open-collection-ui .feed-button,
html.light body.open-collection-ui .folder-open-button,
html.light body.open-collection-ui .comment-submit,
html[data-theme="light"] body.open-collection-ui .button-like,
html[data-theme="light"] body.open-collection-ui .secondary-button,
html[data-theme="light"] body.open-collection-ui .feed-button,
html[data-theme="light"] body.open-collection-ui .folder-open-button,
html[data-theme="light"] body.open-collection-ui .comment-submit,
body.theme-light.open-collection-ui .button-like,
body.theme-light.open-collection-ui .secondary-button,
body.theme-light.open-collection-ui .feed-button,
body.theme-light.open-collection-ui .folder-open-button,
body.theme-light.open-collection-ui .comment-submit {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.16) !important;
}

html.light body.open-collection-ui .hero-book-card,
html[data-theme="light"] body.open-collection-ui .hero-book-card,
body.theme-light.open-collection-ui .hero-book-card {
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.08), rgba(255, 255, 255, 0.82)) !important;
  border-color: rgba(0, 122, 255, 0.16) !important;
}

html.light body.open-collection-ui .hero-book-icon path,
html.light body.open-collection-ui .hero-book-icon rect,
html[data-theme="light"] body.open-collection-ui .hero-book-icon path,
html[data-theme="light"] body.open-collection-ui .hero-book-icon rect,
body.theme-light.open-collection-ui .hero-book-icon path,
body.theme-light.open-collection-ui .hero-book-icon rect {
  fill: #ffffff !important;
  stroke: var(--blue) !important;
}

@media (min-width: 680px) {
  html body.open-collection-ui .miniapp-shell {
    max-width: 760px !important;
  }

  html body.open-collection-ui .feed-grid,
  html body.open-collection-ui .folder-grid,
  html body.open-collection-ui .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 390px) {
  html body.open-collection-ui .miniapp-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body.open-collection-ui .miniapp-head {
    padding: 18px !important;
  }

  html body.open-collection-ui .miniapp-hero-grid {
    grid-template-columns: minmax(0, 1fr) 62px !important;
  }

  html body.open-collection-ui .hero-book-card {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    border-radius: 18px !important;
  }

  html body.open-collection-ui .hero-book-icon {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Hard cascade lock: legacy CSS below/above uses very specific theme selectors
   with !important. These selectors intentionally outrank them. */
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .feed-card,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .folder-card,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .post-card,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .feed-card,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .folder-card,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .post-card,
body.open-collection-ui.theme-dark .miniapp-shell .feed-card,
body.open-collection-ui.theme-dark .miniapp-shell .folder-card,
body.open-collection-ui.theme-dark .miniapp-shell .post-card,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .feed-card,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .folder-card,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .post-card,
html.light body.open-collection-ui .miniapp-shell .feed-card,
html.light body.open-collection-ui .miniapp-shell .folder-card,
html.light body.open-collection-ui .miniapp-shell .post-card,
body.open-collection-ui.theme-light .miniapp-shell .feed-card,
body.open-collection-ui.theme-light .miniapp-shell .folder-card,
body.open-collection-ui.theme-light .miniapp-shell .post-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 148px !important;
  padding: 16px !important;
  gap: 10px !important;
  border-radius: 16px !important;
  border: 0.5px solid var(--glass-border) !important;
  background: var(--glass) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  overflow: hidden !important;
}

html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .feed-button,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .folder-open-button,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .feed-button,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .folder-open-button,
body.open-collection-ui.theme-dark .miniapp-shell .feed-button,
body.open-collection-ui.theme-dark .miniapp-shell .folder-open-button,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .feed-button,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .folder-open-button,
html.light body.open-collection-ui .miniapp-shell .feed-button,
html.light body.open-collection-ui .miniapp-shell .folder-open-button,
body.open-collection-ui.theme-light .miniapp-shell .feed-button,
body.open-collection-ui.theme-light .miniapp-shell .folder-open-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  margin-top: auto !important;
  padding: 0 18px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .feed-card-body,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .feed-card-body,
body.open-collection-ui.theme-dark .miniapp-shell .feed-card-body,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .feed-card-body,
html.light body.open-collection-ui .miniapp-shell .feed-card-body,
body.open-collection-ui.theme-light .miniapp-shell .feed-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .feed-card .feed-card-body h3,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .folder-card .feed-card-body h3,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .post-card .feed-card-body h3,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .feed-card .feed-card-body h3,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .folder-card .feed-card-body h3,
html[data-theme="dark"] body.open-collection-ui .miniapp-shell .post-card .feed-card-body h3,
body.open-collection-ui.theme-dark .miniapp-shell .feed-card .feed-card-body h3,
body.open-collection-ui.theme-dark .miniapp-shell .folder-card .feed-card-body h3,
body.open-collection-ui.theme-dark .miniapp-shell .post-card .feed-card-body h3,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .feed-card .feed-card-body h3,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .folder-card .feed-card-body h3,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .post-card .feed-card-body h3,
html.light body.open-collection-ui .miniapp-shell .feed-card .feed-card-body h3,
html.light body.open-collection-ui .miniapp-shell .folder-card .feed-card-body h3,
html.light body.open-collection-ui .miniapp-shell .post-card .feed-card-body h3,
body.open-collection-ui.theme-light .miniapp-shell .feed-card .feed-card-body h3,
body.open-collection-ui.theme-light .miniapp-shell .folder-card .feed-card-body h3,
body.open-collection-ui.theme-light .miniapp-shell .post-card .feed-card-body h3 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.012em !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

/* Latest feed must stay horizontal after all legacy/card locks. */
html body.open-collection-ui .miniapp-shell .latest-feed.feed-grid,
html body.open-collection-ui .miniapp-shell .latest-feed.uniform-cards-grid,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .latest-feed.feed-grid,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .latest-feed.feed-grid,
body.open-collection-ui.theme-dark .miniapp-shell .latest-feed.feed-grid,
body.open-collection-ui.theme-light .miniapp-shell .latest-feed.feed-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  padding: 0 16px 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

html body.open-collection-ui .miniapp-shell .latest-feed .feed-card,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .latest-feed .feed-card,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .latest-feed .feed-card,
body.open-collection-ui.theme-dark .miniapp-shell .latest-feed .feed-card,
body.open-collection-ui.theme-light .miniapp-shell .latest-feed .feed-card {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  min-height: 151px !important;
  height: 151px !important;
  scroll-snap-align: start !important;
}

html body.open-collection-ui .miniapp-shell .latest-section {
  position: relative !important;
}

html body.open-collection-ui .miniapp-shell .latest-section .latest-toggle,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .latest-section .latest-toggle,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .latest-section .latest-toggle,
body.open-collection-ui.theme-dark .miniapp-shell .latest-section .latest-toggle,
body.open-collection-ui.theme-light .miniapp-shell .latest-section .latest-toggle {
  position: absolute !important;
  top: 6px !important;
  right: 16px !important;
  z-index: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--blue) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

html body.open-collection-ui .miniapp-shell .latest-feed .feed-button,
html body.open-collection-ui .miniapp-shell .folder-card .folder-open-button,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .latest-feed .feed-button,
html[data-theme="dark"] body.open-collection-ui.theme-dark .miniapp-shell .folder-card .folder-open-button,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .latest-feed .feed-button,
html[data-theme="light"] body.open-collection-ui.theme-light .miniapp-shell .folder-card .folder-open-button,
body.open-collection-ui.theme-dark .miniapp-shell .latest-feed .feed-button,
body.open-collection-ui.theme-dark .miniapp-shell .folder-card .folder-open-button,
body.open-collection-ui.theme-light .miniapp-shell .latest-feed .feed-button,
body.open-collection-ui.theme-light .miniapp-shell .folder-card .folder-open-button {
  display: none !important;
}