/*
 * plib 组件层 (design system)
 * ---------------------------------------------------------------------------
 * 约定：
 *   1. 所有取值来自 tokens.css，本文件不出现新的十六进制色值（品牌徽章除外）。
 *   2. 组件类负责"外观"（颜色 / 边框 / 圆角 / 字号 / 内边距 / 状态），
 *      Tailwind 只负责"布局"（container / grid / flex / 间距 / 显隐）。
 *      同一元素上不要再叠加与组件冲突的 Tailwind 外观类。
 *   3. 交互元素一律有可见焦点环，禁止裸写 focus:outline-none。
 */

/* ==========================================================================
   1. 基础与排版
   ========================================================================== */

html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    /* 中文标题不加字距，避免字形离散 */
    letter-spacing: 0;
}

p {
    line-height: var(--leading-normal);
}

/* 表单控件继承字体，避免浏览器默认字体混入中文页面 */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

time {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. 焦点与可达性
   ========================================================================== */

/*
 * 唯一的焦点指示实现。使用 !important 是刻意的：历史模板里散落着
 * `focus:outline-none focus:shadow-outline`（shadow-outline 是 Tailwind v1
 * 的类，在 v2 中不存在），会让键盘用户完全看不到焦点。这条规则保证
 * WCAG 2.4.7 在尚未改造的页面上同样成立。
 */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
    outline-offset: var(--focus-ring-offset) !important;
}

/* 深色底（导航栏、页脚）上改用白色焦点环才可见 */
.site-nav :focus-visible,
.site-footer :focus-visible,
.home-hero :focus-visible {
    outline-color: var(--neutral-0) !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 跳转到主内容：键盘用户第一个可聚焦元素 */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transform: translateY(-200%);
    transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================================
   3. 链接
   ========================================================================== */

/*
 * 全站单一强调色（北大红）。密集列表里的标题保持近黑色，只在 hover /
 * focus 时染成品牌色；正文行内链接则常态即为品牌色并带下划线。
 */
.link {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition-colors);
}

.link:hover,
.link:focus-visible {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 列表 / 卡片里的标题链接 */
.link-title {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: var(--transition-colors);
}

.link-title:hover,
.link-title:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 次级链接：元信息里的院系、课程等 */
.link-muted {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-colors);
}

.link-muted:hover,
.link-muted:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   4. 按钮
   ========================================================================== */

.btn {
    --btn-height: 2.5rem; /* 40px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--btn-height);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors), box-shadow var(--duration-fast)
        var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--primary {
    border-color: var(--color-btn-primary-bg);
    background: var(--color-btn-primary-bg);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-xs);
}

.btn--primary:hover:not(:disabled) {
    border-color: var(--color-btn-primary-hover);
    background: var(--color-btn-primary-hover);
    color: var(--color-text-inverse);
}

.btn--secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--neutral-400);
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

/* 次级但带品牌倾向：用于"管理课程""查看"这类轻量操作 */
.btn--accent-outline {
    border-color: var(--color-accent-soft-border);
    background: var(--color-surface);
    color: var(--color-accent);
}

.btn--accent-outline:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
}

.btn--ghost {
    border-color: transparent;
    background: none;
    color: var(--color-text-secondary);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--neutral-100);
    color: var(--color-text);
}

.btn--danger {
    border-color: var(--color-btn-danger-bg);
    background: var(--color-btn-danger-bg);
    color: var(--color-text-inverse);
}

.btn--danger:hover:not(:disabled) {
    border-color: var(--color-btn-danger-hover);
    background: var(--color-btn-danger-hover);
}

.btn--success {
    border-color: var(--color-btn-success-bg);
    background: var(--color-btn-success-bg);
    color: var(--color-text-inverse);
}

.btn--success:hover:not(:disabled) {
    border-color: var(--color-btn-success-hover);
    background: var(--color-btn-success-hover);
}

.btn--danger-outline {
    border-color: var(--danger-border);
    background: var(--color-surface);
    color: var(--danger-fg);
}

.btn--danger-outline:hover:not(:disabled) {
    border-color: var(--danger-fg);
    background: var(--danger-bg);
}

.btn--sm {
    --btn-height: 2rem; /* 32px */
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

.btn--lg {
    --btn-height: 2.75rem; /* 44px */
    padding: 0 var(--space-6);
    font-size: var(--text-base);
}

/* 纯图标按钮：保持正方形并满足触控尺寸 */
.btn--icon {
    width: var(--btn-height);
    min-width: var(--btn-height);
    padding: 0;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* 移动端触控目标不小于 44px */
@media (max-width: 639px) {
    .btn {
        --btn-height: 2.75rem;
    }

    .btn--sm {
        --btn-height: 2.25rem;
    }
}

/* ==========================================================================
   5. 表单
   ========================================================================== */

.field {
    display: block;
    margin-bottom: var(--space-5);
}

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.field__required {
    margin-left: var(--space-1);
    color: var(--danger-fg);
}

.field__hint {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.field__hint--success {
    color: var(--success-fg);
}

.field__hint--error {
    color: var(--danger-fg);
}

.field__error {
    margin-top: var(--space-2);
    padding: 0;
    color: var(--danger-fg);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    list-style: none;
}

/* 同一行内的输入框 + 按钮（验证码等） */
.field__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.field__row .input {
    flex: 1 1 auto;
    min-width: 0;
}

.field__row .btn {
    flex-shrink: 0;
    min-height: 2.625rem;
}

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    min-height: 2.625rem; /* 42px */
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    transition: var(--transition-colors), box-shadow var(--duration-fast)
        var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-text-muted);
}

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) {
    border-color: var(--neutral-400);
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--brand-50);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--danger-fg);
}

.textarea {
    min-height: 7rem;
    line-height: var(--leading-normal);
    resize: vertical;
}

.textarea--tall {
    min-height: 12rem;
}

.select {
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2374808e' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
    appearance: none;
}

/* 文件选择框：把浏览器默认按钮统一成次级按钮的样子 */
.input--file {
    padding: var(--space-2);
    line-height: 1.6;
    cursor: pointer;
}

.input--file::file-selector-button {
    padding: var(--space-1) var(--space-3);
    margin-right: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-md);
    cursor: pointer;
    transition: var(--transition-colors);
}

.input--file::file-selector-button:hover {
    border-color: var(--neutral-400);
    background: var(--neutral-100);
}

:root[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa5b1' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.checkbox,
.radio {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
}

.checkbox-row label {
    cursor: pointer;
    user-select: none;
}

/* 表单卡片：字段区 + 底部操作条 */
.form-card {
    max-width: 100%;
}

.form-card__footer {
    justify-content: flex-end;
    gap: var(--space-3);
}

.form-card .field:last-child {
    margin-bottom: 0;
}

/* 两列字段布局，窄屏自动堆叠 */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-5);
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   6. 卡片与容器
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}


.card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.card__body {
    flex: 1 1 auto;
    padding: var(--space-5);
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
}

/* 可点击卡片：整体抬升，顶部露出品牌色 */
/*
 * 可交互卡片的 hover 只做一件事：边框微沉 + 阴影稍深。
 * 不做位移（卡片下边缘会因移动反复进出 hover 而抖动），
 * 也不做顶部色条（三种效果叠加显得躁动）。
 */
