/* ══════════════════════════════════════════════
   LYRIC LEARNING - MAIN STYLE SYSTEM
   Engineering Standardization v1.0
══════════════════════════════════════════════ */

:root {
    --font-display: 'Playfair Display', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-ui: 'DM Sans', sans-serif;
    --font-poetry: 'Lora', serif;
    --font-zh: 'Noto Serif SC', serif;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --led-off: var(--bg-elevated);
}

/* --- THEME: DARK (Default) --- */
:root,
[data-theme="dark"] {
    --bg-void: #080a0c;
    --bg-surface: #0f1214;
    --bg-elevated: #161b1f;
    --bg-border: rgba(255, 255, 255, 0.08);
    --gold: #c9a84c;
    --gold-dim: rgba(201, 168, 76, 0.12);
    --text-primary: #ede6da;
    --text-secondary: #a8bcc8;
    --red-dot: #e05252;
    --led-off: var(--bg-elevated);
    --text-glow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --analysis-w-bold: 500;
    --analysis-w-reg: 400;
}

/* --- THEME: EDITORIAL LIGHT --- */
[data-theme="light"] {
    --bg-void: #ffffff;
    --bg-surface: #faf9f5;
    --bg-elevated: #f0f0f0;
    --bg-border: #e5e5e5;
    --gold: #ab8b65;
    --gold-dim: rgba(171, 139, 101, 0.12);
    --text-primary: #141413;
    --text-secondary: #5a5a5a;
    --text-muted: #828282;
    --red-dot: #e05252;
    --led-off: #e5e5e5;
    --text-glow: 0 2px 10px rgba(0, 0, 0, 0.05);
    --analysis-w-bold: 600;
    --analysis-w-reg: 500;
}

/* --- THEME: GOLDEN PARCHMENT --- */
[data-theme="warm"] {
    --bg-void: #fdf6e3;
    --bg-surface: #f7f0df;
    --bg-elevated: #efe5cd;
    --bg-border: #e0d3b6;
    --gold: #c9664c;
    --gold-dim: rgba(201, 102, 76, 0.12);
    --text-primary: #4a3c31;
    --text-secondary: #7a6b5d;
    --text-muted: #a69a8f;
    --red-dot: #e05252;
    --led-off: #e0d3b6;
    --text-glow: 0 2px 12px rgba(74, 60, 49, 0.12);
    --analysis-w-bold: 600;
    --analysis-w-reg: 500;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    height: 100%;
    overflow: hidden;
    font-size: 16px;
    position: relative;
}

body {
    font-family: var(--font-ui);
    background: var(--bg-void);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}



button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    outline: none;
}

input,
textarea {
    outline: none;
    border: none;
    background: none;
    font-family: inherit;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

.view-container {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.99) translateY(10px);
    transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
    background: var(--bg-void);
    /* 防止底层元素（如生成中的海报）闪烁出çŽ?*/
    position: relative;
    /* 建立堆叠上下æ–?*/
    z-index: 5;
    /* 确保高于 z-index 为负的隐藏渲染层 */
}

.view-container.active {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.top-nav {
    height: 44px;
    background: var(--bg-void);
    border-bottom: 1px solid var(--bg-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-shrink: 0;
    z-index: 1000;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo-svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    stroke: var(--gold);
}

.nav-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.nav-indicators {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-toggler {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    transition: opacity var(--transition);
}

.theme-toggler:hover {
    opacity: 1;
}

.theme-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.theme-toggler:hover .theme-label {
    opacity: 1;
    transform: translateX(0);
}

.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--bg-border);
    position: relative;
}

.theme-dot:hover {
    transform: scale(1.2);
}

.theme-dot.active {
    border-color: var(--gold);
}

.theme-dot.active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    opacity: 0.5;
}

.theme-dark {
    background: #080a0c;
}

.theme-light {
    background: #ffffff;
}

.theme-warm {
    background: #dac9a6;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--led-off);
}

.status-dot.active {
    background: #44dd88;
    box-shadow: 0 0 10px rgba(68, 221, 136, 0.4);
}

.status-bar {
    display: none;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-border);
    padding: 8px 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   HUB VIEW
══════════════════════════════════════════════ */
.hub-layout {
    display: grid;
    grid-template-columns: 62fr 38fr;
    flex: 1;
    height: 100vh; /* Lock height for one-screen app feel */
    overflow: hidden;
}

.hub-left {
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove internal padding, handled by sections */
    overflow: hidden; 
    position: relative;
    cursor: default;
    border-right: 1px solid var(--bg-border);
    transition: background 400ms ease, box-shadow 400ms ease;
    height: 100vh;
}

.hub-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 60px; /* 核心修复：去除原本强制加上的上下 20px 内边距 */
    border: none !important;
    background: transparent !important;
}

.section-top {
    margin-top: 10vh; /* 用自然留白代替死板的 min-height: 32vh */
}

.section-center {
    flex: 1; /* 保留 flex:1 以便把底部偶感挤下去 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -4vh; /* 核心修复：把中心区域整体向上提拉，拉近与标题的距离 */
}

.section-bottom {
    padding-bottom: 5vh; /* 保证底部有呼吸感，代替死板的 min-height: 25vh */
    justify-content: flex-end;
}

.hub-left::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.hub-left:hover {
    background: var(--bg-elevated);
}

.hub-brand-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hub-subtitle {
    font-family: var(--font-poetry);
    font-size: 11px;
    font-weight: 300;
    font-style: italic;
    color: var(--text-secondary);
    letter-spacing: 4px;
    opacity: 0.6;
    margin-top: 0;
    margin-bottom: 16px;
    text-align: center;
    transition: transform 400ms ease;
    order: 1;
}

.hub-main-title {
    font-family: var(--font-display);
    /* Scale down just enough to stay in one screen */
    font-size: clamp(48px, 6vw, 84px); 
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05; 
    letter-spacing: -2px;
    margin-bottom: 0;
    transition: transform 400ms ease;
    text-align: center;
    order: 2;
}

.hub-left:hover .hub-main-title {
    transform: scale(1.02);
}

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

.hub-left-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 8px;
    margin-bottom: 0; 
    display: block;
    transition: color 300ms ease;
    text-align: center;
    order: 3;
    opacity: 0.4;
}

.hub-left:hover .hub-left-tag {
    color: var(--gold);
}

.hub-left:hover .hub-subtitle {
    transform: translateX(8px);
}

.hub-start-btn {
    padding: 16px 44px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    background: var(--red-dot) !important; 
    color: #fff !important;
    border-radius: 4px;
    align-self: center !important; 
    letter-spacing: 2px;
    box-shadow: 0 10px 20px rgba(224, 82, 82, 0.2);
}

.hub-start-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    box-shadow: 0 10px 30px rgba(224, 82, 82, 0.3);
}

.hub-right {
    background: var(--bg-void);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hub-feature-card {
    flex: 1;
    border-bottom: 1px solid var(--bg-border);
    padding: 40px 48px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    border-left: 0 solid var(--gold);
    background: linear-gradient(90deg, transparent, transparent);
}

.hub-feature-card:hover {
    background: linear-gradient(90deg, var(--gold-dim), transparent);
    border-left-width: 8px;
    padding-left: 40px;
    box-shadow: inset 10px 0 30px rgba(0, 0, 0, 0.2);
}

.hub-feature-text {
    transition: transform 300ms ease;
}

.hub-feature-card:hover .hub-feature-text {
    transform: translateX(4px);
}

.hub-feature-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 8px;
    transition: color 300ms ease;
}

.hub-feature-card:hover .hub-feature-title {
    color: var(--gold);
}

.hub-feature-subtitle {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.6;
}

.hub-feature-arrow {
    font-size: 20px;
    color: var(--gold);
    margin-left: auto;
    transition: transform 250ms ease;
    opacity: 0.6;
}

.hub-feature-card:hover .hub-feature-arrow {
    transform: translateX(10px);
    opacity: 1;
}

.icon-css {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-play::before {
    content: '';
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--gold);
}

.icon-disc {
    border: 2px solid var(--gold);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: relative;
}

