:root {
  color-scheme: light;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #21232b;
  background: #f1f2f4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #242630;
  --muted: #8b8e98;
  --line: #eeedf0;
  --pink: #ec4b87;
  --rose: #fff0f5;
  --gold: #cc9148;
  --surface: #ffffff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { min-height: 100vh; background: #f1f2f4; }

button, input { font: inherit; }

button { color: inherit; }

.app-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 600px;
  margin: 0 auto;
  overflow: hidden;
  background: #fbf8f5;
  box-shadow: 0 0 0 1px rgba(29, 30, 37, .04), 0 12px 56px rgba(33, 34, 42, .12);
}

.topbar {
  z-index: 4;
  flex: 0 0 auto;
  padding: max(env(safe-area-inset-top), 10px) 18px 8px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #efedf0;
}

.topbar-inner { display: flex; align-items: center; min-height: 46px; gap: 10px; }

.brand-lockup { display: flex; align-items: center; min-width: 0; gap: 9px; }
.brand-lockup img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.brand-lockup div { display: grid; gap: 2px; }
.brand-lockup strong { font-size: 16px; line-height: 1.15; font-weight: 750; }
.brand-lockup small { color: #9a98a0; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: #f5f3f4; color: #565864; cursor: pointer; }
.balance-pill { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid #f4e7c6; border-radius: 16px; color: #a77830; background: #fff8e7; font-size: 12px; font-weight: 700; }

.screen { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.page-content { padding: 10px 17px 30px; }
.home-page { padding-top: 0; }

.category-row { display: flex; gap: 22px; height: 46px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-tab { position: relative; flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: #777983; font-size: 13px; font-weight: 600; cursor: pointer; }
.category-tab::after { position: absolute; right: 7px; bottom: 4px; left: 7px; height: 3px; border-radius: 3px; background: transparent; content: ""; }
.category-tab.is-active { color: #252631; font-size: 15px; font-weight: 800; }
.category-tab.is-active::after { background: var(--pink); }

.feature-banner { position: relative; display: flex; width: 100%; min-height: 184px; padding: 17px; overflow: hidden; border: 0; border-radius: 13px; background: #24212c; color: white; text-align: left; cursor: pointer; }
.feature-banner::before { position: absolute; inset: 0 0 0 auto; width: 55%; background: #373340; clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%); content: ""; }
.feature-banner::after { position: absolute; right: 17px; bottom: 20px; width: 45%; height: 1px; background: rgba(255, 255, 255, .22); content: ""; }
.feature-content { position: relative; z-index: 1; display: flex; width: 58%; flex-direction: column; align-items: flex-start; }
.eyebrow { display: flex; align-items: center; gap: 6px; color: #ea5b8c; font-size: 10px; font-weight: 750; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.feature-content > strong { margin-top: 8px; font-size: 24px; line-height: 1.17; letter-spacing: 0; }
.feature-subtitle { margin-top: 5px; color: #d3ced9; font-size: 10px; line-height: 1.45; }
.feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 7px 11px; border-radius: 5px; background: #ed4c88; font-size: 11px; font-weight: 700; }
.feature-visual { position: absolute; top: 13px; right: 15px; bottom: 10px; width: 40%; }
.feature-cover { position: absolute; top: 3px; right: 0; width: min(100%, 116px); height: calc(100% - 12px); border: 1px solid rgba(255,255,255,.42); border-radius: 7px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.26); transform: rotate(5deg); }
.feature-frame { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; box-shadow: 0 10px 24px rgba(0,0,0,.26); }
.feature-frame--back { top: 19px; left: 3px; width: 75px; height: 116px; transform: rotate(-8deg); background: #965667; color: #f2ded6; font-family: Georgia, serif; font-size: 15px; }
.feature-frame--back::after { position: absolute; right: 0; bottom: 0; left: 0; height: 58%; background: #452b3c; clip-path: polygon(50% 0, 100% 49%, 100% 100%, 0 100%, 0 42%); content: ""; }
.feature-frame--front { top: 7px; right: 0; width: 94px; height: 139px; flex-direction: column; gap: 6px; transform: rotate(7deg); background: #c5a66f; color: #301f2b; }
.feature-frame--front::before { position: absolute; inset: 10px; border: 1px solid rgba(48,31,43,.38); content: ""; }
.feature-frame--front b { position: relative; font-family: Georgia, serif; font-size: 45px; font-weight: 400; }
.feature-frame--front small { position: relative; font-size: 10px; font-weight: 700; }
.feature-tag { position: absolute; top: 1px; right: -3px; z-index: 2; padding: 4px 6px; border-radius: 4px; background: #f7c45c; color: #30202a; font-size: 8px; font-weight: 800; }
.feature-progress { position: absolute; bottom: 2px; left: 44%; z-index: 2; display: flex; gap: 4px; }
.feature-progress i { width: 5px; height: 5px; border-radius: 4px; background: #807a83; }
.feature-progress i:first-child { width: 15px; background: #f2c660; }

.ad-banner { display: block; min-width: 0; margin: 12px 0; overflow: hidden; border: 1px solid #ece6e4; border-radius: 8px; background: #fff; }
.ad-banner-link { display: grid; grid-template-columns: minmax(84px, 30%) minmax(0, 1fr); min-height: 74px; color: inherit; text-decoration: none; }
.ad-banner-link--text { grid-template-columns: minmax(0, 1fr); }
.ad-banner-image { display: block; width: 100%; height: 100%; min-height: 74px; max-height: 112px; object-fit: cover; background: #e9e4e2; }
.ad-banner-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 12px; }
.ad-label { align-self: flex-start; padding: 2px 5px; border: 1px solid #e4c99a; border-radius: 3px; color: #98703a; font-size: 8px; line-height: 1.2; }
.ad-banner-copy strong { overflow: hidden; color: #282a32; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; }
.ad-banner-copy > span:last-child:not(.ad-label) { display: -webkit-box; overflow: hidden; color: #88838a; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ad-banner-link[href]:active { opacity: .86; }

.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 18px 2px 17px; }
.quick-links button { display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #5b5d69; font-size: 10px; cursor: pointer; }
.quick-links button svg { width: 21px; height: 21px; color: var(--pink); }
.quick-links button:nth-child(2) svg { color: #5084c4; }
.quick-links button:nth-child(3) svg { color: #b78a40; }
.quick-links button:nth-child(4) svg { color: #59a38f; }

.section-title, .compact-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title { margin: 4px 0 11px; }
.section-title h2, .compact-heading h2 { margin: 0; font-size: 16px; font-weight: 780; }
.section-title > div > span { display: block; margin-top: 3px; color: #a1a1a8; font-size: 10px; }
.text-command { display: inline-flex; align-items: center; gap: 2px; padding: 6px 0 6px 7px; border: 0; background: transparent; color: #9999a1; font-size: 11px; cursor: pointer; }
.drama-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; }
.drama-card { min-width: 0; }
.poster-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.poster-art { position: relative; display: flex; aspect-ratio: 0.78; align-items: flex-end; width: 100%; padding: 13px 11px; overflow: hidden; border-radius: 8px; isolation: isolate; color: white; box-shadow: inset 0 0 0 1px rgba(25,25,35,.08); }
.poster-art::before { position: absolute; inset: 0; z-index: -2; background: #63515d; content: ""; }
.poster-art::after { position: absolute; top: -18%; right: -26%; z-index: -1; width: 76%; height: 126%; border-left: 1px solid rgba(255,255,255,.23); transform: rotate(23deg); content: ""; }
.poster-cover { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; }
.art-rose { background: #8b4d62; }
.art-rose::before { background: linear-gradient(135deg, #9c546d 0 39%, #4c3449 39% 68%, #292c3d 68%); }
.art-blue { background: #36576d; }
.art-blue::before { background: linear-gradient(145deg, #8db5be 0 28%, #496b79 28% 61%, #28384e 61%); }
.art-gold { background: #9a7651; }
.art-gold::before { background: linear-gradient(135deg, #c89e5d 0 36%, #66505a 36% 66%, #28313e 66%); }
.art-teal { background: #276a67; }
.art-teal::before { background: linear-gradient(135deg, #67a89b 0 31%, #385d66 31% 66%, #252f3f 66%); }
.art-violet { background: #665577; }
.art-violet::before { background: linear-gradient(145deg, #9c82a3 0 36%, #655675 36% 70%, #312e45 70%); }
.art-coral { background: #ad685a; }
.art-coral::before { background: linear-gradient(140deg, #d48e69 0 34%, #765865 34% 68%, #302e3c 68%); }
.poster-stamp { position: absolute; top: 10px; left: 10px; padding: 4px 6px; border-radius: 3px; background: rgba(25,25,32,.34); color: #ffe6a0; font-size: 9px; font-weight: 700; }
.poster-copy { position: absolute; top: 24%; right: 10px; left: 12px; color: rgba(255,255,255,.8); font-size: 9px; line-height: 1.5; text-align: right; writing-mode: vertical-rl; }
.poster-art > strong { max-width: 100%; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 15px; font-weight: 750; line-height: 1.35; text-shadow: 0 1px 5px rgba(0,0,0,.25); }
.poster-meta { position: absolute; right: 9px; bottom: 10px; color: rgba(255,255,255,.8); font-size: 8px; }
.drama-card-info { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 1px 0; }
.drama-card-info > span { min-width: 0; display: grid; gap: 3px; }
.drama-card-info strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.drama-card-info small { overflow: hidden; color: #9697a0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tiny-action { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 0; border-radius: 50%; background: #f8f2f4; color: #ba8799; cursor: pointer; }
.tiny-action.is-liked { color: #e34c83; background: #ffe7ef; }
.tiny-action.is-liked svg { fill: #e34c83; }
.invite-strip { position: relative; display: block; width: 100%; margin: 22px 0 20px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.invite-strip img { display: block; width: 100%; height: 96px; object-fit: cover; object-position: center; }
.invite-strip-arrow { position: absolute; right: 8px; bottom: 9px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.86); color: #a94e2e; }
.end-note { padding: 26px 0 6px; color: #bbb9bf; font-size: 10px; text-align: center; }

.bottom-nav { z-index: 5; display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, 1fr); min-height: 64px; padding: 7px 8px max(env(safe-area-inset-bottom), 8px); border-top: 1px solid #efedf0; background: rgba(255,255,255,.98); }
.nav-item { display: grid; justify-items: center; align-content: center; gap: 3px; padding: 0; border: 0; background: transparent; color: #a3a3ab; font-size: 9px; cursor: pointer; }
.nav-item img { display: block; width: 22px; height: 22px; opacity: .63; }
.nav-item.is-active { color: var(--pink); font-weight: 700; }
.nav-item.is-active img { opacity: 1; }

.search-field { display: flex; height: 42px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #ece9eb; border-radius: 7px; background: #fff; color: #a3a1aa; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-field input::placeholder { color: #b5b3bb; }
.search-clear { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 0; background: transparent; color: #a4a3aa; cursor: pointer; }
.search-block { margin: 23px 0 20px; }
.compact-heading { min-height: 24px; }
.compact-heading span { color: #a2a1a9; font-size: 10px; }
.keyword-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.keyword-list button { padding: 7px 10px; border: 0; border-radius: 5px; background: #f3eff1; color: #63646d; font-size: 10px; cursor: pointer; }
.category-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.category-shelf button { display: grid; min-height: 80px; grid-template-columns: 35px 1fr; align-content: center; align-items: center; gap: 3px 8px; padding: 10px 8px; border: 1px solid #f0edf0; border-radius: 7px; background: #fff; text-align: left; cursor: pointer; }
.category-mark { display: grid; width: 34px; height: 34px; grid-row: span 2; place-items: center; border-radius: 9px; font-size: 15px; }
.mark-pink { background: #ffe6ed; color: #db4a7c; }
.mark-violet { background: #efe8ff; color: #765bb0; }
.mark-gold { background: #fff0d4; color: #b7802c; }
.category-shelf button span { font-size: 10px; font-weight: 700; white-space: nowrap; }
.category-shelf button small { color: #a6a4ac; font-size: 9px; }
.results-heading { margin: 24px 0 12px; }
.empty-state { grid-column: 1 / -1; padding: 40px 0; color: #9998a0; font-size: 12px; text-align: center; }

.checkin-card { display: flex; min-height: 154px; align-items: center; justify-content: space-between; padding: 18px; overflow: hidden; border-radius: 10px; background: #fff1e2; }
.checkin-copy { position: relative; z-index: 1; }
.eyebrow--warm { color: #d7803a; }
.checkin-copy h2 { margin: 7px 0 5px; font-size: 17px; }
.checkin-copy p { margin: 0; color: #91887e; font-size: 10px; }
.checkin-card img { width: 86px; height: 86px; object-fit: contain; margin-right: -2px; }
.primary-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; padding: 0 15px; border: 0; border-radius: 5px; background: var(--pink); color: white; font-size: 11px; font-weight: 700; cursor: pointer; }
.primary-button:disabled { background: #d4c6cb; cursor: default; }
.streak-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 11px 0 24px; }
.streak-day { display: grid; justify-items: center; gap: 7px; padding: 8px 2px; border-radius: 6px; background: white; color: #92919a; font-size: 9px; }
.streak-day b { color: #c7903c; font-size: 10px; }
.streak-day.is-done { background: #fff3d4; color: #9c752d; }
.task-heading { margin: 0 0 11px; }
.task-list { overflow: hidden; border: 1px solid #f0edf0; border-radius: 8px; background: #fff; }
.task-row { display: flex; min-height: 76px; align-items: center; gap: 10px; padding: 10px 11px; border-bottom: 1px solid #f1eef0; }
.task-row:last-child { border-bottom: 0; }
.task-icon { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 9px; background: #eaf2ff; color: #5a8bcc; }
.task-icon--favorite { background: #ffedf3; color: #d85f8b; }
.task-icon--share { background: #e8f5ef; color: #4a9a7a; }
.task-description { display: grid; min-width: 0; flex: 1; gap: 2px; }
.task-description strong { font-size: 11px; }
.task-description span { overflow: hidden; color: #9b9aa2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.task-description small { color: #c09a58; font-size: 9px; }
.task-reward { display: grid; justify-items: end; gap: 5px; }
.task-reward > b { color: #bd8a3b; font-size: 10px; }
.claim-button { min-width: 51px; padding: 5px 7px; border: 1px solid #f4c1d2; border-radius: 4px; background: #fff2f6; color: #d3487c; font-size: 9px; cursor: pointer; }
.claim-button:disabled, .claim-button.is-claimed { border-color: #ece9eb; background: #f5f4f5; color: #aaa9b0; cursor: default; }
.fine-print { margin: 12px 0 0; color: #aaa8ae; font-size: 9px; line-height: 1.6; }

.profile-page { padding-top: 16px; }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 15px 12px; border-radius: 9px; background: #fff; }
.profile-avatar { display: grid; width: 49px; height: 49px; flex: 0 0 49px; place-items: center; overflow: hidden; border: 1px solid #f4dce6; border-radius: 50%; background: #fff4f7; }
.profile-avatar img { width: 39px; height: 39px; object-fit: contain; }
.profile-identity { display: grid; flex: 1; gap: 4px; }
.profile-identity strong { font-size: 13px; }
.profile-identity span { color: #a1a0a8; font-size: 9px; }
.outline-button { min-height: 29px; padding: 0 9px; border: 1px solid #f1b5ca; border-radius: 4px; background: #fff8fa; color: #d84c80; font-size: 10px; cursor: pointer; }
.wallet-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0 13px; }
.wallet-summary > button { display: grid; min-height: 81px; grid-template-columns: 30px 1fr; align-content: center; align-items: center; gap: 6px 8px; padding: 11px 9px; border: 1px solid #f0edf0; border-radius: 7px; background: #fff; text-align: left; cursor: pointer; }
.wallet-symbol, .vip-symbol { display: grid; width: 30px; height: 30px; grid-row: span 2; place-items: center; border-radius: 8px; background: #edf5ff; color: #558cc8; }
.vip-symbol { background: #fff2d9; color: #b17b30; }
.wallet-summary button > span:nth-child(2) { display: grid; gap: 4px; }
.wallet-summary small { color: #9e9da5; font-size: 9px; }
.wallet-summary strong { font-size: 12px; }
.summary-cta { display: flex; grid-column: 2; align-items: center; gap: 1px; color: #9c9aa2; font-size: 9px; }
.profile-menu { overflow: hidden; border: 1px solid #f0edf0; border-radius: 8px; background: #fff; }
.profile-menu > button { display: grid; min-height: 58px; grid-template-columns: 33px 1fr auto 15px; align-items: center; gap: 8px; padding: 7px 11px; border: 0; border-bottom: 1px solid #f1eef0; background: white; text-align: left; cursor: pointer; }
.profile-menu > button:last-child { border-bottom: 0; }
.menu-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; }
.menu-icon--gold { background: #fff0d8; color: #b78136; }
.menu-icon--blue { background: #eaf3ff; color: #5b8ac2; }
.menu-icon--pink { background: #ffedf4; color: #d55c8a; }
.menu-icon--green { background: #eaf5ef; color: #589879; }
.menu-icon--violet { background: #f1edff; color: #7d70ba; }
.profile-menu strong { font-size: 11px; }
.profile-menu small { color: #a3a1aa; font-size: 9px; }
.profile-menu > button > svg { color: #b1afb7; }
.settings-row { display: flex; width: 100%; min-height: 47px; align-items: center; gap: 10px; margin-top: 10px; padding: 0 12px; border: 1px solid #f0edf0; border-radius: 7px; background: white; color: #62636d; font-size: 10px; text-align: left; cursor: pointer; }
.settings-row svg:last-child { margin-left: auto; color: #b2b0b8; }
.version-note { padding: 18px 0 6px; color: #c2c0c7; font-size: 9px; text-align: center; }

.detail-page { padding-top: 12px; }
.vip-hero { position: relative; display: flex; min-height: 178px; align-items: center; overflow: hidden; padding: 18px; border-radius: 10px; background: #222128; color: white; }
.vip-hero::after { position: absolute; top: 0; right: 0; bottom: 0; width: 47%; border-left: 1px solid rgba(238,199,122,.34); background: #312a2c; clip-path: polygon(30% 0,100% 0,100% 100%,0 100%); content: ""; }
.vip-hero > div { position: relative; z-index: 1; }
.eyebrow--gold { color: #f0c678; }
.vip-hero h2 { margin: 8px 0 5px; font-size: 23px; line-height: 1.15; }
.vip-hero p { margin: 0; color: #c8c1bb; font-size: 9px; }
.vip-hero img { position: absolute; z-index: 1; right: 10px; width: 139px; height: 139px; object-fit: contain; }
.benefit-panel { margin-top: 16px; padding: 13px; border: 1px solid #f0edf0; border-radius: 8px; background: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 13px; }
.benefit-grid > div { display: grid; justify-items: center; gap: 5px; padding: 10px 3px; border-radius: 6px; background: #fbf9f8; color: #a47b3e; }
.benefit-grid b { color: #494952; font-size: 10px; }
.benefit-grid small { color: #9e9ca4; font-size: 8px; white-space: nowrap; }
.plan-heading { margin: 21px 0 10px; }
.plan-list { display: grid; gap: 8px; }
.plan-card { position: relative; display: grid; min-height: 80px; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: 5px 10px; padding: 12px 13px; border: 1px solid #eeebee; border-radius: 7px; background: white; text-align: left; cursor: pointer; }
.plan-name { color: #55545d; font-size: 11px; font-weight: 700; }
.plan-card > strong { grid-row: span 2; color: #d34d7c; font-size: 20px; }
.plan-card > strong small { color: #9997a0; font-size: 9px; font-weight: 400; }
.plan-card > span:not(.plan-name):not(.plan-badge) { color: #a2a0a8; font-size: 9px; }
.plan-card > b { position: absolute; right: 12px; bottom: 10px; color: #bd8a48; font-size: 9px; }
.plan-card--featured { border-color: #edc787; background: #fffaf0; }
.plan-badge { position: absolute; top: -1px; right: 12px; padding: 3px 7px; border-radius: 0 0 5px 5px; background: #d7a95d; color: white; font-size: 8px; }

.wallet-hero { position: relative; display: flex; min-height: 150px; align-items: center; justify-content: space-between; padding: 18px; overflow: hidden; border-radius: 9px; background: #222128; color: white; }
.wallet-hero > div { display: grid; gap: 6px; }
.wallet-hero span, .wallet-hero small { color: #d1c9bb; font-size: 10px; }
.wallet-hero strong { color: #f2c870; font-size: 28px; }
.wallet-hero img { width: 120px; height: 112px; object-fit: contain; }
.diamond-pack-list { overflow: hidden; border: 1px solid #f0edf0; border-radius: 8px; background: white; }
.diamond-pack { display: grid; min-height: 66px; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid #f1eef0; background: white; text-align: left; cursor: pointer; }
.diamond-pack:last-child { border-bottom: 0; }
.pack-gem { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; background: #edf5ff; color: #5e9bd2; }
.diamond-pack:nth-child(2) .pack-gem { color: #b78b40; background: #fff5e2; }
.diamond-pack:nth-child(3) .pack-gem { color: #8b67bd; background: #f3edff; }
.diamond-pack > span:nth-child(2) { display: grid; gap: 4px; }
.diamond-pack b { font-size: 11px; }
.diamond-pack small { color: #a1a0a8; font-size: 9px; }
.diamond-pack > strong { color: #db4e7f; font-size: 12px; }
.ledger-panel { margin-top: 18px; padding: 13px; border: 1px solid #f0edf0; border-radius: 8px; background: white; }
.ledger-row { display: flex; min-height: 53px; align-items: center; gap: 9px; border-bottom: 1px solid #f1eef0; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #fff1db; color: #b87e2e; font-size: 15px; }
.ledger-mark--muted { background: #eef4fb; color: #6d8bac; }
.ledger-row div { display: grid; flex: 1; gap: 3px; }
.ledger-row b { font-size: 10px; }
.ledger-row small { color: #aaa8b0; font-size: 8px; }
.ledger-row > strong { color: #6ca57f; font-size: 10px; }

.invite-hero { position: relative; overflow: hidden; border-radius: 8px; background: #f5c35d; }
.invite-hero img { display: block; width: 100%; height: 128px; object-fit: cover; object-position: center; }
.invite-note { position: absolute; right: 11px; bottom: 8px; padding: 4px 7px; border-radius: 4px; background: rgba(255,255,255,.88); color: #7d492c; font-size: 8px; }
.invite-code-card { display: grid; min-height: 102px; grid-template-columns: 1fr auto; align-content: center; align-items: center; gap: 6px 9px; margin-top: 13px; padding: 13px; border: 1px solid #f0edf0; border-radius: 8px; background: white; }
.invite-code-card > span { color: #9997a0; font-size: 10px; }
.invite-code-card > strong { color: #272832; font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 1px; }
.invite-code-card > button { display: inline-flex; grid-row: span 2; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #f0bfd0; border-radius: 5px; background: #fff4f8; color: #d14f7d; font-size: 9px; cursor: pointer; }
.invite-reward { margin-top: 15px; padding: 13px; border: 1px solid #f0edf0; border-radius: 8px; background: white; }
.reward-line { display: flex; min-height: 66px; align-items: center; gap: 9px; border-bottom: 1px solid #f0edf0; }
.reward-line:last-child { border-bottom: 0; }
.reward-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #eaf3ff; color: #548fc7; }
.reward-icon--gift { background: #fff0d8; color: #b58334; }
.reward-line > div { display: grid; flex: 1; gap: 4px; }
.reward-line b { font-size: 10px; }
.reward-line small { color: #9d9ba4; font-size: 8px; }
.reward-line > strong { color: #bf8938; font-size: 11px; }
.reward-line > strong small { color: #a49ea0; font-size: 8px; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 13px 0; border: 1px solid #f0edf0; border-radius: 8px; background: white; }
.invite-stats > div { display: grid; gap: 6px; padding: 13px; text-align: center; }
.invite-stats > div + div { border-left: 1px solid #f0edf0; }
.invite-stats span { color: #9d9ba4; font-size: 9px; }
.invite-stats strong { font-size: 15px; }
.invite-stats strong small { color: #9d9ba4; font-size: 8px; font-weight: 400; }
.invite-share { width: 100%; margin: 0; }

.player-page { padding: 0 0 24px; }
.player-stage { position: relative; display: grid; min-height: 265px; place-items: center; overflow: hidden; color: white; }
.player-stage::before { position: absolute; inset: 0; opacity: .9; background: linear-gradient(145deg, #9c546d 0 36%, #4c3449 36% 65%, #292c3d 65%); content: ""; }
.player-stage.art-blue::before { background: linear-gradient(145deg, #8db5be 0 28%, #496b79 28% 61%, #28384e 61%); }
.player-stage.art-gold::before { background: linear-gradient(145deg, #c89e5d 0 36%, #66505a 36% 66%, #28313e 66%); }
.player-stage.art-teal::before { background: linear-gradient(145deg, #67a89b 0 31%, #385d66 31% 66%, #252f3f 66%); }
.player-stage.art-violet::before { background: linear-gradient(145deg, #9c82a3 0 36%, #655675 36% 70%, #312e45 70%); }
.player-stage.art-coral::before { background: linear-gradient(140deg, #d48e69 0 34%, #765865 34% 68%, #302e3c 68%); }
.player-stage--video { min-height: 0; aspect-ratio: 16 / 9; background: #111; }
.player-stage--video::before { display: none; }
.player-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-height: 52vh; background: #111; object-fit: contain; }
.player-unconfigured { position: absolute; top: calc(50% + 39px); left: 12px; right: 12px; color: rgba(255,255,255,.88); font-size: 10px; text-align: center; }
.player-mark { display: grid; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(23,21,31,.2); }
.player-status { position: absolute; right: 14px; bottom: 12px; color: rgba(255,255,255,.84); font-size: 9px; }
.player-back, .player-expand { position: absolute; z-index: 2; top: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 0; border-radius: 4px; background: rgba(22,20,29,.45); color: white; font-size: 9px; cursor: pointer; }
.player-stage--video .player-status { z-index: 2; top: 18px; right: 54px; bottom: auto; pointer-events: none; text-shadow: 0 1px 3px #000; }
.player-back { left: 12px; }
.player-expand { right: 12px; }
.player-details { padding: 17px 17px 6px; }
.player-title-row { display: flex; justify-content: space-between; gap: 12px; }
.player-title-row h2 { margin: 5px 0; font-size: 17px; }
.player-title-row p { margin: 0; color: #97959e; font-size: 9px; }
.share-player { display: grid; width: 42px; height: 47px; flex: 0 0 42px; justify-items: center; align-content: center; gap: 2px; border: 0; background: transparent; color: #c36b87; cursor: pointer; }
.share-player small { font-size: 8px; }
.player-description { margin: 12px 0 0; color: #73747d; font-size: 10px; line-height: 1.65; }
.episode-heading { margin: 14px 17px 9px; }
.episode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 0 17px; }
.episode-button { min-height: 34px; border: 1px solid #eeebee; border-radius: 5px; background: white; color: #62636d; font-size: 10px; cursor: pointer; }
.episode-button.is-active { border-color: #ec5b8e; background: #fff2f6; color: #d94e80; font-weight: 750; }
.player-page > .fine-print { padding: 0 17px; }
.player-page > .ad-banner { margin: 18px 17px 12px; width: calc(100% - 34px); }

.toast { position: fixed; z-index: 20; right: 50%; bottom: calc(max(env(safe-area-inset-bottom), 8px) + 82px); max-width: min(84vw, 380px); padding: 9px 14px; border-radius: 6px; background: rgba(34,34,43,.92); color: white; font-size: 10px; opacity: 0; pointer-events: none; transform: translate(50%, 8px); transition: opacity .16s ease, transform .16s ease; }
.toast.is-visible { opacity: 1; transform: translate(50%, 0); }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(24,24,31,.42); }
.modal-panel { position: relative; width: min(100%, 330px); padding: 24px 20px 18px; border-radius: 9px; background: white; box-shadow: 0 18px 60px rgba(15,15,24,.2); text-align: center; }
.modal-close { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; background: transparent; }
.modal-mark { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 auto 12px; border-radius: 12px; background: #fff0f5; color: #df5485; }
.modal-panel h2 { margin: 0; font-size: 16px; }
.modal-panel p { margin: 8px 0 16px; color: #898891; font-size: 10px; line-height: 1.7; }
.modal-confirm { width: 100%; margin: 0; }

@media (min-width: 650px) {
  .app-shell { height: min(100dvh, 900px); min-height: 650px; margin: 18px auto; border-radius: 17px; }
  .feature-banner { min-height: 198px; }
  .poster-art { aspect-ratio: .82; }
}

@media (max-width: 360px) {
  .page-content { padding-right: 13px; padding-left: 13px; }
  .feature-content > strong { font-size: 21px; }
  .feature-frame--front { width: 84px; }
  .feature-frame--back { width: 67px; }
  .category-row { gap: 18px; }
  .category-shelf button { grid-template-columns: 29px 1fr; gap: 3px 6px; padding: 8px 5px; }
  .category-mark { width: 29px; height: 29px; }
  .category-shelf button span { font-size: 9px; }
  .category-shelf button small { font-size: 8px; }
}