:root {
    /* Google Material Design 3 Baseline Color Tokens */
    --md-sys-color-primary: #0061A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D1E4FF;
    --md-sys-color-on-primary-container: #001D36;

    --md-sys-color-secondary: #535F70;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #D7E3F7;
    --md-sys-color-on-secondary-container: #101C2B;

    --md-sys-color-error: #BA1A1A;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-success: #146C2E;
    --md-sys-color-success-container: #C8E6C9;
    --md-sys-color-on-success-container: #003314;

    --md-sys-color-background: #F8F9FF;
    --md-sys-color-on-background: #191C20;

    --md-sys-color-surface: #F8F9FF;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F2F3FA;
    --md-sys-color-surface-container: #ECEEF4;
    --md-sys-color-surface-container-high: #E7E8EE;

    --md-sys-color-on-surface: #191C20;
    --md-sys-color-on-surface-variant: #43474E;
    --md-sys-color-outline: #74777F;
    --md-sys-color-outline-variant: #C4C7D0;

    --p1-sys-color: #B3261E;
    --p1-sys-container: #FFDAD6;
    --p1-sys-on-container: #410002;

    --p2-sys-color: #006874;
    --p2-sys-container: #9EEFFD;
    --p2-sys-on-container: #001F24;

    --md-shape-xs: 4px;
    --md-shape-s: 8px;
    --md-shape-m: 12px;
    --md-shape-l: 16px;
    --md-shape-xl: 28px;
    --md-shape-full: 9999px;

    --md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    --md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);

    --md-motion-standard: 0.22s cubic-bezier(0.2, 0, 0, 1);
    --md-motion-expressive: 0.32s cubic-bezier(0.3, 0, 0, 1);

    --container-max-width: 960px;
    --app-zoom: 1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Google Sans', 'Roboto', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 12px 16px 36px;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: var(--container-max-width, 960px);
    position: relative;
    transform-origin: top center;
}

@keyframes md3SlideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes md3FadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.view {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.view.active {
    display: block;
    opacity: 1;
}

/* “首页”、“我”、“设置”页面之间的切换动画：从上往下位移淡入，不要缩放（适当放缓至 0.32s，平滑优雅） */
#view-hub.active,
#view-me.active,
#view-settings.active {
    animation: md3SlideDownFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 导航栏保持稳定，不参与页面整体滑动淡入淡出 */
#app-nav-rail {
    view-transition-name: app-nav-rail;
}

#app-bottom-nav {
    view-transition-name: app-bottom-nav;
}

::view-transition-group(app-nav-rail),
::view-transition-group(app-bottom-nav) {
    animation: none;
}

::view-transition-old(root) {
    animation: 140ms cubic-bezier(0.4, 0, 1, 1) both md3FadeOut;
}

::view-transition-new(root) {
    animation: 220ms cubic-bezier(0.1, 0.9, 0.2, 1) both md3SlideDownFadeIn;
}

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

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    #view-hub.active,
    #view-me.active,
    #view-settings.active,
    .view.active,
    .settings-subview.active,
    .me-subview.active {
        animation: none !important;
        transform: none !important;
    }

    #me-account-settings-list *,
    #me-account-settings-list .me-account-action-row,
    #me-account-settings-list .me-account-action-row:hover,
    #me-account-settings-list .settings-row,
    #me-account-settings-list .settings-row:hover,
    #me-account-settings-list .settings-row.clickable:hover,
    #me-account-settings-list .settings-row.clickable:active {
        transform: none !important;
    }
}

/* 减弱动画效果模式（设置开关驱动，大幅提升低性能设备流畅度） */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after,
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

html.reduce-motion ::view-transition-group(*),
html.reduce-motion ::view-transition-old(*),
html.reduce-motion ::view-transition-new(*),
body.reduce-motion ::view-transition-group(*),
body.reduce-motion ::view-transition-old(*),
body.reduce-motion ::view-transition-new(*) {
    animation: none !important;
}

html.reduce-motion #view-hub.active,
html.reduce-motion #view-me.active,
html.reduce-motion #view-settings.active,
html.reduce-motion .view.active,
html.reduce-motion .settings-subview.active,
html.reduce-motion .me-subview.active,
body.reduce-motion #view-hub.active,
body.reduce-motion #view-me.active,
body.reduce-motion #view-settings.active,
body.reduce-motion .view.active,
body.reduce-motion .settings-subview.active,
body.reduce-motion .me-subview.active {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* 减弱动画开启时，删除首页卡片、各类型按钮及悬浮元素的一切位移(transform)动效 */
html.reduce-motion .card:hover,
html.reduce-motion .mode-card:hover,
html.reduce-motion #hub-online-players-card:hover,
html.reduce-motion .leaderboard-entry-card:hover,
html.reduce-motion .hub-activity-entry-card:hover,
html.reduce-motion .activity-item-card:hover,
html.reduce-motion .hub-user-pill:hover,
html.reduce-motion .hub-mailbox-btn:hover,
html.reduce-motion .btn:hover,
html.reduce-motion button:hover,
html.reduce-motion .btn:hover:not(:disabled),
html.reduce-motion .hub-activity-entry-card:hover .entry-card-arrow,
html.reduce-motion .activity-item-card:hover .entry-card-arrow,
body.reduce-motion .card:hover,
body.reduce-motion .mode-card:hover,
body.reduce-motion #hub-online-players-card:hover,
body.reduce-motion .leaderboard-entry-card:hover,
body.reduce-motion .hub-activity-entry-card:hover,
body.reduce-motion .activity-item-card:hover,
body.reduce-motion .hub-user-pill:hover,
body.reduce-motion .hub-mailbox-btn:hover,
body.reduce-motion .btn:hover,
body.reduce-motion button:hover,
body.reduce-motion .btn:hover:not(:disabled),
body.reduce-motion .hub-activity-entry-card:hover .entry-card-arrow,
body.reduce-motion .activity-item-card:hover .entry-card-arrow,
html.reduce-motion #me-account-settings-list *,
html.reduce-motion #me-account-settings-list .me-account-action-row,
html.reduce-motion #me-account-settings-list .me-account-action-row:hover,
html.reduce-motion #me-account-settings-list .settings-row,
html.reduce-motion #me-account-settings-list .settings-row:hover,
html.reduce-motion #me-account-settings-list .settings-row.clickable:hover,
html.reduce-motion #me-account-settings-list .settings-row.clickable:active,
body.reduce-motion #me-account-settings-list *,
body.reduce-motion #me-account-settings-list .me-account-action-row,
body.reduce-motion #me-account-settings-list .me-account-action-row:hover,
body.reduce-motion #me-account-settings-list .settings-row,
body.reduce-motion #me-account-settings-list .settings-row:hover,
body.reduce-motion #me-account-settings-list .settings-row.clickable:hover,
body.reduce-motion #me-account-settings-list .settings-row.clickable:active {
    transform: none !important;
}

.card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
}

.card-filled {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-surface-container-high);
}

h1,
h2,
h3,
h4 {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.92rem;
    line-height: 1.5;
}

.input-field {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container-lowest);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-m);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

.input-field::placeholder {
    color: var(--md-sys-color-outline);
    opacity: 0.8;
    font-size: 0.92rem;
    font-weight: 400;
}

.input-field:hover {
    border-color: var(--md-sys-color-primary);
    background-color: #ffffff;
}

.input-field:focus {
    border-color: var(--md-sys-color-primary);
    border-width: 1.5px;
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(0, 97, 164, 0.16);
}

/* Google Material Design 3 风格自定义美化下拉列表 select */
select.md3-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: light;
    height: 38px;
    padding: 0 36px 0 14px;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container-low);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 -960 960 960' width='20' fill='%23535F70'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-full);
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all var(--md-motion-standard);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

select.md3-select:hover {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 2px 6px rgba(0, 97, 164, 0.12);
}

select.md3-select:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 97, 164, 0.16);
    background-color: #ffffff;
}

select.md3-select option {
    background-color: #ffffff;
    color: #1f2937;
    font-size: 0.88rem;
    padding: 8px 12px;
}

/* Google Material Design 3 风格自定义滑动条 (MD3 Slider - 图片对比精准还原)
   - 激活轨道：高度 16px，胶囊圆角 8px，颜色为 Primary
   - 句柄把手：高 44px 纵向细圆柱条，宽度 4px，圆角 2px
   - 间距隔断：句柄与两边轨道各留 6px 间隙
   - 未激活轨道：高度 16px，浅底色胶囊圆角，末端带 Stop Indicator 止位圆点 */
.md3-slider-row {
    margin-bottom: 16px;
}

