/**
 * 全站共享主题样式 —— 配色/字体参考 ctfplus.cn：
 *   浅色（默认）：近白背景 #f7f8fa + 纯白卡片 + 群青蓝主色 #4c59f5 + 荧光绿点缀 #bfff00
 *   深色（html.dark）：纯黑背景 + #18181b 石墨卡片 + 荧光柠檬绿主色 #bef264（绿底黑字按钮）
 * 主题类由 site-nav.js 控制（localStorage: siteTheme），页面内 <style> 只是兜底基础样式。
 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

/* ===================== 全局字体（参考 CTF+：系统无衬线 + Orbitron 标题） ===================== */

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.gradient-text,
#site-nav .gradient-text {
    font-family: 'Orbitron', ui-sans-serif, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 0.01em;
}

/* ===================== 通用动效（两种主题共用） ===================== */

@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel-card, .question-card, .member-card, .list-card,
.pinned-card, .timeline-card, .content-card, .qq-card,
.hero-card, .section-card {
    animation: rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.grid > *:nth-child(1)  { animation-delay: 0.02s; }
.grid > *:nth-child(2)  { animation-delay: 0.08s; }
.grid > *:nth-child(3)  { animation-delay: 0.14s; }
.grid > *:nth-child(4)  { animation-delay: 0.20s; }
.grid > *:nth-child(5)  { animation-delay: 0.26s; }
.grid > *:nth-child(6)  { animation-delay: 0.32s; }
.grid > *:nth-child(7)  { animation-delay: 0.38s; }
.grid > *:nth-child(8)  { animation-delay: 0.44s; }
.grid > *:nth-child(9)  { animation-delay: 0.50s; }

body, .footer,
.panel-card, .question-card, .member-card, .list-card,
.pinned-card, .timeline-card, .content-card, .qq-card, .hero-card, .section-card,
.answer-item, .asker-item, .empty-state,
.input-field, .textarea-field, .select-field,
.primary-btn, .secondary-btn, .danger-btn, .action-btn,
.hint-badge, .anon-badge, .admin-badge, .news-tag, .tool-tag,
.meta-badge, .pin-badge, .category-badge, .attachment-link,
.filter-btn, .tab-btn {
    transition: background-color 0.35s ease, color 0.35s ease,
                border-color 0.35s ease, box-shadow 0.35s ease,
                transform 0.25s ease;
}

.primary-btn:hover, .secondary-btn:hover, .danger-btn:hover, .action-btn:hover { transform: translateY(-1px); }
.primary-btn:active, .secondary-btn:active, .danger-btn:active, .action-btn:active { transform: translateY(0); }

/* 主题切换按钮 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(30, 41, 59, 0.5);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: rgba(96, 165, 250, 0.6);
    color: #ffffff;
    transform: rotate(24deg);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.45); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); }
::selection { background: rgba(96, 165, 250, 0.35); }

/* =====================================================================
 * 个人展示页 / 人物信息墙 —— 结构与排版（两种主题共用，配色见下方 light / dark 段落）
 * 这里只写尺寸、间距、圆角、布局与过渡；所有颜色一律留给主题段落定义，
 * 避免出现"浅色能看、深色失配"的硬编码色值。
 * ===================================================================== */

/* 与现有卡片一致的入场动画与过渡节奏 */
.person-card, .wall-toolbar, .profile-header, .profile-body,
.profile-empty, .profile-editor {
    animation: rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.person-card, .person-tag, .person-avatar, .person-avatar-fallback,
.wall-toolbar, .profile-header, .profile-body, .profile-empty,
.profile-link, .profile-editor, .editor-preview, .avatar-upload-row,
.back-to-wall, .markdown-body a {
    transition: background-color 0.35s ease, color 0.35s ease,
                border-color 0.35s ease, box-shadow 0.35s ease,
                transform 0.25s ease;
}

/* ---- 人物墙 ---- */

.people-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 1rem;
}

.person-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.person-avatar,
.person-avatar-fallback {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    flex-shrink: 0;
}
.person-avatar { object-fit: cover; display: block; }
.person-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    /* 首字母兜底色块的渐变由 SiteUtils.avatarFallback() 以内联样式给出（同名恒定），
       主题段落里的 background 只是兜底，内联样式优先级更高 */
}

.person-name {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}
.person-role {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}
.person-bio {
    font-size: 0.875rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.person-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}
.person-tag {
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0.1rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    white-space: nowrap;
}

.wall-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.875rem;
}

/* ---- 详情视图 ---- */

.back-to-wall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
}

.profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem;
    border: 1px solid transparent;
    border-radius: 16px;
}

