/* =========================================================
   NebSnail Lab 博客园科技实验室主题 v2.1 完整版
   位置：后台 -> 设置 -> 页面定制 CSS 代码

   作用：
   1. 深色科技风页面
   2. 首页 Hero 首屏
   3. 自定义导航栏
   4. 导航高亮样式增强
   5. 搜索框并入导航栏
   6. 隐藏原博客园标题、原导航、右侧边栏
   7. 文章区域单栏显示
   8. 本地搜索结果样式
   9. 阅读进度条 + 返回顶部样式
   10. PC / 手机端适配

   注意：
   CSS 只负责“显示效果”。
   导航固定高亮、+关注、本地搜索功能仍需要页脚 JS 配合。
   回滚：
   删除本段 CSS 即可恢复原样
   ========================================================= */


/* ========== 1. 全局变量：以后改颜色主要改这里 ========== */
:root {
    /* 页面主背景色 */
    --neb-bg: #05070d;

    /* 卡片背景：半透明玻璃效果 */
    --neb-card: rgba(255, 255, 255, 0.065);
    
    /* 卡片悬停背景 */
    --neb-card-hover: rgba(255, 255, 255, 0.095);
    
    /* 边框颜色 */
    --neb-border: rgba(255, 255, 255, 0.12);
    
    /* 边框高亮颜色 */
    --neb-border-active: rgba(0, 212, 255, 0.42);
    
    /* 主文字颜色 */
    --neb-text: #e5e7eb;
    
    /* 次级文字颜色 */
    --neb-muted: #9ca3af;
    
    /* 科技蓝 */
    --neb-blue: #00d4ff;
    
    /* 紫色强调 */
    --neb-purple: #8b5cf6;
    
    /* 绿色点缀 */
    --neb-green: #3cffb5;
    
    /* 圆角尺寸 */
    --neb-radius: 22px;
    
    /* 阴影 */
    --neb-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
    
    /* 高亮渐变 */
    --neb-active-bg: linear-gradient(90deg, var(--neb-blue), var(--neb-green));
    
    /* 高亮文字颜色 */
    --neb-active-text: #001018;
}


/* ========== 2. 页面基础样式 ========== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--neb-text);
    /* 页面背景：参考当前预览图的深色星际网格，只用 CSS 生成，便于回滚 */
    background:
        linear-gradient(115deg, rgba(0, 80, 86, 0.34), transparent 36%),
        linear-gradient(72deg, transparent 48%, rgba(54, 43, 112, 0.30) 100%),
        linear-gradient(180deg, #061218 0%, #05070d 54%, #03050b 100%);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        "PingFang SC",
        Arial,
        sans-serif;
}

/* 页面网格和星点背景，制造工程/科技感 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(142,185,230,0.24) 1px, transparent 1.5px),
        linear-gradient(rgba(100,136,190,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,136,190,0.055) 1px, transparent 1px);
    background-size: 90px 90px, 90px 90px, 90px 90px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.88), rgba(0,0,0,0.46) 70%, transparent 100%);
}

/* 页面左右两侧轻微冷色氛围，不使用图片和外链资源 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,255,209,0.06), transparent 36%),
        linear-gradient(270deg, rgba(97,110,255,0.10), transparent 42%);
}


/* ========== 3. 页面总容器 ========== */
#home {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    background: transparent !important;
}

/* 链接基础颜色 */
a {
    color: var(--neb-blue);
    text-decoration: none;
    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

a:hover {
    color: var(--neb-green);
}


/* ========== 4. 隐藏博客园原始标题、原始导航、右侧边栏 ========== */

/* 隐藏原始博客标题：星际蜗牛/NebSnail */
#blogTitle {
    display: none !important;
}

/* 隐藏博客园原始导航栏 */
#navigator {
    display: none !important;
}

/* 隐藏右侧边栏 */
#sideBar,
#sideBarMain,
#sidebar_news,
#blog-sidecolumn {
    display: none !important;
}

/* 防止旧版分类卡片残留 */
.neb-lab-grid {
    display: none !important;
}

/* 防止旧版 Hero 内按钮残留 */
.neb-hero-actions {
    display: none !important;
}


/* ========== 5. 首页 Hero 首屏 ========== */

/* 页首模块默认显示，避免 JS 未执行时页面空白 */
.neb-page-hero {
    display: block;
}

/* Hero 默认显示：对首页最安全 */
.neb-hero {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 24px 0 12px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid var(--neb-border);
    border-radius: calc(var(--neb-radius) + 10px);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
        radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.22), transparent 30%),
        radial-gradient(circle at 12% 85%, rgba(139, 92, 246, 0.24), transparent 36%);
    box-shadow: var(--neb-shadow);
}

