/* ══════════════════════════════════════════════════════════════
   LYRIC LEARNING · LIQUID MOBIUS — Mobile Design System
   Project: Liquid Mobius v2.1.1 (Recovery & Enhancement)
   Activation: screens ≤ 900px ONLY
   Philosophy: 剧场式沉浸 · 极致缩放 · 拇指优先
   ══════════════════════════════════════════════════════════════ */

/* ─── Global Mobile Variables ─── */
:root {
    --mob-nav-h: 60px;
    --mob-minibar-h: 52px;
    --mob-topbar-h: 52px;
    --mob-safe-b: env(safe-area-inset-bottom, 0px);
    --mob-safe-t: env(safe-area-inset-top, 0px);
    --mob-pad: 16px;
    --mob-radius: 14px;
    --mob-sheet-peek: 44px;
    /* V2.1: Reduced Peek */
    --mob-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mob-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 · BASE RESETS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }

    /* 1. 移动端全局空间隔离：剥离多余的底部留白 */
    .view-container {
        /* 默认只保留悬浮导航栏 (Nav Island) 和安全区的距离，剥离 minibar 的冗余 */
        padding-bottom: calc(var(--mob-nav-h) + 20px + var(--mob-safe-b)) !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        /* 防拉伸适配：大屏幕下通过居中容器防止 UI 过度伸展 */
        margin: 0 auto;
        background: var(--bg-void);
        position: relative;
    }

    /* 2. 精准靶向：仅在 Decode 视图为“单词解析栏”预留额外高度 */
    #alchemy-view {
        padding-bottom: calc(var(--mob-nav-h) + 64px + 20px + var(--mob-safe-b)) !important;
        margin: 0 auto;
    }

    /* ─── Top Nav ─── */
    .top-nav {
        height: var(--mob-topbar-h);
        padding: 0 var(--mob-pad);
        background: var(--bg-void);
        /* 防拉伸适配 */
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    /* Mobile collection topbar */
    .collection-topbar {
        height: var(--mob-topbar-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--mob-pad);
    }

    .collection-topbar .collection-title {
        flex: 1;
        text-align: center;
        margin: 0;
        font-size: 16px;
    }

    /* Mobile segmented tabs */
    .segmented-tabs {
        display: flex;
        border-bottom: 1px solid var(--bg-border);
        flex-shrink: 0;
        padding: 0;
    }

    .tab-button {
        flex: 1;
        padding: 12px 4px;
        text-align: center;
        font-family: var(--font-ui);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--text-muted);
        cursor: pointer;
        text-transform: uppercase;
        position: relative;
        top: 1px;
        transition: all 0.3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tab-button.active {
        color: var(--text-primary);
        border-bottom: 2px solid var(--gold);
    }

    /* Mobile collection content */
    #collection-content {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }

    .nav-title {
        font-size: 8px;
        letter-spacing: 2.5px;
        opacity: 0.7;
    }

    /* ─── PC-only elements ─── */
    .exit-btn {
        display: none !important;
    }

    /* V2.1: Restored & Restyled Nav Arrows (毛玻璃悬浮态) */
    .playlist-nav-arrow {
        display: flex !important;
        position: fixed !important;
        top: 50% !important;
        /* 严格垂直居中 */
        z-index: 9999 !important;
        /* 确保不被其它容器遮挡 */
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        /* 高级毛玻璃背景 */
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
        transform: translateY(-50%) scale(1);
    }

    /* 箭头图标颜色改为核心红 */
    .playlist-nav-arrow svg {
        stroke: #C05B4D !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* 紧贴屏幕边缘 */
    .playlist-nav-arrow.prev,
    #playlist-nav-prev {
        left: 4px !important;
    }

    .playlist-nav-arrow.next,
    #playlist-nav-next {
        right: 4px !important;
    }

    .status-bar {
        display: none !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 · HUB VIEW — Vertical Layout
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #hub-view {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .hub-layout {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: auto;
    }

    .hub-left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 40px 24px 140px 24px !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    .hub-brand-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .hub-left-tag {
        font-size: 8px;
        letter-spacing: 4px;
        margin-bottom: 10px;
        opacity: 0.6;
    }

    .hub-main-title {
        font-size: clamp(48px, 15vw, 60px) !important;
        letter-spacing: -2.5px !important;
        line-height: 0.9 !important;
        margin-bottom: 20px !important;
    }

    .hub-subtitle {
        font-size: 11px;
        line-height: 1.4;
        max-width: 250px;
        margin-top: 40 !important;
        margin-bottom: 8% !important;
        opacity: 0.6;
        letter-spacing: 2px !important;
    }

    .hub-start-btn {
        padding: 14px 40px !important;
        font-size: 10px !important;
        margin-top: 0px !important;
        align-self: center !important;
        /* Force center align */
    }

    .hub-main-title {
        font-size: clamp(48px, 18vw, 64px) !important;
        letter-spacing: -2px !important;
        line-height: 0.9 !important;
        /* Tighten vertical stack of 乐海 / 拾词 */
        margin-bottom: 12px !important;
    }

    .hub-subtitle {
        font-size: 11px;
        line-height: 1.5;
        max-width: 240px;
        margin-top: 16px !important;
        margin-bottom: 1px !important;
        opacity: 0.6;
        letter-spacing: 2px;
    }

    .hub-start-btn {
        padding: 14px 32px !important;
        font-size: 9px !important;
        margin-top: 0px !important;
        align-self: flex-start !important;
    }

    /* Recent Archive Adaptation */
    .recent-archive-widget {
        margin-top: 24px !important; 
        margin-bottom: 24px !important;
        align-self: center !important;
        max-width: 260px !important;
        padding: 10px 16px !important;
    }

    .vinyl-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .recent-track {
        font-size: 10px !important;
        max-width: 160px !important;
    }

    .hub-feature-card {
        padding: 16px var(--mob-pad);
        min-height: 64px;
    }

    .hub-feature-title {
        font-size: 16px;
    }

    .hub-feature-subtitle {
        font-size: 11px;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 · ALCHEMY VIEW — Theatre
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #alchemy-view {
        overflow: hidden;
        /* Note: padding-bottom has been moved to global targeting section for precision */
    }

    .alchemy-topbar {
        height: calc(var(--mob-topbar-h) - 4px);
        padding: 0;
    }

    .search-input {
        font-size: 14px;
        padding: 0 12px;
    }

    .extract-btn {
        padding: 0 16px;
        font-size: 9px;
        font-weight: 700;
    }

    .alchemy-workspace {
        height: calc(100vh - var(--mob-topbar-h) - var(--mob-topbar-h) + 8px);
    }

    /* V2.1: Typography Correction */
    .song-title-main {
        font-size: clamp(22px, 7vw, 28px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100vw - 120px) !important;
        /* Avoid play button overlay */
        line-height: 1.2;
    }

    .song-artist-sub {
        font-size: 10px;
        letter-spacing: 2px;
    }

    /* V2.1.3: Playback Control Adjustment (还原高级磁卡风格 + 修复溢出强制垂直堆叠) */
    .lyrics-song-header {
        display: flex !important;
        flex-direction: column !important;
        /* 核心：强制上下排列 */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        /* 给标题和播放器之间留出呼吸空间 */
        width: 100% !important;
        margin-bottom: 32px;
    }

    /* 释放标题的宽度限制，允许自然换行 */
    .lyrics-title-row,
    .header-main-group {
        width: 100% !important;
        display: contents !important;
        /* 核心修复：消除容器层级，让其子项参与父级的 flex 排序 */
    }

    .song-title-main {
        font-size: clamp(22px, 7vw, 28px) !important;
        white-space: normal !important;
        /* 核心：允许超长标题自然换行，拒绝省略号 */
        word-break: break-word !important;
        max-width: 100% !important;
        line-height: 1.1 !important;
        padding-right: 20px !important;
        margin-bottom: 4px !important;
    }

    .song-artist-sub {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 12px !important;
        opacity: 0.6;
    }

    .header-player-card {
        order: 3 !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        /* 清除默认外边距 */
        padding: 8px 16px !important;
        background: rgba(0, 0, 0, 0.03) !important;
        /* 极淡的纸张水印底色 */
        border: none !important;
        border-radius: 6px !important;
        position: relative;
        width: calc(100vw - 40px) !important;
        /* 动态宽度：屏幕宽度减去左右边距 */
        max-width: 280px !important;
        transform: none !important;
        scale: 1 !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
        /* 让磁卡乖乖靠左对齐 */
    }

    /* 左侧标志性红线 */
    .header-player-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 3px;
        background: #C05B4D;
        border-radius: 2px;
    }

    /* 纯正的核心红播放键 */
    .header-music-btn {
        width: 36px !important;
        height: 36px !important;
        background: #C05B4D !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        margin-right: 12px !important;
        box-shadow: 0 4px 12px rgba(192, 91, 77, 0.2) !important;
    }

    /* 重新显影元数据文字 */
    .player-info {
        display: flex !important;
        flex-direction: column !important;
    }

    .lyrics-scroll {
        padding: 16px var(--mob-pad) calc(var(--mob-sheet-peek) + 60px);
    }

    .lyrics-line {
        font-size: clamp(16px, 4.5vw, 18px) !important;
        margin-bottom: 0.8em;
    }

    /* ── Bottom Sheet ── */
    .learning-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 86vh;
        z-index: 100;
        border-radius: var(--mob-radius) var(--mob-radius) 0 0;
        border-top: 1px solid var(--bg-border);
        background: var(--bg-surface);
        backdrop-filter: blur(20px) saturate(160%);
        /* V2.1.1: Peek = drag-handle(18px) + tab-bar(44px) + nav-island(68px) + nav-gap(20px) */
        transform: translateY(calc(100% - var(--mob-nav-h) - 20px - var(--mob-safe-b) - 44px - 18px));
        transition: transform 450ms var(--mob-ease);
        will-change: transform;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.4);
    }

    .learning-panel::before {
        content: '';
        display: block;
        width: 32px;
        height: 4px;
        border-radius: 2px;
        background: var(--bg-border);
        margin: 8px auto 6px;
        flex-shrink: 0;
    }

    .learning-panel.mob-full-expand {
        transform: translateY(0);
        z-index: 9000;
    }

    .tab {
        font-size: 10px;
        padding: 12px 0;
    }

    .analysis-card {
        padding: 16px var(--mob-pad);
    }

    .word-card-item {
        padding: 12px var(--mob-pad);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 · COLLECTION, PLAYLISTS, RECOMMENDATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* V2.1: Shrink Recommendations */
    .hero-magazine-card {
        gap: 12px;
        margin-bottom: 24px;
    }

    .hero-cover-wrapper {
        height: 160px;
    }

    .hero-title {
        font-size: 22px;
        margin: 4px 0;
    }

    .hero-artist {
        font-size: 10px;
    }

    .editorial-quote {
        font-size: 12px;
        line-height: 1.5;
        border-left-width: 2px;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: HISTORY CAPSULE - VERTICAL MOBILE (V3.4)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    body .history-capsule {
        flex-direction: column !important;
        /* 核心：从横向改为垂直堆叠 */
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 第一行：日期变为顶部通栏 */
    body .history-date {
        width: 100% !important;
        flex-direction: row !important;
        /* 日期和年份横向并排 */
        align-items: baseline !important;
        justify-content: flex-start !important;
        padding: 16px 24px 12px !important;
        border-right: none !important;
        /* 抹除之前的右侧分割线 */
        border-bottom: 1px dashed rgba(0, 0, 0, 0.1) !important;
        /* 改为底部虚线分隔 */
        gap: 12px !important;
    }

    body .history-date .month-day {
        font-size: 22px !important;
        margin: 0 !important;
    }

    body .history-date .year {
        font-size: 14px !important;
    }

    /* 第二、三行：内容区 */
    body .history-content {
        width: 100% !important;
        padding: 20px 24px 24px !important;
        /* 释放横向空间 */
    }

    body .history-event-tag {
        margin-bottom: 16px !important;
    }

    body .history-song-meta {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        display: block !important;
    }

    body .history-song-meta span {
        display: block !important;
        /* 将歌手名单独换行，层级更清晰 */
        margin-left: 0 !important;
        margin-top: 6px !important;
        font-size: 12px !important;
    }

    body .history-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-top: 0 !important;
        color: var(--text-secondary) !important;
    }

    /* 终极减法：在手机端隐藏封面图，保留纯粹的文字排版空间 */
    body .history-cover {
        display: none !important;
    }

    .playlist-expand {
        padding: 0 !important;
        /* V2.2.2: Removed padding to ensure grid alignment */
        margin-top: 0;
    }

    .btn-expand {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px;
        background: transparent;
        color: var(--gold);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 2px;
        border-top: 1px solid var(--bg-border);
        cursor: pointer;
    }



    .songs-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
        padding: 8px;
        align-items: stretch;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 · FLOATING NAVIGATION ISLAND (RECOVERED)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #mobileNavIsland {
        position: fixed;
        bottom: calc(10px + var(--mob-safe-b));
        left: 50%;
        transform: translateX(-50%) translateY(0);
        width: calc(100% - 32px);
        max-width: 420px;
        height: var(--mob-nav-h);
        z-index: 8000;

        background: rgba(8, 10, 12, 0.82);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 30px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;

        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 8px;
        transition: transform 380ms var(--mob-ease), opacity 380ms ease;
    }

    #mobileNavIsland.nav-hidden {
        transform: translateX(-50%) translateY(120%);
        opacity: 0;
    }

    #mobileNavIsland.force-hidden {
        transform: translateX(-50%) translateY(150%) scale(0.9) !important;
        opacity: 0 !important;
    }

    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 4px;
        border-radius: 28px;
        transition: all 220ms var(--mob-spring);
    }

    .mob-nav-icon {
        width: 22px;
        height: 22px;
        stroke: var(--text-secondary);
        fill: none;
        stroke-width: 1.6;
        transition: stroke 220ms ease, transform 300ms var(--mob-spring);
    }

    .mob-nav-label {
        font-family: var(--font-ui);
        font-size: 10px;
        letter-spacing: 0.5px;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .mob-nav-item.active .mob-nav-icon {
        stroke: var(--gold);
        transform: translateY(-1px) scale(1.1);
    }

    .mob-nav-item.active .mob-nav-label {
        color: var(--gold);
    }

    .mob-nav-item.active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--gold);
        box-shadow: 0 0 8px var(--gold);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 6 · MINI PLAYER BAR (RECOVERED)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    #mobileMiniBar {
        position: fixed;
        bottom: calc(var(--mob-nav-h) + 20px + var(--mob-safe-b));
        left: 50%;
        transform: translateX(-50%) translateY(0);
        width: calc(100% - 32px);
        max-width: 420px;
        height: var(--mob-minibar-h);
        z-index: 7999;
        background: rgba(22, 27, 31, 0.92);
        backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid rgba(201, 168, 76, 0.15);
        border-radius: 14px;
        padding: 0 16px;
        display: none;
        align-items: center;
        gap: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    #mobileMiniBar.visible {
        display: flex;
        animation: bar-slide-up 0.4s var(--mob-ease);
    }

    .mob-mini-art {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--bg-elevated);
        border: 2px solid var(--gold-dim);
        overflow: hidden;
        position: relative;
    }

    .mob-mini-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mob-mini-art.spinning {
        animation: disc-spin 4s linear infinite;
    }

    .mob-mini-art::after {
        content: '';
        position: absolute;
        inset: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bg-void);
    }

    .mob-mini-info {
        flex: 1;
        overflow: hidden;
    }

    .mob-mini-title {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-mini-artist {
        font-size: 8px;
        letter-spacing: 1px;
        color: var(--gold);
        text-transform: uppercase;
        opacity: 0.8;
    }

    .mob-mini-play {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--bg-void);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: all 200ms var(--mob-spring);
    }

    @keyframes bar-slide-up {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(16px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes disc-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }



    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 8 · THEME OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    [data-theme="light"] #mobileNavIsland {
        background: rgba(250, 249, 245, 0.90);
        border-color: rgba(0, 0, 0, 0.07);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    [data-theme="light"] #mobileMiniBar {
        background: rgba(240, 240, 240, 0.94);
        border-color: rgba(171, 139, 101, 0.2);
    }

    [data-theme="warm"] #mobileNavIsland {
        background: rgba(247, 240, 223, 0.92);
        border-color: rgba(201, 102, 76, 0.12);
    }

    [data-theme="warm"] #mobileMiniBar {
        background: rgba(239, 229, 205, 0.94);
        border-color: rgba(201, 102, 76, 0.18);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 9 · ARCHIVE EMPTY STATE (Exquisite)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .archive-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        text-align: center;
        min-height: 400px;
        animation: fadeIn 0.6s ease-out;
    }

    .empty-icon-wrapper {
        position: relative;
        width: 120px;
        height: 120px;
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .empty-icon-ring {
        position: absolute;
        inset: 0;
        border: 1px solid var(--gold-dim);
        border-radius: 50%;
        opacity: 0.2;
        animation: pulse-ring 4s infinite linear;
    }

    .empty-icon-ring:nth-child(2) {
        animation-delay: -2s;
        opacity: 0.1;
    }

    .empty-icon-main {
        width: 48px;
        height: 48px;
        stroke: var(--gold);
        stroke-width: 1;
        fill: none;
        opacity: 0.6;
        animation: floating-y 3s infinite ease-in-out;
    }

    .empty-text-group {
        margin-bottom: 40px;
    }

    .empty-title {
        font-family: var(--font-ui);
        font-size: 11px;
        letter-spacing: 5px;
        color: var(--text-secondary);
        text-transform: uppercase;
        margin-bottom: 12px;
        opacity: 0.7;
    }

    .empty-quote {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-muted);
        font-style: italic;
        line-height: 1.8;
        max-width: 280px;
    }

    .empty-cta-btn {
        padding: 14px 32px;
        background: transparent;
        border: 1px solid var(--gold-dim);
        color: var(--gold);
        font-family: var(--font-zh), var(--font-display);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 2px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
    }

    @keyframes pulse-ring {
        0% {
            transform: scale(0.85);
            opacity: 0;
        }

        50% {
            opacity: 0.3;
        }

        100% {
            transform: scale(1.3);
            opacity: 0;
        }
    }

    @keyframes floating-y {

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

        50% {
            transform: translateY(-10px);
        }
    }

    /* ─── V2.1.6: 彻底修复今日推荐 (发现更多 & 重温收藏) 的溢出问题 ─── */

    /* 1. 锁死父容器，杜绝一切横向溢出 */
    body #recommendations-content {
        width: 100vw !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 2. 发现更多：精致的两列正方形矩阵 */
    body .discovery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 严格两列 */
        gap: 16px !important;
        /* 调整合理的呼吸间距 */
        width: 100% !important;
        padding: 0 !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
    }

    body .discovery-card {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* 防止内部元素乱跑 */
    }

    body .discovery-cover {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        /* 核心：强制裁切为正方形 */
        object-fit: cover !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    /* 优化字号与折行，防止文字撑破卡片 */
    body .discovery-title {
        font-family: var(--font-display) !important;
        font-size: 15px !important;
        /* 字号改小，显得更精致 */
        white-space: normal !important;
        /* 允许换行 */
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        word-break: break-word !important;
    }

    body .discovery-artist {
        font-size: 11px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: REVISIT ARCHIVE FINAL ALIGNMENT (V2.1.9)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* 1. 强制容器宽度与标题完全对齐，杜绝偏移 */
    body .flashcard-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 绝对 50/50 分割 */
        gap: 12px !important;
        width: 100% !important;
        margin: 16px 0 40px 0 !important;
        padding: 0 !important;
        /* 强制清空内边距，解决偏移核心 */
        justify-items: stretch !important;
        /* 强制卡片撑满格子，取消居中带来的空隙 */
        align-items: start !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* 2. 闪卡容器：彻底归零化 */
    body .flashcard {
        width: 100% !important;
        margin: 0 !important;
        /* 强制清空外边距 */
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        /* 维持正方形比例 */
        transform: none !important;
        position: relative !important;
        left: 0 !important;
        /* 强制靠左 */
    }

    /* 3. 兼容性多行截断 (标准属性 + Webkit) */
    body .flashcard-sentence {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 5 !important;
        line-clamp: 5 !important;
        /* 标准属性兼容 */
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        padding: 0 4px !important;
    }

    /* 4. 确保标题和分割线没有任何残留的左偏 */
    body #recommendations-content .section-heading {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid var(--bg-border) !important;
    }

    /* 5. 修正卡片内部的层级，防止阴影切割 */
    body .flashcard-face {
        padding: 14px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
    }

    /* 6. 缩小背面的底部信息栏 */
    body .flashcard-bottom {
        padding-top: 8px !important;
        margin-top: 8px !important;
    }

    body .flashcard-cover {
        width: 24px !important;
        height: 24px !important;
    }

    body .flashcard-title {
        font-size: 10px !important;
    }

    body .flashcard-note {
        font-size: 11px !important;
        line-height: 1.3 !important;
        line-clamp: 4 !important;
        -webkit-line-clamp: 4 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: HUB VIEW - MINIMAL MAGAZINE (V3.3 一屏展示版)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    body .hub-layout {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        /* 核心：彻底禁止滑动 */
        height: 100vh !important;
        /* 核心：锁定为刚好一个屏幕的高度 */
        background: var(--bg-surface) !important;
    }

    /* 隐藏 PC 端右侧卡片 */
    body .hub-right {
        display: none !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: HUB VIEW - FINAL SPACE OPTIMIZATION (V3.7)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: HUB VIEW - RESPONSIVE RATIO OVERHAUL (V4.1)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    body #hub-view {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important; /* Force one-screen magazine feel */
    }



    /* 修复 mobile 端布局错乱 */
    body .hub-section {
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* 移动端完全隐藏抽屉，防止阴影渗入 */
    body .archive-drawer {
       /* =========================================================
   FIX: 解锁移动端档案抽屉并彻底解决阴影渗入
========================================================= */
body .archive-drawer {
    display: flex !important; /* 恢复物理存在 */
    width: 85vw !important;
    max-width: 360px !important;
    left: -100vw !important; /* 将其停泊在屏幕外，而不是彻底销毁 */
    box-shadow: none !important; /* 关闭状态下剥夺阴影，绝对防渗入 */
    z-index: 9999 !important; /* 确保弹出时盖住所有元素 */
    transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.1s !important;
}

/* 抽屉打开时的状态 */
body .archive-drawer.open {
    left: 0 !important;
    box-shadow: 20px 0 50px rgba(0,0,0,0.4) !important; /* 只在打开时激活阴影 */
}
    }

    body .hub-brand-group {
        margin-top: 2vh !important;
        margin-bottom: 3vh !important;
    }

    body .hub-main-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        font-family: "Noto Serif SC", "Playfair Display", serif !important;
        /* Restore breathing room between characters */
        font-size: clamp(44px, 12vw, 56px) !important; 
        line-height: 1.05 !important;
        margin-bottom: 12px !important;
        letter-spacing: 2px !important;
    }

    body .hub-main-title span {
        display: block !important;
    }

    body .hub-subtitle {
        font-family: var(--font-mono) !important;
        font-size: clamp(8px, 2vw, 10px) !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        opacity: 0.4 !important;
    }

    body .hub-start-btn {
        width: 85% !important;
        max-width: 260px !important;
        padding: 14px !important;
        background: #C05B4D !important;
        color: white !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        box-shadow: 0 10px 30px rgba(192, 91, 77, 0.25) !important;
        /* Group tightly with the hero card below */
        margin-bottom: 24px !important; 
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    /* Bottom Discovery Block: Proportional alignment */
    body .echo-separator {
        width: 40px !important;
        height: 1px !important;
        background: var(--text-primary) !important;
        opacity: 0.1 !important;
        margin: 0 auto 3vh !important;
        flex-shrink: 0 !important;
    }

    body .daily-echo-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 24px 32px 4vh !important; /* Reduced bottom padding */
        border: none !important;
        margin-top: 12px !important;
    }

    body .echo-tag {
        font-family: var(--font-mono) !important;
        font-size: 8px !important;
        letter-spacing: 3px !important;
        color: var(--text-secondary) !important;
        opacity: 0.5 !important;
        margin-bottom: 1.5vh !important;
        text-transform: uppercase !important;
    }

    body .echo-text {
        font-family: var(--font-poetry) !important;
        font-size: clamp(16px, 4.5vw, 19px) !important;
        font-style: italic !important;
        line-height: 1.4 !important;
        color: var(--text-primary) !important;
        margin-bottom: 1vh !important;
        text-align: center !important;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    body .echo-author {
        font-family: var(--font-mono) !important;
        font-size: 8px !important;
        opacity: 0.4 !important;
        margin-top: 0.5vh !important;
    }

    /* Hero History Card Mobile Tuning (V4.2 Optimized) */
    body .hero-history-card {
        gap: 16px !important;
        padding: 16px 20px !important;
        margin: 0 auto 12px !important; /* Unified flow */
        max-width: 92% !important;
        align-self: center !important;
        flex-shrink: 0 !important;
        height: auto !important;
        min-height: 100px !important;
        overflow: visible !important;
    }

    body .history-vinyl-wrapper {
        width: 58px !important;
        height: 58px !important;
        flex-shrink: 0 !important;
    }

    body .history-meta {
        margin-bottom: 4px !important;
        justify-content: center !important;
    }

    body .history-title-group {
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    body .history-song-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    body .history-artist {
        font-size: 9px !important;
        margin-bottom: 4px !important;
        letter-spacing: 1px !important;
    }

    body .history-peak-verse {
        font-size: 11px !important;
        padding-left: 0 !important;
        border-left: none !important;
        line-height: 1.4 !important;
        text-align: center !important;
        line-clamp: 1 !important;
        -webkit-line-clamp: 1 !important;
    }

    body .history-action {
        padding: 4px !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION: SECTION HEADINGS - MOBILE SIMPLIFICATION (V3.5)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* 统一修改所有今日推荐页面的栏目标题 */
    body #recommendations-content .section-heading {
        font-family: var(--font-display) !important;
        font-size: 22px !important;
        /* 稍微放大一点点中文标题 */
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: var(--text-primary) !important;
        padding-bottom: 8px !important;
        margin-bottom: 24px !important;
        border-bottom: 1px solid var(--bg-border) !important;
        display: block !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        text-align: left !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SECTION 7 · POSTER PREVIEW MODAL
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .poster-preview-overlay {
        position: fixed;
        inset: 0;
        /* 核心修复：把 0.9 的死黑降为 0.6，开启玻璃拟态 */
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(15px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease;
    }

}

/* =========================================================
   MOBILE FINAL FIX: 移动端专属响应式隔离补丁
   解决：消除空旷感、修正重心、确保今日偶感不被导航栏遮挡
========================================================= */

@media (max-width: 900px) {
    /* 1. 底盘重塑：采用紧凑堆叠布局，强制向上提拉 */
    body .hub-left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 核心：元素向中间抱团，消除散乱 */
        align-items: center !important;
        /* 顶部留白缩减，底部留出 140px 巨型安全区（防止被导航栏盖住） */
        padding: 6vh var(--mob-pad) 140px !important; 
        height: auto !important;
        min-height: 100vh !important;
        gap: 20px !important; /* 强制压缩各个组件之间的装配公差 */
    }

    /* 2. 移除所有 PC 端的刚性高度限制 */
    body .hub-section, 
    body .section-top, 
    body .section-center, 
    body .section-bottom {
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. 标题组微调：确保副标题在顶端清晰可见 */
    body .hub-brand-group {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    body .hub-subtitle {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 12px !important;
        opacity: 0.5 !important;
    }

    /* 4. 操作组件紧凑化 */
    body .hub-start-btn {
        margin: 0 0 20px 0 !important; /* 压缩按钮下方空间 */
    }

    body .hero-history-card {
        display: flex !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* 5. 今日偶感：强制提升高度 */
    body .section-bottom {
        margin-top: 10px !important;
        width: 100% !important;
    }

    body .daily-echo-container {
        transform: translateY(-10px) !important; /* 向上轻微提拉 */
    }
}
/* ← end @media (max-width: 900px) */

/* =========================================================
   FINAL AUTHORITY: Mobile Hub Layout Override
   统一移动端底盘，根治遮挡
========================================================= */

@media (max-width: 900px) {
    body .hub-left {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* 从上往下排，避免被两端对齐强行拉开 */
        align-items: center !important;
        padding: 8vh var(--mob-pad) 150px !important; /* 底部预留 150px 绝对安全区 */
        height: auto !important;
        min-height: 100vh !important;
        gap: 16px !important; /* 全局统一的紧凑装配间距 */
    }
    
    body .section-center {
        flex: 1 !important;
        margin-top: 0 !important;
        margin-bottom: auto !important; /* 关键魔法：这会自动霸占剩余空间，把今日偶感死死推到屏幕最底部的安全区 */
    }
}

/* =========================================================
   MOBILE ADJUSTMENT: 移动端纵向空间二次分配
   目标：利用删掉标签后的空间，让标题、按钮、卡片均匀散开
========================================================= */

@media (max-width: 900px) {
    /* 1. 增加整体容器的上下内边距，利用整屏高度 */
    body .hub-left {
        padding-top: 8vh !important;  /* 顶端稍微下移，更有杂志封面感 */
        padding-bottom: 120px !important; /* 底部预留导航栏安全区 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* 2. 标题组：增加下方间距，拉开与按钮的距离 */
    body .hub-brand-group {
        margin-bottom: 40px !important; /* 让标题组独立出来 */
    }

    /* 3. 核心按钮：增加上下呼吸感 */
    body .hub-start-btn {
        margin: 20px 0 40px 0 !important; /* 重点拉开按钮与下方卡片的距离 */
        transform: scale(1.05); /* 移动端按钮可以稍微大一点点，方便点击 */
    }

    /* 4. 播放历史卡片：恢复标准移动端尺寸，不再缩得太小 */
    body .hero-history-card {
        width: 100% !important;
        max-width: 340px !important; /* 保持精致但宽度适中 */
        margin: 0 auto !important;
        padding: 20px !important;
    }

    /* 5. 今日偶感（歌词）：在没有标签后，增加字间距和行高 */
    body .daily-echo-container {
        margin-top: auto !important; /* 强制将歌词推向屏幕底部附近 */
        padding-top: 40px !important;
        margin-bottom: 20px !important;
    }

    body .echo-text {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
        letter-spacing: 0.5px !important;
    }
}

/* =========================================================
   BUG FIX: 彻底封杀移动端系统自带的点击高亮蓝框
========================================================= */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important; /* 同时禁用长按弹出的系统菜单 */
}

/* =========================================================
   UI FIX 1: 歌单收起按钮 (修复全局显示 Bug + 圆形中文样式)
========================================================= */
body .fab-collapse {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important; /* 完美圆形 */
    padding: 0 !important;
    /* ⚠️ 核心修复：绝对不能写 display: flex !important，把显示/隐藏的控制权还给 JS */
    justify-content: center !important;
    align-items: center !important;
    
    /* 悬浮在底部导航栏正上方 */
    bottom: calc(var(--mob-nav-h) + 24px + var(--mob-safe-b)) !important;
    right: 20px !important;
    
    /* 高级毛玻璃质感 */
    background: rgba(250, 249, 245, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid var(--gold) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

/* 核心修复：隐藏图标，显示中文“收起” */
body .fab-collapse svg {
    display: none !important; /* 隐藏原有的箭头图标 */
}

body .fab-collapse span {
    display: inline-block !important; /* 覆盖 main.css 中移动端隐藏文字的设定 */
    font-family: var(--font-zh) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gold) !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

body .fab-collapse:active {
    transform: scale(0.9) !important;
}

/* 暗色主题适配 */
[data-theme="dark"] body .fab-collapse {
    background: rgba(22, 27, 31, 0.85) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* =========================================================
   UI FIX 2: 歌单卡片质感升级 (悬浮卡片)
========================================================= */
body .song-card {
    background: var(--bg-void) !important;
    border: 1px solid rgba(201, 168, 76, 0.12) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
    overflow: visible !important;
}

body .song-card:active {
    transform: scale(0.95) !important;
}

body .song-cover {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 12px !important;
    border: none !important;
    background: transparent !important;
}

body .song-card .song-title {
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    padding: 0 4px !important;
    line-height: 1.2 !important;
}

body .song-card .song-artist {
    padding: 0 4px 4px !important;
    opacity: 0.7 !important;
    font-size: 10px !important;
}

[data-theme="dark"] body .song-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* =========================================================
   UI FIX 3: 修复档案库单词 (Words) 与语法 (Grammar) 的拥挤重叠
========================================================= */

/* --- 修复单词卡片 (Words) 呼吸感 --- */
body .word-card-item {
    padding: 20px var(--mob-pad) !important;
    align-items: flex-start !important;
    gap: 16px !important; /* 单词与释义拉开距离 */
}
body .word-main {
    margin-bottom: 6px !important;
    font-size: 20px !important;
}
body .word-phonetic {
    margin-bottom: 10px !important;
}

/* --- 修复语法卡片 (Grammar) 呼吸感 --- */
body .grammar-card {
    padding: 24px var(--mob-pad) !important;
}
body .grammar-card .analysis-header {
    margin-bottom: 14px !important; /* 解除 main.css 强加的 2px 极小边距 */
}
body .grammar-card .framework-tag {
    margin-bottom: 12px !important;
}
body .grammar-card .text-en-main {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important; /* 恢复英文句子的呼吸行高 */
    font-size: 17px !important;
}
body .grammar-card .text-zh-desc {
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
}