MediaWiki:Common.css

        /* 使用第一段CSS中的变量和模式 */
        :root {
            --font-family-citizen-base: "Inter";
            --font-family-citizen-monospace: "JetBrains Mono";
            --color-primary__h: 200;
            --color-primary__s: 55%;
            --color-primary__l: 48%;
            --color-surface-0__s: 3%;
            --color-surface-0__l: 98%;
            --color-surface-1__s: 3%;
            --color-surface-1__l: 98%;
            --color-surface-2__s: 10%;
            --color-surface-2__l: 95%;
            --color-surface-3__s: 10%;
            --color-surface-3__l: 85%;
            --color-surface-4__s: 10%;
            --color-surface-4__l: 74%;
            --background-color-overlay: hsla(var(--color-primary__h), 3%, 98%, 0.95);
            --background-color-overlay--lighter: hsla(var(--color-primary__h), 3%, 98%, 0.6);
            
            /* 首页特定变量 */
            --home-header-height: 46vh;
            --home-header-margin-bottom: -42vh;
            --home-card-border-radius: 10px;
            --home-card-padding: 1.25rem;
            --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 20%, 10%, 0.08);
            --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 20%, 10%, 0.12);
            
            /* 评论区域变量 */
            --comment-bg-color: hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.95);
            --comment-border-radius: var(--home-card-border-radius);
            --comment-padding: var(--home-card-padding);
            --comment-avatar-size: 3.75rem;
            
            /* 按钮变量 */
            --button-primary-bg: hsl(var(--color-primary__h), var(--color-primary__s), var(--color-primary__l));
            --button-primary-hover: hsl(var(--color-primary__h), var(--color-primary__s), calc(var(--color-primary__l) - 8%));
            --button-text-color: white;
        }

        /* 深色模式变量 */
        :root.skin-theme-clientpref-night {
            --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 3%, 5%, 0.2);
            --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 3%, 5%, 0.3);
            --comment-bg-color: hsla(var(--color-primary__h), 15%, 15%, 0.95);
        }

        @media screen and (prefers-color-scheme: dark) {
            :root.skin-theme-clientpref-os {
                --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 3%, 5%, 0.2);
                --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 3%, 5%, 0.3);
                --comment-bg-color: hsla(var(--color-primary__h), 15%, 15%, 0.95);
            }
        }

        /* 首页核心样式 */
        .page-首页 .mw-body-header,
        .page-首页 .previewnote,
        .page-首页 .page-info { 
            display: none; 
        }

        .page-首页 .header-image {
            background-image: 
                linear-gradient(to top, 
                    hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.95), 
                    transparent 70%), 
                url(https://wiki.hokubu.cn/w/images/3/3d/Xujiang2.jpeg);
            background-size: cover;
            background-position: top center;
            height: var(--home-header-height);
            margin-bottom: var(--home-header-margin-bottom);
            border-bottom-left-radius: var(--home-card-border-radius);
            border-bottom-right-radius: var(--home-card-border-radius);
            position: relative;
            overflow: hidden;
            box-shadow: var(--home-card-box-shadow);
        }

        .page-首页 .header-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent, 
                hsla(var(--color-primary__h), 70%, 60%, 0.7), 
                transparent);
        }

        @media (max-width: 720px) {
            :root {
                --home-header-height: 36vh;
                --home-header-margin-bottom: -32vh;
            }
        }

        /* 评论区样式 */
        .comments-body {
            margin: 2rem auto;
            padding: var(--comment-padding);
            width: calc(100% - 2 * var(--comment-padding)) !important;
            max-width: 1200px;
            background: var(--comment-bg-color);
            border-radius: var(--comment-border-radius) !important;
            box-shadow: var(--home-card-box-shadow) !important;
            box-sizing: border-box !important;
            backdrop-filter: blur(8px);
            border: 1px solid hsla(var(--color-primary__h), 10%, 90%, 0.2);
        }

        .c-item.full {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: var(--comment-bg-color) !important;
            border-radius: calc(var(--comment-border-radius) - 0.25rem) !important;
            box-shadow: var(--home-card-box-shadow) !important;
            border: none !important;
            box-sizing: border-box !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .c-item.full:hover {
            transform: translateY(-2px);
            box-shadow: var(--home-card-box-shadow-hover) !important;
        }

        .c-comment.f-message { 
            margin-bottom: 1rem !important; 
            color: hsl(var(--color-primary__h), 20%, 30%);
            font-weight: 500;
        }

        :root.skin-theme-clientpref-night .c-comment.f-message,
        :root.skin-theme-clientpref-os .c-comment.f-message {
            color: hsl(var(--color-primary__h), 10%, 80%);
        }

        /* 输入框与排序 */
        .comments-body textarea#comment,
        .c-order-select select {
            padding: 0.75rem 1rem !important;
            border-radius: calc(var(--comment-border-radius) - 0.25rem) !important;
            border: 1px solid hsla(var(--color-primary__h), 15%, 85%, 0.6) !important;
            background: hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.7) !important;
            color: hsl(var(--color-primary__h), 20%, 25%) !important;
            box-sizing: border-box !important;
            font-family: var(--font-family-citizen-base);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .comments-body textarea#comment:focus,
        .c-order-select select:focus {
            outline: none;
            border-color: hsl(var(--color-primary__h), 60%, 60%) !important;
            box-shadow: 0 0 0 3px hsla(var(--color-primary__h), 60%, 60%, 0.2) !important;
        }

        .comments-body textarea#comment {
            width: 100% !important;
            min-height: 6rem;
            resize: vertical;
        }

        /* 排序区域 */
        .c-order-select {
            display: flex !important;
            align-items: center !important;
            gap: 0.75rem !important;
            margin-bottom: 1.25rem;
        }

        .c-order-select::before {
            content: "排序方式：" !important;
            color: hsl(var(--color-primary__h), 20%, 35%) !important;
            font-weight: 600 !important;
            white-space: nowrap !important;
            font-size: 0.95rem;
        }

        /* 按钮样式 */
        .c-form-button .site-button,
        .c-spy a,
        .c-actions a[rel="nofollow"]:not(.comments-reply-to),
        .c-actions a.comments-reply-to {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            padding: 0.6rem 1.25rem !important;
            background: var(--button-primary-bg) !important;
            color: var(--button-text-color) !important;
            border-radius: calc(var(--comment-border-radius) - 0.5rem) !important;
            box-shadow: var(--home-card-box-shadow) !important;
            text-decoration: none !important;
            font-weight: 600 !important;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9rem;
            gap: 0.4rem;
        }

        .c-form-button .site-button { 
            padding: 0.7rem 1.5rem !important; 
            font-size: 0.95rem;
        }

        .c-actions a[rel="nofollow"]:not(.comments-reply-to) { 
            margin-right: 0.75rem !important; 
        }

        /* 按钮hover效果 */
        .c-form-button .site-button:hover,
        .c-spy a:hover,
        .c-actions a[rel="nofollow"]:not(.comments-reply-to):hover,
        .c-actions a.comments-reply-to:hover {
            background: var(--button-primary-hover) !important;
            transform: translateY(-1px);
            box-shadow: var(--home-card-box-shadow-hover) !important;
        }

        /* 评论头像 */
        .c-avatar img {
            width: var(--comment-avatar-size) !important;
            height: var(--comment-avatar-size) !important;
            border-radius: calc(var(--comment-border-radius) - 0.5rem) !important;
            box-shadow: var(--home-card-box-shadow) !important;
            border: 2px solid hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.8) !important;
            margin: 0.5rem 0 0 0.5rem !important;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .c-avatar img:hover {
            transform: scale(1.05);
            box-shadow: var(--home-card-box-shadow-hover) !important;
        }

        /* 暗色模式调整 */
        :root.skin-theme-clientpref-night .comments-body,
        :root.skin-theme-clientpref-night .c-item.full,
        :root.skin-theme-clientpref-os .comments-body,
        :root.skin-theme-clientpref-os .c-item.full {
            background: hsla(var(--color-primary__h), 15%, 15%, 0.95) !important;
            border: 1px solid hsla(var(--color-primary__h), 15%, 25%, 0.3);
        }

        :root.skin-theme-clientpref-night .comments-body textarea#comment,
        :root.skin-theme-clientpref-night .c-order-select select,
        :root.skin-theme-clientpref-os .comments-body textarea#comment,
        :root.skin-theme-clientpref-os .c-order-select select {
            background: hsla(var(--color-primary__h), 15%, 20%, 0.8) !important;
            color: hsl(var(--color-primary__h), 10%, 85%) !important;
            border-color: hsla(var(--color-primary__h), 15%, 30%, 0.6) !important;
        }

        :root.skin-theme-clientpref-night .c-avatar img,
        :root.skin-theme-clientpref-os .c-avatar img {
            border-color: hsla(var(--color-primary__h), 15%, 20%, 0.8) !important;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            :root {
                --home-card-padding: 1rem;
                --comment-avatar-size: 3.25rem;
            }
            
            .c-order-select {
                flex-direction: column;
                align-items: flex-start !important;
            }
            
            .comments-body {
                padding: 1rem !important;
                width: calc(100% - 2rem) !important;
            }
        }