@import url('../assets/libs/fonts/zcool-kuaile/zcool-kuaile.css');
@import url('../assets/libs/fonts/noto-serif-sc/noto-serif-sc.css');
@import url('../assets/libs/fonts/nunito/nunito.css');

/* ==========================================================================
   🌸 TCY Server: Pure White & Mist Pink (Enhanced v4) 🌸
   ==========================================================================
*/

/* --- 1. 核心变量系统 (Design Tokens) --- */
:root {
    /* 🖼️ 全局背景图 (网页大背景) */
    --tcy-bg-image: url('../assets/ysSS1.webp');

    /* 🖼️ 首页视差标题背景 */
    --parallax-bg-image: url('../assets/ysjqx1.webp');

    /* 📏 布局限制 */
    --md-content-max-width: 1600px;

    /* 🎨 品牌色系 */
    --tcy-color-primary: #ec407a;
    --tcy-color-primary-soft: #f48fb1;
    --tcy-color-primary-bg: #fce4ec;
    --tcy-color-text-main: #546e7a;
    --tcy-color-text-title: #37474f;

    /* 🧊 玻璃拟态统一参数 */
    --tcy-glass-bg: rgba(255, 255, 255, 0.78);
    --tcy-glass-bg-strong: rgba(255, 255, 255, 0.85);
    --tcy-glass-border: rgba(255, 255, 255, 0.8);
    --tcy-glass-border-soft: rgba(255, 255, 255, 0.3);
    --tcy-glass-blur: blur(12px);
    --tcy-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
    --tcy-glass-shadow-hover: 0 10px 36px rgba(31, 38, 135, 0.09);

    /* 顶部悬浮栏（品牌/搜索） */
    --tcy-header-glass-bg: rgba(255, 255, 255, 0.78);
    --tcy-header-glass-border: rgba(255, 255, 255, 0.62);
    --tcy-header-glass-shadow: 0 10px 28px rgba(31, 38, 135, 0.12);

    /* 侧边栏导航标题 */
    --tcy-nav-title-color: #c2185b;
    --tcy-nav-title-bg: rgba(255, 255, 255, 0.55);
    --tcy-nav-title-border: rgba(236, 64, 122, 0.22);

    /* 向后兼容旧变量 */
    --glass-bg: var(--tcy-glass-bg);
    --glass-border: var(--tcy-glass-border);

    /* 旧主题变量兼容 */
    --primary-light: #fff5f8;
    --primary-accent: var(--tcy-color-primary);
    --primary-soft: #f8bbd0;
    --primary-glow: rgba(236, 64, 122, 0.15);
    --text-main: var(--tcy-color-text-main);
    --text-title: var(--tcy-color-text-title);

    /* 动画时长 */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* MkDocs Material 变量映射 */
    --md-primary-fg-color: var(--tcy-color-primary-bg);
    --md-primary-fg-color--light: #fff;
    --md-primary-fg-color--dark: var(--tcy-color-primary-soft);
    --md-accent-fg-color: var(--tcy-color-primary);
    --md-default-fg-color: var(--tcy-color-text-main);
    --md-default-fg-color--light: #78909c;
    --md-default-fg-color--lighter: #90a4ae;
    --md-default-bg-color: rgba(255, 255, 255, 0.02);
}

@media screen and (max-width: 960px) {
    :root {
        --tcy-bg-image: url('../assets/ysSS1-960.webp');
        --parallax-bg-image: url('../assets/ysjqx1-960.webp');
    }
}

/* 高 DPR 移动端不强制降到 960 图，避免首页视差人脸区域被放大后发糊 */
@media screen and (max-width: 960px) and (min-resolution: 1.5dppx),
       screen and (max-width: 960px) and (-webkit-min-device-pixel-ratio: 1.5) {
    :root {
        --parallax-bg-image: url('../assets/ysjqx1.webp');
    }
}

/* --- 1.1 全局行为 --- */
html {
    scroll-behavior: smooth;
}

/* 🎀 自定义滚动条 (更中性，减少粉色噪音) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.22);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(207,216,220,0.9));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(176,190,197,0.95));
    background-clip: padding-box;
}

/* Firefox 滚动条 */
html,
body,
.md-sidebar__scrollwrap,
.md-sidebar__inner,
.md-search__scrollwrap,
.md-search-result__list,
.tcy-toc-content,
.tcy-playlist-panel ul {
    scrollbar-width: thin;
    scrollbar-color: rgba(176,190,197,0.95) rgba(255,255,255,0.18);
}

/* 🌸 文字选中颜色 */
::selection {
    background: rgba(236, 64, 122, 0.18);
    color: #37474f;
}
::-moz-selection {
    background: rgba(236, 64, 122, 0.18);
    color: #37474f;
}

/* --- 2. 全局背景重构 --- */
body {
    background-color: #f5f5f5;
    color: var(--text-main);
    font-family: 'Nunito', 'Noto Serif SC', sans-serif;
    line-height: 1.75;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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;
}

/* 通用玻璃卡片 */
.glass-card,
.glass-panel {
    background: var(--tcy-glass-bg);
    backdrop-filter: var(--tcy-glass-blur);
    -webkit-backdrop-filter: var(--tcy-glass-blur);
    border: 1px solid var(--tcy-glass-border);
    border-right-color: var(--tcy-glass-border-soft);
    border-bottom-color: var(--tcy-glass-border-soft);
    box-shadow: var(--tcy-glass-shadow);
}

/* 减少动态偏好：关闭装饰性动画 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .portal-gate-btn .portal-icon,
    .tcy-theme-toggle,
    .tcy-fab-toc {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* 页面切换轻微过渡，避免生硬闪烁 */
.md-content {
    animation: tcyContentFade 0.28s ease-out;
}
@keyframes tcyContentFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .md-content {
        animation: none !important;
    }
}

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

.md-grid {
    /* 改为 90vw (屏幕宽度的90%)，或者改大一点的数值比如 1800px */
    max-width: 90vw !important; 
    margin: 0 auto;
}

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

