/* 动漫线条风格全局样式 - 优化版 */
    * {
        box-sizing: border-box;
    }

    body {
        background: transparent;
        min-height: 100vh;
        position: relative;
        font-family: var(--blog-font-sans);
    }

    .main-content {
        position: relative;
        z-index: 2;
        background: transparent;
        border-radius: 20px;
        box-shadow: none;
        margin: 110px auto 20px auto;
        padding: 30px;
        max-width: 790px;
        backdrop-filter: none;
        border: none;
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    /* 动漫风格标题 */
    h1 {
        position: relative;
        color: #2d3748;
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
        padding: 15px 20px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
    }

    h1::before {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
        border-radius: 3px;
        animation: anime-gradient 3s ease-in-out infinite;
    }

    h1::after {
        content: '✦';
        position: absolute;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
        color: #ff6b6b;
        font-size: 1.2rem;
        animation: sparkle 2s ease-in-out infinite;
    }

    /* 简化分割线 */
    .anime-divider {
        height: 1px;
        background: linear-gradient(90deg,
        transparent 0%,
        #cbd5e0 20%,
        #cbd5e0 50%,
        #cbd5e0 80%,
        transparent 100%);
        margin: 0;
        position: relative;
        overflow: visible;
        opacity: 0.6;
    }

    .anime-divider::before,
    .anime-divider::after {
        content: '◆';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 0.7rem;
        opacity: 0.7;
    }

    .anime-divider::before {
        left: -15px;
    }

    .anime-divider::after {
        right: -15px;
    }

    /* 动漫风格卡片效果 */
    .anime-card {
        background: rgba(255, 255, 255, 0.6);
        border: 2px solid transparent;
        border-radius: 15px;
        padding: 20px;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
        background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        linear-gradient(135deg, rgba(255, 234, 167, 0.3), rgba(223, 230, 233, 0.3));
        background-origin: border-box;
        background-clip: padding-box, border-box;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .anime-card::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
        background-size: 400% 400%;
        z-index: -1;
        border-radius: 15px;
        animation: anime-gradient 4s ease infinite;
    }

    @media (hover: hover) and (pointer: fine) {


    .anime-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
    }


    }

    /* 动漫风格动画 */
    @keyframes anime-gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes sparkle {
        0%, 100% {
            transform: translateY(-50%) scale(1);
            opacity: 1;
        }
        50% {
            transform: translateY(-50%) scale(1.2);
            opacity: 0.8;
        }
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes pulse {
        0%, 100% {
            transform: translateY(-50%) scale(1);
        }
        50% {
            transform: translateY(-50%) scale(1.1);
        }
    }

    /* 动漫风格按钮 */
    .anime-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .anime-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    @media (hover: hover) and (pointer: fine) {


    .anime-btn:hover::before {
        left: 100%;
    }


    }

    @media (hover: hover) and (pointer: fine) {


    .anime-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }


    }

    @media (hover: hover) and (pointer: fine) {


    .anime-btn:active {
        transform: translateY(0);
    }


    }

    /* ==================== 页面加载动画样式 - 现代化升级版 ==================== */
    .page-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(ellipse at 20% 20%, rgba(120, 119, 198, 0.4) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(100, 200, 255, 0.2) 0%, transparent 70%),
            linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        z-index: 9998;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    /* 动态背景网格 */
    .page-loader::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: loader-grid-move 20s linear infinite;
        pointer-events: none;
    }

    @keyframes loader-grid-move {
        0% { transform: translate(0, 0); }
        100% { transform: translate(50px, 50px); }
    }

    .page-loader.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .loader-content {
        text-align: center;
        position: relative;
        z-index: 1;
    }

    /* 多层环形加载动画 */
    .loader-rings {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 30px;
    }

    .loader-ring {
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: transparent;
    }

    .loader-ring:nth-child(1) {
        width: 120px;
        height: 120px;
        top: 0;
        left: 0;
        border-width: 3px;
        border-top-color: #ff6b6b;
        border-right-color: rgba(255, 107, 107, 0.3);
        animation: loader-rotate-1 2s linear infinite;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
    }

    .loader-ring:nth-child(2) {
        width: 90px;
        height: 90px;
        top: 15px;
        left: 15px;
        border-width: 3px;
        border-top-color: #4ecdc4;
        border-left-color: rgba(78, 205, 196, 0.3);
        animation: loader-rotate-2 1.5s linear infinite reverse;
        box-shadow: 0 0 15px rgba(78, 205, 196, 0.4);
    }

    .loader-ring:nth-child(3) {
        width: 60px;
        height: 60px;
        top: 30px;
        left: 30px;
        border-width: 3px;
        border-top-color: #45b7d1;
        border-bottom-color: rgba(69, 183, 209, 0.3);
        animation: loader-rotate-3 1s linear infinite;
        box-shadow: 0 0 10px rgba(69, 183, 209, 0.4);
    }

    /* 中心发光点 */
    .loader-core {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
        border-radius: 50%;
        animation: loader-pulse-core 1.5s ease-in-out infinite;
    }

    @keyframes loader-rotate-1 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes loader-rotate-2 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes loader-rotate-3 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes loader-pulse-core {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.3);
            opacity: 0.7;
        }
    }

    /* 加载文字样式 */
    .loader-text-wrapper {
        position: relative;
        display: inline-block;
    }

    .loader-text {
        color: #ffffff;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: loader-text-gradient 3s ease infinite;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    }

    @keyframes loader-text-gradient {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* 加载进度条 */
    .loader-progress {
        width: 200px;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        margin: 25px auto 0;
        overflow: hidden;
        position: relative;
    }

    .loader-progress-bar {
        height: 100%;
        /* 这里动画的是 width，每帧都会触发布局。改用 transform: scaleX() 可以进合成层，
           但 background-size 是 200% 100%，缩放会把渐变一起压缩，颜色分布和现在不一致，
           属于视觉改动，因此保留原写法。 */
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
        background-size: 200% 100%;
        border-radius: 2px;
        animation: loader-progress 2s ease-in-out infinite;
        box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
    }

    @keyframes loader-progress {
        0% {
            width: 0%;
            background-position: 0% 50%;
        }
        50% {
            width: 70%;
            background-position: 100% 50%;
        }
        100% {
            width: 100%;
            background-position: 0% 50%;
        }
    }

    /* 浮动粒子效果 */
    .loader-particles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .loader-particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        animation: loader-particle-float 8s ease-in-out infinite;
    }

    .loader-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
    .loader-particle:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 9s; }
    .loader-particle:nth-child(3) { left: 30%; animation-delay: 2s; animation-duration: 8s; }
    .loader-particle:nth-child(4) { left: 40%; animation-delay: 0.5s; animation-duration: 10s; }
    .loader-particle:nth-child(5) { left: 50%; animation-delay: 1.5s; animation-duration: 7s; }
    .loader-particle:nth-child(6) { left: 60%; animation-delay: 2.5s; animation-duration: 9s; }
    .loader-particle:nth-child(7) { left: 70%; animation-delay: 0.8s; animation-duration: 8s; }
    .loader-particle:nth-child(8) { left: 80%; animation-delay: 1.2s; animation-duration: 10s; }
    .loader-particle:nth-child(9) { left: 90%; animation-delay: 2.2s; animation-duration: 7s; }

    @keyframes loader-particle-float {
        0%, 100% {
            transform: translateY(100vh) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 0.6;
        }
        100% {
            transform: translateY(-10vh) scale(1);
            opacity: 0;
        }
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
        .loader-rings {
            width: 80px;
            height: 80px;
        }

        .loader-ring:nth-child(1) {
            width: 80px;
            height: 80px;
        }

        .loader-ring:nth-child(2) {
            width: 60px;
            height: 60px;
            top: 10px;
            left: 10px;
        }

        .loader-ring:nth-child(3) {
            width: 40px;
            height: 40px;
            top: 20px;
            left: 20px;
        }

        .loader-core {
            width: 14px;
            height: 14px;
        }

        .loader-text {
            font-size: 1.1rem;
            letter-spacing: 2px;
        }

        .loader-progress {
            width: 150px;
        }
    }

    @media (max-width: 480px) {
        .loader-rings {
            width: 60px;
            height: 60px;
        }

        .loader-ring:nth-child(1) {
            width: 60px;
            height: 60px;
            border-width: 2px;
        }

        .loader-ring:nth-child(2) {
            width: 45px;
            height: 45px;
            top: 7.5px;
            left: 7.5px;
            border-width: 2px;
        }

        .loader-ring:nth-child(3) {
            width: 30px;
            height: 30px;
            top: 15px;
            left: 15px;
            border-width: 2px;
        }

        .loader-core {
            width: 10px;
            height: 10px;
        }

        .loader-text {
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .loader-progress {
            width: 120px;
            height: 3px;
        }
    }

    /* 减少动画偏好支持 */
    @media (prefers-reduced-motion: reduce) {
        .page-loader::before,
        .loader-ring,
        .loader-core,
        .loader-text,
        .loader-progress-bar,
        .loader-particle {
            animation: none;
        }

        .loader-progress-bar {
            width: 100%;
        }
    }

    /* Page loader stacking */
    .page-loader {
        z-index: 9998;
    }

    /* 仿Textarea样式 */
    .comment-input-div {
        min-height: 100px;
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid rgba(34, 36, 38, .15);
        border-radius: .28571429rem;
        padding: .78571429em 1em;
        background: #fff;
        outline: none;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: var(--blog-font-sans);
        font-size: 16px;
        line-height: 1.8;
        color: rgba(0, 0, 0, .87);
        transition: border-color .1s ease, box-shadow .1s ease;
    }

    .comment-input-div:focus {
        border-color: #85b7d9;
        box-shadow: 0 0 0 0 rgba(34, 36, 38, .35) inset;
    }

    .comment-input-div[placeholder]:empty:before {
        content: attr(placeholder);
        color: rgba(191, 191, 191, .87);
        cursor: text;
    }

    .emoji-inline {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        margin: 0 2px;
        display: inline-block;
        user-select: none; /* 防止选中时出现蓝色覆盖 */
        cursor: default;
    }

    .clear-input {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        display: none;
    }

    /* 修复定位偏移问题 */
    .comment {
        /* scroll-margin-top: 160px; - 移除，改用 JS 控制 */
    }

    /* 留言列表字体 - 简化风格 */
    .text > .comment-content {
        white-space: pre-wrap;
        background: #fafafa repeating-linear-gradient(-45deg, #fff, #fff 1.125rem, transparent 1.125rem, transparent 2.25rem);
        box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
        margin: 20px 0;
        padding: 15px;
        border-radius: 5px;
        font-size: 16px;
        color: #555;
        font-family: var(--blog-font-sans);
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0.3px;
        position: relative;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* emoji-size: pc-38px */
    @media (min-width: 768px) {
        .emoji-item img,
        .emoji-inline,
        .text img[src*="/emoji/"] {
            width: 38px !important;
            height: 38px !important;
            object-fit: contain !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }
    }

    /* emoji-layout: pc-15col */
    @media (min-width: 1024px) {
        .emoji-panel {
            grid-template-columns: repeat(15, 1fr) !important;
            gap: 10px !important;
            padding: 10px !important;
        }

        .emoji-item {
            width: auto !important;
            height: auto !important;
            min-height: 40px !important;
        }
    }