/* == 晓得了 VIP 专享版核心样式表 == */

/* 1. 全局设计令牌与主题变量 */
:root {
    /* 页面基底 */
    --页面背景: #f4f7fc;
    --主要文字颜色: #0f172a;
    --次要文字颜色: #64748b;
    --主题蓝: #2563eb;
    --VIP紫: #7c3aed;
    --光晕1: rgba(37, 99, 235, 0.04);
    --光晕2: rgba(124, 58, 237, 0.04);

    /* 顶部 4 大卡片/工具栏 */
    --顶栏背景: #ffffff;
    --顶栏边框: #e2e8f0;
    --顶栏阴影: 0 2px 8px rgba(15, 23, 42, 0.03);
    --按钮背景: #ffffff;
    --按钮边框: #cbd5e1;
    --按钮文字: #334155;
    --按钮悬浮背景: #f8fafc;

    --公告栏背景: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 241, 242, 0.9));
    --公告栏边框: #fecdd3;
    --公告文字: #ef4444;
    --公告右侧: #f87171;

    --模式槽背景: #e2e8f0;
    --模式按钮文字: #64748b;
    --模式激活背景: #ffffff;
    --模式激活文字: #0f172a;
    --模式激活阴影: 0 2px 6px rgba(15, 23, 42, 0.08);

    --时间栏背景: #ffffff;
    --时间栏边框: #e2e8f0;
    --日期卡片文字: #0f172a;
    --子筛选背景: #f8fafc;
    --子筛选边框: #e2e8f0;
    --子筛选文字: #64748b;

    /* 分组标题 */
    --分组标题文字: #0f172a;
    --分组数量背景: #f1f5f9;
    --分组数量文字: #64748b;

    /* 活动卡片 */
    --卡片背景: #ffffff;
    --卡片边框: #e2e8f0;
    --卡片阴影: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
    --活动卡种文字: #1e293b;
    --活动名称背景: #f1f5f9;
    --活动名称文字: #334155;
    --活动时间背景: #f8fafc;
    --活动时间边框: #f1f5f9;
    --活动时间文字: #64748b;
    --银行标签背景: var(--银行背景, #eff6ff);
    --银行标签边框: var(--银行边框, #dbeafe);
    --银行标签文字: var(--银行文字, #1d4ed8);
    --跳转图标背景: var(--银行背景, #eff6ff);
    --跳转图标文字: var(--银行主色, #2563eb);

    /* 弹窗与表单控件 */
    --弹窗主体背景: #ffffff;
    --弹窗边框: #e2e8f0;
    --弹窗头部边框: #f1f5f9;
    --弹窗标题文字: #0f172a;
    --输入框背景: #ffffff;
    --输入框边框: #cbd5e1;
    --输入框文字: #0f172a;
    --输入框标签: #475569;
    --下拉触发背景: #ffffff;
    --下拉触发边框: #cbd5e1;
    --下拉触发文字: #0f172a;
    --下拉菜单背景: #ffffff;
    --下拉菜单边框: #cbd5e1;
    --下拉选项文字: #334155;
    --下拉选项悬浮背景: #f1f5f9;
    --下拉选项选中背景: #eff6ff;

    /* 持卡双栏抽屉 */
    --持卡容器背景: #ffffff;
    --持卡容器边框: #e2e8f0;
    --持卡导航背景: #f8fafc;
    --持卡导航边框: #e2e8f0;
    --持卡导航文字: #475569;
    --持卡导航激活背景: #ffffff;
    --持卡导航激活文字: #2563eb;
    --持卡Chip背景: #ffffff;
    --持卡Chip边框: #e2e8f0;
    --持卡Chip文字: #334155;
    --持卡搜索背景: #f8fafc;
    --持卡搜索边框: #e2e8f0;
    --持卡搜索文字: #1e293b;

    /* 灰阶与完成状态 */
    --完成卡片背景: #f8fafc;
    --完成卡片边框: #e2e8f0;
    --次要按钮背景: #f1f5f9;
    --次要按钮文字: #64748b;
}

/* 2. 深色夜间模式设计令牌 */
:root[data-theme="dark"],
[data-theme="dark"] {
    --页面背景: #0b1120;
    --主要文字颜色: #f8fafc;
    --次要文字颜色: #94a3b8;
    --主题蓝: #3b82f6;
    --VIP紫: #a855f7;
    --光晕1: rgba(37, 99, 235, 0.14);
    --光晕2: rgba(124, 58, 237, 0.12);

    --顶栏背景: #1e293b;
    --顶栏边框: #334155;
    --顶栏阴影: 0 4px 14px rgba(0, 0, 0, 0.35);
    --按钮背景: #0f172a;
    --按钮边框: #334155;
    --按钮文字: #cbd5e1;
    --按钮悬浮背景: #334155;

    --公告栏背景: linear-gradient(135deg, rgba(69, 10, 10, 0.85), rgba(88, 28, 28, 0.75));
    --公告栏边框: #7f1d1d;
    --公告文字: #fca5a5;
    --公告右侧: #f87171;

    --模式槽背景: #0f172a;
    --模式按钮文字: #94a3b8;
    --模式激活背景: #1e293b;
    --模式激活文字: #f8fafc;
    --模式激活阴影: 0 2px 8px rgba(0, 0, 0, 0.45);

    --时间栏背景: #1e293b;
    --时间栏边框: #334155;
    --日期卡片文字: #f8fafc;
    --子筛选背景: #0f172a;
    --子筛选边框: #334155;
    --子筛选文字: #94a3b8;

    --分组标题文字: #f8fafc;
    --分组数量背景: #334155;
    --分组数量文字: #94a3b8;

    --卡片背景: #1e293b;
    --卡片边框: #334155;
    --卡片阴影: 0 4px 18px -2px rgba(0, 0, 0, 0.4);
    --活动卡种文字: #f8fafc;
    --活动名称背景: #334155;
    --活动名称文字: #e2e8f0;
    --活动时间背景: #0f172a;
    --活动时间边框: #334155;
    --活动时间文字: #94a3b8;
    --银行标签背景: rgba(255, 255, 255, 0.08);
    --银行标签边框: rgba(255, 255, 255, 0.12);
    --银行标签文字: var(--银行主色, #60a5fa);
    --跳转图标背景: rgba(255, 255, 255, 0.08);
    --跳转图标文字: var(--银行主色, #60a5fa);

    --弹窗主体背景: #1e293b;
    --弹窗边框: #334155;
    --弹窗头部边框: #334155;
    --弹窗标题文字: #f8fafc;
    --输入框背景: #0f172a;
    --输入框边框: #334155;
    --输入框文字: #f8fafc;
    --输入框标签: #94a3b8;
    --下拉触发背景: #0f172a;
    --下拉触发边框: #334155;
    --下拉触发文字: #f8fafc;
    --下拉菜单背景: #1e293b;
    --下拉菜单边框: #334155;
    --下拉选项文字: #cbd5e1;
    --下拉选项悬浮背景: #334155;
    --下拉选项选中背景: rgba(37, 99, 235, 0.25);

    --持卡容器背景: #1e293b;
    --持卡容器边框: #334155;
    --持卡导航背景: #0f172a;
    --持卡导航边框: #334155;
    --持卡导航文字: #94a3b8;
    --持卡导航激活背景: #1e293b;
    --持卡导航激活文字: #60a5fa;
    --持卡Chip背景: #0f172a;
    --持卡Chip边框: #334155;
    --持卡Chip文字: #cbd5e1;
    --持卡搜索背景: #0f172a;
    --持卡搜索边框: #334155;
    --持卡搜索文字: #f8fafc;

    --完成卡片背景: #151e2e;
    --完成卡片边框: #27354a;
    --次要按钮背景: #334155;
    --次要按钮文字: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --页面背景: #0b1120;
        --主要文字颜色: #f8fafc;
        --次要文字颜色: #94a3b8;
        --主题蓝: #3b82f6;
        --VIP紫: #a855f7;
        --光晕1: rgba(37, 99, 235, 0.14);
        --光晕2: rgba(124, 58, 237, 0.12);

        --顶栏背景: #1e293b;
        --顶栏边框: #334155;
        --顶栏阴影: 0 4px 14px rgba(0, 0, 0, 0.35);
        --按钮背景: #0f172a;
        --按钮边框: #334155;
        --按钮文字: #cbd5e1;
        --按钮悬浮背景: #334155;

        --公告栏背景: linear-gradient(135deg, rgba(69, 10, 10, 0.85), rgba(88, 28, 28, 0.75));
        --公告栏边框: #7f1d1d;
        --公告文字: #fca5a5;
        --公告右侧: #f87171;

        --模式槽背景: #0f172a;
        --模式按钮文字: #94a3b8;
        --模式激活背景: #1e293b;
        --模式激活文字: #f8fafc;
        --模式激活阴影: 0 2px 8px rgba(0, 0, 0, 0.45);

        --时间栏背景: #1e293b;
        --时间栏边框: #334155;
        --日期卡片文字: #f8fafc;
        --子筛选背景: #0f172a;
        --子筛选边框: #334155;
        --子筛选文字: #94a3b8;

        --分组标题文字: #f8fafc;
        --分组数量背景: #334155;
        --分组数量文字: #94a3b8;

        --卡片背景: #1e293b;
        --卡片边框: #334155;
        --卡片阴影: 0 4px 18px -2px rgba(0, 0, 0, 0.4);
        --活动卡种文字: #f8fafc;
        --活动名称背景: #334155;
        --活动名称文字: #e2e8f0;
        --活动时间背景: #0f172a;
        --活动时间边框: #334155;
        --活动时间文字: #94a3b8;
        --银行标签背景: rgba(255, 255, 255, 0.08);
        --银行标签边框: rgba(255, 255, 255, 0.12);
        --银行标签文字: var(--银行主色, #60a5fa);
        --跳转图标背景: rgba(255, 255, 255, 0.08);
        --跳转图标文字: var(--银行主色, #60a5fa);

        --弹窗主体背景: #1e293b;
        --弹窗边框: #334155;
        --弹窗头部边框: #334155;
        --弹窗标题文字: #f8fafc;
        --输入框背景: #0f172a;
        --输入框边框: #334155;
        --输入框文字: #f8fafc;
        --输入框标签: #94a3b8;
        --下拉触发背景: #0f172a;
        --下拉触发边框: #334155;
        --下拉触发文字: #f8fafc;
        --下拉菜单背景: #1e293b;
        --下拉菜单边框: #334155;
        --下拉选项文字: #cbd5e1;
        --下拉选项悬浮背景: #334155;
        --下拉选项选中背景: rgba(37, 99, 235, 0.25);

        --持卡容器背景: #1e293b;
        --持卡容器边框: #334155;
        --持卡导航背景: #0f172a;
        --持卡导航边框: #334155;
        --持卡导航文字: #94a3b8;
        --持卡导航激活背景: #1e293b;
        --持卡导航激活文字: #60a5fa;
        --持卡Chip背景: #0f172a;
        --持卡Chip边框: #334155;
        --持卡Chip文字: #cbd5e1;
        --持卡搜索背景: #0f172a;
        --持卡搜索边框: #334155;
        --持卡搜索文字: #f8fafc;

        --完成卡片背景: #151e2e;
        --完成卡片边框: #27354a;
        --次要按钮背景: #334155;
        --次要按钮文字: #cbd5e1;
    }
}

/* 3. 基础布局与页面规范 */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--页面背景);
    background-image: 
        radial-gradient(at 0% 0%, var(--光晕1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, var(--光晕2) 0px, transparent 50%);
    color: var(--主要文字颜色);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.页面容器 {
    width: 100%;
    max-width: 500px;
    padding: 16px 16px 40px;
    box-sizing: border-box;
}

/* 4. 顶部用户身份与顶栏控制 (卡片 1) */
.顶栏控制 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--顶栏背景);
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--顶栏边框);
    margin-bottom: 12px;
    box-shadow: var(--顶栏阴影);
    transition: all 0.25s ease;
}

.用户标识 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--主要文字颜色);
}

.身份徽章 {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 700;
    min-width: 32px;
    display: inline-block;
    text-align: center;
    background: transparent;
    color: transparent;
}
.身份徽章.游客 { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.身份徽章.user { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.身份徽章.vip { background: #f3e8ff; color: #7c3aed; border: 1px solid #d8b4fe; }
.身份徽章.admin { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }

[data-theme="dark"] .身份徽章.游客,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .身份徽章.游客 { background: #334155; color: #94a3b8; border-color: #475569; } }
[data-theme="dark"] .身份徽章.user,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .身份徽章.user { background: #082f49; color: #38bdf8; border-color: #0369a1; } }
[data-theme="dark"] .身份徽章.vip,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .身份徽章.vip { background: #3b0764; color: #d8b4fe; border-color: #7e22ce; } }
[data-theme="dark"] .身份徽章.admin,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .身份徽章.admin { background: #172554; color: #93c5fd; border-color: #1d4ed8; } }

.顶栏按钮组 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.顶栏小按钮 {
    position: relative;
    border: 1px solid var(--按钮边框);
    background: var(--按钮背景);
    color: var(--按钮文字);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}
.顶栏小按钮:hover {
    background: var(--按钮悬浮背景);
}

.主题切换按钮 {
    font-size: 0.92rem;
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 28px;
    user-select: none;
}

.顶栏小按钮.突出 {
    background: var(--主题蓝);
    color: #ffffff;
    border-color: var(--主题蓝);
}

.次要按钮 {
    background: var(--次要按钮背景);
    color: var(--次要按钮文字);
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    padding: 12px 0;
    transition: all 0.2s ease;
}

.新卡红点角标 {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
    border: 2px solid var(--顶栏背景);
    animation: 红点脉冲 2s infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes 红点脉冲 {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.新卡徽章 {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 4px;
    display: inline-block;
    transform: scale(0.9);
    vertical-align: middle;
}

/* 5. 顶部滚动公告栏 (卡片 2) */
.底部公告栏容器 {
    margin: 0 auto 12px auto;
    max-width: 500px;
    height: 34px;
    background: var(--公告栏背景);
    border: 1px solid var(--公告栏边框);
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.底部公告栏容器:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
}

.底部公告栏容器:active {
    transform: scale(0.99);
}

.公告喇叭图标 {
    font-size: 0.85rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.公告轮播视窗 {
    flex: 1;
    height: 20px;
    overflow: hidden;
    position: relative;
}

.公告滑动轨道 {
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.公告条目 {
    height: 20px;
    line-height: 20px;
    font-size: 0.76rem;
    color: var(--公告文字);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.公告右侧指示 {
    font-size: 0.88rem;
    color: var(--公告右侧);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 2px;
}

/* 6. 顶部模式切换工具栏 (卡片 3) */
.顶部工具栏 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.模式切换栏 {
    flex: 1;
    display: flex;
    background: var(--模式槽背景);
    border: 1px solid var(--顶栏边框);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
    transition: all 0.25s ease;
}

.模式按钮 {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--模式按钮文字);
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}

.模式按钮.激活 {
    background: var(--模式激活背景);
    color: var(--模式激活文字);
    box-shadow: var(--模式激活阴影);
    font-weight: 700;
}

/* 7. 智能时间广播与子筛选工具栏 (卡片 4) */
.时间工具栏 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    background: var(--时间栏背景);
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--时间栏边框);
    box-shadow: var(--顶栏阴影);
    transition: all 0.25s ease;
}

.今日日期卡片 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--日期卡片文字);
    user-select: none;
}

.日期翻页按钮 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--子筛选边框);
    background: var(--子筛选背景);
    color: var(--子筛选文字);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    outline: none;
    padding: 0;
}

.日期翻页按钮:hover {
    background: var(--按钮悬浮背景);
    color: var(--主题蓝);
    border-color: var(--主题蓝);
}

.日期翻页按钮:active {
    transform: scale(0.92);
}

.日期主显区 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 28px;
    box-sizing: border-box;
}

.日期主显区:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--主题蓝);
}

.日期主显区:active {
    transform: scale(0.98);
}

.日期选择下拉箭头 {
    font-size: 0.72rem;
    color: var(--次要文字颜色);
    transition: transform 0.2s ease;
    margin-left: 2px;
}

.日期主显区:hover .日期选择下拉箭头 {
    color: var(--主题蓝);
    transform: translateY(1px);
}

.隐形日期输入框 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.回到今天按钮 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--主题蓝);
    background: var(--主题蓝);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    outline: none;
    animation: 徽章淡入 0.2s ease-out;
}

.回到今天按钮:hover {
    filter: brightness(1.1);
}

.回到今天按钮:active {
    transform: scale(0.92);
}

@keyframes 徽章淡入 {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.筛选按钮行 {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.子筛选按钮 {
    border: 1px solid var(--子筛选边框);
    background: var(--子筛选背景);
    padding: 6px 1px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--子筛选文字);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.子筛选按钮.激活 {
    background: var(--主题蓝);
    color: #ffffff;
    border-color: var(--主题蓝);
    font-weight: 700;
}

.子筛选按钮.订阅激活 {
    background: var(--VIP紫);
    color: #ffffff;
    border-color: var(--VIP紫);
    font-weight: 700;
}

.子筛选按钮.完成激活 {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    font-weight: 700;
}

/* 8. 活动分组与标题行 */
.分组容器 {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.银行分组 {
    display: flex;
    flex-direction: column;
}

.分组标题行 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}

.分组指示条 {
    width: 4px;
    height: 16px;
    background: var(--银行主色, #2563eb);
    border-radius: 2px;
    display: inline-block;
}

.分组银行名称 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--分组标题文字);
    transition: color 0.25s ease;
}

.分组数量标签 {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--分组数量文字);
    background: var(--分组数量背景);
    padding: 2px 8px;
    border-radius: 10px;
    transition: all 0.25s ease;
}

.折叠图标 {
    margin-left: auto;
    color: #94a3b8;
}

.折叠箭头 {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.折叠动画容器 {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.折叠内衬 {
    overflow: hidden;
}

.银行分组.已折叠 .折叠箭头 {
    transform: rotate(-90deg);
}

.银行分组.已折叠 .折叠动画容器 {
    grid-template-rows: 0fr;
}

.卡片网格 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    padding-bottom: 6px;
}

/* 9. 活动卡片体系 */
.跳转卡片 {
    background: var(--卡片背景);
    border: 1px solid var(--卡片边框);
    border-left: 4px solid var(--银行主色, #2563eb);
    border-radius: 16px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--主要文字颜色);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--卡片阴影);
    cursor: pointer;
    overflow: hidden;
}

html, body, div, span, a, label {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation;
}

input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* 卡片完成与已毕业态 */
.跳转卡片.已完成,
.跳转卡片.已毕业 {
    opacity: 0.65;
    background: var(--完成卡片背景) !important;
    border-color: var(--完成卡片边框) !important;
    border-left: 4px solid #94a3b8 !important;
    transition: all 0.25s ease;
}
.跳转卡片.已完成:hover,
.跳转卡片.已毕业:hover {
    opacity: 0.9;
}

.跳转卡片.已完成 .第一行,
.跳转卡片.已毕业 .第一行,
.跳转卡片.已完成 .第二行,
.跳转卡片.已毕业 .第二行 {
    filter: grayscale(1) !important;
}

.跳转卡片.已完成 .银行标签,
.跳转卡片.已毕业 .银行标签 {
    background: var(--活动名称背景) !important;
    color: var(--次要文字颜色) !important;
    border-color: var(--卡片边框) !important;
}
.跳转卡片.已完成 .活动卡种,
.跳转卡片.已毕业 .活动卡种 {
    color: var(--次要文字颜色) !important;
}
.跳转卡片.已完成 .作用域徽章,
.跳转卡片.已毕业 .作用域徽章 {
    background: var(--活动名称背景) !important;
    color: var(--次要文字颜色) !important;
    border: 1px solid var(--卡片边框) !important;
}
.跳转卡片.已完成 .活动名称标签,
.跳转卡片.已毕业 .活动名称标签 {
    background: var(--活动名称背景) !important;
    color: var(--次要文字颜色) !important;
}
.跳转卡片.已完成 .活动时间,
.跳转卡片.已毕业 .活动时间 {
    background: var(--活动时间背景) !important;
    color: var(--次要文字颜色) !important;
    border-color: var(--活动时间边框) !important;
}
.跳转卡片.已完成 .地区限制标签,
.跳转卡片.已毕业 .地区限制标签 {
    background: var(--活动名称背景) !important;
    color: var(--次要文字颜色) !important;
    border: 1px solid var(--卡片边框) !important;
    filter: grayscale(1) !important;
    opacity: 0.8 !important;
}
.跳转卡片.已完成 .跳转图标,
.跳转卡片.已毕业 .跳转图标 {
    background: var(--活动名称背景) !important;
    color: var(--次要文字颜色) !important;
    filter: grayscale(1) !important;
}

/* 唯一定制高亮：只有“已完成/已毕业”状态标签保持微淡彩色 */
.跳转卡片.已完成 .今日状态标签.已打卡,
.跳转卡片.已毕业 .今日状态标签.已毕业,
.今日状态标签.已毕业 {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    opacity: 1 !important;
}

[data-theme="dark"] .跳转卡片.已完成 .今日状态标签.已打卡,
[data-theme="dark"] .跳转卡片.已毕业 .今日状态标签.已毕业,
[data-theme="dark"] .今日状态标签.已毕业,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .跳转卡片.已完成 .今日状态标签.已打卡,
    :root:not([data-theme="light"]) .跳转卡片.已毕业 .今日状态标签.已毕业,
    :root:not([data-theme="light"]) .今日状态标签.已毕业 {
        background: rgba(22, 163, 74, 0.2) !important;
        color: #4ade80 !important;
        border: 1px solid rgba(22, 163, 74, 0.4) !important;
    }
}

/* 已不参与卡片 (整卡全灰弱化) */
.跳转卡片.已不参与卡片 {
    opacity: 0.35;
    filter: grayscale(1);
    background: var(--页面背景) !important;
    border-color: var(--卡片边框) !important;
    border-left: 4px solid #64748b !important;
    transition: all 0.25s ease;
}
.跳转卡片.已不参与卡片:hover {
    opacity: 0.6;
    filter: grayscale(0.4);
}
.跳转卡片.已不参与卡片 .活动名称标签 {
    text-decoration: line-through;
    color: var(--次要文字颜色) !important;
}

/* 已略过卡片 (卡片主体置灰弱化，保留“已略过”淡蓝徽章) */
.跳转卡片.已略过卡片 {
    background: var(--页面背景) !important;
    border-color: var(--卡片边框) !important;
    border-left: 4px solid #64748b !important;
    transition: all 0.25s ease;
}
.跳转卡片.已略过卡片 .第一行,
.跳转卡片.已略过卡片 .第二行,
.跳转卡片.已略过卡片 .跳转图标 {
    filter: grayscale(1);
    opacity: 0.45;
    transition: opacity 0.2s ease;
}
.跳转卡片.已略过卡片:hover .第一行,
.跳转卡片.已略过卡片:hover .第二行,
.跳转卡片.已略过卡片:hover .跳转图标 {
    opacity: 0.75;
}
.跳转卡片.已略过卡片 .活动名称标签 {
    text-decoration: line-through;
    color: var(--次要文字颜色) !important;
}

/* 已过期卡片 */
.跳转卡片.已过期卡片 {
    opacity: 0.65;
    filter: grayscale(0.5);
    background: var(--完成卡片背景) !important;
    border-color: var(--完成卡片边框) !important;
    border-left: 4px solid #94a3b8 !important;
}
.跳转卡片.已过期卡片:hover {
    opacity: 0.9;
    filter: grayscale(0);
}

.长按打卡进度条 {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.跳转卡片.按住中 .长按打卡进度条 {
    opacity: 1;
}

.第一行 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 68px;
}

.银行标签 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--银行标签文字);
    background: var(--银行标签背景);
    border: 1px solid var(--银行标签边框);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.活动卡种 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--活动卡种文字);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
}

.今日状态标签 {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
}

.今日状态标签.今日可用 { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.今日状态标签.非今日 { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }
.今日状态标签.已打卡 { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.今日状态标签.子锁定 { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.今日状态标签.进行中 { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.今日状态标签.已过期 { background: #f1f5f9; color: #94a3b8; border: 1px solid #cbd5e1; }
.今日状态标签.不参与 { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.今日状态标签.已略过 { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #93c5fd !important; opacity: 1 !important; filter: none !important; }

/* 步进打卡微型圆点组 */
.步进打卡点组 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    vertical-align: middle;
}

.打卡步进圆点 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 1px solid #94a3b8;
    transition: all 0.2s ease;
}

.打卡步进圆点.已点亮 {
    background: #10b981;
    border-color: #059669;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.打卡步进圆点.已满额 {
    background: #3b82f6;
    border-color: #2563eb;
}

/* 子频次已打卡锁定态卡片 (微绿底色) */
.跳转卡片.子频次锁定 {
    background: rgba(16, 185, 129, 0.04) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .今日状态标签.今日可用,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.今日可用 { background: rgba(22, 163, 74, 0.2); border-color: rgba(22, 163, 74, 0.4); color: #4ade80; } }
[data-theme="dark"] .今日状态标签.非今日,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.非今日 { background: #334155; border-color: #475569; color: #64748b; } }
[data-theme="dark"] .今日状态标签.已打卡,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.已打卡 { background: rgba(99, 102, 241, 0.25); border-color: rgba(99, 102, 241, 0.45); color: #a5b4fc; } }
[data-theme="dark"] .今日状态标签.子锁定,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.子锁定 { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.4); color: #34d399; } }
[data-theme="dark"] .今日状态标签.进行中,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.进行中 { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.4); color: #60a5fa; } }
[data-theme="dark"] .今日状态标签.已过期,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.已过期 { background: #1e293b; border-color: #334155; color: #64748b; } }
[data-theme="dark"] .今日状态标签.不参与,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.不参与 { background: #0f172a; border-color: #334155; color: #64748b; } }
[data-theme="dark"] .今日状态标签.已略过,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .今日状态标签.已略过 { background: rgba(37, 99, 235, 0.18) !important; border-color: rgba(96, 165, 250, 0.5) !important; color: #60a5fa !important; } }
[data-theme="dark"] .打卡步进圆点,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .打卡步进圆点 { background: #475569; border-color: #64748b; } }
[data-theme="dark"] .打卡步进圆点.已点亮,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .打卡步进圆点.已点亮 { background: #34d399; border-color: #10b981; } }
[data-theme="dark"] .跳转卡片.子频次锁定,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .跳转卡片.子频次锁定 { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.35) !important; } }

.作用域徽章 {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}
.作用域徽章.public { background: #e0f2fe; color: #0369a1; }
.作用域徽章.normal { background: #e0e7ff; color: #3730a3; }
.作用域徽章.vip { background: #f3e8ff; color: #6b21a8; }
.作用域徽章.private { background: #fef2f2; color: #991b1b; }

[data-theme="dark"] .作用域徽章.public,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .作用域徽章.public { background: rgba(2, 132, 199, 0.2); color: #38bdf8; } }
[data-theme="dark"] .作用域徽章.normal,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .作用域徽章.normal { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; } }
[data-theme="dark"] .作用域徽章.vip,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .作用域徽章.vip { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; } }
[data-theme="dark"] .作用域徽章.private,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .作用域徽章.private { background: rgba(239, 68, 68, 0.2); color: #f87171; } }

.第二行 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.活动名称标签 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--活动名称文字);
    background: var(--活动名称背景);
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.25s ease;
}

.活动时间 {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--活动时间文字);
    background: var(--活动时间背景);
    border: 1px solid var(--活动时间边框);
    padding: 2px 8px;
    border-radius: 6px;
    transition: all 0.25s ease;
}

.卡片右侧操作区 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

.地区限制标签 {
    font-size: 0.76rem;
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
[data-theme="dark"] .地区限制标签,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .地区限制标签 { background: rgba(217, 119, 6, 0.18); border-color: rgba(217, 119, 6, 0.35); color: #fbbf24; } }

.活动条目行 {
    width: 100%;
    box-sizing: border-box;
}

.跳转图标 {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--跳转图标背景);
    color: var(--跳转图标文字);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

/* 10. 标记选择弹窗与按钮体系 (高辨识度打卡交互) */
.打卡活动信息卡 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--主要文字颜色);
    background: var(--页面背景);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--卡片边框);
    margin-bottom: 16px;
    text-align: left;
    transition: all 0.25s ease;
}

.标记选择按钮 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--按钮边框);
    background: var(--按钮背景);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.标记选择按钮:active {
    transform: scale(0.98);
}

.标记图标 {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.标记文本区 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.标记标题 {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
}

.标记说明 {
    font-size: 0.75rem;
    line-height: 1.3;
}

/* 亮色日间模式按钮色彩 */
.标记选择按钮.成功 {
    border-color: #86efac;
    background: #f0fdf4;
}
.标记选择按钮.成功 .标记标题 { color: #15803d; }
.标记选择按钮.成功 .标记说明 { color: #166534; }
.标记选择按钮.成功:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

.标记选择按钮.毕业 {
    border-color: #7dd3fc;
    background: #f0f9ff;
}
.标记选择按钮.毕业 .标记标题 { color: #0369a1; }
.标记选择按钮.毕业 .标记说明 { color: #075985; }
.标记选择按钮.毕业:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
}

.标记选择按钮.警告 {
    border-color: #fca5a5;
    background: #fef2f2;
}
.标记选择按钮.警告 .标记标题 { color: #b91c1c; }
.标记选择按钮.警告 .标记说明 { color: #991b1b; }
.标记选择按钮.警告:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* 暗黑夜间模式按钮高清晰色彩 (高对比、发光辨识) */
[data-theme="dark"] .标记选择按钮.成功,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.成功 {
        background: rgba(34, 197, 94, 0.18) !important;
        border-color: rgba(74, 222, 128, 0.55) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.成功 .标记标题 {
        color: #4ade80 !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.成功 .标记说明 {
        color: #bbf7d0 !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.成功:hover {
        background: rgba(34, 197, 94, 0.28) !important;
        border-color: #4ade80 !important;
    }
}

[data-theme="dark"] .标记选择按钮.毕业,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.毕业 {
        background: rgba(56, 189, 248, 0.18) !important;
        border-color: rgba(56, 189, 248, 0.55) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.毕业 .标记标题 {
        color: #38bdf8 !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.毕业 .标记说明 {
        color: #bae6fd !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.毕业:hover {
        background: rgba(56, 189, 248, 0.28) !important;
        border-color: #38bdf8 !important;
    }
}

.标记选择按钮.撤销 {
    border-color: #fdba74;
    background: #fff7ed;
}
.标记选择按钮.撤销 .标记标题 { color: #c2410c; }
.标记选择按钮.撤销 .标记说明 { color: #9a3412; }
.标记选择按钮.撤销:hover {
    background: #ffedd5;
    border-color: #fb923c;
}

.标记选择按钮.次要 {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.标记选择按钮.次要 .标记标题 { color: #475569; }
.标记选择按钮.次要 .标记说明 { color: #64748b; }
.标记选择按钮.次要:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.标记选择按钮.略过 {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.标记选择按钮.略过 .标记标题 { color: #475569; }
.标记选择按钮.略过 .标记说明 { color: #64748b; }
.标记选择按钮.略过:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

[data-theme="dark"] .标记选择按钮.警告,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.警告 {
        background: rgba(239, 68, 68, 0.18) !important;
        border-color: rgba(248, 113, 113, 0.55) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.警告 .标记标题 {
        color: #f87171 !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.警告 .标记说明 {
        color: #fecaca !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.警告:hover {
        background: rgba(239, 68, 68, 0.28) !important;
        border-color: #f87171 !important;
    }
}

[data-theme="dark"] .标记选择按钮.撤销,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.撤销 {
        background: rgba(249, 115, 22, 0.18) !important;
        border-color: rgba(251, 146, 60, 0.55) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.撤销 .标记标题 {
        color: #fb923c !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.撤销 .标记说明 {
        color: #fed7aa !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.撤销:hover {
        background: rgba(249, 115, 22, 0.28) !important;
        border-color: #fb923c !important;
    }
}

[data-theme="dark"] .标记选择按钮.次要,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.次要 {
        background: rgba(100, 116, 139, 0.18) !important;
        border-color: rgba(148, 163, 184, 0.4) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.次要 .标记标题 {
        color: #cbd5e1 !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.次要 .标记说明 {
        color: #94a3b8 !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.次要:hover {
        background: rgba(100, 116, 139, 0.28) !important;
        border-color: #94a3b8 !important;
    }
}

[data-theme="dark"] .标记选择按钮.略过,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .标记选择按钮.略过 {
        background: rgba(100, 116, 139, 0.18) !important;
        border-color: rgba(148, 163, 184, 0.4) !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.略过 .标记标题 {
        color: #cbd5e1 !important;
        font-weight: 800 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.略过 .标记说明 {
        color: #94a3b8 !important;
        opacity: 0.95 !important;
    }
    :root:not([data-theme="light"]) .标记选择按钮.略过:hover {
        background: rgba(100, 116, 139, 0.28) !important;
        border-color: #94a3b8 !important;
    }
}

/* 11. 弹窗与表单通用 */
.弹窗蒙层 {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 12px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    contain: paint;
}

.弹窗蒙层.显示 { opacity: 1; pointer-events: auto; }

#额度设置弹窗.显示,
#添加银行弹窗.显示,
#登录弹窗.显示,
#密码弹窗.显示,
#开户弹窗.显示 {
    align-items: flex-start;
    padding-top: max(8vh, 40px);
    transition: none !important;
}

#额度设置弹窗 .弹窗主体,
#添加银行弹窗 .弹窗主体,
#登录弹窗 .弹窗主体,
#密码弹窗 .弹窗主体,
#开户弹窗 .弹窗主体 {
    transform: none !important;
    transition: none !important;
}

.弹窗主体 {
    background: var(--弹窗主体背景);
    border: 1px solid var(--弹窗边框);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    padding: 18px 16px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.弹窗头部 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--弹窗头部边框);
    flex-shrink: 0;
}

.弹窗标题文本 { font-size: 1.08rem; font-weight: 700; color: var(--弹窗标题文字); }
.关闭按钮 { 
    background: transparent; 
    border: none; 
    font-size: 1.3rem; 
    color: #94a3b8; 
    cursor: pointer; 
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.关闭按钮:active { background: var(--次要按钮背景); }

.表单组 { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    margin-bottom: 12px; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
    flex: 1;
}

.输入框控件 { display: flex; flex-direction: column; gap: 4px; }
.输入框标签 { font-size: 0.8rem; font-weight: 700; color: var(--输入框标签); }
.表单输入框 {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--输入框边框);
    font-size: 0.88rem;
    color: var(--输入框文字);
    background-color: var(--输入框背景);
    outline: none;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.表单输入框:focus {
    border-color: var(--主题蓝);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 自定义下拉菜单 */
.自定义下拉容器 { position: relative; width: 100%; }
.自定义下拉触发框 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--下拉触发边框);
    background: var(--下拉触发背景);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--下拉触发文字);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.自定义下拉触发框:hover {
    border-color: var(--主题蓝);
    background: var(--按钮悬浮背景);
}
.下拉箭头图标 {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    color: var(--主题蓝);
}
.下拉箭头图标.旋转 { transform: rotate(180deg); }

.自定义下拉菜单 {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--下拉菜单背景);
    border: 1px solid var(--下拉菜单边框);
    border-radius: 14px;
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    z-index: 2000;
    max-height: 250px;
    overflow-y: auto;
}
.自定义下拉菜单.展开 {
    display: flex;
    animation: 下拉展开动画 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes 下拉展开动画 {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.下拉选项 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--下拉选项文字);
    cursor: pointer;
    transition: all 0.15s ease;
}
.下拉选项:hover {
    background: var(--下拉选项悬浮背景);
    color: var(--主题蓝);
}
.下拉选项.选中 {
    background: var(--下拉选项选中背景);
    color: var(--主题蓝);
    font-weight: 700;
}
.下拉选项 .勾选标记 {
    display: none;
    color: var(--主题蓝);
    font-size: 0.95rem;
    font-weight: 800;
}
.下拉选项.选中 .勾选标记 {
    display: inline-block;
}

.提交按钮 {
    width: 100%;
    background: var(--主题蓝);
    color: #ffffff;
    border: none;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* 12. 持卡订阅管理弹窗 */
.持卡管理弹窗主体 {
    max-width: 440px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 14px;
}

.持卡搜索条容器 {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.持卡搜索条容器 .搜索图标 {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.持卡搜索输入框 {
    width: 100%;
    padding: 9px 32px 9px 34px;
    border-radius: 10px;
    border: 1px solid var(--持卡搜索边框);
    background: var(--持卡搜索背景);
    font-size: 0.84rem;
    color: var(--持卡搜索文字);
    outline: none;
    transition: all 0.2s ease;
}
.持卡搜索输入框:focus {
    border-color: var(--主题蓝);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.清空搜索按键 {
    position: absolute;
    right: 10px;
    background: var(--次要按钮背景);
    color: var(--次要文字颜色);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.持卡双栏容器 {
    display: flex;
    gap: 10px;
    height: 320px;
    margin-bottom: 10px;
    border: 1px solid var(--持卡容器边框);
    border-radius: 12px;
    background: var(--持卡容器背景);
    overflow: hidden;
    flex: 1;
}
.持卡银行导航栏 {
    width: 120px;
    background: var(--持卡导航背景);
    border-right: 1px solid var(--持卡导航边框);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.持卡银行项 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--持卡导航文字);
    cursor: pointer;
    border-bottom: 1px solid var(--持卡导航边框);
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
}
.持卡银行项:hover {
    background: var(--按钮悬浮背景);
    color: var(--主要文字颜色);
}
.持卡银行项.激活 {
    background: var(--持卡导航激活背景);
    color: var(--持卡导航激活文字);
    font-weight: 700;
    border-left-color: var(--主题蓝);
}
.银行已选角标 {
    font-size: 0.72rem;
    background: var(--分组数量背景);
    color: var(--次要文字颜色);
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
}
.持卡银行项.激活 .银行已选角标, .银行已选角标.有勾选 {
    background: var(--下拉选项选中背景);
    color: var(--主题蓝);
}

.持卡添加银行按钮,
.持卡本行全选按钮 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 8px;
    margin: 8px 6px;
    background: var(--按钮背景);
    border: 1px dashed var(--按钮边框);
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--主题蓝);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}
.持卡添加银行按钮:hover,
.持卡本行全选按钮:hover {
    background: var(--下拉选项选中背景);
    border-color: var(--主题蓝);
}
.持卡本行全选按钮.已全选 {
    color: #ef4444;
    border-color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.无活动卡片提示卡 {
    background: var(--页面背景);
    border: 1px dashed var(--卡片边框);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    color: var(--次要文字颜色);
    font-size: 0.84rem;
    line-height: 1.6;
    margin-top: 10px;
}

.持卡卡种内容区 {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.卡种网格容器 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 8px;
}
.持卡卡种Chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--持卡Chip边框);
    background: var(--持卡Chip背景);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--持卡Chip文字);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.持卡卡种Chip:hover {
    border-color: var(--按钮边框);
    background: var(--按钮悬浮背景);
}
.持卡卡种Chip.选中 {
    border-color: var(--主题蓝);
    background: var(--下拉选项选中背景);
    color: var(--主题蓝);
    font-weight: 700;
}
.持卡卡种Chip .卡种勾选标 {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--按钮边框);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: transparent;
    margin-left: 6px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.持卡卡种Chip.选中 .卡种勾选标 {
    background: var(--主题蓝);
    border-color: var(--主题蓝);
    color: #ffffff;
}

.持卡底部操作栏 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 2px 8px;
    font-size: 0.82rem;
    flex-shrink: 0;
    text-align: center;
}
.持卡已选统计文本 {
    color: var(--次要文字颜色);
    font-weight: 600;
    text-align: center;
}
.持卡已选统计文本 b {
    color: var(--主题蓝);
    font-weight: 800;
}

/* 顶部总授信额度看板 */
.持卡总额度看板 {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25);
    flex-shrink: 0;
}
.总额度图标区 {
    font-size: 1.6rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.总额度信息区 { display: flex; flex-direction: column; gap: 2px; }
.总额度标题 {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.总额度行数标签 {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.18);
    padding: 1px 7px;
    border-radius: 6px;
}
.总额度数值 {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.银行额度展示按钮 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.25);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.银行额度展示按钮:hover {
    background: rgba(249, 115, 22, 0.22);
}

/* 13. 公告详情内容区 */
.公告详情内容区 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 2px;
}
.公告详情卡片 {
    background: var(--页面背景);
    border: 1px solid var(--卡片边框);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--主要文字颜色);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.公告详情卡片 .序号 {
    color: var(--主题蓝);
    font-weight: 700;
    flex-shrink: 0;
}

/* 14. 结构化时间框与详情说明框 */
.智能时间容器 {
    background: var(--页面背景);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--卡片边框);
    margin-bottom: 14px;
}
.智能时间标题 {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--主要文字颜色);
    margin-bottom: 10px;
}
.文本详情内容区 {
    font-size: 0.92rem;
    color: var(--主要文字颜色);
    line-height: 1.6;
    background: var(--页面背景);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--卡片边框);
    margin-bottom: 18px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 260px;
    overflow-y: auto;
}

/* 全局 Toast 屏幕居中消息提示 (精致同色系轻量胶囊) */
#全局消息提示 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94));
    color: #1e3a8a;
    border: 1px solid rgba(191, 219, 254, 0.85);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    max-width: 82vw;
    box-sizing: border-box;
    z-index: 100000;
    box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.15), 0 4px 10px rgba(15, 23, 42, 0.05);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#全局消息提示.显示 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

[data-theme="dark"] #全局消息提示,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #全局消息提示 {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
        color: #93c5fd;
        border: 1px solid rgba(59, 130, 246, 0.35);
        box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.55), 0 0 16px rgba(59, 130, 246, 0.15);
    }
}

/* 22. 页面底部专属功能区 (日历订阅 & 提醒推送) */
.页面底部操作区 {
    margin-top: 20px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.底部按钮网格 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.底部功能卡片 {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--顶栏背景);
    border: 1px solid var(--顶栏边框);
    border-radius: 12px;
    padding: 8px 6px;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--顶栏阴影);
    min-width: 0;
}

.底部功能卡片:hover {
    background: var(--按钮悬浮背景);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.底部卡片图标 {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.底部卡片图标.蓝 {
    background: #eff6ff;
    border: 1px solid #dbeafe;
}
.底部卡片图标.橙 {
    background: #fff7ed;
    border: 1px solid #ffedd5;
}
.底部卡片图标.绿 {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

[data-theme="dark"] .底部卡片图标.蓝,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .底部卡片图标.蓝 {
        background: #172554;
        border-color: #1e3a8a;
    }
}
[data-theme="dark"] .底部卡片图标.橙,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .底部卡片图标.橙 {
        background: #431407;
        border-color: #7c2d12;
    }
}
[data-theme="dark"] .底部卡片图标.绿,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .底部卡片图标.绿 {
        background: #064e3b;
        border-color: #065f46;
    }
}

.底部卡片文本 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.底部卡片名称 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--主要文字颜色);
    line-height: 1.2;
    white-space: nowrap;
}

.底部卡片描述 {
    font-size: 0.67rem;
    color: var(--次要文字颜色);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* 离线状态轻量提醒条 */
.网络状态指示条 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
    font-size: 0.76rem;
    font-weight: 600;
    animation: 浮现淡入 0.25s ease-out;
}
.网络状态指示条.在线恢复 {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
}
[data-theme="dark"] .网络状态指示条 {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
[data-theme="dark"] .网络状态指示条.在线恢复 {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}

/* 23. 微信环境右上角在浏览器打开引导蒙层 */
.微信引导蒙层 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;
    animation: 微信渐显 0.25s ease-out;
}

@keyframes 微信渐显 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.微信引导内容 {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.微信引导指示区 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    margin-right: 12px;
    animation: 微信箭头轻跳 1.5s infinite ease-in-out;
}

@keyframes 微信箭头轻跳 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-6px) translateX(4px); }
}

.微信引导箭头动画 {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

.微信引导提示气泡 {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    text-align: right;
}

.微信引导主文 {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.微信引导副文 {
    font-size: 0.8rem;
    opacity: 0.92;
    margin-top: 3px;
}

.微信引导卡片 {
    width: 100%;
    margin-top: 32px;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 20px;
    box-sizing: border-box;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.微信引导卡片标题 {
    font-size: 1rem;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 10px;
}

.微信引导卡片正文 {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.微信引导已复制标签 {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #7dd3fc;
    font-size: 0.78rem;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.微信引导知道了按钮 {
    width: 100%;
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 11px 0;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 24. 日历订阅弹窗新手科普看板 */
.弹窗内容滚动区 {
    overflow-y: auto;
    flex: 1;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.小白功能科普区 {
    background: rgba(37, 99, 235, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
}

[data-theme="dark"] .小白功能科普区,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .小白功能科普区 {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(51, 65, 85, 0.8);
    }
}

.小白功能总览 {
    font-size: 0.82rem;
    color: var(--主要文字颜色);
    line-height: 1.5;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.15);
}

.小白特性网格 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.小白特性项 {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: var(--卡片背景);
    border: 1px solid var(--卡片边框);
    border-radius: 10px;
    padding: 7px 8px;
}

.小白特性图标 {
    font-size: 1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.小白特性信息 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.小白特性标题 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--主要文字颜色);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.小白特性说明 {
    font-size: 0.68rem;
    color: var(--次要文字颜色);
    line-height: 1.3;
}

.小白推送天数标签 {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px dashed rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 8px;
    font-size: 0.74rem;
    color: var(--主要文字颜色);
    line-height: 1.4;
}

[data-theme="dark"] .小白推送天数标签,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .小白推送天数标签 {
        background: rgba(56, 189, 248, 0.08);
        border-color: rgba(56, 189, 248, 0.25);
    }
}

.小白新手教程 {
    background: var(--子筛选背景);
    border: 1px solid var(--卡片边框);
    border-radius: 12px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.小白教程摘要 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--主要文字颜色);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.小白教程摘要::-webkit-details-marker {
    display: none;
}

.教程展开图标 {
    font-size: 0.75rem;
    color: var(--次要文字颜色);
    transition: transform 0.2s ease;
}

.小白新手教程[open] .教程展开图标 {
    transform: rotate(180deg);
}

.小白教程细节 {
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.教程分项 {
    font-size: 0.76rem;
    line-height: 1.45;
}

.教程分项标题 {
    font-weight: 700;
    color: var(--主要文字颜色);
    margin-bottom: 2px;
}

.教程分项说明 {
    color: var(--次要文字颜色);
}