/* 移动端左侧抽屉避开顶部导航栏 */
@media screen and (max-width: 59.984375em) {
    .md-sidebar--primary {
        top: var(--tcy-nav-bar-height, 0px);
        height: calc(100vh - var(--tcy-nav-bar-height, 0px));
    }
    .md-sidebar--primary .md-sidebar__scrollwrap {
        max-height: calc(100vh - var(--tcy-nav-bar-height, 0px));
    }
}


/* --- 顶部导航栏美化 (Header & Tabs) --- */

/* 1. 最顶部的搜索栏区域 */
.md-header {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none;
    box-shadow: none !important;
    color: var(--text-main) !important;
    top: var(--tcy-nav-bar-height, 0px);
    z-index: 5;
    transition: box-shadow var(--transition-normal), background var(--transition-normal);
}
.md-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 0;
}
.tcy-header-brand,
.tcy-header-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--tcy-header-glass-bg);
    border: 1px solid var(--tcy-header-glass-border);
    border-radius: 999px;
    box-shadow: var(--tcy-header-glass-shadow);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    overflow: visible;
}
.tcy-header-brand {
    flex: 0 1 auto;
}
.tcy-header-tools {
    flex: 0 1 auto;
    flex-wrap: wrap;
}
.tcy-header-brand .md-header__title {
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}
.tcy-header-brand .md-header__button {
    margin: 0;
}
.tcy-header-tools .md-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 180px;
}
.tcy-header-tools .md-search__form {
    background: rgba(255,255,255,0.6);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: none;
    width: 100%;
}
.tcy-header-tools .md-search__inner {
    width: 100%;
}
.tcy-header-tools .md-header__button[for="__search"] {
    margin: 0;
}
.tcy-header-tools .md-search__input {
    background: transparent !important;
}

@media screen and (min-width: 60em) {
    .tcy-header-tools {
        position: fixed;
        right: max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
        bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
        z-index: 1001;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 16px;
        max-width: calc(100vw - 1rem);
        box-shadow: 0 14px 32px rgba(31, 38, 135, 0.16);
    }

    .tcy-header-tools .md-search {
        position: relative;
        flex: 0 1 14.5rem;
        min-width: 12.5rem;
        max-width: min(16rem, calc(100vw - 11rem));
    }

    .tcy-header-tools .md-search__overlay {
        display: none !important;
    }

    .tcy-header-tools .md-search__inner {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
        padding: 0 !important;
        width: 100% !important;
        z-index: auto !important;
    }

    .tcy-header-tools .md-search__form {
        width: 100%;
        min-height: 42px;
        border-radius: 999px;
        box-shadow: none;
    }

    .tcy-header-tools .md-search__input {
        height: 42px;
        font-size: 0.88rem;
        padding-left: 2.35rem;
        padding-right: 2.6rem;
    }

    .tcy-header-tools .md-search__output {
        position: absolute;
        right: 0;
        left: auto;
        bottom: calc(100% + 12px);
        top: auto;
        transform: none;
        width: clamp(30rem, 42vw, 38rem);
        max-width: calc(100vw - 2rem);
        max-height: min(72vh, 34rem);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px) saturate(1.1);
        -webkit-backdrop-filter: blur(18px) saturate(1.1);
        border: 1px solid rgba(236, 64, 122, 0.08);
        border-radius: 18px;
        box-shadow: 0 20px 56px rgba(31, 38, 135, 0.20);
        z-index: 1002;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(6px) !important;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        transform-origin: right bottom;
    }

    .tcy-header-tools .md-search:focus-within .md-search__output {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .tcy-header-tools .md-search__scrollwrap {
        max-height: min(72vh, 34rem);
        overscroll-behavior: contain;
    }

    .tcy-header-tools .md-search-result__icon {
        display: none !important;
    }

    .tcy-header-tools .md-search-result__meta,
    .tcy-header-tools .md-search-result__article,
    .tcy-header-tools .md-search-result__more > summary > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .tcy-header-tools .md-search-result__meta {
        font-size: 0.74rem;
        line-height: 1.8rem;
    }

    .tcy-header-tools .md-search-result__article {
        padding-top: 0.8rem;
        padding-bottom: 0.9rem;
    }

    .tcy-header-tools .md-search-result__article > :first-child {
        margin: 0 0 0.4rem 0;
        font-size: 1rem;
        line-height: 1.4;
    }

    .tcy-header-tools .md-search-result__article > :not(:first-child) {
        margin: 0.25rem 0 0;
        font-size: 0.88rem;
        line-height: 1.65;
        color: rgba(55, 71, 79, 0.82);
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.tcy-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.tcy-header-actions .tcy-theme-toggle,
.tcy-header-actions .tcy-horse-btn,
.tcy-header-actions .tcy-print-btn {
    margin: 0;
}
.md-header__option[data-md-component="palette"] {
    display: none !important;
}

/* 2. 下面的菜单选项卡区域 - 隐藏原生tabs，由JS生成自定义多行导航 */
.md-tabs {
    display: none !important;
}

/* 预留导航栏空间，降低动态插入时 CLS */
.tcy-nav-bar {
    min-height: 42px;
    box-sizing: border-box;
}

/* 自定义多行导航栏 (全主题通用) */
.tcy-nav-bar {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 6;
}
.tcy-nav-left {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.tcy-nav-links {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
    min-width: 0;
}
.tcy-nav-links a {
    display: inline-block;
    font-size: 0.8rem;
    padding: 3px 9px;
    text-decoration: none;
    border: 1px solid transparent;
    transform: translateY(0);
    transition: color var(--transition-fast), background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
    white-space: nowrap;
}

/* 粉白世界导航栏 */
.tcy-nav-bar {
    position: relative;
    padding: 8px 14px;
    margin: 3px auto 0;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    justify-content: flex-start;
    background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,248,250,0.80) 100%);
    backdrop-filter: blur(20px) saturate(1.16);
    -webkit-backdrop-filter: blur(20px) saturate(1.16);
    border: 1px solid rgba(255,255,255,0.78);
    border-right-color: rgba(255,255,255,0.42);
    border-bottom-color: rgba(255,255,255,0.42);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(31, 38, 135, 0.09), inset 0 1px 0 rgba(255,255,255,0.58);
}
.tcy-nav-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06) 38%, transparent 62%);
    pointer-events: none;
}
.tcy-nav-links a {
    color: #6f6472;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 7px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.24) 100%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 1px 0 rgba(255,255,255,0.18);
}
.tcy-nav-links .tcy-nav-label {
    color: inherit;
}
.tcy-nav-links .tcy-nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 72%, #f06292 28%);
    opacity: 0.92;
    flex-shrink: 0;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.tcy-nav-links .tcy-nav-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.tcy-nav-links a:hover {
    color: #5f5265;
    background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 8%, rgba(255,248,251,0.88)) 100%);
    border-color: color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 14%, rgba(244,143,177,0.24));
    box-shadow: 0 6px 16px rgba(236, 64, 122, 0.08), inset 0 1px 0 rgba(255,255,255,0.42);
    transform: none;
}
.tcy-nav-links a:hover .tcy-nav-icon {
    color: color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 82%, #ec407a 18%);
}
.tcy-nav-links a.active {
    color: #b43d73;
    background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 10%, rgba(255,244,248,0.94)) 100%);
    border-color: color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 18%, rgba(244,143,177,0.30));
    border-bottom: 2px solid color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 60%, #ec407a 40%);
    box-shadow: 0 8px 20px rgba(236, 64, 122, 0.10), inset 0 1px 0 rgba(255,255,255,0.46);
}
.tcy-nav-links a.active .tcy-nav-icon {
    color: color-mix(in srgb, var(--tcy-nav-item-color, var(--tcy-color-primary)) 78%, #ec407a 22%);
    opacity: 1;
}

/* 3. 修正文字和图标颜色 */
.md-header__title,
.md-header__button,
.md-tabs__link {
    color: #455a64 !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* 4. 鼠标悬停 / 选中状态 - 带下划线动画 */
.md-tabs__link {
    position: relative;
}
.md-tabs__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tcy-color-primary-soft), var(--tcy-color-primary));
    border-radius: 2px;
    transition: width var(--transition-normal), left var(--transition-normal);
}
.md-tabs__link:hover::after,
.md-tabs__link--active::after {
    width: 70%;
    left: 15%;
}
.md-tabs__link:hover,
.md-tabs__link--active {
    color: var(--tcy-color-primary) !important;
    background: transparent !important;
}

/* 5. 搜索框美化 */
.md-search__input {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-radius: 50px;
    color: #333 !important;
    border: 1px solid transparent;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}
.md-search__input:hover {
    background-color: rgba(0, 0, 0, 0.06) !important;
}
.md-search__input:focus {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(236, 64, 122, 0.16);
    box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.06);
}


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

/* 文章容器 - 更通透玻璃效果 */
.md-content__inner {
    background: var(--tcy-glass-bg);
    backdrop-filter: var(--tcy-glass-blur);
    -webkit-backdrop-filter: var(--tcy-glass-blur);
    border-radius: 16px;
    border: 1px solid var(--tcy-glass-border);
    border-right-color: var(--tcy-glass-border-soft);
    border-bottom-color: var(--tcy-glass-border-soft);
    padding: 3rem;
    margin-top: 0.3rem;
    box-shadow: var(--tcy-glass-shadow);
    transition: box-shadow var(--transition-slow), background var(--transition-normal);
}
.md-content__inner:hover {
    box-shadow: var(--tcy-glass-shadow-hover);
}

/* 侧边栏更新 */
/* 1. 外层容器：设为透明，只负责定位和滚动 */
.md-sidebar__scrollwrap {
    background: transparent !important; /* 关键：去掉背景 */
    backdrop-filter: none !important;   /* 关键：去掉模糊 */
    box-shadow: none !important;
    border: none !important;
    
    margin: 10px 0; /* 保持与顶部的距离 */
    
    /* 隐藏滚动条逻辑保持不变 */
    scrollbar-width: none; 
}
.md-sidebar__scrollwrap::-webkit-scrollbar {
    display: none;
}

/* 2. 内层导航：穿上玻璃皮肤，并限制高度 */
.md-sidebar--primary .md-nav--primary {
    background: var(--tcy-glass-bg);
    backdrop-filter: var(--tcy-glass-blur);
    -webkit-backdrop-filter: var(--tcy-glass-blur);
    border-radius: 12px;
    padding: 15px 10px;
    height: fit-content !important;
    min-height: auto !important;
    border: 1px solid var(--tcy-glass-border-soft);
}


/* --- 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(236, 64, 122, 0.08);
    padding-bottom: 15px;
    position: relative;
}

/* h1 底部装饰线 */
.md-typeset h1::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tcy-color-primary-soft), transparent);
    border-radius: 3px;
}

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

/* h2 左侧装饰条 */
.md-typeset h2 {
    padding-left: 12px;
    border-left: 3px solid var(--tcy-color-primary-soft);
}

/* 链接 - 动画下划线 */
.md-typeset a {
    color: #546e7a;
    text-decoration: none;
    background: none;
    font-weight: 600;
    border-bottom: 1px dotted #cfd8dc;
}

.md-typeset a:hover {
    color: var(--tcy-color-primary);
    border-bottom: 1.5px solid var(--tcy-color-primary);
    background: linear-gradient(to top, rgba(255, 240, 245, 0.35) 0%, transparent 50%);
}

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

/* 卡片 - 纯白微光 */
.md-typeset .grid.cards > ul > li {
    background: var(--tcy-glass-bg);
    border: 1px solid var(--tcy-glass-border);
    border-right-color: var(--tcy-glass-border-soft);
    border-bottom-color: var(--tcy-glass-border-soft);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition-normal), background var(--transition-normal);
    overflow: hidden;
}