.md3-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.md3-slider-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.md3-slider-value-badge {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--md-sys-color-primary, #0061A4);
    background: var(--md-sys-color-primary-container, #e0f2fe);
    padding: 2px 10px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
    min-width: 44px;
    text-align: center;
}

.md3-slider-component {
    position: relative;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.md3-slider-native-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.md3-slider-native-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.md3-slider-native-input::-moz-range-thumb {
    width: 44px;
    height: 44px;
    cursor: pointer;
    border: none;
}

.md3-slider-visual-track {
    position: relative;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.md3-slider-active-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 16px;
    border-radius: 8px 3px 3px 8px;
    background: var(--md-sys-color-primary, #0061A4);
    pointer-events: none;
    transition: width 0.16s cubic-bezier(0.2, 0, 0, 1), opacity 0.12s ease;
}

.md3-slider-thumb-handle {
    position: absolute;
    top: -14px;
    width: 4px;
    height: 44px;
    border-radius: 2px;
    background: var(--md-sys-color-primary, #0061A4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 2;
    transition: left 0.16s cubic-bezier(0.2, 0, 0, 1), transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease;
}

/* MD3 拇指手柄状态光晕 feedback halo */
/* .md3-slider-thumb-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--md-sys-color-primary, #0061A4);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
    z-index: -1;
} */

/* .md3-slider-component:hover .md3-slider-thumb-handle::before {
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(0.85);
}

.md3-slider-component:active .md3-slider-thumb-handle::before,
.md3-slider-component.is-active .md3-slider-thumb-handle::before,
.md3-slider-component.is-dragging .md3-slider-thumb-handle::before {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
} */

.md3-slider-component:active .md3-slider-thumb-handle,
.md3-slider-component.is-active .md3-slider-thumb-handle,
.md3-slider-component.is-dragging .md3-slider-thumb-handle {
    transform: translateX(-50%) scaleY(1.0) scaleX(0.5);
}

.md3-slider-inactive-bar {
    position: absolute;
    right: 0;
    top: 0;
    height: 16px;
    border-radius: 3px 8px 8px 3px;
    background: var(--md-sys-color-secondary-container, #e8def8);
    pointer-events: none;
    transition: left 0.16s cubic-bezier(0.2, 0, 0, 1), opacity 0.12s ease;
}

.md3-slider-stop-dot {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--md-sys-color-primary, #0061A4);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

/* 拖拽交互时禁用过渡，确保零延迟高帧率绝对跟随 */
.md3-slider-component.is-dragging .md3-slider-active-bar,
.md3-slider-component.is-dragging .md3-slider-inactive-bar,
.md3-slider-component.is-dragging .md3-slider-thumb-handle {
    transition: none !important;
}

/* 
点击轨道水波纹扩散动效
.md3-slider-click-ripple {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--md-sys-color-primary, #0061A4) 0%, rgba(0, 97, 164, 0.28) 60%, transparent 80%);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.25);
    animation: md3-slider-ripple-burst 0.42s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
    z-index: 3;
} */

/* @keyframes md3-slider-ripple-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.25);
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
} */

/* 原生 MD3 单行 range 输入框通用适配 */
.md3-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
    margin: 2px 0;
    padding: 0;
    vertical-align: middle;
    outline: none;
}

.md3-slider:focus {
    outline: none;
}

.md3-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background: var(--md-sys-color-secondary-container, #e8def8);
    border: none;
}

.md3-slider::-moz-range-track {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background: var(--md-sys-color-secondary-container, #e8def8);
    border: none;
}

.md3-slider::-moz-range-progress {
    height: 16px;
    border-radius: 8px 3px 3px 8px;
    background: var(--md-sys-color-primary, #0061A4);
}

.md3-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 44px;
    border-radius: 2px;
    background: var(--md-sys-color-primary, #0061A4);
    cursor: pointer;
    margin-top: -14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease;
}

.md3-slider:active::-webkit-slider-thumb {
    transform: scaleY(1.06) scaleX(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.md3-slider::-moz-range-thumb {
    width: 4px;
    height: 44px;
    border: none;
    border-radius: 2px;
    background: var(--md-sys-color-primary, #0061A4);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease;
}

.md3-slider:active::-moz-range-thumb {
    transform: scaleY(1.06) scaleX(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

/* 现代化 MD3 胶囊圆角平滑进度条 */
.md3-progress-track {
    width: 100%;
    height: 6px;
    background-color: var(--md-sys-color-surface-container-highest, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.md3-progress-indicator {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--md-sys-color-primary, #0061A4), #38BDF8);
    border-radius: 9999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 97, 164, 0.2);
}

/* MD3 极简现代悬浮细滚动条规范 */
.md3-scroll-view {
    /* 现代 Firefox 浏览器标准 */
    scrollbar-width: thin;
    scrollbar-color: rgba(116, 119, 127, 0.35) transparent;
}

/* Chrome / Safari / Edge / Webkit 浏览器内核美化 */
.md3-scroll-view::-webkit-scrollbar {
    width: 6px;
    /* 收窄为 6px 纤细宽度 */
}

.md3-scroll-view::-webkit-scrollbar-track {
    background: transparent;
    /* 完全透明轨道，消除突兀的灰底槽 */
    margin: 10px 0;
    /* 上下留白，防止滚动滑块触碰卡片顶部和底部的圆角 */
}

.md3-scroll-view::-webkit-scrollbar-thumb {
    background: rgba(116, 119, 127, 0.3);
    /* 柔和半透明色调 */
    border-radius: 9999px;
    /* 完美胶囊全圆角 */
    transition: background 0.2s ease, opacity 0.2s ease;
}

.md3-scroll-view::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary, #0061A4);
    /* 悬浮时呈现主题主色并加深 */
}

.md3-scroll-view::-webkit-scrollbar-thumb:active {
    background: #004c82;
    /* 按下拖动时的反馈色 */
}

/* 1. 外层卡片：锁定圆角与边界，不产生滚动条，保护外框完整 */
.words-list-outer-card {
    max-height: 600px;
    padding: 12px 6px 12px 14px !important;
    /* 右侧预留安全空隙，容纳内嵌滚动条 */
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 2. 内层真实滚动区：负责滚动，并与右侧外边框保持间隙 */
.words-list-scroll-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    /* 单词内容与滚动条之间的间距 */
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* 现代 Firefox 滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(116, 119, 127, 0.35) transparent;
}

/* 3. 内嵌细胶囊滚动条（WebKit 内核） */
.words-list-scroll-inner::-webkit-scrollbar {
    width: 6px;
    /* 纤细优雅 */
}

.words-list-scroll-inner::-webkit-scrollbar-track {
    background: transparent;
    /* 完全透明，完全融入背景 */
    margin: 6px 0;
    /* 上下预留空隙，绝不碰触圆角 */
}

.words-list-scroll-inner::-webkit-scrollbar-thumb {
    background: rgba(116, 119, 127, 0.28);
    border-radius: 9999px;
    /* 胶囊圆角 */
    transition: background 0.2s ease;
}

.words-list-scroll-inner::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-primary, #0061A4);
    /* 悬浮时变蓝 */
}


/* 词汇卡片右上角合并式 MD3 胶囊工具栏容器 */
.card-top-right-group {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.card-toolbar-cluster {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    /* 与左侧高考3500容器严格等高 */
    padding: 0 6px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-sizing: border-box;
    position: relative;
    transition: all 0.2s ease;
}

.card-toolbar-toggle {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: var(--md-shape-full);
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.card-toolbar-toggle:hover {
    background: rgba(0, 97, 164, 0.12);
    color: var(--md-sys-color-primary);
}

.card-tool-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--md-shape-full);
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    padding: 0;
}

.card-tool-btn:hover {
    background: rgba(0, 97, 164, 0.12);
    color: var(--md-sys-color-primary);
}

.card-tool-btn.active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.card-tool-btn.danger:hover {
    background: #FFDAD6;
    color: var(--md-sys-color-error);
}

/* 禁用删除按钮状态（当词汇来自云端词书时） */
.card-tool-btn:hover:not(:disabled) {
    background: rgba(0, 97, 164, 0.12);
    color: var(--md-sys-color-primary);
}

.card-tool-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}

.card-tool-btn.danger:hover:not(:disabled) {
    background: #FFDAD6;
    color: var(--md-sys-color-error);
}

/* 位于“高考3500”左侧的进度计数文本 */
.card-progress-counter {
    font-family: inherit;
    /* 使用页面主字体 */
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: normal;
}

/* 去掉大外框的轻量 MD3 平滑线性进度条 */
.single-progress-bar-only {
    width: 100%;
    margin-bottom: 20px;
}

.single-progress-bar-only .md3-progress-track {
    width: 100%;
    height: 4px;
    background-color: var(--md-sys-color-surface-container-highest, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.single-progress-bar-only .md3-progress-indicator {
    height: 100%;
    width: 0%;
    background: var(--md-sys-color-primary, #0061A4);
    border-radius: 9999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 词书单词列表项工具栏 (Task 24) */
.word-item-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.word-item-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}

.word-item-tool-btn .material-symbols-rounded {
    font-size: 17px;
}

.word-item-tool-btn:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.word-item-tool-btn.active {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #A5D6A7;
}

.word-item-tool-btn.danger:hover {
    background: #FFEBEE;
    color: #C62828;
    border-color: #EF9A9A;
}

/* 学习模式/默写模式 框选进度条组件 */
.single-progress-box {
    background: var(--md-sys-color-surface-container-low, #f2f4f8);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: var(--md-shape-m, 14px);
    padding: 10px 14px;
    margin: 12px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
}

.single-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
}

.single-progress-count {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    font-family: 'Roboto Mono', monospace;
}

/* 修改后：提升层级并确保不被任何父级遮挡 */
.md3-custom-dropdown {
    position: relative;
    display: inline-block;
}

/* 当下拉菜单打开时，给当前父行提升 z-index，防止被下面的卡片遮挡 */
.md3-custom-dropdown.open {
    z-index: 100;
}

.md3-dropdown-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--md-shape-full);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    white-space: nowrap;
}

.md3-dropdown-btn:hover {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-low);
}

.md3-dropdown-btn .dropdown-chevron {
    font-size: 18px;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform 0.2s ease;
}

.md3-custom-dropdown.open .md3-dropdown-btn .dropdown-chevron {
    transform: rotate(180deg);
}

.md3-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    max-width: 260px;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: var(--md-shape-m);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 99999;
    /* 确保层级置顶 */
    padding: 6px 0;
    box-sizing: border-box;
}

.md3-custom-dropdown.open .md3-dropdown-menu {
    display: block;
}

.md3-dropdown-item {
    padding: 9px 14px;
    font-size: 0.84rem;
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md3-dropdown-item:hover {
    background: var(--md-sys-color-surface-container-high, #e7e8ee);
}

.md3-dropdown-item.selected {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container, #d1e4ff);
    font-weight: 700;
}

.md3-dropdown-item .material-symbols-rounded {
    font-size: 16px;
}

/* 词汇掌握度 5 颗菱形：无外框、无背景、纯净胶囊内嵌排版 */
.mastery-diamond {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--md-sys-color-outline-variant, #C4C7D0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    text-align: center;
    font-family: inherit;
    vertical-align: middle;
    user-select: none;
    will-change: transform, color;
}

.mastery-diamond.filled {
    color: #EAA000;
    /* 亮金黄色 */
    font-size: 19px;
    font-weight: 700;
}

.mastery-diamond.anim-gain {
    animation: singleDiamondPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.mastery-diamond.anim-loss {
    animation: singleDiamondDrop 0.4s ease-in-out both;
}

@keyframes singleDiamondPop {
    0% {
        transform: scale(0.85);
    }

    50% {
        transform: scale(1.4);
        color: #FFB300;
        text-shadow: 0 0 6px rgba(255, 179, 0, 0.6);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes singleDiamondDrop {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px) scale(0.9);
        color: #BA1A1A;
    }

    40% {
        transform: translateX(3px) scale(0.9);
        color: #BA1A1A;
    }

    60% {
        transform: translateX(-2px);
        color: #BA1A1A;
    }

    80% {
        transform: translateX(2px);
        color: #BA1A1A;
    }
}

/* 减弱加星动画效果（微量缩放，温和不晃眼） */
.star-gain-anim {
    animation: starPulseGlow 0.35s ease-out forwards;
}

@keyframes starPulseGlow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* 减弱掉星动画效果（微幅左右位移） */
.star-loss-anim {
    animation: starDropShake 0.3s ease-out forwards;
}

@keyframes starDropShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

.mastery-stage-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    margin-left: 4px;
}

/* 首页学习周历卡片组件 */
/* --------------------------------------------------------------------------
           首页搜索与快捷建议组件
           -------------------------------------------------------------------------- */
.hub-search-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

.hub-search-bar {
    display: flex;
    align-items: center;
    background: var(--md-sys-color-surface-container-low, #F2F3FA);
    border: 1px solid var(--md-sys-color-outline-variant, #E2E8F0);
    border-radius: var(--md-shape-full, 28px);
    padding: 0 16px;
    height: 48px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    cursor: text;
}

.hub-search-bar:hover {
    background: var(--md-sys-color-surface-container, #ECEEF4);
    border-color: var(--md-sys-color-outline, #74777F);
}

.hub-search-bar:focus-within {
    border-color: var(--md-sys-color-primary, #0061A4);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    box-shadow: 0 1px 4px 1px rgba(0, 97, 164, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

.hub-search-icon {
    color: var(--md-sys-color-primary);
    font-size: 22px;
    margin-right: 8px;
    flex-shrink: 0;
}

.hub-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px; /* 阻止移动端 (iOS Safari / WebKit) 聚焦时页面自动放大 */
    color: var(--md-sys-color-on-surface);
    height: 36px;
}

.hub-search-clear-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.hub-search-clear-btn:hover {
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-highest);
}

.hub-search-keyboard-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.hub-search-keyboard-btn:hover {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-highest);
}

.hub-search-keyboard-btn.hidden {
    display: none !important;
}

.hub-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-m);
    box-shadow: var(--md-elevation-2);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
}

.hub-search-suggestion-item {
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high);
    transition: background 0.15s;
}

.hub-search-suggestion-item:last-child {
    border-bottom: none;
}

.hub-search-suggestion-item:hover {
    background: var(--md-sys-color-surface-container-high);
}

.suggestion-icon {
    font-size: 20px;
    color: var(--md-sys-color-outline);
    flex-shrink: 0;
}

.suggestion-word {
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    font-size: 0.96rem;
    flex-shrink: 0;
}

.suggestion-explain {
    color: var(--md-sys-color-outline);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.suggestion-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--md-sys-color-primary-container, #e0f2fe);
    color: var(--md-sys-color-on-primary-container, #0369a1);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* 独立搜索页面单行顶栏精密对齐 (高度统一定为44px，垂直中轴线完全一致) */
.search-page-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 15px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    box-sizing: border-box;
}

.search-page-topbar .search-page-back-btn,
.search-page-topbar .search-page-settings-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface, #1d1b20);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.search-page-topbar .search-page-back-btn:hover,
.search-page-topbar .search-page-settings-btn:hover {
    background: rgba(224, 226, 233, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-page-topbar .search-page-back-btn:active,
.search-page-topbar .search-page-settings-btn:active {
    transform: scale(0.92);
    background: rgba(200, 204, 215, 0.7);
}

.search-page-topbar .search-page-back-btn .material-symbols-rounded,
.search-page-topbar .search-page-settings-btn .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
    color: var(--md-sys-color-on-surface, #1d1b20);
}

.search-page-topbar .hub-search-wrapper {
    flex: 1;
    min-width: 0;
    margin: 0;
    position: relative;
}

.search-page-topbar .hub-search-bar {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    border-radius: 22px;
    background: var(--md-sys-color-surface-container-low, #F2F3FA);
    border: 1px solid var(--md-sys-color-outline-variant, #E2E8F0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.search-page-topbar .hub-search-bar:hover {
    background: var(--md-sys-color-surface-container, #ECEEF4);
    border-color: var(--md-sys-color-outline, #74777F);
}

.search-page-topbar .hub-search-bar:focus-within {
    border-color: var(--md-sys-color-primary, #0061A4);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    box-shadow: 0 1px 4px 1px rgba(0, 97, 164, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}

.search-page-topbar .hub-search-input {
    height: 42px;
    line-height: 42px;
    padding: 0;
    margin: 0;
    font-size: 16px; /* 阻止移动端 (iOS Safari / WebKit) 聚焦时页面自动放大 */
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    color: var(--md-sys-color-on-surface);
}



/* 搜索历史记录列表 (移动端与桌面端统一) */
.search-history-section {
    padding: 16px 8px 24px;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.search-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}

.search-history-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.search-history-clear-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.search-history-clear-btn:hover {
    color: var(--md-sys-color-error);
    background: var(--md-sys-color-error-container, #ffdad6);
}

.search-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.search-history-item:hover {
    background: var(--md-sys-color-surface-container-high);
}

.search-history-tag {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container-highest, #eceef4);
    color: var(--md-sys-color-outline);
    font-weight: 500;
    flex-shrink: 0;
}

.search-history-word {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
}

.search-history-meaning {
    font-size: 0.86rem;
    color: var(--md-sys-color-outline);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.search-history-del-one {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline);
    opacity: 0.45;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s;
}

.search-history-del-one:hover {
    opacity: 1;
    color: var(--md-sys-color-error);
}

/* 搜索多标签页体系 (Google MD3 风格) */
.hub-search-tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 0 10px;
    margin-top: 6px;
    margin-bottom: 8px;
    scrollbar-width: none;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.hub-search-tabs-row.has-results {
    border-bottom: none !important;
}

.hub-search-tabs-row::-webkit-scrollbar {
    display: none;
}

.hub-search-tabs-list {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px;
    margin: 0;
    width: 100%;
}
.hub-search-tabs-list::-webkit-scrollbar {
    display: none;
}

.hub-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 14px;
    height: 38px;
    border-radius: 19px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--md-sys-color-surface-container-low, #f2f3fa);
    color: var(--md-sys-color-on-surface-variant, #44474f);
    border: 1px solid var(--md-sys-color-outline-variant, #c4c7d0);
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
    position: relative;
    max-width: 220px;
    flex-shrink: 0;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.hub-search-tab:hover:not(.active) {
    background: var(--md-sys-color-surface-container-high, #e5e8f0);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline, #74777f);
}

.hub-search-tab.active {
    background: var(--md-sys-color-primary-container, #e0f2fe);
    color: var(--md-sys-color-on-primary-container, #001d36);
    border-color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
}

.hub-search-tab.active::before,
.hub-search-tab.active::after {
    display: none !important;
}

.hub-search-tab-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-outline, #74777f);
    opacity: 0.8;
    flex-shrink: 0;
}

.hub-search-tab.active .hub-search-tab-icon {
    color: var(--md-sys-color-primary, #0061a4);
    opacity: 1;
}

.hub-search-tab:hover:not(.active) .hub-search-tab-icon {
    color: var(--md-sys-color-on-surface, #191c20);
    opacity: 0.95;
}

.hub-search-tab-title {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-search-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    margin-left: 2px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.hub-search-tab:hover .hub-search-tab-close,
.hub-search-tab.active .hub-search-tab-close {
    opacity: 0.75;
}

.hub-search-tab-close:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08);
    color: var(--md-sys-color-error, #ba1a1a) !important;
}

/* 删除该按钮 */
.hub-search-tab-add-btn {
    display: none !important;
}

/* 释义词典源文本标签栏 (无胶囊外框，下划线指示条，MD3风格) */
.search-explains-tabs-row {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    padding: 2px 2px 6px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
.search-explains-tabs-row::-webkit-scrollbar {
    display: none;
}

.search-explains-text-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 2px 6px 2px;
    cursor: pointer;
    position: relative;
    user-select: none;
    white-space: nowrap;
    outline: none !important;
    transition: all 0.15s ease;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.search-explains-text-tab .tab-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant, #43474e);
    transition: color 0.15s ease, font-weight 0.15s ease;
    line-height: 1.3;
}

.search-explains-text-tab:hover .tab-label {
    color: var(--md-sys-color-on-surface, #191c20);
}

.search-explains-text-tab.active .tab-label {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
}

.search-explains-text-tab .tab-indicator {
    position: absolute;
    bottom: 0;
    left: 3px;
    right: 3px;
    height: 2px;
    background: var(--md-sys-color-primary, #0061a4);
    border-radius: 2px;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.search-explains-cat-btn {
    display: none !important;
}

.search-explains-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px 10px;
}


/* 统一释义卡片样式：每个词书/来源仅对应一个外框卡片，内部纵向排列各词性释义行 */
.unified-explain-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.unified-explain-card:hover {
    border-color: var(--md-sys-color-outline, #cbd5e1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.unified-card-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.unified-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unified-explain-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface, #1e293b);
}

.unified-explain-text {
    flex: 1;
    word-break: break-word;
}

.unified-source-badge {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.unified-source-badge.youdao {
    background: #e0f2fe;
    color: #0369a1;
}

.unified-source-badge.book {
    background: #f3e8ff;
    color: #6b21a8;
}

.unified-source-badge.pos {
    background: #f1f5f9;
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
    font-style: italic;
}

/* 顶部操作按钮（添加到词书与修改释义） */
.search-action-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    color: var(--md-sys-color-on-surface-variant, #475569);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.search-action-icon-btn .material-symbols-rounded {
    font-size: 19px !important;
    width: 19px;
    height: 19px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-action-icon-btn:hover {
    background: var(--md-sys-color-primary-container, #e0f2fe);
    color: var(--md-sys-color-primary, #0061a4);
    border-color: var(--md-sys-color-primary, #0061a4);
    transform: scale(1.05);
}

/* 释义词块与轻量虚线框交互 (Flat Dashed Chip Lanes) - 去除外层大框，词块自身独立虚线框且无背景色 */
.droppable-pos-dashed-box {
    border: 1.5px dashed transparent;
    border-radius: 10px;
    padding: 4px 6px;
    min-height: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    background: transparent;
    transition: all 0.15s ease;
}

.droppable-pos-dashed-box.drag-over-group {
    border-color: var(--md-sys-color-primary, #0061a4);
    background: rgba(0, 97, 164, 0.04);
}

.droppable-target-meaning-box {
    border: 1.5px dashed var(--md-sys-color-primary, #0061a4);
    border-radius: 12px;
    padding: 8px 12px;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: transparent;
    transition: all 0.15s ease;
}

.droppable-target-meaning-box.drag-over {
    background: rgba(0, 97, 164, 0.06);
    border-color: #0284c7;
}

.meaning-piece-normal {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 0.92rem;
    color: var(--md-sys-color-on-surface, #1e293b);
    line-height: 1.5;
    user-select: text;
}

.meaning-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: transparent !important;
    border: 1.5px dashed var(--md-sys-color-outline-variant, #cbd5e1);
    color: var(--md-sys-color-on-surface, #1e293b);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: grab;
    user-select: none;
    transition: all 0.15s ease;
}

.meaning-chip:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
}

.meaning-chip:active {
    cursor: grabbing;
}

.meaning-chip.dragging {
    opacity: 0.45;
    transform: scale(0.96);
}

/* 可勾选原本词块（添加到本地词书极简模式） */
.selectable-meaning-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: transparent !important;
    border: 1.5px dashed var(--md-sys-color-outline-variant, #cbd5e1);
    color: var(--md-sys-color-on-surface, #1e293b);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.selectable-meaning-chip:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
}

.selectable-meaning-chip.selected {
    border-style: solid;
    border-color: var(--md-sys-color-primary, #0061a4);
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 600;
}

.meaning-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.meaning-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.add-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px dashed var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-primary);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
}

.add-chip-btn:hover {
    background: rgba(0, 97, 164, 0.08);
}

/* MD3 风格自定义下拉选择框 (Custom Select Component) */
.md3-custom-select {
    position: relative;
    display: inline-block;
    user-select: none;
}

.md3-custom-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    height: 36px;
    min-width: 120px;
    background: var(--md-sys-color-surface-container-high, #edf2f7);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: var(--md-shape-m, 10px);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface, #0f172a);
    cursor: pointer;
    box-sizing: border-box;
    transition: all var(--md-motion-standard, 0.2s ease);
}

.md3-custom-select-trigger:hover {
    background: var(--md-sys-color-surface-container-highest, #e2e8f0);
    border-color: var(--md-sys-color-outline, #94a3b8);
}

.md3-custom-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: var(--md-shape-m, 12px);
    box-shadow: var(--md-elevation-2, 0 4px 14px rgba(0, 0, 0, 0.12));
    padding: 5px;
    z-index: 1200;
    display: none;
    animation: fadeIn 0.12s ease;
}

.md3-custom-select-menu.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.md3-custom-select-option {
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface, #1e293b);
    border-radius: var(--md-shape-s, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.12s;
    min-height: 38px;
    margin-bottom: 2px;
}

.md3-custom-select-option:last-child {
    margin-bottom: 0;
}

.md3-custom-select-option:hover {
    background: var(--md-sys-color-surface-container-high, #f1f5f9);
}

.md3-custom-select-option.selected {
    background: var(--md-sys-color-primary-container, #e0f2fe);
    color: var(--md-sys-color-on-primary-container, #0369a1);
    font-weight: 600;
}

/* 页面内嵌添加词块表单 (免弹窗) - 单行排版与自适应 */
.inline-add-chip-form {
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    animation: fadeIn 0.15s ease;
}

.inline-add-chip-form .md3-custom-select-trigger {
    min-width: 100px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.84rem;
}

.inline-add-chip-form .input-field {
    min-width: 0;
    flex: 1;
    height: 36px;
}

/* 相关链接 (Related Links - 最多展示5行，超过滑动条滚动) */
.search-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 234px;
    overflow-y: auto;
    padding: 2px 6px 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant, #C4C7D0) transparent;
}

.search-related-grid::-webkit-scrollbar {
    width: 6px;
}
.search-related-grid::-webkit-scrollbar-track {
    background: transparent;
}
.search-related-grid::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant, #C4C7D0);
    border-radius: 4px;
}
.search-related-grid::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline, #74777F);
}

.search-related-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: var(--md-sys-color-surface-container-low, #f2f3fa);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.search-related-card:hover {
    background: var(--md-sys-color-surface-container, #e8eaf0);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.search-related-word {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--md-sys-color-primary, #0061a4);
}

.search-related-meaning {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 词组发音图标 */
.search-phrase-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    cursor: pointer;
    transition: all 0.15s ease;
    color: #0284c7;
}

.search-phrase-voice-btn:hover {
    background: var(--md-sys-color-primary-container, #e0f2fe);
    transform: scale(1.05);
}

/* 复习词书筛选弹出小菜单 */
.hub-review-books-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-width: 92vw;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: var(--md-shape-l, 16px);
    box-shadow: var(--md-elevation-3);
    padding: 14px;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

/* 页面内嵌搜索结果卡片与排版 */
.hub-search-inpage-results {
    width: 100%;
    margin-top: 18px;
    margin-bottom: 24px;
    animation: fadeIn 0.2s ease;
    position: relative;
    z-index: 1;
}

.hub-search-inpage-results.has-active-tabs {
    margin-top: 0;
}

.search-results-query-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.search-result-main-card {
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (max-width: 640px) {
    .search-result-main-card {
        padding: 16px;
        border-radius: 16px;
    }
}

.search-word-header {
    border-bottom: 1px solid var(--md-sys-color-surface-container-high, #edf2f7);
    padding-bottom: 18px;
    margin-bottom: 20px;
}

.search-word-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.search-word-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--md-sys-color-on-surface, #0f172a);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
}

.search-word-pron-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-pron-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.88rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-pron-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: translateY(-1px);
}

.search-phonetic {
    font-family: 'Charis SIL', 'Doulos SIL', 'Times New Roman', serif;
    color: #475569;
    font-size: 0.88rem;
}

.search-section-block {
    margin-bottom: 24px;
}

.search-section-block:last-child {
    margin-bottom: 0;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.search-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #1e293b);
    line-height: 1.2;
}

.search-section-title .material-symbols-rounded {
    font-size: 20px !important;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

.search-section-title>span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

@keyframes folderExpandAnim {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 词书管理文件夹缩进与树状层级包含样式：对齐上方文件夹图标中轴线(24px) */
.settings-folder-expanded-list {
    margin-left: 24px;
    padding-left: 14px;
    border-left: 2px solid var(--md-sys-color-surface-container-highest, #cbd5e1);
    margin-top: 4px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: folderExpandAnim 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.search-youdao-explains {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 14px;
}

.search-explain-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1e293b;
}

.search-pos-tag {
    font-weight: 800;
    font-style: italic;
    color: var(--md-sys-color-primary, #0061a4);
    min-width: 24px;
    flex-shrink: 0;
}

.search-books-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 相关词组 (最多展示5行，超过滑动条滚动) */
.search-phrases-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 234px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant, #C4C7D0) transparent;
}

.search-phrases-list::-webkit-scrollbar {
    width: 6px;
}
.search-phrases-list::-webkit-scrollbar-track {
    background: transparent;
}
.search-phrases-list::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant, #C4C7D0);
    border-radius: 4px;
}
.search-phrases-list::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline, #74777F);
}

.search-book-item {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.15s;
}

.search-book-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.search-book-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.search-book-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: #0f172a;
}

.search-book-meaning {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.search-phrase-item {
    padding: 10px 14px;
    background: var(--md-sys-color-surface-container-low, #f2f3fa);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.search-phrase-item:hover {
    background: var(--md-sys-color-surface-container, #e8eaf0);
    transform: translateY(-1px);
}

.search-phrase-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--md-sys-color-on-surface, #0f172a);
    margin-bottom: 3px;
}

.phrase-keyword-highlight {
    background: transparent !important;
    color: var(--md-sys-color-primary, #0061a4) !important;
    font-weight: 700;
    border: none !important;
    padding: 0 !important;
}

.search-phrase-meaning {
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface-variant, #334155);
    line-height: 1.5;
}

/* 简化文件夹药丸组件样式（参考图三与图四） */
.settings-folder-pill {
    background: #f1f5f9;
    border: 1px solid #dce4ee;
    border-radius: 22px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.settings-folder-pill:hover {
    background: #e9eef5;
    border-color: #cbd5e1;
}

.settings-folder-pill-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-folder-pill-icon {
    font-size: 22px;
    color: #0284c7;
}

.settings-folder-pill-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: #0f172a;
}

.settings-folder-pill-badge {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 3px 10px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.78rem;
}

.settings-folder-pill-chevron {
    color: #64748b;
    font-size: 20px;
    transition: transform 0.2s ease;
}

.settings-folder-pill.expanded .settings-folder-pill-chevron {
    transform: rotate(90deg);
}

.settings-folder-expanded-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    margin-bottom: 8px;
}


/* 隐藏所有 icon 图标选项（在缺少离线字体时触发） */
body.hide-all-icons .material-symbols-rounded {
    display: none !important;
}

/* iOS Safari 添加到主屏幕提示横幅与弹窗 */
.ios-pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 480px;
    background: var(--md-sys-color-surface-container-highest);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-3);
    border-radius: var(--md-shape-l);
    padding: 14px 16px;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 听写输入框排布与悬浮字符数徽标 */
.dictation-slots-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    width: 100%;
    margin: 12px 0 16px;
}

.dictation-slot-item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.dictation-slot-input {
    height: 44px;
    border-radius: var(--md-shape-m);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 1.08rem;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.dictation-slot-input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 97, 164, 0.15);
    background: var(--md-sys-color-surface);
}

.dictation-slot-block-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface-variant);
    padding: 0 4px;
    user-select: none;
}

/* 词书管理文件夹无外层大卡片包装的轻量样式 */
.settings-book-group-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px;
}

/* 看答案按钮 MD3 扁平精美化样式 */
.single-next-btn.show-answer-mode {
    background: var(--md-sys-color-secondary-container, #DCE2F9) !important;
    color: var(--md-sys-color-on-secondary-container, #151D2C) !important;
    border: 1px solid rgba(0, 97, 164, 0.2) !important;
    box-shadow: none !important;
}

.single-next-btn.show-answer-mode:hover {
    background: #ced6f0 !important;
}

/* 词书进度条与待复习徽标 */
.book-progress-mini {
    width: 100%;
    height: 4px;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 5px;
}

.book-progress-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--md-sys-color-primary, #0061a4), #38bdf8);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Material Symbols Rounded 样式规范 */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    user-select: none;
    flex-shrink: 0;
    vertical-align: middle;
    overflow: hidden;
}

.material-symbols-rounded.filled {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--md-shape-full);
    border: none;
    cursor: pointer;
    transition: all var(--md-motion-standard);
    gap: 8px;
    white-space: nowrap;
    touch-action: manipulation;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
    text-align: center;
}

.btn .material-symbols-rounded {
    font-size: 19px;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: -1px;
}

.btn-sm {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 0.85rem;
    border-radius: var(--md-shape-full);
    gap: 6px;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}

.btn-sm .material-symbols-rounded {
    font-size: 17px;
    width: 17px;
    height: 17px;
    margin-top: -1px;
}

.btn-touch-large {
    min-height: 50px;
    font-size: 1rem;
    padding: 0 24px;
    gap: 8px;
}

.btn-touch-large .material-symbols-rounded {
    font-size: 21px;
    width: 21px;
    height: 21px;
    margin-top: -1px;
}

.btn-label-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    vertical-align: middle;
}

.btn-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--md-shape-full);
    background: rgba(16, 28, 43, 0.12);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

.btn-hint-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

.btn:active {
    transform: scale(0.96);
}

.btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    filter: grayscale(0.85);
}

.btn-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-elevation-1);
}

.btn-filled:hover {
    filter: brightness(1.06);
    box-shadow: var(--md-elevation-2);
}

.btn-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn-tonal:hover {
    filter: brightness(0.96);
}

.btn-outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1.5px solid var(--md-sys-color-outline);
}

.btn-outlined:hover {
    background-color: rgba(0, 97, 164, 0.05);
    border-color: var(--md-sys-color-primary);
}

.btn-danger {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.btn-danger:hover {
    filter: brightness(0.95);
}

.account-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: var(--md-shape-l);
    background: var(--md-sys-color-surface-container-low);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.account-item-card:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.account-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

/* 头像更换悬浮相机图标控制 */
#me-user-avatar-wrap {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

#me-user-avatar-edit-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: rgba(0, 0, 0, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px);
}

#me-user-avatar-wrap:hover #me-user-avatar-edit-hint {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


.account-del-btn {
    opacity: 0.4;
    padding: 4px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    color: var(--md-sys-color-on-surface);
}

.account-del-btn:hover {
    opacity: 1;
    color: var(--md-sys-color-error);
    background: var(--md-sys-color-error-container);
}

.app-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 6px 2px;
    flex-wrap: wrap;
    gap: 10px;
}

.hub-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 14px 0 4px;
    border-radius: var(--md-shape-full, 9999px);
    background: var(--md-sys-color-surface-container-high, #ecefe7);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
}

.hub-user-pill:hover {
    background: var(--md-sys-color-surface-container-highest, #e2e8f0);
    transform: translateY(-1px);
}

.hub-mailbox-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border-radius: var(--md-shape-full, 9999px);
    background: var(--md-sys-color-surface-container-high, #ecefe7);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    color: var(--md-sys-color-on-surface-variant, #475569);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
    outline: none;
}

.hub-mailbox-btn:hover {
    background: var(--md-sys-color-surface-container-highest, #e2e8f0);
    transform: translateY(-1px);
    color: var(--md-sys-color-primary, #006495);
}

.hub-mailbox-btn .material-symbols-rounded {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#hub-mailbox-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    border: 2px solid var(--md-sys-color-surface, #ffffff);
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
}

#btn-hub-login {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--md-shape-full, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    box-sizing: border-box;
    vertical-align: middle;
}

#btn-hub-login .material-symbols-rounded {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hub-user-avatar-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-primary, #0061a4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 16px;
    flex-shrink: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--md-shape-full);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.badge-p1 {
    background: var(--p1-sys-container);
    color: var(--p1-sys-on-container);
}

.badge-p2 {
    background: var(--p2-sys-container);
    color: var(--p2-sys-on-container);
}

.badge-online {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: var(--md-sys-color-surface-container);
    padding: 14px 18px;
    border-radius: var(--md-shape-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    line-height: 1.1;
}

#result-details .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 320px;
    margin: 16px auto;
}

.modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.mode-card,
#hub-online-players-card,
.leaderboard-entry-card,
.hub-activity-entry-card {
    background: var(--md-sys-color-surface, #F8F9FF);
    border-radius: var(--md-shape-xl, 24px);
    border: 1px solid var(--md-sys-color-outline-variant, #E2E8F0);
    box-shadow: none;
    transition: all var(--md-motion-expressive);
}

#hub-online-players-card {
    margin-top: 14px;
    margin-bottom: 12px !important;
}

#hub-activity-leaderboard-row {
    margin-top: 0 !important;
    gap: 12px;
}

#hub-activity-leaderboard-row .card {
    margin-bottom: 0 !important;
}

.mode-card {
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.mode-card:hover,
#hub-online-players-card:hover {
    background: var(--md-sys-color-surface-container-low, #F2F3FA) !important;
    border-color: var(--md-sys-color-primary, #0061A4) !important;
    box-shadow: 0 6px 20px rgba(0, 97, 164, 0.08);
    transform: translateY(-3px);
}

.leaderboard-entry-card:hover,
.hub-activity-entry-card:hover {
    background: var(--md-sys-color-surface-container-low, #F2F3FA) !important;
    border-color: var(--md-sys-color-primary, #0061A4) !important;
    box-shadow: 0 6px 20px rgba(0, 97, 164, 0.08);
}

.leaderboard-entry-card:active,
.hub-activity-entry-card:active {
    transform: scale(0.995);
}

.leaderboard-entry-card .entry-card-arrow,
.hub-activity-entry-card .entry-card-arrow,
.activity-item-card .entry-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.leaderboard-entry-card:hover .entry-card-arrow,
.hub-activity-entry-card:hover .entry-card-arrow,
.activity-item-card:hover .entry-card-arrow {
    transform: translateX(4px);
}

.activity-item-card:hover {
    background: var(--md-sys-color-surface-container-low, #F2F3FA) !important;
    border-color: var(--md-sys-color-primary, #0061A4) !important;
    box-shadow: 0 6px 20px rgba(0, 97, 164, 0.08);
}

/* 活动详情弹窗及任务卡片优化 (自适应移动端与宽屏) */
.activity-detail-modal-card {
    box-sizing: border-box;
}

.activity-task-card {
    padding: 12px 14px;
    border-radius: var(--md-shape-m);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.activity-task-card:hover {
    border-color: var(--md-sys-color-outline);
}

.activity-task-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.activity-task-card-title {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.activity-task-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-all;
}

.activity-task-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}

.activity-task-hint-text {
    font-size: 0.75rem;
    color: var(--md-sys-color-outline);
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .activity-detail-modal-card {
        padding: 16px 14px !important;
        border-radius: 20px !important;
    }
    .activity-task-card {
        padding: 10px 12px;
        gap: 6px;
    }
    .activity-task-card-title {
        font-size: 0.9rem;
    }
    .activity-task-reward-pill {
        font-size: 0.75rem;
        padding: 2px 7px;
    }
    .activity-task-card-footer {
        padding-top: 6px;
    }
}

.mode-card-btn-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.mode-card-btn-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.mode-card .btn {
    min-width: 0;
    padding: 0 8px;
    font-size: 0.86rem;
    min-height: 40px;
    height: 40px;
    gap: 5px;
    white-space: nowrap;
    box-sizing: border-box;
}

.mode-card .btn .material-symbols-rounded {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mode-card .btn .btn-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mode-card .btn .btn-count-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.75rem;
    margin-left: 2px;
}

@media (max-width: 320px) {

    .mode-card-btn-row,
    .mode-card-btn-row-3 {
        grid-template-columns: 1fr;
    }
}

/* MD3 Filter Chips / Segments */
.rule-group {
    margin-bottom: 18px;
}

.rule-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 8px;
    display: block;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.md3-chip {
    padding: 7px 16px;
    border-radius: var(--md-shape-s);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.md3-chip:hover {
    background: var(--md-sys-color-surface-container);
}

.md3-chip.selected {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    font-weight: 700;
}

.md3-chip.disabled {
    pointer-events: none;
    opacity: 0.8;
}

/* MD3 滑动开关 */
.md3-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 52px;
    height: 32px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.md3-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
}

.md3-switch-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--md-sys-color-surface-container-highest);
    border: 2px solid var(--md-sys-color-outline);
    border-radius: 32px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.md3-switch-thumb {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 16px;
    height: 16px;
    background-color: var(--md-sys-color-outline);
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, width 0.15s ease, height 0.15s ease, top 0.15s ease, left 0.15s ease;
}

.md3-switch:hover .md3-switch-track {
    border-color: var(--md-sys-color-on-surface);
}

.md3-switch input:checked+.md3-switch-track {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.md3-switch input:checked+.md3-switch-track .md3-switch-thumb,
.md3-switch input:checked~.md3-switch-track .md3-switch-thumb,
.md3-switch input:checked~.md3-switch-thumb {
    transform: translateX(20px);
    background-color: var(--md-sys-color-on-primary);
    width: 20px;
    height: 20px;
    top: 4px;
    left: 4px;
}

.md3-switch:active .md3-switch-thumb {
    width: 22px;
}

.md3-switch input:focus-visible+.md3-switch-track {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Google Material Design 3 (MD3) Checkbox
   ========================================================================== */
.md3-checkbox,
input[type="checkbox"].md3-checkbox,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"],
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--md-sys-color-outline, #79747E);
    border-radius: 2px;
    background-color: transparent;
    display: inline-grid;
    place-content: center;
    position: relative;
    outline: none;
    box-sizing: border-box;
    transition: background-color 0.18s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.18s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.18s cubic-bezier(0.2, 0, 0, 1),
                transform 0.12s cubic-bezier(0.2, 0, 0, 1);
    flex-shrink: 0;
    vertical-align: middle;
}

.md3-checkbox:hover,
input[type="checkbox"].md3-checkbox:hover,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:hover,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:hover {
    border-color: var(--md-sys-color-on-surface, #1D1B20);
    box-shadow: 0 0 0 7px rgba(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.06);
}

.md3-checkbox:active,
input[type="checkbox"].md3-checkbox:active,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:active,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:active {
    transform: scale(0.92);
}

.md3-checkbox:checked,
input[type="checkbox"].md3-checkbox:checked,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:checked,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:checked {
    background-color: var(--md-sys-color-primary, #0061A4);
    border-color: var(--md-sys-color-primary, #0061A4);
}

.md3-checkbox:checked:hover,
input[type="checkbox"].md3-checkbox:checked:hover,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:checked:hover,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:checked:hover {
    box-shadow: 0 0 0 7px rgba(var(--md-sys-color-primary-rgb, 0, 97, 164), 0.12);
}

.md3-checkbox::after,
input[type="checkbox"].md3-checkbox::after,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]::after,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--md-sys-color-on-primary, #ffffff);
    border-bottom: 2px solid var(--md-sys-color-on-primary, #ffffff);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform 0.16s cubic-bezier(0.05, 0.7, 0.1, 1.0);
    margin-top: -2px;
    box-sizing: border-box;
}

.md3-checkbox:checked::after,
input[type="checkbox"].md3-checkbox:checked::after,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:checked::after,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:checked::after {
    transform: rotate(-45deg) scale(1);
}

.md3-checkbox:focus-visible,
input[type="checkbox"].md3-checkbox:focus-visible,
input[type="checkbox"][style*="accent-color:var(--md-sys-color-primary)"]:focus-visible,
input[type="checkbox"][style*="accent-color: var(--md-sys-color-primary)"]:focus-visible {
    box-shadow: 0 0 0 8px rgba(var(--md-sys-color-primary-rgb, 0, 97, 164), 0.18);
}

/* 联机竞技场 UI */
.arena-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 680px;
    /* 统一宽度为 680px，居中对齐 */
    margin: 0 auto;
    width: 100%;
}

/* ==========================================================================
   对决顶栏卡片与自适应布局 (优化窄屏/移动端)
   ========================================================================== */
.arena-head-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 14px 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.arena-player-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.arena-player-box.left {
    justify-content: flex-start;
}

.arena-player-box.right {
    justify-content: flex-end;
}

.arena-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.arena-avatar-circle.p1 {
    background: var(--p1-sys-container);
    color: var(--p1-sys-color);
    border: 2px solid var(--p1-sys-color);
}

.arena-avatar-circle.p2 {
    background: var(--p2-sys-container);
    color: var(--p2-sys-color);
    border: 2px solid var(--p2-sys-color);
}

.arena-player-info-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.arena-player-info-meta.left {
    align-items: flex-start;
    text-align: left;
}

.arena-player-info-meta.right {
    align-items: flex-end;
    text-align: right;
}

.arena-player-name-text {
    font-size: 0.86rem;
    font-weight: 700;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface);
}

.arena-player-score {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0 4px;
    flex-shrink: 0;
}

.arena-center-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 120px;
    margin: 0 8px;
}

/* 窄屏/移动端专属两层对称布局 */
@media (max-width: 640px) {
    .arena-head-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "left-player right-player"
            "center-gauge center-gauge";
        row-gap: 10px;
        column-gap: 8px;
        padding: 12px 14px;
    }

    .arena-player-box.left {
        grid-area: left-player;
        justify-content: flex-start;
    }

    .arena-player-box.right {
        grid-area: right-player;
        justify-content: flex-end;
    }

    .arena-center-gauge {
        grid-area: center-gauge;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 0 0 !important;
    }

    .arena-avatar-circle {
        width: 38px;
        height: 38px;
    }

    .arena-player-score {
        font-size: 1.6rem;
    }

    .arena-player-name-text {
        max-width: 110px; /* 空间充足，完整显示 游客_xxxx */
        font-size: 0.84rem;
    }

    .local-tug-track {
        height: 14px; /* 拔河条高度更加轻巧精炼 */
    }

    #arena-tug-rule-summary,
    #arena-tug-timer {
        font-size: 0.78rem !important;
    }
}

#snakeCanvas,
#localSnakeCanvas,
#aiSnakeCanvas {
    border-radius: 50%;
    background: var(--md-sys-color-surface-container-lowest);
    box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
}

.arena-quiz-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 24px 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    min-height: auto;
    position: relative;
}

.word-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    text-align: center;
    word-break: break-word;
    margin-top: 4px;
}

.phone-display {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    margin-bottom: 20px;
    min-height: 22px;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .arena-quiz-card {
        width: 100%;
        box-sizing: border-box;
    }
}

.option-btn {
    width: 100%;
    min-height: 56px;
    padding: 12px 18px;
    background: var(--md-sys-color-surface-container-low);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    color: var(--md-sys-color-on-surface);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--md-motion-standard);
}

.option-btn:hover:not(:disabled) {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

.option-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.option-btn.correct {
    background-color: var(--md-sys-color-success-container) !important;
    border-color: var(--md-sys-color-success) !important;
    color: var(--md-sys-color-on-success-container) !important;
    font-weight: 700;
}

.option-btn.wrong {
    background-color: var(--md-sys-color-error-container) !important;
    border-color: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error-container) !important;
    font-weight: 700;
}

.cooldown-banner {
    display: none;
    width: 100%;
    max-width: 520px;
    margin: 14px auto 0;
    padding: 12px 18px;
    border-radius: var(--md-shape-l);
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 1.5px solid var(--md-sys-color-error);
    box-sizing: border-box;
}

.cooldown-banner.active {
    display: block;
}

/* Toast / Snackbar */
.snackbar {
    position: fixed;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: min(90vw, 420px);
    background: #313033;
    color: #F4EFF4;
    padding: 12px 22px;
    border-radius: var(--md-shape-full);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--md-elevation-3);
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 0.22s cubic-bezier(0.2, 0, 0, 1), transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
    box-sizing: border-box;
    text-align: center;
}

.snackbar.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@media (min-width: 769px) {
    .snackbar {
        bottom: 32px;
    }
}

.particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    animation: fly 0.65s cubic-bezier(0, 0.7, 0.3, 1) forwards;
}

@keyframes fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.6);
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(1.3);
    }
}

/* 学习练习模式样式 */
.single-mode-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding-top: 6px;
}

.single-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    width: 100%;
}

.single-mode-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    margin: 0;
}

.single-btn-exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 1.5px solid transparent;
    border-radius: var(--md-shape-full);
    padding: 0 14px;
    min-height: 36px;
    height: 36px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-motion-standard);
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}

.single-btn-exit .material-symbols-rounded {
    font-size: 18px;
    width: 18px;
    height: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.single-btn-exit:hover {
    filter: brightness(0.96);
}

.single-btn-exit:active {
    transform: scale(0.96);
}

.single-quiz-card {
    background: #ffffff;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 32px 34px 34px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.single-badge-row {
    margin-bottom: 6px;
    text-align: left;
}

/* 顶部首行对齐容器：弹性流式换行，狭窄时 ◇◇◇◇◇ 自动下沉到第二行 */
.single-top-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    margin-bottom: 12px;
}

.single-top-header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    flex: 1;
    min-width: 0;
}

.mastery-stars-bar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .mastery-stars-bar {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 2px;
    }
}

/* 统一的高考3500及对决词库徽标样式，与账号、实词胶囊尺寸一致 */
.single-book-badge,
.arena-book-badge,
#arena-book-badge,
#local-book-badge-p1,
#local-book-badge-p2,
#dictation-book-badge,
#shici-book-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    background-color: #ffeedb !important;
    color: #c45716 !important;
    border-radius: var(--md-shape-full) !important;
    font-size: 0.88rem !important;
    /* 与账号及实词字词字号一致 */
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box;
    border: none !important;
    vertical-align: middle;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: default !important;
    pointer-events: none;
}

.local-player-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--md-shape-full);
    font-size: 0.88rem;
    font-weight: 700;
    box-sizing: border-box;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.shici-word-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-shape-full);
    font-size: 0.88rem !important;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    border: none;
    vertical-align: middle;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.badge-tag-secondary,
#dictation-type-badge {
    background-color: var(--md-sys-color-primary-container, #d1e4ff);
    color: var(--md-sys-color-on-primary-container, #001d36);
}

#dictation-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: var(--md-shape-full) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box;
    border: none !important;
    vertical-align: middle;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.single-badge-row .badge,
.dictation-badge-row .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--md-shape-full);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.single-word-display {
    font-size: 2.85rem;
    font-weight: 800;
    color: #111827;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 4px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.single-phone-display {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
    color: #64748b;
    text-align: center;
    margin-bottom: 28px;
    min-height: 26px;
}

.single-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
}

.single-opt-btn {
    width: 100%;
    min-height: 58px;
    padding: 14px 20px;
    border-radius: 14px;
    background: #f1f4f9;
    border: 1.5px solid #dce2eb;
    color: #1e293b;
    font-size: 0.96rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 10px;
    transition: all 0.16s ease;
    font-family: inherit;
}

.single-opt-btn:hover:not(:disabled) {
    background: #e7ecf4;
    border-color: #cbd5e1;
}

.single-opt-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.single-opt-btn .opt-word {
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    display: inline-block;
    margin-right: 2px;
}

.single-opt-btn .opt-trans {
    font-size: 0.94rem;
    color: inherit;
    opacity: 0.95;
}

.single-opt-btn.wrong {
    background-color: #feeceb !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
    box-shadow: 0 0 0 1px #f87171;
}

.single-opt-btn.correct {
    background-color: #def7ec !important;
    border-color: #4ade80 !important;
    color: #046c4e !important;
    box-shadow: 0 0 0 1px #4ade80;
}

.single-next-btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 24px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: all var(--md-motion-standard);
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
    text-align: center;
    box-shadow: var(--md-elevation-1);
}

.single-next-btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--md-elevation-2);
}

.single-next-btn:active {
    transform: scale(0.98);
}

.single-next-btn.show-answer-mode {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-primary);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    box-shadow: none;
}

.single-next-btn.show-answer-mode:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
}

/* 词组拼装题型 */
.phrase-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    margin: 6px 0 16px;
}

.phrase-trans-card {
    text-align: center;
    padding: 14px 18px;
    border-radius: var(--md-shape-m);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.phrase-trans-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    margin-bottom: 4px;
}

.phrase-slots-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-l);
    border: 1px dashed var(--md-sys-color-outline-variant);
    margin: 4px 0;
}

.phrase-slot {
    min-width: 64px;
    height: 42px;
    padding: 0 10px;
    border-bottom: 3px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-low);
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    position: relative;
    transition: all var(--md-motion-standard);
    user-select: none;
    white-space: nowrap;
}

.phrase-slot.empty {
    border-bottom-color: var(--md-sys-color-outline-variant);
    color: transparent;
    cursor: default;
}

.phrase-slot.empty::after {
    content: '____';
    color: var(--md-sys-color-outline);
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.5;
}

.phrase-slot.filled:hover {
    background: var(--md-sys-color-error-container);
    border-bottom-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error-container);
}

.phrase-slot.correct {
    border-bottom-color: var(--md-sys-color-success) !important;
    background: var(--md-sys-color-success-container) !important;
    color: var(--md-sys-color-on-success-container) !important;
}

.phrase-slot.wrong {
    border-bottom-color: var(--md-sys-color-error) !important;
    background: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
    animation: shake 0.35s ease;
}

.phrase-slot.fixed {
    border-bottom: 3px solid var(--md-sys-color-secondary) !important;
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    cursor: default !important;
    pointer-events: none;
    opacity: 0.95;
    box-shadow: none !important;
}

.phrase-slot.fixed:hover {
    background: var(--md-sys-color-secondary-container) !important;
    border-bottom-color: var(--md-sys-color-secondary) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

.phrase-bank-card {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    padding: 16px;
}

.phrase-bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 12px;
}

.phrase-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.phrase-word-chip {
    padding: 9px 18px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--md-motion-standard);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.phrase-word-chip:hover:not(.used):not(:disabled) {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    transform: translateY(-2px);
    box-shadow: var(--md-elevation-2);
}

.phrase-word-chip:active:not(.used):not(:disabled) {
    transform: scale(0.96);
}

.phrase-word-chip.used {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--md-sys-color-surface-container-high);
    border-style: dashed;
    pointer-events: none;
}

.phrase-comparison-card {
    margin: 6px 0 8px;
    padding: 8px 12px;
    border-radius: var(--md-shape-m);
    background: var(--md-sys-color-surface-container-lowest);
    border: 1.5px solid var(--md-sys-color-primary);
    box-shadow: var(--md-elevation-1);
    animation: fadeIn 0.2s ease;
}

.phrase-comparison-card.wrong-state {
    border-color: var(--md-sys-color-error);
    background: #FFF8F7;
}

.phrase-compare-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.phrase-compare-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--md-shape-full);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.phrase-compare-badge.correct {
    background: #E8F5E9;
    color: #146C2E;
}

.phrase-compare-badge.wrong {
    background: #FFEBEE;
    color: #B3261E;
}

.phrase-compare-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.phrase-compare-text.correct {
    color: var(--md-sys-color-primary);
}

.btn-clear-phrase {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-full);
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--md-motion-standard);
}

