/* OrangeBao production theme
   Source: 橙堡会员社区设计规范, 2026-07-23.
   This layer maps the existing Jinja UI onto the shared --ob-* tokens. */

@font-face {
  font-family: "OrangeBao Sans SC";
  src: url("../vendor/fonts/OrangeBaoSansSC-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../vendor/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Brand */
  --ob-orange-100: #ffeee0;
  --ob-orange-200: #ffd8bb;
  --ob-orange-300: #ffb98a;
  --ob-orange-400: #ff8e4d;
  --ob-orange-500: #ff6b1a;
  --ob-orange-600: #e5570a;
  --ob-orange-700: #b84508;
  --ob-orange-800: #8a3406;
  --ob-orange-900: #5c2304;

  /* Level and achievement */
  --ob-gold-100: #fbf3dc;
  --ob-gold-200: #f5e3b0;
  --ob-gold-300: #f1ce73;
  --ob-gold-400: #e0b54e;
  --ob-gold-500: #c89a38;
  --ob-gold-600: #a47b26;
  --ob-gold-700: #7c5b1b;
  --ob-gold-800: #57400f;
  --ob-gold-900: #3a2a0a;

  /* Fan-club badges */
  --ob-violet-100: #f1ebfe;
  --ob-violet-200: #dfd2fd;
  --ob-violet-300: #c4adfb;
  --ob-violet-400: #a78bfa;
  --ob-violet-500: #8b5cf6;
  --ob-violet-600: #7c3aed;
  --ob-violet-700: #6023c9;
  --ob-violet-800: #471a96;
  --ob-violet-900: #2f1263;

  --ob-green-400: #4ade80;
  --ob-green-600: #16a34a;
  --ob-red-400: #ff7a6e;
  --ob-red-600: #d63a29;
  --ob-amber-400: #fbbf24;
  --ob-amber-600: #d97706;
  --ob-blue-400: #60a5fa;
  --ob-blue-600: #2563eb;

  /* Dark aliases, default */
  --ob-bg: #0f0d0b;
  --ob-surface-1: #171412;
  --ob-surface-2: #201c18;
  --ob-surface-3: #2a2520;
  --ob-fill-1: rgba(255, 255, 255, 0.06);
  --ob-fill-2: rgba(255, 255, 255, 0.1);
  --ob-fill-3: rgba(255, 255, 255, 0.16);
  --ob-line-1: rgba(255, 246, 236, 0.08);
  --ob-line-2: rgba(255, 246, 236, 0.16);
  --ob-text-1: #f5f1ec;
  --ob-text-2: #b5ada2;
  --ob-text-3: #8f877c;
  --ob-text-4: #625b52;
  --ob-accent: var(--ob-orange-500);
  --ob-accent-hi: var(--ob-orange-400);
  --ob-accent-press: var(--ob-orange-600);
  --ob-accent-soft: rgba(255, 107, 26, 0.14);
  --ob-accent-text: var(--ob-orange-400);
  --ob-on-accent: #ffffff;
  --ob-success: var(--ob-green-400);
  --ob-warning: var(--ob-amber-400);
  --ob-danger: var(--ob-red-400);
  --ob-info: var(--ob-blue-400);
  --ob-live: #ff4d42;
  --ob-scrim: rgba(0, 0, 0, 0.6);
  --ob-bar-bg: rgba(15, 13, 11, 0.82);
  --ob-grad-gold: linear-gradient(135deg, #f6de9c, #d9a73e);
  --ob-on-gold: #3f2e05;
  --ob-grad-violet: linear-gradient(135deg, #b497fb, #7c3aed);
  --ob-on-violet: #ffffff;
  --ob-grad-accent: linear-gradient(135deg, #ff8e4d, #f55b00);
  --ob-glow-accent: radial-gradient(120% 90% at 50% 0%, rgba(255, 107, 26, 0.08), transparent 70%);
  --ob-gold-text: var(--ob-gold-300);
  --ob-violet-text: var(--ob-violet-300);
  --ob-gold-soft: rgba(200, 154, 56, 0.16);
  --ob-violet-soft: rgba(139, 92, 246, 0.16);
  --ob-seg-thumb: var(--ob-surface-3);

  /* Typography */
  --ob-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "OrangeBao Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --ob-font-num: "Space Grotesk", "OrangeBao Sans SC", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif;
  --ob-fs-display: 40px;
  --ob-lh-display: 44px;
  --ob-fs-stat: 28px;
  --ob-lh-stat: 32px;
  --ob-fs-ltitle: 28px;
  --ob-lh-ltitle: 36px;
  --ob-fs-t1: 22px;
  --ob-lh-t1: 30px;
  --ob-fs-headline: 17px;
  --ob-lh-headline: 24px;
  --ob-fs-body: 16px;
  --ob-lh-body: 24px;
  --ob-fs-sub: 14px;
  --ob-lh-sub: 20px;
  --ob-fs-foot: 13px;
  --ob-lh-foot: 18px;
  --ob-fs-cap: 11px;
  --ob-lh-cap: 14px;
  --ob-tnum: "tnum" 1, "lnum" 1;

  /* 4pt spacing and radius */
  --ob-s1: 4px;
  --ob-s2: 8px;
  --ob-s3: 12px;
  --ob-s4: 16px;
  --ob-s5: 20px;
  --ob-s6: 24px;
  --ob-s7: 32px;
  --ob-s8: 40px;
  --ob-s9: 48px;
  --ob-page-x: 16px;
  --ob-group-gap: 24px;
  --ob-r-xs: 6px;
  --ob-r-sm: 10px;
  --ob-r-md: 14px;
  --ob-r-lg: 18px;
  --ob-r-xl: 24px;
  --ob-r-full: 999px;
  --ob-hit: 44px;
  --ob-navbar-h: 52px;
  --ob-tabbar-h: 58px;
  --ob-cell-h: 52px;
  --ob-cell-h-lg: 64px;
  --ob-safe-top: env(safe-area-inset-top, 0px);
  --ob-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Elevation and material */
  --ob-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ob-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.4);
  --ob-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.5);
  --ob-blur-bar: saturate(1.8) blur(20px);

  /* Motion */
  --ob-dur-instant: 100ms;
  --ob-dur-quick: 160ms;
  --ob-dur-base: 240ms;
  --ob-dur-gentle: 320ms;
  --ob-dur-screen: 380ms;
  --ob-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ob-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ob-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ob-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ob-ease-bounce: cubic-bezier(0.34, 1.4, 0.4, 1);
  --ob-press-scale: 0.96;

  /* Legacy aliases while templates are migrated incrementally */
  --color-primary: var(--ob-accent-text);
  --color-primary-strong: var(--ob-orange-500);
  --color-accent: var(--ob-accent);
  --color-bg: var(--ob-bg);
  --color-panel: var(--ob-surface-1);
  --color-panel-border: var(--ob-line-1);
  --color-panel-soft: var(--ob-fill-1);
  --color-text: var(--ob-text-1);
  --color-muted: var(--ob-text-2);
  --color-danger: var(--ob-danger);
  --color-success: var(--ob-success);
  --color-info: var(--ob-info);
  --shadow-ambient: var(--ob-shadow-2);
}

html[data-theme="light"] {
  color-scheme: light;
  --ob-bg: #f6f3ef;
  --ob-surface-1: #ffffff;
  --ob-surface-2: #fbf8f5;
  --ob-surface-3: #f1ece6;
  --ob-fill-1: rgba(30, 22, 14, 0.05);
  --ob-fill-2: rgba(30, 22, 14, 0.08);
  --ob-fill-3: rgba(30, 22, 14, 0.14);
  --ob-line-1: rgba(30, 22, 14, 0.08);
  --ob-line-2: rgba(30, 22, 14, 0.16);
  --ob-text-1: #221b14;
  --ob-text-2: #655b50;
  --ob-text-3: #7e7266;
  --ob-text-4: #a79c90;
  --ob-accent: var(--ob-orange-600);
  --ob-accent-hi: var(--ob-orange-600);
  --ob-accent-press: var(--ob-orange-700);
  --ob-accent-soft: rgba(229, 87, 10, 0.1);
  --ob-accent-text: var(--ob-orange-700);
  --ob-success: var(--ob-green-600);
  --ob-warning: var(--ob-amber-600);
  --ob-danger: var(--ob-red-600);
  --ob-info: var(--ob-blue-600);
  --ob-live: #e03b31;
  --ob-scrim: rgba(20, 14, 8, 0.4);
  --ob-bar-bg: rgba(246, 243, 239, 0.85);
  --ob-glow-accent: radial-gradient(120% 90% at 50% 0%, rgba(229, 87, 10, 0.06), transparent 70%);
  --ob-gold-text: var(--ob-gold-600);
  --ob-violet-text: var(--ob-violet-600);
  --ob-gold-soft: rgba(200, 154, 56, 0.14);
  --ob-violet-soft: rgba(124, 58, 237, 0.1);
  --ob-seg-thumb: var(--ob-surface-1);
  --ob-shadow-1: 0 1px 2px rgba(34, 27, 20, 0.08);
  --ob-shadow-2: 0 6px 20px rgba(34, 27, 20, 0.1);
  --ob-shadow-3: 0 20px 48px rgba(34, 27, 20, 0.16);
}

html {
  color-scheme: dark;
  background: var(--ob-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
.app-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ob-bg);
  color: var(--ob-text-1);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-body);
  line-height: var(--ob-lh-body);
  text-rendering: optimizeLegibility;
  transition: background-color var(--ob-dur-base) var(--ob-ease-standard), color var(--ob-dur-base) var(--ob-ease-standard);
}

.app-bg {
  display: none;
}

a {
  color: inherit;
}

a:hover,
a:focus-visible {
  color: inherit;
}

::selection {
  background: var(--ob-accent-soft);
}

:focus-visible {
  outline: 2px solid var(--ob-accent);
  outline-offset: 2px;
}

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

.ob-num,
.user-card__value,
.profile-link-card__value strong,
.like-leaderboard__count,
.calendar-stats__grid strong,
.calendar-day__number,
.calendar-day__hours,
.birthday-card-extra__value,
.recent-session-metric strong,
.session-stats-inline strong,
.session-leaderboard__rank,
.session-leaderboard__value strong {
  font-family: var(--ob-font-num);
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
}

/* App shell */
.app-root {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-view,
.app-view[data-page="welcome"] {
  --app-view-x-padding: var(--ob-page-x);
  --app-view-top-padding: 0px;
  width: min(760px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--ob-page-x) calc(var(--ob-tabbar-h) + var(--ob-safe-bottom) + var(--ob-s6));
  gap: 0;
}

.app-view--stacked {
  padding-bottom: calc(var(--ob-safe-bottom) + var(--ob-s6));
}

.app-page .page-content,
.app-view[data-page="welcome"] .page-content {
  display: flex;
  flex-direction: column;
  gap: var(--ob-s4);
  padding: var(--ob-s4) 0 0;
}

.app-header {
  position: sticky;
  top: 0;
  width: 100vw;
  min-height: calc(var(--ob-navbar-h) + var(--ob-safe-top));
  margin: 0 calc(50% - 50vw);
  padding: var(--ob-safe-top) max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x))) 0;
  display: grid;
  grid-template-columns: var(--ob-hit) minmax(0, 1fr) var(--ob-hit);
  align-items: center;
  gap: var(--ob-s2);
  z-index: 50;
  overflow: visible;
  border-bottom: 1px solid var(--ob-line-1);
  background: var(--ob-bar-bg);
  box-shadow: none;
  backdrop-filter: var(--ob-blur-bar);
  -webkit-backdrop-filter: var(--ob-blur-bar);
}

.app-view--tab-root .app-header {
  min-height: calc(84px + var(--ob-safe-top));
  grid-template-columns: 0 minmax(0, 1fr) auto;
  align-items: end;
  padding-bottom: var(--ob-s3);
  border-bottom: 0;
}

.app-header__section--title {
  max-width: calc(100vw - 112px);
  color: var(--ob-text-1);
  font-size: var(--ob-fs-headline);
  font-weight: 600;
  line-height: var(--ob-lh-headline);
  opacity: 1;
}

.app-view--tab-root .app-header__section--title {
  justify-content: flex-start;
  justify-self: stretch;
  max-width: 100%;
  text-align: left;
  font-size: var(--ob-fs-ltitle);
  font-weight: 700;
  line-height: var(--ob-lh-ltitle);
  letter-spacing: -0.02em;
}

.app-view--tab-root .app-header__section--left {
  width: 0;
  overflow: hidden;
}

.app-view--tab-root .app-header__section--right {
  padding-bottom: 1px;
}

.header-title-stack,
.filter-title {
  width: 100%;
}

.filter-title {
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ob-text-1);
  font-size: var(--ob-fs-ltitle);
  font-weight: 700;
  line-height: var(--ob-lh-ltitle);
  letter-spacing: -0.02em;
}

.filter-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ob-text-3);
  border-bottom: 1.5px solid var(--ob-text-3);
  transform: translate(2px, -2px) rotate(45deg);
}

.icon-button,
.ghost-link.js-history-back,
.profile-edit-action {
  width: var(--ob-hit);
  min-width: var(--ob-hit);
  height: var(--ob-hit);
  min-height: var(--ob-hit);
  padding: 0;
  border: 0;
  border-radius: var(--ob-r-full);
  background: transparent;
  color: var(--ob-accent-text);
  box-shadow: none;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.icon-button:hover,
.icon-button:focus-visible,
.ghost-link.js-history-back:hover,
.ghost-link.js-history-back:focus-visible {
  transform: none;
  background: var(--ob-fill-1);
  border-color: transparent;
}

.icon-button:active,
.ghost-link.js-history-back:active,
.profile-edit-action:active {
  transform: scale(var(--ob-press-scale));
  background: var(--ob-fill-2);
}

.ghost-link,
.ghost-link:visited {
  color: var(--ob-accent-text);
  font-weight: 500;
}

.ghost-link.js-history-back::before {
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border-left-color: currentColor;
  border-bottom-color: currentColor;
}

.profile-edit-action {
  width: auto;
  min-width: var(--ob-hit);
  padding: 0 var(--ob-s3);
}

.profile-edit-action--save:not(.is-disabled) {
  color: var(--ob-accent-text);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Bottom tab bar */
.tab-nav {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(760px, 100%);
  padding: 0;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}

.tab-nav__glass {
  width: 100%;
  padding: 6px 0 calc(6px + var(--ob-safe-bottom));
  border-top: 1px solid var(--ob-line-1);
  background: var(--ob-bar-bg);
  box-shadow: none;
  backdrop-filter: var(--ob-blur-bar);
  -webkit-backdrop-filter: var(--ob-blur-bar);
  pointer-events: auto;
}

.tab-nav__list {
  gap: 0;
  color: var(--ob-text-3);
}

.tab-nav__link {
  min-height: 46px;
  padding: 3px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 0;
  color: var(--ob-text-3);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  transition: color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.tab-nav__link:hover,
.tab-nav__link:focus-visible,
.tab-nav__link:not(.is-active):focus-visible,
.tab-nav__link.is-active {
  color: var(--ob-accent-hi);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.tab-nav__link:active,
.tab-nav__link.is-nav-pressing {
  transform: scale(var(--ob-press-scale));
}

.tab-nav__icon {
  width: 25px;
  height: 25px;
  font-size: 24px;
  line-height: 25px;
}

.tab-nav__label {
  font-size: var(--ob-fs-cap);
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.tab-nav__link.is-active .tab-nav__label {
  font-weight: 600;
}

.tab-nav__filters,
.liquidGlass-effect,
.liquidGlass-tint,
.liquidGlass-shine {
  display: none;
}

/* Shared surfaces */
.panel,
.panel--glass,
.screen-card,
.profile-panel,
.calendar-stat-card,
.recent-session-card,
.replay-card,
.session-card,
.birthday-month-card,
.developer-live-card,
.profile-timeline-entry__card {
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel {
  padding: var(--ob-s4);
}

.page-heading,
.page-heading__main,
.profile-content,
.gift-exhibition,
.developer-gift-effects,
.developer-ai-settings,
.developer-live-danmaku-test {
  color: var(--ob-text-1);
}

.subtitle,
.form-hint,
.user-meta-note,
.event-log__meta,
.replay-card__meta,
.session-leaderboard__hint,
.like-leaderboard__hint,
.birthday-month-card__count,
.birthday-zodiac-meta,
.calendar-stats__grid small {
  color: var(--ob-text-2);
}

/* Lists become native inset groups */
.park-items,
.user-cards,
.like-leaderboard,
.session-leaderboard__list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.park-item,
.user-cards > li,
.like-leaderboard__item,
.session-leaderboard__list > li {
  position: relative;
}

.park-item + .park-item::before,
.user-cards > li + li::before,
.like-leaderboard__item + .like-leaderboard__item::before,
.session-leaderboard__list > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 64px;
  height: 1px;
  background: var(--ob-line-1);
  z-index: 2;
}

.park-link,
.user-card,
.user-card-link,
.like-leaderboard__card,
.session-leaderboard__item {
  min-height: var(--ob-cell-h-lg);
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.park-link:hover,
.park-link:focus-visible,
.user-card-link:hover,
.user-card-link:focus-visible,
.user-card-link:hover .user-card,
.user-card-link:focus-visible .user-card,
.like-leaderboard__card:hover,
.like-leaderboard__card:focus-visible,
.session-leaderboard__item:hover {
  transform: none;
  border-color: transparent;
  background: var(--ob-fill-1);
}

.park-link:active,
.park-link.is-nav-pressing,
.user-card-link:active,
.user-card-link.is-nav-pressing,
.like-leaderboard__card:active,
.like-leaderboard__card.is-nav-pressing {
  transform: scale(0.99);
  background: var(--ob-fill-2);
}

.park-link::after {
  content: "›";
  position: static;
  width: auto;
  margin-left: auto;
  padding-left: var(--ob-s2);
  color: var(--ob-text-4);
  background: none;
  opacity: 1;
  transform: none;
  animation: none;
  font-family: var(--ob-font-ui);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.park-icon,
.app-entry-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: var(--ob-r-sm);
  color: var(--ob-accent-hi);
  background: var(--ob-accent-soft);
  box-shadow: none;
}

.entry-icon-svg {
  width: 22px;
  height: 22px;
  filter: none;
}

.entry-icon-svg__stroke {
  stroke-width: 2;
}

.entry-icon-svg__soft-fill {
  fill: transparent;
}

.entry-icon-svg__accent-fill,
.entry-icon-svg__secondary-fill {
  fill: currentColor;
}

.entry-icon-svg__secondary-stroke {
  stroke: currentColor;
}

.app-entry-icon--birthday-calendar,
.app-entry-icon--gift-exhibition,
.app-entry-icon--gift-backfill {
  color: var(--ob-gold-text);
  background: var(--ob-gold-soft);
}

.app-entry-icon--live-danmaku {
  color: var(--ob-violet-text);
  background: var(--ob-violet-soft);
}

.park-text {
  min-width: 0;
  flex: 1;
}

.park-title {
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.park-subtitle {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

/* Castle root screen */
.app-view[data-page="orange"] .app-header {
  min-height: calc(124px + var(--ob-safe-top));
}

.app-view[data-page="orange"] .app-header__section--right {
  align-self: start;
  padding-top: 8px;
}

.app-view[data-page="orange"] .page-content {
  padding-top: var(--ob-s1);
}

.castle-navbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.castle-navbar-title strong {
  color: var(--ob-text-1);
  font-size: var(--ob-fs-ltitle);
  font-weight: 750;
  line-height: var(--ob-lh-ltitle);
  letter-spacing: -0.02em;
}

.castle-navbar-title small {
  margin-top: 1px;
  overflow: hidden;
  color: var(--ob-text-3);
  font-size: var(--ob-fs-foot);
  font-weight: 450;
  line-height: var(--ob-lh-foot);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.castle-campaign-action {
  display: grid;
  place-items: center;
  color: var(--ob-text-1);
}

.castle-campaign-action .f7-icons {
  font-size: 23px;
}

.castle-page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ob-group-gap);
}

.castle-progress-card {
  min-height: 102px;
  padding: var(--ob-s4);
  display: flex;
  flex-direction: column;
  gap: var(--ob-s3);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  color: var(--ob-text-1);
  box-shadow: none;
  text-decoration: none;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.castle-progress-card:hover,
.castle-progress-card:focus-visible {
  background: var(--ob-surface-2);
}

.castle-progress-card:active {
  transform: scale(0.99);
  background: var(--ob-fill-2);
}

.castle-progress-card__header,
.castle-progress-card__meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-s3);
}

.castle-progress-card__header strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.castle-progress-card__header > span {
  flex: none;
  color: var(--ob-text-3);
  font-family: var(--ob-font-num);
  font-size: var(--ob-fs-foot);
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--ob-lh-foot);
}

.castle-progress-card__meta {
  color: var(--ob-text-2);
  font-size: var(--ob-fs-foot);
  line-height: var(--ob-lh-foot);
}

.castle-progress-card__meta strong {
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: var(--ob-fs-foot);
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 650;
}

.castle-progress-card__track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
}

.castle-progress-card__track > span {
  display: block;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ob-grad-accent);
}

.castle-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ob-s2);
}

.castle-section__title {
  margin: 0;
  padding: 0 var(--ob-s1);
  color: var(--ob-text-3);
  font-size: var(--ob-fs-foot);
  font-weight: 600;
  line-height: var(--ob-lh-foot);
  letter-spacing: 0.01em;
}

.castle-group {
  border-radius: var(--ob-r-md);
  box-shadow: none;
}

.castle-group .park-link {
  min-height: var(--ob-cell-h-lg);
  padding: 10px var(--ob-s4);
}

.castle-group .park-icon .f7-icons {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 22px;
}

.castle-group .park-item + .park-item::before {
  left: 64px;
}

.castle-row-badge {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--ob-r-full);
  background: var(--ob-violet-soft);
  color: var(--ob-violet-text);
  font-size: 10px;
  font-weight: 650;
  line-height: 14px;
}

