:root {
  color-scheme: dark;
  --bg: #08070e;
  --bg-2: #10121a;
  --panel: rgba(20, 22, 32, 0.76);
  --panel-strong: rgba(28, 30, 42, 0.92);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f7f3e8;
  --muted: rgba(247, 243, 232, 0.68);
  --subtle: rgba(247, 243, 232, 0.46);
  --gold: #f4c35b;
  --orange: #ff7b2f;
  --magenta: #ed3f9e;
  --cyan: #49d7ff;
  --green: #75f1a4;
  --danger: #ff5f6c;
  --shadow: 0 18px 64px rgba(0, 0, 0, 0.42);
  --radius: 8px;
  --topbar-h: 72px;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(244, 195, 91, 0.08), transparent 34rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 72px),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
  padding-bottom: 56px;
}

.topbar {
  position: sticky;
  top: 0;
  /* 90 而非 30：topbar 是 sticky 会自建层叠上下文，里面的语言下拉(z-index 60)只在本上下文内有效；
     bottom-nav 是全局 z-index 45，若 topbar 上下文低于 45 就会被 bottom-nav 盖住(连带下拉)。提到 90 高于 bottom-nav、低于图片查看器(100)。 */
  z-index: 90;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 12px;
  background: rgba(8, 7, 14, 0.76);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.brand-logo {
  display: block;
  width: clamp(132px, 22vw, 210px);
  height: auto;
  filter: invert(1) saturate(0.4) brightness(1.6);
}

.brand-title {
  position: relative;
  flex: 0 0 auto;
  padding-left: 12px;
  color: rgba(248, 245, 255, 0.78);
  font-size: clamp(0.98rem, 1.9vw, 1.22rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Formal version tag, sits small and light right beside 资料百科 (not bold). */
.brand-version {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: 5px;
  margin-top: 1px;
  color: rgba(248, 245, 255, 0.42);
  font-size: clamp(0.56rem, 1.5vw, 0.72rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.05em;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.34), transparent);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(244, 195, 91, 0.48);
  display: grid;
  place-items: center;
  background: rgba(244, 195, 91, 0.08);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ui-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.ui-icon svg,
.type-badge-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.ui-icon svg.flat-icon {
  fill: currentColor;
  stroke: none;
}

.language-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

/* 自定义语言下拉（替换原生 select —— 原生 option 列表无法 CSS 控制、PC 上白底难看） */
.language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.language-trigger:hover { background: rgba(255, 255, 255, 0.1); }
.language-trigger[aria-expanded="true"] {
  border-color: rgba(73, 215, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(73, 215, 255, 0.12);
}
.language-current { white-space: nowrap; }
.language-caret { display: inline-flex; opacity: 0.72; transition: transform 180ms ease; }
.language-trigger[aria-expanded="true"] .language-caret { transform: rotate(180deg); }
.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  max-width: 240px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(21, 30, 45, 0.98), rgba(8, 13, 22, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.language-menu[hidden] { display: none; }
.language-option {
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}
.language-option:hover,
.language-option:focus-visible { background: rgba(73, 215, 255, 0.16); outline: none; }
.language-option.is-active { background: rgba(73, 215, 255, 0.22); font-weight: 600; }

.language-select,
.control-input,
.control-select,
.control-textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  outline: 0;
}

.language-select {
  min-width: 106px;
  padding: 9px 30px 9px 32px;
  appearance: none;
  -webkit-appearance: none;
}

.language-select:focus,
.control-input:focus,
.control-select:focus,
.control-textarea:focus {
  border-color: rgba(73, 215, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(73, 215, 255, 0.12);
}

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero-carousel {
  padding: clamp(18px, 4vw, 36px) 0 20px;
}

.carousel-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0c0d13;
  box-shadow: var(--shadow);
  contain: paint;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  will-change: transform;
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}

.carousel-frame.is-dragging .carousel-track {
  transition: none;
}

.video-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(280px, 48vw, 560px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.video-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 26%, rgba(8, 7, 14, 0.28) 48%, rgba(8, 7, 14, 0.9) 100%),
    linear-gradient(90deg, rgba(8, 7, 14, 0.62), transparent 58%);
  pointer-events: none;
}

.video-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.slide-content {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  padding: clamp(22px, 4vw, 44px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.slide-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.slide-summary {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 2vw, 1.16rem);
  line-height: 1.65;
}

.play-chip,
.youtube-play {
  display: inline-grid;
  place-items: center;
  background: #ff0033;
  color: #fff;
  box-shadow: 0 14px 34px rgba(255, 0, 51, 0.32);
}

.play-chip {
  width: 54px;
  height: 38px;
  margin-top: 22px;
  border-radius: 8px;
}

.play-chip svg,
.youtube-play svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  transform: translateX(1px);
}

.carousel-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.primary-button,
.ghost-button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.primary-button,
.ghost-button {
  min-height: 40px;
  padding: 0 14px;
  font-weight: 800;
}

.primary-button {
  border: 0;
  background: linear-gradient(90deg, var(--orange), var(--magenta));
}

.ghost-button:hover,
.icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.13);
}

.primary-button:hover,
.ghost-button:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.tabbar-wrap {
  position: sticky;
  top: var(--topbar-h);
  z-index: 24;
  padding: 10px 0 14px;
  background: linear-gradient(180deg, rgba(8, 7, 14, 0.96), rgba(8, 7, 14, 0.78));
  backdrop-filter: blur(14px);
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.tab-link {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 900;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.tab-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255, 123, 47, 0.95), rgba(237, 63, 158, 0.92));
  color: #fff;
}

.tab-link:not([aria-current="page"]):hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 16px;
}

.section-title {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0;
}

.section-note {
  margin: 6px 0 0;
  color: var(--subtle);
  line-height: 1.5;
}

.card-list {
  display: grid;
  gap: 10px;
}

.resource-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
  content-visibility: auto;
  contain-intrinsic-size: 74px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.resource-card:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 195, 91, 0.42);
  background: rgba(30, 32, 44, 0.9);
}

.resource-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  overflow: hidden;
}

.resource-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-icon svg,
.resource-action svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.resource-main {
  min-width: 0;
  align-self: center;
}

.resource-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.resource-title {
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.resource-summary {
  margin: 5px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.92rem;
}

.type-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(244, 195, 91, 0.32);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.type-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
}

.resource-icon.type-podcast,
.type-badge.type-podcast {
  color: #ffc857;
  border-color: rgba(255, 200, 87, 0.42);
  background: rgba(255, 200, 87, 0.1);
}

.resource-icon.type-link,
.type-badge.type-link {
  color: #33e28f;
  border-color: rgba(51, 226, 143, 0.34);
  background: rgba(51, 226, 143, 0.08);
}

.resource-icon.type-tweet,
.type-badge.type-tweet {
  color: #a66cff;
  border-color: rgba(166, 108, 255, 0.38);
  background: rgba(166, 108, 255, 0.1);
}

.resource-icon.type-announcement,
.type-badge.type-announcement {
  color: #49d7ff;
  border-color: rgba(73, 215, 255, 0.36);
  background: rgba(73, 215, 255, 0.09);
}

.resource-icon.type-video,
.type-badge.type-video {
  color: #ff8a48;
  border-color: rgba(255, 138, 72, 0.36);
  background: rgba(255, 138, 72, 0.09);
}

.resource-icon.type-pdf,
.type-badge.type-pdf {
  color: #ff5b5b;
  border-color: rgba(223, 59, 55, 0.38);
  background: rgba(223, 59, 55, 0.09);
}

.resource-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.youtube-cover {
  position: relative;
}

.youtube-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  align-items: start;
}

.masonry-column {
  display: grid;
  gap: clamp(10px, 2vw, 16px);
}

.gallery-item {
  appearance: none;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #151720;
  cursor: zoom-in;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.22);
  /* 不用 content-visibility：它会让屏外卡片完全不渲染，导致 IntersectionObserver 提前加载时
     初始态（透明+模糊）从未被画出，blur-up 渐现就跑不出来。瀑布流图数量有限，去掉它的性能影响很小。 */
  transform: translateZ(0);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  object-position: center center;
  opacity: 0; /* 未加载隐藏；加 is-loaded 后显示（发布端用 @keyframes 渐现，见下） */
}

.gallery-item.is-portrait-crop img {
  object-position: center top;
}

.gallery-item.is-landscape-crop img {
  object-position: center center;
}

/* 结束态：管理端（data-page=admin）直接显示，无动画 */
.gallery-item img.is-loaded {
  opacity: 1;
}

/* 渐现动画绑在 is-revealing —— 双端同步：发布端 observer 进视口时加、管理端首次渲染时加。
   @keyframes 从 from 关键帧开始跑，不依赖「初始态先渲染一帧」，content-visibility / 极快 blob 解码都不影响。
   管理端用 Set 记录已渐现过的图，后续编辑重渲染只加 is-loaded（不加 is-revealing），所以编辑预览不会闪。 */