.md-typeset .grid.cards > ul > li:hover {
    transform: translateY(-4px);
    background: var(--tcy-glass-bg-strong);
    border-color: rgba(236, 64, 122, 0.14);
    box-shadow: 0 12px 28px rgba(31, 38, 135, 0.10), 0 4px 10px rgba(0,0,0,0.04);
}

/* 卡片内图片悬停微缩放 */
.md-typeset .grid.cards > ul > li img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-typeset .grid.cards > ul > li:hover img {
    transform: scale(1.03);
}

/* 提示框 - 玻璃质感升级 */
.md-typeset .admonition,
.md-typeset details {
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: var(--tcy-glass-blur);
    -webkit-backdrop-filter: var(--tcy-glass-blur);
    border: 1px solid var(--tcy-glass-border);
    border-left: 3px solid #b0bec5;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.02);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.md-typeset .admonition:hover,
.md-typeset details:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

/* 不同类型的提示框颜色微调 */
.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: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,245,248,0.55) 100%);
    border-bottom: none;
    font-family: 'ZCOOL KuaiLe';
    color: var(--text-title) !important;
    border-radius: 8px 8px 0 0;
    padding: 10px 16px;
}

/* 代码块 */
.md-typeset pre > code {
    background: linear-gradient(135deg, #fafafa 0%, #f6f8fa 100%);
    color: #546e7a;
    border: 1px solid rgba(176, 190, 197, 0.18);
    border-radius: 10px;
    font-family: 'Fira Code', monospace;
    font-size: 0.88em;
    line-height: 1.7;
}

/* 行内代码 */
.md-typeset code {
    background: rgba(236, 239, 241, 0.75);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.88em;
    color: #7b1e46;
    border: 1px solid rgba(176, 190, 197, 0.18);
}

/* 表格美化 */
.md-typeset table:not([class]) {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(176, 190, 197, 0.16);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.md-typeset table:not([class]) th {
    background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(248,250,252,0.92) 100%);
    color: #37474f;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-weight: normal;
    padding: 12px 16px;
    border-bottom: 2px solid rgba(236, 64, 122, 0.1);
}

.md-typeset table:not([class]) td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background var(--transition-fast);
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
    background: rgba(255, 245, 248, 0.3);
}

.md-typeset table:not([class]) tbody tr:hover {
    background: rgba(252, 228, 236, 0.25);
}

/* 图片通用美化 */
.md-typeset img {
    border-radius: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}

.md-typeset img:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* --- 7. 首页视差标题 → 已迁移至 parallax.css --- */

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

/* 1. 悬浮按钮 (FAB) */
.tcy-fab-toc {
    position: fixed;
    /* ⬆️ 修改：默认位置改为右上角 */
    top: 100px;  /* 距离顶部一段距离，避开导航栏 */
    right: 30px; /* 距离右侧 */
    
    width: 48px; /* 稍微调小一点，更精致 */
    height: 48px;
    
    background: var(--tcy-glass-bg-strong);
    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: var(--tcy-glass-blur);
    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(31, 38, 135, 0.16);
}

/* 悬浮按钮 - 激活状态 */
.tcy-fab-toc.active {
    background: var(--tcy-color-primary-bg);
    box-shadow: 0 0 0 4px rgba(236, 64, 122, 0.16);
}

/* 2. 悬浮目录面板 (Panel) */
.tcy-toc-panel {
    position: fixed;
    /* 初始位置由 JS 计算，这里只需设个默认值 */
    top: 160px;
    right: 30px;
    
    width: 260px; /* 稍微窄一点 */
    max-height: 60vh;
    
    background: var(--tcy-glass-bg-strong);
    backdrop-filter: blur(20px);
    border: 1px solid var(--tcy-glass-border);
    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;
    transform: translateX(0);
    transition: transform 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: rgba(252, 228, 236, 0.5);
    color: var(--tcy-color-primary);
    border-left-color: var(--tcy-color-primary);
    transform: translateX(4px);
}

/* 激活状态 (MkDocs 原生 JS 可能会给 a 加 .md-nav__link--active) */
.tcy-toc-content a.md-nav__link--active,
.tcy-toc-content a.active {
    color: var(--tcy-color-primary);
    font-weight: bold;
    background: rgba(252, 228, 236, 0.42);
    border-left-color: var(--tcy-color-primary);
}


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

.md-footer-meta {
    background: transparent !important;
}

/* 版权文字胶囊 */
.md-copyright {
    white-space: nowrap;
    width: auto;
    display: inline-block;
    margin: 0 auto;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,250,0.90) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;
    padding: 12px 40px;
    box-shadow: 0 4px 18px rgba(31, 38, 135, 0.08);
    --md-footer-fg-color: #455a64;
    color: #455a64 !important;
    text-shadow: none;
    transition: transform var(--transition-normal) cubic-bezier(0.4,0,0.2,1), box-shadow var(--transition-normal);
}

.md-copyright,
.md-copyright * {
    color: #455a64 !important;
}

.md-copyright a {
    color: var(--tcy-color-primary) !important;
    font-weight: bold;
    border-bottom: none;
}

.md-copyright:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.14);
    background: linear-gradient(135deg, #fff 0%, rgba(252,228,236,0.92) 100%);
}

.md-footer-meta__inner {
    justify-content: center !important;
    display: flex;
}

/* 上一页/下一页导航美化 */
.md-footer__link {
    transition: opacity var(--transition-normal);
}
.md-footer__link:hover {
    opacity: 0.8;
}



/* --- 动态图容器 (Minecraft 像素风) --- */
#mindmap-container {
    width: 100%;
    min-height: 400px;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 15px,
            rgba(100,100,100,0.04) 15px,
            rgba(100,100,100,0.04) 16px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 15px,
            rgba(100,100,100,0.04) 15px,
            rgba(100,100,100,0.04) 16px
        ),
        linear-gradient(135deg, rgba(245,245,240,0.6) 0%, rgba(230,228,220,0.4) 100%);
    position: relative;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 4px;
    border: 3px solid #5c3a1e;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
    image-rendering: pixelated;
}

/* --- 贪吃蛇边框 Canvas --- */
.tcy-snake-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    image-rendering: pixelated;
}



/* --- 响应式视频容器 --- */
.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,
.video-wrapper .video-lazy-slot {
    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; 请去掉，否则会一直挡住文字 */
}

.video-wrapper .video-lazy-slot {
    z-index: 0;
}


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

/* 1. 网格布局 */
.status-grid {
    display: grid;
    /* 手机1列，电脑3列 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
    min-height: 220px; /* 预留状态卡片区域，降低异步渲染引起的抖动 */
}

/* 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: var(--tcy-color-primary); 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: transform 0.2s;
    color: #546e7a;
    border: 1px solid transparent;
}
.copy-ip:hover {
    color: var(--tcy-color-primary);
    background: rgba(252, 228, 236, 0.36);
    border-color: rgba(236, 64, 122, 0.16);
    transform: translateY(-1px);
}

/* 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; } }


/* 让自定义的打印按钮在悬停时变成主题色 */
.md-header__option svg:hover {
    color: var(--md-accent-fg-color);
    opacity: 0.7;
}

/* ==========================================================================
   10. 🌸 返回顶部按钮美化
   ========================================================================== */
.md-top {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.95rem;
    top: calc(var(--tcy-nav-bar-height, 0px) + 0.5rem) !important;
    z-index: 7;
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,248,250,0.90) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(236, 64, 122, 0.14) !important;
    border-radius: 999px !important;
    color: #d81b60 !important;
    box-shadow: 0 6px 18px rgba(31, 38, 135, 0.10) !important;
    font-family: 'ZCOOL KuaiLe', cursive;
    transition: background var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform 125ms cubic-bezier(0.4, 0, 0.2, 1);
}
.md-top:hover {
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(252,228,236,0.92) 100%) !important;
    box-shadow: 0 10px 24px rgba(31, 38, 135, 0.14) !important;
    color: var(--tcy-color-primary) !important;
    transform: translate(-50%, -2px);
}

/* ==========================================================================
   11. 🌸 搜索结果面板美化
   ========================================================================== */
.md-search__output {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(176, 190, 197, 0.16);
}
.md-search-result__link {
    transition: background var(--transition-fast);
    border-radius: 6px;
}
.md-search-result__link:hover {
    background: rgba(252, 228, 236, 0.22) !important;
}
.md-search-result__meta {
    color: var(--tcy-color-primary-soft);
}

/* ==========================================================================
   12. 🌸 水平分割线美化
   ========================================================================== */
.md-typeset hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tcy-color-primary-soft), var(--tcy-color-primary), var(--tcy-color-primary-soft), transparent);
    margin: 2.5em 0;
    opacity: 0.5;
}

/* ==========================================================================
   13. 🌸 一言容器美化 (Hitokoto)
   ========================================================================== */
.hitokoto-container {
    background: linear-gradient(135deg, rgba(255,255,255,0.60) 0%, rgba(255,248,250,0.55) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    padding: 14px 30px;
    display: table;
    margin: 20px auto 0;
    font-style: italic;
    box-shadow: 0 2px 12px rgba(31, 38, 135, 0.06);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    min-height: 64px; /* 预留一言文本空间，减少注入时布局抖动 */
}
.hitokoto-container:hover {
    box-shadow: 0 4px 18px rgba(31, 38, 135, 0.10);
    transform: translateY(-1px);
}

/* ==========================================================================
   14. 🌸 Typed.js 打字机区域美化
   ========================================================================== */
#typed-text {
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 1.3rem;
    color: #78909c;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   15. 🌸 侧边栏导航项美化
   ========================================================================== */
.md-nav__link {
    transform: translateX(0);
    transition: transform var(--transition-fast);
    border-radius: 6px;
}
.md-nav__link:hover {
    color: var(--tcy-color-primary) !important;
    transform: translateX(4px);
}
.md-nav__link--active {
    color: #d81b60 !important;
    font-weight: 700;
    background: rgba(252, 228, 236, 0.22);
    border-radius: 6px;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__link,
.md-sidebar--primary .md-nav__title {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tcy-nav-title-color) !important;
    background: var(--tcy-nav-title-bg);
    border: 1px solid var(--tcy-nav-title-border);
    border-radius: 10px;
    padding: 6px 10px;
    margin: 6px 0;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__link:hover {
    color: var(--tcy-nav-title-color) !important;
    transform: translateX(2px);
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__link .md-nav__icon,
.md-sidebar--primary .md-nav__title .md-nav__icon {
    color: inherit;
    opacity: 0.8;
}
.md-sidebar--primary .tcy-sidebar-link-with-icon,
.md-sidebar--primary .tcy-sidebar-page-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.md-sidebar--primary .tcy-sidebar-link-with-icon .md-ellipsis,
.md-sidebar--primary .tcy-sidebar-link-with-icon .md-nav__icon,
.md-sidebar--primary .tcy-sidebar-page-with-icon .md-ellipsis,
.md-sidebar--primary .tcy-sidebar-page-with-icon .md-nav__icon {
    order: 2;
}
.md-sidebar--primary .tcy-sidebar-icon,
.md-sidebar--primary .tcy-sidebar-page-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--tcy-sidebar-item-color, #ec407a);
}
.md-sidebar--primary .tcy-sidebar-icon svg,
.md-sidebar--primary .tcy-sidebar-page-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

/* ==========================================================================
   16. 🌸 详情/折叠面板增强
   ========================================================================== */
.md-typeset details[open] > summary {
    border-bottom: 1px solid rgba(236, 64, 122, 0.08);
    margin-bottom: 8px;
}
.md-typeset details > summary::marker,
.md-typeset details > summary::-webkit-details-marker {
    color: var(--tcy-color-primary-soft);
}

/* ==========================================================================
   17. 🌸 首页玻璃分区补充
   ========================================================================== */
.home-icon-showcase {
    padding-top: 20px;
}
.home-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 14px;
}
.home-icon-tile {
    width: 100%;
    max-width: 104px;
    margin: 0 auto;
    display: block;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,248,250,0.68) 100%);
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(31, 38, 135, 0.08);
}
.home-icon-tile:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(31, 38, 135, 0.12), 0 0 0 1px rgba(236, 64, 122, 0.08);
}
.home-history-panel {
    padding: 22px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(255,248,250,0.62) 100%);
}
.home-history-item + .home-history-item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(236, 64, 122, 0.14);
}
.home-history-item strong {
    display: block;
    margin-bottom: 6px;
    color: #d81b60;
    font-family: 'ZCOOL KuaiLe', cursive;
    letter-spacing: 0.02em;
}
.home-history-item p {
    margin: 0;
    color: #5f6f79;
}
.home-history-item p + p {
    margin-top: 8px;
}
.home-route-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.home-route-copy h3,
.home-route-copy > p {
    margin: 0;
}
.home-route-note {
    margin: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.74) 0%, rgba(255,250,252,0.60) 100%);
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: 0 6px 18px rgba(31, 38, 135, 0.05);
}
.home-route-note + .home-route-note {
    margin-top: 14px;
}
.home-route-note summary {
    color: #d81b60 !important;
    font-weight: 700;
}
.home-route-note-body {
    margin-top: 12px;
    font-size: 0.95em;
    color: #5f6f79;
}
.home-route-note-body > ul {
    margin: 0;
    padding-left: 1.25rem;
}
.home-route-preview {
    display: block;
    width: 100%;
    margin-top: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.82);
    box-shadow: 0 10px 26px rgba(31, 38, 135, 0.10);
}
.home-backup-route {
    margin-top: 18px;
}
.home-backup-route h4 {
    margin: 0 0 10px 0;
    color: #d81b60;
    font-family: 'ZCOOL KuaiLe', cursive;
}
.home-backup-route p {
    margin: 0 0 10px 0;
    color: #5f6f79;
}
.home-backup-route ul {
    margin: 0;
    padding-left: 1.2rem;
}
.home-backup-route li + li {
    margin-top: 6px;
}
.home-backup-route code {
    font-size: 0.9em;
}

/* ==========================================================================
   18. 🌸 响应式设计增强 (Mobile First)
   ========================================================================== */

/* 平板竖屏及以下 */
@media screen and (max-width: 960px) {
    .md-content__inner {
        padding: 1.5rem;
        border-radius: 12px;
        margin-top: 0.15rem;
    }

    h1, .md-typeset h1 {
        font-size: 1.8em;
    }

    .md-grid {
        max-width: 95vw !important;
    }
}

/* 手机竖屏 */
@media screen and (max-width: 600px) {
    .md-content__inner {
        padding: 1rem;
        border-radius: 10px;
    }

    h1, .md-typeset h1 {
        font-size: 1.5em;
        margin-bottom: 0.8em;
    }

    .md-typeset h2 {
        padding-left: 8px;
    }

    .tcy-fab-toc {
        width: 40px;
        height: 40px;
        font-size: 16px;
        top: 80px;
        right: 15px;
    }

    .tcy-toc-panel {
        width: 220px;
    }

    .md-copyright {
        font-size: 0.85rem;
        padding: 10px 24px;
    }

    #typed-text {
        font-size: 1rem;
    }

    .hitokoto-container {
        padding: 10px 18px;
        border-radius: 30px;
        font-size: 0.9em;
    }

    .home-icon-grid {
        grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
        gap: 10px;
    }

    .home-history-panel {
        padding: 18px 16px;
    }
}

/* ==========================================================================
   18. 🌸 Glightbox 图片灯箱美化
   ========================================================================== */
.glightbox-clean .gslide-description {
    background: var(--tcy-glass-bg-strong) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'ZCOOL KuaiLe', cursive;
    color: #546e7a !important;
    border-radius: 0 0 12px 12px;
}
/* 防止切换图片时标题/描述宽度先拉满再收缩，导致闪烁
   GLightbox 会在 resize() 中给 description 写入 inline max-width=img.offsetWidth
   当下一张图片未加载完成时 offsetWidth 会暂时变大，从而出现“宽度闪一下”。 */
@media (min-width: 769px) {
    .glightbox-container {
        --tcy-gbox-desc-max: 92vw;
    }

    .glightbox-container .gslide-description.description-bottom,
    .glightbox-container .gslide-description.description-top {
        max-width: min(var(--tcy-gbox-desc-max, 92vw), 92vw) !important;
        transition: max-width 180ms ease;
    }

    .glightbox-clean .gdesc-inner {
        max-width: 100% !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .glightbox-container .gslide-description.description-bottom,
    .glightbox-container .gslide-description.description-top {
        transition: none !important;
    }
}
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    transition: opacity 0.2s, transform 0.2s;
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

/* ==========================================================================
   19. 🔦 手电筒主题 (Flashlight Theme)
   ========================================================================== */

/* 手电筒遮罩层 */
#flashlight-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 900;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    background: radial-gradient(
        circle 180px at var(--fl-x, 50%) var(--fl-y, 50%),
        transparent 0%,
        rgba(0,0,0,0.25) 30%,
        rgba(0,0,0,0.7) 60%,
        rgba(0,0,0,0.88) 100%
    );
}
body.flashlight-mode #flashlight-overlay {
    opacity: 1;
}

/* --- FOUC 防闪烁：html 级别规则，防止加载瞬间先闪粉白 --- */
html.flashlight-mode {
    background-color: #0a0a0a;
}
html.flashlight-mode body {
    background-color: #0a0a0a;
}
html.flashlight-mode body::before {
    filter: brightness(0.15) saturate(0.3);
}