.castle-page .app-entry-icon--gift-exhibition {
  color: var(--ob-accent-hi);
  background: var(--ob-accent-soft);
}

.castle-page .app-entry-icon--developer {
  color: var(--ob-text-2);
  background: var(--ob-fill-2);
}

/* Members */
.user-card {
  gap: var(--ob-s3);
}

.user-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 1px solid var(--ob-line-1);
  background: linear-gradient(135deg, var(--ob-surface-3), var(--ob-accent-soft));
  color: var(--ob-text-1);
  font-size: 15px;
}

.user-title {
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.user-card__value {
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.users-load-more {
  background: var(--ob-surface-1);
  color: var(--ob-text-3);
}

/* Identity and badges */
.badge {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: var(--ob-r-full);
  font-size: var(--ob-fs-cap);
  font-weight: 600;
  line-height: var(--ob-lh-cap);
}

.badge-admin-inline {
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
}

.badge-fans,
.badge-fans--fallback {
  background: var(--ob-grad-gold);
  color: var(--ob-on-gold);
}

.badge-honor,
.badge-honor-pill {
  background: var(--ob-grad-violet);
  color: var(--ob-on-violet);
}

.badge-live-vip:not(.badge-live-vip--image) {
  border: 1px solid var(--ob-gold-500);
  background: transparent;
  color: var(--ob-gold-text);
}

.badge-soft,
.badge--ghost,
.badge-zodiac {
  border: 1px solid var(--ob-line-2);
  background: var(--ob-fill-1);
  color: var(--ob-text-2);
}

/* Profile */
.profile-content {
  gap: var(--ob-group-gap);
}

.profile-panel {
  position: relative;
  overflow: hidden;
  padding: var(--ob-s4);
}

.profile-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ob-glow-accent);
  pointer-events: none;
}

.profile-summary,
.profile-panel > * {
  position: relative;
}

.profile-summary {
  gap: 14px;
}

.profile-panel .avatar,
.profile-panel .avatar img {
  width: 64px;
  height: 64px;
}

.profile-panel .avatar {
  flex-basis: 64px;
  border: 1px solid var(--ob-line-2);
  background: linear-gradient(135deg, var(--ob-surface-3), var(--ob-accent-soft));
}

.profile-summary .info h2 {
  color: var(--ob-text-1);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.profile-meta-line {
  gap: 4px 14px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.profile-link-panel {
  overflow: visible;
}

.profile-link-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 0;
}

.profile-link-stats-fragment {
  display: contents;
}

.profile-link-card {
  min-width: 0;
  min-height: 86px;
  padding: 12px 10px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.profile-link-card:not(.profile-link-card--metric) {
  grid-column: 1 / -1;
  min-height: var(--ob-cell-h);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
}

.profile-link-card:not(.profile-link-card--metric) .profile-link-card__label,
.profile-link-card:not(.profile-link-card--metric) .profile-link-card__hint {
  text-align: left;
}

.profile-link-card:not(.profile-link-card--metric) .profile-link-card__hint {
  margin-left: auto;
  color: var(--ob-text-3);
}

.profile-link-card.is-clickable:hover,
.profile-link-card.is-clickable:focus-visible {
  transform: none;
  border-color: var(--ob-line-2);
  background: var(--ob-surface-2);
}

.profile-link-card__label {
  color: var(--ob-text-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.profile-link-card__value strong {
  color: var(--ob-text-1);
  font-size: clamp(22px, 5vw, var(--ob-fs-stat));
  line-height: var(--ob-lh-stat);
}

.profile-link-card__value span,
.profile-link-card__hint {
  color: var(--ob-text-3);
  font-size: 11px;
}

.profile-link-card--metric-watch {
  border-color: rgba(255, 107, 26, 0.2);
}

.profile-link-card--metric-watch .profile-link-card__label,
.profile-link-card--metric-watch .profile-link-card__value strong {
  color: var(--ob-accent-text);
}

.profile-link-card--metric-comment,
.profile-link-card--metric-like,
.profile-link-card--douyin,
.profile-link-card--douyin-album,
.profile-link-card--access {
  background: var(--ob-surface-1);
}

/* Buttons and forms */
.btn {
  min-height: var(--ob-hit);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--ob-r-full);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: none;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), border-color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.btn-primary {
  border-color: var(--ob-accent);
  background: var(--ob-accent);
  color: var(--ob-on-accent);
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: none;
  border-color: var(--ob-accent-press);
  background: var(--ob-accent-press);
}

.btn-secondary {
  border-color: var(--ob-line-2);
  background: var(--ob-fill-1);
  color: var(--ob-text-1);
}

.btn:active,
.btn.is-nav-pressing {
  transform: scale(var(--ob-press-scale));
}

.field {
  gap: var(--ob-s2);
}

.field__label,
.calendar-form label {
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.field input,
.field__control,
.calendar-form input,
.vip-email-input,
.header-search input {
  min-height: var(--ob-hit);
  padding: 9px 12px;
  border: 1px solid var(--ob-line-2);
  border-radius: var(--ob-r-sm);
  background: var(--ob-surface-2);
  color: var(--ob-text-1);
  color-scheme: inherit;
}

.field input::placeholder,
.field__control::placeholder,
.header-search input::placeholder {
  color: var(--ob-text-4);
}

.field input:focus,
.field__control:focus,
.calendar-form input:focus,
.header-search input:focus {
  border-color: var(--ob-accent);
  outline: 2px solid var(--ob-accent-soft);
  outline-offset: 1px;
}

.header-search {
  right: max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x)));
  left: max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x)));
}

.header-search.is-active {
  width: auto;
}

.header-search form {
  padding: 6px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-bar-bg);
  box-shadow: var(--ob-shadow-2);
}

.appearance-settings {
  display: grid;
  gap: var(--ob-s2);
  margin-bottom: var(--ob-group-gap);
}

.section-label {
  margin: 0;
  padding: 0 2px;
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.appearance-settings__panel {
  padding: var(--ob-s3);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.appearance-settings__panel p {
  margin: var(--ob-s2) 2px 0;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.theme-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: var(--ob-r-sm);
  background: var(--ob-fill-2);
}

.theme-segmented button {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard);
}

.theme-segmented button.is-active {
  background: var(--ob-seg-thumb);
  color: var(--ob-text-1);
  box-shadow: var(--ob-shadow-1);
  font-weight: 600;
}

.theme-segmented button:active {
  transform: scale(var(--ob-press-scale));
}

/* Filters and sheets */
.filter-popover {
  padding: var(--ob-s4);
  background: var(--ob-scrim);
  backdrop-filter: none;
}

.filter-popover__panel {
  width: min(420px, 100%);
  padding: var(--ob-s4);
  border-radius: var(--ob-r-xl);
  background: var(--ob-surface-2);
  box-shadow: var(--ob-shadow-3);
}

.filter-popover__title {
  margin-bottom: var(--ob-s3);
  color: var(--ob-text-1);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.filter-options {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.filter-option {
  min-height: var(--ob-cell-h);
  padding: 8px 12px;
  border-radius: 0;
}

.filter-options li + li .filter-option {
  border-top: 1px solid var(--ob-line-1);
}

.filter-option:hover,
.filter-option:focus-within {
  background: var(--ob-fill-1);
}

.filter-option input,
.filter-option__indicator {
  border-color: var(--ob-line-2);
}

.filter-option input:checked,
.filter-option--link.is-active .filter-option__indicator {
  border-color: var(--ob-accent);
}

.filter-option input::after,
.filter-option__indicator::after {
  background: var(--ob-accent);
}

.calendar-sheet__backdrop {
  background: var(--ob-scrim);
}

.calendar-sheet__panel {
  border: 1px solid var(--ob-line-1);
  border-bottom: 0;
  border-radius: var(--ob-r-xl) var(--ob-r-xl) 0 0;
  background: var(--ob-surface-2);
  color: var(--ob-text-1);
  box-shadow: var(--ob-shadow-3);
}

/* Home screen follows the UI kit's live, campaign and weekly hierarchy. */
.app-view[data-page="welcome"] {
  padding-right: var(--ob-page-x);
  padding-bottom: calc(var(--ob-tabbar-h) + var(--ob-safe-bottom) + var(--ob-s6));
  padding-left: var(--ob-page-x);
}

.app-view[data-page="welcome"] .app-header {
  min-height: calc(124px + var(--ob-safe-top));
  padding-right: max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x)));
  padding-left: max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x)));
}

.app-view[data-page="welcome"] .app-header__section--right {
  align-self: start;
  padding-top: 8px;
}

.app-view[data-page="welcome"] .page-content {
  padding-top: var(--ob-s1);
}

.home-navbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-navbar-title strong {
  color: var(--ob-text-1);
  font-size: var(--ob-fs-ltitle);
  font-weight: 750;
  line-height: var(--ob-lh-ltitle);
  letter-spacing: -0.02em;
}

.home-navbar-title small {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ob-text-3);
  font-size: var(--ob-fs-foot);
  font-weight: 450;
  line-height: var(--ob-lh-foot);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-notification-action {
  display: grid;
  place-items: center;
  color: var(--ob-text-1);
}

.home-notification-action .f7-icons {
  font-size: 23px;
}

.home-page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: var(--ob-s6);
  display: flex;
  flex-direction: column;
  gap: var(--ob-group-gap);
}

.home-stream-rail {
  min-width: 0;
}

.home-stream-rail__scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-stream-rail__scroller::-webkit-scrollbar {
  display: none;
}

.home-stream-tile {
  position: relative;
  width: 158.4px;
  aspect-ratio: 9 / 14;
  flex: 0 0 158.4px;
  overflow: hidden;
  display: block;
  border: 1px solid var(--ob-line-1);
  border-radius: 16.8px;
  background: linear-gradient(155deg, #3a2410 0%, #1a100b 54%, #1d1424 100%);
  color: #f7f3ef;
  text-decoration: none;
  scroll-snap-align: start;
  transition:
    transform var(--ob-dur-instant) var(--ob-ease-standard),
    border-color var(--ob-dur-quick) var(--ob-ease-standard),
    box-shadow var(--ob-dur-quick) var(--ob-ease-standard);
}

.home-stream-tile:hover,
.home-stream-tile:focus-visible {
  border-color: rgba(255, 142, 77, 0.48);
}

.home-stream-tile:focus-visible {
  outline: 2px solid var(--ob-accent);
  outline-offset: 2px;
}

.home-stream-tile:active {
  transform: scale(0.96);
}

.home-stream-tile--live.is-live {
  border-color: rgba(255, 107, 26, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.52);
}

.home-stream-tile__cover,
.home-stream-tile__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-stream-tile__cover {
  object-fit: cover;
}

.home-stream-tile__veil {
  background:
    linear-gradient(180deg, rgba(12, 8, 6, 0.05) 18%, rgba(12, 8, 6, 0.15) 48%, rgba(12, 8, 6, 0.92) 100%),
    linear-gradient(135deg, rgba(255, 106, 26, 0.08), transparent 48%);
  pointer-events: none;
}

.home-stream-tile--live.is-live .home-stream-tile__veil {
  background:
    linear-gradient(180deg, rgba(12, 8, 6, 0.02) 18%, rgba(12, 8, 6, 0.13) 48%, rgba(12, 8, 6, 0.92) 100%),
    radial-gradient(circle at 12% 5%, rgba(255, 106, 26, 0.24), transparent 42%);
}

.home-stream-badge {
  position: absolute;
  top: 9.6px;
  left: 9.6px;
  min-width: 0;
  height: 24px;
  padding: 0 8.4px;
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  border-radius: var(--ob-r-full);
  background: rgba(21, 17, 15, 0.7);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 720;
  line-height: 24px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-stream-tile.is-live .home-stream-badge {
  background: var(--ob-live);
  color: #fff;
}

.home-stream-badge i {
  width: 4.8px;
  height: 4.8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.home-stream-tile__caption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4px;
}

.home-stream-tile__caption strong {
  overflow: hidden;
  display: -webkit-box;
  color: #fff;
  font-size: 15.6px;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: -0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-stream-tile--live .home-stream-tile__caption strong {
  font-size: 16.8px;
  font-weight: 600;
  line-height: 22.8px;
}

.home-stream-tile__caption small {
  overflow: hidden;
  color: var(--ob-text-3);
  font-family: var(--ob-font-ui);
  font-size: 13.2px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-stream-tile--live .home-stream-tile__caption small {
  color: rgba(255, 246, 236, 0.7);
  font-family: var(--ob-font-num);
}

.home-stream-tile__play {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 40.8px;
  height: 40.8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.home-stream-tile__play .f7-icons {
  margin-left: 2.4px;
  font-size: 19.2px;
}

.home-stream-tile--profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.8px;
  border-style: dashed;
  border-color: var(--ob-line-2);
  background: var(--ob-surface-1);
  color: var(--ob-text-1);
  text-align: center;
}

.home-stream-profile__avatar {
  width: 55.2px;
  height: 55.2px;
  margin-bottom: 7.2px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 142, 77, 0.32);
  border-radius: 50%;
  background: var(--ob-fill-2);
  color: var(--ob-accent-text);
  font-size: 21.6px;
  font-weight: 700;
  box-shadow: 0 0 0 4.8px rgba(255, 107, 26, 0.07);
}

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

.home-stream-tile--profile strong {
  width: calc(100% - 24px);
  color: var(--ob-text-1);
  font-size: 15.6px;
  font-weight: 600;
  line-height: 21.6px;
}

.home-stream-profile__arrow {
  margin-top: 9.6px;
  color: var(--ob-accent-text);
  font-size: 20.4px;
}

.home-action {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--ob-r-full);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  transition: transform var(--ob-dur-instant) var(--ob-ease-standard), background-color var(--ob-dur-quick) var(--ob-ease-standard);
}

.home-action:active {
  transform: scale(var(--ob-press-scale));
}

.home-action .f7-icons {
  font-size: 16px;
}

.home-action--primary {
  margin-top: 14px;
  background: var(--ob-accent);
  color: var(--ob-on-accent);
}

.home-action--secondary {
  background: var(--ob-fill-2);
  color: var(--ob-text-1);
}

.home-action--ghost {
  background: transparent;
  color: var(--ob-accent-text);
}

.home-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ob-s2);
}

.home-section__heading {
  padding: 0 var(--ob-s1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ob-s3);
}

