/* ================================================================
   C端页面共享组件样式
   Design System: xyt-edu-platform (Minimalism)
   Primary: #2563EB | Accent: #EA580C
   Fonts: Outfit (headings) / Work Sans (body)
================================================================ */

/* 焦点环 token：替代硬编码 rgba，便于主题统一（被各页面 :root 继承/覆盖） */
:root {
    --color-primary-ring:         rgba(37, 99, 235, 0.12);
    --color-primary-ring-strong:  rgba(37, 99, 235, 0.25);
}

/* ---- PAGE HEADER ---- */
.page-header {
    margin-bottom: var(--space-6);
}

.page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
    line-height: 1.2;
}

.page-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ---- FILTER CARD ---- */
.filter-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.filter-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.filter-form-row.no-gap {
    gap: 0;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
}

.filter-input {
    height: 38px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    width: 100%;
}

.filter-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* =========================================================
   统一下拉选择组件  ·  .c-select
   适用：所有 <select>（含 .filter-select / .form-select / .recommend-select）
   设计要点（ui-ux-pro-max）：
   - 44px 触控高度（满足 ≥44 触控目标）
   - 线性 chevron 箭头（与项目 Phosphor 风格图标一致）
   - 清晰可见焦点环（3px，符合 WCAG 焦点可见性，3:1 对比）
   - hover / focus / disabled 稳定交互态，无布局抖动
   注：<option> 内容由各页面自行定义，原生 popup 不受 CSS 深度定制
   ========================================================= */
.c-select,
.filter-select,
.form-select,
.recommend-select {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-foreground);
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.c-select:hover,
.filter-select:hover,
.form-select:hover,
.recommend-select:hover {
    border-color: var(--color-primary);
}

.c-select:focus,
.filter-select:focus,
.form-select:focus,
.recommend-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.c-select:disabled,
.filter-select:disabled,
.form-select:disabled,
.recommend-select:disabled {
    background-color: var(--color-background);
    color: var(--color-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: .75;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.filter-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: var(--space-1);
}

.filter-divider {
    height: 38px;
    width: 1px;
    background: var(--color-border);
    align-self: stretch;
}

/* ---- BUTTONS ---- */
.btn-primary-sm,
.btn-outline-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    font-family: var(--font-body);
    border: none;
}

.btn-primary-sm {
    background: var(--color-primary);
    color: #fff;
}

.btn-primary-sm:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.btn-outline-sm {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
}

.btn-outline-sm:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: #BFDBFE;
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none !important;
    font-family: var(--font-body);
    transition: background var(--transition), transform 80ms ease;
    cursor: pointer;
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.btn-accent:active {
    transform: scale(0.98);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none !important;
    font-family: var(--font-body);
    transition: color var(--transition);
    cursor: pointer;
}

.btn-ghost:hover {
    color: var(--color-primary);
}

/* ---- DATA TABLE CARD ---- */
.table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.table-card-title {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

.table-card-meta {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.table-card-body {
    padding: 0;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-family: var(--font-body);
}

.data-table thead {
    background: var(--color-background);
}

.data-table thead th {
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
}

.data-table thead th.text-end,
.data-table tbody td.text-end {
    text-align: right !important;
}

.data-table tbody tr {
    transition: background var(--transition);
    border-bottom: 1px solid var(--color-border);
}

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

.data-table tbody tr.row-link {
    cursor: pointer;
}

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

.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-foreground);
    vertical-align: middle;
}

.data-table .cell-link {
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none !important;
    transition: color var(--transition);
}

.data-table .cell-link:hover {
    color: var(--color-primary);
}

.data-table .cell-muted {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.data-table .cell-score {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9375rem;
}

.data-table .cell-success {
    color: var(--color-success);
    font-weight: 600;
}

.data-table .cell-danger {
    color: var(--color-danger);
    font-weight: 600;
}

/* Badge variants */
.badge-univ {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid #BFDBFE;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.badge-subject {
    background: #F0F9FF;
    color: #0369A1;
    border: 1px solid #BAE6FD;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
}

.badge-free {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #86EFAC;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-vip {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-risk-rush {
    background: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

.badge-risk-stable {
    background: #FEF9C3;
    color: #854D0E;
    border: 1px solid #FDE047;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

.badge-risk-safe {
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #86EFAC;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

/* ---- PAGINATION ---- */
.pagination-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.pagination-info {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

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

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    transition: all var(--transition);
    cursor: pointer;
    font-family: var(--font-body);
}

.pagination-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.pagination-btn.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination-btn.disabled {
    color: var(--color-muted);
    background: var(--color-background);
    border-color: var(--color-border);
    pointer-events: none;
    cursor: default;
}

.pagination-ellipsis {
    color: var(--color-muted);
    padding: 0 var(--space-1);
}

/* ---- STAT CARDS (inline summary) ---- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.stat-pill {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    position: relative;
    overflow: hidden;
}

.stat-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.stat-pill-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-pill-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ---- EMPTY STATE ---- */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
}

.empty-icon {
    width: 64px;
    height: 64px;
    background: var(--color-background);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--color-muted);
    font-size: 1.5rem;
}

.empty-state h5 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: var(--space-2);
}

.empty-state p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* ---- SECTION CARD ---- */
.section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.section-card-header i {
    color: var(--color-primary);
    font-size: 1.125rem;
}

.section-card-title {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
    flex: 1;
}

.section-card-body {
    padding: var(--space-5);
}

/* ---- INFO ALERT ---- */
.info-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.info-alert i {
    color: var(--color-primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.info-alert-text {
    font-size: 0.875rem;
    color: var(--color-foreground);
    flex: 1;
}

.warning-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.warning-alert i {
    color: var(--color-accent);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.warning-alert-text {
    font-size: 0.875rem;
    color: var(--color-foreground);
    flex: 1;
}

/* ---- TABS ---- */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-5);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none !important;
}

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

.tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-btn i {
    font-size: 0.875rem;
}

/* ---- BREADCRUMB ---- */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

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

.page-breadcrumb a:hover {
    color: var(--color-primary);
}

.page-breadcrumb .separator {
    color: var(--color-muted);
}

.page-breadcrumb .current {
    color: var(--color-foreground);
    font-weight: 500;
}

/* ---- PROGRESS BAR ---- */
.progress-bar-track {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 100px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 100px;
    transition: width 300ms ease;
}

.progress-bar-fill.success {
    background: var(--color-success);
}

.progress-bar-fill.warning {
    background: #F59E0B;
}

.progress-bar-fill.danger {
    background: var(--color-danger);
}

/* ---- FORM ELEMENTS ---- */
.form-label-required {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: var(--space-2);
    display: block;
}

.form-label-required::after {
    content: ' *';
    color: var(--color-danger);
}

.form-input {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.form-input::placeholder {
    color: var(--color-muted);
}



.form-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.form-textarea {
    width: 100%;
    min-height: 100px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    resize: vertical;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Checkbox / Radio */
.form-check-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.form-check-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.form-check-item input[type="checkbox"],
.form-check-item input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.form-check-item span {
    font-size: 0.875rem;
    color: var(--color-foreground);
}

/* ---- DESCRIPTION LIST ---- */
.desc-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    font-size: 0.875rem;
}

.desc-list dt {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
}

.desc-list dd {
    padding: var(--space-3) var(--space-4);
    color: var(--color-foreground);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.desc-list dt:last-of-type ~ dd:last-of-type {
    border-bottom: none;
}

/* ---- PAGE SECTION SPACING ---- */
.page-content {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 767.98px) {
    .filter-form-row {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions {
        grid-column: 1 / -1;
    }

    .data-table {
        font-size: 0.8125rem;
    }

    .data-table thead th,
    .data-table tbody td {
        padding: var(--space-2) var(--space-3);
    }

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

    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .filter-form-row {
        grid-template-columns: 1fr;
    }

    .pagination-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-simple {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ---- AUTH PAGE ---- */
.auth-page {
    min-height: calc(100vh - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    background: var(--color-background);
}

.auth-container {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

/* Brand */
.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.auth-brand-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
}

.auth-brand-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    letter-spacing: -0.01em;
}

/* Card */
.auth-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.auth-card-header {
    padding: var(--space-8) var(--space-8) var(--space-4);
    text-align: center;
}

.auth-card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.auth-card-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Tabs */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin: 0 var(--space-8);
}

.auth-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.auth-tab i {
    font-size: 0.875rem;
}

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

.auth-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Form */
.auth-form {
    padding: var(--space-6) var(--space-8) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.auth-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.auth-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.auth-input::placeholder {
    color: var(--color-muted);
}

.auth-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.auth-input.is-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.auth-field-error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    min-height: 1em;
}

.auth-hint {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.auth-hint a {
    color: var(--color-primary);
    font-weight: 500;
}

/* SMS row */
.auth-sms-row {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
}

.auth-input-sms {
    flex: 1;
}

.auth-sms-btn {
    flex-shrink: 0;
    min-width: 110px;
    height: 46px;
    padding: 0 var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-primary);
    background: transparent;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-sms-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
}

.auth-sms-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Checkboxes */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.auth-check-input {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.auth-check-label {
    font-size: 0.8125rem;
    color: var(--color-foreground);
    line-height: 1.5;
    cursor: pointer;
}

.auth-check-label a {
    color: var(--color-primary);
    font-weight: 500;
}

.auth-check-label--muted {
    color: var(--color-text-secondary);
}

/* Submit */
.auth-submit {
    width: 100%;
    height: 50px;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), transform 80ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.auth-submit:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.auth-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.auth-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.auth-submit-loading {
    display: none;
}

.auth-submit.is-loading .auth-submit-text {
    display: none;
}

.auth-submit.is-loading .auth-submit-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.auth-submit.is-success {
    background: var(--color-success);
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* Footer link */
.auth-footer-link {
    text-align: center;
    padding: 0 var(--space-8) var(--space-6);
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.auth-back-link:hover {
    color: var(--color-primary);
}

/* Toast */
.auth-toast {
    position: fixed;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-foreground);
    color: #fff;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 9999;
    white-space: nowrap;
}

.auth-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.auth-toast--success i {
    color: #4ade80;
}

.auth-toast--error i {
    color: #f87171;
}

/* Responsive */
@media (max-width: 575.98px) {
    .auth-card-header,
    .auth-form,
    .auth-tabs {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .auth-tabs {
        margin-left: var(--space-5);
        margin-right: var(--space-5);
    }

    .auth-sms-row {
        flex-direction: column;
    }

    .auth-sms-btn {
        width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---- PROFILE PAGE ---- */
.profile-page {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

.profile-page-header {
    margin-bottom: var(--space-8);
}

.profile-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
}

.profile-page-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Layout: Sidebar + Main */
.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* Sidebar */
.profile-sidebar {
    position: sticky;
    top: calc(68px + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* User Card */
.profile-user-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.profile-avatar {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-user-info {
    width: 100%;
}

.profile-user-name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin-bottom: var(--space-1);
}

.profile-user-mobile {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.profile-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.profile-vip-badge i {
    font-size: 0.75rem;
}

.profile-user-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.profile-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.profile-meta-label {
    color: var(--color-text-secondary);
}

.profile-meta-value {
    font-weight: 600;
    color: var(--color-foreground);
}

.profile-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-danger);
    border: 1.5px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: transparent;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.profile-logout-btn:hover {
    background: var(--color-danger);
    color: #fff;
}

/* Benefits Card */
.profile-benefits-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.profile-benefits-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-foreground);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.profile-benefits-title i {
    color: var(--color-accent);
}

.profile-benefits-list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.profile-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.profile-benefit-item i {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.profile-benefit-item--on i {
    color: var(--color-success);
}

.profile-benefit-item--off i {
    color: var(--color-muted);
}

.profile-benefit-item--off a {
    color: var(--color-primary);
    font-weight: 500;
}

/* Main Content */
.profile-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Quick Links */
.profile-quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.profile-quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform 80ms ease;
    box-shadow: var(--shadow-sm);
}

.profile-quick-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.profile-quick-link-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.profile-quick-link-icon--blue  { background: #EFF6FF; color: var(--color-primary); }
.profile-quick-link-icon--amber { background: #FFFBEB; color: #D97706; }
.profile-quick-link-icon--green  { background: #F0FDF4; color: var(--color-success); }
.profile-quick-link-icon--purple { background: #F5F3FF; color: #7C3AED; }

.profile-quick-link-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-quick-link-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.profile-quick-link-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.profile-quick-link-arrow {
    color: var(--color-muted);
    font-size: 0.875rem;
    transition: color var(--transition), transform var(--transition);
}

.profile-quick-link:hover .profile-quick-link-arrow {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* Section Card */
.profile-section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.profile-section-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

.profile-section-title i {
    color: var(--color-primary);
}

.profile-section-body {
    padding: var(--space-5);
}

.profile-section-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}

/* Info List */
.profile-info-list {
    margin: 0;
}

.profile-info-row {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
}

.profile-info-row:last-child {
    border-bottom: none;
}

.profile-info-label {
    width: 100px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
}

.profile-info-value {
    flex: 1;
    font-size: 0.875rem;
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.profile-info-hint {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* Badges */
.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
}

.profile-badge--vip {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
}

.profile-badge--success {
    background: #DCFCE7;
    color: #15803D;
}

.profile-badge--default {
    background: var(--color-background);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.profile-badge-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.8125rem;
}

/* AI 报告列表（个人中心） */
.profile-section-header--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.profile-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-report-item + .profile-report-item {
    border-top: 1px solid var(--color-border);
}

.profile-report-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}

.profile-report-link:hover {
    background: var(--color-background);
}

.profile-report-main {
    flex: 1;
    min-width: 0;
}

.profile-report-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 4px;
}

.profile-report-summary {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 6px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.profile-report-arrow {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.profile-report-empty {
    text-align: center;
    padding: var(--space-5) var(--space-3);
}

.profile-report-empty i {
    font-size: 2rem;
    color: var(--color-border);
}

.profile-report-empty-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 var(--space-4);
    line-height: 1.6;
}

.profile-report-empty-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.profile-report-empty-btn:hover {
    opacity: .9;
    color: #fff;
}

/* Password Form */
.profile-pwd-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.profile-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.profile-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.profile-form-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

.profile-form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.profile-form-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.profile-form-actions {
    padding-top: var(--space-2);
}

.profile-submit-btn {
    min-width: 140px;
    height: 44px;
    padding: 0 var(--space-6);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), transform 80ms ease;
}

.profile-submit-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.profile-submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.profile-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.profile-submit-btn.is-loading {
    position: relative;
    color: transparent;
}

.profile-submit-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
}

/* Responsive */
@media (max-width: 991.98px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        position: static;
    }

    .profile-user-card {
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        gap: var(--space-4);
    }

    .profile-avatar {
        width: 56px;
        height: 56px;
    }

    .profile-user-info {
        flex: 1;
    }

    .profile-user-meta {
        width: 100%;
    }

    .profile-logout-btn {
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .profile-quick-links {
        grid-template-columns: 1fr;
    }

    .profile-info-label {
        width: 80px;
    }
}

@media (max-width: 575.98px) {
    .profile-info-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .profile-info-label {
        width: auto;
    }
}

/* ---- ACTIVATE PAGE ---- */
.activate-card {
    text-align: center;
}

.activate-icon-wrap {
    padding-top: var(--space-8);
    display: flex;
    justify-content: center;
}

.activate-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #D97706;
}

.activate-code-input {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.activate-submit {
    background: linear-gradient(135deg, var(--color-accent), #F97316) !important;
}

.activate-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-accent-hover), #EA580C) !important;
}

.activate-no-code {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.activate-buy-link {
    color: var(--color-primary);
    font-weight: 600;
}


/* ---- ASSESSMENT PAGE ---- */
/* ---- ASSESSMENT PAGE ----
   Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4
   macrostructure: Grid-Led Catalog · genre: editorial · theme: Newsprint
   design tokens: xyt-edu-platform (--color-primary/accent/foreground/success/danger)
   motion stance: subtle stagger · 200ms hover (matches layout tokens)
*/
.assessment-page {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

/* Eyebrow:刊头风格 metric 行 (single eyebrow section, anti-slop ≤ 1 per 3 sections) */
.assessment-metric-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4) var(--space-6);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;                /* Newsprint square edge */
}

.assessment-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-foreground);   /* column rule */
    min-width: 0;
}

.assessment-metric-label {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.3;
}

.assessment-metric-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Filter strip — square hairline buttons, matches nav N11 family */
.assessment-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);     /* editorial divider */
}

.assessment-filter-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 var(--space-4);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.assessment-filter-btn:hover {
    color: var(--color-foreground);
    border-color: var(--color-foreground);
}

.assessment-filter-btn:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

.assessment-filter-btn.active {
    color: var(--color-on-foreground);
    background: var(--color-foreground);
    border-color: var(--color-foreground);
}

/* Loading state */
.assessment-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
    gap: var(--space-4);
}

.spinner-lg {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

/* Error state */
.assessment-error {
    text-align: center;
    padding: var(--space-8) 0;
    color: var(--color-danger);
    font-size: 0.9375rem;
}

/* Empty state */
.assessment-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
    text-align: center;
}

.assessment-empty .assessment-empty-icon {
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-border);
    border-radius: 0;             /* square */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-foreground);
}

.assessment-empty h5 {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

.assessment-empty p {
    font-size: 0.875rem;
    margin: 0;
}

/* Cards grid */
.assessment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}

/* Single card — Newsprint square hairline + left vertical accent rule */
.assessment-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--transition), background var(--transition);
}

.assessment-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--card-accent, var(--color-foreground));
    transition: width var(--transition);
}

.assessment-card:hover {
    border-color: var(--color-foreground);
    background: #FCFCFD;
}

.assessment-card:hover::before {
    width: 5px;
}

.assessment-card:focus-within {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

/* Header: index number (left) · type label (right) */
.assessment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.assessment-card-index {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.assessment-card-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--card-accent, var(--color-foreground));
    background: transparent;
    border: 0;
    border-radius: 0;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

.assessment-card-type i {
    font-size: 0.75rem;
}

.assessment-card-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-family: var(--font-body);
    margin-left: auto;
}

/* Body */
.assessment-card-body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.assessment-card-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.005em;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.assessment-card-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    margin-top: -4px;
    line-height: 1.5;
}

.assessment-card-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.assessment-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.assessment-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    font-family: var(--font-body);
    line-height: 1.4;
}

/* Stats footer-of-body — hairline + tabular numerals */
.assessment-card-stats {
    display: flex;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.assessment-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.assessment-stat i {
    font-size: 0.8125rem;
}

/* Footer — full-width hairline + editorial arrow link */
.assessment-card-footer {
    padding: 0;
    border-top: 1px solid var(--color-foreground);   /* sharper divider for CTA */
}

.assessment-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    height: 46px;
    padding: 0 var(--space-5);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    transition: color var(--transition), padding-right var(--transition);
    white-space: nowrap;
}

.assessment-card-cta:hover {
    color: var(--card-accent, var(--color-primary));
    padding-right: calc(var(--space-5) + 6px);
}

.assessment-card-cta:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: -2px;
}

.assessment-card-cta i {
    transition: transform var(--transition);
    font-size: 1rem;
}

.assessment-card-cta:hover i {
    transform: translateX(4px);
}

/* Reduced motion: disable transitions but keep colour feedback */
@media (prefers-reduced-motion: reduce) {
    .assessment-card,
    .assessment-card::before,
    .assessment-card-cta,
    .assessment-card-cta i,
    .assessment-filter-btn {
        transition: none;
    }
}

/* Responsive: 1-column stack, keep meta/index visible */
@media (max-width: 767.98px) {
    .assessment-cards {
        grid-template-columns: 1fr;
    }

    .assessment-metric-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .assessment-card-cta {
        height: 44px;     /* ≥44 touch target */
    }
}

@media (max-width: 479.98px) {
    .assessment-metric-bar {
        grid-template-columns: 1fr;
    }
}


/* ---- QUIZ / ASSESSMENT DO PAGE ----
   Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
   macrostructure: Single Focus Flow · genre: editorial · theme: Newsprint
   design tokens: xyt-edu-platform
   2026-09-26 · redesign #3 · micro-redesign on top of #2 · preserve macrostructure + theme
   anti-slop removals (round 2): inline rgba scrim · english eyebrow "Question 01" ·
                                  eyebrow+header info duplication · ellipsis loading text ·
                                  primary-fill progress replaced by foreground fill reset to primary ·
                                  legacy marker/check hidden DOM removed from JS render
   reference: xinzhiyuan/.hallmark/log.json#2026-09-26-do-micro
*/

.quiz-page {
    min-height: calc(100vh - 68px);
    background: var(--color-background);
    padding: var(--space-8) var(--space-4) var(--space-16);
    display: flex;
    justify-content: center;
}

.quiz-container {
    width: 100%;
    max-width: 680px;
}

/* Header — title + hairline + tabular numerals */
.quiz-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.quiz-title {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    font-weight: 700;
    color: var(--color-foreground);
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-5);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Progress wrap — bar (full-width row) + step counter + timer */
.quiz-progress-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "bar   bar"
        "step  timer";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
}

.quiz-progress-bar {
    grid-area: bar;
    width: 100%;
    height: 3px;
    background: var(--color-border);
    position: relative;
    overflow: hidden;
}

.quiz-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--color-primary);
    transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1),
                background 200ms ease;
}

.quiz-progress-bar[data-progress-state="warning"] .quiz-progress-fill {
    background: var(--color-accent);
}

.quiz-progress-bar[data-progress-state="danger"] .quiz-progress-fill {
    background: var(--color-danger);
}

.quiz-progress-text {
    grid-area: step;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.quiz-progress-text strong {
    color: var(--color-foreground);
    font-weight: 700;
}

/* Timer — hairline pill, tabular monospace */
.quiz-timer {
    grid-area: timer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    background: transparent;
    border: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.02em;
    justify-self: end;
}

.quiz-timer i {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.quiz-timer[data-state="warning"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.quiz-timer[data-state="warning"] i {
    color: var(--color-accent);
}
.quiz-timer[data-state="danger"] {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.quiz-timer[data-state="danger"] i {
    color: var(--color-danger);
}

/* Instruction — square hairline + left vertical accent */
.quiz-instruction {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-foreground);
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--color-foreground);
    margin-bottom: var(--space-6);
    line-height: 1.55;
}

.quiz-instruction i {
    color: var(--color-foreground);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.9375rem;
}

/* Quiz Card — square hairline + left vertical accent */
.quiz-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--space-6);
    position: relative;
}

.quiz-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--color-foreground);
}

.quiz-question-wrap {
    padding: var(--space-6) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/* Question — no eyebrow (avoid "Question 01" english micro-pattern + duplicate with header counter)
   questionSeq updates now drive aria-label on the heading, not a visible chip. */
.quiz-question {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Question skeleton — three hairline bars, editorial rhythm, no animated ellipsis */
.quiz-question.is-loading {
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.quiz-question.is-loading > .skeleton-bar {
    display: block;
    height: 0.95em;
    margin-bottom: var(--space-2);
    background: var(--color-border);
    border-radius: 0;
    width: 100%;
    animation: quiz-skeleton-pulse 1.4s ease-in-out infinite;
}
.quiz-question.is-loading > .skeleton-bar:nth-child(2) { width: 78%; }
.quiz-question.is-loading > .skeleton-bar:last-child { width: 64%; margin-bottom: 0; }
@keyframes quiz-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-question.is-loading > .skeleton-bar { animation: none; opacity: 0.85; }
}

.quiz-options {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Option — square hairline + left vertical accent + subtle hover lift */
.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    transition: border-color var(--transition),
                border-left-color var(--transition),
                border-left-width var(--transition),
                padding-left var(--transition),
                background var(--transition),
                transform var(--transition);
    position: relative;
    min-height: 56px;
    will-change: transform;
}

.quiz-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

.quiz-option:hover {
    border-color: var(--color-foreground);
    border-left-color: var(--color-foreground);
    transform: translateY(-1px);
}

.quiz-option:active {
    transform: translateY(0);
}

.quiz-option.is-selected {
    border-color: var(--color-foreground);
    border-left-color: var(--color-foreground);
    border-left-width: 5px;
    padding-left: calc(var(--space-5) - 2px);
    background: var(--color-background);
}

.quiz-option.is-selected .quiz-option-text {
    font-weight: 700;
}

.quiz-option:focus-within {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

.quiz-option-letter {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: color var(--transition),
                border-color var(--transition),
                background var(--transition);
    position: relative;
    z-index: 2;
}

.quiz-option.is-selected .quiz-option-letter {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-on-foreground);
}

.quiz-option-text {
    font-size: 0.9375rem;
    color: var(--color-foreground);
    flex: 1;
    line-height: 1.5;
    transition: font-weight var(--transition);
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    position: relative;
    z-index: 2;
}

/* MBTI binary — same square language, larger letter */
.quiz-option--binary {
    padding: var(--space-5) var(--space-5);
    gap: var(--space-4);
}

.quiz-option--binary .quiz-option-letter {
    width: 36px;
    height: 36px;
    font-size: 0.9375rem;
}

.quiz-option--binary.is-selected {
    padding-left: calc(var(--space-5) - 2px);
}

/* Navigation — hairline prev + solid foreground next/submit */
.quiz-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-3);
}

.quiz-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 46px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition),
                color var(--transition),
                border-color var(--transition);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-foreground);
    white-space: nowrap;
    min-width: 120px;
    text-decoration: none;
}

.quiz-nav-btn:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

.quiz-nav-btn--prev:hover:not(:disabled) {
    background: var(--color-background);
    border-color: var(--color-foreground);
}

.quiz-nav-btn--prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--color-muted);
    border-color: var(--color-border);
}

.quiz-nav-btn--next {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-on-foreground);
}

.quiz-nav-btn--next:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-foreground);
}

.quiz-nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.quiz-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-8);
    height: 46px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--color-on-foreground);
    background: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.quiz-submit-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.quiz-submit-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

/* ---- Quiz Modal — square hairline, no glass, no xl-shadow, tokenized scrim ---- */
.quiz-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.quiz-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.quiz-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-6) var(--space-6) var(--space-5);
    max-width: 420px;
    width: 100%;
    text-align: left;
    transform: translateY(12px);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-modal-overlay.is-visible .quiz-modal {
    transform: translateY(0);
}

.quiz-modal-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
    color: var(--color-foreground);
    background: transparent;
}

.quiz-modal-icon:empty {
    display: none;
}

.quiz-modal-icon[data-tone="success"] { color: var(--color-success); border-color: var(--color-success); }
.quiz-modal-icon[data-tone="error"]   { color: var(--color-danger);  border-color: var(--color-danger); }
.quiz-modal-icon[data-tone="warning"] { color: var(--color-accent);  border-color: var(--color-accent); }
.quiz-modal-icon[data-tone="info"]    { color: var(--color-primary); border-color: var(--color-primary); }

.quiz-modal-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.quiz-modal-msg {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5);
    line-height: 1.6;
}

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

.quiz-modal-btn {
    min-width: 96px;
    height: 42px;
    padding: 0 var(--space-5);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition),
                color var(--transition),
                border-color var(--transition);
    border: 1px solid var(--color-border);
    outline: none;
    background: transparent;
    color: var(--color-foreground);
    white-space: nowrap;
}

.quiz-modal-btn:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
}

.quiz-modal-btn--cancel {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.quiz-modal-btn--cancel:hover {
    border-color: var(--color-foreground);
    color: var(--color-foreground);
    background: transparent;
}

.quiz-modal-btn--primary {
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    border-color: var(--color-foreground);
}

.quiz-modal-btn--primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.quiz-modal-btn--ok {
    background: var(--color-primary);
    color: var(--color-on-foreground);
    border-color: var(--color-primary);
}

.quiz-modal-btn--ok:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
    .quiz-progress-fill,
    .quiz-option,
    .quiz-option-letter,
    .quiz-option-text,
    .quiz-nav-btn,
    .quiz-submit-btn,
    .quiz-modal-btn,
    .quiz-modal,
    .quiz-modal-overlay {
        transition: none;
    }
    .quiz-submit-btn:active { transform: none; }
}

/* Responsive */
@media (max-width: 575.98px) {
    .quiz-card::before { display: none; }      /* full-width on mobile */
    .quiz-card { border-left: 0; }
    .quiz-question-wrap { padding: var(--space-5) var(--space-4) var(--space-3); }
    .quiz-options { padding: var(--space-4); }
    .quiz-option {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
        min-height: 52px;
    }
    .quiz-option.is-selected {
        border-left-width: 3px;
        padding-left: calc(var(--space-4) - 0px);
    }
    .quiz-nav { flex-wrap: wrap; }
    .quiz-nav-btn { flex: 1; min-width: 0; }
    .quiz-nav-btn--next { display: none; }
    .quiz-nav-center { order: 3; width: 100%; }
    .quiz-progress-wrap {
        grid-template-columns: 1fr auto;
    }
    .quiz-timer { justify-self: end; }
}


/* ============================================
   RESULT PAGE · editorial archive
   Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4
   macrostructure: Score-Led Report · genre: editorial
   tokens: xyt-edu 全局 token · 0 自创色
   anti-slop: 0 阴影 · 0 圆角 · 0 浅色填充 badge
              0 section 装饰 icon · 0 em-dash
              eyebrow 全页 1 个 · 进度条改实色 + tabular-nums
              左对齐替代居中 header
   ============================================ */
.result-page {
    padding: var(--space-12, 3rem) 0 var(--space-16, 4rem);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

.result-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--space-5, 1.25rem);
}

/* Loading: editorial 文字 + hairline 进度条 */
.result-loading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-20, 5rem) 0;
    color: var(--color-text-secondary);
    gap: var(--space-4, 1rem);
}

.result-loading-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-muted);
    font-feature-settings: "tnum";
}

.result-loading-text {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin: 0;
}

.result-loading-bar {
    width: 160px;
    height: 2px;
    background: var(--color-border);
    position: relative;
    overflow: hidden;
    margin-top: var(--space-2, 0.5rem);
}

.result-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--color-foreground);
    animation: resultLoad 1.4s ease-in-out infinite;
}

@keyframes resultLoad {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Error state — hairline 直角, 0 阴影 */
.result-error-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-10, 2.5rem) var(--space-6, 1.5rem);
}

/* ===== Editorial opener (replaces AI-style centered success card) ===== */
.result-header {
    background: var(--color-surface);
    border-top: 2px solid var(--color-foreground);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    margin-bottom: var(--space-12, 3rem);
    text-align: left;
    padding: var(--space-8, 2rem) 0 var(--space-6, 1.5rem);
}

/* 隐藏原 header 的绿色对勾 icon */
.result-header-icon {
    display: none;
}

.result-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-foreground);
    margin: 0 0 var(--space-3, 0.75rem);
    font-feature-settings: "tnum";
}

.result-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 var(--space-6, 1.5rem);
    padding: 0;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.result-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-3, 0.75rem);
    background: transparent;
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-foreground);
    font-feature-settings: "tnum";
}

.result-meta-dot {
    width: 4px;
    height: 4px;
    background: var(--color-muted);
    border-radius: 50%;
    flex-shrink: 0;
}

.result-meta-date {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-feature-settings: "tnum";
}

/* ===== Section · hairline 分隔, 直角, 0 阴影 ===== */
.result-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: var(--space-10, 2.5rem);
}

.result-section-header {
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.result-section-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-3, 0.75rem);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: none;
}

/* 隐藏 JS 嵌入的装饰 <i class="bi bi-*"> */
.result-section-title i,
.result-invalid i,
.result-error-card .empty-icon i {
    display: none;
}

.result-section-body {
    padding: var(--space-6, 1.5rem);
}

.result-section-body--center {
    text-align: left;
}

/* ===== Dimension item · tabular-nums, hairline 直角 progress ===== */
.result-dim-item {
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--color-border);
}

.result-dim-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-dim-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3, 0.75rem);
    gap: var(--space-3, 0.75rem);
}

.result-dim-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.3;
}

.result-dim-name strong {
    font-weight: 800;
}

.result-dim-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2, 0.5rem);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0;
    border: 1px solid var(--color-foreground);
    background: var(--color-surface);
    color: var(--color-foreground);
    white-space: nowrap;
    font-feature-settings: "tnum";
    letter-spacing: 0;
}

/* 全 badge 系列 · 白底黑边直角 · tabular-nums */
.badge-success,
.badge-warning,
.badge-secondary,
.badge-danger,
.badge-info,
.badge-light {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2, 0.5rem);
    background: var(--color-surface);
    color: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    font-feature-settings: "tnum";
    letter-spacing: 0;
}

/* Progress · 6px 高, 直角, 实色 fill */
.result-progress {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 0;
    overflow: hidden;
}

.result-progress-fill {
    height: 100%;
    border-radius: 0;
    transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.result-progress-fill--success   { background: #15803D; }
.result-progress-fill--warning   { background: #854D0E; }
.result-progress-fill--secondary { background: #475569; }
.result-progress-fill--danger    { background: #B91C1C; }
.result-progress-fill--info      { background: #0369A1; }

/* ===== Interpret / Top dim ===== */
.result-interpret {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-foreground);
    line-height: 1.7;
    margin: 0 0 var(--space-5, 1.25rem);
}

.result-top-dim {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: var(--color-surface);
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    flex-wrap: wrap;
}

.result-top-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.result-top-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-foreground);
    font-family: var(--font-heading);
}

.result-top-pct {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-feature-settings: "tnum";
}

.result-code-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2, 0.5rem);
    background: var(--color-foreground);
    color: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 0;
    margin-left: 0;
    font-feature-settings: "tnum";
    letter-spacing: 0.08em;
}

/* ===== DiSC · 改为 hairline 表格 ===== */
.result-disc-info {
    margin: 0;
}

.result-disc-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 0;
}

.result-disc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface);
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.result-disc-item:last-child {
    border-bottom: none;
}

.result-disc-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.result-disc-value {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2, 0.5rem);
    font-size: 0.8125rem;
    font-weight: 800;
    border-radius: 0;
    border: 1px solid var(--color-foreground);
    background: var(--color-surface);
    color: var(--color-foreground);
    font-feature-settings: "tnum";
}

/* ===== MBTI · editorial scoreboard ===== */
.result-mbti-header {
    text-align: left;
    background: var(--color-surface);
    border-top: 2px solid var(--color-foreground);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    margin-bottom: var(--space-10, 2.5rem);
    padding: var(--space-8, 2rem) 0;
}

.result-mbti-code {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 8vw, 6rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: 0.08em;
    line-height: 0.95;
    margin: 0 0 var(--space-3, 0.75rem);
    font-feature-settings: "tnum";
}

.result-mbti-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2, 0.5rem);
    font-family: var(--font-heading);
}

.result-mbti-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 60ch;
}

/* Axis · hairline row, 大字 + tabular-nums 计数 */
.result-axis-item {
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--color-border);
}

.result-axis-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.result-axis-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
}

.result-axis-a, .result-axis-b {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-foreground);
    font-feature-settings: "tnum";
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2, 0.5rem);
}

.result-axis-a strong, .result-axis-b strong {
    font-size: 1.5rem;
    font-weight: 800;
}

.result-axis-vs {
    font-size: 0.6875rem;
    color: var(--color-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.result-axis-bar {
    display: none; /* 替换为 hairline 行 + 大字计数 */
}

.result-axis-fill {
    display: none;
}

.result-axis-winner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-3, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.result-letter-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--color-surface);
    border: 1px solid var(--color-foreground);
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-foreground);
    margin: 0 var(--space-2, 0.5rem) var(--space-2, 0.5rem) 0;
    font-feature-settings: "tnum";
    letter-spacing: 0.04em;
}

/* ===== Traits · hairline 分组, 无装饰符 ===== */
.result-traits {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-border);
}

.result-trait {
    margin-bottom: var(--space-5, 1.25rem);
}

.result-trait:last-child {
    margin-bottom: 0;
}

.result-trait strong {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-foreground);
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.result-trait ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.result-trait li {
    font-size: 0.9375rem;
    color: var(--color-foreground);
    padding: var(--space-3, 0.75rem) 0;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}

.result-trait li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 删 ::before 装饰符 */
.result-trait li::before {
    content: none;
}

/* ===== Invalid · hairline 警告框, 左对齐, eyebrow ===== */
.result-invalid {
    text-align: left;
    padding: var(--space-6, 1.5rem);
    border: 1px solid var(--color-foreground);
    border-left-width: 4px;
    border-radius: 0;
    background: var(--color-surface);
}

.result-invalid-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2, 0.5rem);
}

.result-invalid h5 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2, 0.5rem);
    letter-spacing: -0.01em;
}

.result-invalid p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5, 1.25rem);
    line-height: 1.6;
}

/* ===== Actions · hairline 直角, 实色 hover ===== */
.result-actions {
    display: flex;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;
    margin-top: var(--space-8, 2rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-border);
}

.result-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--font-heading);
    border-radius: 0;
    text-decoration: none;
    transition: background 120ms linear, color 120ms linear;
    cursor: pointer;
    border: 1px solid var(--color-foreground);
    letter-spacing: 0;
}

.result-btn--primary {
    color: var(--color-surface);
    background: var(--color-foreground);
}

.result-btn--primary:hover {
    background: var(--color-surface);
    color: var(--color-foreground);
}

.result-btn--outline {
    color: var(--color-foreground);
    background: transparent;
    border: 1px solid var(--color-foreground);
}

.result-btn--outline:hover {
    background: var(--color-foreground);
    color: var(--color-surface);
}

/* ===== Responsive ===== */
@media (max-width: 575.98px) {
    .result-disc-items {
        grid-template-columns: 1fr;
    }

    .result-axis-header {
        flex-wrap: wrap;
    }

    .result-actions {
        flex-direction: column;
    }

    .result-btn {
        width: 100%;
    }

    .result-meta {
        gap: var(--space-2, 0.5rem);
    }

    .result-meta-dot {
        display: none;
    }
}


/* ---- HISTORY PAGE ---- */
.history-page {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

/* Loading */
.history-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
    gap: var(--space-4);
}

.history-error,
.history-auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

/* Cards */
.history-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* History Card */
.history-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.history-card:hover {
    box-shadow: var(--shadow-md);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
}

.history-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.history-card-title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.3;
}

.history-card-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.history-type-badge {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid #BFDBFE;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
}

.history-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px var(--space-2);
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #86EFAC;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
}

.history-score-badge i {
    font-size: 0.6875rem;
}

.history-score-unrated {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-background);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    border-radius: 100px;
}

.history-card-date {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

/* Dims */
.history-dims {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 var(--space-5) var(--space-3);
}

.history-dim-tag {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* Footer */
.history-card-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.history-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition);
}

.history-card-link:hover {
    gap: var(--space-2);
}

/* Responsive */
@media (max-width: 575.98px) {
    .history-card-header {
        flex-direction: column;
    }

    .history-card-date {
        align-self: flex-start;
    }
}


/* ---- COMBINATIONS PAGE ---- */
.comb-page {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

/* Group */
.comb-group {
    margin-bottom: var(--space-8);
}

.comb-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.comb-group-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.comb-group-icon--blue {
    background: #EFF6FF;
    color: var(--color-primary);
}

.comb-group-icon--amber {
    background: #FFFBEB;
    color: #D97706;
}

.comb-group-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
}

.comb-group-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Grid */
.comb-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-8);
}

.comb-cards {
    display: grid;
    /* 桌面端：6 列等宽，一行展示 6 种组合 → 两行展示 12 种 */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
}

/* Combo Card */
.comb-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: all var(--transition);
    min-width: 0; /* 防止子元素溢出导致 grid 撑破容器（gate 50）*/
}

.comb-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.comb-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    gap: var(--space-2);
}

.comb-card-primary {
    display: inline-flex;
    padding: 2px var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    border-radius: 100px;
    flex-shrink: 0;
}

.comb-card-order {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
}

