/* 页面定制CSS代码 */

/* ---------- 圆润可爱字体 ---------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/zcool-kuaile@5/index.css');

/* ---------- 背景图 ---------- */
body {
    background-image: url("https://t13.baidu.com/it/u=3055064485,3805944640&fm=225&app=113&f=JPEG?w=3028&h=2269&s=E1029618000046EC883E7CDF030080A8") !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 15, 30, 0.42);
    backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================
   顶部：圆润可爱风 · 大圆角 + 柔和光晕
   ========================================================== */

#header {
    background: linear-gradient(180deg,
        rgba(12, 24, 52, 0.78) 0%,
        rgba(18, 38, 78, 0.68) 55%,
        rgba(26, 52, 100, 0.58) 100%) !important;
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: none !important;
    border-bottom: 2px solid rgba(200, 225, 255, 0.3) !important;
    border-radius: 0 0 40px 40px;
    box-shadow:
        0 14px 44px rgba(0, 12, 40, 0.42),
        0 0 60px rgba(120, 175, 255, 0.15),
        inset 0 1px 0 rgba(220, 240, 255, 0.22) !important;
    padding: 44px 0 24px !important;
    position: relative;
    overflow: hidden;
}

#header::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 180%;
    background: radial-gradient(ellipse at center,
        rgba(160, 205, 255, 0.18) 0%,
        rgba(120, 170, 245, 0.08) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#header::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(180, 215, 255, 0.7) 20%,
        rgba(230, 245, 255, 1) 50%,
        rgba(180, 215, 255, 0.7) 80%,
        transparent);
    border-radius: 2px;
    box-shadow: 0 0 18px rgba(180, 215, 255, 0.9);
    z-index: 3;
}

#header * { position: relative; z-index: 1; }

/* ---------- 博客标题 + 签名 分行显示 ---------- */
#blogTitle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
    gap: 10px !important;
}

#blogTitle > * {
    display: block !important;
    width: 100% !important;
}

/* ---------- SFlyer 标题 ---------- */
#blogTitle h1,
#blogTitle h1 a,
#blogTitle .title,
#blogTitle .title a,
#Header1_HeaderTitle,
#Header1_HeaderTitle a,
#header h1,
#header h1 a,
#header .title,
#header .title a,
#blog_title,
#blog_title a,
#banner h1,
#banner h1 a,
#top h1,
#top h1 a {
    font-family:
        'ZCOOL KuaiLe',
        'Yuanti SC',
        'YouYuan',
        'PingFang SC',
        'Microsoft YaHei UI',
        'Hiragino Sans GB',
        sans-serif !important;
    font-size: 46px !important;
    font-weight: 400 !important;
    letter-spacing: 5px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 1),
        0 0 20px rgba(180, 215, 255, 0.9),
        0 0 44px rgba(140, 180, 255, 0.65),
        0 0 80px rgba(180, 160, 255, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

#blogTitle h1:hover,
#blogTitle h1 a:hover,
#Header1_HeaderTitle:hover,
#Header1_HeaderTitle a:hover {
    letter-spacing: 8px !important;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 1),
        0 0 30px rgba(220, 238, 255, 1),
        0 0 65px rgba(160, 200, 255, 0.9),
        0 0 110px rgba(190, 170, 255, 0.6),
        0 3px 14px rgba(0, 0, 0, 0.55) !important;
}

/* ---------- 日文签名 ---------- */
#blogTitle h2,
#blogTitle .subtitle,
#Header1_HeaderTitle + div,
#header .subtitle,
#header h2,
#banner h2,
#top h2,
#blogTitle .subtitle a {
    font-family: 'ZCOOL KuaiLe', 'Yuanti SC', 'YouYuan', 'PingFang SC', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 5px !important;
    line-height: 2 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    text-align: center !important;
    text-decoration: none !important;
    opacity: 0.95 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    text-shadow:
        0 0 16px rgba(170, 205, 255, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ---------- 顶部区域整体左移（只影响顶部，不影响侧边栏） ---------- */
#header #blogTitle,
#header #blogTitle h1,
#header #blogTitle h2,
#header #blogTitle .subtitle,
#header #Header1_HeaderTitle,
#header #navList {
    transform: translateX(-60px);
}

