:root {
  --red: #ec6252;
  --ink: #27262d;
  --muted: #919198;
  --line: #efedf0;
  --safe: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #e9e8ea;
  font-synthesis: none;
}
.update-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin: 0 0 7px 3px;
}
.update-label {
  display: block;
  color: var(--red);
  font-size: 12px;
  margin: 4px 0;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 0;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
button svg,
a svg {
  vertical-align: middle;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #ec625244;
  border-color: var(--red);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.app-shell {
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px #29232c15;
}
.dark-shell {
  background: #171615;
  color: #fff;
}
#view {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.page {
  min-height: 100%;
  background: #fff;
  padding-bottom: 30px;
}
.with-nav {
  padding-bottom: calc(90px + var(--safe));
}
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(62px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 15px 0;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fffffff2;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #f6f5f5;
}
.page-header h1 {
  text-align: center;
  font-size: 17px;
  margin: 0;
  white-space: nowrap;
}
.page-header > div {
  text-align: right;
  font-size: 12px;
}
.page-header.dark {
  background: #211a17e8;
  color: #efd4b2;
  border-color: #ffffff10;
}
.icon-btn {
  background: none;
  color: inherit;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  background: var(--red);
  color: #fff;
  line-height: 1.4;
}
.secondary {
  background: #fff0ec;
  color: #c55d4b;
}
.full {
  width: 100%;
  margin-top: 16px;
}
.text-btn {
  background: none;
  color: var(--red);
  padding: 6px 0;
  font-size: 12px;
}
.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.accent {
  color: var(--red);
}
.footnote,
.brand-footer {
  text-align: center;
  color: #aaa5a6;
  font-size: 11px;
  line-height: 1.8;
  padding: 20px;
}
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  height: calc(68px + var(--safe));
  padding: 8px 10px calc(8px + var(--safe));
  background: #fffffff5;
  border-top: 1px solid #efedef;
  backdrop-filter: blur(18px);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #95939c;
}
.bottom-nav a svg {
  width: 23px;
  height: 23px;
}
.bottom-nav .on {
  color: var(--red);
  font-weight: 700;
}
.dark-shell .bottom-nav {
  background: #141313f5;
  border-color: #ffffff12;
}
.dark-shell .bottom-nav .on {
  color: #ffb09a;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 18px 14px;
  gap: 12px;
}
.section-title h2 {
  font-size: 17px;
  margin: 0;
}
.section-title a,
.section-title > span {
  font-size: 11px;
  color: #96949a;
}
.section-title.unpadded {
  margin-left: 0;
  margin-right: 0;
}
.chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #f5f4f6;
  color: #727079;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}
.chip.on {
  color: #d85c48;
  background: #fff0e9;
  font-weight: 700;
}
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 18px;
}
.unpadded {
  padding-left: 0;
  padding-right: 0;
}
.theatre-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 7px;
}
.search-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 28px;
  background: #f4f3f5;
  color: #a09ca4;
  padding: 11px 14px;
  font-size: 11px;
  flex: 1;
  min-width: 0;
}
.search-entry svg {
  width: 17px;
}
.rank-entry {
  color: #d99058;
}
.theme-row .chip {
  background: none;
  font-size: 14px;
  padding: 9px 12px;
}
.theme-row .chip.on {
  color: #29252d;
  background: #f3f1f3;
  font-weight: 750;
}
.setting-row {
  display: flex;
  align-items: center;
}
.setting-row > .chip-row {
  min-width: 0;
  flex: 1;
}
.filter-link {
  font-size: 11px;
  padding: 7px 15px 7px 9px;
  white-space: nowrap;
  background: #fff;
  box-shadow: -8px 0 12px #fff;
}
.filter-link svg {
  width: 16px;
  margin-right: 3px;
}
.banner {
  height: 170px;
  margin: 14px 18px 24px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  color: white;
  background: #50332b;
}
.banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #20120cdf, transparent);
}
.banner > div {
  position: absolute;
  left: 19px;
  top: 27px;
  z-index: 1;
}
.banner small {
  font-size: 10px;
  letter-spacing: 2px;
  color: #ebc4b0;
}
.banner h2 {
  font-size: 26px;
  margin: 8px 0 13px;
}
.banner .primary {
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 25px;
}
.drama-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 10px;
  padding: 0 18px 20px;
}
.drama-card {
  min-width: 0;
}
.cover {
  aspect-ratio: 0.66;
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #e7ded9;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #1c10109c);
}
.badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #e55e4be8;
  color: #fff;
  font-size: 9px;
  z-index: 1;
}
.badge.gold {
  background: #f0d0a5;
  color: #744921;
}
.badge.inline {
  position: static;
  display: inline-block;
}
.cover-name {
  position: absolute;
  z-index: 1;
  left: 8px;
  right: 8px;
  bottom: 25px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 5px #0006;
}
.heat {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  left: 8px;
  color: #f4e6da;
  font-size: 8px;
}
.drama-card h3 {
  font-size: 12px;
  margin: 7px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drama-card p {
  font-size: 10px;
  color: #a09ca3;
  line-height: 1.5;
  margin: 0;
}
.player {
  height: 100%;
  position: relative;
  background: #161414;
  color: white;
  overflow: hidden;
  overscroll-behavior: contain;
}
.player-poster,
.player video,
.player-center,
.gesture-surface {
  touch-action: none;
}
.player-scene {
  position: relative;
  height: 100%;
  transform: translate3d(0, var(--swipe-y, 0px), 0);
  z-index: 1;
}
.gesture-surface {
  position: absolute;
  inset: 0;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
}
.swipe-dragging .player-scene {
  will-change: transform;
}
.swipe-settling .player-scene {
  transition: transform 180ms ease-out;
}
.swipe-preview {
  position: absolute;
  inset: 0;
  transform: translate3d(
    0,
    calc(var(--preview-side, 100%) + var(--swipe-y, 0px)),
    0
  );
  pointer-events: none;
  background: #161414;
}
.swipe-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}
.swipe-preview b {
  position: absolute;
  left: 18px;
  top: 24px;
  text-shadow: 0 2px 6px #000;
}
.player-poster {
  user-select: none;
  -webkit-user-drag: none;
}
@media (prefers-reduced-motion: reduce) {
  .swipe-settling .player-scene {
    transition: none;
  }
}
.player-poster {
  filter: brightness(0.78);
}
[hidden] {
  display: none !important;
}
.player-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% - 78px - var(--safe));
  object-fit: contain;
  background: #000;
}
.player-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    #08080860,
    transparent 30%,
    #08080820 45%,
    #080808d9 77%,
    #080808 93%
  );
}
.player-top {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.player-top > b {
  flex: 1;
  font-size: 14px;
}
.feed-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-right: auto;
  font-size: 15px;
  font-weight: 650;
}
.feed-tabs a {
  white-space: nowrap;
  color: #ffffffa8;
  padding: 9px 0;
}
.feed-tabs .on {
  border-bottom: 3px solid #fff;
  color: #fff;
}
.feed-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.feed-header .feed-tabs {
  grid-column: 2;
  grid-row: 1;
  margin-right: 0;
}
.feed-header .sort-btn {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.feed-header > .icon-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.sort-btn {
  font-size: 10px;
  background: #ffffff21;
  color: white;
  border-radius: 20px;
  padding: 6px 8px;
}
.home-categories {
  position: absolute;
  top: calc(76px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
  overflow: auto;
  scrollbar-width: none;
}
.home-categories .chip {
  background: #0005;
  color: #fff9;
}
.home-categories .on {
  color: white;
  background: #ffffff30;
}
.player-center {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 80%;
  text-align: center;
  pointer-events: none;
}
.player-center button {
  pointer-events: auto;
}
.play-button {
  color: white;
  background: #0004;
  border: 1px solid #fff8;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.play-button.playing {
  opacity: 0;
}
.player:hover .play-button.playing {
  opacity: 0.7;
}
.video-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-shadow: 0 2px 8px #0008;
}
.video-state > svg {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}
.video-state b {
  font-size: 17px;
  font-weight: 550;
}
.video-state small {
  font-size: 11px;
  color: #e1d7d3;
}
.player-side {
  position: absolute;
  right: 15px;
  bottom: calc(213px + var(--safe));
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}
.player-side button {
  color: #fff;
  background: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  padding: 3px 5px;
  min-width: 44px;
  min-height: 44px;
  text-shadow: 0 1px 5px #0008;
}
.player-side svg {
  width: 28px;
  height: 28px;
}
.player-side span {
  font-size: 10px;
}
.player-side .on {
  color: #ff8a77;
}
.player-info {
  position: absolute;
  bottom: calc(150px + var(--safe));
  left: 18px;
  right: 65px;
  z-index: 3;
}
.eyebrow {
  letter-spacing: 1.7px;
  font-size: 9px;
  color: #f4d9c1;
}
.player-info h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 9px 0;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tags > a,
.tags > span {
  background: #ffffff20;
  border: 1px solid #ffffff20;
  color: #fff;
  border-radius: 20px;
  font-size: 9px;
  padding: 4px 8px;
}
.player-info p {
  font-size: 11px;
  color: #ece6e2;
  line-height: 1.6;
  max-height: 38px;
  overflow: hidden;
  margin: 10px 0 0;
}
.player-info p.expanded {
  max-height: 28dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.player-info .text-btn {
  margin-left: 8px;
  font-size: 11px;
  color: #fba68c;
}
.player-tools {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: calc(75px + var(--safe));
  z-index: 5;
}
.timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #c8bfb9;
}
.timeline input {
  height: 24px;
  min-width: 0;
  flex: 1;
  accent-color: white;
}
.tool-row {
  display: flex;
  gap: 7px;
  margin-top: 3px;
}
.tool-row button {
  background: #ffffff23;
  color: white;
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  backdrop-filter: blur(9px);
}
.tool-row svg {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.tool-row .episode-button {
  flex: 1;
  text-align: left;
}
.episode-button span {
  float: right;
  margin-left: 5px;
  color: #ddd;
}
.episode-button {
  min-width: 0;
}
@media (max-width: 360px) {
  .feed-tabs {
    gap: 16px;
    font-size: 14px;
  }
  .player-top {
    gap: 8px;
  }
  .tool-row button {
    padding: 10px 7px;
    font-size: 10px;
  }
  .tool-row svg {
    display: none;
  }
}
.gesture-tip {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  color: #ffffff60;
  font-size: 9px;
}
.gesture-tip button {
  font-size: 10px;
  color: #ddd;
}
.player.clear .player-top,
.player.clear .player-info,
.player.clear .player-tools,
.player.clear .player-side,
.player.clear .home-categories,
.player.clear .bottom-nav {
  display: none;
}
.player.clear .landscape-entry {
  display: none;
}
.feed-empty {
  padding: 145px 20px 90px;
  text-align: center;
}
.feed-empty .empty {
  color: #ddd;
}
.feed-empty .empty h3 {
  color: #fff;
}
.landscape-entry {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  color: white;
  background: #ffffff28;
  border: 1px solid #ffffff30;
  border-radius: 24px;
  padding: 9px 15px;
  font-size: 12px;
}
.landscape-entry svg {
  width: 15px;
  margin-right: 5px;
}
.playback-status {
  position: absolute;
  z-index: 5;
  left: 20%;
  right: 20%;
  top: 53%;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: #0008;
  padding: 8px 10px;
  border-radius: 10px;
  pointer-events: none;
}
.swipe-hint {
  position: absolute;
  z-index: 6;
  bottom: calc(95px + var(--safe));
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: #0007;
  padding: 9px 15px;
  border-radius: 30px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-height: 620px) {
  .player-info h2 {
    font-size: 18px;
  }
  .player-info .eyebrow {
    display: none;
  }
  .player-side {
    gap: 6px;
    bottom: calc(195px + var(--safe));
  }
  .player-center {
    top: 34%;
  }
  .video-state {
    gap: 7px;
  }
  .video-state small {
    max-width: 210px;
  }
}
.restore {
  display: none;
  position: absolute;
  right: 18px;
  bottom: 40px;
  color: white;
  background: #ffffff30;
  padding: 11px;
  border-radius: 8px;
  z-index: 9;
}
.clear .restore {
  display: block;
}
.search-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
}
.search-head input {
  min-width: 0;
  flex: 1;
  border: 0;
  border-radius: 25px;
  background: #f4f3f5;
  font-size: 13px;
  padding: 12px;
}
.suggestions {
  position: absolute;
  top: 69px;
  left: 60px;
  right: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 20px #0001;
  border-radius: 10px;
  z-index: 15;
  overflow: hidden;
}
.suggestions a {
  display: flex;
  align-items: center;
  padding: 12px;
  font-size: 12px;
  gap: 7px;
  border-bottom: 1px solid var(--line);
}
.suggestions svg {
  width: 15px;
}
.suggestions span {
  margin-left: auto;
}
.hot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  padding: 5px 20px 10px;
}
.hot-grid a {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-grid b {
  margin-right: 10px;
  color: var(--red);
}
.result-item {
  display: flex;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.result-cover {
  flex-shrink: 0;
}
.result-cover img {
  width: 86px;
  height: 125px;
  object-fit: cover;
  border-radius: 9px;
}
.result-item > div {
  min-width: 0;
}
.result-item h3 {
  font-size: 15px;
  margin: 4px 0 8px;
}
.result-item p {
  font-size: 11px;
  color: var(--muted);
  max-height: 34px;
  overflow: hidden;
  margin: 5px 0;
}
.result-item .accent {
  font-size: 12px;
}
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}
.result-tags a {
  color: #8c7e78;
  font-size: 10px;
  background: #f7f4f2;
  padding: 3px 6px;
  border-radius: 4px;
}
.result-heat {
  font-size: 10px;
  color: #a58b78;
  margin-left: 8px;
}
.badge.access-badge {
  left: auto;
  right: 6px;
}
.badge.status-badge {
  background: #302a28b3;
}
.collection-summary {
  padding: 0 18px 12px;
  color: var(--muted);
  font-size: 12px;
}
.detail-rating {
  color: #ba7756;
  font-size: 14px;
  margin: 0 0 12px;
}
.rank-row > div {
  min-width: 0;
  flex: 1;
}
.rank-row > img,
.rank-number {
  flex-shrink: 0;
}
.rank-row h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-top {
  background: linear-gradient(90deg, #fff8f0, #fff);
}
.rank-top-1 .rank-number {
  color: #e96b4b;
}
.rank-top-2 .rank-number {
  color: #b5884d;
}
.rank-top-3 .rank-number {
  color: #b8a08d;
}
.banner {
  display: block;
}
.filter-group {
  display: flex;
  align-items: center;
  padding: 4px 0 4px 18px;
  border-bottom: 1px solid #f7f6f7;
}
.filter-page .page-header {
  top: 0;
  z-index: 30;
  background: #fff;
}
.filter-group > span {
  font-size: 12px;
  color: #a29aa3;
  white-space: nowrap;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  background: #fff;
  padding-right: 8px;
}
.filter-group .chip-row {
  min-width: 0;
  flex: 1;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
}
.filter-group .chip {
  flex: 0 0 auto;
}
.rank-hero {
  position: relative;
  overflow: hidden;
  margin: 18px;
  border-radius: 15px;
  background: #291b22;
  color: #fff;
  padding: 24px 20px;
}
.rank-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0.45;
}
.rank-hero > div {
  position: relative;
}
.rank-hero small {
  font-size: 10px;
  letter-spacing: 2px;
  color: #eac6b5;
}
.rank-hero h2 {
  font-size: 24px;
  margin: 8px 0 0;
}
.tabs {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  overflow-x: auto;
}
.tabs button {
  background: #f5f4f6;
  color: #8a828c;
  padding: 9px 16px;
  border-radius: 25px;
  white-space: nowrap;
  font-size: 13px;
  flex: 1;
}
.tabs .on {
  background: #29242a;
  color: white;
}
.rank-row {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.rank-row > img {
  height: 108px;
  width: 76px;
  border-radius: 8px;
  object-fit: cover;
}
.rank-number {
  font: italic 700 24px Georgia;
  color: #d99370;
  width: 26px;
}
.rank-row h3 {
  font-size: 14px;
  margin-bottom: 8px;
}
.rank-row p {
  font-size: 10px;
  color: var(--muted);
}
.rank-row strong {
  font-size: 12px;
  color: #cf7656;
}
.detail-hero {
  height: 350px;
  position: relative;
}
.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.detail-hero:after {
  content: "";
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(transparent, white);
}
.floating-back {
  position: absolute;
  left: 16px;
  top: 18px;
  border-radius: 50%;
  background: #0004;
  color: white;
}
.detail-body {
  position: relative;
  margin-top: -40px;
  padding: 0 20px 100px;
}
.detail-body h1 {
  font-size: 27px;
  margin: 12px 0;
}
.detail-body .eyebrow {
  color: var(--red);
}
.tags.light span {
  background: #fff1e9;
  color: #ba7756;
  border: 0;
  margin-bottom: 12px;
}
.detail-body .tag-list {
  margin-bottom: 15px;
}
.synopsis {
  color: #8a8288;
  font-size: 13px;
  line-height: 1.9;
}
.detail-body > .drama-grid {
  padding: 0;
}
.fixed-action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fffffff5;
  backdrop-filter: blur(15px);
  padding: 12px 18px calc(13px + var(--safe));
  display: flex;
  gap: 10px;
  z-index: 11;
  box-shadow: 0 -6px 25px #00000008;
}
.fixed-action .primary {
  flex: 1;
}
.episode-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ep-btn {
  background: #f4f3f6;
  border-radius: 9px;
  padding: 12px 2px;
  color: #49404b;
  font-size: 15px;
}
.ep-btn small {
  display: block;
  font-size: 8px;
  color: #9d929e;
  margin-top: 6px;
}
.ep-btn.on {
  background: var(--red);
  color: white;
}
.ep-btn.on small {
  color: #fff9;
}
.profile-page {
  min-height: 100%;
  background: #f8f6f5;
}
.profile-head {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 37px 22px 25px;
}
.avatar {
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(130deg, #f8d4bd, #aa6056);
  color: white;
  font-size: 18px;
  font-weight: 800;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-head .avatar {
  width: 60px;
  height: 60px;
  font-size: 24px;
}
.profile-head h1 {
  font-size: 19px;
  margin: 0 0 6px;
}
.profile-head p {
  font-size: 10px;
  color: #99909a;
  margin: 0;
}
.profile-edit {
  margin-left: auto;
  color: #8d858b;
  font-size: 12px;
}
.member-card {
  margin: 0 18px;
  background: linear-gradient(125deg, #342722, #76583f);
  color: #f2d7b4;
  padding: 20px 17px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.member-card:after {
  content: "♛";
  position: absolute;
  right: 24px;
  font-size: 100px;
  opacity: 0.07;
  transform: rotate(-20deg);
}
.member-card small {
  font-size: 9px;
  letter-spacing: 1.6px;
}
.member-card h2 {
  font-size: 18px;
  margin: 8px 0;
}
.member-card p {
  font-size: 10px;
  margin: 0;
  color: #d6b594;
}
.member-card a {
  font-size: 10px;
  background: #ebc9a1;
  color: #624c3b;
  border-radius: 20px;
  padding: 8px 11px;
  white-space: nowrap;
  margin-left: auto;
  z-index: 1;
}
.quick-grid {
  display: flex;
  margin: 18px;
  background: #fff;
  border-radius: 14px;
  padding: 19px 0;
}
.quick-grid a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-direction: column;
}
.quick-grid svg {
  color: #bb7c65;
  width: 25px;
  height: 25px;
}
.quick-grid strong {
  font-size: 16px;
  font-weight: 600;
}
.quick-grid span {
  font-size: 11px;
  color: #8e858b;
}
.white-card {
  background: #fff;
  border-radius: 14px;
  margin: 14px 18px;
  overflow: hidden;
}
.white-card .section-title {
  margin-top: 17px;
}
.history-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 17px 17px;
}
.history-row img {
  width: 100%;
  aspect-ratio: 0.7;
  object-fit: cover;
  border-radius: 7px;
}
.history-row h3 {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 6px 0;
}
.history-row p {
  font-size: 9px;
  color: #a79ba1;
  margin: 0;
}
.collection-tabs .chip {
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.quick-grid span { position: relative; }
.update-badge {
  position: absolute;
  left: calc(100% + 3px);
  top: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}
.history-row progress {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #f0e7eb;
  accent-color: var(--red);
}
.history-row progress::-webkit-progress-bar { background: #f0e7eb; }
.history-row progress::-webkit-progress-value { background: var(--red); }
.history-row progress::-moz-progress-bar { background: var(--red); }
.purchase-list { padding: 0 18px 24px; }
.purchase-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0e7eb;
}
.purchase-item img { width: 76px; aspect-ratio: .7; object-fit: cover; border-radius: 8px; }
.purchase-item div { min-width: 0; }
.purchase-item h2 { font-size: 16px; margin: 0 0 10px; overflow-wrap: anywhere; }
.purchase-item p { color: #8e858b; font-size: 12px; }
.purchase-item span { color: var(--red); font-size: 12px; }
.list-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 17px 18px;
  background: none;
  border-bottom: 1px solid #f6f4f5;
  font-size: 13px;
  text-align: left;
  color: inherit;
}
.list-row svg {
  width: 19px;
  height: 19px;
  color: #94828d;
}
.list-row span {
  margin-left: auto;
  color: #b6acb2;
}
.small-empty {
  color: #a0949c;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 2;
}
.small-empty a {
  display: block;
  color: var(--red);
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  padding: 16px 20px;
}
.collection-grid .cover-name {
  font-size: 22px;
}
.collection-grid .text-btn {
  margin-top: 6px;
}
.wish-page {
  min-height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--surface-subtle);
  color: var(--ink);
}
.wish-heading {
  padding-top: 24px;
}
.wish-heading h1 {
  font-size: 24px;
  margin: 0 0 6px;
}
.wish-heading p {
  font-size: 13px;
  line-height: 1.6;
  color: #77747b;
}
.wish-form {
  background: #252320;
  border: 1px solid #39342e;
  border-radius: 16px;
  padding: 15px;
  margin-top: 16px;
}
.wish-form label {
  font-size: 12px;
  display: block;
  margin-bottom: 12px;
  color: #d7c9ba;
}
.wish-form input,
.wish-form textarea {
  width: 100%;
  border: 1px solid #403830;
  background: #191816;
  color: #fff;
  font-size: 12px;
  padding: 12px;
  border-radius: 8px;
  resize: vertical;
}
.wish-form textarea {
  margin-top: 9px;
  height: 76px;
}
.wish-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.wish-form small {
  font-size: 10px;
  color: #74695f;
}
.wish-form .primary {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 22px;
}
.wish-form svg {
  width: 14px;
  height: 14px;
}
.pending-tip {
  font-size: 11px;
  line-height: 1.6;
  padding: 12px;
  background: #193526;
  color: #9bd3ae;
  border-radius: 8px;
  margin-top: 12px;
}
.wish-tabs {
  display: flex;
  gap: 26px;
  margin-top: 20px;
  border-bottom: 1px solid #332c28;
}
.wish-tabs button {
  background: none;
  color: #8c827a;
  padding: 0 0 13px;
  font-size: 13px;
}
.wish-tabs .on {
  color: #fff;
  border-bottom: 2px solid var(--red);
}
.wish-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 15px;
  margin-top: 10px;
  background: #252320;
  border: 1px solid #38332c;
  border-radius: 13px;
}
.wish-card > div {
  flex: 1;
  min-width: 0;
}
.wish-card h3 {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 4px;
}
.wish-card p {
  font-size: 11px;
  line-height: 1.6;
  color: #a99f95;
  margin-bottom: 10px;
}
.wish-card small {
  font-size: 9px;
  color: #7e746d;
}
.vote {
  background: #352c26;
  color: #b7a897;
  padding: 12px 10px;
  min-width: 55px;
  border-radius: 12px;
  display: grid;
  gap: 6px;
  justify-items: center;
}
.vote svg {
  width: 20px;
  height: 20px;
}
.vote b {
  font-size: 12px;
}
.vote.on {
  color: #ff9e83;
  background: #513329;
}
.progress-badge {
  font-size: 10px;
  color: #b8a38b;
}
.form-page {
  padding: 25px 24px;
}
.form-page h2 {
  font-size: 21px;
}
.form-page label {
  display: block;
  margin: 20px 0 9px;
  font-size: 13px;
  font-weight: 600;
}
.form-page input,
.form-page textarea,
.form-page select {
  display: block;
  width: 100%;
  border: 1px solid #efeced;
  background: #f8f6f7;
  border-radius: 11px;
  padding: 13px;
  font-size: 13px;
  color: #393239;
}
.form-page textarea {
  min-height: 130px;
  resize: vertical;
}
.form-page input[type="file"] {
  font-size: 11px;
}
.form-page summary {
  font-size: 13px;
  margin-top: 25px;
  cursor: pointer;
}
.form-page .primary {
  margin-top: 25px;
}
.auth-page {
  padding-top: 40px;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(130deg, #ff9277, #cf3e3f);
  color: white;
  border-radius: 18px;
  font-size: 29px;
  font-weight: 900;
  box-shadow: 0 10px 30px #e7674630;
}
.auth-page h1 {
  font-size: 26px;
  margin: 25px 0 8px;
}
.auth-page > p {
  color: #a59aa4;
  font-size: 12px;
  margin-bottom: 30px;
}
.auth-page .tabs {
  padding: 0;
  margin-bottom: 25px;
}
.form-error {
  color: #cf4c48;
  font-size: 12px;
  line-height: 1.6;
}
.avatar-large {
  width: 76px;
  height: 76px;
  margin: 0 auto;
  font-size: 30px;
}
.logout-button {
  display: block;
  width: 100%;
  padding: 16px;
  color: #a08b8c;
  background: none;
  margin-top: 16px;
}
.char-count {
  text-align: right;
  font-size: 10px;
  color: #aaa;
  margin-top: 6px;
}
.vip-page {
  background: #251d19;
  color: #f3d6b5;
  padding-bottom: 110px;
}
.plan-hero {
  padding: 30px 22px;
}
.plan-hero small {
  font-size: 10px;
  letter-spacing: 1.6px;
}
.plan-hero h1 {
  font-size: 28px;
  margin: 14px 0;
}
.plan-hero p {
  font-size: 12px;
  color: #b1967c;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 18px;
  gap: 9px;
}
.plan-grid button {
  background: #3b3028;
  border: 1px solid #69503c;
  color: #ddbea0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 22px 5px;
  border-radius: 12px;
}
.plan-grid .on {
  background: linear-gradient(145deg, #f6dbad, #c89661);
  color: #674026;
  border-color: #ffe7bd;
  box-shadow: 0 6px 25px #0002;
}
.plan-grid span {
  font-size: 11px;
}
.plan-grid strong {
  font-size: 23px;
}
.plan-grid small {
  font-size: 9px;
}
.plan-content {
  padding: 30px 20px;
}
.plan-content h2 {
  font-size: 16px;
}
.plan-content > p {
  font-size: 12px;
  line-height: 1.8;
  color: #b79b80;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 25px 0;
}
.benefit-grid > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
}
.benefit-grid b {
  font-size: 11px;
  font-weight: 500;
}
.benefit-grid small {
  font-size: 9px;
  color: #9e856d;
}
.plan-buy {
  align-items: center;
}
.plan-buy > div {
  flex: 1;
  color: #7c6a5e;
  font-size: 12px;
}
.plan-buy b {
  color: #d67a45;
  font-size: 25px;
  display: block;
}
.plan-buy .primary {
  flex: 1;
  max-width: 180px;
}
.coin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.coin-grid button {
  background: #fffaf5;
  color: #9a7859;
  border-color: #f0e6da;
}
.coin-grid .on {
  background: #fff0df;
  border-color: #dea56e;
}
.coins-page {
  padding-bottom: 110px;
}
.coins-page .plan-hero {
  background: linear-gradient(120deg, #fdf0df, #fffaf1);
  margin: 18px;
  border-radius: 15px;
  padding: 25px;
}
.coins-page .plan-hero h1 {
  color: #b46f40;
  font-size: 34px;
}
.notice-box {
  padding: 13px 16px;
  margin: 18px;
  color: #ab886e;
  background: #fff6eb;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.7;
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 20px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.ledger-row h3 {
  font-size: 14px;
  margin: 0 0 6px;
}
.ledger-row p {
  font-size: 11px;
  color: #9b8f98;
  margin: 5px 0;
}
.ledger-row small {
  font-size: 9px;
  color: #b2a6ae;
  overflow-wrap: anywhere;
}
.ledger-row strong {
  font-size: 18px;
  white-space: nowrap;
}
.positive {
  color: var(--red);
}
.notice-card {
  display: block;
  width: calc(100% - 36px);
  margin: 14px 18px;
  text-align: left;
  padding: 18px;
  border: 1px solid #f0ecef;
  border-radius: 12px;
  background: #fff;
}
.notice-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.notice-card strong {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}
.notice-card small {
  font-size: 9px;
  color: #b0a5ac;
}
.notice-card p {
  font-size: 12px;
  color: #988b95;
  line-height: 1.8;
  margin: 10px 0;
  max-height: 44px;
  overflow: hidden;
}
.unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.invite-page {
  background: linear-gradient(#fff9f2, #f8e9dc);
}
.invite-content {
  text-align: center;
  padding: 30px 25px;
}
.invite-content > small {
  display: block;
  letter-spacing: 2px;
  font-size: 9px;
  color: #b78d73;
  margin-top: 25px;
}
.invite-content h1 {
  font-size: 34px;
  margin: 15px 0;
}
.invite-content > p {
  color: #aa8a75;
  font-size: 13px;
  line-height: 1.8;
}
.invite-card {
  background: white;
  padding: 28px 20px;
  border-radius: 18px;
  margin-top: 25px;
  box-shadow: 0 15px 30px #b08a6520;
}
.invite-card > span > svg {
  width: 42px;
  height: 42px;
  color: #ce966f;
}
.invite-card h3 {
  margin: 15px 0;
  font-size: 17px;
}
.invite-url {
  font-size: 11px;
  color: #a28e9b;
  overflow-wrap: anywhere;
  padding: 14px;
  background: #f8f6f8;
  border-radius: 8px;
}
.landing-page {
  min-height: 100%;
  background: #201714;
  color: #fff;
  padding: 45px 25px;
}
.landing-page h1 {
  font-size: 39px;
  line-height: 1.25;
  margin: 30px 0 20px;
}
.landing-page > p {
  color: #c7a18c;
  font-size: 14px;
  line-height: 1.8;
}
.landing-page > img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 15px;
}
.download-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.download-actions > * {
  flex: 1;
  font-size: 10px;
  padding: 12px 4px;
}
.empty {
  text-align: center;
  padding: 65px 25px;
  color: #a69ba5;
}
.empty > svg {
  width: 45px;
  height: 45px;
  opacity: 0.5;
}
.empty h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  margin: 20px 0 25px;
}
.empty .primary {
  font-size: 12px;
}
.toast {
  position: absolute;
  z-index: 90;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  background: #262126ee;
  color: #fff;
  border-radius: 12px;
  padding: 13px 17px;
  font-size: 12px;
  line-height: 1.7;
  max-width: 90%;
  width: max-content;
  box-shadow: 0 8px 30px #0002;
  pointer-events: none;
}
.loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fbf6f3;
}
.loading p {
  font-size: 13px;
  color: #b49a8f;
  margin-top: 23px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: #0008;
  z-index: 40;
}
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: #302832;
  border-radius: 23px 23px 0 0;
  z-index: 41;
  padding: 25px 20px calc(25px + var(--safe));
  max-height: 82%;
  overflow: auto;
  box-shadow: 0 -10px 40px #0001;
}
.sheet h2 {
  font-size: 18px;
  margin: 10px 35px 20px 0;
}
.sheet > p {
  font-size: 13px;
  line-height: 1.8;
  color: #958593;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 30px;
}
.sheet-head h2 {
  margin-right: 0;
}
.sheet-close {
  position: absolute;
  top: 14px;
  right: 12px;
  color: #aa9ba8;
}
.sheet-grab {
  height: 4px;
  width: 35px;
  border-radius: 5px;
  background: #e7e1e6;
  position: absolute;
  top: 9px;
  left: calc(50% - 17px);
}
.speed-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 25px;
}
.speed-grid .chip {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding: 15px 12px;
}
.comment {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.comment > div:last-child {
  flex: 1;
}
.comment b {
  color: #958694;
  font-size: 12px;
}
.comment p {
  font-size: 13px;
  line-height: 1.7;
  margin: 7px 0;
  overflow-wrap: anywhere;
}
.comment small {
  font-size: 10px;
  color: #b4a4b1;
}
.comment .text-btn {
  margin-left: 12px;
  font-size: 11px;
}
.comment-input {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.comment-input input {
  border: 1px solid var(--line);
  background: #faf8fa;
  border-radius: 24px;
  padding: 11px 14px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
}
.comment-input .primary {
  font-size: 12px;
  padding: 10px 17px;
  border-radius: 25px;
}
.reply-label {
  font-size: 11px;
  color: #a28ba0;
  margin-top: 9px;
}
.comments-list {
  max-height: 40vh;
  overflow: auto;
}
.unlock-card {
  text-align: center;
  padding: 18px 7px;
}
.unlock-card > svg {
  height: 42px;
  width: 42px;
  color: #c99362;
}
.unlock-card h2 {
  margin: 15px 0;
}
.unlock-card p {
  font-size: 13px;
  line-height: 1.8;
  color: #a18b9b;
}
.unlock-card > .text-btn {
  display: block;
  margin: 15px;
}
.notice-body {
  white-space: pre-wrap;
}
.sheet .notice-box {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 360px) {
  .drama-grid {
    gap: 15px 7px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .cover-name {
    font-size: 14px;
  }
  .player-info h2 {
    font-size: 20px;
  }
  .plan-grid strong {
    font-size: 19px;
  }
  .feed-tabs {
    gap: 15px;
  }
  .profile-head {
    padding-left: 17px;
    padding-right: 17px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet {
    animation: sheet-in 0.2s ease-out;
  }
  @keyframes sheet-in {
    from {
      transform: translateY(25px);
      opacity: 0.5;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}
.launch-page {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #211714;
  color: white;
  padding: 25px;
}
.launch-page .brand-mark {
  width: 85px;
  height: 85px;
  font-size: 42px;
}
.launch-page h1 {
  font-size: 30px;
  margin: 26px 0 12px;
}
.launch-page p {
  color: #b49b8f;
  font-size: 13px;
}
.launch-page #launch-count {
  color: #bba79c;
  font-size: 11px;
  margin: 24px;
}
.invite-qr {
  display: grid;
  place-items: center;
  margin: 15px auto;
  max-width: 200px;
}
.invite-qr svg {
  width: 100%;
  height: auto;
}
.invite-sheet {
  max-height: min(88%, 760px);
  padding: 26px 22px calc(24px + var(--safe));
}
.invite-dialog {
  text-align: center;
}
.invite-dialog h2 {
  margin: 8px 34px 4px;
  font-size: 21px;
}
.invite-dialog > p {
  margin: 0;
  color: #77747b;
  font-size: 13px;
}
.invite-dialog .invite-qr {
  width: min(188px, 55vw);
  margin: 12px auto;
}
.invite-dialog .invite-url {
  margin: 8px 0 14px;
  padding: 10px;
}
.invite-dialog-actions {
  display: grid;
  gap: 9px;
}
.invite-dialog-actions button {
  min-height: 42px;
}
.invite-dialog .muted {
  margin-top: 12px;
  line-height: 1.5;
}
.download-qr {
  display: block;
  color: #c88963;
  font-size: 12px;
  padding: 10px;
}
.player .player-info p {
  position: relative;
  padding-right: 28px;
}
.player .player-info p .text-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  background: #15100e99;
}
.player.clear video {
  height: 100%;
}
.promo-card {
  overflow: hidden;
  border-radius: 15px;
  background: #241815;
  color: white;
  margin-top: 25px;
}
.promo-card > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.promo-card > div {
  padding: 20px;
}
.promo-card small {
  font-size: 9px;
  letter-spacing: 1px;
  color: #e9b49e;
}
.promo-card h2 {
  font-size: 25px !important;
  margin: 12px 0 !important;
}
.promo-card p {
  color: #b99f94;
  font-size: 12px;
  line-height: 1.8;
}
.promo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 11px;
}
.promo-nav button {
  padding: 7px 15px;
}

/* Shared H5 palette: one brand accent; gold is reserved for membership. */
:root {
  --brand: #ec6252;
  --brand-strong: #c54839;
  --brand-soft: #fff0ed;
  --surface: #ffffff;
  --surface-subtle: #f7f7f9;
  --gold: #a6763e;
  --red: var(--brand);
}
.chip.on,
.theme-row .on,
.tabs .on,
.wish-tabs .on {
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.text-btn,
.accent,
.profile-edit {
  color: var(--brand-strong);
}
.primary {
  background: var(--brand);
  color: white;
}
.secondary {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: var(--line);
}
.profile-page {
  background: var(--surface-subtle);
}
.wish-page {
  background: var(--surface-subtle);
  color: var(--ink);
}
.wish-heading > small,
.wish-heading h1 span {
  color: var(--brand-strong);
}
.wish-heading p,
.wish-form small,
.wish-card p,
.wish-card small {
  color: #77747b;
}
.wish-form,
.wish-card {
  background: var(--surface);
  border-color: var(--line);
}
.wish-form label {
  color: var(--ink);
}
.wish-form input,
.wish-form textarea {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: var(--line);
}
.wish-tabs button {
  color: #77747b;
}
.wish-tabs .on {
  border-color: var(--brand);
}
.wish-card h3,
.wish-card .wish-no {
  color: var(--ink);
}
.wish-card .vote {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: transparent;
}
.wish-card .vote.on {
  background: var(--brand);
  color: white;
}
.pending-tip {
  color: var(--brand-strong);
  background: var(--brand-soft);
}
.vip-page,
.coins-page {
  background: var(--surface);
  color: var(--ink);
  padding-bottom: 120px;
}
.vip-page .page-header {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.vip-page .plan-hero {
  background: linear-gradient(120deg, #fff7eb, #fff0ed);
}
.plan-hero p,
.plan-content > p {
  color: #806c58;
}
.plan-grid button {
  background: var(--surface-subtle);
  color: var(--ink);
  border-color: var(--line);
}
.plan-grid .on,
.coin-grid .on {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: var(--brand);
  box-shadow: none;
}
.vip-page .plan-grid .on {
  background: #fff5e6;
  color: #845927;
  border-color: #bb8c51;
}
.vip-page .benefit-grid {
  color: var(--gold);
}
.plan-buy {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.plan-buy .primary {
  background: var(--brand);
  color: white;
}
.invite-page {
  background: linear-gradient(var(--surface), var(--brand-soft));
}
.invite-content > small,
.invite-content > p {
  color: #77747b;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 12px;
  font-size: 12px;
}
.pagination button {
  padding: 9px 12px;
  border-radius: 8px;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.media-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.media-previews figure {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
}
.media-previews img,
.media-previews video {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--surface-subtle);
}
.media-previews figcaption {
  overflow-wrap: anywhere;
  font-size: 11px;
}
.media-previews button {
  padding: 5px;
}
.profile-head > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.profile-head h1 {
  overflow-wrap: anywhere;
}
.profile-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.profile-actions .profile-edit {
  white-space: nowrap;
}
.profile-id {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 24px;
}
.avatar-choice {
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
}
.avatar-choice.on {
  border-color: var(--brand);
}
.avatar-choice img {
  display: block;
  width: 100%;
  border-radius: 50%;
}
.profile-head .avatar {
  overflow: hidden;
  flex-shrink: 0;
}
.plan-grid strong { font-size:clamp(16px,5vw,23px); }
.benefit-grid { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; }
.notice-box { background:var(--brand-soft); color:#80645f; }
.coins-page .plan-hero { background:linear-gradient(120deg,var(--brand-soft),#fff9f7); }
.quick-grid svg { color:var(--brand-strong); }