.comb-card-name {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
    /* 长名字允许折行（"物理+化学+生物" 7 字，CJK 每字 ≈ 1em；6 列容器宽度足够） */
    word-break: break-word;
}

.comb-card-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.comb-subject-badge {
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* === 专业覆盖率区（每张卡片底部）===
   - 大数字 + 标签 + 进度条 + 等级 chip
   - 等级配色：excellent(highest) / high / medium / low / unset(grey)
   - 仅通过 data-level 切色，颜色变量统一在 :root 设计 token 里
========================================================================== */
.comb-card-coverage {
    margin-top: auto; /* 永远贴底对齐，多卡片高度不齐也整齐 */
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

.comb-card-coverage-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
}

.comb-card-coverage-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.comb-card-coverage-pct {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--coverage-color, var(--color-primary));
    letter-spacing: -0.02em;
}

.comb-card-coverage-pct-unit {
    font-size: 0.875rem;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.7;
}

.comb-card-coverage-bar {
    width: 100%;
    height: 6px;
    background: var(--color-background);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.comb-card-coverage-fill {
    height: 100%;
    background: var(--coverage-color, var(--color-primary));
    border-radius: 100px;
    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.comb-card-coverage-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: 100px;
    color: var(--coverage-color, var(--color-text-secondary));
    background: var(--coverage-tint, var(--color-background));
}

/* === 等级配色（与 .comb-card[data-level] 联动）===
   阈值：>=90 excellent · 80~89.99 high · 60~79.99 medium · <60 low
   unset 兜底：admin 未配置时显示中性灰
=========================================================== */
.comb-card[data-level="excellent"] {
    --coverage-color: #2563EB;
    --coverage-tint:   #EFF6FF;
}
.comb-card[data-level="high"] {
    --coverage-color: #16A34A;
    --coverage-tint:   #F0FDF4;
}
.comb-card[data-level="medium"] {
    --coverage-color: #D97706;
    --coverage-tint:   #FFFBEB;
}
.comb-card[data-level="low"] {
    --coverage-color: #DC2626;
    --coverage-tint:   #FEF2F2;
}
.comb-card[data-level="unset"] {
    --coverage-color: #94A3B8;
    --coverage-tint:   #F1F5F9;
}

.comb-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition);
    margin-top: var(--space-3);
}

.comb-card:hover .comb-card-cta {
    gap: var(--space-2);
}

.spinner-sm {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

/* === Responsive ===
   - <1200：6 列太挤，降到 4 列（每组 2 行 × 2 行 = 4 行）
   - <992 ：3 列
   - <768 ：2 列
   - <480 ：2 列（更紧凑的字号）
   - 全程 mobile 单行无横向滚动 + 主按钮不折行（gate 34 / 49）
=========================================================================== */
@media (max-width: 1199.98px) {
    .comb-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .comb-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .comb-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 479.98px) {
    .comb-cards {
        grid-template-columns: 1fr 1fr;
    }
    .comb-card {
        padding: var(--space-3);
    }
    .comb-card-name {
        font-size: 0.875rem;
    }
    .comb-card-coverage-pct {
        font-size: 1.25rem;
    }
}


/* ---- SUBJECT RECOMMEND PAGE ---- */
.recommend-page {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--color-background);
    min-height: calc(100vh - 68px);
}

.recommend-container {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Header */
.recommend-header {
    text-align: center;
}

.recommend-header-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--color-primary);
    margin: 0 auto var(--space-4);
}

.recommend-title {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--color-foreground);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.recommend-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Card */
.recommend-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Form */
.recommend-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.recommend-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.recommend-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.required-mark {
    color: var(--color-danger);
}

.recommend-label-hint {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.recommend-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

.recommend-input::placeholder {
    color: var(--color-muted);
}

.recommend-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}



.recommend-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 0;
}

/* RIASEC Grid */
.riasec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.riasec-item {
    cursor: pointer;
}

.riasec-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.riasec-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-background);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition);
}

.riasec-item:hover .riasec-box {
    border-color: var(--color-primary);
}

.riasec-item.is-active .riasec-box {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.riasec-letter {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-foreground);
}

.riasec-item.is-active .riasec-letter {
    color: var(--color-primary);
}

.riasec-name {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.riasec-item.is-active .riasec-name {
    color: var(--color-primary);
}

/* 键盘焦点可见性：隐藏原生勾选框但保留可聚焦，焦点环落在自定义盒子上 */
.riasec-item input:focus-visible + .riasec-box {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring-strong);
}

/* Submit */
.recommend-submit {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: #fff;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), transform 80ms ease;
    margin-top: var(--space-6);
}

.recommend-submit:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.recommend-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.recommend-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Result Card */
.recommend-result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.recommend-result-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-success);
    color: #fff;
}

.recommend-result-header i {
    font-size: 1.25rem;
}

.recommend-result-header h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.recommend-result-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Result Combo Item */
.result-combo-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-background);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition);
}

.result-combo-item--top {
    border-color: #FCD34D;
    background: #FFFBEB;
}

.result-combo-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.result-combo-item--top .result-combo-rank {
    color: #D97706;
    font-size: 1.5rem;
}

.result-combo-body {
    flex: 1;
}

.result-combo-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
}

.result-combo-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.result-combo-reasons {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.result-combo-score {
    text-align: center;
    flex-shrink: 0;
}

.result-combo-score-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
}

.result-combo-score-label {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* AI Analysis */
.result-ai-analysis {
    padding: var(--space-4);
    background: var(--color-primary-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
}

.result-ai-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-3);
}

.result-ai-title i {
    color: var(--color-primary);
}

.result-ai-text {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 575.98px) {
    .recommend-form-row {
        grid-template-columns: 1fr;
    }

    .riasec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-combo-item {
        flex-direction: column;
    }

    .result-combo-score {
        align-self: flex-start;
        text-align: left;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .result-combo-score-value {
        font-size: 1.25rem;
    }

    .result-combo-score-label {
        font-size: 0.75rem;
    }
}


/* ============================================
   LOGOUT MODAL
   ============================================ */
.logout-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: var(--space-4);
    box-sizing: border-box;
}

.logout-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.logout-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 360px;
    width: calc(100% - var(--space-8));
    text-align: center;
    box-shadow: var(--shadow-xl);
    margin: 0;
}

.logout-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 1.5rem;
}

.logout-modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2);
}

.logout-modal-msg {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    line-height: 1.6;
}

.logout-modal-actions {
    display: flex;
    gap: var(--space-3);
}

.logout-modal-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-block;
    border: none;
}

.logout-modal-btn--cancel {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
}

.logout-modal-btn--cancel:hover {
    background: var(--color-surface-hover, #f3f4f6);
    color: var(--color-foreground);
    border-color: var(--color-text-secondary);
}

.logout-modal-btn--confirm {
    background: var(--color-danger);
    color: #fff;
}

.logout-modal-btn--confirm:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* 通用确认模态框变体：xzyConfirm() 复用上面这套 logout-modal 样式 */
.logout-modal-icon--primary { background: rgba(37, 99, 235, 0.10); color: var(--color-primary); }
.logout-modal-icon--warning { background: rgba(180, 83, 9, 0.12); color: #B45309; }
.logout-modal-icon--danger  { background: var(--color-danger-bg, #fef2f2); color: var(--color-danger); }

.logout-modal-btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.logout-modal-btn--primary:hover {
    background: var(--color-primary-hover, #1D4ED8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .logout-modal {
        padding: var(--space-6);
    }

    .logout-modal-title {
        font-size: 1.125rem;
    }
}

/* =========================================================
   Custom Select Component
   用 div 模拟 <select>，使下拉选项面板完全可定制样式。
   原生 <select> 保留为表单数据源与事件源。
   设计要点（ui-ux-pro-max）：
   - 44px 触控高度，≥44 触控目标
   - 清晰焦点环 / 展开态视觉反馈
   - 选项 hover/selected/disabled 稳定态
   - 打开时下拉面板的阴影/圆角/层级统一
   ========================================================= */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* 隐藏原生 select，但仍参与表单提交、仍可向 label 暴露 */
.custom-select > select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 40px 0 var(--space-4);
    font-size: 0.9375rem;
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-foreground);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    user-select: none;
    -webkit-user-select: none;
}

.custom-select__trigger:hover {
    border-color: var(--color-primary);
}

.custom-select__trigger:focus-visible,
.custom-select.open .custom-select__trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring, rgba(37, 99, 235, .2));
}

.custom-select.is-disabled .custom-select__trigger {
    background-color: var(--color-background);
    color: var(--color-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: .75;
}

.custom-select__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1045;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transform-origin: top center;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.custom-select.open .custom-select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-select__option {
    padding: 10px var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-select__option:hover:not(.disabled):not(.selected) {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.custom-select__option.selected {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.custom-select__option.disabled {
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: .65;
}

@media (max-width: 640px) {
    .custom-select__dropdown {
        max-height: 220px;
    }
}

/* ==============================================================
   UNIVERSITY DETAIL · 院校详情组件 + 详情浮层（可复用）
   --------------------------------------------------------------
   Hallmark · component: university-detail / detail-modal · genre: modern-minimal
   theme: xyt-edu-platform (tokens preserved, 无新增色值)
   states: default · hover · focus-visible · active · loading · error · empty · success
   taste-skill dials: VARIANCE 3 / MOTION 2 / DENSITY 6
   contrast: pass (45-49) · 全篇零 em-dash
   组件文件：app/index/view/university/_detail.html
             app/index/view/_partial/university-detail-modal.html
   ============================================================== */

/* ---------- 组件本体：院校详情 ---------- */
.udt {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.udt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}
.udt-block { min-width: 0; }
.udt-block-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
}
.udt-block-title i {
    font-size: 0.9375rem;
    color: var(--color-primary);
}
.udt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.udt-empty { padding: var(--space-6) var(--space-2); text-align: center; }
.udt-empty p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.udt .desc-list { grid-template-columns: 112px 1fr; }
.udt .desc-list dd { font-variant-numeric: tabular-nums; }
.udt-num { font-variant-numeric: tabular-nums; }
.udt-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.udt .data-table { min-width: 460px; }

/* 皮肤 A · page：整页卡片（描边卡片，不再叠阴影） */
.udt--page { gap: var(--space-5); }
.udt--page .udt-grid { gap: var(--space-5); }
.udt--page .udt-block {
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* 皮肤 B · modal：浮层内扁平高密（容器本身已抬升，内部不再套卡） */
.udt--modal { gap: var(--space-6); }

/* =============================================================
   BAND TOGGLE · 只看 冲 / 稳 / 保（院校推荐 / 专业推荐 共用）
   -------------------------------------------------------------
   Hallmark · component: band-toggle · genre: modern-minimal
   theme: xyt-edu-platform (tokens preserved, 无新增色值)
   states: default · hover · focus-visible · active · disabled(该档 0 条) · busy · success(选中)
   选中态用本页已确立的深色实心嗓音（--color-foreground + --color-on-foreground ≈ 13:1），
   档位语义由段首键色方点承担（冲 danger / 稳 primary / 保 success），
   不用彩色填充 —— success 绿作小字仅 3.26:1，不达 AA。
   ============================================================= */
.bandtabs-cell {
    margin-left: auto;
    align-self: flex-start;
}
.bandtabs {
    display: inline-flex;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;                    /* 选中填充色贴合圆角 */
}
.bandtab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 var(--space-3);
    background: transparent;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bandtab + .bandtab { border-left: 1px solid var(--color-border); }
.bandtab-key {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
.bandtab--rush   .bandtab-key { background: var(--color-danger); }
.bandtab--stable .bandtab-key { background: var(--color-primary); }
.bandtab--safe   .bandtab-key { background: var(--color-success); }
.bandtab-count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}
.bandtab-spin {
    display: none;
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-on-foreground-25);
    border-top-color: var(--color-on-foreground);
    border-radius: 50%;
    animation: udt-shimmer-spin 0.7s linear infinite;
}
@keyframes udt-shimmer-spin { to { transform: rotate(360deg); } }

.bandtab:hover:not([disabled]):not(.is-disabled) { background: var(--color-background); }
.bandtab:active:not([disabled]):not(.is-disabled) { transform: translateY(1px); }
.bandtab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;                /* 环在组内绘制，不被容器圆角裁掉 */
}
.bandtab[disabled],
.bandtab.is-disabled {
    color: var(--color-muted);
    background: transparent;
    cursor: not-allowed;
}
.bandtab[disabled] .bandtab-key,
.bandtab[disabled] .bandtab-count,
.bandtab.is-disabled .bandtab-key,
.bandtab.is-disabled .bandtab-count { opacity: 0.4; }
.bandtab.is-on { background: var(--color-foreground); color: var(--color-on-foreground); }
.bandtab.is-on .bandtab-count { color: var(--color-on-foreground-78); }
/* busy · 请求中：锁 I/O，选中段把键色换成旋转指示；成功后由服务端重渲染天然复位 */
.bandtabs.is-busy { pointer-events: none; }
.bandtabs.is-busy .bandtab.is-on .bandtab-spin { display: inline-block; }
.bandtabs.is-busy .bandtab.is-on .bandtab-key { display: none; }

@media (max-width: 767.98px) {
    .bandtabs-cell { margin-left: 0; }
    .bandtabs { display: flex; width: 100%; }
    .bandtab { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 374.98px) {
    .bandtab { padding: 0 var(--space-2); gap: var(--space-1); font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bandtab { transition: none !important; }
    .bandtab-spin { animation: none; }
}

/* ---------- 浮层容器 ---------- */
.udm {
    position: fixed;
    inset: 0;
    z-index: 1090;                      /* z-scale: nav 1040 · toast 1080 · modal 1090 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.udm[hidden] { display: none; }

/* 滚动锁定
   ★ 关键点：本项目各页面都有 `html, body { overflow-x: clip }`，
     而 CSS 规定「只有 html 的 overflow 为 visible 时，body 的 overflow 才会传导到视口」。
     html 带了 overflow-x: clip → 传导失效 → 仅给 body 加 overflow:hidden 锁不住背景，
     鼠标停在浮层内「不可滚动」的区域（头部 / 底栏 / 表格横向容器 / 内容不足一屏时）
     滚轮会串到根滚动容器，看起来就是背后的页面在滚。
     所以这里锁定 html + body 两层，并给滚动容器加 overscroll-behavior 兜住滚动链。 */
html.udm-lock,
html.udm-lock body { overflow: hidden; }

.udm-scrim {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
    opacity: 0;
    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.udm.is-open .udm-scrim { opacity: 1; }

.udm-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(88vh, 900px);
    max-height: min(88dvh, 900px);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.udm.is-open .udm-panel { opacity: 1; transform: none; }
.udm-panel:focus { outline: none; }
.udm-panel ::selection { background: var(--color-primary-ring-strong); color: var(--color-foreground); }

/* ---------- 头部 ---------- */
.udm-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.udm-head-text { flex: 1 1 auto; min-width: 0; }
.udm-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    overflow-wrap: anywhere;
}
.udm-sub {
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}
.udm-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.udm-close:hover { background: var(--color-background); color: var(--color-foreground); border-color: var(--color-muted); }
.udm-close:active { transform: translateY(1px); }
.udm-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- 主体（可滚动） ---------- */
.udm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;       /* 到顶 / 到底不再把滚动链甩给背后的页面 */
    padding: var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
}
.udm-body:focus { outline: none; }
.udm-body::-webkit-scrollbar { width: 10px; }
.udm-body::-webkit-scrollbar-track { background: transparent; }
.udm-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border: 3px solid var(--color-surface);
    border-radius: 999px;
}

/* ---------- 底栏 ---------- */
.udm-foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--color-border);
}
.udm-full {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.udm-full:hover { color: var(--color-primary-hover); }
.udm-full:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.udm-btn {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 7px 18px;
    color: var(--color-foreground);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.udm-btn:hover { background: var(--color-background); border-color: var(--color-muted); }
.udm-btn:active { transform: translateY(1px); }
.udm-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- 状态：loading（骨架贴合最终版面） ---------- */
.udt-skel { display: flex; flex-direction: column; gap: var(--space-4); }
.udt-skel-bar,
.udt-skel-block {
    background-color: var(--color-background);
    background-image: linear-gradient(90deg, rgba(226, 232, 240, 0) 0%, #EDF2F7 45%, rgba(226, 232, 240, 0) 90%);
    background-size: 320px 100%;
    background-repeat: no-repeat;
    animation: udt-shimmer 1.4s linear infinite;
}
.udt-skel-bar { height: 22px; border-radius: var(--radius-sm); }
.udt-skel-bar--title { width: min(46%, 340px); }
.udt-skel-block { height: 172px; border-radius: var(--radius-md); }
.udt-skel-block--wide { height: 116px; }
.udt-skel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
@keyframes udt-shimmer {
    from { background-position: -320px 0; }
    to   { background-position: calc(100% + 320px) 0; }
}

/* ---------- 状态：error（写明问题与恢复动作） ---------- */
.udt-state { padding: var(--space-10) var(--space-4); text-align: center; }
.udt-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    font-size: 1.375rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.udt-state--error .udt-state-icon { background: #FEE2E2; color: var(--color-danger); }
.udt-state-title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
}
.udt-state-desc {
    margin: 0 0 var(--space-5);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.udt-retry {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 9px 22px;
    color: var(--color-on-foreground);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.udt-retry:hover { background: var(--color-primary-hover); }
.udt-retry:active { transform: translateY(1px); }
.udt-retry:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ---------- 触发源：请求中的行 ---------- */
.udm-pending { opacity: 0.62; cursor: progress; }

/* ---------- 自适应（320 / 375 / 414 / 768 全部验证） ---------- */
@media (max-width: 767.98px) {
    .udm { padding: 0; align-items: flex-end; }
    .udm-panel {
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(24px);
    }
    .udm.is-open .udm-panel { transform: none; }
    .udm-head { padding: var(--space-4) var(--space-4); }
    .udm-title { font-size: 1.1875rem; }
    .udm-body { padding: var(--space-4); }
    .udm-foot { padding: var(--space-3) var(--space-4); }
    .udt { gap: var(--space-5); }
    .udt-grid,
    .udt-skel-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .udt .desc-list { grid-template-columns: 92px 1fr; }
}
@media (max-width: 380px) {
    .udt .desc-list { grid-template-columns: 78px 1fr; font-size: 0.8125rem; }
    .udt .desc-list dt,
    .udt .desc-list dd { padding: var(--space-2) var(--space-3); }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .udm-panel,
    .udm-scrim { transition-duration: 1ms; }
    .udm-panel { transform: none; }
    .udt-skel-bar,
    .udt-skel-block { animation: none; }
}

/* ============================================================
   院校详情页（整页 .udp / 浮层摘要 .uds）  rev 2026-10-02
   ------------------------------------------------------------
   Hallmark · page: university-detail · genre: modern-minimal
     macrostructure: 档案型长文档（数据优先，无 hero、无卡片瀑布）
     拨盘 VARIANCE 3 / MOTION 2 / DENSITY 7
     仅使用既有 token，不新增任何色值
   ------------------------------------------------------------
   与全站 .data-table 的分工（**刻意不复用**）：
     .data-table 每行都画一条 1px 分隔线 → 十行以上的表就成了
     「尺子排」，是典型 AI 默认脸。本页表格改为：
       · 只保留表头下 1 条结构线（分组用）
       · 行与行之间不画线，靠行距 + 悬停底色区分
       · 数字列 tabular-nums 右对齐，靠对齐而不是靠线来读
     全页横线预算：2 条分组线（关键数字下 / 数据说明上）+ 表头线。
   ============================================================ */

/* ---------- 页面骨架 ---------- */
.udp { padding-bottom: var(--space-10); }

/* ---------- ① 校头 ---------- */
.udp-head { padding-top: var(--space-4); }
.udp-name {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin: 0;
    overflow-wrap: anywhere;
}
.udp-badges,
.uds-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
}
.udp-badge,
.uds-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* 层次类头衔（985 / 211 / 双一流）用实心墨色，资格类用描边 */
.udp-badge--strong,
.uds-badge--strong {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-on-foreground);
}
/* 元信息行：靠留白分组，不靠分隔符 */
.udp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: var(--space-4) 0 0;
    font-size: 0.875rem;
    color: var(--color-foreground);
}
.udp-meta-item { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.udp-meta-item i {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---------- ② 关键数字（分组线 1） ---------- */
.udp-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-5);
    margin: var(--space-8) 0 0;
    padding: 0 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.udp-fig { min-width: 0; }
.udp-fig dt {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}
.udp-fig dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
}
.udp-fig-unit {
    margin-left: 3px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ---------- 章节 ---------- */
.udp-sec { margin-top: var(--space-12); }
.udp-sec-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}
.udp-sec-lede {
    margin: var(--space-2) 0 0;
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.udp-sub {
    margin: var(--space-8) 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
}
.udp-sub-note {
    margin-left: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.udp-none {
    margin: var(--space-6) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ---------- 表格（.udp-table 与浮层 .uds-table 同一套规则） ---------- */
.udp-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.udp-table,
.uds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-family: var(--font-body);
}
.udp-table { margin-top: var(--space-4); }
.uds-table { margin-top: var(--space-3); }
/* 窄屏策略：表格不压缩、不外溢 —— 给最小宽度，由 .udp-scroll 内部横向滚动 */
.udp-table--lines { min-width: 620px; }
.udp-table--majors { min-width: 720px; }
.uds-table { min-width: 380px; }
.udp-table thead th,
.uds-table thead th {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: left;
    white-space: nowrap;
}
/* 只有表头最后一行画线：全表唯一的结构线 */
.udp-table thead tr:last-child th,
.uds-table thead tr:last-child th {
    border-bottom: 1px solid var(--color-border);
}
/* 双层表头（左：录取分 / 右：招生计划），上一行不画线 */
.udp-table thead tr.udp-thead-group th {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.udp-table tbody td,
.uds-table tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-foreground);
    vertical-align: middle;
}
/* ★ 行与行之间不画线（见文件头说明） */
.udp-table tbody tr,
.uds-table tbody tr { transition: background 120ms ease; }
.udp-table tbody tr:hover,
.uds-table tbody tr:hover { background: var(--color-background); }

/* 数字列右对齐 + 一律不换行：
   这类列的内容只可能是数字或「未公布」这种短标记，折行没有意义。
   实测专业明细表的「未公布」在 69px 宽的列里会折成「未公 / 布」两行、
   把整行撑到 71px 高（可用内容宽只有 37px，而 13px 字号的三个汉字约需 39px）。 */
.udp-table .num,
.uds-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.udp-score { font-weight: 700; }
.udp-muted,
.uds-muted { color: var(--color-text-secondary); }
.udp-empty-cell { color: var(--color-muted); font-size: 0.8125rem; }
.udp-batch,
.uds-batch { font-weight: 600; white-space: nowrap; }
.udp-track { color: var(--color-text-secondary); white-space: nowrap; }
/* 涨 = 门槛变高（更难），降 = 变低；文字已写明"涨/降"，颜色只做辅助 */
.udp-up { color: var(--color-danger); font-variant-numeric: tabular-nums; }
.udp-down { color: var(--color-success); font-variant-numeric: tabular-nums; }

.udp-group { font-weight: 600; white-space: nowrap; }
.udp-group .udp-muted { font-weight: 400; font-size: 0.8125rem; }

/* ---------- 专业明细：专业名 + 代码 + 校区备注 ---------- */
.udp-major { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.udp-major-name { font-weight: 600; }
.udp-major-code { font-size: 0.75rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.udp-major-remark { font-size: 0.75rem; color: var(--color-text-secondary); }

/* ---------- ④⑤⑥ 批次 × 科类 切换 ---------- */
.udp-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.udp-chip {
    display: inline-flex;
    /* ★ 必须 center：固定高度下用 baseline 会把整行内容压到顶部
       （实测 34px 高的按钮里文字上留白 2px、下留白 14px） */
    align-items: center;
    gap: var(--space-2);
    height: 34px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none !important;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.udp-chip:hover { border-color: var(--color-muted); color: var(--color-foreground); }
.udp-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.udp-chip.is-on {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-on-foreground);
}
.udp-chip-track { font-size: 0.75rem; opacity: 0.72; }
.udp-filter-state {
    margin: var(--space-4) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
/* 原地切换的加载态：只降不透明度，不改变高度 → 不会引起任何滚动跳动 */
#udpFilterBody { transition: opacity 140ms ease; }
#udpFilterBody[aria-busy="true"] { opacity: 0.55; }
.udp-filter-state strong { color: var(--color-foreground); }

/* ---------- 非会员：专业级录取分的会员说明 ---------- */
.udp-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-background);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.udp-lock-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
}
.udp-lock a { color: var(--color-primary); font-weight: 600; }

/* ---------- ⑦ 数据说明（分组线 2） ---------- */
.udp-notes {
    margin-top: var(--space-16);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}
.udp-notes p { margin: 0; max-width: 76ch; }
.udp-notes p + p { margin-top: var(--space-2); }

/* ============================================================
   浮层摘要（.uds）
   ============================================================ */
.uds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.uds-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.uds-fig { min-width: 0; }
.uds-fig dt {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.uds-fig dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
}
.uds-fig-unit {
    margin-left: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.uds-title {
    margin: var(--space-6) 0 0;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
}
.uds-table tbody td { padding: var(--space-2) var(--space-4); font-size: 0.8125rem; }
/* 科类列：宽屏写全「物理类 / 历史类」，窄屏只留首字「物 / 历」。
   浮层窄屏可用宽不足 380px，三个汉字的科类会把这一列压到折行，单字不会。
   两套文案同在 DOM，靠媒体查询切换；nowrap 兜住中间宽度，宁可列宽也不折行。 */
.uds-track { white-space: nowrap; }
.uds-track-abbr { display: none; }
@media (max-width: 767.98px) {
    .uds-track-full { display: none; }
    .uds-track-abbr { display: inline; }
}
.uds-more,
.uds-none {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ---------- 响应式 ---------- */
@media (max-width: 767.98px) {
    .udp-name { font-size: 1.5rem; }
    .udp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
    .udp-fig dd { font-size: 1.25rem; }
    .udp-sec { margin-top: var(--space-10); }
    .udp-notes { margin-top: var(--space-12); }
    .udp-table tbody td,
    .udp-table thead th { padding-left: var(--space-3); padding-right: var(--space-3); }
    .udp-meta { gap: var(--space-2) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .udp-chip,
    .udp-table tbody tr,
    .uds-table tbody tr { transition: none; }
}

/* ============================================================
   FILTER DRAWER · 窄屏把筛选 rail 与检索行收进右侧抽屉
   · 桌面：rail 与检索行各就各位，工具条与抽屉都不出现
   · 窄屏：两者被搬进抽屉（.fdr-moved），页面只留「筛选 / 检索」两个按钮
   · 搬移由 filter-drawer.js 在文档解析期完成，因此不会闪一下旧布局
   ============================================================ */
.fdr-tools {
    display: none;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.fdr-tools.is-on { display: flex; }

.fdr-tool {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-foreground);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.fdr-tool:hover { border-color: var(--color-foreground); }
.fdr-tool:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.fdr-tool:active { transform: translateY(1px); }
.fdr-tool i { font-size: 1rem; line-height: 1; }

.fdr-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.fdr {
    position: fixed;
    inset: 0;
    z-index: 1050;          /* 高于固定导航 1030：模态期间导航应被遮住 */
}
/* ★ iOS / iPadOS：fixed + inset:0 的高度取「大视口」（地址栏收起后的高度），
   比可视区高一截 —— .fdr-panel 的 top:0/bottom:0 跟着变高，
   底部 .fdr-foot（「完成」按钮）会落到地址栏之后，点不到也看不到。
   显式高度换成动态视口单位即可（不支持的浏览器保持原行为）。 */
@supports (height: 100dvh) {
    .fdr { height: 100dvh; }
}
.fdr[hidden] { display: none; }

.fdr-scrim {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
    opacity: 0;
    transition: opacity 240ms ease;
}
.fdr.is-open .fdr-scrim { opacity: 1; }

.fdr-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 88vw;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fdr.is-open .fdr-panel { transform: translateX(0); }
.fdr-panel:focus { outline: none; }

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

.fdr-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.fdr-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    cursor: pointer;
    transition: color var(--transition);
}
.fdr-close:hover { color: var(--color-foreground); }
.fdr-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.fdr-body {
    position: relative;      /* 让 .fdr-sec 的 offsetTop 相对抽屉内容区 */
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 滚到顶 / 到底不再把滚动链甩给背后的页面（body overflow:hidden 在 iOS 上并不可靠） */
    overscroll-behavior: contain;
    padding: var(--space-4) var(--space-5);
}
.fdr-sec + .fdr-sec { margin-top: var(--space-5); }
.fdr-sec-h {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

/* 搬进抽屉后，rail / 检索行自带的边框与内边距交给抽屉的分区间距 */
.fdr-body .fdr-moved {
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
    margin: 0;
}

.fdr-foot {
    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);
}
.fdr-count {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.fdr-done {
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 0;
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.fdr-done:hover { background: var(--color-primary); }
.fdr-done:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.fdr-done:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .fdr-scrim,
    .fdr-panel,
    .fdr-tool,
    .fdr-done,
    .fdr-close { transition: none; }
}

/* ============================================================
   专业介绍（面向家长）
   · .major-*  → /major 列表页 与 /major/detail 详情页的版式
   · .mdm-*    → 介绍正文的 6 个分区，详情页与浮层共用（同一份 _detail 片段）
   · 浮层骨架复用院校详情浮层的 .udm-* / .udt-*，此处不重复定义
   ============================================================ */

/* ---------- 别处的专业名入口（推荐 / 分数 / 招生计划页）----------
   虚下划线 = 「这里可以点开看介绍」，不抢原有版式的视觉层级 */
.major-jump,
.mr-major-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: text-decoration-style 150ms ease;
}
.major-jump:hover,
.mr-major-link:hover { text-decoration-style: solid; }
.major-jump:focus-visible,
.mr-major-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- 版心 ---------- */
.major-page { padding: var(--space-8) 0 var(--space-12); }
.major-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ---------- 列表页头 ---------- */
.major-hero {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-foreground);
    margin-bottom: var(--space-8);
}
.major-hero-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
}
.major-hero-lede {
    max-width: 44em;
    margin: 0 0 var(--space-6);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

/* ============ 左栏筛选 + 右栏清单（与 /university 同一套语言） ============ */
.major-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

/* RAIL · 垂直筛选：纯文字 + hairline，无圆角卡片 */
.major-rail {
    position: sticky;
    top: 88px;
    align-self: start;
    border-right: 1px solid var(--color-border);
    padding-right: var(--space-5);

    /* ★ 独立滚动：高度锁在视口内，超出部分在 rail 内部滚。
       不这么做的话，侧栏比视口高时 sticky 只能吊住顶部，底部维度永远滚不到。
       88px = 固定导航 68px + --space-5；再留 --space-4 呼吸位。 */
    max-height: calc(100vh - 88px - var(--space-4));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* 滚动条隐藏：滚动能力保留（滚轮 / Tab 到链接时浏览器自动带入视野），只是不画那条槽 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.major-rail::-webkit-scrollbar { width: 0; height: 0; }

/* 没有滚动条时补一个「下面还有」的提示，只在真的溢出时出现（JS 打 is-overflow） */
.major-rail::after {
    content: '';
    display: block;
    position: sticky;
    bottom: 0;
    height: 32px;
    margin-top: -32px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--color-background) 0%, transparent),
        var(--color-background));
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.major-rail.is-overflow::after { opacity: 1; }

/* 被搬进抽屉后：抽屉自己滚，rail 不再需要 sticky / 限高 / 分隔线 */
.major-rail.fdr-moved {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    padding-right: 0;
}

/* 抽屉里检索表单已被搬到「检索」分区，rail 内这一块就只剩一个「搜索」标题 ——
   隐藏整块，免得抽屉的筛选区顶着一个孤零零的标题 */
.major-rail.fdr-moved .major-rail-block--search { display: none; }

.major-rail-block { margin-bottom: var(--space-6); }
.major-rail-block:last-of-type { margin-bottom: var(--space-4); }

.major-rail-h {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.major-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 门类只有十几个，不需要区块内限高；数量增长后仍靠 rail 自身滚动兜底 */
.major-rail-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    transition: color 160ms ease;
}
.major-rail-link:hover { color: var(--color-foreground) !important; }
.major-rail-link.is-active {
    color: var(--color-foreground) !important;
    font-weight: 700;
}
.major-rail-link.is-active::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 2px;
    background: var(--color-foreground);
    vertical-align: middle;
}
.major-rail-count {
    margin-left: auto;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    font-size: 0.75rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* rail 内的搜索表单 */
.major-rail-search {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.major-rail-input {
    width: 100%;
    padding: 9px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-foreground);
    transition: border-color 160ms ease;
}
.major-rail-input:focus {
    outline: none;
    border-color: var(--color-foreground);
}
.major-rail-input::placeholder { color: var(--color-muted); }
.major-rail-submit {
    padding: 8px var(--space-4);
    border: 1px solid var(--color-foreground);
    border-radius: var(--radius-sm);
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.major-rail-submit:hover { background: var(--color-primary); border-color: var(--color-primary); }
.major-rail-submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.major-rail-note {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.major-rail-note a { color: var(--color-primary); text-decoration: none; }
.major-rail-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

.major-main { min-width: 0; }

.major-count { margin: 0 0 var(--space-5); font-size: 0.875rem; color: var(--color-muted); }
.major-count strong { color: var(--color-foreground); font-weight: 700; }

/* ---------- 专业卡片网格 ---------- */
.major-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.major-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 160ms ease, transform 160ms ease;
}
.major-card:hover { border-color: var(--color-foreground); transform: translateY(-1px); }
.major-card-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}
.major-card-name a { color: var(--color-foreground); text-decoration: none; }
.major-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.major-card-name a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.major-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-3);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}
.major-card-meta span { position: relative; }
.major-card-meta span + span::before {
    content: '·';
    position: absolute;
    left: calc(-1 * var(--space-2));
    color: var(--color-border);
}
.major-card-summary {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}
.major-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.major-card-more i { transition: transform 160ms ease; }
.major-card-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.major-card-more:hover i { transform: translateX(2px); }
.major-card-more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- 分页 ---------- */
.major-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}
.major-pager-btn {
    padding: 7px var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-foreground);
    text-decoration: none;
    transition: border-color 150ms ease;
}
.major-pager-btn:hover { border-color: var(--color-foreground); }
.major-pager-btn.is-disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
    opacity: 0.6;
    cursor: not-allowed;
}
.major-pager-nums { display: inline-flex; align-items: center; gap: 4px; }
.major-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.major-pager-num:hover { background: var(--color-surface); color: var(--color-foreground); }
.major-pager-num.is-active {
    background: var(--color-foreground);
    color: var(--color-on-foreground);
    font-weight: 700;
}

/* ---------- 空态 ---------- */
.major-empty,
.mdm-empty {
    padding: var(--space-12) var(--space-4);
    text-align: center;
}
.major-empty > i,
.mdm-empty > i {
    display: block;
    margin-bottom: var(--space-4);
    font-size: 2rem;
    color: var(--color-muted);
}
.major-empty-title,
.mdm-empty-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-foreground);
}
.major-empty-desc,
.mdm-empty-desc {
    max-width: 34em;
    margin: 0 auto var(--space-5);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.major-empty-link,
.mdm-empty-link {
    display: inline-block;
    padding: 9px var(--space-5);
    border: 1px solid var(--color-foreground);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}
.major-empty-link:hover,
.mdm-empty-link:hover { background: var(--color-foreground); color: var(--color-on-foreground); }

/* ---------- 详情页头部 / 尾部 ---------- */
.major-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: 0.8125rem;
    color: var(--color-muted);
}
.major-breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.major-breadcrumb a:hover { color: var(--color-foreground); text-decoration: underline; }
.major-breadcrumb-current { color: var(--color-foreground); font-weight: 600; }

.major-head {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-foreground);
    margin-bottom: var(--space-2);
}
.major-head-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
}
.major-head-sub { margin: 0; font-size: 0.9375rem; color: var(--color-text-secondary); }

.major-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.major-foot-back,
.major-foot-link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.major-foot-back:hover,
.major-foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   介绍正文 · 6 个分区（详情页与浮层共用）
   ============================================================ */
.mdm-detail { padding-bottom: var(--space-2); }

/* 目录级信息条 */
.mdm-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}
.mdm-meta-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.875rem;
    min-width: 0;
}
.mdm-meta-item dt { flex: 0 0 auto; color: var(--color-muted); }
.mdm-meta-item dd {
    margin: 0;
    color: var(--color-foreground);
    font-weight: 600;
    word-break: break-all;
}
.mdm-meta-item--wide { grid-column: 1 / -1; }

/* 分区 */
.mdm-sec {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}
.mdm-sec:last-child { border-bottom: 0; }
.mdm-sec-h {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-foreground);
}
.mdm-sec-num {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.mdm-prose {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--color-text-secondary);
}
.mdm-prose p { margin: 0 0 var(--space-3); }
.mdm-prose p:last-child { margin-bottom: 0; }

/* 说人话（白话版） */
.mdm-plain {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-surface);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}
.mdm-plain p { margin: 0 0 var(--space-2); }
.mdm-plain p:last-child { margin-bottom: 0; }
.mdm-plain-tag {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

/* 常见岗位 */
.mdm-jobs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.mdm-jobs-tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* 报考注意（提示区） */
.mdm-sec--warn {
    margin-top: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface);
}

