@charset "utf-8";
/**
 * Claude Design System × NetEase Player Extension
 * 全网解析在线音乐播放器 - Anthropic 官网沉静典雅质感与网易云播放功能系统
 */

:root {
    --claude-bg: #141413;
    --claude-surface: #1c1b18;
    --claude-surface-card: rgba(28, 27, 24, 0.88);
    --claude-surface-hover: rgba(255, 255, 255, 0.06);
    --claude-border: rgba(232, 230, 220, 0.12);
    --claude-border-hover: rgba(232, 230, 220, 0.25);
    --claude-border-active: rgba(217, 119, 87, 0.4);
    --claude-text-primary: #faf9f5;
    --claude-text-secondary: #b0aea5;
    --claude-text-muted: #73726c;
    --claude-terracotta: #d97757;
    --claude-terracotta-hover: #c96442;
    --claude-terracotta-soft: rgba(217, 119, 87, 0.16);
    --claude-terracotta-glow: rgba(217, 119, 87, 0.35);
    --claude-sage: #788c5d;
    --claude-sage-soft: rgba(120, 140, 93, 0.2);
    --claude-blue: #6a9bcc;
    --claude-radius-sm: 6px;
    --claude-radius-md: 10px;
    --claude-radius-lg: 14px;
    --claude-radius-pill: 9999px;
    --claude-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --claude-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 全局基础重置与 Claude 暗色质感 */
html, body {
    background: #141413 !important;
    color: var(--claude-text-primary) !important;
    font-family: var(--claude-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: radial-gradient(circle at 50% 20%, #201e1a 0%, #141413 65%, #0c0c0b 100%) !important;
}

/* ==============================================================
 * 顶部一体化导航条 (Header Bar) - Claude Code 典雅暗黑毛玻璃系统
 * ============================================================== */
.claude-header-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    background: rgba(20, 20, 19, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--claude-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
}

/* 左侧：微型品牌与极简低对比度外链 */
.header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.header-brand-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--claude-text-primary) !important;
    letter-spacing: 0.3px !important;
    user-select: none !important;
    margin-right: 2px !important;
}

.header-brand-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--claude-terracotta) !important;
}

.header-sub-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(232, 230, 220, 0.08) !important;
    border-radius: var(--claude-radius-pill) !important;
    color: var(--claude-text-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--claude-transition) !important;
}

.header-sub-link:hover {
    color: var(--claude-text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--claude-border-hover) !important;
}

/* 中间：Tab 分段控制器 */
.header-tab-group {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

.btn-box {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px !important;
    background: rgba(28, 27, 24, 0.88) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-pill) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.btn-box .btn {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--claude-radius-pill) !important;
    color: var(--claude-text-secondary) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: var(--claude-transition) !important;
    float: none !important;
    margin: 0 !important;
}

.btn-box .btn:hover {
    color: var(--claude-text-primary) !important;
    background: var(--claude-surface-hover) !important;
}

.btn-box .btn.active {
    background: var(--claude-terracotta) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px var(--claude-terracotta-glow) !important;
}

/* 右侧：网易云云端持久化账户徽章 (SQLite) */
.header-right-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

.cloud-account-badge {
    height: 28px !important;
    padding: 0 10px 0 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--claude-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: var(--claude-transition) !important;
}

.cloud-account-badge:hover {
    color: var(--claude-text-primary) !important;
    border-color: var(--claude-border-hover) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.cloud-account-badge.is-bound {
    border-color: rgba(217, 119, 87, 0.4) !important;
    background: rgba(217, 119, 87, 0.1) !important;
    color: #f5f4ef !important;
}

.cloud-account-badge .account-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.cloud-account-badge .account-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #6b6961 !important;
    transition: var(--claude-transition) !important;
}

.cloud-account-badge.is-bound .account-dot {
    background: #4ade80 !important;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6) !important;
}

/* Claude 风格弹窗系统 (SQLite 绑定 / 网易云用户卡片) */
.layui-layer.claude-layer-skin {
    background: rgba(24, 23, 20, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-card) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65) !important;
    overflow: hidden !important;
}

.claude-modal-box {
    padding: 22px !important;
    color: var(--claude-text-primary) !important;
    font-family: var(--claude-font) !important;
}

.claude-modal-head {
    text-align: center !important;
    margin-bottom: 18px !important;
}

.claude-modal-head .modal-icon {
    font-size: 30px !important;
    margin-bottom: 6px !important;
}

.claude-modal-head .modal-title {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: var(--claude-text-primary) !important;
    margin-bottom: 4px !important;
}

.claude-modal-head .modal-subtitle {
    font-size: 11.5px !important;
    color: var(--claude-text-muted) !important;
    line-height: 1.5 !important;
}

.modal-input-label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--claude-text-secondary) !important;
    margin-bottom: 6px !important;
}

.modal-input-wrap {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.claude-modal-input {
    flex: 1 !important;
    height: 36px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-sm) !important;
    color: #fff !important;
    font-size: 13px !important;
    outline: none !important;
    transition: var(--claude-transition) !important;
}

.claude-modal-input:focus {
    border-color: var(--claude-terracotta) !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.25) !important;
}

.claude-modal-submit-btn {
    height: 36px !important;
    padding: 0 16px !important;
    background: var(--claude-terracotta) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--claude-radius-sm) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--claude-transition) !important;
}

.claude-modal-submit-btn:hover {
    background: var(--claude-terracotta-hover) !important;
    box-shadow: 0 4px 12px var(--claude-terracotta-glow) !important;
}

.modal-tip-box {
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--claude-radius-sm) !important;
    font-size: 11px !important;
    color: var(--claude-text-muted) !important;
    line-height: 1.6 !important;
}

.modal-tip-box code {
    color: var(--claude-terracotta) !important;
    background: rgba(217, 119, 87, 0.12) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

/* 用户状态卡片 */
.user-card-avatar-wrap {
    position: relative !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
}

.user-card-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--claude-terracotta) !important;
    box-shadow: 0 4px 16px var(--claude-terracotta-glow) !important;
}

.user-card-status-dot {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 10px !important;
    height: 10px !important;
    background: #4ade80 !important;
    border: 2px solid #181714 !important;
    border-radius: 50% !important;
}

.user-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.user-stat-card {
    padding: 10px 4px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--claude-radius-sm) !important;
    text-align: center !important;
}

.user-stat-card .stat-num {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--claude-terracotta) !important;
}

.user-stat-card .stat-label {
    font-size: 10.5px !important;
    color: var(--claude-text-muted) !important;
    margin-top: 2px !important;
}

.user-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.claude-card-btn {
    height: 34px !important;
    border-radius: var(--claude-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
    transition: var(--claude-transition) !important;
}

.claude-card-btn.primary {
    background: rgba(217, 119, 87, 0.15) !important;
    border-color: rgba(217, 119, 87, 0.4) !important;
    color: #ff9b7a !important;
}

.claude-card-btn.primary:hover {
    background: var(--claude-terracotta) !important;
    color: #fff !important;
}

.claude-card-btn.secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--claude-border) !important;
    color: var(--claude-text-secondary) !important;
}

.claude-card-btn.secondary:hover {
    color: var(--claude-text-primary) !important;
    background: var(--claude-surface-hover) !important;
}

.claude-card-btn.danger {
    background: transparent !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

.claude-card-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

/* 登录/注册 Tab 分段选择器 */
.claude-auth-tabs {
    display: flex !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-pill) !important;
    padding: 3px !important;
    margin-bottom: 18px !important;
}

.auth-tab-item {
    flex: 1 !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--claude-text-muted) !important;
    border-radius: var(--claude-radius-pill) !important;
    cursor: pointer !important;
    transition: var(--claude-transition) !important;
    user-select: none !important;
}

.auth-tab-item:hover {
    color: var(--claude-text-primary) !important;
}

.auth-tab-item.active {
    background: var(--claude-terracotta) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px var(--claude-terracotta-glow) !important;
}

.auth-tab-pane {
    display: none;
}

.auth-tab-pane.active {
    display: block !important;
    animation: authPaneFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes authPaneFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-form-group {
    margin-bottom: 14px !important;
}

.label-hint {
    font-size: 11px !important;
    color: var(--claude-text-muted) !important;
    font-weight: normal !important;
    margin-left: 4px !important;
}

.claude-modal-block-btn {
    width: 100% !important;
    height: 38px !important;
    border-radius: var(--claude-radius-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    margin-top: 6px !important;
    transition: var(--claude-transition) !important;
}

.claude-modal-block-btn.primary {
    background: var(--claude-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--claude-terracotta-glow) !important;
}

.claude-modal-block-btn.primary:hover {
    background: var(--claude-terracotta-hover) !important;
    transform: translateY(-1px) !important;
}

/* 网易云 UID 绑定管理板块 */
.netease-binding-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--claude-radius-sm) !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
}

.binding-info-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
}

.binding-label {
    color: var(--claude-text-muted) !important;
}

.binding-val {
    color: var(--claude-text-primary) !important;
    font-weight: 500 !important;
}

.uid-tag {
    color: var(--claude-terracotta) !important;
    font-size: 11.5px !important;
    font-family: monospace !important;
}

.binding-action-row {
    display: flex !important;
    gap: 8px !important;
}

.claude-pill-btn {
    flex: 1 !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: var(--claude-radius-pill) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    transition: var(--claude-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.claude-pill-btn.primary {
    background: rgba(217, 119, 87, 0.15) !important;
    border-color: rgba(217, 119, 87, 0.4) !important;
    color: #ff9b7a !important;
}

.claude-pill-btn.primary:hover {
    background: var(--claude-terracotta) !important;
    color: #fff !important;
}

.claude-pill-btn.secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--claude-border) !important;
    color: var(--claude-text-secondary) !important;
}

.claude-pill-btn.secondary:hover {
    color: var(--claude-text-primary) !important;
    background: var(--claude-surface-hover) !important;
}

.claude-pill-btn.danger {
    background: transparent !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

.claude-pill-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

.binding-empty-notice {
    font-size: 12px !important;
    color: var(--claude-text-muted) !important;
    margin-bottom: 8px !important;
}

.binding-input-group {
    display: flex !important;
    gap: 8px !important;
}


.btn-box .active:after {
    display: none !important;
}

/* 主数据展示区：高质感卡片排版 */
.center {
    top: 52px !important;
    bottom: 80px !important;

}

.data-area {
    background: transparent !important;
    border: none !important;
    padding-bottom: 24px !important;
}

.list-item {
    border-bottom: 1px solid rgba(232, 230, 220, 0.05) !important;
    color: var(--claude-text-secondary) !important;
    transition: var(--claude-transition) !important;
    border-radius: var(--claude-radius-sm) !important;
    margin-bottom: 2px !important;
}

.list-item:hover {
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--claude-text-primary) !important;
}

.list-head {
    border-bottom: 1px solid var(--claude-border) !important;
    color: var(--claude-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 正在播放的条目 - 沉静陶土红与微光声波律动 */
.list-item.list-playing {
    background: var(--claude-terracotta-soft) !important;
    color: var(--claude-text-primary) !important;
    border-left: 3px solid var(--claude-terracotta) !important;
    font-weight: 500 !important;
}

.list-item.list-playing .music-name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.list-item.list-playing .auth-name {
    color: var(--claude-terracotta) !important;
}

/* 右侧黑胶唱片与歌词呈现 */
.player .cover {
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    transition: var(--claude-transition) !important;
}

.player .cover:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8) !important;
}