.btn-clear-phrase:hover:not(:disabled) {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border-color: var(--md-sys-color-error);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(24px, 4vh) 16px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    animation: modalFadeIn 0.2s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-card {
    background: #ffffff;
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    max-height: min(640px, 80vh);
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    box-shadow: var(--md-elevation-3);
    border: 1px solid var(--md-sys-color-outline-variant);
    transform: scale(0.95);
    overflow: hidden;
    box-sizing: border-box;
}

.modal-overlay.active .modal-card {
    animation: modalPopIn 0.2s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes modalPopIn {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 16px 14px 4px;
    margin: 8px 0;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.modal-body::-webkit-scrollbar,
#mistakes-container::-webkit-scrollbar,
.book-selection-list::-webkit-scrollbar,
.room-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track,
#mistakes-container::-webkit-scrollbar-track,
.book-selection-list::-webkit-scrollbar-track,
.room-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb,
#mistakes-container::-webkit-scrollbar-thumb,
.book-selection-list::-webkit-scrollbar-thumb,
.room-chat-messages::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 9999px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
#mistakes-container::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    flex-shrink: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--md-shape-full);
    transition: background 0.15s;
}

.modal-close-btn:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.modal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.book-selection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 380px;
    padding-right: 4px;
    margin-bottom: 18px;
}

.btn-reveal-ten-sec {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: 1.5px solid var(--md-sys-color-error);
    border-radius: var(--md-shape-full);
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--md-motion-standard);
    margin-top: 6px;
}

.btn-reveal-ten-sec:hover:not(:disabled) {
    background: #FFDAD6;
    transform: translateY(-1px);
    box-shadow: var(--md-elevation-1);
}

.btn-reveal-ten-sec:active:not(:disabled) {
    transform: scale(0.97);
}

/* 错词复问徽标规范：与左侧词书徽标严格等高 30px，等圆角、等内边距，去除硬边框 */
.retest-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    padding: 0 14px;
    background-color: #ffeedb;
    /* 或用 #FFF3E0，不加外边框 */
    color: #c45716;
    /* 或用 #B26A00 */
    border-radius: var(--md-shape-full);
    font-size: 0.82rem;
    /* 与左侧完全一致 */
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    border: none !important;
    /* 必须去掉边框，否则 1px 边框会导致外尺寸多出 2px */
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
    animation: popIn 0.3s ease;
}

/* Wordle 单词谜题 MD3 样式 */
.riddle-wrapper {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.riddle-chip-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #F3EDF7;
    color: #4F378B;
    border: 1px solid #E8DEF8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    flex-shrink: 1;
    line-height: 1;
}

.riddle-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.riddle-top-actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .riddle-top-title {
        font-size: 1.15rem;
    }

    .riddle-chip-tag {
        max-width: 80px;
        padding: 0 6px;
        font-size: 0.72rem;
    }
}

.riddle-top-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 16px;
    gap: 8px;
    box-sizing: border-box;
}

.riddle-top-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.riddle-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.riddle-top-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.nav-back-btn,
.md3-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface, #1d1b20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.nav-back-btn:hover,
.md3-icon-btn:hover {
    background: rgba(224, 226, 233, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nav-back-btn:active,
.md3-icon-btn:active {
    transform: scale(0.92);
    background: rgba(200, 204, 215, 0.7);
}

.nav-back-btn .material-symbols-rounded,
.md3-icon-btn .material-symbols-rounded {
    font-size: 20px;
    color: var(--md-sys-color-on-surface, #1d1b20);
    line-height: 1;
}

.riddle-info-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    padding: 8px 14px;
    margin-bottom: 12px;
    box-shadow: var(--md-elevation-1);
    flex-wrap: wrap;
    gap: 8px;
}

.riddle-status-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.riddle-status-chip {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-highest);
    padding: 3px 10px;
    border-radius: var(--md-shape-full);
}

.riddle-legend-group {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
}

.riddle-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.legend-badge {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.legend-badge.correct {
    background: #146C2E;
}

.legend-badge.present {
    background: #B26A00;
}

.legend-badge.absent {
    background: #535F70;
}

.riddle-hint-box {
    width: 100%;
    background: #F3EDF7;
    border: 1.5px dashed #4F378B;
    border-radius: var(--md-shape-l);
    padding: 10px 16px;
    margin-bottom: 12px;
    animation: popIn 0.3s ease;
    box-shadow: var(--md-elevation-1);
}

.riddle-hint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.riddle-hint-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4F378B;
}

.riddle-hint-step-indicator {
    font-size: 0.75rem;
    color: #49454F;
}

.riddle-hint-content {
    font-size: 0.92rem;
    color: #1D1B20;
    line-height: 1.4;
}

.riddle-hint-letters {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 5px;
    color: #4F378B;
}

.riddle-result-box {
    width: 100%;
    background: var(--md-sys-color-surface-container-low);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    padding: 14px 18px;
    margin-bottom: 14px;
    text-align: center;
    box-shadow: var(--md-elevation-1);
    animation: popIn 0.35s ease;
}

:root {
    --riddle-tile-size: 52px;
    --riddle-tile-gap: 8px;
    --riddle-tile-font-size: 1.5rem;
}
@media (max-width: 480px) {
    :root {
        --riddle-tile-size: 44px;
        --riddle-tile-gap: 6px;
        --riddle-tile-font-size: 1.3rem;
    }
}
@media (max-width: 400px) {
    :root {
        --riddle-tile-size: 38px;
        --riddle-tile-gap: 5px;
        --riddle-tile-font-size: 1.15rem;
    }
}
@media (max-width: 350px) {
    :root {
        --riddle-tile-size: 33px;
        --riddle-tile-gap: 4px;
        --riddle-tile-font-size: 1.0rem;
    }
}

.riddle-grid {
    display: flex;
    flex-direction: column;
    gap: var(--riddle-tile-gap);
    margin: 10px 0 16px;
    align-items: center;
}

.riddle-row,
.riddle-draft-tiles {
    display: flex;
    gap: var(--riddle-tile-gap);
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.riddle-tile,
.riddle-draft-tile {
    width: var(--riddle-tile-size);
    height: var(--riddle-tile-size);
    border: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: var(--md-shape-m, 12px);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    color: var(--md-sys-color-on-surface);
    font-size: var(--riddle-tile-font-size);
    font-weight: 800;
    line-height: 1;
    text-transform: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: border-color 0.15s, background-color 0.2s, box-shadow 0.15s;
    box-sizing: border-box;
    padding: 0;
    outline: none;
    font-family: inherit;
}

input.riddle-tile,
input.riddle-draft-tile {
    user-select: auto;
    -webkit-user-select: auto;
}

.riddle-tile:focus,
.riddle-tile.active,
.riddle-draft-tile:focus,
.riddle-draft-tile.active-draft-tile {
    border-color: var(--md-sys-color-primary, #0061a4) !important;
    box-shadow: 0 0 0 2.5px rgba(0, 97, 164, 0.3) !important;
    background-color: var(--md-sys-color-surface-container-lowest, #ffffff);
}

.riddle-tile.correct {
    background-color: #146C2E !important;
    border-color: #146C2E !important;
    color: #FFFFFF !important;
}

.riddle-tile.present {
    background-color: #B26A00 !important;
    border-color: #B26A00 !important;
    color: #FFFFFF !important;
}

.riddle-tile.absent {
    background-color: #535F70 !important;
    border-color: #535F70 !important;
    color: #FFFFFF !important;
}

.riddle-tile.flip {
    animation: tileFlip 0.45s ease forwards;
}

@keyframes tileFlip {
    0% {
        transform: rotateX(0);
    }

    50% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.88);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.riddle-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 500px;
    margin: 12px auto 0;
    user-select: none;
}

.riddle-key-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    width: 100%;
}

.riddle-key {
    min-height: 46px;
    flex: 1;
    max-width: 44px;
    border-radius: var(--md-shape-s);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: all var(--md-motion-standard);
}

.riddle-key:active {
    transform: scale(0.92);
}

.riddle-key.wide {
    flex: 1.6;
    max-width: 66px;
    font-size: 0.8rem;
}

.riddle-key.correct {
    background: #146C2E !important;
    color: #FFF !important;
    border-color: #146C2E !important;
}

.riddle-key.present {
    background: #B26A00 !important;
    color: #FFF !important;
    border-color: #B26A00 !important;
}

.riddle-key.absent {
    background: #535F70 !important;
    color: #FFF !important;
    border-color: #535F70 !important;
    opacity: 0.6;
}

@media (max-width: 600px) {
    body {
        padding: 10px 10px 24px;
    }

    /* 移动端单行添加词块、复习词书切换与词书缩进适配 */
    .inline-add-chip-form {
        padding: 6px 8px;
        gap: 6px;
    }

    .inline-add-chip-form .md3-custom-select-trigger {
        min-width: 80px;
        padding: 0 8px;
        font-size: 0.8rem;
    }

    .inline-add-chip-form .btn-sm {
        padding: 0 8px !important;
        font-size: 0.8rem;
    }

    #single-review-book-btn {
        max-width: 140px;
        padding: 0 8px;
    }

    #single-review-active-book-title {
        max-width: 75px;
    }

    .settings-folder-expanded-list {
        margin-left: 24px;
        padding-left: 12px;
    }

    .card {
        padding: 18px 20px;
    }

    .word-display {
        font-size: 2.1rem;
    }

    .arena-quiz-card,
    .local-player-arena {
        min-height: 440px;
        padding: 16px 14px;
    }

    .option-btn {
        min-height: 52px;
        font-size: 0.92rem;
        padding: 10px 14px;
    }

    .arena-head-card {
        padding: 12px 10px;
        gap: 8px;
    }

    .arena-center-gauge {
        margin: 0 8px;
    }

    .arena-player-box {
        min-width: 68px;
    }

    .arena-player-name {
        max-width: 78px;
        font-size: 0.85rem;
    }

    .arena-player-score,
    .local-player-score {
        font-size: 1.5rem;
    }

    #arena-tug-rule-summary {
        font-size: 0.72rem;
        white-space: nowrap;
    }

    #arena-tug-timer {
        font-size: 0.82rem;
    }

    .single-quiz-card {
        padding: 24px 18px 24px;
        min-height: 420px;
        border-radius: 22px;
    }

    .single-word-display {
        font-size: 2.2rem;
    }

    .single-opt-btn {
        min-height: 52px;
        font-size: 0.92rem;
        padding: 12px 14px;
    }

    .single-mode-title {
        font-size: 1.3rem;
    }

    .modal-card {
        padding: 18px 16px;
    }

    .riddle-key {
        min-height: 42px;
        font-size: 0.85rem;
    }

    .riddle-key.wide {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .riddle-key {
        min-height: 38px;
        font-size: 0.78rem;
    }

    .riddle-key.wide {
        min-height: 38px;
        font-size: 0.7rem;
    }
}

/* 网络状态徽标 */
.network-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--md-shape-full);
    font-size: 0.78rem;
    font-weight: 600;
    transition: all var(--md-motion-standard);
}

.network-status-badge.online {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.network-status-badge.connecting,
.network-status-badge.degraded {
    background: rgba(234, 179, 8, 0.15);
    color: #b45309;
}

.network-status-badge.invisible {
    background: rgba(100, 116, 139, 0.14);
    color: #64748b;
}

.network-status-badge.offline {
    background: rgba(186, 26, 26, 0.12);
    color: #ba1a1a;
}

.network-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.network-status-badge.online .network-dot {
    background: #2e7d32;
    box-shadow: 0 0 4px rgba(46, 125, 50, 0.5);
}

.network-status-badge.connecting .network-dot,
.network-status-badge.degraded .network-dot {
    background: #eab308;
    box-shadow: 0 0 5px rgba(234, 179, 8, 0.7);
    animation: network-dot-pulse 1.5s infinite ease-in-out;
}

@keyframes network-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.network-status-badge.invisible .network-dot {
    background: #94a3b8;
    box-shadow: none;
}

.network-status-badge.offline .network-dot {
    background: #ba1a1a;
    box-shadow: 0 0 4px rgba(186, 26, 26, 0.5);
}

/* 下拉菜单项样式与微交互反馈 (Google MD3规范) */
.hub-dd-item {
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
    border-radius: 8px;
    margin: 2px 6px;
    width: calc(100% - 12px) !important;
}

.hub-dd-item:hover {
    background-color: var(--md-sys-color-surface-container-high, #f1f5f9) !important;
}

.hub-dd-item:active {
    background-color: var(--md-sys-color-surface-container-highest, #e2e8f0) !important;
    transform: scale(0.98);
}

/* 希沃同屏作战专用样式 */
.local-duel-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    touch-action: manipulation;
    user-select: none;
}

.local-duel-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 18px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-l);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    gap: 12px;
}

.local-duel-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin: 0 16px;
    min-width: 0;
    width: 100%;
}

.local-duel-gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 拔河轨道进度条 MD3 样式优化 */
.local-tug-track {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 18px;
    background: var(--md-sys-color-surface-container-highest);
    border-radius: var(--md-shape-full);
    overflow: hidden;
    display: flex;
    margin: 4px 0;
    border: 1.5px solid var(--md-sys-color-outline-variant);
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.local-tug-fill-p1 {
    height: 100%;
    background: linear-gradient(90deg, #B3261E, #E2554B);
    transition: width 0.28s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.local-tug-fill-p2 {
    height: 100%;
    background: linear-gradient(90deg, #00838F, #006874);
    transition: width 0.28s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.local-tug-pin {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 6px;
    background: #FFFFFF;
    border-radius: 9999px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
    transition: left 0.28s cubic-bezier(0.2, 0, 0, 1);
    z-index: 2;
}

.local-duel-arena {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .local-duel-top-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px 12px;
        padding: 10px 14px;
    }

    .local-duel-top-bar .single-btn-exit {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .local-duel-top-bar .local-top-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .local-duel-gauge,
    #local-duel-gauge-snake {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 4px 0 0 0 !important;
    }

    .local-duel-arena {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.local-player-arena {
    position: relative;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 20px 18px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-height: auto;
    touch-action: manipulation;
    user-select: none;
    box-sizing: border-box;
}

.local-player-arena.p1 {
    border-top: 4px solid var(--p1-sys-color);
}

.local-player-arena.p2 {
    border-top: 4px solid var(--p2-sys-color);
}

.local-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.local-player-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--md-shape-full);
    font-size: 0.9rem;
    font-weight: 700;
}

.local-player-score {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.local-player-arena .single-word-display,
.local-player-arena .word-display {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--md-sys-color-on-surface);
    text-align: center;
    word-break: break-word;
    margin-top: 4px;
    margin-bottom: 2px;
    line-height: 1.2;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.local-player-arena .single-phone-display,
.local-player-arena .phone-display {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.98rem;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    margin-bottom: 14px;
    min-height: 20px;
}

.local-player-arena .shici-sentence-box {
    padding: 14px 18px;
    margin: 6px 0 14px 0;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-l);
}

.local-player-arena .shici-sentence-text {
    font-size: 1.15rem;
    line-height: 1.7;
}

.local-player-arena .single-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.local-player-arena .single-opt-btn {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 0.94rem;
}

.local-player-arena .shici-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.local-player-arena .shici-opt-btn {
    min-height: 52px;
    padding: 10px 14px;
    gap: 10px;
    font-size: 0.92rem;
}

.local-player-arena .options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.local-freeze-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--md-shape-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.local-freeze-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--md-sys-color-error);
    margin: 4px 0 2px;
}

.local-freeze-phrase-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 4px;
    padding: 10px 18px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-l);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    max-width: 90%;
    width: 100%;
    box-sizing: border-box;
    animation: fadeIn 0.2s ease;
}

