/* ==========================================================================
   活动报名管理后台 · 自定义主题
   基于 Django 5.2 admin 的 CSS 变量做整体换肤：
   - 浅色 / 深色 / 跟随系统 三种主题都可用
   - 保留 admin 原有的交互（排序、筛选、批量操作、快捷键等）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
    /* 品牌色 */
    --su-accent: #6d5efc;
    --su-accent-strong: #5747e8;
    --su-accent-soft: rgba(109, 94, 252, 0.10);
    --su-accent-weak: rgba(109, 94, 252, 0.06);
    --su-gradient: linear-gradient(135deg, #6d5efc 0%, #8b5cf6 55%, #a855f7 100%);

    /* 中性色 */
    --su-bg: #f4f5fa;
    --su-header-bg: rgba(255, 255, 255, 0.86);
    --su-surface: #ffffff;
    --su-surface-2: #f8f9fd;
    --su-surface-3: #f1f2f8;
    --su-text: #1b1e2b;
    --su-muted: #6b7183;
    --su-faint: #9aa0b0;
    --su-border: #e6e8f1;
    --su-border-soft: #eef0f6;
    --su-hover: #f6f7fc;

    /* 语义色 */
    --su-green: #12b76a;
    --su-green-bg: #ecfdf3;
    --su-green-text: #027a48;
    --su-green-border: #abefc6;
    --su-amber: #f79009;
    --su-amber-bg: #fffaeb;
    --su-amber-text: #b54708;
    --su-amber-border: #fedf89;
    --su-red: #f04438;
    --su-red-bg: #fef3f2;
    --su-red-text: #b42318;
    --su-red-border: #fecdca;
    --su-blue: #2e90fa;
    --su-blue-bg: #eff8ff;
    --su-blue-text: #175cd3;
    --su-blue-border: #b2ddff;
    --su-gray-bg: #f1f2f6;
    --su-gray-text: #5b6272;
    --su-gray-border: #e3e5ec;

    /* 结构 */
    --su-radius: 16px;
    --su-radius-sm: 10px;
    --su-radius-xs: 8px;
    --su-ring: 0 0 0 3px rgba(109, 94, 252, 0.22);
    --su-shadow-sm: 0 1px 2px rgba(20, 23, 40, 0.04);
    --su-shadow: 0 1px 2px rgba(20, 23, 40, 0.04), 0 14px 30px -22px rgba(20, 23, 40, 0.45);
    --su-header-h: 65px;

    --font-family-primary:
        "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-monospace:
        "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular,
        Menlo, Consolas, monospace;

    color-scheme: light;
}

/* 深色主题：跟随系统 */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --su-accent: #8b7dff;
        --su-accent-strong: #a294ff;
        --su-accent-soft: rgba(139, 125, 255, 0.16);
        --su-accent-weak: rgba(139, 125, 255, 0.10);

        --su-bg: #0e1015;
        --su-header-bg: rgba(21, 23, 31, 0.86);
        --su-surface: #15171f;
        --su-surface-2: #1a1d27;
        --su-surface-3: #20242f;
        --su-text: #eef0f7;
        --su-muted: #9aa1b4;
        --su-faint: #6f7688;
        --su-border: #272b38;
        --su-border-soft: #22252f;
        --su-hover: #1b1e28;

        --su-green-bg: rgba(18, 183, 106, 0.14);
        --su-green-text: #6ce9a6;
        --su-green-border: rgba(18, 183, 106, 0.35);
        --su-amber-bg: rgba(247, 144, 9, 0.14);
        --su-amber-text: #fec84b;
        --su-amber-border: rgba(247, 144, 9, 0.35);
        --su-red-bg: rgba(240, 68, 56, 0.14);
        --su-red-text: #fda29b;
        --su-red-border: rgba(240, 68, 56, 0.35);
        --su-blue-bg: rgba(46, 144, 250, 0.14);
        --su-blue-text: #84caff;
        --su-blue-border: rgba(46, 144, 250, 0.35);
        --su-gray-bg: #23262f;
        --su-gray-text: #c5cad6;
        --su-gray-border: #333845;

        --body-medium-color: #c9cedb;
        --body-loud-color: #ffffff;
        --su-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -26px rgba(0, 0, 0, 0.9);
        --su-ring: 0 0 0 3px rgba(139, 125, 255, 0.3);

        color-scheme: dark;
    }
}

/* 深色主题：手动切换 */
html[data-theme="dark"] {
    --su-accent: #8b7dff;
    --su-accent-strong: #a294ff;
    --su-accent-soft: rgba(139, 125, 255, 0.16);
    --su-accent-weak: rgba(139, 125, 255, 0.10);

    --su-bg: #0e1015;
    --su-header-bg: rgba(21, 23, 31, 0.86);
    --su-surface: #15171f;
    --su-surface-2: #1a1d27;
    --su-surface-3: #20242f;
    --su-text: #eef0f7;
    --su-muted: #9aa1b4;
    --su-faint: #6f7688;
    --su-border: #272b38;
    --su-border-soft: #22252f;
    --su-hover: #1b1e28;

    --su-green-bg: rgba(18, 183, 106, 0.14);
    --su-green-text: #6ce9a6;
    --su-green-border: rgba(18, 183, 106, 0.35);
    --su-amber-bg: rgba(247, 144, 9, 0.14);
    --su-amber-text: #fec84b;
    --su-amber-border: rgba(247, 144, 9, 0.35);
    --su-red-bg: rgba(240, 68, 56, 0.14);
    --su-red-text: #fda29b;
    --su-red-border: rgba(240, 68, 56, 0.35);
    --su-blue-bg: rgba(46, 144, 250, 0.14);
    --su-blue-text: #84caff;
    --su-blue-border: rgba(46, 144, 250, 0.35);
    --su-gray-bg: #23262f;
    --su-gray-text: #c5cad6;
    --su-gray-border: #333845;

    --body-medium-color: #c9cedb;
    --body-loud-color: #ffffff;
    --su-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -26px rgba(0, 0, 0, 0.9);
    --su-ring: 0 0 0 3px rgba(139, 125, 255, 0.3);

    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   1.1 把设计令牌映射到 Django admin 变量

   dark_mode.css 用 html[data-theme] 与 @media (prefers-color-scheme: dark)
   覆盖了这些变量，所以这里用同样的选择器权重、并在文件中更靠后声明，
   保证顶栏、面包屑、按钮、链接在深色模式下也跟随自定义主题。
   -------------------------------------------------------------------------- */
:root,
html[data-theme] {
    --primary: var(--su-accent);
    --secondary: var(--su-accent-strong);
    --accent: var(--su-accent);
    --primary-fg: #ffffff;

    --body-fg: var(--su-text);
    --body-bg: var(--su-bg);
    --body-quiet-color: var(--su-muted);
    --body-medium-color: var(--su-muted);
    --body-loud-color: var(--su-text);

    --header-color: var(--su-text);
    --header-branding-color: var(--su-text);
    --header-bg: var(--su-surface);
    --header-link-color: var(--su-text);

    --breadcrumbs-fg: var(--su-muted);
    --breadcrumbs-link-fg: var(--su-muted);
    --breadcrumbs-bg: transparent;

    --link-fg: var(--su-accent);
    --link-hover-color: var(--su-accent-strong);
    --link-selected-fg: var(--su-accent-strong);

    --hairline-color: var(--su-border-soft);
    --border-color: var(--su-border);

    --error-fg: var(--su-red-text);
    --message-success-bg: var(--su-green-bg);
    --message-warning-bg: var(--su-amber-bg);
    --message-error-bg: var(--su-red-bg);

    --darkened-bg: var(--su-surface-2);
    --selected-bg: var(--su-accent-weak);
    --selected-row: var(--su-accent-weak);

    --button-fg: #ffffff;
    --button-bg: var(--su-accent);
    --button-hover-bg: var(--su-accent-strong);
    --default-button-bg: var(--su-accent-strong);
    --default-button-hover-bg: var(--su-accent-strong);
    --close-button-bg: #667085;
    --close-button-hover-bg: #475467;
    --delete-button-bg: var(--su-red);
    --delete-button-hover-bg: #d92d20;
    --object-tools-fg: #ffffff;
    --object-tools-bg: var(--su-accent);
    --object-tools-hover-bg: var(--su-accent-strong);
}

/* --------------------------------------------------------------------------
   2. 基础样式
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--su-bg);
    background-image: radial-gradient(1200px 520px at 12% -10%, var(--su-accent-weak), transparent 70%);
    background-repeat: no-repeat;
    font-size: 0.875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--su-accent-soft);
    color: var(--su-text);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--su-border) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--su-border);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--su-faint);
    background-clip: content-box;
}

a:link, a:visited {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

h1, h2, h3, h4, h5 {
    color: var(--su-text);
}

.mono {
    font-family: var(--font-family-monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.ta-right {
    text-align: right;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.dot-amber { color: var(--su-amber); }
.dot-green { color: var(--su-green); }
.dot-red { color: var(--su-red); }
.dot-blue { color: var(--su-blue); }
.dot-gray { color: var(--su-faint); }

/* --------------------------------------------------------------------------
   3. 顶栏
   -------------------------------------------------------------------------- */
#header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 auto; /* 防止长页面把顶栏压扁 */
    height: var(--su-header-h);
    box-sizing: border-box;
    padding: 0 32px;
    background: var(--su-header-bg);
    border-bottom: 1px solid var(--su-border);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

#branding {
    align-items: center;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--su-text) !important;
}

.brand:hover {
    text-decoration: none !important;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #ffffff;
    background: var(--su-gradient);
    box-shadow: 0 8px 18px -8px rgba(109, 94, 252, 0.85);
    flex: 0 0 auto;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text strong {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.brand-text small {
    margin-top: 3px;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--su-faint);
}

#user-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--su-muted);
}

#user-tools a,
#logout-form button {
    border-bottom: 0;
}

.welcome {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-right: 8px;
    color: var(--su-muted);
}

.welcome-text strong {
    color: var(--su-text);
    font-weight: 600;
}

.welcome-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--su-accent-strong);
    background: var(--su-accent-soft);
    border: 1px solid var(--su-accent-soft);
}

.userlink {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: var(--su-radius-xs);
    color: var(--su-muted) !important;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.userlink:hover,
.userlink:focus {
    background: var(--su-surface-2);
    color: var(--su-text) !important;
    text-decoration: none !important;
}

#logout-form button {
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--su-muted);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 4px;
    border-radius: var(--su-radius-xs);
    color: var(--su-muted);
}

.theme-toggle:hover,
.theme-toggle:focus {
    background: var(--su-surface-2);
    text-decoration: none !important;
}

.theme-toggle svg {
    fill: currentColor;
    color: transparent;
    height: 1.15rem;
    width: 1.15rem;
}

/* --------------------------------------------------------------------------
   4. 面包屑与主体布局
   -------------------------------------------------------------------------- */
div.breadcrumbs {
    padding: 16px 32px 0;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--su-muted);
}

div.breadcrumbs a {
    color: var(--su-muted);
}

div.breadcrumbs a:hover,
div.breadcrumbs a:focus {
    color: var(--su-accent);
    text-decoration: none;
}

#container {
    min-width: 0;
}

#content {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px 32px 56px;
    box-sizing: border-box;
}

#content.colMS,
.dashboard #content {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
}

#content h1 {
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.page-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--su-text);
}

.page-sub {
    margin: 6px 0 0;
    color: var(--su-muted);
    font-size: 0.8125rem;
}

.page-sub b {
    color: var(--su-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.head-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--su-gray-border);
    background: var(--su-surface);
    color: var(--su-muted);
    font-size: 0.75rem;
    box-shadow: var(--su-shadow-sm);
}