.icon-disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.icon-archive {
    width: 24px;
    height: 20px;
    border: 2px solid var(--gold);
    border-top-width: 1px;
    border-radius: 2px;
}

/* ══════════════════════════════════════════════
   ALCHEMY WORKSPACE
══════════════════════════════════════════════ */
.alchemy-topbar {
    height: 64px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-border);
    display: flex;
    align-items: center;
    z-index: 100;
    transition: box-shadow 0.3s ease;
}

.alchemy-topbar:focus-within {
    box-shadow: inset 0 -2px 0 var(--gold), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.exit-btn {
    height: 100%;
    padding: 0 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-secondary);
    border-right: 1px solid var(--bg-border);
    border-left: 4px solid var(--gold);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    transition: all var(--transition);
}

.exit-btn:hover {
    background: rgba(201, 168, 76, 0.05);
    color: var(--gold);
}

.search-area {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper {
    flex: 1;
    height: 100%;
    position: relative;
}

.song-input {
    flex: 2; /* 歌名输入框占2份空间 */
}

.artist-input {
    flex: 1; /* 歌手输入框占1份空间 */
}

.search-input {
    width: 100%;
    height: 100%;
    padding: 0 28px;
    font-family: var(--font-zh);
    font-size: 15px;
    font-weight: 300;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.search-input::placeholder {
    color: #4a5a68;
    font-family: var(--font-zh);
    font-weight: 300;
}

.search-input:focus-visible {
    outline: none;
    color: var(--text-primary);
}

.search-divider {
    width: 1px;
    height: 24px;
    background: var(--bg-border);
}

.extract-btn {
    height: 100%;
    padding: 0 36px;
    background: var(--gold);
    color: var(--bg-void);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.extract-btn:hover {
    opacity: 0.9;
    transform: scaleX(1.02);
}

.extract-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.alchemy-workspace {
    display: grid;
    grid-template-columns: 58fr 42fr;
    flex: 1;
    overflow: hidden;
}

/* ── Lyrics Panel ── */
.lyrics-panel {
    background: var(--bg-void);
    border-right: 1px solid var(--bg-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-label {
    padding: 14px 32px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--bg-border);
    text-transform: uppercase;
}

.lyrics-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 48px 64px;
}

.lyrics-song-header {
    margin-bottom: 48px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--bg-border);
}

.lyrics-title-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 12px;
}

.song-title-main {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -1px;
    text-shadow: var(--text-glow);
    margin-bottom: 0;
}

.song-artist-sub {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.netease-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.netease-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 300ms ease;
}

.netease-link:hover {
    color: #ff3a3a;
    background: rgba(255, 58, 58, 0.08);
    transform: translateY(-1px);
}

.netease-link:hover svg {
    transform: rotate(15deg) scale(1.1);
}

.lyrics-scroll-inner {
    font-family: var(--font-poetry);
    font-size: 1.25rem;
    line-height: 2.2;
    color: var(--text-primary);
    font-weight: 400;
    opacity: 0.9;
}

.lyrics-line:first-child::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 4.8rem;
    line-height: 0.8;
    padding: 8px 16px 0 0;
    color: var(--gold);
    font-weight: 700;
}

.lyrics-line {
    display: block;
    margin-bottom: 0.6rem;
    transition: opacity 400ms ease;
}

.highlight-word {
    font-family: var(--font-poetry);
    font-weight: 600;
    color: var(--gold);
    border-bottom: 2px solid var(--gold-dim);
    padding: 0 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.highlight-word:hover {
    background: var(--gold-dim);
    color: var(--gold);
}

/* ── Study Panel ── */
.learning-panel {
    background: var(--bg-void);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-bar {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--bg-border);
    margin-bottom: 8px;
    padding-right: 12px;
}

.tab-group {
    display: flex;
    flex: 1; /* Take up all available space to allow even split */
}

.tab {
    flex: 1; /* Each tab takes equal width */
    text-align: center;
    padding: 16px 0;
    font-family: var(--font-zh); /* Elegant Chinese Serif */
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.tab-content {
    flex: 1;
    overflow-y: auto;
}

/* Analysis Cards (Phrases, Golden, Grammar) */
.analysis-card {
    padding: 12px 32px;
    border-bottom: 1px solid var(--bg-border);
    border-left: 4px solid transparent;
    transition: background 300ms ease, border-left-color 300ms ease;
}

.analysis-card:hover {
    background: var(--bg-surface);
    border-left-color: var(--gold);
}

/* ══════════════════════════════════════════════
2832:    ARCHIVE DRAWER
2833: ══════════════════════════════════════════════ */
.archive-drawer {
    position: fixed;
    left: -400px;
    top: 44px; /* Align with top-nav bottom */
    bottom: 0;
    width: 380px;
    background: rgba(15, 18, 20, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-right: 1px solid var(--bg-border);
    z-index: 2000;
    transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 20px 0 50px rgba(0,0,0,0.5);
}

.archive-drawer.open {
    left: 0;
}

.drawer-header {
    padding: 32px 24px;
    border-bottom: 1px solid var(--bg-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--gold);
    display: block;
    margin-bottom: 4px;
}

.drawer-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.close-drawer {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 24px;
    transition: all 0.3s;
    border-radius: 50%;
}

.close-drawer:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.3s;
}

.history-item:hover {
    background: rgba(201, 168, 76, 0.04);
}

.history-item:hover::before {
    height: 60%;
}

.mini-vinyl {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.mini-vinyl img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--bg-void);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    object-fit: cover;
    animation: rotate-vinyl 8s linear infinite;
    animation-play-state: paused;
}

.history-item:hover .mini-vinyl img {
    animation-play-state: running;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.item-artist {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.item-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold);
    opacity: 0.6;
}

.empty-archive-state {
    padding: 48px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 2px;
}

@keyframes rotate-vinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.framework-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.8;
}

.appreciation-note {
    font-family: var(--font-poetry);
    font-size: 15px;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.8;
    border-top: 1px dashed var(--bg-border);
    padding-top: 16px;
    font-weight: var(--analysis-w-reg);
}

.academic-row {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    border-top: 1px dashed var(--bg-border);
    padding-top: 10px;
    font-weight: var(--analysis-w-reg);
}

/* Words & Dictionary Items */
.word-card-item {
    padding: 18px 24px;
    border-bottom: 1px solid var(--bg-border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: background var(--transition);
}

.word-card-item:hover {
    background: var(--bg-surface);
}

.word-main {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.word-phonetic {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.word-translation {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 300;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════
   COLLECTION & PLAYLISTS COMPONENTS
══════════════════════════════════════════════ */
.collection-topbar {
    height: 50px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    flex-shrink: 0;
}

.collection-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--text-primary);
    flex: 1;
}

.btn-minimal {
    background: none;
    border: 1px solid var(--bg-border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    cursor: pointer;
}

.btn-minimal:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.segmented-tabs {
    display: flex;
    border-bottom: 1px solid var(--bg-border);
    flex-shrink: 0;
    /* 新增：容器锁死高度 */
    height: 44px;
    box-sizing: border-box;
    align-items: stretch;
}

.tab-button {
    flex: 1;
    /* 上下 padding 改为 0，用 height:100% + flex 居中代替 */
    padding: 0 4px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    top: 0;                 /* 去掉 top:1px */
    transition: color 0.3s; /* 只过渡颜色，不过渡 all */
    -webkit-tap-highlight-color: transparent;
}

/* 指示线：脱离文档流，不占位 */
.tab-button::after {
    content: '';
    position: absolute;
    bottom: -1px;           /* 覆盖容器 border-bottom */
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-button.active {
    color: var(--text-primary);
    /* border-bottom 彻底删掉，由 ::after 代替 */
}

.tab-button.active::after {
    transform: scaleX(1);
}

.songs-grid {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 12px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1400px) {
    .songs-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }
}

.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;
    cursor: pointer;
    position: relative;
    min-width: 0;
}

.song-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

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

/* 内部封面圆角化 */
.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;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
    overflow: hidden;
}

.song-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.song-card:hover .song-cover img {
    transform: scale(1.08);
}

/* 文字排版优化 */
.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;
}

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

