@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@400;700&family=Nunito:wght@400;700&display=swap');

/* ==========================================================================
   🌸 TCY Server: Pure White & Mist Pink (Final Fix v3) 🌸
   修复内容：
   1. 首页视差大标题改为“粉白渐变”字体
   2. 优化文字投影，使其更具琉璃质感
   3. 保持之前的布局和配色修复
   ========================================================================== 
*/

/* --- 1. 核心变量系统 (Design Tokens) --- */
:root {
    /* 🖼️ 全局背景图 (网页大背景) */
    --tcy-bg-image: url('../assets/ysSS1.jpg'); 
    
    /* 🖼️ 首页视差标题背景 */
    --parallax-bg-image: url('../assets/ysjqx1.jpg');
    
    /* 📏 布局限制 (关键修改) */
    --md-content-max-width: 1600px; /* 限制内容区域最大宽度 */
    
    /* 🎨 配色：雾白 & 隐形粉 */
    --glass-bg: rgba(255, 255, 255, 0.92);         /* 92% 不透明，像白瓷一样 */
    --glass-border: rgba(255, 255, 255, 0.6);      /* 边框减淡 */
    
    /* 主色调：几乎接近白色的粉 */
    --primary-light: #fff5f8;                      /* LavenderBlush (极淡) */
    --primary-accent: #d81b60;                     /* 稍微深一点的粉，只用于高亮 */
    
    /* 文字颜色 */
    --text-main: #546e7a;                          /* 蓝灰，高级感 */
    --text-title: #37474f;                         /* 深岩灰 */
}

/* --- 2. 全局背景重构 --- */
body {
    background-color: #f5f5f5;
    color: var(--text-main);
    font-family: 'Nunito', 'Noto Serif SC', sans-serif;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -999;
    
    background-image: var(--tcy-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}

/* --- 3. 布局完美修复 (Layout Fix) --- */

/* 核心修复：这里限制了整个页面容器的宽度 */
/* 这样无论屏幕多宽，内容和目录都会保持在中间，不会无限拉伸 */
.md-grid {
    max-width: 1400px !important; 
    margin: 0 auto;
}

/* ❌ 删除了之前那个错误的 .md-sidebar { width: 16rem !important } */
/* 现在 MkDocs 会自动管理侧边栏宽度，首页隐藏侧边栏的功能也恢复正常了 */
/* ⚠️ 【核心修改】彻底隐藏右侧目录栏 (Table of Contents) ⚠️ */
/* 这将直接移除右边的空白占位列，让正文内容向右扩展 */
.md-sidebar--secondary {
    display: none !important;
}


/* --- 4. 极致纯白外观 (The White Aesthetic) --- */

/* 4.1 顶栏 (Logo & Search) - 纯净雾白 */
.md-header {
    background: rgba(255, 255, 255, 0.95) !important; 
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03); 
    color: var(--text-title) !important;
    box-shadow: none; /* 无阴影，彻底扁平 */
}

/* 4.2 [新增] 导航选项卡栏 (Home/Guide/Gallery...) */
/* 这里控制大屏幕浏览器最上面的那排字 */
.md-tabs {
    background: rgba(255, 255, 255, 0.90) !important; /* 改为白底，保证清晰 */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 加一条极细的分割线 */
}

/* 导航文字的颜色 */
.md-tabs__link {
    color: #546e7a !important; /* 平时是蓝灰色，在白底上非常清晰 */
    opacity: 0.8;
    transition: all 0.3s;
    font-weight: bold; /* 加粗一点 */
}

/* 鼠标悬停 或 当前选中 的导航文字 */
.md-tabs__link:hover, 
.md-tabs__link--active {
    color: var(--title-pink-color) !important; /* 激活变成我们的专属粉色 */
    opacity: 1;
}


/* 强制覆盖主题色 - 让所有默认的深色都变成淡色 */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #fce4ec; /* Pink 50 (极淡) */
    --md-primary-fg-color--light: #fff;
    --md-primary-fg-color--dark: #f06292;
    --md-accent-fg-color: #f06292;
}