.gallery-item img.is-revealing {
  animation: galleryReveal 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes galleryReveal {
  from { opacity: 0; transform: translateY(20px) scale(1.06); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 低端机 / 无障碍：直接显示，不做位移/模糊动画 */
@media (prefers-reduced-motion: reduce) {
  .gallery-item img.is-revealing { animation: none; }
}

/* 管理端专属修复：gallery/video 容器与 is-loaded 图不吃全局 anton-lazy-reveal 入场动画。
   管理端编辑会频繁重渲染整个预览 DOM，全局入场会每次重播 → 闪烁。
   这里把渐现收敛为只由 is-revealing 控制：首次进入渐现一次，已渐现的 is-loaded 静止、不重播。
   仅限 data-page=admin —— 发布端的入场动画完全不动。 */
body[data-page="admin"] .gallery-item,
body[data-page="admin"] .video-tile,
body[data-page="admin"] .gallery-item img.is-loaded {
  animation: none;
}
body[data-page="admin"] .gallery-item img.is-revealing {
  animation: galleryReveal 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 180ms ease;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-item:not(.video-tile) .gallery-caption {
  display: none;
}

.admin-gallery-image .sort-handle-image {
  left: 10px;
  right: auto;
}

.admin-image-browse {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 13px;
  background: rgba(5, 8, 14, 0.62);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: zoom-in;
  opacity: 0.92;
  backdrop-filter: blur(14px);
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.admin-image-browse::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.admin-image-browse svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.admin-gallery-image:hover .admin-image-browse,
.admin-image-browse:focus-visible {
  border-color: rgba(255, 210, 120, 0.62);
  background: rgba(25, 18, 12, 0.78);
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.video-library-section {
  display: grid;
  gap: clamp(14px, 2.4vw, 20px);
}

.video-subtabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 9, 24, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.video-subtab {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 clamp(10px, 2vw, 18px);
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.video-subtab > span:not(.ui-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-subtab[aria-current="page"] {
  color: #fff;
  /* 白字在亮橙渐变上对比天然偏低 → 发灰（底部「主页」白字亮，是因为它背景是深色导航条、高对比）。
     用「柔和大模糊」的深色光晕（不是 v144 的 2px 硬黑边）把白字托起来、显纯亮白；这也是底部 ANTON 图标投影的同款思路。 */
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.72), 0 1px 6px rgba(0, 0, 0, 0.45);
  background: var(--action-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    var(--action-glow);
}
.video-subtab[aria-current="page"] .ui-icon {
  /* 和底部 ANTON 图标同款柔和深色投影，让白图标在亮橙上立体、亮白（白色发光在亮底上没用） */
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.4));
}

.video-tile {
  display: block;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.video-tile-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: 46px;
  height: 34px;
  border-radius: 8px;
  transform: translate(-50%, -50%);
}

.video-tile-play.is-disabled {
  opacity: 0.38;
  filter: grayscale(0.75);
}

.video-library-section .video-tile-play {
  display: none;
}

.video-tile-caption {
  display: grid;
  gap: 4px;
  opacity: 1;
}

.video-tile-title,
.video-tile-summary {
  display: block;
}

.video-tile-title {
  font-size: 0.92rem;
  line-height: 1.25;
}

.video-tile-summary {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(0, 0, 0, 0.92);
  touch-action: none;
  cursor: zoom-out;
  overscroll-behavior: none;
}

.image-viewer.is-open {
  display: grid;
  place-items: center;
}

/* ---- LEGACY custom pager — Android / MIUI / desktop, RESTORED unchanged: a single grid-centred image
   plus an absolutely-centred incoming layer. Scoped to DIRECT children of .image-viewer so it never
   touches the iOS scroll-snap images further down. ---- */
.image-viewer > .viewer-image {
  max-width: 94vw;
  max-height: 92vh;
  user-select: none;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
  transition: transform 28ms linear;
}

.image-viewer > .viewer-image.is-switch-incoming {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---- iOS scroll-snap pager: the browser owns swipe / momentum / snap, so there is NO hand-rolled slide
   animation or element-swap to glitch on iOS Safari's compositor (ghosting / duplicate / black bar). ---- */
.viewer-track {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}

.viewer-track::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.viewer-slide {
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.viewer-track .viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  transform: translateX(-50%) translateY(18px);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(20, 22, 32, 0.94);
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.empty-state {
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 760px) {
  :root {
    --topbar-h: 64px;
  }

  .topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-logo {
    width: 128px;
  }

  .language-select {
    min-width: 92px;
    padding: 8px 28px 8px 30px;
    font-size: 0.86rem;
  }

  body[data-page="client"] {
    --topbar-h: 56px;
  }

  body[data-page="client"] .topbar {
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  }

  body[data-page="client"] .brand {
    gap: 7px;
  }

  body[data-page="client"] .brand-logo {
    width: clamp(96px, 28vw, 112px);
  }

  body[data-page="client"] .brand-title {
    padding-left: 8px;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  }

  body[data-page="client"] .language-shell > .ui-icon {
    left: 8px;
    width: 15px;
    height: 15px;
  }

  body[data-page="client"] .language-shell::after {
    right: 9px;
    width: 6px;
    height: 6px;
  }

  body[data-page="client"] .language-select {
    width: 74px;
    min-width: 74px;
    max-width: 74px;
    padding: 7px 22px 7px 26px;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
  }

  .shell {
    width: min(100% - 20px, 1180px);
  }

  .video-slide {
    min-height: 380px;
  }

  .slide-content {
    padding: 22px;
  }

  .carousel-controls {
    right: 12px;
    bottom: 12px;
  }

  .tabbar {
    gap: 5px;
    padding: 5px;
  }

  .tab-link {
    min-height: 40px;
    font-size: 0.9rem;
  }

  .video-subtabs {
    gap: 4px;
    padding: 5px;
  }

  .video-subtab {
    gap: 4px;
    min-height: 38px;
    padding: 0 4px;
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .section-head {
    display: block;
  }

  .resource-card {
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    gap: 12px;
    min-height: 76px;
    padding: 10px 10px 10px 12px;
    align-items: center;
  }

  .resource-icon {
    width: 48px;
    height: 48px;
  }

  .resource-main {
    display: grid;
    align-items: center;
    min-height: 48px;
    padding-right: 4px;
  }

  .resource-title {
    font-size: 0.94rem;
    line-height: 1.28;
  }

  .resource-summary {
    font-size: 0.82rem;
  }

  .resource-action {
    width: 38px;
    height: 38px;
    justify-self: end;
  }

  .type-badge {
    display: none;
  }

  .gallery-grid {
    gap: 8px;
  }

  .masonry-column {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* Premium dark interface refresh */
:root {
  --bg: #05070b;
  --bg-2: #0a0f18;
  --panel: rgba(12, 18, 29, 0.68);
  --panel-strong: rgba(15, 22, 34, 0.9);
  --line: rgba(151, 170, 205, 0.16);
  --line-strong: rgba(186, 204, 238, 0.28);
  --text: #f4f7fb;
  --muted: rgba(226, 233, 244, 0.68);
  --subtle: rgba(193, 205, 224, 0.46);
  --gold: #f6c84c;
  --orange: #ff8a1f;
  --magenta: #b968ff;
  --cyan: #62e5ff;
  --green: #45e895;
  --shadow: 0 22px 80px rgba(0, 0, 0, 0.48);
}

body {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14, 20, 31, 0.96), rgba(4, 6, 10, 0.98)),
    var(--bg);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

body::before {
  background:
    repeating-linear-gradient(90deg, rgba(116, 143, 184, 0.08) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(0deg, rgba(116, 143, 184, 0.055) 0 1px, transparent 1px 86px),
    linear-gradient(115deg, transparent 0 35%, rgba(98, 229, 255, 0.09) 44%, transparent 58%),
    linear-gradient(25deg, transparent 0 52%, rgba(246, 200, 76, 0.055) 62%, transparent 76%);
  opacity: 0.58;
  animation: anton-grid-drift 26s linear infinite;
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 82%, transparent);
}

body::after {
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(98, 229, 255, 0.11) 48%, transparent 54%),
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(246, 200, 76, 0.035) 43px 44px, transparent 45px 124px);
  opacity: 0.44;
  animation: anton-scan-sweep 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.app-shell,
.admin-app {
  position: relative;
  z-index: 0;
}

.topbar {
  background: rgba(5, 8, 14, 0.72);
  border-bottom-color: rgba(151, 170, 205, 0.14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 64px rgba(0, 0, 0, 0.24);
}

.brand-logo {
  filter: invert(1) brightness(1.9) drop-shadow(0 0 22px rgba(98, 229, 255, 0.08));
}

.language-select,
.control-input,
.control-select,
.control-textarea {
  background: rgba(13, 19, 30, 0.78);
  border-color: rgba(151, 170, 205, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.carousel-frame,
.resource-card,
.gallery-item,
.tabbar,
.preview-frame,
.admin-section {
  border-color: rgba(151, 170, 205, 0.17);
  background:
    linear-gradient(180deg, rgba(21, 30, 45, 0.72), rgba(8, 13, 22, 0.66)),
    rgba(8, 13, 22, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 62px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
}

.carousel-frame {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 28px 90px rgba(0, 0, 0, 0.44);
}

.video-slide::after {
  background:
    linear-gradient(180deg, rgba(5, 7, 11, 0.08) 0%, rgba(5, 7, 11, 0.34) 46%, rgba(5, 7, 11, 0.9) 100%),
    linear-gradient(90deg, rgba(5, 7, 11, 0.72), rgba(5, 7, 11, 0.16) 64%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
}

.eyebrow,
.section-title,
.admin-section-title {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(246, 200, 76, 0.16);
}

.slide-title {
  color: #fff;
  text-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.tabbar-wrap {
  background: linear-gradient(180deg, rgba(5, 8, 14, 0.92), rgba(5, 8, 14, 0.72));
}

.tabbar {
  background: rgba(8, 12, 20, 0.74);
}

.tab-link {
  color: rgba(226, 233, 244, 0.64);
}

.tab-link[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(98, 229, 255, 0.15), rgba(185, 104, 255, 0.13)),
    rgba(18, 25, 38, 0.86);
  color: #fff;
  border: 1px solid rgba(98, 229, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 34px rgba(98, 229, 255, 0.08);
}

.primary-button {
  background:
    linear-gradient(90deg, rgba(246, 200, 76, 0.95), rgba(185, 104, 255, 0.94));
  color: #06080c;
  box-shadow: 0 12px 34px rgba(185, 104, 255, 0.14);
}

.ghost-button,
.icon-button,
.resource-action {
  background: rgba(13, 19, 30, 0.78);
  border-color: rgba(151, 170, 205, 0.18);
}

.resource-card:hover,
.gallery-item:hover {
  border-color: rgba(98, 229, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(24, 35, 52, 0.78), rgba(9, 15, 25, 0.72)),
    rgba(8, 13, 22, 0.72);
  transform: translateY(-2px);
}

.resource-icon {
  background: rgba(4, 8, 14, 0.64);
  border-color: rgba(151, 170, 205, 0.16);
  color: var(--cyan);
}

.type-badge {
  color: var(--gold);
  border-color: rgba(246, 200, 76, 0.24);
  background: rgba(246, 200, 76, 0.075);
}

.play-chip,
.youtube-play {
  background: linear-gradient(135deg, #ff174d, #ff7a1f);
  box-shadow: 0 14px 36px rgba(255, 72, 58, 0.28);
}

.gallery-item {
  background: rgba(10, 15, 24, 0.78);
}

.gallery-caption {
  background: linear-gradient(180deg, transparent, rgba(5, 8, 14, 0.82));
}

.empty-state {
  border-color: rgba(151, 170, 205, 0.2);
  background: rgba(11, 17, 27, 0.62);
}

@keyframes anton-grid-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(86px, 86px, 0);
  }
}

@keyframes anton-scan-sweep {
  0% {
    transform: translate3d(-3%, -2%, 0);
    opacity: 0.28;
  }

  100% {
    transform: translate3d(3%, 2%, 0);
    opacity: 0.48;
  }
}

/* Warm bloom interface refresh */
:root {
  --bg: #1d120c;
  --bg-2: #2a160d;
  --panel: rgba(62, 35, 20, 0.66);
  --panel-strong: rgba(76, 41, 22, 0.9);
  --line: rgba(255, 191, 105, 0.24);
  --line-strong: rgba(255, 214, 153, 0.42);
  --text: #fff7eb;
  --muted: rgba(255, 237, 216, 0.72);
  --subtle: rgba(255, 220, 185, 0.52);
  --gold: #ffd36d;
  --orange: #ff8126;
  --magenta: #aa6cff;
  --cyan: #ffb24a;
  --green: #60e7a8;
  --shadow: 0 24px 90px rgba(105, 45, 12, 0.32), 0 0 70px rgba(255, 129, 38, 0.08);
}

body {
  background:
    linear-gradient(180deg, rgba(61, 30, 12, 0.34), rgba(31, 16, 12, 0.88) 42%, rgba(20, 13, 16, 0.94)),
    linear-gradient(120deg, #2a170d 0%, #1d120c 44%, #25142a 100%);
}

body::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 207, 144, 0.12) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(255, 190, 105, 0.08) 0 1px, transparent 1px 82px),
    linear-gradient(112deg, transparent 0 24%, rgba(255, 132, 32, 0.18) 36%, rgba(255, 205, 112, 0.12) 46%, transparent 62%),
    linear-gradient(34deg, transparent 0 46%, rgba(170, 108, 255, 0.12) 58%, transparent 74%);
  opacity: 0.72;
  animation-duration: 30s;
}

body::after {
  background:
    linear-gradient(180deg, transparent 0 30%, rgba(255, 132, 32, 0.14) 43%, rgba(170, 108, 255, 0.1) 51%, transparent 66%),
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(255, 213, 120, 0.06) 43px 44px, transparent 45px 124px);
  opacity: 0.56;
  animation-duration: 22s;
}

.topbar {
  background: rgba(42, 22, 12, 0.68);
  border-bottom-color: rgba(255, 205, 137, 0.18);
  box-shadow: 0 1px 0 rgba(255, 244, 219, 0.06), 0 22px 68px rgba(113, 48, 13, 0.18), 0 0 72px rgba(255, 129, 38, 0.08);
}

.brand-logo {
  filter: invert(1) sepia(0.22) saturate(1.4) brightness(1.75) drop-shadow(0 0 22px rgba(255, 129, 38, 0.2));
}

.language-select,
.control-input,
.control-select,
.control-textarea {
  background: rgba(55, 29, 17, 0.7);
  border-color: rgba(255, 205, 137, 0.24);
  color: var(--text);
}

.carousel-frame,
.resource-card,
.gallery-item,
.tabbar,
.preview-frame,
.admin-section {
  border-color: rgba(255, 205, 137, 0.22);
  background:
    linear-gradient(180deg, rgba(79, 45, 25, 0.64), rgba(38, 22, 18, 0.6)),
    rgba(52, 29, 18, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 18px 62px rgba(83, 36, 13, 0.24),
    0 0 48px rgba(255, 132, 32, 0.08);
}

.carousel-frame {
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.08),
    0 32px 92px rgba(86, 38, 12, 0.32),
    0 0 86px rgba(255, 132, 32, 0.1);
}

.video-slide::after {
  background:
    linear-gradient(180deg, rgba(31, 14, 8, 0.02) 0%, rgba(43, 20, 10, 0.24) 44%, rgba(34, 18, 13, 0.78) 100%),
    linear-gradient(90deg, rgba(38, 18, 10, 0.66), rgba(46, 22, 12, 0.08) 64%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px);
}

.eyebrow,
.section-title,
.admin-section-title {
  color: #ffce67;
  text-shadow: 0 0 28px rgba(255, 132, 32, 0.28), 0 0 48px rgba(170, 108, 255, 0.08);
}

.tabbar-wrap {
  background: linear-gradient(180deg, rgba(37, 19, 11, 0.88), rgba(37, 19, 11, 0.58));
}

.tabbar {
  background: rgba(52, 29, 18, 0.68);
}

.tab-link {
  color: rgba(255, 237, 216, 0.68);
}

.tab-link[aria-current="page"] {
  background:
    linear-gradient(90deg, rgba(255, 129, 38, 0.94), rgba(255, 206, 103, 0.9) 58%, rgba(170, 108, 255, 0.78));
  color: #20100a;
  border-color: rgba(255, 235, 187, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 12px 34px rgba(255, 129, 38, 0.22),
    0 0 42px rgba(170, 108, 255, 0.12);
}

.primary-button {
  background: linear-gradient(90deg, #ff8126, #ffd36d 62%, #aa6cff);
  color: #22110a;
  box-shadow: 0 14px 38px rgba(255, 129, 38, 0.24), 0 0 46px rgba(255, 129, 38, 0.16);
}

.ghost-button,
.icon-button,
.resource-action {
  background: rgba(66, 36, 22, 0.58);
  border-color: rgba(255, 205, 137, 0.24);
}

.resource-card:hover,
.gallery-item:hover {
  border-color: rgba(255, 192, 95, 0.44);
  background:
    linear-gradient(180deg, rgba(91, 51, 28, 0.74), rgba(45, 25, 18, 0.68)),
    rgba(62, 35, 20, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 225, 0.1),
    0 18px 60px rgba(96, 42, 14, 0.28),
    0 0 58px rgba(255, 129, 38, 0.12);
}

.resource-icon {
  background: rgba(45, 23, 13, 0.62);
  border-color: rgba(255, 205, 137, 0.24);
  color: #ffc35c;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 225, 0.04), 0 0 34px rgba(255, 129, 38, 0.12);
}

.type-badge {
  color: #ffd36d;
  border-color: rgba(255, 211, 109, 0.34);
  background: rgba(255, 129, 38, 0.1);
}

.play-chip,
.youtube-play {
  background: linear-gradient(135deg, #ff5a1f, #ffb13d 58%, #aa6cff);
  box-shadow: 0 14px 38px rgba(255, 90, 31, 0.32), 0 0 52px rgba(255, 177, 61, 0.16);
}

.gallery-item {
  background: rgba(47, 25, 17, 0.72);
}

.gallery-caption {
  background: linear-gradient(180deg, transparent, rgba(42, 20, 11, 0.8));
}

.empty-state {
  border-color: rgba(255, 205, 137, 0.24);
  background: rgba(50, 28, 18, 0.56);
}

/* Copper bloom correction: warm, not yellow */
:root {
  --bg: #221411;
  --bg-2: #301811;
  --panel: rgba(62, 32, 22, 0.64);
  --panel-strong: rgba(77, 37, 23, 0.88);
  --line: rgba(255, 139, 72, 0.24);
  --line-strong: rgba(255, 157, 92, 0.4);
  --text: #fff3e8;
  --muted: rgba(255, 231, 216, 0.72);
  --subtle: rgba(255, 205, 185, 0.52);
  --gold: #ff8a48;
  --orange: #ff6f2c;
  --magenta: #a66cff;
  --cyan: #ff7a3d;
  --green: #61e7a8;
  --shadow: 0 24px 90px rgba(105, 42, 14, 0.28), 0 0 70px rgba(255, 98, 36, 0.09);
}

body {
  background:
    linear-gradient(180deg, rgba(70, 31, 18, 0.24), rgba(34, 20, 18, 0.78) 44%, rgba(24, 15, 18, 0.94)),
    linear-gradient(122deg, #32170f 0%, #231514 48%, #2e1b3a 100%);
}

body::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 118, 58, 0.095) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(255, 118, 58, 0.065) 0 1px, transparent 1px 82px),
    linear-gradient(112deg, transparent 0 28%, rgba(255, 96, 32, 0.16) 39%, rgba(170, 108, 255, 0.08) 53%, transparent 68%),
    linear-gradient(34deg, transparent 0 48%, rgba(170, 108, 255, 0.13) 60%, transparent 76%);
  opacity: 0.66;
}

body::after {
  background:
    linear-gradient(180deg, transparent 0 32%, rgba(255, 96, 32, 0.12) 44%, rgba(170, 108, 255, 0.12) 55%, transparent 68%),
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(255, 118, 58, 0.045) 43px 44px, transparent 45px 124px);
  opacity: 0.5;
}

.topbar {
  background: rgba(45, 23, 16, 0.68);
  border-bottom-color: rgba(255, 139, 72, 0.2);
  box-shadow: 0 1px 0 rgba(255, 238, 224, 0.06), 0 22px 68px rgba(111, 43, 15, 0.18), 0 0 72px rgba(255, 96, 32, 0.08);
}

.language-select,
.control-input,
.control-select,
.control-textarea {
  background: rgba(54, 28, 20, 0.7);
  border-color: rgba(255, 139, 72, 0.25);
}

.carousel-frame,
.resource-card,
.gallery-item,
.tabbar,
.preview-frame,
.admin-section {
  border-color: rgba(255, 139, 72, 0.22);
  background:
    linear-gradient(180deg, rgba(76, 39, 26, 0.62), rgba(37, 23, 20, 0.58)),
    rgba(50, 29, 22, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 229, 0.07),
    0 18px 62px rgba(84, 34, 14, 0.22),
    0 0 48px rgba(255, 96, 32, 0.08);
}

.eyebrow,
.section-title,
.admin-section-title {
  color: #ff8a48;
  text-shadow: 0 0 28px rgba(255, 96, 32, 0.26), 0 0 48px rgba(170, 108, 255, 0.1);
}

.tab-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255, 103, 42, 0.94), rgba(255, 134, 70, 0.88) 58%, rgba(170, 108, 255, 0.78));
  color: #fff5ed;
  border-color: rgba(255, 156, 92, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 34px rgba(255, 96, 32, 0.2),
    0 0 42px rgba(170, 108, 255, 0.12);
}

.primary-button {
  background: linear-gradient(90deg, #ff672a, #ff8a48 58%, #a66cff);
  color: #fff7f0;
  box-shadow: 0 14px 38px rgba(255, 96, 32, 0.23), 0 0 46px rgba(170, 108, 255, 0.11);
}

.resource-card:hover,
.gallery-item:hover {
  border-color: rgba(255, 134, 70, 0.42);
  background:
    linear-gradient(180deg, rgba(89, 45, 29, 0.72), rgba(43, 25, 20, 0.66)),
    rgba(60, 34, 24, 0.64);
}

.resource-icon {
  border-color: rgba(255, 139, 72, 0.24);
  color: #ff8a48;
}

.type-badge {
  color: #ff9b62;
  border-color: rgba(255, 139, 72, 0.34);
  background: rgba(255, 96, 32, 0.1);
}

.play-chip,
.youtube-play {
  background: linear-gradient(135deg, #ff4f24, #ff7a3d 58%, #a66cff);
  box-shadow: 0 14px 38px rgba(255, 80, 36, 0.3), 0 0 52px rgba(170, 108, 255, 0.13);
}

/* Electric ember motion layer: cool orange, no yellow wash */
:root {
  --gold: #ff6d3a;
  --orange: #ff5528;
  --magenta: #9b5cff;
  --cyan: #38d7ff;
  --line: rgba(255, 96, 48, 0.22);
  --line-strong: rgba(155, 92, 255, 0.34);
}

body {
  background:
    radial-gradient(circle at 14% -8%, rgba(255, 74, 28, 0.2), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(155, 92, 255, 0.16), transparent 32%),
    linear-gradient(140deg, #29120f 0%, #1e1416 46%, #27193a 100%);
}

body::before {
  inset: -22%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 84, 40, 0.09) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(155, 92, 255, 0.06) 0 1px, transparent 1px 76px),
    linear-gradient(112deg, transparent 0 30%, rgba(255, 74, 28, 0.16) 42%, transparent 58%),
    linear-gradient(34deg, transparent 0 46%, rgba(155, 92, 255, 0.16) 60%, transparent 76%);
  opacity: 0.7;
  animation: anton-circuit-drift 24s linear infinite;
  mix-blend-mode: screen;
}

body::after {
  inset: -28%;
  background:
    conic-gradient(from 18deg at 50% 50%, transparent 0deg, rgba(255, 74, 28, 0.16) 58deg, transparent 118deg, rgba(155, 92, 255, 0.17) 208deg, transparent 292deg),
    radial-gradient(circle at 52% 50%, transparent 0 34%, rgba(56, 215, 255, 0.07) 46%, transparent 58%);
  opacity: 0.58;
  animation: anton-bloom-orbit 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.app-shell::before,
.admin-app::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(255, 74, 28, 0.12) 36%, transparent 48%),
    linear-gradient(248deg, transparent 0 38%, rgba(155, 92, 255, 0.14) 48%, transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 58px, rgba(56, 215, 255, 0.045) 59px 60px, transparent 61px 168px);
  opacity: 0.7;
  transform: translate3d(0, 0, 0) rotate(0.001deg);
  will-change: transform, opacity;
  animation: anton-energy-shear 15s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.tab-link[aria-current="page"],
.primary-button {
  background: linear-gradient(90deg, #ff4a1c, #ff6d3a 58%, #9b5cff);
}

.eyebrow,
.section-title,
.admin-section-title,
.resource-icon,
.type-badge {
  color: #ff6d3a;
}

@keyframes anton-circuit-drift {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0.001deg);
  }

  100% {
    transform: translate3d(76px, 76px, 0) rotate(0.001deg);
  }
}

@keyframes anton-bloom-orbit {
  0% {
    transform: translate3d(-3%, 2%, 0) rotate(-8deg) scale(1);
    opacity: 0.42;
  }

  100% {
    transform: translate3d(3%, -2%, 0) rotate(12deg) scale(1.04);
    opacity: 0.62;
  }
}

@keyframes anton-energy-shear {
  0% {
    transform: translate3d(-3%, 0, 0) skewX(-2deg);
    opacity: 0.46;
  }

  100% {
    transform: translate3d(3%, 1.5%, 0) skewX(2deg);
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .app-shell::before,
  .admin-app::before {
    animation: none;
  }
}

/* Dark violet final background: no amber/brown base */
:root {
  --bg: #070511;
  --bg-2: #10081f;
  --panel: rgba(18, 12, 36, 0.68);
  --panel-strong: rgba(22, 14, 44, 0.9);
  --line: rgba(167, 139, 250, 0.24);
  --line-strong: rgba(34, 211, 238, 0.34);
  --text: #f8f5ff;
  --muted: rgba(231, 224, 255, 0.72);
  --subtle: rgba(206, 196, 255, 0.52);
  --gold: #c084fc;
  --orange: #8b5cf6;
  --magenta: #d946ef;
  --cyan: #22d3ee;
  --green: #5df6b2;
  --shadow: 0 24px 90px rgba(8, 4, 24, 0.54), 0 0 78px rgba(139, 92, 246, 0.13);
}

body {
  background:
    radial-gradient(circle at 18% 4%, rgba(139, 92, 246, 0.24), transparent 34%),
    radial-gradient(circle at 82% 6%, rgba(217, 70, 239, 0.17), transparent 32%),
    radial-gradient(circle at 62% 82%, rgba(34, 211, 238, 0.1), transparent 38%),
    linear-gradient(142deg, #070511 0%, #0f0820 42%, #1c1035 72%, #080613 100%);
}

body::before {
  inset: -24%;
  background:
    repeating-linear-gradient(90deg, rgba(167, 139, 250, 0.09) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.045) 0 1px, transparent 1px 78px),
    linear-gradient(112deg, transparent 0 30%, rgba(139, 92, 246, 0.18) 43%, transparent 58%),
    linear-gradient(34deg, transparent 0 45%, rgba(217, 70, 239, 0.16) 60%, transparent 76%);
  opacity: 0.78;
  animation: anton-violet-grid-drift 26s linear infinite;
  mix-blend-mode: screen;
}

body::after {
  inset: -30%;
  background:
    conic-gradient(from 24deg at 50% 50%, transparent 0deg, rgba(139, 92, 246, 0.2) 64deg, transparent 122deg, rgba(217, 70, 239, 0.18) 212deg, transparent 294deg),
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(34, 211, 238, 0.08) 46%, transparent 60%);
  opacity: 0.62;
  animation: anton-violet-orbit 20s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.app-shell::before,
.admin-app::before {
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(139, 92, 246, 0.16) 38%, transparent 51%),
    linear-gradient(248deg, transparent 0 38%, rgba(217, 70, 239, 0.16) 49%, transparent 64%),
    repeating-linear-gradient(135deg, transparent 0 58px, rgba(34, 211, 238, 0.055) 59px 60px, transparent 61px 168px);
  opacity: 0.72;
  animation: anton-violet-shear 16s ease-in-out infinite alternate;
}

.topbar {
  background: rgba(9, 6, 23, 0.72);
  border-bottom-color: rgba(167, 139, 250, 0.2);
  box-shadow: 0 1px 0 rgba(248, 245, 255, 0.06), 0 22px 68px rgba(8, 4, 24, 0.4), 0 0 72px rgba(139, 92, 246, 0.1);
}

.language-select,
.control-input,
.control-select,
.control-textarea {
  background: rgba(18, 12, 36, 0.74);
  border-color: rgba(167, 139, 250, 0.24);
}

.carousel-frame,
.resource-card,
.gallery-item,
.tabbar,
.preview-frame,
.admin-section {
  border-color: rgba(167, 139, 250, 0.22);
  background:
    linear-gradient(180deg, rgba(28, 18, 56, 0.66), rgba(13, 9, 27, 0.64)),
    rgba(17, 11, 35, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(248, 245, 255, 0.07),
    0 18px 62px rgba(8, 4, 24, 0.36),
    0 0 54px rgba(139, 92, 246, 0.1);
}

.eyebrow,
.section-title,
.admin-section-title,
.resource-icon,
.type-badge {
  color: #c084fc;
  text-shadow: 0 0 28px rgba(139, 92, 246, 0.28), 0 0 46px rgba(34, 211, 238, 0.1);
}

.tab-link[aria-current="page"],
.primary-button {
  background: linear-gradient(90deg, #7c3aed, #c026d3 56%, #22d3ee);
  color: #fff;
  border-color: rgba(216, 180, 254, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 34px rgba(139, 92, 246, 0.24),
    0 0 44px rgba(34, 211, 238, 0.13);
}

.resource-card:hover,
.gallery-item:hover {
  border-color: rgba(192, 132, 252, 0.44);
  background:
    linear-gradient(180deg, rgba(36, 23, 72, 0.76), rgba(16, 10, 34, 0.7)),
    rgba(22, 14, 44, 0.66);
}

.play-chip,
.youtube-play {
  background: linear-gradient(135deg, #7c3aed, #d946ef 58%, #22d3ee);
  box-shadow: 0 14px 38px rgba(139, 92, 246, 0.3), 0 0 52px rgba(34, 211, 238, 0.14);
}

@keyframes anton-violet-grid-drift {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0.001deg);
  }

  100% {
    transform: translate3d(78px, 78px, 0) rotate(0.001deg);
  }
}

@keyframes anton-violet-orbit {
  0% {
    transform: translate3d(-3%, 2%, 0) rotate(-9deg) scale(1);
    opacity: 0.44;
  }

  100% {
    transform: translate3d(3%, -2%, 0) rotate(12deg) scale(1.04);
    opacity: 0.66;
  }
}

@keyframes anton-violet-shear {
  0% {
    transform: translate3d(-3%, 0, 0) skewX(-2deg);
    opacity: 0.5;
  }

  100% {
    transform: translate3d(3%, 1.5%, 0) skewX(2deg);
    opacity: 0.78;
  }
}

/* Warm action gradient and borderless video carousel */
:root {
  --gold: #ffc857;
  --orange: #ff7a1a;
  --magenta: #8b5cf6;
  --action-gradient: linear-gradient(100deg, #ffc857 0%, #ff5a1f 48%, #8b5cf6 100%);
  --action-glow: 0 14px 40px rgba(255, 90, 31, 0.24), 0 0 46px rgba(139, 92, 246, 0.18);
}

.carousel-frame {
  border: 0;
  background: transparent;
  box-shadow: 0 30px 90px rgba(8, 4, 24, 0.42), 0 0 72px rgba(139, 92, 246, 0.12);
}

.carousel-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 200, 87, 0.1), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(139, 92, 246, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(18, 12, 36, 0.34), rgba(7, 5, 17, 0.08));
  pointer-events: none;
}

.carousel-track,
.carousel-controls,
.carousel-dots {
  position: relative;
  z-index: 1;
}

.tab-link[aria-current="page"],
.primary-button,
.play-chip,
.youtube-play {
  background: var(--action-gradient);
  color: #fff;
  border-color: rgba(255, 200, 87, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    var(--action-glow);
}

.primary-button:hover,
.tab-link[aria-current="page"]:hover {
  filter: saturate(1.08) brightness(1.03);
}

.carousel-dots {
  position: absolute;
  left: clamp(18px, 4vw, 42px);
  bottom: 18px;
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 28px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(248, 245, 255, 0.24);
  cursor: pointer;
}

.carousel-dot.is-active {
  width: 46px;
  background: var(--action-gradient);
  box-shadow: 0 0 26px rgba(255, 90, 31, 0.22), 0 0 26px rgba(139, 92, 246, 0.2);
}

/* Centered play affordance */
.video-slide > .play-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(58px, 8vw, 76px);
  height: clamp(42px, 5.4vw, 54px);
  margin: 0;
  border-radius: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.video-slide > .play-chip svg {
  width: 26px;
  height: 26px;
}

/* Official X / Twitter mirror */
.twitter-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(22px, 4vw, 42px);
}

.twitter-hero,
.tweet-card,
.twitter-empty,
.twitter-loading,
.twitter-error,
.twitter-boundary {
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(16, 12, 34, 0.86), rgba(6, 5, 14, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 58px rgba(5, 3, 14, 0.34);
}

.twitter-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 3vw, 24px);
}

.twitter-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 72%;
  background: linear-gradient(110deg, transparent 8%, rgba(255, 122, 26, 0.16), rgba(139, 92, 246, 0.2), transparent 82%);
  opacity: 0.72;
  transform: translate3d(-12%, 0, 0);
  animation: anton-twitter-sheen 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.twitter-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(68px, 10vw, 96px);
  height: clamp(68px, 10vw, 96px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb84d, #ff5224 46%, #8b5cf6);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 0 42px rgba(139, 92, 246, 0.24), 0 0 34px rgba(255, 90, 31, 0.18);
}

.twitter-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.twitter-profile-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.twitter-profile-main h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.twitter-profile-main p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.twitter-bio {
  max-width: 720px;
  margin-top: 10px !important;
  color: rgba(247, 243, 232, 0.78) !important;
  font-size: 14px;
  line-height: 1.55;
}

.verified-dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.28);
}

.twitter-profile-metrics,
.tweet-metrics,
.twitter-summary-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.twitter-profile-metrics {
  justify-content: flex-end;
  min-width: 240px;
}

.tweet-metric {
  display: grid;
  gap: 2px;
  min-width: 78px;
  padding: 9px 10px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.tweet-metric strong {
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.tweet-metric span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
}

.tweet-card .tweet-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 14px);
  margin-top: 12px;
}

.tweet-card .tweet-action-metric,
.twitter-summary-grid .tweet-metric {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tweet-action-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  color: rgba(247, 243, 232, 0.68);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.tweet-action-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: rgba(226, 246, 255, 0.9);
}

.tweet-action-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tweet-action-metric strong {
  min-width: 0;
  color: rgba(247, 243, 232, 0.72);
  font-size: 13px;
  font-weight: 400;
}

.twitter-summary-grid .tweet-metric strong {
  color: #fff;
  font-size: 14px;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.18);
}

.twitter-summary-grid .tweet-metric span {
  color: rgba(247, 243, 232, 0.46);
  font-size: 10px;
}

.twitter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.twitter-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.twitter-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.twitter-column-head > span:last-child {
  color: var(--subtle);
  font-size: 12px;
}

.tweet-card {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 18px);
}

/* Mirror X's pinned tweet: cyan accent + a 📌 置顶 badge in the kind pill. */
.tweet-card.is-pinned {
  border-color: rgba(73, 215, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(73, 215, 255, 0.28);
}
.tweet-card.is-pinned .tweet-kind {
  border-color: rgba(73, 215, 255, 0.42);
  background: rgba(73, 215, 255, 0.12);
  color: #8fe3ff;
}
.tweet-pinned-badge {
  font-weight: 800;
}

/* X mirror header is clickable → minimal fade-in confirm dialog before leaving to the official X profile. */
.twitter-hero {
  cursor: pointer;
}
.x-redirect-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 8, 16, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.x-redirect-overlay.is-visible {
  opacity: 1;
}
.x-redirect-dialog {
  width: min(380px, 100%);
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(151, 170, 205, 0.2);
  background: linear-gradient(180deg, rgba(21, 30, 45, 0.98), rgba(8, 13, 22, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  transform: translateY(10px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.x-redirect-overlay.is-visible .x-redirect-dialog {
  transform: translateY(0) scale(1);
}
.x-redirect-text {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}
.x-redirect-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.x-redirect-btn {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease;
}
.x-redirect-btn:active {
  transform: scale(0.97);
}
.x-redirect-cancel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.x-redirect-confirm {
  border: 0;
  background: linear-gradient(90deg, var(--orange), var(--magenta));
  color: #fff;
}

/* Personal local "like" toggle on mirrored tweets — fills the heart pink, persisted in localStorage. */
.tweet-like-btn {
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  transition: transform 140ms ease;
}
.tweet-like-btn:hover .tweet-action-icon {
  color: #f6457f;
}
.tweet-like-btn:active {
  transform: scale(0.88);
}
.tweet-like-btn.is-liked .tweet-action-icon {
  color: #f6457f;
}
.tweet-like-btn.is-liked .tweet-action-icon svg {
  fill: #f6457f;
}
.tweet-like-btn.is-liked strong {
  color: #f6457f;
}

.tweet-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--action-gradient);
  box-shadow: 0 0 26px rgba(255, 90, 31, 0.22), 0 0 22px rgba(139, 92, 246, 0.22);
}

.tweet-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 800;
}

.tweet-kind {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(255, 122, 26, 0.28);
  border-radius: 999px;
  background: rgba(255, 122, 26, 0.1);
  color: #ffb366;
  font-size: 11px;
  font-weight: 900;
}

.tweet-text {
  margin: 12px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.62;
  white-space: pre-wrap;
}

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

.tweet-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
}

.twitter-side-panel {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
}

.twitter-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.twitter-boundary {
  display: grid;
  gap: 8px;
  padding: 14px;
  color: var(--muted);
}

.twitter-boundary strong {
  color: #fff;
  font-size: 14px;
}

.twitter-boundary span {
  font-size: 13px;
  line-height: 1.55;
}

.twitter-empty,
.twitter-loading,
.twitter-error,
.twitter-api-note {
  padding: 14px;
  color: var(--muted);
  font-weight: 800;
}

.twitter-error {
  border-color: rgba(255, 95, 108, 0.36);
  color: #ffd3d6;
}

.twitter-api-note {
  border: 1px solid rgba(255, 200, 87, 0.18);
  border-radius: 8px;
  background: rgba(255, 122, 26, 0.08);
  color: #ffd6a8;
  font-size: 12px;
  line-height: 1.55;
}

.dapp-announcement-section {
  display: grid;
  gap: 18px;
  padding-bottom: 18px;
}

.dapp-announcement-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.dapp-announcement-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(151, 71, 255, 0.1));
  color: rgba(235, 230, 247, 0.82);
  font-size: 11px;
  font-weight: 900;
}

.dapp-announcement-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.dapp-announcement-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 34%) minmax(0, 1fr);
  gap: 0;
  min-height: 226px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(151, 71, 255, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(7, 5, 16, 0.96), rgba(18, 9, 34, 0.94));
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  box-shadow:
    0 16px 34px rgba(3, 1, 12, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: perspective(1200px) rotateX(3deg) rotateY(-1.6deg) translate3d(0, 0, -18px) scale(0.982);
  transform-origin: 50% 50%;
  animation: dapp-announcement-in 360ms ease both;
  animation-delay: var(--delay, 0ms);
  contain: layout paint;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 1200ms ease,
    background 1200ms ease,
    color 1200ms ease,
    box-shadow 1200ms ease,
    opacity 360ms ease;
}

.dapp-announcement-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #101018, rgba(151, 71, 255, 0.72), rgba(255, 255, 255, 0.88));
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: 0 0;
  transition:
    opacity 1900ms ease-in-out,
    transform 2000ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dapp-announcement-card::after {
  content: "";
  position: absolute;
  inset: -34% 14% auto;
  height: 54%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(151, 71, 255, 0.08) 44%, transparent 70%);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 1700ms ease-in-out,
    transform 1900ms ease;
  pointer-events: none;
}

.dapp-announcement-card:hover,
.dapp-announcement-card:focus-visible,
.dapp-announcement-card.is-active {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 88% 0%, rgba(151, 71, 255, 0.08), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f8f8fb 54%, #f0eef6 100%);
  color: #111018;
  /* Keep the resting shadow (no growth/purple glow on activate). Animating box-shadow on every card as
     the highlight scrolls past is expensive on mobile GPUs and was a main cause of the Android flicker. */
  box-shadow:
    0 16px 34px rgba(3, 1, 12, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Keep the SAME transform as the resting card — no flatten/forward/scale change — so the card does not
     visibly move or shrink when it becomes active mid-scroll. That motion was the "闪缩". The white
     background + border alone now mark the active card. */
  transform: perspective(1200px) rotateX(3deg) rotateY(-1.6deg) translate3d(0, 0, -18px) scale(0.982);
  opacity: 1;
}

.dapp-announcement-card:hover::before,
.dapp-announcement-card:focus-visible::before,
.dapp-announcement-card.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

.dapp-announcement-card:hover::after,
.dapp-announcement-card:focus-visible::after,
.dapp-announcement-card.is-active::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Touch devices — phones/tablets in ANY orientation — get NO top glow on the active card. Opacity-fading
   this gradient pseudo as the highlight moves is what flickers on weak engines (MIUI). The portrait-only
   fix lived in @media (max-width:760px), but the user's MIUI was held in LANDSCAPE (viewport wider than
   760px), so it never kicked in. (pointer: coarse) catches the sideways phone too. */
@media (pointer: coarse) {
  .dapp-announcement-card.is-active::after { opacity: 0; }
}

/* Android / MIUI weak-GPU path (body.anton-android, set from the UA in client.js). The announcement cards'
   white-reveal / glow / shadow opacity TRANSITIONS and 3D TRANSFORMS flicker hard ("狂闪") on these engines
   while entering and scrolling. Flatten them to INSTANT state changes — no transition, no transform — so
   there are ZERO intermediate frames to flicker. The entry animation is kept but made instant, so its
   animationend still fires for the highlight-settle JS. iOS and desktop are never flagged → untouched. */
body.anton-android .dapp-announcement-card,
body.anton-android .dapp-announcement-card::after {
  transition: none !important;
  transform: none !important;
}

body.anton-android .dapp-announcement-card::before {
  /* Keep ONLY the white-reveal opacity fade — the "渐现" the user asked for. A single opacity transition on
     a SOLID-colour layer is cheap and does NOT flicker; the "狂闪" came from the OTHER ~6 simultaneous
     transitions (box-shadow, border, transform, gradient background), which stay flattened to instant. */
  transition: opacity 500ms ease !important;
  transform: none !important;
}

body.anton-android .dapp-announcement-card {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
}

.dapp-announcement-card-media {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 206px;
  overflow: hidden;
  border-radius: 15px;
  background: #080511;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dapp-announcement-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(151, 71, 255, 0.18), transparent 40%),
    linear-gradient(0deg, rgba(7, 5, 16, 0.26), transparent 58%);
  opacity: 0.86;
  transition: opacity 260ms ease;
}

.dapp-announcement-card.is-active .dapp-announcement-card-media::after,
.dapp-announcement-card:hover .dapp-announcement-card-media::after,
.dapp-announcement-card:focus-visible .dapp-announcement-card-media::after {
  opacity: 0.38;
}

.dapp-announcement-card-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dapp-announcement-card.is-active .dapp-announcement-card-media img,
.dapp-announcement-card:hover .dapp-announcement-card-media img,
.dapp-announcement-card:focus-visible .dapp-announcement-card-media img {
  /* Keep the SAME scale as resting (no zoom-out on activate) so the picture does not shrink when the
     card becomes active mid-scroll — that zoom change was the "缩" part of the announcement flicker. */
  transform: scale(1.04);
}

.dapp-announcement-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  align-content: center;
  padding: 18px 20px;
}

