/*
 * 国风卡片美化方案 03 · 汝窑天青（新拟态柔和基底 · 浅色）
 * 天青釉 + 冰裂纹意象 + 金线 · 适配 okfm.cn 亮色模式
 */

/* ============ 主题变量 ============ */
:root {
    --theme-color: #567d72;
    --theme-color-rgb: 86, 125, 114;
    --theme-color-bg: rgba(127, 167, 155, 0.14);
    --hover-color: #3f6257;
    --focus-color: var(--theme-color);
    --focus-shadow-color: rgba(127, 167, 155, 0.35);
    --cn-gold: #b09055;
    --cn-sh-d: rgba(148, 167, 158, 0.45);
    --cn-sh-l: rgba(255, 255, 255, 0.96);
    --main-color: #33413c;
    --main-shadow: rgba(148, 167, 158, 0.3);
    --main-bg-color: #f5f8f6;
    --body-bg-color: #ecf0ed;
    --main-blur-bg-color: rgba(245, 248, 246, 0.9);
    --main-blur-bg-color2: rgba(245, 248, 246, 0.95);
    --main-blur-bg-color3: rgba(245, 248, 246, 0.85);
    --muted-color: #96a79e;
    --muted-color2: #7d8f86;
    --muted-color3: #a9b8b0;
    --muted-bg-color: #e2e9e5;
    --muted-bg-color-l: #fbfcfb;
    --muted-shadow: rgba(148, 167, 158, 0.4);
    --muted-bg-a-color: rgba(86, 125, 114, 0.06);
    --muted-blur-bg-color: rgba(245, 248, 246, 0.85);
    --main-radius: 16px;
}

/* ============ 分类卡片 · 随主题变化 ============ */
.content-card {
    border: 1px solid rgba(86, 125, 114, 0.14);
    box-shadow:
        8px 8px 18px var(--cn-sh-d),
        -7px -7px 16px var(--cn-sh-l);
}

/* ============ 页面底色 · 雨过天青 ============ */
body,
.io-grey-mode body {
    background: #ecf0ed !important;
    background-image:
        radial-gradient(1100px 520px at 14% -8%, rgba(255, 255, 255, 0.85), transparent 62%),
        radial-gradient(900px 480px at 88% 0%, rgba(127, 167, 155, 0.18), transparent 60%),
        radial-gradient(1300px 800px at 50% 118%, rgba(169, 196, 187, 0.4), transparent 72%) !important;
    color: #33413c;
}