/* 暗色主题阴影适配 */
[data-theme="dark"] .song-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.song-title {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-artist {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
}

.playlist {
    margin-bottom: 40px;
}

.playlist-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 0 20px;
}

.playlist-icon {
    font-size: 28px;
    background: var(--bg-surface);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: 4px;
}

.playlist-info {
    flex: 1;
}

.playlist-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    line-height: 1.2;
}

.playlist-subtitle {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.playlist-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold);
    border: 1px solid var(--gold-dim);
    padding: 4px 10px;
}

/* Expanded State Logic */
.is-hidden-song {
    display: none !important;
}

.playlist.active .is-hidden-song {
    display: block !important;
}

.playlist-expand {
    padding: 0 20px;
    margin-top: 10px;
}

.btn-expand {
    width: 100%;
    border: 1px solid var(--bg-border);
    background: linear-gradient(to bottom, var(--bg-surface), var(--bg-void));
    color: var(--text-secondary);
    font-family: var(--font-zh);
    font-size: 13px;
    letter-spacing: 2px;
    padding: 16px 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-expand:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--bg-elevated);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn-expand::before,
.btn-expand::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--bg-border);
    transition: all 0.4s;
}

.btn-expand:hover::before,
.btn-expand:hover::after {
    background: var(--gold-dim);
    width: 60px;
}

.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-top: 2px solid var(--gold);
    border-radius: 0;
    z-index: 1000;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.suggestion-item {
    padding: 14px 24px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--bg-border);
    transition: background 0.5s ease;
}

.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.suggestion-item .artist {
    color: var(--text-secondary);
    font-size: 11px;
    margin-left: 10px;
}

.suggestion-item.local {
    border-left: 3px solid var(--gold);
}

.suggestion-item.local .title {
    color: var(--gold);
}

/* ══════════════════════════════════════════════
   PREMIUM LOADER & EMPTY STATES
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   ARCHIVE EMPTY STATE
══════════════════════════════════════════════ */
.archive-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    min-height: 600px;
    animation: fadeIn 0.6s ease-out;
}

.empty-icon-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 40px;
    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: 64px;
    height: 64px;
    stroke: var(--gold);
    stroke-width: 1;
    fill: none;
    opacity: 0.6;
    animation: floating-y 3s infinite ease-in-out;
}

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

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

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

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

.empty-cta-btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
}

@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(-12px);
    }
}

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

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

/* ══════════════════════════════════════════════
   PREMIUM LOADER & EMPTY STATES
══════════════════════════════════════════════ */
@keyframes shimmer-sweep {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

.shimmer-block {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-elevated) 25%, color-mix(in srgb, var(--gold) 8%, var(--bg-elevated)) 50%, var(--bg-elevated) 75%);
    background-size: 600px 100%;
    animation: shimmer-sweep 2s ease-in-out infinite;
}

.shimmer-block--title {
    height: 44px;
    width: 60%;
    margin-bottom: 12px;
}

.shimmer-block--artist {
    height: 14px;
    width: 35%;
    margin-bottom: 32px;
}

.shimmer-block--line {
    height: 18px;
    margin-bottom: 16px;
}

.shimmer-block--heading {
    height: 20px;
    width: 80%;
    margin-bottom: 12px;
}

.shimmer-block--subtext {
    height: 13px;
    width: 100%;
    margin-bottom: 8px;
}

.premium-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 450px;
    text-align: center;
    padding: 60px;
    animation: fade-in-up 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.premium-empty-state.is-mini {
    min-height: 220px;
    padding: 30px;
}

.empty-state-visual {
    width: 84px;
    height: 84px;
    margin-bottom: 32px;
    color: var(--gold);
    opacity: 0.5;
}

.empty-logo-svg {
    width: 100%;
    height: 100%;
    animation: logo-pulse-spin 16s linear infinite;
}

@keyframes logo-pulse-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 0.6;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

.empty-state-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 6px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.empty-state-sub {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    opacity: 0.8;
    font-weight: 300;
}

.shimmer-decode-lines {
    flex: 1;
}

.shimmer-decode-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-border);
}

/* ══════════════════════════════════════════════
   PREMIUM EMPTY STATES (The Incubator)
══════════════════════════════════════════════ */
.premium-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: var(--text-dim);
    padding: 60px 40px;
    animation: fade-in-up 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.premium-empty-state.is-mini {
    min-height: 200px;
    padding: 40px 20px;
}

.empty-state-visual {
    width: 80px;
    height: 80px;
    margin-bottom: 32px;
    color: var(--gold);
    opacity: 0.5;
}

.empty-logo-svg {
    width: 100%;
    height: 100%;
    animation: logo-pulse-spin 16s linear infinite;
}

@keyframes logo-pulse-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: rotate(180deg) scale(1.15);
        opacity: 0.6;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

.empty-state-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 6px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.empty-state-sub {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    font-weight: 300;
    opacity: 0.7;
}

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

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

/* ── Tab Panel Shimmer ── */
.shimmer-tab-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shimmer-card {
    padding: 24px 32px;
    border-bottom: 1px solid var(--bg-border);
}

/* Restored Quote Display Styling */
.shimmer-quote-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 32px;
    text-align: center;
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
    border-top: 1px dashed var(--bg-border);
}

.shimmer-status-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.quote-card-dynamic {
    max-width: 480px;
    width: 100%;
}

.quote-en {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 12px;
    opacity: 0.9;
}

.quote-zh {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    font-weight: 300;
}

/* ── Status Indicator (shared) ── */
.shimmer-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: status-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

.shimmer-status-text {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--gold);
    text-transform: uppercase;
    opacity: 0.7;
}

.shimmer-status-text::after {
    content: '_';
    animation: cursor-blink 1.2s step-end infinite;
}

/* Theme overrides */
[data-theme="light"] .shimmer-block {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            color-mix(in srgb, var(--gold) 10%, #f5f5f5) 50%,
            #f0f0f0 75%);
    background-size: 600px 100%;
}

[data-theme="warm"] .shimmer-block {
    background: linear-gradient(90deg,
            var(--bg-elevated) 25%,
            color-mix(in srgb, var(--gold) 12%, var(--bg-elevated)) 50%,
            var(--bg-elevated) 75%);
    background-size: 600px 100%;
}

/* Accessibility: respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    .shimmer-block {
        animation: none;
        opacity: 0.5;
    }

    .shimmer-status-dot {
        animation: none;
    }

    .shimmer-status-text::after {
        animation: none;
    }

    .playlist-nav-arrow {
        transition: none;
    }
}

/* Interactive Widgets */
.btn-star {
    font-size: 18px;
    color: var(--text-muted);
    padding: 4px;
    transition: all var(--transition);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
}

.btn-star:hover {
    color: var(--gold);
    transform: scale(1.1);
}

.btn-star.saved {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}

.btn-poster {
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 1px;
    transition: all var(--transition);
    cursor: pointer;
}

.btn-poster:hover {
    background: var(--gold);
    color: var(--bg-void);
}

/* --- Premium Newspaper Button --- */
.btn-newspaper-premium {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.15) 0%, rgba(201, 168, 76, 0.05) 100%);
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.btn-newspaper-premium::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
}

.btn-newspaper-premium:hover {
    border-color: var(--gold);
    background: rgba(201, 168, 76, 0.2);
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.2);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.btn-newspaper-premium:hover::before {
    left: 100%;
}

.btn-newspaper-premium svg {
    transition: transform 0.4s ease;
}

.btn-newspaper-premium:hover svg {
    transform: rotate(-10deg) scale(1.1);
}