/* ---------- 导航栏：圆润药丸按钮 ---------- */
#navigator {
    background: linear-gradient(180deg,
        rgba(10, 22, 48, 0.78) 0%,
        rgba(15, 32, 66, 0.72) 100%) !important;
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: none !important;
    border-bottom: 2px solid rgba(200, 225, 255, 0.22) !important;
    border-radius: 0 0 32px 32px;
    box-shadow:
        0 10px 30px rgba(0, 10, 35, 0.35),
        inset 0 1px 0 rgba(220, 240, 255, 0.16) !important;
    padding: 10px 18px !important;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#navList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#navList li { margin: 0 !important; float: none !important; }

#navList a {
    display: inline-block;
    font-family: 'ZCOOL KuaiLe', 'Yuanti SC', 'YouYuan', 'PingFang SC', system-ui, sans-serif !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
    padding: 12px 24px !important;
    border-radius: 999px;
    text-shadow:
        0 0 12px rgba(160, 200, 255, 0.8),
        0 1px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(180, 215, 255, 0.12);
}

#navList a:hover {
    color: #ffffff !important;
    background: rgba(140, 185, 245, 0.22) !important;
    border-color: rgba(200, 225, 255, 0.4);
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(80, 140, 240, 0.35),
        0 0 24px rgba(160, 200, 255, 0.4);
    text-shadow:
        0 0 22px rgba(220, 238, 255, 1),
        0 0 6px rgba(255, 255, 255, 0.95),
        0 1px 5px rgba(0, 0, 0, 0.6) !important;
}

#navList li.active a,
#navList a.current {
    color: #ffffff !important;
    background: linear-gradient(135deg,
        rgba(140, 190, 255, 0.35),
        rgba(180, 160, 255, 0.28)) !important;
    border-color: rgba(220, 238, 255, 0.5);
    box-shadow:
        0 6px 20px rgba(100, 160, 245, 0.45),
        0 0 26px rgba(160, 200, 255, 0.35),
        inset 0 1px 0 rgba(220, 238, 255, 0.4);
}

/* ---------- 用户信息 / 随笔统计 / 登录（只影响顶部导航区域） ---------- */
#header #userInfo, #header #userInfo a, #header #userInfo span,
#header #profile_block, #header #profile_block a, #header #profile_block span,
#navigator #blog_nav_rss a, #navigator #blog_nav_sitehome a, #navigator #blog_nav_myhome a,
#navigator #blog_nav_newpost a, #navigator #blog_nav_contact a, #navigator #blog_nav_admin a,
#navigator #blog_nav_manage a, #navigator #blog_nav_login a, #navigator #blog_nav_logout a,
#header .blogStats, #header .blogStats a, #header .blogStats span,
#navigator .blogStats, #navigator .blogStats a, #navigator .blogStats span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'ZCOOL KuaiLe', 'Yuanti SC', 'YouYuan', 'PingFang SC', system-ui, sans-serif !important;
    letter-spacing: 1px;
    font-weight: 400 !important;
    text-decoration: none;
    text-shadow:
        0 0 12px rgba(160, 200, 255, 0.75),
        0 1px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s ease;
}

#header #userInfo a:hover,
#header #profile_block a:hover,
#header .blogStats a:hover,
#navigator .blogStats a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 22px rgba(220, 238, 255, 1),
        0 1px 5px rgba(0, 0, 0, 0.65) !important;
}

#header #userInfo img,
#header #profile_block img {
    border-radius: 50%;
    border: 2px solid rgba(220, 238, 255, 0.75);
    box-shadow: 0 3px 14px rgba(0, 10, 40, 0.5), 0 0 20px rgba(140, 190, 255, 0.5);
    transition: all 0.3s ease;
}

#header #userInfo img:hover,
#header #profile_block img:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0, 10, 40, 0.65), 0 0 32px rgba(200, 225, 255, 0.85);
}

/* ==========================================================
   正文区域：圆润可爱卡片
   ========================================================== */

#mainContent,
#sideBar,
.post,
#blog_post_info_block,
#comment_form,
#comment_list {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 24px !important;
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding: 24px !important;
    margin-bottom: 22px !important;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

#mainContent:hover {
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(140, 190, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px);
}

#sideBar { padding: 20px !important; }
#sideBarMain { background: transparent !important; }
#sidebar_postcategory { margin: 0 !important; padding: 0 !important; }

.postTitle a, #topics .postTitle a {
    color: #2c3e6b !important;
    transition: all 0.3s ease;
}
.postTitle a:hover, #topics .postTitle a:hover {
    color: #7b9cff !important;
    text-shadow: 0 0 14px rgba(123, 156, 255, 0.5);
}

#mainContent a {
    color: #5b7fd6;
    text-decoration: none;
    background-image: linear-gradient(120deg, rgba(255,107,157,0.15), rgba(123,156,255,0.15));
    background-repeat: no-repeat;
    background-size: 100% 0.25em;
    background-position: 0 88%;
    border-radius: 4px;
}
#mainContent a:hover {
    color: #ff6b9d;
    background-size: 100% 100%;
}

pre, code {
    border-radius: 14px !important;
    font-family: "JetBrains Mono", "Cascadia Code", "Consolas", monospace !important;
}
pre {
    background: rgba(30, 35, 55, 0.95) !important;
    border: 1px solid rgba(123, 156, 255, 0.25) !important;
    box-shadow: inset 0 0 30px rgba(123, 156, 255, 0.05) !important;
}

blockquote {
    background: linear-gradient(135deg, rgba(255,107,157,0.08), rgba(123,156,255,0.08)) !important;
    border-left: 4px solid #ff6b9d !important;
    border-radius: 0 16px 16px 0 !important;
    padding: 14px 20px !important;
    color: #555 !important;
}

#back-to-top, .returntop {
    background: linear-gradient(135deg, #7b9cff, #ff6b9d) !important;
    border-radius: 50% !important;
    box-shadow:
        0 6px 22px rgba(123, 156, 255, 0.5),
        0 0 30px rgba(180, 200, 255, 0.3) !important;
    border: none !important;
    color: #fff !important;
    z-index: 9999 !important;
    transition: all 0.3s ease;
}
#back-to-top:hover, .returntop:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow:
        0 10px 32px rgba(123, 156, 255, 0.7),
        0 0 40px rgba(200, 220, 255, 0.5) !important;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track {
    background: rgba(240, 242, 248, 0.5);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7b9cff, #ff6b9d);
    border-radius: 6px;
    border: 2px solid rgba(240, 242, 248, 0.5);
}

#mainContent img {
    border-radius: 16px;
    transition: transform 0.3s ease;
}
#mainContent img:hover {
    transform: scale(1.02);
}

/* ---------- 侧边栏整体限高 ---------- */
#sideBar {
    max-height: 78vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
}

#sideBar::-webkit-scrollbar { width: 5px; }
#sideBar::-webkit-scrollbar-track { background: transparent; }
#sideBar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7b9cff, #ff6b9d);
    border-radius: 4px;
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    #header { padding: 28px 0 18px !important; border-radius: 0 0 28px 28px; }
    #blogTitle h1, #Header1_HeaderTitle { font-size: 28px !important; letter-spacing: 3px !important; }
    #blogTitle h2, #blogTitle .subtitle { font-size: 12px !important; letter-spacing: 3px !important; }
    #navigator { border-radius: 0 0 22px 22px; padding: 6px 10px !important; }
    #navList { gap: 4px; }
    #navList a { padding: 9px 14px !important; font-size: 13px !important; letter-spacing: 1px !important; }
    #mainContent, #sideBar { border-radius: 18px !important; padding: 16px !important; }
    #sideBar { max-height: none !important; overflow-y: visible !important; }

    #header #blogTitle,
    #header #blogTitle h1,
    #header #blogTitle h2,
    #header #blogTitle .subtitle,
    #header #Header1_HeaderTitle,
    #header #navList {
        transform: none;
    }
}