/* ================= css/components.css ================= */

/* --- 1. 极致毛玻璃特效与基础动画 --- */
.ios-glass {
    background: var(--card-bg-glass, rgba(255,255,255,0.65));
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.card {
    border-radius: var(--radius-lg, 16px);
    margin: 0 16px 12px 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:active, .tab-item:active, .placeholder-click:active { transform: scale(0.96); }

/* --- 2. 滑动容器 --- */
.swiper-container {
    width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.swiper-container::-webkit-scrollbar { display: none; }
.swiper-wrapper { display: flex; width: 200%; height: 100%; }
.swiper-slide { width: 50%; height: 100%; scroll-snap-align: start; flex-shrink: 0; }

/* ================= [ 第一页：状态页布局 ] ================= */
.slide-status { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* 顶部分区 (占 30%)：完美还原草图左右结构 */
.top-section {
    display: flex;
    gap: 12px;
    padding: 16px 16px 0 16px;
    min-height: 30vh;
    height: 38vh;
    flex-shrink: 0;
    margin-bottom: 12px;
}

/* 左侧：时间(上) + 天气(下) */
.top-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.time-date-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4px;
}
.time-text { font-size: 56px; font-weight: 300; line-height: 1; color: var(--text-primary); }
.date-text { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

.weather-module {
    flex: 2;
    margin: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 14px;
}
.weather-top {
    display: flex; align-items: center; gap: 8px;
}
.weather-icon {
    font-size: 28px;
}
.weather-temp {
    font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
.weather-desc {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.weather-tip {
    font-size: 12px; font-style: italic; color: var(--text-secondary);
    min-height: 16px;
}

/* 右侧：心情留言 (占满高度) */
.mood-module {
    flex: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    overflow: visible;
}
.mood-top {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px 14px 12px;
    background: rgba(0,0,0,0.015);
    border-radius: 16px 16px 0 0;
}
.mood-person {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mood-bubble {
    width: 68px; height: 68px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    transition: transform 0.2s;
}
.mood-bubble-solid {
    border: 2.5px solid var(--text-tertiary, #C7C7CC);
}
.mood-bubble-dashed {
    border: 2.5px dashed var(--text-tertiary, #C7C7CC);
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 24px;
}
.mood-bubble-dashed:active {
    transform: scale(1.1);
}
.mood-name {
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
}
.mood-date {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px 0;
}
.mood-note {
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: center;
    margin: 0 12px 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    overflow-y: auto;
    min-height: 60px;
}
.mood-note-label {
    font-size: 12px; color: var(--text-secondary); font-weight: 600;
    margin-bottom: 8px;
}
.mood-note-content {
    font-size: 14px; color: var(--text-primary);
    line-height: 1.6;
}

/* emoji 选择器 */
.emoji-picker {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 16px 16px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s;
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 4px;
    z-index: 50;
}
.emoji-picker.open {
    max-height: 200px;
    padding: 10px 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.emoji-option {
    font-size: 24px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.emoji-option:active {
    transform: scale(1.25);
    background: rgba(0,0,0,0.06);
}

/* 定时任务 & 待办通用样式 */
.task-card, .todo-card {
    display: flex; flex-direction: column;
    padding: 20px;
}
.task-card { height: 20vh; flex-shrink: 0; }
.todo-card { height: 18vh; flex-shrink: 0; margin-bottom: 0; }

.card-title { font-weight: 700; font-size: 18px; margin-bottom: 12px; color: var(--text-primary); }
.sub-title { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.task-lines { flex: 1; overflow-y: auto; }
.more-btn {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: auto;
    padding-top: 8px;
}

/* 首页任务卡片行 */
.task-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0;
}
.task-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #6B8E5A;
    flex-shrink: 0;
    margin-top: 5px;
}
.task-info {
    flex: 1;
}
.task-name {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 3px;
}
.task-meta {
    font-size: 12px; color: var(--text-secondary);
}

/* 子页面（覆盖层） */
.subpage {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-color, #F2F2F7);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}
.subpage.open {
    transform: translateX(0);
}
.subpage-header {
    display: flex; align-items: center;
    padding: 16px 20px;
    position: sticky; top: 0;
    background: var(--bg-color, #F2F2F7);
    z-index: 10;
}
.subpage-header h2 {
    flex: 1; text-align: center;
    font-size: 17px; font-weight: 600;
}
.subpage-back {
    font-size: 22px; background: none; border: none;
    color: var(--text-primary); cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}
.subpage-body {
    padding: 0 20px 40px;
}

/* 全部定时任务完整页样式 */
.task-group {
    margin-bottom: 20px;
}
.task-group-title {
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    padding: 12px 0 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.task-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.task-row-idx {
    width: 20px; font-size: 13px; color: var(--text-secondary);
    text-align: center; flex-shrink: 0;
}
.task-row-name {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    flex-shrink: 0;
}
.task-row-meta {
    flex: 1; font-size: 12px; color: var(--text-secondary);
    text-align: right;
}
.task-row-arrow {
    font-size: 18px; color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ====== 待办模块样式 ====== */
.todo-preview {
    flex: 1; overflow-y: auto;
}
.todo-group-label {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    padding: 6px 0 4px;
}
.todo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.todo-item-full {
    padding: 12px 0;
}
.todo-done .todo-item-title {
    text-decoration: line-through;
    color: var(--text-tertiary);
}
.todo-checkbox {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 2px solid var(--text-tertiary, #C7C7CC);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.todo-checkbox:active {
    transform: scale(0.85);
}
.todo-checkbox.checked {
    background: #6B8E5A;
    border-color: #6B8E5A;
}
.todo-item-body {
    flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.todo-item-title {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
}
.todo-cat {
    font-size: 11px; font-weight: 600;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
}
.todo-due {
    font-size: 11px; color: var(--text-secondary);
    margin-left: auto;
}
.todo-item-placeholder {
    font-size: 13px; color: var(--text-tertiary);
    padding: 12px 0; text-align: center;
}

/* 全部待办页 Tab */
.todo-tabs {
    display: flex; gap: 4px;
    padding: 4px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    margin-bottom: 16px;
}
.todo-tab {
    flex: 1; text-align: center;
    padding: 8px 0;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.todo-tab.active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* 固定日程 */
.todo-templates-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.todo-templates-title {
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 10px;
}
.todo-template-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.todo-template-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6B8E5A; flex-shrink: 0;
}
.todo-template-dot.disabled { background: var(--text-tertiary); }
.todo-template-name {
    flex: 1; font-size: 14px; font-weight: 500;
}
.todo-template-meta {
    font-size: 12px; color: var(--text-secondary);
}

/* 子页面右上角按钮 */
.subpage-action {
    font-size: 24px; background: none; border: none;
    color: var(--text-primary); cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 20px;
}

/* ====== 弹窗 / Modal ====== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 3000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.modal-overlay.open {
    opacity: 1; pointer-events: auto;
}
.modal-card {
    width: calc(100% - 48px); max-width: 340px;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex; flex-direction: column; gap: 14px;
    transform: scale(0.9);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-overlay.open .modal-card {
    transform: scale(1);
}
.modal-title {
    font-size: 17px; font-weight: 700; text-align: center;
}
.modal-type-switch {
    display: flex; gap: 4px;
    padding: 4px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
}
.modal-type-tab {
    flex: 1; text-align: center;
    padding: 8px 0;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.modal-type-tab.active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.modal-section {
    display: flex; flex-direction: column; gap: 10px;
}
.modal-input {
    width: 100%; padding: 10px 12px;
    border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
    font-size: 15px; background: rgba(0,0,0,0.03);
    outline: none;
}
.modal-input:focus {
    border-color: var(--text-secondary);
}
.modal-select {
    flex: 1; padding: 10px 12px;
    border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
    font-size: 14px; background: rgba(0,0,0,0.03);
    outline: none;
}
.modal-row {
    display: flex; gap: 10px;
}
.modal-actions {
    display: flex; gap: 10px; margin-top: 4px;
}
.modal-btn {
    flex: 1; padding: 12px 0; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: transform 0.15s;
}
.modal-btn:active { transform: scale(0.96); }
.modal-btn-cancel {
    background: rgba(0,0,0,0.06); color: var(--text-secondary);
}
.modal-btn-confirm {
    background: var(--text-primary, #1C1C1E); color: #fff;
}

/* ================= [ 第二页：功能页布局 ] ================= */
.greeting-section {
    display: flex; justify-content: space-between;
    padding: 24px 24px 12px 24px;
}
.greet-left { display: flex; flex-direction: column; }
.greet-text { font-size: 14px; color: var(--text-secondary); transition: opacity 0.3s, transform 0.3s; }
.greet-time { font-size: 48px; font-weight: 300; line-height: 1.1; }
.greet-right { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.greet-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #E8E8E8; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.greet-avatar-img {
    width: 100%; height: 100%; object-fit: cover;
}
.greet-date { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ====== 音乐模块（页面约1/4高度） ====== */
.music-module {
    display: flex; flex-direction: column;
    justify-content: center;
    padding: 24px;
    margin: 0 16px 16px;
    height: 22vh;
    cursor: pointer;
}
.music-body {
    display: flex; justify-content: space-between; align-items: center;
    height: 100%;
}
.music-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: center;
}
.song-name {
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-lyric {
    font-size: 14px; color: var(--text-secondary); margin-top: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-style: italic;
    transition: opacity 0.3s;
}
.music-cover {
    width: 72px; height: 72px; flex-shrink: 0; margin-left: 20px;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #2C2C2E, #1C1C1E);
    display: flex; align-items: center; justify-content: center;
}
.music-disc {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.3);
}
.music-cover.has-art {
    background-size: cover; background-position: center;
}
.music-cover.has-art .music-disc { display: none; }

@keyframes discSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.music-cover.playing {
    animation: discSpin 4s linear infinite;
}

#subpage-music {
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ====== 音乐子页面视图切换 ====== */
.music-view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.music-view.active {
    display: flex;
    position: relative;
}

/* ====== 歌单主界面 ====== */
.music-list-body {
    flex: 1; overflow-y: auto;
    padding: 0 0 40px;
    scrollbar-width: none;
}
.music-list-body::-webkit-scrollbar { display: none; }

/* 当前播放条 */
.now-playing-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    margin: 0 16px 4px;
    border-radius: 14px;
    background: rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.now-playing-bar:active {
    transform: scale(0.98);
    background: rgba(0,0,0,0.06);
}
.np-cover {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #3A3A3C, #1C1C1E);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.np-cover.playing {
    animation: discSpin 4s linear infinite;
}
.np-disc {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}
.np-info {
    flex: 1; min-width: 0;
}
.np-name {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-artist {
    font-size: 12px; color: var(--text-secondary); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-action {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--text-primary, #1C1C1E);
    color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer;
    transition: transform 0.15s;
}
.np-action:active {
    transform: scale(0.9);
}

/* 歌单分隔条 */
.playlist-divider {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px 10px;
}
.playlist-divider-line {
    flex: 1; height: 1px;
    background: rgba(0,0,0,0.08);
}
.playlist-divider-text {
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* 歌单列表 */
.playlist-list {
    padding: 0 20px;
}
.playlist-empty {
    text-align: center; font-size: 13px; color: var(--text-tertiary);
    padding: 40px 0;
}
.pl-item {
    display: flex; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    transition: background 0.15s;
}
.pl-item:active {
    background: rgba(0,0,0,0.02);
}
.pl-idx {
    width: 28px; flex-shrink: 0;
    font-size: 15px; font-weight: 600;
    color: var(--text-tertiary);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2px;
}
.pl-item.playing .pl-idx {
    color: var(--text-primary);
    font-size: 16px;
}
.pl-body {
    flex: 1; min-width: 0;
}
.pl-name {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-artist {
    font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.pl-msg {
    font-size: 12px; color: var(--text-tertiary);
    font-style: italic; margin-top: 4px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pl-item.playing .pl-msg {
    -webkit-line-clamp: 2;
    color: var(--text-secondary);
}

.music-page-body {
    flex: 1; overflow-y: auto;
    padding: 0 20px 16px;
    scrollbar-width: none;
}
.music-page-body::-webkit-scrollbar { display: none; }

/* 播放器区域 */
.player-section {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 0 16px;
}
.player-cover {
    width: 200px; height: 200px; border-radius: 50%;
    background: linear-gradient(135deg, #3A3A3C, #1C1C1E);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    margin-bottom: 20px;
    overflow: hidden;
}
.player-cover.has-art {
    background-size: cover; background-position: center;
}
.player-cover.has-art .player-disc { display: none; }
.player-cover.playing {
    animation: discSpin 8s linear infinite;
}
.player-disc {
    width: 60px; height: 60px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
.player-disc-note {
    font-size: 28px; color: rgba(255,255,255,0.5);
}
.player-song-name {
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    text-align: center; margin-bottom: 4px;
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-artist {
    font-size: 14px; color: var(--text-secondary);
    text-align: center; margin-bottom: 16px;
}

/* 进度条 */
.player-progress {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 0 8px;
}
.player-time {
    font-size: 11px; color: var(--text-tertiary);
    min-width: 32px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.player-bar {
    flex: 1; height: 4px;
    background: rgba(0,0,0,0.08);
    border-radius: 2px; cursor: pointer;
    position: relative;
}
.player-bar-fill {
    height: 100%; width: 0%;
    background: var(--text-primary, #1C1C1E);
    border-radius: 2px;
    transition: width 0.3s linear;
}

/* 控制按钮 */
.player-controls {
    display: flex; align-items: center; gap: 28px;
    margin-top: 16px;
}
.player-btn {
    width: 44px; height: 44px;
    border: none; background: none;
    font-size: 22px; color: var(--text-primary);
    cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, background 0.15s;
}
.player-btn:active {
    transform: scale(0.88); background: rgba(0,0,0,0.06);
}
.player-btn-play {
    width: 56px; height: 56px; font-size: 26px;
    background: var(--text-primary, #1C1C1E);
    color: #fff;
}
.player-btn-play:active {
    background: #3A3A3C;
}

/* DJ串词 */
.dj-message {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 0; margin-bottom: 8px;
}
.dj-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #3A3A3C, #1C1C1E);
    color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dj-bubble {
    background: rgba(0,0,0,0.04);
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px;
    max-width: calc(100% - 50px);
}
.dj-text {
    font-size: 14px; color: var(--text-primary);
    line-height: 1.6;
    font-style: italic;
}

/* 歌词区域 */
.lyric-section {
    max-height: 120px; overflow-y: auto;
    padding: 8px 0 16px;
    scrollbar-width: none;
}
.lyric-section::-webkit-scrollbar { display: none; }
.lyric-placeholder {
    text-align: center; font-size: 13px; color: var(--text-tertiary);
    padding: 20px 0;
}
.lyric-line {
    font-size: 14px; color: var(--text-tertiary);
    text-align: center; padding: 4px 0;
    transition: color 0.3s, font-size 0.3s, font-weight 0.3s;
}
.lyric-line.active {
    color: var(--text-primary);
    font-size: 15px; font-weight: 600;
}

/* ====== 电台聊天视图 ====== */
#music-view-chat {
    flex-direction: column;
}
.radio-chat-messages {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: none;
}
.radio-chat-messages::-webkit-scrollbar { display: none; }
.radio-chat-welcome {
    display: flex; gap: 10px; align-items: flex-start;
}
.radio-msg {
    display: flex; gap: 10px; align-items: flex-start;
    max-width: 85%;
}
.radio-msg-yu {
    align-self: flex-start;
}
.radio-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.radio-msg-user .radio-msg-bubble {
    background: var(--text-primary, #1C1C1E);
    color: #fff;
    border-radius: 12px 0 12px 12px;
}
.radio-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #3A3A3C, #1C1C1E);
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.radio-msg-user .radio-msg-avatar {
    background: linear-gradient(135deg, #D4A5A5, #C49090);
}
.radio-msg-bubble {
    background: rgba(0,0,0,0.04);
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px;
    font-size: 14px; line-height: 1.6;
    color: var(--text-primary);
}
.radio-msg-time {
    font-size: 10px; color: var(--text-tertiary);
    margin-top: 4px;
    padding: 0 42px;
}
.radio-msg-user .radio-msg-time {
    text-align: right;
}

/* 聊天输入栏 */
.radio-chat-bar {
    display: flex; gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: var(--bg-color, #FAFAFA);
    flex-shrink: 0;
}
.radio-chat-input {
    flex: 1; padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.03);
    font-size: 14px; outline: none;
    font-family: inherit;
}
.radio-chat-input:focus {
    border-color: var(--text-secondary);
}
.radio-chat-send {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--text-primary, #1C1C1E);
    color: #fff; font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.radio-chat-send:active {
    transform: scale(0.9);
}

/* ====== 聊天页底部 Tab ====== */
.chat-bottom-tabs {
    flex-shrink: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: var(--bg-color, #FAFAFA);
    display: flex; flex-direction: column;
}
.music-tabs {
    display: flex; gap: 4px;
    padding: 8px 16px 4px;
}
.music-tab {
    flex: 1; text-align: center;
    padding: 8px 0;
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.music-tab.active {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary);
}
.music-tab-panel {
    overflow-y: auto;
    padding: 0 16px 12px;
    max-height: 220px;
    scrollbar-width: none;
}
.music-tab-panel::-webkit-scrollbar { display: none; }
.music-tab-content {
    display: none;
}
.music-tab-content.active {
    display: block;
}

/* Queue / History 列表 */
.queue-list, .history-list {
    display: flex; flex-direction: column;
}
.queue-empty {
    text-align: center; font-size: 13px; color: var(--text-tertiary);
    padding: 20px 0;
}
.queue-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
}
.queue-item.playing {
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    padding: 10px 8px;
    margin: 0 -8px;
}
.queue-item-idx {
    width: 20px; font-size: 13px; color: var(--text-tertiary);
    text-align: center; flex-shrink: 0;
}
.queue-item.playing .queue-item-idx {
    color: var(--text-primary); font-weight: 700;
}
.queue-item-info { flex: 1; min-width: 0; }
.queue-item-name {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.queue-item-artist { font-size: 12px; color: var(--text-secondary); }

/* Radio 控制面板 */
.radio-section {
    display: flex; flex-direction: column; gap: 10px;
}
.radio-input {
    width: 100%; padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.03);
    font-size: 13px; color: var(--text-primary);
    resize: none; outline: none; font-family: inherit;
}
.radio-input:focus { border-color: var(--text-secondary); }
.radio-actions { display: flex; gap: 6px; }
.radio-btn {
    flex: 1; padding: 8px 0;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: rgba(0,0,0,0.03);
    font-size: 12px; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.15s;
}
.radio-btn:active { transform: scale(0.96); }
.radio-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.radio-btn:disabled:active { transform: none; }
.radio-status {
    font-size: 12px; color: var(--text-secondary);
    text-align: center; min-height: 16px;
}

/* ====== 应用网格（左2×2应用 + 右侧小组件） ====== */
.app-grid {
    display: flex;
    gap: 16px;
    padding: 8px 20px 0;
}
.grid-apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    justify-items: center;
    align-content: start;
}
.grid-widgets {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.app-icon {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    cursor: pointer;
    transition: transform 0.15s;
}
.app-icon:active {
    transform: scale(0.9);
}
.app-icon-box {
    width: 60px; height: 60px;
    border-radius: 14px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.app-icon-img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 14px;
}
.app-icon-label {
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

/* iOS 小组件卡片 */
.widget-card {
    border-radius: 16px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s;
}
.widget-card:active {
    transform: scale(0.96);
}
.pet-widget { flex: 2; }
.toy-widget { flex: 1; }
.widget-img {
    width: 36px; height: 36px;
    object-fit: contain;
}
.widget-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
}


/* ================= [ 底部导航栏（iOS风格圆角矩形） ] ================= */
#bottom-tabbar {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    width: calc(100% - 24px); max-width: 420px;
    height: 92px;
    border-radius: 22px;
    display: flex; justify-content: space-evenly; align-items: center;
    z-index: 1000;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.tab-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    cursor: pointer;
    transition: transform 0.15s;
}
.tab-item:active { transform: scale(0.9); }
.tab-icon-box {
    width: 60px; height: 60px;
    border-radius: 14px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tab-item.active .tab-icon-box {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.1);
}
.tab-icon-img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 14px;
}
.tab-label {
    font-size: 10px; font-weight: 500;
    color: var(--text-secondary);
}
.tab-item.active .tab-label {
    color: var(--text-primary);
    font-weight: 600;
}
#bottom-tabbar.hidden {
    transform: translateX(-50%) translateY(calc(100% + 20px));
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}

/* ================= [ 滑动指示器（独立容器，不重叠） ] ================= */
.swiper-pagination {
    position: absolute;
    bottom: calc(108px + env(safe-area-inset-bottom) + 12px);
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 100;
}
.swiper-pagination .dot {
    width: 6px; height: 6px; border-radius: 3px;
    background: var(--text-tertiary, #C7C7CC);
    transition: width 0.3s, background 0.3s;
}
.swiper-pagination .dot.active {
    width: 18px;
    background: var(--text-primary, #1C1C1E);
}

/* ====== 下拉刷新指示器 ====== */
.ptr-indicator {
    height: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: height 0.25s ease, opacity 0.25s ease;
    flex-shrink: 0;
}
.ptr-indicator.ptr-loading {
    transition: height 0.2s ease;
}
.ptr-spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.1s linear;
}
.ptr-loading .ptr-spinner {
    animation: ptrSpin 0.6s linear infinite;
}
.ptr-done .ptr-spinner {
    border-color: #6B8E5A;
    border-top-color: #6B8E5A;
}
@keyframes ptrSpin {
    to { transform: rotate(360deg); }
}
.ptr-text {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.ptr-done .ptr-text {
    color: #6B8E5A;
}

/* ====== 记忆重写通知弹窗 ====== */
.notify-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.notify-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.notify-card {
    width: calc(100% - 48px);
    max-width: 340px;
    height: 420px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.notify-overlay.open .notify-card {
    transform: scale(1) translateY(0);
}
.notify-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.notify-icon {
    font-size: 24px;
}
.notify-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}
.notify-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    scrollbar-width: none;
}
.notify-body::-webkit-scrollbar { display: none; }
.notify-body h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: var(--text-primary);
}
.notify-body h3:first-child { margin-top: 0; }
.notify-body p {
    margin: 4px 0;
    color: var(--text-secondary);
}
.notify-body ul {
    padding-left: 18px;
    margin: 4px 0;
    color: var(--text-secondary);
}
.notify-body li {
    margin: 2px 0;
}
.notify-btn {
    margin: 12px 20px 20px;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    background: var(--text-primary, #1C1C1E);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}
.notify-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

/* 设置页样式已移至 css/pages/settings.css */