.dapp-announcement-card-top,
.dapp-announcement-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dapp-announcement-card-top {
  justify-content: space-between;
}

.dapp-announcement-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 230, 247, 0.82);
  font-size: 11px;
  font-weight: 950;
}

.dapp-announcement-date {
  color: rgba(224, 215, 244, 0.62);
  font-size: 12px;
  font-weight: 850;
}

.dapp-announcement-card-title {
  color: currentColor;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: 0;
}

.dapp-announcement-card-summary {
  max-width: 760px;
  color: rgba(238, 232, 249, 0.7);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.62;
}

.dapp-announcement-card.is-active .dapp-announcement-card-summary,
.dapp-announcement-card:hover .dapp-announcement-card-summary,
.dapp-announcement-card:focus-visible .dapp-announcement-card-summary {
  color: rgba(17, 16, 24, 0.64);
}

.dapp-announcement-card.is-active .dapp-announcement-card-title,
.dapp-announcement-card:hover .dapp-announcement-card-title,
.dapp-announcement-card:focus-visible .dapp-announcement-card-title,
.dapp-announcement-card.is-active .dapp-announcement-card-body,
.dapp-announcement-card:hover .dapp-announcement-card-body,
.dapp-announcement-card:focus-visible .dapp-announcement-card-body {
  color: #111018;
}