.local-freeze-phrase-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--md-sys-color-primary);
    word-break: break-word;
    margin-bottom: 4px;
    line-height: 1.25;
    text-align: center;
}

.local-freeze-meaning-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    line-height: 1.35;
    text-align: center;
}

.local-freeze-countdown {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--md-sys-color-error);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    line-height: 1.1;
}

.local-freeze-bar {
    width: 200px;
    max-width: 85%;
    height: 8px;
    background: rgba(179, 38, 30, 0.16);
    border-radius: var(--md-shape-full);
    overflow: hidden;
    margin-top: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.local-freeze-bar-inner {
    height: 100%;
    background: var(--md-sys-color-error);
    width: 100%;
    border-radius: var(--md-shape-full);
    transition: width 0.1s linear;
}

.btn-audio-speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    vertical-align: middle;
    margin-left: 6px;
}

.btn-audio-speak:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    transform: scale(1.08);
}

.btn-audio-speak:active {
    transform: scale(0.95);
}

/* 优化后的文件夹树形选词书组件规范 (紧凑折叠、清爽MD3、无冗余按钮) */
.book-tree-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.tree-folder {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    overflow: hidden;
}

.tree-folder:hover {
    border-color: var(--md-sys-color-outline);
}

.tree-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    min-height: 44px;
    background: var(--md-sys-color-surface-container-low);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.tree-folder-header:hover {
    background: var(--md-sys-color-surface-container);
}

.tree-folder-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.tree-folder-icon {
    font-size: 20px;
    color: var(--md-sys-color-primary);
    flex-shrink: 0;
}

.tree-folder-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-folder-badge {
    font-size: 0.74rem;
    padding: 2px 8px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
    flex-shrink: 0;
}

.tree-folder-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tree-folder-chevron {
    font-size: 20px;
    color: var(--md-sys-color-outline);
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.tree-folder.collapsed .tree-folder-chevron {
    transform: rotate(-90deg);
}

.tree-folder-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--md-sys-color-surface-container-lowest);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.tree-folder.collapsed .tree-folder-body {
    display: none;
}

.tree-book-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--md-shape-s);
    background: var(--md-sys-color-surface-container-low);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.16s ease;
}

.tree-book-item:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline-variant);
}

.tree-book-item.selected {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.tree-book-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tree-book-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-book-count {
    font-size: 0.74rem;
    color: var(--md-sys-color-outline);
}

.tree-book-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--md-sys-color-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.tree-book-item.selected .tree-book-check {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: white;
}

/* 联机房间等待区聊天室样式 */
.room-chat-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-l);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    overflow: hidden;
}

.room-chat-header {
    padding: 10px 14px;
    background: var(--md-sys-color-surface-container-low);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    font-weight: 700;
}

.room-chat-messages {
    height: 160px;
    max-height: 160px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--md-sys-color-surface);
}

.chat-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: var(--md-shape-l);
    font-size: 0.86rem;
    line-height: 1.35;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.15s ease;
}

.chat-bubble.mine {
    align-self: flex-end;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-bottom-right-radius: 4px;
}

.chat-bubble.theirs {
    align-self: flex-start;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border-bottom-left-radius: 4px;
}

.chat-bubble-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    opacity: 0.75;
}

.chat-bubble-text {
    font-size: 0.88rem;
    font-weight: 500;
}

.room-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: var(--md-sys-color-surface-container-low);
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* 默写模式样式规范 */
.dictation-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 24px 20px;
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 620px;
    margin: 0 auto;
}

.dictation-prompt-box {
    text-align: center;
    padding: 16px 14px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-l);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dictation-prompt-text {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.dictation-prompt-sub {
    font-size: 0.92rem;
    color: var(--md-sys-color-outline);
    font-family: 'Roboto Mono', monospace;
}

.dictation-slots-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 14px;
    width: 100%;
    max-width: 680px;
    margin: 14px auto 18px;
}

.dictation-slot-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.dictation-slot-input {
    width: 68px;
    min-width: 52px;
    max-width: 320px;
    height: 48px;
    border: 2px solid var(--md-sys-color-outline-variant, #C4C7D0);
    border-radius: var(--md-shape-m, 12px);
    padding: 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    background: var(--md-sys-color-surface-container-lowest, #FFFFFF);
    color: var(--md-sys-color-on-surface);
    outline: none;
    transition: width 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.dictation-slot-input:focus {
    border-color: var(--md-sys-color-primary, #0061A4);
    box-shadow: 0 0 0 3px rgba(0, 97, 164, 0.15);
    background: var(--md-sys-color-surface, #ffffff);
}

.dictation-slot-len-badge {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--md-sys-color-primary, #0061A4);
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dictation-slot-len-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--md-sys-color-primary, #0061A4);
}

.dictation-slot-item:focus-within .dictation-slot-len-badge {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dictation-slot-input.correct {
    border-color: #0061a4 !important;
    background-color: #e8f0fe !important;
    color: #0061a4 !important;
}

.dictation-slot-input.wrong {
    border-color: #ba1a1a !important;
    background-color: #ffedea !important;
    color: #ba1a1a !important;
}

.dictation-slot-block-fixed {
    height: 46px;
    padding: 0 14px;
    border-radius: var(--md-shape-m);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-weight: 800;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dictation-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.riddle-tile.compact-8 {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 8px;
}

.riddle-tile.compact-9 {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
    border-radius: 8px;
}

.riddle-tile.compact-10 {
    width: 32px;
    height: 32px;
    font-size: 1.0rem;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .riddle-tile.compact-8 {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }

    .riddle-tile.compact-9 {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .riddle-tile.compact-10 {
        width: 27px;
        height: 27px;
        font-size: 0.85rem;
        border-radius: 5px;
    }
}

.md3-nav-rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 84px;
    background: var(--md-sys-color-surface-container);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 16px;
    z-index: 900;
    box-shadow: var(--md-elevation-1);
    /* 开启 GPU 3D 加速渲染，增加 visibility 延迟避免出场截断 */
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1),
        opacity 0.26s cubic-bezier(0.2, 0, 0, 1),
        visibility 0.32s cubic-bezier(0.2, 0, 0, 1);
    will-change: transform, opacity;
}

.md3-nav-rail-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    align-items: center;
}

.md3-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: 100%;
    padding: 4px 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
}

.md3-nav-pill {
    width: 56px;
    height: 32px;
    border-radius: var(--md-shape-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant);
    transition: all var(--md-motion-standard);
}

.md3-nav-item:hover .md3-nav-pill {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.md3-nav-item.active .md3-nav-pill {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md3-nav-label {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    transition: color var(--md-motion-standard);
}

.md3-nav-item.active .md3-nav-label {
    color: var(--md-sys-color-on-surface);
    font-weight: 700;
}

.md3-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--md-sys-color-surface-container, #eceef4);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    z-index: 9999;
    justify-content: space-around;
    align-items: flex-start;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 6px 16px env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.36s;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.md3-bottom-nav .md3-nav-item {
    flex: 1;
    max-width: 120px;
}

@media (min-width: 768px) {
    body.has-nav {
        padding-left: 96px;
    }

    .md3-bottom-nav {
        display: none !important;
    }

    /* 隐藏时平滑向左移出屏幕，完全不抖动卡顿 */
    body.nav-hidden .md3-nav-rail {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .md3-nav-rail {
        display: none !important;
    }

    .md3-bottom-nav {
        display: flex !important;
    }

    body.has-nav {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    body.has-nav .md3-bottom-nav {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform 0.36s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.3s ease, visibility 0.36s;
    }

    /* 底部栏平滑向下淡出动画：下移 120% 彻底移出视口，避免 safe-area 留白卡在屏幕边缘 */
    body.nav-hidden .md3-bottom-nav {
        transform: translate3d(0, 120%, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, visibility 0.36s;
    }
}

body.nav-hidden {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 24px !important;
}

.dictation-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 500px;
    margin: 12px auto 0;
    padding: 10px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-l);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.dictation-keyboard-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    width: 100%;
}

.dictation-key {
    flex: 1;
    min-height: 42px;
    max-width: 42px;
    border-radius: var(--md-shape-s);
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.dictation-key:active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    transform: scale(0.92);
}

.dictation-key.key-wide {
    flex: 1.5;
    max-width: 64px;
}

.dictation-key.key-shift.active {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
}

.dictation-key.key-action {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
}

.dictation-key.key-action:active {
    background: var(--md-sys-color-primary, #0061a4);
    filter: brightness(0.9);
}

.dictation-key.key-symbol {
    flex: 1;
    max-width: 44px;
}

.dictation-key.key-space {
    flex: 4;
    max-width: 220px;
    font-size: 0.85rem;
}

/* 设置中心与个人中心子页面样式 */
.me-subview,
.settings-subview {
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.me-subview.active,
.settings-subview.active {
    display: block;
    animation: md3ViewEnter 0.2s cubic-bezier(0.05, 0.7, 0.1, 1.0) forwards;
}

.settings-section-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 18px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.settings-section-title .material-symbols-rounded {
    font-size: 20px !important;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

.settings-section-title>span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.settings-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    overflow: hidden;
    margin-bottom: 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high);
    gap: 14px;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row.clickable {
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
    border-radius: var(--md-shape-m);
}

.settings-row.clickable:hover {
    background: var(--md-sys-color-surface-container, #e2e8f0);
}

.settings-row.clickable:active {
    background: var(--md-sys-color-surface-container-high, #cbd5e1);
    transform: scale(0.995);
}

.me-account-action-row {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin: 3px 0 !important;
    border-bottom: none !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
}

.me-account-action-row:hover {
    background: var(--md-sys-color-surface-container, #eef2f8) !important;
    transform: translateX(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.me-account-action-row.danger:hover {
    background: #fef2f2 !important;
}

.me-account-action-row.danger:hover .settings-row-left span {
    color: var(--md-sys-color-error, #ba1a1a) !important;
}

/* 移动端个人中心优化：隐藏头像下方突兀的按钮，统一收纳到下方账号操作列表 */
@media (max-width: 640px) {
    .me-account-top-actions {
        display: none !important;
    }
    .me-row-mobile-only {
        display: flex !important;
    }
}

@media (min-width: 641px) {
    .me-row-mobile-only {
        display: none !important;
    }
    #me-row-sync-data {
        display: none !important;
    }
}

.settings-row > .material-symbols-rounded,
.settings-row > svg {
    flex-shrink: 0 !important;
}

.settings-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.settings-row-text h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
    word-break: break-word;
}

.settings-row-text p {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline);
    margin: 0;
    line-height: 1.35;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* 内部条目不再使用独立的硬 border，采用轻量背景区分 */
.settings-book-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-lowest);
    /* 纯白底色，在浅灰底槽中浮起 */
    border-radius: 12px;
    /* 与外层 20px - 8px padding 精准同心对齐 */
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    gap: 12px;
    box-sizing: border-box;
    transition: all var(--md-motion-standard);
}

.settings-book-row-item:hover {
    background: #ffffff;
    border-color: var(--md-sys-color-outline);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 词书管理列表中的下拉菜单：统一向上弹出，完美避开卡片底边截断与边框冲突 */
.settings-book-row-item .md3-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    right: 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.14) !important;
}

/* 箭头向上翻转对应 */
.settings-book-row-item .md3-custom-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

/* 统一控制词书条目中的操作按钮：高度统一为 34px，垂直严格对齐 */
.settings-book-row-item .md3-dropdown-btn,
.settings-book-row-item .btn {
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.settings-book-row-item .btn-danger {
    width: 34px;
    padding: 0 !important;
    /* 让单个删除图标按钮呈现完美的圆形 */
}

/* 词书管理卡片：完全对照图 2 样式规范 */
.settings-book-group-card {
    border: 1.5px solid var(--md-sys-color-outline-variant, #dce2eb);
    border-radius: var(--md-shape-xl, 24px);
    overflow: hidden;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    box-shadow: var(--md-elevation-1);
    margin-bottom: 16px;
    padding: 18px 20px;
}

.settings-book-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.settings-book-group-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-book-item-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: #f8faff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.settings-book-item-card:last-child {
    margin-bottom: 0;
}

.settings-book-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.settings-book-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-book-item-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.settings-book-item-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e293b;
    word-break: break-word;
    white-space: normal;
    /* 允许正常按单词换行，禁止强制单字竖排 */
}

@media (max-width: 600px) {
    .settings-book-item-main {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .settings-book-item-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        gap: 8px;
    }

    .settings-book-item-actions .settings-book-item-btn {
        flex: 1;
        justify-content: center;
        padding: 0 10px;
        height: 34px;
        font-size: 0.82rem;
    }
}

.settings-book-item-tag {
    font-size: 0.75rem;
    background: #eef2f6;
    color: #475569;
    padding: 2px 8px;
    border-radius: 9999px;
    font-weight: 600;
}

.settings-book-item-sub {
    font-size: 0.84rem;
    color: #64748b;
}

.settings-book-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.settings-book-item-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1.5px solid #dce2eb;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.settings-book-item-btn:hover {
    background: #f1f4f9;
    border-color: #cbd5e1;
}

.settings-book-item-percent {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--md-sys-color-primary, #0061a4);
    text-align: right;
    margin-top: 4px;
}

/* 设置子页面的顶部操作栏专用卡片样式 */
.settings-toolbar-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-l) !important;
    /* 16px 标准圆角，杜绝跑道胶囊圆角 */
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    padding: 12px 18px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* 移除回收站容器的多余高度与内边距，完全自适应词条内容 */
.trash-scroll-container {
    min-height: auto !important;
    /* 彻底移除原有的 min-height: 280px */
    max-height: 600px;
    overflow-y: auto;
    padding: 0 !important;
    /* 去除内部大留白 */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.trash-word-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    background: #f8faff;
    border-radius: var(--md-shape-xl, 20px);
    border: 1.5px solid var(--md-sys-color-outline-variant, #e2e8f0);
    gap: 16px;
    margin-bottom: 12px;
}

.trash-word-row:hover {
    background: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}

/* 智能朝上展开：当接近底部时菜单自动向上弹出，杜绝被截断 */
.trash-word-row .md3-dropdown-menu {
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
}

.trash-word-info {
    flex: 1 1 auto;
    min-width: 0;
    /* 防止长文本把右侧按钮挤压变形 */
}

.trash-word-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.trash-word-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.trash-word-phone {
    font-size: 0.85rem;
    color: var(--md-sys-color-outline);
    font-family: 'Roboto Mono', monospace;
}

.trash-word-meaning {
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.4;
    word-break: break-word;
}

.trash-word-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* 核心：禁止右侧操作按钮发生任何挤压变形 */
}

.subview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 4px 0 0px;
}

.subview-header>div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subview-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    /* 与按钮中线对齐 */
    display: flex;
    align-items: center;
}

.version-update-card {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1200;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1.5px solid var(--md-sys-color-primary);
    box-shadow: var(--md-elevation-3);
    border-radius: var(--md-shape-l);
    padding: 16px;
    max-width: 380px;
    width: calc(100vw - 36px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 修复后的在线玩家卡片与网格 UI (彻底解决竖排、折行问题) */
.online-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.online-player-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #f0f3fa;
    border-radius: 12px;
    border: 1px solid #e1e3ec;
    box-sizing: border-box;
    gap: 10px;
    transition: all var(--md-motion-standard, 0.2s ease);
}

.online-player-card:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
    background: #e9eef7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.online-player-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.online-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8ecf4;
    color: var(--md-sys-color-primary, #0061a4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.online-player-avatar img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.online-player-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.online-player-user-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.online-player-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1c1e;
    line-height: 1.25;
    word-break: break-word;
}

.online-player-rank {
    font-size: 0.74rem;
    font-weight: 700;
    color: #475569;
    background: #e2e8f0;
    padding: 1px 6px;
    border-radius: 6px;
    line-height: 1.3;
    flex-shrink: 0;
}

.online-player-status {
    font-size: 0.76rem;
    font-weight: 500;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.online-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    flex-shrink: 0;
}

.online-player-action-btn {
    min-height: unset !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    background: #0061a4 !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 97, 164, 0.2);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.online-player-action-btn .material-symbols-rounded {
    font-size: 13.5px !important;
    line-height: 1 !important;
}

.online-player-action-btn:hover:not(:disabled) {
    background: #004d84 !important;
    box-shadow: 0 2px 6px rgba(0, 97, 164, 0.3);
}

.online-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.online-room-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-l);
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--md-elevation-1);
    transition: all var(--md-motion-standard);
}

.online-room-card:hover {
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--md-elevation-2);
}

/* ==========================================================================
           Google MD3: 背实词模式 (Classical Chinese Words) 专有样式
           ========================================================================== */
.shici-container {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

.shici-quiz-card {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-xl);
    padding: 24px;
    border: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: var(--md-elevation-1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shici-top-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.shici-word-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px !important;
    padding: 0 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: var(--md-shape-full);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    border: none;
    vertical-align: middle;
}

.shici-mode-tag {
    display: none;
}

.shici-sentence-box {
    background: var(--md-sys-color-surface-container-low);
    border: 1.5px solid var(--md-sys-color-surface-container-high);
    border-radius: var(--md-shape-l);
    padding: 22px 24px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color var(--md-motion-standard);
}

.shici-sentence-text {
    font-family: 'Noto Sans SC', 'Songti SC', 'Source Han Serif CN', serif, sans-serif;
    font-size: 1.35rem;
    line-height: 1.85;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    letter-spacing: 0.02em;
}

.shici-word-highlight {
    font-weight: 800;
    color: #006874;
    background: rgba(0, 104, 116, 0.12);
    padding: 2px 6px;
    border-radius: 6px;
    border-bottom: 2.5px solid #006874;
    display: inline-block;
    margin: 0 1px;
}

.shici-source-tag {
    text-align: right;
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--md-sys-color-outline);
    font-weight: 600;
}

.shici-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

@media (min-width: 600px) {
    .shici-options-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.shici-opt-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 12px 18px;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1.5px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    color: var(--md-sys-color-on-surface);
    font-size: 0.96rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all var(--md-motion-standard);
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    user-select: none;
}

.shici-opt-btn:hover:not(:disabled) {
    background: var(--md-sys-color-surface-container-low);
    border-color: #006874;
    box-shadow: 0 3px 8px rgba(0, 104, 116, 0.12);
    transform: translateY(-1px);
}

.shici-opt-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.shici-opt-btn .opt-prefix {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all var(--md-motion-standard);
}

.shici-opt-btn .opt-pos-tag {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-outline);
    flex-shrink: 0;
}

.shici-opt-btn .opt-meaning-text {
    flex: 1;
    font-weight: 600;
    line-height: 1.4;
}

.shici-opt-btn.correct {
    background: #E8F5E9 !important;
    border-color: #2E7D32 !important;
    color: #1B5E20 !important;
}

.shici-opt-btn.correct .opt-prefix {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
}

.shici-opt-btn.wrong {
    background: #FFEBEE !important;
    border-color: #C62828 !important;
    color: #B71C1C !important;
}

.shici-opt-btn.wrong .opt-prefix {
    background: #C62828 !important;
    color: #FFFFFF !important;
}

.shici-explanation-card {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeIn 0.25s ease-out;
}

.shici-feedback-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.shici-feedback-banner.correct {
    color: var(--md-sys-color-success);
}

.shici-feedback-banner.wrong {
    color: var(--md-sys-color-error);
}

.shici-annotation-box {
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-shape-m);
    padding: 12px 16px;
    border: 1px solid var(--md-sys-color-surface-container-high);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
}

.shici-senses-preview {
    margin-top: 4px;
    font-size: 0.86rem;
    color: var(--md-sys-color-on-surface-variant);
}

.shici-senses-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.shici-sense-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: 8px;
    font-size: 0.85rem;
}