.stat-chip b {
    color: var(--su-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-chip.tone-amber .dot { color: var(--su-amber); }
.stat-chip.tone-green .dot { color: var(--su-green); }
.stat-chip.tone-red .dot { color: var(--su-red); }
.stat-chip.tone-gray .dot { color: var(--su-faint); }

/* --------------------------------------------------------------------------
   5. 侧边栏
   -------------------------------------------------------------------------- */
.toggle-nav-sidebar {
    width: 22px;
    border-right: 1px solid var(--su-border);
    background: transparent;
    color: var(--su-faint);
    font-size: 0.75rem;
}

.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus {
    background: var(--su-surface-2);
    color: var(--su-accent);
}

#nav-sidebar {
    flex: 0 0 258px;
    top: var(--su-header-h);
    max-height: calc(100vh - var(--su-header-h));
    padding: 14px 10px 28px 16px;
    background: transparent;
    border-right: 1px solid var(--su-border-soft);
}

#nav-sidebar.sticky {
    top: var(--su-header-h);
    max-height: calc(100vh - var(--su-header-h));
}

#nav-filter {
    width: 100%;
    height: 36px;
    margin: 0 0 14px;
    padding: 0 12px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface);
    color: var(--su-text);
    font-size: 0.8125rem;
    box-shadow: var(--su-shadow-sm);
}

#nav-filter::placeholder {
    color: var(--su-faint);
}

#nav-filter:focus {
    border-color: var(--su-accent);
    box-shadow: var(--su-ring);
    outline: none;
}

#nav-sidebar .module {
    margin: 0 0 8px;
    background: transparent;
}

#nav-sidebar .module caption,
#nav-sidebar .module .section {
    display: block;
    padding: 8px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--su-faint);
    background: transparent;
}

#nav-sidebar .module caption a.section,
#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited {
    color: var(--su-faint);
}

#nav-sidebar .module table,
#nav-sidebar .module tbody,
#nav-sidebar .module tr,
#nav-sidebar .module th {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
}

#nav-sidebar .module td {
    display: none;
}

#nav-sidebar .module th {
    padding: 0;
    font-weight: 400;
    background: transparent;
}

#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited {
    display: block;
    padding: 8px 12px;
    border-radius: var(--su-radius-xs);
    color: var(--su-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus {
    background: var(--su-surface-2);
    color: var(--su-accent);
    text-decoration: none;
}

#nav-sidebar .module th a[aria-current="page"] {
    background: var(--su-accent-soft);
    color: var(--su-accent-strong);
    font-weight: 600;
}

#nav-sidebar .current-model,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    background: transparent;
    color: var(--su-accent-strong);
}

/* --------------------------------------------------------------------------
   6. 通用组件：按钮 / 卡片 / 徽章
   -------------------------------------------------------------------------- */
.button,
input[type="submit"],
input[type="button"],
a.button {
    border-radius: var(--su-radius-xs);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--su-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-light {
    background: #ffffff;
    color: var(--su-accent-strong) !important;
    box-shadow: 0 10px 22px -14px rgba(20, 23, 40, 0.65);
}

.btn-light:hover {
    background: #f6f4ff;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff !important;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.26);
}

.card {
    background: var(--su-surface);
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    padding: 20px;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.card-desc {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--su-muted);
}

.pill {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--su-surface-2);
    border: 1px solid var(--su-border);
    color: var(--su-muted);
    font-size: 0.6875rem;
    font-weight: 500;
}

.link-arrow {
    color: var(--su-accent) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.link-arrow:hover {
    color: var(--su-accent-strong) !important;
    text-decoration: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--su-gray-border);
    background: var(--su-gray-bg);
    color: var(--su-gray-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.badge .dot {
    width: 6px;
    height: 6px;
}

.badge-green,
.badge-passed,
.badge-approved {
    background: var(--su-green-bg);
    border-color: var(--su-green-border);
    color: var(--su-green-text);
}

.badge-amber,
.badge-pending {
    background: var(--su-amber-bg);
    border-color: var(--su-amber-border);
    color: var(--su-amber-text);
}

.badge-red,
.badge-rejected {
    background: var(--su-red-bg);
    border-color: var(--su-red-border);
    color: var(--su-red-text);
}

.badge-blue {
    background: var(--su-blue-bg);
    border-color: var(--su-blue-border);
    color: var(--su-blue-text);
}

.badge-gray {
    background: var(--su-gray-bg);
    border-color: var(--su-gray-border);
    color: var(--su-gray-text);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.chip-on {
    background: var(--su-green-bg);
    border-color: var(--su-green-border);
    color: var(--su-green-text);
}

.chip-off {
    background: var(--su-gray-bg);
    border-color: var(--su-gray-border);
    color: var(--su-gray-text);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--avatar-hue, 250) 58% 34%);
    background: hsl(var(--avatar-hue, 250) 78% 94%);
}

html[data-theme="dark"] .avatar {
    color: hsl(var(--avatar-hue, 250) 78% 80%);
    background: hsl(var(--avatar-hue, 250) 40% 22%);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .avatar {
        color: hsl(var(--avatar-hue, 250) 78% 80%);
        background: hsl(var(--avatar-hue, 250) 40% 22%);
    }
}

.cell-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cell-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-user.is-deleted .cell-user-name {
    color: var(--su-faint);
    text-decoration: line-through;
}

.cell-id {
    color: var(--su-faint);
    font-family: var(--font-family-monospace);
    font-size: 0.75rem;
}

.cell-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    margin: 0;
    border: 1px dashed transparent;
    border-radius: var(--su-radius-xs);
    background: transparent;
    color: var(--su-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cell-mobile:hover,
.cell-mobile:focus-visible {
    border-color: var(--su-border);
    background: var(--su-surface-2);
}

.cell-mobile-hint {
    color: var(--su-faint);
    font-size: 0.6875rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cell-mobile:hover .cell-mobile-hint,
.cell-mobile:focus-visible .cell-mobile-hint {
    opacity: 1;
}

.cell-time {
    display: block;
    font-variant-numeric: tabular-nums;
    color: var(--su-text);
}

.cell-time-sub {
    display: block;
    color: var(--su-faint);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.empty-state {
    margin: 0;
    padding: 28px 8px;
    text-align: center;
    color: var(--su-muted);
    font-size: 0.8125rem;
}

/* 复制成功的轻提示 */
.su-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 999;
    transform: translate(-50%, 12px);
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(24, 27, 38, 0.94);
    color: #ffffff;
    font-size: 0.8125rem;
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.su-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   7. 看板
   -------------------------------------------------------------------------- */
.dash {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 28px 30px;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(120deg, #5b4be0 0%, #6d5efc 40%, #8b5cf6 72%, #a855f7 100%);
    box-shadow: 0 24px 48px -28px rgba(91, 75, 224, 0.9);
    overflow: hidden;
}

.hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hero .eyebrow {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.hero h1 {
    margin: 0 0 8px;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.hero-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.875rem;
}

.hero-sub b {
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-glow {
    position: absolute;
    right: -80px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 62%);
    pointer-events: none;
}

.hero-glow::after {
    content: "";
    position: absolute;
    left: -260px;
    top: 300px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 14px;
}

.stat-card {
    position: relative;
    padding: 18px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

.stat-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--stat-accent, var(--su-accent));
    opacity: 0.9;
}

.stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--stat-bg, var(--su-accent-soft));
    color: var(--stat-accent, var(--su-accent));
    flex: 0 0 auto;
}

.stat-icon svg {
    width: 19px;
    height: 19px;
}

.stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--su-muted);
}

.stat-value {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--su-text);
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--su-faint);
}