.dapp-announcement-card.is-active .dapp-announcement-date,
.dapp-announcement-card:hover .dapp-announcement-date,
.dapp-announcement-card:focus-visible .dapp-announcement-date {
  color: rgba(17, 16, 24, 0.5);
}

.dapp-announcement-card.is-active .dapp-announcement-tag,
.dapp-announcement-card:hover .dapp-announcement-tag,
.dapp-announcement-card:focus-visible .dapp-announcement-tag {
  border-color: rgba(17, 16, 24, 0.14);
  background: rgba(17, 16, 24, 0.055);
  color: rgba(17, 16, 24, 0.72);
}

.dapp-announcement-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  margin-top: auto;
  color: rgba(235, 230, 247, 0.82);
  font-size: 12px;
  font-weight: 950;
}

.dapp-announcement-card.is-active .dapp-announcement-read,
.dapp-announcement-card:hover .dapp-announcement-read,
.dapp-announcement-card:focus-visible .dapp-announcement-read {
  color: #111018;
}

.dapp-announcement-read .ui-icon {
  width: 15px;
  height: 15px;
}

.dapp-announcement-detail {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: visible;
}

.dapp-announcement-detail::before {
  display: none;
}

.dapp-announcement-back {
  position: relative;
  z-index: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.dapp-announcement-back .ui-icon {
  width: 16px;
  height: 16px;
}

.dapp-announcement-detail-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dapp-announcement-detail-title {
  margin: 0;
  max-width: 980px;
  color: #fff;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 950;
  line-height: 1.04;
  letter-spacing: 0;
}

.dapp-announcement-meta {
  flex-wrap: wrap;
  color: rgba(224, 215, 244, 0.68);
  font-size: 13px;
  font-weight: 850;
}

.dapp-announcement-lead {
  max-width: 880px;
  margin: 0;
  color: rgba(242, 236, 252, 0.78);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.68;
}

.dapp-announcement-detail-media {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #080511;
  box-shadow:
    0 24px 72px rgba(3, 1, 12, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dapp-announcement-detail-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.dapp-announcement-detail-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(8, 5, 17, 0.18), transparent 44%),
    radial-gradient(circle at 92% 6%, rgba(151, 71, 255, 0.16), transparent 32%);
}

.dapp-announcement-detail-media figcaption {
  position: absolute;
  inset: auto 18px 18px;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.dapp-announcement-detail-media figcaption span {
  color: #ffc27a;
  font-size: 12px;
  font-weight: 950;
}

.dapp-announcement-detail-media figcaption strong {
  color: #fff;
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 950;
  line-height: 1.05;
}

.dapp-announcement-markdown {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(151, 71, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(18, 10, 34, 0.78), rgba(9, 6, 20, 0.92));
  box-shadow:
    0 20px 60px rgba(3, 1, 12, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dapp-announcement-markdown h1,
.dapp-announcement-markdown h2,
.dapp-announcement-markdown h3,
.dapp-announcement-markdown p,
.dapp-announcement-markdown blockquote,
.dapp-announcement-markdown ul {
  margin: 0;
}

.dapp-announcement-markdown h1 {
  color: #fff;
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
}

.dapp-announcement-markdown h2 {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: 0;
}

.dapp-announcement-markdown h3 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 950;
}

.dapp-announcement-markdown p {
  color: rgba(241, 236, 250, 0.76);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.86;
}

.dapp-announcement-markdown blockquote {
  padding: 15px 17px;
  border-left: 3px solid rgba(151, 71, 255, 0.86);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.7;
}

.dapp-announcement-markdown ul {
  display: grid;
  gap: 10px;
  padding-left: 20px;
}

.dapp-announcement-markdown li {
  color: rgba(241, 236, 250, 0.78);
  font-size: 14px;
  font-weight: 730;
  line-height: 1.72;
}

.dapp-announcement-markdown li::marker {
  color: rgba(151, 71, 255, 0.94);
}

.dapp-announcement-markdown strong {
  color: #fff;
  font-weight: 950;
}

.dapp-announcement-markdown code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-weight: 900;
}

.dapp-announcement-markdown hr {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.dapp-announcement-highlight {
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  border: 1px solid rgba(0, 224, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 224, 255, 0.08), rgba(151, 71, 255, 0.08)),
    rgba(255, 255, 255, 0.04);
  color: #e8fbff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.62;
}

.dapp-announcement-detail-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dapp-announcement-detail-block {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.dapp-announcement-detail-block h3 {
  margin: 0 0 10px;
  color: #ffc27a;
  font-size: 15px;
  font-weight: 950;
}

.dapp-announcement-detail-block ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
}

.dapp-announcement-detail-block li {
  color: rgba(238, 232, 249, 0.78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.58;
}

@keyframes dapp-announcement-in {
  /* Pure opacity fade-in (no upward slide). The translate fly-in of ~15 gradient cards, staggered, was
     a source of entry jank/flicker on weaker mobile GPUs. Keeping transform at identity in BOTH frames
     also keeps the card's 3D transform neutralised (via animation-fill) so it can't shift on activate. */
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anton-twitter-sheen {
  0% {
    transform: translate3d(-16%, -4%, 0) rotate(-2deg);
    opacity: 0.38;
  }

  100% {
    transform: translate3d(16%, 5%, 0) rotate(2deg);
    opacity: 0.78;
  }
}

/* Minimal red PDF identity */
.pdf-resource-icon {
  position: relative;
  overflow: hidden;
  padding: 6px;
  border-color: rgba(223, 59, 55, 0.46);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 111, 92, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(52, 17, 31, 0.72), rgba(14, 8, 22, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 28px rgba(223, 59, 55, 0.2);
}

.pdf-resource-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(223, 59, 55, 0.2));
}

body.is-video-player-open {
  overflow: hidden;
}

.video-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #030208, #000);
  overflow: hidden;
  touch-action: none;
}

.video-player-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100vw, calc(100vh * var(--video-ratio, 1.7778)));
  width: min(100dvw, calc(100dvh * var(--video-ratio, 1.7778)));
  height: min(100vh, calc(100vw / var(--video-ratio, 1.7778)));
  height: min(100dvh, calc(100dvw / var(--video-ratio, 1.7778)));
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  background: #000;
  overflow: hidden;
}

.video-player-media {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}

/* TikTok-style vertical pager: the incoming frame is a second, absolutely-centred
   layer that sits just off-screen and slides in alongside the outgoing one, so there
   is no empty/black gap and no rebound on commit. Shares .video-player-frame sizing. */
.video-player-frame.is-switch-incoming {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  will-change: transform, opacity;
}

.video-player-overlay.is-portrait-player .video-player-frame {
  width: min(100vw, calc(100vh * var(--video-ratio, 0.5625)));
  width: min(100dvw, calc(100dvh * var(--video-ratio, 0.5625)));
  height: min(100vh, calc(100vw / var(--video-ratio, 0.5625)));
  height: min(100dvh, calc(100dvw / var(--video-ratio, 0.5625)));
}

.video-player-overlay.is-landscape-player .video-player-frame {
  width: min(100vw, calc(100vh * var(--video-ratio, 1.7778)));
  width: min(100dvw, calc(100dvh * var(--video-ratio, 1.7778)));
  height: min(100vh, calc(100vw / var(--video-ratio, 1.7778)));
  height: min(100dvh, calc(100dvw / var(--video-ratio, 1.7778)));
}

.video-player-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.video-player-overlay.is-buffering .video-player-loading {
  opacity: 1;
}

.video-player-spinner {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  animation: video-player-spin 0.8s linear infinite;
}

@keyframes video-player-spin {
  to { transform: rotate(360deg); }
}

/* Version badge: top-most layer, top-right on every client page, so you can confirm the live version. */
.anton-version-badge {
  position: fixed;
  top: max(4px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  z-index: 2147483647;
  max-width: 60vw;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(8, 6, 20, 0.66);
  color: rgba(150, 255, 200, 0.94);
  font: 700 9.5px/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
  user-select: all;
}

/* #2 minimal semi-transparent play button shown while the video is paused. */
.video-player-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 8, 20, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.video-player-play-button svg {
  width: 34px;
  height: 34px;
  margin-left: 3px;
  fill: currentColor;
}

.video-player-overlay.is-paused .video-player-play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.video-player-overlay.is-embed-player .video-player-play-button,
.video-player-overlay.is-embed-player .video-player-loading {
  display: none;
}

.video-player-close {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(7, 8, 14, 0.72);
  color: #fff;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.video-player-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.video-player-overlay.is-controls-visible .video-player-close,
.video-player-overlay.is-embed-player .video-player-close {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.video-player-controls {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left));
  right: calc(72px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 46px;
  padding: 9px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(20, 12, 34, 0.78), rgba(6, 3, 13, 0.82));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.video-player-landscape-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 189, 74, 0.2), rgba(157, 85, 255, 0.14)),
    rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(157, 85, 255, 0.12);
}

.video-player-landscape-action[hidden] {
  display: none;
}

.video-player-landscape-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.video-player-landscape-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-player-overlay.is-controls-visible .video-player-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.video-player-progress {
  --progress: 0%;
  width: 100%;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  accent-color: #ff6a2f;
}

.video-player-progress::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #ffbd4a, #ff5b31 52%, #9d55ff) 0 / var(--progress) 100% no-repeat,
    rgba(255, 255, 255, 0.18);
}

.video-player-progress::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff6a2f;
  box-shadow: 0 0 18px rgba(255, 101, 48, 0.54);
  appearance: none;
  -webkit-appearance: none;
}

.video-player-progress::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.video-player-progress::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffbd4a, #ff5b31 52%, #9d55ff);
}

.video-player-progress::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff6a2f;
  box-shadow: 0 0 18px rgba(255, 101, 48, 0.54);
}

.video-slide > .play-chip {
  pointer-events: auto;
  cursor: pointer;
}

body[data-page="client"] .app-shell {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.tab-body-shell {
  contain: layout paint;
}

.tab-body-shell.is-tab-switching {
  pointer-events: none;
}

.bottom-nav-wrap {
  z-index: 45;
  pointer-events: none;
}

body[data-page="client"] .bottom-nav-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
}

.bottom-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  width: min(520px, calc(100vw - 24px));
  min-height: 44px;
  padding: 4px;
  border: 1px solid rgba(248, 245, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(24, 16, 48, 0.82), rgba(8, 5, 22, 0.76)),
    rgba(10, 6, 24, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 52px rgba(5, 2, 16, 0.42),
    0 0 42px rgba(139, 92, 246, 0.16);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

/* Removed: the small gradient bar that floated above the home nav button (per request). */

.bottom-nav-link {
  appearance: none;
  position: relative;
  min-width: 0;
  min-height: 34px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 2px 2px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(248, 245, 255, 0.62);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.bottom-nav-link .nav-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border-radius: 14px;
  color: currentColor;
}

.bottom-nav-link .ui-icon {
  width: 19px;
  height: 19px;
}

.nav-label {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav-link[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
}

.bottom-nav-link[aria-current="page"] .nav-orb {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 24px rgba(139, 92, 246, 0.18);
}

.bottom-nav-link.is-home-nav {
  margin-top: -30px;
  align-content: start;
  gap: 4px;
}

.bottom-nav-link.is-home-nav .nav-orb {
  width: 54px;
  height: 38px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.42), transparent 24%),
    var(--action-gradient);
  color: #fff;
  overflow: hidden;
  /* Exact YouTube logo silhouette (recolored to ANTON's gradient) via SVG mask. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.5701 20' preserveAspectRatio='none'%3E%3Cpath d='M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.5701 20' preserveAspectRatio='none'%3E%3Cpath d='M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 14px 34px rgba(255, 90, 31, 0.22),
    0 0 36px rgba(139, 92, 246, 0.24);
}

.bottom-nav-link.is-home-nav .nav-orb::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  filter: blur(0.2px);
  opacity: 0.72;
  transform: translateX(-140%);
  animation: anton-home-icon-scan 2.8s ease-in-out infinite;
}

.bottom-nav-link.is-home-nav .nav-orb::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -2px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 222, 120, 0.7), rgba(139, 92, 246, 0.34) 56%, transparent 72%);
  filter: blur(5px);
  opacity: 0.64;
  animation: anton-home-icon-glow 2.8s ease-in-out infinite;
}

.bottom-nav-link.is-home-nav .ui-icon {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

.bottom-nav-link.is-home-nav .nav-label {
  font-size: 10px;
}

.bottom-nav-link:not(.is-home-nav):hover {
  color: #fff;
  transform: translateY(-2px);
}

@keyframes anton-home-icon-scan {
  0%, 18% {
    transform: translateX(-140%);
    opacity: 0;
  }
  42%, 66% {
    opacity: 0.86;
  }
  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

@keyframes anton-home-icon-glow {
  0%, 100% {
    transform: scaleX(0.58);
    opacity: 0.34;
  }
  50% {
    transform: scaleX(1);
    opacity: 0.78;
  }
}

.carousel-controls {
  display: none !important;
}

.carousel-dots {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(248, 245, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 5, 17, 0.46);
  backdrop-filter: blur(12px);
}

.carousel-dot {
  width: 22px;
  height: 4px;
}

.carousel-dot.is-active {
  width: 42px;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.22), transparent 34rem),
      radial-gradient(circle at 92% 12%, rgba(217, 70, 239, 0.12), transparent 28rem),
      linear-gradient(145deg, #070511 0%, #120925 58%, #070511 100%) !important;
  }

  body::before,
  body::after,
  .app-shell::before,
  .admin-app::before {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .app-shell::before,
  .admin-app::before {
    display: none !important;
  }

  .topbar,
  .tabbar-wrap,
  .bottom-nav,
  .carousel-dots,
  .video-player-close {
    backdrop-filter: none !important;
  }

  .carousel-track,
  .resource-card,
  .gallery-item,
  .video-slide img,
  .tab-link,
  .bottom-nav-link,
  .video-subtab {
    transition-duration: 1ms !important;
  }

  .video-slide img {
    transform: none !important;
  }

  .carousel-frame,
  .tabbar,
  .video-subtabs,
  .resource-card,
  .gallery-item {
    box-shadow: 0 12px 30px rgba(4, 2, 14, 0.22) !important;
  }

  .hero-carousel {
    padding: 12px 0 12px;
  }

  .carousel-frame {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    contain: layout paint size;
  }

  .carousel-track,
  .video-slide {
    height: 100%;
  }

  .video-slide {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .slide-content {
    padding: 14px;
  }

  .slide-title {
    max-width: 92%;
    font-size: clamp(23px, 8vw, 42px);
    line-height: 0.96;
  }

  .slide-summary {
    max-width: 88%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .gallery-caption {
    opacity: 1;
  }

  .gallery-item img,
  .gallery-item img.is-loaded {
    transform: scale(1.018);
  }

  .tab-link,
  .bottom-nav-link,
  .video-subtab {
    gap: 5px;
  }

  .ui-icon {
    width: 16px;
    height: 16px;
  }

  .bottom-nav {
    width: min(100vw - 18px, 520px);
    min-height: 42px;
    border-radius: 21px;
  }

  .bottom-nav-link.is-home-nav .nav-orb {
    width: 51px;
    height: 36px;
    border-radius: 6px;
  }

  .resource-section,
  .gallery-section,
  .video-library-section,
  .twitter-section,
  .dapp-announcement-section {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }

  .dapp-announcement-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .dapp-announcement-list {
    grid-template-columns: 1fr;
    gap: 14px;
    perspective: 900px;
  }

  .dapp-announcement-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 8px;
    border-radius: 18px;
    scroll-snap-align: center;
    transform: perspective(900px) rotateX(5deg) translate3d(0, 0, -14px) scale(0.97);
  }

  .dapp-announcement-card:hover::before,
  .dapp-announcement-card:focus-visible::before,
  .dapp-announcement-card.is-active::before {
    background: linear-gradient(132deg, #ffffff 0%, #ffffff 58%, rgba(248, 245, 255, 0.94) 74%, rgba(168, 85, 247, 0.14) 100%);
    opacity: 1;
  }

  .dapp-announcement-card:hover::after,
  .dapp-announcement-card:focus-visible::after,
  .dapp-announcement-card.is-active::after {
    /* No top glow on mobile active — one fewer pseudo opacity-transition firing as the highlight moves
       between cards during scroll (the glow fade is pure overhead on weaker GPUs like MIUI). */
    opacity: 0;
  }

  .dapp-announcement-card.is-active {
    background: linear-gradient(145deg, #ffffff 0%, #fbfbfd 68%, #f2effb 100%);
    color: #111018;
    transform: perspective(900px) rotateX(0deg) translate3d(0, -2px, 18px) scale(1);
  }

  .dapp-announcement-card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: 13px;
  }

  .dapp-announcement-card-media img {
    min-height: 0;
  }

  .dapp-announcement-card-body {
    gap: 10px;
    padding: 15px 14px 16px;
    color: #111018;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.98));
    border-radius: 0 0 13px 13px;
  }

  .dapp-announcement-card-title {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.05;
  }

  .dapp-announcement-card-summary {
    color: rgba(17, 16, 24, 0.68);
    font-size: 13px;
    line-height: 1.55;
  }

  .dapp-announcement-card .dapp-announcement-date {
    color: rgba(17, 16, 24, 0.5);
  }

  .dapp-announcement-card .dapp-announcement-tag {
    border-color: rgba(17, 16, 24, 0.12);
    background: rgba(17, 16, 24, 0.055);
    color: rgba(17, 16, 24, 0.58);
  }

  .dapp-announcement-card .dapp-announcement-read {
    color: rgba(17, 16, 24, 0.74);
  }

  .dapp-announcement-detail {
    padding: 16px;
    border-radius: 14px;
  }

  .dapp-announcement-detail-title {
    font-size: clamp(26px, 8vw, 38px);
  }

  .dapp-announcement-detail-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 13px;
  }

  .dapp-announcement-detail-media img {
    min-height: 0;
  }

  .dapp-announcement-detail-media figcaption {
    inset: auto 13px 13px;
  }

  .dapp-announcement-markdown {
    gap: 13px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  .dapp-announcement-markdown h1 {
    font-size: clamp(28px, 8vw, 40px);
  }

  .dapp-announcement-markdown h2 {
    margin-top: 8px;
    padding-top: 15px;
    font-size: 20px;
  }

  .dapp-announcement-markdown p,
  .dapp-announcement-markdown li {
    font-size: 13px;
    line-height: 1.72;
  }

  .dapp-announcement-markdown blockquote {
    padding: 13px 14px;
    font-size: 14px;
  }

  .dapp-announcement-detail-grid {
    grid-template-columns: 1fr;
  }

  .tweet-card .tweet-metrics {
    gap: 14px;
  }

  .twitter-section {
    margin-top: 22px;
    gap: 12px;
  }

  .twitter-hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
  }

  .twitter-profile-main h2 {
    font-size: 24px;
  }

  .twitter-profile-metrics {
    grid-column: 1 / -1;
    justify-content: stretch;
    min-width: 0;
  }

  .twitter-profile-metrics .tweet-metric {
    flex: 1 1 92px;
  }

  .twitter-grid {
    grid-template-columns: 1fr;
  }

  .twitter-side-panel {
    position: static;
  }

  .tweet-card,
  .twitter-hero,
  .twitter-boundary,
  .twitter-empty,
  .twitter-loading,
  .twitter-error {
    box-shadow: 0 12px 30px rgba(4, 2, 14, 0.22) !important;
  }

  .twitter-hero::after {
    animation: none !important;
  }
}

/* Final content-type tones, after theme overrides. */
.resource-icon.type-podcast,
.type-badge.type-podcast {
  color: #f6c95f;
  border-color: rgba(246, 201, 95, 0.38);
  background: rgba(246, 201, 95, 0.1);
  box-shadow: inset 0 0 0 1px rgba(246, 201, 95, 0.08), 0 0 30px rgba(246, 201, 95, 0.12);
}

.resource-icon.type-podcast svg,
.type-badge.type-podcast .type-badge-icon svg {
  transform: scale(1.04);
  transform-origin: center;
}

body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast {
  position: relative;
  color: #ffd36f;
  border-color: rgba(255, 211, 111, 0.56);
  background:
    linear-gradient(115deg, rgba(255, 211, 111, 0.08) 0%, rgba(255, 211, 111, 0.24) 22%, rgba(16, 18, 26, 0.08) 44%, rgba(255, 211, 111, 0.18) 66%, rgba(255, 211, 111, 0.08) 100%),
    radial-gradient(circle at 50% 18%, rgba(255, 232, 156, 0.24), transparent 44%),
    rgba(255, 200, 87, 0.1);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 143, 0.18), 0 0 34px rgba(246, 201, 95, 0.18);
  isolation: isolate;
  animation: anton-podcast-hero-flow 4.8s ease-in-out infinite;
}

body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::before,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 1px solid rgba(255, 218, 126, 0.28);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.72);
  animation: anton-podcast-hero-wave 3.6s ease-out infinite;
}

body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after {
  animation-delay: 1.8s;
}

body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 2px rgba(255, 238, 178, 0.82)) drop-shadow(0 0 10px rgba(255, 202, 84, 0.38));
  animation: anton-podcast-hero-mic 3.2s ease-in-out infinite;
}

@keyframes anton-podcast-hero-flow {
  0%,
  100% {
    background-position: 0% 50%, 50% 50%, 50% 50%;
    filter: saturate(1);
  }
  50% {
    background-position: 100% 50%, 50% 50%, 50% 50%;
    filter: saturate(1.12);
  }
}

@keyframes anton-podcast-hero-wave {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  38% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}

@keyframes anton-podcast-hero-mic {
  0%,
  100% {
    transform: rotate(-5deg) scale(1.05);
    filter: drop-shadow(0 0 2px rgba(255, 238, 178, 0.82)) drop-shadow(0 0 10px rgba(255, 202, 84, 0.38));
  }
  22% {
    transform: rotate(5deg) scale(1.1);
    filter: drop-shadow(0 0 3px rgba(255, 243, 198, 0.9)) drop-shadow(0 0 13px rgba(255, 202, 84, 0.5));
  }
  44% {
    transform: rotate(-3deg) scale(1.07);
  }
  55% {
    transform: rotate(3deg) scale(1.12);
    filter: drop-shadow(0 0 3px rgba(255, 245, 206, 0.95)) drop-shadow(0 0 15px rgba(255, 202, 84, 0.55));
  }
  78% {
    transform: rotate(-4deg) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast,
  body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::before,
  body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after,
  body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast svg {
    animation: none;
  }
}

.resource-icon.type-link,
.type-badge.type-link {
  color: #40e99a;
  border-color: rgba(64, 233, 154, 0.34);
  background: rgba(64, 233, 154, 0.085);
  box-shadow: inset 0 0 0 1px rgba(64, 233, 154, 0.07), 0 0 30px rgba(64, 233, 154, 0.1);
}

.resource-icon.type-tweet,
.type-badge.type-tweet {
  color: #aa78ff;
  border-color: rgba(170, 120, 255, 0.36);
  background: rgba(170, 120, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(170, 120, 255, 0.07), 0 0 30px rgba(170, 120, 255, 0.12);
}

.resource-icon.type-announcement,
.type-badge.type-announcement {
  color: #55c7ff;
  border-color: rgba(85, 199, 255, 0.36);
  background: rgba(85, 199, 255, 0.085);
  box-shadow: inset 0 0 0 1px rgba(85, 199, 255, 0.07), 0 0 30px rgba(85, 199, 255, 0.1);
}

.resource-icon.type-video,
.type-badge.type-video {
  color: #ff7a3d;
  border-color: rgba(255, 122, 61, 0.36);
  background: rgba(255, 122, 61, 0.095);
}

.resource-icon.type-pdf,
.type-badge.type-pdf {
  color: #ff4f55;
  border-color: rgba(255, 79, 85, 0.36);
  background: rgba(255, 79, 85, 0.09);
}

/* Final home carousel and announcement rail polish. */
.carousel-track {
  transition: transform 900ms cubic-bezier(0.18, 0.88, 0.2, 1);
}

.video-slide {
  overflow: hidden;
  opacity: 0.42;
  transform: translate3d(0, 0, 0) scale(0.986);
  transition:
    opacity 720ms ease,
    transform 980ms cubic-bezier(0.18, 0.88, 0.2, 1),
    filter 980ms ease;
}

.video-slide.is-active,
.video-slide.is-selected {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.video-slide.is-leaving {
  opacity: 0;
  transform: translate3d(-2.6%, 0, 0) scale(1.035);
  filter: blur(4px);
}

.video-slide::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 78%, rgba(255, 185, 73, 0.2), transparent 26%),
    radial-gradient(circle at 30% 68%, rgba(170, 108, 255, 0.18), transparent 30%);
  opacity: 0;
  transform: translate3d(-4%, 4%, 0) scale(0.72);
}

.video-slide.is-active::before,
.video-slide.is-selected::before {
  animation: home-carousel-bloom 3000ms cubic-bezier(0.18, 0.88, 0.2, 1) both;
}

.video-slide::after {
  display: none !important;
}

.video-slide img {
  transform: scale(1.01);
  transition: transform 1500ms cubic-bezier(0.18, 0.88, 0.2, 1);
}

.video-slide.is-active img,
.video-slide.is-selected img {
  transform: scale(1.035);
}

.video-slide .slide-content {
  display: none !important;
}

.video-slide > .play-chip {
  position: absolute;
  left: clamp(18px, 4vw, 42px);
  right: auto;
  top: auto;
  bottom: clamp(18px, 4vw, 38px);
  z-index: 3;
  width: clamp(48px, 5.6vw, 62px);
  height: clamp(36px, 4.4vw, 44px);
  margin: 0;
  border-radius: 12px;
  transform: none;
}

.video-slide > .play-chip:hover {
  transform: translate3d(0, -1px, 0) scale(1.02);
}

.admin-upload-zone:not(.is-file-drop-active):not(.is-uploading) .asset-drop-zone-hero {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 6px, 0);
}

.home-announcement-carousel {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  margin: 0 0 clamp(12px, 2vw, 20px);
  border: 1px solid rgba(75, 243, 166, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(75, 243, 166, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(12, 9, 28, 0.9), rgba(22, 13, 43, 0.72));
  box-shadow: 0 18px 48px rgba(4, 2, 14, 0.28), 0 0 46px rgba(75, 243, 166, 0.08);
}

.home-announcement-track {
  position: relative;
  min-height: 118px;
}

.home-announcement-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(112px, 17%) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2.2vw, 20px);
  color: #fff;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
  transform: translate3d(4%, 0, 0) scale(0.985);
  transition:
    opacity 620ms ease,
    transform 760ms cubic-bezier(0.18, 0.88, 0.2, 1),
    filter 760ms ease;
}

.home-announcement-card.is-active {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.home-announcement-card.is-leaving {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(-3.6%, 0, 0) scale(1.018);
}

.home-announcement-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #4bf3a6;
  background: rgba(75, 243, 166, 0.1);
  box-shadow: inset 0 0 0 1px rgba(75, 243, 166, 0.16), 0 0 32px rgba(75, 243, 166, 0.12);
}

.home-announcement-icon svg,
.resource-icon.type-announcement svg,
.type-badge.type-announcement svg {
  animation: announcement-bell-shake 2s ease-in-out infinite;
  transform-origin: 50% 16%;
}

.home-announcement-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.home-announcement-meta {
  display: flex;
  gap: 10px;
  color: rgba(75, 243, 166, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.home-announcement-title {
  overflow: hidden;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-announcement-summary {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(238, 232, 249, 0.68);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-announcement-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.home-announcement-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-announcement-action {
  color: rgba(238, 232, 249, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.home-announcement-dots {
  position: absolute;
  right: 16px;
  bottom: 10px;
  display: flex;
  gap: 5px;
  z-index: 3;
}

.home-announcement-dot {
  width: 18px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(238, 232, 249, 0.2);
}

.home-announcement-dot.is-active {
  width: 30px;
  background: linear-gradient(90deg, #4bf3a6, #8b5cf6);
  box-shadow: 0 0 20px rgba(75, 243, 166, 0.22);
}

.resource-icon.type-announcement,
.type-badge.type-announcement {
  color: #4bf3a6;
  border-color: rgba(75, 243, 166, 0.36);
  background: rgba(75, 243, 166, 0.085);
  box-shadow: inset 0 0 0 1px rgba(75, 243, 166, 0.07), 0 0 30px rgba(75, 243, 166, 0.1);
}

@keyframes home-carousel-bloom {
  0% {
    opacity: 0;
    transform: translate3d(-5%, 5%, 0) scale(0.72);
  }
  18% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translate3d(6%, -3%, 0) scale(1.16);
  }
}

@keyframes announcement-bell-shake {
  0%, 68%, 100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  72% {
    transform: rotate(-12deg) translate3d(-1px, 0, 0);
  }
  76% {
    transform: rotate(11deg) translate3d(1px, 0, 0);
  }
  80% {
    transform: rotate(-8deg) translate3d(-1px, 0, 0);
  }
  84% {
    transform: rotate(6deg) translate3d(1px, 0, 0);
  }
  88% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@media (max-width: 760px) {
  .home-announcement-carousel {
    min-height: 104px;
    border-radius: 12px;
  }

  .home-announcement-track {
    min-height: 104px;
  }

  .home-announcement-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px 13px 16px;
  }

  .home-announcement-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .home-announcement-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .home-announcement-cover,
  .home-announcement-action {
    display: none;
  }

  .home-announcement-dots {
    right: 12px;
    bottom: 8px;
  }
}

/* Final compact header and announcement icon tuning. */
:root {
  --topbar-h: 62px;
}

.topbar {
  min-height: var(--topbar-h);
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: 8px;
}

.brand {
  gap: 10px;
}

.brand-logo {
  width: clamp(116px, 18vw, 176px);
}

.brand-title {
  font-size: clamp(0.74rem, 1.1vw, 0.88rem);
}

.tab-body-shell.is-tab-podcast,
.preview-tab-body.is-tab-podcast {
  padding-top: clamp(18px, 3vw, 34px);
}

.home-announcement-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #05070b;
  background:
    radial-gradient(circle at 50% 48%, rgba(8, 10, 14, 0.98) 0 48%, rgba(42, 255, 159, 0.18) 52%, rgba(7, 10, 14, 0.96) 72%),
    linear-gradient(135deg, rgba(39, 255, 158, 0.18), rgba(6, 9, 14, 0.96) 45%, rgba(122, 255, 194, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(84, 255, 174, 0.42),
    inset 0 0 12px rgba(75, 243, 166, 0.2),
    0 0 18px rgba(75, 243, 166, 0.28),
    0 0 42px rgba(75, 243, 166, 0.15);
}

.home-announcement-icon svg {
  width: 62%;
  height: 62%;
  filter:
    drop-shadow(0 0 1px rgba(175, 255, 220, 0.9))
    drop-shadow(0 0 6px rgba(75, 243, 166, 0.85));
}

.resource-icon.type-announcement,
.type-badge.type-announcement {
  color: #4bf3a6;
  border-color: rgba(75, 243, 166, 0.36);
  background: rgba(75, 243, 166, 0.085);
  box-shadow: inset 0 0 0 1px rgba(75, 243, 166, 0.07), 0 0 30px rgba(75, 243, 166, 0.1);
}

@media (max-width: 760px) {
  body[data-page="client"] {
    --topbar-h: 50px;
  }

  body[data-page="client"] .topbar {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  body[data-page="client"] .brand-logo {
    width: clamp(86px, 24vw, 100px);
  }

  body[data-page="client"] .brand-title {
    padding-left: 7px;
    font-size: clamp(0.66rem, 2.5vw, 0.76rem);
  }

  .tab-body-shell.is-tab-podcast,
  .preview-tab-body.is-tab-podcast {
    padding-top: 16px;
  }
}

/* Final interaction polish: lazy reveal, language width, Twitter summary, and player controls. */
@keyframes anton-lazy-reveal {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 12px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.resource-card,
.gallery-item,
.video-tile,
.tweet-card,
.twitter-hero,
.twitter-boundary,
.dapp-announcement-card,
img[loading="lazy"]:not([data-src]),
img.is-loaded {
  animation: anton-lazy-reveal 520ms cubic-bezier(0.18, 0.88, 0.2, 1) both;
}

body[data-page="client"] .language-select {
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  padding-right: 24px;
}

body[data-page="client"] .language-shell::after {
  right: 10px;
}

.twitter-side-panel {
  gap: 14px;
}

.twitter-side-panel .twitter-column-head {
  padding: 0 2px;
  color: rgba(248, 245, 255, 0.92);
  letter-spacing: 0;
}

.twitter-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.twitter-summary-grid .tweet-metric {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 189, 74, 0.15), transparent 34%),
    linear-gradient(145deg, rgba(31, 19, 57, 0.82), rgba(8, 6, 19, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 36px rgba(5, 2, 16, 0.22);
}

.twitter-summary-grid .tweet-metric::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffbd4a, #ff5b31, #9d55ff);
  opacity: 0.58;
}

.twitter-summary-grid .tweet-metric strong {
  color: #fff;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: 0 0 24px rgba(157, 85, 255, 0.2);
}

.twitter-summary-grid .tweet-metric span {
  color: rgba(238, 232, 249, 0.56);
  font-size: 11px;
  font-weight: 800;
}

.twitter-boundary {
  padding: 16px;
  border-color: rgba(75, 243, 166, 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(75, 243, 166, 0.13), transparent 38%),
    linear-gradient(155deg, rgba(14, 28, 29, 0.78), rgba(9, 7, 20, 0.82));
}

.twitter-boundary strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  color: rgba(75, 243, 166, 0.92);
  font-size: 13px;
}

.twitter-boundary span {
  color: rgba(248, 245, 255, 0.72);
  font-size: 13px;
  line-height: 1.6;
}

/* Pure-CSS landscape: rotate the whole player 90deg so a landscape video fills a portrait
   phone without native fullscreen (no browser toast) and keeps its original aspect ratio. */
.video-player-overlay.is-landscape-fullscreen {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100dvh;
  height: 100dvw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.video-player-overlay.is-landscape-fullscreen .video-player-frame {
  width: 100vh;
  width: 100dvh;
  height: 100vw;
  height: 100dvw;
  max-width: none;
  max-height: none;
}

.video-player-overlay.is-landscape-fullscreen .video-player-media {
  width: 100vh;
  width: 100dvh;
  height: 100vw;
  height: 100dvw;
  object-fit: contain;
}

.video-player-overlay.is-landscape-fullscreen .video-player-close {
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  border-radius: 999px;
  background: rgba(5, 6, 12, 0.6);
}

@media (max-width: 760px) {
  .video-player-controls {
    left: calc(12px + env(safe-area-inset-left));
    right: calc(68px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .twitter-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .twitter-summary-grid .tweet-metric {
    min-height: 66px;
    padding: 10px 8px;
  }

  .twitter-summary-grid .tweet-metric strong {
    font-size: 17px;
  }

  .twitter-summary-grid .tweet-metric span {
    font-size: 10px;
  }
}

/* Announcement carousel repair and non-cropped desktop hero covers. */
.home-announcement-card {
  animation: none !important;
  align-items: center;
}

.home-announcement-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #4bf3a6;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-announcement-icon svg {
  width: 24px;
  height: 24px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(75, 243, 166, 0.54));
}

.home-announcement-copy {
  gap: 7px;
  align-self: center;
}

.home-announcement-title {
  max-width: 100%;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.22;
  letter-spacing: 0;
  text-shadow: none;
}

.home-announcement-summary {
  max-width: 100%;
  color: rgba(238, 232, 249, 0.7);
  font-size: 12.5px;
  line-height: 1.5;
  text-shadow: none;
}

@media (min-width: 761px) {
  .carousel-frame .video-slide {
    background: #05030b;
  }

  .carousel-frame .video-slide img {
    object-fit: contain !important;
    background: #05030b;
    transform: none !important;
  }

  .carousel-frame .video-slide.is-active img,
  .carousel-frame .video-slide.is-selected img {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .home-announcement-card {
    gap: 9px;
  }

  .home-announcement-icon {
    width: 32px;
    height: 32px;
  }

  .home-announcement-icon svg {
    width: 22px;
    height: 22px;
  }

  .home-announcement-title {
    font-size: 16px;
    line-height: 1.24;
  }

  .home-announcement-summary {
    font-size: 12px;
    -webkit-line-clamp: 1;
  }
}

/* Final media, announcement, and WYSIWYG polish. */
.brand-title {
  font-size: clamp(0.88rem, 1.25vw, 1.05rem);
  font-weight: 900;
}

body[data-page="client"] .brand-title {
  font-size: clamp(0.82rem, 2.9vw, 0.96rem);
}

.home-announcement-preview-shell,
.tab-body-shell.is-tab-all .home-announcement-carousel,
.preview-tab-body.is-tab-all .home-announcement-carousel {
  margin-bottom: clamp(6px, 1vw, 12px);
}

.tab-body-shell.is-tab-all .resource-section,
.preview-tab-body.is-tab-all .resource-section {
  margin-top: clamp(4px, 1vw, 10px);
  margin-bottom: clamp(22px, 3vw, 38px);
}

.tab-body-shell.is-tab-all .gallery-section,
.preview-tab-body.is-tab-all .gallery-section {
  margin-top: clamp(20px, 3vw, 34px);
}

.video-slide > .play-chip {
  pointer-events: none !important;
  transition: opacity 140ms ease, transform 140ms ease, filter 140ms ease;
}

.video-slide.is-opening-player > .play-chip {
  opacity: 0;
  transform: translate3d(-2px, 2px, 0) scale(0.82);
  filter: blur(2px);
}

.video-player-loading:empty {
  display: none;
}

.dapp-announcement-card {
  transition:
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 1250ms ease-in-out,
    background 1250ms ease-in-out,
    color 1050ms ease-in-out,
    box-shadow 900ms ease-in-out,
    opacity 600ms ease,
    filter 850ms ease-in-out;
}

.dapp-announcement-card::before {
  /* White state fades IN as an opacity layer. CSS cannot transition a gradient background-image, so
     changing the card's own background simply SNAPS (that snap was the "flash"). The card keeps its
     dark background; this layer holds the white and only its OPACITY animates, which is smooth. */
  /* Flat near-white (was a radial+linear gradient stack). Opacity-fading a multi-layer gradient pseudo is
     the main MIUI flicker source; a solid colour composites cheaply so fade-IN and fade-OUT both stay
     smooth. The card keeps its own dark background underneath; only this layer's opacity animates. */
  background: #fbfafe !important;
  transform: none !important;
  /* Fade OUT fast (the card the scroll just left), fade IN slow (see the active rule below). This
     asymmetry stops the white lingering on the old card and cross-fade-flickering with the new one
     while scrolling. No will-change: 15 promoted layers actually worsened flicker on Android Chrome. */
  transition: opacity 320ms ease-out !important;
}

.dapp-announcement-card:hover::before,
.dapp-announcement-card:focus-visible::before,
.dapp-announcement-card.is-active::before {
  opacity: 1 !important;
  transition: opacity 750ms ease-in-out !important;
}

/* Keep the card's OWN background dark in the active/hover state too, so it does not snap to white —
   the white now comes entirely from the gradual ::before opacity fade above. */
.dapp-announcement-card:hover,
.dapp-announcement-card:focus-visible,
.dapp-announcement-card.is-active {
  background:
    radial-gradient(circle at 16% 0%, rgba(151, 71, 255, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(7, 5, 16, 0.96), rgba(18, 9, 34, 0.94)) !important;
}

.dapp-announcement-card.is-active .dapp-announcement-card-media::after,
.dapp-announcement-card:hover .dapp-announcement-card-media::after,
.dapp-announcement-card:focus-visible .dapp-announcement-card-media::after {
  opacity: 0.12 !important;
}

.dapp-announcement-card-media img {
  filter: none !important;
}

body[data-page="admin"] .preview-tab-body.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast {
  position: relative;
  color: #ffd36f;
  border-color: rgba(255, 211, 111, 0.56);
  background:
    linear-gradient(115deg, rgba(255, 211, 111, 0.08) 0%, rgba(255, 211, 111, 0.24) 22%, rgba(16, 18, 26, 0.08) 44%, rgba(255, 211, 111, 0.18) 66%, rgba(255, 211, 111, 0.08) 100%),
    radial-gradient(circle at 50% 18%, rgba(255, 232, 156, 0.24), transparent 44%),
    rgba(255, 200, 87, 0.1);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 143, 0.18), 0 0 34px rgba(246, 201, 95, 0.18);
  isolation: isolate;
  animation: anton-podcast-hero-flow 4.8s ease-in-out infinite;
}

body[data-page="admin"] .preview-tab-body.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::before,
body[data-page="admin"] .preview-tab-body.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::before,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 1px solid rgba(255, 218, 126, 0.28);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.72);
  animation: anton-podcast-hero-wave 3.6s ease-out infinite;
}

body[data-page="admin"] .preview-tab-body.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast::after {
  animation-delay: 1.8s;
}

body[data-page="admin"] .preview-tab-body.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast svg,
body[data-page="client"] .tab-body-shell.is-tab-podcast .card-list > .resource-card:first-of-type > .resource-icon.type-podcast svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 2px rgba(255, 238, 178, 0.82)) drop-shadow(0 0 10px rgba(255, 202, 84, 0.38));
  animation: anton-podcast-hero-mic 3.2s ease-in-out infinite;
}

@media (max-width: 760px) {
  .dapp-announcement-card:hover::before,
  .dapp-announcement-card:focus-visible::before,
  .dapp-announcement-card.is-active::before {
    /* Solid near-white instead of a radial+linear gradient stack: opacity-fading a multi-layer gradient
       pseudo is the main cause of the white-reveal flicker on weaker mobile GPUs (MIUI worst). A flat
       colour composites almost for free, so the 750ms reveal stays smooth. */
    background: #fbfafe !important;
    opacity: 1 !important;
    transition: opacity 750ms ease-in-out !important;
  }

  body[data-page="client"] .brand-title {
    font-size: clamp(0.82rem, 3.2vw, 0.98rem);
  }
}