/* Hero 大水印 */
.neb-hero::before {
    content: "NEBSNAIL LAB";
    position: absolute;
    right: -5px;
    bottom: -5px;
    color: rgba(255,255,255,0.10);
    font-size: clamp(54px, 12vw, 156px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.8;
    pointer-events: none;
}

/* 顶部小标签 */
.neb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(0,212,255,0.28);
    border-radius: 999px;
    color: var(--neb-blue);
    background: rgba(0,212,255,0.08);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.neb-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neb-green);
    box-shadow: 0 0 16px var(--neb-green);
}

/* Hero 主标题 */
.neb-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 7vw, 86px);
    line-height: 0.94;
    letter-spacing: -0.07em;
}

/* 中文标题渐变 */
.neb-gradient-text {
    background: linear-gradient(90deg, #ffffff, var(--neb-blue), var(--neb-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 只把“星际蜗牛”这一行缩小一号 */
.neb-hero h1 .neb-gradient-text {
    font-size: 0.86em;
    letter-spacing: 0.01em;
}

/* Hero 描述文字 */
.neb-hero p {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 20px 0 0;
    color: var(--neb-muted);
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.8;
}


/* ========== 6. 自定义主导航栏：标签 + 搜索框 ========== */

.neb-main-nav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    max-width: min(100%, 1080px);
    margin: 12px auto 30px !important;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(5, 7, 13, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

/* 导航标签统一样式 */
.neb-main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 34px;
    padding: 0 14px;
    border: none !important;
    border-radius: 999px;
    color: var(--neb-text) !important;
    font-size: 14px;
    font-weight: 700;
    background: transparent !important;
    box-shadow: none !important;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/*
   当前导航标签高亮：
   兼容多种 JS 写法：
   1. neb-active：我们主题推荐使用
   2. active：部分代码习惯
   3. is-active：部分代码习惯
   4. data-active="true"：兜底写法
*/
.neb-main-nav a.neb-active,
.neb-main-nav a.active,
.neb-main-nav a.is-active,
.neb-main-nav a[data-active="true"] {

    color: var(--neb-active-text) !important;
    background: var(--neb-active-bg) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 10px 26px rgba(0, 212, 255, 0.18);
}

/*
   点击后的临时视觉反馈：
   注意：:focus 不是“永久高亮”，它只是在当前焦点存在时显示。
   真正的固定高亮仍需要 JS 添加 .neb-active。
*/
.neb-main-nav a:focus,
.neb-main-nav a:focus-visible {
    color: var(--neb-active-text) !important;
    background: var(--neb-active-bg) !important;
    outline: none !important;
}

/* 导航悬停效果 */
.neb-main-nav a:hover {
    color: var(--neb-active-text) !important;
    background: var(--neb-active-bg) !important;
    transform: translateY(-1px);
}

/* +关注样式与其他标签保持一致 */
#nebFollowLink {
    border: none !important;
    color: var(--neb-text) !important;
    background: transparent !important;
}

#nebFollowLink:hover,
#nebFollowLink.neb-active,
#nebFollowLink.active,
#nebFollowLink.is-active,
#nebFollowLink[data-active="true"] {
    color: var(--neb-active-text) !important;
    background: var(--neb-active-bg) !important;
}


/* ========== 7. 搜索框：并入导航栏内部 ========== */

.neb-search {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    margin: 0 0 0 6px;
    padding: 0;
    border: none !important;
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 搜索输入框：兼容 text / search / 未写 type 的 input */
.neb-search input,
.neb-search input[type="text"],
.neb-search input[type="search"],
.neb-search input[name="keyword"] {
    width: 190px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    color: var(--neb-text) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    font-size: 13px;
    box-sizing: border-box;
}

/* 搜索框聚焦 */
.neb-search input:focus,
.neb-search input[type="text"]:focus,
.neb-search input[type="search"]:focus,
.neb-search input[name="keyword"]:focus {
    outline: none !important;
    border-color: rgba(0,212,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,0.12) !important;
}

/* 搜索框占位文字 */
.neb-search input::placeholder {
    color: rgba(229, 231, 235, 0.48);
}

/* 搜索按钮 */
.neb-search button {
    height: 34px;
    min-width: 72px;
    padding: 0 14px;
    border: none !important;
    border-radius: 999px !important;
    color: var(--neb-active-text) !important;
    background: var(--neb-active-bg) !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 34px;
    cursor: pointer;
}

/* 搜索进行中状态 */
.neb-search button:disabled {
    opacity: 0.72;
    cursor: wait;
}


/* ========== 8. 主体区域：单栏文章 ========== */

#main {
    display: block !important;
    max-width: 980px;
    margin: 22px auto 0 !important;
}

#mainContent,
.forFlow {
    width: 100% !important;
    float: none !important;
}

#mainContent {
    border-right: none !important;
}


/* ========== 9. 文章列表与文章正文卡片 ========== */

.day,
.post,
.entrylistItem,
.PostList,
.topicListFooter,
#topics {
    border: 1px solid var(--neb-border);
    border-radius: var(--neb-radius);
    background: var(--neb-card) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}

.day,
.post,
.entrylistItem,
.PostList {
    margin-bottom: 20px;
    padding: 22px;
}

.day:hover,
.post:hover,
.entrylistItem:hover,
.PostList:hover {
    background: var(--neb-card-hover) !important;
    border-color: rgba(0,212,255,0.28);
}

/* 首页隐藏标题前日期；归档页仍保留日期信息 */
.neb-home .dayTitle {
    display: none !important;
}

/* 其他页面日期标题 */
.dayTitle {
    margin-bottom: 14px;
    color: var(--neb-blue);
    font-size: 13px;
}

/* 文章标题 */
.postTitle,
.entrylistPosttitle,
.postTitl2,
#topics .postTitle {
    margin: 0 0 16px;
    border: none !important;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.25;
    font-weight: 800;
}

.postTitle a,
.entrylistPosttitle a,
.postTitl2 a {
    color: #ffffff !important;
}

.postTitle a:hover,
.entrylistPosttitle a:hover,
.postTitl2 a:hover {
    color: var(--neb-blue) !important;
}

/* 文章摘要 */
.postCon,
.c_b_p_desc,
.entrylistPostSummary {
    color: var(--neb-muted);
    font-size: 15px;
    line-height: 1.85;
}

/* 文章底部信息 */
.postDesc,
.entrylistItemPostDesc,
.postDesc2 {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(229,231,235,0.62);
    font-size: 13px;
}

/* 随笔列表使用博客园独立结构，保持与首页卡片一致 */
#myposts {
    margin-left: 0;
}

#myposts .PostList {
    margin-bottom: 20px !important;
    padding: 22px;
    border: 1px solid var(--neb-border);
}

/* 列表页不重复显示“我的随笔 / 我的文章”页面标题 */
.PostListTitle,
.entrylistTitle {
    display: none !important;
}

.postText2 {
    margin: 12px 0 0;
    color: var(--neb-muted);
    font-size: 15px;
    line-height: 1.85;
}

#myposts .PostList .postText2,
.entrylistItem .entrylistPostSummary,
.neb-list-summary {
    color: var(--neb-muted);
    font-size: 15px;
    line-height: 1.85;
}

#myposts .PostList .postDesc2,
.entrylistItem .entrylistItemPostDesc {
    font-size: 13px;
}

#myposts .PostList .postTitl2 a {
    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
}

.entrylistItem .entrylistPosttitle a,
.entrylistItem .entrylistItemTitle a {
    font-size: 21px;
    line-height: 1.25;
    font-weight: 800;
}

#myposts .PostList .postDesc2 a {
    display: inline;
    font-size: inherit;
    color: var(--neb-blue);
}


/* ========== 10. 正文排版 ========== */

#cnblogs_post_body {
    color: var(--neb-text);
    font-size: 16px;
    line-height: 1.95;
}

#cnblogs_post_body p {
    margin: 1em 0;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
    color: #ffffff;
    line-height: 1.35;
}

#cnblogs_post_body h2 {
    margin-top: 2.2em;
    padding-left: 14px;
    border-left: 4px solid var(--neb-blue);
}

#cnblogs_post_body img {
    max-width: 100%;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}

/* 代码块 */
#cnblogs_post_body pre,
.cnblogs-markdown pre {
    border: 1px solid rgba(0,212,255,0.18) !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,0.38) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

#cnblogs_post_body code,
.cnblogs-markdown code {
    border-radius: 6px;
}


/* ========== 11. 评论区、输入框、按钮 ========== */

.feedback_area_title,
#comment_form_container,
.commentform {
    color: var(--neb-text);
}

input,
textarea,
select {
    border: 1px solid var(--neb-border) !important;
    border-radius: 12px !important;
    color: var(--neb-text) !important;
    background: rgba(255,255,255,0.06) !important;
}

input:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(0,212,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,0.12) !important;
}

input[type="button"],
input[type="submit"],
button {
    cursor: pointer;
}


/* ========== 12. 本地博客搜索结果 ========== */

/* 搜索视图：保留页头导航，只显示当前博客的搜索结果 */
body.neb-search-active #sideBar,
body.neb-search-active .neb-search-view > :not(.neb-search-result) {
    display: none !important;
}

body.neb-search-active #mainContent {
    width: 100%;
}

.neb-search-result {
    margin: 0 0 20px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--neb-border);
    border-radius: var(--neb-radius);
    color: var(--neb-text);
    background: var(--neb-card) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}

.neb-search-result h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 22px;
}

.neb-search-result p {
    margin: 0 0 14px;
    color: var(--neb-muted);
}

.neb-search-result a {
    color: var(--neb-blue);
    font-weight: 800;
}

.neb-search-result a:hover {
    color: var(--neb-green);
}

.neb-search-item {
    padding: 18px 0;
    border-top: 1px solid var(--neb-border);
}

.neb-search-item:first-of-type {
    margin-top: 18px;
}

.neb-search-item-title {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.5;
}

.neb-search-item-summary {
    margin: 0 !important;
    color: var(--neb-muted) !important;
    line-height: 1.8;
}

.neb-search-empty {
    border-style: dashed;
    border-color: rgba(0,212,255,0.34);
    background: rgba(0,212,255,0.06) !important;
}

.neb-search-empty-text {
    margin: 0 !important;
    color: var(--neb-text) !important;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.7;
}


/* ========== 13. 首页空内容提示 ========== */

.neb-empty {
    min-height: 150px;
    margin: 0 0 20px;
    padding: 42px;
    border: 1px dashed rgba(0,212,255,0.34);
    border-radius: var(--neb-radius);
    color: var(--neb-muted);
    background: rgba(0,212,255,0.06) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}

.neb-empty strong {
    color: var(--neb-text);
}


/* ========== 14. 阅读进度条 ========== */

#nebProgress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 0;
    height: 3px;
    background: var(--neb-active-bg);
    box-shadow: 0 0 16px rgba(0,212,255,0.62);
}


/* ========== 15. 页脚 ========== */

#footer {
    max-width: 980px;
    margin: 36px auto 24px !important;
    padding: 22px;
    border: 1px solid var(--neb-border);
    border-radius: var(--neb-radius);
    color: var(--neb-muted);
    background: rgba(255,255,255,0.04) !important;
    text-align: center;
}


/* ========== 16. 返回顶部按钮，由 JS 自动创建 ========== */

#nebBackTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    width: 44px;
    height: 44px;
    border: 1px solid var(--neb-border);
    border-radius: 50%;
    color: var(--neb-active-text);
    background: var(--neb-active-bg);
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#nebBackTop.neb-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#nebBackTop:hover {
    box-shadow:
        0 14px 34px rgba(0,0,0,0.35),
        0 0 24px rgba(0,212,255,0.28);
}


/* ========== 17. 文章卡片入场动画 ========== */

.neb-fade-in {
    animation: nebFadeIn 0.55s ease both;
}

/* 主题轻提示：替代弹窗，不打断访客阅读 */
#nebThemeNotice {
    position: fixed;
    right: 24px;
    bottom: 82px;
    z-index: 90;
    max-width: min(320px, calc(100% - 32px));
    padding: 12px 16px;
    border: 1px solid rgba(0,212,255,0.30);
    border-radius: 18px;
    color: var(--neb-text);
    background: rgba(5, 7, 13, 0.88);
    box-shadow: 0 16px 42px rgba(0,0,0,0.34);
    backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#nebThemeNotice.neb-show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes nebFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========== 18. 平板适配 ========== */

@media (max-width: 900px) {
    #home {
        width: min(100% - 24px, 760px);
    }

    #main {
        max-width: none;
    }
    
    .neb-main-nav {
        justify-content: flex-start;
        width: auto;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-radius: 22px;
        padding: 8px;
    }
    
    .neb-main-nav a {
        min-width: auto;
        white-space: nowrap;
    }
    
    .neb-search {
        flex: 0 0 auto;
        margin-left: 4px;
    }
    
    .neb-search input,
    .neb-search input[type="text"],
    .neb-search input[type="search"],
    .neb-search input[name="keyword"] {
        width: 170px;
    }
}


/* ========== 19. 手机端适配 ========== */

@media (max-width: 560px) {
    #home {
        width: min(100% - 18px, 520px);
    }

    .neb-hero {
        padding: 24px 20px;
        border-radius: 24px;
    }
    
    .neb-hero h1 {
        font-size: clamp(34px, 14vw, 58px);
    }
    
    .neb-main-nav {
        margin-bottom: 22px !important;
    }
    
    .neb-search input,
    .neb-search input[type="text"],
    .neb-search input[type="search"],
    .neb-search input[name="keyword"] {
        width: 145px;
    }
    
    .neb-search button {
        min-width: 68px;
        padding: 0 12px;
    }
    
    .day,
    .post,
    .entrylistItem,
    .PostList,
    .neb-search-result,
    .neb-empty {
        padding: 18px;
        border-radius: 18px;
    }
    
    .neb-search-empty-text {
        font-size: 17px;
    }

    .neb-search-item {
        padding: 16px 0;
    }

    .neb-search-item-title {
        font-size: 17px;
    }
    
    #nebBackTop {
        right: 16px;
        bottom: 16px;
    }

    #nebThemeNotice {
        right: 16px;
        bottom: 70px;
    }
}

/* 尊重系统减少动态效果设置，避免动画影响阅读 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}