/* ══════════════════════════════════════════════
   UNIFIED TYPOGRAPHY SYSTEM (3 SPECIFICATIONS)
══════════════════════════════════════════════ */
.text-en-main {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.text-zh-desc {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

.text-example {
    font-family: var(--font-poetry);
    font-size: 14px;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════
   ACCORDION & TEXT DISPLAY (THE PEEK & DIVE UI)
══════════════════════════════════════════════ */
.text-en-display {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--text-primary);
    font-weight: 450;
}

.accordion-card {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid transparent;
    overflow: hidden;
}

.accordion-card.expanded {
    border-color: var(--gold-dim);
    background: rgba(201, 168, 76, 0.03);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.accordion-header {
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.accordion-peek {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px dashed transparent;
    transition: all 0.3s ease;
}

.accordion-card.expanded .accordion-peek {
    border-top-color: var(--gold-dim);
    margin-bottom: 16px;
}

.translation-peek {
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 0;
    flex: 1;
    padding-right: 16px;
    transition: color 0.3s ease;
}

.expand-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.expand-hint svg {
    width: 14px;
    height: 14px;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.accordion-card.expanded .expand-hint svg {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.accordion-card.expanded .accordion-content {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    margin-top: 8px;
}

/* Global Action Bar - Removed (Integrated into tab-bar) */
.tab-action-bar {
    display: none;
}

#globalExpandBtn {
    background: transparent;
    border: 1px solid var(--bg-border);
    color: var(--text-secondary);
    font-family: var(--font-zh);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px; /* Space from the evenly split tabs */
    transition: all 0.2s;
    flex-shrink: 0; /* Don't squash the button */
}

#globalExpandBtn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-dim);
}

.btn-expand-all svg {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Daily Recommendations (Digital Magazine) */
.hero-magazine-card {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: stretch;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hero-magazine-card:hover {
    transform: translateY(-4px);
}

.hero-cover-wrapper {
    flex: 0 0 350px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
}

.hero-cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 0;
    border-bottom: 2px solid var(--text-primary);
}

.hero-tag {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-difficulty-badge {
    background: rgba(201, 168, 76, 0.15);
    color: var(--gold);
    border: 1px solid rgba(201, 168, 76, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 1px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--text-primary);
    letter-spacing: -1px;
}

.hero-artist {
    font-family: var(--font-ui);
    font-size: 16px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.editorial-quote {
    font-family: var(--font-poetry);
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
    font-style: italic;
    padding-left: 24px;
    border-left: 3px solid var(--gold);
    position: relative;
}

.discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
}

.discovery-card {
    cursor: pointer;
    transition: transform 0.2s ease;
    border-bottom: 1px solid var(--bg-border);
    padding-bottom: 0;
}

.discovery-card:hover {
    transform: translateY(-4px);
    border-bottom-color: var(--gold);
}

.discovery-cover {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin-bottom: 16px;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.discovery-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discovery-artist {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-heading {
    font-family: var(--font-display);
    font-size: 24px;
    margin-bottom: 24px;
    color: var(--text-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-border);
}

/* History Capsule */
.history-capsule {
    background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(201, 168, 76, 0.05) 100%);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: 0;
    display: flex;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 80px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.history-capsule:hover {
    transform: translateY(-4px);
}

.history-date {
    background: var(--bg-void);
    color: var(--gold);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px dashed var(--bg-border);
    width: 120px;
    flex-shrink: 0;
}

.history-date .month-day {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
}

.history-date .year {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 2px;
}

.history-content {
    flex: 1;
    padding: 24px 0 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.history-event-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(201, 168, 76, 0.1);
    color: var(--gold);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.history-song-meta {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.history-song-meta span {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 12px;
}

.history-desc {
    font-family: var(--font-poetry);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

.history-cover {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    align-self: center;
    margin-right: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Revisit Flashcards - 3D Flip System */
.flashcard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
    padding-bottom: 40px;
    perspective: 1000px;
}

.flashcard {
    height: 220px;
    position: relative;
    cursor: pointer;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard:hover {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    border: 1px solid var(--bg-border);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.flashcard-front {
    background: var(--bg-surface);
}

.flashcard-back {
    background: var(--bg-void);
    transform: rotateY(180deg);
    border-color: var(--gold);
    border-width: 2px;
}

.flashcard-sentence {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
}

.flashcard-note {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--gold);
    text-align: center;
    line-height: 1.6;
}

.flashcard-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    border-top: 1px dashed var(--bg-border);
    padding-top: 16px;
}

.flashcard-cover {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.flashcard-meta {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.flashcard-title {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.flashcard-artist {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quote-mark {
    position: absolute;
    top: 12px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--gold);
    opacity: 0.1;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hub-layout {
        grid-template-columns: 1fr;
    }

    .alchemy-workspace {
        grid-template-columns: 1fr;
    }

    .flashcard-grid {
        grid-template-columns: 1fr;
    }

    .hero-magazine-card {
        flex-direction: column;
    }

    .hero-cover-wrapper {
        flex: 0 0 300px;
    }

    .fab-collapse {
        padding: 10px 16px;
        bottom: 80px; /* Stay above mobile bottom nav */
        right: 20px;
    }
    .fab-collapse span {
        display: none; /* Icon only on small mobile to save space */
    }

    /* 移动端适配 */
    .hub-left {
        height: auto;
        min-height: 100vh;
        padding: 4vh 24px 140px 24px;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .section-center {
        margin: 16px 0 32px 0;
        flex: none;
    }

    .hub-start-btn {
        margin: 8px 0 16px 0;
    }

    .hero-history-card {
        margin: 0 auto;
        width: 100%;
    }

    .section-bottom {
        padding-bottom: 0;
        margin-top: auto;
    }

    .daily-echo-container {
        transform: none;
        margin-top: 0;
    }
}

/* --- Loading Quote Panel --- */
.loading-quote-panel {
    margin-top: 40px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    transition: opacity 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.quote-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-en {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.4;
    opacity: 0.9;
}

.quote-zh {
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 1px;
    font-weight: 300;
}

.animate-fade {
    animation: fadeInScale 1s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ══════════════════════════════════════════════
   PLAYLIST COLLAPSE FAB (Floating Action Button)
   Premium Glassmorphism + Monospace
══════════════════════════════════════════════ */
.fab-collapse {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%; /* 完美圆形 */
    padding: 0;
    /* 高级毛玻璃质感 */
    background: rgba(250, 249, 245, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--gold); /* 金色边框 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    animation: fab-fade-in 0.4s ease-out;
    cursor: pointer;
}

/* 隐藏图标，显示中文"收起" */
.fab-collapse svg {
    display: none; /* 隐藏原有的箭头图标 */
}

.fab-collapse span {
    display: inline-block;
    font-family: var(--font-zh);
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
}

.fab-collapse:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

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

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

@keyframes fab-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


.playlist-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    z-index: 2000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Base Glassmorphism (Dark/Default) */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);

    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.playlist-nav-arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--gold);
    stroke-width: 1.8;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.playlist-nav-arrow--left {
    left: 16px;
}

.playlist-nav-arrow--right {
    right: 16px;
}

/* Desktop/Large Screen Adjustments (Keep them at edge) */
@media (min-width: 1800px) {
    .playlist-nav-arrow--left {
        left: 24px;
    }

    .playlist-nav-arrow--right {
        right: 24px;
    }
}

.playlist-nav-arrow.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-50%) scale(1);
}

.playlist-nav-arrow:hover {
    background: rgba(201, 168, 76, 0.08);
    border-color: var(--gold);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        -2px 0 15px rgba(255, 59, 48, 0.15),
        /* Chromatic Aberration - Red */
        2px 0 15px rgba(0, 122, 255, 0.15),
        /* Chromatic Aberration - Blue */
        0 0 20px rgba(201, 168, 76, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transform: translateY(-50%) scale(1.1);
}

.playlist-nav-arrow:hover svg {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--gold-dim));
}

.playlist-nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
    transition: transform 0.1s ease;
}

/* Theme Adaptation: Editorial Light */
[data-theme="light"] .playlist-nav-arrow {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(120%);
}

[data-theme="light"] .playlist-nav-arrow:hover {
    background: rgba(171, 139, 101, 0.05);
    border-color: var(--gold);
}

/* Theme Adaptation: Golden Parchment */
[data-theme="warm"] .playlist-nav-arrow {
    background: rgba(74, 60, 49, 0.03);
    border-color: rgba(74, 60, 49, 0.1);
    box-shadow:
        0 4px 16px rgba(74, 60, 49, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px) contrast(90%);
}

[data-theme="warm"] .playlist-nav-arrow:hover {
    background: rgba(201, 102, 76, 0.05);
    border-color: var(--gold);
}

/* Disabled/Initial State */
.playlist-nav-arrow[style*="opacity: 0"] {
    transform: translateY(-50%) scale(0.8) !important;
}

/* Hide arrows on very small screens to prevent overlap */
@media (max-width: 800px) {
    .playlist-nav-arrow {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════
   POSTER PREVIEW MODAL (GLOBAL / PC BASE)
══════════════════════════════════════════════ */
.poster-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.poster-preview-container {
    width: 400px;
    max-width: 90vw;
    height: 85vh;
    /* 核心防溢出：强制最大高度为屏幕çš?85% */
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.preview-image-wrapper {
    flex: 1;
    /* 占据剩余空间 */
    min-height: 0;
    /* 核心防溢出：防止 flex 子项撑破父容å™?*/
    background: var(--bg-void);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    /* 现在高度限制绝对有效 */
    aspect-ratio: 800/1140;
    object-fit: contain;
    /* 保证图片完整展示，绝不裁剪或溢出 */
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.preview-actions {
    display: flex;
    padding: 16px;
    gap: 12px;
    background: var(--bg-elevated);
    flex-shrink: 0;
    /* 防止按钮区被压缩 */
}

.preview-btn {
    flex: 1;
    padding: 14px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    border: none;
}

.btn-save {
    background: var(--gold);
    color: var(--bg-void);
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(201, 168, 76, 0.3);
}

.btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--bg-border);
}

/* 全局加载提示 */
#poster-global-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 10, 12, 0.9);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 20px 40px;
    border-radius: 8px;
    z-index: 99999;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
}

/* ══════════════════════════════════════════════
   GRAMMAR VIEW: GOLDEN STYLE SYNC
══════════════════════════════════════════════ */

/* 1. 填平无形的河：强制归零主句的下方间距 */
.grammar-card .analysis-header {
    margin-bottom: 2px !important;
    /* 极限贴合，而不是默认的 12px */
    align-items: flex-start !important;
}

.grammar-card .text-en-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
    /* 压扁英文主句自带的行高留ç™?*/
}

/* 2. 完美复刻：金句标ç­?(Golden Tag) 规范 */
.grammar-card .framework-tag {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    /* 恢复为金句的 11px */
    color: var(--gold) !important;
    /* 使用金句的高级金è‰?*/
    text-transform: uppercase !important;
    /* 强制大写 */
    letter-spacing: 1.5px !important;
    /* 金句标准字间è·?*/
    opacity: 0.8 !important;
    /* 金句标准透明åº?*/

    /* 间距控制 */
    margin-top: 0 !important;
    /* 绝不允许上方有任何多余空éš?*/
    margin-bottom: 8px !important;
    /* 金句标准底部间距 */
    display: block !important;
}

/* 3. 完美复刻：金句解析文字规èŒ?*/
.grammar-card .text-zh-desc {
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    /* 金句标准字号 */
    font-weight: 400 !important;
    /* 金句标准字重 */
    color: var(--text-secondary) !important;
    /* 金句标准次级文字颜色 */
    line-height: 1.6 !important;
    /* 金句标准易读行高 */
    margin-bottom: 16px !important;
}

/* 4. 例句（保持你之前的高级感配置ï¼?*/
.grammar-card .academic-row {
    font-family: var(--font-poetry) !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--gold) !important;
    border-top: 1px dashed var(--bg-border) !important;
    padding-top: 12px !important;
    opacity: 0.8;
}

.mobile-echo-container {
    display: none;
}

/* --- Hero History Card: The Spinning Archive (V4.2 Editorial) --- */
.hero-history-card {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 12px auto; 
    padding: 24px 32px;
    width: 100%;
    max-width: 440px; 
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    opacity: 0; 
    transform: translateY(20px);
    animation: card-slide-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.2s;
}

@keyframes card-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-history-card:hover {
    background: var(--bg-elevated);
    border-color: var(--gold-dim);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); /* 悬浮时产生高度感 */
}

/* 1. 动态黑胶唱æœ?*/
.history-vinyl-wrapper {
    position: relative;
    width: 64px; /* 稍微缩小一点，让它更精è‡?*/
    height: 64px;
    flex-shrink: 0;
}

.vinyl-record {
    width: 100%;
    height: 100%;
    animation: vinyl-spin 8s linear infinite;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); /* 给黑胶加一点物理阴å½?*/
    border-radius: 50%; /* 配合阴影效果 */
}

@keyframes vinyl-spin {
    to { transform: rotate(360deg); }
}

.playing-indicator {
    display: flex;
    gap: 2px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.playing-indicator .bar {
    width: 2px;
    background: var(--gold);
    animation: bar-dance 1s infinite alternate ease-in-out;
}

@keyframes bar-dance {
    from { height: 4px; }
    to { height: 12px; }
}

/* 2. 字体排版：制造极端对æ¯?(Editorial Typography) */
.history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.history-meta {
    display: flex;
    justify-content: center; /* 居中对齐时间æˆ?*/
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    width: 100%;
}

.meta-tag {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--gold);
    font-weight: 600;
}

.meta-date {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: 0.6;
}

.history-title-group {
    margin-bottom: 12px;
    text-align: center; /* 歌名也居ä¸?*/
    width: 100%;
}

.history-song-title {
    font-family: var(--font-display);
    font-size: 26px; /* 调大主标é¢?*/
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-artist {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px; /* 拉宽字间距，增加高级æ„?*/
}

.history-peak-verse {
    font-family: var(--font-poetry);
    font-size: 14px;
    font-style: italic;
    color: var(--text-primary);
    opacity: 0.8;
    border-left: none; /* 去掉竖线以实现完全对称的居中 */
    padding-left: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

/* 3. 右侧动作箭头：极简克制 */
.history-action {
    color: var(--text-muted);
    transition: all 0.3s ease;
    transform: translateX(0);
    padding: 10px; /* 增加点击区域但保持视觉极简 */
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hero-history-card:hover .history-action {
    color: var(--gold);
    transform: translateX(6px); /* 悬停时箭头向右微微推è¿?*/
}

/* 底部区域：PC 适配与垂直流量优åŒ?*/
.hero-history-card {
    margin: 0 auto !important; /* Let parent gap handle vertical space */
}

.daily-echo-container {
    width: 100%;
    max-width: 600px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.daily-echo-container:hover {
    transform: translateY(-4px);
}

.echo-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.echo-text {
    font-family: var(--font-poetry);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.echo-author {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.5;
    letter-spacing: 1px;
}

/* =========================================================
   PC DESKTOP FIX: 恢复杂志留白与绝对防溢出 (Breathing Room)
   作用范围：仅限电脑端 (min-width: 901px)
========================================================= */

@media (min-width: 901px) {
    /* 1. 悬挂系统重置：完美上中下分布，绝对不贴底 */
    body .hub-left {
        justify-content: space-between !important;
        padding: 10vh 0 6vh 0 !important; /* 顶部留 10vh，底部强制留出 6vh 护城河 */
    }

    /* 2. 剥夺膨胀权：禁止中间区域把底部内容挤出屏幕 */
    body .hub-section, 
    body .section-top, 
    body .section-center, 
    body .section-bottom {
        flex: none !important; 
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. 恢复黄金留白 (零件公差微调) */
    body .hub-main-title {
        margin-bottom: 24px !important; /* 给标题下方恢复呼吸空间 */
    }

    body .hub-start-btn {
        margin: 12px 0 36px 0 !important; /* 把按钮和下方历史卡片拉开 36px 的高级间距 */
    }

    body .hero-history-card {
        margin: 0 auto !important; /* 卡片只需居中，不需要上下边距，依靠父容器分配 */
    }

    /* 4. 今日偶感复位：取消不自然的位移 */
    body .daily-echo-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }
}

/* =========================================================
   PC DESKTOP FIX: 播放历史卡片精巧化缩放 (Scale Down)
   作用：减小中央体积，释放更多垂直呼吸空间
========================================================= */

@media (min-width: 901px) {
    /* 1. 卡片整体“瘦身” */
    body .hero-history-card {
        max-width: 380px !important; /* 原为 440px，收窄宽度 */
        padding: 16px 28px !important; /* 原为 24px 32px，减小内边距 */
        gap: 20px !important; /* 原为 28px，收紧内部元素间距 */
    }

    /* 2. 黑胶唱片等比例缩小 */
    body .history-vinyl-wrapper {
        width: 52px !important; /* 原为 64px */
        height: 52px !important;
    }

    /* 3. 字体字号微缩，匹配小卡片 */
    body .history-song-title {
        font-size: 21px !important; /* 原为 26px */
        margin-bottom: 4px !important;
    }
    
    body .history-artist {
        font-size: 10px !important; /* 原为 11px */
    }

    body .history-peak-verse {
        font-size: 13px !important; /* 原为 14px */
        line-height: 1.4 !important;
    }
}


/* 针对 PC 端 (约 3100 行以后的补丁区或直接合并) */
@media (min-width: 901px) {
    .daily-echo-container {
        margin-top: 0 !important;
        /* 增加一点顶部内边距，弥补删除标签后的空缺，保持平衡 */
        padding-top: 20px !important; 
    }

    .echo-text {
        /* 稍微减小一点字号，增加神秘感 */
        font-size: 1.35rem !important; 
        max-width: 500px; /* 限制宽度，让长句子自动折行，更具美感 */
        margin-bottom: 12px !important;
    }
}

/* 针对移动端 (在 mobile.css 或 main.css 的移动端补丁中) */
@media (max-width: 900px) {
    .daily-echo-container {
        padding-top: 10px !important;
    }
}
/* =========================================================
   THEME ADAPTATION: 档案抽屉全主题适配 (Archive Drawer)
   解决亮色/暖色主题下文字看不清的问题
========================================================= */

/* --- Light Theme (白昼主题) --- */
[data-theme="light"] .archive-drawer {
    background: rgba(250, 249, 245, 0.85) !important; /* 亮色毛玻璃背景 */
    box-shadow: 20px 0 50px rgba(0,0,0,0.15) !important; /* 阴影调柔和 */
}
[data-theme="light"] .history-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* 亮色分割线 */
}
[data-theme="light"] .close-drawer:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .drawer-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* --- Warm Theme (暖阳/羊皮纸主题) --- */
[data-theme="warm"] .archive-drawer {
    background: rgba(247, 240, 223, 0.85) !important; /* 暖色毛玻璃背景 */
    box-shadow: 20px 0 50px rgba(74, 60, 49, 0.2) !important;
}
[data-theme="warm"] .history-item {
    border-bottom: 1px solid rgba(74, 60, 49, 0.06) !important;
}
[data-theme="warm"] .close-drawer:hover {
    background: rgba(74, 60, 49, 0.05) !important;
}
[data-theme="warm"] .drawer-header {
    border-bottom: 1px solid rgba(74, 60, 49, 0.1) !important;
}

/* =========================================================
   PC DESKTOP FIX: 无界画布与阶梯悬浮重构 (Borderless Canvas)
   目标：消除左右割裂感，全屏融合，打破隐形网格
========================================================= */

@media (min-width: 901px) {
    /* 1. 画布大一统：给整个满屏赋予统一的背景色，彻底拆除中轴线 */
    body .hub-layout {
        display: grid !important;
        grid-template-columns: 65fr 35fr !important; /* 稍微调整比例，给右侧更多空间 */
        background: var(--bg-surface) !important; /* 全屏统一高级底色 */
    }

    body .hub-left {
        background: transparent !important;
        border-right: none !important; /* 拆掉中间的物理隔离墙 */
    }

    body .hub-right {
        background: transparent !important;
        border-left: none !important;
        padding: 10vh 60px 10vh 0 !important; /* 右侧安全距离 */
        justify-content: center !important;
        gap: 24px !important;
    }

    /* 2. 悬浮舱质感：让三个卡片变成独立漂浮的实体 */
    body .hub-feature-card {
        background: var(--bg-void) !important; /* 让卡片在底色上凸显出来 */
        border: 1px solid var(--bg-border) !important;
        border-radius: 16px !important;
        padding: 32px 40px !important; /* 增大内边距，接近原来的大小 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
        margin: 0 !important;
    }

    /* 3. 阶梯式错落 (打破隐形网格的魔法) */
    /* 我们让卡片向左侧“入侵”，打破左右分界的死板感 */
    body .hub-feature-card:nth-child(1) {
        transform: translateX(-40px); /* 每日推荐 向左探出 40px */
        z-index: 10;
    }
    
    body .hub-feature-card:nth-child(2) {
        transform: translateX(0); /* 经典歌单 保持原位 */
    }
    
    body .hub-feature-card:nth-child(3) {
        transform: translateX(-20px); /* 档案库 向左探出 20px */
    }

    /* 4. 磁吸悬浮交互 */
    body .hub-feature-card:hover {
        border-color: var(--gold) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* 悬停时保留错落感，但稍微上浮 */
    body .hub-feature-card:nth-child(1):hover { transform: translateX(-45px) translateY(-4px) !important; }
    body .hub-feature-card:nth-child(2):hover { transform: translateX(-5px) translateY(-4px) !important; }
    body .hub-feature-card:nth-child(3):hover { transform: translateX(-25px) translateY(-4px) !important; }
}


/* ─── 3. 移动端趣味微动效 (Theme-Adaptive) ─── */
@media (max-width: 900px) {
    
    /* 💡 趣味 1：果冻按压触感 (自适应滤镜) */
    body .hub-start-btn {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease, border-radius 0.3s ease !important;
    }
    body .hub-start-btn:active {
        /* 不再强行改变背景色，而是使用 filter: brightness 压暗，确保在所有主题的红色上都生效 */
        transform: scale(0.92) translateY(2px) !important;
        filter: brightness(0.85) !important; 
        border-radius: 12px !important;
        transition: transform 0.1s ease, border-radius 0.1s ease, filter 0.1s ease !important;
    }

    /* 💡 趣味 2：黑胶声波微扩散 (自适应主题色) */
    /* 放弃写死的 RGBA，改用 ::after 伪元素结合 var(--gold) 边框进行动画，完美匹配三套主题的专属金色 */
    @keyframes sonic-ripple-adaptive {
        0% { transform: scale(1); opacity: 0.6; border-width: 1.5px; }
        100% { transform: scale(1.6); opacity: 0; border-width: 0; }
    }
    
    body .history-vinyl-wrapper {
        position: relative;
        border-radius: 50%;
    }
    
    body .history-vinyl-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: solid var(--gold); /* 自动调用暗金、浅咖或陶土橘 */
        animation: sonic-ripple-adaptive 3s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        pointer-events: none;
    }

    /* 💡 趣味 3：底部导航栏的 Q 弹下沉 */
    body .mob-nav-item:active .mob-nav-icon {
        transform: translateY(6px) scale(0.6) !important;
        transition: transform 0.1s ease !important;
    }

    /* 💡 趣味 4：偶感文字的幽灵悬浮 */
    @keyframes gentle-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }
    body .daily-echo-container {
        animation: gentle-float 6s ease-in-out infinite; 
    }
}
/* =========================================================
   PURE KINETIC: 绝对纯净实体引擎 (V2.0 Final)
   目标：彻底根治杂色、光污染，回归极致排版美学
========================================================= */

@media (min-width: 901px) {
    /* 1. 强制清理：杀掉所有伪元素产生的光影残留 */
    body .hub-feature-card::before,
    body .hub-feature-card::after,
    body .hub-main-title::after {
        display: none !important;
        content: none !important;
    }

    /* 2. 标题回归：实色排版，拒绝渐变 */
    body .hub-main-title {
        background: none !important;
        color: var(--text-primary) !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        transition: letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    body .hub-left:hover .hub-main-title {
        letter-spacing: 12px !important; /* 核心交互：字距呼吸 */
        transform: scale(0.96) !important;
        background: none !important; /* 再次确认无背景干扰 */
    }

    /* 3. 悬浮舱：锁定实体坐标与干脆阴影 */
    body .hub-feature-card {
        opacity: 1 !important;
        visibility: visible !important;
        background: var(--bg-void) !important;
        border: 1px solid var(--bg-border) !important;
        box-shadow: none !important; /* 先清除所有旧阴影 */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
    }

    /* 绝对错落位 */
    body .hub-feature-card:nth-child(1) { transform: translateX(-40px); }
    body .hub-feature-card:nth-child(2) { transform: translateX(0); }
    body .hub-feature-card:nth-child(3) { transform: translateX(-20px); }

    /* 悬停反馈：只有建筑级硬阴影 */
    body .hub-feature-card:hover {
        border-color: var(--gold) !important;
        box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.1) !important;
        z-index: 10;
    }

    body .hub-feature-card:nth-child(1):hover { transform: translate(-48px, -8px) !important; }
    body .hub-feature-card:nth-child(2):hover { transform: translate(-8px, -8px) !important; }
    body .hub-feature-card:nth-child(3):hover { transform: translate(-28px, -8px) !important; }

    [data-theme="dark"] body .hub-feature-card:hover {
        box-shadow: 12px 12px 0px rgba(255, 255, 255, 0.04) !important;
    }
}

    /* ----------------------------------------------------
       2. 左侧交互：排版张力 (Typography Tension)
       没有光污染，只有纯粹的字体变化
    ---------------------------------------------------- */
    body .hub-main-title {
        transition: letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    body .hub-left:hover .hub-main-title {
        letter-spacing: 6px !important; /* 原本是 -2px，鼠标滑过时字距如呼吸般极度拉开 */
        transform: scale(0.98) !important; /* 配合字距拉伸，整体微缩以保持平衡 */
    }

    body .hub-start-btn {
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    body .hub-start-btn:hover {
        background: var(--text-primary) !important; /* 变成极致对比色的实体按钮 */
        color: var(--bg-void) !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        border-color: transparent !important;
    }


    /* ----------------------------------------------------
       3. 右侧交互：建筑级硬阴影 (Brutalist Shadows)
       打破柔和感，引入先锋设计中的实体厚度
    ---------------------------------------------------- */
    body .hub-feature-card {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
    }

    body .hub-feature-card:hover {
        border-color: var(--gold) !important;
        /* 核心：极其锐利、不发散的“硬阴影”，塑造实体的建筑厚重感 */
        box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.06) !important;
    }

    /* 结合硬阴影，卡片向左上方干脆地平移，营造物理按压的错觉 */
    body .hub-feature-card:nth-child(1):hover { transform: translate(-48px, -8px) !important; }
    body .hub-feature-card:nth-child(2):hover { transform: translate(-8px, -8px) !important; }
    body .hub-feature-card:nth-child(3):hover { transform: translate(-28px, -8px) !important; }

    /* 适配暗色主题的硬阴影 */
    [data-theme="dark"] body .hub-feature-card:hover {
        box-shadow: 12px 12px 0px rgba(255, 255, 255, 0.04) !important;
    }

    /* 内部元素只做干脆的平移，不要放大，保持秩序 */
    body .hub-feature-card:hover .icon-css {
        transform: translateX(4px) !important; 
    }

/* =========================================================
   FIX: 实体排版引擎强制显影与交互 (Kinetic Editorial v2.0)
   解决：卡片消失 Bug | 强化左侧字距呼吸 | 适配 65:35 比例
========================================================= */

@media (min-width: 901px) {
    /* 1. 强制初始化显影状态，防止动画失败导致消失 */
    body .hub-feature-card {
        opacity: 1 !important; /* 强制可见 */
        visibility: visible !important;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                    border-color 0.4s ease !important;
        border-radius: 12px !important;
        background: var(--bg-void) !important;
    }

    /* 2. 物理坐标锁定：确保即便没有动画，错落感也依然存在 */
    body .hub-feature-card:nth-child(1) { transform: translateX(-40px); }
    body .hub-feature-card:nth-child(2) { transform: translateX(0); }
    body .hub-feature-card:nth-child(3) { transform: translateX(-20px); }

    /* 3. 左侧：极致字距呼吸 (Kinetic Typography) */
    body .hub-main-title {
        transition: letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    /* 鼠标滑过左侧区域，触发品牌字体的“呼吸” */
    body .hub-left:hover .hub-main-title {
        letter-spacing: 12px !important; /* 大幅拉开字距，制造高级杂志感 */
        transform: scale(0.96) !important; /* 微微缩小，增加视觉深度 */
    }

    /* 4. 右侧：实体建筑感交互 (Solid Interaction) */
    body .hub-feature-card:hover {
        border-color: var(--gold) !important;
        /* 硬阴影：制造厚纸板或建筑模型的物理厚度 */
        box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.1) !important;
        background: var(--bg-elevated) !important;
        z-index: 10;
    }

    /* 悬停时：卡片向左上方干脆移动，阴影在右下方抵消，形成强烈的按压感 */
    body .hub-feature-card:nth-child(1):hover { transform: translate(-48px, -8px) !important; }
    body .hub-feature-card:nth-child(2):hover { transform: translate(-8px, -8px) !important; }
    body .hub-feature-card:nth-child(3):hover { transform: translate(-28px, -8px) !important; }

    /* 暗色主题下的硬阴影适配 */
    [data-theme="dark"] body .hub-feature-card:hover {
        box-shadow: 12px 12px 0px rgba(255, 255, 255, 0.04) !important;
    }
}

/* =========================================================
   UI FIX: PC & Mobile 完美隔离的高级感重塑 (Editorial Design)
   解决：移动端布局被挤压换行的问题，PC 端独享破框悬浮特效
========================================================= */

/* ── 1. 仅限 PC 端 (大于 900px) 的高级杂志排版 ── */
@media (min-width: 901px) {
    /* 顶部栏琉璃悬浮化 */
    body .collection-topbar,
    body .alchemy-topbar {
        gap: 20px !important; 
        padding: 0 32px !important;
        border-bottom: none !important; 
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
        background: rgba(8, 10, 12, 0.75) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        z-index: 2000 !important; 
    }

    [data-theme="light"] body .collection-topbar,
    [data-theme="light"] body .alchemy-topbar {
        background: rgba(250, 249, 245, 0.85) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="warm"] body .collection-topbar,
    [data-theme="warm"] body .alchemy-topbar {
        background: rgba(247, 240, 223, 0.85) !important;
        box-shadow: 0 4px 30px rgba(74, 60, 49, 0.08) !important;
    }

    /* 灵动胶囊 Exit 按钮 */
    body .exit-btn {
        height: 36px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        border: 1px solid transparent !important; 
        border-radius: 18px !important;
        background: transparent !important;
        display: flex !important; /* 核心：仅在PC端召唤它 */
        align-items: center !important;
        justify-content: center !important;
        font-family: var(--font-mono) !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        color: var(--text-secondary) !important;
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important; 
    }

    body .exit-btn:hover {
        background: var(--bg-elevated) !important;
        border-color: var(--bg-border) !important;
        color: var(--gold) !important;
        transform: translateX(-6px) !important; 
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="dark"] body .exit-btn:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    }
    body .exit-btn:active {
        transform: translateX(-6px) scale(0.95) !important;
    }

    /* 顶部栏大标题与金箔锚点 */
    body .collection-title {
        position: relative !important;
        font-family: var(--font-zh), var(--font-display) !important; 
        font-size: 19px !important;
        font-weight: 700 !important;
        letter-spacing: 4px !important;
        color: var(--text-primary) !important;
        display: flex !important;
        align-items: center !important;
        margin-left: 12px !important;
        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        white-space: nowrap !important; 
    }

    body .collection-title::before {
        content: '' !important;
        display: inline-block !important;
        width: 4px !important;
        height: 14px !important;
        background: var(--gold) !important;
        border-radius: 2px !important;
        margin-right: 16px !important;
        transform: skewX(-15deg) !important;
        box-shadow: 0 0 10px var(--gold-dim) !important;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    body .collection-topbar:hover .collection-title::before {
        box-shadow: 0 0 15px var(--gold) !important;
        height: 18px !important;
    }
    body .collection-title::after {
        content: '// L.L. STUDIO' !important;
        font-family: var(--font-mono) !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        letter-spacing: 3px !important;
        color: var(--text-muted) !important;
        margin-left: 20px !important;
        opacity: 0.3 !important;
        transform: translateY(2px) !important;
    }

    /* 胶囊 Export 按钮 */
    body .btn-minimal {
        border-radius: 16px !important;
        border: 1px solid var(--bg-border) !important;
        background: transparent !important;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
        padding: 6px 16px !important;
    }
    body .btn-minimal:hover {
        background: var(--gold) !important;
        color: var(--bg-void) !important;
        border-color: var(--gold) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(201, 168, 76, 0.25) !important;
    }

    /* 页面内容大标题呼吸线 */
    body .section-heading {
        position: relative !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        font-family: var(--font-display) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        color: var(--text-primary) !important;
        margin-bottom: 32px !important;
    }
    body .section-heading::before {
        content: '' !important;
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        background: var(--gold) !important;
        transform: rotate(45deg) !important;
        margin-right: 16px !important;
        box-shadow: 0 0 8px var(--gold-dim) !important;
        flex-shrink: 0 !important;
    }
    body .section-heading::after {
        content: '' !important;
        flex: 1 !important;
        height: 1px !important;
        background: linear-gradient(90deg, var(--gold), transparent) !important;
        margin-left: 24px !important;
        opacity: 0.3 !important;
    }
}

/* ── 2. 移动端 (小于 900px) 的隔离与字体优化 ── */
@media (max-width: 900px) {
    /* 核心修复：绝对封杀移动端 EXIT 按钮，把空间还给标题 */
    body .exit-btn {
        display: none !important;
    }

    /* 恢复移动端标题的正常单行排版，只做字体质感优化 */
    body .collection-title,
    body .section-heading {
        font-family: var(--font-zh), var(--font-display) !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important; /* 增加适度的呼吸感 */
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; /* 增加字体厚度与微光 */
        white-space: nowrap !important; /* 严防换行，根治 2x2 方块字问题 */
    }
    
    /* 屏蔽 PC 端的修饰元素，防止挤占宝贵的手机横向空间 */
    body .collection-title::before,
    body .collection-title::after {
        display: none !important;
    }
}
/* =========================================================
   UI RECONSTRUCTION v2: 全端“无界杂志”标题系统 (精准靶向版)
   修复：PC端重叠、拾词界面臃肿、移动端突兀色块与多余斜杠
========================================================= */

/* ─── 1. PC 端专属：无界舞台感 (min-width: 901px) ─── */
@media (min-width: 901px) {
    
    /* 🎯 靶向 1：经典歌单/档案库 顶部栏加高、底部对齐 */
    body .collection-topbar {
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
        height: 70px !important;
        padding: 0 60px !important;
        display: flex !important;
        align-items: flex-end !important;
        overflow: visible !important;
    }

    /* 🎯 靶向 2：拾词界面 (Alchemy) 绝对解绑，恢复原本的干练 */
    body .alchemy-topbar {
        background: transparent !important; 
        border-bottom: none !important;
        box-shadow: none !important;
        height: 64px !important; /* 恢复原本的克制高度 */
        padding: 0 60px !important;
        display: flex !important;
        align-items: center !important; /* 恢复垂直居中，拒绝臃肿 */
        overflow: visible !important;
    }

    /* 标题锚点：非对称半开放底座 */
    body .collection-title {
        background: var(--bg-surface) !important;
        padding: 12px 40px 12px 28px !important;
        border-radius: 0 24px 24px 0 !important; 
        border-left: 5px solid var(--gold) !important;
        box-shadow: 15px 10px 40px rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        
        /* 🎯 靶向 3：向右避开 EXIT 悬浮球，解决重叠挡字问题 */
        transform: none !important; 
        margin-left: 25px !important; 
        
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }


    /* 独立 Exit 球：悬浮交互体 */
    body .exit-btn {
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--bg-void) !important;
        border: 1px solid var(--gold-dim) !important;
        color: var(--gold) !important;
        z-index: 2001 !important;
        font-size: 0 !important; /* 隐藏长串文字 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    
    /* 针对拾词界面，动态微调 EXIT 球的垂直位置以保证居中 */
    body .alchemy-topbar .exit-btn {
        top: 10px !important; 
    }
    
    body .exit-btn::before {
        content: '←' !important;
        font-size: 16px !important;
        font-family: var(--font-mono) !important;
    }
    
    body .exit-btn:hover {
        transform: scale(1.1) !important;
        background: var(--bg-elevated) !important;
        border-color: var(--gold) !important;
    }
}

/* ─── 2. 移动端专属：极简画报感 (max-width: 900px) ─── */
@media (max-width: 900px) {
    
    /* 🎯 靶向 4：移除移动端突兀色块，恢复系统原生底色 */
    body .collection-topbar,
    body .alchemy-topbar {
        background: transparent !important; 
        border-bottom: 1px solid var(--bg-border) !important; /* 保留极简分割线 */
        height: 60px !important;
        padding: 0 var(--mob-pad) !important;
    }

    /* 标题去中心化：靠左对齐 */
    body .collection-topbar .collection-title {
        text-align: left !important;
        flex: 1 !important;
        font-size: 18px !important;
        letter-spacing: 2px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        /* 🎯 靶向 5：向右微移，告别紧贴屏幕边缘的局促感 */
        margin-left: 8px !important; 
    }

    /* 🎯 靶向 6：彻底废除移动端的 "/" 金色斜杠 */
    body .collection-topbar .collection-title::before {
        display: none !important;
    }

    /* 移动端元数据：在标题右侧增加极小的章节标识，保留细节 */
    body .collection-topbar .collection-title::after {
        content: 'SEC.V2' !important;
        font-family: var(--font-mono) !important;
        font-size: 8px !important;
        color: var(--gold) !important;
        opacity: 0.4 !important;
        margin-left: 10px !important;
        transform: translateY(1px) !important;
    }

    body .btn-minimal {
        border-radius: 4px !important;
        padding: 4px 10px !important;
        font-size: 9px !important;
    }
}

/* ─── 3. 页面内部大标题（通用升级）：渐变呼吸线 ─── */
body .section-heading {
        border-bottom: none !important;
        padding-bottom: 16px !important;
        position: relative !important;
        overflow: visible !important;
}

body .section-heading::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 140px !important;
        height: 1px !important;
        background: linear-gradient(90deg, var(--gold), transparent) !important;
        opacity: 0.6 !important;
}

/* =========================================================
   UI ENHANCEMENT: 档案库“来源溯源”视觉系统 (Branding Sidebar)
========================================================= */

/* 1. 给卡片容器预留侧边空间并锁定相对定位 */
.word-card-item, .analysis-card {
    position: relative !important;
    overflow: hidden !important; /* 确保超出的装饰元素被裁剪，增加高级感 */
}

/* 2. 侧边垂直来源标签 */
.item-source-sidebar {
    position: absolute !important;
    right: -45px; /* 初始位置偏外 */
    top: 50%;
    transform: translateY(-50%) rotate(90deg) !important;
    transform-origin: center;
    white-space: nowrap;
    
    font-family: var(--font-mono) !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    opacity: 0.15; /* 默认极低，作为背景装饰 */
    pointer-events: none; /* 不干扰点击收藏按钮 */
    transition: all 0.6s var(--transition) !important;
    text-transform: uppercase;
}

/* 悬停时激活：标签滑入并亮起 */
.word-card-item:hover .item-source-sidebar, 
.analysis-card:hover .item-source-sidebar {
    right: 12px;
    opacity: 0.6;
}

/* 3. 移动端适配：不再旋转，改为底部极细水印 */
@media (max-width: 900px) {
    .item-source-sidebar {
        position: static !important;
        transform: none !important;
        display: block !important;
        margin-top: 12px !important;
        opacity: 0.3 !important;
        font-size: 7px !important;
        border-top: 1px solid var(--bg-border);
        padding-top: 6px;
        text-align: right;
    }
}