.shici-sense-item.active-sense {
    background: rgba(0, 104, 116, 0.08);
    border-left: 3px solid #006874;
    font-weight: 600;
}

/* ==========================================================================
           Google MD3: 结算页面小结 (Settlement Group Summary) 样式
           ========================================================================== */
.settlement-summary-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-xl);
    padding: 20px;
    border: 1px solid var(--md-sys-color-surface-container-high);
    margin-top: 16px;
    text-align: left;
}

.settlement-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.settlement-filter-group {
    display: flex;
    gap: 6px;
}

.settlement-filter-btn {
    border: none;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--md-shape-full);
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.settlement-filter-btn.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.settlement-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1.5px solid var(--md-sys-color-outline-variant, #E2E8F0);
    border-radius: var(--md-shape-l, 16px);
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline, #74777F) var(--md-sys-color-surface-container-high, #E2E8F0);
}

.settlement-list::-webkit-scrollbar {
    width: 6px;
}

.settlement-list::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container-high, #E2E8F0);
    border-radius: 999px;
}

.settlement-list::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline, #74777F);
    border-radius: 999px;
}

.settlement-list::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-on-surface-variant, #44474F);
}

.settlement-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #E2E8F0);
    border-radius: 0;
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color var(--md-motion-standard);
    box-shadow: none;
}

.settlement-item:last-child {
    border-bottom: none;
}

.settlement-item:hover {
    background: transparent;
    box-shadow: none;
}

.settlement-item.item-mistake {
    background: #FFF8F7;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #E2E8F0);
}

.settlement-item.item-mistake:hover {
    background: #FFF8F7;
}

.settlement-item.item-mistake:last-child {
    border-bottom: none;
}

.settlement-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settlement-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.settlement-status-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.settlement-status-icon.correct {
    color: var(--md-sys-color-success);
}

.settlement-status-icon.wrong {
    color: var(--md-sys-color-error);
}

.settlement-word-text {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
    word-break: break-word;
}

/* 错词加粗规范 */
.settlement-word-text.mistake-word-bold {
    font-weight: 700 !important;
    color: var(--md-sys-color-error) !important;
}

/* 词组错误位置加粗规范 */
.phrase-wrong-token-bold {
    font-weight: 800 !important;
    color: var(--md-sys-color-error) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.settlement-trans-text {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 4px;
    line-height: 1.4;
}

.settlement-item-chevron {
    font-size: 20px;
    color: var(--md-sys-color-outline);
    transition: transform var(--md-motion-standard);
    flex-shrink: 0;
}

.settlement-item.open .settlement-item-chevron {
    transform: rotate(180deg);
}

.settlement-item-drawer {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
    font-size: 0.88rem;
}

.settlement-item.open .settlement-item-drawer {
    display: block;
}

.settlement-item-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #E2E8F0);
}

.settlement-act-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.settlement-act-btn.active {
    background: #c7e1de !important;
    color: #004f46 !important;
    border-color: #a0ccc5 !important;
}

.settlement-mastery-diamonds {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    user-select: none;
    vertical-align: middle;
}

.settlement-diamond {
    color: var(--md-sys-color-outline-variant, #C4C7D0);
    display: inline-block;
    transition: color 0.2s ease;
}

.settlement-diamond.filled {
    color: #EAA000;
}

#btn-result-share-poster,
.result-share-circle-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--md-sys-color-secondary-container, #d7e3f7) !important;
    color: var(--md-sys-color-on-secondary-container, #001d36) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

#btn-result-share-poster:hover,
.result-share-circle-btn:hover {
    background: var(--md-sys-color-secondary-container, #d7e3f7) !important;
    color: var(--md-sys-color-on-secondary-container, #001d36) !important;
    filter: brightness(0.96);
    transform: none;
    box-shadow: none !important;
}

#btn-result-share-poster:active,
.result-share-circle-btn:active {
    transform: scale(0.96) !important;
}

#btn-result-share-poster #btn-result-share-poster-text {
    display: none !important;
}

.distractor-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.distractor-row {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* 选错的辨析项加粗规范 */
.distractor-row.chosen-mistake-bold {
    background: #FFDAD6 !important;
    color: #410002 !important;
    border: 1px solid var(--md-sys-color-error);
}

.distractor-row.chosen-mistake-bold .distractor-text {
    font-weight: 800 !important;
    color: #BA1A1A !important;
}

.distractor-row.correct-target-meaning {
    background: #C8E6C9 !important;
    color: #003314 !important;
    font-weight: 600;
}

/* 英语小结：左边单词、右边释义卡片布局 */
.distractor-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    font-size: 0.88rem;
    gap: 12px;
    line-height: 1.4;
    transition: background var(--md-motion-standard);
}

.distractor-grid-row .distractor-word-col {
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
    min-width: 130px;
    max-width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.distractor-grid-row .distractor-meaning-col {
    color: var(--md-sys-color-on-surface-variant);
    flex: 1;
    text-align: right;
}

.distractor-grid-row.correct-target-row {
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7;
}

.distractor-grid-row.correct-target-row .distractor-word-col {
    color: #1B5E20 !important;
    font-weight: 700 !important;
}

.distractor-grid-row.correct-target-row .distractor-meaning-col {
    color: #1B5E20 !important;
    font-weight: 600 !important;
}

.distractor-grid-row.chosen-mistake-row {
    background: #FFEBEE !important;
    border: 1px solid #EF9A9A;
}

.distractor-grid-row.chosen-mistake-row .distractor-word-col {
    color: #BA1A1A !important;
    font-weight: 800 !important;
}

.distractor-grid-row.chosen-mistake-row .distractor-meaning-col {
    color: #BA1A1A !important;
    font-weight: 700 !important;
}

/* 实词选错释义对应例句展示卡片 */
.shici-wrong-example-box {
    margin-top: 6px;
    background: rgba(186, 26, 26, 0.05);
    border-left: 3px solid #BA1A1A;
    border-radius: 4px 8px 8px 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}

/* 管理词书：英语与实词分类标签 */
.settings-category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 8px;
}

.settings-cat-tab {
    border: none;
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--md-sys-color-outline);
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.settings-cat-tab.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* 实词词书单列手风琴卡片列表 (适配窄屏与全屏，一行只显示一个字) */
.shici-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.shici-word-card {
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-shape-l);
    overflow: hidden;
    transition: border-color var(--md-motion-standard), box-shadow var(--md-motion-standard), background var(--md-motion-standard);
    width: 100%;
    box-sizing: border-box;
}

.shici-word-card:hover {
    border-color: var(--md-sys-color-outline);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shici-word-card.expanded {
    border: 1.5px solid var(--md-sys-color-primary);
    box-shadow: 0 4px 16px rgba(0, 104, 116, 0.08);
}

.shici-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--md-motion-standard);
    gap: 10px;
}

.shici-card-header:hover {
    background: var(--md-sys-color-surface-container-low);
}

.shici-word-card.expanded .shici-card-header {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
}

.shici-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.shici-card-char-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--md-sys-color-primary);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.shici-card-char-pinyin {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--md-sys-color-outline);
    flex-shrink: 0;
}

.shici-card-senses-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    flex-shrink: 0;
}

.shici-card-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.shici-card-chevron {
    font-size: 22px;
    color: var(--md-sys-color-outline);
    transition: transform var(--md-motion-standard);
}

.shici-word-card.expanded .shici-card-chevron {
    transform: rotate(180deg);
}

.shici-card-body {
    display: none;
    padding: 14px 16px;
    flex-direction: column;
    gap: 10px;
    background: var(--md-sys-color-surface-container-lowest);
}

.shici-word-card.expanded .shici-card-body {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

.shici-sense-card-item {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-shape-m);
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid var(--md-sys-color-surface-container-high);
    align-items: flex-start;
}

.shici-sense-meta-box {
    flex: 1 1 160px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shici-sense-meta-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.shici-sense-examples-box {
    flex: 2 1 220px;
    min-width: 180px;
    padding-left: 12px;
    border-left: 3px solid var(--md-sys-color-primary-container);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shici-sense-example-line {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--md-sys-color-on-surface);
}

.shici-sense-example-source {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline);
    margin-left: 6px;
}

/* ==========================================================================
           统一底部滑入式虚拟键盘 (MD3 规范)
           ========================================================================== */
.global-virtual-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    border-top: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
    padding: 8px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    max-width: 640px;
    margin: 0 auto;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.global-virtual-keyboard.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.gvk-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    width: 100%;
}

.gvk-key {
    flex: 1;
    min-height: 42px;
    max-width: 48px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    color: var(--md-sys-color-on-surface, #1e293b);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background 0.1s, transform 0.1s;
    user-select: none;
}

.gvk-key:active {
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-on-primary-container, #0061a4);
    transform: scale(0.92);
}

.gvk-key.key-wide {
    flex: 1.5;
    max-width: 68px;
}

.gvk-key.key-action {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
}

.gvk-key.key-action:active {
    background: var(--md-sys-color-primary, #0061a4);
    filter: brightness(0.9);
}

.gvk-key.key-shift.active {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
}

.gvk-key.key-symbol {
    flex: 1;
    max-width: 48px;
}

.gvk-key.key-space {
    flex: 4;
    max-width: 240px;
    font-size: 0.88rem;
}

/* ==========================================================================
           全新独立“选择词书”页面样式 (支持封面与文件夹分类)
           ========================================================================== */
.book-selector-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 12px 64px;
}

.book-selector-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.book-selector-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.book-selector-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1;
    display: flex;
    align-items: center;
}

.book-selector-summary-chip {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-primary, #0061a4);
    white-space: nowrap;
}

.book-selector-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.book-selector-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--md-sys-color-outline);
    padding: 8px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.book-selector-tab.active {
    background: var(--md-sys-color-secondary-container, #e2e8f0);
    color: var(--md-sys-color-on-secondary-container, #0f172a);
}

.book-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

.book-cover-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    border: 1.5px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    transition: all var(--md-motion-standard);
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.book-cover-card:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.book-cover-card.selected {
    background: var(--md-sys-color-surface-container, #f0f7ff);
    border-color: var(--md-sys-color-primary, #0061a4);
    box-shadow: 0 2px 10px rgba(0, 97, 164, 0.12);
}

.book-cover-card.disabled-for-wordle {
    opacity: 0.45;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
}

.book-cover-wrap {
    width: 68px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
}

.book-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-cover-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px;
    box-sizing: border-box;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

.book-cover-art-cat {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.book-cover-art-title {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
}

.book-cover-art-count {
    font-size: 0.62rem;
    opacity: 0.85;
}

.book-card-info {
    flex: 1;
    min-width: 0;
    height: 92px;
    min-height: 92px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.book-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.book-card-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card-check-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-sizing: border-box;
}

.book-card-check-badge.selected,
.book-cover-card.selected .book-card-check-badge {
    background: var(--md-sys-color-primary, #0061a4);
    border-color: var(--md-sys-color-primary, #0061a4);
}

.book-cover-card.dropdown-open {
    z-index: 90;
    border-color: var(--md-sys-color-primary, #0061a4);
}

.book-card-top-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.book-card-anchor-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.book-card-mid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 4px 0;
}

.book-card-filters-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.book-card-count-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.book-card-word-count {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline, #64748b);
    font-weight: 500;
    font-family: inherit;
}

.book-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-on-surface-variant, #475569);
}

.book-card-tag.danger {
    background: var(--md-sys-color-error-container, #fee2e2);
    color: var(--md-sys-color-error, #ba1a1a);
}

.book-card-mastery {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

.book-card-mastery-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.1;
}

.book-card-mastery-label {
    color: var(--md-sys-color-outline, #64748b);
    font-size: 0.72rem;
    line-height: 1;
}

.book-card-mastery-text {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    font-family: inherit;
}

.book-card-mastery-text.muted {
    color: var(--md-sys-color-outline, #94a3b8);
}

.book-progress-mini {
    height: 4px;
    background: var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.book-progress-mini-fill {
    height: 100%;
    background: var(--md-sys-color-primary, #0061a4);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ==========================================================================
           中文搜索独立英文结果卡片样式
           ========================================================================== */
.chinese-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.chinese-result-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--md-motion-standard);
}

.chinese-result-card:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
    background: var(--md-sys-color-surface-container, #f1f5f9);
    transform: translateX(3px);
}

.chinese-result-main {
    flex: 1;
    min-width: 0;
}

.chinese-result-word-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chinese-result-word {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--md-sys-color-primary, #0061a4);
}

.chinese-result-phone {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline);
    font-family: monospace;
}

.chinese-result-meaning {
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 5px;
    line-height: 1.45;
}

.chinese-result-voice-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    color: var(--md-sys-color-primary, #0061a4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.chinese-result-voice-btn:hover {
    background: var(--md-sys-color-primary-container, #dbeafe);
    border-color: var(--md-sys-color-primary, #0061a4);
    transform: scale(1.05);
}

/* ==========================================================================
   Wordle 草稿行样式 (框尺寸与答题区一致，居中对齐，极简紧凑)
   ========================================================================== */
.riddle-draft-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 540px;
    margin: 6px auto 10px;
    padding: 0;
}

.riddle-draft-rows-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.riddle-draft-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 2px 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.riddle-draft-tiles-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.riddle-draft-tiles {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.riddle-draft-tile.compact-8 {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 8px;
}

.riddle-draft-tile.compact-9 {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
    border-radius: 8px;
}

.riddle-draft-tile.compact-10 {
    width: 32px;
    height: 32px;
    font-size: 1.0rem;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .riddle-draft-tile.compact-8 {
        width: 34px;
        height: 34px;
        font-size: 1.05rem;
    }
    .riddle-draft-tile.compact-9 {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
    .riddle-draft-tile.compact-10 {
        width: 27px;
        height: 27px;
        font-size: 0.85rem;
        border-radius: 5px;
    }
}

@media (max-width: 480px) {
    .riddle-draft-actions {
        left: calc(100% + 5px) !important;
        gap: 4px !important;
    }
    .riddle-draft-btn {
        width: 28px;
        height: 28px;
    }
    .riddle-draft-btn .material-symbols-rounded {
        font-size: 16px !important;
    }
}

@media (max-width: 380px) {
    .riddle-draft-actions {
        left: calc(100% + 3px) !important;
        gap: 3px !important;
    }
    .riddle-draft-btn {
        width: 25px;
        height: 25px;
    }
    .riddle-draft-btn .material-symbols-rounded {
        font-size: 14px !important;
    }
}

.riddle-draft-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 2;
}

.riddle-draft-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.riddle-draft-submit-btn {
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-primary, #0061a4);
}

.riddle-draft-submit-btn:hover {
    filter: brightness(0.92);
    transform: scale(1.08);
}

.riddle-draft-del-btn {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-outline, #64748b);
}

.riddle-draft-del-btn:hover {
    background: var(--md-sys-color-error-container, #fee2e2);
    color: var(--md-sys-color-error, #ba1a1a);
    transform: scale(1.08);
}

/* ==========================================================================
   MD3 账号登录/注册卡片与输入框规范 (Google MD3 Outlined Text Field)
   ========================================================================== */
.auth-card {
    --auth-bg: var(--md-sys-color-surface, #F8F9FF);
    max-width: 480px;
    width: 100%;
    margin: 36px auto;
    padding: 36px 36px 32px;
    border-radius: var(--md-shape-l, 24px);
    background: var(--auth-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    text-align: center;
    position: relative;
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
}

@media (max-width: 520px) {
    .auth-card {
        margin: 16px auto;
        padding: 24px 20px 24px;
        border-radius: 18px;
    }
}

.auth-tabs-row {
    display: flex;
    position: relative;
    border-bottom: 2px solid var(--md-sys-color-surface-container-highest, #e2e8f0);
    margin: 24px 0 28px;
    gap: 8px;
}

.auth-tab-btn {
    flex: 1;
    position: relative;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--md-sys-color-outline, #79747e);
    border-radius: 8px 8px 0 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    outline: none;
}

.auth-tab-btn:hover {
    color: var(--md-sys-color-on-surface, #1d1b20);
    background: var(--md-sys-color-surface-container, rgba(0, 0, 0, 0.03));
}

.auth-tab-btn.active {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
}

.auth-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: var(--md-sys-color-primary, #0061a4);
    border-radius: 3px 3px 0 0;
}

/* Google MD3 Outlined Text Field */
.md3-text-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: var(--md-shape-s, 8px);
    background: transparent;
    box-sizing: border-box;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md3-text-field:focus-within {
    border-color: var(--md-sys-color-primary, #0061a4);
    box-shadow: 0 0 0 1px var(--md-sys-color-primary, #0061a4);
    background: transparent;
}

.md3-text-field-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--md-sys-color-on-surface, #1d1b20);
    font-family: inherit;
    box-sizing: border-box;
}

.md3-text-field-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    background: transparent;
    padding: 0 4px;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left top;
    line-height: 1;
    z-index: 2;
}

/* Floating state: focused or input has text */
.md3-text-field-input:focus ~ .md3-text-field-label,
.md3-text-field-input:not(:placeholder-shown) ~ .md3-text-field-label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--text-field-bg, var(--md-sys-color-surface, #ffffff));
}

.md3-text-field-input:focus ~ .md3-text-field-label {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 600;
}

.auth-form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.auth-submit-btn {
    height: 48px;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--md-shape-full, 9999px);
    width: 100%;
    margin-top: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.auth-secondary-btn {
    height: 44px;
    min-height: 44px;
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: var(--md-shape-full, 9999px);
    width: 100%;
}

.auth-reg-avatar-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    border: 2px dashed var(--md-sys-color-primary, #0061a4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    margin: 0 auto;
}

.auth-reg-avatar-wrap:hover {
    transform: scale(1.05);
    background: var(--md-sys-color-primary-container, #dbeafe);
}

/* 更新日志 Markdown 渲染样式规范 (支持 md 缩进、无序列表、有序列表、blockquote) */
.changelog-content {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--md-sys-color-on-surface-variant);
    word-break: break-word;
}

.changelog-content .changelog-list {
    margin: 4px 0;
    padding-left: 20px;
    list-style-position: outside;
}

.changelog-content ul.changelog-list {
    list-style-type: disc;
}

.changelog-content ul.changelog-list ul.changelog-list {
    list-style-type: circle;
    margin: 2px 0 3px;
    padding-left: 18px;
}

.changelog-content ul.changelog-list ul.changelog-list ul.changelog-list {
    list-style-type: square;
    margin: 2px 0 3px;
    padding-left: 18px;
}

.changelog-content ol.changelog-list {
    list-style-type: decimal;
}

.changelog-content ol.changelog-list ol.changelog-list {
    list-style-type: lower-alpha;
    margin: 2px 0 3px;
    padding-left: 18px;
}

.changelog-content .changelog-list li {
    margin-bottom: 5px;
    line-height: 1.65;
}

.changelog-content .changelog-list li:last-child {
    margin-bottom: 2px;
}

.changelog-content .changelog-blockquote {
    margin: 8px 0;
    padding: 8px 14px;
    border-left: 3.5px solid var(--md-sys-color-primary, #0061a4);
    background: var(--md-sys-color-surface-container, #f0f4f9);
    border-radius: 0 8px 8px 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.88rem;
    line-height: 1.65;
}

.changelog-content .changelog-blockquote .changelog-p {
    margin: 4px 0;
}

.changelog-content .changelog-p {
    margin: 4px 0 6px;
    line-height: 1.65;
}

.changelog-content .changelog-sub-text {
    margin: 3px 0 5px 6px;
    color: var(--md-sys-color-outline);
    font-size: 0.84rem;
    line-height: 1.5;
}

.changelog-content .changelog-heading {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--md-sys-color-primary, #0061a4);
    margin: 10px 0 4px;
}

.changelog-content .md-inline-code {
    padding: 1.5px 5px;
    border-radius: 4px;
    background: var(--md-sys-color-surface-container-high, #e6e8ee);
    color: var(--md-sys-color-on-surface);
    font-size: 0.84em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.changelog-content .md-link {
    color: var(--md-sys-color-primary, #0061a4);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Wordle 最近7天圆圈日期选择器样式 */
.lb-day-circle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    color: var(--md-sys-color-on-surface, #1e293b);
    border: 1.5px solid var(--md-sys-color-outline-variant, #cbd5e1);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
    overflow: hidden;
}

.lb-day-circle-btn .lb-day-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.lb-day-circle-btn:hover {
    border-color: #0061a4;
    color: #0061a4;
}

.lb-day-circle-btn.active {
    background: #0061a4;
    color: #ffffff;
    border: 1.5px solid #0061a4;
    font-weight: 800;
    transform: scale(1.06);
}

/* 页面底部版权作者两行小字 */
.site-global-footer {
    text-align: center;
    padding: 24px 16px 36px;
    color: var(--md-sys-color-outline, #94a3b8);
    font-size: 0.78rem;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

.site-global-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Google MD3: 选择词书与管理词书单行水平滑动分类栏、操作菜单与单词查看器
   ========================================================================== */
.md3-cat-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    margin-bottom: 12px;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}

.md3-cat-scroll-container.is-dragging {
    cursor: grabbing;
}

.md3-cat-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.md3-cat-chips-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 100%;
}

.md3-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 9999px;
    border: 1px solid var(--md-sys-color-outline-variant, #c4c7d0);
    background: var(--md-sys-color-surface-container-low, #f2f3fa);
    color: var(--md-sys-color-on-surface, #191c20);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: all var(--md-motion-standard, 0.2s cubic-bezier(0.2, 0, 0, 1));
    outline: none;
}

.md3-cat-chip:hover {
    background: var(--md-sys-color-surface-container, #eceef4);
    border-color: var(--md-sys-color-outline, #74777f);
}

.md3-cat-chip.active {
    background: var(--md-sys-color-secondary-container, #d7e3f7);
    color: var(--md-sys-color-on-secondary-container, #101c2b);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.book-selector-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 2px;
}

.book-card-more-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline, #74777f);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.book-card-more-btn:hover {
    background: var(--md-sys-color-surface-container-high, #e7e8ee);
    color: var(--md-sys-color-on-surface, #191c20);
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-card-action.download {
    background: var(--md-sys-color-primary-container, #d1e4ff);
    color: var(--md-sys-color-primary, #0061a4);
}

.btn-card-action.download:hover {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
}

.btn-card-action.update {
    background: #fef3c7;
    color: #b45309;
}

.btn-card-action.update:hover {
    background: #f59e0b;
    color: #ffffff;
}

.md3-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--md-shape-m, 12px);
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface, #191c20);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.md3-menu-item:hover {
    background: var(--md-sys-color-surface-container, #eceef4);
}

.md3-menu-item.danger {
    color: var(--md-sys-color-error, #ba1a1a);
}

.md3-menu-item.danger:hover {
    background: var(--md-sys-color-error-container, #ffdad6);
}

.book-viewer-word-item {
    padding: 10px 14px;
    border-radius: var(--md-shape-m, 12px);
    background: var(--md-sys-color-surface-container-low, #f2f3fa);
    border: 1px solid var(--md-sys-color-outline-variant, #c4c7d0);
    transition: background 0.15s;
}

.book-viewer-word-item:hover {
    background: var(--md-sys-color-surface-container, #eceef4);
}

.empty-books-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--md-sys-color-on-surface);
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.input-shake {
    animation: inputShake 0.35s ease;
    border-color: var(--md-sys-color-error, #ba1a1a) !important;
}

/* 词书卡片下拉操作菜单 (Dropdown 模式 - 贴合按钮直接弹出) */
#modal-book-actions-menu.dropdown-mode {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: auto !important;
    animation: none !important;
}

#modal-book-actions-menu.dropdown-mode .book-action-menu-sheet {
    position: fixed !important;
    margin: 0 !important;
    animation: none !important;
    transform: none !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: 12px !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: calc(100vw - 24px) !important;
    white-space: nowrap !important;
    padding: 6px !important;
    background: var(--md-sys-color-surface-container-low, #f7f9fe) !important;
    max-height: none !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
}

#modal-book-actions-menu.dropdown-mode .book-action-menu-sheet > div:first-child {
    display: none !important;
}

#modal-book-actions-menu.dropdown-mode .md3-menu-item {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
}

/* 移动端搜索建议全屏宽度与隐藏虚拟键盘按钮 */
@media (max-width: 768px) {
    .hub-search-keyboard-btn,
    #hub-search-keyboard-btn,
    #search-page-keyboard-btn {
        display: none !important;
    }

    .hub-search-suggestions {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 16px 16px !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
        z-index: 1000 !important;
        max-height: calc(100vh - 110px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .hub-search-suggestions .suggestion-badge {
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* 仅在无法联网的情况下由 JS 动态移除更换海报背景按钮 */

/* ==========================================================================
   本地模式独立文件夹树样式 (支持嵌套子文件夹、拖拽导入与拖动分类)
   ========================================================================== */
.local-tree-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.local-tree-folder {
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    overflow: visible;
    position: relative;
    transition: all 0.2s ease;
}

.local-tree-folder.dropdown-open-folder {
    z-index: 80;
}

.local-tree-folder.nested-subfolder {
    margin-top: 10px;
    background: var(--md-sys-color-surface, #ffffff);
    border-left: 3px solid var(--md-sys-color-primary, #0061a4);
}

.local-tree-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--md-sys-color-surface-container, #eef2f6);
    border-radius: 15px 15px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    gap: 10px;
    position: relative;
}

.local-tree-folder.collapsed .local-tree-folder-header {
    border-radius: 15px;
}

.local-tree-folder-header:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
}

.local-tree-folder-header.drag-folder-hover {
    background: var(--md-sys-color-primary-container, #dbeafe) !important;
    outline: 2px dashed var(--md-sys-color-primary, #0284c7) !important;
    outline-offset: -2px;
}

.local-tree-folder-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.local-tree-chevron {
    font-size: 20px;
    color: var(--md-sys-color-outline, #64748b);
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
    flex-shrink: 0;
}

.local-tree-folder.collapsed .local-tree-chevron {
    transform: rotate(-90deg);
}

.local-tree-folder-icon {
    font-size: 20px;
    color: var(--md-sys-color-primary, #0061a4);
    flex-shrink: 0;
}

.local-tree-folder-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.local-tree-folder-badge {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--md-sys-color-outline, #64748b);
    background: var(--md-sys-color-surface-container-highest, #cbd5e1);
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 悬浮在文件夹行时，在右侧展示快捷操作按钮 (简化无包裹纯图标按钮) */
.local-tree-folder-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.2s cubic-bezier(0.2, 0, 0, 1);
    transform: translateX(4px);
    flex-shrink: 0;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.local-tree-folder-header:hover .local-tree-folder-actions,
.local-tree-folder-header:focus-within .local-tree-folder-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

@media (hover: none) {
    .local-tree-folder-actions {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

.tree-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant, #64748b);
    cursor: pointer;
    transition: all 0.16s ease;
    box-shadow: none;
}

.tree-act-btn .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
    color: var(--md-sys-color-outline, #64748b);
    transition: color 0.16s ease, transform 0.16s ease;
}

.tree-act-btn:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    transform: none;
    box-shadow: none;
}

.tree-act-btn:hover .material-symbols-rounded {
    color: var(--md-sys-color-primary, #0061a4);
    transform: scale(1.08);
}

.tree-act-btn:active {
    transform: scale(0.92);
}

.tree-act-btn.danger {
    background: transparent;
    color: var(--md-sys-color-outline, #64748b);
}

.tree-act-btn.danger .material-symbols-rounded {
    color: var(--md-sys-color-outline, #64748b);
}

.tree-act-btn.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: none;
}

.tree-act-btn.danger:hover .material-symbols-rounded {
    color: var(--md-sys-color-error, #ba1a1a);
}

.local-tree-folder-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.local-tree-folder.collapsed .local-tree-folder-body {
    display: none;
}

.local-tree-empty-folder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1.5px dashed var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: 12px;
    color: var(--md-sys-color-outline, #64748b);
    font-size: 0.86rem;
    user-select: none;
    transition: all 0.15s ease;
}

.local-tree-empty-folder.drag-folder-hover {
    background: var(--md-sys-color-primary-container, #dbeafe) !important;
    border-color: var(--md-sys-color-primary, #0284c7) !important;
    color: var(--md-sys-color-primary, #0284c7);
}

.book-card-dragging {
    opacity: 0.35 !important;
    transform: scale(0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   下载学习数据 & 导出排版样式 (左右分栏 + MD3 统一美化 + 水印对齐)
   ========================================================================== */
.export-subview-header {
    background: var(--md-sys-color-surface);
    padding-top: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

#export-date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: none;
    padding-bottom: 0;
}

#export-date-presets .settings-cat-tab {
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 0.84rem;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-shape-full);
    transition: all 0.16s ease;
}

#export-date-presets .settings-cat-tab:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

#export-date-presets .settings-cat-tab.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 700;
}

.export-data-layout-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 6px;
    align-items: stretch;
}

@media (min-width: 920px) {
    .export-data-layout-container {
        grid-template-columns: minmax(360px, 440px) 1fr;
        gap: 20px;
        align-items: start;
    }
    .export-data-controls-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
        height: auto;
        box-sizing: border-box;
    }
    .export-data-controls-col .export-action-row {
        margin-top: 4px;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .export-data-preview-col {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }
    .export-data-preview-col .card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    .export-preview-viewport {
        flex: 1;
        min-height: 480px;
        max-height: 920px;
        overflow-y: auto;
        overflow-x: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
}

@media (max-width: 919px) {
    .export-data-controls-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .export-data-controls-col .export-action-row {
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .export-preview-viewport {
        min-height: 400px;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: auto;
    }

    /* 仅电脑端支持设置的项在手机端彻底隐藏 */
    .desktop-only-setting {
        display: none !important;
    }
}

/* 统一复选框与标签样式 (MD3 Filter Chip) */
.export-field-chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    user-select: none;
    padding: 5px 12px;
    border-radius: var(--md-shape-full);
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: all 0.16s ease;
}

.export-field-chk input[type="checkbox"] {
    display: none;
}

.export-field-chk::before {
    content: '';
    display: none;
    font-family: 'Material Symbols Rounded';
    font-size: 15px;
    line-height: 1;
}

.export-field-chk:has(input[type="checkbox"]:checked)::before {
    content: 'check';
    display: inline-block;
}

.export-field-chk:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
}

.export-field-chk:has(input[type="checkbox"]:checked) {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
    font-weight: 600;
}

.export-content-block {
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.export-content-block:hover {
    border-color: var(--md-sys-color-outline) !important;
}

/* 邮件卡片删除按钮圆润防拉伸样式 */
.mail-card-delete-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--md-sys-color-outline);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: background-color 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

.mail-card-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

/* 模拟纸张与页面字体统一 */
.export-preview-paper {
    background: #ffffff;
    color: #1e293b;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    min-height: 800px;
    padding: 36px 36px 36px 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Google Sans', 'Roboto', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.export-preview-paper.size-a4 {
    max-width: 680px;
}
.export-preview-paper.size-a5 {
    max-width: 520px;
    padding: 24px 24px 24px 24px;
}
.export-preview-paper.size-b5 {
    max-width: 600px;
    padding: 28px 28px 28px 28px;
}
.export-preview-paper.size-letter {
    max-width: 700px;
}

.export-preview-paper.theme-blue,
.export-pdf-render-root.theme-blue,
.theme-blue {
    --paper-primary: #0061a4;
    --paper-accent: #0284c7;
    --paper-bg: #ffffff;
    --paper-card-bg: #f8fafc;
    --paper-card-border: #e2e8f0;
}
.export-preview-paper.theme-minimal,
.export-pdf-render-root.theme-minimal,
.theme-minimal {
    --paper-primary: #0f172a;
    --paper-accent: #334155;
    --paper-bg: #ffffff;
    --paper-card-bg: #ffffff;
    --paper-card-border: #cbd5e1;
}
.export-preview-paper.theme-green,
.export-pdf-render-root.theme-green,
.theme-green {
    --paper-primary: #0f766e;
    --paper-accent: #059669;
    --paper-bg: #f0fdf4;
    --paper-card-bg: #ffffff;
    --paper-card-border: #bbf7d0;
}
.export-preview-paper.theme-warm,
.export-pdf-render-root.theme-warm,
.theme-warm {
    --paper-primary: #9a3412;
    --paper-accent: #ea580c;
    --paper-bg: #fffbeb;
    --paper-card-bg: #ffffff;
    --paper-card-border: #fed7aa;
}

.pdf-cards-list {
    display: block;
    width: 100%;
}

.pdf-card-item {
    display: block;
    margin-bottom: 8px;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-sizing: border-box;
}

/* 水印栏置于文档末尾，通过 flex 自动沉底且不遮挡内容 */
.pdf-watermark-bar {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.pdf-watermark-bar.toy-watermark {
    justify-content: space-between;
}

/* Markdown 和纯文本实时预览容器样式 */
.export-markdown-preview {
    background: #ffffff;
    color: #1e293b;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    min-height: 500px;
    padding: 30px 32px 40px;
    font-family: 'Google Sans', 'Roboto', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    line-height: 1.6;
}

.export-txt-preview {
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    min-height: 500px;
    padding: 24px 28px;
    font-family: 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    line-height: 1.55;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* ==========================================================================
   《高中考纲》搜索页专属样式：下划线义项弹层例句、例句/派生/辨析/反义区块
   ========================================================================== */
.gaokao-sense-meaning-underlined {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--md-sys-color-primary);
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
    border-radius: 4px;
    padding: 1px 2px;
}

.gaokao-sense-meaning-underlined:hover,
.gaokao-sense-meaning-underlined.active {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.gaokao-sense-examples-popup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 4px 24px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container-low);
    border-left: 3px solid var(--md-sys-color-primary);
    border-radius: 0 8px 8px 0;
    animation: fadeIn 0.15s ease;
}

.gaokao-example-audio-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.gaokao-example-audio-btn:hover {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-high);
}

.gaokao-sense-example-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gaokao-sense-example-en-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gaokao-sense-example-en {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    line-height: 1.45;
}

.gaokao-sense-example-zh {
    font-size: 0.84rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.45;
}

.gaokao-word-note-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 7px 12px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
}

.gaokao-extra-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-gaokao-extra-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 16px;
}

.search-gaokao-extra-container > .search-section-block {
    margin-bottom: 0 !important;
}

.gaokao-example-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
}

.gaokao-example-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gaokao-example-trans-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #1e293b);
    line-height: 1.4;
}

.gaokao-example-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gaokao-example-en-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gaokao-example-en-text {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}

.gaokao-example-zh-text {
    font-size: 0.85rem;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
}

.gaokao-example-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.18s ease;
}

.gaokao-example-voice-btn:hover {
    background: var(--md-sys-color-primary-container);
}

.gaokao-word-rel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.gaokao-word-rel-item:hover {
    background: var(--md-sys-color-surface-container);
}

.gaokao-word-rel-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.gaokao-word-rel-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
}

.gaokao-word-rel-trans {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}

.gaokao-antonym-inline-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--md-sys-color-error-container, #ffdad6);
    color: var(--md-sys-color-on-error-container, #410002);
    cursor: pointer;
}

.gaokao-disc-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
}

.gaokao-disc-words-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.gaokao-disc-word-chip {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--md-sys-color-primary-container);
}

.gaokao-disc-intro {
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
    line-height: 1.5;
}

.gaokao-disc-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gaokao-disc-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border-radius: 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
}

.gaokao-disc-item-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.gaokao-disc-item-word {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    cursor: pointer;
}

.gaokao-disc-item-exp {
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
}

.gaokao-disc-item-examples {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--md-sys-color-outline-variant);
}

.gaokao-disc-example-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 词书选择器：板块与类型筛选按钮及下拉菜单样式 */
.book-card-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 99px;
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card-section-btn:hover {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
}

.book-card-section-btn.has-filter {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-color: var(--md-sys-color-primary);
}

.book-card-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    padding: 0 8px;
    border-radius: 9999px;
    font-size: 0.73rem;
    font-weight: 600;
    font-family: inherit;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-on-surface-variant, #475569);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    flex-shrink: 0;
}

.book-card-filter-btn:hover {
    background: var(--md-sys-color-surface-container-highest, #cbd5e1);
    color: var(--md-sys-color-on-surface, #0f172a);
    border-color: var(--md-sys-color-primary, #0061a4);
}

.book-card-filter-btn.has-filter {
    background: rgba(0, 97, 164, 0.1);
    color: var(--md-sys-color-primary, #0061a4);
    border-color: rgba(0, 97, 164, 0.35);
}

.book-card-filter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-anchored-dropdown {
    position: fixed !important;
    z-index: 10050 !important;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    flex-direction: column;
    box-sizing: border-box;
    animation: fadeIn 0.12s ease;
    user-select: none;
}

.book-anchored-dropdown.align-right {
    left: auto;
    right: 0;
}

.book-anchored-dropdown.flip-up {
    top: auto;
    bottom: calc(100% + 4px);
}

/* 更多操作菜单 */
.book-actions-dropdown {
    min-width: 160px;
    padding: 6px;
}

.book-dd-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--md-sys-color-on-surface, #1e293b);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.book-dd-action-item:hover {
    background: var(--md-sys-color-surface-container, #f1f5f9);
}

.book-dd-action-item.danger {
    color: var(--md-sys-color-error, #ba1a1a);
}

.book-dd-action-item.danger:hover {
    background: var(--md-sys-color-error-container, #fee2e2);
}

.book-dd-action-item .material-symbols-rounded {
    font-size: 19px;
}

/* 板块筛选与类型筛选通用列表 */
.book-section-filter-dropdown,
.book-type-filter-dropdown {
    width: 240px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
    gap: 6px;
}

.book-dd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 6px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
}

.book-dd-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #1e293b);
    display: flex;
    align-items: center;
}

.book-dd-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.book-dd-link-btn {
    border: none;
    background: transparent;
    color: var(--md-sys-color-primary, #0061a4);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.book-dd-link-btn:hover {
    background: var(--md-sys-color-primary-container, #e0f2fe);
}

.book-dd-link-btn.muted {
    color: var(--md-sys-color-outline, #64748b);
    font-weight: 500;
}

.book-dd-dot {
    color: var(--md-sys-color-outline-variant, #cbd5e1);
    font-size: 0.75rem;
}

.book-dd-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

/* 单行勾选行（每行一个板块 / 每行一个类型） */
.book-dd-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.book-dd-check-row:hover {
    background: var(--md-sys-color-surface-container, #f1f5f9);
}

.book-dd-check-row.active {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
}

.book-dd-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--md-sys-color-primary, #0061a4);
    margin: 0;
    flex-shrink: 0;
}

.book-dd-row-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #1e293b);
}

.book-dd-row-count {
    font-size: 0.75rem;
    color: var(--md-sys-color-outline, #64748b);
    font-family: inherit;
    flex-shrink: 0;
}

.book-dd-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    margin-top: 2px;
}

.book-dd-summary {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--md-sys-color-primary, #0061a4);
    font-family: inherit;
}

.book-dd-apply-btn {
    padding: 4px 14px;
    border-radius: 9999px;
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
    border: none;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.book-dd-apply-btn:hover {
    background: var(--md-sys-color-on-primary-container, #004c82);
    box-shadow: 0 2px 6px rgba(0, 97, 164, 0.25);
}

.sf-section-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    font-size: 0.78rem;
    font-weight: 700;
}

.sf-section-chip:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
}

.sf-section-chip.active {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
}

.section-filter-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 10px;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    text-align: center;
}

.section-filter-chip:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
}

.section-filter-chip.selected,
.section-filter-chip.active {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
}

/* 词书内容查看子页面：统一大卡片与折叠详情抽屉样式 (参考背词小结页面) */
.book-viewer-unified-card {
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.book-viewer-word-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.book-viewer-word-item:last-child {
    border-bottom: none;
}

.book-viewer-word-item:hover {
    background: var(--md-sys-color-surface-container-low, #f8fafc);
}

.book-viewer-word-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.book-viewer-word-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.book-viewer-word-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface);
}

.book-viewer-word-phone {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline);
    font-family: 'Roboto Mono', monospace;
}

.book-viewer-word-index {
    font-size: 0.74rem;
    color: var(--md-sys-color-outline);
    font-family: monospace;
}

.book-viewer-word-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.book-viewer-act-btn {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.book-viewer-act-btn .material-symbols-rounded {
    font-size: 15px !important;
}

.book-viewer-act-btn.mastered {
    background: var(--md-sys-color-success, #16a34a) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.book-viewer-chevron {
    font-size: 20px;
    color: var(--md-sys-color-outline);
    transition: transform var(--md-motion-standard, 0.2s ease);
    flex-shrink: 0;
    margin-left: 2px;
}

.book-viewer-word-item.open .book-viewer-chevron {
    transform: rotate(180deg);
}

.book-viewer-word-drawer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #e2e8f0);
    animation: fadeIn 0.15s ease;
}

.book-viewer-note {
    font-size: 0.82rem;
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container, #e0f2fe);
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.book-viewer-meanings {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
}

.book-viewer-examples {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    border-left: 3px solid var(--md-sys-color-primary);
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.book-viewer-examples-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.book-viewer-examples-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.book-viewer-example-item {
    font-size: 0.84rem;
    line-height: 1.45;
}

.book-viewer-example-trans {
    font-size: 0.75rem;
    color: var(--md-sys-color-primary);
    font-weight: 600;
    margin-bottom: 2px;
}

.book-viewer-example-en {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

.book-viewer-example-zh {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8rem;
    margin-top: 2px;
}

.book-viewer-tags-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
}

.book-viewer-tag-group strong {
    margin-right: 4px;
}

.book-viewer-tag-group.derivative {
    color: #059669;
}

.book-viewer-tag-group.mistake {
    color: var(--md-sys-color-error, #ba1a1a);
}

.book-viewer-tag-group.antonym {
    color: #d97706;
}

/* ==========================================================================
   VIEW 17: 独立词书内容浏览页面 (view-book-content)
   根据不同结构的词书做自适应渲染 (文言实词 / 详尽词典 / 双音标词库 / 短语搭配 / 精简词表)
   ========================================================================== */
#view-book-content {
    background: var(--md-sys-color-surface, #f8fafc);
    min-height: 100vh;
    padding-bottom: 60px;
    box-sizing: border-box;
    overflow-y: auto;
}

.book-content-page-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.book-content-top-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.book-content-title-wrap {
    flex: 1;
    min-width: 0;
}

.book-content-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.book-content-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--md-sys-color-on-surface, #0f172a);
    line-height: 1.3;
}

.book-content-arch-badge {
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-primary, #0061a4);
    font-size: 0.75rem;
    font-weight: 700;
}

.book-content-subtitle {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline, #64748b);
    margin-top: 2px;
}

.book-content-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 搜索与掌握度工具栏卡片 */
.book-content-toolbar-card {
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.book-content-search-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.book-content-search-box {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.book-content-search-icon {
    position: absolute;
    left: 12px;
    font-size: 20px;
    color: var(--md-sys-color-outline, #64748b);
    pointer-events: none;
}

.book-content-search-field {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 40px;
    border-radius: 12px;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    color: var(--md-sys-color-on-surface, #0f172a);
    font-size: 0.92rem;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.book-content-search-field:focus {
    outline: none;
    border-color: var(--md-sys-color-primary, #0061a4);
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    box-shadow: 0 0 0 3px rgba(0, 97, 164, 0.12);
}

.book-content-search-clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.book-content-search-clear:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
}

.book-content-mastery-pill {
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-primary, #0061a4);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
}

/* 筛选工具栏行 */
.book-content-filter-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #e2e8f0);
}

.book-content-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.book-content-filter-row.scrollable-x {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

.book-content-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--md-sys-color-outline, #64748b);
    white-space: nowrap;
    min-width: 48px;
}

.book-content-chips-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.book-content-chip {
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    color: var(--md-sys-color-on-surface-variant, #475569);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.book-content-chip:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    border-color: var(--md-sys-color-primary, #0061a4);
}

.book-content-chip.active {
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
    border-color: var(--md-sys-color-primary, #0061a4);
}

/* 词条列表容器 */
.book-content-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 双列布局（双音标词库与速记词表） */
.book-content-list.layout-phonetic_vocab,
.book-content-list.layout-concise_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    .book-content-list.layout-phonetic_vocab,
    .book-content-list.layout-concise_list {
        grid-template-columns: 1fr;
    }
}

/* 通用词条卡片基础 */
.bc-item-card {
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.bc-item-card:hover {
    border-color: var(--md-sys-color-primary, #0061a4);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.bc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bc-word-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.bc-headword {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--md-sys-color-on-surface, #0f172a);
    line-height: 1.25;
}

.bc-headword.phrase-text {
    font-size: 1.05rem;
    color: var(--md-sys-color-primary, #0061a4);
}

.bc-phone {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline, #64748b);
    font-family: 'Roboto Mono', monospace;
}

.bc-section-badge {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--md-sys-color-primary-container, #dbeafe);
    color: var(--md-sys-color-primary, #0061a4);
    font-size: 0.72rem;
    font-weight: 700;
}

.bc-type-badge {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

.bc-type-badge.phrase {
    background: #e0f2fe;
    color: #0369a1;
}

.bc-index-num {
    font-size: 0.74rem;
    color: var(--md-sys-color-outline, #94a3b8);
    font-family: monospace;
}

.bc-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bc-act-btn {
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    color: var(--md-sys-color-on-surface-variant, #475569);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bc-act-btn .material-symbols-rounded {
    font-size: 16px;
}

.bc-act-btn:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-primary, #0061a4);
    border-color: var(--md-sys-color-primary, #0061a4);
}

.bc-act-btn.mastered {
    background: var(--md-sys-color-success, #16a34a);
    color: #ffffff;
    border-color: transparent;
}

.bc-act-btn.mastered:hover {
    background: #15803d;
}

.bc-act-btn.danger {
    color: var(--md-sys-color-error, #ba1a1a);
}

.bc-act-btn.danger:hover {
    background: var(--md-sys-color-error-container, #fee2e2);
    border-color: var(--md-sys-color-error, #ba1a1a);
}

.bc-act-btn.edit {
    color: #d97706;
}

.bc-act-btn.edit:hover {
    background: #fef3c7;
    border-color: #d97706;
}

.bc-chevron {
    font-size: 20px;
    color: var(--md-sys-color-outline, #94a3b8);
    transition: transform 0.2s ease;
}

.bc-item-card.expanded .bc-chevron {
    transform: rotate(180deg);
}

/* 释义行与词性徽标 */
.bc-card-meanings {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bc-meaning-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.bc-pos-badge {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.bc-meaning-text {
    color: var(--md-sys-color-on-surface, #1e293b);
}

.bc-word-note {
    font-size: 0.8rem;
    color: var(--md-sys-color-primary, #0061a4);
    background: var(--md-sys-color-primary-container, #e0f2fe);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
}

/* 详尽抽屉 (例句/衍生词/辨析/干扰项) */
.bc-item-drawer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn 0.15s ease;
}

.bc-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bc-drawer-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--md-sys-color-outline, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
}

.bc-drawer-title .material-symbols-rounded {
    font-size: 15px;
}

.bc-examples-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--md-sys-color-primary, #0061a4);
}

.bc-example-item {
    font-size: 0.82rem;
    line-height: 1.45;
}

.bc-ex-en {
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #0f172a);
}

.bc-ex-zh {
    color: var(--md-sys-color-outline, #64748b);
    font-size: 0.76rem;
    margin-top: 1px;
}

.bc-chips-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bc-tag-chip {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bc-tag-chip.derivative {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.bc-tag-chip.mistake {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.bc-tag-chip.antonym {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.bc-discrim-text {
    font-size: 0.82rem;
    color: var(--md-sys-color-on-surface, #1e293b);
    line-height: 1.5;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    padding: 8px 12px;
    border-radius: 8px;
}

/* 双音标卡片专属样式 */
.bc-phones-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.bc-phone-pill {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline, #64748b);
    font-family: 'Roboto Mono', monospace;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--md-sys-color-surface-container, #f1f5f9);
    padding: 2px 7px;
    border-radius: 6px;
}

.bc-phone-lang {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--md-sys-color-primary, #0061a4);
}

/* 短语卡片专属样式 */
.bc-phrase-meaning {
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.phrase-arrow {
    font-size: 18px;
    color: var(--md-sys-color-primary, #0061a4);
    flex-shrink: 0;
    margin-top: 1px;
}

.phrase-def-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #0f172a);
    line-height: 1.45;
}

.bc-mistake-bar {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff1f2;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #ffe4e6;
}

.bc-mistake-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #be123c;
    white-space: nowrap;
}

/* 速记卡片专属样式 */
.bc-concise-meaning {
    margin-top: 6px;
    font-size: 0.88rem;
    color: var(--md-sys-color-on-surface-variant, #475569);
    line-height: 1.5;
}

/* 文言实词卡片专属样式 */
.shici-card {
    border-left: 4px solid var(--md-sys-color-primary, #0061a4);
}

.shici-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.shici-seal-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--md-sys-color-primary, #0061a4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 900;
    font-family: "Songti SC", "SimSun", serif;
    box-shadow: 0 2px 6px rgba(0, 97, 164, 0.25);
    flex-shrink: 0;
}

.shici-title-meta {
    flex: 1;
    min-width: 0;
}

.shici-pinyin-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shici-pinyin-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #0f172a);
    font-family: 'Roboto Mono', monospace;
}

.shici-senses-count-tag {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-outline, #64748b);
    font-weight: 600;
}

.shici-index-tag {
    font-size: 0.72rem;
    color: var(--md-sys-color-outline, #94a3b8);
    margin-top: 2px;
}

.shici-senses-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shici-sense-block {
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 10px;
    padding: 10px 14px;
}

.shici-sense-block.star-focus {
    border-color: #f59e0b;
    background: #fffbeb;
}

.shici-sense-title-bar {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.shici-pos-chip {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--md-sys-color-secondary-container, #e2e8f0);
    color: var(--md-sys-color-on-secondary-container, #334155);
    font-size: 0.72rem;
    font-weight: 700;
}

.shici-sense-def {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #0f172a);
}

.shici-star-badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid #fde68a;
}

.shici-sense-idx {
    font-size: 0.72rem;
    color: var(--md-sys-color-outline, #94a3b8);
    margin-left: auto;
}

.shici-examples-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #cbd5e1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shici-ex-item {
    font-size: 0.85rem;
    line-height: 1.5;
}

.shici-ex-sentence {
    color: var(--md-sys-color-on-surface, #0f172a);
}

.shici-highlight-char {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 900;
}

.shici-ex-source {
    font-size: 0.76rem;
    color: var(--md-sys-color-outline, #64748b);
    margin-top: 2px;
}

.shici-ex-anno {
    font-size: 0.78rem;
    color: #475569;
    margin-top: 2px;
}

.book-content-load-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.book-content-end-hint {
    font-size: 0.8rem;
    color: var(--md-sys-color-outline, #94a3b8);
    text-align: center;
}

.book-content-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--md-sys-color-outline, #64748b);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.book-content-empty .material-symbols-rounded {
    font-size: 40px;
    opacity: 0.5;
}

/* ==========================================================================
   词书内容统一列表与独立页面优化 (Unified Book Content View)
   ========================================================================== */

.book-content-search-card {
    margin-bottom: 14px;
}

.book-content-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1.5px solid var(--md-sys-color-outline-variant, #cbd5e1);
    border-radius: 9999px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.book-content-search-box:focus-within {
    border-color: var(--md-sys-color-primary, #0061a4);
    box-shadow: 0 2px 12px rgba(0, 97, 164, 0.15);
}

.book-content-search-icon {
    font-size: 20px;
    color: var(--md-sys-color-outline, #64748b);
    flex-shrink: 0;
}

.book-content-search-field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--md-sys-color-on-surface, #0f172a);
}

.book-content-search-clear {
    border: none;
    background: transparent;
    color: var(--md-sys-color-outline, #94a3b8);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.book-content-search-clear:hover {
    color: var(--md-sys-color-on-surface, #0f172a);
}

/* 统一词条列表容器 (图10: 将所有词条放在一起，不要用独立容器分隔) */
.book-content-unified-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.book-content-unified-card {
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
    border: 1.5px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.bc-unified-item {
    border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    transition: background 0.15s ease;
    cursor: pointer;
    background: var(--md-sys-color-surface-container-lowest, #ffffff);
}

.bc-unified-item:last-child {
    border-bottom: none;
}

.bc-unified-item:hover {
    background: var(--md-sys-color-surface-container-low, #f8fafc);
}

.bc-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.bc-item-title-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.bc-headword {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #0f172a);
}

.bc-phone {
    font-size: 0.88rem;
    color: var(--md-sys-color-outline, #64748b);
    font-family: 'Roboto Mono', 'Lucida Sans Unicode', monospace;
}

.bc-phrase-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--md-sys-color-secondary-container, #e0e7ff);
    color: var(--md-sys-color-on-secondary-container, #3730a3);
    font-weight: 700;
}

.bc-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 圆形操作按钮 (图10: 查词只保留图标、发音) */
.btn-circle-icon-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    color: var(--md-sys-color-on-surface-variant, #475569);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.btn-circle-icon-action:hover {
    background: var(--md-sys-color-primary-container, #e0f2fe);
    color: var(--md-sys-color-primary, #0061a4);
    border-color: var(--md-sys-color-primary, #0061a4);
}

.btn-circle-icon-action.danger:hover {
    background: var(--md-sys-color-error-container, #fee2e2);
    color: var(--md-sys-color-error, #ba1a1a);
    border-color: var(--md-sys-color-error, #ba1a1a);
}

.btn-circle-icon-action .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}

/* 熟词 / 已掌握 优化胶囊按钮配色 (图10: 优化配色) */
.btn-mastered-pill {
    height: 30px;
    padding: 0 12px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    background: var(--md-sys-color-surface-container, #f1f5f9);
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
    color: var(--md-sys-color-on-surface-variant, #475569);
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-mastered-pill:hover {
    background: var(--md-sys-color-surface-container-high, #e2e8f0);
    color: var(--md-sys-color-on-surface, #1e293b);
}

.btn-mastered-pill.mastered {
    background: #e6f4ea !important;
    border: 1px solid #ceead6 !important;
    color: #137333 !important;
}

.btn-mastered-pill.mastered:hover {
    background: #ceead6 !important;
}

.btn-mastered-pill .material-symbols-rounded {
    font-size: 16px;
    line-height: 1;
}

.bc-expand-chevron {
    font-size: 22px;
    color: var(--md-sys-color-outline, #94a3b8);
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
    user-select: none;
}

.bc-unified-item.expanded .bc-expand-chevron {
    transform: rotate(180deg);
}

/* 抽屉与详情结构 */
.bc-item-drawer {
    padding: 4px 16px 16px 16px;
    border-top: 1px dashed var(--md-sys-color-outline-variant, #e2e8f0);
    animation: fadeIn 0.15s ease;
}

.bc-meanings-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

/* 修复图7：抽屉内部各区块间距，解决“上下靠的太紧了” */
.bc-drawer-section {
    margin-top: 14px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 图7：衍生词汇优化配色 */
.bc-tag-chip.derivative {
    background: var(--md-sys-color-surface-container, #f1f5f9) !important;
    border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1) !important;
    color: var(--md-sys-color-on-surface, #1e293b) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bc-tag-chip.derivative .bc-deriv-name {
    color: var(--md-sys-color-primary, #0061a4);
    font-weight: 700;
}

.bc-tag-chip.derivative .bc-deriv-trans {
    color: var(--md-sys-color-on-surface-variant, #475569);
    font-size: 0.82rem;
}

/* 图9：考点与词义辨析美化排版，彻底解决 [object Object] */
.bc-discrim-block {
    background: var(--md-sys-color-surface-container-low, #f8fafc);
    border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bc-discrim-words {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bc-discrim-word-chip {
    font-weight: 700;
    color: var(--md-sys-color-primary, #0061a4);
    background: var(--md-sys-color-primary-container, #e0f2fe);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
}

.bc-discrim-vs {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--md-sys-color-outline, #94a3b8);
    text-transform: uppercase;
}

.bc-discrim-intro {
    font-size: 0.82rem;
    color: var(--md-sys-color-outline, #64748b);
    line-height: 1.4;
}

.bc-discrim-item {
    font-size: 0.84rem;
    line-height: 1.5;
    padding: 6px 0;
    border-bottom: 1px dashed var(--md-sys-color-outline-variant, #e2e8f0);
}

.bc-discrim-item:last-child {
    border-bottom: none;
}

.bc-discrim-item-word {
    font-weight: 700;
    color: var(--md-sys-color-on-surface, #0f172a);
    margin-right: 6px;
}

.bc-discrim-item-exp {
    color: var(--md-sys-color-on-surface-variant, #334155);
}

.bc-discrim-item-examples {
    margin-top: 6px;
    padding-left: 10px;
    border-left: 2px solid var(--md-sys-color-primary, #0061a4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bc-discrim-ex-row {
    font-size: 0.8rem;
    line-height: 1.45;
}

.bc-discrim-ex-en {
    font-weight: 600;
    color: var(--md-sys-color-on-surface, #0f172a);
}

.bc-discrim-ex-zh {
    color: var(--md-sys-color-outline, #64748b);
    font-size: 0.78rem;
}