.card--interactive {
    transition: border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.card--interactive:hover,
.card--interactive:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

/* 无阴影的朴素容器，用于长列表和表格外框 */
.surface {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}


.surface--sunken {
    background: var(--color-surface-sunken);
}

/* 列表行：surface 内部的分隔单元 */
.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.625rem var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.list-row:last-child {
    border-bottom: 0;
}

.list-row:hover {
    background: var(--color-surface-hover);
}

.list-row__main {
    min-width: 0;
}

.list-row__meta {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* 列表行里的内容摘录（我的评论等），最多两行 */
.list-row__excerpt {
    display: -webkit-box;
    margin: var(--space-1) 0 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.list-row__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
}

/* 课程卡片：图标 + 名称 + 统计 */
.course-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .course-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.course-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: var(--transition-colors), box-shadow var(--duration-base)
        var(--ease-out);
}

.course-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.course-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.course-card__icon {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.course-card__identity {
    flex: 1 1 auto;
    min-width: 0;
}

/* 卡片内的次级信息（课程代码 · 院系），与 list-row__meta 同款但属于本组件 */
.course-card__meta {
    margin: var(--space-1) 0 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 发现课程列表：图标 + 名称的组合行 */
.discover-course {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.course-card__stats {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.course-card__stats strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.course-card__time {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* 课程磁贴：学院页的课程网格 */
.course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .course-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.course-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-colors), box-shadow var(--duration-base)
        var(--ease-out);
}

.course-tile:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.course-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.course-tile__name {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.course-tile__stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.course-tile__stats dt {
    color: var(--color-text-muted);
}

.course-tile__stats dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.course-tile__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

.course-tile__cta {
    margin-top: auto;
    color: var(--color-accent);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-align: right;
}

/* 筛选栏：搜索框 + 下拉 + 按钮的统一横向布局 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0 0 var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.filter-bar__field {
    flex: 1 1 12rem;
    min-width: 0;
}

.filter-bar__field--auto {
    flex: 0 1 14rem;
}

/* 与 .input / .select 同高，保证一行内所有控件顶边对齐 */
.filter-bar .btn {
    min-height: 2.625rem;
}

.filter-bar__label {
    margin-right: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    white-space: nowrap;
}

/* 把后续内容推到右侧 */
.filter-bar__spacer {
    flex: 1 1 auto;
}

@media (max-width: 639px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar__field,
    .filter-bar__field--auto {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   7. 页面与区块骨架
   ========================================================================== */

/*
 * 全站唯一的横向容器。导航栏、正文、页脚共用同一最大宽度与内边距，
 * 保证三者左右对齐（旧版导航用 Tailwind container=1280、正文用别的宽度）。
 */
.page-width {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}

.page {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--rhythm-base);
}

.page--narrow {
    max-width: var(--page-max-narrow);
}

.page--form {
    max-width: calc(var(--page-max-form) + var(--space-8));
}

.page--wide {
    max-width: 1360px;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--rhythm-tight);
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
}

.page-subtitle {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.section {
    margin-bottom: var(--rhythm-base);
}

.section:last-child {
    margin-bottom: 0;
}

.section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* 区块尾部：右对齐的“查看更多”链接 */
.section__footer {
    margin-top: var(--space-4);
    text-align: right;
}

/*
 * 区块标题：统一为左对齐 + 品牌色竖线。
 * （旧版首页用居中标题 + 下划线、我的课程用左竖线，这里收敛成一种。）
 */
.section__title {
    position: relative;
    margin: 0;
    padding-left: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.section__title::before {
    position: absolute;
    top: 0.24em;
    bottom: 0.24em;
    left: 0;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    content: "";
}

.section__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section__link {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: var(--transition-colors);
}

.section__link:hover {
    color: var(--color-accent);
}

/* 头像 + 用户名的行内组合 */
.user-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition-colors);
}

.user-cell:hover {
    color: var(--color-accent);
}

.user-cell__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 0;
}

.user-cell__name {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
}

/* 排行榜名次 */
.rank-number {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}

.rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    color: var(--neutral-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.rank-medal--1 {
    background: var(--medal-gold);
}

.rank-medal--2 {
    background: var(--medal-silver);
}

.rank-medal--3 {
    background: var(--medal-bronze);
}

/* 院系分布条 */
.distribution-cell {
    position: relative;
}

.distribution-bar {
    display: flex;
    width: 100%;
    height: 1.75rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.distribution-bar__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    overflow: hidden;
    color: var(--neutral-0);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/*
 * 分类色板的着色类：颜色值只在 tokens.css（--chart-*）定义，
 * 蓝图按院系 id 分配类名（见 ranking._get_department_chart_class）。
 */
.chart-seg--1 { background-color: var(--chart-1); }
.chart-seg--2 { background-color: var(--chart-2); }
.chart-seg--3 { background-color: var(--chart-3); }
.chart-seg--4 { background-color: var(--chart-4); }
.chart-seg--5 { background-color: var(--chart-5); }
.chart-seg--6 { background-color: var(--chart-6); }
.chart-seg--7 { background-color: var(--chart-7); }
.chart-seg--8 { background-color: var(--chart-8); }
.chart-seg--9 { background-color: var(--chart-9); }
.chart-seg--10 { background-color: var(--chart-10); }
.chart-seg--11 { background-color: var(--chart-11); }
.chart-seg--12 { background-color: var(--chart-12); }

.distribution-tooltip {
    position: fixed;
    z-index: var(--z-dropdown);
    max-width: calc(100vw - 24px);
    padding: var(--space-4);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.distribution-tooltip__title {
    padding-bottom: var(--space-2);
    margin: 0 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.distribution-tooltip__row {
    margin-bottom: var(--space-3);
}

.distribution-tooltip__row:last-child {
    margin-bottom: 0;
}

.distribution-tooltip__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-md);
}

.distribution-tooltip__track {
    height: 1.5rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--neutral-100);
}

.distribution-tooltip__fill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 100%;
    color: var(--neutral-0);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* 求助帖列表项 */
.request-item {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.request-item:last-child {
    border-bottom: 0;
}

.request-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.request-item__excerpt {
    display: -webkit-box;
    margin: var(--space-1) 0 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}

/* 搜索结果列表 */
.result-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.result-item {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color var(--duration-base) var(--ease-out);
}

.result-item:hover {
    border-color: var(--color-border-strong);
}

.result-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.result-item__title {
    min-width: 0;
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.result-item__description {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.result-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.material-plaza__tabs {
    margin-bottom: var(--space-4);
}

.side-tabs.plaza-switcher {
    flex-basis: 9rem;
}

.side-tab.plaza-switcher__tab {
    min-height: 3.5rem;
    gap: var(--space-3);
    padding: var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.plaza-switcher__tab i {
    width: 1.5rem;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    text-align: center;
}

.plaza-switcher__tab:hover i {
    color: var(--color-text);
}

.plaza-switcher__tab.side-tab--active i {
    color: var(--color-accent);
}

.material-plaza__filters {
    align-items: stretch;
}

.material-plaza__search {
    position: relative;
}

.material-plaza__search > i {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    z-index: 1;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    pointer-events: none;
    transform: translateY(-50%);
}

.material-plaza__search .input {
    padding-left: 2.25rem;
}

.material-plaza__filter-actions {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.material-plaza-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.material-plaza-card {
    display: flex;
    min-width: 0;
    min-height: 14rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.material-plaza-card:hover,
.material-plaza-card:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.material-plaza-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.material-plaza-card__body {
    min-width: 0;
    flex: 1;
    padding: var(--space-5);
}

.material-plaza-card__summary {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.material-plaza-card__title {
    display: -webkit-box;
    min-height: 2.75rem;
    margin: var(--space-3) 0 0;
    overflow: hidden;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.material-plaza-card__course {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.material-plaza-card__course span,
.material-plaza-card__context,
.material-plaza-card__uploader-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-plaza-card__context {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.material-plaza-card__description {
    display: -webkit-box;
    margin: var(--space-3) 0 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.material-plaza-card__footer {
    min-height: 3rem;
    padding: var(--space-2) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.material-plaza-card__uploader {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-1);
}

.material-plaza-card__uploader-name {
    max-width: 5rem;
}

.material-plaza-card__uploader time {
    flex-shrink: 0;
    white-space: nowrap;
}

.material-plaza-card__stats {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-3);
}

.material-plaza-card__preview {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-colors);
}

.material-plaza-card__preview:hover,
.material-plaza-card__preview:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.material-plaza-card__rating {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem var(--space-2);
    border-radius: var(--radius-full);
    background: var(--success-bg);
    color: var(--success-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.material-plaza-card__rating-count {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

body.preview-drawer-open {
    overflow: hidden;
}

.preview-drawer {
    position: fixed;
    z-index: var(--z-modal);
    inset: 0;
}

.preview-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 29, 0.48);
}

.preview-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: min(46rem, calc(100vw - 3rem));
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.preview-drawer__header,
.preview-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-color: var(--color-border);
    background: var(--color-surface);
}

.preview-drawer__header {
    border-bottom: 1px solid var(--color-border);
}

.preview-drawer__heading {
    min-width: 0;
}

.preview-drawer__eyebrow {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.preview-drawer__title {
    margin: 0;
    overflow: hidden;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-drawer__body {
    min-height: 0;
    padding: var(--space-5);
    overflow: auto;
    background: var(--color-surface-sunken);
}

.preview-drawer__footer {
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
}

.preview-drawer__footer form {
    margin: 0;
}

.material-preview__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.material-preview__scope {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.material-preview__scope i {
    color: var(--color-accent);
}

.material-preview__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.material-preview__loading,
.material-preview__empty {
    display: flex;
    min-height: 15rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.material-preview__empty {
    flex-direction: column;
    padding: var(--space-8);
    text-align: center;
}

.material-preview__empty i {
    font-size: var(--text-3xl);
}

.material-preview__empty p {
    margin: 0;
}

.material-preview__pdf iframe {
    display: block;
    width: 100%;
    height: min(68vh, 46rem);
    min-height: 32rem;
}

.docx-preview {
    width: 100%;
    max-width: 48rem;
    min-height: 34rem;
    padding: clamp(1.25rem, 4%, 3rem);
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.docx-preview__heading,
.docx-preview__paragraph {
    overflow-wrap: anywhere;
}

.docx-preview__heading {
    margin: var(--space-5) 0 var(--space-3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.docx-preview__heading:first-child {
    margin-top: 0;
}

.docx-preview__heading--1 {
    font-size: var(--text-2xl);
}

.docx-preview__heading--2 {
    font-size: var(--text-xl);
}

.docx-preview__heading--3,
.docx-preview__heading--4,
.docx-preview__heading--5,
.docx-preview__heading--6 {
    font-size: var(--text-lg);
}

.docx-preview__paragraph {
    margin: 0 0 var(--space-3);
    font-size: var(--text-md);
    line-height: 1.8;
    white-space: pre-wrap;
}

.docx-preview__list-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    line-height: 1.7;
}

.docx-preview__marker {
    color: var(--color-text-muted);
    text-align: right;
}

.docx-preview__marker i {
    font-size: 0.35rem;
    vertical-align: middle;
}

.docx-preview__table-wrap {
    margin: var(--space-4) 0;
    overflow-x: auto;
}

.docx-preview__table {
    width: 100%;
    min-width: 28rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.docx-preview__table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    overflow-wrap: anywhere;
    vertical-align: top;
}

.docx-preview__end {
    width: 4rem;
    margin: var(--space-8) auto 0;
    border-top: 2px solid var(--color-border-strong);
}

.material-preview__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.material-preview__page-status {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.md-preview {
    padding: var(--space-2) var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.8;
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .material-plaza-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .material-plaza__filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .material-plaza__search {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .material-plaza-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .side-tabs-layout.plaza-layout {
        display: block;
    }

    .side-tabs.plaza-switcher {
        position: static;
        flex-direction: row;
        margin-bottom: var(--space-6);
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .plaza-switcher__tab {
        min-width: 7rem;
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .side-tabs-layout.plaza-layout {
        position: relative;
        left: 50%;
        width: min(
            calc(var(--page-max) + 10.5rem),
            calc(100vw - var(--space-8))
        );
        gap: var(--space-6);
        transform: translateX(-50%);
    }

    .plaza-layout > .side-tabs-layout__content {
        max-width: var(--page-max);
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .material-plaza__filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .material-plaza-card__body {
        padding: var(--space-4);
    }

    .material-plaza-card__footer {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }

    .material-plaza-card__uploader-name {
        max-width: 3.25rem;
    }

    .material-plaza-card__stats {
        gap: var(--space-2);
    }

    .material-plaza-card__preview {
        width: 1.75rem;
        height: 1.75rem;
        flex-basis: 1.75rem;
    }
}

@media (min-width: 1200px) {
    .material-plaza__filters {
        display: grid;
        grid-template-columns:
            minmax(14rem, 1.8fr) minmax(7.5rem, 0.9fr)
            minmax(9rem, 1.1fr) minmax(7rem, 0.75fr)
            minmax(7rem, 0.8fr) auto;
    }

    .material-plaza__filters--extended {
        grid-template-columns:
            minmax(13rem, 1.7fr) minmax(7rem, 0.85fr)
            minmax(8rem, 1fr) minmax(6.5rem, 0.7fr)
            minmax(6.5rem, 0.7fr) minmax(6.5rem, 0.75fr) auto;
    }
}

@media (max-width: 639px) {
    .material-plaza__filter-actions .btn {
        flex: 1;
    }

    .preview-drawer__panel {
        width: 100vw;
    }

    .preview-drawer__header,
    .preview-drawer__footer {
        padding: var(--space-3) var(--space-4);
    }

    .preview-drawer__body {
        padding: var(--space-3);
    }

    .preview-drawer__footer .btn {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }

    .material-preview__pdf iframe {
        height: calc(100vh - 13rem);
        min-height: 24rem;
    }

    .docx-preview {
        padding: var(--space-4);
    }
}

.recommendation-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.recommendation-area__summary,
.recommendation-form__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.recommendation-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.recommendation-reasons {
    position: relative;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.recommendation-reasons summary {
    cursor: pointer;
}

.recommendation-reasons__options {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
    width: 11rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

/* 把统计信息推到右侧（宽屏时） */
@media (min-width: 768px) {
    .result-item__meta-end {
        margin-left: auto;
    }
}

.pagination__ellipsis,
.pagination__status {
    border: 0;
    background: none;
    color: var(--color-text-muted);
}

/* 反馈列表条目 */
.feedback-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

.feedback-item__badges {
    margin-bottom: var(--space-2);
}

.feedback-item__counts {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.image-preview__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

/* ==========================================================================
   8. 表格
   ========================================================================== */

/* 注意：不能叫 .table，会和 Tailwind 的 display 工具类冲突 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}

.data-table thead th {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 0.75rem var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
    background: var(--color-surface-hover);
}

.data-table__num,
.data-table thead th.data-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table__center {
    text-align: center;
}

.data-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

/* 目录治理表固定列轨道，确保表头、数据和操作按钮始终垂直对齐。 */
.catalog-table {
    min-width: 44rem;
    table-layout: fixed;
}

.catalog-table--departments .catalog-table__primary {
    width: 36%;
}

.catalog-table--departments .catalog-table__count {
    width: 12%;
}

.catalog-table--departments .catalog-table__references {
    width: 36%;
}

.catalog-table--courses .catalog-table__primary {
    width: 30%;
}

.catalog-table--courses .catalog-table__department {
    width: 22%;
}

.catalog-table--courses .catalog-table__references {
    width: 32%;
}

.catalog-table__actions {
    width: 16%;
}

.admin-request-table {
    min-width: 52rem;
    table-layout: fixed;
}

.admin-request-table__title {
    width: 32%;
}

.admin-request-table__course {
    width: 20%;
}

.admin-request-table__author {
    width: 14%;
}

.admin-request-table__status {
    width: 14%;
}

.admin-request-table__actions {
    width: 20%;
}

/* 行内操作链接：默认近灰，悬停染品牌色。支持 <a> 与表单里的 <button> */
.table-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-colors);
}

.table-link:hover {
    color: var(--color-accent);
}

/* 窄屏可横向滚动，避免撑破页面宽度 */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * 窄屏仍有多列可见的表格（课程资料表、排行榜）加 .table-scroll--min
 * 给一个下限宽度：宁可让容器内部横向滚动，也不要把列压到无法阅读。
 * 只露出「名称 + 操作」两列的表格不加，让内容自然放下、避免无谓滚动。
 */
@media (max-width: 639px) {
    .table-scroll--min > .data-table {
        min-width: 32rem;
    }
}

/*
 * 文件单元格：图标 + 标题 + 次级元信息。
 * 资料表格（首页热门、课程页、搜索结果、审核队列）共用同一结构。
 */
.file-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.file-cell__icon {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

/*
 * max-width 让超长标题在 auto 布局的表格里也能触发省略号，
 * 否则标题列会被内容撑开、把相邻列压成竖排单字。
 */
.file-cell__body {
    min-width: 0;
    max-width: 28rem;
}

/* 行内元素不触发 text-overflow，标题链接必须成块才能省略 */
.file-cell__body > .text-truncate {
    display: block;
}

.file-cell__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* 审核未通过的原因说明（个人主页“我的上传”） */
.file-cell__note {
    margin: var(--space-1) 0 0;
    color: var(--danger-fg);
    font-size: var(--text-xs);
}

/* 按扩展名着色，仅作为文件类型的弱提示 */
.fa-file-pdf {
    color: var(--file-pdf);
}

.fa-file-word {
    color: var(--file-word);
}

.fa-file-powerpoint {
    color: var(--file-powerpoint);
}

.fa-file-excel {
    color: var(--file-excel);
}

.fa-file-archive {
    color: var(--file-archive);
}

/* ==========================================================================
   9. 徽章、标签与状态
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    white-space: nowrap;
}

.badge--neutral {
    background: var(--neutral-100);
    color: var(--neutral-700);
}

.badge--success {
    background: var(--success-bg);
    color: var(--success-fg);
}

.badge--warning {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.badge--danger {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.badge--info {
    background: var(--info-bg);
    color: var(--info-fg);
}

.badge--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* 状态点：比徽章更轻，用于行内状态 */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    white-space: nowrap;
}

.status::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: currentcolor;
    content: "";
}

.status--open {
    color: var(--info-fg);
}

.status--resolved {
    color: var(--success-fg);
}

/* 通用“完成/已加入”肯定态，与 resolved 同色但语义独立 */
.status--success {
    color: var(--success-fg);
}

.status--pending {
    color: var(--warning-fg);
}

.status--rejected {
    color: var(--danger-fg);
}

.status--closed {
    color: var(--color-text-muted);
}

/* 可点击的筛选 / 课程标签 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-colors);
}

.chip:hover {
    border-color: var(--color-accent-soft-border);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.chip--active,
.chip[aria-current="page"] {
    border-color: var(--color-btn-primary-bg);
    background: var(--color-btn-primary-bg);
    color: var(--color-text-inverse);
}

.chip--active:hover,
.chip[aria-current="page"]:hover {
    background: var(--color-btn-primary-hover);
    color: var(--color-text-inverse);
}

/* 资料类型徽章（class 名由 file_type_badge_class() 生成，勿改） */
.badge-exam {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-textbook {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-notes {
    background-color: #dcfce7;
    color: #166534;
}

.badge-courseware {
    background-color: #ffedd5;
    color: #9a3412;
}

.badge-exercises {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-answers {
    background-color: #cffafe;
    color: #155e75;
}

.badge-compilation {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.badge-default {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
}

/* 用户等级徽章（class 名由 level_badge_class() 生成，勿改）。
   彩色进阶是成就信息本身：从新手灰到满级金的成长刻度。 */
.level-0 {
    background-color: #e6e6e6;
    color: #545454;
}

.level-1 {
    background-color: #d5f1fc;
    color: #0162ad;
}

.level-2 {
    background-color: #daf6f5;
    color: #116f6e;
}

.level-3 {
    background-color: #e3f2e7;
    color: #136c2f;
}

.level-4 {
    background-color: #fff2c7;
    color: #ad5401;
}

.level-5 {
    background-color: #ffeae0;
    color: #cc3a00;
}

.level-6 {
    background-color: #ffe5f4;
    color: #bd005e;
}

.level-7 {
    background-color: #f9e5ff;
    color: #7e00a8;
}

.level-8 {
    background-color: #dce3fa;
    color: #0f3295;
}

.level-9 {
    background-color: #fdd3d8;
    color: #94070a;
}

.level-10 {
    background-color: #ffe138;
    color: #724713;
}

/* ==========================================================================
   9b. 资料详情
   ========================================================================== */

/* 详情页主卡片与下方评论区卡片之间留出节奏间距 */
.material-detail {
    margin-bottom: var(--rhythm-tight);
}

.material-comments {
    margin-bottom: var(--rhythm-tight);
}

.material-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.material-detail__title {
    min-width: 0;
    margin: 0;
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    overflow-wrap: break-word;
}

.material-detail__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.material-detail__author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.material-detail__meta {
    margin-bottom: var(--space-5);
}

/*
 * 元信息行：左侧键值表，右侧收藏/举报按钮，两端对齐形成对称。
 * 窄屏回退为上下排列，按钮仍靠左 natural 顺序。
 */
.material-detail__meta-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.material-detail__meta-row .material-detail__meta {
    /* 元信息是紧凑信息块而非全宽表格：限宽避免行距被拉稀 */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 32rem;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .material-detail__meta-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 768px) {
    /* 双拼两列提高密度；.detail-list 复合选择器提升优先级（原单类选择器被
       后定义的 .detail-list 覆盖，该规则从未生效） */
    .detail-list.material-detail__meta {
        grid-template-columns: auto 1fr auto 1fr;
        column-gap: var(--space-6);
    }
}

.material-detail__reactions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 767px) {
    .material-detail__reactions {
        justify-content: flex-start;
        margin-top: var(--space-4);
    }
}

/* card 内部的次级分区：共用上边框而不是嵌套卡片 */
.material-detail__section {
    border-top: 1px solid var(--color-border);
}

.material-detail__section .card__title {
    margin-bottom: var(--space-4);
}

.material-detail__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.material-detail__section-head .card__title {
    margin-bottom: 0;
}

.material-detail__hint {
    margin: 0 0 var(--space-4);
}

.pdf-frame {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

/*
 * 不要在这里写 display：显隐由模板上的 hidden / sm:block 等工具类决定，
 * 后代选择器的优先级会盖掉它们（曾导致 embed 与 iframe 同时出现）。
 */
.pdf-frame embed,
.pdf-frame iframe {
    border: 0;
    vertical-align: middle;
}

/* 收藏按钮：唯一使用琥珀色的地方，表示"已收藏" */
.like-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.375rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
}

.like-button:hover {
    border-color: var(--neutral-400);
    background: var(--color-surface-sunken);
}

.like-button.is-active {
    border-color: var(--like-active-border);
    background: var(--like-active-bg);
    color: var(--like-active-fg);
}

.like-button.is-active i {
    color: var(--like-active-icon);
}

/* 压缩包文件树 */
.file-tree {
    max-height: 22rem;
    padding: var(--space-3);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-size: var(--text-md);
}

.file-tree__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.15rem 0;
    white-space: nowrap;
}

.file-tree__file {
    color: var(--color-text-muted);
}

.file-tree__dir {
    color: var(--file-dir);
}

.file-tree__error {
    margin: 0;
    color: var(--danger-fg);
}

/* 评论 */
.comment-form {
    margin-bottom: var(--space-8);
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comment {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
}

.comment__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.comment__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
}

/* 个人主页：灰底侧栏（1/3）+ 内容区（2/3），早期版式的设计系统化实现 */
.profile-card {
    flex-direction: column;
    margin-bottom: var(--rhythm-tight);
}

@media (min-width: 768px) {
    .profile-card {
        flex-direction: row;
    }
}

.profile-card__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    text-align: center;
}

@media (min-width: 768px) {
    .profile-card__aside {
        flex: 0 0 18rem;
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
    }
}

.profile-card__avatar {
    width: 8rem;
    height: 8rem;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow-md);
}

.profile-card__name {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.profile-card__meta {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.profile-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-6);
}

.profile-links {
    padding: 0;
    margin: 0;
    font-size: var(--text-md);
    list-style: none;
    text-align: left;
}

.profile-links li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.profile-links i {
    width: 1rem;
    color: var(--color-text-muted);
    text-align: center;
    flex-shrink: 0;
}

.profile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}



.profile-bio {
    padding-left: var(--space-4);
    margin-bottom: var(--space-8);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-secondary);
}

.profile-bio p {
    margin: 0;
}

.profile-bio__empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.profile-section-title {
    margin-bottom: var(--space-4);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .profile-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.profile-stat {
    padding: var(--space-2) var(--space-3);
    text-align: center;
}

.profile-stat__value {
    display: block;
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.profile-stat__label {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.avatar-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.profile-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.profile-tabs .tabs {
    flex: 1 1 auto;
    min-width: 0;
}

/* AJAX 标签切换时的过渡态 */
#profile-tabs-region,
#search-results-region,
#request-plaza-region {
    transition: opacity var(--duration-fast) var(--ease-out);
}

#profile-tabs-region.is-loading,
#search-results-region.is-loading,
#request-plaza-region.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

#review-dashboard-region {
    transition: opacity var(--duration-fast) var(--ease-out);
}

#review-dashboard-region.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

#admin-dashboard-content {
    transition: opacity var(--duration-fast) var(--ease-standard);
}

#admin-dashboard-content.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* 窄屏：标签独占一行并可横向滚动，动作按钮落到第二行右侧 */
@media (max-width: 639px) {
    .profile-tabs {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .profile-tabs .tabs {
        flex-basis: 100%;
        margin-bottom: var(--space-2);
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* 登录 / 注册 / 找回密码 卡片 */
.auth-card {
    margin-top: var(--space-4);
}

.auth-card__header {
    padding: var(--space-8) var(--space-6) 0;
    text-align: center;
}

.auth-card__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
}

.auth-card__lead {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.auth-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--text-md);
}

.auth-card__footer {
    justify-content: center;
    gap: var(--space-2);
}

.auth-card .field:last-of-type {
    margin-bottom: var(--space-5);
}

/* 紧凑统计条：管理页顶部的四格概览 */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-5);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

@media (min-width: 1024px) {
    .stat-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-strip__cell {
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--neutral-100);
    border-bottom: 1px solid var(--neutral-100);
}

.stat-strip__label {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.stat-strip__value {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.stat-strip__value--good {
    color: var(--success-fg);
}

/* 资料迁移的“检查资料”结果 */
.migrate-preview {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    font-size: var(--text-md);
}

/* 弹窗里的表单可以更宽并允许纵向滚动 */
.modal--form {
    max-width: 32rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* 两列表单并排卡片（迁移页）：顶部对齐 */
.form-grid--top {
    gap: var(--space-5);
    align-items: start;
}

/* 反馈详情：正文 + 侧栏 */
.feedback-detail-shell {
    width: 100%;
}

.feedback-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .feedback-layout {
        flex-direction: row;
    }
}

.feedback-workspace {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.feedback-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .feedback-sidebar {
        width: 20rem;
    }
}

.feedback-panel {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.feedback-panel-title {
    position: relative;
    padding-left: var(--space-3);
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.feedback-panel-title::before {
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: 0;
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    content: "";
}

.feedback-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.feedback-action {
    margin-top: var(--space-3);
}

.feedback-thumb-link {
    display: block;
    border-radius: var(--radius-md);
}

.feedback-thumb {
    width: 7rem;
    height: 7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    object-fit: cover;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.feedback-thumb:hover {
    opacity: 0.88;
}

/* 详情工作区内的分区：相邻分区之间用发丝线分隔 */
.feedback-section {
    padding: var(--space-6);
}

.feedback-section + .feedback-section {
    border-top: 1px solid var(--color-border);
}

.feedback-section__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

/* 详情头：徽章行 + 标题 + 作者时间 */
.feedback-detail__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.feedback-detail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.feedback-detail__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    overflow-wrap: break-word;
}

.feedback-detail__body {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
}

.feedback-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* 时间线标记配色：官方/事件用 accent，普通跟进用 muted */
.feedback-marker--accent {
    background: var(--color-accent);
    color: var(--neutral-0);
}

.feedback-marker--muted {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}

/* 时间线里的跟进卡片：官方回复用 accent 描边 */
.feedback-comment {
    min-width: 0;
    padding: var(--space-4);
    border-left: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

.feedback-comment--official {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.feedback-comment__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.feedback-comment__author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.feedback-comment__names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
}

.feedback-comment__time {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.feedback-comment__content {
    line-height: var(--leading-normal);
    white-space: pre-wrap;
}

/* 时间线事件行 */
.feedback-event__text {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
}

.feedback-event__time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* 侧栏：信息行与分隔区 */
.feedback-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.feedback-info__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.feedback-info__value {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.feedback-panel__divider {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* 小号说明文字（状态说明、表单提示） */
.feedback-hint {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.feedback-hint--ruler {
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}

/* 侧栏里的状态摘要（已下架、共创认定） */
.feedback-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.feedback-state__title {
    margin: 0;
    font-weight: var(--weight-medium);
}

.feedback-state__text {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

@media (max-width: 639px) {
    .feedback-section {
        padding: var(--space-5);
    }
}


/* 处理时间线 */
.feedback-timeline-entry {
    position: relative;
    min-height: 4rem;
    padding-bottom: var(--space-5);
    padding-left: var(--space-12);
}

.feedback-timeline-entry::before {
    position: absolute;
    top: 1.75rem;
    bottom: -0.25rem;
    left: 0.8125rem;
    width: 2px;
    background: var(--color-border);
    content: "";
}

.feedback-timeline-entry:last-child {
    padding-bottom: 0;
}

.feedback-timeline-entry:last-child::before {
    display: none;
}

.feedback-timeline-marker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--color-surface);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px var(--color-border);
}

@media (max-width: 639px) {
    .feedback-timeline-entry {
        padding-left: var(--space-10);
    }
}

/* 模态框背景层（可点击关闭） */
.modal-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 29, 36, 0.5);
    cursor: default;
}

.modal-overlay__backdrop + .modal {
    position: relative;
    z-index: 1;
}

/* 审核台页面容器 */
.reviewer-page {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
}

/* 通知中心 */
/* 通知列表：扁平化的分隔线列表，未读只用标题前的小圆点标记 */
.notification-list {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.notification-card + .notification-card {
    border-top: 1px solid var(--color-border);
}

.notification-card:hover {
    background: var(--color-surface-hover);
}

.notification-card.notification-unread .notification-card__title::before {
    display: inline-block;
    flex-shrink: 0;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    content: "";
}

.notification-card__avatar {
    flex-shrink: 0;
}

.notification-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    color: var(--color-text-muted);
}

.notification-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.notification-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.notification-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.notification-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.notification-card:hover .notification-actions,
.notification-card:focus-within .notification-actions {
    opacity: 1;
}

.notification-card__content {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.notification-card__meta {
    margin-top: var(--space-3);
}

/* 复选框组 */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

/* 自定义多选项（举报原因） */
.choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    cursor: pointer;
    transition: var(--transition-colors);
}

.choice:hover {
    background: var(--color-surface-sunken);
}

.choice__box {
    color: var(--neutral-300);
}

.choice.selected {
    border-color: var(--color-accent-soft-border);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: var(--weight-medium);
}

.choice.selected .choice__box {
    color: var(--color-accent);
}

/* 举报页 */
.report-target__list {
    margin-top: var(--space-2);
    color: inherit;
}

.report-target__list dt {
    color: inherit;
    opacity: 0.8;
}

.report-target__list dd {
    color: inherit;
}

.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.image-preview__item {
    position: relative;
    flex: none;
}

.image-preview__thumb {
    width: 6rem;
    height: 6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* 带删除勾选的图片卡片 */
.image-remove {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-size: var(--text-xs);
    cursor: pointer;
}

/* 页面底部的说明列表 */
.notice-list {
    padding: 0;
    margin: var(--space-5) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    list-style: none;
}

.notice-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.notice-list i {
    color: var(--color-text-muted);
}

/* 版本记录 */
.revision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.revision:last-child {
    border-bottom: 0;
}

.revision__main {
    flex: 1 1 20rem;
    min-width: 0;
}

.revision__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.revision__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

@media (min-width: 640px) {
    .revision__meta {
        grid-template-columns: auto 1fr auto 1fr;
        column-gap: var(--space-6);
    }
}

.revision__hash {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-wrap: break-word;
}

.revision__note {
    padding: var(--space-2) var(--space-3);
    margin: var(--space-3) 0 0;
    border-left: 3px solid var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-fg);
    font-size: var(--text-md);
}

.revision__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-1);
}

/* 求助帖详情 */
.request-detail__title {
    margin-top: var(--space-3);
    overflow-wrap: break-word;
}

/* 求助正文是纯文本，保留用户输入的换行 */
.request-detail__content {
    margin: 0;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.request-detail__note {
    margin: var(--space-1) 0 0;
    white-space: pre-wrap;
}

.request-detail__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    margin: var(--rhythm-tight) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.request-detail__bar strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.request-comment {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.request-comment:last-child {
    border-bottom: 0;
}

/* 行内标签 + 控件（评论排序等） */
.inline-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.select--inline {
    width: auto;
    min-height: 2rem;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--text-md);
}

/* ==========================================================================
   10. 提示条与消息
   ========================================================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
}

.alert__icon {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert__close {
    flex-shrink: 0;
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.alert__close:hover {
    opacity: 1;
}

.alert--success {
    border-color: var(--success-border);
    background: var(--success-bg);
    color: var(--success-fg);
}

.alert--error,
.alert--danger {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.alert--warning {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-fg);
}

.alert--info {
    border-color: var(--info-border);
    background: var(--info-bg);
    color: var(--info-fg);
}

/* flash 消息浮层 */
.flash-stack {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-3));
    right: 0;
    left: 0;
    z-index: var(--z-flash);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    pointer-events: none;
}

.flash-stack .alert {
    width: 100%;
    max-width: 36rem;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}

/* ==========================================================================
   11. 空状态
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-4);
    color: var(--color-text-secondary);
    text-align: center;
}

.empty-state__icon {
    color: var(--neutral-300);
    font-size: 1.375rem;
}

.empty-state__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.empty-state__text {
    max-width: 32rem;
    margin: 0;
    font-size: var(--text-md);
}

/* 空态补充说明（可含清除筛选 / 发布求助等链接） */
.empty-state__desc {
    max-width: 32rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

.empty-state__desc a {
    color: var(--color-accent);
    text-decoration: none;
}

.empty-state__desc a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 行内空态：列表 / 侧栏里更紧凑 */
.empty-state--inline {
    padding: var(--space-6) var(--space-4);
    font-size: var(--text-md);
}

/* 关于本站 */
.about-title {
    margin-bottom: var(--space-4);
}

.about-text {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
}

.about-text--strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.about-quote {
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-style: italic;
}

.about-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: var(--space-5);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
}

@media (min-width: 768px) {
    .about-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.about-step {
    padding: var(--space-4);
    background: var(--color-surface-sunken);
}

.about-step__label {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.about-step__text {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
}

/* 共创成果的贡献者行 */
.about-contribution__people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.about-contribution__role {
    margin-right: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.about-contribution__times {
    color: var(--color-text-muted);
}

/* 锚点跳转时避开固定导航 */
.about-anchor {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

/* 社区公约条目 */
.about-rules {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .about-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-rule {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.about-rule__icon {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--text-xl);
}

.about-rule__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
}

.about-rule__text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* 技术栈格子：图标统一用 accent，不再五颜六色 */
.about-tech {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

@media (min-width: 768px) {
    .about-tech {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.about-tech__item {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

.about-tech__item i {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: 1.75rem;
}

.about-tech__name {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* 开发团队成员：中性卡片，不再按序彩色 */
.about-team-member {
    width: 9rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

.about-team-member__avatar {
    display: block;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-3);
    overflow: hidden;
    border: 2px solid var(--color-accent-soft-border);
    border-radius: var(--radius-full);
}

.about-team-member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team-member__name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

/* 联系我们：中性卡片 + accent 图标 */
.about-contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .about-contacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .about-contacts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.about-contact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.about-contact i {
    color: var(--color-accent);
}

.about-contact--link {
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.about-contact--link:hover {
    border-color: var(--color-accent-soft-border);
    background: var(--color-surface-hover);
}

.about-contact__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}

.about-contact__label {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.about-contact__desc {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.about-contact i.about-contact__arrow {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.doc-title {
    margin-bottom: var(--space-5);
}

/* 404 / 错误页 */
.status-page {
    padding: var(--space-10) var(--space-4);
    text-align: center;
}

.status-page__code {
    margin: 0;
    color: var(--neutral-200);
    font-size: 5rem;
    font-weight: var(--weight-bold);
    line-height: 1;
}

.status-page__icon {
    color: var(--danger-fg);
    font-size: 2.5rem;
}

.status-page__title {
    margin: var(--space-5) 0 var(--space-3);
    font-size: var(--text-2xl);
}

.status-page__text {
    max-width: 34rem;
    margin: 0 auto var(--space-6);
    color: var(--color-text-secondary);
}

.status-page__filters {
    max-width: 24rem;
    margin: 0 auto var(--space-6);
    text-align: left;
}

.status-page__filters ul {
    padding-left: var(--space-5);
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    list-style: disc;
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ==========================================================================
   12. 头像与元信息
   ========================================================================== */

.avatar {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface-sunken);
    flex-shrink: 0;
}

.avatar--xs {
    width: 1.25rem;
    height: 1.25rem;
}

.avatar--sm {
    width: 1.5rem;
    height: 1.5rem;
}

.avatar--lg {
    width: 3rem;
    height: 3rem;
}

.avatar--xl {
    width: 5rem;
    height: 5rem;
}

/* 图标 + 数字的统计组 */
.meta-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.meta-list__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
}

.meta-list__item i {
    color: var(--neutral-400);
    font-size: 0.75rem;
}

/* 用 · 分隔的元信息串 */
.meta-inline {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* 定义列表：资料详情的属性表 */
.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-md);
}

.detail-list dt {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.detail-list dd {
    margin: 0;
    color: var(--color-text);
    min-width: 0;
}

/* ==========================================================================
   13. 导航
   ========================================================================== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: var(--color-nav-bg);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-nav);
}

.site-nav__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--nav-height);
}

.site-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-inverse);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.site-brand:hover {
    color: var(--color-text-inverse);
}

.site-brand__mark {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.site-brand__name {
    letter-spacing: 0.01em;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: var(--transition-colors);
}

.site-nav__link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
}

.site-nav__link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/*
 * 导航栏里的图标按钮。
 * 窄屏保持 44px 触控目标（WCAG 2.5.5），宽屏可以收紧到 36px。
 */
.nav-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: var(--transition-colors);
}

.nav-icon-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
}

@media (min-width: 1024px) {
    .nav-icon-button {
        width: 2.25rem;
        height: 2.25rem;
    }
}

.nav-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-full);
    background: var(--neutral-0);
    color: var(--color-accent);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 1.125rem;
    text-align: center;
}

/* 导航搜索：折叠为图标，展开为输入框 */
.nav-search {
    display: flex;
    align-items: center;
}

.nav-search__form {
    display: flex;
    align-items: center;
    max-width: 0;
    height: 2.25rem;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    pointer-events: none;
    transition: max-width var(--duration-base) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}

.nav-search.is-open .nav-search__form {
    max-width: 16rem;
    opacity: 1;
    pointer-events: auto;
}

.nav-search.is-open .nav-search__toggle {
    display: none;
}

.nav-search__icon {
    flex-shrink: 0;
    padding-left: var(--space-3);
    color: rgba(255, 255, 255, 0.7);
}

.nav-search__input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 var(--space-3);
    border: 0;
    background: none;
    color: var(--color-text-inverse);
    font-size: var(--text-md);
}

.nav-search__input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.nav-search__input:focus {
    outline: none;
}

/* 未登录时的登录按钮：导航栏内的反白按钮 */
.nav-login {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
}

.nav-login:hover {
    background: var(--neutral-0);
    color: var(--color-accent);
}

/* 用户菜单触发器 */
.user-menu {
    position: relative;
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: var(--transition-colors);
}

.user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.user-menu-trigger .avatar {
    border-color: rgba(255, 255, 255, 0.5);
}

.user-menu-trigger__identity {
    text-align: left;
}

.user-menu-trigger__name {
    display: block;
    /* 用户名最长 20 个字符，放任不管会把整条导航撑开 */
    max-width: 9rem;
    overflow: hidden;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-trigger__level {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-2xs);
    line-height: 1.4;
    opacity: 0.9;
}

/* 称号徽章在导航里只是辅助信息，缩到与 11px 的行同高，
   不要用 .badge 的默认字号和内边距把整个触发器撑高 */
.user-menu-trigger__level .badge {
    max-width: 6rem;
    padding: 0 0.35em;
    overflow: hidden;
    font-size: inherit;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-trigger__caret {
    font-size: var(--text-xs);
    opacity: 0.8;
}

/* 下拉菜单 */
.menu {
    min-width: 12rem;
    padding: var(--space-1);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text);
    font-size: var(--text-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
}

.menu__item:hover {
    background: var(--color-surface-sunken);
    color: var(--color-accent);
}

.menu__item i {
    width: 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.menu__item:hover i {
    color: var(--color-accent);
}

.menu__item--danger {
    color: var(--danger-fg);
}

.menu__item--danger:hover {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.menu__item--danger i {
    color: var(--danger-fg);
}

.menu__separator {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--color-border);
}

.menu__section-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

/* 导航搜索：窄屏展开时覆盖整条导航栏 */
@media (max-width: 639px) {
    .nav-search.is-open {
        position: absolute;
        inset: 0;
        z-index: var(--z-dropdown);
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 var(--space-4);
        background-color: var(--color-nav-bg);
    }

    .nav-search.is-open .nav-search__form {
        width: 100%;
        max-width: none;
    }
}

/* 移动端导航抽屉 */
.mobile-menu {
    position: absolute;
    top: 100%;
    right: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-dropdown);
    margin-top: var(--space-2);
    padding: var(--space-2);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

/* 面包屑 */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-md);
    list-style: none;
}

.breadcrumb__separator {
    color: var(--neutral-300);
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-colors);
}

.breadcrumb a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb__current {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

/* 标签页 */
.tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: thin;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    /* 收紧行高，整体高度控制在 44px 触控目标内 */
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
}

.tab:hover {
    color: var(--color-text);
}

.tab--active,
.tab[aria-current="page"],
.tab[aria-selected="true"] {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
}

/* 分页 */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--rhythm-tight);
}

.pagination > a,
.pagination > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: var(--transition-colors);
}

.pagination > a:hover {
    border-color: var(--color-accent-soft-border);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.pagination > .active,
.pagination > a.active {
    border-color: var(--color-btn-primary-bg);
    background: var(--color-btn-primary-bg);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
}

.pagination > .disabled {
    color: var(--neutral-300);
    cursor: not-allowed;
}

/* ==========================================================================
   14. 页脚
   ========================================================================== */

.site-footer {
    padding: var(--space-8) var(--space-4);
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    font-size: var(--text-md);
    text-align: center;
}

.site-footer a {
    color: var(--color-footer-link);
    text-decoration: none;
    transition: var(--transition-colors);
}

.site-footer a:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
}

/* ==========================================================================
   15. 统计与数据展示
   ========================================================================== */

.stat {
    padding: var(--space-2) var(--space-4);
    text-align: center;
}

.stat__value {
    display: block;
    color: var(--color-text);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-md);
}

/* ==========================================================================
   16. 模态框与浮层
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(23, 29, 36, 0.5);
}

.modal {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.modal--wide {
    display: flex;
    flex-direction: column;
    max-width: 34rem;
    max-height: 80vh;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.modal__head .modal__title {
    margin: 0;
}

.modal__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.modal__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.modal__text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.toast-host {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-3));
    right: 0;
    left: 0;
    z-index: var(--z-flash);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    pointer-events: none;
}

.toast-host .alert {
    width: auto;
    max-width: 28rem;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}

/* ==========================================================================
   17. 正文内容（Markdown / 富文本）
   ========================================================================== */

.prose {
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    overflow-wrap: break-word;
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
    margin: 0 0 var(--space-4);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    margin: var(--space-6) 0 var(--space-3);
}

.prose h1 {
    font-size: var(--text-xl);
}

.prose h2 {
    font-size: var(--text-lg);
}

.prose h3,
.prose h4 {
    font-size: var(--text-base);
}

.prose ul,
.prose ol {
    padding-left: var(--space-6);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: var(--space-1);
}

.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose blockquote {
    padding: var(--space-1) var(--space-4);
    border-left: 3px solid var(--color-border-strong);
    color: var(--color-text-secondary);
}

.prose code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--neutral-100);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.prose pre {
    padding: var(--space-4);
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--neutral-100);
}

.prose pre code {
    padding: 0;
    background: none;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.prose table {
    width: 100%;
    margin-bottom: var(--space-4);
    border-collapse: collapse;
    font-size: var(--text-md);
}

.prose th,
.prose td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
}

.prose th {
    background: var(--color-surface-sunken);
}

/* --- 左侧模块切换列（审核台等多模块页面的导航） --------------------------- */

.side-tabs-layout {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
}

.side-tabs-layout__content {
    flex: 1 1 auto;
    min-width: 0;
}

.side-tabs {
    position: sticky;
    /* 顶部要让开吸顶导航栏的高度 */
    top: calc(var(--nav-height) + var(--space-4));
    display: flex;
    flex: 0 0 11rem;
    flex-direction: column;
    gap: var(--space-1);
}

.side-tab {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

.side-tab:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.side-tab--active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
}

.side-tab__count {
    margin-left: auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
}

.side-tab--active .side-tab__count {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}

/* 窄屏退化为横向滚动的一行 */
@media (max-width: 1023px) {
    .side-tabs-layout {
        display: block;
    }

    .side-tabs {
        position: static;
        flex-direction: row;
        margin-bottom: var(--space-6);
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

.comment-review__meta {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.comment-review-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   18. 兼容与工具
   ========================================================================== */

/* 旧模板仍在使用的品牌工具类，保留并指向令牌 */
.pku-red {
    background-color: var(--color-accent);
}

.pku-red-text {
    color: var(--color-accent);
}

.hover-pku-red:hover {
    background-color: var(--color-accent-hover);
}

/* 品牌色文字（关键词高亮等），新代码用这个，不再用 pku-red-text */
.text-accent {
    color: var(--color-accent);
}

/* 语义文字色：成功 / 危险（表单选项、状态码等行内着色） */
.text-success {
    color: var(--success-fg);
}

.text-danger {
    color: var(--danger-fg);
}

.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 单行截断（成块才能触发省略号） */
.line-clamp-1 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行截断 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * 显隐工具类。两个作用：
 *   1. Tailwind CDN 不可用时的兜底；
 *   2. 用 !important 让"显示/隐藏"始终压过组件自带的 display，
 *      否则 .btn / .carousel-btn 这类组件会让 `hidden` 失效。
 * 顺序与 Tailwind 一致：基础类在前、响应式变体在后，保证断点覆盖。
 */
/*
 * htmx 加载指示：元素加 htmx-indicator 类、请求触发方加 hx-indicator 选择器，
 * htmx 会在请求期间给触发方加 .htmx-request，从而让指示器淡入。
 */
.htmx-indicator {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

.hidden {
    display: none !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

@media (min-width: 640px) {
    .sm\:block {
        display: block !important;
    }

    .sm\:inline {
        display: inline !important;
    }

    .sm\:inline-block {
        display: inline-block !important;
    }

    .sm\:flex {
        display: flex !important;
    }

    .sm\:table-cell {
        display: table-cell !important;
    }

    .sm\:hidden {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }

    .md\:inline {
        display: inline !important;
    }

    .md\:inline-block {
        display: inline-block !important;
    }

    .md\:flex {
        display: flex !important;
    }

    .md\:table-cell {
        display: table-cell !important;
    }

    .md\:hidden {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .lg\:block {
        display: block !important;
    }

    .lg\:inline {
        display: inline !important;
    }

    .lg\:inline-block {
        display: inline-block !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:table-cell {
        display: table-cell !important;
    }

    .lg\:hidden {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .xl\:block {
        display: block !important;
    }

    .xl\:inline {
        display: inline !important;
    }

    .xl\:inline-block {
        display: inline-block !important;
    }

    .xl\:flex {
        display: flex !important;
    }

    .xl\:table-cell {
        display: table-cell !important;
    }

    .xl\:hidden {
        display: none !important;
    }
}

/* ==========================================================================
   20. 深色模式过渡兼容层
   管理与审核模板尚未接入设计系统，仍在使用 Tailwind 色值类；
   在它们逐页改造完成前，这里把常见类映射到深色令牌，
   保证 /reviewer/* 与 /admin/* 在深色下可读。改造完成后删除本节。
   ========================================================================== */

:root[data-theme="dark"] .bg-white {
    background-color: var(--color-surface);
}

:root[data-theme="dark"] .bg-gray-50 {
    background-color: var(--color-surface-sunken);
}

:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-gray-200 {
    background-color: var(--neutral-100);
}

:root[data-theme="dark"] .hover\:bg-gray-50:hover,
:root[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--color-surface-hover);
}

:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800 {
    color: var(--color-text);
}

:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-gray-600 {
    color: var(--color-text-secondary);
}

:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .text-gray-400 {
    color: var(--color-text-muted);
}

:root[data-theme="dark"] .text-gray-300 {
    color: var(--neutral-300);
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300 {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .text-blue-500,
:root[data-theme="dark"] .text-blue-600,
:root[data-theme="dark"] .text-blue-700,
:root[data-theme="dark"] .text-blue-800 {
    color: var(--info-fg);
}

:root[data-theme="dark"] .text-red-500,
:root[data-theme="dark"] .text-red-600,
:root[data-theme="dark"] .text-red-700,
:root[data-theme="dark"] .text-red-800 {
    color: var(--danger-fg);
}

:root[data-theme="dark"] .text-green-500,
:root[data-theme="dark"] .text-green-600,
:root[data-theme="dark"] .text-green-700,
:root[data-theme="dark"] .text-green-800 {
    color: var(--success-fg);
}

:root[data-theme="dark"] .text-yellow-600,
:root[data-theme="dark"] .text-yellow-700,
:root[data-theme="dark"] .text-yellow-800 {
    color: var(--warning-fg);
}

:root[data-theme="dark"] .bg-blue-50,
:root[data-theme="dark"] .bg-blue-100 {
    background-color: var(--info-bg);
}

:root[data-theme="dark"] .bg-red-50,
:root[data-theme="dark"] .bg-red-100 {
    background-color: var(--danger-bg);
}

:root[data-theme="dark"] .bg-green-50,
:root[data-theme="dark"] .bg-green-100 {
    background-color: var(--success-bg);
}

:root[data-theme="dark"] .bg-yellow-50,
:root[data-theme="dark"] .bg-yellow-100 {
    background-color: var(--warning-bg);
}

/* 紫色没有语义 token，这些举报原因标签在深色下并入 info 色系 */
:root[data-theme="dark"] .bg-purple-100 {
    background-color: var(--info-bg);
}

:root[data-theme="dark"] .text-purple-500,
:root[data-theme="dark"] .text-purple-800 {
    color: var(--info-fg);
}

/* ==========================================================================
   19. 动效偏好与打印
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-nav,
    .site-footer,
    .flash-stack,
    .toast-host,
    .skip-link {
        display: none !important;
    }

    body {
        background: none;
    }

    .card,
    .surface {
        border-color: var(--neutral-300);
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
 * Autocomplete 可输入组合框（院系/课程选择；JS 在 static/js/autocomplete.js）
 * ------------------------------------------------------------------------ */
.autocomplete {
    position: relative;
}

.autocomplete__list {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    max-height: 16rem;
    margin: 0;
    padding: var(--space-1);
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.autocomplete__item {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.autocomplete__item--active,
.autocomplete__item:hover {
    background: var(--color-accent-soft);
}

.autocomplete__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete__hint {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm, 0.875rem);
}

.autocomplete__empty {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
}

/* 在途聚合条（profile 我的上传 tab 顶部） */
.in-transit-hint {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}

.in-transit-hint__text {
    font-size: var(--text-sm, 0.875rem);
}

/* --------------------------------------------------------------------------
 * 活动轨迹分类配色（管理端活动时间线）：分类语义不是状态语义，
 * 调色板为文档化例外（同 .badge-* / .level-*），浅色 pastel 底 + 深色文字，
 * 深色主题下换为深底浅字。blueprints/admin_activity.py 的 _ACTIVITY_GROUPS
 * 输出 .activity-cat--* 类名；事件大类图标用 .activity-icon--*。
 * ------------------------------------------------------------------------ */
.activity-cat--auth {
    background-color: #dbeafe;
    color: #1e40af;
}

.activity-cat--browse {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
}

.activity-cat--material {
    background-color: #eef2ff;
    color: #4338ca;
}

.activity-cat--courses {
    background-color: #cffafe;
    color: #155e75;
}

.activity-cat--profile {
    background-color: #f0fdfa;
    color: #0f766e;
}

.activity-cat--feedback {
    background-color: #fef9c3;
    color: #854d0e;
}

.activity-cat--notification {
    background-color: var(--info-bg);
    color: var(--info-fg);
}

.activity-cat--review {
    background-color: #dcfce7;
    color: #166534;
}

.activity-cat--admin {
    background-color: #fee2e2;
    color: #991b1b;
}

.activity-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
}

.activity-icon--auth {
    background: var(--info-bg);
    color: var(--info-fg);
}

.activity-icon--page {
    background: var(--neutral-100);
    color: var(--neutral-700);
}

.activity-icon--action {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

:root[data-theme="dark"] .activity-cat--auth {
    background-color: #16283f;
    color: #93b8f5;
}

:root[data-theme="dark"] .activity-cat--browse {
    background-color: #262c35;
    color: #9aa5b1;
}

:root[data-theme="dark"] .activity-cat--material {
    background-color: #1b2140;
    color: #a5b0f5;
}

:root[data-theme="dark"] .activity-cat--courses {
    background-color: #102e35;
    color: #7ccade;
}

:root[data-theme="dark"] .activity-cat--profile {
    background-color: #102e2b;
    color: #6fd3c8;
}

:root[data-theme="dark"] .activity-cat--feedback {
    background-color: #2e2a12;
    color: #e3c96a;
}

:root[data-theme="dark"] .activity-cat--review {
    background-color: #14301f;
    color: #7fd59a;
}

:root[data-theme="dark"] .activity-cat--admin {
    background-color: #331b1b;
    color: #f09d9d;
}

/* 统计条：管理端指标行（无框，与 .stat/.profile-stat 同一语言） */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-4);
}

.stat-strip__cell {
    padding: var(--space-2);
    text-align: center;
}

.stat-strip__value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.stat-strip__label {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
 * 统计卡组（首页数据统计 / 个人主页活动统计）：
 * 有容器但不笨重——薄边卡 + 发丝分隔的单元格 + accent 图标
 * ------------------------------------------------------------------------ */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-border);
}

@media (min-width: 640px) {
    .profile-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat,
.profile-stat {
    padding: var(--space-4) var(--space-2);
    background: var(--color-surface);
    text-align: center;
}

/* --------------------------------------------------------------------------
 * 统计色块（个人主页活动统计）：pastel 底 + 同色系深色数字。
 * 调色板为文档化例外（同 .level-* / .badge-*），语义是"分类"不是"状态"。
 * ------------------------------------------------------------------------ */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .stat-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .stat-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-tile {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    text-align: center;
}

.stat-tile__value {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.stat-tile__label {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.stat-tile--blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.stat-tile--green {
    background: #f0fdf4;
    color: #15803d;
}

.stat-tile--purple {
    background: #faf5ff;
    color: #7e22ce;
}

.stat-tile--yellow {
    background: #fefce8;
    color: #a16207;
}

.stat-tile--pink {
    background: #fdf2f8;
    color: #be185d;
}

.stat-tile--teal {
    background: #f0fdfa;
    color: #0f766e;
}

.stat-tile--indigo {
    background: #eef2ff;
    color: #4338ca;
}

.stat-tile--orange {
    background: #fff7ed;
    color: #c2410c;
}

.stat-tile__label {
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
 * 暗色主题：硬编码 pastel 调色板的深底变体。
 * 浅色 pastel 底在暗色画布上会发光刺眼，统一换为深底 + 同色系浅字。
 * ------------------------------------------------------------------------ */
:root[data-theme="dark"] .badge-exam {
    background-color: #16283f;
    color: #93b8f5;
}

:root[data-theme="dark"] .badge-textbook {
    background-color: #331b1b;
    color: #f09d9d;
}

:root[data-theme="dark"] .badge-notes {
    background-color: #14301f;
    color: #7fd59a;
}

:root[data-theme="dark"] .badge-courseware {
    background-color: #33200f;
    color: #f0b98a;
}

:root[data-theme="dark"] .badge-exercises {
    background-color: #2e2a12;
    color: #e3c96a;
}

:root[data-theme="dark"] .badge-answers {
    background-color: #102e35;
    color: #7ccade;
}

:root[data-theme="dark"] .badge-compilation {
    background-color: #251a35;
    color: #c9a8f0;
}

/* 等级徽章暗色变体 */
:root[data-theme="dark"] .level-0 {
    background-color: #262c35;
    color: #9aa5b1;
}

:root[data-theme="dark"] .level-1 {
    background-color: #16283f;
    color: #93b8f5;
}

:root[data-theme="dark"] .level-2 {
    background-color: #102e2b;
    color: #6fd3c8;
}

:root[data-theme="dark"] .level-3 {
    background-color: #14301f;
    color: #7fd59a;
}

:root[data-theme="dark"] .level-4 {
    background-color: #2e2a12;
    color: #e3c96a;
}

:root[data-theme="dark"] .level-5 {
    background-color: #33200f;
    color: #f0a871;
}

:root[data-theme="dark"] .level-6 {
    background-color: #331324;
    color: #f09dc3;
}

:root[data-theme="dark"] .level-7 {
    background-color: #251a35;
    color: #c9a8f0;
}

:root[data-theme="dark"] .level-8 {
    background-color: #1b2140;
    color: #a5b0f5;
}

:root[data-theme="dark"] .level-9 {
    background-color: #331b1b;
    color: #f09d9d;
}

:root[data-theme="dark"] .level-10 {
    background-color: #33300f;
    color: #f0dc6a;
}

/* 统计色块暗色变体 */
:root[data-theme="dark"] .stat-tile--blue {
    background: #16283f;
    color: #93b8f5;
}

:root[data-theme="dark"] .stat-tile--green {
    background: #14301f;
    color: #7fd59a;
}

:root[data-theme="dark"] .stat-tile--purple {
    background: #251a35;
    color: #c9a8f0;
}

:root[data-theme="dark"] .stat-tile--yellow {
    background: #2e2a12;
    color: #e3c96a;
}

:root[data-theme="dark"] .stat-tile--pink {
    background: #331324;
    color: #f09dc3;
}

:root[data-theme="dark"] .stat-tile--teal {
    background: #102e2b;
    color: #6fd3c8;
}

:root[data-theme="dark"] .stat-tile--indigo {
    background: #1b2140;
    color: #a5b0f5;
}

:root[data-theme="dark"] .stat-tile--orange {
    background: #33200f;
    color: #f0a871;
}