.home-section__heading > a {
  color: var(--ob-accent-text);
  font-size: var(--ob-fs-foot);
  font-weight: 500;
  line-height: var(--ob-lh-foot);
}

.home-section__title {
  margin: 0;
  padding: 0 var(--ob-s1);
  color: var(--ob-text-3);
  font-size: var(--ob-fs-foot);
  font-weight: 600;
  line-height: var(--ob-lh-foot);
  letter-spacing: 0.02em;
}

.home-section__heading .home-section__title {
  padding: 0;
}

.home-campaign-card,
.home-list-group,
.home-week-card {
  border: 1px solid var(--ob-line-1);
  background: var(--ob-surface-1);
  box-shadow: none;
}

.home-campaign-card {
  padding: var(--ob-s4);
  border-radius: var(--ob-r-lg);
}

.home-campaign-card__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-s3);
  text-decoration: none;
}

.home-campaign-card__heading strong {
  overflow: hidden;
  background: var(--ob-grad-gold);
  background-clip: text;
  color: var(--ob-gold-text);
  font-family: var(--ob-font-num);
  font-size: 20px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-campaign-card__heading .f7-icons {
  flex: none;
  color: var(--ob-text-4);
  font-size: 18px;
}

.home-campaign-card > p {
  margin: var(--ob-s1) 0 0;
  color: var(--ob-text-2);
  font-size: var(--ob-fs-foot);
  line-height: var(--ob-lh-foot);
}

.home-campaign-card__actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: var(--ob-s2);
}

.home-list-group {
  overflow: hidden;
  border-radius: var(--ob-r-md);
}

.home-list-cell {
  min-height: var(--ob-cell-h-lg);
  padding: 10px var(--ob-s4);
  display: flex;
  align-items: center;
  gap: var(--ob-s3);
  text-decoration: none;
}

.home-list-cell:hover,
.home-list-cell:focus-visible {
  background: var(--ob-fill-1);
}

.home-list-cell__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: var(--ob-r-sm);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-hi);
}

.home-list-cell__icon .f7-icons {
  font-size: 20px;
}

.home-list-cell__text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-list-cell__text strong {
  overflow: hidden;
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-list-cell__text small {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.home-list-cell__chevron {
  flex: none;
  color: var(--ob-text-4);
  font-size: 18px;
}

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

.home-week-card {
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--ob-r-md);
  text-decoration: none;
}

.home-week-card:hover,
.home-week-card:focus-visible {
  background: var(--ob-surface-2);
}

.home-week-card:active {
  transform: scale(0.99);
}

.home-week-card__icon {
  color: var(--ob-accent-hi);
  font-size: 20px;
}

.home-week-card--birthday .home-week-card__icon {
  color: var(--ob-gold-text);
}

.home-week-card strong {
  margin-top: var(--ob-s2);
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.home-week-card small {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

/* Leaderboards */
.like-leaderboard__header {
  gap: var(--ob-s2);
  margin-bottom: var(--ob-s4);
  padding: var(--ob-s4);
  background: var(--ob-surface-1);
}

.like-leaderboard__period {
  color: var(--ob-text-1);
  font-size: var(--ob-fs-headline);
  line-height: var(--ob-lh-headline);
}

.watch-duration-period-card {
  min-height: 78px;
  margin-bottom: var(--ob-s4);
  padding: var(--ob-s4);
  display: flex;
  align-items: center;
  gap: var(--ob-s3);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.watch-duration-period-card__avatar,
.watch-duration-period-card__avatar img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: var(--ob-r-full);
}

.watch-duration-period-card__avatar {
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--ob-accent) 58%, transparent);
  background: var(--ob-accent-soft);
  box-shadow: var(--ob-shadow-1);
}

.watch-duration-period-card__avatar img {
  display: block;
  object-fit: cover;
}

.watch-duration-period-card__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.watch-duration-period-card__copy strong {
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.watch-duration-period-card__copy span {
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

.watch-duration-period-card__value {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--ob-s1);
  color: var(--ob-text-3);
  text-align: right;
  white-space: nowrap;
}

.watch-duration-period-card__value > .ob-num {
  color: var(--ob-accent-text);
  font-size: var(--ob-fs-stat);
  font-weight: 700;
  line-height: var(--ob-lh-stat);
}

.watch-duration-period-card__value > span {
  font-size: 12px;
  line-height: 16px;
}

.watch-duration-period-card__status {
  color: var(--ob-text-2);
  font-size: 14px;
  font-weight: 500;
}

.like-title {
  gap: var(--ob-s2);
}

.like-title__nav {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  color: var(--ob-accent-text);
}

.like-title__picker {
  min-width: 138px;
  border-radius: var(--ob-r-sm);
}

.like-title__main {
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 600;
}

.like-title__sub {
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ob-text-3);
  font-size: 11px;
}

.like-title__picker:hover .like-title__sub,
.like-title__picker:focus-visible .like-title__sub {
  border: 0;
  background: transparent;
  color: var(--ob-accent-text);
}

.like-leaderboard__card {
  gap: var(--ob-s3);
}

.like-leaderboard__rank-badge {
  right: -4px;
  bottom: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--ob-surface-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-grad-gold);
  color: var(--ob-on-gold);
  box-shadow: var(--ob-shadow-1);
  font-size: 11px;
}

.like-leaderboard__name {
  font-size: 15px;
  line-height: 20px;
}

.like-leaderboard__count {
  color: var(--ob-accent-text);
  font-size: 22px;
  line-height: 26px;
}

.like-leaderboard__label {
  color: var(--ob-text-3);
  font-size: 11px;
}

/* Calendar, birthdays and content data */
.app-view[data-page="calendar"] .app-page .page-content {
  padding-top: 14px;
}

.calendar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
}

.calendar-title__label {
  max-width: 100%;
  overflow: hidden;
  color: var(--ob-text-1);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-headline);
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.calendar-title__month {
  max-width: 100%;
  overflow: hidden;
  color: var(--ob-text-3);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-cap);
  font-weight: 400;
  line-height: var(--ob-lh-cap);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-header-nav .f7-icons {
  font-size: 21px;
}

.calendar-header-nav,
.calendar-header-nav:hover,
.calendar-header-nav:focus-visible {
  color: var(--ob-text-1);
}

.calendar-header-nav.is-disabled {
  color: var(--ob-text-4);
  opacity: 0.45;
}

.calendar-dashboard {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.calendar-stat-card {
  min-width: 0;
  min-height: 104px;
  padding: var(--ob-s4);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.calendar-stat-card p {
  margin: 0;
}

.calendar-stat-card__label {
  overflow: hidden;
  color: var(--ob-text-3);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-foot);
  font-weight: 400;
  line-height: var(--ob-lh-foot);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-stat-card__value-row {
  margin-top: 2px !important;
  display: flex;
  align-items: baseline;
  gap: var(--ob-s1);
  white-space: nowrap;
}

.calendar-stat-card__value-row strong {
  min-width: 0;
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: var(--ob-fs-t1);
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  line-height: 26px;
}

.calendar-stat-card--accent .calendar-stat-card__value-row strong {
  color: var(--ob-accent-hi);
}

.calendar-stat-card__value-row span {
  flex: none;
  color: var(--ob-text-2);
  font-family: var(--ob-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.calendar-stat-card__hint {
  margin-top: var(--ob-s1) !important;
  color: var(--ob-text-3);
  font-family: var(--ob-font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.calendar-progress-card,
.calendar-heatmap-card {
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.calendar-progress-card {
  padding: 17px var(--ob-s4);
}

.calendar-progress-card__meta {
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ob-s3);
}

.calendar-progress-card__meta span {
  color: var(--ob-text-2);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-foot);
  line-height: var(--ob-lh-foot);
}

.calendar-progress-card__meta strong {
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: var(--ob-fs-foot);
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  line-height: var(--ob-lh-foot);
}

.calendar-progress-card__track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
}

.calendar-progress-card__track span {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ob-grad-accent);
  transition: width var(--ob-dur-gentle) var(--ob-ease-standard);
}

.calendar-heatmap-card {
  padding: var(--ob-s3);
}

.calendar-weekdays,
.calendar-grid__body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays {
  padding: 0;
  color: var(--ob-text-4);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-cap);
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

.calendar-grid__body {
  margin-top: 6px;
  padding: 0;
}

.calendar-day,
.calendar-day-placeholder {
  width: 100%;
  aspect-ratio: 1;
}

.calendar-day {
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  border-radius: var(--ob-r-sm);
  background: var(--ob-fill-1);
  color: var(--ob-text-1);
  text-align: center;
  transition: background-color var(--ob-dur-quick) var(--ob-ease-standard), transform var(--ob-dur-instant) var(--ob-ease-standard), box-shadow var(--ob-dur-quick) var(--ob-ease-standard);
}

.calendar-day.has-hours.is-hours-low {
  background: rgba(255, 107, 26, 0.14);
}

.calendar-day.has-hours.is-hours-mid {
  background: rgba(255, 107, 26, 0.26);
}

.calendar-day.has-hours.is-hours-high {
  background: rgba(255, 107, 26, 0.42);
}

.calendar-day.is-leave {
  background: rgba(251, 191, 36, 0.12);
}

.calendar-day.is-future {
  color: var(--ob-text-4);
}

.calendar-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--ob-accent);
}

.calendar-day:hover,
.calendar-day:focus-visible {
  background-color: var(--ob-fill-2);
  box-shadow: inset 0 0 0 1.5px var(--ob-accent);
  transform: none;
}

.calendar-day:active {
  transform: scale(var(--ob-press-scale));
}

.calendar-day__number {
  color: currentColor;
  font-family: var(--ob-font-num);
  font-size: 12px;
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  line-height: 14px;
}

.calendar-day__sessions {
  height: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.calendar-session-dot {
  width: 5px;
  height: 5px;
  flex: none;
  display: inline-block;
  border: 1px solid var(--ob-text-2);
  border-radius: 50%;
  background: var(--ob-text-2);
}

.calendar-session-dot--start {
  background: linear-gradient(90deg, var(--ob-text-2) 0 50%, transparent 50%);
}

.calendar-session-dot--end {
  background: linear-gradient(90deg, transparent 0 50%, var(--ob-text-2) 50%);
}

.calendar-day__hours,
.calendar-day__tag {
  margin: 0;
  color: var(--ob-text-2);
  font-family: var(--ob-font-num);
  font-size: 8.5px;
  font-feature-settings: var(--ob-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  line-height: 10px;
  white-space: nowrap;
}

.calendar-day__tag {
  align-self: auto;
  color: var(--ob-warning);
  font-family: var(--ob-font-ui);
}

.calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--ob-text-3);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-cap);
  font-weight: 400;
  line-height: 15px;
}

.calendar-legend--heat {
  margin-top: var(--ob-s3);
}

.calendar-legend--sessions {
  margin-top: var(--ob-s2);
}

.calendar-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-s1);
}

.calendar-legend__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
}

.calendar-legend__swatch.is-low {
  background: rgba(255, 107, 26, 0.14);
}

.calendar-legend__swatch.is-mid {
  background: rgba(255, 107, 26, 0.26);
}

.calendar-legend__swatch.is-high {
  background: rgba(255, 107, 26, 0.42);
}

.calendar-legend__swatch.is-leave {
  background: rgba(251, 191, 36, 0.12);
}

.calendar-dashboard__hint {
  margin: 2px 0 0;
  color: var(--ob-text-4);
  font-family: var(--ob-font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
}

.calendar-sheet__hours {
  color: var(--ob-accent-text);
}

.gift-exhibition__progress-bar {
  background: var(--ob-fill-2);
}

.gift-exhibition__progress-bar span {
  background: var(--ob-accent);
}

.birthday-month-list,
.birthday-zodiac-list,
.birthday-loop-cycle {
  gap: var(--ob-group-gap);
}

.birthday-month-card {
  padding: var(--ob-s4);
}

.birthday-month-card .user-cards {
  border: 0;
  box-shadow: none;
}

.birthday-card-extra__value {
  color: var(--ob-gold-text);
}

.birthday-tabs,
.session-tabs__nav,
.session-tabs__subnav,
.developer-gift-effects__tabs {
  border-color: var(--ob-line-1);
  background: var(--ob-fill-2);
}

.birthday-tab,
.session-tab-btn,
.session-subtab-btn,
.developer-gift-effects__tab {
  color: var(--ob-text-2);
}

.birthday-tab.is-active,
.session-tab-btn.is-active,
.session-subtab-btn.is-active,
.developer-gift-effects__tab.is-active {
  border-color: transparent;
  background: var(--ob-seg-thumb);
  color: var(--ob-accent-text);
  box-shadow: var(--ob-shadow-1);
}

/* Cards that remain cards because they represent distinct content */
.replay-card,
.session-card,
.recent-session-card,
.gift-exhibition__item,
.gift-exhibition__unlighted,
.developer-gift-effects__tile,
.profile-timeline-entry__card {
  border-color: var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.replay-card__thumb,
.session-card__cover,
.gift-exhibition__anchor-avatar,
.gift-exhibition__gift-image {
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-2);
}

.gift-exhibition__stat,
.gift-exhibition__unlighted-list li,
.session-stats-inline,
.vip-email-summary {
  border-color: var(--ob-line-1);
  border-radius: var(--ob-r-sm);
  background: var(--ob-surface-2);
}

.gift-exhibition__diamond {
  color: var(--ob-gold-text);
}

/* Updated v3 screen compositions: login, birthday-led home, castle summary, calendar sheet and profiles. */
body.login-page {
  overflow-x: hidden;
  background: #0f0d0b;
  color: #f5f1ec;
  color-scheme: dark;
}

body.login-page .app-root,
body.login-page .page-content {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

.login-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2a1c10 0%, #171210 45%, #0f0d0b 100%);
  pointer-events: none;
}

.login-hero__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0.62;
}

.login-hero__wash,
.login-hero__fade {
  position: absolute;
  inset: 0;
}

.login-hero__wash {
  background: radial-gradient(90% 50% at 70% 22%, rgba(255, 107, 26, 0.2), transparent 65%);
}