/* ============ 网址卡片 · 素瓷凹凸 ============ */
.posts-item.sites-item {
    position: relative;
    background: linear-gradient(160deg, #fbfcfb, #f3f7f4) !important;
    border: 1px solid rgba(86, 125, 114, 0.14);
    border-radius: var(--main-radius);
    box-shadow:
        8px 8px 18px var(--cn-sh-d),
        -7px -7px 16px var(--cn-sh-l);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.posts-item.sites-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(176, 144, 85, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
}

.posts-item.sites-item:hover {
    background: linear-gradient(160deg, #ffffff, #f5f9f6) !important;
    border-color: rgba(86, 125, 114, 0.35);
    box-shadow:
        12px 14px 28px var(--cn-sh-d),
        -8px -8px 20px var(--cn-sh-l),
        0 0 22px rgba(127, 167, 155, 0.3);
    transform: translateY(-3px);
}

.posts-item.sites-item:active {
    box-shadow:
        inset 4px 4px 10px var(--cn-sh-d),
        inset -4px -4px 10px var(--cn-sh-l);
    transform: translateY(0);
}

/* ============ 图标托底 · 釉面 ============ */
.posts-item.sites-item .item-media {
    border-radius: 12px;
    background: #f0f4f1;
    border: 1px solid rgba(86, 125, 114, 0.16);
    box-shadow:
        4px 4px 10px var(--cn-sh-d),
        -3px -3px 8px var(--cn-sh-l);
    overflow: hidden;
}

.posts-item.sites-item:hover .item-media {
    box-shadow:
        6px 6px 14px var(--cn-sh-d),
        -4px -4px 10px var(--cn-sh-l),
        0 0 14px rgba(127, 167, 155, 0.3);
}

/* ============ 标题与摘要 ============ */
.posts-item.sites-item .item-title,
.posts-item.sites-item .item-title a {
    color: #33413c;
    transition: color 0.3s;
}

.posts-item.sites-item .item-title b { color: #567d72; font-weight: 600; }
.posts-item.sites-item:hover .item-title a { color: #567d72; }
.posts-item.sites-item .text-muted { color: #96a79e !important; }

/* ============ 直达按钮 · 天青 ============ */
.sites-item .togo { color: #567d72; opacity: 0.55; transition: all 0.3s; }
.sites-item:hover .togo { opacity: 1; color: #b09055; }

/* ============ 标签徽章 ============ */
.sites-item .item-tags .badge {
    background: #f0f4f1 !important;
    color: #567d72 !important;
    border: 1px solid rgba(86, 125, 114, 0.2);
    box-shadow: 3px 3px 8px var(--cn-sh-d), -2px -2px 6px var(--cn-sh-l);
    font-weight: 400;
}

/* ============ 文章卡片 ============ */
.posts-item.post-item {
    background: linear-gradient(160deg, #fbfcfb, #f3f7f4);
    border: 1px solid rgba(86, 125, 114, 0.14);
    border-radius: var(--main-radius);
    box-shadow:
        8px 8px 18px var(--cn-sh-d),
        -7px -7px 16px var(--cn-sh-l);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.posts-item.post-item:hover {
    border-color: rgba(86, 125, 114, 0.32);
    box-shadow:
        12px 14px 28px var(--cn-sh-d),
        0 0 22px rgba(127, 167, 155, 0.28);
    transform: translateY(-3px);
}

.posts-item.post-item .item-title a { color: #33413c; }
.posts-item.post-item:hover .item-title a { color: #567d72; }
.posts-item.post-item .text-muted { color: #96a79e !important; }

/* ============ 导航栏 · 素檐 ============ */
.navbar {
    background: rgba(245, 248, 246, 0.9) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(86, 125, 114, 0.18) !important;
    box-shadow: 0 4px 14px rgba(148, 167, 158, 0.35);
}

.navbar .navbar-brand, .navbar .navbar-brand a { color: #567d72 !important; }
.navbar .navbar-menu a, .navbar .nav-item > a { color: #5c6f67; }
.navbar .navbar-menu a:hover, .navbar .nav-item > a:hover { color: #567d72 !important; }

/* ============ 搜索框 · 内凹 ============ */
.search-form .form-control,
.search-form .form-control:focus {
    background: #ecf0ed;
    border: 1px solid rgba(86, 125, 114, 0.18);
    box-shadow:
        inset 3px 3px 8px var(--cn-sh-d),
        inset -3px -3px 8px var(--cn-sh-l);
    color: #33413c;
    outline: none;
}

.search-form .form-control::placeholder { color: #96a79e; }

.search-form .search-btn,
.search-form button[type="submit"] {
    background: linear-gradient(135deg, #7fa79b, #567d72);
    color: #f5f8f6;
    border: none;
    box-shadow: 0 4px 12px rgba(127, 167, 155, 0.45);
}

/* ============ 侧栏与内容面板 ============ */
.io-sidebar-widget.card,
.panel.site-content.card,
.panel.card {
    background: linear-gradient(165deg, #f9fbfa, #f2f6f3);
    border: 1px solid rgba(86, 125, 114, 0.14);
    border-radius: var(--main-radius);
    box-shadow:
        9px 9px 22px var(--cn-sh-d),
        -7px -7px 18px var(--cn-sh-l);
}

/* ============ 按钮强调 · 天青描金 ============ */
.btn-theme, .btn-primary, .go-up button, .sidebar-show button {
    background: linear-gradient(135deg, #7fa79b, #567d72) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(127, 167, 155, 0.45);
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #ecf0ed; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(#a9c4bb, #7fa79b);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #b09055; }

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    .posts-item.sites-item {
        box-shadow:
            6px 6px 14px var(--cn-sh-d),
            -4px -4px 10px var(--cn-sh-l);
    }
}