/* 文章容器 - 白玉质感 */
.md-content__inner {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    
    padding: 3rem;
    margin-top: 1rem;
    
    /* 几乎看不见的投影，制造悬浮感 */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

/* 侧边栏背景 - 只有极淡的磨砂感 */
.md-sidebar__scrollwrap {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    margin: 10px 0;
    
    /* 隐藏滚动条 */
    scrollbar-width: none; 
}
.md-sidebar__scrollwrap::-webkit-scrollbar {
    display: none;
}

/* --- 5. 字体与排版 --- */

h1, .md-typeset h1 {
    font-family: 'ZCOOL KuaiLe', cursive;
    color: var(--text-title);
    font-size: 2.5em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 1.2em;
    
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none; 
    border-bottom: 1px solid rgba(0,0,0,0.05); /* 极细分割线 */
    padding-bottom: 15px;
}

h2, h3, h4 {
    font-family: 'ZCOOL KuaiLe', cursive;
    color: #78909c; 
    margin-top: 1.5em;
}

/* 链接 - 只有鼠标放上去才有颜色 */
.md-typeset a {
    color: #546e7a; /* 平时是灰色 */
    text-decoration: none;
    background: none; /* 平时没有背景 */
    transition: all 0.3s;
    font-weight: 600;
    border-bottom: 1px dotted #bdbdbd; /* 虚线下划线 */
}

.md-typeset a:hover {
    color: #ec407a;
    border-bottom: 1px solid #ec407a;
    background: rgba(255, 240, 245, 0.5); /* 极淡粉背景 */
}

/* --- 6. 组件美化 --- */

/* 卡片 - 纯白微光 */
.md-typeset .grid.cards > ul > li {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    transition: all 0.3s ease;
}

.md-typeset .grid.cards > ul > li:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: var(--primary-accent);
    box-shadow: 0 8px 20px rgba(240, 98, 146, 0.15); /* 悬停时才有粉色光晕 */
}

/* 提示框 - 极简 */
.md-typeset .admonition, 
.md-typeset details {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 1);
    border-left: 3px solid #b0bec5; /* 默认灰色左边框 */
    border-radius: 8px;
    box-shadow: none;
}