.stat-card.tone-indigo {
    --stat-accent: var(--su-accent);
    --stat-bg: var(--su-accent-soft);
}

.stat-card.tone-amber {
    --stat-accent: var(--su-amber);
    --stat-bg: var(--su-amber-bg);
}

.stat-card.tone-green {
    --stat-accent: var(--su-green);
    --stat-bg: var(--su-green-bg);
}

.stat-card.tone-red {
    --stat-accent: var(--su-red);
    --stat-bg: var(--su-red-bg);
}

.stat-card.tone-blue {
    --stat-accent: var(--su-blue);
    --stat-bg: var(--su-blue-bg);
}

.dash-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.dash-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* 趋势柱状图 */
.bars {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 224px;
    padding-top: 4px;
}

.bar-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--su-muted);
    font-variant-numeric: tabular-nums;
}

.bar-track {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 0;
    border-radius: 10px;
}

.bar {
    display: block;
    width: 58%;
    max-width: 32px;
    min-height: 4px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #a78bfa, #6d5efc);
    box-shadow: 0 8px 16px -10px rgba(109, 94, 252, 0.9);
    transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-col.is-today .bar {
    background: linear-gradient(180deg, #34d399, #12b76a);
    box-shadow: 0 8px 16px -10px rgba(18, 183, 106, 0.9);
}

.bar-col.is-today .bar-label {
    color: var(--su-text);
    font-weight: 600;
}

.bar-label {
    font-size: 0.6875rem;
    color: var(--su-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bar-week {
    font-size: 0.625rem;
    color: var(--su-faint);
}

.chart-note {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: var(--su-radius-sm);
    background: var(--su-surface-2);
    color: var(--su-muted);
    font-size: 0.75rem;
    text-align: center;
}

/* 审核进度环形图 */
.card-progress {
    display: flex;
    flex-direction: column;
}

.progress-body {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.donut {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        conic-gradient(var(--su-green) calc(var(--p, 0) * 1%), var(--su-surface-3) 0);
}

.donut-hole {
    display: grid;
    place-items: center;
    gap: 2px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--su-surface);
    box-shadow: inset 0 0 0 1px var(--su-border-soft);
}

.donut-hole b {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--su-text);
    font-variant-numeric: tabular-nums;
}

.donut-hole span {
    font-size: 0.6875rem;
    color: var(--su-muted);
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 140px;
    min-width: 130px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--su-muted);
    list-style: none;
}

.legend li b {
    margin-left: auto;
    color: var(--su-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.card-progress .link-arrow {
    display: inline-block;
    margin-top: 18px;
}

/* 最新报名 */
.mini-table {
    width: 100%;
    border-collapse: collapse;
}

.mini-table thead th {
    padding: 0 10px 9px;
    border: 0;
    border-bottom: 1px solid var(--su-border-soft);
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--su-faint);
    text-align: left;
    white-space: nowrap;
}

.mini-table tbody td {
    padding: 11px 10px;
    border: 0;
    border-bottom: 1px solid var(--su-border-soft);
    background: transparent;
    font-size: 0.8125rem;
    vertical-align: middle;
}

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

.mini-table tbody tr:hover td {
    background: var(--su-hover);
}

.mini-table .cell-time {
    color: var(--su-muted);
    font-size: 0.75rem;
}

/* 系统模块（复用 admin/app_list.html） */
.card-modules .module {
    margin: 0 0 4px;
    background: transparent;
    border: 0;
}

.card-modules .module:last-child {
    margin-bottom: 0;
}

.card-modules .module table {
    width: 100%;
    border-collapse: collapse;
}

.card-modules .module caption,
.card-modules .module caption a.section {
    display: block;
    padding: 6px 0;
    background: transparent;
    color: var(--su-faint);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}

/* base.css 会给偶数行铺底色，这里保持卡片干净 */
.card-modules .module tr,
.card-modules .module th,
.card-modules .module thead th,
.card-modules .module tbody th {
    background: transparent;
}

.card-modules .module th {
    padding: 0;
    border-bottom: 1px solid var(--su-border-soft);
    font-weight: 500;
}

.card-modules .module td {
    display: none;
}

.card-modules .module th a:link,
.card-modules .module th a:visited {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    color: var(--su-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.card-modules .module th a:hover {
    color: var(--su-accent);
    text-decoration: none;
}

.card-modules .module caption a.section:hover {
    color: var(--su-accent);
    text-decoration: none;
}

/* 最近操作 */
.log-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 2px;
    list-style: none;
    border-bottom: 1px solid var(--su-border-soft);
}

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

.log-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--su-faint);
    box-shadow: 0 0 0 3px var(--su-surface-2);
}

.log-dot.is-add { background: var(--su-green); }
.log-dot.is-change { background: var(--su-blue); }
.log-dot.is-delete { background: var(--su-red); }

.log-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.log-object {
    color: var(--su-text);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.log-object:hover {
    color: var(--su-accent);
    text-decoration: none;
}

.log-meta {
    color: var(--su-faint);
    font-size: 0.6875rem;
}

.dash-footnote {
    margin: 4px 0 0;
    text-align: center;
    color: var(--su-faint);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   8. 列表页（changelist）
   -------------------------------------------------------------------------- */
.object-tools {
    float: none;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.object-tools li {
    float: none;
    height: auto;
    margin: 0;
    list-style: none;
}

.object-tools a:link,
.object-tools a:visited {
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--su-radius-xs);
    background: var(--su-accent);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 10px 22px -16px rgba(109, 94, 252, 0.95);
}

.object-tools a:hover,
.object-tools a:focus {
    background: var(--su-accent-strong);
    text-decoration: none;
}

.object-tools a.addlink {
    background-image: none;
    padding-right: 16px;
}

.object-tools a.viewsitelink {
    background-image: none;
}

#changelist {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

#changelist .changelist-form-container {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--su-surface);
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

#toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--su-border-soft);
    background: var(--su-surface-2);
    color: var(--su-muted);
}

#toolbar form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#toolbar #searchbar {
    flex: 1 1 320px;
    max-width: 420px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface);
    color: var(--su-text);
    font-size: 0.8125rem;
}

#toolbar #searchbar::placeholder {
    color: var(--su-faint);
}

#toolbar #searchbar:focus {
    border-color: var(--su-accent);
    box-shadow: var(--su-ring);
    outline: none;
}

#toolbar form input[type="submit"] {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--su-accent);
    border-radius: var(--su-radius-xs);
    background: var(--su-accent);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
}

#toolbar form input[type="submit"]:hover {
    background: var(--su-accent-strong);
    border-color: var(--su-accent-strong);
}

#toolbar #changelist-search img {
    display: none;
}

#changelist .toplinks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid var(--su-border-soft);
    font-weight: 500;
}

#changelist .toplinks a {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--su-surface-2);
    color: var(--su-muted);
    font-size: 0.75rem;
}

#changelist .toplinks a:hover {
    background: var(--su-accent-soft);
    color: var(--su-accent-strong);
    text-decoration: none;
}

#changelist .toplinks .date-back {
    color: var(--su-accent);
}

#changelist .toplinks .toplink-static {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--su-text);
    font-weight: 600;
}

/* 批量操作栏 */
#changelist .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--su-border-soft);
    background: var(--su-surface);
    color: var(--su-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

#changelist .actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--su-muted);
}

#changelist .actions select {
    height: 36px;
    margin: 0;
    padding: 0 30px 0 10px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.8125rem;
}

#changelist .actions select:focus {
    border-color: var(--su-accent);
    box-shadow: var(--su-ring);
    outline: none;
}

#changelist .actions .button {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--su-accent);
    border-radius: var(--su-radius-xs);
    background: var(--su-accent);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
}

#changelist .actions .button:hover {
    background: var(--su-accent-strong);
    border-color: var(--su-accent-strong);
}

#changelist .actions span.all,
#changelist .actions span.action-counter,
#changelist .actions span.clear,
#changelist .actions span.question {
    font-size: 0.75rem;
    color: var(--su-faint);
}

#changelist .actions .question .yes,
#changelist .actions .question .no {
    font-weight: 600;
}

#changelist .actions .question a.yes {
    color: var(--su-red);
}

/* 结果表格 */
#changelist-form .results {
    overflow-x: auto;
    width: 100%;
}

#result_list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#result_list thead th {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--su-border);
    background: var(--su-surface-2);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--su-faint);
    white-space: nowrap;
    vertical-align: middle;
}

#result_list thead th.sorted {
    background: var(--su-accent-weak);
}

#result_list thead th .text a,
#result_list thead th .text span {
    padding: 12px 14px;
    display: block;
    color: inherit;
}

#result_list thead th a:hover {
    color: var(--su-accent);
    text-decoration: none;
}

#result_list thead th.sorted .text a {
    color: var(--su-accent-strong);
}

#result_list tbody th,
#result_list tbody td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--su-border-soft);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 400;
    vertical-align: middle;
}

#result_list tbody tr:nth-child(even) th,
#result_list tbody tr:nth-child(even) td {
    background: transparent;
}

#result_list tbody tr:hover th,
#result_list tbody tr:hover td {
    background: var(--su-hover);
}

#result_list tbody tr:has(.action-select:checked) th,
#result_list tbody tr:has(.action-select:checked) td,
#result_list tbody tr.selected th,
#result_list tbody tr.selected td {
    background: var(--su-accent-weak);
}

#result_list tbody tr:last-child th,
#result_list tbody tr:last-child td {
    border-bottom: 0;
}

#result_list th.field-name_cell a:link,
#result_list th.field-name_cell a:visited {
    color: var(--su-text);
    font-weight: 500;
}

#result_list th.field-name_cell a:hover {
    color: var(--su-accent);
    text-decoration: none;
}

#result_list .action-checkbox-column,
#result_list td.action-checkbox {
    width: 40px;
    padding-left: 16px;
    padding-right: 0;
}

#result_list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--su-accent);
    cursor: pointer;
}

/* 筛选侧栏 */
#changelist-filter {
    flex: 0 0 248px;
    position: sticky;
    top: calc(var(--su-header-h) + 16px);
    margin: 0;
    padding: 6px 0 10px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

#changelist-filter h2 {
    margin: 0 0 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--su-border-soft);
    background: transparent;
    color: var(--su-faint);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#changelist-filter h3,
#changelist-filter details summary {
    margin: 10px 0 4px;
    padding: 0 16px;
    color: var(--su-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

#changelist-filter details summary {
    cursor: pointer;
}

#changelist-filter details > summary {
    list-style: none;
}

#changelist-filter details > summary::-webkit-details-marker {
    display: none;
}

#changelist-filter details > summary::before {
    content: "▸";
    margin-right: 5px;
    color: var(--su-faint);
    font-weight: 400;
}

#changelist-filter details[open] > summary::before {
    content: "▾";
}

#changelist-filter ul {
    margin: 0;
    padding: 2px 8px 8px;
    border-bottom: 1px solid var(--su-border-soft);
}

#changelist-filter ul:last-child {
    border-bottom: 0;
}

#changelist-filter li {
    margin: 1px 0;
    padding: 0;
    list-style: none;
}

#changelist-filter li a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--su-radius-xs);
    color: var(--su-muted);
    font-size: 0.8125rem;
    word-break: break-word;
}

#changelist-filter li a:hover {
    background: var(--su-surface-2);
    color: var(--su-accent-strong);
    text-decoration: none;
}

#changelist-filter li.selected {
    margin: 1px 0;
    padding: 0;
    border: 0;
}

#changelist-filter li.selected a {
    background: var(--su-accent-soft);
    color: var(--su-accent-strong);
    font-weight: 600;
}

#changelist-filter #changelist-filter-extra-actions {
    margin: 0;
    padding: 4px 16px 8px;
    border-bottom: 1px solid var(--su-border-soft);
    font-size: 0.75rem;
}

#changelist-filter #changelist-filter-extra-actions h3 {
    margin: 4px 0;
    padding: 0;
}

#changelist-filter #changelist-filter-extra-actions a {
    color: var(--su-accent);
}

/* 分页 */
.paginator {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--su-border-soft);
    background: var(--su-surface);
    color: var(--su-muted);
    font-size: 0.8125rem;
}

.paginator a:link,
.paginator a:visited {
    padding: 5px 11px;
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
}

.paginator a:hover {
    background: var(--su-accent-soft);
    color: var(--su-accent-strong);
    text-decoration: none;
}

.paginator .this-page {
    padding: 5px 11px;
    border-radius: var(--su-radius-xs);
    background: var(--su-accent);
    color: #ffffff;
    font-weight: 600;
}

.paginator a.showall {
    background: transparent;
    color: var(--su-accent);
}

.paginator a.showall:hover {
    background: transparent;
    color: var(--su-accent-strong);
}

.paginator input[type="submit"],
.paginator input[type="button"] {
    padding: 5px 12px;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. 编辑页（change form）
   -------------------------------------------------------------------------- */
.change-form .object-tools {
    margin-bottom: 16px;
}

fieldset.module {
    margin: 0 0 16px;
    padding: 0;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    box-shadow: var(--su-shadow);
    overflow: hidden;
}

fieldset.module h2 {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--su-border-soft);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

fieldset.module .description {
    padding: 12px 20px 0;
    color: var(--su-muted);
    font-size: 0.75rem;
    line-height: 1.6;
}

.form-row {
    padding: 14px 20px;
    margin: 0;
    border-bottom: 1px solid var(--su-border-soft);
    overflow: visible;
}

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

.form-row.errors {
    border-bottom: 1px solid var(--su-border-soft);
    background: var(--su-red-bg);
}

.aligned label {
    width: 150px;
    padding-top: 8px;
    color: var(--su-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.aligned label + p {
    color: var(--su-muted);
}

.form-row .help,
.form-row div.help,
.form-row p.help,
fieldset.module .help {
    padding: 6px 0 0;
    color: var(--su-faint);
    font-size: 0.75rem;
    line-height: 1.6;
}

.form-row .readonly {
    padding-top: 7px;
    color: var(--su-text);
    font-size: 0.8125rem;
}

input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select,
.vTextField {
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface);
    color: var(--su-text);
    font-size: 0.8125rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
.vTextField {
    padding: 8px 11px;
    min-width: 260px;
    max-width: 100%;
    box-sizing: border-box;
}

textarea {
    padding: 9px 11px;
    width: 100%;
    max-width: 640px;
}

select {
    height: 38px;
    padding: 0 30px 0 10px;
}

select[multiple] {
    min-height: 160px;
    height: auto;
    padding: 6px;
    background: var(--su-surface-2);
}

input:focus,
textarea:focus,
select:focus,
.vTextField:focus {
    border-color: var(--su-accent);
    box-shadow: var(--su-ring);
    outline: none;
}

.form-row .radio-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.form-row .radio-row > div {
    display: flex;
}

.form-row .radio-row label {
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.form-row .radio-row label:hover {
    border-color: var(--su-accent);
    color: var(--su-accent-strong);
}

.form-row .radio-row input[type="radio"] {
    margin: 0;
    accent-color: var(--su-accent);
}

.form-row .radio-row label:has(input[type="radio"]:checked) {
    border-color: var(--su-accent);
    background: var(--su-accent-soft);
    color: var(--su-accent-strong);
    font-weight: 600;
}

.form-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--su-accent);
}

.form-row label.vCheckboxLabel,
.form-row input[type="checkbox"] + label {
    display: inline-block;
    width: auto;
    padding: 8px 0 0 8px;
    color: var(--su-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.submit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 14px 18px;
    border: 1px solid var(--su-border);
    border-radius: 14px;
    background: var(--su-surface);
    box-shadow: var(--su-shadow);
}

.submit-row input {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    box-shadow: none;
}

.submit-row input:hover {
    border-color: var(--su-accent);
    color: var(--su-accent-strong);
}

.submit-row input.default {
    border-color: var(--su-accent);
    background: var(--su-accent);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 12px 24px -16px rgba(109, 94, 252, 0.95);
}

.submit-row input.default:hover {
    background: var(--su-accent-strong);
    border-color: var(--su-accent-strong);
    color: #ffffff;
}

.submit-row a.deletelink {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-left: auto;
    padding: 0 16px;
    border: 1px solid var(--su-red-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-red-bg);
    color: var(--su-red-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

.submit-row a.deletelink:hover {
    background: var(--su-red);
    border-color: var(--su-red);
    color: #ffffff;
    text-decoration: none;
}

.submit-row a.closelink {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.8125rem;
}

/* 历史记录 / 删除确认等通用表格 */
#change-history table,
.change-form table {
    width: 100%;
}

#change-history thead th {
    background: var(--su-surface-2);
    border-bottom: 1px solid var(--su-border);
}

#change-history tbody th,
#change-history tbody td {
    border-bottom: 1px solid var(--su-border-soft);
}

.delete-confirmation form input[type="submit"] {
    padding: 12px 20px;
    border-radius: var(--su-radius-xs);
}

.delete-confirmation .cancel-link {
    border-radius: var(--su-radius-xs);
}

/* --------------------------------------------------------------------------
   10. 消息提示 / 错误
   -------------------------------------------------------------------------- */
ul.messagelist {
    margin: 0 0 16px;
    padding: 0;
}

ul.messagelist li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 16px;
    border: 1px solid var(--su-green-border);
    border-left: 4px solid var(--su-green);
    border-radius: var(--su-radius-sm);
    background: var(--su-green-bg);
    background-image: none;
    color: var(--su-green-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

ul.messagelist li::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--su-green);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
}

ul.messagelist li.warning {
    border-color: var(--su-amber-border);
    border-left-color: var(--su-amber);
    background: var(--su-amber-bg);
    color: var(--su-amber-text);
}

ul.messagelist li.warning::before {
    content: "!";
    background: var(--su-amber);
}

ul.messagelist li.error {
    border-color: var(--su-red-border);
    border-left-color: var(--su-red);
    background: var(--su-red-bg);
    color: var(--su-red-text);
}

ul.messagelist li.error::before {
    content: "×";
    background: var(--su-red);
}

ul.messagelist li.info {
    border-color: var(--su-blue-border);
    border-left-color: var(--su-blue);
    background: var(--su-blue-bg);
    color: var(--su-blue-text);
}

ul.messagelist li.info::before {
    content: "i";
    background: var(--su-blue);
}

.errornote {
    padding: 12px 16px;
    border: 1px solid var(--su-red-border);
    border-left: 4px solid var(--su-red);
    border-radius: var(--su-radius-sm);
    background: var(--su-red-bg);
    color: var(--su-red-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

ul.errorlist {
    margin: 6px 0 0;
    padding: 0;
    background: transparent;
    color: var(--su-red-text);
}

ul.errorlist li {
    font-size: 0.75rem;
    list-style: none;
}

.errors input,
.errors select,
.errors textarea {
    border-color: var(--su-red);
}

/* --------------------------------------------------------------------------
   11. 登录页
   -------------------------------------------------------------------------- */
body.login-page {
    background: var(--su-bg);
}

.login-page #container {
    display: block;
    min-width: 0;
    height: auto;
}

.login-page #main {
    display: block;
}

.login-page #content {
    max-width: none;
    margin: 0;
    padding: 0;
}

.login-page #footer {
    display: none;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 100vh;
}

.login-aside {
    position: relative;
    display: flex;
    align-items: center;
    padding: 64px clamp(36px, 6vw, 88px);
    color: #ffffff;
    background: linear-gradient(155deg, #4f3fd8 0%, #6d5efc 46%, #9333ea 100%);
    overflow: hidden;
}

.login-aside::before,
.login-aside::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-aside::before {
    right: -140px;
    top: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 62%);
}

.login-aside::after {
    left: -160px;
    bottom: -180px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 64%);
}

.login-aside-inner {
    position: relative;
    z-index: 1;
    max-width: 460px;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.login-brand .brand-mark {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.login-aside h1 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.login-lead {
    margin: 0 0 32px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.login-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.875rem;
    list-style: none;
}

.login-points li::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.login-panel {
    position: relative;
    display: grid;
    place-items: center;
    padding: 48px clamp(24px, 5vw, 64px);
}

.login-theme {
    position: absolute;
    top: 20px;
    right: 20px;
}

.login-card {
    width: min(392px, 100%);
    padding: 36px 34px 30px;
    border: 1px solid var(--su-border);
    border-radius: 22px;
    background: var(--su-surface);
    box-shadow: 0 30px 70px -40px rgba(20, 23, 40, 0.55);
}

.login-card h2 {
    margin: 0 0 6px;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--su-text);
}

.login-hint {
    margin: 0 0 24px;
    color: var(--su-muted);
    font-size: 0.8125rem;
}

.login-field {
    margin-bottom: 16px;
}

.login-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--su-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--su-border);
    border-radius: 12px;
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.875rem;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    border-color: var(--su-accent);
    background: var(--su-surface);
    box-shadow: var(--su-ring);
    outline: none;
}

.login-submit {
    width: 100%;
    height: 46px;
    margin-top: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--su-gradient);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 16px 30px -18px rgba(109, 94, 252, 0.95);
    transition: filter 0.15s ease, transform 0.05s ease;
}

.login-submit:hover {
    filter: brightness(1.06);
}

.login-submit:active {
    transform: translateY(1px);
}

.login-foot {
    margin: 22px 0 0;
    text-align: center;
    color: var(--su-faint);
    font-size: 0.75rem;
}

.login-card .errornote {
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   12. 页脚
   -------------------------------------------------------------------------- */
#footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0 32px 24px;
}

.admin-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--su-border-soft);
    color: var(--su-faint);
    font-size: 0.75rem;
}

.admin-footer a {
    color: var(--su-muted);
}

.admin-footer a:hover {
    color: var(--su-accent);
    text-decoration: none;
}

.footer-dot {
    color: var(--su-border);
}

.footer-quiet {
    color: var(--su-faint);
}

/* --------------------------------------------------------------------------
   12.1 危险操作（重置报名数据）
   -------------------------------------------------------------------------- */
.danger-card {
    padding: 24px;
    border: 1px solid var(--su-red-border);
    border-radius: var(--su-radius);
    background: var(--su-surface);
    box-shadow: var(--su-shadow);
}

.danger-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.danger-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--su-red-border);
    border-radius: 12px;
    background: var(--su-red-bg);
    color: var(--su-red-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.danger-head h2 {
    margin: 0;
    color: var(--su-red-text);
    font-size: 1rem;
    font-weight: 600;
}

.danger-head p {
    margin: 6px 0 0;
    color: var(--su-muted);
    font-size: 0.8125rem;
    line-height: 1.75;
}

.danger-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.danger-stats li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 132px;
    padding: 12px 16px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-sm);
    background: var(--su-surface-2);
    list-style: none;
}

.danger-stats span {
    color: var(--su-muted);
    font-size: 0.75rem;
}

.danger-stats b {
    color: var(--su-text);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.danger-form {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--su-border);
}

.danger-form label {
    display: block;
    margin-bottom: 9px;
    color: var(--su-muted);
    font-size: 0.8125rem;
}

.danger-form code {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--su-red-bg);
    color: var(--su-red-text);
    font-family: var(--font-family-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.danger-form input[type="text"] {
    width: min(380px, 100%);
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface);
    color: var(--su-text);
    font-size: 0.875rem;
}

.danger-form input[type="text"]:focus {
    border-color: var(--su-red);
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.18);
    outline: none;
}

.danger-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--su-red);
    border-radius: var(--su-radius-xs);
    background: var(--su-red);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-danger:hover {
    background: #d92d20;
    border-color: #d92d20;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--su-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-surface-2);
    color: var(--su-text);
    font-size: 0.8125rem;
}

.btn-cancel:hover {
    border-color: var(--su-muted);
    color: var(--su-text);
    text-decoration: none;
}

.danger-zone {
    border-color: var(--su-red-border);
    background: linear-gradient(180deg, var(--su-red-bg), var(--su-surface) 72%);
}

.btn-danger-ghost {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--su-red-border);
    border-radius: var(--su-radius-xs);
    background: var(--su-red-bg);
    color: var(--su-red-text) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-danger-ghost:hover {
    border-color: var(--su-red);
    background: var(--su-red);
    color: #ffffff !important;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   13. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .dash-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    #header {
        padding: 0 20px;
    }

    body #content {
        padding: 18px 20px 44px;
    }

    div.breadcrumbs {
        padding: 14px 20px 0;
    }

    #footer {
        padding: 0 20px 20px;
    }

    #changelist {
        flex-direction: column;
        align-items: stretch;
    }

    body #changelist-filter {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
    }

    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 767px) {
    :root {
        --su-header-h: 60px;
    }

    /* responsive.css 在主题之后加载，这里用更高的选择器优先级压住它 */
    body #header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        height: var(--su-header-h);
        padding: 0 14px;
    }

    body #header #branding {
        min-width: 0;
    }

    body .brand {
        gap: 9px;
    }

    body .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    body .brand-text strong {
        font-size: 0.9375rem;
    }

    body .brand-text small {
        display: none;
    }

    body #user-tools {
        gap: 2px;
        margin: 0;
        flex-wrap: nowrap;
        line-height: 1.4;
        text-align: right;
    }

    body .welcome-text {
        display: none;
    }

    body .welcome {
        margin-right: 0;
    }

    body .welcome-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    body .userlink {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    body #content {
        padding: 16px 14px 36px;
    }

    div.breadcrumbs {
        padding: 12px 14px 0;
    }

    /* 手机上「最新报名」只保留关键列，避免横向滚动 */
    .card-latest .mini-table thead th:last-child,
    .card-latest .mini-table tbody td:last-child {
        display: none;
    }

    .hero {
        padding: 22px 20px;
    }

    .hero h1 {
        font-size: 1.375rem;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .card {
        padding: 16px;
    }

    .bars {
        height: 180px;
        gap: 6px;
    }

    .bar-week {
        display: none;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-aside {
        display: none;
    }

    .login-panel {
        padding: 64px 20px 40px;
    }

    .login-card {
        padding: 28px 22px 24px;
    }

    #toolbar form {
        flex-wrap: wrap;
    }

    #toolbar #searchbar {
        flex: 1 1 100%;
    }

    #result_list thead th .text a,
    #result_list thead th .text span {
        padding: 10px;
    }

    #result_list tbody th,
    #result_list tbody td {
        padding: 10px;
    }

    .submit-row {
        position: static;
    }

    .submit-row a.deletelink {
        margin-left: 0;
    }

    .aligned label {
        width: auto;
        float: none;
        padding-bottom: 6px;
    }

    .aligned .form-row input,
    .aligned .form-row select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body .userlink-password {
        display: none;
    }

    body .brand-text strong {
        font-size: 0.875rem;
    }

    .stat-grid {
        gap: 10px;
    }
}

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

@media print {
    #header,
    .object-tools,
    #changelist-filter,
    .paginator,
    .submit-row,
    #footer {
        display: none !important;
    }

    body,
    .card,
    fieldset.module {
        box-shadow: none !important;
        background: #ffffff !important;
    }

    #content {
        padding: 0;
        max-width: none;
    }
}