.profile-avatar,
.profile-avatar-fallback {
    width: 112px;
    height: 112px;
    border-radius: 18px;
    flex-shrink: 0;
}
.profile-avatar { object-fit: cover; display: block; }
.profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
.profile-role {
    margin-top: 0.4rem;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.5;
}
.profile-meta {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

.profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.95rem;
}
.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-size: 0.82rem;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-body {
    margin-top: 1.25rem;
    padding: 1.75rem;
    border: 1px solid transparent;
    border-radius: 16px;
}

.profile-empty {
    margin-top: 1.25rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed transparent;
    border-radius: 14px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ---- 编辑态 ---- */

.profile-editor {
    margin-top: 1.25rem;
    padding: 1.5rem;
    border: 1px solid transparent;
    border-radius: 16px;
}

.editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    font-size: 0.82rem;
}

.editor-preview {
    padding: 1.25rem;
    border: 1px dashed transparent;
    border-radius: 12px;
    min-height: 120px;
    max-height: 460px;
    overflow: auto;
}

.link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.link-row .input-field { flex: 1 1 150px; min-width: 0; }

/* 头像上传行：预览 + 上传/移除按钮。配色见下方 light / dark 段落，两侧必须同时存在 */
.avatar-upload-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px dashed transparent;
    border-radius: 12px;
    font-size: 0.8rem;
}

/* 预览直接复用详情视图的头像类，只在编辑态里收窄尺寸；
   配色（背景/描边/兜底渐变）仍走 .profile-avatar 自己的主题定义，这里不碰颜色。
   选择器带了父级，优先级高于窄屏 @media 里的 88px，编辑态尺寸不会被改回去 */
.avatar-upload-row .profile-avatar,
.avatar-upload-row .profile-avatar-fallback {
    width: 72px;
    height: 72px;
    border-radius: 14px;
}
.avatar-upload-row .profile-avatar-fallback { font-size: 1.7rem; }

.avatar-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.avatar-upload-hint { line-height: 1.6; }

/* file input 视觉隐藏但保留在无障碍树里：用 display:none 会让键盘焦点也一起丢掉 */
.avatar-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

/* label 没有 disabled 属性，上传中的禁用态只能靠 aria-disabled 驱动 */
.avatar-upload-row .secondary-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Markdown 正文（结构） ---- */

.markdown-body {
    font-size: 0.95rem;
    line-height: 1.78;
    overflow-wrap: break-word;
    word-break: break-word;
}
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child  { margin-bottom: 0; }

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.8em 0 0.7em;
    font-weight: 700;
    line-height: 1.32;
}
.markdown-body h1 { font-size: 1.6rem; padding-bottom: 0.35em; }
.markdown-body h2 { font-size: 1.35rem; padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body h4 { font-size: 1.02rem; }
.markdown-body h5 { font-size: 0.94rem; }
.markdown-body h6 { font-size: 0.88rem; }

.markdown-body p { margin: 0.85em 0; }
.markdown-body a { text-decoration: underline; text-underline-offset: 2px; }

.markdown-body ul, .markdown-body ol { margin: 0.85em 0; padding-left: 1.6em; }
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body ul ul, .markdown-body ol ol,
.markdown-body ul ol, .markdown-body ol ul { margin: 0.3em 0; }
.markdown-body li { margin: 0.3em 0; }

.markdown-body blockquote {
    margin: 1.1em 0;
    padding: 0.7em 1.1em;
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
}
.markdown-body blockquote p { margin: 0.35em 0; }

.markdown-body code, .markdown-body pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", "Courier New", monospace;
}
.markdown-body code {
    padding: 0.12em 0.4em;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.86em;
}
.markdown-body pre {
    margin: 1.1em 0;
    padding: 1em 1.1em;
    border: 1px solid transparent;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.65;
}
.markdown-body pre code {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    white-space: pre;
}

.markdown-body table {
    display: block;          /* 配合 overflow-x 让宽表格自己横向滚动，不撑破卡片 */
    max-width: 100%;
    overflow-x: auto;
    margin: 1.2em 0;
    border-collapse: collapse;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.88rem;
}
.markdown-body th, .markdown-body td {
    padding: 0.5em 0.85em;
    border: 1px solid transparent;
    text-align: left;
}
.markdown-body th { font-weight: 600; white-space: nowrap; }

.markdown-body img {
    max-width: 100%;
    height: auto;
    margin: 0.6em 0;
    border: 1px solid transparent;
    border-radius: 10px;
}
.markdown-body hr {
    height: 1px;
    margin: 1.8em 0;
    border: 0;
}
.markdown-body strong { font-weight: 700; }
.markdown-body em { font-style: italic; }
.markdown-body del { text-decoration: line-through; }

/* ===================== 浅色主题（CTF+ 风格） ===================== */

html.light body {
    background: #f7f8fa !important;
    color: #17181d;
}

/* ---- 文字色映射（Tailwind 工具类 → CTF+ 灰阶） ---- */
html.light .text-white       { color: #17181d !important; }
html.light .hover\:text-white:hover { color: #3745e8 !important; }
html.light .text-neutral-200 { color: #26272e !important; }
html.light .text-neutral-300 { color: #374151 !important; }
html.light .text-neutral-400 { color: #4b5563 !important; }
html.light .text-neutral-500 { color: #6b7280 !important; }
html.light .text-neutral-600 { color: #9ca3af !important; }
html.light .text-blue-200,
html.light .text-blue-300    { color: #3745e8 !important; }
html.light .text-blue-400    { color: #3745e8 !important; }
html.light .text-emerald-300 { color: #047857 !important; }
html.light .text-purple-300  { color: #6d28d9 !important; }
html.light .text-amber-300   { color: #b45309 !important; }
html.light .text-red-300     { color: #b91c1c !important; }

/* 群青主色替换所有蓝色装饰条 / 下划线 */
html.light .bg-blue-400 { background-color: #4c59f5 !important; }

/* 标题：近黑（CTF+ 标题是纯黑粗体） */
html.light .gradient-text {
    background: linear-gradient(to bottom right, #141414, #4b5563);
    -webkit-background-clip: text;
    background-clip: text;
}

/* 白色胶囊导航栏（CTF+ 标志性元素） */
html.light #site-nav > div {
    background: #ffffff;
    border: 1px solid #ebecef;
    border-radius: 9999px;
    padding: 0.55rem 1.5rem;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.06);
}

html.light .footer {
    background: #ffffff;
    border-top: 1px solid #ebecef;
    backdrop-filter: none;
}

/* 背景网格（覆盖 JS 内联样式） */
html.light .box {
    background: rgba(76, 89, 245, 0.025) !important;
    border-color: rgba(20, 20, 20, 0.06) !important;
}
html.light .mask-overlay {
    background: radial-gradient(circle at center, transparent 30%, #f7f8fa 90%);
}

/* ---- 卡片（全部白底细边） ---- */
html.light .panel-card, html.light .question-card, html.light .member-card,
html.light .list-card, html.light .pinned-card, html.light .timeline-card,
html.light .content-card, html.light .qq-card,
html.light .hero-card, html.light .section-card {
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}
html.light .member-card:hover, html.light .pinned-card:hover,
html.light .question-card:hover, html.light .content-card:hover,
html.light .timeline-card:hover {
    background: #ffffff;
    border-color: rgba(76, 89, 245, 0.5);
    box-shadow: 0 10px 28px rgba(20, 20, 20, 0.09);
}

html.light .answer-item { background: #f1fdf6; border-color: #bfe8cf; }
html.light .asker-item  { background: #f6f7ff; border-color: #dcdff8; }
html.light .empty-state { background: #fbfbfc; border-color: #d9dbe0; color: #6b7280; }

/* ---- 表单 ---- */
html.light .input-field, html.light .textarea-field, html.light .select-field {
    background: #ffffff;
    border-color: #d7d9de;
    color: #17181d;
}
html.light .input-field::placeholder, html.light .textarea-field::placeholder { color: #9ca3af; }
html.light .input-field:focus, html.light .textarea-field:focus, html.light .select-field:focus {
    border-color: #4c59f5;
    box-shadow: 0 0 0 3px rgba(76, 89, 245, 0.12);
}
html.light .select-field option { background: #ffffff; color: #17181d; }

/* admin 里零散的 slate 工具类 */
html.light .bg-slate-800 { background-color: #ffffff !important; }
html.light .border-slate-500 { border-color: #d1d5db !important; }
html.light .border-slate-700\/50 { border-color: #e8e9ed !important; }

/* ---- 按钮（主按钮 = CTF+ 群青实心） ---- */
html.light .primary-btn {
    color: #ffffff !important;
    background: #4c59f5;
    border-color: #4c59f5;
}
html.light .primary-btn:hover { background: #3745e8; border-color: #3745e8; }
html.light .secondary-btn {
    color: #374151;
    background: #ffffff;
    border-color: #d7d9de;
}
html.light .secondary-btn:hover { color: #17181d; border-color: rgba(76, 89, 245, 0.55); }
html.light .danger-btn {
    color: #b91c1c;
    background: #fdf3f3;
    border-color: #f1caca;
}
html.light .danger-btn:hover { background: #fbe5e5; }

/* 资料页操作按钮 */
html.light .action-btn.primary {
    color: #ffffff;
    background: #4c59f5;
    border: 1px solid #4c59f5;
}
html.light .action-btn.primary:hover { color: #ffffff; background: #3745e8; }
html.light .action-btn.ghost {
    color: #374151;
    background: #ffffff;
    border: 1px solid #d7d9de;
}
html.light .action-btn.ghost:hover { color: #17181d; border-color: rgba(76, 89, 245, 0.55); }

/* ---- 徽章与标签 ---- */
html.light .hint-badge {
    color: #3f6212;
    background: #f3ffd1;
    border-color: #cdee7a;
}
html.light .anon-badge {
    color: #6d28d9;
    background: rgba(109, 40, 217, 0.06);
    border-color: rgba(109, 40, 217, 0.25);
}
html.light .admin-badge {
    color: #047857;
    background: rgba(4, 120, 87, 0.06);
    border-color: rgba(4, 120, 87, 0.28);
}
html.light .news-tag, html.light .tool-tag, html.light .attachment-link {
    color: #3745e8 !important;
    background: rgba(76, 89, 245, 0.06);
    border-color: rgba(76, 89, 245, 0.24);
}
html.light .meta-badge { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
html.light .pin-badge  { color: #b45309 !important; background: rgba(180, 83, 9, 0.08); border-color: rgba(180, 83, 9, 0.3); }

/* 新闻分类徽章 */
html.light .category-badge.competition { color: #c2410c; background: rgba(234, 88, 12, 0.08); border-color: rgba(234, 88, 12, 0.3); }
html.light .category-badge.project     { color: #047857; background: rgba(4, 120, 87, 0.07); border-color: rgba(4, 120, 87, 0.28); }
html.light .category-badge.activity    { color: #6d28d9; background: rgba(109, 40, 217, 0.07); border-color: rgba(109, 40, 217, 0.28); }

/* ---- 新闻页 ---- */
html.light .filter-btn { color: #374151; border-color: #d7d9de; background: #ffffff; }
html.light .filter-btn:hover { color: #17181d; border-color: rgba(76, 89, 245, 0.55); }
html.light .filter-btn.active { color: #ffffff !important; background: #4c59f5; border-color: #4c59f5; }
html.light .timeline-line { background: #e0e1e6; }
html.light .timeline-dot { background: #f7f8fa; border-color: #4c59f5; }
html.light .loading-spinner { color: #9ca3af; }

/* ---- 管理后台标签页 ---- */
html.light .tab-btn { color: #374151; border-color: #d7d9de; background: #ffffff; }
html.light .tab-btn:hover { color: #17181d; }
html.light .tab-btn.active { color: #ffffff !important; background: #4c59f5; border-color: #4c59f5; }

/* ---- 主题切换按钮 ---- */
html.light .theme-toggle {
    border-color: #d7d9de;
    background: #ffffff;
    color: #6b7280;
}
html.light .theme-toggle:hover { border-color: #4c59f5; color: #17181d; }

/* ---- 滚动条 / 选区（荧光绿选区是 CTF+ 的点睛色） ---- */
html.light ::-webkit-scrollbar-thumb { background: rgba(20, 20, 20, 0.18); }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(20, 20, 20, 0.32); }
html.light ::selection { background: #bfff00; color: #141414; }

/* 首页申请按钮 → 群青实心 */
html.light a[href="join.html"].inline-flex {
    color: #ffffff !important;
    background: #4c59f5 !important;
    border-color: #4c59f5 !important;
}
html.light a[href="join.html"].inline-flex:hover { background: #3745e8 !important; }

/* ---------------------------------------------------------------------
 * 个人展示页 / 人物信息墙（浅色）：白底 #ffffff + 边框 #e8e9ed + 群青 #4c59f5
 * 与下方 html.dark 段落一一对应，两侧必须同时存在
 * ------------------------------------------------------------------- */

/* ---- 人物墙（浅色） ---- */
html.light .people-wall { color: #17181d; }
html.light .person-card {
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}
html.light .person-card:hover {
    /* 与深色侧 hover 变亮对应：浅色侧给一层极淡的蓝调，呼应群青主色 */
    background: #fdfdff;
    border-color: rgba(76, 89, 245, 0.5);
    box-shadow: 0 10px 28px rgba(20, 20, 20, 0.09);
    transform: translateY(-2px);
}
html.light .person-card:focus-visible {
    outline: 2px solid #4c59f5;
    outline-offset: 2px;
}
html.light .person-avatar {
    background: #f3f4f6;
    border: 1px solid #e8e9ed;
}
/* 首字母兜底：白字 + 深色渐变（内联渐变亮度被 SiteUtils 压到 L ≤ 0.15，对比度 ≥ 5.2:1） */
html.light .person-avatar-fallback {
    color: #ffffff;
    background: linear-gradient(135deg, #3b3f6b 0%, #1f2430 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
html.light .person-name { color: #17181d; }
html.light .person-role { color: #3745e8; }
html.light .person-bio  { color: #4b5563; }
html.light .person-tags { color: #4b5563; }
html.light .person-tag {
    color: #3745e8;
    background: rgba(76, 89, 245, 0.06);
    border-color: rgba(76, 89, 245, 0.24);
}
html.light .wall-toolbar {
    color: #4b5563;
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}

/* ---- 详情视图（浅色） ---- */
html.light .back-to-wall {
    color: #3745e8;
    background: transparent;
    border-color: rgba(76, 89, 245, 0.22);
}
html.light .back-to-wall:hover {
    color: #2733c9;
    background: rgba(76, 89, 245, 0.08);
    border-color: rgba(76, 89, 245, 0.45);
}
html.light .profile-header {
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}
html.light .profile-avatar {
    background: #f3f4f6;
    border: 1px solid #e8e9ed;
}
html.light .profile-avatar-fallback {
    color: #ffffff;
    background: linear-gradient(135deg, #3b3f6b 0%, #1f2430 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
html.light .profile-name { color: #17181d; }
html.light .profile-role { color: #3745e8; }
html.light .profile-meta { color: #6b7280; }
html.light .profile-links { color: #4b5563; }
html.light .profile-link {
    color: #374151;
    background: #ffffff;
    border-color: #d7d9de;
}
html.light .profile-link:hover {
    color: #17181d;
    background: #f6f7ff;
    border-color: rgba(76, 89, 245, 0.55);
}
html.light .profile-body {
    color: #17181d;
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}
html.light .profile-empty {
    color: #6b7280;
    background: #fbfbfc;
    border-color: #d9dbe0;
}

/* ---- 编辑态（浅色） ---- */
html.light .profile-editor {
    color: #17181d;
    background: #ffffff;
    border-color: #e8e9ed;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.04);
}
html.light .editor-grid { color: #4b5563; }
html.light .editor-preview {
    color: #17181d;
    background: #fbfbfc;
    border-color: #d9dbe0;
}
html.light .link-row { color: #6b7280; }
html.light .avatar-upload-row {
    color: #4b5563;
    background: #fbfbfc;
    border-color: #d9dbe0;
}
html.light .avatar-upload-hint { color: #6b7280; }

/* ---- Markdown 正文（浅色） ---- */
html.light .markdown-body { color: #17181d; }
html.light .markdown-body h1,
html.light .markdown-body h2,
html.light .markdown-body h3,
html.light .markdown-body h4,
html.light .markdown-body h5,
html.light .markdown-body h6 { color: #141414; }
html.light .markdown-body h1,
html.light .markdown-body h2 { border-bottom: 1px solid #e8e9ed; }
html.light .markdown-body p { color: #2f3037; }
html.light .markdown-body a {
    color: #3745e8;
    text-decoration-color: rgba(76, 89, 245, 0.4);
}
html.light .markdown-body a:hover {
    color: #2733c9;
    text-decoration-color: #2733c9;
}
html.light .markdown-body ul,
html.light .markdown-body ol { color: #2f3037; }
html.light .markdown-body li { color: #2f3037; }
html.light .markdown-body li::marker { color: #6b7280; }
html.light .markdown-body blockquote {
    color: #4b5563;
    background: #f6f7ff;
    border-left-color: #4c59f5;
}
/* 引用里的段落要跟随引用色，否则会被上面的 `p` 规则拉回正文色 */
html.light .markdown-body blockquote p,
html.light .markdown-body blockquote li { color: #4b5563; }
html.light .markdown-body code {
    color: #3745e8;
    background: #f3f4f6;
    border-color: #e2e3e8;
}
html.light .markdown-body pre {
    color: #26272e;
    background: #f6f7f9;
    border-color: #e2e3e8;
}
/* 代码块内的 code 不要再叠一层行内代码的底色与边框
   （themed `.markdown-body code` 特异性高于 `.markdown-body pre code`，必须在这里显式重置） */
html.light .markdown-body pre code {
    color: #26272e;
    background: none;
    border-color: transparent;
}
html.light .markdown-body table { border-color: #e0e1e6; }
html.light .markdown-body th {
    color: #17181d;
    background: #f3f4f6;
    border-color: #e0e1e6;
}
html.light .markdown-body td {
    color: #2f3037;
    border-color: #ececf0;
}
html.light .markdown-body tr:nth-child(even) td { background: #fbfbfc; }
html.light .markdown-body img {
    background: #ffffff;
    border-color: #e8e9ed;
}
html.light .markdown-body hr { background: #e8e9ed; }
html.light .markdown-body strong { color: #141414; }
html.light .markdown-body em { color: #374151; }
html.light .markdown-body del { color: #6b7280; }

/* ===================== 深色主题（CTF+ dark：纯黑 + 荧光绿） ===================== */

html.dark body {
    background: #000000 !important;
    color: #ecedee;
}

html.dark .gradient-text {
    background: linear-gradient(to bottom right, #fafafa, #71717a);
    -webkit-background-clip: text;
    background-clip: text;
}

/* 深色胶囊导航栏 */
html.dark #site-nav > div {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.55rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

html.dark .footer {
    background: #0a0a0b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
}

/* 背景网格 */
html.dark .box {
    background: rgba(255, 255, 255, 0.015) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark .mask-overlay {
    background: radial-gradient(circle at center, transparent 30%, #000000 90%);
}

/* 主色：蓝色装饰全部切换为荧光绿 */
html.dark .bg-blue-400 { background-color: #bef264 !important; }
html.dark .text-blue-200,
html.dark .text-blue-300,
html.dark .text-blue-400 { color: #bef264 !important; }
html.dark .hover\:text-white:hover { color: #bef264 !important; }

/* ---- 卡片（石墨黑） ---- */
html.dark .panel-card, html.dark .question-card, html.dark .member-card,
html.dark .list-card, html.dark .pinned-card, html.dark .timeline-card,
html.dark .content-card, html.dark .qq-card,
html.dark .hero-card, html.dark .section-card {
    background: #131316;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html.dark .member-card:hover, html.dark .pinned-card:hover,
html.dark .question-card:hover, html.dark .content-card:hover,
html.dark .timeline-card:hover {
    background: #17171a;
    border-color: rgba(190, 242, 100, 0.45);
    box-shadow: 0 10px 28px rgba(190, 242, 100, 0.07);
}

html.dark .answer-item { background: rgba(190, 242, 100, 0.05); border-color: rgba(190, 242, 100, 0.22); }
html.dark .asker-item  { background: #1b1b1f; border-color: rgba(255, 255, 255, 0.1); }
html.dark .empty-state { background: #0e0e10; border-color: rgba(255, 255, 255, 0.14); color: #71717a; }

/* ---- 表单 ---- */
html.dark .input-field, html.dark .textarea-field, html.dark .select-field {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.14);
    color: #ecedee;
}
html.dark .input-field::placeholder, html.dark .textarea-field::placeholder { color: #52525b; }
html.dark .input-field:focus, html.dark .textarea-field:focus, html.dark .select-field:focus {
    border-color: #bef264;
    box-shadow: 0 0 0 3px rgba(190, 242, 100, 0.14);
}
html.dark .select-field option { background: #18181b; color: #ecedee; }

html.dark .bg-slate-800 { background-color: #18181b !important; }
html.dark .border-slate-500 { border-color: rgba(255, 255, 255, 0.25) !important; }
html.dark .border-slate-700\/50 { border-color: rgba(255, 255, 255, 0.1) !important; }

/* ---- 按钮（CTF+ 深色主按钮 = 荧光绿底黑字） ---- */
html.dark .primary-btn {
    color: #18181b !important;
    background: #bef264;
    border-color: #bef264;
}
html.dark .primary-btn:hover { background: #d3f88b; border-color: #d3f88b; }
html.dark .secondary-btn {
    color: #d4d4d8;
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.16);
}
html.dark .secondary-btn:hover { color: #ecedee; border-color: rgba(190, 242, 100, 0.5); }
html.dark .danger-btn {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.35);
}
html.dark .danger-btn:hover { background: rgba(244, 63, 94, 0.2); }

html.dark .action-btn.primary {
    color: #18181b;
    background: #bef264;
    border: 1px solid #bef264;
}
html.dark .action-btn.primary:hover { color: #18181b; background: #d3f88b; }
html.dark .action-btn.ghost {
    color: #d4d4d8;
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
html.dark .action-btn.ghost:hover { color: #ecedee; border-color: rgba(190, 242, 100, 0.5); }

/* ---- 徽章与标签 ---- */
html.dark .hint-badge {
    color: #bef264;
    background: rgba(190, 242, 100, 0.08);
    border-color: rgba(190, 242, 100, 0.3);
}
html.dark .anon-badge {
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.08);
    border-color: rgba(196, 181, 253, 0.3);
}
html.dark .admin-badge {
    color: #bef264;
    background: rgba(190, 242, 100, 0.08);
    border-color: rgba(190, 242, 100, 0.3);
}
html.dark .news-tag, html.dark .tool-tag, html.dark .attachment-link {
    color: #bef264 !important;
    background: rgba(190, 242, 100, 0.07);
    border-color: rgba(190, 242, 100, 0.25);
}
html.dark .meta-badge { color: #a1a1aa; background: #1b1b1f; border-color: rgba(255, 255, 255, 0.12); }
html.dark .pin-badge  { color: #facc15 !important; background: rgba(250, 204, 21, 0.09); border-color: rgba(250, 204, 21, 0.32); }

/* 新闻分类徽章（保留各自语义色相，换成适配纯黑底的高明度版本） */
html.dark .category-badge.competition { color: #fb923c; background: rgba(251, 146, 60, 0.09); border-color: rgba(251, 146, 60, 0.32); }
html.dark .category-badge.project     { color: #34d399; background: rgba(52, 211, 153, 0.09); border-color: rgba(52, 211, 153, 0.3); }
html.dark .category-badge.activity    { color: #c4b5fd; background: rgba(196, 181, 253, 0.09); border-color: rgba(196, 181, 253, 0.3); }

/* ---- 新闻页 ---- */
html.dark .filter-btn { color: #d4d4d8; border-color: rgba(255, 255, 255, 0.16); background: #131316; }
html.dark .filter-btn:hover { color: #ecedee; border-color: rgba(190, 242, 100, 0.5); }
html.dark .filter-btn.active { color: #18181b !important; background: #bef264; border-color: #bef264; }
html.dark .timeline-line { background: rgba(255, 255, 255, 0.12); }
html.dark .timeline-dot { background: #000000; border-color: #bef264; }
html.dark .loading-spinner { color: #71717a; }

/* ---- 管理后台标签页 ---- */
html.dark .tab-btn { color: #d4d4d8; border-color: rgba(255, 255, 255, 0.16); background: #131316; }
html.dark .tab-btn:hover { color: #ecedee; }
html.dark .tab-btn.active { color: #18181b !important; background: #bef264; border-color: #bef264; }

/* ---- 主题切换按钮 ---- */
html.dark .theme-toggle {
    border-color: rgba(255, 255, 255, 0.16);
    background: #18181b;
    color: #a1a1aa;
}
html.dark .theme-toggle:hover { border-color: #bef264; color: #bef264; }

/* ---- 滚动条 / 选区 ---- */
html.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
html.dark ::selection { background: #bef264; color: #141414; }

/* 首页申请按钮 → 荧光绿实心 */
html.dark a[href="join.html"].inline-flex {
    color: #18181b !important;
    background: #bef264 !important;
    border-color: #bef264 !important;
}
html.dark a[href="join.html"].inline-flex:hover { background: #d3f88b !important; }

/* ---------------------------------------------------------------------
 * 个人展示页 / 人物信息墙（深色）：石墨黑 #18181b + 边框 rgba(255,255,255,0.1)
 * + 荧光绿 #bef264 + 正文 #ecedee。与上方 html.light 段落一一对应。
 * 代码块 / 表格 / 引用 / 链接的背景与边框在这里全部单独定义，绝不沿用浅色值。
 * ------------------------------------------------------------------- */

/* ---- 人物墙（深色） ---- */
html.dark .people-wall { color: #ecedee; }
html.dark .person-card {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html.dark .person-card:hover {
    background: #1d1d21;
    border-color: rgba(190, 242, 100, 0.45);
    box-shadow: 0 10px 28px rgba(190, 242, 100, 0.07);
    transform: translateY(-2px);
}
html.dark .person-card:focus-visible {
    outline: 2px solid #bef264;
    outline-offset: 2px;
}
html.dark .person-avatar {
    background: #26262a;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
/* 首字母兜底：白字 + 深色渐变，深色下同样保证 ≥ 4.5:1 */
html.dark .person-avatar-fallback {
    color: #ffffff;
    background: linear-gradient(135deg, #33375c 0%, #191c26 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.dark .person-name { color: #ecedee; }
html.dark .person-role { color: #bef264; }
html.dark .person-bio  { color: #a1a1aa; }
html.dark .person-tags { color: #a1a1aa; }
html.dark .person-tag {
    color: #bef264;
    background: rgba(190, 242, 100, 0.07);
    border-color: rgba(190, 242, 100, 0.25);
}
html.dark .wall-toolbar {
    color: #a1a1aa;
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- 详情视图（深色） ---- */
html.dark .back-to-wall {
    color: #bef264;
    background: transparent;
    border-color: rgba(190, 242, 100, 0.25);
}
html.dark .back-to-wall:hover {
    color: #d3f88b;
    background: rgba(190, 242, 100, 0.1);
    border-color: rgba(190, 242, 100, 0.5);
}
html.dark .profile-header {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html.dark .profile-avatar {
    background: #26262a;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
html.dark .profile-avatar-fallback {
    color: #ffffff;
    background: linear-gradient(135deg, #33375c 0%, #191c26 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
html.dark .profile-name { color: #ecedee; }
html.dark .profile-role { color: #bef264; }
html.dark .profile-meta { color: #a1a1aa; }
html.dark .profile-links { color: #a1a1aa; }
html.dark .profile-link {
    color: #d4d4d8;
    background: #1f1f23;
    border-color: rgba(255, 255, 255, 0.16);
}
html.dark .profile-link:hover {
    color: #bef264;
    background: #24242a;
    border-color: rgba(190, 242, 100, 0.5);
}
html.dark .profile-body {
    color: #ecedee;
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html.dark .profile-empty {
    color: #a1a1aa;
    background: #101012;
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---- 编辑态（深色） ---- */
html.dark .profile-editor {
    color: #ecedee;
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html.dark .editor-grid { color: #a1a1aa; }
html.dark .editor-preview {
    color: #ecedee;
    background: #101012;
    border-color: rgba(255, 255, 255, 0.14);
}
html.dark .link-row { color: #a1a1aa; }
html.dark .avatar-upload-row {
    color: #a1a1aa;
    background: #101012;
    border-color: rgba(255, 255, 255, 0.14);
}
html.dark .avatar-upload-hint { color: #a1a1aa; }

/* ---- Markdown 正文（深色） ---- */
html.dark .markdown-body { color: #ecedee; }
html.dark .markdown-body h1,
html.dark .markdown-body h2,
html.dark .markdown-body h3,
html.dark .markdown-body h4,
html.dark .markdown-body h5,
html.dark .markdown-body h6 { color: #fafafa; }
html.dark .markdown-body h1,
html.dark .markdown-body h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
html.dark .markdown-body p { color: #d4d4d8; }
html.dark .markdown-body a {
    color: #bef264;
    text-decoration-color: rgba(190, 242, 100, 0.45);
}
html.dark .markdown-body a:hover {
    color: #d3f88b;
    text-decoration-color: #d3f88b;
}
html.dark .markdown-body ul,
html.dark .markdown-body ol { color: #d4d4d8; }
html.dark .markdown-body li { color: #d4d4d8; }
html.dark .markdown-body li::marker { color: #a1a1aa; }
html.dark .markdown-body blockquote {
    color: #c9cacd;
    background: rgba(190, 242, 100, 0.06);
    border-left-color: #bef264;
}
html.dark .markdown-body blockquote p,
html.dark .markdown-body blockquote li { color: #c9cacd; }
html.dark .markdown-body code {
    color: #bef264;
    background: #26262a;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .markdown-body pre {
    color: #e4e4e7;
    background: #101012;
    border-color: rgba(255, 255, 255, 0.1);
}
/* 同上：深色下也要显式重置，否则代码块里会出现一块块 #26262a 的行内码底色 */
html.dark .markdown-body pre code {
    color: #e4e4e7;
    background: none;
    border-color: transparent;
}
html.dark .markdown-body table { border-color: rgba(255, 255, 255, 0.12); }
html.dark .markdown-body th {
    color: #ecedee;
    background: #232327;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .markdown-body td {
    color: #d4d4d8;
    border-color: rgba(255, 255, 255, 0.09);
}
html.dark .markdown-body tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
html.dark .markdown-body img {
    background: #101012;
    border-color: rgba(255, 255, 255, 0.1);
}
html.dark .markdown-body hr { background: rgba(255, 255, 255, 0.12); }
html.dark .markdown-body strong { color: #fafafa; }
html.dark .markdown-body em { color: #d4d4d8; }
html.dark .markdown-body del { color: #a1a1aa; }

@media (prefers-reduced-motion: reduce) {
    .panel-card, .question-card, .member-card, .list-card,
    .pinned-card, .timeline-card, .content-card, .qq-card,
    .hero-card, .section-card {
        animation: none;
    }
}

/* 新增组件同样尊重「减少动态效果」偏好（hover 只保留配色反馈，取消位移） */
@media (prefers-reduced-motion: reduce) {
    .person-card, .wall-toolbar, .profile-header, .profile-body,
    .profile-empty, .profile-editor {
        animation: none;
    }
    html.light .person-card:hover,
    html.dark .person-card:hover {
        transform: none;
    }
}

/* 窄屏：详情视图头部改为纵向堆叠，头像缩小 */
@media (max-width: 640px) {
    .profile-header { gap: 1rem; padding: 1.35rem; }
    .profile-avatar,
    .profile-avatar-fallback { width: 88px; height: 88px; border-radius: 16px; }
    .profile-avatar-fallback { font-size: 2rem; }
    .profile-name { font-size: 1.45rem; }
    .profile-body, .profile-editor { padding: 1.25rem; }
    .people-wall { grid-template-columns: 1fr; }
}