/* 不同类型的提示框颜色微调 (降低饱和度) */
.md-typeset .admonition.info { border-left-color: #90caf9; }
.md-typeset .admonition.warning { border-left-color: #ffcc80; }
.md-typeset .admonition.danger { border-left-color: #ef9a9a; }
.md-typeset .admonition.success { border-left-color: #a5d6a7; }

.md-typeset .admonition-title, 
.md-typeset summary {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: none;
    font-family: 'ZCOOL KuaiLe';
    color: var(--text-title) !important;
}

/* 代码块 */
.md-typeset pre > code {
    background: #fcfcfc; 
    color: #546e7a;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
}

/* --- 7. 首页视差标题修复 --- */ 

.parallax-header {
    height: 480px;
    
    background-image: var(--parallax-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 叠加白色渐变，让图片柔和 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 左右延伸 */
    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem); 
    
    margin-bottom: 2rem;
    border-radius: 16px;
    overflow: hidden;
    
    /* 白色内描边 */
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.3);
}

.parallax-content {
    z-index: 2;
    text-align: center;
}

/* 🌸 核心修改：粉白渐变大标题 */
.parallax-title {
    font-size: 5.5rem;
    font-weight: bold; /* 加粗一点，质感更好 */
    margin-bottom: 10px;
    border-bottom: none;
    
    /* 1. 定义渐变色：上白下粉 */
    background: linear-gradient(180deg, #ffffff 30%, #ffc1e3 100%);
    
    /* 2. 将背景裁剪到文字 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. 让文字填充变透明，露出背景 */
    -webkit-text-fill-color: transparent;
    color: transparent; /* 兼容写法 */
    
    /* 4. 文字投影：因为文字透明了，普通的 text-shadow 会失效或者显示在文字上方 */
    /* 我们用 filter: drop-shadow 来代替，它能给整个不透明形状加阴影 */
    filter: drop-shadow(0 4px 10px rgba(255, 105, 180, 0.4));
}

/* 🌸 核心修改：副标题也做一点粉白呼应 */
.parallax-subtitle {
    font-size: 1.6rem;
    
    /* 文字颜色：稍微带点紫灰 */
    color: #5e5066 !important;
    
    /* 背景：去掉了边框，改为半透明深色（或降低白色的不透明度），以确保白色文字清晰可见 */
    background: rgba(0, 0, 0, 0.2); 
    
    padding: 12px 36px;
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    
    /* 柔和的投影 */
    box-shadow: 0 8px 20px rgba(255, 182, 193, 0.3);
    
    /* 加上文字发光 */
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

/* ==========================================================================
   8. 🌸 悬浮目录组件样式 (Floating TOC CSS) 🌸
   ========================================================================== */

/* 1. 悬浮按钮 (FAB) */
.tcy-fab-toc {
    position: fixed;
    /* ⬆️ 修改：默认位置改为右上角 */
    top: 100px;  /* 距离顶部一段距离，避开导航栏 */
    right: 30px; /* 距离右侧 */
    
    width: 48px; /* 稍微调小一点，更精致 */
    height: 48px;
    
    background: rgba(255, 255, 255, 0.8); /* 稍微透一点 */
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    
    cursor: grab; /* 鼠标手势改为抓手 */
    z-index: 1000;
    
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
    
    /* 禁止用户选中文字，防止拖拽变蓝 */
    user-select: none; 
    -webkit-user-select: none;
}

.tcy-fab-toc:active {
    cursor: grabbing; /* 抓紧 */
}

/* 悬浮按钮 - 悬停效果 */
.tcy-fab-toc:hover {
    transform: scale(1.1);
    background: #fff;
    box-shadow: 0 8px 25px rgba(240, 98, 146, 0.3);
}

/* 悬浮按钮 - 激活状态 */
.tcy-fab-toc.active {
    background: #fce4ec;
    box-shadow: 0 0 0 4px rgba(240, 98, 146, 0.2);
}

/* 2. 悬浮目录面板 (Panel) */
.tcy-toc-panel {
    position: fixed;
    /* 初始位置由 JS 计算，这里只需设个默认值 */
    top: 160px;
    right: 30px;
    
    width: 260px; /* 稍微窄一点 */
    max-height: 60vh;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 999;
    
    /* 动画 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95); /* 从上方淡入 */
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    
    display: flex;
    flex-direction: column;
}

/* 面板 - 激活状态 */
.tcy-toc-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ... 剩下的面板内部样式保持不变 ... */
.tcy-toc-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 1.1rem;
    color: var(--text-title);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tcy-toc-header .close-btn { cursor: pointer; color: #999; }
.tcy-toc-header .close-btn:hover { color: #f06292; }

.tcy-toc-content {
    padding: 8px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #fce4ec transparent;
}
.tcy-toc-content::-webkit-scrollbar { width: 4px; }
.tcy-toc-content::-webkit-scrollbar-thumb { background-color: #fce4ec; border-radius: 2px; }

.tcy-toc-content ul { list-style: none; padding: 0; margin: 0; }
.tcy-toc-content li { padding: 0; margin: 0; }
.tcy-toc-content a {
    display: block;
    padding: 6px 15px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

/* 一级目录 */
.tcy-toc-content > ul > li > a {
    font-weight: bold;
    color: #333;
}

/* 二级目录 (缩进) */
.tcy-toc-content ul ul a {
    padding-left: 35px;
    font-size: 0.9rem;
    color: #777;
}

/* 悬停效果 */
.tcy-toc-content a:hover {
    background: #fff0f5; /* 淡粉背景 */
    color: #ec407a;
    border-left-color: #ec407a;
}

/* 激活状态 (MkDocs 原生 JS 可能会给 a 加 .md-nav__link--active) */
.tcy-toc-content a.md-nav__link--active,
.tcy-toc-content a.active {
    color: #ec407a;
    font-weight: bold;
    background: #fff0f5;
    border-left-color: #ec407a;
}


/* ==========================================================================
   9. 底部版权栏美化 (Footer Copyright)
   ========================================================================== */
footer {
    background: transparent !important;
    padding-bottom: 2rem; /* 底部留点空隙 */
}

/* 隐藏除了版权信息以外的杂项 */
.md-footer-meta {
    background: transparent !important;
}

/* 核心：美化版权文字 */
.md-copyright {
    width: auto;
    max-width: 600px;
    margin: 0 auto; /* 居中 */
    text-align: center;
    
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 1.1rem;
    /* 🔴 [强制修复] 直接在容器上设置颜色变量，以防继承错误 */
    --md-footer-fg-color: #546e7a;
    --md-footer-fg-color--light: #546e7a;
    --md-footer-fg-color--lighter: #546e7a;
    color: #546e7a !important; /* 深灰蓝，清晰 */
    
    /* 胶囊背景：半透明白，带磨砂 */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    
    padding: 10px 30px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* 柔和阴影 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 🔴 [强制修复] 使用通配符 * 确保里面的每一层元素（链接、div等）都被染上颜色 */
.md-copyright * {
    color: #546e7a !important;
}

/* 强制让容器内的元素居中 */
.md-footer-meta__inner {
    justify-content: center !important;
    display: flex;
}



/* --- 动态图容器 --- */
#mindmap-container {
    width: 100%;
    height: 700px; /* 高度可以自己调 */
    background: transparent; /* 背景透明，融入你的网页背景 */
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 12px;
    /* 可选：给容器加个微弱的边框让它显眼点 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 节点样式 */
.mindmap-node circle {
    stroke: #fff;
    stroke-width: 1.5px;
    transition: all 0.3s ease;
    cursor: grab;
}

.mindmap-node:hover circle {
    stroke: #00e5ff; /* 悬停变青色 */
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px #00e5ff);
}

/* 连线样式 */
.mindmap-link {
    stroke: rgba(255, 255, 255, 0.2); /* 线条半透明 */
    stroke-width: 1.5px;
}

/* 文字样式 */
.mindmap-text {
    font-family: "ZCOOL KuaiLe", sans-serif; /* 用你的可爱字体 */
    font-size: 12px;
    fill: rgba(255, 255, 255, 0.9);
    pointer-events: none; /* 让鼠标穿透文字，方便点到球 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}


/* --- 响应式视频容器 --- */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 1.5rem 0;
    border-radius: 12px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 阴影 */
    background: #000;
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 视频加载失败时的提示层 --- */
.video-fallback {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 居中布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    
    /* 样式美化 */
    background-color: #2d2d2d; /* 深灰色背景，保护眼睛 */
    color: #bbb;               /* 浅灰色文字 */
    font-size: 14px;
    line-height: 1.6;
    z-index: 1;                /* 层级：1 (在底层) */
}

.video-fallback a {
    color: #00e5ff;            /* 链接颜色 */
    word-break: break-all;     /* 防止链接太长撑破手机屏幕 */
    margin-top: 5px;
}

/* 确保视频播放器盖在文字上面 */
.video-wrapper iframe,
.video-wrapper video {
    z-index: 2; /* 层级：2 (在顶层) */
    /* 注意：如果这里设置了 background: #000; 请去掉，否则会一直挡住文字 */
}


/* ==========================================================================
   TCY 极简状态卡片 (Simple Status)
   ========================================================================== */

/* 1. 网格布局 */
.status-grid {
    display: grid;
    /* 手机1列，电脑3列 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 12px;
    margin-bottom: 30px;
}

/* 2. 卡片本体 */
.status-card.simple {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.status-card.simple:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background: #fff;
    border-color: #fce4ec; /* 悬停粉色边框 */
}

/* 3. 左侧圆点 */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}
.status-dot.loading { background: #bdbdbd; animation: pulse 1s infinite; }
.status-dot.online { background: #00e676; box-shadow: 0 0 6px rgba(0,230,118,0.5); }
.status-dot.offline { background: #ff5252; }

/* 4. 中间文字 */
.status-text {
    flex: 1;
    overflow: hidden;
}
.s-name {
    font-weight: bold;
    color: #455a64;
    font-size: 0.95rem;
}
.s-ip {
    font-size: 0.8rem;
    color: #90a4ae;
    cursor: pointer;
    font-family: 'Fira Code', monospace;
    margin-top: 2px;
}
.s-ip:hover { color: #ec407a; text-decoration: underline; }

/* 5. 右侧标签 (只显示状态文字) */
.status-tag {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}
.status-tag.online-bg { color: #00c853; background: rgba(0,200,83,0.1); }
.status-tag.offline-bg { color: #e53935; background: rgba(229,57,53,0.1); }

/* 表格里的复制按钮样式 */
.copy-ip {
    cursor: pointer;
    background: #f5f5f5;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
    color: #546e7a;
    border: 1px solid transparent;
}
.copy-ip:hover {
    color: #ec407a;
    background: #fff0f5;
    border-color: #f8bbd0;
}

/* NEW 标签 */
.new-tag {
    background: #ff4081;
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }