@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #0d1117;
            --bg-card: #161b22;
            --bg-header: #1a1f29;
            --green: #00ff41;
            --green-dim: #00cc33;
            --cyan: #00e5ff;
            --yellow: #ffd700;
            --red: #ff6b6b;
            --purple: #d2a8ff;
            --orange: #ffa657;
            --gray: #8b949e;
            --gray-dim: #484f58;
            --border: #30363d;
            --text: #c9d1d9;
            --terminal-max-width: 900px;
        }

        body {
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            font-size: 14px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Matrix rain canvas */
        #matrix-bg {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            /* 代码雨的整体不透明度，之前从 0.07 调整为 0.05 */
            opacity: 0.05;
        }

        /* Scanline effect */
        body::after {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 65, 0.015) 2px,
                rgba(0, 255, 65, 0.015) 4px
            );
            pointer-events: none;
            z-index: 9999;
        }

        /* Blinking cursor */
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background: var(--green);
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 2px;
        }

        /* Typing animation */
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        /* Terminal window */
        .terminal {
            position: relative;
            z-index: 1;
            /* max-width: 900px; */
            max-width: var(--terminal-max-width);
            margin: 30px auto;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        /* Safari 凝霜效果 - 仅边框凝霜，从无到有逐渐显现 */
        .terminal.safari-frost::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
            border-radius: 8px;
            /* 边框凝霜 - 使用 inset box-shadow，更明显 */
            opacity: 0;
            box-shadow: 
                inset 0 4px 12px -4px rgba(200, 220, 255, 0.3),
                inset 0 -3px 10px -4px rgba(200, 220, 255, 0.25),
                inset 3px 0 10px -4px rgba(200, 220, 255, 0.2),
                inset -3px 0 10px -4px rgba(200, 220, 255, 0.2);
            animation: frostAppear 300s ease-out forwards; /* 5分钟逐渐显现 */
        }

        @keyframes frostAppear {
            0% { opacity: 0; }
            20% { opacity: 0.15; }
            40% { opacity: 0.35; }
            60% { opacity: 0.55; }
            80% { opacity: 0.8; }
            100% { opacity: 1; }
        }

        @keyframes snowAppear {
            0% { opacity: 0; height: 0; }
            15% { opacity: 0.15; height: 2px; }
            30% { opacity: 0.3; height: 3px; }
            45% { opacity: 0.5; height: 4px; }
            60% { opacity: 0.65; height: 5px; }
            75% { opacity: 0.8; height: 6px; }
            90% { opacity: 0.9; height: 7px; }
            100% { opacity: 0.9; height: 8px; }
        }

        /* 角落霜冻 - 轻微效果，逐渐显现 */
        .frost-corner {
            position: absolute;
            pointer-events: none;
            z-index: 12;
            opacity: 0;
            animation: frostAppear 3s ease-out forwards;
        }

        .frost-corner.top-left {
            top: -1px;
            left: -1px;
            width: 5px;
            height: 5px;
            background: radial-gradient(ellipse at top left, rgba(220, 235, 255, 0.2) 0%, rgba(200, 220, 255, 0.06) 50%, transparent 80%);
            border-radius: 4px 0 0 0;
        }

        .frost-corner.top-right {
            top: -1px;
            right: -1px;
            width: 5px;
            height: 5px;
            background: radial-gradient(ellipse at top right, rgba(220, 235, 255, 0.2) 0%, rgba(200, 220, 255, 0.06) 50%, transparent 80%);
            border-radius: 0 4px 0 0;
        }

        .frost-corner.bottom-left {
            bottom: -1px;
            left: -1px;
            width: 4px;
            height: 4px;
            background: radial-gradient(ellipse at bottom left, rgba(220, 235, 255, 0.12) 0%, rgba(200, 220, 255, 0.04) 50%, transparent 80%);
            border-radius: 0 0 0 4px;
        }

        .frost-corner.bottom-right {
            bottom: -1px;
            right: -1px;
            width: 4px;
            height: 4px;
            background: radial-gradient(ellipse at bottom right, rgba(220, 235, 255, 0.12) 0%, rgba(200, 220, 255, 0.04) 50%, transparent 80%);
            border-radius: 0 0 4px 0;
        }

        /* Title bar */
        .title-bar {
            background: var(--bg-header);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--border);
            user-select: none;
            position: relative;
        }
        .title-bar .dot {
            width: 12px; height: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .title-bar .dot:hover { opacity: 0.8; }
        .dot.red { background: #ff5f57; }
        .dot.yellow { background: #febc2e; }
        .dot.green { background: #28c840; }
        .title-bar .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.85em;
            color: var(--gray);
            white-space: nowrap;
            pointer-events: none;
        }

        /* Terminal body */
        .term-body {
            background: rgba(13, 17, 23, 0.94);
            padding: 24px;
        }

        /* Command prompt */
        .prompt {
            margin-bottom: 8px;
        }
        .prompt .user {
            color: var(--green);
            font-weight: 600;
        }
        .prompt .path {
            color: var(--cyan);
        }
        .prompt .symbol {
            color: var(--gray);
        }
        .prompt .cmd {
            color: var(--text);
        }

        /* Output */
        .output {
            margin: 12px 0 20px;
            padding-left: 0;
        }
        .output p {
            margin-bottom: 6px;
        }

        /* ASCII art */
        .ascii-art {
            font-size: 0.7em;
            line-height: 1.2;
            margin: 20px 0;
            white-space: pre;
            /* 彩虹渐变文字效果 */
            background: linear-gradient(90deg, #00ff41, #00e5ff, #d2a8ff, #ffd700, #00ff41);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: asciiRainbow 6s linear infinite;
            filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.5));
        }
        @keyframes asciiRainbow {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Separator */
        .sep {
            color: var(--gray-dim);
            margin: 20px 0;
            font-size: 0.85em;
        }

        /* Post listing */
        .ls-output {
            margin: 12px 0;
        }
        .ls-row {
            display: grid;
            grid-template-columns: 100px 80px 1fr 80px;
            gap: 12px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
            font-size: 0.9em;
        }
        @media (max-width: 600px) {
            .ls-row {
                grid-template-columns: 1fr 80px;
            }
            .ls-row .perm, .ls-row .size { display: none; }
            .ls-row.header span:nth-child(1),
            .ls-row.header span:nth-child(2) { display: none; }
        }
        .ls-row.header {
            color: var(--gray-dim);
            font-weight: 600;
            border-bottom: 1px solid var(--border);
            padding-bottom: 10px;
            margin-bottom: 4px;
        }
        .ls-row .perm { color: var(--gray); }
        .ls-row .size { color: var(--orange); }
        .ls-row .name a {
            color: var(--cyan);
            text-decoration: none;
            transition: color 0.2s;
        }
        .ls-row .name a:hover {
            color: var(--green);
            text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
        }
        .ls-row .date-col { color: var(--gray); text-align: right; }

        /* Post detail card */
        .post-detail {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 6px;
            margin: 16px 0;
            overflow: hidden;
        }
        .post-detail .file-header {
            background: var(--bg-header);
            padding: 8px 16px;
            display: flex;
            justify-content: space-between;
            font-size: 0.8em;
            border-bottom: 1px solid var(--border);
        }
        .post-detail .file-header .filename {
            color: var(--cyan);
        }
        .post-detail .file-header .lang {
            color: var(--purple);
        }
        .post-detail .file-body {
            padding: 20px;
        }
        .post-detail .file-body h2 {
            color: var(--green);
            font-size: 1.3em;
            margin-bottom: 12px;
            font-weight: 600;
        }
        .post-detail .file-body .meta-line {
            color: var(--gray);
            font-size: 0.8em;
            margin-bottom: 16px;
        }
        .post-detail .file-body .meta-line .tag {
            color: var(--yellow);
            text-decoration: none;
            cursor: pointer;
        }
        .post-detail .file-body .meta-line .tag:hover {
            color: var(--green);
        }
        .post-detail .file-body .meta-line .tag-preview {
            color: var(--yellow);
            cursor: default;
        }
        .post-detail .file-body .meta-line .tag-preview:hover {
            color: var(--yellow);
        }
        .post-detail .file-body .meta-line .date-highlight {
            color: var(--orange);
        }
        .post-detail .file-body .content-text {
            color: var(--text);
            font-size: 0.9em;
            line-height: 1.8;
            margin-bottom: 16px;
            white-space: pre-wrap;
        }

        /* Markdown rendered content */
        .post-content {
            color: var(--text);
            font-size: 0.9em;
            line-height: 1.9;
        }
        .post-content h1 { color: var(--green); margin: 24px 0 12px; font-size: 1.4em; }
        .post-content h2 { color: var(--green); margin: 20px 0 10px; font-size: 1.2em; }
        .post-content h3 { color: var(--cyan); margin: 16px 0 8px; font-size: 1.05em; }
        .post-content p { margin-bottom: 12px; }
        .post-content a { color: var(--green); text-decoration: none; }
        .post-content a:hover { text-decoration: underline; color: var(--cyan); }
        .post-content code {
            background: var(--bg-header);
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.9em;
            color: var(--orange);
        }
        .post-content pre {
            background: #0d1117;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 16px;
            margin: 12px 0;
            overflow-x: auto;
            font-size: 1em;
        }
        .post-content .code-block {
            position: relative;
        }
        .post-content .code-block:hover .copy-btn {
            opacity: 1;
        }
        .post-content .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--gray);
            font-family: inherit;
            font-size: 12px;
            padding: 4px 10px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
            z-index: 1;
        }
        .post-content .copy-btn:hover {
            color: var(--green);
            border-color: var(--green);
        }
        .post-content .copy-btn.copied {
            color: var(--green);
        }

        /* Dark scrollbar */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--border) var(--bg-card);
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-card);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--gray-dim);
        }
        ::-webkit-scrollbar-corner {
            background: var(--bg-card);
        }
        .post-content pre code {
            background: none;
            padding: 0;
            color: var(--text);
        }
        .post-content blockquote {
            border-left: 3px solid var(--green);
            padding-left: 16px;
            margin: 12px 0;
            color: var(--gray);
        }
        .post-content ul, .post-content ol {
            padding-left: 24px;
            margin-bottom: 12px;
        }
        .post-content li { margin-bottom: 4px; }
        .post-content img {
            max-width: 100%;
            border-radius: 4px;
            border: 1px solid var(--border);
        }
        .post-content hr {
            border: none;
            border-top: 1px solid var(--border);
            margin: 20px 0;
        }

        /* Tables */
        .post-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 16px 0;
            font-size: 0.9em;
        }
        .post-content table th,
        .post-content table td {
            border: 1px solid var(--border);
            padding: 8px 12px;
            text-align: left;
        }
        .post-content table th {
            background: var(--bg-header);
            color: var(--green);
        }
        .post-content table tr:nth-child(even) {
            background: var(--bg-card);
        }

        /* Back link */
        .back-link {
            color: var(--green);
            text-decoration: none;
            font-size: 0.85em;
            display: inline-block;
            margin-top: 12px;
        }
        .back-link:hover { text-decoration: underline; }

        /* Tags section */
        .tags-section {
            margin: 20px 0;
        }
        .tag-item {
            display: inline-block;
            padding: 4px 12px;
            margin: 4px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.8em;
            color: var(--text);
            text-decoration: none;
            transition: all 0.2s;
            cursor: pointer;
        }
        .tag-item:hover, .tag-item.active {
            border-color: var(--green);
            color: var(--green);
            background: rgba(0, 255, 65, 0.05);
        }
        .tag-item .count {
            color: var(--gray-dim);
            margin-left: 4px;
        }

        /* Status bar */
        .status-bar {
            background: var(--bg-header);
            border-top: 1px solid var(--border);
            padding: 6px 16px;
            display: flex;
            justify-content: space-between;
            font-size: 0.75em;
            color: var(--gray);
        }
        .status-bar .branch { color: var(--green); }
        .status-bar .mode { color: var(--cyan); }

        /* System info */
        .sysinfo {
            color: var(--gray);
            font-size: 0.8em;
            margin: 12px 0;
        }
        .sysinfo .highlight {
            color: var(--green);
        }
        .sysinfo .warn {
            color: var(--yellow);
        }

        /* Footer terminal */
        .term-footer {
            max-width: 900px;
            margin: 0 auto 30px;
            text-align: center;
            font-size: 0.75em;
            color: var(--gray-dim);
        }
        .term-footer a {
            color: var(--gray);
            text-decoration: none;
        }
        .term-footer a:hover { color: var(--green); }

        /* Highlight effect */
        .glow {
            text-shadow: 0 0 10px currentColor;
        }

        /* Loading */
        .loading {
            color: var(--green);
            font-size: 0.85em;
        }
        .loading::after {
            content: '.';
            animation: dots 1.2s infinite;
        }
        @keyframes dots {
            0%, 100% { content: '.'; }
            33% { content: '..'; }
            66% { content: '...'; }
        }

        /* Error */
        .error-text {
            color: var(--red);
            font-size: 0.85em;
        }

        /* Pagination - 滑动式分页 */
        .pagination {
            margin: 10px 0 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .pagination-arrow {
            color: var(--cyan);
            text-decoration: none;
            padding: 4px 12px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.8em;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
            flex-shrink: 0;
        }
        .pagination-arrow:hover {
            border-color: var(--green);
            color: var(--green);
        }
        .pagination-arrow.disabled {
            opacity: 0.3;
            pointer-events: none;
        }
        .pagination-scroll-container {
            overflow: hidden;
            max-width: 100%;
            position: relative;
        }
        .pagination-track {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
            padding: 4px 0;
            /* 隐藏滚动条但保持功能 */
        }
        .pagination-track::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }
        .pagination-page {
            color: var(--cyan);
            text-decoration: none;
            padding: 4px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.8em;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .pagination-page:hover {
            border-color: var(--green);
            color: var(--green);
            transform: translateY(-2px);
        }
        .pagination-page.active {
            background: var(--green);
            color: var(--bg);
            border-color: var(--green);
            box-shadow: 0 0 12px rgba(0, 255, 65, 0.4);
        }

        /* 连续滚动文章列表 - 透明容器，与终端融合 */
        .posts-scroll-container {
            position: relative;
            overflow: visible;
            margin: 8px 0 10px;
            background: transparent;
            border: none;
            border-radius: 0;
        }
        .posts-scroll-container > .ls-output {
            margin: 0 0 6px;
            padding: 0 12px;
        }
        .posts-scroll-container .ls-row.header {
            margin-bottom: 0;
            padding-bottom: 8px;
        }
        .posts-scroll-viewport {
            overflow: hidden;
            padding: 0 12px;
            box-sizing: content-box;
        }
        .admin-posts-scroll-viewport {
            padding: 0 12px;
            overflow-x: auto;
            overflow-y: hidden;
            transition: height 0.3s ease;
            max-width: 100%;
            box-sizing: border-box;
        }
        .posts-scroll-track {
            will-change: transform;
        }
        /* 首页/管理页滚动列表行：统一行高与垂直居中 */
        .posts-scroll-list-row {
            padding: 7px 0;
            box-sizing: border-box;
            font-size: 0.9em;
            line-height: 1.4;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
        }
        .posts-scroll-viewport .ls-row.posts-scroll-list-row {
            display: grid;
            grid-template-columns: 100px 80px 1fr 80px;
            gap: 12px;
            align-items: center;
        }
        /* 管理页：两列布局（信息 + 操作按钮） */
        .admin-posts-scroll-viewport .ls-row.posts-scroll-list-row {
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: center;
        }
        .admin-posts-scroll-viewport .ls-row.posts-scroll-list-row .admin-post-info-span {
            display: inline;
            min-width: 0;
        }
        .admin-posts-scroll-viewport .ls-row.posts-scroll-list-row .admin-post-actions-span {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
            align-items: center;
            flex-wrap: nowrap;
        }
        /* 管理页文章链接样式：与主页保持一致 */
        .admin-posts-scroll-viewport .ls-row.posts-scroll-list-row .admin-post-info-span a {
            color: var(--cyan);
            text-decoration: none;
            transition: color 0.2s;
            cursor: text;
        }
        .admin-posts-scroll-viewport .ls-row.posts-scroll-list-row .admin-post-info-span a:hover {
            color: var(--green);
            text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
        }
        @media (max-width: 600px) {
            .posts-scroll-viewport .ls-row.posts-scroll-list-row {
                grid-template-columns: 1fr 80px;
            }
            .posts-scroll-viewport .ls-row.posts-scroll-list-row .perm,
            .posts-scroll-viewport .ls-row.posts-scroll-list-row .size { display: none; }
        }
        .posts-scroll-viewport .ls-row .name {
            word-break: break-word;
            white-space: normal;
            overflow: visible;
        }
        .posts-scroll-viewport .ls-row .name a {
            word-break: break-word;
        }
        .admin-post-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .admin-post-info {
            min-width: 0;
            flex: 1;
            word-break: break-all;
            white-space: normal;
        }
        .admin-post-id {
            color: var(--purple);
            font-size: 0.75em;
            display: inline;
        }
        .admin-post-lock {
            color: var(--orange);
            font-size: 0.75em;
            display: inline;
        }
        .admin-post-title {
            color: var(--cyan);
            cursor: pointer;
            text-decoration: none;
            margin-left: 6px;
            word-break: break-all;
            display: inline;
        }
        .admin-post-date {
            color: var(--gray);
            font-size: 0.8em;
            margin-left: 6px;
            display: inline;
        }
        .admin-post-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
            align-items: center;
        }
        .admin-post-btn {
            padding: 4px 6px;
            font-size: 0.8em;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .posts-scroll-progress {
            height: 1px;
            background: var(--border);
            margin: 8px 12px 0;
        }
        #adminPostsScrollContainer .posts-scroll-progress {
            margin-top: 12px;
        }
        .progress-bar {
            height: 100%;
            background: var(--green);
            box-shadow: 0 0 8px var(--green);
            transition: width 0.3s ease;
        }


        /* Admin panel */
        .admin-section {
            margin: 16px 0;
        }
        .admin-section input,
        .admin-section textarea {
            width: 100%;
            background: var(--bg-card) !important;
            border: 1px solid var(--border);
            color: var(--text);
            padding: 8px 12px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.9em;
            margin-bottom: 8px;
        }
        /* 防止浏览器自动填充样式覆盖 */
        .admin-section input:-webkit-autofill,
        .admin-section input:-webkit-autofill:hover,
        .admin-section input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
            -webkit-text-fill-color: var(--text) !important;
        }
        .admin-section textarea {
            min-height: 200px;
            resize: vertical;
        }
        .admin-section input:focus,
        .admin-section textarea:focus {
            outline: none;
            border-color: var(--green);
        }
        .admin-section label {
            color: var(--gray);
            font-size: 0.8em;
            display: block;
            margin-bottom: 4px;
        }
        .admin-btn {
            background: var(--bg-header);
            color: var(--green);
            border: 1px solid var(--green);
            padding: 4px 7px;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
        }
        .admin-btn:hover {
            background: rgba(0, 255, 65, 0.1);
        }
        .admin-btn.danger {
            color: var(--red);
            border-color: var(--red);
        }
        .admin-btn.danger:hover {
            background: rgba(255, 107, 107, 0.1);
        }
        .admin-btn.cyan {
            color: var(--cyan);
            border-color: var(--cyan);
        }
        .admin-btn.cyan:hover {
            background: rgba(0, 229, 255, 0.1);
        }

        /* Fullscreen editor mode */
        .fullscreen-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 10000;
            padding: 30px 0;
            display: flex;
            justify-content: center;
        }
        .fullscreen-overlay .fullscreen-container {
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
        }
        .fullscreen-overlay .fullscreen-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            border-radius: 8px 8px 0 0;
            border-bottom: none;
        }
        .fullscreen-overlay .fullscreen-header span {
            color: var(--green);
            font-size: 0.85em;
        }
        .fullscreen-overlay .fullscreen-header button {
            background: var(--bg-header);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
        }
        .fullscreen-overlay .fullscreen-header button:hover {
            color: var(--red);
            border-color: var(--red);
        }
        .fullscreen-overlay textarea {
            flex: 1;
            width: 100%;
            background: var(--bg);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            color: var(--text);
            padding: 20px 24px;
            font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
        }
        .fullscreen-overlay textarea:focus {
            outline: none;
            border-color: var(--green);
        }

        /* Preview overlay */
        .preview-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: 10000;
            overflow-y: auto;
            padding: 30px 16px;
        }

        /* Nav links in terminal */
        .nav-links {
            margin: 12px 0;
        }
        .nav-links a {
            color: var(--cyan);
            text-decoration: none;
            margin-right: 16px;
            font-size: 0.9em;
            cursor: pointer;
            transition: color 0.2s;
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--green);
        }

        @media (max-width: 768px) {
            .nav-links .nav-break::before {
                content: "\A";
                white-space: pre;
                line-height: 2em; /* 觉得两行太挤的话，用这行来控制上下间距 */
            }
        }

        /* Toast notification */
        #toastContainer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10001;
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none;
        }
        .toast-bar {
            width: 100%;
            background: var(--bg-header);
            border-bottom: 1px solid var(--border);
            padding: 10px 20px;
            text-align: center;
            color: var(--gray);
            font-size: 0.85em;
            pointer-events: auto;
            animation: toastIn 0.3s ease;
        }
        .toast-bar.fade-out {
            animation: toastOut 1s ease forwards;
        }
        .toast-bar .toast-success { color: var(--green-dim); }
        .toast-bar .toast-error { color: var(--red); }
        .toast-bar .toast-info { color: var(--cyan); }
        .toast-bar .toast-actions {
            margin-top: 8px;
            display: flex;
            justify-content: center;
            gap: 12px;
        }
        .toast-bar .toast-actions button {
            background: var(--bg);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 4px 16px;
            border-radius: 3px;
            font-family: inherit;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
        }
        .toast-bar .toast-actions button:hover {
            border-color: var(--green);
            color: var(--green);
        }
        .toast-bar .toast-actions button.confirm-btn:hover {
            border-color: var(--red);
            color: var(--red);
        }
        @keyframes toastIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes toastOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* Git Sync Modal Styles */
        .git-sync-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.94);
            z-index: 9999;
            overflow-y: auto;
            padding: 30px 16px;
        }
        .git-sync-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .git-sync-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            border-radius: 8px 8px 0 0;
            border-bottom: none;
        }
        .git-sync-header span {
            color: var(--green);
            font-size: 0.9em;
            text-shadow: 0 0 5px var(--green);
        }
        .git-sync-header button {
            background: var(--bg-header);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
        }
        .git-sync-header button:hover {
            color: var(--red);
            border-color: var(--red);
        }
        .git-sync-body {
            background: var(--bg);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 20px;
        }
        .git-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        @media (max-width: 768px) {
            .git-grid {
                grid-template-columns: 1fr;
            }
        }
        .git-panel {
            border: 1px solid rgba(48, 54, 61, 0.6);
            border-radius: 6px;
            padding: 16px;
            background: rgba(13, 17, 23, 0.4);
        }
        .git-panel-title {
            color: var(--cyan);
            font-size: 0.85em;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 6px;
            font-weight: bold;
        }
        .git-panel-title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 6px;
        }
        .git-panel-title-row .git-panel-title {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
            flex: 1;
        }
        .git-panel-title-row .git-btn {
            flex-shrink: 0;
            font-size: 0.75em;
            padding: 4px 10px;
        }
        .git-form-group {
            margin-bottom: 12px;
        }
        .git-form-group label {
            display: block;
            color: var(--gray);
            font-size: 0.75em;
            margin-bottom: 4px;
        }
        .git-form-group input[type="text"],
        .git-form-group input[type="password"] {
            width: 100%;
            background: var(--bg-card) !important;
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 6px 10px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.85em;
            box-sizing: border-box;
            transition: all 0.2s;
        }
        /* 防止浏览器自动填充样式覆盖 */
        .git-form-group input:-webkit-autofill,
        .git-form-group input:-webkit-autofill:hover,
        .git-form-group input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
            -webkit-text-fill-color: var(--text) !important;
        }
        .git-form-group input[type="text"]:focus,
        .git-form-group input[type="password"]:focus {
            outline: none;
            border-color: var(--green);
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
        }
        .git-checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }
        .git-checkbox-group input[type="checkbox"] {
            accent-color: var(--green);
            cursor: pointer;
        }
        .git-checkbox-group label {
            color: var(--gray);
            font-size: 0.75em;
            cursor: pointer;
            user-select: none;
        }
        .git-ssh-key-box {
            background: #000;
            border: 1px dashed var(--border);
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            font-size: 0.7em;
            color: var(--gray-dim);
            font-family: 'Courier New', Courier, monospace;
            word-break: break-all;
            max-height: 100px;
            overflow-y: auto;
        }
        .git-btn {
            background: var(--bg-card);
            color: var(--fg);
            border: 1px solid var(--border);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75em;
            font-family: inherit;
            transition: all 0.2s;
        }
        .git-btn:hover {
            border-color: var(--green);
            color: var(--green);
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
        }
        .git-btn.primary {
            border-color: var(--green);
            color: var(--green);
        }
        .git-btn.primary:hover {
            background: rgba(0, 255, 0, 0.05);
        }
        .git-btn.warning {
            border-color: var(--yellow);
            color: var(--yellow);
        }
        .git-btn.warning:hover {
            background: rgba(255, 165, 0, 0.05);
            box-shadow: 0 0 5px rgba(255, 165, 0, 0.2);
        }
        .git-btn.danger {
            border-color: var(--red);
            color: var(--red);
        }
        .git-btn.danger:hover {
            background: rgba(255, 0, 0, 0.05);
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
        }
        .git-btn.full {
            width: 100%;
            margin-top: 8px;
        }
        .git-btn-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 8px;
        }
        .git-btn-row .git-btn.full {
            margin-top: 0;
        }
        
        .git-ssh-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0, 255, 255, 0.03);
            border: 1px solid rgba(0, 255, 255, 0.15);
            color: var(--cyan);
            padding: 8px 12px;
            border-radius: 4px;
            margin-top: 12px;
            cursor: pointer;
            font-size: 0.75em;
            transition: all 0.2s ease;
            user-select: none;
        }
        .git-ssh-trigger:hover {
            background: rgba(0, 255, 255, 0.08);
            border-color: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
        }
        .git-ssh-trigger span.icon {
            transition: transform 0.2s ease;
        }
        .git-ssh-trigger.active span.icon {
            transform: rotate(90deg);
        }
        .git-strategy-card {
            border: 1px solid rgba(48, 54, 61, 0.4);
            background: rgba(255, 255, 255, 0.01);
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 12px;
            transition: all 0.2s ease;
        }
        .git-strategy-card:hover {
            border-color: rgba(0, 255, 0, 0.2);
            background: rgba(255, 255, 255, 0.02);
            box-shadow: 0 0 6px rgba(0, 255, 0, 0.05);
        }
        .git-strategy-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .git-strategy-name {
            font-size: 0.8em;
            font-weight: bold;
            color: var(--fg);
        }
        .git-strategy-badge {
            font-size: 0.65em;
            padding: 0;
            border: none;
            border-radius: 0;
            font-weight: bold;
            background: transparent;
            pointer-events: none;
            user-select: none;
        }
        .git-strategy-badge.safe {
            color: var(--green);
        }
        .git-strategy-badge.warn {
            color: var(--yellow);
        }
        .git-strategy-badge.danger {
            color: var(--red);
        }
        .git-strategy-desc {
            font-size: 0.7em;
            color: var(--gray-dim);
            line-height: 1.4;
            margin-bottom: 8px;
        }
        
        /* 实时终端命令视窗 Styles */
        .git-terminal-wrapper {
            margin-top: 20px;
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
        }
        .git-terminal-header {
            background: var(--bg-header);
            padding: 6px 12px;
            font-size: 0.75em;
            color: var(--gray);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .git-terminal-body {
            background: #050505;
            height: 220px;
            overflow-y: auto;
            padding: 12px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.8em;
            position: relative;
        }
        /* 拟真扫描线效果 */
        .git-terminal-body::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 10;
            background-size: 100% 3px, 3px 100%;
            pointer-events: none;
        }
        .git-log-line {
            margin-bottom: 6px;
            line-height: 1.4;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .git-log-line.command {
            color: var(--cyan);
            font-weight: bold;
        }
        .git-log-line.stdout {
            color: var(--green);
        }
        .git-log-line.stderr {
            color: var(--red);
        }
        .git-log-line.info {
            color: var(--yellow);
        }
        .git-conflict-banner {
            border: 1px solid var(--red);
            background: rgba(255, 0, 0, 0.05);
            padding: 10px;
            border-radius: 4px;
            font-size: 0.75em;
            color: var(--red);
            margin-top: 10px;
        }

        /* File Manager Modal */
        .file-manager-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 10000;
            overflow-y: auto;
            padding: 30px 16px;
        }
        .file-manager-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .file-manager-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            border-radius: 8px 8px 0 0;
            border-bottom: none;
        }
        .file-manager-header span {
            color: var(--green);
            font-size: 0.9em;
        }
        .file-manager-header button {
            background: var(--bg-header);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
        }
        .file-manager-header button:hover {
            color: var(--red);
            border-color: var(--red);
        }
        .file-manager-body {
            background: var(--bg);
            border: 1px solid var(--border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 20px;
        }
        .file-section {
            margin-bottom: 24px;
        }
        .file-section:last-child {
            margin-bottom: 0;
        }
        .file-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }
        .file-section-title {
            color: var(--cyan);
            font-size: 0.85em;
        }
        .file-upload-area {
            border: 2px dashed var(--border);
            border-radius: 6px;
            padding: 16px;
            text-align: center;
            margin-bottom: 12px;
            transition: border-color 0.2s;
        }
        .file-upload-area:hover {
            border-color: var(--green);
        }
        .file-upload-area input[type="file"] {
            display: none;
        }
        .file-upload-area label {
            color: var(--gray);
            cursor: pointer;
            font-size: 0.85em;
        }
        .file-upload-area label:hover {
            color: var(--green);
        }
        .file-upload-area .hint {
            color: var(--gray-dim);
            font-size: 0.75em;
            margin-top: 4px;
        }
        .file-upload-area.dragover {
            border-color: var(--green) !important;
            background: rgba(0, 255, 0, 0.05);
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
        }
        .file-upload-progress {
            display: none;
            margin: 12px 0 14px;
            padding: 10px 12px;
            border: 1px solid rgba(0, 255, 0, 0.25);
            border-radius: 4px;
            background: rgba(0, 255, 0, 0.04);
        }
        .file-upload-progress.active {
            display: block;
        }
        .file-upload-progress.error {
            border-color: rgba(255, 0, 0, 0.35);
            background: rgba(255, 0, 0, 0.05);
        }
        .file-upload-progress.done {
            border-color: rgba(0, 255, 255, 0.35);
            background: rgba(0, 255, 255, 0.04);
        }
        .file-upload-progress-info {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: var(--gray);
            font-size: 0.75em;
            margin-bottom: 8px;
        }
        .file-upload-progress-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .file-upload-progress-percent {
            flex-shrink: 0;
            color: var(--green);
        }
        .file-upload-progress.error .file-upload-progress-percent {
            color: var(--red);
        }
        .file-upload-progress.done .file-upload-progress-percent {
            color: var(--cyan);
        }
        .file-upload-progress-track {
            height: 8px;
            overflow: hidden;
            border: 1px solid rgba(0, 255, 0, 0.3);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.35);
        }
        .file-upload-progress-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--green), var(--cyan));
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.35);
            transition: width 0.16s ease;
        }
        .file-list {
            max-height: 300px;
            overflow-y: auto;
        }
        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            border: 1px solid rgba(48, 54, 61, 0.5);
            border-radius: 4px;
            margin-bottom: 6px;
            background: var(--bg-card);
        }
        .file-item:hover {
            border-color: var(--border);
        }
        .file-item-info {
            flex: 1;
            min-width: 0;
        }
        .file-item-name {
            color: var(--text);
            font-size: 0.85em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .file-item-size {
            color: var(--gray-dim);
            font-size: 0.75em;
        }
        .file-item-actions {
            display: flex;
            gap: 8px;
            margin-left: 12px;
        }
        .file-item-btn {
            background: var(--bg-header);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 4px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.75em;
            transition: all 0.2s;
        }
        .file-item-btn:hover {
            color: var(--green);
            border-color: var(--green);
        }
        .file-item-btn.delete:hover {
            color: var(--red);
            border-color: var(--red);
        }
        .file-empty {
            color: var(--gray-dim);
            font-size: 0.85em;
            text-align: center;
            padding: 20px;
        }
        .upload-code-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            margin-bottom: 12px;
            border: 1px solid rgba(0, 255, 255, 0.25);
            border-radius: 6px;
            background: rgba(0, 255, 255, 0.04);
        }
        .upload-code-label {
            color: var(--gray);
            font-size: 0.75em;
            flex-shrink: 0;
        }
        .upload-code-value {
            flex: 1;
            color: var(--yellow);
            font-size: 1.1em;
            letter-spacing: 0.2em;
            font-weight: bold;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }
        .upload-code-copy-btn {
            flex-shrink: 0;
            background: var(--bg-header);
            color: var(--cyan);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.75em;
        }
        .upload-code-copy-btn:hover {
            border-color: var(--cyan);
            color: var(--green);
        }
        .upload-code-prompt-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .upload-code-prompt-box {
            width: 100%;
            max-width: 360px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.15);
        }
        .upload-code-prompt-box h4 {
            color: var(--green);
            font-size: 0.9em;
            margin-bottom: 12px;
        }
        .upload-code-prompt-box input {
            width: 100%;
            box-sizing: border-box;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 10px 12px;
            color: var(--fg);
            font-family: inherit;
            font-size: 1em;
            letter-spacing: 0.15em;
            text-align: center;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .upload-code-prompt-box input:focus {
            outline: none;
            border-color: var(--green);
        }
        .upload-code-prompt-note {
            color: var(--gray-dim);
            font-size: 0.72em;
            line-height: 1.5;
            margin-bottom: 14px;
        }
        .upload-code-prompt-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }
        .upload-code-prompt-actions button {
            background: var(--bg-header);
            color: var(--gray);
            border: 1px solid var(--border);
            padding: 6px 14px;
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.8em;
        }
        .upload-code-prompt-actions button.primary {
            color: var(--green);
            border-color: var(--green);
        }
        .upload-code-prompt-actions button:hover {
            color: var(--fg);
        }
        .guest-upload-history-section {
            margin-top: 8px;
            padding-top: 16px;
            border-top: 1px dashed var(--border);
        }
        .guest-upload-history-note {
            color: var(--gray-dim);
            font-size: 0.7em;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .guest-upload-history-list {
            max-height: 220px;
            overflow-y: auto;
        }
        .guest-upload-history-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 12px;
            border: 1px solid rgba(48, 54, 61, 0.5);
            border-radius: 4px;
            margin-bottom: 6px;
            background: var(--bg-card);
        }
        .guest-upload-history-item.success {
            border-left: 3px solid var(--green);
        }
        .guest-upload-history-item.failed {
            border-left: 3px solid var(--red);
        }
        .guest-upload-history-main {
            flex: 1;
            min-width: 0;
        }
        .guest-upload-history-name {
            color: var(--text);
            font-size: 0.82em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .guest-upload-history-meta {
            color: var(--gray-dim);
            font-size: 0.72em;
            margin-top: 4px;
            line-height: 1.45;
        }
        .guest-upload-history-status {
            flex-shrink: 0;
            font-size: 0.72em;
            font-weight: bold;
            padding-top: 2px;
        }
        .guest-upload-history-status.success {
            color: var(--green);
        }
        .guest-upload-history-status.failed {
            color: var(--red);
        }
        .guest-upload-history-clear {
            background: transparent;
            border: none;
            color: var(--gray-dim);
            font-family: inherit;
            font-size: 0.72em;
            cursor: pointer;
            padding: 0;
        }
        .guest-upload-history-clear:hover {
            color: var(--red);
        }

        /* ============ AI Chat Styles ============ */
        .ai-btn {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            padding: 4px 12px;
            font-size: 0.85em;
            font-weight: bold;
            /* 彩虹光谱渐变文字 */
            background: linear-gradient(135deg, #00ff41 0%, #00e5ff 20%, #d2a8ff 40%, #ffd700 60%, #00e5ff 80%, #00ff41 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* 彩虹流光 + 发光呼吸脉冲 */
            animation: aiRainbowFlow 4s linear infinite, aiGlowPulse 3s ease-in-out infinite;
            user-select: none;
            z-index: 10;
        }
        .ai-btn:hover {
            transform: translateY(-50%) scale(1.18);
        }
        /* 彩虹光谱流光 — 渐变色持续流动 */
        @keyframes aiRainbowFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        /* 发光呼吸脉冲 — 柔和的明灭光晕 */
        @keyframes aiGlowPulse {
            0%, 100% {
                filter: drop-shadow(0 0 2px rgba(0, 255, 65, 0.15));
            }
            50% {
                filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45))
                        drop-shadow(0 0 14px rgba(210, 168, 255, 0.2));
            }
        }
        /* AI 辐射波全屏效果画布 */
        #ai-ripple-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
        }

        /* AI Modal */
        .ai-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeIn 0.2s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .ai-modal-window {
            width: 100%;
            /* AI 对话窗口最大宽度，根据需要调整 --terminal-max-width 值为 900px */
            max-width: 800px;
            /* max-width: var(--terminal-max-width); */
            max-height: 85vh;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 255, 65, 0.12);
            animation: slideUp 0.3s ease;
        }
        @media (max-width: 768px) {
            .ai-modal {
                padding: 0;
                align-items: stretch;
                justify-content: stretch;
            }
            .ai-modal-window {
                width: 100%;
                max-width: none;
                height: 100%;
                max-height: none;
                border-radius: 0;
                border: none;
                box-shadow: none;
                animation: fadeIn 0.2s ease;
            }
            .ai-modal-header {
                padding-top: max(12px, env(safe-area-inset-top));
            }
            .ai-modal-footer {
                padding-bottom: max(12px, env(safe-area-inset-bottom));
            }
            .ai-message-content {
                max-width: 85%;
            }
        }
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .ai-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: var(--bg-header);
            border-bottom: 1px solid var(--border);
        }
        .ai-modal-title {
            color: var(--green);
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ai-modal-title .ai-icon {
            font-size: 1.2em;
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .ai-modal-close {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--gray);
            width: 28px;
            height: 28px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .ai-modal-close:hover {
            color: var(--red);
            border-color: var(--red);
        }
        .ai-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .ai-message {
            display: flex;
            gap: 10px;
            animation: messageIn 0.3s ease;
        }
        @keyframes messageIn {
            from { transform: translateY(10px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .ai-message.user {
            flex-direction: row-reverse;
        }
        .ai-message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            flex-shrink: 0;
        }
        .ai-message.user .ai-message-avatar {
            background: linear-gradient(135deg, var(--cyan), var(--green));
            color: var(--bg);
        }
        .ai-message.ai .ai-message-avatar {
            background: linear-gradient(135deg, var(--green), var(--cyan));
            color: var(--bg);
        }
        .ai-message-content {
            max-width: 75%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 0.85em;
            line-height: 1.6;
            word-break: break-word;
        }
        .ai-message.user .ai-message-content {
            background: rgba(0, 229, 255, 0.1);
            border: 1px solid rgba(0, 229, 255, 0.3);
            color: var(--cyan);
            border-radius: 12px 12px 4px 12px;
        }
        .ai-message.ai .ai-message-content {
            background: rgba(0, 255, 65, 0.05);
            border: 1px solid rgba(0, 255, 65, 0.2);
            color: var(--text);
            border-radius: 12px 12px 12px 4px;
        }
        .ai-message.ai .ai-message-content ul,
        .ai-message.ai .ai-message-content ol {
            margin: 8px 0;
            padding-left: 24px;
            max-width: 100%;
            overflow-x: auto;
            word-break: break-word;
        }
        .ai-message.ai .ai-message-content li {
            word-break: break-word;
        }
        .ai-message.ai .ai-message-content a { color: var(--green); text-decoration: none; }
        .ai-message.ai .ai-message-content a:hover { text-decoration: underline; color: var(--cyan); }
        .ai-message.ai .ai-message-content code {
            background: var(--bg-header);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--orange);
            font-size: 0.9em;
        }
        .ai-message.ai .ai-message-content .code-block {
            position: relative;
        }
        .ai-message.ai .ai-message-content .code-block:hover .copy-btn {
            opacity: 1;
        }
        .ai-message.ai .ai-message-content pre {
            background: #0d1117;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 12px;
            margin: 8px 0;
            overflow-x: auto;
        }
        .ai-message.ai .ai-message-content pre code {
            background: none;
            padding: 0;
            color: var(--text);
        }
        .ai-message.ai .ai-message-content .copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--gray);
            font-family: inherit;
            font-size: 12px;
            padding: 4px 10px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, color 0.2s;
            z-index: 1;
        }
        .ai-message.ai .ai-message-content .copy-btn:hover {
            color: var(--green);
        }
        .ai-typing {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
            font-size: 0.8em;
            padding: 8px 0;
        }
        .ai-typing-dots {
            display: flex;
            gap: 4px;
        }
        .ai-typing-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--green);
            animation: typingDot 1.4s infinite;
        }
        .ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typingDot {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-4px); opacity: 1; }
        }
        .ai-modal-footer {
            padding: 12px 20px;
            background: var(--bg-header);
            border-top: 1px solid var(--border);
        }
        .ai-input-wrapper {
            display: flex;
            gap: 10px;
        }
        .ai-input {
            flex: 1;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 14px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.9em;
            resize: none;
            min-height: 44px;
            max-height: 120px;
            transition: border-color 0.2s;
        }
        .ai-input:focus {
            outline: none;
            border-color: var(--green);
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.15);
        }
        .ai-input::placeholder {
            color: var(--gray-dim);
        }
        .ai-send-btn {
            background: linear-gradient(135deg, var(--green), var(--cyan));
            border: none;
            color: var(--bg);
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9em;
            font-weight: bold;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .ai-send-btn:hover:not(:disabled) {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
        }
        .ai-send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .ai-clear-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--gray);
            padding: 10px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.85em;
            transition: all 0.2s;
        }
        .ai-clear-btn:hover {
            border-color: var(--red);
            color: var(--red);
        }
        .ai-error {
            color: var(--red);
            font-size: 0.85em;
            text-align: center;
            padding: 10px;
            background: rgba(255, 0, 0, 0.05);
            border: 1px solid rgba(255, 0, 0, 0.2);
            border-radius: 8px;
        }
        .ai-welcome {
            text-align: center;
            padding: 30px 20px;
            color: var(--gray);
        }
        .ai-welcome-icon {
            font-size: 3em;
            margin-bottom: 12px;
        }
        .ai-welcome-title {
            color: var(--green);
            font-size: 1.1em;
            margin-bottom: 8px;
        }
        .ai-welcome-desc {
            font-size: 0.85em;
            line-height: 1.6;
        }

        /* ============ 最小化收纳小球样式 ============ */
        #minimizeBall {
            position: fixed;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 9990;
            pointer-events: auto;
            transition: transform 0.2s ease;
        }
        #minimizeBall:hover {
            transform: scale(1.15);
        }
        
        /* ============ 黑洞虫洞小球样式 ============ */
        #minimizeBall {
            width: 55px;
            height: 55px;
        }
        #minimizeBall.style-1 .blackhole-core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(circle, #000000 30%, #1a0033 60%, #4a0080 100%);
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.8), 0 0 30px rgba(255, 0, 128, 0.5), inset 0 0 10px rgba(0, 0, 0, 1);
            animation: blackholeSpin 2s linear infinite;
        }
        @keyframes blackholeSpin {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        #minimizeBall.style-1 .blackhole-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px dashed;
            animation: blackholeRingRotate 3s linear infinite;
        }
        #minimizeBall.style-1 .blackhole-ring-1 {
            top: -8px; left: -8px; right: -8px; bottom: -8px;
            border-color: rgba(255, 0, 128, 0.5);
            animation-duration: 4s;
        }
        #minimizeBall.style-1 .blackhole-ring-2 {
            top: -15px; left: -15px; right: -15px; bottom: -15px;
            border-color: rgba(138, 43, 226, 0.4);
            animation-duration: 6s;
            animation-direction: reverse;
            border-style: dotted;
        }
        #minimizeBall.style-1 .blackhole-ring-3 {
            top: -22px; left: -22px; right: -22px; bottom: -22px;
            border-color: rgba(75, 0, 130, 0.3);
            animation-duration: 8s;
            border-width: 2px;
        }
        @keyframes blackholeRingRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #minimizeBall.style-1 .blackhole-swirl {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
        }
        #minimizeBall.style-1 .blackhole-swirl::before,
        #minimizeBall.style-1 .blackhole-swirl::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid transparent;
            border-top-color: rgba(255, 0, 255, 0.6);
            border-right-color: rgba(0, 255, 255, 0.4);
            animation: swirlRotate 1.5s linear infinite;
        }
        #minimizeBall.style-1 .blackhole-swirl::after {
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
            animation-duration: 1s;
            animation-direction: reverse;
            border-top-color: rgba(255, 100, 200, 0.5);
            border-right-color: rgba(100, 200, 255, 0.3);
        }
        @keyframes swirlRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        #minimizeBall.style-1:hover .blackhole-core {
            box-shadow: 0 0 25px rgba(138, 43, 226, 1), 0 0 50px rgba(255, 0, 128, 0.7), inset 0 0 15px rgba(0, 0, 0, 1);
        }
        
        /* 新文章日期彩色流动效果 */
        .recent-post-date {
            background: linear-gradient(90deg, var(--green), var(--cyan), var(--purple), var(--yellow), var(--green));
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: rainbowFlow 3s linear infinite;
            font-weight: bold;
        }
        @keyframes rainbowFlow {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* 小球悬停提示 */
        #minimizeBall::after {
            content: '点击恢复';
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: var(--gray);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        #minimizeBall:hover::after {
            opacity: 1;
        }

        /* ============ 作者信息弹窗样式 ============ */
        
        /* TSE 可点击链接样式 */
        .tse-link {
            color: var(--cyan);
            cursor: pointer;
            transition: all 0.2s ease;
            text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
        }
        .tse-link:hover {
            color: var(--green);
            text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
        }
        
        /* 作者信息弹窗关闭按钮 */
        .author-close-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
            cursor: pointer;
            font-size: 0.8em;
            padding: 4px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        .author-close-btn:hover {
            color: var(--red);
            border-color: var(--red);
            background: rgba(255, 0, 0, 0.05);
        }
        
        /* 作者信息弹窗终端 */
        .author-terminal {
            margin: 60px auto;
            max-width: 400px;
            animation: terminalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid var(--green);
            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1);
            background: var(--bg);
        }
        
        @keyframes terminalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        .author-body {
            padding: 20px 24px;
            min-height: 300px;
            background: var(--bg);
        }
        
        /* ASCII 艺术头部 */
        .author-header {
            margin-bottom: 24px;
            text-align: center;
        }
        
        .author-ascii {
            display: inline-block;
            color: var(--green);
            font-size: 10px;
            line-height: 1.25;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
            white-space: pre;
            animation: asciiGlow 2s ease-in-out infinite;
        }
        
        @keyframes asciiGlow {
            0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 65, 0.3); }
            50% { text-shadow: 0 0 20px rgba(0, 255, 65, 0.6), 0 0 30px rgba(0, 229, 255, 0.3); }
        }
        
        /* 内容区域 */
        .author-content {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            padding-right: 60px;
        }
        
        /* 终端提示符 */
        .author-prompt {
            color: var(--green);
            font-size: 13px;
            margin-bottom: 8px;
        }
        
        /* 信息块 */
        .author-info {
            padding-left: 16px;
            border-left: 2px solid var(--border);
            margin-bottom: 8px;
        }
        
        .info-line {
            display: flex;
            margin: 6px 0;
            font-size: 13px;
        }
        
        .info-key {
            color: var(--purple);
            min-width: 80px;
        }
        
        .info-sep {
            color: var(--gray);
            margin: 0 8px;
        }
        
        .info-value {
            color: var(--text);
        }
        
        .info-value.highlight {
            color: var(--yellow);
            font-weight: bold;
            text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
        }
        
        .info-value.link {
            color: var(--cyan);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .info-value.link:hover {
            color: var(--green);
            text-decoration: underline;
        }
        
        .info-value.online {
            color: var(--green);
        }
        
        /* 底部闪烁光标 */
        .author-footer {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px dashed var(--border);
        }
        
        .cursor-blink {
            color: var(--green);
            animation: cursorBlink 1s step-end infinite;
        }
        
        @keyframes cursorBlink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }