/* =============================================
   主题配色系统 — theme.css
   支持 5 套主题，通过 data-theme 属性切换
   ============================================= */

/* ── 默认主题：甜蜜粉红 ── */
:root,
[data-theme="rose"] {
    --theme-primary:        #ff6b6b;
    --theme-primary-end:    #ff8e53;
    --theme-secondary:      #667eea;
    --theme-secondary-end:  #764ba2;
    --theme-accent:         #ff6b6b;

    /* 背景渐变（body/wrapper） */
    --theme-body-bg:        linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* 顶栏边框线 */
    --theme-topbar-border:  #ff6b6b;

    /* 卡片 */
    --theme-card-bg:        rgba(255, 255, 255, 0.96);
    --theme-card-shadow:    0 4px 20px rgba(102, 126, 234, 0.12);
    --theme-card-border:    rgba(255, 107, 107, 0.10);
    --theme-card-radius:    10px;

    /* 卡片 header */
    --theme-card-header-bg: linear-gradient(135deg, rgba(255,107,107,0.06), rgba(255,142,83,0.04));
    --theme-card-header-border: rgba(255,107,107,0.12);
    --theme-card-header-title: #e05555;

    /* 动态/留言条目左侧竖线 */
    --theme-item-accent:    #ff6b6b;

    /* 发布按钮 */
    --theme-publish-btn:    linear-gradient(135deg, #ff6b6b, #ff8e53);
    --theme-publish-btn-shadow: rgba(255,107,107,0.35);

    /* 工具按钮 */
    --theme-tool-btn-hover: rgba(255,107,107,0.08);

    /* 纪念日倒计时标签 */
    --theme-ann-days-bg:    rgba(102,126,234,0.08);
    --theme-ann-days-color: #667eea;

    /* 统计数字 */
    --theme-stat-num:       #ff6b6b;

    /* 设置弹窗顶部线 */
    --theme-settings-border: #ff6b6b;
    --theme-settings-tab-active: #ff6b6b;

    /* 文字链接 hover */
    --theme-link-hover:     #ff6b6b;

    /* 相册封面渐变 & 加密相册 */
    --theme-album-cover-bg: linear-gradient(135deg, #ff6b6b, #ff8e53);
    --theme-album-lock-bg:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* 情侣卡片渐变 */
    --theme-couple-card-bg: linear-gradient(145deg, #ff6b6b 0%, #ff8e53 40%, #ff6b9d 100%);

    /* 输入框 focus */
    --theme-input-focus:    #ff6b6b;

    /* 通知绿色（保持不变） */
    --theme-notification-bg: linear-gradient(135deg, #52c41a, #73d13d);

    /* 标签 active 颜色 */
    --theme-nav-active-color: #ff6b6b;

    /* blog 日志颜色 */
    --theme-blog-title-hover: #ff6b6b;
}

/* ── 主题2：星空蓝紫 ── */
[data-theme="galaxy"] {
    --theme-primary:        #7c6fcd;
    --theme-primary-end:    #a78bfa;
    --theme-secondary:      #3b82f6;
    --theme-secondary-end:  #6366f1;
    --theme-accent:         #a78bfa;

    --theme-body-bg:        linear-gradient(135deg, #1a1040 0%, #2d1b69 50%, #0f172a 100%);

    --theme-topbar-border:  #7c6fcd;

    --theme-card-bg:        rgba(255, 255, 255, 0.96);
    --theme-card-shadow:    0 4px 20px rgba(124, 111, 205, 0.18);
    --theme-card-border:    rgba(124, 111, 205, 0.15);
    --theme-card-radius:    10px;

    --theme-card-header-bg: linear-gradient(135deg, rgba(124,111,205,0.08), rgba(167,139,250,0.05));
    --theme-card-header-border: rgba(124,111,205,0.14);
    --theme-card-header-title: #6d5fc7;

    --theme-item-accent:    #7c6fcd;

    --theme-publish-btn:    linear-gradient(135deg, #7c6fcd, #a78bfa);
    --theme-publish-btn-shadow: rgba(124,111,205,0.35);

    --theme-tool-btn-hover: rgba(124,111,205,0.08);

    --theme-ann-days-bg:    rgba(124,111,205,0.10);
    --theme-ann-days-color: #7c6fcd;

    --theme-stat-num:       #7c6fcd;

    --theme-settings-border: #7c6fcd;
    --theme-settings-tab-active: #7c6fcd;

    --theme-link-hover:     #a78bfa;

    --theme-album-cover-bg: linear-gradient(135deg, #7c6fcd, #a78bfa);
    --theme-album-lock-bg:  linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);

    --theme-couple-card-bg: linear-gradient(145deg, #4c1d95 0%, #7c3aed 50%, #1e1b4b 100%);

    --theme-input-focus:    #7c6fcd;

    --theme-notification-bg: linear-gradient(135deg, #52c41a, #73d13d);

    --theme-nav-active-color: #a78bfa;

    --theme-blog-title-hover: #7c6fcd;
}

/* ── 主题3：薄荷清新 ── */
[data-theme="mint"] {
    --theme-primary:        #10b981;
    --theme-primary-end:    #34d399;
    --theme-secondary:      #0ea5e9;
    --theme-secondary-end:  #38bdf8;
    --theme-accent:         #10b981;

    --theme-body-bg:        linear-gradient(135deg, #064e3b 0%, #065f46 50%, #0c4a6e 100%);

    --theme-topbar-border:  #10b981;

    --theme-card-bg:        rgba(255, 255, 255, 0.97);
    --theme-card-shadow:    0 4px 20px rgba(16, 185, 129, 0.12);
    --theme-card-border:    rgba(16, 185, 129, 0.12);
    --theme-card-radius:    10px;

    --theme-card-header-bg: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(52,211,153,0.04));
    --theme-card-header-border: rgba(16,185,129,0.12);
    --theme-card-header-title: #059669;

    --theme-item-accent:    #10b981;

    --theme-publish-btn:    linear-gradient(135deg, #10b981, #34d399);
    --theme-publish-btn-shadow: rgba(16,185,129,0.35);

    --theme-tool-btn-hover: rgba(16,185,129,0.08);

    --theme-ann-days-bg:    rgba(14,165,233,0.10);
    --theme-ann-days-color: #0ea5e9;

    --theme-stat-num:       #10b981;

    --theme-settings-border: #10b981;
    --theme-settings-tab-active: #10b981;

    --theme-link-hover:     #10b981;

    --theme-album-cover-bg: linear-gradient(135deg, #10b981, #34d399);
    --theme-album-lock-bg:  linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);

    --theme-couple-card-bg: linear-gradient(145deg, #064e3b 0%, #10b981 50%, #0c4a6e 100%);

    --theme-input-focus:    #10b981;

    --theme-notification-bg: linear-gradient(135deg, #52c41a, #73d13d);

    --theme-nav-active-color: #10b981;

    --theme-blog-title-hover: #10b981;
}

/* ── 主题4：夕阳暖橙 ── */
[data-theme="sunset"] {
    --theme-primary:        #f59e0b;
    --theme-primary-end:    #ef4444;
    --theme-secondary:      #f97316;
    --theme-secondary-end:  #fb923c;
    --theme-accent:         #f59e0b;

    --theme-body-bg:        linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #92400e 100%);

    --theme-topbar-border:  #f59e0b;

    --theme-card-bg:        rgba(255, 255, 255, 0.97);
    --theme-card-shadow:    0 4px 20px rgba(245, 158, 11, 0.14);
    --theme-card-border:    rgba(245, 158, 11, 0.12);
    --theme-card-radius:    10px;

    --theme-card-header-bg: linear-gradient(135deg, rgba(245,158,11,0.07), rgba(249,115,22,0.04));
    --theme-card-header-border: rgba(245,158,11,0.12);
    --theme-card-header-title: #d97706;

    --theme-item-accent:    #f59e0b;

    --theme-publish-btn:    linear-gradient(135deg, #f59e0b, #ef4444);
    --theme-publish-btn-shadow: rgba(245,158,11,0.35);

    --theme-tool-btn-hover: rgba(245,158,11,0.08);

    --theme-ann-days-bg:    rgba(249,115,22,0.10);
    --theme-ann-days-color: #f97316;

    --theme-stat-num:       #f59e0b;

    --theme-settings-border: #f59e0b;
    --theme-settings-tab-active: #f59e0b;

    --theme-link-hover:     #f59e0b;

    --theme-album-cover-bg: linear-gradient(135deg, #f59e0b, #ef4444);
    --theme-album-lock-bg:  linear-gradient(135deg, #f97316 0%, #fb923c 100%);

    --theme-couple-card-bg: linear-gradient(145deg, #7c2d12 0%, #f59e0b 50%, #c2410c 100%);

    --theme-input-focus:    #f59e0b;

    --theme-notification-bg: linear-gradient(135deg, #52c41a, #73d13d);

    --theme-nav-active-color: #f59e0b;

    --theme-blog-title-hover: #f59e0b;
}

/* ── 主题5：深夜墨黑 ── */
[data-theme="dark"] {
    --theme-primary:        #e879f9;
    --theme-primary-end:    #a855f7;
    --theme-secondary:      #06b6d4;
    --theme-secondary-end:  #0ea5e9;
    --theme-accent:         #e879f9;

    --theme-body-bg:        linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);

    --theme-topbar-border:  #e879f9;

    --theme-card-bg:        rgba(26, 26, 46, 0.98);
    --theme-card-shadow:    0 4px 24px rgba(232, 121, 249, 0.15);
    --theme-card-border:    rgba(232, 121, 249, 0.18);
    --theme-card-radius:    10px;

    --theme-card-header-bg: linear-gradient(135deg, rgba(232,121,249,0.09), rgba(168,85,247,0.06));
    --theme-card-header-border: rgba(232,121,249,0.14);
    --theme-card-header-title: #e879f9;

    --theme-item-accent:    #e879f9;

    --theme-publish-btn:    linear-gradient(135deg, #e879f9, #a855f7);
    --theme-publish-btn-shadow: rgba(232,121,249,0.35);

    --theme-tool-btn-hover: rgba(232,121,249,0.08);

    --theme-ann-days-bg:    rgba(6,182,212,0.12);
    --theme-ann-days-color: #06b6d4;

    --theme-stat-num:       #e879f9;

    --theme-settings-border: #e879f9;
    --theme-settings-tab-active: #e879f9;

    --theme-link-hover:     #e879f9;

    --theme-album-cover-bg: linear-gradient(135deg, #e879f9, #a855f7);
    --theme-album-lock-bg:  linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);

    --theme-couple-card-bg: linear-gradient(145deg, #0f0f0f 0%, #e879f9 40%, #1a1a2e 100%);

    --theme-input-focus:    #e879f9;

    --theme-notification-bg: linear-gradient(135deg, #52c41a, #73d13d);

    --theme-nav-active-color: #e879f9;

    --theme-blog-title-hover: #e879f9;
}

/* ─────────────────────────────────────────────
   dark 主题：全局文字/卡片色调补充
   ───────────────────────────────────────────── */
[data-theme="dark"] body {
    color: #e2e8f0;
}

[data-theme="dark"] .content-card,
[data-theme="dark"] .user-card,
[data-theme="dark"] .bg-settings {
    color: #e2e8f0;
}

[data-theme="dark"] .card-header h2,
[data-theme="dark"] .author-name,
[data-theme="dark"] .moment-content,
[data-theme="dark"] .message-content,
[data-theme="dark"] .blog-title,
[data-theme="dark"] .blog-preview,
[data-theme="dark"] .album-card-name {
    color: #e2e8f0;
}

[data-theme="dark"] .moment-item,
[data-theme="dark"] .message-item {
    background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .publish-textarea,
[data-theme="dark"] .publish-author-input,
[data-theme="dark"] .comment-author-input,
[data-theme="dark"] .tool-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .author-time,
[data-theme="dark"] .moment-action,
[data-theme="dark"] .blog-meta,
[data-theme="dark"] .message-time,
[data-theme="dark"] .album-card-meta {
    color: #94a3b8;
}

[data-theme="dark"] .album-card {
    background: rgba(26, 26, 46, 0.98);
}

[data-theme="dark"] .settings-panel {
    background: #1a1a2e;
    color: #e2e8f0;
}

[data-theme="dark"] .settings-tabs {
    background: #0f0f1a;
}

[data-theme="dark"] .settings-tab {
    color: #94a3b8;
}

[data-theme="dark"] .settings-section-title {
    color: #e2e8f0;
}

[data-theme="dark"] .form-row label {
    color: #cbd5e1;
}

[data-theme="dark"] .form-row input,
[data-theme="dark"] .ann-form-input,
[data-theme="dark"] .anniversary-row .ann-date,
[data-theme="dark"] .anniversary-row .ann-name {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .mobile-nav-menu {
    background: #1a1a2e;
}

[data-theme="dark"] .mobile-nav-menu a {
    color: #e2e8f0;
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .top-bar {
    background: rgba(15, 15, 30, 0.97);
}

[data-theme="dark"] .top-bar-nav a {
    color: #94a3b8;
}

[data-theme="dark"] .user-actions a {
    color: #94a3b8;
}

/* ─────────────────────────────────────────────
   主题选择器弹窗样式
   ───────────────────────────────────────────── */
.theme-picker-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9995;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 58px 20px 0 0;
}

.theme-picker-overlay.open {
    display: flex;
}

.theme-picker-panel {
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    width: 280px;
    padding: 18px 16px 16px;
    animation: themePickerIn 0.22s cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"] .theme-picker-panel {
    background: #1a1a2e;
    color: #e2e8f0;
}

@keyframes themePickerIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-picker-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .theme-picker-title {
    color: #e2e8f0;
    border-bottom-color: rgba(255,255,255,0.1);
}

.theme-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 2px solid #efefef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    width: 100%;
    text-align: left;
}

.theme-option:hover {
    border-color: var(--theme-primary, #ff6b6b);
    background: rgba(0,0,0,0.02);
    transform: translateX(3px);
}

.theme-option.active {
    border-color: var(--theme-primary, #ff6b6b);
    background: rgba(0,0,0,0.03);
}

[data-theme="dark"] .theme-option {
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .theme-option:hover,
[data-theme="dark"] .theme-option.active {
    background: rgba(255,255,255,0.06);
}

.theme-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    position: relative;
    overflow: hidden;
}

.theme-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}

.theme-option-info {
    flex: 1;
}

.theme-option-name {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

[data-theme="dark"] .theme-option-name {
    color: #e2e8f0;
}

.theme-option-desc {
    font-size: 11px;
    color: #999;
}

[data-theme="dark"] .theme-option-desc {
    color: #64748b;
}

.theme-option-check {
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--theme-primary, #ff6b6b);
    flex-shrink: 0;
}

.theme-option.active .theme-option-check {
    opacity: 1;
}

/* 主题按钮（顶部导航里） */
.theme-btn {
    color: var(--theme-primary, #ff6b6b) !important;
    font-weight: bold;
    border: 1px solid rgba(255,107,107,0.3);
    border-radius: 4px;
    padding: 3px 10px !important;
    transition: all 0.3s;
    cursor: pointer;
}

.theme-btn:hover {
    background: rgba(255,107,107,0.1);
    border-color: var(--theme-primary, #ff6b6b);
}
