/* ============================================================
   区块背景美化 — 首页模块+标题渐变背景
   6 套渐变预设，自动轮换 / 可自定义
   ============================================================ */

/* ── 默认 CSS 变量（薄荷绿） ── */
:root {
    --zm-sec-radius: 12px;
    --zm-sec-transition: all 0.3s ease;
}

/* ============================================================
   6 套渐变预设（通过 data-sec-theme 属性切换）
   ============================================================ */

/* 1. 薄荷绿 mint */
[data-sec-theme="mint"] {
    --zm-sec-bg: linear-gradient(135deg, #e8fff0 0%, #f0fff4 50%, #e5f9ed 100%);
    --zm-sec-border: rgba(72, 199, 142, 0.25);
    --zm-sec-shadow: 0 4px 20px rgba(72, 199, 142, 0.10);
    --zm-sec-title-color: #e74c3c;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(72, 199, 142, 0.12) 0%, transparent 70%);
    --zm-sec-accent: #48c78e;
    --zm-sec-decor-color: #48c78e;
}

/* 2. 樱花粉 cherry */
[data-sec-theme="cherry"] {
    --zm-sec-bg: linear-gradient(135deg, #fff0f3 0%, #fff5f7 50%, #ffe8ee 100%);
    --zm-sec-border: rgba(255, 105, 135, 0.2);
    --zm-sec-shadow: 0 4px 20px rgba(255, 105, 135, 0.08);
    --zm-sec-title-color: #e91e63;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(255, 105, 135, 0.1) 0%, transparent 70%);
    --zm-sec-accent: #ff6987;
    --zm-sec-decor-color: #ff8fab;
}

/* 3. 天空蓝 sky */
[data-sec-theme="sky"] {
    --zm-sec-bg: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 50%, #e3f0fc 100%);
    --zm-sec-border: rgba(66, 165, 245, 0.2);
    --zm-sec-shadow: 0 4px 20px rgba(66, 165, 245, 0.08);
    --zm-sec-title-color: #1976d2;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(66, 165, 245, 0.1) 0%, transparent 70%);
    --zm-sec-accent: #42a5f5;
    --zm-sec-decor-color: #90caf9;
}

/* 4. 薰衣紫 lavender */
[data-sec-theme="lavender"] {
    --zm-sec-bg: linear-gradient(135deg, #f3e8ff 0%, #f8f0ff 50%, #eee0fd 100%);
    --zm-sec-border: rgba(171, 71, 188, 0.2);
    --zm-sec-shadow: 0 4px 20px rgba(171, 71, 188, 0.08);
    --zm-sec-title-color: #9c27b0;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(171, 71, 188, 0.1) 0%, transparent 70%);
    --zm-sec-accent: #ab47bc;
    --zm-sec-decor-color: #ce93d8;
}

/* 5. 蜜桃橙 peach */
[data-sec-theme="peach"] {
    --zm-sec-bg: linear-gradient(135deg, #fff3e0 0%, #fff8ef 50%, #ffedda 100%);
    --zm-sec-border: rgba(255, 152, 0, 0.2);
    --zm-sec-shadow: 0 4px 20px rgba(255, 152, 0, 0.08);
    --zm-sec-title-color: #e65100;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(255, 152, 0, 0.1) 0%, transparent 70%);
    --zm-sec-accent: #ff9800;
    --zm-sec-decor-color: #ffb74d;
}

/* 6. 柠檬黄 lemon */
[data-sec-theme="lemon"] {
    --zm-sec-bg: linear-gradient(135deg, #fefde8 0%, #fffff0 50%, #fcf9d9 100%);
    --zm-sec-border: rgba(205, 220, 57, 0.25);
    --zm-sec-shadow: 0 4px 20px rgba(205, 220, 57, 0.10);
    --zm-sec-title-color: #f57f17;
    --zm-sec-title-bg: linear-gradient(90deg, rgba(205, 220, 57, 0.12) 0%, transparent 70%);
    --zm-sec-accent: #cddc39;
    --zm-sec-decor-color: #dce775;
}

/* ============================================================
   模块容器背景
   ============================================================ */

/* 目标：全宽小工具区 + 内容区小工具区的 .theme-box */
.zm-sec-styled {
    background: var(--zm-sec-bg) !important;
    border: 1px solid var(--zm-sec-border) !important;
    border-radius: var(--zm-sec-radius) !important;
    box-shadow: var(--zm-sec-shadow) !important;
    padding: 20px !important;
    transition: var(--zm-sec-transition);
    position: relative;
    overflow: hidden;
}

/* 悬停微浮 */
.zm-sec-styled:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px);
}

/* 背景装饰：右上角半透明圆 */
.zm-sec-styled::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--zm-sec-accent, #48c78e);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* 背景装饰：左下角半透明圆 */
.zm-sec-styled::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--zm-sec-accent, #48c78e);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* 内容置于装饰之上 */
.zm-sec-styled > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   标题美化
   ============================================================ */

/* 区块内 title-theme 标题 */
.zm-sec-styled .title-theme {
    background: var(--zm-sec-title-bg);
    border-radius: 8px;
    padding: 10px 14px 10px 1.5em !important;
    margin: -5px -5px 15px -5px !important;
    position: relative;
}

/* 标题左侧竖条替换为渐变色 */
.zm-sec-styled .title-theme:before {
    background: linear-gradient(180deg, var(--zm-sec-accent), var(--zm-sec-title-color, #e74c3c)) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    width: 4px !important;
    border-radius: 4px !important;
}

/* 标题文字颜色 */
.zm-sec-styled .title-theme h2,
.zm-sec-styled .title-theme h3,
.zm-sec-styled .title-theme h4 {
    color: var(--zm-sec-title-color) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    margin: 0 !important;
}

/* 标题装饰图标（JS 注入 .zm-sec-decor） */
.zm-sec-decor {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}

.zm-sec-decor svg {
    width: 20px;
    height: 20px;
    fill: var(--zm-sec-decor-color, #48c78e);
    opacity: 0.7;
    animation: zmSecFloat 3s ease-in-out infinite;
}

@keyframes zmSecFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* "更多 >" 链接美化 */
.zm-sec-styled .title-theme a[href]:not(.zm-sec-decor-link),
.zm-sec-styled .more-link,
.zm-sec-styled a.muted-color[href*="category"] {
    color: var(--zm-sec-accent) !important;
    font-weight: 500;
    transition: all 0.2s;
}

.zm-sec-styled .title-theme a[href]:not(.zm-sec-decor-link):hover,
.zm-sec-styled .more-link:hover {
    color: var(--zm-sec-title-color) !important;
}

/* ── 侧栏小工具标题 <h3>（zib-widget > h3） ── */
.sidebar .zm-sec-styled > h3,
.zm-sec-styled > h3 {
    color: var(--zm-sec-title-color) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    background: var(--zm-sec-title-bg);
    border-radius: 8px;
    padding: 8px 12px !important;
    margin: -5px -5px 12px -5px !important;
    position: relative;
    z-index: 1;
}

/* 侧栏小工具需要更紧凑的内距 */
.sidebar .zm-sec-styled {
    padding: 14px !important;
    margin-bottom: 15px;
}

/* ============================================================
   内部元素透明化（避免双层背景）
   子比原生小工具在 .theme-box 内嵌套 .zib-widget / .main-bg 等
   不透明容器，需清除以露出渐变背景
   ============================================================ */
.zm-sec-styled .theme-box,
.zm-sec-styled.theme-box > .theme-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 子比 .zib-widget 内部容器（标签云/评论/链接等 widget 内容层） */
.zm-sec-styled .zib-widget {
    background: transparent !important;
    box-shadow: none !important;
}

/* 子比 .main-bg / .main-shadow（一言等小工具内层容器） */
.zm-sec-styled .main-bg {
    background: transparent !important;
}
.zm-sec-styled .main-shadow {
    box-shadow: none !important;
}

/* 链接列表小工具 .links-widget 内部间距优化 */
.zm-sec-styled.links-widget .links-box {
    padding: 5px 0 0;
}

/* ============================================================
   index-tab 标签栏配色
   ============================================================ */
.zm-sec-styled .index-tab a,
.zm-sec-styled .tab-nav-theme a {
    transition: color 0.2s;
}

.zm-sec-styled .index-tab li.active a,
.zm-sec-styled .tab-nav-theme li.active a {
    color: var(--zm-sec-title-color) !important;
}

.zm-sec-styled .tab-nav-theme li.active:before,
.zm-sec-styled .tab-nav-theme li.swiper-slide-thumb-active::before {
    background: var(--zm-sec-accent) !important;
}

/* ============================================================
   暗色模式
   ============================================================ */

/* 暗色下：预设背景变深色半透明 */
body.dark-theme [data-sec-theme="mint"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(72, 199, 142, 0.06) 0%, rgba(72, 199, 142, 0.03) 100%);
    --zm-sec-border: rgba(72, 199, 142, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.dark-theme [data-sec-theme="cherry"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(255, 105, 135, 0.06) 0%, rgba(255, 105, 135, 0.03) 100%);
    --zm-sec-border: rgba(255, 105, 135, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.dark-theme [data-sec-theme="sky"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(66, 165, 245, 0.06) 0%, rgba(66, 165, 245, 0.03) 100%);
    --zm-sec-border: rgba(66, 165, 245, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.dark-theme [data-sec-theme="lavender"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(171, 71, 188, 0.06) 0%, rgba(171, 71, 188, 0.03) 100%);
    --zm-sec-border: rgba(171, 71, 188, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.dark-theme [data-sec-theme="peach"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(255, 152, 0, 0.06) 0%, rgba(255, 152, 0, 0.03) 100%);
    --zm-sec-border: rgba(255, 152, 0, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.dark-theme [data-sec-theme="lemon"] {
    --zm-sec-bg: linear-gradient(135deg, rgba(205, 220, 57, 0.06) 0%, rgba(205, 220, 57, 0.03) 100%);
    --zm-sec-border: rgba(205, 220, 57, 0.12);
    --zm-sec-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.dark-theme .zm-sec-styled {
    background: var(--zm-sec-bg) !important;
    border-color: var(--zm-sec-border) !important;
}

body.dark-theme .zm-sec-styled .title-theme {
    --zm-sec-title-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}

body.dark-theme .zm-sec-styled::after,
body.dark-theme .zm-sec-styled::before {
    opacity: 0.03;
}

body.dark-theme .zm-sec-styled .title-theme h2,
body.dark-theme .zm-sec-styled .title-theme h3,
body.dark-theme .zm-sec-styled .title-theme h4 {
    opacity: 0.9;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 991px) {
    .zm-sec-styled {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    .zm-sec-styled .title-theme {
        padding: 8px 12px 8px 1.4em !important;
        margin: -4px -4px 12px -4px !important;
    }

    .zm-sec-styled .title-theme h2,
    .zm-sec-styled .title-theme h3 {
        font-size: 15px !important;
    }

    .zm-sec-styled::after {
        width: 80px;
        height: 80px;
        top: -25px;
        right: -25px;
    }

    .zm-sec-styled::before {
        width: 60px;
        height: 60px;
        bottom: -20px;
        left: -20px;
    }
}

@media (max-width: 767px) {
    .zm-sec-styled {
        padding: 12px !important;
        border-radius: 8px !important;
        margin-bottom: 12px;
    }

    .zm-sec-styled .title-theme {
        padding: 6px 10px 6px 1.3em !important;
        margin: -3px -3px 10px -3px !important;
    }

    .zm-sec-styled .title-theme h2,
    .zm-sec-styled .title-theme h3 {
        font-size: 14px !important;
    }

    .zm-sec-decor svg {
        width: 16px;
        height: 16px;
    }

    .zm-sec-styled::after,
    .zm-sec-styled::before {
        display: none;
    }
}

/* ============================================================
   入场动画
   ============================================================ */
.zm-sec-styled {
    animation: zmSecFadeIn 0.6s ease-out both;
}

.zm-sec-styled:nth-child(2) { animation-delay: 0.1s; }
.zm-sec-styled:nth-child(3) { animation-delay: 0.2s; }
.zm-sec-styled:nth-child(4) { animation-delay: 0.3s; }
.zm-sec-styled:nth-child(5) { animation-delay: 0.4s; }
.zm-sec-styled:nth-child(6) { animation-delay: 0.5s; }

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

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    .zm-sec-styled,
    .zm-sec-decor svg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}