/* 手电筒模式下的页面基础调暗 */
body.flashlight-mode {
    background-color: #0a0a0a;
    --tcy-header-glass-bg: rgba(18, 18, 24, 0.78);
    --tcy-header-glass-border: rgba(255, 255, 255, 0.08);
    --tcy-header-glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    --tcy-nav-title-color: #ffb74d;
    --tcy-nav-title-bg: rgba(25, 25, 32, 0.65);
    --tcy-nav-title-border: rgba(255, 152, 0, 0.25);
}
body.flashlight-mode::before {
    filter: brightness(0.15) saturate(0.3);
}
body.flashlight-mode .md-content__inner {
    background: rgba(30, 30, 35, 0.85);
    border-color: rgba(255,255,255,0.05);
    color: #999;
}
body.flashlight-mode .md-sidebar--primary .md-nav--primary {
    background: rgba(30, 30, 35, 0.6);
    border-color: rgba(255,255,255,0.04);
}

/* 手电筒模式 - 导航栏变暗 */
body.flashlight-mode .md-header {
    background: transparent !important;
    border-bottom: none;
    box-shadow: none !important;
}
body.flashlight-mode .tcy-nav-bar {
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: none;
    border-bottom-color: rgba(255,255,255,0.05);
}
body.flashlight-mode .tcy-nav-links a {
    color: #888;
}
body.flashlight-mode .tcy-nav-links a:hover {
    color: #ffb74d;
    background: rgba(255,152,0,0.08);
}
body.flashlight-mode .tcy-nav-links a.active {
    color: #ffb74d;
    background: rgba(255,152,0,0.1);
    border-bottom-color: #ffb74d;
}
body.flashlight-mode .md-header__title,
body.flashlight-mode .md-header__button {
    color: #888 !important;
}

/* 手电筒模式 - 文字与标题 */
body.flashlight-mode h1,
body.flashlight-mode .md-typeset h1 {
    color: #ccc;
    border-bottom-color: rgba(255,255,255,0.06);
}
body.flashlight-mode .md-typeset h1::after {
    background: linear-gradient(90deg, transparent, #ff9800, transparent);
}
body.flashlight-mode h2,
body.flashlight-mode h3,
body.flashlight-mode h4 {
    color: #aaa;
}
body.flashlight-mode .md-typeset h2 {
    border-left-color: #ff9800;
}
body.flashlight-mode .md-typeset a {
    color: #aaa;
    border-bottom-color: rgba(255,255,255,0.15);
}
body.flashlight-mode .md-typeset a:hover {
    color: #ffb74d;
    border-bottom-color: #ffb74d;
    background: linear-gradient(to top, rgba(255,152,0,0.08) 0%, transparent 50%);
}

/* 手电筒模式 - 代码块与行内代码 */
body.flashlight-mode .md-typeset pre > code {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #b0bec5;
    border-color: rgba(255,255,255,0.06);
}
body.flashlight-mode .md-typeset code {
    background: rgba(255,152,0,0.08);
    color: #ffb74d;
    border-color: rgba(255,152,0,0.15);
}

/* 手电筒模式 - 提示框 */
body.flashlight-mode .md-typeset .admonition,
body.flashlight-mode .md-typeset details {
    background-color: rgba(30, 30, 40, 0.7);
    border-color: rgba(255,255,255,0.06);
}
body.flashlight-mode .md-typeset .admonition-title,
body.flashlight-mode .md-typeset summary {
    background: rgba(40, 40, 50, 0.8);
    color: #bbb !important;
}

/* 手电筒模式 - 卡片 */
body.flashlight-mode .md-typeset .grid.cards > ul > li {
    background: rgba(30, 30, 38, 0.7);
    border-color: rgba(255,255,255,0.05);
}
body.flashlight-mode .md-typeset .grid.cards > ul > li:hover {
    background: rgba(40, 40, 50, 0.85);
    border-color: rgba(255,152,0,0.2);
    box-shadow: 0 8px 24px rgba(255,152,0,0.08);
}

/* 手电筒模式 - 表格 */
body.flashlight-mode .md-typeset table:not([class]) th {
    background: linear-gradient(135deg, #1a1a2e 0%, #222 100%);
    color: #ccc;
    border-bottom-color: rgba(255,152,0,0.15);
}
body.flashlight-mode .md-typeset table:not([class]) td {
    border-bottom-color: rgba(255,255,255,0.04);
    color: #999;
}
body.flashlight-mode .md-typeset table:not([class]) {
    border-color: rgba(255,255,255,0.06);
}
body.flashlight-mode .md-typeset table:not([class]) tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}
body.flashlight-mode .md-typeset table:not([class]) tbody tr:hover {
    background: rgba(255,152,0,0.05);
}

/* 手电筒模式 - 底部版权 */
body.flashlight-mode .md-copyright {
    background: linear-gradient(135deg, rgba(30,30,38,0.9) 0%, rgba(40,35,25,0.9) 100%);
    border-color: rgba(255,152,0,0.2);
    color: #999 !important;
    --md-footer-fg-color: #999;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}
body.flashlight-mode .md-copyright a {
    color: #ffb74d !important;
}

/* 手电筒模式 - 滚动条 */
body.flashlight-mode ::-webkit-scrollbar-track {
    background: rgba(20,20,25,0.5);
}
body.flashlight-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9800, #e65100);
}
body.flashlight-mode {
    scrollbar-color: #ff9800 rgba(20,20,25,0.3);
}

/* 手电筒模式 - 文字选中 */
body.flashlight-mode ::selection {
    background: rgba(255,152,0,0.25);
    color: #eee;
}

/* 手电筒模式 - 搜索框 */
body.flashlight-mode .md-search__input {
    background-color: rgba(255,255,255,0.06) !important;
    color: #ccc !important;
}
body.flashlight-mode .md-search__input:focus {
    background-color: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,152,0,0.3);
    box-shadow: 0 0 0 3px rgba(255,152,0,0.1);
}
body.flashlight-mode .tcy-header-tools .md-search__form {
    background: rgba(30, 30, 38, 0.72);
    border-color: rgba(255, 152, 0, 0.18);
}
body.flashlight-mode .tcy-header-tools .md-search__output {
    background: rgba(24, 24, 30, 0.94);
    border-color: rgba(255, 152, 0, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

/* 手电筒模式 - 侧边栏导航 */
body.flashlight-mode .md-nav__link {
    color: #888 !important;
}
body.flashlight-mode .md-nav__link:hover {
    color: #ffb74d !important;
}
body.flashlight-mode .md-nav__link--active {
    color: #ff9800 !important;
    background: rgba(255,152,0,0.08);
}

/* 手电筒模式 - 返回顶部 */
body.flashlight-mode .md-top {
    background: linear-gradient(135deg, rgba(30,30,38,0.92) 0%, rgba(40,35,25,0.92) 100%) !important;
    border: 1px solid rgba(255,152,0,0.25) !important;
    border-color: rgba(255,152,0,0.25) !important;
    color: #ffb74d !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.32) !important;
}
body.flashlight-mode .md-top:hover {
    background: linear-gradient(135deg, rgba(38,38,48,0.96) 0%, rgba(52,42,28,0.96) 100%) !important;
    color: #ffd180 !important;
}

/* 手电筒模式 - 悬浮目录 */
body.flashlight-mode .tcy-fab-toc {
    background: rgba(30,30,38,0.85);
    border-color: rgba(255,255,255,0.1);
}
body.flashlight-mode .tcy-toc-panel {
    background: rgba(25,25,32,0.95);
    border-color: rgba(255,255,255,0.08);
}
body.flashlight-mode .tcy-toc-header {
    color: #ccc;
}
body.flashlight-mode .tcy-toc-content a {
    color: #888;
}
body.flashlight-mode .tcy-toc-content a:hover {
    background: rgba(255,152,0,0.08);
    color: #ffb74d;
    border-left-color: #ff9800;
}

/* 🖨️ 打印按钮 */
.tcy-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: inherit;
    transition: background 0.3s, transform 0.2s;
    flex-shrink: 0;
}
.tcy-print-btn svg {
    width: 20px;
    height: 20px;
}
.tcy-print-btn:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.08);
}
body.flashlight-mode .tcy-print-btn:hover {
    background: rgba(255,255,255,0.08);
}

/* 🔦 主题切换按钮 */
.tcy-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    font-size: 18px;
    transition: background 0.3s, transform 0.2s;
    position: relative;
    margin-left: 4px;
    flex-shrink: 0;
}
.tcy-theme-toggle:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.1);
}
body.flashlight-mode .tcy-theme-toggle:hover {
    background: rgba(255,255,255,0.08);
}
.tcy-theme-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    white-space: nowrap;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #333;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.tcy-theme-toggle:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* 🐴 像素马召唤按钮 */
.tcy-horse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    transition: background 0.3s, transform 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
    line-height: 1;
}
.tcy-horse-btn:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.2) rotate(-5deg);
}
body.flashlight-mode .tcy-horse-btn:hover {
    background: rgba(255,255,255,0.08);
}

/* ⛏️ MC 像素主题 - 按钮样式 (其余样式在 minecraft-theme.css) */
body.minecraft-mode .tcy-theme-toggle:hover {
    background: rgba(0,0,0,0.15);
}
body.minecraft-mode .tcy-horse-btn:hover {
    background: rgba(0,0,0,0.15);
}

/* 🔦 手电筒模式 - 首页内联主题按钮 */
body.flashlight-mode .theme-switch-btn {
    background: rgba(40, 40, 50, 0.7);
    border-color: rgba(255,255,255,0.1);
    color: #999;
    backdrop-filter: none;
}
body.flashlight-mode .theme-switch-btn:hover {
    background: rgba(50, 50, 60, 0.85);
    border-color: rgba(255,152,0,0.3);
}
body.flashlight-mode .theme-switch-btn.active {
    border-color: #ff9800;
    background: rgba(255,152,0,0.12);
    color: #ffb74d;
}
body.flashlight-mode .theme-hint {
    color: #666;
}

/* ==========================================================================
   20. 🖼️ 背景窥视按钮 (Bg Peek Toggle) - 底部版权栏旁
   ========================================================================== */
html.bg-peek-mode .md-content__inner,
body.bg-peek-mode .md-content__inner {
    margin-bottom: 100vh;
}

.tcy-bgpeek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,248,250,0.90) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    border-radius: 50%;
    font-size: 18px;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    margin-left: 10px;
    vertical-align: middle;
    box-shadow: 0 4px 18px rgba(31, 38, 135, 0.08);
    opacity: 0.7;
}
.tcy-bgpeek-btn:hover {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 8px 25px rgba(31, 38, 135, 0.18);
}
.tcy-bgpeek-btn.active {
    opacity: 1;
    border-color: var(--tcy-color-primary);
    box-shadow: 0 0 0 3px rgba(236, 64, 122, 0.15);
}

/* 手电筒模式 */
body.flashlight-mode .tcy-bgpeek-btn {
    background: linear-gradient(135deg, rgba(30,30,38,0.9) 0%, rgba(40,35,25,0.9) 100%);
    border-color: rgba(255,152,0,0.2);
}
body.flashlight-mode .tcy-bgpeek-btn:hover {
    box-shadow: 0 8px 25px rgba(255,152,0,0.15);
}
body.flashlight-mode .tcy-bgpeek-btn.active {
    border-color: #ff9800;
    box-shadow: 0 0 0 3px rgba(255,152,0,0.15);
}

/* MC 像素模式 */
body.minecraft-mode .tcy-bgpeek-btn {
    background: var(--mc-slot-bg);
    border: 2px solid var(--mc-border);
    border-radius: 0;
    backdrop-filter: none;
}
body.minecraft-mode .tcy-bgpeek-btn:hover {
    background: var(--mc-slot-hl);
    box-shadow: none;
}
body.minecraft-mode .tcy-bgpeek-btn.active {
    border-color: var(--mc-gold);
    box-shadow: none;
}