/* 优势院校 */
.mdm-schools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.mdm-schools li {
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--color-foreground);
}

.mdm-tip {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-muted);
}
.mdm-tip a { color: var(--color-primary); }

/* 富文本正文（政策页：内容由后台 Quill 维护，需恢复标题 / 列表的默认排版） */
.mdm-prose--rich h2,
.mdm-prose--rich h3,
.mdm-prose--rich h4 {
    margin: var(--space-5) 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-foreground);
}
.mdm-prose--rich > :first-child { margin-top: 0; }
.mdm-prose--rich ul,
.mdm-prose--rich ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.mdm-prose--rich li { margin-bottom: var(--space-1); }
.mdm-prose--rich strong { color: var(--color-foreground); font-weight: 700; }
.mdm-prose--rich a { color: var(--color-primary); }
.mdm-prose--rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.mdm-prose--rich blockquote {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid var(--color-border);
    color: var(--color-muted);
}
.mdm-prose--rich .ql-align-center  { text-align: center; }
.mdm-prose--rich .ql-align-right   { text-align: right; }
.mdm-prose--rich .ql-align-justify { text-align: justify; }

/* 政策页导语区：正文略大一号，不参与序号分隔 */
.mdm-sec--lead .mdm-prose { font-size: 1rem; }

/* ---------- 窄屏 ---------- */
@media (max-width: 991.98px) {
    .major-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

    /* rail 正常会被 filter-drawer.js 搬进抽屉（搬移后带 .fdr-moved）。
       脚本没跑起来时窄屏干脆不显示它 —— 否则一整列筛选会堆在列表上方，
       把内容挤到首屏之外，还不如让用户直接看列表。 */
    .major-rail:not(.fdr-moved) { display: none; }
}

@media (max-width: 767.98px) {
    .major-page { padding: var(--space-6) 0 var(--space-10, var(--space-8)); }
    .major-container { padding: 0 var(--space-4); }
    .major-grid { grid-template-columns: minmax(0, 1fr); }
    .major-foot { flex-direction: column; align-items: flex-start; }
    .mdm-sec { padding: var(--space-5) 0; }
    .mdm-sec--warn { padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .major-card,
    .major-tab,
    .major-pager-num,
    .major-search-btn,
    .major-empty-link,
    .mdm-empty-link { transition: none; }
    .major-card:hover { transform: none; }
}