/* Words Scroll polish overlay (随主版本发布,当前 V5.9.2).
UI only: no learning, review, plan, storage, sync, or wordbook logic. */
:root {
--ws-v4-radius: 18px;
--ws-v4-shadow: 0 10px 30px rgba(38, 27, 20, .07);
}
html.ws-v4-polish,
html.ws-v4-polish body {
max-width: 100%;
overflow-x: hidden;
}
html.ws-v4-polish body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html.ws-v4-polish * {
box-sizing: border-box;
letter-spacing: 0 !important;
}
html.ws-v4-polish .ws-site-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--ink-faint);
}
html.ws-v4-polish .ws-site-records {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
line-height: 1.45;
}
html.ws-v4-polish .ws-site-records a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 45%, transparent);
}
html.ws-v4-polish .ws-site-records a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
@media (min-width: 769px) {
html.ws-v4-polish :where([class*="card"], [class*="panel"], [class*="modal"]) {
box-shadow: var(--ws-v4-shadow);
}
html.ws-v4-polish body nav:not(.ws-v4-mobile-nav):not([data-ws-mobile-nav="true"]) button[data-tab] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html.ws-v4-polish body nav:not(.ws-v4-mobile-nav):not([data-ws-mobile-nav="true"]) button[data-tab]::after {
content: none;
display: none;
}
}
@media (max-width: 768px) {
:root {
--ws-mobile-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
--ws-mobile-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
--ws-mobile-num: "SF Pro Rounded", "DIN Alternate", "Avenir Next", var(--ws-mobile-font);
--ws-mobile-clearance: calc(94px + env(safe-area-inset-bottom));
}
html.ws-v4-polish body {
font-family: var(--ws-mobile-font);
touch-action: manipulation;
}
html.ws-v4-polish body :is(.wrap, .view.active) {
width: 100%;
max-width: min(100%, 430px);
margin-inline: auto;
padding-inline: max(12px, env(safe-area-inset-left));
}
html.ws-v4-polish body :is(.view.active, .mobile-page) {
padding-bottom: var(--ws-mobile-clearance);
}
/* Keep the mobile type scale aligned with the original library page. */
html.ws-v4-polish body :is(
#mobilePlanPage .mobile-plan-title h1,
#mobileHardPage .mobile-hard-title h1,
#mobileStatsPage .mobile-stats-title h1,
#mobileSettingsShell .mobile-settings-title h2
) {
font-size: 22px !important;
line-height: 1.05 !important;
font-weight: 950 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body :is(
#mobilePlanPage .mobile-plan-title p,
#mobileHardPage .mobile-hard-title p,
#mobileStatsPage .mobile-stats-title p,
#mobileSettingsShell .mobile-settings-title p
) {
font-size: 10px !important;
line-height: 1.38 !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3 {
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell :is(.mobile-settings-profile h3, .mobile-settings-member b) {
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 850 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell :is(.mobile-settings-profile p, .mobile-settings-member span, .mobile-settings-link) {
font-size: 10px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell {
font-size: 9.5px !important;
line-height: 1.18 !important;
font-weight: 780 !important;
letter-spacing: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell em {
font-size: 8px !important;
line-height: 1.1 !important;
font-weight: 650 !important;
}
html.ws-v4-polish .ws-site-footer {
padding: 0 16px calc(16px + var(--ws-mobile-clearance));
margin-top: 18px;
font-size: 10.5px;
}
html.ws-v4-polish .ws-site-records {
font-size: 10.5px;
}
/* Fixed mobile bottom navigation. */
html.ws-v4-polish body :is(nav, .ws-v4-mobile-nav, [data-ws-mobile-nav="true"]) {
position: fixed !important;
left: 50% !important;
right: auto !important;
/* V5.2.0 iPhone 适配：把导航整体抬到安全区之上（之前用 max() 在小 inset 设备上只抬 7px，
底部圆角会被 iPhone 屏幕圆角 / 横条挡住）。改成「基础间距 + 安全区」叠加，始终离边足够远。 */
bottom: calc(11px + env(safe-area-inset-bottom)) !important;
width: min(430px, calc(100vw - 28px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 28px) !important;
height: 64px !important;
min-height: 64px !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: center !important;
justify-items: stretch !important;
gap: 0 !important;
padding: 6px 8px !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 20px !important;
transform: translateX(-50%) !important;
z-index: 9999 !important;
}
html.ws-v4-polish body :is(nav, .ws-v4-mobile-nav, [data-ws-mobile-nav="true"]) > :is(a, button, [role="button"]) {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 48px !important;
min-height: 48px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 4px 2px !important;
margin: 0 !important;
border-radius: 14px !important;
font-family: var(--ws-mobile-font) !important;
font-size: 10.5px !important;
line-height: 1.08 !important;
font-weight: 650 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
}
html.ws-v4-polish body nav > button:not([data-tab="home"]):not([data-tab="plan"]):not([data-tab="lib"]):not([data-tab="records"]):not([data-tab="account"]),
html.ws-v4-polish body .ws-v4-nav-extra {
display: none !important;
}
html.ws-v4-polish body nav > button[data-tab="home"] { order: 1 !important; display: flex !important; }
html.ws-v4-polish body nav > button[data-tab="plan"] { order: 2 !important; display: flex !important; }
html.ws-v4-polish body nav > button[data-tab="lib"] { order: 3 !important; display: flex !important; }
html.ws-v4-polish body nav > button[data-tab="records"] { order: 4 !important; display: flex !important; }
html.ws-v4-polish body nav > button[data-tab="account"] { order: 5 !important; display: flex !important; }
html.ws-v4-polish body nav > button.active,
html.ws-v4-polish body .ws-v4-mobile-nav > :is(a, button, [role="button"]).active,
html.ws-v4-polish body [data-ws-mobile-nav="true"] > :is(a, button, [role="button"]).active {
font-weight: 760 !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}
html.ws-v4-polish body nav > button::after,
html.ws-v4-polish body .ws-v4-mobile-nav > :is(a, button, [role="button"])::after,
html.ws-v4-polish body [data-ws-mobile-nav="true"] > :is(a, button, [role="button"])::after {
content: none !important;
display: none !important;
}
/* Dialog and boot screens. */
html.ws-v4-polish body :is(.boot-splash, .wait-modal.on, .auth-modal.on) {
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
align-items: center !important;
justify-content: center !important;
overflow: auto !important;
}
/* V5.3.6 改回 iOS 原生状态栏处理（不再 viewport-fit=cover / 全屏铺底）：内容由系统内嵌在状态栏下方，
无需再给 .wrap 顶部补安全区，避免重复留白；状态栏配色由 apple-mobile-web-app-status-bar-style 按主题切换。 */
html.ws-v4-polish body :is(.boot-box, .wait-dialog, .auth-modal-dialog, .client-card, .contact-dialog, .achievement-dialog) {
width: min(430px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100dvh - 24px) !important;
margin: 0 auto !important;
border-radius: 22px !important;
overflow: auto !important;
}
html.ws-v4-polish body .auth-modal-dialog {
padding: 18px !important;
}
html.ws-v4-polish body .auth-modal-dialog :is(.auth-modal-head, .auth-modal-tabs, .auth-form, .auth-row, .auth-actions, .auth-socials) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html.ws-v4-polish body .auth-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
}
html.ws-v4-polish body .auth-row > :is(input, textarea, select) {
min-width: 0 !important;
}
html.ws-v4-polish body .auth-submit {
width: 100% !important;
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
white-space: nowrap !important;
}
html.ws-v4-polish body .auth-submit-loading {
pointer-events: none !important;
}
html.ws-v4-polish body .auth-submit-loading:disabled::before {
content: none !important;
display: none !important;
}
html.ws-v4-polish body .auth-submit-spinner,
html.ws-v4-polish body .auth-submit:disabled::before {
content: "" !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
border: 2px solid rgba(255, 255, 255, .48) !important;
border-top-color: rgba(255, 255, 255, .98) !important;
border-radius: 999px !important;
animation: ws-auth-spin .82s linear infinite !important;
}
@keyframes ws-auth-spin {
to { transform: rotate(360deg); }
}
html.ws-v4-polish body .auth-message {
min-height: 18px !important;
text-align: left !important;
}
/* Home page: preserve original rhythm, only shrink carousel dots. */
html.ws-v4-polish body #mobileHome > .mobile-home-top { order: 1 !important; }
html.ws-v4-polish body #mobileHome > .mobile-welcome { display: none !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-pills {
order: 2 !important;
justify-content: flex-end !important;
margin-top: -4px !important;
}
html.ws-v4-polish body #mobileHome > .mobile-tip-card {
order: 3 !important;
min-height: 56px !important;
max-height: 58px !important;
padding: 8px 26px 8px 9px !important;
}
html.ws-v4-polish body #mobileHome > #mobileTipDots.mobile-tip-dots {
order: 4 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 10px !important;
margin: -4px 0 2px !important;
padding: 0 !important;
}
html.ws-v4-polish body #mobileHome > #mobileTipDots.mobile-tip-dots button {
flex: 0 0 5px !important;
width: 5px !important;
min-width: 5px !important;
max-width: 5px !important;
height: 5px !important;
min-height: 5px !important;
max-height: 5px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--ink-soft) 24%, transparent) !important;
box-shadow: none !important;
opacity: .76 !important;
}
html.ws-v4-polish body #mobileHome > #mobileTipDots.mobile-tip-dots button::before,
html.ws-v4-polish body #mobileHome > #mobileTipDots.mobile-tip-dots button::after {
content: none !important;
display: none !important;
}
html.ws-v4-polish body #mobileHome > #mobileTipDots.mobile-tip-dots button.active {
flex-basis: 16px !important;
width: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
background: var(--accent) !important;
opacity: 1 !important;
}
html.ws-v4-polish body #mobileHome > .mobile-home-section { order: 8 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-section[aria-labelledby="mobileStreakTitle"] { order: 5 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] { order: 6 !important; }
html.ws-v4-polish body #mobileHome > #mobileCalendarCard { order: 7 !important; }
/* Study page: keep online definitions visible and remove rejected quick actions. */
html.ws-v4-polish body #study.on {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
html.ws-v4-polish body #study.on .study-body {
padding-bottom: calc(214px + env(safe-area-inset-bottom)) !important;
}
html.ws-v4-polish body #study.on .study-foot {
left: max(10px, env(safe-area-inset-left)) !important;
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(8px, env(safe-area-inset-bottom)) !important;
width: auto !important;
max-width: 430px !important;
max-height: min(43dvh, 218px) !important;
margin: 0 auto !important;
/* bottom 已用 env(safe-area-inset-bottom) 抬离底部，内边距不再重复叠加同一 inset，收回 iPhone 上被浪费的~34px */
padding: 9px 10px 10px !important;
border: 1px solid var(--line) !important;
border-radius: 20px !important;
overflow: auto !important;
box-shadow: 0 -12px 34px rgba(0, 0, 0, .22) !important;
-webkit-overflow-scrolling: touch !important;
}
/* 班级测试题 4 个选项在定高浮层里紧凑排布，短屏 iPhone 不用滚就能看全 */
html.ws-v4-polish body #study.on .ws-quiz-opt {
padding: 11px 14px !important;
font-size: 15px !important;
}
html.ws-v4-polish body #study.on .ws-quiz-opts {
gap: 8px !important;
}
html.ws-v4-polish body #study.on .study-mobile-foot {
display: grid !important;
gap: 7px !important;
}
html.ws-v4-polish body #study.on .study-bottom-row {
grid-template-columns: minmax(0, 1fr) !important;
}
html.ws-v4-polish body #study.on .study-bottom-row .study-quick,
html.ws-v4-polish body #study.on .study-bottom-row [data-study-next],
html.ws-v4-polish body #study.on .study-assist-actions,
html.ws-v4-polish body #study.on .study-assist-actions [data-study-detail],
html.ws-v4-polish body #study.on .study-assist-actions [data-study-hard] {
display: none !important;
}
html.ws-v4-polish body #study.on .study-bottom-row [data-study-prev] {
width: 100% !important;
min-height: 42px !important;
border-radius: 14px !important;
font-size: 11px !important;
font-weight: 760 !important;
}
html.ws-v4-polish body #study.on .online-def {
display: block !important;
max-height: 34dvh !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.ws-v4-polish body #study.on .ws-memory-hook {
margin-top: 10px !important;
padding: 10px 11px !important;
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--accent-soft) 58%, var(--card)) !important;
text-align: left !important;
}
html.ws-v4-polish body #study.on .ws-memory-hook b {
display: block !important;
color: var(--accent) !important;
font-size: 10.5px !important;
line-height: 1.2 !important;
font-weight: 760 !important;
}
html.ws-v4-polish body #study.on .ws-memory-hook span {
display: block !important;
margin-top: 5px !important;
color: var(--ink) !important;
font-size: 11px !important;
line-height: 1.48 !important;
font-weight: 520 !important;
}
/* Settings detail page: prevent vertical text in numeric controls. */
html.ws-v4-polish body #view-settings :is(h1, h2, h3, h4, p, b, strong, span, small, em, label, button, a) {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
html.ws-v4-polish body #view-settings :is(.settings-step-grid, .settings-control-grid) {
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
}
html.ws-v4-polish body #view-settings .settings-stepper {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 11px !important;
}
html.ws-v4-polish body #view-settings .settings-stepper label {
min-width: 0 !important;
white-space: normal !important;
line-height: 1.25 !important;
}
html.ws-v4-polish body #view-settings .settings-stepper label small {
display: block !important;
margin-top: 4px !important;
font-size: 10px !important;
line-height: 1.35 !important;
}
html.ws-v4-polish body #view-settings .settings-stepper-controls {
flex: 0 0 auto !important;
gap: 6px !important;
}
html.ws-v4-polish body #view-settings .settings-stepper-controls button {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
border-radius: 12px !important;
font-size: 18px !important;
font-weight: 760 !important;
}
html.ws-v4-polish body #view-settings .settings-stepper-controls input {
width: 68px !important;
min-width: 68px !important;
height: 38px !important;
font-size: 14px !important;
font-weight: 760 !important;
}
html.ws-v4-polish body #view-settings .settings-segment {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
}
html.ws-v4-polish body #view-settings .settings-segment button {
min-width: 0 !important;
min-height: 38px !important;
padding: 6px 8px !important;
white-space: nowrap !important;
font-size: 11px !important;
}
/* Account page: compact app-style rows and circular icon chips. */
html.ws-v4-polish body.mobile-account-active .mobile-settings-shell {
gap: 10px !important;
font-family: var(--ws-mobile-font) !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-title h2 {
font-family: var(--ws-mobile-display) !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-title p {
max-width: 300px !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-card {
border-radius: 18px !important;
box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 7%, transparent) !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-profile {
grid-template-columns: 48px minmax(0, 1fr) auto !important;
gap: 10px !important;
padding: 12px !important;
}
html.ws-v4-polish body.mobile-account-active :is(.mobile-settings-avatar, .mobile-settings-user-avatar, .mobile-settings-icon-btn.avatar, .mobile-settings-member-icon) {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 999px !important;
padding: 0 !important;
overflow: hidden !important;
flex: 0 0 42px !important;
place-self: center !important;
}
html.ws-v4-polish body.mobile-account-active :is(.mobile-settings-avatar, .mobile-settings-user-avatar) img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 999px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-icon-settings {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
border-radius: 14px !important;
font-size: 0 !important;
line-height: 0 !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-icon-settings span {
width: 18px !important;
height: 18px !important;
display: grid !important;
place-items: center !important;
color: var(--ink) !important;
font-size: 17px !important;
line-height: 1 !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-profile :is(p, small, span),
html.ws-v4-polish body.mobile-account-active .mobile-settings-member span:not(.mobile-settings-link) {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-member {
grid-template-columns: 42px minmax(0, 1fr) auto !important;
min-height: 58px !important;
padding: 10px 12px !important;
border-radius: 18px !important;
box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 13%, transparent) !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-pwa-shortcut {
width: 100% !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 0 14px !important;
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
border-radius: 16px !important;
background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important;
color: var(--accent) !important;
box-shadow: none !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-pwa-shortcut b {
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut {
width: 100% !important;
min-height: 48px !important;
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 13px !important;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
border-radius: 16px !important;
background: color-mix(in srgb, var(--card) 86%, transparent) !important;
color: var(--ink) !important;
box-shadow: none !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut i {
width: 30px !important;
height: 30px !important;
display: grid !important;
place-items: center !important;
border-radius: 10px !important;
background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
color: var(--accent) !important;
font-style: normal !important;
font-size: 15px !important;
line-height: 1 !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut span,
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut b,
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut em {
min-width: 0 !important;
display: block !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut b {
color: var(--ink) !important;
font-size: 12.5px !important;
line-height: 1.18 !important;
font-weight: 850 !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut em {
margin-top: 2px !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
font-style: normal !important;
font-size: 9.5px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html.ws-v4-polish body.mobile-account-active .ws-v4-share-shortcut strong {
color: var(--accent) !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 850 !important;
white-space: nowrap !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section {
padding: 0 !important;
border-radius: 16px !important;
overflow: hidden !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section-head {
margin-bottom: 10px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section h3 {
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 12px !important;
cursor: pointer !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section h3 i {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 6px !important;
font-size: 10px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section h3 button {
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
border-radius: 999px !important;
border: 0 !important;
background: color-mix(in srgb, var(--accent) 13%, transparent) !important;
color: var(--accent) !important;
font-size: 0 !important;
box-shadow: none !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section h3 button::before {
content: "+" !important;
font-size: 17px !important;
line-height: 1 !important;
font-weight: 760 !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section:not(.ws-v4-collapsed) h3 button::before {
content: "-" !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section.ws-v4-collapsed > :not(h3):not(.mobile-settings-section-head) {
display: none !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section:not(.ws-v4-collapsed) {
padding-bottom: 10px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-section:not(.ws-v4-collapsed) > :not(h3):not(.mobile-settings-section-head) {
margin-inline: 10px !important;
}
html.ws-v4-polish body.mobile-account-active :is(.mobile-settings-grid, .mobile-settings-grid.five) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-cell {
min-height: 62px !important;
height: 62px !important;
padding: 7px 4px 6px !important;
gap: 4px !important;
border: 1px solid color-mix(in srgb, var(--line) 44%, transparent) !important;
border-radius: 14px !important;
background: color-mix(in srgb, var(--card) 58%, transparent) !important;
box-shadow: none !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-cell-icon {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 999px !important;
color: color-mix(in srgb, var(--accent) 86%, var(--ink)) !important;
background: color-mix(in srgb, var(--accent) 11%, transparent) !important;
border-color: color-mix(in srgb, var(--accent) 24%, transparent) !important;
box-shadow: none !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-cell b {
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-cell em {
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
opacity: .75 !important;
}
/* Stats page. */
html.ws-v4-polish body.mobile-stats-active .mobile-stats-title h1 {
font-family: var(--ws-mobile-display) !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stats-filter button {
min-height: 40px !important;
padding: 0 14px !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stats-panel {
border-radius: 22px !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stat-card :is(b, strong) {
font-family: var(--ws-mobile-num) !important;
}
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action {
width: 100% !important;
min-height: 64px !important;
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 11px !important;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
border-radius: 16px !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--card)), color-mix(in srgb, var(--card) 94%, transparent)) !important;
color: var(--ink) !important;
text-align: left !important;
box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action i {
width: 34px !important;
height: 34px !important;
display: grid !important;
place-items: center !important;
border-radius: 12px !important;
background: color-mix(in srgb, var(--accent) 14%, var(--card)) !important;
color: var(--accent) !important;
font-style: normal !important;
}
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action b {
display: block !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action span {
display: block !important;
margin-top: 3px !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
}
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action em {
color: var(--accent) !important;
font-style: normal !important;
}
/* Plan page. */
html.ws-v4-polish body :is(.mobile-week-bars-compact, .mobile-seven-grid, .mobile-intensity-track) {
display: flex !important;
grid-template-columns: none !important;
align-items: flex-start !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding-bottom: 4px !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html.ws-v4-polish body :is(.mobile-week-bars-compact, .mobile-seven-grid, .mobile-intensity-track)::-webkit-scrollbar {
display: none !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day, .mobile-seven-day) {
flex: 0 0 calc((100% - 16px) / 3) !important;
width: calc((100% - 16px) / 3) !important;
min-width: 88px !important;
height: 82px !important;
min-height: 82px !important;
max-height: 82px !important;
display: grid !important;
align-content: center !important;
justify-items: start !important;
gap: 3px !important;
padding: 8px !important;
border: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
border-radius: 15px !important;
background: color-mix(in srgb, var(--card) 92%, transparent) !important;
text-align: left !important;
scroll-snap-align: start !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day.today, .mobile-seven-day.active) {
border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important;
}
html.ws-v4-polish body.mobile-plan-active .mobile-week-plan-bar {
display: none !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day, .mobile-seven-day) :is(span, b, strong, small, em) {
display: block !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day, .mobile-seven-day) b {
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day, .mobile-seven-day) span {
color: var(--ink-soft) !important;
}
html.ws-v4-polish body.mobile-plan-active .mobile-week-plan-day strong,
html.ws-v4-polish body.mobile-plan-active .mobile-seven-day small {
font-family: var(--ws-mobile-num) !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-plan-active .mobile-week-plan-day > small {
color: var(--accent) !important;
}
html.ws-v4-polish body.mobile-plan-active #mobilePlanIntensityTrack.mobile-intensity-track {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
column-gap: 0 !important;
overflow: visible !important;
}
html.ws-v4-polish body .mobile-intensity-step {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 64px !important;
min-height: 64px !important;
display: grid !important;
align-content: center !important;
justify-items: center !important;
gap: 2px !important;
padding: 24px 1px 0 !important;
text-align: center !important;
scroll-snap-align: start !important;
overflow: visible !important;
}
html.ws-v4-polish body .mobile-intensity-step :is(span, b, strong, small, em) {
display: block !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
text-align: center !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell.mobile-settings-shell .mobile-settings-section h3 button {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
border-radius: 999px !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
overflow: hidden !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell.mobile-settings-shell .mobile-settings-section h3 button::before {
color: var(--accent) !important;
font-size: 17px !important;
line-height: 1 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell.mobile-settings-shell .mobile-settings-section h3 button::after {
content: none !important;
display: none !important;
}
/* Settings page: keep app icon choices as cards, not generic icon bubbles. */
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-grid {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
overflow: visible !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 74px !important;
max-height: none !important;
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
align-items: center !important;
justify-items: start !important;
gap: 2px 8px !important;
padding: 8px !important;
border-radius: 14px !important;
text-align: left !important;
overflow: hidden !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-preview,
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card.image-missing::before {
grid-row: 1 / span 3 !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
border-radius: 11px !important;
margin: 0 !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card b,
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card small,
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-state {
min-width: 0 !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card b {
font-size: 11px !important;
line-height: 1.18 !important;
font-weight: 780 !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-card small {
font-size: 9px !important;
line-height: 1.16 !important;
color: var(--ink-soft) !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-state {
width: auto !important;
height: 18px !important;
min-height: 18px !important;
margin: 1px 0 0 !important;
padding: 0 6px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 8.5px !important;
line-height: 1 !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-action-row {
display: grid !important;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-primary-btn {
width: auto !important;
min-width: 96px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 14px !important;
border-radius: 14px !important;
white-space: nowrap !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-action-row small {
min-width: 0 !important;
font-size: 9.5px !important;
line-height: 1.28 !important;
white-space: normal !important;
}
}
@media (max-width: 390px) {
html.ws-v4-polish body.mobile-account-active :is(.mobile-settings-grid, .mobile-settings-grid.five) {
gap: 7px !important;
}
html.ws-v4-polish body.mobile-account-active .mobile-settings-cell {
min-height: 60px !important;
height: 60px !important;
padding-inline: 3px !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-icon-grid {
grid-template-columns: 1fr !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-action-row {
grid-template-columns: 1fr !important;
}
html.ws-v4-polish body #view-settings #settingsIconPanel .settings-primary-btn {
width: 100% !important;
}
}
/* =====================================================================
V4.1.11 手机端视觉刷新 (refresh layer)
规则：只用主题 token (--card/--ink/--line/--accent/--solid/--terra/--amber/--rose…)
+ color-mix，绝不写死颜色；按页用 body.mobile-*-active 作用域。
===================================================================== */
html.ws-v4-polish {
/* 可读的 accent 文字色：把 accent 往 ink 方向混，浅色/粉色主题下也保证对比度，
同时各主题通用（暗色主题里反而更亮、依旧可读）。用于「以 accent 当文字」的地方。 */
--ws-accent-ink: color-mix(in srgb, var(--accent) 44%, var(--ink) 56%);
--ws-rf-radius: 18px;
--ws-rf-radius-sm: 14px;
--ws-rf-radius-lg: 22px;
--ws-rf-border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
--ws-rf-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 9%, transparent);
--ws-rf-shadow-sm: 0 6px 16px color-mix(in srgb, var(--ink) 7%, transparent);
--ws-rf-inset: color-mix(in srgb, var(--card) 70%, transparent);
}
@media (max-width: 768px) {
/* ---------- A. 统一卡片表面（跨页一致的圆角/描边/阴影） ---------- */
html.ws-v4-polish body :is(
.mobile-home-section,
.mobile-stats-panel,
.mobile-settings-card
) {
background: var(--card) !important;
border: var(--ws-rf-border) !important;
border-radius: var(--ws-rf-radius) !important;
box-shadow: var(--ws-rf-shadow) !important;
}
/* ---------- B. 首页 ---------- */
/* 共享顶栏：品牌 + 头像对齐 */
html.ws-v4-polish body.mobile-home-active .mobile-home-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 4px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-brand {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-logo {
width: 38px !important;
height: 38px !important;
border-radius: 11px !important;
flex: 0 0 38px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-brand b {
color: var(--ink) !important;
font-size: 16px !important;
font-weight: 850 !important;
line-height: 1.1 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-brand span {
color: var(--ink-faint) !important;
font-size: 10px !important;
letter-spacing: .04em !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
background: color-mix(in srgb, var(--accent) 12%, var(--card)) !important;
color: var(--accent) !important;
font-weight: 850 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-pills {
display: flex !important;
gap: 8px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-home-pill {
min-height: 32px !important;
padding: 0 13px !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--line) 66%, transparent) !important;
background: color-mix(in srgb, var(--card) 78%, transparent) !important;
color: var(--ink) !important;
font-size: 12px !important;
font-weight: 700 !important;
}
/* 段头排版（首页通用） */
html.ws-v4-polish body.mobile-home-active .mobile-home-section {
padding: 14px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-section-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-section-head h2 {
font-family: var(--ws-mobile-display) !important;
font-size: 16px !important;
line-height: 1.2 !important;
font-weight: 850 !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-section-link {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--accent) !important;
font-size: 11px !important;
font-weight: 720 !important;
white-space: nowrap !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-section-link b {
color: var(--ink) !important;
}
/* 连胜卡：修对比度，图标按类型着色 */
html.ws-v4-polish body.mobile-home-active .mobile-streak-list {
display: grid !important;
gap: 9px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-card {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 11px !important;
padding: 12px !important;
border: 1px solid color-mix(in srgb, var(--line) 62%, transparent) !important;
border-radius: var(--ws-rf-radius-sm) !important;
background: var(--ws-rf-inset) !important;
box-shadow: none !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
display: grid !important;
place-items: center !important;
border-radius: 12px !important;
font-size: 19px !important;
line-height: 1 !important;
background: color-mix(in srgb, var(--accent) 13%, transparent) !important;
color: var(--accent) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-card.flash .mobile-streak-icon {
background: color-mix(in srgb, var(--amber) 18%, transparent) !important;
color: color-mix(in srgb, var(--amber) 88%, var(--ink)) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-card.fire .mobile-streak-icon {
background: color-mix(in srgb, var(--terra) 16%, transparent) !important;
color: var(--terra) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-card.hard .mobile-streak-icon {
background: color-mix(in srgb, var(--ink) 9%, transparent) !important;
color: var(--ink-soft) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-copy {
min-width: 0 !important;
display: block !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-copy b {
display: block !important;
color: var(--ink) !important;
font-size: 13px !important;
font-weight: 820 !important;
line-height: 1.2 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-copy strong {
display: block !important;
margin-top: 2px !important;
color: var(--ink) !important;
font-size: 12px !important;
font-weight: 700 !important;
font-family: var(--ws-mobile-num) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-streak-copy small {
display: block !important;
margin-top: 2px !important;
color: var(--ink-soft) !important;
font-size: 10px !important;
line-height: 1.3 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-track {
display: block !important;
margin-top: 7px !important;
height: 5px !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
overflow: hidden !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-track > i {
display: block !important;
height: 100% !important;
border-radius: 999px !important;
background: var(--accent) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-card-chevron {
color: var(--ink-faint) !important;
font-size: 18px !important;
}
/* 今日计划三宫格 + 主按钮 */
html.ws-v4-polish body.mobile-home-active .mobile-plan-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric {
display: grid !important;
grid-auto-flow: row !important;
gap: 5px !important;
padding: 11px 9px !important;
border: 1px solid color-mix(in srgb, var(--line) 56%, transparent) !important;
border-radius: 14px !important;
background: var(--ws-rf-inset) !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric > span {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric > span > span {
color: var(--ink-soft) !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric b {
display: flex !important;
align-items: baseline !important;
gap: 3px !important;
color: var(--ink) !important;
font-size: 11px !important;
font-weight: 700 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric em {
font-family: var(--ws-mobile-num) !important;
font-style: normal !important;
color: var(--ink) !important;
font-size: 21px !important;
font-weight: 850 !important;
line-height: 1 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-metric small {
color: var(--ink-faint) !important;
font-size: 9.5px !important;
line-height: 1.2 !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-icon {
background: color-mix(in srgb, var(--accent) 14%, var(--card)) !important;
color: var(--ws-accent-ink) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-progress {
display: grid !important;
gap: 6px !important;
margin-top: 12px !important;
color: var(--ink-soft) !important;
font-size: 11px !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-start-btn {
width: 100% !important;
min-height: 52px !important;
margin-top: 14px !important;
border: 0 !important;
border-radius: 16px !important;
background: var(--solid) !important;
color: var(--solid-text) !important;
font-size: 15px !important;
font-weight: 850 !important;
box-shadow: 0 12px 26px color-mix(in srgb, var(--solid) 30%, transparent) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-start-btn:active {
transform: translateY(1px) !important;
}
/* ---------- C. 我的（修截断/对比，补卡片层级） ---------- */
/* 副标题：允许换行 + 提高对比，修右侧截断 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-title p {
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
color: var(--ink-soft) !important;
}
/* 账号 ID：提高对比，单行省略不重叠 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile p {
color: var(--ink-soft) !important;
opacity: 1 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile .mobile-settings-badge {
background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
color: var(--accent) !important;
}
/* 权益卡更突出 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-member {
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 16%, var(--card)),
color-mix(in srgb, var(--card) 92%, transparent)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-member-icon {
background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
color: var(--accent) !important;
}
/* 段卡：统一描边/阴影，折叠态收紧 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section {
background: var(--card) !important;
border: var(--ws-rf-border) !important;
box-shadow: var(--ws-rf-shadow-sm) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3 {
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3 i {
background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
color: var(--accent) !important;
}
/* 格子：图标圈 + 文案对比微调 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell {
background: var(--ws-rf-inset) !important;
border: 1px solid color-mix(in srgb, var(--line) 46%, transparent) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell b {
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell em {
color: var(--ink-faint) !important;
}
/* ---------- D. 统计 / 计划 ---------- */
html.ws-v4-polish body.mobile-stats-active .mobile-stats-panel {
padding: 14px !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stat-card {
border: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
border-radius: 14px !important;
background: var(--ws-rf-inset) !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stat-card :is(b, strong) {
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-plan-active :is(.mobile-week-plan-day, .mobile-seven-day) b {
color: var(--ink) !important;
}
/* ---------- E. 学习页：记忆锚点并入统一圆角 ---------- */
html.ws-v4-polish body #study.on .ws-memory-hook {
border-radius: var(--ws-rf-radius-sm) !important;
}
}
/* =====================================================================
V4.1.11 手机端「视觉层级」层 (hierarchy layer)
目标：每页一个主焦点压全场，其余降为次要，解决「不知道先看哪」。
手段（全部走主题 token）：
- 双层表面：hero（抬起、描边带 accent、强阴影）vs secondary（安静、半透明、无阴影）
- 页面标题：更大 + accent 细线，明确「这是本页顶」
- 段头：降为安静的 eyebrow，让数据/操作成为视觉重点
- 首页今日计划提为 hero 并前置
===================================================================== */
@media (max-width: 768px) {
/* ---------- 0. 统一页面标题（各页一致的顶层） ---------- */
html.ws-v4-polish body :is(
#mobilePlanPage .mobile-plan-title,
#mobileHardPage .mobile-hard-title,
#mobileStatsPage .mobile-stats-title,
#mobileSettingsShell .mobile-settings-title
) {
padding-bottom: 10px !important;
margin-bottom: 4px !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent) !important;
position: relative !important;
}
html.ws-v4-polish body :is(
#mobilePlanPage .mobile-plan-title,
#mobileHardPage .mobile-hard-title,
#mobileStatsPage .mobile-stats-title,
#mobileSettingsShell .mobile-settings-title
)::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: -1px !important;
width: 34px !important;
height: 2px !important;
border-radius: 2px !important;
background: var(--accent) !important;
}
/* ---------- 1. 次要卡片：安静下来（默认所有 section 是 secondary） ---------- */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section {
background: color-mix(in srgb, var(--card) 46%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--line) 46%, transparent) !important;
box-shadow: none !important;
}
/* 次要段头：缩小、降调，做成 eyebrow，让内容(数字/状态)更突出 */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section .mobile-section-head h2 {
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
color: var(--ink-soft) !important;
}
/* ---------- 2. 首页 HERO：今日计划提前 + 抬起 ---------- */
/* 重新排序：顶栏→快捷→今日计划(hero)→提示→连胜→日历→成就 */
html.ws-v4-polish body #mobileHome > .mobile-home-top { order: 1 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-pills { order: 2 !important; }
html.ws-v4-polish body #mobileHome > .mobile-tip-card { order: 3 !important; }
html.ws-v4-polish body #mobileHome > #mobileTipDots { order: 4 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] { order: 5 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-section[aria-labelledby="mobileStreakTitle"] { order: 6 !important; }
html.ws-v4-polish body #mobileHome > #mobileCalendarCard { order: 7 !important; }
html.ws-v4-polish body #mobileHome > .mobile-home-section[aria-labelledby="mobileAchievementTitle"] { order: 8 !important; }
/* hero 表面：抬起、accent 描边、强阴影 */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] {
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 9%, var(--card)),
var(--card)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 13%, transparent) !important;
padding: 16px !important;
}
/* hero 段头：恢复为强标题 + accent 眉标 */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] .mobile-section-head h2 {
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] .mobile-section-head h2::before {
content: "" !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
margin-right: 8px !important;
border-radius: 999px !important;
background: var(--accent) !important;
vertical-align: middle !important;
}
/* hero 内的三宫格：抬白、数字加大 */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] .mobile-plan-metric {
background: color-mix(in srgb, var(--card) 88%, transparent) !important;
border-color: color-mix(in srgb, var(--line) 40%, transparent) !important;
}
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobilePlanTitle"] .mobile-plan-metric em {
font-size: 23px !important;
}
/* ---------- 3. 连胜：明确次要（更紧凑，弱化为入口列表） ---------- */
html.ws-v4-polish body.mobile-home-active .mobile-streak-card {
padding: 10px 12px !important;
background: color-mix(in srgb, var(--card) 60%, transparent) !important;
}
/* 次要区里的进度条更细，不抢戏 */
html.ws-v4-polish body.mobile-home-active #mobileHome > .mobile-home-section[aria-labelledby="mobileStreakTitle"] .mobile-track {
height: 4px !important;
}
/* ---------- 4. 我的：identity → 快捷 → 设置 三层清晰 ---------- */
/* 档案卡抬起为本页焦点 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile {
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 8%, var(--card)),
var(--card)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 12%, transparent) !important;
}
/* 下载/分享：降为安静的并排快捷，不与设置抢视觉 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell :is(.ws-v4-pwa-shortcut, .ws-v4-share-shortcut) {
min-height: 44px !important;
background: color-mix(in srgb, var(--card) 50%, transparent) !important;
box-shadow: none !important;
}
/* 设置段：安静表面，靠段头分组而非阴影 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section {
background: color-mix(in srgb, var(--card) 50%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--line) 46%, transparent) !important;
box-shadow: none !important;
}
/* ---------- 5. 统计/计划/难词：主数据块抬起，其余安静 ---------- */
/* 统计「下一步」是引导，做成安静细条；总览作为主块 */
html.ws-v4-polish body.mobile-stats-active .ws-mobile-next-action {
box-shadow: none !important;
background: color-mix(in srgb, var(--accent) 8%, var(--card)) !important;
}
html.ws-v4-polish body.mobile-stats-active .mobile-stats-panel {
box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 9%, transparent) !important;
}
}
/* =====================================================================
V4.1.11 内页统一 app-bar（首页今日不动）
词库 / 计划表 / 统计 / 难词本 顶栏：同一套图标按钮样式与尺寸，
精简重复品牌（保留 logo + 词卷，隐去重复英文行），所有功能按钮保留。
===================================================================== */
@media (max-width: 768px) {
html.ws-v4-polish body :is(
.mobile-lib-top, .mobile-plan-top, .mobile-stats-top, .mobile-hard-top
) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
min-height: 46px !important;
margin-bottom: 6px !important;
}
html.ws-v4-polish body :is(
.mobile-lib-brand, .mobile-plan-brand, .mobile-stats-brand, .mobile-hard-brand
) {
display: flex !important;
align-items: center !important;
gap: 9px !important;
min-width: 0 !important;
}
html.ws-v4-polish body :is(
.mobile-lib-logo, .mobile-plan-logo, .mobile-stats-logo, .mobile-hard-logo
) {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 10px !important;
flex: 0 0 34px !important;
}
html.ws-v4-polish body :is(
.mobile-lib-brand, .mobile-plan-brand, .mobile-stats-brand, .mobile-hard-brand
) b {
font-size: 15px !important;
font-weight: 850 !important;
line-height: 1 !important;
color: var(--ink) !important;
}
/* 内页隐去重复的英文副行，减负（首页保留，不在此选择器内） */
html.ws-v4-polish body :is(
.mobile-lib-brand, .mobile-plan-brand, .mobile-stats-brand, .mobile-hard-brand
) span {
display: none !important;
}
html.ws-v4-polish body :is(
.mobile-lib-actions, .mobile-plan-actions, .mobile-stats-actions, .mobile-hard-actions
) {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* 统一图标按钮：圆形、token 描边、精致 */
html.ws-v4-polish body :is(
.mobile-lib-iconbtn, .mobile-plan-iconbtn, .mobile-stats-iconbtn, .mobile-hard-iconbtn
) {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
background: color-mix(in srgb, var(--card) 68%, transparent) !important;
color: var(--ink) !important;
font-size: 16px !important;
line-height: 1 !important;
box-shadow: none !important;
}
html.ws-v4-polish body :is(
.mobile-lib-iconbtn, .mobile-plan-iconbtn, .mobile-stats-iconbtn, .mobile-hard-iconbtn
):active {
background: color-mix(in srgb, var(--accent) 14%, var(--card)) !important;
border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
color: var(--accent) !important;
}
/* 通知铃：保留可点（不丢功能），但降为次要、不抢视觉 */
html.ws-v4-polish body :is(
.mobile-lib-iconbtn.dot, .mobile-plan-iconbtn.dot, .mobile-stats-iconbtn.dot, .mobile-hard-iconbtn.dot
) {
color: var(--ink-faint) !important;
}
/* 统一头像按钮 */
html.ws-v4-polish body :is(
.mobile-lib-avatar, .mobile-plan-avatar, .mobile-stats-avatar, .mobile-hard-avatar
) {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
overflow: hidden !important;
place-items: center !important;
}
html.ws-v4-polish body :is(
.mobile-lib-avatar, .mobile-plan-avatar, .mobile-stats-avatar, .mobile-hard-avatar
) img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* =====================================================================
V4.1.11 主题对比度修复（全主题，尤其浅色 / 桃桃猫卷）
症结：以 accent 当「文字色」落在 accent 浅底上，浅色系主题对比不足。
修法：文字改用 --ws-accent-ink（accent 偏 ink，全主题可读）；
主要正文回落到 --ink / --ink-soft；图标用更可读的 accent-ink。
===================================================================== */
@media (max-width: 768px) {
/* 链接/次级强调文字：全主题可读的 accent */
html.ws-v4-polish body :is(
.mobile-section-link,
.mobile-settings-link,
.mobile-settings-member .mobile-settings-link
) {
color: var(--ws-accent-ink) !important;
}
/* 「下载应用 / PWA」「分享词卷」快捷：正文走 ink，强调走 accent-ink，底色更淡保证对比 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut {
background: color-mix(in srgb, var(--accent) 7%, var(--card)) !important;
border-color: color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut b {
color: var(--ws-accent-ink) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-share-shortcut strong {
color: var(--ws-accent-ink) !important;
}
/* 「下载应用 / PWA」对齐「分享词卷」：统一为 图标 + 标题 + 尾巴 三段式中性卡，不再是无图标的描边块 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 13px !important;
background: color-mix(in srgb, var(--card) 50%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut::before {
content: "⤓" !important;
width: 30px !important;
height: 30px !important;
display: grid !important;
place-items: center !important;
border-radius: 10px !important;
background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
color: var(--accent) !important;
font-size: 16px !important;
font-weight: 950 !important;
line-height: 1 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut span {
color: var(--ink) !important;
font-size: 12.5px !important;
font-weight: 850 !important;
min-width: 0 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut b {
color: var(--ws-accent-ink) !important;
font-size: 11px !important;
font-weight: 850 !important;
white-space: nowrap !important;
}
/* 底部浮动导航：所有手机页统一抬到安全区上方同一高度，消除「切到我的页导航往上跳」。
原因：一般页的 nav 用 bottom:12px（没算 env(safe-area-inset-bottom)），而「我的」页用
bottom:calc(11px + safe)，在带 Home 指示条的 iPhone 上两者差约 34px，切页就跳。这里钉死统一值。 */
html.ws-v4-polish body[class*="mobile-"][class*="-active"] nav {
bottom: calc(11px + env(safe-area-inset-bottom, 0px)) !important;
}
/* 手机首页顶栏图标修复（全主题通用）：
① 铃铛/奖杯圆按钮原来 29×36（宽≠高）+ 50% 圆角 = 椭圆 → 钉死正方形才是正圆；内部图标收进盒子。
② 「商城」胶囊的 ::before 是个没有图标蒙版的 15px 实心深色方块（黑方块）→ 文字已含「✦ 商城」，隐藏它。 */
html.ws-v4-polish body .mobile-home-rank {
width: 33px !important;
height: 33px !important;
min-width: 33px !important;
max-width: 33px !important;
min-height: 33px !important;
max-height: 33px !important;
font-size: 17px !important;
line-height: 1 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
html.ws-v4-polish body .mobile-home-rank > svg,
html.ws-v4-polish body .mobile-home-rank > img {
width: 18px !important;
height: 18px !important;
}
html.ws-v4-polish body #mobileHomeShop::before {
display: none !important;
}
/* ============================================================
「我的」个人中心 · 重做 (V5.6.5)
主角＝学习者身份与等级旅程：账号卡做成有质感的「学习者名片」，
等级 / 经验用 Georgia 衬线数字(签名)，登录态才出现的实色 CTA。
全部走主题 token，6 套主题安全。
============================================================ */
/* 页头「我的」 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-title h2 {
font-size: 27px !important;
font-weight: 950 !important;
letter-spacing: .01em !important;
color: var(--ink) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-title p {
font-size: 11.5px !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
}
/* 学习者名片(hero) */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
column-gap: 15px !important;
row-gap: 15px !important;
padding: 19px 17px 16px !important;
align-items: flex-start !important;
background:
radial-gradient(130% 110% at 100% -10%, color-mix(in srgb, var(--terra, #c79a3e) 13%, transparent), transparent 58%),
linear-gradient(162deg, color-mix(in srgb, var(--card) 99%, transparent), color-mix(in srgb, var(--paper) 88%, transparent)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
border-radius: 20px !important;
box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 10%, transparent) !important;
overflow: hidden !important;
}
/* 顶部一道极细的金绿描边(卷轴丝带意象)——克制的签名装饰 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile::after {
content: "" !important;
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, var(--accent), var(--terra, #c79a3e)) !important;
opacity: .9 !important;
}
/* 头像：圆角方 + 一圈安静的强调色描边 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-avatar {
flex: 0 0 58px !important;
align-self: flex-start !important;
width: 58px !important; height: 58px !important;
min-width: 58px !important; max-width: 58px !important;
min-height: 58px !important; max-height: 58px !important;
border-radius: 18px !important;
font-size: 22px !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), 0 8px 18px color-mix(in srgb, var(--ink) 12%, transparent) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-avatar img {
border-radius: 16px !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile-main {
flex: 1 1 0 !important; min-width: 0 !important;
}
/* 姓名 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile h3 {
font-size: 19px !important;
line-height: 1.2 !important;
font-weight: 950 !important;
letter-spacing: .01em !important;
color: var(--ink) !important;
display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important;
}
/* 等级印章：金绿质感 + Georgia 衬线数字(签名) */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-badge {
height: 21px !important;
margin-left: 0 !important;
padding: 0 9px !important;
border-radius: 7px !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--terra, #c79a3e) 28%, var(--card)), color-mix(in srgb, var(--accent) 18%, var(--card))) !important;
border: 1px solid color-mix(in srgb, var(--terra, #c79a3e) 38%, var(--line)) !important;
color: var(--ws-accent-ink, var(--accent)) !important;
font-family: Georgia, "Times New Roman", "Songti SC", serif !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
}
/* ID 行 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile p {
font-size: 11px !important;
margin-top: 5px !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
}
/* 状态胶囊 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-status {
height: 23px !important;
margin-top: 8px !important;
padding: 0 10px !important;
font-size: 9.5px !important;
}
/* 经验旅程(签名)：进度条 + Georgia 衬线数字 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-lv-bar {
height: 7px !important;
max-width: none !important;
margin: 12px 0 6px !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--ink) 9%, transparent) !important;
overflow: hidden !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-lv-bar i {
background: linear-gradient(90deg, var(--accent), var(--terra, #c79a3e)) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-lv-xp {
font-family: Georgia, "Times New Roman", serif !important;
font-size: 11px !important;
letter-spacing: .015em !important;
color: var(--ws-readable-muted, var(--ink-soft)) !important;
}
/* CTA：游客→实色金绿大按钮(请你登录)；已登录→安静的描边链接(卡片本身可点) */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile > .mobile-settings-link {
flex: 0 0 100% !important;
order: 9 !important;
width: 100% !important;
height: 44px !important;
border-radius: 14px !important;
font-size: 13.5px !important;
font-weight: 950 !important;
justify-content: center !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile > .mobile-settings-link[data-mobile-settings-action="login"] {
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, var(--terra, #c79a3e))) !important;
color: var(--solid-text, #fff) !important;
border: 0 !important;
box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-profile > .mobile-settings-link[data-account-entry] {
background: color-mix(in srgb, var(--accent) 9%, var(--card)) !important;
color: var(--ws-accent-ink, var(--accent)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
}
/* 布局：壳改两列网格；除「下载 / 分享」外其余全宽，把这两个次要快捷收成并排紧凑磁贴，
省一行 + 打破长条堆叠的单调，层级更清晰(身份名片 → 快捷 → 权益 → 设置组)。 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell {
grid-template-columns: 1fr 1fr !important;
column-gap: 9px !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell > * {
grid-column: 1 / -1 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell > .ws-v4-pwa-shortcut {
grid-column: 1 / 2 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell > .ws-v4-share-shortcut {
grid-column: 2 / 3 !important;
}
/* 半宽磁贴：只留 图标 + 标题，省掉说明与尾巴箭头 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell :is(.ws-v4-pwa-shortcut, .ws-v4-share-shortcut) {
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 10px !important;
min-height: 58px !important;
padding: 12px 13px !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut b,
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-share-shortcut em,
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-share-shortcut strong {
display: none !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-pwa-shortcut span,
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .ws-v4-share-shortcut b {
font-size: 12.5px !important;
font-weight: 850 !important;
color: var(--ink) !important;
line-height: 1.25 !important;
}
/* 「我的」图标格：图标用可读 accent-ink，副标签用 ink-soft（不再透明虚化） */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell-icon {
color: var(--ws-accent-ink) !important;
background: color-mix(in srgb, var(--accent) 12%, var(--card)) !important;
border-color: color-mix(in srgb, var(--accent) 26%, var(--line)) !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell em {
color: var(--ink-soft) !important;
opacity: 1 !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3 i {
color: var(--ws-accent-ink) !important;
}
/* 首页连胜/计划：图标改用可读 accent-ink；进度填充保持 accent（块状面积大，对比足够） */
html.ws-v4-polish body.mobile-home-active .mobile-streak-icon {
color: var(--ws-accent-ink) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-plan-icon {
color: var(--ws-accent-ink) !important;
}
html.ws-v4-polish body.mobile-home-active .mobile-section-link b {
color: var(--ink) !important;
}
/* 内页顶栏图标按钮按下态：用可读 accent-ink 文字 */
html.ws-v4-polish body :is(
.mobile-lib-iconbtn, .mobile-plan-iconbtn, .mobile-stats-iconbtn, .mobile-hard-iconbtn
):active {
color: var(--ws-accent-ink) !important;
}
/* 学习页记忆锚点标题：accent-ink 更稳 */
html.ws-v4-polish body #study.on .ws-memory-hook b {
color: var(--ws-accent-ink) !important;
}
/* 记录页「+添加难词」悬浮按钮：抬到固定底部导航之上，避免被导航盖住（看不见）。 */
html.ws-v4-polish body .mobile-hard-add {
bottom: calc(106px + env(safe-area-inset-bottom)) !important;
right: 16px !important;
width: 48px !important;
height: 48px !important;
z-index: 9998 !important;
box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 24%, transparent) !important;
}
/* Toast 提示：抬到固定底部导航之上并置顶层，避免被导航盖住（提示看不见）。 */
html.ws-v4-polish body #toast {
bottom: calc(100px + env(safe-area-inset-bottom)) !important;
z-index: 10001 !important;
}
/* V5.9.1(用户实测微信内打开学习页出现整屏大黑块)：学习页 toast 走顶部规则(top)，
上面这条 !important 的 bottom 会与 top 同时生效、把 fixed 元素拉成整屏高——学习页必须把 bottom 归位 auto。 */
html.ws-v4-polish body:has(#study.on) #toast {
bottom: auto !important;
}
/* ---------- 设置页（view-settings）App 化：分类做成横向胶囊，面板做成干净卡片 ---------- */
html.ws-v4-polish body #view-settings .settings-shell {
display: block !important;
}
/* 顶部分类：横向滚动胶囊条，省纵向空间、更像 App */
html.ws-v4-polish body #view-settings .settings-subnav {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
margin: 4px 0 14px !important;
padding: 2px 2px 8px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html.ws-v4-polish body #view-settings .settings-subnav::-webkit-scrollbar {
display: none !important;
}
html.ws-v4-polish body #view-settings .settings-subnav button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 36px !important;
margin: 0 !important;
padding: 0 14px !important;
border-radius: 999px !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
background: color-mix(in srgb, var(--card) 70%, transparent) !important;
color: var(--ink) !important;
font-size: 12.5px !important;
font-weight: 720 !important;
white-space: nowrap !important;
scroll-snap-align: start !important;
}
html.ws-v4-polish body #view-settings .settings-subnav button.active {
background: color-mix(in srgb, var(--accent) 16%, var(--card)) !important;
border-color: var(--accent) !important;
color: var(--ws-accent-ink) !important;
font-weight: 850 !important;
}
/* 面板做成统一干净卡片 */
html.ws-v4-polish body #view-settings .settings-board {
display: block !important;
}
html.ws-v4-polish body #view-settings .settings-card {
margin-bottom: 12px !important;
padding: 15px !important;
border-radius: var(--ws-rf-radius) !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
background: var(--card) !important;
box-shadow: var(--ws-rf-shadow-sm) !important;
}
html.ws-v4-polish body #view-settings .settings-card > h3 {
margin: 0 0 4px !important;
font-size: 15.5px !important;
line-height: 1.25 !important;
font-weight: 850 !important;
color: var(--ink) !important;
}
html.ws-v4-polish body #view-settings .settings-card > p {
margin: 0 0 12px !important;
color: var(--ink-soft) !important;
font-size: 11.5px !important;
line-height: 1.45 !important;
}
/* 底部保存条：抬到固定导航之上 */
html.ws-v4-polish body #view-settings .settings-bottom-bar {
position: static !important;
margin-top: 4px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
/* ---------- 设置页多级菜单：分类列表 → 二级详情 → 返回 ---------- */
/* 列表态：分类做成竖向行卡（带 › 箭头），隐藏所有面板 */
html.ws-v4-polish body #view-settings .settings-shell.ws-drill .settings-subnav {
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
overflow: visible !important;
margin: 4px 0 12px !important;
padding: 4px !important;
background: var(--card) !important;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
border-radius: var(--ws-rf-radius) !important;
box-shadow: var(--ws-rf-shadow-sm) !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill .settings-subnav button {
width: 100% !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border: 0 !important;
border-radius: 12px !important;
background: transparent !important;
color: var(--ink) !important;
font-size: 14.5px !important;
font-weight: 720 !important;
text-align: left !important;
white-space: normal !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill .settings-subnav button + button {
border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent) !important;
border-radius: 0 !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill .settings-subnav button::after {
content: "›" !important;
color: var(--ink-faint) !important;
font-size: 19px !important;
font-weight: 700 !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill .settings-subnav button.active {
background: transparent !important;
color: var(--ink) !important;
}
/* 列表态隐藏面板区 */
html.ws-v4-polish body #view-settings .settings-shell.ws-drill:not(.ws-drill-detail) .settings-board {
display: none !important;
}
/* 详情态：隐藏分类列表，只显示选中的那个面板 + 返回按钮 */
html.ws-v4-polish body #view-settings .settings-shell.ws-drill-detail .settings-subnav {
display: none !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill-detail .settings-board {
display: block !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill-detail .settings-card {
display: none !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill-detail .settings-card.ws-open {
display: block !important;
}
html.ws-v4-polish body #view-settings .settings-shell.ws-drill-detail .settings-bottom-bar {
display: none !important;
}
/* 设置页顶部留出返回键浮层的空间 */
html.ws-v4-polish body #view-settings {
padding-top: 54px !important;
}
/* 返回按钮：固定悬浮在屏幕左上角，始终可见。详情态→返回分类列表，列表态→返回「我的」。 */
html.ws-v4-polish body #view-settings .ws-drill-back {
position: fixed !important;
top: max(10px, env(safe-area-inset-top)) !important;
left: 12px !important;
z-index: 9000 !important;
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
min-height: 36px !important;
margin: 0 !important;
padding: 0 14px 0 8px !important;
border: 1px solid color-mix(in srgb, var(--line) 55%, transparent) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--card) 90%, transparent) !important;
color: var(--ws-accent-ink) !important;
font-size: 14px !important;
font-weight: 850 !important;
box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 12%, transparent) !important;
}
html.ws-v4-polish body #view-settings .ws-drill-back span {
font-size: 22px !important;
line-height: 1 !important;
}
html.ws-v4-polish body #view-settings .ws-drill-back em {
font-style: normal !important;
}
/* ---------- 弹窗/浮层层级修复：高于固定底部导航(9999) + 铺满全屏，否则导航会从底部露出/盖住弹窗 ---------- */
html.ws-v4-polish body :is(
.contact-modal, .auth-modal, .plan-full-modal, .client-gate, .wait-modal,
.boot-splash, #menuPanelModal, #profileCenterModal, #planFullModal
) {
z-index: 12000 !important;
/* 只提升层级 + 用 inset:0 铺满可视视口（盖住底部导航）+ 去掉旧的 776 高度上限。
不强制 display/居中：弹窗的显示/隐藏与居中由各自原有 CSS 控制，
否则会把本应 display:none 的弹窗强制显示出来（首屏弹窗乱入）。 */
inset: 0 !important;
max-height: none !important;
}
/* 仅当弹窗处于打开态时，确保在可视区内垂直居中（iOS 不再偏下）。 */
html.ws-v4-polish body :is(
.contact-modal.on, .auth-modal.on, .plan-full-modal.on, .client-gate.on, .wait-modal.on,
#menuPanelModal.on, #profileCenterModal.on, #planFullModal.on
) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Toast 始终在最上层（含弹窗之上） */
html.ws-v4-polish body #toast {
z-index: 12010 !important;
}
}
/* =====================================================================
V4.1.15 统一线性图标系统（替换 ▣ ◎ □ ↻ ☰ ◌ 等方块/豆腐字形）
思路：图标容器只放一个字形 → font-size:0 隐藏字形 → ::before 用
SVG mask + background:currentColor 画出线性图标；颜色继承容器原
有 color（主题 token），主题安全、无写死颜色。
===================================================================== */
@media (max-width: 768px){
html.ws-v4-polish body :is(
.mobile-plan-icon, .mobile-streak-icon, .mobile-ach-icon, .mobile-tip-icon,
.mobile-section-link > span, .mobile-plan-iconbtn, .mobile-stats-iconbtn,
.mobile-lib-iconbtn, .mobile-hard-iconbtn, .mobile-lib-search > span,
[data-mobile-lib-view], [data-mobile-plan-tool] > span, .mobile-hard-trend-icon,
.plan-metric-icon, .mobile-settings-cell-icon, .mobile-settings-member-icon,
.mobile-settings-icon-btn[data-mobile-settings-action="message-notice"]
){
font-size: 0 !important;
line-height: 0 !important;
}
html.ws-v4-polish body :is(
.mobile-plan-icon, .mobile-streak-icon, .mobile-ach-icon, .mobile-tip-icon,
.mobile-section-link > span, .mobile-plan-iconbtn, .mobile-stats-iconbtn,
.mobile-lib-iconbtn, .mobile-hard-iconbtn, .mobile-lib-search > span,
[data-mobile-lib-view], [data-mobile-plan-tool] > span, .mobile-hard-trend-icon,
.plan-metric-icon, .mobile-settings-cell-icon, .mobile-settings-member-icon,
.mobile-settings-icon-btn[data-mobile-settings-action="message-notice"]
)::before{
content: "" !important;
display: inline-block !important;
width: var(--wsico-sz, 22px) !important;
height: var(--wsico-sz, 22px) !important;
background: currentColor !important;
-webkit-mask: var(--wsico) center / contain no-repeat !important;
mask: var(--wsico) center / contain no-repeat !important;
}
/* ---- 首页 ---- */
html.ws-v4-polish body .mobile-streak-card.flash .mobile-streak-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 6 13.2h4.8l-1 7.8L18 10.4h-4.8z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-streak-card.fire .mobile-streak-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.2 3 4.5 5.2 4.5 8a4.5 4.5 0 0 1-9 0c0-1.7 .8-3.1 2-4.3 .2 1.4 1 2.1 1.9 2.1-1.1-1.9-.6-4.1 .6-5.8z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-streak-card.hard .mobile-streak-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7h11M8.5 12h11M8.5 17h11'/%3E%3Cpath d='M4.6 7h.02M4.6 12h.02M4.6 17h.02'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-plan-metric.new .mobile-plan-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3Cpath d='m7 7 1.6 1.6M17 7l-1.6 1.6M7 17l1.6-1.6M17 17l-1.6-1.6'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-plan-metric.review .mobile-plan-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.6a7.5 7.5 0 1 1-2.3-5.5'/%3E%3Cpath d='M19.8 4.4v4.1h-4.1'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-plan-metric.target .mobile-plan-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 11.95h.02'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-tip-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 18h4.8M10.3 21h3.4'/%3E%3Cpath d='M12 3.3A5.7 5.7 0 0 0 8.5 13.5c.6.5 1 1.1 1.1 1.9h4.8c.1-.8 .5-1.4 1.1-1.9A5.7 5.7 0 0 0 12 3.3z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-ach-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3.6 11 9M15.3 3.6 13 9'/%3E%3Ccircle cx='12' cy='14.6' r='5.2'/%3E%3Cpath d='m12 12.3 .9 1.9 2 .2-1.5 1.4 .5 2-1.9-1-1.9 1 .5-2-1.5-1.4 2-.2z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-section-link > span{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M9.8 9.7a2.3 2.3 0 0 1 4.4 .7c0 1.5-2.2 1.8-2.2 3.2'/%3E%3Cpath d='M12 16.4h.02'/%3E%3C/svg%3E"); --wsico-sz: 15px !important; vertical-align: -2px; margin-right: 3px; }
/* ---- 计划页 ---- */
html.ws-v4-polish body .mobile-plan-iconbtn{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.3'/%3E%3Cpath d='M4 10h16M8 3.6v3.8M16 3.6v3.8'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
html.ws-v4-polish body [data-mobile-plan-tool="full"] > span{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7h11M8.5 12h11M8.5 17h11'/%3E%3Cpath d='M4.6 7h.02M4.6 12h.02M4.6 17h.02'/%3E%3C/svg%3E"); --wsico-sz: 17px !important; vertical-align: -3px; margin-right: 5px; }
html.ws-v4-polish body [data-mobile-plan-tool="count"] > span{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h8.5M16.5 8H20M4 16h3.5M11.5 16H20'/%3E%3Ccircle cx='14.5' cy='8' r='2.1'/%3E%3Ccircle cx='9' cy='16' r='2.1'/%3E%3C/svg%3E"); --wsico-sz: 17px !important; vertical-align: -3px; margin-right: 5px; }
html.ws-v4-polish body [data-mobile-plan-tool="reset"] > span{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.6a7.5 7.5 0 1 1-2.3-5.5'/%3E%3Cpath d='M19.8 4.4v4.1h-4.1'/%3E%3C/svg%3E"); --wsico-sz: 17px !important; vertical-align: -3px; margin-right: 5px; }
html.ws-v4-polish body .plan-metric-icon.new{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3Cpath d='m7 7 1.6 1.6M17 7l-1.6 1.6M7 17l1.6-1.6M17 17l-1.6-1.6'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .plan-metric-icon.review{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.6a7.5 7.5 0 1 1-2.3-5.5'/%3E%3Cpath d='M19.8 4.4v4.1h-4.1'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .plan-metric-icon.target{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 11.95h.02'/%3E%3C/svg%3E"); }
/* ---- 词库页 / 记录页 顶栏图标按钮 ---- */
html.ws-v4-polish body :is(#mobileLibTopSearch, #mobileHardTopSearch, .mobile-lib-search > span){ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.8'/%3E%3Cpath d='m14.8 14.8 4.4 4.4'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
html.ws-v4-polish body :is(#mobileLibNotice, #mobileHardNotice){ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 16.5V11a5.6 5.6 0 0 1 11.2 0v5.5l1.4 2H5z'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
html.ws-v4-polish body [data-mobile-lib-view="list"]{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7h11M8.5 12h11M8.5 17h11'/%3E%3Cpath d='M4.6 7h.02M4.6 12h.02M4.6 17h.02'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
html.ws-v4-polish body [data-mobile-lib-view="grid"]{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4.5' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='13.2' y='4.5' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='4' y='13.7' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='13.2' y='13.7' width='6.8' height='6.8' rx='1.6'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
html.ws-v4-polish body .mobile-hard-trend-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 20h14.8'/%3E%3Cpath d='M7.5 20v-5M12 20V8.5M16.5 20v-8'/%3E%3C/svg%3E"); }
/* ---- 统计页 ---- */
html.ws-v4-polish body .mobile-stats-iconbtn{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.3'/%3E%3Cpath d='M4 10h16M8 3.6v3.8M16 3.6v3.8'/%3E%3C/svg%3E"); --wsico-sz: 18px !important; }
}
/* =====================================================================
V4.1.15 「我的 / 设置」气泡格 → 文字列表行
用户反馈：气泡太多，直接用文字。把图标格改成 iOS 风格的整行：
小号线性图标 + 标题（主）+ 次要说明 + 右侧 ›，文字为主、更干净。
仅改外观与排版，不动 data-mobile-settings-action 的行为。
===================================================================== */
@media (max-width: 768px){
/* 网格 → 单列列表 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-grid,
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-grid.five{
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 0 !important;
margin-top: 2px !important;
}
/* 每格 → 整行 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
min-height: 48px !important;
height: auto !important;
padding: 11px 2px !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
}
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-grid > .mobile-settings-cell:last-child{
border-bottom: 0 !important;
}
/* 左侧小图标：低调可读的 accent-ink */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell-icon{
flex: 0 0 auto !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
margin: 0 !important;
display: grid !important;
place-items: center !important;
border-radius: 9px !important;
background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
color: var(--ws-accent-ink) !important;
--wsico-sz: 18px !important;
}
/* 标题：主文字、左对齐、占满中间 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell b{
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
text-align: left !important;
font-size: 14.5px !important;
font-weight: 680 !important;
line-height: 1.3 !important;
color: var(--ink) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 次要说明：右侧小字（用 ink-soft 保证可读，避免过淡看不清） */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell em{
flex: 0 0 auto !important;
margin: 0 !important;
font-style: normal !important;
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--ink-soft) !important;
}
/* 行尾 › 指示 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell::after{
content: "\203A" !important;
flex: 0 0 auto !important;
margin-left: 1px !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: var(--ink-soft) !important;
}
/* 段落标题左侧 ▮ → 干净 accent 竖条 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3 i{
font-size: 0 !important;
width: 4px !important;
height: 14px !important;
min-width: 4px !important;
border-radius: 3px !important;
background: var(--accent) !important;
display: inline-block !important;
vertical-align: -2px !important;
margin-right: 8px !important;
}
/* 各设置项图标（行内小图标） */
html.ws-v4-polish body [data-mobile-settings-action="account-security"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 5.4 5.9v5.4c0 4.2 3 6.9 6.6 8.3 3.6-1.4 6.6-4.1 6.6-8.3V5.9z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="sync"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 18.4a3.9 3.9 0 0 1-.3-7.8A5.4 5.4 0 0 1 17.7 11a3.6 3.6 0 0 1-.5 7.4z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="stats"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 20h14.8'/%3E%3Cpath d='M7.5 20v-5M12 20V8.5M16.5 20v-8'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="achievements"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 4 2.3 4.7 5.2 .7-3.8 3.7 .9 5.2L12 16l-4.6 2.3 .9-5.2L4.5 9.4l5.2-.7z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="plan-settings"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M12 11.95h.02'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="review-settings"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11.6a7.5 7.5 0 1 1-2.3-5.5'/%3E%3Cpath d='M19.8 4.4v4.1h-4.1'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="study-preference"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h8.5M16.5 8H20M4 16h3.5M11.5 16H20'/%3E%3Ccircle cx='14.5' cy='8' r='2.1'/%3E%3Ccircle cx='9' cy='16' r='2.1'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="word-display"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 19 11 5.4h2L18.4 19'/%3E%3Cpath d='M8 14.2h8'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="pronunciation"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.4v5.2h3.4L13 19V5L7.4 9.4z'/%3E%3Cpath d='M16.4 9.1a4 4 0 0 1 0 5.8'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="remind-study"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 16.5V11a5.6 5.6 0 0 1 11.2 0v5.5l1.4 2H5z'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="remind-review"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.4v4.8l3 2'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="remind-time"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.4v4.8l3 2'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="message-notice"] .mobile-settings-cell-icon,
html.ws-v4-polish body .mobile-settings-icon-btn[data-mobile-settings-action="message-notice"]{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 16.5V11a5.6 5.6 0 0 1 11.2 0v5.5l1.4 2H5z'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="theme"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.3 0 1.8-1 1.8-1.9 0-1.2 1-1.9 2.1-1.9h1.3a3 3 0 0 0 3-3c0-4.7-4.2-8.2-8.3-8.2z'/%3E%3Cpath d='M7.7 12h.02M10.9 8.3h.02M15.3 8.6h.02'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="night-mode"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13.6A8 8 0 1 1 10.4 4 6.4 6.4 0 0 0 20 13.6z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="font-size"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 19 11 5.4h2L18.4 19'/%3E%3Cpath d='M8 14.2h8'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="language"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M3.9 12h16.2'/%3E%3Cpath d='M12 3.8c2.3 2.4 2.3 13.9 0 16.4M12 3.8c-2.3 2.4-2.3 13.9 0 16.4'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="icon-switch"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4.5' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='13.2' y='4.5' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='4' y='13.7' width='6.8' height='6.8' rx='1.6'/%3E%3Crect x='13.2' y='13.7' width='6.8' height='6.8' rx='1.6'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="backup"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v9.8'/%3E%3Cpath d='m8.2 10.3 3.8 3.8 3.8-3.8'/%3E%3Cpath d='M5 19.4h14'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="import-export"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.2h11'/%3E%3Cpath d='m14.6 4.8 3.4 3.4-3.4 3.4'/%3E%3Cpath d='M17 15.8H6'/%3E%3Cpath d='m9.4 12.4-3.4 3.4 3.4 3.4'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="clear-cache"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M10 7V5h4v2'/%3E%3Cpath d='m6.6 7 .9 13h9l.9-13'/%3E%3Cpath d='M10.5 10.5v6M13.5 10.5v6'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="guide"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C9.9 5.2 7 4.9 4.2 5.7v12.1c2.8-.8 5.7-.5 7.8 .9'/%3E%3Cpath d='M12 6.6c2.1-1.4 5-1.7 7.8-.9v12.1c-2.8-.8-5.7-.5-7.8 .9'/%3E%3Cpath d='M12 6.6v12.1'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="feedback"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.6h14v9.4h-9l-4 3.3V15H5z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="support"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20S4.5 15.3 4.5 9.8A3.7 3.7 0 0 1 12 7.2 3.7 3.7 0 0 1 19.5 9.8C19.5 15.3 12 20 12 20z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="about"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.8h.02'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="privacy"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2.1'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }
html.ws-v4-polish body .mobile-settings-member-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4 7.7 12 12 5.4 16.3 12 20 8.4 18.4 18H5.6z'/%3E%3C/svg%3E"); }
/* ---- 首页快捷胶囊（连胜 / 日历）行内小图标 ---- */
/* 没有专属 --wsico 的胶囊（主题/商城/班级入口等，本身已带 emoji）给一个透明遮罩兜底，
否则 ::before 的 currentColor 会渲染成黑方块（历史同类坑见下方排行榜/好友修复） */
html.ws-v4-polish body.mobile-home-active .mobile-home-pill{ --wsico: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
html.ws-v4-polish body.mobile-home-active .mobile-home-pill::before{
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
margin-right: 6px !important;
vertical-align: -2px !important;
background: currentColor !important;
-webkit-mask: var(--wsico) center / contain no-repeat !important;
mask: var(--wsico) center / contain no-repeat !important;
}
html.ws-v4-polish body.mobile-home-active #mobileHomeStreak{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.2 3 4.5 5.2 4.5 8a4.5 4.5 0 0 1-9 0c0-1.7 .8-3.1 2-4.3 .2 1.4 1 2.1 1.9 2.1-1.1-1.9-.6-4.1 .6-5.8z'/%3E%3C/svg%3E"); }
html.ws-v4-polish body.mobile-home-active #mobileHomeCalendar{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.3'/%3E%3Cpath d='M4 10h16M8 3.6v3.8M16 3.6v3.8'/%3E%3C/svg%3E"); }
}
/* =====================================================================
微信小程序 web-view 适配：壳带 ?source=wechat-miniprogram 时 加
.ws-in-miniprogram。小程序内 PWA 安装 / 下载应用 / 图标切换均无意义，隐藏，
保持界面干净（不影响普通网页与已安装 PWA）。
===================================================================== */
html.ws-in-miniprogram :is(
#installAppTop, #landingInstall, .ws-v4-pwa-shortcut,
[data-mobile-settings-action="install"], [data-mobile-settings-action="icon-switch"]
){
display: none !important;
}
/* 设置页图标条（PWA 图标切换预览）在小程序内一并隐藏 */
html.ws-in-miniprogram .mobile-settings-icon-strip{ display: none !important; }
/* 图标切换行：需高于文字列表行的 display:flex!important，故用更高特异性 */
html.ws-in-miniprogram.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-cell[data-mobile-settings-action="icon-switch"]{ display: none !important; }
/* V5.0.3 补齐两个 V5.0.0 社交入口缺失的图标（排行榜 / 好友）——此前无 --wsico 导致渲染成纯色方块 */
html.ws-v4-polish body [data-mobile-settings-action="leaderboard"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 5h9v2.6a4.5 4.5 0 0 1-9 0z'/%3E%3Cpath d='M7.5 5.8H5.2v.9A2.4 2.4 0 0 0 7.6 9.1M16.5 5.8h2.3v.9a2.4 2.4 0 0 1-2.4 2.4'/%3E%3Cpath d='M12 11.6v3.3M9.4 19.4h5.2M10.2 19.4l.4-2.5h2.8l.4 2.5'/%3E%3C/svg%3E"); }
html.ws-v4-polish body [data-mobile-settings-action="friends"] .mobile-settings-cell-icon{ --wsico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8.4' r='2.9'/%3E%3Cpath d='M3.9 18.6c0-3 2.4-4.6 5.3-4.6s5.3 1.6 5.3 4.6'/%3E%3Cpath d='M15.8 6.4a2.9 2.9 0 0 1 0 5.5'/%3E%3Cpath d='M17.2 14.3c2.2 .5 3.8 1.9 3.8 4.3'/%3E%3C/svg%3E"); }
/* V5.0.4 「我的」分组折叠手风琴：折叠时真正隐藏组内单元格。
必须带 #mobileSettingsShell ID 提高特异性，否则被 line 2117 的 `#mobileSettingsShell .mobile-settings-grid{display:flex}` 压过（这正是此前「类切了但格子不收起」的原因）。 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section.ws-v4-collapsed > :not(h3):not(.mobile-settings-section-head){ display: none !important; }
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section h3{ cursor: pointer; }
/* 标题原有的 › 跳转按钮在折叠态被点击事件拦截、不再跳转——隐藏它，改用单个可旋转箭头作展开/收起指示（收起朝右、展开朝下）。 */
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section > h3 > button{ display: none !important; }
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section > h3::after{ content: "\203A"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--ink-soft); transform: rotate(90deg); transition: transform .18s ease; }
html.ws-v4-polish body.mobile-account-active #mobileSettingsShell .mobile-settings-section.ws-v4-collapsed > h3::after{ transform: rotate(0deg); }
/* =====================================================================
V5.0.4 至尊·宝石质感层（Gem-Luxe）
仅作用于 鎏金/紫晶/翡翠/沧海 四款至尊主题（[data-theme^="supreme-"]，不含星穹 supreme）。
全部基于各主题自己的 --accent / --paper / --card / --solid token + color-mix，
所以每款主题各自显示自己的宝石色，不写死颜色，主题安全。
签名元素：卡片顶部一道「宝石棱光」细线 + 页面顶部一束环境极光。
===================================================================== */
:root[data-theme^="supreme-"]{
--gem-aura: color-mix(in srgb, var(--accent) 18%, transparent);
--gem-edge: color-mix(in srgb, var(--accent) 60%, transparent);
}
/* 1) 环境光：页面顶部一束 accent 极光 + 纵深渐变，告别纯平深色背景 */
:root[data-theme^="supreme-"] body{
background:
radial-gradient(130% 70% at 50% -12%, var(--gem-aura), transparent 60%),
radial-gradient(70% 44% at 90% 2%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper) 100%) !important;
background-attachment: fixed !important;
}
/* 2) 卡片：柔和纵向渐变 + accent 描边，更有质感与层次 */
:root[data-theme^="supreme-"] :where(.card,.settings-card,.settings-hero,.stats-card,.stats-hero-card,.stats-side-card,.ach-card,.achievement-card,.share-hero,.quote-panel,.book-card,.record-card,.daycard,.plan-day,.reward-card,.invite-card,.account-box,.mobile-tip-card,.mobile-home-section,.mobile-streak-card,.mobile-plan-card,.mobile-wordbook-card,.mobile-account-card,.theme-dialog,.auth-modal-dialog,.contact-dialog,.flash){
background: linear-gradient(158deg, var(--card-strong), var(--card)) !important;
border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)) !important;
position: relative;
}
/* 3) 签名：卡片顶缘「宝石棱光」——一道随主题色发亮的细线 */
:root[data-theme^="supreme-"] :where(.card,.settings-card,.settings-hero,.stats-card,.stats-hero-card,.ach-card,.share-hero,.book-card,.mobile-tip-card,.mobile-plan-card,.mobile-streak-card,.mobile-wordbook-card,.theme-dialog,.auth-modal-dialog,.flash){
overflow: hidden;
}
:root[data-theme^="supreme-"] :where(.card,.settings-card,.settings-hero,.stats-card,.stats-hero-card,.ach-card,.share-hero,.book-card,.mobile-tip-card,.mobile-plan-card,.mobile-streak-card,.mobile-wordbook-card,.theme-dialog,.auth-modal-dialog,.flash)::after{
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gem-edge), transparent);
pointer-events: none; z-index: 1;
}
/* 4) 主 CTA：流光 accent 填充 + 柔光，按钮更「贵气」 */
:root[data-theme^="supreme-"] :where(.btn-primary,.learn-next,.desktop-start,.share-action.primary,.auth-form button,.auth-modal-primary,.settings-primary-btn,.settings-bottom-bar .primary,.mobile-start-btn,.mobile-plan-start-btn,.theme-preview-actions .primary,.reward-actions .primary){
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)) !important;
color: var(--solid-text) !important;
border: none !important;
box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
/* 5) 卡片悬停：accent 描边 + 柔光抬升 */
:root[data-theme^="supreme-"] :where(.card,.book-card,.settings-theme-card,.settings-icon-card,.stats-card,.ach-card,.achievement-card,.mobile-wordbook-card,.mobile-settings-cell):hover{
border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
box-shadow: 0 18px 52px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
/* 6) 输入聚焦：accent 光环 */
:root[data-theme^="supreme-"] :where(input,textarea,select,.auth-form input,.settings-stepper input):focus{
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
/* 7) 数字/重点强调随 accent 发光，金石质感 */
:root[data-theme^="supreme-"] :where(.tasknum .n,.today-meter b,.stat .v,.plan-total b,.coin-chip b){
color: var(--accent) !important;
text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (prefers-reduced-motion: no-preference){
:root[data-theme^="supreme-"] :where(.card,.book-card,.mobile-wordbook-card,.settings-theme-card,.btn-primary,.learn-next,.desktop-start,.mobile-start-btn){ transition: box-shadow .22s ease, border-color .22s ease, transform .14s ease; }
/* 按钮 / 卡片按下反馈：轻微下沉缩放，触感更「实」 */
:root[data-theme^="supreme-"] :where(.btn-primary,.learn-next,.desktop-start,.mobile-start-btn,.mobile-plan-start-btn,.share-action.primary,.settings-primary-btn,.auth-form button):active{ transform: translateY(1px) scale(.985); }
:root[data-theme^="supreme-"] :where(.mobile-settings-cell,.book-card,.mobile-wordbook-card,.settings-theme-card,.settings-icon-card):active{ transform: scale(.99); }
}
/* =====================================================================
V5.0.6 主题覆盖 / 美观修复（设置·我的·词库）
===================================================================== */
/* 修复：当前选用词卷卡片（.book-btn.active 深色 --solid 底）的标题被 #view-lib/.book-btn b 的 --accent
覆盖成强调色，落在同色系深底上几乎看不见 → 标题改回 --solid-text，并把副文案提到不透明白，全主题安全。 */
html.ws-v4-polish #view-lib .book-btn.active b,
html.ws-v4-polish .book-btn.active b{ color: var(--solid-text) !important; }
html.ws-v4-polish .book-btn.active span{ color: color-mix(in srgb, var(--solid-text) 82%, transparent) !important; }
html.ws-v4-polish .book-btn.active .book-meta,
html.ws-v4-polish .book-btn.active small{ color: color-mix(in srgb, var(--solid-text) 70%, transparent) !important; }
/* =====================================================================
V5.0.7 全主题高级质感与按键反馈层
UI only：只使用现有主题 token，不修改学习、计划、同步或数据逻辑。
===================================================================== */
:root{
--ws-theme-glow: color-mix(in srgb, var(--accent) 13%, transparent);
--ws-theme-glow-strong: color-mix(in srgb, var(--accent) 26%, transparent);
--ws-theme-sheen: color-mix(in srgb, #fff 54%, transparent);
--ws-theme-press: color-mix(in srgb, var(--accent) 34%, transparent);
--ws-theme-card-tint: color-mix(in srgb, var(--card, #fff) 90%, var(--accent) 10%);
--ws-theme-border: color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
--ws-motion-ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"],
:root[data-theme="minimal-dark"]{
--ws-theme-sheen: color-mix(in srgb, #fff 16%, transparent);
--ws-theme-glow: color-mix(in srgb, var(--accent) 18%, transparent);
--ws-theme-card-tint: color-mix(in srgb, var(--card, #111) 86%, var(--accent) 14%);
}
:root[data-theme="cute-pink"]{
--ws-theme-glow: color-mix(in srgb, var(--accent) 16%, transparent);
--ws-theme-card-tint: color-mix(in srgb, var(--card, #fff) 88%, #fff0f5 12%);
--ws-theme-border: color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
}
:root[data-theme="supreme"],
:root[data-theme^="supreme-"]{
--ws-theme-glow: color-mix(in srgb, var(--accent) 24%, transparent);
--ws-theme-glow-strong: color-mix(in srgb, var(--accent) 40%, transparent);
--ws-theme-sheen: color-mix(in srgb, #fff 24%, transparent);
--ws-theme-card-tint: color-mix(in srgb, var(--card, #111) 78%, var(--accent) 22%);
--ws-theme-border: color-mix(in srgb, var(--line) 58%, var(--accent) 42%);
}
html.ws-v4-polish body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
opacity:.46;
background:
radial-gradient(58% 34% at 18% 0%, var(--ws-theme-glow), transparent 68%),
radial-gradient(45% 32% at 88% 12%, color-mix(in srgb, var(--amber, var(--accent)) 10%, transparent), transparent 66%);
}
html.ws-v4-polish body > *{ position:relative; z-index:1; }
/* V5.0.8 修复：上一行的 body>*{position:relative} 会把固定定位的弹窗/全屏浮层也变成 relative，
导致它们脱离视口、落到页面底部、不居中（切换主题弹窗、各种 modal）。这里把所有遮罩层重新强制为 fixed 居中。 */
html.ws-v4-polish body > :is([class*="modal"],[class*="overlay"],[class*="mask"],.play-page,.menu-panel,.contact-modal,.auth-modal){
position: fixed !important;
inset: 0 !important;
z-index: 12060 !important;
}
html.ws-v4-polish body > :is(.contact-modal,.auth-modal).on{
display: flex !important; align-items: center !important; justify-content: center !important;
height: 100dvh !important; overflow-y: auto !important;
}
/* V5.2.6 磨耳朵浮窗：上面的 body>*{position:relative;z-index:1} 会让它脱离 fixed 定位、掉到页面底部。
恢复 fixed + 高层级，但不要 inset:0（保留它自己的 bottom/right 角落定位）。 */
html.ws-v4-polish body > .ear-mini{ position: fixed !important; z-index: 12040 !important; }
/* V5.5.6 同根因：奖励手机端浮动铃铛、桃桃猫庆祝、移动难词添加等"角落/自定位"浮层，body>*{relative} 会让它们掉到页面底部。
只恢复 position:fixed，不强制 inset:0（保留各自的 top/right/bottom 定位）。奖励面板/扫码遮罩走上面的 [class*=mask] 居中规则。 */
html.ws-v4-polish body > :is(.ws-rq-mbell,.cat-celebration,.mobile-hard-add){ position: fixed !important; }
html.ws-v4-polish body :where(
.card,.settings-card,.settings-hero,.settings-theme-system,.settings-theme-card,.settings-icon-card,
.stats-card,.stats-hero-card,.ach-card,.achievement-card,.share-hero,.quote-panel,.ad-panel,
.book-card,.book-btn,.record-card,.daycard,.plan-day,.reward-card,.invite-card,.account-box,
.mobile-home-section,.mobile-tip-card,.mobile-streak-card,.mobile-plan-card,.mobile-wordbook-card,
.mobile-account-card,.mobile-settings-section,.mobile-settings-cell,.mobile-settings-member-card,
.theme-dialog,.auth-modal-dialog,.contact-dialog,.flash,.online-def
){
background-image:
linear-gradient(155deg, var(--ws-theme-sheen), transparent 34%),
linear-gradient(145deg, var(--ws-theme-card-tint), var(--card, transparent)) !important;
border-color: var(--ws-theme-border) !important;
box-shadow:
0 1px 0 color-mix(in srgb, #fff 24%, transparent) inset,
var(--shadow) !important;
transition:
transform .18s var(--ws-motion-ease),
box-shadow .22s var(--ws-motion-ease),
border-color .22s var(--ws-motion-ease),
filter .22s var(--ws-motion-ease);
}
html.ws-v4-polish body :where(
.btn,.btn-primary,.learn-next,.desktop-start,.show-btn,.share-action,.auth-form button,
.auth-modal-primary,.settings-primary-btn,.settings-soft-btn,.settings-bottom-bar button,
.theme-preview-actions button,.reward-actions button,.mobile-start-btn,.mobile-plan-start-btn,
.mobile-section-link,.mobile-current-action,.mobile-book-primary,.mobile-shop-buy,
nav button,[role="button"],a.button
){
position:relative;
overflow:hidden;
transform:translateZ(0);
transition:
transform .16s var(--ws-motion-ease),
box-shadow .2s var(--ws-motion-ease),
filter .2s var(--ws-motion-ease),
border-color .2s var(--ws-motion-ease),
background-position .35s var(--ws-motion-ease);
}
html.ws-v4-polish body :where(
.btn,.btn-primary,.learn-next,.desktop-start,.show-btn,.share-action,.auth-form button,
.auth-modal-primary,.settings-primary-btn,.settings-soft-btn,.theme-preview-actions button,
.reward-actions button,.mobile-start-btn,.mobile-plan-start-btn,.mobile-section-link,
.mobile-current-action,.mobile-book-primary,nav button
):where(:hover,:focus-visible){
filter:saturate(1.04) brightness(1.015);
border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
box-shadow:0 10px 30px var(--ws-theme-glow) !important;
}
/* V5.0.9 高级按压反馈：可按压元素统一弹簧缓动（松手回弹），让反馈「有手感」而不生硬 */
html.ws-v4-polish body :where(
button,a[role="button"],[role="button"],
.mobile-start-btn,.mobile-plan-start-btn,.mobile-section-link,.mobile-current-action,.mobile-book-primary,
.mobile-settings-cell,.book-btn,.book-card,.mobile-wordbook-card,.settings-theme-card,.settings-icon-card,
.btn-primary,.learn-next,.desktop-start,.share-action,.reward-actions button,nav button,.grade
){
transition: transform .24s cubic-bezier(.34,1.5,.5,1), box-shadow .2s ease, filter .18s ease;
will-change: transform;
}
/* 按下：轻微下压 + 阴影收紧（像被按进表面），松手由上面的弹簧缓动回弹 */
html.ws-v4-polish body .ws-pressing{
transform: scale(.965) translateZ(0) !important;
filter: brightness(.99) !important;
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
/* 涟漪改成细腻的「强调色光环」一圈扩散淡出（替换原来的白色实心团，去掉廉价感） */
html.ws-v4-polish body .ws-tap-spark{
position:absolute;
left:var(--ws-ripple-x, 50%);
top:var(--ws-ripple-y, 50%);
width:20px;
height:20px;
border-radius:999px;
pointer-events:none;
background:transparent;
border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
box-shadow:0 0 16px color-mix(in srgb, var(--accent) 38%, transparent);
transform:translate(-50%,-50%) scale(.35);
opacity:.85;
animation:wsTapSpark .5s cubic-bezier(.22,.85,.3,1) forwards;
z-index:2;
}
@media (prefers-reduced-motion: reduce){
html.ws-v4-polish body :where(button,.mobile-start-btn,.book-btn,.book-card,.mobile-settings-cell,nav button){ transition: none; }
html.ws-v4-polish body .ws-tap-spark{ display:none; }
}
html.ws-v4-polish body :where(.tasknum .n,.today-meter b,.stat .v,.plan-total b,.coin-chip b,.mobile-ach-stat b){
text-shadow:0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
html.ws-v4-polish body :where(.pbar i,.tm-track i,.mp-fill,.mobile-plan-fill){
background-image:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #fff 32%), var(--accent)) !important;
background-size:180% 100%;
}
:root[data-theme="supreme"] body::after,
:root[data-theme^="supreme-"] body::after{
opacity:.72;
background:
radial-gradient(60% 35% at 18% 0%, var(--ws-theme-glow-strong), transparent 70%),
radial-gradient(42% 28% at 88% 9%, color-mix(in srgb, var(--amber, var(--accent)) 20%, transparent), transparent 68%),
linear-gradient(115deg, transparent 0 38%, color-mix(in srgb, var(--accent) 7%, transparent) 48%, transparent 58% 100%);
}
:root[data-theme="supreme"] :where(.btn-primary,.learn-next,.desktop-start,.mobile-start-btn,.mobile-plan-start-btn,.share-action.primary,.settings-primary-btn,.auth-modal-primary,.theme-preview-actions .primary,.reward-actions .primary),
:root[data-theme^="supreme-"] :where(.btn-primary,.learn-next,.desktop-start,.mobile-start-btn,.mobile-plan-start-btn,.share-action.primary,.settings-primary-btn,.auth-modal-primary,.theme-preview-actions .primary,.reward-actions .primary){
background-image:
linear-gradient(115deg, transparent 0%, rgba(255,255,255,.38) 18%, transparent 34%),
linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff 18%), var(--accent), color-mix(in srgb, var(--accent) 72%, #000 28%)) !important;
background-size:240% 100%, 100% 100%;
box-shadow:
0 0 0 1px color-mix(in srgb, #fff 18%, transparent) inset,
0 14px 38px var(--ws-theme-glow-strong) !important;
}
:root[data-theme="supreme"] :where(.card,.settings-card,.stats-card,.ach-card,.book-card,.mobile-home-section,.mobile-wordbook-card,.mobile-settings-cell),
:root[data-theme^="supreme-"] :where(.card,.settings-card,.stats-card,.ach-card,.book-card,.mobile-home-section,.mobile-wordbook-card,.mobile-settings-cell){
box-shadow:
0 1px 0 rgba(255,255,255,.16) inset,
0 18px 52px color-mix(in srgb, var(--accent) 14%, transparent),
var(--shadow) !important;
}
@keyframes wsTapSpark{
0%{opacity:.85;transform:translate(-50%,-50%) scale(.35);}
60%{opacity:.5;}
100%{opacity:0;transform:translate(-50%,-50%) scale(4.6);}
}
@keyframes wsSupremeAurora{
0%,100%{filter:hue-rotate(0deg);opacity:.62;transform:translate3d(0,0,0);}
50%{filter:hue-rotate(6deg);opacity:.82;transform:translate3d(0,-8px,0);}
}
@keyframes wsPremiumFlow{
0%{background-position:220% 0, 0 0;}
100%{background-position:-120% 0, 0 0;}
}
@keyframes wsMeterFlow{
0%{background-position:0 0;}
100%{background-position:180% 0;}
}
@media (prefers-reduced-motion: no-preference){
html.ws-v4-polish body :where(.card,.book-card,.settings-card,.stats-card,.ach-card,.mobile-wordbook-card,.mobile-settings-cell):where(:hover,:focus-within){
transform:translateY(-1px);
}
html.ws-v4-polish body :where(.pbar i,.tm-track i,.mp-fill,.mobile-plan-fill){
animation:wsMeterFlow 5.5s linear infinite;
}
:root[data-theme="supreme"] body::after,
:root[data-theme^="supreme-"] body::after{
animation:wsSupremeAurora 9s ease-in-out infinite;
}
:root[data-theme="supreme"] :where(.btn-primary,.learn-next,.desktop-start,.mobile-start-btn,.mobile-plan-start-btn,.share-action.primary,.settings-primary-btn,.auth-modal-primary,.theme-preview-actions .primary,.reward-actions .primary),
:root[data-theme^="supreme-"] :where(.btn-primary,.learn-next,.desktop-start,.mobile-start-btn,.mobile-plan-start-btn,.share-action.primary,.settings-primary-btn,.auth-modal-primary,.theme-preview-actions .primary,.reward-actions .primary){
animation:wsPremiumFlow 5.8s linear infinite;
}
}
@media (prefers-reduced-motion: reduce){
html.ws-v4-polish body *,
html.ws-v4-polish body *::before,
html.ws-v4-polish body *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
html.ws-v4-polish body .ws-tap-spark{ display:none !important; }
}
/* =====================================================================
V5.1.0 完整计划表修复（手机溢出/重叠 + 部分主题字看不清）
===================================================================== */
/* 1) 今日行底色之前写死 #fbf2e0（米色），只对 dark 主题做了反色；在 supreme/翡翠/沧海/紫晶 等
深色至尊主题下变成「浅字落浅底」看不清。改成基于主题 token 的强调色淡底，全主题可读。 */
html.ws-v4-polish .plan-table tr.today-row td{
background: color-mix(in srgb, var(--accent) 12%, var(--paper-2)) !important;
}
html.ws-v4-polish .plan-table tr.today-row td:first-child{
background: color-mix(in srgb, var(--accent) 16%, var(--paper-2)) !important;
}
/* 2) 手机端完整计划表：原本 #view-plan .plan-table{min-width:1080px} 选择器没命中弹窗里的表，
导致表被压成 ~360px、格子里的小卡片互相重叠、右列被截断。改为保证可读列宽 + 横向滚动。 */
@media (max-width: 768px){
html.ws-v4-polish .schedule-wrap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
html.ws-v4-polish .plan-table{ min-width: 820px !important; }
html.ws-v4-polish .plan-table td, html.ws-v4-polish .plan-table th{ overflow: hidden; }
html.ws-v4-polish .plan-cell{ flex-wrap: wrap; gap: 4px; }
html.ws-v4-polish .plan-chip{ max-width: 100%; }
/* 顶部提示「横向滑动查看完整复习曲线」 */
html.ws-v4-polish .schedule-wrap{ position: relative; }
}
/* V5.1.1 电脑端首页 hero 显示磨耳朵/单词填字入口（手机端已在今日计划区有入口，这里隐藏避免重复） */
@media (max-width: 768px){
html.ws-v4-polish .ws-hero-game{ display: none !important; }
}
/* =====================================================================
V5.1.2 弹窗居中·兜底层（彻底修「还有很多弹窗不居中」）
不依赖弹窗是否 body 直接子级，也不受 V5.0.7 的 body>*{position:relative} 影响——
所有居中型遮罩层一律视口固定；显示时（.on/.open/.active）一律 flex 正中。
覆盖之前漏掉的 .client-gate（类名不含 modal，被旧规则漏过）。
===================================================================== */
html.ws-v4-polish :is(.contact-modal,.auth-modal,.plan-full-modal,.client-gate,.wait-modal,.mobile-ach-modal){
position: fixed !important;
inset: 0 !important;
z-index: 12060 !important;
}
/* V5.1.8 关键修复：通用卡片美化规则 [class*="modal"] 把宽度（≈92vw）也加到了弹窗「遮罩层」本身，
导致遮罩只有 92vw 宽且左对齐 → 整个弹窗偏左、看着不居中。这里把所有遮罩层强制铺满视口宽度
（内部对话框仍保留自己的 min(92vw,420px) 宽度并居中）。用 id 提高优先级，确保压过那条规则。 */
html.ws-v4-polish body :is(.contact-modal,.auth-modal,.plan-full-modal,.client-gate,.wait-modal,.mobile-ach-modal,#profileCenterModal,#menuPanelModal,#planFullModal,#shareLinkModal,#hardWordModal,#installModal,#achievementUnlockModal){
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
}
html.ws-v4-polish :is(.contact-modal,.auth-modal,.plan-full-modal,.client-gate,.wait-modal,.mobile-ach-modal):is(.on,.open,.active){
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100dvh !important;
overflow-y: auto !important;
padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
}
/* 弹窗内的对话框不要再被外面的某些规则拉到一边 */
html.ws-v4-polish :is(.contact-modal,.auth-modal,.plan-full-modal,.client-gate,.wait-modal,.mobile-ach-modal) > :is(.contact-dialog,.auth-modal-dialog,.theme-dialog,.plan-full-dialog,.wait-dialog,.client-gate-dialog,.mobile-ach-modal-panel){
margin: auto !important;
}
/* V5.7.1 手机端弹窗居中·终极兜底：任何铺满视口的遮罩层（类名含 modal/mask/overlay）显示时一律正中，
不再靠「把类名逐个加进白名单」——彻底解决「有些弹窗还是不居中」。
明确排除真正的底部抽屉（切换模式 / 底部导航 / 学习底栏）与 toast 类轻提示。 */
@media (max-width: 768px){
html.ws-v4-polish body > :is([class*="modal"],[class*="mask"],[class*="overlay"]):is(.on,.open,.active,.show,.visible):not(.ws-mode-sheet):not(nav):not(.study-foot):not([class*="toast"]):not([class*="banner"]):not([class*="snackbar"]){
position: fixed !important;
inset: 0 !important;
left: 0 !important; right: 0 !important;
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100dvh !important;
overflow-y: auto !important;
padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
}
}
/* V5.7.2 「切换模式」面板手机端居中（用户要求：此前是底部抽屉，看着不居中）。
用户首页 body.mobile-home-active 会把 body 直接子元素定位重置，压过原 .ws-mode-sheet 的 fixed；
这里在最后加载的 ui-polish 里用高优先级 + !important 强制视口正中，并用超大 spread 阴影当遮罩。 */
@media (max-width: 768px){
html.ws-v4-polish body .ws-mode-sheet,
body .ws-mode-sheet{
position: fixed !important;
inset: 50% auto auto 50% !important;
transform: translate(-50%, -50%) !important;
width: min(92vw, 380px) !important;
max-height: 82vh !important;
overflow: auto !important;
border-radius: 20px !important;
padding-bottom: 16px !important;
animation: none !important;
box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 100vmax color-mix(in srgb, var(--ink) 42%, transparent) !important;
}
html.ws-v4-polish body .ws-mode-sheet::before,
body .ws-mode-sheet::before{ content: none !important; } /* 去掉底部抽屉的小握把 */
}
/* V5.1.9 主题预览文字：通用规则把预览里的数字/标签改成了页面 --ink（深色预览上看不清）。
ui-polish 最后加载，这里用更高优先级强制回到「预览自身配色」，让数字用主题强调色、标签清晰。 */
html.ws-v4-polish .theme-preview-shell .preview-title{ color: var(--preview-ink) !important; }
html.ws-v4-polish .theme-preview-shell .preview-stat b{ color: var(--preview-accent) !important; }
html.ws-v4-polish .theme-preview-shell .preview-stat span{ color: var(--preview-soft) !important; }
html.ws-v4-polish .theme-preview-shell[data-preview-theme="cute-pink"] .preview-stat b{ color: #df8aa8 !important; }
/* =====================================================================
V5.1.3 电脑端首页：把「连胜状态」移到 今日计划 + 学习日历 + 广告位 下面
原桌面网格把 streak 放在 hero 之下、today/calendar 之上；这里只重排
grid-template-areas，把 streak 放到最后一行。仅桌面（≥769px），手机端不受影响。
选择器 html.ws-v4-polish #view-home.active 比原 #view-home.active 更具体，
配合 !important 可稳定胜出，不动列宽与其它布局。
===================================================================== */
@media (min-width: 1181px){
html.ws-v4-polish #view-home.active{
grid-template-areas:
"hero hero"
"today calendar"
"streak streak" !important;
}
}
@media (min-width: 769px) and (max-width: 1180px){
html.ws-v4-polish #view-home.active{
grid-template-areas:
"hero"
"today"
"calendar"
"streak" !important;
}
/* 该断点下 home-calendar-stack 默认没有归入 calendar 区，会自动落到 streak 之后；
强制归位，保证「日历+广告」在「连胜状态」之上 */
html.ws-v4-polish #view-home.active .home-calendar-stack{ grid-area: calendar !important; }
}
/* =====================================================================
V5.1.4 记录页内嵌「学习统计」折线图 + 进入统计页入口（双端）
复用统计页同款 statsLineChart（容器套 .stats-chart / .mobile-stats-chart
即可继承既有曲线样式），这里只做卡片外观，主题安全。
===================================================================== */
/* 手机端：记录页顶部一张可点的学习统计卡，点任意处进统计页 */
html.ws-v4-polish .mobile-hard-statcard{
display: block; width: 100%; text-align: left; cursor: pointer;
margin: 12px 0 4px; padding: 14px 14px 8px;
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--card) 94%, transparent);
box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 6%, transparent);
-webkit-tap-highlight-color: transparent;
}
html.ws-v4-polish .mobile-hard-statcard-head{
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px;
}
html.ws-v4-polish .mobile-hard-statcard-head b{ font-size: 14px; color: var(--ink); font-weight: 900; }
html.ws-v4-polish .mobile-hard-statcard-head i{ font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; }
html.ws-v4-polish .mobile-hard-statcard-chart{ height: 132px; }
html.ws-v4-polish .mobile-hard-statcard-chart svg{ width: 100%; height: 100%; }
html.ws-v4-polish .mobile-hard-statcard:active{ transform: scale(.99); }
/* 桌面端：难词本侧栏新增一张「学习统计折线图」卡，标题右侧带入口链接 */
html.ws-v4-polish .hardbook-insight-stats h3{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html.ws-v4-polish .hardbook-insight-go{
border: 0; background: transparent; cursor: pointer;
font-size: 12px; font-weight: 800; color: var(--accent); padding: 2px 4px; border-radius: 8px;
}
html.ws-v4-polish .hardbook-insight-go:hover{ background: color-mix(in srgb, var(--accent) 12%, transparent); }
html.ws-v4-polish .hardbook-insight-stats .stats-chart{ height: 168px; }
html.ws-v4-polish .hardbook-insight-stats .stats-chart svg{ width: 100%; height: calc(100% - 22px); }
/* 分享弹窗内的「成功邀请记录」板块：左对齐、自适应宽度 */
html.ws-v4-polish .share-invite-records{ text-align: left; width: 100%; }
html.ws-v4-polish .share-invite-records:empty{ display: none; }
/* =====================================================================
V5.1.5 桌面端社交入口（排行榜 / 好友）—— 此前桌面端完全没有入口
侧栏低频入口区原本固定高度 244px、只放得下 5 个按钮；现在多了「社交」
一组（标题 + 2 个入口），把容器改成按内容自适应高度、必要时滚动，避免溢出。
仅桌面（≥769px）。
===================================================================== */
@media (min-width: 769px){
html.ws-v4-polish .desktop-side-footer{
height: auto !important;
max-height: calc(100vh - 360px) !important;
overflow-y: auto !important;
}
/* 第二个分组标题与第一个拉开一点间距 */
html.ws-v4-polish .desktop-side-footer .desktop-side-title + button{ margin-top: 2px; }
html.ws-v4-polish .desktop-side-footer button + .desktop-side-title{ margin-top: 12px; }
}
/* =====================================================================
V5.1.6 好友 / 排行榜系统完善
- 排行榜：参与人数 + 重置时间说明（社交页内 .social-lb-note）
- 好友榜空状态引导按钮 .social-cta-btn
- 「待处理好友申请」红点 .has-social-dot（手机首页右上社交入口 / 我的页好友 / 桌面好友入口）
红点用通知语义红色（非主题色），是约定俗成的提醒色。
===================================================================== */
html.ws-v4-polish .social-lb-note{
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
margin: 0 2px 10px; padding: 8px 12px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 8%, var(--card));
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
font-size: 11.5px; font-weight: 800; color: var(--ink-soft);
}
html.ws-v4-polish .social-lb-note span:last-child{ color: var(--ink-faint); font-weight: 700; }
html.ws-v4-polish .social-cta-btn{
display: inline-block; margin-top: 14px; border: 0; cursor: pointer;
background: var(--solid); color: var(--solid-text);
font-weight: 900; font-size: 13px; padding: 10px 20px; border-radius: 999px;
box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 26%, transparent);
transition: transform .18s cubic-bezier(.34,1.5,.5,1);
}
html.ws-v4-polish .social-cta-btn:active{ transform: scale(.95); }
/* =====================================================================
V5.1.7 电脑端「今日计划」卡片内常驻「磨耳朵 / 单词填字」入口
之前入口只藏在会轮播走的 hero 卡里，用户看不到；现在固定放在开始按钮下方。
ws-hero-game 在手机端隐藏（手机首页另有入口，不重复）。
===================================================================== */
html.ws-v4-polish .today-game-entries{
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
html.ws-v4-polish .today-game-btn{
cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
background: var(--accent-soft); color: var(--ws-accent-ink, var(--accent));
font-family: var(--cjk, inherit); font-weight: 900; font-size: 14px;
padding: 11px 8px; border-radius: 14px;
transition: transform .18s cubic-bezier(.34,1.5,.5,1), background .18s ease;
}
html.ws-v4-polish .today-game-btn:hover{ background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
html.ws-v4-polish .today-game-btn:active{ transform: scale(.96); }
@media (max-width: 768px){ html.ws-v4-polish .today-game-entries{ display: none !important; } }
/* 待处理好友申请红点（带数量） */
html.ws-v4-polish .has-social-dot{ position: relative; overflow: visible; }
html.ws-v4-polish .has-social-dot::after{
content: attr(data-social-count);
position: absolute; top: -5px; right: -5px;
min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
display: grid; place-items: center;
background: #e5484d; color: #fff;
font-size: 10px; font-weight: 900; line-height: 1; font-family: var(--cjk, system-ui);
border-radius: 999px; border: 1.5px solid var(--card);
pointer-events: none; z-index: 5;
}
/* =====================================================================
V5.2.3 进阶动效（全主题）——把原本只在至尊主题的入场动效推广到所有主题
尊重系统「减少动态效果」；只用 transform / opacity / box-shadow，性能友好。
- 切到某页时主卡片轻柔上浮淡入 + 轻微错峰（全主题，营造层次入场感）
- 主按钮强调色呼吸光晕：至尊系列更明显，其余主题不加（避免到处闪、显廉价）
- 主题预览开关点按弹性反馈（全主题）
===================================================================== */
@media (prefers-reduced-motion: no-preference){
html.ws-v4-polish .view.active > .card,
html.ws-v4-polish .view.active > section > .card,
html.ws-v4-polish .view.active .mobile-home-section{
animation: wsRise .5s cubic-bezier(.22,.85,.3,1) both;
}
/* 轻微错峰，让多卡片像依次落位（craft：stagger） */
html.ws-v4-polish .view.active > .card:nth-of-type(2),
html.ws-v4-polish .view.active .mobile-home-section:nth-of-type(2){ animation-delay: .05s; }
html.ws-v4-polish .view.active > .card:nth-of-type(3),
html.ws-v4-polish .view.active .mobile-home-section:nth-of-type(3){ animation-delay: .10s; }
html.ws-v4-polish .view.active > .card:nth-of-type(n+4),
html.ws-v4-polish .view.active .mobile-home-section:nth-of-type(n+4){ animation-delay: .14s; }
@keyframes wsRise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: none; } }
/* 至尊系列：主按钮呼吸光晕（其余主题保持安静，让至尊更特别） */
html.ws-v4-polish[data-theme^="supreme"] :is(#startBtn, .btn-primary, .desktop-start:not(.ws-ear-entry):not(.ws-cw-entry)){
animation: wsSupremeGlow 3.6s ease-in-out infinite;
}
@keyframes wsSupremeGlow{
0%,100%{ box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 20%, transparent); }
50%{ box-shadow: 0 9px 30px color-mix(in srgb, var(--accent) 42%, transparent); }
}
html.ws-v4-polish .settings-theme-preview{ transition: transform .28s cubic-bezier(.34,1.5,.5,1); }
html.ws-v4-polish .settings-theme-preview:active{ transform: scale(.95); }
}
/* =====================================================================
V5.2.4 二级页面返回键（手机端：统计/指南/关于/反馈）
这些页面从「我的」进入、不在底部导航里，之前没有明显返回入口。
样式与设置页返回键一致；仅手机端显示（桌面有常驻顶部导航，不需要）。
===================================================================== */
@media (max-width: 768px){
html.ws-v4-polish body .ws-subpage-back{
position: fixed !important;
top: max(10px, env(safe-area-inset-top)) !important;
left: 12px !important;
z-index: 9000 !important;
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
min-height: 36px !important;
margin: 0 !important;
padding: 0 14px 0 8px !important;
border: 1px solid color-mix(in srgb, var(--line) 55%, transparent) !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--card) 90%, transparent) !important;
color: var(--ws-accent-ink, var(--accent)) !important;
font-family: var(--cjk, inherit) !important;
font-size: 14px !important; font-weight: 850 !important;
box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 12%, transparent) !important;
cursor: pointer;
}
html.ws-v4-polish body .ws-subpage-back span{ font-size: 22px !important; line-height: 1 !important; }
html.ws-v4-polish body .ws-subpage-back em{ font-style: normal !important; }
html.ws-v4-polish body .ws-subpage-back:active{ transform: scale(.95); }
/* 指南/关于/反馈是从顶部直接开始的文章页，给返回键留出空间，避免压住标题 */
html.ws-v4-polish body :is(#view-guide, #view-about, #view-donate).active{ padding-top: 56px !important; }
}
@media (min-width: 769px){ html.ws-v4-polish .ws-subpage-back{ display: none !important; } }
/* ===== V5.4.2 学习页精装：发音键 / 例句朗读 / 词根记忆钩子 / 卷轴动效 ===== */
.spk-group{display:inline-flex;gap:7px;vertical-align:middle;margin-left:10px}
.spk-btn{display:inline-flex;align-items:center;gap:4px;line-height:1;cursor:pointer;font-size:13px;font-weight:700;
padding:6px 12px 6px 10px;border-radius:999px;-webkit-tap-highlight-color:transparent;
color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
background:color-mix(in srgb,var(--accent) 7%,var(--card));transition:background .16s,border-color .16s,transform .12s,color .16s}
.spk-btn .spk-ico{flex:0 0 auto;display:block}
.spk-btn:hover{background:color-mix(in srgb,var(--accent) 15%,var(--card));border-color:var(--accent)}
.spk-btn:active{transform:scale(.93)}
.spk-btn.spk-solo{padding:8px;border-radius:50%}
.spk-btn.playing{background:var(--accent);color:var(--solid-text,#fff);border-color:var(--accent)}
.spk-btn.playing .spk-ico{animation:spkPulse .5s ease-in-out infinite alternate}
@keyframes spkPulse{from{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.ex-spk{display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px;cursor:pointer;
width:26px;height:26px;margin-left:4px;border-radius:50%;color:var(--accent);
border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--card));transition:.15s}
.ex-spk:hover{background:color-mix(in srgb,var(--accent) 16%,var(--card))}
.ex-spk:active{transform:scale(.9)}
.ex-spk.playing{background:var(--accent);color:var(--solid-text,#fff)}
.study-hint{margin-top:13px;padding:15px 17px;border-radius:16px;position:relative;overflow:hidden;
border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--card)),color-mix(in srgb,var(--accent) 4%,var(--card)));}
.study-hint::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.55}
.study-hint-head{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--accent);margin-bottom:9px}
.study-hint-head svg{flex:0 0 auto}
.study-hint-word{font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:.5px;color:var(--ink);margin-bottom:11px;display:flex;align-items:baseline;flex-wrap:wrap}
.study-hint-word i{font-style:normal}
.study-hint-word .seg-affix{color:var(--accent);font-weight:700;border-bottom:2px solid color-mix(in srgb,var(--accent) 50%,transparent);padding-bottom:2px}
.study-hint-word .seg-stem{color:color-mix(in srgb,var(--ink) 78%,transparent)}
.study-hint-word .seg-dot{color:color-mix(in srgb,var(--accent) 55%,transparent);margin:0 3px;font-weight:400}
.study-hint-rows{display:flex;flex-direction:column;gap:5px}
.hint-row{display:flex;gap:12px;align-items:baseline;font-size:13px;line-height:1.45}
.hint-aff{font-weight:700;color:var(--ink);min-width:92px;flex:0 0 auto}
.hint-gloss{color:var(--ink-soft)}
@media (prefers-reduced-motion: no-preference){
/* 记住了/翻页：从右下角翻书 —— 卡片以右下角为轴，掀起一角并翻转飞走，露出下一张。 */
.flash.ws-scroll-away{animation:wsScrollAway .44s cubic-bezier(.42,.04,.5,1) forwards;transform-origin:100% 100%;will-change:transform,opacity;backface-visibility:hidden}
}
@keyframes wsScrollAway{
0%{opacity:1;transform:perspective(1500px) rotate3d(0,0,1,0deg);box-shadow:0 10px 30px rgba(40,33,24,.10)}
55%{opacity:.9}
100%{opacity:0;transform:perspective(1500px) translate(26%,15%) rotateZ(-14deg) rotateY(-34deg);box-shadow:-34px 26px 56px rgba(40,33,24,.22)}
}
/* ===== V5.4.0 新手引导 onboarding ===== */
#wsOnb.ws-onb{position:fixed !important;inset:0 !important;z-index:6000 !important;margin:0 !important;display:none;align-items:center;justify-content:center;padding:20px;
background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#wsOnb.ws-onb.on{display:flex !important;animation:wsOnbFade .25s ease}
@keyframes wsOnbFade{from{opacity:0}to{opacity:1}}
.ws-onb-card{width:min(420px,100%);background:var(--card);color:var(--ink);border:1px solid var(--line);
border-radius:24px;padding:30px 26px 26px;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 28%,transparent);text-align:center;
animation:wsOnbPop .32s cubic-bezier(.2,.9,.3,1.1)}
@keyframes wsOnbPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.ws-onb-dots{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.ws-onb-dots i{width:7px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:.25s}
.ws-onb-dots i.on{background:var(--accent);width:20px}
.ws-onb-emoji{width:74px;height:74px;margin:2px auto 14px;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;border-radius:50%;
background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 18%,var(--card)),color-mix(in srgb,var(--accent) 7%,var(--card)));
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 16%,transparent)}
.ws-onb-step{animation:wsOnbStepIn .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes wsOnbStepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ws-onb-card h2{font-size:23px;margin:4px 0 10px;color:var(--ink)}
.ws-onb-card p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0 auto 20px;max-width:34ch}
.ws-onb-card p b{color:var(--accent)}
.ws-onb-next{width:100%;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:800;cursor:pointer;
background:var(--solid);color:var(--solid-text);box-shadow:0 8px 20px color-mix(in srgb,var(--solid) 35%,transparent)}
.ws-onb-next:active{transform:translateY(1px)}
.ws-onb-skip{margin-top:10px;width:100%;border:0;background:none;color:var(--ink-faint);font-size:13.5px;cursor:pointer;padding:8px}
.ws-onb-skip:hover{color:var(--ink-soft)}
@media (max-width: 600px){
#wsOnb.ws-onb{
align-items:flex-start !important;
padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom)) !important;
overflow-x:hidden !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
#wsOnb.ws-onb .ws-onb-card{
width:calc(100vw - 52px) !important;
max-width:calc(100vw - 52px) !important;
max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))) !important;
min-width:0 !important;
box-sizing:border-box !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
padding:18px 18px 16px !important;
}
#wsOnb.ws-onb .ws-onb-dots{margin-bottom:12px}
#wsOnb.ws-onb .ws-onb-emoji{width:56px;height:56px;font-size:28px;margin:0 auto 10px}
#wsOnb.ws-onb .ws-onb-card h2{font-size:21px;margin:4px 0 8px}
#wsOnb.ws-onb .ws-onb-card p{font-size:14px;line-height:1.55;margin-bottom:14px}
#wsOnb.ws-onb .ws-onb-levels{gap:7px;margin-bottom:12px}
#wsOnb.ws-onb .ws-onb-levels button{min-height:52px;padding:10px 38px 10px 14px}
#wsOnb.ws-onb .ws-onb-levels button b{font-size:21px}
#wsOnb.ws-onb .ws-onb-next{max-width:100% !important}
}
.ws-onb-levels{display:flex;flex-direction:column;gap:9px;margin:0 0 18px;text-align:left}
.ws-onb-levels button{position:relative;display:flex;align-items:baseline;gap:12px;border:1.5px solid var(--line);background:var(--paper);
border-radius:13px;padding:13px 44px 13px 16px;cursor:pointer;color:var(--ink);transition:border-color .18s,background .18s,transform .12s}
.ws-onb-levels button b{font-size:22px;font-weight:900;min-width:42px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-onb-levels button span{font-size:13.5px;color:var(--ink-soft)}
.ws-onb-levels button:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.ws-onb-levels button:active{transform:scale(.99)}
.ws-onb-levels button.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 14%,transparent)}
.ws-onb-levels button.sel b{color:var(--accent)}
.ws-onb-levels button.sel::after{content:"";position:absolute;right:15px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
background:var(--accent);
-webkit-mask:url("data:image/svg+xml;utf8,") center/14px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/14px no-repeat}
.ws-onb-levels .onb-rec{position:absolute;right:14px;top:11px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.5px;
color:var(--card);background:var(--accent);padding:2px 7px;border-radius:999px}
.ws-onb-levels button.sel .onb-rec{display:none}
.ws-onb-custom-input{width:100%;min-height:170px;resize:vertical;box-sizing:border-box;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);padding:13px 14px;font:inherit;font-size:13.5px;line-height:1.55;outline:none;margin:2px 0 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ws-onb-custom-input:focus{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ws-onb-custom-error{min-height:18px;margin:0 0 10px;color:var(--danger,#b54a3c);font-size:12.5px;line-height:1.45;text-align:left}
/* ===== V5.7.0 目标式新手引导 V2：目标卡 + 首次记忆闭环完成页 ===== */
#wsOnb.ws-onb .ws-onb-card{max-height:90vh;overflow-y:auto;position:relative}
.ws-onb-close{position:sticky;top:4px;float:right;margin:-8px -6px -34px auto;width:32px;height:32px;border:0;border-radius:999px;cursor:pointer;font-size:22px;line-height:1;z-index:5;background:color-mix(in srgb,var(--ink) 12%,var(--card));color:var(--ink-faint)}
.ws-onb-close:hover{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink-soft)}
.ws-onb-done-plan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:13px}
.ws-onb-done-plan .odp-label{color:var(--ink-soft)}
.ws-onb-done-plan .odp-value{color:var(--ink);font-weight:800}
.ws-onb-done-plan .odp-edit{color:var(--accent);font-weight:700;cursor:pointer}
.ws-onb-plan-picker{margin:0 0 16px;text-align:left}
.ws-onb-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.ws-onb-plan-head b{display:block;color:var(--ink);font-size:15px;line-height:1.25}
.ws-onb-plan-head small{display:block;margin-top:4px;color:var(--ink-soft);font-size:12px;line-height:1.45}
.ws-onb-plan-head>span{flex:0 0 auto;margin-top:1px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:999px;padding:4px 9px;color:var(--accent);font-size:11px;font-weight:900;background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.ws-onb-plan-rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0 10px}
.ws-onb-plan-rail:before{content:"";position:absolute;left:9%;right:9%;top:10px;height:2px;background:color-mix(in srgb,var(--accent) 22%,var(--line));z-index:0}
.ws-onb-plan-rail button{position:relative;z-index:1;display:grid;gap:5px;place-items:center;min-width:0;min-height:66px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--paper),var(--card));color:var(--ink);cursor:pointer;box-shadow:0 5px 14px rgba(42,37,32,.06);font:inherit}
.ws-onb-plan-rail button b{font-size:18px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums}
.ws-onb-plan-rail button small{font-size:11px;line-height:1;color:var(--ink-soft);font-weight:800}
.ws-onb-plan-rail button.active{border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 13%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.ws-onb-plan-rail button.active b,.ws-onb-plan-rail button.active small{color:var(--accent)}
.ws-onb-plan-rail .ws-onb-plan-tag{position:absolute;right:5px;top:5px;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;border-radius:999px;padding:2px 6px;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent);font-size:9px;font-weight:900;line-height:1.1}
.ws-onb-plan-rail .ws-onb-plan-tag.warn{background:color-mix(in srgb,#c8752f 14%,var(--card));color:#a85f24}
.ws-onb-plan-dot{width:16px;height:16px;border-radius:50%;background:var(--card);border:2px solid color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 0 0 4px var(--card)}
.ws-onb-plan-rail button.active .ws-onb-plan-dot{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 80%,var(--line))}
.ws-onb-plan-summary{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--card));padding:11px 12px}
.ws-onb-plan-summary div{color:var(--ink);font-size:13px;font-weight:800}
.ws-onb-plan-summary div b{color:var(--accent)}
.ws-onb-plan-summary p{margin:4px 0 0;max-width:none;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
@media (max-width: 430px){
.ws-onb-plan-rail{gap:5px}
.ws-onb-plan-rail button{min-height:66px;border-radius:10px}
.ws-onb-plan-rail button b{font-size:17px}
.ws-onb-plan-rail button small{font-size:10.5px}
.ws-onb-plan-rail .ws-onb-plan-tag{right:3px;top:3px;padding:2px 4px;font-size:9px}
}
/* 留存闭环 V1：到期复习召回条（Day1+ 首页主卡顶部） */
.mobile-review-recall{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));border-radius:16px;padding:13px 15px;margin:0 0 12px;cursor:pointer;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--card)),color-mix(in srgb,var(--accent) 7%,var(--card)));
box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 15%,transparent)}
.mobile-review-recall[hidden]{display:none}
.mobile-review-recall:active{transform:scale(.995)}
.mobile-review-recall .mrr-ico{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--accent);color:var(--card)}
.mobile-review-recall .mrr-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mobile-review-recall .mrr-title{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3}
.mobile-review-recall .mrr-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.mobile-review-recall .mrr-cta{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--accent);white-space:nowrap}
/* 收紧竖向节奏：8 张卡的选择页不需要大 emoji，短屏也不用滚 */
#wsOnb .ws-onb-emoji{width:46px;height:46px;font-size:24px;margin:0 auto 8px}
#wsOnb .ws-onb-card h2{font-size:20px;margin:2px 0 6px}
#wsOnb .ws-onb-card p{font-size:13px;line-height:1.55;margin:0 auto 14px}
.ws-onb-goals{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:2px 0 12px;text-align:left}
.ws-onb-goals button{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;padding:11px 12px 10px;cursor:pointer;transition:.16s;min-width:0}
.ws-onb-goals button .g-emoji{font-size:21px;line-height:1;margin-bottom:2px}
.ws-onb-goals button .g-name{font-size:14.5px;font-weight:800;color:var(--ink)}
.ws-onb-goals button .g-desc{font-size:11px;line-height:1.35;color:var(--ink-soft)}
.ws-onb-goals button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.ws-onb-goals button:active{transform:scale(.985)}
.ws-onb-goals button.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 14%,transparent)}
.ws-onb-goals button.sel .g-name{color:var(--accent)}
.ws-onb-done-modal{position:fixed;inset:0;z-index:6200;margin:0;display:none;align-items:center;justify-content:center;padding:20px;
background:color-mix(in srgb,var(--ink) 46%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ws-onb-done-modal.on{display:flex;animation:wsOnbFade .25s ease}
.ws-onb-done-card{width:min(400px,100%);max-height:92vh;overflow-y:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);
border-radius:22px;padding:26px 22px 20px;text-align:center;box-shadow:0 26px 64px color-mix(in srgb,var(--ink) 30%,transparent);
animation:wsOnbPop .32s cubic-bezier(.2,.9,.3,1.1) both}
.ws-onb-done-seal{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:50%;
background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ws-onb-done-kicker{font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--accent);margin-bottom:6px}
.ws-onb-done-card h2{font-size:20px;margin:0 0 16px;color:var(--ink)}
.ws-onb-done-list{list-style:none;margin:0 0 20px;padding:0;text-align:left;display:flex;flex-direction:column;gap:11px}
.ws-onb-done-list li{display:flex;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ws-onb-done-list li span{flex:0 0 auto;font-size:16px;line-height:1.4}
.ws-onb-done-list li b{color:var(--ink);font-weight:800}
.ws-onb-done-primary{width:100%;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:800;cursor:pointer;
background:var(--solid);color:var(--solid-text);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%,transparent)}
.ws-onb-done-primary:active{transform:translateY(1px)}
.ws-onb-done-ghost{margin-top:9px;width:100%;border:0;background:none;color:var(--ink-faint);font-size:13.5px;cursor:pointer;padding:8px}
.ws-onb-done-ghost:hover{color:var(--ink-soft)}
/* ===== 注册率优化 V2：保存成果提示卡 ===== */
.ws-reg-modal{position:fixed;inset:0;z-index:6300;margin:0;display:none;align-items:center;justify-content:center;box-sizing:border-box;padding:20px;background:color-mix(in srgb,var(--ink) 48%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ws-reg-modal.on{display:flex;animation:wsOnbFade .25s ease}
.ws-reg-card{position:relative;width:100%;max-width:400px;max-height:92vh;overflow-y:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:28px 22px 18px;text-align:center;box-shadow:0 26px 64px color-mix(in srgb,var(--ink) 30%,transparent);animation:wsOnbPop .32s cubic-bezier(.2,.9,.3,1.1) both}
.ws-reg-close{position:sticky;top:4px;float:right;margin:-10px -6px -34px auto;width:32px;height:32px;border:0;border-radius:999px;cursor:pointer;font-size:22px;line-height:1;z-index:5;background:color-mix(in srgb,var(--ink) 12%,var(--card));color:var(--ink-faint)}
.ws-reg-close:hover{background:color-mix(in srgb,var(--ink) 13%,transparent);color:var(--ink-soft)}
.ws-reg-seal{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,var(--card));border:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.ws-reg-title{font-size:20px;margin:0 0 8px;color:var(--ink)}
.ws-reg-body{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 auto 14px;max-width:34ch}
.ws-reg-assets{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:0 0 14px}
.ws-reg-assets:empty{display:none}
.ws-reg-chip{font-size:12px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:999px;padding:4px 11px}
.ws-reg-benefits{list-style:none;margin:0 0 18px;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.ws-reg-benefits li{position:relative;padding-left:24px;font-size:13px;color:var(--ink-soft);line-height:1.45}
.ws-reg-benefits li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.ws-reg-primary{width:100%;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:800;cursor:pointer;background:var(--solid);color:var(--solid-text);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%,transparent)}
.ws-reg-primary:active{transform:translateY(1px)}
.ws-reg-ghost{margin-top:9px;width:100%;border:0;background:none;color:var(--ink-faint);font-size:13.5px;cursor:pointer;padding:8px}
.ws-reg-ghost:hover{color:var(--ink-soft)}
.ws-reg-foot{margin-top:8px;font-size:11px;color:var(--ink-faint);line-height:1.5}
/* ===== V5.4.1 战报卡分享预览 ===== */
#wsCardModal.ws-card-modal{position:fixed !important;inset:0 !important;z-index:6200 !important;margin:0 !important;display:none;align-items:center;justify-content:center;padding:18px;
background:color-mix(in srgb,var(--ink) 60%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
#wsCardModal.ws-card-modal.on{display:flex !important;animation:wsOnbFade .22s ease}
.ws-card-dialog{position:relative;width:min(380px,100%);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line);
border-radius:22px;padding:18px 18px 20px;box-shadow:0 26px 64px color-mix(in srgb,var(--ink) 32%,transparent);text-align:center;
animation:wsOnbPop .3s cubic-bezier(.2,.9,.3,1.1)}
.ws-card-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:999px;cursor:pointer;font-size:22px;line-height:1;
background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft)}
.ws-card-img-wrap{border-radius:16px;overflow:hidden;box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 18%,transparent)}
.ws-card-img-wrap img{display:block;width:100%;height:auto}
.ws-card-tip{font-size:12.5px;line-height:1.55;color:var(--ink-faint);margin:13px 4px 14px}
.ws-card-actions{display:flex;flex-direction:column;gap:9px}
.ws-card-btn{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:13px;padding:13px;font-size:15px;font-weight:700;cursor:pointer}
.ws-card-btn:active{transform:translateY(1px)}
.ws-card-btn.primary{border:0;background:var(--solid);color:var(--solid-text);box-shadow:0 8px 20px color-mix(in srgb,var(--solid) 32%,transparent)}
@media (min-width:520px){.ws-card-actions{flex-direction:row}.ws-card-btn{flex:1}}
/* V5.4.3 记忆钩子·无词缀时的可操作提示（取代旧记忆锚点） */
.study-hint-tip{font-size:14px;line-height:1.6;color:var(--ink);}
.study-hint.study-hint--tip{padding-top:13px;padding-bottom:14px}
/* ===== V5.4.4 扫码登录（方案B）===== */
.auth-socials .auth-social.qr b{font-family:ui-monospace,Menlo,monospace}
#wsQrLoginModal.ws-qr-modal,#wsQrConfirmModal.ws-qr-modal{position:fixed !important;inset:0 !important;left:0 !important;right:0 !important;z-index:12200 !important;margin:0 !important;
width:100vw !important;max-width:100vw !important;height:100vh;height:100dvh;box-sizing:border-box !important;
display:none;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top,0px)) 16px max(18px,env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--ink) 58%,transparent);
overflow:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
#wsQrLoginModal.ws-qr-modal.on,#wsQrConfirmModal.ws-qr-modal.on{display:flex !important;animation:wsOnbFade .22s ease}
.ws-qr-dialog{position:relative;width:min(360px,calc(100vw - 32px));max-width:calc(100vw - 32px);margin:auto;box-sizing:border-box;background:var(--card);color:var(--ink);border:1px solid var(--line);
border-radius:22px;padding:26px 24px 22px;text-align:center;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 30%,transparent);
animation:wsOnbPop .3s cubic-bezier(.2,.9,.3,1.1)}
.ws-qr-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:999px;cursor:pointer;font-size:22px;line-height:1;
background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft)}
.ws-qr-title{font-size:22px;margin:2px 0 8px;color:var(--ink)}
.ws-qr-sub{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 auto 16px;max-width:30ch}
.ws-qr-sub b{color:var(--accent)}
.ws-qr-frame{position:relative;width:212px;height:212px;margin:0 auto 14px;border-radius:16px;overflow:hidden;
background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 14%,transparent);display:flex;align-items:center;justify-content:center}
.ws-qr-frame img{width:100%;height:100%;object-fit:contain;display:block}
.ws-qr-mask{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);font-size:14px;font-weight:600}
.ws-qr-mask.on{display:flex}
.ws-qr-mask button{border:0;border-radius:10px;padding:9px 16px;cursor:pointer;font-weight:700;background:var(--solid);color:var(--solid-text)}
.ws-qr-status{font-size:13px;color:var(--ink);font-weight:600}
.ws-qr-note{font-size:11.5px;color:var(--ink-faint);margin-top:8px}
.ws-qr-confirm .ws-qr-emoji{font-size:46px;line-height:1;margin-bottom:8px}
.ws-qr-confirm-ok{width:100%;border:0;border-radius:14px;padding:14px;font-size:16px;font-weight:800;cursor:pointer;margin-top:6px;
background:var(--solid);color:var(--solid-text);box-shadow:0 8px 20px color-mix(in srgb,var(--solid) 32%,transparent)}
.ws-qr-confirm-ok:disabled{opacity:.6}
.ws-qr-confirm-cancel{width:100%;border:0;background:none;color:var(--ink-faint);font-size:13.5px;cursor:pointer;padding:9px;margin-top:6px}
/* ===== V5.4.5 灵动岛 / 刘海：全面屏铺底，状态栏区域=当前主题色（不再黑/白系统条）===== */
/* black-translucent + viewport-fit=cover 让内容铺到刘海下；这里把所有主内容(.wrap)整体下移避开刘海/灵动岛。
#study / 磨耳朵 / 各弹窗在 .wrap 之外、各自已补安全区，不会重复留白。 */
@media (max-width: 768px){
html.ws-v4-polish body .wrap{ padding-top: env(safe-area-inset-top) !important; }
}
/* 状态栏区域透出页面主题底色（html/body 已是 --paper）。浅色主题下 iOS 强制白色时钟，加一道极轻的渐隐遮罩保证可读；
深色 / 至尊主题白字本就清晰，遮罩透明。遮罩只占安全区高度、指针穿透、不挡内容。 */
#wsStatusScrim{display:none}
@media (max-width: 768px){
#wsStatusScrim{display:block;position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);z-index:8000;pointer-events:none;
background:linear-gradient(to bottom, rgba(0,0,0,.24), rgba(0,0,0,.05) 72%, transparent);}
#wsStatusScrim[data-dark="1"]{background:transparent}
}
/* V5.4.8 账号页「退出登录」提到顶部并标红，便于查找 */
.btn.account-logout{border:1px solid color-mix(in srgb,#e24c4c 38%,var(--line))!important;color:#de3d3d!important;background:var(--card)!important;}
.btn.account-logout:hover{background:color-mix(in srgb,#e24c4c 10%,var(--card))!important;}
/* ===== 学习沉浸模式 + 开始学习即时反馈 (V5.5.1) ===== */
/* 进入学习锁住背景滚动（#study 已是 fixed inset:0 不透明全屏；底部导航由 index.html 既有 body.study-active nav{display:none} 规则隐藏） */
html body.study-active{overflow:hidden!important;}
/* 「开始学习」按下立刻给反馈：变「正在进入学习…」+ 转圈 + 禁用感 */
.is-entering{opacity:.85!important;cursor:progress!important;pointer-events:none!important;}
.is-entering::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:.5em;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:wsEnterSpin .6s linear infinite;}
@keyframes wsEnterSpin{to{transform:rotate(360deg)}}
/* 连胜状态三气泡：等宽三列 + 收紧间距（覆盖各处遗留 gap，确保桌面不空旷）V5.5.2 */
@media (min-width: 769px) {
html.ws-v4-polish #view-home #streakLine .streak-bubbles { gap: 10px !important; }
}
/* ===== IA V1: 全局菜单层级、按钮主次、我的/设置深层入口 ===== */
html.ws-ia-v1{
--ia-radius:18px;
--ia-radius-sm:13px;
--ia-shadow:0 18px 42px color-mix(in srgb,var(--ink) 11%,transparent);
--ia-shadow-soft:0 10px 24px color-mix(in srgb,var(--ink) 7%,transparent);
--ia-focus:color-mix(in srgb,var(--accent) 18%,transparent);
}
html.ws-ia-v1 #topRankBtn,
html.ws-ia-v1 #desktopRankBtn,
html.ws-ia-v1 #topShopBtn,
html.ws-ia-v1 #topInstallBtn,
html.ws-ia-v1 .ws-top-shop{
opacity:.78;
}
html.ws-ia-v1 #view-home #topRankBtn,
html.ws-ia-v1 #view-home #desktopRankBtn,
html.ws-ia-v1 #view-home #topShopBtn,
html.ws-ia-v1 #view-home #topInstallBtn{
display:none!important;
}
.ws-ia-enhanced{position:relative;}
.ws-ia-page{
display:grid;
grid-template-columns:minmax(250px,302px) minmax(0,1fr);
gap:18px;
align-items:start;
animation:wsIaEnter .24s ease both;
}
.ws-ia-side,
.ws-ia-main-card,
.ws-mobile-ia{
color:var(--ink);
opacity:1!important;
filter:none!important;
}
.ws-ia-page button,
.ws-mobile-ia button{
opacity:1!important;
filter:none!important;
font-family:inherit;
}
.ws-ia-side{
position:sticky;
top:18px;
max-height:calc(100vh - 36px);
overflow:auto;
border:1px solid var(--line);
border-radius:var(--ia-radius);
background:color-mix(in srgb,var(--card) 92%,var(--paper));
box-shadow:var(--ia-shadow-soft);
padding:14px;
}
.ws-ia-side-title{display:flex;flex-direction:column;gap:4px;margin:2px 2px 13px;}
.ws-ia-side-title b{font-size:17px;letter-spacing:0;color:var(--ink);}
.ws-ia-side-title small,
.ws-ia-recent>small{font-size:12px;line-height:1.45;color:var(--ink-faint);}
.ws-ia-search,
.ws-mobile-ia-search{
display:block;
position:relative;
}
.ws-ia-search span{
display:block;
font-size:12px;
font-weight:700;
color:var(--ink-soft);
margin:0 0 6px 2px;
}
.ws-ia-search input,
.ws-mobile-ia-search input{
width:100%;
min-height:42px;
border:1px solid var(--line);
border-radius:12px;
background:var(--paper);
color:var(--ink);
outline:0;
padding:0 12px;
font-size:14px;
box-sizing:border-box;
}
.ws-ia-search input:focus,
.ws-mobile-ia-search input:focus{
border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
box-shadow:0 0 0 3px var(--ia-focus);
}
.ws-ia-search-results,
.ws-mobile-ia-results{
display:flex;
flex-direction:column;
gap:8px;
margin:10px 0 12px;
}
.ws-ia-search-results[hidden],
.ws-mobile-ia-results[hidden]{display:none!important;}
.ws-ia-result{
width:100%;
text-align:left;
border:1px solid var(--line);
background:var(--card);
color:var(--ink);
border-radius:12px;
padding:10px 11px;
cursor:pointer;
}
.ws-ia-result b{display:block;font-size:13.5px;margin-bottom:3px;}
.ws-ia-result small{display:block;color:var(--ink-faint);font-size:11.5px;line-height:1.35;}
.ws-ia-quick,
.ws-ia-recent{
display:flex;
flex-direction:column;
gap:8px;
margin:14px 0 0;
}
.ws-ia-quick>b,
.ws-ia-recent>b{
color:var(--ink);
font-size:13px;
margin:0 2px;
}
.ws-ia-card{
border:1px solid var(--line);
background:var(--paper);
color:var(--ink);
border-radius:13px;
padding:10px 11px;
text-align:left;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ws-ia-card:hover,
.ws-ia-result:hover,
.ws-mobile-ia-row:hover{
border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
background:color-mix(in srgb,var(--accent) 7%,var(--card));
}
.ws-ia-card:active,
.ws-mobile-ia-row:active,
.ws-ia-action:active{transform:translateY(1px);}
.ws-ia-card b{display:block;font-size:13.5px;color:var(--ink);}
.ws-ia-card small{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--ink-faint);}
.ws-ia-tree{display:flex;flex-direction:column;gap:5px;margin-top:14px;}
.ws-ia-tree-row{
width:100%;
min-height:42px;
display:flex;
align-items:center;
justify-content:space-between;
gap:9px;
border:0;
border-radius:12px;
background:transparent;
color:var(--ink);
text-align:left;
padding:9px 10px;
cursor:pointer;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.ws-ia-tree-row span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
font-weight:700;
}
.ws-ia-tree-row em{
font-style:normal;
color:var(--ink-faint);
font-size:12px;
}
.ws-ia-tree-row.active{
color:var(--accent);
background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.ws-ia-tree-row.danger{color:#cf3f3f;}
.ws-ia-tree-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);}
.ws-ia-tree-children{
display:flex;
flex-direction:column;
gap:4px;
margin:2px 0 5px;
padding-left:10px;
border-left:1px solid color-mix(in srgb,var(--line) 72%,transparent);
}
.ws-ia-main{min-width:0;}
.ws-ia-main-card{
border:1px solid var(--line);
border-radius:22px;
background:var(--card);
box-shadow:var(--ia-shadow);
padding:22px;
}
.ws-ia-breadcrumb{
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
color:var(--ink-faint);
font-size:12px;
margin-bottom:12px;
}
.ws-ia-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
.ws-ia-title-row h2{
margin:0;
font-size:clamp(22px,2.2vw,30px);
letter-spacing:0;
color:var(--ink);
}
.ws-ia-title-row p{
margin:6px 0 0;
color:var(--ink-soft);
line-height:1.55;
max-width:58ch;
}
.ws-ia-action{
min-height:42px;
border:1px solid var(--line);
border-radius:13px;
padding:0 15px;
background:var(--paper);
color:var(--ink);
font-weight:800;
cursor:pointer;
white-space:nowrap;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.ws-ia-action.primary{
border-color:transparent;
background:var(--solid);
color:var(--solid-text);
box-shadow:0 9px 22px color-mix(in srgb,var(--solid) 25%,transparent);
}
.ws-ia-action.danger{
color:#d14444;
border-color:color-mix(in srgb,#d14444 42%,var(--line));
background:color-mix(in srgb,#d14444 7%,var(--card));
}
.ws-ia-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.ws-ia-detail-card{
border:1px solid var(--line);
border-radius:16px;
background:var(--paper);
padding:15px;
min-height:112px;
text-align:left;
cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
animation:wsIaItem .24s ease both;
}
.ws-ia-detail-card:hover{
transform:translateY(-1px);
box-shadow:var(--ia-shadow-soft);
border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
}
.ws-ia-detail-card b{display:block;font-size:16px;color:var(--ink);}
.ws-ia-detail-card p{margin:7px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.5;}
.ws-ia-detail-card small{
display:block;
margin-top:10px;
color:var(--accent);
font-size:12px;
font-weight:800;
}
.ws-ia-detail-card.danger{
border-color:color-mix(in srgb,#d14444 38%,var(--line));
background:color-mix(in srgb,#d14444 7%,var(--paper));
}
.ws-ia-detail-card.danger b,
.ws-ia-detail-card.danger small{color:#d14444;}
.ws-ia-empty{
border:1px dashed var(--line);
border-radius:16px;
padding:18px;
color:var(--ink-soft);
line-height:1.55;
background:color-mix(in srgb,var(--paper) 75%,transparent);
}
@media (min-width:769px){
.ws-mobile-ia{display:none!important;}
.ws-ia-page{display:none!important;}
.ws-drill-back{display:none!important;}
/* 桌面端还原原生面板：IA 地图仅手机端使用（旧规则曾把桌面设置/我的页藏空，只剩地图列） */
.ws-ia-enhanced>.panel,
.ws-ia-enhanced>.card,
.ws-ia-enhanced>.settings-wrap,
.ws-ia-enhanced>.account-wrap{
display:revert!important;
}
html.ws-ia-v1 #view-account.ws-ia-enhanced,
html.ws-ia-v1 #view-settings.ws-ia-enhanced{
max-width:1180px;
margin-inline:auto;
}
}
@media (max-width:768px){
.ws-ia-page{display:none!important;}
.ws-mobile-ia{
display:block;
border:1px solid var(--line);
border-radius:20px;
background:var(--card);
box-shadow:var(--ia-shadow-soft);
padding:14px;
margin:4px 0 18px;
animation:wsIaEnter .2s ease both;
}
.ws-ia-enhanced>.panel,
.ws-ia-enhanced>.card,
.ws-ia-enhanced>.settings-wrap,
.ws-ia-enhanced>.account-wrap{
display:none!important;
}
.ws-mobile-ia-head{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
}
.ws-mobile-ia-head button{
min-width:48px;
min-height:38px;
border:1px solid var(--line);
border-radius:12px;
background:var(--paper);
color:var(--ink);
font-weight:800;
}
.ws-mobile-ia-head h2{
margin:0;
color:var(--ink);
font-size:20px;
letter-spacing:0;
}
.ws-mobile-ia-head p{
margin:3px 0 0;
color:var(--ink-faint);
font-size:12px;
line-height:1.35;
}
.ws-mobile-ia-asset{
border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
background:color-mix(in srgb,var(--accent) 9%,var(--card));
border-radius:16px;
padding:13px;
margin:10px 0 12px;
}
.ws-mobile-ia-asset b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;}
.ws-mobile-ia-asset p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.5;}
.ws-mobile-ia-list{
display:flex;
flex-direction:column;
gap:9px;
margin-top:12px;
}
.ws-mobile-ia-row{
min-height:58px;
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:4px 10px;
align-items:center;
text-align:left;
border:1px solid var(--line);
border-radius:15px;
background:var(--paper);
color:var(--ink);
padding:11px 12px;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease;
animation:wsIaItem .22s ease both;
opacity:1!important;
}
.ws-mobile-ia-row b{font-size:15px;line-height:1.2;min-width:0;}
.ws-mobile-ia-row small{
grid-column:1/2;
color:var(--ink-faint);
font-size:12px;
line-height:1.35;
}
.ws-mobile-ia-row em{
grid-column:2/3;
grid-row:1/3;
color:var(--ink-soft);
font-style:normal;
font-size:12px;
}
.ws-mobile-ia-row.primary{
border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
background:color-mix(in srgb,var(--accent) 11%,var(--paper));
}
.ws-mobile-ia-row.danger{
border-color:color-mix(in srgb,#d14444 36%,var(--line));
background:color-mix(in srgb,#d14444 7%,var(--paper));
}
.ws-mobile-ia-row.danger b,.ws-mobile-ia-row.danger em{color:#d14444;}
.ws-mobile-ia-quick{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:12px 0 0;
}
.ws-mobile-ia-quick b{
flex:0 0 100%;
color:var(--ink);
font-size:13px;
}
.ws-mobile-ia-quick button{
min-height:34px;
border:1px solid var(--line);
border-radius:999px;
background:var(--paper);
color:var(--ink);
padding:0 11px;
font-size:12px;
font-weight:700;
}
.ws-mobile-ia-results{
max-height:45vh;
overflow:auto;
}
html.ws-ia-v1 body .wrap{
padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
}
}
@media (max-width:980px) and (min-width:769px){
.ws-ia-page{grid-template-columns:250px minmax(0,1fr);}
.ws-ia-grid{grid-template-columns:1fr;}
}
@media (max-width:420px){
.ws-mobile-ia{border-radius:16px;padding:12px;}
.ws-mobile-ia-head h2{font-size:19px;}
.ws-mobile-ia-row{padding:10px 11px;}
}
@media (prefers-reduced-motion:reduce){
.ws-ia-page,
.ws-mobile-ia,
.ws-ia-detail-card,
.ws-mobile-ia-row,
.ws-ia-card,
.ws-ia-action{
animation:none!important;
transition:none!important;
}
}
@keyframes wsIaEnter{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes wsIaItem{
from{opacity:0;transform:translateY(5px);}
to{opacity:1;transform:translateY(0);}
}
/* IA V1 actual generated class names */
.ws-ia-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:12px;
}
.ws-ia-head p{
margin:0 0 6px;
color:var(--ink-soft);
font-size:13px;
letter-spacing:0;
text-transform:uppercase;
}
.ws-ia-head h2{
margin:0;
color:var(--ink);
font-size:clamp(24px,2.2vw,32px);
letter-spacing:0;
}
.ws-ia-head span{
display:block;
margin-top:7px;
color:var(--ink-soft);
font-size:15px;
line-height:1.55;
}
.ws-ia-primary{
min-height:42px;
border:0;
border-radius:14px;
background:var(--solid);
color:var(--solid-text);
padding:0 16px;
font-weight:850;
white-space:nowrap;
cursor:pointer;
box-shadow:0 10px 24px color-mix(in srgb,var(--solid) 24%,transparent);
transition:transform .18s ease,box-shadow .18s ease;
}
.ws-ia-primary:active{transform:translateY(1px);}
.ws-ia-summary{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 14px;
}
.ws-ia-summary span{
border:1px solid var(--line);
border-radius:999px;
background:var(--paper);
color:var(--ink-soft);
padding:6px 10px;
font-size:12px;
font-weight:700;
}
.ws-ia-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
align-items:stretch;
}
.ws-ia-card-kicker{
display:block;
color:var(--ink-faint);
font-size:11px;
font-weight:850;
margin-bottom:4px;
}
.ws-ia-card em{
display:block;
margin-top:8px;
color:var(--accent);
font-style:normal;
font-size:12px;
font-weight:850;
}
.ws-ia-card.primary{
border-color:color-mix(in srgb,var(--accent) 36%,var(--line));
background:color-mix(in srgb,var(--accent) 8%,var(--paper));
}
.ws-ia-tree-list{
display:flex;
flex-direction:column;
gap:6px;
margin-top:14px;
}
.ws-ia-tree-group{
border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
padding-top:6px;
}
.ws-ia-tree-group:first-child{
border-top:0;
padding-top:0;
}
.ws-ia-tree-item{
width:100%;
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
border:0;
border-radius:11px;
background:transparent;
color:var(--ink);
padding:8px 9px;
text-align:left;
cursor:pointer;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.ws-ia-tree-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);}
.ws-ia-tree-item.active{
color:var(--accent);
background:color-mix(in srgb,var(--accent) 13%,transparent);
}
.ws-ia-tree-item.danger{color:#d14444;}
.ws-ia-tree-item span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:800;
}
.ws-ia-tree-item em{
color:var(--ink-faint);
font-style:normal;
font-size:12px;
}
.ws-ia-tree-group>.ws-ia-tree-list{
margin:3px 0 5px 10px;
padding-left:9px;
border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.ws-ia-danger-zone{
margin-top:18px;
border:1px solid color-mix(in srgb,#d14444 35%,var(--line));
border-radius:18px;
background:color-mix(in srgb,#d14444 6%,var(--card));
padding:15px;
}
.ws-ia-danger-zone>b{
display:block;
color:#d14444;
font-size:16px;
margin-bottom:4px;
}
.ws-ia-danger-zone p{
margin:0 0 12px;
color:var(--ink-soft);
font-size:13px;
line-height:1.5;
}
.ws-ia-asset-panel{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);
gap:14px;
align-items:stretch;
border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
border-radius:18px;
background:color-mix(in srgb,var(--accent) 8%,var(--card));
padding:15px;
margin:8px 0 14px;
}
.ws-ia-asset-copy b{
display:block;
color:var(--ink);
font-size:17px;
margin-bottom:5px;
}
.ws-ia-asset-copy span{
display:block;
color:var(--ink-soft);
line-height:1.55;
font-size:13px;
}
.ws-ia-asset-stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.ws-ia-asset-stats span{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:74px;
border:1px solid var(--line);
border-radius:14px;
background:var(--paper);
}
.ws-ia-asset-stats b{
color:var(--ink);
font-family:Georgia,serif;
font-size:24px;
line-height:1;
}
.ws-ia-asset-stats small{
margin-top:5px;
color:var(--ink-faint);
font-size:11px;
font-weight:800;
}
@media (max-width:1120px) and (min-width:769px){
.ws-ia-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.ws-ia-asset-panel{grid-template-columns:1fr;}
}
@media (max-width:768px){
.ws-ia-card-grid{grid-template-columns:1fr;}
}
/* ---- layout-v1: 我的页用户卡资产四格 ---- */
.ws-mobile-ia-asset .ws-ia-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.ws-mobile-ia-asset .ws-ia-stats span{flex:1 1 calc(50% - 8px);min-width:118px;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.ws-mobile-ia-asset .ws-ia-stats i{font-style:normal;font-size:11px;color:var(--ink-soft,#777);letter-spacing:.02em}
.ws-mobile-ia-asset .ws-ia-stats b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- growth-v1: 难词本诊断工具 ---- */
.mobile-hard-reason{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(189,82,44,.1);color:#bd522c;white-space:nowrap}
.mobile-hard-diag{margin:0 0 12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent,#1f6e5c) 35%,transparent);border-radius:12px;background:var(--accent-soft,rgba(31,110,92,.08));font-size:13px;line-height:1.6;color:var(--ink)}
.mobile-hard-diag b{color:var(--accent,#1f6e5c)}
.mobile-hard-diag span{display:block;font-size:12px;color:var(--ink-soft,#777);margin-top:2px}
/* V5.7.0 防竖排：当前词书条在窄屏换行布局，描述永不被挤成一列一字 */
@media (max-width:768px){
.vocab-note{flex-wrap:wrap;}
.vocab-note>span{flex:1 1 calc(100% - 74px);min-width:0;}
.vocab-note .vocab-switch{margin-left:0;}
.vocab-note .vocab-switch,
.vocab-note .vocab-share{flex:0 0 auto;}
}
/* V5.7.2 桌面顶部遮挡修复：顶栏(品牌)与右上角固定药丸(连胜/商城/个人模式/头像/日期)是 position:fixed 浮在页面上；
登录后药丸多、窄一点的桌面会换行成更高的一排，把「今天的计划」卡片顶部盖住。给主内容留足上边距(取"表头高+余量"与固定 128px 的较大值)，
保证内容始终落在固定顶栏下方，永不被盖。仅桌面(≥769px)、仅 ws-ia-v1 框架，纯留白、不动任何逻辑/口径。 */
@media (min-width:769px){
html.ws-ia-v1 body .wrap{
padding-top: max(calc(var(--desktop-head-h, 104px) + 24px), 128px) !important;
}
}