.player .lyric {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: 200px !important;
    bottom: 24px !important;
    overflow: hidden !important;
    text-align: center !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#lyric {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#lyric li {
    color: var(--claude-text-muted) !important;
    font-size: 13.5px !important;
    line-height: 28px !important;
    height: 28px !important;
    transition: var(--claude-transition) !important;
    padding: 0 10px !important;
    margin: 4px 0 !important;
    opacity: 0.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

/* 歌曲制作人/宣发信息等元数据：沉静弱化，不干扰正文听歌 */
#lyric li.lrc-meta {
    font-size: 11.5px !important;
    line-height: 22px !important;
    height: 22px !important;
    color: var(--claude-text-muted) !important;
    opacity: 0.35 !important;
    font-weight: 400 !important;
}

#lyric li.lrc-meta.lplaying,
#lyric li.lrc-meta.lrc-current {
    font-size: 12.5px !important;
    color: var(--claude-text-secondary) !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    transform: none !important;
}

.lyric-tip {
    color: var(--claude-text-muted) !important;
    font-size: 13.5px !important;
    opacity: 0.65 !important;
    letter-spacing: 0.5px !important;
}

#lyric li.lplaying,
#lyric li.lrc-current {
    color: var(--claude-terracotta) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: 0 0 16px var(--claude-terracotta-glow) !important;
    transform: scale(1.05);
}


/* ==============================================================
 * 网易云音乐 × Claude 现代底栏播放控制器
 * ============================================================== */
.footer {
    height: 80px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    z-index: 99999 !important;
    background: #141413 !important;
    background: rgba(20, 20, 19, 0.98) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-top: 1px solid var(--claude-border) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6) !important;
}

.footer-container {
    height: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* --- 1. 左侧歌曲微缩卡片 --- */
.footer-left {
    flex: 0 1 240px !important;
    max-width: 260px !important;
    min-width: 140px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.footer-cover-wrap {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: var(--claude-transition) !important;
}

.footer-cover-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    opacity: 0 !important;
    transition: var(--claude-transition) !important;
}

.footer-cover-wrap:hover .footer-cover-overlay {
    opacity: 1 !important;
}

.footer-cover-wrap:hover .footer-cover {
    transform: scale(1.08) !important;
}

.footer-song-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.footer-song-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.footer-song-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--claude-text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.footer-quality-badge {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    background: var(--claude-sage-soft) !important;
    color: #a7cf7b !important;
    border: 1px solid rgba(120, 140, 93, 0.35) !important;
    letter-spacing: 0.2px !important;
    flex-shrink: 0 !important;
}

.footer-song-artist {
    font-size: 12px !important;
    color: var(--claude-text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 2px !important;
}

/* 收藏红心按钮 */
.footer-icon-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    border-radius: var(--claude-radius-pill) !important;
    color: var(--claude-text-muted) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--claude-transition) !important;
}

.footer-icon-btn:hover {
    color: var(--claude-text-primary) !important;
    background: var(--claude-surface-hover) !important;
}

.btn-like {
    margin-left: 2px !important;
}

.btn-like .heart-icon {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-like:hover .heart-icon {
    transform: scale(1.15);
}

.btn-like.liked {
    color: var(--claude-terracotta) !important;
}

.btn-like.liked .heart-icon {
    fill: var(--claude-terracotta) !important;
    stroke: var(--claude-terracotta) !important;
    transform: scale(1.08);
}

/* --- 2. 中间核心播放与时间进度条 (网易云结构) --- */
.footer-center {
    flex: 1 1 420px !important;
    max-width: 520px !important;
    margin: 0 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

/* 控制按钮行 */
.player-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}

.player-controls .player-btn {
    position: static !important;
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    transition: var(--claude-transition) !important;
    opacity: 0.85 !important;
}

.player-controls .player-btn:hover {
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

/* 核心播放/暂停大圆钮 (纯 CSS 矢量几何绘制，彻底淘汰破损雪碧图切片) */
.player-controls .btn-play {
    width: 40px !important;
    height: 40px !important;
    background: var(--claude-terracotta) !important;
    background-image: none !important; /* 关键：彻底清除原版背景图片切片 */
    border-radius: 50% !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    left: auto !important;
    right: auto !important;
    margin: 0 4px !important;
    box-shadow: 0 4px 16px var(--claude-terracotta-glow) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    cursor: pointer !important;
    transition: var(--claude-transition) !important;
}

.player-controls .btn-play:hover {
    background: var(--claude-terracotta-hover) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 22px var(--claude-terracotta-glow) !important;
}

.player-controls .btn-play:active {
    transform: scale(0.94) !important;
}

/* 处于暂停中（点击开始播放）：纯白三角形播放图标，光学微偏右1px视觉绝对居中 */
.player-controls .btn-play:after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-38%, -50%) !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border-style: solid !important;
    border-width: 7px 0 7px 12px !important;
    border-color: transparent transparent transparent #ffffff !important;
    border-radius: 1.5px !important;
}

/* 处于播放中（点击执行暂停）：纯白双竖线暂停图标 */
.player-controls .btn-play.btn-state-paused:after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 13px !important;
    height: 14px !important;
    background: transparent !important;
    background-image: none !important;
    border-left: 4px solid #ffffff !important;
    border-right: 4px solid #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    border-radius: 1px !important;
}

/* 歌词视窗切换按钮：高质感微型胶囊 */
.player-controls .btn-lyric-toggle {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    height: 22px !important;
    min-width: 24px !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: 4px !important;
    color: var(--claude-text-secondary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    line-height: 16px !important;
    margin-left: -2px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--claude-transition) !important;
    box-sizing: border-box !important;
}

.player-controls .btn-lyric-toggle:hover {
    color: var(--claude-text-primary) !important;
    border-color: var(--claude-border-hover) !important;
    background: var(--claude-surface-hover) !important;
}

.player-controls .btn-lyric-toggle.active {
    background: var(--claude-terracotta) !important;
    border-color: var(--claude-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--claude-terracotta-glow) !important;
}

/* 进度条与时间显示行 */
.player-progress-bar-wrap {
    width: 100% !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.time-display {
    font-size: 11px !important;
    line-height: 18px !important;
    color: var(--claude-text-secondary) !important;
    font-family: Consolas, Menlo, Monaco, "Courier New", monospace !important;
    min-width: 36px !important;
    text-align: center !important;
    user-select: none !important;
}

.total-time {
    color: var(--claude-text-muted) !important;
}

.progress-box {
    position: relative !important;
    flex: 1 !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* 孟坤进度条样式增强：高质感双色轨与发光圆点 */
.mkpgb-area {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.mkpgb-bar {
    position: absolute !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transition: height 0.18s ease !important;
    overflow: visible !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.progress-box:hover .mkpgb-bar {
    height: 6px !important;
}

/* 缓冲进度条 */
.mkpgb-buf {
    position: absolute !important;
    height: 100% !important;
    width: 0%;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    transition: width 0.3s ease !important;
}

/* 已播放进度条 (Claude 陶土渐变色) */
.mkpgb-cur {
    position: absolute !important;
    height: 100% !important;
    background: linear-gradient(90deg, #d97757 0%, #e59275 100%) !important;
    border-radius: 4px !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    box-shadow: 0 0 10px rgba(217, 119, 87, 0.5) !important;
}

/* 滑块小圆点 - 默认微光可见，hover放大 */
.mkpgb-dot {
    width: 10px !important;
    height: 10px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--claude-terracotta) !important;
    top: 50% !important;
    margin-top: -5px !important;
    margin-left: -5px !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
    opacity: 0.85 !important;
}

.progress-box:hover .mkpgb-dot {
    opacity: 1 !important;
    transform: scale(1.3) !important;
}

/* 悬浮预览时间气泡 Tooltip */
.progress-tooltip {
    position: absolute !important;
    bottom: 24px !important;
    transform: translateX(-50%) !important;
    padding: 3px 8px !important;
    background: rgba(28, 27, 24, 0.95) !important;
    border: 1px solid var(--claude-border-hover) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-family: Consolas, Menlo, Monaco, monospace !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.15s ease !important;
    z-index: 10000 !important;
    white-space: nowrap !important;
}

.progress-tooltip.show {
    opacity: 1 !important;
}

/* --- 3. 右侧高级播放工具箱 (倍速 / 音源 / 音量 / 歌单) --- */
.footer-right {
    flex: 0 0 auto !important;
    min-width: 290px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.speed-control-box,
.source-capsule-btn,
.footer-vol-wrap,
.btn-playlist-toggle {
    flex-shrink: 0 !important;
}


/* 倍速胶囊按钮 */
.speed-control-box {
    position: relative !important;
}

.speed-capsule-btn {
    height: 28px !important;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-pill) !important;
    color: var(--claude-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--claude-transition) !important;
}

.speed-capsule-btn:hover {
    color: var(--claude-text-primary) !important;
    border-color: var(--claude-border-hover) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.speed-capsule-btn.active-speed {
    background: var(--claude-terracotta) !important;
    border-color: var(--claude-terracotta) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px var(--claude-terracotta-glow) !important;
}

/* 倍速下拉弹层 (Claude 风格精致暗色卡片) */
.speed-menu-dropdown {
    position: absolute !important;
    bottom: 38px !important;
    right: 0 !important;
    width: 110px !important;
    background: rgba(24, 23, 20, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 6px 0 !important;
    display: none;
    z-index: 10002 !important;
}

.speed-menu-dropdown.show {
    display: block !important;
    animation: speedFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes speedFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.speed-menu-title {
    padding: 4px 12px 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--claude-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 4px !important;
}

.speed-item {
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: var(--claude-text-secondary) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: var(--claude-transition) !important;
}

.speed-item:hover {
    color: var(--claude-text-primary) !important;
    background: var(--claude-surface-hover) !important;
}

.speed-item.active {
    color: var(--claude-terracotta) !important;
    font-weight: 600 !important;
}

.speed-item.active:after {
    content: '✓' !important;
    font-size: 12px !important;
    color: var(--claude-terracotta) !important;
}

/* 当前音源胶囊 (强制单行不折行，避免"全豆\n要"难看换行) */
.source-capsule-btn {
    height: 28px !important;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-pill) !important;
    color: var(--claude-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: var(--claude-transition) !important;
}

.source-capsule-btn span {
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.source-capsule-btn:hover {
    color: var(--claude-text-primary) !important;
    border-color: var(--claude-border-hover) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

/* 音量控制组合 */
.footer-vol-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.footer-vol-wrap .btn-quiet {
    position: static !important;
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

.footer-vol-wrap .btn-quiet:hover {
    opacity: 1 !important;
}

.volume-slider-box {
    width: 75px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.volume-slider-box .mkpgb-bar {
    height: 4px !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.volume-slider-box .mkpgb-cur {
    background: var(--claude-text-secondary) !important;
    box-shadow: none !important;
}

.volume-slider-box:hover .mkpgb-cur {
    background: var(--claude-terracotta) !important;
}

/* 播放队列抽屉按钮 */
.btn-playlist-toggle {
    position: relative !important;
}

.playlist-count-badge {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    background: var(--claude-terracotta) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    height: 14px !important;
    min-width: 14px !important;
    padding: 0 4px !important;
    line-height: 14px !important;
    border-radius: var(--claude-radius-pill) !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 浮动操作 Toast (快捷键响应提示) */
.claude-toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    background: rgba(20, 20, 19, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--claude-border) !important;
    color: var(--claude-text-primary) !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100000 !important;
}

.claude-toast.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* PC 端纯享大歌词模式 (网易云同款沉浸唱片大歌词视图) */
@media screen and (min-width: 769px) {
    body.is-pure-player .center .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    body.is-pure-player .player {
        float: none !important;
        width: 100% !important;
        max-width: 660px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    body.is-pure-player .cover {
        width: 220px !important;
        height: 220px !important;
        margin: 10px auto 0 !important;
    }
    body.is-pure-player .music-cover {
        width: 220px !important;
        height: 220px !important;
    }
    body.is-pure-player .cover:after {
        display: none !important;
    }
    body.is-pure-player .lyric {
        top: 250px !important;
        bottom: 20px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    body.is-pure-player #lyric li {
        font-size: 15px !important;
        line-height: 32px !important;
        height: 32px !important;
    }
    body.is-pure-player #lyric li.lplaying,
    body.is-pure-player #lyric li.lrc-current {
        font-size: 19px !important;
    }
}

/* 中等屏幕与笔记本适配 (769px ~ 1120px，如 1024px 分辨率) */
@media screen and (max-width: 1120px) {
    .footer-container {
        padding: 0 10px !important;
    }
    .footer-left {
        flex: 0 1 180px !important;
        gap: 8px !important;
    }
    .footer-center {
        margin: 0 8px !important;
        max-width: 440px !important;
    }
    .player-controls {
        gap: 12px !important;
    }
    .footer-right {
        gap: 6px !important;
        flex: 0 0 auto !important;
        min-width: 270px !important;
    }
    .volume-slider-box {
        width: 44px !important;
    }
    .source-capsule-btn {
        padding: 0 8px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .speed-capsule-btn {
        padding: 0 8px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

}

/* 移动端排版自适应 (< 768px) - 网易云紧凑双层底栏与高质感触控 */
@media screen and (max-width: 768px) {
    :root {
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-top: env(safe-area-inset-top, 0px);
    }
    .center {
        top: calc(44px + var(--safe-top)) !important;
        bottom: calc(74px + var(--safe-bottom)) !important;
    }
    .footer {
        height: calc(74px + var(--safe-bottom)) !important;
        padding: 0 10px var(--safe-bottom) !important;
        box-sizing: border-box !important;
    }
    .footer-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 2px 2px !important;
        width: 100% !important;
        height: 100% !important;
        gap: 0 !important;
    }

    /* 移动端顶层：贯穿式网易云紧凑时间进度条 */
    .footer-center {
        order: -1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .player-progress-bar-wrap {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 1px 0 3px !important;
    }
    .time-display {
        font-size: 10px !important;
        min-width: 28px !important;
        color: var(--claude-text-muted) !important;
        letter-spacing: -0.2px !important;
    }
    .time-display.current-time {
        color: var(--claude-text-secondary) !important;
    }
    .progress-box {
        height: 16px !important;
    }
    .mkpgb-bar {
        height: 3px !important;
    }
    .progress-box:active .mkpgb-bar {
        height: 5px !important;
    }
    .mkpgb-dot {
        opacity: 1 !important; /* 移动端始终保持小白点可见，便于手指触控 */
        width: 10px !important;
        height: 10px !important;
        margin-top: -5px !important;
        margin-left: -5px !important;
    }

    /* 移动端底层左侧：微缩歌曲卡片 + 红心 */
    .footer-left {
        flex: 1 1 auto !important;
        max-width: 48% !important;
        min-width: 0 !important;
        gap: 7px !important;
    }
    .footer-cover-wrap {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }
    .footer-song-meta {
        min-width: 0 !important;
        flex: 1 !important;
    }
    .footer-song-name {
        font-size: 12.5px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .footer-song-artist {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .footer-quality-badge {
        display: none !important; /* 节省移动端水平空间 */
    }
    .btn-like {
        padding: 4px !important;
        margin-left: 0 !important;
    }
    .btn-like svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* 移动端底层中间：主控制按钮 */
    .player-controls {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    .player-controls .btn-order,
    .player-controls .btn-lyric-toggle {
        display: none !important; /* 循环模式和纯歌词在更多/菜单中切换 */
    }
    .player-controls .btn-prev,
    .player-controls .btn-next {
        width: 22px !important;
        height: 22px !important;
        opacity: 0.9 !important;
    }
    .player-controls .btn-play {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }

    /* 移动端底层右侧：倍速胶囊 + 播放队列 */
    .footer-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .footer-right .footer-vol-wrap,
    .footer-right .source-capsule-btn {
        display: none !important; /* 移动端物理音量键即可调节音量 */
    }
    .speed-capsule-btn {
        height: 24px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
    }
    .speed-menu-dropdown {
        bottom: 34px !important;
        right: 0 !important;
        width: 100px !important;
    }
    .speed-item {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    .btn-playlist-toggle {
        padding: 4px !important;
    }
    .btn-playlist-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==============================================================
 * Claude 官方美学：全网音乐搜索高质感暗黑弹窗 (彻底去除原生圆圈)
 * ============================================================== */
.layui-layer.claude-search-layer-box {
    background: rgba(28, 25, 23, 0.96) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.claude-search-layer-box .layui-layer-content {
    background: transparent !important;
    padding: 0 !important;
    color: #f3eee8 !important;
    overflow: visible !important;
}

#claude-search-form {
    padding: 24px 26px 22px !important;
    box-sizing: border-box !important;
}

.search-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.search-modal-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.search-modal-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}

.search-modal-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #f5f0eb !important;
    letter-spacing: 0.5px !important;
}

.search-modal-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 26px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.search-modal-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

/* 搜索输入与提交组合 */
#claude-search-form .search-group {
    display: flex !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

#claude-search-form .search-group:focus-within {
    border-color: var(--claude-terracotta, #c86545) !important;
    box-shadow: 0 0 0 3px rgba(200, 101, 69, 0.25) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.search-input-wrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
}

#claude-search-form #search-wd {
    width: 100% !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
}

#claude-search-form #search-wd::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

#claude-search-form .search-submit {
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 0 22px !important;
    background: var(--claude-terracotta, #c86545) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
}

#claude-search-form .search-submit:hover {
    background: var(--claude-terracotta-hover, #d97757) !important;
}

/* 音源平台：分段胶囊按钮组 (彻底清除圆圈) */
.search-source-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.source-section-label {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500 !important;
}

.source-pill-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

/* 隐藏原生 HTML 单选圆圈输入框 */
.source-pill-btn input[type="radio"] {
    display: none !important;
    appearance: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* 现代化胶囊药丸按钮样式 */
.source-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
}

.source-pill-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

.source-pill-btn.active,
.source-pill-btn:has(input[type="radio"]:checked) {
    background: var(--claude-terracotta, #c86545) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-color: var(--claude-terracotta, #c86545) !important;
    box-shadow: 0 3px 12px rgba(200, 101, 69, 0.42) !important;
}

/* ==============================================================
 * 最近搜索记录模块：Anthropic Claude 陶土质感历史记录标签与云端漫游徽章
 * ============================================================== */
.search-history-section {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

.search-history-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.search-history-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.search-history-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.3px !important;
}

.search-history-badge {
    font-size: 11px !important;
    color: rgba(200, 101, 69, 0.85) !important;
    background: rgba(200, 101, 69, 0.12) !important;
    border: 1px solid rgba(200, 101, 69, 0.22) !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    line-height: 1.4 !important;
}

.search-history-clear-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.search-history-clear-btn:hover {
    color: var(--claude-terracotta, #c86545) !important;
    background: rgba(200, 101, 69, 0.1) !important;
}

.search-history-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    max-height: 110px !important;
    overflow-y: auto !important;
    padding-right: 2px !important;
}

.search-history-tags::-webkit-scrollbar {
    width: 4px !important;
}

.search-history-tags::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}

.search-history-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-history-pill:hover {
    background: rgba(200, 101, 69, 0.14) !important;
    border-color: rgba(200, 101, 69, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.search-history-pill .pill-kw {
    max-width: 130px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.search-history-pill .pill-del {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.15s ease !important;
}

.search-history-pill .pill-del:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ff6b6b !important;
}