/* 手机主题采用全屏短剧播放与固定底栏，桌面布局继续使用原有主题 */
.tales-mobile-feed, .tales-bottom-nav, .tales-mobile-player-search, .tales-mobile-story, .tales-mobile-progress, .tales-mobile-catalog { display: none; }
.tales-mobile-vip-header, .tales-mobile-plan-choice, .tales-mobile-vip-buy, .tales-purchase-section:not(.is-active) { display: none; }
.tales-mobile-account { display: none; }
.tales-series-mobile-header { display: none; }
.tales-purchase-terms-mobile { display: none; }
.tales-settings-page { width: min(100%, 540px); min-height: 70dvh; margin: 0 auto; padding-bottom: 24px; border-radius: 10px; background: var(--tv-bg); color: var(--tales-text); }
.tales-settings-heading { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 10px; }
.tales-settings-heading > a { position: absolute; left: 2px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--tales-text); font-size: 18px; }
.tales-shell .tales-settings-heading h1 { margin: 0; color: var(--tales-text); font-size: 16px; font-weight: 500; line-height: 1.5; }
.tales-settings-list { margin: 0 11px; overflow: hidden; border-radius: 9px; background: color-mix(in srgb, var(--tv-bg) 94%, var(--tales-text)); }
.tales-settings-list > a, .tales-settings-list > button, .tales-settings-language, .tales-settings-logout > button { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 57px; padding: 13px 16px; border: 0; background: transparent; color: var(--tales-text); text-align: left; text-decoration: none; font: inherit; font-size: 16px; line-height: 1.4; }
.tales-settings-list > a > span, .tales-settings-list > button > span, .tales-settings-language > span, .tales-settings-logout > button > span { flex: 1; }
.tales-settings-list i:first-child { flex: 0 0 17px; color: var(--tales-muted); text-align: center; font-size: 18px; }
.tales-settings-list .fa-chevron-right { flex-shrink: 0; color: var(--tales-muted); font-size: 12px; }
.tales-settings-list small { flex-shrink: 0; color: var(--tales-muted); font-size: 16px; }
.tales-settings-list .tales-settings-version { display: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tales-settings-list > a:hover, .tales-settings-list > button:hover:enabled, .tales-settings-logout > button:hover { background: color-mix(in srgb, var(--tales-text) 8%, transparent); }
.tales-settings-list button:disabled { cursor: default; }
.tales-settings-list form { margin: 0; }
.tales-settings-message { margin: 16px; color: var(--tales-muted); font-size: 13px; }
.tales-settings-account, .tales-settings-password { background: color-mix(in srgb, var(--tv-bg) 94%, var(--tales-text)); }
.tales-settings-account fieldset, .tales-settings-password fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tales-settings-avatar, .tales-settings-detail, .tales-settings-nickname, .tales-settings-password-link { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0; padding: 16px 12px; color: var(--tales-text); font-size: 16px; line-height: 1.5; }
.tales-settings-avatar { position: relative; min-height: 72px; cursor: pointer; }
.tales-settings-avatar > span:first-child, .tales-settings-detail > span:first-child, .tales-settings-nickname > label { flex-shrink: 0; margin-right: auto; }
.tales-settings-avatar-control { display: flex; align-items: center; gap: 10px; }
.tales-settings-avatar-control img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tales-settings-list .tales-settings-avatar-placeholder { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--tv-bg) 85%, var(--tales-text)); color: var(--tales-muted); font-size: 20px; }
.tales-settings-avatar input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.tales-settings-avatar:focus-within { outline: 2px solid var(--tales-red); outline-offset: -3px; }
.tales-settings-detail > span:last-child { min-width: 0; overflow-wrap: anywhere; color: inherit; text-align: right; }
.tales-settings-nickname input { flex: 1; min-width: 0; width: 100%; height: 24px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: inherit; font: inherit; text-align: right; }
.tales-settings-nickname input:focus-visible { box-shadow: 0 1px var(--tales-red); }
.tales-settings-nickname .tales-settings-edit-hint { flex: 0 0 auto; margin: 0; cursor: text; }
.tales-settings-account i.fa-chevron-right { flex: 0 0 14px; width: 14px; color: var(--tales-muted); font-size: 14px; }
.tales-settings-password-link { justify-content: space-between; text-decoration: none; }
.tales-settings-password-link:hover { background: color-mix(in srgb, var(--tales-text) 8%, transparent); color: var(--tales-text); }
.tales-settings-save-row { padding: 16px 12px; }
.tales-settings-save { display: block; width: 100%; min-height: 48px; margin: 40px 0 0; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--tales-red-dark); color: #fff; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.tales-settings-save:hover:enabled { background: var(--tales-red); }
.tales-settings-save:disabled, fieldset:disabled .tales-settings-save { opacity: .6; cursor: wait; }
.tales-settings-password-field { padding: 16px 12px 0; }
.tales-settings-password-field > label { display: block; margin-bottom: 10px; color: var(--tales-text); font-size: 16px; }
.tales-settings-password-input { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--tales-text) 40%, var(--tv-bg)); }
.tales-settings-password-input:focus-within { border-color: var(--tales-red); }
.tales-settings-password-input input { flex: 1; min-width: 0; width: 100%; min-height: 44px; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--tales-text); font: inherit; font-size: 16px; }
.tales-settings-password-input input::placeholder { color: var(--tales-muted); font-size: 14px; }
.tales-settings-password-input button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--tales-muted); cursor: pointer; }
.tales-settings-password .validation-message { margin-top: 6px; color: color-mix(in srgb, #e12f50 60%, var(--tales-text)); font-size: 13px; }
.tales-settings-password-help { margin: 16px 12px 0; color: var(--tales-muted); font-size: 13px; line-height: 1.6; }
.tales-settings-password .tales-settings-save { margin-top: 24px; }
.tales-settings-page :is(a, button):focus-visible { outline: 2px solid var(--tales-red); outline-offset: -3px; }
.tales-mobile-episodes { width: 100%; max-width: none; max-height: min(70dvh, 700px); margin: auto 0 0; padding: 24px 18px max(24px, env(safe-area-inset-bottom)); overflow: auto; border: 0; border-radius: 18px 18px 0 0; background: #202020; color: #fff; }
.tales-mobile-episodes::backdrop { background: #0009; }
.tales-mobile-episodes > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tales-mobile-episodes h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.4; }
.tales-mobile-episodes p { margin: 0; color: #aaa; font-size: 13px; }
.tales-mobile-episodes header button { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #303030; color: #fff; font-size: 20px; }
.tales-mobile-episode-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tales-mobile-episode-grid a { position: relative; display: grid; place-items: center; min-height: 48px; border: 1px solid transparent; border-radius: 8px; background: #333; color: #eee; font-size: 17px; }
.tales-mobile-episode-grid a.active { border-color: #f34558; background: #58212a; color: #ff6377; }
.tales-mobile-episode-grid a i { position: absolute; right: 5px; top: 5px; color: #aaa; font-size: 9px; }
@media (max-width: 768px) {
	/* 手机主页面隐藏滚动条，保留内容滚动 */
	html:has(.tales-explore-page, .tales-mobile-account, .tales-shell[data-mobile-tab="membership"]) { scrollbar-width: none; }
	html:has(.tales-explore-page, .tales-mobile-account, .tales-shell[data-mobile-tab="membership"])::-webkit-scrollbar { display: none; }
	.tales-shell:has(.tales-series-page) { padding-bottom: 0; }
	.tales-shell:has(.tales-series-page) > .tales-header,
	.tales-shell:has(.tales-series-page) > .tales-footer,
	.tales-shell:has(.tales-series-page) > .tales-bottom-nav { display: none; }
	.tales-shell:has(.tales-series-page) > .tales-content { padding-top: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
	.tales-series-mobile-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; min-height: calc(44px + env(safe-area-inset-top, 0px)); margin: 0 -16px 12px; padding-top: env(safe-area-inset-top, 0px); background: #111; }
	.tales-series-mobile-header > a { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 2px; color: #eee; text-decoration: none; font-size: 20px; }
	.tales-series-mobile-header > a:focus-visible { outline: 2px solid #ff5aa9; outline-offset: -4px; border-radius: 6px; }
	:root { --tales-mobile-nav-height: 56px; --tales-mobile-bottom: calc(var(--tales-mobile-nav-height) + env(safe-area-inset-bottom, 0px)); }
	.tales-shell { min-height: 100dvh; padding-bottom: var(--tales-mobile-bottom); }
	.tales-content { width: 100%; min-width: 0; padding-bottom: 32px; }
	.tales-bottom-nav { position: fixed; z-index: 70; inset: auto 0 0; display: grid; grid-template-columns: .8fr 1fr 1.25fr 1fr; align-items: stretch; height: var(--tales-mobile-bottom); padding: 0 10px env(safe-area-inset-bottom, 0px); border-top: 1px solid #242424; background: #000; font-size: 16px; font-weight: 400; }
	.tales-bottom-nav a { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 3px; color: #888; text-decoration: none; -webkit-tap-highlight-color: transparent; }
	.tales-bottom-nav a.active { color: #f5f5f5; }
	.tales-bottom-nav a:focus-visible { outline: 2px solid #eee; outline-offset: -5px; }
	.tales-mobile-menu, .tales-mobile-nav { display: none; }
	.tales-header .tales-download, .tales-header .tales-language { display: none; }
	.tales-header-search { width: 38px; }
	.tales-header-search input { display: none; }
	.tales-header-actions { margin-left: auto; }
	.tales-footer { margin-bottom: 0; }
	.tales-desktop-home { display: none; }
	body:has(.tales-mobile-feed), body:has(.tales-watch-layout) { background: #000; }
	.tales-shell:has(.tales-mobile-feed), .tales-shell:has(.tales-watch-layout) { background: #000; color: #fff; }
	.tales-shell:has(.tales-mobile-feed) > .tales-header, .tales-shell:has(.tales-watch-layout) > .tales-header,
	.tales-shell:has(.tales-mobile-feed) > .tales-footer, .tales-shell:has(.tales-watch-layout) > .tales-footer { display: none; }
	.tales-shell:has(.tales-mobile-feed) > .tales-content, .tales-shell:has(.tales-watch-layout) > .tales-content { margin: 0; padding: 0; }
	.tales-mobile-feed { position: fixed; inset: 0 0 var(--tales-mobile-bottom); display: block; overflow: hidden; background: #000; color: #fff; }
	.tales-mobile-feed:has(.tales-comment-panel.is-mobile-open), .tales-watch-layout:has(.tales-comment-panel.is-mobile-open) { z-index: 80; }
	.tales-mobile-feed .tales-cinema, .tales-mobile-feed .tales-cinema:has(.tales-comment-panel.is-open),
	.tales-watch-layout .tales-cinema, .tales-watch-layout .tales-cinema:has(.tales-comment-panel.is-open) { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; }
	.tales-watch-layout { position: fixed; inset: 0 0 var(--tales-mobile-bottom); margin: 0; }
	.tales-watch-layout > .tales-watch-info, .tales-watch-layout + section { display: none; }
	.tales-player-stage { width: 100%; height: 100%; border-radius: 0; background: #000; }
	.tales-player-stage .tales-player-heading { inset: 0 auto auto 0; padding: max(8px, env(safe-area-inset-top)) 10px 20px; background: none; }
	.tales-player-heading > span { display: none; }
	.tales-player-heading a { background: #0003; }
	.tales-feed-player .tales-player-heading { display: none; }
	.tales-mobile-player-search { position: absolute; z-index: 4; top: max(6px, env(safe-area-inset-top)); right: 8px; display: grid; place-items: center; width: 42px; height: 42px; color: #eee; font-size: 23px; filter: drop-shadow(0 1px 2px #000); }
	.tales-mobile-player-search:hover { color: #fff; }
	.tales-feed-audio-toggle { position: absolute; z-index: 4; top: max(6px, env(safe-area-inset-top)); right: 54px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: #0003; color: #eee; font-size: 20px; filter: drop-shadow(0 1px 2px #000); cursor: pointer; }
	.tales-feed-audio-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
	.tales-mobile-story { position: absolute; z-index: 3; inset: auto 10px 79px; display: block; color: #eee; text-shadow: 0 1px 3px #000; }
	.tales-mobile-story::before { position: absolute; z-index: -1; inset: -65px -10px -12px; background: linear-gradient(transparent, #0008 50%, #000b); content: ''; pointer-events: none; }
	.tales-mobile-story h1 { max-width: calc(100% - 55px); margin: 0 0 12px; color: #eee; font-size: 16px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
	.tales-mobile-synopsis { display: flex; align-items: flex-end; gap: 5px; width: calc(100% - 46px); max-height: 50px; margin: 0 0 12px; padding: 0; overflow: hidden; border: 0; background: transparent; color: #eee; text-align: left; font: inherit; font-size: 16px; line-height: 1.45; text-shadow: inherit; }
	.tales-mobile-synopsis > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; }
	.tales-mobile-synopsis strong { flex-shrink: 0; font-weight: 400; }
	.tales-mobile-synopsis.is-expanded { display: block; max-height: 32dvh; overflow-y: auto; overscroll-behavior: contain; }
	.tales-mobile-synopsis.is-expanded > span { display: inline; }
	.tales-mobile-episode-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 8px 10px; border: 0; border-radius: 8px; background: #262626ed; color: #eee; font: inherit; font-size: 13px; text-align: left; }
	.tales-mobile-episode-link span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tales-mobile-episode-link i { flex-shrink: 0; font-size: 12px; }
	.tales-interaction-rail, .tales-cinema:has(.tales-comment-panel.is-open) .tales-interaction-rail { right: 8px; bottom: 172px; gap: 19px; width: 40px; }
	.tales-interaction-rail button { gap: 5px; min-height: 53px; }
	.tales-interaction-rail button i { font-size: 31px; font-weight: 900; }
	.tales-interaction-rail button span { color: inherit; font-size: 14px; font-weight: 500; }
	.tales-artplayer .art-video-player { --art-control-height: 44px; }
	.tales-cinema .tales-artplayer .art-video-player .art-bottom { inset: auto 0 5px; display: block; height: 62px; padding: 0 13px; opacity: 0; visibility: hidden; background: linear-gradient(transparent, #000b); }
	.tales-cinema .tales-artplayer .art-video-player:is(.art-control-show, .art-hover) .art-bottom { opacity: 1; visibility: visible; }
	.tales-cinema .tales-artplayer .art-video-player .art-bottom .art-controls { display: flex; transform: none; }
	.tales-cinema .tales-artplayer .art-video-player .art-control-time { display: none; }
	.tales-artplayer .tales-player-select { min-height: 44px; padding: 5px 3px; font-size: 13px; }
	.tales-artplayer .tales-player-control { width: 44px; height: 44px; font-size: 18px; }
	.tales-cinema .tales-artplayer .art-video-player .art-bottom .art-progress { padding: 5px 0; transform: none; }
	.tales-cinema .tales-artplayer .art-video-player .art-control-progress-inner { height: 3px; border-radius: 3px; }
	.tales-cinema .tales-artplayer .art-video-player .art-state { position: absolute; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
	.tales-cinema .tales-artplayer .art-video-player .art-state .art-icon-state { width: 0; height: 0; border-top: 28px solid transparent; border-bottom: 28px solid transparent; border-left: 45px solid #ffffff80; border-radius: 6px; }
	.tales-cinema .tales-artplayer .art-video-player .art-state .art-icon-state svg { display: none; }
	.tales-mobile-progress { position: absolute; z-index: 3; inset: auto 13px 12px; display: block; height: 3px; border-radius: 3px; background: #777; }
	.tales-player-stage > .tales-player-message { position: absolute; inset: 20% 64px auto 20px; max-height: 58%; justify-content: flex-start; gap: 12px; overflow-y: auto; padding: 0; color: #bbb; text-align: center; font-size: 14px; }
	.tales-player-stage > .tales-player-message > i { margin-bottom: 12px; font-size: 46px; color: #777; }
	.tales-player-message .tv-button { width: auto; min-height: 38px; padding: 8px 14px; font-size: 13px; }
	.tales-player-message a:not(.tv-button) { color: #ff6075; }
	.tales-player-error { bottom: auto; top: 60px; left: 12px; right: 12px; font-size: 12px; }
	.tales-mobile-feed-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; height: 100%; padding: 25px; color: #bbb; text-align: center; }
	.tales-mobile-feed-status a { color: #eee; text-decoration: underline; }
	.tales-mobile-feed-status button { border: 0; border-radius: 8px; padding: 10px 20px; background: #333; color: #fff; }
	.tales-mobile-feed-notice { position: absolute; z-index: 6; inset: 65px 20px auto; padding: 12px; border-radius: 8px; background: #303030e6; color: #fff; font-size: 13px; text-align: center; }
	.tales-shell[data-mobile-tab="membership"] .tv-profile-heading, .tales-shell[data-mobile-tab="membership"] .tales-profile-card, .tales-shell[data-mobile-tab="membership"] .tales-profile-links { display: none; }
	.tales-shell[data-mobile-tab="membership"] .tales-profile-page { margin: 0; }
	.tales-shell[data-mobile-tab="membership"] .tales-profile-purchase-panel { border-radius: 0; }
}

/* 手机账户首页与独立设置页 */
@media (max-width: 768px) {
	.tales-shell:has(.tales-mobile-account) { background: #000; }
	.tales-shell:has(.tales-mobile-account) > .tales-header,
	.tales-shell:has(.tales-mobile-account) > .tales-footer,
	.tales-shell:has(.tales-mobile-account) .tv-profile-heading,
	.tales-shell:has(.tales-mobile-account) .tales-profile-page { display: none; }
	.tales-shell:has(.tales-mobile-account) > .tales-content { padding: 0 0 20px; }
	.tales-mobile-account { display: block; min-height: calc(100dvh - var(--tales-mobile-bottom) - 20px); background: transparent; color: inherit; }
	.tales-mobile-account-summary { position: relative; min-height: 248px; padding: 64px 12px 12px; background: radial-gradient(ellipse at 15% 5%, #400021, transparent 72%), linear-gradient(#180c14, #000); }
	.tales-mobile-account-back { position: absolute; top: 18px; left: 3px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--tales-text); font-size: 20px; }
	.tales-mobile-account-back:focus-visible, .tales-settings-heading > a:focus-visible { outline: 2px solid var(--tales-red); outline-offset: -4px; border-radius: 6px; }
	.tales-mobile-account-settings { position: absolute; top: 25px; right: 13px; display: grid; place-items: center; width: 30px; height: 30px; color: var(--tales-text); font-size: 23px; }
	.tales-mobile-account-identity { display: flex; align-items: center; gap: 10px; }
	.tales-mobile-account-avatar { display: grid; place-items: center; flex: 0 0 76px; height: 76px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #30303a; color: #ccc; font-size: 32px; }
	.tales-mobile-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
	.tales-mobile-account-identity > div { flex: 1; min-width: 0; }
	.tales-shell .tales-mobile-account-identity h1 { margin: 0 0 9px; overflow: hidden; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
	.tales-mobile-account-identity p { margin: 0; color: #96919b; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
	.tales-mobile-account-recharge { flex-shrink: 0; padding: 7px 8px; border: 1px solid #f36aa7; border-radius: 20px; background: #ff0084; color: #fff; font-size: 12px; line-height: 1.2; }
	.tales-mobile-account-vip { display: flex; align-items: center; gap: 9px; min-height: 58px; margin-top: 12px; padding: 7px 5px 7px 11px; border: 1px solid #a45975; border-radius: 10px; background: linear-gradient(110deg, #630329, #3b071c); }
	.tales-mobile-account-vip > i { color: #ffa1d0; font-size: 29px; filter: drop-shadow(0 0 5px #ff75bd80); }
	.tales-mobile-account-vip > div { flex: 1; min-width: 0; }
	.tales-mobile-account-vip strong { display: block; color: #f8e8f2; font-size: 16px; font-weight: 700; line-height: 1.5; }
	.tales-mobile-account-vip small { display: block; color: #ac8798; font-size: 12px; line-height: 1.4; }
	.tales-mobile-account-vip > a { flex-shrink: 0; padding: 9px 6px; border: 1px solid #b77c9550; border-radius: 5px; background: #ffffff20; color: #fff; font-size: 14px; font-weight: 600; }
	.tales-mobile-account-download { display: block; margin-top: 12px; color: #88818b; text-align: center; font-size: 12px; }
	.tales-mobile-account-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 60px; border-bottom: 1px solid var(--tales-line); }
	.tales-mobile-account-tabs button { position: relative; border: 0; background: transparent; color: #8b8b91; font: inherit; font-size: 16px; }
	.tales-mobile-account-tabs button[aria-selected="true"] { color: #fff; font-weight: 700; }
	.tales-mobile-account-tabs button[aria-selected="true"]::after { position: absolute; right: calc(50% - 34px); bottom: 0; width: 68px; height: 2px; background: #fff; content: ''; }
	.tales-mobile-account-library { padding: 15px 12px 0; }
	.tales-mobile-account-filter { display: inline-block; min-width: 62px; margin-bottom: 15px; padding: 7px 16px; border-radius: 8px; background: #ff0084; color: #fff; text-align: center; font-size: 14px; line-height: 1.2; }
	.tales-mobile-account-library .tales-poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; }
	.tales-mobile-account-library .tales-poster-frame { aspect-ratio: 3 / 4.2; border-radius: 7px; }
	.tales-mobile-account-library .tales-poster-play { display: none; }
	.tales-mobile-account-library .tales-poster-card h3, .tales-mobile-account-library .tales-poster-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
	.tales-mobile-account-library .tales-poster-card h3 { margin: 7px 0 3px; font-size: 14px; font-weight: 400; line-height: 1.45; }
	.tales-mobile-account-library .tales-poster-card p { margin: 0; color: #7e7e88; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; text-overflow: clip; }
	.tales-mobile-account-library .tales-status { padding: 25px 8px; color: var(--tales-muted); font-size: 14px; }
	.tales-mobile-account-library .tales-status a { color: var(--tales-red); }
	.tales-shell:has(.tales-settings-page) { padding-bottom: 0; background: var(--tv-bg); }
	.tales-settings-list .tales-settings-version { display: block; }
	.tales-shell:has(.tales-settings-page) > .tales-header,
	.tales-shell:has(.tales-settings-page) > .tales-footer,
	.tales-shell:has(.tales-settings-page) > .tales-bottom-nav { display: none; }
	.tales-shell:has(.tales-settings-page) > .tales-content { min-height: 100dvh; padding: env(safe-area-inset-top, 0px) 0 24px; }
}
@media (max-width: 359px) {
	.tales-bottom-nav { padding-left: 3px; padding-right: 3px; font-size: 14px; }
	.tales-mobile-story h1, .tales-mobile-synopsis { font-size: 14px; }
}

/* 手机端各前台页面统一深色表面与可读文字 */
@media (max-width: 768px) {
	:root { --tales-text: #f1f1f3; --tales-muted: #96969e; --tales-line: #303035; --tv-bg: #111; --tv-ink: #f1f1f3; --tv-border: #303035; }
	body { background: #111; color: #f1f1f3; color-scheme: dark; }
	.tales-shell { background: #111; color: #f1f1f3; }
	.tales-header { background: #111; }
	.tales-logo, .tales-header-actions { color: #eee; }
	.tales-header-search, .tales-search-form { background: #222730; }
	.tales-header-search button, .tales-search-form button { color: #a0a6b0; }
	.tales-shell .tales-content h1, .tales-shell .tales-content h2, .tales-shell .tales-content h3 { color: #f1f1f3; }
	.tales-shell .tv-button-ghost { background: #25252b; border-color: #414149; color: #eee; }
	.tales-shell .tales-footer { background: #171719; border-top: 1px solid #2a2a2e; }
	.tales-shell .tales-topic-strip a { background: #242429; color: #b4b4bd; }
	.tales-shell .tales-topic-strip a.active { background: #eb3039; color: #fff; }
	.tales-shell .tales-poster-frame, .tales-shell .tv-detail-art { background: #242429; }
	.tales-shell .tv-series-detail, .tales-shell .tv-episode, .tales-shell .tv-plan-card, .tales-shell .tv-progress-card,
	.tales-shell .tales-profile-card, .tales-shell .tales-profile-edit-card, .tales-shell .tales-profile-links,
	.tales-shell .tales-profile-purchase-panel, .tales-shell .tales-profile-record, .tales-shell .tales-purchase-card,
	.tales-shell .tales-purchase-custom, .tales-shell .tales-policy-text { border-color: #303035; background: #1c1c20; color: #eee; box-shadow: none; }
	.tales-shell .tales-detail-tags a, .tales-shell .tales-profile-badges span { background: #2a2a31; color: #bbb; }
	.tales-shell .tv-detail-copy p, .tales-shell .tales-policy-text p, .tales-shell .tales-policy-text ul { color: #b0b0b8; }
	.tales-shell .tales-policy-text h2 { color: #eee; }
	.tales-shell .tales-orders th, .tales-shell .tales-orders td { border-bottom-color: #303035; color: #ccc; }
	.tales-shell .tales-signin-notice { background: #2c1c23; }
	.tales-shell .tales-profile-links a { border-color: #303035; color: #eee; }
	.tales-shell .tales-profile-links a:hover { background: #29232b; }
	.tales-shell .tales-profile-field { background: #29292f; color: #ddd; }
	.tales-shell .tales-profile-field input { color: #eee; background: transparent; }
	.tales-shell .tales-profile-field button { background: #3a3a43; color: #bbb; }
	.tales-shell .tales-profile-balance { color: #ddd; }
	.tales-shell .tales-profile-vip { background: linear-gradient(90deg, #492538, #362331); color: #eee; }
	.tales-shell .tales-avatar-upload { border-color: #55505a; background: #29292e; color: #ddd; }
	.tales-shell .tales-profile-logout { background: #38383f; color: #eee; }
	.tales-shell .tales-profile-edit label { color: #bbb; }
	.tales-shell .tales-purchase-terms, .tales-shell .tales-purchase-terms a { color: #b4b4bd; }
	.tales-shell .tales-purchase-terms-desktop { display: none; }
	.tales-shell .tales-purchase-terms-mobile { display: inline; }
	.tales-shell .tales-purchase-terms input { border-color: #777; background: #1e1e23; }
	.tales-shell .tales-purchase-terms input:checked { border-color: #eb3039; background: #eb3039; box-shadow: inset 0 0 0 4px #1e1e23; }
	.tales-shell .tales-membership-card, .tales-shell .tales-diamond-bag { border-color: #3b2c38; background: linear-gradient(180deg, #2a202b, #1d1d22); color: #eee; }
	.tales-shell .tales-membership-heading button, .tales-shell .tales-recharge-heading button { background: #303036; color: #ddd; }
	.tales-shell .tales-membership-activate { border-color: #48404a; background: #302a32; color: #eee; }
	.tales-shell .tales-membership-activate:disabled { color: #999; }
	.tales-shell .tales-membership-daily { background: #33232d; color: #aaa; }
	.tales-shell .tales-diamond-card { background: #29252d; color: #eee; }
	.tales-shell .tales-diamond-price { background: #482736; color: #eee; }
	.tales-shell .tales-diamond-custom > label { color: #ddd; }
	.tales-shell .tales-diamond-input { background: #303037; }
	.tales-shell .tales-diamond-input input, .tales-shell .tales-diamond-input output { color: #eee; }
	.tales-shell .tv-input, .tales-shell .tv-login-reference-card .tv-input { border-color: #38383f; background: #27272e; color: #eee; }
	.tales-shell input::placeholder, .tales-shell textarea::placeholder { color: #90909c; }
	.tales-shell .tales-login-dialog, .tales-shell .tv-auth-card { border-color: #303035; background: #1c1c20; color: #eee; }
	.tales-shell .tv-login-close, .tales-shell .tv-login-reference-card label:not(.tv-terms), .tales-shell .tv-auth-card label { color: #ddd; }
	.tales-shell .tv-button-register { background: #38232c; color: #ff788b; }
	.tales-shell .tv-terms, .tales-shell .tv-terms a { color: #aaa; }
	.tales-shell .tv-register-reference-card .tv-terms input { border-color: #888; background: #242429; }
	.tales-shell .tv-register-reference-card .tv-terms input:checked { background: #eb3039; box-shadow: inset 0 0 0 5px #242429; }
	.tales-shell .tv-code-input button { background: #38232c; color: #ff788b; }
	.tales-shell .tales-comment-panel, .tales-shell .tales-comment-panel > footer { border-color: #35353b; background: #1d1d22; color: #eee; }
	.tales-shell .tales-comment-panel > header, .tales-shell .tales-comment-panel > footer { border-color: #35353b; }
	.tales-shell .tales-comment-panel h2, .tales-shell .tales-comment strong { color: #eee; }
	.tales-shell .tales-comment p { color: #bdbdc7; }
	.tales-shell .tales-comment-panel header button { color: #bbb; }
	.tales-shell .tales-comments-empty > i, .tales-shell .tales-comment-panel form, .tales-shell .tales-load-comments { background: #303037; color: #aaa; }
	.tales-shell .tales-comment-panel textarea { color: #eee; }
	.tales-shell .tales-comment-signin { background: #3b222c; color: #ff7b90; }
	.tales-shell .tales-comment-avatar { background: #452435; color: #f08ca8; }

	/* 目录遵循参考页面的搜索、横向主题和双列海报 */
	.tales-explore-desktop { display: none; }
	.tales-mobile-catalog { display: block; }
	.tales-shell:has(.tales-explore-page) > .tales-header, .tales-shell:has(.tales-explore-page) > .tales-footer { display: none; }
	.tales-shell:has(.tales-explore-page) > .tales-content { padding: 10px 12px 0; }
	.tales-mobile-catalog-search { display: flex; align-items: center; gap: 9px; height: 40px; margin: 0 0 10px; padding: 0 13px; border-radius: 8px; background: #202730; }
	.tales-mobile-catalog-search:focus-within { box-shadow: 0 0 0 2px var(--tales-red); }
	.tales-mobile-catalog-search input { min-width: 0; flex: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: #eee; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
	/* 焦点由整个搜索栏呈现，避免主题通用焦点规则再给内部输入框描边 */
	:root .tales-shell .tales-mobile-catalog-search > input:is(:focus, :focus-visible) { outline: 0; box-shadow: none; }
	.tales-mobile-catalog-search input::placeholder { color: #8c95a1; }
	.tales-mobile-catalog-search button { display: grid; place-items: center; width: 18px; height: 36px; padding: 0; border: 0; background: transparent; color: #8c95a1; font-size: 15px; }
	.tales-mobile-topics { display: flex; gap: 20px; align-items: center; height: 44px; margin: 0 0 10px; padding: 0 11px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
	.tales-mobile-topics::-webkit-scrollbar { display: none; }
	.tales-mobile-topics a { flex-shrink: 0; color: #787880; white-space: nowrap; font-size: 16px; font-weight: 700; }
	.tales-mobile-topics a.active { color: #fff; }
	.tales-mobile-catalog .tales-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-items: start; }
	.tales-mobile-catalog .tales-poster-frame { aspect-ratio: 3 / 4.2; border-radius: 8px; }
	.tales-mobile-catalog .tales-poster-play { display: none; }
	.tales-mobile-catalog .tales-poster-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 9px 0 5px; overflow: hidden; white-space: normal; color: #f2f2f2; font-size: 14px; font-weight: 500; line-height: 1.45; }
	.tales-mobile-catalog .tales-poster-card p { margin: 0; color: #818995; font-size: 12px; line-height: 1.5; }
	.tales-mobile-load-more { display: grid; place-items: center; min-height: 64px; padding: 18px 8px; color: #858590; text-align: center; font-size: 12px; }
	.tales-mobile-load-more p { margin: 0 0 8px; }
	.tales-mobile-load-more button { padding: 8px 20px; border: 1px solid #494951; border-radius: 7px; background: #29292f; color: #eee; }
}

/* 手机会员页将订阅与充值合并为同一条购买流程 */
@media (max-width: 768px) {
	.tales-shell[data-mobile-tab="membership"] { background: #050310; }
	.tales-shell[data-mobile-tab="membership"] > .tales-header,
	.tales-shell[data-mobile-tab="membership"] > .tales-footer { display: none; }
	.tales-shell[data-mobile-tab="membership"] > .tales-content { margin: 0; padding: 0 0 24px; }
	.tales-shell[data-mobile-tab="membership"] .tales-profile-purchase-panel { padding: 0; border: 0; background: transparent; }
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-tabs,
	.tales-shell[data-mobile-tab="membership"] .tales-membership-heading,
	.tales-shell[data-mobile-tab="membership"] .tales-recharge-heading,
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-subscription > .tales-purchase-terms,
	.tales-shell[data-mobile-tab="membership"] .tales-membership-card > :not(.tales-mobile-plan-choice),
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-buy { display: none; }
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-section { display: block; padding: 0 11px; }
	.tales-shell[data-mobile-tab="membership"] .tales-mobile-vip-header { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 280px; padding: 84px 16px 26px; overflow: hidden; text-align: center; }
	.tales-mobile-vip-art { position: absolute; z-index: -2; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; }
	.tales-mobile-vip-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
	.tales-mobile-vip-header::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #050310c9, #050310a6 60%, #050310f0); content: ''; }
	.tales-mobile-vip-history { position: absolute; top: 12px; right: 12px; padding: 4px 0; border: 0; background: transparent; color: #eee; font: inherit; font-size: 14px; }
	.tales-shell .tales-mobile-vip-header h2 { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.3; }
	.tales-shell .tales-mobile-vip-header h3 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 20px; color: #ff389d; font-size: 18px; font-weight: 800; }
	.tales-mobile-vip-header h3::before, .tales-mobile-vip-header h3::after { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #e6d9ed); content: ''; }
	.tales-mobile-vip-header h3::after { transform: rotate(180deg); }
	.tales-mobile-vip-header ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
	.tales-mobile-vip-header li { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #fff; font-size: 12px; }
	.tales-mobile-vip-header li i { display: grid; place-items: center; width: 34px; height: 29px; border: 1px solid #ff75bd; border-radius: 6px; background: linear-gradient(140deg, #ffb5dc, #ff168f 50%, #a12078); color: #fff; box-shadow: 0 0 12px #f7309470; font-size: 20px; }
	.tales-shell[data-mobile-tab="membership"] .tales-membership-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.tales-shell[data-mobile-tab="membership"] .tales-membership-card { display: block; padding: 0; border: 1px solid #42404f; border-radius: 11px; background: linear-gradient(145deg, #3f3d50, #262432); }
	.tales-shell[data-mobile-tab="membership"] .tales-membership-card:has(input:checked) { border-color: #ff0084; background: linear-gradient(145deg, #643347, #332332); }
	.tales-shell[data-mobile-tab="membership"] .tales-mobile-plan-choice { display: flex; align-items: center; gap: 5px; min-height: 74px; margin: 0; padding: 10px 12px 10px 18px; color: #c5c5cf; font-size: 14px; cursor: pointer; }
	.tales-mobile-plan-choice input { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; appearance: none; border: 2px solid #8b8b9b; border-radius: 50%; background: transparent; }
	.tales-mobile-plan-choice input:checked { border-color: #ff0084; background: #ff0084; box-shadow: inset 0 0 0 2px #332332; }
	.tales-mobile-plan-choice input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
	.tales-mobile-plan-price { display: flex; flex-shrink: 0; flex-direction: column; gap: 4px; min-width: 106px; margin-left: auto; text-align: right; }
	.tales-mobile-plan-price strong { font-size: 20px; font-weight: 700; line-height: 1.3; }
	.tales-mobile-plan-price small { padding: 2px 10px; border-radius: 3px; background: #646570; color: #ddd; font-size: 12px; line-height: 1.5; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-bag { margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-bag h3,
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-custom > label { margin: 0 0 20px; font-size: 16px; font-weight: 700; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-card { min-height: 128px; padding-top: 25px; border: 1px solid #44404f; border-radius: 11px; background: #252332; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-card.selected { border-color: #ff0084; box-shadow: 0 0 0 1px #ff0084; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-bonus { padding: 3px 14px; background: linear-gradient(120deg, #ff0084, #ff459c); font-size: 14px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-icon { width: 34px; height: 26px; margin: 0 0 8px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-amount { margin-bottom: 6px; font-size: 16px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-price { padding: 7px 4px; background: #3c3a49; color: #fff; font-size: 20px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-custom { width: 100%; margin-top: 22px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-input { min-height: 54px; padding: 0 15px; border-radius: 11px; background: #3a3a41; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-input input { padding: 16px 0; font-size: 13px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-input input::placeholder { color: #ddd; font-size: 12px; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-placeholder { display: none; }
	.tales-shell[data-mobile-tab="membership"] .tales-diamond-input output { font-size: 12px; }
	.tales-shell[data-mobile-tab="membership"] .tales-mobile-vip-buy { display: block; width: calc(100% - 24px); min-height: 52px; margin: 40px auto 16px; padding: 12px; border: 0; border-radius: 11px; background: #ff0084; color: #fff; font: inherit; font-size: 18px; cursor: pointer; }
	.tales-mobile-vip-buy:disabled { cursor: not-allowed; }
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-diamonds .tales-purchase-terms { gap: 5px; margin: 0 4px 8px; color: #96939f; font-size: 11px; line-height: 1.6; }
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-terms a { color: inherit; font-weight: 400; }
	.tales-shell[data-mobile-tab="membership"] .tales-purchase-terms input { flex-basis: 14px; width: 14px; height: 14px; margin-top: 0; }
}

/* 内容页在手机上使用独立返回栏与深色正文容器 */
@media (max-width: 768px) {
	.tales-shell:has(.tales-legal-heading) { padding-bottom: 0; background: #111; }
	.tales-shell:has(.tales-legal-heading) > .tales-header,
	.tales-shell:has(.tales-legal-heading) > .tales-footer,
	.tales-shell:has(.tales-legal-heading) > .tales-bottom-nav { display: none; }
	.tales-shell:has(.tales-legal-heading) > .tales-content { min-height: 100dvh; padding: env(safe-area-inset-top, 0px) 0 max(20px, env(safe-area-inset-bottom)); }
	.tales-shell .tales-legal-heading { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 0 8px; padding: 5px 44px; background: #111; }
	.tales-shell .tales-legal-heading h1 { margin: 0; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: normal; }
	.tales-shell .tales-legal-back { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; color: #eee; font-size: 18px; }
	.tales-shell .tales-policy-text { width: auto; max-width: none; margin: 0 10px; padding: 20px; border: 0; border-radius: 8px; background: #1f252f; box-shadow: none; font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
	.tales-shell .tales-policy-text h2 { margin: 20px 0 10px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: normal; }
	.tales-shell .tales-policy-text h3 { margin: 15px 0 7.5px; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: normal; }
	.tales-shell .tales-policy-text p { margin: 0 0 10px; color: #8f8f8f; font-size: 14px; line-height: 1.8; }
	.tales-shell .tales-policy-text ul { margin: 0 0 10px; padding-left: 20px; color: #8f8f8f; font-size: 14px; line-height: 1.8; }
	.tales-shell .tales-policy-text li { margin: 0 0 5px; }
	.tales-shell .tales-policy-content > :first-child { margin-top: 0; }
	.tales-shell .tales-policy-content > :last-child { margin-bottom: 0; }
}
/* 密码找回保留手机端独立布局，桌面端使用浅色表单卡片 */
.tales-shell:has(.tales-recovery-standalone) { min-height: 100dvh; padding-bottom: 0; background: #111; }
.tales-shell:has(.tales-recovery-standalone) > :is(.tales-header, .tales-mobile-nav, .tales-footer, .tales-bottom-nav) { display: none; }
.tales-shell:has(.tales-recovery-standalone) > .tales-content { max-width: none; min-height: 100dvh; margin: 0; padding: 0; }
.tales-shell .tales-recovery-page { position: relative; width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px)); color: #f5f5f5; }
.tales-recovery-back { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #202730; color: #f5f5f5; font-size: 20px; cursor: pointer; touch-action: manipulation; }
.tales-recovery-back > span, .tales-recovery-intro, .tales-recovery-login { display: none; }
.tales-shell .tales-recovery-page h1 { margin: 38px 0 32px; color: #f5f5f5; font-size: clamp(26px, 6vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.tales-recovery-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tales-recovery-field + .tales-recovery-field { margin-top: 26px; }
.tales-recovery-field > label { display: block; margin-bottom: 12px; color: #f5f5f5; font-size: 16px; font-weight: 500; }
.tales-recovery-field input { width: 100%; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; outline: 0; background: #202730; color: #f5f5f5; font: inherit; font-size: 16px; }
.tales-recovery-field input::placeholder { color: #89909a; opacity: 1; }
.tales-recovery-field > input:focus, .tales-recovery-input:focus-within { border-color: #ff0084; }
.tales-recovery-input { display: flex; align-items: center; min-width: 0; border: 1px solid transparent; border-radius: 8px; background: #202730; }
.tales-recovery-input input { flex: 1; height: 48px; border: 0; background: transparent; }
.tales-recovery-input button { flex-shrink: 0; min-height: 48px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 16px; cursor: pointer; touch-action: manipulation; }
.tales-recovery-input .tales-recovery-code { color: #ff0084; font-weight: 600; white-space: nowrap; }
.tales-recovery-input .tales-recovery-eye { display: grid; place-items: center; width: 48px; padding: 0; color: #8996a5; font-size: 15px; }
.tales-recovery-submit { display: block; width: 100%; min-height: 52px; margin-top: 42px; padding: 12px 20px; border: 0; border-radius: 13px; background: #ff0084; color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.tales-recovery-submit:disabled, .tales-recovery-page fieldset:disabled .tales-recovery-submit, .tales-recovery-code:disabled { opacity: .6; cursor: default; }
.tales-recovery-page :is(a, button):focus-visible { outline: 2px solid #ff5aa9; outline-offset: 3px; }
.tales-recovery-page .validation-message, .tales-recovery-message { margin: 8px 0 0; color: #ff9fbd; font-size: 13px; line-height: 1.5; }
.tales-recovery-message { margin-top: 20px; }
@media (max-width: 768px) {
	.tales-shell .tales-recovery-page { padding-right: max(22px, env(safe-area-inset-right, 0px)); padding-left: max(22px, env(safe-area-inset-left, 0px)); }
}
@media (min-width: 769px) {
	.tales-shell:has(.tales-recovery-standalone) { background: #f7f7f8; }
	.tales-shell:has(.tales-recovery-standalone) > .tales-header { display: flex; max-width: none; border-bottom: 1px solid var(--tales-line); }
	.tales-shell:has(.tales-recovery-standalone) > .tales-content { display: grid; place-items: center; min-height: calc(100dvh - 80px); padding: 48px 24px; }
	.tales-shell .tales-recovery-page { width: min(100%, 560px); min-height: 0; margin: 0; padding: 28px 44px 36px; border: 1px solid #eeeeef; border-radius: 20px; background: #fff; color: var(--tales-text); box-shadow: 0 12px 40px #17181c08; }
	.tales-recovery-back { display: inline-flex; gap: 8px; width: auto; height: 36px; border-radius: 6px; background: transparent; color: var(--tales-muted); font-size: 14px; }
	.tales-recovery-back > span { display: inline; }
	.tales-recovery-back > i { font-size: 12px; }
	.tales-recovery-back:hover { color: var(--tales-red); }
	.tales-shell .tales-recovery-page h1 { margin: 16px 0 10px; color: var(--tales-text); text-align: center; font-size: 30px; font-weight: 650; }
	.tales-recovery-intro { display: block; margin: 0 0 32px; color: var(--tales-muted); text-align: center; font-size: 14px; line-height: 1.6; }
	.tales-recovery-field + .tales-recovery-field { margin-top: 22px; }
	.tales-recovery-field > label { margin-bottom: 10px; color: #33343a; font-size: 15px; }
	.tales-recovery-field input { height: 52px; border-color: #e8e8eb; border-radius: 10px; background: #f7f7f8; color: var(--tales-text); font-size: 15px; }
	.tales-recovery-field input::placeholder { color: #93949c; }
	.tales-recovery-input { border-color: #e8e8eb; border-radius: 10px; background: #f7f7f8; }
	.tales-recovery-input input { height: 50px; border: 0; background: transparent; }
	.tales-recovery-input button { min-height: 50px; font-size: 14px; }
	.tales-recovery-input .tales-recovery-code { color: var(--tales-red); }
	.tales-recovery-input .tales-recovery-eye { color: #8a8b93; }
	.tales-recovery-input .tales-recovery-eye:hover { color: var(--tales-text); }
	.tales-recovery-field > input.invalid, .tales-recovery-input:has(input.invalid) { border-color: #c83a50; }
	.tales-recovery-field > input:focus, .tales-recovery-input:focus-within { border-color: var(--tales-red); box-shadow: 0 0 0 3px #eb303910; }
	.tales-recovery-submit { margin-top: 30px; border-radius: 999px; background: linear-gradient(100deg, #f96c4b, #ed263f); font-size: 17px; transition: box-shadow .15s; }
	.tales-recovery-submit:hover:enabled { box-shadow: 0 5px 18px #ed263f26; }
	.tales-recovery-page .validation-message, .tales-recovery-message { color: #b4233d; }
	.tales-recovery-page :is(a, button):focus-visible { outline-color: var(--tales-red); }
	.tales-recovery-login { display: block; margin: 24px 0 0; color: var(--tales-muted); text-align: center; font-size: 14px; line-height: 1.6; }
	.tales-recovery-login > a { color: var(--tales-red); font-weight: 600; }
	.tales-recovery-login > a:hover { text-decoration: underline; }
}
.tales-recovery-dialog { width: min(560px, calc(100vw - 32px)); }
.tales-shell .tales-recovery-page.is-dialog { width: 100%; min-height: 0; margin: 0; border: 0; box-shadow: none; }
.tales-recovery-page.is-dialog > .tv-login-close { top: 26px; right: 26px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; font-size: 20px; }
.tales-recovery-page.is-dialog > .tv-login-close:hover { background: #80808015; }
.tales-register-login { margin: 24px 0 0; color: #797a82; text-align: center; font-size: 14px; }
.tales-register-login > a { color: var(--tales-red); font-weight: 600; }
@media (max-width: 768px) {
	.tales-shell .tales-recovery-page.is-dialog { padding-top: 24px; }
	.tales-recovery-page.is-dialog > .tv-login-close { top: 30px; right: 18px; }
}
/* 登录错误与字段验证始终显示在表单内 */
.tv-login-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.tv-login-reference-card .validation-message { margin-top: 8px; color: #b4233d; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.tv-login-reference-card .tv-input.invalid { border-color: #c83a50; }
.tv-login-reference-card .tv-auth-feedback { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid #f2c6cf; border-radius: 10px; background: #fff2f4; color: #a51e38; font-size: 14px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.tv-login-fields:has(.tv-auth-feedback) .tv-auth-links { margin-bottom: 18px; }
.tv-auth-feedback > i { flex-shrink: 0; margin-top: 3px; }
.tv-auth-feedback > span { min-width: 0; }
.tv-login-fields:disabled .tv-button-primary { opacity: .65; cursor: progress; }
@media (max-width: 768px) {
	.tales-shell .tv-login-reference-card .validation-message, .tales-shell .tales-register-message { color: #ff9fbd; }
	.tales-shell .tv-login-reference-card .tv-input.invalid { border-color: #ff789f; }
	.tales-shell .tv-login-reference-card .tv-auth-feedback { border-color: #693043; background: #34212b; color: #ffb3cb; }
}