.login-hero__fade {
  top: 32%;
  background: linear-gradient(180deg, transparent, rgba(15, 13, 11, 0.94) 48%, #0f0d0b 100%);
}

.login-screen {
  position: relative;
  z-index: 2;
  width: min(430px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 20px calc(20px + var(--ob-safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.login-screen__content {
  width: 100%;
}

.login-screen__brand {
  margin: 0;
  color: rgba(245, 241, 236, 0.48);
  font-family: var(--ob-font-num);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.22em;
  line-height: 16px;
}

.login-screen h1 {
  margin: var(--ob-s2) 0 0;
  color: #f5f1ec;
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 42px;
}

.login-screen__subtitle {
  margin: 6px 0 0;
  color: rgba(245, 241, 236, 0.68);
  font-size: 14px;
  line-height: 20px;
}

.login-steps {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ob-s3);
  list-style: none;
}

.login-steps li {
  display: flex;
  align-items: center;
  gap: var(--ob-s3);
}

.login-steps li > span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--ob-r-full);
  background: rgba(255, 107, 26, 0.16);
  color: var(--ob-accent-hi);
  font-family: var(--ob-font-num);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.login-steps p {
  margin: 0;
  color: rgba(245, 241, 236, 0.7);
  font-size: 14px;
  line-height: 20px;
}

.login-form {
  margin-top: 22px;
}

.login-form__row {
  display: flex;
  gap: var(--ob-s2);
}

.login-form__input-wrap {
  min-width: 0;
  height: 48px;
  flex: 1;
  padding: 0 var(--ob-s4);
  display: flex;
  align-items: center;
  gap: var(--ob-s2);
  border: 1px solid rgba(255, 246, 236, 0.16);
  border-radius: var(--ob-r-full);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.login-form__input-wrap .f7-icons {
  flex: none;
  color: rgba(245, 241, 236, 0.48);
  font-size: 16px;
}

.login-form__input-wrap input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5f1ec;
  font-size: 15px;
  line-height: 20px;
}

.login-form__input-wrap input::placeholder {
  color: rgba(245, 241, 236, 0.42);
}

.login-form__paste {
  height: 48px;
  flex: none;
  padding: 0 var(--ob-s4);
  border: 1px solid rgba(255, 246, 236, 0.16);
  border-radius: var(--ob-r-full);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 241, 236, 0.74);
  font-size: 14px;
  font-weight: 600;
}

.login-form__submit {
  width: 100%;
  height: 48px;
  margin-top: var(--ob-s3);
  border: 1px solid var(--ob-accent);
  border-radius: var(--ob-r-full);
  background: var(--ob-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}

.login-form__paste:active,
.login-form__submit:active {
  transform: scale(var(--ob-press-scale));
}

.login-form__error {
  margin-top: var(--ob-s2);
}

.login-form__status {
  min-height: 16px;
  margin: 4px 0 -20px;
  color: rgba(245, 241, 236, 0.56);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.login-campaign-link {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ob-gold-text);
  text-decoration: none;
}

.login-campaign-link span {
  background: var(--ob-grad-gold);
  background-clip: text;
  font-family: var(--ob-font-num);
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-campaign-link .f7-icons {
  font-size: 14px;
}

.login-screen__privacy {
  margin: 10px 0 0;
  color: rgba(245, 241, 236, 0.32);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}

.home-birthday-card {
  position: relative;
  min-height: 226px;
  overflow: hidden;
  padding: 24px 20px 22px;
  display: block;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: linear-gradient(150deg, #2a1c0e, #171412 62%);
  color: var(--ob-text-1);
  text-decoration: none;
}

.home-birthday-card__zodiac {
  position: absolute;
  top: -34px;
  right: -18px;
  color: var(--ob-gold-400);
  font-size: 150px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.1;
  transform: rotate(14deg);
  pointer-events: none;
}

.home-birthday-card__glow {
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--ob-accent);
  opacity: 0.07;
  pointer-events: none;
}

.home-birthday-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
}

.home-birthday-card__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.home-birthday-card__heading strong {
  background: var(--ob-grad-gold);
  background-clip: text;
  font-size: 32px;
  font-weight: 750;
  line-height: 36px;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-birthday-card__heading > span {
  color: var(--ob-text-3);
  font-family: var(--ob-font-num);
  font-size: 12px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 16px;
}

.home-birthday-card__members {
  margin-top: 22px;
  display: flex;
  align-items: center;
}

.home-birthday-avatars {
  display: flex;
  align-items: center;
}

.home-birthday-avatar {
  width: 36px;
  height: 36px;
  margin-left: -10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-1);
  box-shadow: 0 0 0 2.5px #1e1812;
  font-size: 12px;
  transform: rotate(calc((var(--home-avatar-index) - 2) * 2deg));
}

.home-birthday-avatar:first-child {
  margin-left: 0;
}

.home-birthday-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-birthday-card__members > span:last-child {
  margin-left: 14px;
  color: var(--ob-text-2);
  font-size: 13px;
  line-height: 18px;
}

.home-birthday-card__members b {
  color: var(--ob-gold-text);
  font-family: var(--ob-font-num);
}

.home-birthday-card__today {
  min-height: 62px;
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: var(--ob-s3);
  border: 1px dashed rgba(255, 142, 77, 0.35);
  border-radius: var(--ob-r-md);
  background: var(--ob-accent-soft);
}

.home-birthday-avatar--today {
  position: relative;
  width: 34px;
  height: 34px;
  margin: 0;
  overflow: visible;
  flex: 0 0 34px;
  transform: none;
}

.home-birthday-avatar--today img {
  overflow: hidden;
  border-radius: 50%;
}

.home-birthday-avatar--today i {
  position: absolute;
  top: -9px;
  right: -7px;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  transform: rotate(18deg);
}

.home-birthday-card__today > span:last-child {
  color: var(--ob-text-1);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

.home-birthday-card__today b {
  color: var(--ob-accent-hi);
}

.home-week-card--exhibition .home-week-card__icon {
  color: var(--ob-gold-text);
}

.castle-progress-card {
  min-height: 164px;
  gap: 0;
}

.castle-progress-card__metrics {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.castle-progress-card__metric {
  flex: none;
}

.castle-progress-card__metric small {
  display: block;
  color: var(--ob-text-3);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.castle-progress-card__metric > span {
  display: flex;
  align-items: baseline;
}

.castle-progress-card__metric strong {
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: 22px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 700;
  line-height: 30px;
}

.castle-progress-card__metric--accent strong {
  color: var(--ob-accent-hi);
  font-size: 30px;
  line-height: 34px;
}

.castle-progress-card__metric b {
  margin-left: 3px;
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
}

.castle-progress-card__summary {
  margin-top: 12px;
  color: var(--ob-text-3);
  font-size: 13px;
  line-height: 18px;
}

.castle-progress-card__summary b {
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
}

.castle-progress-card__track {
  margin-top: 12px;
}

.calendar-sheet__panel {
  min-height: 52%;
  max-height: 78%;
  overflow-y: auto;
  padding: 10px 20px calc(28px + var(--ob-safe-bottom));
  display: flex;
  flex-direction: column;
}

.calendar-sheet__handle {
  width: 36px;
  height: 4px;
  flex: none;
  margin: 0 auto 18px;
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-3);
}

.calendar-sheet__header {
  margin: 0;
  align-items: flex-start;
}

.calendar-sheet__summary {
  min-width: 0;
}

.calendar-sheet__date {
  color: var(--ob-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.calendar-sheet__total,
.calendar-sheet__leave-state {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-sheet__total strong {
  color: var(--ob-accent-hi);
  font-family: var(--ob-font-num);
  font-size: 40px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 700;
  line-height: 44px;
}

.calendar-sheet__total span {
  color: var(--ob-text-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.calendar-sheet__leave-state strong {
  color: var(--ob-warning);
  font-size: 30px;
  line-height: 36px;
}

.calendar-sheet__leave-state span {
  padding: 3px 8px;
  border-radius: var(--ob-r-full);
  background: rgba(251, 191, 36, 0.14);
  color: var(--ob-warning);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.calendar-sheet__close {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  background: var(--ob-fill-2);
}

.calendar-sheet__close .f7-icons {
  font-size: 16px;
}

.calendar-sheet__body {
  min-height: 0;
  flex: 1;
  gap: 0;
}

.calendar-session-list {
  margin-top: 18px;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.calendar-session-list li {
  position: relative;
  padding: 16px 18px;
}

.calendar-session-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 18px;
  height: 1px;
  background: var(--ob-line-1);
}

.calendar-session__times {
  align-items: baseline;
}

.calendar-session__times strong {
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: 17px;
  font-feature-settings: var(--ob-tnum);
  line-height: 24px;
}

.calendar-session__duration {
  color: var(--ob-accent-hi);
  font-family: var(--ob-font-num);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.calendar-session__notes {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ob-text-3);
  font-size: 13px;
  line-height: 18px;
}

.calendar-session__notes .f7-icons {
  flex: none;
  font-size: 13px;
}

.calendar-sheet__footer {
  margin-top: 24px;
  display: flex;
  justify-content: stretch;
  gap: 10px;
}

.calendar-sheet-button {
  min-height: 48px;
  flex: 1;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--ob-r-full);
  font-size: 15px;
  font-weight: 600;
}

.calendar-sheet-button--secondary {
  border-color: var(--ob-line-2);
  background: var(--ob-fill-2);
  color: var(--ob-text-1);
}

.calendar-sheet-button--ghost {
  background: transparent;
  color: var(--ob-accent-text);
}

.calendar-sheet-button .f7-icons {
  font-size: 17px;
}

.calendar-sheet__permission-note {
  margin: 12px 0 0;
  color: var(--ob-text-4);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.app-view[data-page="profile"] .page-content {
  padding-top: var(--ob-s4);
}

.profile-navbar-action {
  display: grid;
  place-items: center;
  color: var(--ob-text-1);
}

.profile-navbar-action .f7-icons {
  font-size: 21px;
}

.profile-content {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--ob-group-gap);
}

.profile-identity {
  position: relative;
}

.profile-identity--member {
  overflow: hidden;
  padding: var(--ob-s4);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
}

.profile-identity__glow {
  position: absolute;
  inset: 0;
  background: var(--ob-glow-accent);
  pointer-events: none;
}

.profile-identity__main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-identity--self .profile-identity__main {
  gap: var(--ob-s4);
}

.profile-identity__avatar,
.profile-identity__avatar img {
  width: 64px;
  height: 64px;
}

.profile-identity--self .profile-identity__avatar,
.profile-identity--self .profile-identity__avatar img {
  width: 72px;
  height: 72px;
}

.profile-identity__avatar {
  flex: 0 0 64px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ob-line-2);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ob-surface-3), var(--ob-accent-soft));
  color: var(--ob-text-1);
  font-size: 24px;
  text-decoration: none;
}

.profile-identity--self .profile-identity__avatar {
  flex-basis: 72px;
}

.profile-identity__avatar img {
  display: block;
  object-fit: cover;
}

.profile-identity__copy {
  min-width: 0;
  flex: 1;
}

.profile-identity__copy h2 {
  margin: 0;
  overflow: hidden;
  color: var(--ob-text-1);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity--self .profile-identity__copy h2 {
  font-size: 22px;
  line-height: 28px;
}

.profile-identity__badges {
  min-height: 20px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-identity__badges .badge,
.profile-identity__badges .badge-level-image {
  flex: none;
}

.profile-identity__meta {
  position: relative;
  margin-top: 14px;
  padding: 10px 0;
  display: flex;
  border-radius: var(--ob-r-md);
  background: var(--ob-fill-1);
}

.profile-identity--self .profile-identity__meta {
  margin-top: var(--ob-s4);
}

.profile-identity__meta > span {
  min-width: 0;
  flex: 1;
  text-align: center;
}

.profile-identity__meta > span + span {
  border-left: 1px solid var(--ob-line-1);
}

.profile-identity__meta strong {
  display: block;
  overflow: hidden;
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: 14px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity__meta small {
  color: var(--ob-text-3);
  font-size: 11px;
  line-height: 15px;
}

.profile-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ob-s2);
}

.profile-section > h3 {
  margin: 0;
  padding: 0 var(--ob-s1);
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 18px;
}

.profile-stats-grid {
  display: grid;
  gap: 10px;
}

.profile-stats-grid--self {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-stats-grid--member {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-stats-fragment {
  display: contents;
}

.profile-stat-card {
  min-width: 0;
  min-height: 86px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  color: var(--ob-text-1);
  text-decoration: none;
}

.profile-stat-card > span {
  color: var(--ob-text-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.profile-stat-card p {
  margin: auto 0 0;
  display: flex;
  align-items: baseline;
}

.profile-stat-card strong {
  overflow: hidden;
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: 28px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 700;
  line-height: 32px;
  text-overflow: ellipsis;
}

.profile-stat-card small {
  margin-left: 3px;
  color: var(--ob-text-3);
  font-size: 11px;
  line-height: 15px;
}

.profile-stat-card--watch strong {
  color: var(--ob-accent-hi);
}

.profile-stats-grid--self .profile-stat-card {
  padding-right: 12px;
  padding-left: 12px;
}

.profile-stats-grid--self .profile-stat-card strong {
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 29px;
}

.profile-stats-grid--self .profile-stat-card small {
  margin-left: 2px;
  font-size: 10px;
}

.profile-stat-card--year {
  min-height: 116px;
  grid-column: 1 / -1;
  padding: var(--ob-s4);
}

.profile-stat-card--year strong {
  color: var(--ob-accent-hi);
  font-size: 40px;
  line-height: 44px;
}

.profile-stat-card--year em {
  margin-top: 4px;
  color: var(--ob-text-3);
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}

.profile-stat-card--vip strong {
  color: var(--ob-gold-text);
}

.profile-stat-card.is-loading {
  pointer-events: none;
}

.profile-stat-card.is-loading strong {
  width: 60%;
  color: transparent;
}

.profile-list-group {
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.profile-list-cell {
  position: relative;
  min-height: var(--ob-cell-h-lg);
  padding: 10px var(--ob-s4);
  display: flex;
  align-items: center;
  gap: var(--ob-s3);
  color: var(--ob-text-1);
  text-decoration: none;
}

.profile-list-cell + .profile-list-cell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 64px;
  height: 1px;
  background: var(--ob-line-1);
}

.profile-list-cell__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: var(--ob-r-sm);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-hi);
}

.profile-list-cell__icon.is-gold {
  background: var(--ob-gold-soft);
  color: var(--ob-gold-text);
}

.profile-list-cell__icon.is-neutral {
  background: var(--ob-fill-2);
  color: var(--ob-text-2);
}

.profile-list-cell__icon .f7-icons {
  font-size: 20px;
}

.profile-list-cell > strong,
.profile-list-cell__copy {
  min-width: 0;
  flex: 1;
}

.profile-list-cell > strong,
.profile-list-cell__copy strong {
  overflow: hidden;
  display: block;
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-list-cell__copy small {
  margin-top: 2px;
  display: block;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.profile-list-cell__value {
  max-width: 44%;
  overflow: hidden;
  flex: none;
  color: var(--ob-text-3);
  font-family: var(--ob-font-num);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-list-cell__chevron {
  flex: none;
  color: var(--ob-text-4);
  font-size: 18px;
}

html[data-theme="light"] .home-birthday-card {
  background: linear-gradient(150deg, #fff5e8, #ffffff 62%);
}

html[data-theme="light"] .home-birthday-avatar {
  box-shadow: 0 0 0 2.5px #fff8ef;
}

@media (max-height: 720px) {
  .login-screen {
    padding-bottom: calc(12px + var(--ob-safe-bottom));
  }

  .login-steps,
  .login-form {
    margin-top: 14px;
  }

  .login-steps {
    gap: var(--ob-s2);
  }

  .login-campaign-link {
    margin-top: 12px;
  }
}

@media (max-width: 360px) {
  .home-birthday-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .home-birthday-card__heading strong {
    font-size: 28px;
  }

  .home-birthday-card__members > span:last-child {
    margin-left: 10px;
    font-size: 12px;
  }

  .profile-stat-card {
    padding-right: 10px;
    padding-left: 10px;
  }

  .profile-stat-card strong {
    font-size: 24px;
  }
}

/* Updated v3 AI chat and weekly exhibition. */
.app-view[data-page="ai-chat"] {
  --ai-content-top-space: calc(58px + var(--ob-safe-top));
  --ai-bottom-inset: 0px;
  --ai-content-bottom-inset: 0px;
  --ai-composer-safe-bottom: var(--ob-safe-bottom);
  --ai-composer-left: 0px;
  --ai-composer-right: 0px;
  --ai-composer-bottom: var(--ai-bottom-inset);
  --ai-composer-height: 64px;
  width: min(760px, 100%);
  padding: 0;
  background: var(--ob-bg);
}

.app-view[data-page="ai-chat"] .app-header {
  min-height: calc(58px + var(--ob-safe-top));
  transform: translateY(var(--ai-visual-viewport-offset-top, 0px));
}

.app-view[data-page="ai-chat"] .app-header__section--title {
  align-self: stretch;
}

.ai-chat-back,
.ai-chat-reset {
  color: var(--ob-text-1);
}

.ai-chat-back .f7-icons,
.ai-chat-reset .f7-icons {
  font-size: 21px;
}

.ai-chat-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-chat-title strong {
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 650;
  line-height: 20px;
}

.ai-chat-title small {
  margin-top: 1px;
  overflow: hidden;
  color: var(--ob-text-3);
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-view[data-page="ai-chat"] .app-page,
.app-view[data-page="ai-chat"] .page-content,
.ai-chat {
  width: 100%;
  min-height: 0;
  padding: 0;
}

.ai-chat__log {
  inset: 0;
  width: 100vw;
  padding: calc(var(--ai-content-top-space) + 18px) var(--ob-page-x)
    calc(var(--ai-content-bottom-space) + var(--ai-composer-height) + 10px);
  gap: 0;
}

.ai-chat__identity {
  margin-bottom: 16px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ai-chat__identity-avatar {
  width: 56px;
  height: 56px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--ob-line-2);
  border-radius: 50%;
  background: var(--ob-gold-500);
  color: var(--ob-on-gold);
  font-size: 18px;
  font-weight: 700;
}

.ai-chat__identity-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-chat__identity strong {
  margin-top: 8px;
  color: var(--ob-text-1);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
}

.ai-chat__identity small {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.ai-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-message,
.ai-message--user {
  display: flex;
  align-items: flex-end;
}

.ai-message--user {
  justify-content: flex-start;
}

.ai-message__avatar {
  display: none;
}

.ai-message__bubble {
  max-width: 76%;
  padding: 10px 14px;
  border: 1px solid var(--ob-line-1);
  border-radius: 18px 18px 18px 4px;
  background: var(--ob-surface-2);
  color: var(--ob-text-1);
  box-shadow: none;
  font-size: 15px;
  line-height: 22px;
  animation: ob-ai-message-in var(--ob-dur-base) var(--ob-ease-enter);
}

.ai-message--assistant .ai-message__bubble,
.ai-message--pending .ai-message__bubble {
  border-color: var(--ob-line-1);
  background: var(--ob-surface-2);
  color: var(--ob-text-1);
}

.ai-message--user .ai-message__bubble {
  margin-left: auto;
  border-color: var(--ob-accent);
  border-radius: 18px 18px 4px 18px;
  background: var(--ob-accent);
  color: var(--ob-on-accent);
}

.ai-message__bubble--markdown h3,
.ai-message__bubble--markdown h4,
.ai-message__bubble--markdown h5,
.ai-message__bubble--markdown th {
  color: var(--ob-text-1);
}

.ai-message__bubble--markdown a {
  color: var(--ob-accent-text);
}

.ai-message__typing {
  width: auto;
  height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ob-text-3);
  filter: none;
}

.ai-message__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ob-ai-typing 1.2s var(--ob-ease-standard) infinite;
}

.ai-message__typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-message__typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.ai-message--system-error {
  min-height: 38px;
  max-width: min(100%, 300px);
  margin: 0 auto;
  padding: 6px 6px 6px 12px;
  align-self: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
}

.ai-message__error-icon {
  flex: none;
  color: var(--ob-warning);
  font-size: 14px;
}

.ai-message__error-notice {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-message__retry {
  height: 26px;
  flex: none;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: var(--ob-r-full);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
  font-size: 12px;
  font-weight: 650;
}

.ai-message__retry .f7-icons {
  font-size: 12px;
}

.ai-chat__composer {
  left: 0;
  right: 0;
  bottom: var(--ai-composer-bottom);
  min-height: 64px;
  padding: 8px max(var(--ob-page-x), calc((100vw - 760px) / 2 + var(--ob-page-x)))
    calc(10px + var(--ai-composer-safe-bottom));
  align-items: flex-end;
  border: 0;
  border-top: 1px solid var(--ob-line-1);
  border-radius: 0;
  background: var(--ob-bar-bg);
  box-shadow: none;
  backdrop-filter: var(--ob-blur-bar);
  -webkit-backdrop-filter: var(--ob-blur-bar);
}

.ai-chat__input {
  min-height: 44px;
  max-height: 120px;
  padding: 10px 16px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
  color: var(--ob-text-1);
  font-size: 16px;
  line-height: 22px;
}

.ai-chat__input:focus {
  border-color: var(--ob-line-2);
  background: var(--ob-fill-1);
}

.ai-chat__input::placeholder {
  color: var(--ob-text-4);
}

.ai-chat__send {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--ob-accent);
  color: var(--ob-on-accent);
  box-shadow: none;
}

.ai-chat__send .f7-icons {
  font-size: 22px;
}

.ai-chat__send:not(:disabled):hover,
.ai-chat__send:not(:disabled):focus-visible {
  transform: none;
  background: var(--ob-accent-press);
}

.ai-chat__send:active {
  transform: scale(var(--ob-press-scale));
}

@keyframes ob-ai-message-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes ob-ai-typing {
  0%, 60%, 100% { opacity: 0.25; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.gallery-back {
  color: var(--ob-text-1);
}

.gallery-navbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-navbar-title strong {
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 650;
  line-height: 20px;
}

.gallery-navbar-title small {
  margin-top: 1px;
  color: var(--ob-text-3);
  font-family: var(--ob-font-num);
  font-size: 10px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 400;
  line-height: 13px;
  white-space: nowrap;
}

.gallery-week-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.gallery-week-nav__button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--ob-text-1);
}

.gallery-week-nav__button .f7-icons,
.gallery-back .f7-icons {
  font-size: 17px;
}

.gallery-week-nav__button.is-disabled {
  color: var(--ob-text-4);
  opacity: 0.55;
}

.app-view[data-page="orange-gift-exhibition"] .app-header {
  min-height: calc(58px + var(--ob-safe-top));
  grid-template-columns: var(--ob-hit) minmax(0, 1fr) 64px;
}

.app-view[data-page="orange-gift-exhibition"] .page-content {
  padding-top: 0;
}

.gift-exhibition-root {
  width: 100%;
}

.gallery-page {
  width: 100%;
  padding: 16px 0 24px;
}

.gallery-summary-card {
  position: relative;
  min-height: 155px;
  overflow: hidden;
  padding: var(--ob-s4);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
}

.gallery-summary-card__glow {
  position: absolute;
  inset: 0;
  background: var(--ob-glow-accent);
  pointer-events: none;
}

.gallery-summary-card__content {
  position: relative;
  display: block;
}

.home-gallery-summary-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--ob-dur-instant) var(--ob-ease-standard),
    border-color var(--ob-dur-quick) var(--ob-ease-standard);
}

.home-gallery-summary-card:hover,
.home-gallery-summary-card:focus-visible {
  border-color: rgba(224, 181, 78, 0.34);
}

.home-gallery-summary-card:focus-visible {
  outline: 2px solid var(--ob-gold-400);
  outline-offset: 2px;
}

.home-gallery-summary-card:active {
  transform: scale(var(--ob-press-scale));
}

.gallery-summary-card__heading,
.gallery-summary-card__level,
.gallery-summary-card__progress-meta,
.gallery-summary-card__contributors {
  display: flex;
  align-items: center;
}

.gallery-summary-card__heading {
  justify-content: space-between;
  gap: var(--ob-s3);
}

.gallery-summary-card__level {
  align-items: baseline;
  gap: 6px;
}

.gallery-summary-card__level > span {
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.gallery-summary-card__level strong {
  color: var(--ob-gold-text);
  font-family: var(--ob-font-num);
  font-size: 28px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 700;
  line-height: 32px;
}

.gallery-summary-card__level small {
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.gallery-summary-card__status {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--ob-r-full);
  background: var(--ob-gold-soft);
  color: var(--ob-gold-text);
  font-size: 11px;
  font-weight: 650;
  line-height: 16px;
}

.gallery-summary-card__progress-meta {
  margin-top: 12px;
  justify-content: space-between;
  gap: var(--ob-s3);
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

.gallery-summary-card__progress-meta strong {
  flex: none;
  color: var(--ob-text-1);
  font-family: var(--ob-font-num);
  font-size: 14px;
  font-feature-settings: var(--ob-tnum);
  line-height: 18px;
}

.gallery-summary-card__track {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  display: block;
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-2);
}

.gallery-summary-card__track > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--ob-grad-gold);
}

.gallery-summary-card__contributors {
  margin-top: 14px;
  gap: var(--ob-s2);
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

.gallery-contributor-avatars {
  display: flex;
  flex: none;
  gap: 4px;
}

.gallery-contributor-avatar {
  width: 26px;
  height: 26px;
  margin-left: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-1);
  box-shadow: 0 0 0 2px var(--ob-surface-1);
  font-size: 10px;
}

.gallery-contributor-avatar img,
.gallery-gift-card__lighter img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-gift-grid {
  margin: var(--ob-s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ob-s2);
  list-style: none;
}

.gallery-gift-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.gallery-gift-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: #281c0f;
  color: var(--ob-gold-300);
}

.gallery-gift-card:nth-child(6n + 2) .gallery-gift-card__visual { background: #21182a; }
.gallery-gift-card:nth-child(6n + 3) .gallery-gift-card__visual { background: #13251a; }
.gallery-gift-card:nth-child(6n + 4) .gallery-gift-card__visual { background: #2a1818; }
.gallery-gift-card:nth-child(6n + 5) .gallery-gift-card__visual { background: #15202b; }
.gallery-gift-card:nth-child(6n + 6) .gallery-gift-card__visual { background: #2a220f; }

.gallery-gift-card__visual > img {
  width: 68%;
  height: 68%;
  display: block;
  object-fit: contain;
}

.gallery-gift-card__visual > .f7-icons {
  font-size: 28px;
}

.gallery-gift-card__visual.gift-effect-trigger::before,
.gallery-gift-card__visual.gift-effect-trigger::after {
  display: none;
}

.gallery-gift-card.is-unlighted .gallery-gift-card__visual > img {
  filter: grayscale(1);
  opacity: 0.45;
}

.gallery-gift-card__count {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 7px;
  border-radius: var(--ob-r-full);
  background: var(--ob-grad-gold);
  color: var(--ob-on-gold);
  font-family: var(--ob-font-num);
  font-size: 10px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 650;
  line-height: 13px;
}

.gallery-gift-card.is-unlighted .gallery-gift-card__count {
  background: rgba(0, 0, 0, 0.5);
  color: var(--ob-text-3);
}

.gallery-gift-card__lighter {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 20px;
  height: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-accent);
  color: #fff;
  box-shadow: 0 0 0 1.5px var(--ob-gold-400);
  font-size: 8px;
  transform: translateX(-50%);
}

.gallery-gift-card__copy {
  min-width: 0;
  min-height: 58px;
  padding: 6px 7px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-gift-card__copy > strong,
.gallery-gift-card__copy > small {
  width: 100%;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-gift-card__copy > strong {
  color: var(--ob-text-1);
  font-size: 11px;
  font-weight: 650;
  line-height: 15px;
}

.gallery-gift-card__price {
  margin-top: 1px;
  color: var(--ob-gold-text);
  font-family: var(--ob-font-num);
  font-size: 10px;
  font-feature-settings: var(--ob-tnum);
  font-weight: 650;
  line-height: 14px;
}

.gallery-gift-card__copy > small {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 9px;
  line-height: 13px;
}

.gallery-page__closing {
  margin: 14px 0 0;
  color: var(--ob-text-4);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

.gallery-page--skeleton .gallery-summary-card {
  min-height: 155px;
}

.gallery-skeleton__summary-title,
.gallery-skeleton__progress-label,
.gallery-skeleton__contributors {
  display: block;
}

.gallery-skeleton__summary-title { width: 52%; height: 28px; }
.gallery-skeleton__progress-label { width: 64%; height: 12px; margin-top: 18px; }
.gallery-skeleton__progress-track { width: 100%; height: 6px; margin-top: 10px; display: block; }
.gallery-skeleton__contributors { width: 74%; height: 22px; margin-top: 16px; }
.gallery-skeleton__gift-name { width: 76%; height: 10px; }
.gallery-skeleton__gift-price { width: 52%; height: 9px; margin-top: 5px; }
.gallery-skeleton__gift-user { width: 68%; height: 8px; margin-top: 5px; }

html[data-theme="light"] .gallery-gift-card__visual {
  background: #fff1df;
}

html[data-theme="light"] .gallery-gift-card:nth-child(6n + 2) .gallery-gift-card__visual { background: #f4ebff; }
html[data-theme="light"] .gallery-gift-card:nth-child(6n + 3) .gallery-gift-card__visual { background: #e9f7ee; }
html[data-theme="light"] .gallery-gift-card:nth-child(6n + 4) .gallery-gift-card__visual { background: #ffeded; }
html[data-theme="light"] .gallery-gift-card:nth-child(6n + 5) .gallery-gift-card__visual { background: #eaf3fb; }
html[data-theme="light"] .gallery-gift-card:nth-child(6n + 6) .gallery-gift-card__visual { background: #fff8dc; }

.gift-effect-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(66, 66, 66, 0.52);
}

.gift-effect-layer__lighter {
  position: absolute;
  top: clamp(76px, 14vh, 144px);
  left: 50%;
  z-index: 2;
  width: min(82vw, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.96);
  transition: opacity 240ms var(--ob-ease-standard), transform 320ms var(--ob-ease-enter);
  will-change: opacity, transform;
}

.gift-effect-layer__lighter.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.gift-effect-layer__gold-dust {
  position: absolute;
  top: 38px;
  left: 50%;
  z-index: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.gift-effect-layer__gold-dust i {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dust-size);
  height: var(--dust-size);
  border-radius: 50%;
  background: #ffe39a;
  box-shadow: 0 0 5px 1px rgba(255, 195, 65, 0.92);
  opacity: 0;
  animation: ob-gift-gold-dust var(--dust-duration) var(--dust-delay) ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes ob-gift-gold-dust {
  0%, 100% {
    opacity: 0;
    transform: translate(var(--dust-x), calc(var(--dust-y) + 6px)) scale(0.35);
  }
  36% {
    opacity: 1;
  }
  68% {
    opacity: 0.72;
    transform: translate(var(--dust-x), calc(var(--dust-y) - 5px)) scale(1.08);
  }
}

.gift-effect-layer__lighter-avatar {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--ob-surface-2);
  color: var(--ob-text-1);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.5), 0 14px 34px rgba(0, 0, 0, 0.42);
  font-size: 28px;
  font-weight: 700;
}

img.gift-effect-layer__lighter-avatar {
  display: block;
  object-fit: cover;
}

.gift-effect-layer__lighter-name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ob-r-full);
  background: rgba(15, 13, 11, 0.78);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-family: var(--ob-font-ui);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
  text-align: center;
  overflow-wrap: anywhere;
  backdrop-filter: var(--ob-blur-bar);
  -webkit-backdrop-filter: var(--ob-blur-bar);
}

@media (max-width: 360px) {
  .gallery-gift-grid {
    gap: 6px;
  }

  .gallery-gift-card__copy {
    padding-right: 5px;
    padding-left: 5px;
  }

  .gallery-gift-card__copy > strong {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-message__bubble,
  .ai-message__typing i,
  .gift-effect-layer__lighter,
  .gift-effect-layer__gold-dust i {
    animation: none;
    transition: none;
  }
}

/* V6 replay library: featured latest replay and grouped archive rows. */
.app-view[data-page="orange-replays"] .page-content {
  gap: 0;
  padding-top: 0;
}

.replay-v6-screen {
  padding: 14px 0 28px;
}

.replay-v6-search[hidden],
.replay-v6-featured[hidden],
.replay-v6-group[hidden],
.replay-v6-results[hidden],
.replay-v6-empty[hidden],
.replay-v6-group li[hidden] {
  display: none !important;
}

.replay-v6-search {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  gap: 8px;
}

.replay-v6-search__field {
  display: flex;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  flex: 1;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-fill-1);
}

.replay-v6-search__field > .f7-icons {
  flex: none;
  color: var(--ob-text-3);
  font-size: 17px;
}

.replay-v6-search__field input {
  min-width: 0;
  height: 100%;
  padding: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ob-text-1);
  font: 400 14px/20px var(--ob-font-ui);
}

.replay-v6-search__field input::placeholder {
  color: var(--ob-text-3);
  opacity: 1;
}

.replay-v6-search__field:focus-within {
  border-color: color-mix(in srgb, var(--ob-accent) 64%, var(--ob-line-1));
  box-shadow: 0 0 0 3px var(--ob-accent-soft);
}

.replay-v6-search__field button,
.replay-v6-refresh {
  border: 0;
  background: transparent;
}

.replay-v6-search__field button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  flex: none;
  place-items: center;
  color: var(--ob-text-3);
}

.replay-v6-search__field button[hidden] {
  display: none;
}

.replay-v6-search__field button .f7-icons {
  font-size: 17px;
}

.replay-v6-search form {
  margin: 0;
  flex: none;
}

.replay-v6-refresh {
  display: inline-flex;
  height: 42px;
  padding: 0 11px;
  align-items: center;
  gap: 5px;
  border-radius: var(--ob-r-md);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
  font: 600 12px/17px var(--ob-font-ui);
  white-space: nowrap;
}

.replay-v6-refresh .f7-icons {
  font-size: 15px;
}

.replay-v6-search-trigger.is-active {
  color: var(--ob-accent-text);
}

.replay-v6-featured {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: linear-gradient(140deg, #3a2410, #160f0a 80%);
  box-shadow: var(--ob-shadow-2);
  color: inherit;
  text-decoration: none;
}

.replay-v6-featured::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(10, 8, 6, 0.9) 88%);
  pointer-events: none;
}

.replay-v6-featured__media,
.replay-v6-featured__media > img,
.replay-v6-cover-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.replay-v6-featured__media > img,
.replay-v6-row__cover > img {
  z-index: 1;
  object-fit: cover;
}

.replay-v6-cover-fallback {
  display: grid;
  place-items: center;
  background: radial-gradient(80% 70% at 30% 20%, rgba(255, 246, 236, 0.07), transparent 60%);
  color: rgba(245, 241, 236, 0.2);
}

.replay-v6-cover-fallback .f7-icons {
  font-size: 26px;
}

.replay-v6-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}

.replay-v6-play.is-large {
  width: 46px;
  height: 46px;
}

.replay-v6-play .f7-icons {
  margin-left: 1px;
  font-size: 13px;
}

.replay-v6-play.is-large .f7-icons {
  font-size: 20px;
}

.replay-v6-duration {
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font: 500 10px/13px var(--ob-font-num);
  font-feature-settings: "tnum" 1;
  backdrop-filter: blur(4px);
}

.replay-v6-featured .replay-v6-duration {
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 15px;
}

.replay-v6-latest {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  height: 23px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ob-r-full);
  background: rgba(40, 35, 31, 0.76);
  color: rgba(245, 241, 236, 0.76);
  font: 600 10px/21px var(--ob-font-ui);
  backdrop-filter: blur(6px);
}

.replay-v6-featured__copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 28px 14px 12px;
  pointer-events: none;
}

.replay-v6-featured__copy strong,
.replay-v6-featured__copy small {
  display: block;
}

.replay-v6-featured__copy strong {
  overflow: hidden;
  padding-right: 82px;
  color: #f5f1ec;
  font: 600 16px/22px var(--ob-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-v6-featured__copy small {
  overflow: hidden;
  margin-top: 3px;
  padding-right: 82px;
  color: rgba(245, 241, 236, 0.62);
  font: 400 12px/17px var(--ob-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-v6-featured.is-search-match {
  outline: 2px solid var(--ob-accent);
  outline-offset: 2px;
}

.replay-v6-results {
  margin: 14px 0 0;
  color: var(--ob-text-3);
  font: 500 12px/17px var(--ob-font-ui);
}

.replay-v6-groups {
  display: flex;
  flex-direction: column;
}

.replay-v6-group {
  margin-top: 24px;
}

.replay-v6-group > h2 {
  margin: 0 0 8px;
  color: var(--ob-text-3);
  font: 600 13px/18px var(--ob-font-ui);
}

.replay-v6-group > ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  list-style: none;
}

.replay-v6-group li {
  position: relative;
  min-height: 89px;
  content-visibility: auto;
  contain-intrinsic-size: 89px;
}

.replay-v6-group li + li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 148px;
  height: 1px;
  background: var(--ob-line-1);
}

.replay-v6-group li > a {
  display: flex;
  min-width: 0;
  min-height: 89px;
  padding: 10px 14px;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.replay-v6-row__cover {
  position: relative;
  overflow: hidden;
  display: block;
  width: 122px;
  height: 69px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(140deg, #241a2e, #120d18 80%);
}

.replay-v6-row__cover.is-variant-2 {
  background: linear-gradient(140deg, #13291b, #0a140e 80%);
}

.replay-v6-row__cover.is-variant-3 {
  background: linear-gradient(140deg, #2e1a1a, #160d0d 80%);
}

.replay-v6-row__cover.is-variant-4 {
  background: linear-gradient(140deg, #1a2430, #0d1218 80%);
}

.replay-v6-row__cover > img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: block;
}

.replay-v6-row__cover.is-image-error > img,
.replay-v6-featured__media.is-image-error > img {
  display: none;
}

.replay-v6-row__copy {
  min-width: 0;
  flex: 1;
}

.replay-v6-row__copy strong,
.replay-v6-row__copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.replay-v6-row__copy strong {
  color: var(--ob-text-1);
  font: 600 15px/21px var(--ob-font-ui);
}

.replay-v6-row__copy strong.is-special {
  color: var(--ob-gold-text);
}

.replay-v6-row__copy small {
  margin-top: 4px;
  color: var(--ob-text-3);
  font: 400 12px/17px var(--ob-font-ui);
}

.replay-v6-row__chevron {
  flex: none;
  color: var(--ob-text-4);
  font-size: 16px;
}

.replay-v6-empty {
  padding: 52px 16px 36px;
  color: var(--ob-text-3);
  text-align: center;
}

.replay-v6-empty.is-page-empty {
  min-height: 340px;
}

.replay-v6-empty .f7-icons {
  color: var(--ob-text-4);
  font-size: 30px;
}

.replay-v6-empty p {
  margin: 8px 0 0;
  font: 400 14px/20px var(--ob-font-ui);
}

.replay-v6-footnote {
  margin: 16px 0 0;
  color: var(--ob-text-4);
  font: 400 12px/17px var(--ob-font-ui);
  text-align: center;
}

@media (max-width: 360px) {
  .replay-v6-search {
    align-items: stretch;
    flex-direction: column;
  }

  .replay-v6-search form,
  .replay-v6-refresh {
    width: 100%;
  }

  .replay-v6-refresh {
    justify-content: center;
  }

  .replay-v6-row__cover {
    width: 108px;
    height: 61px;
  }

  .replay-v6-group li,
  .replay-v6-group li > a {
    min-height: 81px;
  }

  .replay-v6-group li + li::before {
    left: 134px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay-v6-featured,
  .replay-v6-group li > a,
  .replay-v6-search-trigger {
    transition: none;
  }
}

/* Feedback */
.empty-state {
  padding: var(--ob-s7) var(--ob-s4);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  color: var(--ob-text-2);
}

.alert-block {
  padding: 12px 14px;
  border-radius: var(--ob-r-sm);
  font-size: 14px;
}

.alert-block-success {
  border-color: color-mix(in srgb, var(--ob-success) 35%, transparent);
  background: color-mix(in srgb, var(--ob-success) 12%, transparent);
}

.alert-block-info {
  border-color: color-mix(in srgb, var(--ob-info) 35%, transparent);
  background: color-mix(in srgb, var(--ob-info) 12%, transparent);
}

.alert-block-error {
  border-color: color-mix(in srgb, var(--ob-danger) 35%, transparent);
  background: color-mix(in srgb, var(--ob-danger) 12%, transparent);
}

.toast {
  bottom: calc(var(--ob-tabbar-h) + var(--ob-safe-bottom) + var(--ob-s4));
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-surface-3);
  color: var(--ob-text-1);
  box-shadow: var(--ob-shadow-3);
}

.user-card--skeleton,
.like-leaderboard__card--skeleton,
.profile-panel--skeleton,
.profile-link-card--skeleton,
.park-link--skeleton {
  border-color: var(--ob-line-1);
  background: var(--ob-surface-1);
  box-shadow: none;
}

.user-avatar--skeleton,
.user-skeleton,
.leaderboard-skeleton,
.profile-skeleton__icon,
.profile-skeleton__line,
.profile-stat-skeleton,
.developer-gift-effects__skeleton-icon,
.developer-gift-effects__skeleton-name,
.developer-gift-effects__skeleton-meta {
  background-image: linear-gradient(90deg, var(--ob-fill-1), var(--ob-fill-3), var(--ob-fill-1));
}

/* Light theme fixes for hard-coded media and browser controls */
html[data-theme="light"] .field__control-wrap--date::after {
  filter: brightness(0.65) saturate(1.35);
}

html[data-theme="light"] .calendar-sheet__panel,
html[data-theme="light"] .filter-popover__panel {
  box-shadow: var(--ob-shadow-3);
}

html[data-theme="light"] .welcome-hero {
  color-scheme: dark;
}

@media (max-width: 720px) {
  .app-view,
  .app-view[data-page="welcome"] {
    --app-view-x-padding: var(--ob-page-x);
    --app-view-top-padding: 0px;
    padding-top: 0;
  }

  .app-view:not([data-page="welcome"]) {
    padding-right: var(--ob-page-x);
    padding-left: var(--ob-page-x);
  }

  .app-header {
    gap: var(--ob-s2);
    padding-right: var(--ob-page-x);
    padding-bottom: 0;
    padding-left: var(--ob-page-x);
  }

  .app-view--tab-root .app-header {
    padding-bottom: var(--ob-s3);
  }

  .tab-nav {
    bottom: 0;
  }

  .tab-nav__link {
    padding: 3px 0 2px;
  }

  .filter-popover {
    align-items: flex-end;
    padding: 0;
  }

  .filter-popover__panel {
    width: 100%;
    max-height: 78dvh;
    overflow: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--ob-r-xl) var(--ob-r-xl) 0 0;
    padding-bottom: calc(var(--ob-s4) + var(--ob-safe-bottom));
  }

  .profile-panel .avatar,
  .profile-panel .avatar img {
    width: 64px;
    height: 64px;
  }

  .profile-panel .avatar {
    flex-basis: 64px;
  }

  .profile-summary .info h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .gift-exhibition__item {
    border-radius: var(--ob-r-md);
  }
}

@media (max-width: 360px) {
  .profile-link-track {
    gap: 6px;
  }

  .profile-link-card {
    padding-right: 6px;
    padding-left: 6px;
  }

  .theme-segmented button {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 12px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tab-nav__link:not(.is-active):hover {
    color: var(--ob-text-2);
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header,
  .tab-nav__glass,
  .header-search form {
    background: var(--ob-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

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

/* Design specification v5: stream detail and community games. */
.ghost-link--icon.js-history-back::before {
  display: none;
}

.ghost-link--icon {
  display: grid;
  place-items: center;
}

.ghost-link--icon .f7-icons,
.game-share-button .f7-icons {
  font-size: 22px;
}

.app-header__title-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.app-header__title-stack strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--ob-text-1);
  font-size: 17px;
  font-weight: 650;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__title-stack small {
  overflow: hidden;
  max-width: 100%;
  margin-top: 1px;
  color: var(--ob-text-3);
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Game catalog */
.app-view[data-page="games"] .page-content,
.app-view[data-page="game-detail"] .page-content {
  padding-top: 14px;
}

.games-catalog,
.game-detail-screen {
  display: flex;
  flex-direction: column;
}

.games-catalog {
  gap: 28px;
}

.game-feature-card,
.game-detail-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 246, 236, 0.1);
  border-radius: var(--ob-r-lg);
  background: linear-gradient(165deg, #221a2b 0%, #1a1512 55%, #171412 100%);
  color: #f5f1ec;
  box-shadow: var(--ob-shadow-2);
  color-scheme: dark;
}

.game-feature-card {
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--ob-dur-instant) var(--ob-ease-standard), border-color var(--ob-dur-quick) var(--ob-ease-standard);
}

.game-feature-card:hover,
.game-feature-card:focus-visible {
  border-color: rgba(255, 185, 138, 0.25);
}

.game-feature-card:active,
.game-feature-card.is-nav-pressing {
  transform: scale(0.99);
}

.game-feature-card__shine,
.game-detail-hero__shine {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 236, 0.16), transparent);
}

.game-feature-card__glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.14), transparent 70%);
  pointer-events: none;
}

.game-feature-card__content {
  position: relative;
  display: flex;
  padding: 18px 18px 16px;
  flex-direction: column;
}

.game-feature-card__lead {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.game-feature-card__icon,
.game-detail-hero__icon {
  position: relative;
  overflow: hidden;
  display: grid;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 246, 236, 0.06);
  background: linear-gradient(145deg, #332414, #1d1420);
  box-shadow: inset 0 1px 0 rgba(255, 246, 236, 0.14), 0 6px 14px rgba(0, 0, 0, 0.35);
  color: var(--ob-orange-300);
}

.game-feature-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.game-feature-card__icon img,
.game-detail-hero__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: auto;
}

.game-feature-card__status {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border: 2.5px solid #1b1514;
  border-radius: 50%;
  background: var(--ob-accent);
}

.game-feature-card__copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.game-feature-card__copy strong {
  overflow: hidden;
  color: #f5f1ec;
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-feature-card__copy > span {
  margin-top: 3px;
  color: #9c948a;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
}

.game-feature-card__copy small {
  margin-top: 7px;
  color: #6e675e;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.04em;
}

.game-feature-card__footer {
  display: flex;
  min-width: 0;
  margin-top: 16px;
  align-items: center;
  gap: 12px;
}

.game-feature-card__credits {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  color: #6e675e;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-feature-card__cta {
  height: 34px;
  padding: 0 18px;
  flex: none;
  border-radius: var(--ob-r-full);
  background: var(--ob-accent);
  color: var(--ob-on-accent);
  box-shadow: 0 4px 12px rgba(255, 107, 26, 0.3);
  font-size: 13px;
  font-weight: 650;
  line-height: 34px;
}

.game-more-section,
.game-score-section,
.game-guide-section {
  display: flex;
  flex-direction: column;
}

.game-more-section h2,
.game-section-heading h2 {
  margin: 0;
  color: var(--ob-text-1);
  font-size: 17px;
  font-weight: 650;
  line-height: 24px;
}

.game-more-section h2 {
  margin-bottom: 10px;
}

.game-submission-card {
  display: flex;
  padding: 22px 16px;
  flex-direction: column;
  align-items: center;
  border: 1px dashed var(--ob-line-2);
  border-radius: var(--ob-r-lg);
  text-align: center;
}

.game-submission-card .f7-icons {
  color: var(--ob-text-4);
  font-size: 26px;
}

.game-submission-card strong {
  margin-top: 8px;
  color: var(--ob-text-2);
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
}

.game-submission-card span {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

/* Game detail */
.game-detail-screen {
  gap: 26px;
}

.game-detail-hero {
  padding: 22px 18px 18px;
}

.game-detail-hero__glow {
  position: absolute;
  inset: 0;
  background: var(--ob-glow-accent);
  pointer-events: none;
}

.game-detail-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.game-detail-hero__icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 236, 0.14), 0 10px 24px rgba(0, 0, 0, 0.4);
}

.game-detail-hero h1 {
  margin: 14px 0 0;
  color: #f5f1ec;
  font-size: 21px;
  font-weight: 700;
  line-height: 28px;
}

.game-detail-hero__meta {
  margin: 5px 0 0;
  color: #6e675e;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.08em;
}

.game-detail-hero__credits {
  margin: 8px 0 0;
  color: #9c948a;
  font-size: 12px;
  line-height: 16px;
}

.game-detail-hero__play.btn-primary {
  min-width: 176px;
  height: 46px;
  margin-top: 18px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--ob-r-full);
  background: var(--ob-accent);
  color: var(--ob-on-accent);
  box-shadow: 0 6px 16px rgba(255, 107, 26, 0.3);
  font-size: 15px;
  font-weight: 650;
}

.game-detail-hero__play .f7-icons {
  font-size: 18px;
}

.game-section-heading {
  display: flex;
  margin-bottom: 10px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.game-section-heading > span {
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.game-score-group,
.game-guide-card {
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.game-score-row {
  display: flex;
  min-width: 0;
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
  background: var(--ob-accent-soft);
}

.game-score-row__rank {
  width: 30px;
  flex: none;
  color: var(--ob-accent-text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.game-score-row__avatar {
  overflow: hidden;
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 650;
}

.game-score-row__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.game-score-row__name {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-score-row__score {
  display: flex;
  flex: none;
  align-items: baseline;
}

.game-score-row__score strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.game-score-row__score small {
  margin-left: 3px;
  color: var(--ob-text-3);
  font-size: 11px;
}

.game-score-section__hint,
.session-panel-footnote,
.session-board-footnote {
  margin: 12px 0 0;
  color: var(--ob-text-4);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

.game-guide-item {
  position: relative;
  padding: 14px;
}

.game-guide-item + .game-guide-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 14px;
  height: 1px;
  background: var(--ob-line-1);
}

.game-guide-item h3 {
  margin: 0;
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 650;
  line-height: 21px;
}

.game-guide-item p {
  margin: 6px 0 0;
  color: var(--ob-text-2);
  font-size: 14px;
  line-height: 22px;
}

/* Stream detail */
.app-view[data-page="profile-session-detail"] {
  padding-right: 0;
  padding-left: 0;
}

.app-view[data-page="profile-session-detail"] .page-content {
  gap: 0;
  padding-top: 0;
}

.profile-session-detail-content {
  display: flex;
  gap: 0;
  flex-direction: column;
}

.replay-panel--detail.replay-panel--with-player {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.replay-card--detail {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.replay-card--detail .replay-player,
.replay-card--detail .replay-player__surface {
  border-radius: 0;
}

.replay-card--detail .replay-player__surface iframe {
  z-index: 1;
}

.replay-player__duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--ob-r-xs);
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  pointer-events: none;
}

.replay-card--detail .replay-card__body {
  padding: 14px var(--ob-page-x) 0;
}

.replay-card--detail .replay-card__title-row {
  gap: 10px;
  align-items: flex-start;
}

.replay-card__copy {
  min-width: 0;
  flex: 1;
}

.replay-card--detail .replay-card__title {
  color: var(--ob-text-1);
  font-size: 17px;
  font-weight: 650;
  line-height: 24px;
}

.replay-card--detail .replay-card__meta {
  margin-top: 4px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.replay-card--detail .replay-card__meta a {
  color: var(--ob-accent-text);
  text-decoration: none;
}

.replay-card__meta-item + .replay-card__meta-item::before {
  content: " · ";
  color: var(--ob-text-4);
}

.replay-card__badge {
  height: 24px;
  margin-top: 3px;
  padding: 0 9px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--ob-accent) 24%, transparent);
  border-radius: var(--ob-r-full);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
}

.replay-panel--detail:not(.replay-panel--with-player) {
  margin: 16px var(--ob-page-x) 0;
  padding: 28px 16px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
}

.replay-panel--detail:not(.replay-panel--with-player) .empty-hint {
  margin: 0;
}

.replay-panel--skeleton .session-detail-skeleton__video {
  min-height: 0;
  border-radius: 0;
}

.replay-panel--skeleton .session-detail-skeleton__replay-copy {
  padding: 14px var(--ob-page-x) 0;
}

.session-tabs--detail {
  margin-top: 14px;
  padding: 0 var(--ob-page-x) 24px;
}

.session-tabs--detail .session-tabs__nav {
  display: grid;
  margin: 0;
  padding: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-2);
}

.session-tabs--detail .session-tab-btn {
  overflow: hidden;
  min-width: 0;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 550;
  line-height: 36px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-tabs--detail .session-tab-btn.is-active {
  background: var(--ob-seg-thumb);
  color: var(--ob-accent-text);
  box-shadow: var(--ob-shadow-1);
}

.session-tabs--detail .session-tabs__subnav {
  display: grid;
  margin: 10px 0 0;
  padding: 4px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.session-tabs--skeleton .session-detail-skeleton__tab,
.session-tabs--skeleton .session-detail-skeleton__subtab {
  width: 100%;
}

.session-tabs--skeleton .session-detail-skeleton__tab {
  height: 36px;
}

.session-tabs--skeleton .session-detail-skeleton__subtab {
  height: 52px;
}

.session-tabs--detail .session-subtab-btn {
  display: flex;
  min-width: 0;
  min-height: 52px;
  padding: 6px 2px 5px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ob-text-3);
}

.session-subtab-btn__value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  text-overflow: ellipsis;
}

.session-subtab-btn__label {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.session-tabs--detail .session-subtab-btn.is-active {
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
  box-shadow: none;
}

.session-tabs--detail .session-subtab-btn.is-active .session-subtab-btn__value {
  color: var(--ob-accent-text);
}

.session-tab-panel {
  padding-top: 12px;
}

.session-tab-panel .event-log {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.session-tab-panel .event-log > li {
  position: relative;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.session-tab-panel .event-log > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 14px;
  height: 1px;
  background: var(--ob-line-1);
}

.session-tab-panel .event-log--all-comments > li + li::before {
  left: 56px;
}

.session-tab-panel .event-log__time {
  color: var(--ob-text-3);
  font-family: var(--ob-font-num);
  font-size: 11px;
  line-height: 15px;
  font-feature-settings: var(--ob-tnum);
}

.session-tab-panel .event-log__content {
  margin-top: 4px;
  color: var(--ob-text-1);
  font-size: 15px;
  line-height: 21px;
}

.session-tab-panel .event-log__meta {
  margin-top: 2px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.session-tab-panel .event-log__avatar {
  width: 32px;
  height: 32px;
}

.session-tab-panel .event-log__name {
  color: var(--ob-text-2);
  font-size: 13px;
  line-height: 18px;
}

.session-tab-panel .event-log--mine-like > li {
  min-height: 62px;
  padding-left: 44px;
}

.session-tab-panel .event-log--mine-like > li::after {
  content: "hand_thumbsup_fill";
  position: absolute;
  top: 20px;
  left: 16px;
  color: var(--ob-accent-hi);
  font-family: "Framework7 Icons";
  font-size: 16px;
}

.session-tab-panel .event-log--mine-emoji .event-log__item--emoji,
.session-tab-panel .event-log--mine-gift .event-log__item--gift {
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-event-empty {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.session-event-empty .f7-icons {
  color: var(--ob-text-4);
  font-size: 26px;
}

/* Stream leaderboard, one real board at a time. */
.session-leaderboard {
  display: block;
}

.session-leaderboard__tabs {
  display: flex;
  overflow-x: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-surface-2);
  scrollbar-width: none;
}

.session-leaderboard__tabs::-webkit-scrollbar {
  display: none;
}

.session-leaderboard__tab {
  min-height: 32px;
  padding: 0 12px;
  flex: none;
  border: 0;
  border-radius: var(--ob-r-full);
  background: transparent;
  color: var(--ob-text-2);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.session-leaderboard__tab.is-active {
  background: var(--ob-seg-thumb);
  color: var(--ob-accent-text);
  box-shadow: var(--ob-shadow-1);
}

.session-leaderboard__block {
  overflow: hidden;
  display: none;
  padding: 0;
  gap: 0;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
  box-shadow: var(--ob-shadow-1);
}

.session-leaderboard__block.is-active {
  display: block;
}

.session-board-podium {
  display: grid;
  min-height: 190px;
  padding: 28px 10px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
}

.session-board-podium__user {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.session-board-podium__user.is-first {
  align-self: start;
}

.session-board-podium__avatar-wrap {
  position: relative;
}

.session-board-podium__avatar {
  overflow: hidden;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid var(--ob-line-2);
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-2);
  font-size: 14px;
  font-weight: 700;
}

.session-board-podium__user.is-first .session-board-podium__avatar {
  width: 64px;
  height: 64px;
  border-color: color-mix(in srgb, var(--ob-gold-400) 72%, transparent);
  box-shadow: 0 0 0 3px var(--ob-gold-soft);
}

.session-board-podium__avatar img,
.session-board-row__avatar img,
.session-board-self-row__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.session-board-podium__rank {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--ob-surface-1);
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-2);
  font-size: 10px;
  font-weight: 700;
}

.session-board-podium__user.is-first .session-board-podium__rank {
  width: 22px;
  height: 22px;
  background: var(--ob-grad-gold);
  color: var(--ob-on-gold);
}

.session-board-podium__name {
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  color: var(--ob-text-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-board-podium__user.is-self .session-board-podium__name {
  color: var(--ob-accent-text);
}

.session-board-podium__score {
  display: flex;
  margin-top: 2px;
  align-items: baseline;
  gap: 2px;
}

.session-board-podium__score strong {
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.session-board-podium__user.is-first .session-board-podium__score strong {
  color: var(--ob-gold-text);
  font-size: 20px;
}

.session-board-podium__score small,
.session-board-row__score small,
.session-board-self-row__score small {
  color: var(--ob-text-3);
  font-size: 11px;
  line-height: 14px;
}

.session-board-rest {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ob-line-1);
}

.session-board-row,
.session-board-self-row {
  display: flex;
  min-width: 0;
  padding: 10px 14px;
  align-items: center;
  gap: 10px;
}

.session-board-row + .session-board-row {
  border-top: 1px solid var(--ob-line-1);
}

.session-board-row.is-self,
.session-board-self-row {
  background: var(--ob-accent-soft);
}

.session-board-row__rank,
.session-board-self-row__rank {
  width: 28px;
  flex: none;
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.session-board-self-row__rank {
  color: var(--ob-accent-text);
}

.session-board-row__avatar,
.session-board-self-row__avatar {
  overflow: hidden;
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--ob-surface-3);
  color: var(--ob-text-2);
  font-size: 12px;
  font-weight: 650;
}

.session-board-row__name,
.session-board-self-row__meta {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.session-board-row__name,
.session-board-self-row__meta strong {
  color: var(--ob-text-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.session-board-self-row__meta {
  display: flex;
  flex-direction: column;
}

.session-board-self-row__meta small {
  overflow: hidden;
  color: var(--ob-text-3);
  font-size: 11px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-board-row__score,
.session-board-self-row__score {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 3px;
}

.session-board-row__score strong,
.session-board-self-row__score strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

.session-board-footnote {
  padding: 0 14px 14px;
}

@media (max-width: 360px) {
  .game-feature-card__content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .game-feature-card__lead {
    gap: 12px;
  }

  .game-feature-card__icon {
    width: 64px;
    height: 64px;
  }

  .game-feature-card__copy strong {
    font-size: 17px;
  }

  .game-feature-card__copy > span {
    font-size: 12px;
  }

  .session-tabs--detail .session-tab-btn {
    padding-right: 2px;
    padding-left: 2px;
    font-size: 12px;
  }

  .session-board-podium {
    padding-right: 4px;
    padding-left: 4px;
  }
}

/* --------------------------------------------------------------------------
   OrangeBao V6: VIP mail, watched streams and Shiqijun album
   -------------------------------------------------------------------------- */

/* VIP mail */
.app-view[data-page="vip-email"] .page-content {
  gap: 0;
}

.vip-mail-screen {
  position: relative;
  min-height: calc(100dvh - var(--app-header-height, 52px));
  padding: 16px 0 32px;
}

.vip-mail-message {
  display: flex;
  margin-bottom: 12px;
  padding: 10px 12px;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-sm);
  background: var(--ob-fill-1);
  color: var(--ob-text-2);
  font-size: 13px;
  line-height: 18px;
}

.vip-mail-message .f7-icons {
  margin-top: 1px;
  flex: none;
  color: var(--ob-text-3);
  font-size: 17px;
}

.vip-mail-message.is-error {
  border-color: color-mix(in srgb, var(--ob-danger) 30%, transparent);
  background: color-mix(in srgb, var(--ob-danger) 8%, var(--ob-surface-1));
}

.vip-mail-message.is-error .f7-icons {
  color: var(--ob-danger);
}

.vip-mail-message.is-success .f7-icons {
  color: var(--ob-success);
}

.vip-mail-intro,
.vip-mail-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(224, 181, 78, 0.34);
  border-radius: var(--ob-r-lg);
  background: linear-gradient(150deg, #2e2410 0%, #1c160e 52%, #171412 100%);
  box-shadow: var(--ob-shadow-2);
}

.vip-mail-intro {
  padding: 18px;
}

.vip-mail-intro__topline,
.vip-mail-card__topline {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 222, 156, 0.42), transparent);
}

.vip-mail-intro__eyebrow,
.vip-mail-card__brand {
  color: #e0b54e;
  font-size: 11px;
  font-weight: 650;
  line-height: 15px;
  letter-spacing: 0.2em;
}

.vip-mail-intro h1 {
  margin: 6px 0 0;
  color: #f5f1ec;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.vip-mail-intro p {
  max-width: 32em;
  margin: 4px 0 0;
  color: rgba(245, 241, 236, 0.62);
  font-size: 13px;
  line-height: 19px;
}

.vip-mail-create,
.vip-mail-settings {
  margin-top: 24px;
}

.vip-mail-create > h2,
.vip-mail-settings > h2 {
  margin: 0 0 9px;
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.vip-mail-create__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.vip-mail-field {
  display: flex;
  flex-direction: column;
}

.vip-mail-field > span:first-child {
  margin-bottom: 6px;
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.vip-mail-field small {
  margin-top: 6px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.vip-mail-alias-input,
.vip-mail-forward-input {
  display: flex;
  height: 48px;
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-sm);
  background: var(--ob-fill-1);
  transition: border-color var(--ob-dur-quick) var(--ob-ease-standard), background var(--ob-dur-quick) var(--ob-ease-standard);
}

.vip-mail-alias-input:focus-within,
.vip-mail-forward-input:focus-within {
  border-color: var(--ob-accent);
  background: var(--ob-surface-2);
}

.vip-mail-alias-input:has(input[aria-invalid="true"]),
.vip-mail-forward-input:has(input[aria-invalid="true"]) {
  border-color: var(--ob-danger);
}

.vip-mail-alias-input input,
.vip-mail-forward-input input {
  min-width: 0;
  height: 100%;
  padding: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ob-text-1);
  font: 500 16px/22px var(--ob-font-ui);
}

.vip-mail-alias-input b {
  flex: none;
  color: var(--ob-gold-text);
  font-size: 15px;
  font-weight: 550;
}

.vip-mail-forward-input .f7-icons {
  flex: none;
  color: var(--ob-text-3);
  font-size: 18px;
}

.vip-mail-create__submit.btn-primary {
  width: 100%;
  min-height: 48px;
  border-radius: var(--ob-r-full);
}

.vip-mail-create__submit:disabled {
  opacity: 0.42;
  pointer-events: none;
}

.vip-mail-create__legal {
  margin: -2px 0 0;
  color: var(--ob-text-4);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

.vip-mail-card {
  padding: 20px 20px 18px;
}

.vip-mail-card::after {
  content: "";
  position: absolute;
  top: -48px;
  right: -42px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 181, 78, 0.14), transparent 70%);
  pointer-events: none;
}

.vip-mail-card__watermark {
  position: absolute;
  right: 12px;
  bottom: -25px;
  color: rgba(246, 222, 156, 0.045);
  font: 700 108px/1 var(--ob-font-num);
  letter-spacing: -0.05em;
  pointer-events: none;
}

.vip-mail-card__header,
.vip-mail-card__footer,
.vip-mail-card__address-block {
  position: relative;
  z-index: 1;
}

.vip-mail-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vip-mail-card__status {
  display: inline-flex;
  height: 22px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(224, 181, 78, 0.4);
  border-radius: var(--ob-r-full);
  color: #e0b54e;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}

.vip-mail-card__status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ob-success);
}

.vip-mail-card__status.is-error {
  color: var(--ob-danger);
}

.vip-mail-card__status.is-error > span {
  background: currentColor;
}

.vip-mail-card__address-block {
  margin-top: 22px;
}

.vip-mail-card__address-block > span {
  display: block;
  color: rgba(245, 241, 236, 0.52);
  font-size: 12px;
  line-height: 16px;
}

.vip-mail-card__address-block > div {
  display: flex;
  min-width: 0;
  margin-top: 4px;
  align-items: center;
  gap: 9px;
}

.vip-mail-card__address-block strong {
  overflow-wrap: anywhere;
  color: #f6de9c;
  font-size: clamp(19px, 6vw, 24px);
  font-weight: 700;
  line-height: 32px;
}

.vip-mail-card__address-block button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 222, 156, 0.12);
  color: #e0b54e;
}

.vip-mail-card__address-block button .f7-icons {
  font-size: 14px;
}

.vip-mail-card__footer {
  display: flex;
  margin-top: 20px;
  padding-top: 12px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(246, 222, 156, 0.12);
  color: rgba(245, 241, 236, 0.56);
  font-size: 12px;
  line-height: 16px;
}

.vip-mail-card__footer b {
  margin-left: 4px;
  color: #f6de9c;
  font-weight: 650;
}

.vip-mail-settings__group {
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
}

.vip-mail-settings__row {
  position: relative;
  display: flex;
  min-height: 64px;
  padding: 8px 14px;
  align-items: center;
  gap: 12px;
}

.vip-mail-settings__row + .vip-mail-settings__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 64px;
  height: 1px;
  background: var(--ob-line-1);
}

.vip-mail-settings__icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: var(--ob-r-sm);
  background: var(--ob-gold-soft);
  color: var(--ob-gold-text);
}

.vip-mail-settings__icon .f7-icons {
  font-size: 19px;
}

.vip-mail-settings__copy {
  min-width: 0;
  flex: 1;
}

.vip-mail-settings__copy strong,
.vip-mail-settings__copy small {
  display: block;
}

.vip-mail-settings__copy strong {
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 550;
  line-height: 21px;
}

.vip-mail-settings__copy small {
  overflow: hidden;
  margin-top: 1px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-mail-settings > p {
  margin: 8px 0 0;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 18px;
}

.vip-mail-layer[hidden] {
  display: none !important;
}

.vip-mail-layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  padding: 10px;
  align-items: flex-end;
  justify-content: center;
  background: var(--ob-scrim);
}

.vip-mail-sheet {
  overflow: hidden;
  width: min(100%, 430px);
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-xl);
  background: var(--ob-surface-2);
  box-shadow: var(--ob-shadow-3);
}

.vip-mail-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 4px;
  border-radius: var(--ob-r-full);
  background: var(--ob-line-2);
}

.vip-mail-sheet h2 {
  margin: 8px 16px 0;
  font-size: 17px;
  line-height: 24px;
  text-align: center;
}

.vip-mail-sheet > p {
  margin: 8px 16px 13px;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.vip-mail-sheet > button {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--ob-line-1);
  background: transparent;
  color: var(--ob-text-1);
  font-size: 16px;
  font-weight: 550;
}

.vip-mail-sheet > button.is-danger,
.vip-mail-dialog button.is-danger {
  color: var(--ob-danger);
}

.vip-mail-sheet > .vip-mail-sheet__cancel {
  border-top-width: 6px;
  border-top-color: var(--ob-bg);
  color: var(--ob-text-2);
  font-weight: 650;
}

.vip-mail-layer--dialog {
  padding: 20px;
  align-items: center;
}

.vip-mail-dialog {
  width: min(100%, 330px);
  padding-top: 18px;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-2);
  box-shadow: var(--ob-shadow-3);
  text-align: center;
}

.vip-mail-dialog h2 {
  margin: 0 18px;
  font-size: 17px;
  line-height: 24px;
}

.vip-mail-dialog p {
  margin: 8px 18px 17px;
  color: var(--ob-text-2);
  font-size: 13px;
  line-height: 19px;
}

.vip-mail-dialog > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ob-line-1);
}

.vip-mail-dialog form {
  margin: 0;
  border-left: 1px solid var(--ob-line-1);
}

.vip-mail-dialog button {
  width: 100%;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ob-accent-text);
  font-size: 14px;
  font-weight: 600;
}

body.vip-mail-layer-open {
  overflow: hidden;
}

.vip-mail-toast {
  z-index: 120;
}

/* Watched streams */
.watched-streams-screen {
  position: relative;
  padding-bottom: 24px;
}

.watched-summary {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 82px;
  padding: 14px 16px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-lg);
  background: var(--ob-surface-1);
}

.watched-summary__glow {
  position: absolute;
  inset: 0;
  background: var(--ob-glow-accent);
  pointer-events: none;
}

.watched-summary__stat,
.watched-summary > p {
  position: relative;
}

.watched-summary__stat > span {
  display: block;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

.watched-summary__stat strong {
  color: var(--ob-text-1);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
}

.watched-summary__stat.is-primary strong {
  color: var(--ob-accent-hi);
  font-size: 30px;
  line-height: 34px;
}

.watched-summary__stat small {
  margin-left: 3px;
  color: var(--ob-text-2);
  font-size: 13px;
  font-weight: 600;
}

.watched-summary > p {
  margin: 0 0 2px auto;
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
  text-align: right;
}

.watched-filter-row {
  display: flex;
  overflow-x: auto;
  margin: 12px calc(-1 * var(--ob-page-x)) 0;
  padding: 0 var(--ob-page-x);
  gap: 8px;
  scrollbar-width: none;
}

.watched-filter-row::-webkit-scrollbar {
  display: none;
}

.watched-filter-row button {
  display: inline-flex;
  min-width: 60px;
  height: 34px;
  padding: 0 14px;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
  color: var(--ob-text-2);
  font-size: 12px;
  font-weight: 550;
}

.watched-filter-row button.is-active {
  border-color: var(--ob-accent);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
}

.watched-filter-row button span {
  font-size: 12px;
  font-weight: 650;
}

.watched-month-input {
  position: fixed;
  top: 52px;
  right: 12px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

[data-session-month-trigger].is-active {
  color: var(--ob-accent-text);
}

.watched-streams-group {
  margin-top: 24px;
}

.watched-streams-group[hidden] {
  display: none;
}

.watched-streams-group > h2 {
  margin: 0 0 8px;
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.watched-streams-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: var(--ob-surface-1);
  list-style: none;
}

.watched-stream-row {
  position: relative;
}

.watched-stream-row[hidden] {
  display: none;
}

.watched-stream-row + .watched-stream-row:not([hidden])::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 136px;
  height: 1px;
  background: var(--ob-line-1);
}

.watched-stream-row__link {
  display: flex;
  min-width: 0;
  min-height: 84px;
  padding: 11px 14px;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.watched-stream-row__cover {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 62px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #3a2410, #160f0a 82%);
}

.watched-stream-row:nth-child(4n + 2) .watched-stream-row__cover {
  background: linear-gradient(145deg, #241a2e, #120d18 82%);
}

.watched-stream-row:nth-child(4n + 3) .watched-stream-row__cover {
  background: linear-gradient(145deg, #13291b, #0a140e 82%);
}

.watched-stream-row:nth-child(4n) .watched-stream-row__cover {
  background: linear-gradient(145deg, #2e1a1a, #160d0d 82%);
}

.watched-stream-row__cover img,
.watched-stream-row__cover-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.watched-stream-row__cover img {
  display: block;
  object-fit: cover;
}

.watched-stream-row__cover-glow {
  background: radial-gradient(80% 70% at 30% 20%, rgba(255, 246, 236, 0.08), transparent 60%);
}

.watched-stream-row__duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 9px;
  font-weight: 550;
  line-height: 12px;
}

.watched-stream-row__content {
  min-width: 0;
  flex: 1;
}

.watched-stream-row__headline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.watched-stream-row__headline strong {
  overflow: hidden;
  min-width: 0;
  color: var(--ob-text-1);
  font-size: 15px;
  font-weight: 650;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watched-stream-row__headline small {
  height: 19px;
  padding: 0 7px;
  flex: none;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-full);
  background: var(--ob-fill-1);
  color: var(--ob-text-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
}

.watched-stream-row__headline small.is-has {
  border-color: color-mix(in srgb, var(--ob-accent) 25%, transparent);
  background: var(--ob-accent-soft);
  color: var(--ob-accent-text);
}

.watched-stream-row__metrics {
  display: flex;
  margin-top: 6px;
  align-items: center;
  gap: 11px;
  color: var(--ob-text-3);
}

.watched-stream-row__metrics > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.watched-stream-row__metrics .f7-icons {
  font-size: 12px;
}

.watched-stream-row__metrics b {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.watched-stream-row__chevron {
  flex: none;
  color: var(--ob-text-4);
  font-size: 16px;
}

.watched-streams-empty {
  padding: 48px 16px;
  color: var(--ob-text-3);
  text-align: center;
}

.watched-streams-empty[hidden] {
  display: none;
}

.watched-streams-empty .f7-icons {
  color: var(--ob-text-4);
  font-size: 28px;
}

.watched-streams-empty p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
}

.watched-streams-loader {
  min-height: 52px;
  margin-top: 16px;
  border: 1px dashed var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: transparent;
}

/* Shiqijun album */
.app-view[data-page="mr17-album"] {
  padding-right: 0;
  padding-left: 0;
}

.app-view[data-page="mr17-album"] .page-content {
  gap: 0;
  padding-top: 0;
}

.mr17-album-v6 {
  padding: 16px 0 28px;
}

.mr17-album-featured {
  position: relative;
  overflow: hidden;
  display: flex;
  width: calc(100% - 2 * var(--ob-page-x));
  min-height: 132px;
  margin: 0 var(--ob-page-x);
  padding: 18px;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(224, 181, 78, 0.24);
  border-radius: var(--ob-r-lg);
  background: linear-gradient(160deg, #2a1c0e, #171412 72%);
  color: #f5f1ec;
  box-shadow: var(--ob-shadow-2);
  text-align: left;
}

.mr17-album-featured__topline {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 236, 0.16), transparent);
}

.mr17-album-featured__stack {
  position: relative;
  width: 118px;
  height: 92px;
  flex: none;
}

.mr17-album-featured__empty {
  display: flex;
  width: 92px;
  height: 92px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed rgba(224, 181, 78, 0.3);
  border-radius: 18px;
  background: rgba(224, 181, 78, 0.06);
  color: rgba(224, 181, 78, 0.68);
}

.mr17-album-featured__empty .f7-icons {
  font-size: 26px;
}

.mr17-album-featured__empty small {
  color: rgba(245, 241, 236, 0.52);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0;
}

.mr17-album-featured__photo {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: grid;
  width: 74px;
  height: 92px;
  place-items: center;
  border: 1px solid rgba(255, 246, 236, 0.08);
  border-radius: 12px;
  background: linear-gradient(150deg, #3a2410, #1d1408 85%);
  color: rgba(245, 241, 236, 0.22);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.42);
}

.mr17-album-featured__photo.is-1 {
  transform: rotate(-7deg);
}

.mr17-album-featured__photo.is-2 {
  top: -2px;
  left: 22px;
  background: linear-gradient(150deg, #241a2e, #130e1c 85%);
  transform: rotate(3deg);
}

.mr17-album-featured__photo.is-3 {
  top: 2px;
  left: 44px;
  background: linear-gradient(150deg, #13291b, #0b1710 85%);
  transform: rotate(9deg);
}

.mr17-album-featured__photo .f7-icons {
  font-size: 21px;
}

.mr17-album-featured__photo img,
.mr17-album-collection__cover img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: block;
  object-fit: cover;
}

.mr17-album-featured__photo.is-image-error img,
.mr17-album-collection__cover.is-image-error img {
  display: none;
}

.mr17-album-featured__copy {
  min-width: 0;
  flex: 1;
}

.mr17-album-featured__copy small,
.mr17-album-featured__copy strong,
.mr17-album-featured__copy span {
  display: block;
}

.mr17-album-featured__copy small {
  color: #e0b54e;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.15em;
}

.mr17-album-featured__copy strong {
  margin-top: 4px;
  color: #f5f1ec;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
}

.mr17-album-featured__copy span {
  overflow: hidden;
  margin-top: 3px;
  color: rgba(245, 241, 236, 0.56);
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr17-album-featured__chevron {
  flex: none;
  color: var(--ob-accent-hi);
  font-size: 18px;
}

.mr17-album-collections {
  margin-top: 24px;
}

.mr17-album-collections > h2,
.mr17-album-date-group > header {
  margin-right: var(--ob-page-x);
  margin-left: var(--ob-page-x);
}

.mr17-album-collections > h2,
.mr17-album-date-group h2 {
  margin-top: 0;
  margin-bottom: 9px;
  color: var(--ob-text-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.mr17-album-collections__rail {
  display: flex;
  overflow-x: auto;
  padding: 0 var(--ob-page-x);
  gap: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mr17-album-collections__rail::-webkit-scrollbar {
  display: none;
}

.mr17-album-collection {
  width: 108px;
  padding: 0;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ob-text-1);
  scroll-snap-align: start;
  text-align: left;
}

.mr17-album-collection__cover {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-md);
  background: linear-gradient(150deg, #3a2410, #1d1408 85%);
  color: rgba(245, 241, 236, 0.26);
  box-shadow: var(--ob-shadow-1);
}

.mr17-album-collection:nth-child(2) .mr17-album-collection__cover {
  background: linear-gradient(150deg, #241a2e, #130e1c 85%);
}

.mr17-album-collection:nth-child(3) .mr17-album-collection__cover {
  background: linear-gradient(150deg, #13291b, #0b1710 85%);
}

.mr17-album-collection:nth-child(4) .mr17-album-collection__cover {
  background: linear-gradient(150deg, #2e1a1a, #170d0d 85%);
}

.mr17-album-collection__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}

.mr17-album-collection.is-active .mr17-album-collection__cover::after {
  border-color: var(--ob-accent);
}

.mr17-album-collection__cover .f7-icons {
  font-size: 22px;
}

.mr17-album-collection > strong,
.mr17-album-collection > small {
  display: block;
}

.mr17-album-collection > strong {
  overflow: hidden;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr17-album-collection.is-active > strong {
  color: var(--ob-accent-text);
}

.mr17-album-collection > small {
  color: var(--ob-text-3);
  font-size: 11px;
  line-height: 15px;
}

.mr17-album-date-groups {
  display: flex;
  flex-direction: column;
}

.mr17-album-date-group {
  margin-top: 24px;
}

.mr17-album-date-group[hidden] {
  display: none;
}

.mr17-album-date-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mr17-album-date-group > header > span {
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 17px;
}

.mr17-album-v6-grid.mr17-album-grid {
  display: grid;
  width: auto;
  margin: 0 var(--ob-page-x);
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 104px;
  gap: 6px;
  list-style: none;
}

.mr17-album-v6-grid .mr17-album-item {
  min-width: 0;
  min-height: 0;
}

.mr17-album-v6-grid .mr17-album-item:first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.mr17-album-v6-grid .mr17-album-item[hidden] {
  display: none;
}

.mr17-album-v6-grid .mr17-album-card {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, #2e2410, #191405 85%);
  color: rgba(245, 241, 236, 0.24);
  box-shadow: none;
}

.mr17-album-v6-grid .mr17-album-item:nth-child(4n + 2) .mr17-album-card {
  background: linear-gradient(150deg, #241a2e, #130e1c 85%);
}

.mr17-album-v6-grid .mr17-album-item:nth-child(4n + 3) .mr17-album-card {
  background: linear-gradient(150deg, #13291b, #0b1710 85%);
}

.mr17-album-v6-grid .mr17-album-item:nth-child(4n) .mr17-album-card {
  background: linear-gradient(150deg, #1a2430, #0e141d 85%);
}

.mr17-album-card__fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
}

.mr17-album-card__fallback .f7-icons {
  font-size: 22px;
}

.mr17-album-v6-grid .mr17-album-card__media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mr17-album-v6-grid .mr17-album-card.is-image-error .mr17-album-card__media {
  display: none;
}

.mr17-album-card__video {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 7px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  backdrop-filter: blur(4px);
}

.mr17-album-card__video .f7-icons {
  margin-left: 1px;
  font-size: 10px;
}

.mr17-album-filter-empty,
.mr17-album-empty {
  padding: 48px 16px;
  color: var(--ob-text-3);
  text-align: center;
}

.mr17-album-filter-empty[hidden] {
  display: none;
}

.mr17-album-filter-empty .f7-icons,
.mr17-album-empty .f7-icons {
  color: var(--ob-text-4);
  font-size: 28px;
}

.mr17-album-filter-empty p,
.mr17-album-empty p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
}

.mr17-album-v6__footnote {
  margin: 22px var(--ob-page-x) 0;
  color: var(--ob-text-4);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}

.mr17-album-toast {
  z-index: 120;
}

/* Media viewer v7 */
.mr17-album-viewer--v7 {
  z-index: 110;
  color: #f5f1ec;
  background: #000;
  isolation: isolate;
}

.mr17-album-viewer--v7 .mr17-album-viewer__backdrop {
  opacity: var(--viewer-backdrop-opacity, 1);
}

.mr17-album-viewer--v7 .mr17-album-viewer__stage {
  width: 100%;
  height: 100%;
  height: 100dvh;
}

.mr17-album-viewer--v7 .mr17-album-viewer__photo,
.mr17-album-viewer--v7 .mr17-album-viewer__video {
  width: 100%;
  height: 100%;
}

.mr17-album-viewer--v7 .mr17-album-viewer__video-media,
.mr17-album-viewer--v7 .mr17-album-viewer__video-poster {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}

.mr17-album-viewer--v7 .mr17-album-viewer__video-poster {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mr17-album-viewer--v7 .mr17-album-viewer__topbar,
.mr17-album-viewer--v7 .mr17-album-viewer__bottombar {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 6;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--ob-dur-base) var(--ob-ease-standard),
    transform var(--ob-dur-base) var(--ob-ease-standard);
}

.mr17-album-viewer--v7 .mr17-album-viewer__topbar {
  top: 0;
  display: flex;
  min-height: calc(72px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 26px;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0));
}

.mr17-album-viewer--v7 .mr17-album-viewer__bottombar {
  bottom: 0;
  max-height: min(54dvh, 500px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 66%, rgba(0, 0, 0, 0));
  scrollbar-width: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__bottombar::-webkit-scrollbar {
  display: none;
}

.mr17-album-viewer--v7.is-controls-hidden .mr17-album-viewer__topbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.mr17-album-viewer--v7.is-controls-hidden .mr17-album-viewer__bottombar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.mr17-album-viewer--v7 .mr17-album-viewer__round-button,
.mr17-album-viewer--v7 .mr17-album-viewer__close {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f1ec;
  font-size: initial;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mr17-album-viewer--v7 .mr17-album-viewer__close::before {
  display: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__round-button .f7-icons {
  color: inherit;
  font-size: 22px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__more .f7-icons {
  font-size: 20px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__heading {
  min-width: 0;
  padding-top: 1px;
  flex: 1;
  text-align: center;
}

.mr17-album-viewer--v7 .mr17-album-viewer__heading strong,
.mr17-album-viewer--v7 .mr17-album-viewer__heading small {
  display: block;
}

.mr17-album-viewer--v7 .mr17-album-viewer__heading strong {
  overflow: hidden;
  color: #f5f1ec;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr17-album-viewer--v7 .mr17-album-viewer__heading small {
  margin-top: 1px;
  color: rgba(245, 241, 236, 0.62);
  font-size: 11px;
  line-height: 15px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #201c18;
  color: rgba(245, 241, 236, 0.55);
}

.mr17-album-viewer--v7 .mr17-album-viewer__avatar .f7-icons {
  font-size: 28px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__avatar img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: block;
  object-fit: cover;
}

.mr17-album-viewer--v7 .mr17-album-viewer__avatar img[hidden] {
  display: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__author-copy {
  min-width: 0;
  flex: 1;
}

.mr17-album-viewer--v7 .mr17-album-viewer__author-copy strong,
.mr17-album-viewer--v7 .mr17-album-viewer__author-copy small {
  display: block;
}

.mr17-album-viewer--v7 .mr17-album-viewer__author-copy strong {
  overflow: hidden;
  color: #f5f1ec;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr17-album-viewer--v7 .mr17-album-viewer__author-copy small {
  margin-top: 1px;
  color: rgba(245, 241, 236, 0.58);
  font-size: 11px;
  line-height: 15px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__caption {
  overflow: auto;
  max-height: 82px;
  margin: 10px 0 0;
  color: rgba(245, 241, 236, 0.92);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mr17-album-viewer--v7 .mr17-album-viewer__video-controls {
  display: flex;
  margin-top: 14px;
  align-items: center;
  gap: 10px;
}

.mr17-album-viewer--v7 [hidden] {
  display: none !important;
}

.mr17-album-viewer--v7 .mr17-album-viewer__play {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.mr17-album-viewer--v7 .mr17-album-viewer__play .f7-icons {
  font-size: 16px;
}

.mr17-album-viewer--v7 [data-viewer-current],
.mr17-album-viewer--v7 [data-viewer-duration] {
  width: 38px;
  flex: none;
  color: rgba(245, 241, 236, 0.76);
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}

.mr17-album-viewer--v7 [data-viewer-duration] {
  color: rgba(245, 241, 236, 0.58);
  text-align: left;
}

.mr17-album-viewer--v7 .mr17-album-viewer__range {
  width: 100%;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: 1;
  border: 0;
  background: transparent;
  accent-color: var(--ob-accent);
  appearance: none;
  -webkit-appearance: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--ob-accent) 0 var(--viewer-progress),
    rgba(255, 255, 255, 0.24) var(--viewer-progress) 100%
  );
}

.mr17-album-viewer--v7 .mr17-album-viewer__range::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  appearance: none;
  -webkit-appearance: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__range::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.mr17-album-viewer--v7 .mr17-album-viewer__range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--ob-accent);
}

.mr17-album-viewer--v7 .mr17-album-viewer__range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.mr17-album-viewer--v7 .mr17-album-viewer__actions {
  display: flex;
  margin-top: 7px;
  padding-top: 8px;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.mr17-album-viewer--v7 .mr17-album-viewer__action {
  display: flex;
  min-width: 72px;
  min-height: 48px;
  padding: 6px 4px;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f5f1ec;
  text-decoration: none;
}

.mr17-album-viewer--v7 .mr17-album-viewer__action:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.96);
}

.mr17-album-viewer--v7 .mr17-album-viewer__action .f7-icons {
  font-size: 22px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__action span {
  color: rgba(245, 241, 236, 0.76);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__like.is-liked,
.mr17-album-viewer--v7 .mr17-album-viewer__like.is-liked span {
  color: var(--ob-accent-hi);
}

.mr17-album-viewer--v7 .mr17-album-viewer__like:disabled {
  opacity: 0.66;
}

/* Media viewer v8 admin management */
.mr17-album-collection.is-admin-only .mr17-album-collection__cover {
  border-color: color-mix(in srgb, var(--ob-danger) 38%, var(--ob-line-1));
  background: linear-gradient(150deg, #2e1a1a, #170d0d 85%);
}

.mr17-album-viewer--v8 .mr17-album-viewer__manage.is-featured,
.mr17-album-viewer--v8 .mr17-album-viewer__manage.is-featured span,
.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions button.is-active {
  color: var(--ob-accent-hi);
}

.mr17-album-viewer--v8 .mr17-album-viewer__manage.is-hidden,
.mr17-album-viewer--v8 .mr17-album-viewer__manage.is-hidden span,
.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions button.is-hidden {
  color: var(--ob-danger);
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions {
  display: flex;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  gap: 8px;
  opacity: 0;
  transition:
    max-height var(--ob-dur-base) var(--ob-ease-standard),
    opacity var(--ob-dur-base) var(--ob-ease-standard),
    margin-top var(--ob-dur-base) var(--ob-ease-standard);
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions.is-open {
  max-height: 52px;
  margin-top: 10px;
  opacity: 1;
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions button {
  display: flex;
  height: 40px;
  min-width: 0;
  padding: 0 8px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f5f1ec;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions button.is-active {
  background: var(--ob-accent);
  color: var(--ob-on-accent);
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions button:disabled,
.mr17-album-viewer--v8 .mr17-album-viewer__manage:disabled,
.mr17-album-viewer--v8 .mr17-album-viewer__collection-row:disabled {
  opacity: 0.58;
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-actions .f7-icons {
  flex: none;
  font-size: 15px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__admin-note {
  margin: 6px 0 0;
  color: rgba(245, 241, 236, 0.36);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet-backdrop {
  position: absolute;
  z-index: 90;
  display: block;
  background: var(--ob-scrim);
  inset: 0;
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet {
  position: absolute;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  overflow: hidden;
  border: 1px solid var(--ob-line-1);
  border-radius: var(--ob-r-xl);
  background: var(--ob-surface-2);
  box-shadow: var(--ob-shadow-3);
  color: var(--ob-text-1);
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet > header {
  display: flex;
  padding: 16px 18px 10px;
  align-items: center;
  justify-content: space-between;
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet > header strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet > header button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ob-fill-2);
  color: var(--ob-text-2);
}

.mr17-album-viewer--v8 .mr17-album-viewer__sheet > header .f7-icons {
  font-size: 15px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-list {
  overflow-y: auto;
  max-height: min(45dvh, 320px);
  overscroll-behavior: contain;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-row,
.mr17-album-viewer--v8 .mr17-album-viewer__new-collection {
  display: flex;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--ob-line-1);
  background: transparent;
  color: var(--ob-text-1);
  text-align: left;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-cover,
.mr17-album-viewer--v8 .mr17-album-viewer__new-collection > span {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(150deg, #3a2410, #1d1408 85%);
  color: rgba(245, 241, 236, 0.52);
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-cover img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-cover .f7-icons,
.mr17-album-viewer--v8 .mr17-album-viewer__new-collection .f7-icons {
  font-size: 16px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-row > strong,
.mr17-album-viewer--v8 .mr17-album-viewer__new-collection > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-row > small {
  color: var(--ob-text-3);
  font-size: 12px;
  line-height: 16px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-check {
  display: none;
  color: var(--ob-accent-hi);
  font-size: 16px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__collection-row.is-included .mr17-album-viewer__collection-check {
  display: inline-block;
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection {
  color: var(--ob-accent-text);
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection > span {
  border: 1px dashed var(--ob-line-2);
  background: transparent;
  color: var(--ob-accent-hi);
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection-form {
  display: flex;
  padding: 10px 18px 14px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--ob-line-1);
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection-form input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 14px;
  flex: 1;
  border: 1px solid var(--ob-accent);
  border-radius: 999px;
  outline: none;
  background: var(--ob-fill-1);
  color: var(--ob-text-1);
  font-size: 14px;
  line-height: 20px;
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection-form button {
  height: 40px;
  padding: 0 18px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--ob-accent);
  color: var(--ob-on-accent);
  font-size: 14px;
  font-weight: 600;
}

.mr17-album-viewer--v8 .mr17-album-viewer__new-collection-form button:disabled {
  background: var(--ob-fill-2);
  color: var(--ob-text-4);
}

.mr17-album-viewer--v7 .mr17-album-viewer__center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  width: 64px;
  height: 64px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.58);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.42);
  opacity: 1;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--ob-dur-fast) var(--ob-ease-standard), transform var(--ob-dur-fast) var(--ob-ease-standard);
}

.mr17-album-viewer--v7 .mr17-album-viewer__center-play .f7-icons {
  margin-left: 3px;
  font-size: 28px;
}

.mr17-album-viewer--v7 .mr17-album-viewer__video.is-playing .mr17-album-viewer__center-play,
.mr17-album-viewer--v7 .mr17-album-viewer__video.is-loading .mr17-album-viewer__center-play,
.mr17-album-viewer--v7 .mr17-album-viewer__video.is-error .mr17-album-viewer__center-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.86);
}

.mr17-album-viewer--v7.is-closing [data-viewer-chrome] {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 720px) {
  .mr17-album-viewer--v7 .mr17-album-viewer__topbar,
  .mr17-album-viewer--v7 .mr17-album-viewer__bottombar {
    padding-right: max(16px, calc((100vw - 680px) / 2));
    padding-left: max(16px, calc((100vw - 680px) / 2));
  }
}

@media (max-width: 360px) {
  .vip-mail-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .vip-mail-card__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .watched-summary {
    gap: 12px;
  }

  .watched-summary > p {
    font-size: 11px;
  }

  .watched-stream-row__link {
    padding-right: 10px;
    padding-left: 10px;
    gap: 10px;
  }

  .watched-stream-row__cover {
    width: 96px;
    height: 54px;
  }

  .watched-stream-row + .watched-stream-row:not([hidden])::before {
    left: 116px;
  }

  .watched-stream-row__metrics {
    gap: 8px;
  }

  .mr17-album-featured {
    padding-right: 14px;
    padding-left: 14px;
    gap: 12px;
  }

  .mr17-album-featured__stack {
    width: 100px;
    transform: scale(0.9);
    transform-origin: left center;
  }

  .mr17-album-featured__copy strong {
    font-size: 16px;
  }

  .mr17-album-v6-grid.mr17-album-grid {
    grid-auto-rows: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vip-mail-alias-input,
  .vip-mail-forward-input {
    transition: none;
  }
}