/* ================================================================
   模块名称：表格与组件样式
   包含：表格体系、标签体系、分页、筛选栏、空状态/骨架屏、模态框
   依赖：base.css（CSS变量）
   ================================================================ */

/* ---- 导航栏样式 ---- */
.navbar {
    height: var(--nav-height);
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 201;
}

.navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.logo {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.logo .icon {
    color: var(--color-primary);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.nav-link.active {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* ---- 导航栏认证按钮（登录/注册）---- */
.nav-auth-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.nav-link-register {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.nav-link-register:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-white);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-btn:hover {
    background: var(--color-bg);
}

.nav-btn .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-danger);
    border-radius: 50%;
    border: 2px solid var(--color-card);
    display: none;
}

/* 仅在有未读消息（.unread）时显示红点 */
.nav-btn .badge.unread {
    display: block;
}

.user-avatar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.user-avatar:hover {
    background: var(--color-bg);
}

.user-avatar .avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.user-avatar .avatar-chevron {
    color: var(--color-text-muted);
}

/* ---- 移动端菜单按钮 ---- */
.navbar-toggle {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}

.navbar-toggle:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.navbar-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.navbar-toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---- 顶部横幅卡片 ---- */
.top-banner {
    display: none;
    background: var(--color-card);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.banner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.banner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.banner-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.banner-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--spacing-lg);
}

.banner-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
}

.banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    text-align: center;
}

.banner-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
}

.banner-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.banner-arrow {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-left: var(--spacing-lg);
}

/* ---- 筛选区 ---- */
.filter-section {
    margin: var(--spacing-xl) 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: var(--spacing-lg);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-group label {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 9px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* 筛选项标题左侧主色竖条，增强醒目度 */
.filter-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: var(--color-primary);
}

.form-input,
.form-select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-card);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    line-height: 40px;
}

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

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---- 时间筛选行（融入筛选网格）---- */
.filter-date-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

.date-input-wrapper {
    position: relative;
    width: 100%;
}

.date-input-wrapper .date-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

.date-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-card);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---- 高级筛选折叠面板（卡片式；折叠态仍显示摘要栏）---- */
.advanced-filter-panel {
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    /* 级联下拉为绝对定位面板，此处必须允许溢出，否则下拉会被裁剪遮挡 */
    overflow: visible;
}

/* 摘要栏：始终可见。未展开（未点击）时用更实的主色底突出，提示可展开 */
.advanced-filter-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    height: 36px;
    padding: 0 var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.advanced-filter-panel.collapsed .advanced-filter-summary {
    background: var(--color-primary-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.advanced-filter-summary:hover {
    background: var(--color-primary-bg);
}

.advanced-filter-summary-title {
    flex-shrink: 0;
}

.advanced-filter-summary-items {
    color: var(--color-text-secondary);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advanced-filter-summary-arrow {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.advanced-filter-panel:not(.collapsed) .advanced-filter-summary-arrow {
    transform: rotate(180deg);
}

.advanced-filter-panel:not(.collapsed) .advanced-filter-summary {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid var(--color-border-light);
}

.advanced-filter-body {
    padding: var(--spacing-lg) var(--spacing-md);
}

.advanced-filter-panel.collapsed .advanced-filter-body {
    display: none;
}

.advanced-filter-panel:not(.collapsed) .advanced-filter-body {
    animation: advancedFilterSlideDown 0.25s ease;
}

@keyframes advancedFilterSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 800px;
    }
}

/* ---- 数据统计 + 查询按钮行 ---- */
.filter-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    gap: var(--spacing-md);
}

.filter-actions-row .stats-bar {
    flex: 1;
}

/* ---- 全局操作按钮 ---- */
.filter-global-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.btn-filter {
    height: 40px;
    padding: 0 24px;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* ---- 信息来源行：左标签、右「高级筛选」，整行 30px ---- */
.source-tags-row {
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: 35px;
}

.source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 35px;
    flex: 1;
    min-width: 0;
}

.source-tags-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
}

.source-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 9px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    white-space: nowrap;
}

.source-tag input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* 来源图标：紧跟复选框、位于来源名之前；图标取自数据库 source_icon */
.source-tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
    /* 图标值取自数据库（emoji 或图片 URL），显式声明 emoji 字体以免回退成方框 */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
                 "Segoe UI", "Microsoft YaHei", sans-serif;
    background: var(--sc-bg, var(--color-bg));
    color: var(--sc-text, var(--color-text-secondary));
}

.source-tag-icon.is-image {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: contain;
    background: none;
}

.source-tag:hover {
    border-color: var(--color-primary);
}

/* 选中态：整枚标签套用该来源的专属配色，与表格「投递进度」徽章同一写法 */
.source-tag.active {
    background: var(--sc-bg, var(--color-primary-light));
    border-color: var(--sc-border, var(--color-primary));
    color: var(--sc-text, var(--color-primary));
    font-weight: 500;
}

/* 「全部勾选」为按钮形态：无图标、无复选框，选中即实心高亮 */
.source-tag.source-tag-all {
    padding: 0 14px;
    font-weight: 500;
    border-color: var(--color-border);
    background: var(--color-card);
    color: var(--color-text-secondary);
}

.source-tag.source-tag-all input[type="checkbox"] {
    display: none;
}

.source-tag.source-tag-all.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---- 各来源配色（浅底 + 同色描边 + 深色字）----
   写成属性选择器而非 .source-tag[...]：来源配色同时供筛选标签与
   表格「公司列」的来源图标复用（见 .company-source） */
[data-source-color="red"]    { --sc-bg: #fee2e2; --sc-border: #fecaca; --sc-text: #b91c1c; }
[data-source-color="orange"] { --sc-bg: #ffedd5; --sc-border: #fed7aa; --sc-text: #c2410c; }
[data-source-color="amber"]  { --sc-bg: #fef3c7; --sc-border: #fde68a; --sc-text: #b45309; }
[data-source-color="green"]  { --sc-bg: #dcfce7; --sc-border: #86efac; --sc-text: #15803d; }
[data-source-color="teal"]   { --sc-bg: #ccfbf1; --sc-border: #99f6e4; --sc-text: #0f766e; }
[data-source-color="cyan"]   { --sc-bg: #cffafe; --sc-border: #a5f3fc; --sc-text: #0e7490; }
[data-source-color="blue"]   { --sc-bg: #dbeafe; --sc-border: #bfdbfe; --sc-text: #1d4ed8; }
[data-source-color="indigo"] { --sc-bg: #e0e7ff; --sc-border: #a5b4fc; --sc-text: #4338ca; }
[data-source-color="purple"] { --sc-bg: #f3e8ff; --sc-border: #d8b4fe; --sc-text: #7e22ce; }
[data-source-color="violet"] { --sc-bg: #ede9fe; --sc-border: #c4b5fd; --sc-text: #6d28d9; }
[data-source-color="pink"]   { --sc-bg: #fce7f3; --sc-border: #f9a8d4; --sc-text: #be185d; }
[data-source-color="gray"]   { --sc-bg: #f3f4f6; --sc-border: #d1d5db; --sc-text: #6b7280; }

/* ================================================================
   公司列：内容靠左对齐 + 最左侧「信息来源渠道」图标
   适用：校招/实习、进度管理、内推广场三张表格与榜单卡片
   ================================================================ */
table.user-table thead th[data-col="company_name"],
table.user-table tbody td[data-col="company_name"] {
    text-align: left;
}

.company-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

.company-cell-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 公司列来源图标：16px 方块，底色取自来源配色，title 悬浮显示来源名 */
.company-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 1px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--sc-border, var(--color-border));
    background: var(--sc-bg, var(--color-bg));
    cursor: default;
}

.company-source .source-tag-icon {
    width: 14px;
    height: 14px;
    font-size: 12px;
    background: none;
    color: var(--sc-text, var(--color-text-secondary));
}

.company-source .source-tag-icon.is-image {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    object-fit: contain;
}

/* ================================================================
   普通多选下拉（公司类型等单层列表）：非级联，无分组无搜索
   ================================================================ */
.multi-select-single {
    position: relative;
    width: 100%;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.multi-select-trigger:hover {
    border-color: var(--color-text-muted);
}

.multi-select-trigger.is-placeholder {
    color: var(--color-text-muted);
}

/* 触发器文字：与 .cascading-trigger-text 同一约束——
   flex:1 撑开文字与箭头的间距，窄列下单行省略，防止换行溢出 40px 定高按钮 */
.multi-select-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-arrow {
    color: var(--color-text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

.multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 200px;
    margin-top: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

.multi-select-options {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.multi-select-option:hover {
    background: var(--color-bg);
}

.multi-select-option input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.multi-select-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: 8px 10px;
    border-top: 1px solid var(--color-border-light);
}

.multi-select-actions button {
    padding: 4px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.multi-select-actions button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.source-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- 数据统计 ---- */
.stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 可点击的快捷筛选统计项（今日更新 / 近三日更新） */
.stat-item.stat-clickable {
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.stat-item.stat-clickable:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.stat-item.stat-clickable.active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.stat-item.stat-clickable.active .stat-label {
    color: var(--color-primary);
}

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

.stat-value {
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

/* 统计栏分组：更新类 / 截止类 分层区分 */
.stat-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.stat-group-divider {
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* 截止类：按紧急程度三级配色（1天内=红 / 3天内=橙 / 7天内=青），与更新类主题色形成层级区分 */
.stat-group[data-group="deadline"] .stat-item {
    --dl-color: var(--color-warning-text);
    --dl-bg: var(--color-warning-light);
    --dl-border: var(--color-warning);
}

/* 1天内截止：最紧急 */
.stat-group[data-group="deadline"] .deadline-level-1,
.stat-group[data-group="deadline"] .stat-item[data-quick-date="1d"] {
    --dl-color: var(--color-deadline-1d);
    --dl-bg: var(--color-deadline-1d-bg);
    --dl-border: var(--color-deadline-1d);
}

/* 3天内截止：中度紧急 */
.stat-group[data-group="deadline"] .deadline-level-3,
.stat-group[data-group="deadline"] .stat-item[data-quick-date="3d"] {
    --dl-color: var(--color-deadline-3d);
    --dl-bg: var(--color-deadline-3d-bg);
    --dl-border: var(--color-deadline-3d);
}

/* 7天内截止：尚有余裕 */
.stat-group[data-group="deadline"] .deadline-level-7,
.stat-group[data-group="deadline"] .stat-item[data-quick-date="7d"] {
    --dl-color: var(--color-deadline-7d);
    --dl-bg: var(--color-deadline-7d-bg);
    --dl-border: var(--color-deadline-7d);
}

/* 15天内截止：余裕最足 */
.stat-group[data-group="deadline"] .deadline-level-15,
.stat-group[data-group="deadline"] .stat-item[data-quick-date="15d"] {
    --dl-color: var(--color-deadline-15d);
    --dl-bg: var(--color-deadline-15d-bg);
    --dl-border: var(--color-deadline-15d);
}

.stat-group[data-group="deadline"] .stat-value {
    color: var(--dl-color);
}

/* 标签前的小圆点：颜色之外再给一层形状区分（色弱可辨） */
.stat-group[data-group="deadline"] .stat-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dl-color);
    margin-right: 4px;
    vertical-align: middle;
}

.stat-group[data-group="deadline"] .stat-item.stat-clickable:hover {
    background: var(--dl-bg);
    border-color: var(--dl-border);
    color: var(--dl-color);
}

.stat-group[data-group="deadline"] .stat-item.stat-clickable.active {
    background: var(--dl-bg);
    border-color: var(--dl-border);
}

.stat-group[data-group="deadline"] .stat-item.stat-clickable.active .stat-label {
    color: var(--dl-color);
}

/* ---- 常规筛选区：截止时间下拉（便捷选项 + 底部展开的日期选择器）----
   下拉面板打开时日历为展开态；选项沿用截止分级配色；日期不早于今天
   （一律不含已截止）；选中即生效并收起，再点已选项 = 取消。 */
.deadline-filter {
    position: relative;
}
.deadline-filter-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.deadline-filter-trigger:hover {
    border-color: var(--color-text-muted);
}
.deadline-filter.is-open .deadline-filter-trigger,
.deadline-filter-trigger:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}
.deadline-filter-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.deadline-filter-trigger-text.is-placeholder {
    color: var(--color-text-muted);
}
.deadline-filter-arrow {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.deadline-filter.is-open .deadline-filter-arrow {
    transform: rotate(180deg);
}
.deadline-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 90;
    width: 264px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.deadline-filter-panel[hidden] {
    display: none;
}
.deadline-filter-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 选项沿用截止分级配色（与统计栏计数一致） */
.deadline-filter-options .deadline-level-1 { --dl-color: var(--color-deadline-1d); --dl-bg: var(--color-deadline-1d-bg); }
.deadline-filter-options .deadline-level-3 { --dl-color: var(--color-deadline-3d); --dl-bg: var(--color-deadline-3d-bg); }
.deadline-filter-options .deadline-level-7 { --dl-color: var(--color-deadline-7d); --dl-bg: var(--color-deadline-7d-bg); }
.deadline-filter-options .deadline-level-15 { --dl-color: var(--color-deadline-15d); --dl-bg: var(--color-deadline-15d-bg); }
.deadline-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.deadline-option:hover {
    background: var(--color-bg-hover);
}
.deadline-option.active {
    background: var(--dl-bg);
    color: var(--dl-color);
    font-weight: 600;
}
.deadline-option-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dl-color);
}
.deadline-filter-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 6px 4px;
}
/* 内嵌日历：复用 .date-range-panel 的 dr-* 样式，改为面板内平铺展开 */
.deadline-filter-calendar.date-range-panel {
    position: static;
    width: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 2px 0;
}
.deadline-filter-calendar .dr-day.is-selected {
    background: var(--color-primary);
    color: var(--color-text-white);
    font-weight: 700;
}
.deadline-filter-calendar .dr-day.is-selected:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* ---- 筛选历史分割线 ---- */
.filter-history-divider {
    height: 1px;
    background: var(--color-border-light);
    margin-top: var(--spacing-lg);
}

/* ---- 筛选历史 ---- */
.filter-history {
    margin-top: var(--spacing-lg);
}

.filter-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.filter-history-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.filter-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.history-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-primary-light);
    color: var(--color-primary);
    cursor: pointer;
}

.history-tag .clear {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    padding: 0 2px;
    margin-left: 2px;
}

.history-tag .clear:hover {
    opacity: 1;
}

/* 空状态标签（替代内联 style="color:#9ca3af"） */
.history-tag-muted {
    color: #9ca3af;
    cursor: default;
}

/* ================================================================
   通用工具类（替代 JS 模板字符串中的内联 style=）
   用途：把 JS 运行时拼接的内联样式统一收敛为 CSS 类，避免在 HTML 中书写内联样式
   ================================================================ */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted, #94A3B8); }
.text-success{ color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning{ color: var(--color-warning); }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-12-mb0 { margin-top: 12px; margin-bottom: 0; }
.mr-8   { margin-right: 8px; }
.my-16  { margin-top: 16px; margin-bottom: 16px; }
.op-80  { opacity: 0.8; }
.w-100  { width: 100%; }
.pad-40 { padding: 40px; }

/* 加载占位提示（替代 style="text-align:center;padding:20px;color:var(--color-text-muted);font-size:13px;"） */
.load-hint {
    text-align: center;
    padding: 20px;
    color: var(--color-text-muted, #94A3B8);
    font-size: 13px;
}

/* 结果/空状态大图标（替代 style="font-size:48px;..."） */
.result-icon-lg { font-size: 48px; }

/* 导航 Logo 替换图（替代内联 img.style.cssText） */
.logo-replace-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
}

/* 开发者工具拦截锁定页（替代内联 style 全屏提示） */
.devtools-block-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 24px;
    color: #ef4444;
    font-family: sans-serif;
    background: #fff;
}

/* 首页横幅网格：单栏模式（替代内联 style="grid-template-columns:1fr"） */
.banner-grid-single { grid-template-columns: 1fr; }
.banner-card-link { cursor: pointer; }

/* 全局顶栏横幅（替代内联 bar.style.cssText） */
.global-site-banner {
    background: var(--gb-bg, #2563EB);
    color: var(--gb-fg, #FFFFFF);
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    position: relative;
    z-index: 90;
}
.global-site-banner-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}
.global-site-banner-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* 动态提示横幅（替代内联 gridStyle/cardStyle） */
.prompt-banner-col  { display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px;  padding: 12px 0; }
.prompt-banner-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.prompt-banner-col  .prompt-banner-card { flex: 1 1 100%; }
.prompt-banner-wrap .prompt-banner-card { flex: 1 1 calc(50% - 5px); min-width: 320px; }
.prompt-banner-card {
    background: var(--pbg, #EFF6FF);
    color: var(--pcolor, #1E3A8A);
    border: 1px solid var(--pborder, #BFDBFE);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    position: relative;
    transition: all 0.2s;
}
.prompt-banner-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.prompt-banner-card-body  { font-size: 12px; opacity: 0.85; margin-bottom: 6px; }
.prompt-banner-card-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    background: var(--pcolor, #1E3A8A);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
}
.prompt-banner-card-close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.clear-history {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.clear-history:hover {
    color: var(--color-primary);
}

/* ---- 提示横幅 ---- */
.hint-banner {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-warning-text);
    line-height: 1.5;
    text-align: center;
}

.hint-icon {
    flex-shrink: 0;
    margin-right: 4px;
    color: var(--color-warning);
}

.hint-text {
    line-height: 1.5;
}

/* 权限提示横幅——内推广场"登录后可查看内推码"等占位文案 */
.hint-banner-permission {
    background: #eff6ff;
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}
.hint-banner-permission .hint-icon {
    color: var(--color-primary);
}

/* ---- 列显示设置 ---- */
.column-settings {
    margin: var(--spacing-md) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.column-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.column-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    flex: 1;
}

.column-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.column-tag:hover {
    border-color: var(--color-primary);
}

.column-tag.checked {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.column-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.column-actions a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.column-actions a:hover {
    color: var(--color-primary);
}

.column-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

/* ---- 列显示设置：收起态（默认） ----
   仅折叠隐藏选项区（.column-tags），保留左侧「列显示：」标签与右侧操作按钮（展开 / 恢复全部列）；
   不触碰任何列勾选配置。展开/收起箭头随状态旋转。 */
.column-settings.collapsed .column-tags {
    display: none;
}
.column-settings.collapsed {
    padding: var(--spacing-sm) var(--spacing-md);
}
.column-settings.collapsed .column-actions {
    margin-left: auto;
}
.column-toggle-arrow {
    transition: transform var(--transition-fast);
}
.column-settings.collapsed .column-toggle-arrow {
    transform: rotate(180deg);
}

/* ---- 表格外层容器 ---- */
.table-wrapper {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 0;
}

/* ---- 表格滚动容器 ---- */
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.table-scroll:active {
    cursor: grabbing;
}

.table-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.table-scroll:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ---- 表格核心 ---- */
table.admin-table,
table.user-table {
    width: 100%;
    min-width: 1500px;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--font-size-sm);
}

/* ---- 表头 ---- */
table.admin-table thead th,
table.user-table thead th {
    background: var(--color-bg);
    padding: var(--cell-padding-y) var(--cell-padding-x);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- 表体 ---- */
table.admin-table tbody td,
table.user-table tbody td {
    padding: var(--cell-padding-y) var(--cell-padding-x);
    text-align: center;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
    max-width: 180px;
}

table.admin-table tbody tr:hover,
table.user-table tbody tr:hover {
    background: var(--color-bg);
}

table.admin-table tbody tr:last-child td,
table.user-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---- 空状态 / 加载状态 ---- */
.loading-state {
    padding: 60px 20px;
    text-align: center;
}

.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
}

.loading-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: dot-bounce 1.4s ease-in-out infinite both;
}

.loading-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

.loading-dots .dot.is-error {
    background: #ef4444;
    animation-name: dot-bounce-error;
    animation-duration: 0.6s;
}

@keyframes dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.3;
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
    }
}

@keyframes dot-bounce-error {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}

.loading-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

/* ---- 骨架屏加载占位 ---- */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-row td {
    padding: var(--cell-padding-y) var(--cell-padding-x);
    vertical-align: middle;
}

.skeleton-bar {
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #e2e8f0 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    margin: 0 auto;
    /* 每行错峰延迟由 JS 以 CSS 变量 --adelay 注入（替代内联 style="animation-delay:..."） */
    animation-delay: var(--adelay, 0s);
}

.skeleton-bar.w-40  { width: 40px; }
.skeleton-bar.w-50  { width: 50px; }
.skeleton-bar.w-60  { width: 60px; }
.skeleton-bar.w-70  { width: 70px; }
.skeleton-bar.w-80  { width: 80px; }
.skeleton-bar.w-90  { width: 90px; }
.skeleton-bar.w-100 { width: 100px; }
.skeleton-bar.w-120 { width: 120px; }
.skeleton-bar.w-140 { width: 140px; }

/* 保持加载态的点动画用于整行占位 */
.loading-row td {
    text-align: center;
    padding: 60px 20px;
}

.empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state .icon {
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state .spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- 单元格特殊样式 ---- */
td {
    overflow: hidden;
    white-space: nowrap;
}

/* ---- 表格固定列（sticky columns）---- */
/* 左侧固定：公司名称（第1列） */
.user-table thead th:nth-child(1),
.user-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 12;
    background: inherit;
}

.user-table thead th:nth-child(1) {
    background: var(--color-bg);
    z-index: 13;
}

.user-table tbody td:nth-child(1) {
    background: var(--color-card);
}

.user-table tbody tr:hover td:nth-child(1) {
    background: var(--color-bg);
}

/* 右侧固定：仅按 data-col 固定「公告链接」「投递链接」，与列插入顺序解耦，
   新增列（如用户备注）不会被误冻结，隐藏中间列也不会让冻结错位 */
.user-table thead th[data-col="announcement"],
.user-table tbody td[data-col="announcement"],
.user-table thead th[data-col="link"],
.user-table tbody td[data-col="link"] {
    position: sticky;
    right: 0;
    z-index: 12;
    background: inherit;
}

.user-table thead th[data-col="announcement"] {
    background: var(--color-bg);
    right: 75px;
    z-index: 13;
}

.user-table thead th[data-col="link"] {
    background: var(--color-bg);
    right: 0;
    z-index: 13;
}

.user-table tbody td[data-col="announcement"] {
    background: var(--color-card);
    right: 75px;
}

.user-table tbody td[data-col="link"] {
    background: var(--color-card);
    right: 0;
}

.user-table tbody tr:hover td[data-col="announcement"],
.user-table tbody tr:hover td[data-col="link"] {
    background: var(--color-bg);
}

/* 固定列阴影提示 */
.user-table thead th:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
}

.user-table thead th[data-col="announcement"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
}

/* ---- 截止日期预警（3天内截止）---- */
.deadline-urgent {
    color: var(--color-danger);
    font-weight: 700;
    animation: deadlinePulse 2s ease-in-out infinite;
}

.deadline-urgent-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-danger);
    margin-right: 4px;
    vertical-align: middle;
    animation: deadlineBlink 1s ease-in-out infinite;
}

@keyframes deadlinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes deadlineBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.5); }
}

/* 左对齐 - 用于公司名称、岗位名称等长文本 */
.text-left {
    text-align: left !important;
}

/* 单元格宽度限制 */
.cell-max-120 {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 指定列宽（基数 ~75px） */
.user-table th:nth-child(1),
.user-table td:nth-child(1) { width: 180px; min-width: 180px; } /* 公司名称 +50% */

.user-table th:nth-child(5),
.user-table td:nth-child(5) { width: 90px; min-width: 90px; } /* 招聘对象 badge 完全显示 */

/* 招聘对象多值换行容器 */
.user-table td:nth-child(5) {
    white-space: normal;
}

.target-group-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    align-items: center;
}

.user-table th:nth-child(7),
.user-table td:nth-child(7) { width: 180px; min-width: 180px; } /* 岗位 +50% */

.user-table th:nth-child(8),
.user-table td:nth-child(8) { width: 180px; min-width: 180px; } /* 专业 +50% */

.user-table th:nth-child(9),
.user-table td:nth-child(9) { width: 100px; min-width: 100px; } /* 投递进度 +25% */

.user-table th:nth-child(14),
.user-table td:nth-child(14) { width: 100px; min-width: 100px; } /* 备注：完整显示占位文字「添加备注...」 */

.user-table th[data-col="announcement"],
.user-table td[data-col="announcement"] { width: 75px; min-width: 75px; } /* 公告链接 */

.user-table th[data-col="link"],
.user-table td[data-col="link"] { width: 75px; min-width: 75px; } /* 投递链接 */

.user-table th[data-col="user_remark"],
.user-table td[data-col="user_remark"] { width: 160px; min-width: 160px; } /* 用户备注：与备注列等宽对齐，不冻结 */

/* ---- 标签体系 ---- */

/* tag 状态标签 */
span.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    white-space: nowrap;
}

.tag-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.tag-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.tag-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.tag-info {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.tag-gray {
    background: var(--color-border-light);
    color: var(--color-text-muted);
}

.tag-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.tag-purple {
    background: rgba(124, 58, 237, 0.1);
    color: #7C3AED;
}

/* ---- 公司类型 Badge（tag-colored 多色扩展）---- */
span.tag-colored {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

/* 央国企 - 蓝色 #2563eb（国有企业，稳重可靠） */
.badge-cat-yangguoqi { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
/* 民企 - 琥珀色 #d97706（民营企业，活力鲜明） */
.badge-cat-minqi { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
/* 外资/合资 - 翠绿色 #059669（外资企业，国际化感） */
.badge-cat-waizi { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
/* 银行 - 玫瑰红 #e11d48（银行金融，醒目重要） */
.badge-cat-yinhang { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
/* 事业单位 - 紫罗兰 #7c3aed（事业单位，权威正式） */
.badge-cat-shiyedanwei { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; }
/* 社会机构 - 石板灰 #64748b（社会机构，默认中性） */
.badge-cat-shehuijigou { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* ---- 招聘类型 Badge ---- */
/* 2026-10-15 五类合并为「校招」：原 秋招/秋招提前批/秋招补录/春招/春招补录 五类已下架，
   配色与 js/main.js RECRUIT_TYPE_BADGE_MAP 一一对应。 */
/* 校招 - 蓝色 #2563eb（校园招聘主色调，稳重醒目） */
.badge-rec-xiaozhao { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
/* 实习 - 青色 #0d9488（实习招聘，清新活力） */
.badge-rec-shixi { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
/* 社招 - 石板灰 #64748b（社会招聘，中性） */
.badge-rec-shezhao { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
/* 选调生 - 紫罗兰 #7c3aed（专项招录通道） */
.badge-rec-xuandiaosheng { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
/* 事业编 - 靛蓝 #4f46e5（事业编制） */
.badge-rec-shiyebian { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
/* 公务员 - 琥珀 #b45309（公考通道） */
.badge-rec-gongwuyuan { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
/* 未知/兜底 - 石板灰 #64748b（不在字典闭集内的值，中性展示） */
.badge-rec-default { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* ---- 招聘对象 Badge（目标届别）---- */
/* 2024届 - 琥珀橙 #d97706（较早届，已毕业群体） */
.badge-tg-2024 { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* 2025届 - 青色 #0891b2（次新届，过渡群体） */
.badge-tg-2025 { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
/* 2026届 - 红色 #dc2626（最近届，最紧急最重要） */
.badge-tg-2026 { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
/* 2027届 - 蓝色 #2563eb（中间届，当前主力） */
.badge-tg-2027 { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
/* 2028届 - 绿色 #16a34a（较远届，未来储备） */
.badge-tg-2028 { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
/* 其他 - 暖灰 #78716c（兜底值，非特定届别） */
.badge-tg-other { background: #fafaf9; color: #57534e; border-color: #d6d3d1; }
/* 不限 - 石板灰 #64748b（不限，中性标识） */
.badge-tg-buxian { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
/* 混合届别（多值逗号分隔）- 深紫 #7c3aed（混合，特殊标识） */
.badge-tg-mixed { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }



/* ---- 链接按钮（投递链接 & 公告链接）---- */
.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.link-btn:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.link-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 投递链接（crt-link）*/
.link-btn.crt-link {
    background: linear-gradient(135deg, #6a9fee 0%, #5588e4 100%);
    border-color: rgba(85, 136, 228, 0.25);
}

.link-btn.crt-link:hover {
    background: linear-gradient(135deg, #5588e4 0%, #4578d4 100%);
    border-color: rgba(69, 120, 212, 0.35);
}

/* 公告链接（crt-notice-link）*/
.link-btn.crt-notice-link {
    background: linear-gradient(135deg, #4dba65 0%, #3d9e55 100%);
    border-color: rgba(61, 158, 85, 0.25);
}

.link-btn.crt-notice-link:hover {
    background: linear-gradient(135deg, #3d9e55 0%, #328848 100%);
    border-color: rgba(50, 136, 72, 0.35);
}

.link-btn .link-btn-icon {
    flex-shrink: 0;
}

/* ---- 投递进度 select 状态色（按选中值着色，12种状态颜色各自独立分明）---- */
.progress-select {
    padding: 4px 24px 4px 10px;
    border: 1.5px solid;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    max-width: 105px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.progress-select:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.progress-select:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 未投递 - 中性灰 #6b7280（尚未采取任何行动） */
.progress-select[data-progress="未投递"],
.progress-select option[value="未投递"]:checked { background-color: #f3f4f6; border-color: #d1d5db; color: #6b7280; }

/* 已投递 - 蓝色 #2563eb（投递动作已启动，积极状态） */
.progress-select[data-progress="已投递"] { background-color: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }

/* 待笔试 - 金黄色 #ca8a04（等待笔试，醒目提醒） */
.progress-select[data-progress="待笔试"] { background-color: #fef9c3; border-color: #fde047; color: #a16207; }

/* 测评 - 橙色 #ea580c（测评阶段，需关注） */
.progress-select[data-progress="测评"] { background-color: #fff7ed; border-color: #fdba74; color: #c2410c; }

/* 已笔试 - 琥珀色 #d97706（笔试已完成，沉稳过渡色） */
.progress-select[data-progress="已笔试"] { background-color: #fffbeb; border-color: #fcd34d; color: #b45309; }

/* 待面试 - 青色 #0d9488（等待面试，冷静准备） */
.progress-select[data-progress="待面试"] { background-color: #ccfbf1; border-color: #99f6e4; color: #0f766e; }

/* 已面试 - 靛蓝色 #4f46e5（面试已完成，深色稳重） */
.progress-select[data-progress="已面试"] { background-color: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }

/* 面试通过 - 翠绿色 #16a34a（通过好消息，积极正向） */
.progress-select[data-progress="面试通过"] { background-color: #dcfce7; border-color: #86efac; color: #15803d; }

/* 已offer - 玫红色 #db2777（拿到offer，最亮眼喜庆） */
.progress-select[data-progress="已offer"] { background-color: #fce7f3; border-color: #f9a8d4; color: #be185d; }

/* 已挂 - 红色 #dc2626（被拒，警示色） */
.progress-select[data-progress="已挂"] { background-color: #fee2e2; border-color: #fecaca; color: #b91c1c; }

/* 暂不投递 - 暖灰棕色 #78716c（暂停投递，低调暂停状态） */
.progress-select[data-progress="暂不投递"] { background-color: #f5f5f4; border-color: #d6d3d1; color: #78716c; }

/* 意向 - 紫色 #7c3aed（意向阶段，特殊中间态） */
.progress-select[data-progress="意向"] { background-color: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }

/* ---- 旧版链接按钮样式保留（兼容）---- */
.cell-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border: 1px solid;
}

.cell-btn-link {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: rgba(37, 99, 235, 0.2);
}

.cell-btn-link:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.cell-btn-announce {
    background: var(--color-success-light);
    color: var(--color-success);
    border-color: rgba(16, 185, 129, 0.2);
}

.cell-btn-announce:hover {
    background: var(--color-success);
    color: var(--color-text-white);
}

/* 截止日期单元格 */
.cell-deadline {
    font-weight: 500;
    white-space: nowrap;
}

.cell-deadline.urgent {
    color: var(--color-danger);
    font-weight: 700;
}

.cell-deadline.expired {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

/* 权限占位符 */
.cell-placeholder {
    display: inline-block;
    padding: 2px 6px;
    background: #FFF8E1;
    border: 1px dashed var(--color-warning-border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--color-warning-text);
    user-select: none;
    cursor: default;
}

/* ---- 分页栏（与管理后台数据审核页同款：见 admin-components.css）---- */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background: #fafbfc;
}

.table-pagination .page-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* 分页按钮区（统一样式） */
.table-pagination .page-btns {
    display: flex;
    gap: 2px;
}

.table-pagination .page-btns button {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-pagination .page-btns button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.table-pagination .page-btns button.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.table-pagination .page-btns button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pagination .page-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.table-pagination .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    user-select: none;
}

.table-pagination .page-size-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-pagination .page-size-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.table-pagination .page-size-select {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.table-pagination .page-size-select:focus {
    border-color: var(--color-primary);
}

.table-pagination .page-jump {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    margin-left: 4px;
}

.table-pagination .page-jump-input {
    width: 44px;
    height: 28px;
    padding: 0 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    text-align: center;
    outline: none;
    transition: border-color var(--transition-fast);
    -moz-appearance: textfield;
}

.table-pagination .page-jump-input::-webkit-inner-spin-button,
.table-pagination .page-jump-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table-pagination .page-jump-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ---- 看板统计卡片（进度管理）---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.stat-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.stat-card .icon {
    margin: 0 auto var(--spacing-sm);
    color: var(--color-primary);
    opacity: 0.8;
}

.stat-card .title {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.stat-card .number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* 可点击筛选的统计卡片（进度管理页）：点击=按该状态筛选，再点一次取消 */
.stat-card[data-progress-value] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.stat-card[data-progress-value]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.stat-card.is-active {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.05);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.stat-card.is-active .title {
    color: var(--color-primary);
    font-weight: 600;
}

.stat-card.is-active .number {
    color: var(--color-primary);
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- 头部卡片（榜单页）---- */
.page-header {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    margin: var(--spacing-xl) 0;
}

.page-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.page-header .badge-daily {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

.page-header .desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.header-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3xl);
}

.header-stat {
    text-align: center;
}

.header-stat .label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.header-stat .value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ---- 骨架屏 ---- */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
}

.skeleton-item {
    height: 48px;
    background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-border-light) 50%, var(--color-bg) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 下拉菜单 ---- */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    z-index: 200;
    display: none;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.dropdown-header .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.dropdown-header .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-header .user-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.dropdown-header .user-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.dropdown-header .role-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--color-bg);
}

.dropdown-item .icon {
    color: var(--color-text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 4px 0;
}

/* ---- 用户中心布局 ---- */
.profile-page {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.profile-sidebar {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.profile-menu {
    display: flex;
    flex-direction: column;
}

.profile-menu-item {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: var(--spacing-md);
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.profile-menu-item:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.profile-menu-item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

.profile-menu-item .icon {
    color: var(--color-text-muted);
}

.profile-menu-item.active .icon {
    color: var(--color-primary);
}

.profile-content {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.profile-banner {
    background: linear-gradient(135deg, var(--color-primary), #1D4ED8);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-white);
}

.profile-banner-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.profile-banner .icon {
    opacity: 0.9;
}

.profile-banner .text {
    font-size: var(--font-size-md);
    font-weight: 500;
}

.profile-body {
    padding: var(--spacing-2xl);
}

/* ---- 表单样式 ---- */
.form-group {
    margin-bottom: var(--spacing-xl);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-control:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    resize: vertical;
}

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

.qrcode-placeholder {
    width: 200px;
    height: 200px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ---- 会员卡片 ---- */
.welcome-card {
    background: linear-gradient(135deg, var(--color-primary-light), transparent);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.welcome-text {
    font-size: var(--font-size-md);
    color: var(--color-primary);
    font-weight: 500;
}

.content-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.content-card .info .title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.content-card .arrow {
    color: var(--color-text-muted);
}

.qrcode-section {
    margin-top: var(--spacing-xl);
}

.qrcode-section .label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ---- 下拉弹窗蒙版 ---- */
.dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 199;
    display: none;
}

.dropdown-overlay.show {
    display: block;
}

/* ---- 主内容区 ---- */
.main-content {
    padding-bottom: var(--spacing-3xl);
}

/* ================================================================
   模块名称：导航栏下拉菜单尺寸预设
   用途：替代 HTML 中的内联 style="width:...;right:..."
   ================================================================ */

/* 通知下拉菜单（宽版） */
.dropdown-menu-notif {
    width: 340px;
    right: -120px;
}

/* 用户下拉菜单（窄版） */
.dropdown-menu-user {
    width: 220px;
}

/* ================================================================
   模块名称：下拉菜单内容区块
   用途：替代 HTML 中的内联布局样式
   ================================================================ */

/* 通知下拉头部 */
.dropdown-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.dropdown-notif-header .dropdown-notif-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.dropdown-notif-header .dropdown-notif-action {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
}

/* 通知下拉空状态 */
.dropdown-notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.dropdown-notif-empty .empty-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

.dropdown-notif-empty .empty-text {
    font-size: var(--font-size-sm);
}

/* 通知下拉底部 */
.dropdown-notif-footer {
    border-top: 1px solid var(--color-border-light);
    padding: 8px 16px;
    text-align: center;
}

.dropdown-notif-footer .footer-link {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
}

/* ================================================================
   模块名称：通用空状态占位
   用途：替代 HTML 中各页面的加载占位内联样式
   ================================================================ */

/* 页面级空状态/加载占位容器 */
.page-placeholder {
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.page-placeholder .placeholder-icon {
    margin-bottom: var(--spacing-lg);
    opacity: 0.4;
}

.page-placeholder .placeholder-text {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

.page-placeholder .placeholder-hint {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

/* ================================================================
   模块名称：用户中心横幅文字
   用途：profile.html 横幅中的文字样式
   ================================================================ */

.profile-banner-text {
    font-size: var(--font-size-md);
    font-weight: 500;
}

.profile-banner-logout {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ================================================================
   模块名称：进度管理页面标题区
   ================================================================ */

.progress-page-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
}

.progress-page-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ================================================================
   模块名称：榜单页操作按钮行
   ================================================================ */

.ranking-filter-actions {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
}

/* ================================================================
   模块名称：统计区文字样式
   ================================================================ */

.stats-hint-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* ================================================================
   模块名称：表单提示文字
   ================================================================ */

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ================================================================
   模块名称：绑定提示信息框
   ================================================================ */

.binding-hint {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-primary);
}

.binding-hint .hint-inline-icon {
    vertical-align: middle;
    margin-right: 4px;
}

/* ================================================================
   模块名称：头像上传区域
   ================================================================ */

.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.avatar-upload-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-upload-field {
    flex: 1;
}

.avatar-upload-field label {
    margin-bottom: 4px;
}

/* ---- 用户头像展开箭头图标 ---- */
.avatar-chevron {
    color: var(--color-text-muted);
}

/* ---- 统计卡片图标颜色变体 ---- */
.stat-icon-primary {
    color: var(--color-primary);
}

.stat-icon-danger {
    color: var(--color-danger);
}

.stat-icon-success {
    color: var(--color-success);
}

.stat-icon-warning {
    color: var(--color-warning);
}

.stat-icon-muted {
    color: var(--color-text-muted);
}

/* ---- 筛选区内按钮行容器 ---- */
.filter-btn-row {
    margin-top: var(--spacing-lg);
}

.filter-btn-row-inline {
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
}

/* ================================================================
   模块名称：二维码区域
   ================================================================ */

.qrcode-hint-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* ================================================================
   模块名称：公告链接内联图标
   ================================================================ */

.inline-icon-warning {
    vertical-align: middle;
    margin-right: 6px;
    color: var(--color-warning);
}

/* ================================================================
   模块名称：补充工具类
   用途：替代 HTML 中的少量特定内联样式
   ================================================================ */

.hidden-checkbox {
    display: none;
}

.th-col-date {
    width: 105px;
}

.th-col-remark {
    width: 160px;
    min-width: 160px;
}

/* ---- 用户表格列宽（对齐《表格规范》）---- */
.user-table thead th[data-col="category"],
.user-table tbody td[data-col="category"] {
    width: 60px;
}
.user-table thead th[data-col="industry_name"],
.user-table tbody td[data-col="industry_name"] {
    width: 60px;
}
.user-table thead th[data-col="recruit_type"],
.user-table tbody td[data-col="recruit_type"] {
    width: 80px;
}

.user-table thead th[data-col="written_exam"],
.user-table tbody td[data-col="written_exam"] {
    width: 80px;
}

.user-table thead th[data-col="scale"],
.user-table tbody td[data-col="scale"] {
    width: 100px;
}

/* ---- 备注输入框 ---- */
.remark-input {
    width: 100%;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.remark-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.remark-input:hover {
    border-color: var(--color-border);
    background: var(--color-bg);
}

.remark-input:focus {
    border-color: #93b4f5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.12);
}

/* 备注列为只读（岗位/后台备注，非当前用户可编辑）：通过 readonly + tabindex=-1 禁止编辑，
   此处再去除以编辑态出现的边框/聚焦高亮，使其呈现静态文本观感 */
.remark-input.remark-readonly {
    cursor: default;
    color: var(--color-text-muted);
    background: transparent;
}
.remark-input.remark-readonly:hover {
    border-color: transparent;
    background: transparent;
}
.remark-input.remark-readonly:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* ================================================================
   模块名称：行悬浮信息提示框（Row Tooltip）
   用途：鼠标悬浮表格单元格时显示该列的完整信息（单行）
   ================================================================ */

.row-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    max-width: 280px;
    white-space: normal;
    word-break: break-word;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.row-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.row-tooltip-label {
    color: #94a3b8;
    flex-shrink: 0;
    white-space: nowrap;
}

.row-tooltip-value {
    color: #e2e8f0;
    min-width: 0;
}

/* ================================================================
   模块名称：表单禁用状态
   用途：统一禁用的表单控件样式，替代内联 style
   ================================================================ */

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

/* ================================================================
   模块名称：表单布局工具类
   用途：替代 profile.html 表单面板中的内联布局样式
   ================================================================ */

.form-section-max {
    max-width: 480px;
}

.avatar-section-label {
    margin-bottom: 0;
}

/* --- 表单禁用状态 --- */
.form-input-disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* --- 表单信息提示条 --- */
.form-info-tip {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
}

.form-info-tip svg {
    vertical-align: middle;
    margin-right: 4px;
}

/* --- 密码输入提示 --- */
.form-password-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* --- 退出登录按钮（在 profile-banner 中）--- */
.btn-logout {
    background: #FFFFFF;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-logout:active {
    transform: translateY(0);
}

/* --- 查看所有链接 --- */
.view-all-link {
    text-align: center;
    margin-top: var(--spacing-lg);
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.view-all-link:hover {
    opacity: 0.8;
}

/* --- 内容卡描述文本 --- */
.content-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* --- 二维码提示文本 --- */
.qrcode-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* ================================================================
   模块名称：内推广场 - 内推码复制按钮
   用途：内推广场页面专用样式（referral.html）
   ================================================================ */

.referral-code-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.referral-code-text {
    background: #f0f4f8;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-family: monospace;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

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

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

.referral-copy-btn.copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.copy-check-icon {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

/* ================================================================
   模块名称：内推广场 - 统计栏样式强化
   ================================================================ */

#referral-filter-section .stat-item .stat-value {
    font-weight: 700;
    color: var(--color-primary);
}

/* ================================================================
   模块名称：内推广场表格 - 列宽自适应（7列一页显示）
   覆盖 user-table 的 min-width:1500px，按7列分配宽度
   ================================================================ */

#referralTable.user-table {
    min-width: 0;
    table-layout: fixed;
}

/* ----- 表头列宽（使用 data-col 属性匹配，列切换时不错位）----- */
#referralTable thead th[data-col="company_name"],
#referralTable tbody td[data-col="company_name"] {
    width: 22%;
}

#referralTable thead th[data-col="category"],
#referralTable tbody td[data-col="category"] {
    width: 80px;
}

#referralTable thead th[data-col="industry_name"],
#referralTable tbody td[data-col="industry_name"] {
    width: 80px;
}

#referralTable thead th[data-col="scale"],
#referralTable tbody td[data-col="scale"] {
    width: 100px;
}

#referralTable thead th[data-col="referral_code"],
#referralTable tbody td[data-col="referral_code"] {
    width: 18%;
}

#referralTable thead th[data-col="update_time"],
#referralTable tbody td[data-col="update_time"] {
    width: 10%;
}

#referralTable thead th[data-col="remark"],
#referralTable tbody td[data-col="remark"] {
    width: 8%;
}

/* 内推广场表格单元格 - 放宽截断阈值 */
#referralTable tbody td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 内推广场表格 - 左侧固定列适配（仅公司名称） */
#referralTable.user-table thead th[data-col="company_name"],
#referralTable.user-table tbody td[data-col="company_name"] {
    position: sticky;
    left: 0;
    z-index: 12;
    background: inherit;
}

/* 表格滚动容器适配 - 移除内推广场页面的 1500px 下限 */
#referralTableBody .loading-state {
    padding: 60px 20px;
}

/* --- 会员标签 SVG 图标内联样式替代 --- */
.welcome-card .member-icon {
    vertical-align: middle;
    margin-right: 6px;
    color: var(--color-warning);
}

/* --- 标签面板隐藏状态（替代 style="display:none"）--- */
.tab-panel-hidden {
    display: none;
}

/* --- 面板加载状态 --- */
.panel-loading {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
}

.panel-loading-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

.panel-loading-text {
    font-size: var(--font-size-base);
}

.panel-loading .spin-icon {
    margin-bottom: 12px;
    opacity: 0.5;
}

/* --- 筛选区加载状态 --- */
.filter-select-loading {
    opacity: 0.55;
    pointer-events: none;
    cursor: wait;
    background-color: #f8fafc;
}

.filter-select-loading option {
    color: var(--color-text-muted);
}

.filter-select-error {
    border-color: var(--color-danger, #ef4444) !important;
}

.filter-select-empty {
    color: var(--color-text-muted);
}

/* 筛选区骨架屏占位 */
.filter-skeleton {
    height: 40px;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #e2e8f0 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    margin-top: 2px;
}

/* 筛选区错误重试 */
.filter-error-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-danger, #ef4444);
    margin-top: 4px;
    cursor: default;
}

.filter-retry-btn {
    font-size: 12px;
    color: var(--color-primary, #3b82f6);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

.filter-retry-btn:hover {
    color: var(--color-primary-hover, #2563eb);
}

/* 级联筛选容器加载遮罩 */
.cascading-filter-loading {
    position: relative;
    min-height: 40px;
}

.cascading-filter-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #e2e8f0 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-md, 8px);
    z-index: 1;
}

/* --- 头像表单行布局 --- */
.form-group-avatar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

/* --- 头像预览圆圈 --- */
.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview-icon {
    color: var(--color-text-muted);
}

/* --- 头像URL输入区域 --- */
.avatar-url-field {
    flex: 1;
}

.avatar-url-label {
    margin-bottom: 4px;
}

/* --- 二维码图标容器 --- */
.qrcode-icon-wrapper {
    text-align: center;
}

.qrcode-icon {
    color: var(--color-text-muted);
}

/* ================================================================
   模块名称：进度管理页面专属布局
   用途：progress.html 中"录入企业"按钮及提示文案的居中布局
   规范：表格规范 §1.1——样式外链，禁止内联
   ================================================================ */

.progress-page-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.progress-page-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ================================================================
   模块名称：榜单内容容器
   用途：ranking.html 中的榜单数据展示区域，替代内联 padding
   ================================================================ */

.ranking-content {
    padding: var(--spacing-xl);
}

/* ================================================================
   模块名称：错误提示文本
   用途：JS 动态插入的错误信息文字颜色
   ================================================================ */

.error-text {
    color: var(--red-500);
}

/* ================================================================
   模块名称：导航栏认证按钮隐藏状态
   用途：替代 nav-auth-buttons 的内联 style="display:none"
   规范：表格规范 §1.1——样式外链，禁止内联
   ================================================================ */

.nav-hidden {
    display: none;
}

/* ================================================================
   模块名称：Toast 通知容器
   用途：替代 login.html 中 auth-toast 的内联定位样式
   规范：表格规范 §1.1——样式外链，禁止内联
   ================================================================ */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* ================================================================
   模块名称：激活码兑换
   用途：激活码输入、预览、兑换结果展示
   ================================================================ */

.activation-exchange-area {
    padding: var(--spacing-2xl) var(--spacing-2xl);
    max-width: 560px;
}

.activation-input-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.activation-code-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    letter-spacing: 2px;
    transition: border-color var(--transition-fast);
}

.activation-code-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.activation-hint {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.activation-preview {
    margin-top: var(--spacing-xl);
}

/* ================================================================
   模块名称：录入企业模态框
   用途：progress.html 中"录入企业"弹窗样式
   ================================================================ */

.enterprise-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    animation: modalFadeIn 0.2s ease;
    backdrop-filter: blur(2px);
}

.enterprise-modal {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.3s ease;
}

.enterprise-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-card);
    z-index: 5;
}

.enterprise-modal-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}

.enterprise-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
}

.enterprise-modal-close:hover {
    background: #f1f5f9;
    color: var(--color-text-primary);
}

.enterprise-modal-body {
    padding: var(--spacing-xl);
}

.enterprise-modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    position: sticky;
    bottom: 0;
    background: var(--color-card);
}

/* 表单网格布局 */
.enterprise-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.enterprise-form-grid .form-group-full {
    grid-column: 1 / -1;
}

.enterprise-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.enterprise-form-grid .form-group label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.enterprise-form-grid .form-group label .required {
    color: #EF4444;
    margin-left: 2px;
}

.enterprise-form-grid .form-group input,
.enterprise-form-grid .form-group select,
.enterprise-form-grid .form-group textarea {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-family: inherit;
    transition: border-color var(--transition-fast);
    background: var(--color-card);
    color: var(--color-text-primary);
}

.enterprise-form-grid .form-group input:focus,
.enterprise-form-grid .form-group select:focus,
.enterprise-form-grid .form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.enterprise-form-grid .form-group textarea {
    resize: vertical;
    min-height: 70px;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.activation-preview-card {
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    background: var(--color-primary-light);
    overflow: hidden;
}

/* ================================================================
   日期范围选择器样式
   ================================================================ */
.filter-grid .filter-group .date-range {
  position: relative;
  width: 100%;
}
.filter-grid .filter-group .date-range-input {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-grid .filter-group .date-range.has-value .date-range-input {
  padding-right: 30px;
}
.filter-grid .filter-group .date-range-input:hover {
  border-color: var(--color-text-muted);
}
.filter-grid .filter-group .date-range.is-open .date-range-input,
.filter-grid .filter-group .date-range-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}
.filter-grid .filter-group .date-range-input .date-range-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}
.filter-grid .filter-group .date-range-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}
.filter-grid .filter-group .date-range-text.is-placeholder {
  color: var(--color-text-muted);
}
.filter-grid .filter-group .date-range-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-grid .filter-group .date-range.has-value .date-range-clear {
  display: inline-flex;
}
.filter-grid .filter-group .date-range-clear:hover {
  background: var(--color-danger);
  color: var(--color-text-white);
}
.filter-grid .filter-group .date-range-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 268px;
  padding: 10px 12px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.filter-grid .filter-group .date-range-panel[hidden] {
  display: none;
}
.date-range-panel .dr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.date-range-panel .dr-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.date-range-panel .dr-nav {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.date-range-panel .dr-nav:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
}
.date-range-panel .dr-week,
.date-range-panel .dr-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-range-panel .dr-week span {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-muted);
}
.date-range-panel .dr-day {
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.date-range-panel .dr-day:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
/* 截止时间选择器（min=today）：今天以前的日期禁选——一律不含已截止 */
.date-range-panel .dr-day.is-disabled,
.date-range-panel .dr-day.is-disabled:hover {
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.4;
}
.date-range-panel .dr-day.is-other {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.date-range-panel .dr-day.is-today {
  font-weight: 700;
  color: var(--color-primary);
}
.date-range-panel .dr-day.is-in-range {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 0;
}
.date-range-panel .dr-day.is-start,
.date-range-panel .dr-day.is-end {
  background: var(--color-primary);
  color: var(--color-text-white);
  font-weight: 600;
}
.date-range-panel .dr-day.is-start {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.date-range-panel .dr-day.is-end {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.date-range-panel .dr-day.is-start.is-end {
  border-radius: var(--radius-sm);
}
.date-range-panel .dr-day.is-start:hover,
.date-range-panel .dr-day.is-end:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-white);
}
.date-range-panel .dr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}
.date-range-panel .dr-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}
.date-range-panel .dr-today {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--color-primary);
  cursor: pointer;
}
.date-range-panel .dr-today:hover {
  text-decoration: underline;
}

/* ================================================================
   筛选项「已修改」高亮
   取值偏离默认（空/未选）时，整组进入醒目态：标题转主色、控件描边转主色 + 淡主色底。
   类由 core.js refreshFilterModifiedGroups 统一维护。
   ================================================================ */
.filter-group.is-modified label {
    color: var(--color-primary);
}

.filter-grid .filter-group.is-modified .form-input,
.filter-grid .filter-group.is-modified .form-select,
.filter-grid .filter-group.is-modified .cascading-trigger,
.filter-grid .filter-group.is-modified .multi-select-trigger,
.filter-grid .filter-group.is-modified .date-range-input,
.filter-grid .filter-group.is-modified .deadline-filter-trigger {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.filter-grid .filter-group.is-modified .cascading-trigger-text,
.filter-grid .filter-group.is-modified .multi-select-trigger-text,
.filter-grid .filter-group.is-modified .date-range-text,
.filter-grid .filter-group.is-modified .deadline-filter-trigger-text {
    color: var(--color-primary);
}

.filter-grid .filter-group.is-modified .cascading-arrow,
.filter-grid .filter-group.is-modified .multi-select-arrow,
.filter-grid .filter-group.is-modified .date-range-icon,
.filter-grid .filter-group.is-modified .deadline-filter-arrow {
    color: var(--color-primary);
}

.activation-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover, #1D4ED8) 100%);
}

.activation-preview-header svg {
    color: #fff;
    flex-shrink: 0;
}

.activation-preview-title {
    color: #fff;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.activation-preview-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

.activation-preview-badge.badge-status-unused {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.activation-preview-badge.badge-status-used {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.activation-preview-badge.badge-status-expired {
    background: rgba(255, 255, 255, 0.15);
    color: #FEE2E2;
    border: 1px solid rgba(254, 226, 226, 0.4);
}

.activation-preview-badge.badge-status-disabled {
    background: rgba(255, 255, 255, 0.15);
    color: #FECACA;
    border: 1px solid rgba(254, 202, 202, 0.4);
}

.activation-preview-badge.badge-status-locked {
    background: rgba(255, 255, 255, 0.15);
    color: #FDE68A;
    border: 1px solid rgba(253, 230, 138, 0.4);
}

.activation-preview-body {
    padding: 16px;
    background: #fff;
}

.activation-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

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

.activation-info-row.activation-info-row-warning {
    background: #FFFBEB;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-top: 8px;
    border-bottom: none;
}

.activation-info-row.activation-info-row-warning .activation-info-value {
    color: #B45309;
}

.activation-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.activation-info-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 600;
}

.activation-result {
    margin-top: var(--spacing-xl);
}

.activation-result-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.activation-result-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 24px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: var(--radius-lg);
    text-align: center;
}

.activation-result-success svg {
    width: 40px;
    height: 40px;
}

.activation-result-msg {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #065F46;
}

.activation-result-detail {
    font-size: var(--font-size-sm);
    color: #047857;
}

.activation-result-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #B91C1C;
}

.badge-activation {
    display: inline-block;
    padding: 2px 8px;
    background: #EDE9FE;
    color: #6D28D9;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.badge-purchase {
    display: inline-block;
    padding: 2px 8px;
    background: #DBEAFE;
    color: #1D4ED8;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

/* ================================================================
   模块名称：激活码兑换 - 空状态 / 骨架屏 / 错误重试 / 快捷链接
   ================================================================ */

.activation-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--color-text-muted);
    text-align: center;
}

.activation-empty-state svg {
    opacity: 0.35;
}

.activation-empty-text {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0;
}

.activation-empty-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.activation-skeleton {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    margin-top: var(--spacing-xl);
}

.activation-skeleton .skeleton-row {
    margin-bottom: 12px;
}

.activation-skeleton .skeleton-row:last-child {
    margin-bottom: 0;
}

.activation-skeleton .skeleton-bar {
    height: 14px;
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    width: 100%;
}

.activation-skeleton .skeleton-bar-short {
    width: 60%;
}

.activation-skeleton .skeleton-bar-long {
    width: 80%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.activation-error-state {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 16px;
    margin-top: var(--spacing-xl);
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #B91C1C;
}

.activation-error-state .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.activation-error-msg {
    flex: 1;
}

.activation-quick-link {
    margin-top: var(--spacing-xl);
    padding: 12px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    text-align: center;
}

.activation-quick-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.activation-quick-link a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ================================================================
   模块名称：购买/兑换记录 - 筛选栏
   ================================================================ */

.orders-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.orders-filter-bar .filter-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.orders-filter-bar .btn-filter {
    height: auto;
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.orders-filter-bar .btn-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

.orders-filter-bar .btn-filter-active:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

/* ================================================================
   模块名称：购买/兑换记录 - 扩展表格
   列顺序：记录ID、类型、商品/权益、金额、支付方式、激活码(脱敏)、状态、VIP开始时间、VIP结束时间、时间、备注、操作
   ================================================================ */

.orders-table-expanded {
    min-width: 1100px;
}

.orders-table-expanded .col-id {
    width: 140px;
    white-space: nowrap;
}

.orders-table-expanded .col-type {
    width: 90px;
    text-align: center;
}

.orders-table-expanded .col-product {
    width: 130px;
}

.orders-table-expanded .col-amount {
    width: 70px;
    text-align: right;
}

.orders-table-expanded .col-payment {
    width: 80px;
}

.orders-table-expanded .col-activation-code {
    width: 150px;
}

.orders-table-expanded .col-status {
    width: 70px;
    text-align: center;
}

.orders-table-expanded .col-vip-time {
    width: 155px;
    white-space: nowrap;
}

.orders-table-expanded .col-time {
    width: 155px;
    white-space: nowrap;
}

.orders-table-expanded .col-remark {
    width: 100px;
}

.orders-table-expanded .col-action {
    width: 80px;
    text-align: center;
}

.code-masked {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}

/* Tag-style badges for 类型列 */
.badge-tag-primary {
    display: inline-block;
    padding: 2px 8px;
    background: #DBEAFE;
    color: #1D4ED8;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-tag-success {
    display: inline-block;
    padding: 2px 8px;
    background: #D1FAE5;
    color: #047857;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* 保留旧版 badge 兼容 */
.badge-activation {
    display: inline-block;
    padding: 2px 8px;
    background: #EDE9FE;
    color: #6D28D9;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.link-primary {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.link-primary:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ================================================================
   模块名称：个人中心 - 购买链接面板
   包含：购买链接卡片、价格、渠道图标、空状态
   依赖：base.css（CSS 变量）
   ================================================================ */

.purchase-links-bar {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 24px;
}

.purchase-links-bar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.purchase-links-bar-header span {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.purchase-links-bar-list-loading {
    text-align: center;
    padding: 20px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.purchase-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.purchase-link-card:hover {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.purchase-link-card:last-child {
    margin-bottom: 0;
}

.purchase-link-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.purchase-link-icon.wechat { background: #e8f5e9; color: #07C160; }
.purchase-link-icon.alipay { background: #e3f2fd; color: #1677FF; }
.purchase-link-icon.xianyu { background: #fff3e0; color: #FE6D0A; }
.purchase-link-icon.other  { background: #f5f5f5; color: #616161; }

.purchase-link-info {
    flex: 1;
    min-width: 0;
}

.purchase-link-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-link-product {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}

.purchase-link-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}

.purchase-link-price .final {
    font-size: 20px;
    font-weight: 700;
    color: #ef4444;
}

.purchase-link-price .original {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
}

.purchase-link-discount {
    background: #fef2f2;
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.purchase-link-arrow {
    font-size: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}

.purchase-links-empty {
    text-align: center;
    padding: 16px;
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
}

.purchase-links-error {
    text-align: center;
    padding: 16px;
    color: #ef4444;
    font-size: 13px;
}

.purchase-links-bar-more {
    text-align: center;
    margin-top: 8px;
}

.purchase-links-bar-more a {
    font-size: 12px;
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.purchase-links-bar-more a:hover {
    text-decoration: underline;
}

/* ================================================================
   模块名称：筛选栏搜索按钮倒计时进度条
   包含：.btn-search-timer / .timer-progress / .timer-progress-bar
         / .timer-seconds / .timer-expired / 动画关键帧
   依赖：base.css（CSS 变量）
   ================================================================ */

/* --- 搜索按钮容器（承载进度条） --- */
.btn-search-timer {
    position: relative;
    overflow: hidden;
}

/* --- 进度条轨道 --- */
.btn-search-timer .timer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 0 6px 6px;
}

/* --- 进度条填充（对齐版1：0.1s linear 过渡，100ms interval 驱动） --- */
.btn-search-timer .timer-progress-bar {
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 6px 6px;
    transition: width 0.1s linear;
    width: 100%;
}

/* --- 秒数显示文字 --- */
.btn-search-timer .timer-seconds {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    min-width: 28px;
    display: inline-block;
    text-align: center;
}

/* --- 倒计时暂停状态 --- */
.btn-search-timer.timer-paused .timer-progress-bar {
    background: rgba(255, 193, 7, 0.8);
    animation: none;
}

.btn-search-timer.timer-paused .timer-seconds {
    color: #ffc107;
}

/* --- 倒计时结束脉冲动画 --- */
.btn-search-timer.timer-expired .timer-progress-bar {
    background: #fbbf24;
    animation: filterTimerPulse 0.5s ease-in-out 3;
}

@keyframes filterTimerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* --- 倒计时隐藏状态（未进行任何筛选时） --- */
.btn-search-timer.timer-hidden .timer-progress {
    display: none;
}

.btn-search-timer.timer-hidden .timer-seconds {
    display: none;
}