/* _content/LEAFBlazorApp25/Components/Account/Pages/LFManageRole.razor.rz.scp.css */
/* ========== 角色管理主容器样式 ========== */
/* 主容器：设置最大宽度、居中对齐和紧凑内边距 */
.role-management-container[b-07ovap6nnl] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 5px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow: hidden; /* 隐藏主容器滚动条 */
}

/* ========== 标题和功能区样式 ========== */
/* 管理头部：浅灰色背景，紧凑布局 */
.management-header[b-07ovap6nnl] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0; /* 防止标题区域被压缩 */
}

.header-main[b-07ovap6nnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* 标题区域 */
.title-section[b-07ovap6nnl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-07ovap6nnl] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-07ovap6nnl] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.role-count-badge[b-07ovap6nnl] {
    background: #3b82f6;
    color: white;
    padding: 5px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* 操作区域 */
.action-section[b-07ovap6nnl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

/* ========== 搜索框样式 ========== */
/* 搜索框容器：设置最小宽度和布局 */
.search-box[b-07ovap6nnl] {
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .search-box .input-group[b-07ovap6nnl] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.input-icon[b-07ovap6nnl] {
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
}

.search-input[b-07ovap6nnl] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    flex: 1;
    min-width: 150px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-07ovap6nnl] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

    .search-input[b-07ovap6nnl]::placeholder {
        color: #94a3b8;
    }

/* 搜索按钮样式 - 蓝色主题 */
.btn-search[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 80px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-search:hover[b-07ovap6nnl] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    .btn-search:focus[b-07ovap6nnl] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }

    .btn-search:active[b-07ovap6nnl] {
        transform: translateY(0);
        box-shadow: none;
    }

/* 清除搜索按钮样式 */
.btn-clear[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #94a3b8;
    color: white;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .btn-clear:hover[b-07ovap6nnl] {
        background: #64748b;
        border-color: #64748b;
        transform: scale(1.05);
    }

/* ========== 排序功能区域样式 ========== */
.sort-box[b-07ovap6nnl] {
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .sort-box .input-group[b-07ovap6nnl] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap; /* 确保最小屏幕也不换行 */
    }

.sort-select[b-07ovap6nnl] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 140px;
    transition: border-color 0.2s;
    flex-shrink: 0; /* 防止被压缩 */
}

.sort-order[b-07ovap6nnl] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    width: 90px; /* 固定宽度适应两个字符 */
    transition: border-color 0.2s;
    flex-shrink: 0; /* 防止被压缩 */
}

    .sort-select:focus[b-07ovap6nnl],
    .sort-order:focus[b-07ovap6nnl] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

/* 应用排序按钮样式 - 蓝色主题 */
.btn-sort[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 8px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 80px; /* 固定宽度 */
    justify-content: center;
    flex-shrink: 0; /* 防止被压缩 */
}

    .btn-sort:hover[b-07ovap6nnl] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

    .btn-sort:focus[b-07ovap6nnl] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }

    .btn-sort:active[b-07ovap6nnl] {
        transform: translateY(0);
        box-shadow: none;
    }

/* 操作按钮组 */
.action-buttons[b-07ovap6nnl] {
    display: flex;
    gap: 8px;
}

/* 基础按钮样式 */
.btn[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-07ovap6nnl] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* 具体按钮样式 */
.btn-add[b-07ovap6nnl] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

    .btn-add:hover[b-07ovap6nnl] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

.btn-refresh[b-07ovap6nnl] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-07ovap6nnl] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-primary[b-07ovap6nnl] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-07ovap6nnl] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

/* ========== 表格数据区域样式 ========== */
.table-container[b-07ovap6nnl] {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 0; /* 重要：允许内容区域收缩 */
}

.table-scroll-wrapper[b-07ovap6nnl] {
    flex: 1;
    overflow: auto; /* 只在表格区域显示滚动条 */
    display: flex;
    flex-direction: column;
}

/* 表格基础样式 */
.role-table[b-07ovap6nnl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 800px;
    table-layout: fixed; /* 固定表格布局，防止行宽变化 */
}

/* 表头样式 */
.table-header[b-07ovap6nnl] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-07ovap6nnl] {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        text-align: center;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%); /* 确保表头背景固定 */
    }

/* 列宽设置 - 调整以适应新增的显示名称列 */
.col-name[b-07ovap6nnl] {
    min-width: 120px;
    width: 15%;
}

.col-displayname[b-07ovap6nnl] {
    min-width: 120px;
    width: 15%;
}

.col-normalized[b-07ovap6nnl] {
    min-width: 120px;
    width: 15%;
}

.col-users[b-07ovap6nnl] {
    min-width: 80px;
    width: 10%;
    text-align: center;
}

.col-remark[b-07ovap6nnl] {
    min-width: 120px;
    width: 15%;
}

.col-actions[b-07ovap6nnl] {
    min-width: 180px;
    width: 20%;
    white-space: nowrap;
}

.col-created[b-07ovap6nnl] {
    min-width: 120px;
    width: 10%;
}

/* 表格行样式 */
.table-body[b-07ovap6nnl] {
    background: white;
}

.table-row[b-07ovap6nnl] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-07ovap6nnl] {
        background: #f8fafc;
    }

    .table-row td[b-07ovap6nnl] {
        padding: 8px 12px;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* 角色名称单元格 */
.role-name-cell[b-07ovap6nnl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.role-icon[b-07ovap6nnl] {
    color: #64748b;
    font-size: 0.9rem;
}

.role-name-text[b-07ovap6nnl] {
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 显示名称样式 */
.display-name-text[b-07ovap6nnl] {
    font-weight: 500;
    color: #3b82f6;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-name-empty[b-07ovap6nnl] {
    color: #94a3b8;
    font-style: italic;
}

/* 标准化名称 */
.normalized-name[b-07ovap6nnl] {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 用户数量徽章 */
.user-count-badge[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.user-count-zero[b-07ovap6nnl] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.user-count-low[b-07ovap6nnl] {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.user-count-medium[b-07ovap6nnl] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.user-count-high[b-07ovap6nnl] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* 备注文本 */
.remark-text[b-07ovap6nnl] {
    color: #475569;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remark-empty[b-07ovap6nnl] {
    color: #94a3b8;
    font-style: italic;
}

/* 创建时间 */
.created-time[b-07ovap6nnl] {
    color: #64748b;
    font-size: 0.8rem;
}

.created-empty[b-07ovap6nnl] {
    color: #94a3b8;
    font-style: italic;
}

/* 操作按钮组 */
.action-buttons-group[b-07ovap6nnl] {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

.btn-action[b-07ovap6nnl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0; /* 防止按钮被压缩 */
}

    .btn-action:focus[b-07ovap6nnl] {
        outline: 2px solid rgba(59, 130, 246, 0.2);
        outline-offset: 1px;
    }

.btn-edit[b-07ovap6nnl] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

    .btn-edit:hover[b-07ovap6nnl] {
        background: #bfdbfe;
        border-color: #60a5fa;
    }

.btn-view[b-07ovap6nnl] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

    .btn-view:hover[b-07ovap6nnl] {
        background: #e0f2fe;
        border-color: #7dd3fc;
    }

.btn-delete[b-07ovap6nnl] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

    .btn-delete:hover[b-07ovap6nnl] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

/* 空状态样式 */
.empty-row[b-07ovap6nnl] {
    border-bottom: none;
}

.empty-state[b-07ovap6nnl] {
    padding: 0;
}

.empty-content[b-07ovap6nnl] {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-07ovap6nnl] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-content h3[b-07ovap6nnl] {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-07ovap6nnl] {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* ========== 模态框样式 ========== */
.modal-backdrop[b-07ovap6nnl] {
    opacity: 0.5;
    background: #000;
}

.modal-compact[b-07ovap6nnl] {
    max-width: 500px;
}

.modal-content[b-07ovap6nnl] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.modal-header[b-07ovap6nnl] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
}

.modal-title[b-07ovap6nnl] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.modal-body[b-07ovap6nnl] {
    padding: 16px;
}

.modal-footer[b-07ovap6nnl] {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
}

/* 表单样式 */
.form-group[b-07ovap6nnl] {
    margin-bottom: 12px;
}

.form-label[b-07ovap6nnl] {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.form-control[b-07ovap6nnl] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

    .form-control:focus[b-07ovap6nnl] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.form-text[b-07ovap6nnl] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
}

/* 验证样式 */
.validation-summary[b-07ovap6nnl] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #dc2626;
}

.validation-error[b-07ovap6nnl] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* 警告框 */
.alert-warning[b-07ovap6nnl] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #92400e;
}

/* ========== 响应式设计 ========== */
/* 中等屏幕适配 */
@media (max-width: 1200px) {
    .action-section[b-07ovap6nnl] {
        gap: 8px;
    }

    .search-box[b-07ovap6nnl] {
        min-width: 260px;
    }

    .sort-box[b-07ovap6nnl] {
        min-width: 260px;
    }
}

/* 平板适配 */
@media (max-width: 768px) {
    .role-management-container[b-07ovap6nnl] {
        padding: 6px 8px;
    }

    .management-header[b-07ovap6nnl] {
        padding: 8px 12px;
        position: relative; /* 小屏幕时不固定 */
    }

    .header-main[b-07ovap6nnl] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .title-section[b-07ovap6nnl] {
        justify-content: center;
    }

    .action-section[b-07ovap6nnl] {
        justify-content: center;
    }

    .search-box[b-07ovap6nnl],
    .sort-box[b-07ovap6nnl] {
        min-width: auto;
        flex: 1;
    }

        .sort-box .input-group[b-07ovap6nnl] {
            flex-wrap: nowrap; /* 确保不换行 */
        }

    .sort-select[b-07ovap6nnl] {
        min-width: 120px;
        flex: 1;
    }

    .sort-order[b-07ovap6nnl] {
        width: 90px;
        flex-shrink: 0;
    }

    .btn-sort[b-07ovap6nnl] {
        width: 100px;
        flex-shrink: 0;
    }

    .table-container[b-07ovap6nnl] {
        font-size: 0.8rem;
    }

    .table-header th[b-07ovap6nnl],
    .table-row td[b-07ovap6nnl] {
        padding: 6px 8px;
    }

    .col-actions[b-07ovap6nnl] {
        min-width: 160px;
    }
}

/* 手机适配 - 确保排序控件在一行 */
@media (max-width: 576px) {
    .role-management-container[b-07ovap6nnl] {
        padding: 4px 6px;
    }

    .management-header[b-07ovap6nnl] {
        padding: 6px 8px;
    }

    .action-section[b-07ovap6nnl] {
        flex-direction: column;
        gap: 8px;
    }

    .search-box[b-07ovap6nnl],
    .sort-box[b-07ovap6nnl] {
        width: 100%;
    }

    .sort-box[b-07ovap6nnl] {
        padding: 6px 8px;
    }

        .sort-box .input-group[b-07ovap6nnl] {
            flex-wrap: nowrap; /* 关键：确保不换行 */
            height: auto;
            gap: 6px;
        }

    .sort-select[b-07ovap6nnl] {
        min-width: 100px; /* 稍微减小最小宽度 */
        flex: 2;
    }

    .sort-order[b-07ovap6nnl] {
        width: 80px; /* 稍微减小宽度 */
        flex-shrink: 0;
    }

    .btn-sort[b-07ovap6nnl] {
        width: 90px; /* 稍微减小宽度 */
        flex-shrink: 0;
    }

    .action-buttons[b-07ovap6nnl] {
        width: 100%;
        justify-content: center;
    }

    .btn-action span[b-07ovap6nnl] {
        display: none;
    }

    .btn-action[b-07ovap6nnl] {
        padding: 6px;
    }

    .modal-dialog[b-07ovap6nnl] {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
}

/* 超小屏幕适配 */
@media (max-width: 400px) {
    .sort-box .input-group[b-07ovap6nnl] {
        gap: 4px; /* 进一步减小间距 */
    }

    .sort-select[b-07ovap6nnl] {
        min-width: 80px; /* 进一步减小最小宽度 */
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .sort-order[b-07ovap6nnl] {
        width: 70px; /* 进一步减小宽度 */
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-sort[b-07ovap6nnl] {
        width: 80px; /* 进一步减小宽度 */
        font-size: 0.8rem;
        padding: 6px 8px;
    }

        .btn-sort span[b-07ovap6nnl] {
            display: none; /* 超小屏幕隐藏文字 */
        }

        .btn-sort i[b-07ovap6nnl] {
            margin-right: 0;
        }
}

/* 滚动条美化 - 只美化表格区域的滚动条 */
.table-scroll-wrapper[b-07ovap6nnl]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll-wrapper[b-07ovap6nnl]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-scroll-wrapper[b-07ovap6nnl]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .table-scroll-wrapper[b-07ovap6nnl]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* 动画效果 */
@keyframes fadeIn-b-07ovap6nnl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.role-management-container[b-07ovap6nnl] {
    animation: fadeIn-b-07ovap6nnl 0.3s ease-out;
}

.table-row[b-07ovap6nnl] {
    animation: fadeIn-b-07ovap6nnl 0.2s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/LFManageUser.razor.rz.scp.css */
/* ========== 用户管理主容器样式 ========== */
.user-management-container[b-q3wg5xu6vx] {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0px 0px 15px 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow: hidden;
}

/* ========== 标题和功能区样式 ========== */
.management-header[b-q3wg5xu6vx] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.header-main[b-q3wg5xu6vx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-section[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-q3wg5xu6vx] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-q3wg5xu6vx] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.user-count-badge[b-q3wg5xu6vx] {
    background: #3b82f6;
    color: white;
    padding: 5px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.action-section[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

.search-box[b-q3wg5xu6vx] {
    min-width: 200px;
}

    .search-box .input-group[b-q3wg5xu6vx] {
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        overflow: hidden;
    }

.input-icon[b-q3wg5xu6vx] {
    padding: 6px 8px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    color: #64748b;
}

.search-input[b-q3wg5xu6vx] {
    border: none;
    padding: 6px 8px;
    flex-grow: 1;
    font-size: 0.9rem;
    background: transparent;
    outline: none;
}

    .search-input[b-q3wg5xu6vx]::placeholder {
        color: #94a3b8;
    }

.filter-box[b-q3wg5xu6vx] {
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .filter-box .input-group[b-q3wg5xu6vx] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.filter-select[b-q3wg5xu6vx] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 140px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.btn-filter[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: white;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 110px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-filter:hover[b-q3wg5xu6vx] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-clear-filter[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6b7280;
    color: white;
    border: 1px solid #6b7280;
    border-radius: 6px;
    padding: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
}

    .btn-clear-filter:hover[b-q3wg5xu6vx] {
        background: #4b5563;
        border-color: #4b5563;
    }

.sort-box[b-q3wg5xu6vx] {
    min-width: 320px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .sort-box .input-group[b-q3wg5xu6vx] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.sort-select[b-q3wg5xu6vx] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 140px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.sort-order[b-q3wg5xu6vx] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    width: 90px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .sort-select:focus[b-q3wg5xu6vx],
    .sort-order:focus[b-q3wg5xu6vx],
    .filter-select:focus[b-q3wg5xu6vx] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.btn-sort[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 80px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-sort:hover[b-q3wg5xu6vx] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

.action-buttons[b-q3wg5xu6vx] {
    display: flex;
    gap: 8px;
}

.btn[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-q3wg5xu6vx] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.btn-add[b-q3wg5xu6vx] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

    .btn-add:hover[b-q3wg5xu6vx] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

.btn-refresh[b-q3wg5xu6vx] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-q3wg5xu6vx] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-primary[b-q3wg5xu6vx] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-q3wg5xu6vx] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

/* ========== 表格数据区域样式 ========== */
.table-container[b-q3wg5xu6vx] {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-scroll-wrapper[b-q3wg5xu6vx] {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: auto;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .table-scroll-wrapper[b-q3wg5xu6vx]::-webkit-scrollbar {
        height: 20px;
    }

/* 表格字体设置为0.9rem */
.user-table[b-q3wg5xu6vx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem !important; /* 使用rem单位 */
    min-width: 1600px;
    table-layout: auto;
}

.table-header[b-q3wg5xu6vx] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-q3wg5xu6vx] {
        padding: 10px 8px;
        text-align: left;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        text-align: center;
        font-size: 0.9rem !important; /* 使用rem单位 */
    }

.col-username[b-q3wg5xu6vx] {
    width: 8%;
    min-width: 150px;
}

.col-displayname[b-q3wg5xu6vx] {
    min-width: 100px;
    width: 7%;
}

.col-email[b-q3wg5xu6vx] {
    min-width: 150px;
    width: 10%;
}

.col-usertype[b-q3wg5xu6vx] {
    min-width: 80px;
    width: 6%;
}

.col-roles[b-q3wg5xu6vx] {
    min-width: 120px;
    width: 8%;
}

.col-phone[b-q3wg5xu6vx] {
    min-width: 100px;
    width: 7%;
}

.col-wechat[b-q3wg5xu6vx] {
    min-width: 100px;
    width: 7%;
}

.col-trial[b-q3wg5xu6vx] {
    min-width: 80px;
    width: 5%;
}

.col-status[b-q3wg5xu6vx] {
    min-width: 70px;
    width: 5%;
}

.col-emailconfirm[b-q3wg5xu6vx] {
    min-width: 80px;
    width: 5%;
}

.col-2fa[b-q3wg5xu6vx] {
    min-width: 70px;
    width: 5%;
}

.col-lock[b-q3wg5xu6vx] {
    min-width: 80px;
    width: 5%;
}

.col-actions[b-q3wg5xu6vx] {
    min-width: 200px;
    width: 12%;
}

.col-remark[b-q3wg5xu6vx] {
    min-width: 120px;
    width: 8%;
}

.col-created[b-q3wg5xu6vx] {
    min-width: 120px;
    width: 8%;
}

.col-lastlogin[b-q3wg5xu6vx] {
    min-width: 120px;
    width: 8%;
}

.table-body[b-q3wg5xu6vx] {
    background: white;
}

.table-row[b-q3wg5xu6vx] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-q3wg5xu6vx] {
        background: #f8fafc;
    }

    .table-row td[b-q3wg5xu6vx] {
        padding: 8px 8px; /* 增加内边距 */
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9rem !important; /* 使用rem单位 */
    }

.user-name-cell[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-icon[b-q3wg5xu6vx] {
    color: #64748b;
    font-size: 0.9rem;
}

.user-name-text[b-q3wg5xu6vx] {
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-cell[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge[b-q3wg5xu6vx] {
    font-size: 0.8rem; /* 使用rem单位 */
    font-weight: 500;
    padding: 0.25em 0.5em;
}

    .badge.bg-primary[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    }

    .badge.bg-success[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    }

    .badge.bg-warning[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    }

    .badge.bg-danger[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    }

    .badge.bg-info[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    }

    .badge.bg-secondary[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    }

.user-roles[b-q3wg5xu6vx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

    .user-roles .badge[b-q3wg5xu6vx] {
        font-size: 0.75rem; /* 使用rem单位 */
    }

.remark-text[b-q3wg5xu6vx] {
    color: #475569;
    font-size: 0.9rem; /* 使用rem单位 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.remark-empty[b-q3wg5xu6vx] {
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem; /* 使用rem单位 */
}

.created-time[b-q3wg5xu6vx] {
    color: #64748b;
    font-size: 0.85rem; /* 使用rem单位 */
}

.action-buttons-group[b-q3wg5xu6vx] {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}

.btn-action[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px; /* 稍微增加内边距 */
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.85rem; /* 使用rem单位 */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    height: 26px; /* 稍微增加高度 */
}

    .btn-action:focus[b-q3wg5xu6vx] {
        outline: 2px solid rgba(59, 130, 246, 0.2);
        outline-offset: 1px;
    }

.btn-edit[b-q3wg5xu6vx] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

    .btn-edit:hover[b-q3wg5xu6vx] {
        background: #bfdbfe;
        border-color: #60a5fa;
    }

.btn-roles[b-q3wg5xu6vx] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

    .btn-roles:hover[b-q3wg5xu6vx] {
        background: #e0f2fe;
        border-color: #7dd3fc;
    }

.btn-password[b-q3wg5xu6vx] {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

    .btn-password:hover[b-q3wg5xu6vx] {
        background: #fde68a;
        border-color: #fbbf24;
    }

.btn-unlock[b-q3wg5xu6vx] {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

    .btn-unlock:hover[b-q3wg5xu6vx] {
        background: #a7f3d0;
        border-color: #34d399;
    }

.btn-lock[b-q3wg5xu6vx] {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

    .btn-lock:hover[b-q3wg5xu6vx] {
        background: #e5e7eb;
        border-color: #9ca3af;
    }

.btn-delete[b-q3wg5xu6vx] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

    .btn-delete:hover[b-q3wg5xu6vx] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

.empty-row[b-q3wg5xu6vx] {
    border-bottom: none;
}

.empty-state[b-q3wg5xu6vx] {
    padding: 0;
}

.empty-content[b-q3wg5xu6vx] {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-q3wg5xu6vx] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-content h3[b-q3wg5xu6vx] {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-q3wg5xu6vx] {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* ========== 分页控件区域样式 ========== */
.pagination-container[b-q3wg5xu6vx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    gap: 15px;
    flex-wrap: wrap;
}

.pagination-info[b-q3wg5xu6vx] {
    font-size: 0.9rem; /* 使用rem单位 */
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

/* ========== 每页显示行数选择器样式 ========== */
.page-size-selector[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    .page-size-selector label[b-q3wg5xu6vx] {
        font-size: 0.9rem; /* 使用rem单位 */
        color: #64748b;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-size-selector select[b-q3wg5xu6vx] {
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 0.9rem; /* 使用rem单位 */
        color: #374151;
        background-color: white;
        cursor: pointer;
        transition: border-color 0.2s;
        min-width: 80px;
        height: 32px;
    }

        .page-size-selector select:focus[b-q3wg5xu6vx] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }

.pagination-controls[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;

}

.page-info[b-q3wg5xu6vx] {
    font-size: 0.9rem; /* 使用rem单位 */
    font-weight: 600;
    color: #374151;
    background: white;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    white-space: nowrap;
}

.btn-pagination[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.9rem; /* 使用rem单位 */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-pagination:hover:not(:disabled)[b-q3wg5xu6vx] {
        background: #f3f4f6;
        border-color: #9ca3af;
    }

    .btn-pagination:disabled[b-q3wg5xu6vx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== 模态框样式 ========== */
.modal-backdrop[b-q3wg5xu6vx] {
    opacity: 0.5;
    background: #000;
}

.modal-content[b-q3wg5xu6vx] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ========== 添加用户模态框绿色主题样式 ========== */
.add-user-header[b-q3wg5xu6vx] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white;
    border-bottom: none;
    padding: 16px 20px;
    border-radius: 8px 8px 0 0;
}

    .add-user-header .modal-title[b-q3wg5xu6vx] {
        color: white;
        font-weight: 600;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
    }

    .add-user-header .btn-close[b-q3wg5xu6vx] {
        filter: brightness(0) invert(1);
        opacity: 0.8;
        transition: opacity 0.2s;
    }

        .add-user-header .btn-close:hover[b-q3wg5xu6vx] {
            opacity: 1;
            transform: scale(1.1);
        }

/* 绿色主题的保存按钮 */
.btn-save-green[b-q3wg5xu6vx] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .btn-save-green:hover[b-q3wg5xu6vx] {
        background: linear-gradient(135deg, #0da271 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

/* 添加用户表单的绿色主题元素 */
.form-label.required[b-q3wg5xu6vx]::after {
    content: " *";
    color: #10b981;
    font-weight: bold;
}

.form-control-compact:focus[b-q3wg5xu6vx] {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.modal-header[b-q3wg5xu6vx] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
}

.modal-title[b-q3wg5xu6vx] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.modal-body[b-q3wg5xu6vx] {
    padding: 16px;
}

.modal-footer[b-q3wg5xu6vx] {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
}

/* ========== 紧凑表单网格布局 ========== */
.form-grid-compact[b-q3wg5xu6vx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 8px;
}

.form-group-compact[b-q3wg5xu6vx] {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

    .form-group-compact.full-width[b-q3wg5xu6vx] {
        grid-column: 1 / -1;
    }

    .form-group-compact.checkbox-group[b-q3wg5xu6vx] {
        grid-column: 1 / -1;
        display: flex;
        gap: 16px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

.form-label[b-q3wg5xu6vx] {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem; /* 使用rem单位 */
}

.form-control-compact[b-q3wg5xu6vx] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem; /* 使用rem单位 */
    transition: border-color 0.2s;
    background-color: #fafafa;
}

    .form-control-compact:focus[b-q3wg5xu6vx] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        background-color: white;
    }

/* 下拉箭头样式 */
.select-arrow[b-q3wg5xu6vx] {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
}

.form-check-compact[b-q3wg5xu6vx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-check-input[b-q3wg5xu6vx] {
    margin: 0;
}

.form-check-label[b-q3wg5xu6vx] {
    font-size: 0.9rem; /* 使用rem单位 */
    color: #374151;
    margin: 0;
}

/* 用户角色管理样式 */
.role-tags-container[b-q3wg5xu6vx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background-color: #fff;
}

.role-tag[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 1rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem; /* 使用rem单位 */
    transition: all 0.2s ease;
}

    .role-tag:hover[b-q3wg5xu6vx] {
        background-color: #d1e7ff;
        border-color: #80bdff;
    }

.role-name[b-q3wg5xu6vx] {
    margin-right: 0.25rem;
    font-weight: 500;
    color: #0066cc;
}

.btn-remove-role[b-q3wg5xu6vx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    border-radius: 50%;
    background-color: #ff6b6b;
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

    .btn-remove-role:hover[b-q3wg5xu6vx] {
        background-color: #ff5252;
        transform: scale(1.1);
    }

/* ========== 响应式设计 ========== */
@media (max-width: 1400px) {
    .action-section[b-q3wg5xu6vx] {
        gap: 8px;
    }

    .search-box[b-q3wg5xu6vx] {
        min-width: 180px;
    }

    .filter-box[b-q3wg5xu6vx] {
        min-width: 260px;
    }

    .sort-box[b-q3wg5xu6vx] {
        min-width: 300px;
    }
}

@media (max-width: 1200px) {
    .pagination-container[b-q3wg5xu6vx] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .pagination-info[b-q3wg5xu6vx],
    .page-size-selector[b-q3wg5xu6vx],
    .pagination-controls[b-q3wg5xu6vx] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .user-management-container[b-q3wg5xu6vx] {
        padding: 4px 8px;
    }

    .management-header[b-q3wg5xu6vx] {
        padding: 6px 12px;
        position: relative;
    }

    .header-main[b-q3wg5xu6vx] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .title-section[b-q3wg5xu6vx] {
        justify-content: center;
    }

    .action-section[b-q3wg5xu6vx] {
        justify-content: center;
    }

    .search-box[b-q3wg5xu6vx],
    .filter-box[b-q3wg5xu6vx],
    .sort-box[b-q3wg5xu6vx] {
        min-width: auto;
        flex: 1;
    }

        .filter-box .input-group[b-q3wg5xu6vx],
        .sort-box .input-group[b-q3wg5xu6vx] {
            flex-wrap: nowrap;
        }

    .filter-select[b-q3wg5xu6vx],
    .sort-select[b-q3wg5xu6vx] {
        min-width: 120px;
        flex: 1;
    }

    .sort-order[b-q3wg5xu6vx] {
        width: 90px;
        flex-shrink: 0;
    }

    .btn-sort[b-q3wg5xu6vx] {
        width: 100px;
        flex-shrink: 0;
    }

    .table-container[b-q3wg5xu6vx] {
        font-size: 0.8rem;
    }

    /* 手机端改为单列布局 */
    .form-grid-compact[b-q3wg5xu6vx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .user-management-container[b-q3wg5xu6vx] {
        padding: 2px 4px;
    }

    .management-header[b-q3wg5xu6vx] {
        padding: 4px 8px;
    }

    .action-section[b-q3wg5xu6vx] {
        flex-direction: column;
        gap: 8px;
    }

    .search-box[b-q3wg5xu6vx],
    .filter-box[b-q3wg5xu6vx],
    .sort-box[b-q3wg5xu6vx] {
        width: 100%;
    }

    .filter-box[b-q3wg5xu6vx],
    .sort-box[b-q3wg5xu6vx] {
        padding: 6px 8px;
    }

        .filter-box .input-group[b-q3wg5xu6vx],
        .sort-box .input-group[b-q3wg5xu6vx] {
            flex-wrap: nowrap;
            height: auto;
            gap: 6px;
        }

    .filter-select[b-q3wg5xu6vx],
    .sort-select[b-q3wg5xu6vx] {
        min-width: 100px;
        flex: 2;
    }

    .sort-order[b-q3wg5xu6vx] {
        width: 80px;
        flex-shrink: 0;
    }

    .btn-sort[b-q3wg5xu6vx] {
        width: 90px;
        flex-shrink: 0;
    }

    .btn-filter[b-q3wg5xu6vx] {
        width: 110px;
    }

    .action-buttons[b-q3wg5xu6vx] {
        width: 100%;
        justify-content: center;
    }

    .btn-action span[b-q3wg5xu6vx] {
        display: none;
    }

    .btn-action[b-q3wg5xu6vx] {
        padding: 4px;
    }

    .pagination-container[b-q3wg5xu6vx] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .modal-dialog[b-q3wg5xu6vx] {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .form-grid-compact[b-q3wg5xu6vx] {
        grid-template-columns: 1fr;
        max-height: 70vh;
    }
}

@media (max-width: 480px) {
    .filter-box .input-group[b-q3wg5xu6vx],
    .sort-box .input-group[b-q3wg5xu6vx] {
        gap: 4px;
    }

    .filter-select[b-q3wg5xu6vx],
    .sort-select[b-q3wg5xu6vx] {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .sort-order[b-q3wg5xu6vx] {
        width: 70px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-sort[b-q3wg5xu6vx] {
        width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-filter[b-q3wg5xu6vx] {
        width: 110px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

        .btn-sort span[b-q3wg5xu6vx],
        .btn-filter span[b-q3wg5xu6vx] {
            display: none;
        }

        .btn-sort i[b-q3wg5xu6vx],
        .btn-filter i[b-q3wg5xu6vx] {
            margin-right: 0;
        }

    .form-group-compact.checkbox-group[b-q3wg5xu6vx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .page-size-selector[b-q3wg5xu6vx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* 滚动条美化 */
.table-scroll-wrapper[b-q3wg5xu6vx]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll-wrapper[b-q3wg5xu6vx]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-scroll-wrapper[b-q3wg5xu6vx]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .table-scroll-wrapper[b-q3wg5xu6vx]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

.form-grid-compact[b-q3wg5xu6vx]::-webkit-scrollbar {
    width: 6px;
}

.form-grid-compact[b-q3wg5xu6vx]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.form-grid-compact[b-q3wg5xu6vx]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .form-grid-compact[b-q3wg5xu6vx]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* 动画效果 */
@keyframes fadeIn-b-q3wg5xu6vx {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-management-container[b-q3wg5xu6vx] {
    animation: fadeIn-b-q3wg5xu6vx 0.3s ease-out;
}

.table-row[b-q3wg5xu6vx] {
    animation: fadeIn-b-q3wg5xu6vx 0.2s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/LFUserStatics.razor.rz.scp.css */
/* ========== 用户统计主容器样式 ========== */
/* 主容器：设置最大宽度、居中对齐和紧凑内边距 */
/* 添加右边垂直滚动条，当内容超出屏幕时显示 */
.statistics-container[b-vaupiz29yl] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0px 12px;
    height: 100vh; /* 使用视口高度确保滚动区域正确计算 */
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow-y: auto; /* 主容器添加垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    /* 滚动条美化 */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    /* Webkit浏览器滚动条样式 */
    .statistics-container[b-vaupiz29yl]::-webkit-scrollbar {
        width: 8px;
    }

    .statistics-container[b-vaupiz29yl]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .statistics-container[b-vaupiz29yl]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
        border: 2px solid #f1f5f9;
    }

        .statistics-container[b-vaupiz29yl]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ========== 标题和功能区样式 ========== */
/* 管理头部：浅灰色背景，紧凑布局 */
.management-header[b-vaupiz29yl] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.header-main[b-vaupiz29yl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* 标题区域 */
.title-section[b-vaupiz29yl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-vaupiz29yl] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-vaupiz29yl] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

/* 操作区域 */
.action-section[b-vaupiz29yl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

/* ========== 日期筛选区域样式 ========== */
.filter-box.date-filter[b-vaupiz29yl] {
    min-width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.date-inputs[b-vaupiz29yl] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-group[b-vaupiz29yl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.date-label[b-vaupiz29yl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.date-icon[b-vaupiz29yl] {
    color: #3b82f6;
    font-size: 0.9rem;
}

.date-input[b-vaupiz29yl] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 32px;
    min-width: 130px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .date-input:focus[b-vaupiz29yl] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* ========== 过滤功能区域样式 ========== */
.filter-box[b-vaupiz29yl] {
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .filter-box .input-group[b-vaupiz29yl] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.filter-select[b-vaupiz29yl] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 120px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.btn-generate[b-vaupiz29yl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: white;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 100px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-generate:hover[b-vaupiz29yl] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

/* 操作按钮组 */
.action-buttons[b-vaupiz29yl] {
    display: flex;
    gap: 8px;
}

/* 基础按钮样式 */
.btn[b-vaupiz29yl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-vaupiz29yl] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* 具体按钮样式 */
.btn-export[b-vaupiz29yl] {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

    .btn-export:hover[b-vaupiz29yl] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

.btn-refresh[b-vaupiz29yl] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-vaupiz29yl] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-primary[b-vaupiz29yl] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-vaupiz29yl] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

.btn-export-sm[b-vaupiz29yl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #8b5cf6;
    border: 1px solid #8b5cf6;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    height: 32px;
    white-space: nowrap;
}

    .btn-export-sm:hover[b-vaupiz29yl] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

/* ========== 主要内容区域样式 ========== */
.content-area[b-vaupiz29yl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden; /* 内容区域不显示滚动条，由父容器控制 */
}

/* ========== 加载状态样式 ========== */
.loading-overlay[b-vaupiz29yl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner-container[b-vaupiz29yl] {
    text-align: center;
}

    .spinner-container p[b-vaupiz29yl] {
        margin-top: 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* ========== 统计卡片区域样式 ========== */
/* 【需求】4个统计项，不论窗体如何变化，都是在一行,不换行 */
.stats-cards-section[b-vaupiz29yl] {
    margin: 5px 0 8px 0;
    width: 100%;
}

/* 统计网格布局 - 始终4列不换行 */
.stats-grid[b-vaupiz29yl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制4列布局 */
    gap: 12px;
    width: 100%;
    min-width: 600px; /* 确保最小宽度，防止挤压变形 */
}

.stat-card[b-vaupiz29yl] {
    background: white;
    padding: 5px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    min-width: 0; /* 允许内容收缩 */
    overflow: hidden; /* 防止内容溢出 */
}

    .stat-card:hover[b-vaupiz29yl] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

/* 统计图标样式 - 缩小尺寸 */
.stat-icon[b-vaupiz29yl] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0; /* 防止图标被压缩 */
}

.total-users .stat-icon[b-vaupiz29yl] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.new-users .stat-icon[b-vaupiz29yl] {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.active-users .stat-icon[b-vaupiz29yl] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.wechat-users .stat-icon[b-vaupiz29yl] {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
}

.stat-content[b-vaupiz29yl] {
    flex: 1;
    min-width: 0; /* 允许文本内容收缩 */
}

.stat-value[b-vaupiz29yl] {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label[b-vaupiz29yl] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== 图表区域样式 ========== */
/* 【需求】1.图的标题和区域的上边界的距离减小。2.标题和图例的行间距也减少，节省高度 */
.chart-section[b-vaupiz29yl] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
}

.chart-container[b-vaupiz29yl] {
    height: 320px;
    padding: 8px 16px 16px 16px; /* 上边距减小为8px */
    position: relative;
}

/* ========== 数据表格区域样式 ========== */
/* 【需求】标题和btn在一行，btn靠右。不论窗体怎么变化，都是在1行 */
.data-section[b-vaupiz29yl] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 区域头部 - 标题和按钮在同一行 */
.section-header[b-vaupiz29yl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title[b-vaupiz29yl] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.date-range-info[b-vaupiz29yl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
}

.date-range-text[b-vaupiz29yl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    background: #e2e8f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .date-range-text i[b-vaupiz29yl] {
        color: #3b82f6;
        font-size: 0.9rem;
    }

/* 表格容器 */
.table-container[b-vaupiz29yl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-scroll-wrapper[b-vaupiz29yl] {
    flex: 1;
    overflow: auto;
}

/* 表格基础样式 */
.data-table[b-vaupiz29yl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

/* 表头样式 */
.table-header[b-vaupiz29yl] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-vaupiz29yl] {
        padding: 12px 16px;
        text-align: center;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    }

/* 列宽设置 */
.col-period[b-vaupiz29yl] {
    min-width: 120px;
    width: 25%;
}

.col-count[b-vaupiz29yl] {
    min-width: 100px;
    width: 25%;
}

.col-cumulative[b-vaupiz29yl] {
    min-width: 100px;
    width: 25%;
}

.col-growth[b-vaupiz29yl] {
    min-width: 100px;
    width: 25%;
}

/* 表格行样式 */
.table-body[b-vaupiz29yl] {
    background: white;
}

.table-row[b-vaupiz29yl] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-vaupiz29yl] {
        background: #f8fafc;
    }

    .table-row td[b-vaupiz29yl] {
        padding: 10px 16px;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8rem;
    }

/* 数字列样式 */
.number[b-vaupiz29yl] {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 增长率颜色样式 */
.growth-positive[b-vaupiz29yl] {
    color: #10b981;
    font-weight: 700;
}

.growth-negative[b-vaupiz29yl] {
    color: #ef4444;
    font-weight: 700;
}

.growth-zero[b-vaupiz29yl] {
    color: #64748b;
    font-weight: 500;
}

/* ========== 空状态样式 ========== */
.empty-state[b-vaupiz29yl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.empty-content[b-vaupiz29yl] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.empty-icon[b-vaupiz29yl] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.empty-content h3[b-vaupiz29yl] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-vaupiz29yl] {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

/* ========== 滚动条美化 ========== */
.table-scroll-wrapper[b-vaupiz29yl] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar {
        width: 12px;
        height: 14px;
    }

    .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 6px;
    }

    .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 6px;
        border: 2px solid #f1f5f9;
    }

        .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar-thumb:horizontal {
            background: #3b82f6;
        }

            .table-scroll-wrapper[b-vaupiz29yl]::-webkit-scrollbar-thumb:horizontal:hover {
                background: #2563eb;
            }

/* ========== 响应式设计 ========== */
/* 中等屏幕适配 */
@media (max-width: 1400px) {
    .action-section[b-vaupiz29yl] {
        gap: 8px;
    }

    .filter-box.date-filter[b-vaupiz29yl] {
        min-width: 300px;
    }

    .date-inputs[b-vaupiz29yl] {
        gap: 8px;
    }

    .date-input[b-vaupiz29yl] {
        min-width: 120px;
    }

    .filter-box[b-vaupiz29yl] {
        min-width: 240px;
    }

    /* 中等屏幕下统计卡片适当缩小 */
    .stats-grid[b-vaupiz29yl] {
        min-width: 500px;
        gap: 10px;
    }

    .stat-card[b-vaupiz29yl] {
        padding: 5px 12px;
        gap: 10px;
    }

    .stat-icon[b-vaupiz29yl] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .stat-value[b-vaupiz29yl] {
        font-size: 1.2rem;
    }

    .stat-label[b-vaupiz29yl] {
        font-size: 0.8rem;
    }
}

/* 平板适配 */
@media (max-width: 1200px) {
    .stats-grid[b-vaupiz29yl] {
        min-width: 450px;
        gap: 8px;
    }

    .stat-card[b-vaupiz29yl] {
        padding: 5px 10px;
        gap: 8px;
        height: 55px;
    }

    .stat-icon[b-vaupiz29yl] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .stat-value[b-vaupiz29yl] {
        font-size: 1.1rem;
    }

    .stat-label[b-vaupiz29yl] {
        font-size: 0.75rem;
    }
}

/* 平板适配 */
@media (max-width: 992px) {
    .statistics-container[b-vaupiz29yl] {
        padding: 4px 8px;
    }

    .management-header[b-vaupiz29yl] {
        padding: 6px 12px;
        position: relative;
    }

    .header-main[b-vaupiz29yl] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .title-section[b-vaupiz29yl] {
        justify-content: center;
    }

    .action-section[b-vaupiz29yl] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-vaupiz29yl] {
        width: 100%;
    }

    .date-inputs[b-vaupiz29yl] {
        flex-wrap: nowrap;
    }

    .filter-box[b-vaupiz29yl] {
        width: 100%;
    }

        .filter-box .input-group[b-vaupiz29yl] {
            flex-wrap: nowrap;
        }

    .filter-select[b-vaupiz29yl] {
        min-width: 120px;
        flex: 1;
    }

    .btn-generate[b-vaupiz29yl] {
        width: 100px;
        flex-shrink: 0;
    }

    .section-header[b-vaupiz29yl] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .date-range-info[b-vaupiz29yl] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-export-sm[b-vaupiz29yl] {
        align-self: flex-end;
    }

    /* 平板下统计卡片进一步缩小 */
    .stats-grid[b-vaupiz29yl] {
        min-width: 600px;
        gap: 6px;
    }

    .stat-card[b-vaupiz29yl] {
        padding: 4px 8px;
        gap: 6px;
        height: 50px;
    }

    .stat-icon[b-vaupiz29yl] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .stat-value[b-vaupiz29yl] {
        font-size: 1rem;
    }

    .stat-label[b-vaupiz29yl] {
        font-size: 0.7rem;
    }
}

/* 手机适配 */
@media (max-width: 768px) {
    .statistics-container[b-vaupiz29yl] {
        padding: 2px 4px;
    }

    .management-header[b-vaupiz29yl] {
        padding: 4px 8px;
    }

    .action-section[b-vaupiz29yl] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-vaupiz29yl] {
        width: 100%;
        padding: 6px 8px;
    }

    .date-inputs[b-vaupiz29yl] {
        flex-direction: column;
        gap: 6px;
    }

    .date-group[b-vaupiz29yl] {
        width: 100%;
    }

    .date-input[b-vaupiz29yl] {
        width: 100%;
        min-width: unset;
    }

    .filter-box[b-vaupiz29yl] {
        width: 100%;
        padding: 6px 8px;
    }

        .filter-box .input-group[b-vaupiz29yl] {
            flex-wrap: nowrap;
            height: auto;
            gap: 6px;
        }

    .filter-select[b-vaupiz29yl] {
        min-width: 100px;
        flex: 2;
    }

    .btn-generate[b-vaupiz29yl] {
        width: 90px;
        flex-shrink: 0;
    }

    .action-buttons[b-vaupiz29yl] {
        width: 100%;
        justify-content: center;
    }

    /* 手机上统计卡片保持4列但进一步压缩 */
    .stats-grid[b-vaupiz29yl] {
        min-width: 450px;
        gap: 4px;
    }

    .stat-card[b-vaupiz29yl] {
        padding: 3px 6px;
        gap: 4px;
        height: 45px;
    }

    .stat-icon[b-vaupiz29yl] {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .stat-value[b-vaupiz29yl] {
        font-size: 0.9rem;
    }

    .stat-label[b-vaupiz29yl] {
        font-size: 0.65rem;
        letter-spacing: 0.3px;
    }

    .chart-container[b-vaupiz29yl] {
        height: 280px;
        padding: 6px 12px 12px 12px;
    }

    .section-title[b-vaupiz29yl] {
        font-size: 1.1rem;
    }

    .section-header[b-vaupiz29yl] {
        flex-direction: column; /* 手机上改为垂直布局 */
        gap: 10px;
    }

    .date-range-info[b-vaupiz29yl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .filter-box .input-group[b-vaupiz29yl] {
        gap: 4px;
    }

    .filter-select[b-vaupiz29yl] {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-generate[b-vaupiz29yl] {
        width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

        .btn-generate span[b-vaupiz29yl] {
            display: none;
        }

        .btn-generate i[b-vaupiz29yl] {
            margin-right: 0;
        }

    .section-title[b-vaupiz29yl] {
        font-size: 1rem;
    }

    .chart-container[b-vaupiz29yl] {
        height: 250px;
        padding: 4px 8px 8px 8px;
    }

    .section-header[b-vaupiz29yl] {
        flex-direction: column;
        gap: 8px;
    }

    .date-range-text[b-vaupiz29yl] {
        font-size: 0.8rem;
        padding: 3px 8px;
    }

    .btn-export-sm[b-vaupiz29yl] {
        width: 100%;
        justify-content: center;
    }

    /* 超小屏幕下统计卡片极致压缩 */
    .stats-grid[b-vaupiz29yl] {
        min-width: 300px;
        gap: 3px;
    }

    .stat-card[b-vaupiz29yl] {
        padding: 2px 4px;
        gap: 3px;
        height: 40px;
    }

    .stat-icon[b-vaupiz29yl] {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .stat-value[b-vaupiz29yl] {
        font-size: 0.8rem;
    }

    .stat-label[b-vaupiz29yl] {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
}

/* 动画效果 */
@keyframes fadeIn-b-vaupiz29yl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.statistics-container[b-vaupiz29yl] {
    animation: fadeIn-b-vaupiz29yl 0.3s ease-out;
}

.stat-card[b-vaupiz29yl] {
    animation: fadeIn-b-vaupiz29yl 0.2s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/Login3.razor.rz.scp.css */
/* ===== 登录组件样式文件 ===== */
/* 现代化设计，白色/浅灰色背景，优化输入区域 */

/* 主容器样式 */
.login-container[b-i5kv8z2dww] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 登录卡片样式 */
.login-card[b-i5kv8z2dww] {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 440px;
    width: 100%;
    position: relative;
    animation: cardEntrance-b-i5kv8z2dww 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes cardEntrance-b-i5kv8z2dww {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 简洁的登录头部 */
.login-header[b-i5kv8z2dww] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 2rem;
    text-align: center;
    position: relative;
}

    .login-header[b-i5kv8z2dww]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
    }

.login-title[b-i5kv8z2dww] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    .login-title .fas[b-i5kv8z2dww] {
        font-size: 1.8rem;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

/* 登录主体样式 - 优化间距 */
.login-body[b-i5kv8z2dww] {
    padding: 2.5rem 2rem;
    position: relative;
}

/* 加载状态样式 */
.loading-overlay[b-i5kv8z2dww] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0 0 20px 20px;
    backdrop-filter: blur(5px);
}

.spinner-container[b-i5kv8z2dww] {
    text-align: center;
}

.spinner[b-i5kv8z2dww] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-i5kv8z2dww 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-i5kv8z2dww {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-i5kv8z2dww] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
}

/* 消息提示样式 */
.message-alert[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    animation: slideIn-b-i5kv8z2dww 0.3s ease-out;
    border: 1px solid;
}

@keyframes slideIn-b-i5kv8z2dww {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-i5kv8z2dww] {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-info[b-i5kv8z2dww] {
    background: #f0f9ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.alert-error[b-i5kv8z2dww] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.close-btn[b-i5kv8z2dww] {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: inherit;
}

    .close-btn:hover[b-i5kv8z2dww] {
        opacity: 1;
    }

/* 登录标签样式 */
.login-tabs[b-i5kv8z2dww] {
    display: flex;
    background: #f8fafc;
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
}

.tab-btn[b-i5kv8z2dww] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    border: none;
    background: none;
    border-radius: 10px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

    .tab-btn.active[b-i5kv8z2dww] {
        background: white;
        color: #3b82f6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

    .tab-btn:hover:not(.active)[b-i5kv8z2dww] {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
        transform: translateY(-1px);
    }

/* 表单样式 - 优化输入区域 */
.login-form[b-i5kv8z2dww] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.input-group[b-i5kv8z2dww] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-label[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #374151;
    font-size: 1rem;
    margin-bottom: 6px;
}

.input-icon[b-i5kv8z2dww] {
    color: #6b7280;
    width: 18px;
    font-size: 1.1rem;
}

/* 优化输入框样式 - 更大更美观 */
.text-input[b-i5kv8z2dww] {
    padding: 20px 22px;
    border: 2.5px solid #e5e7eb;
    border-radius: 14px;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    background: white;
    line-height: 1.5;
    height: 64px;
    box-sizing: border-box;
    font-weight: 500;
}

    .text-input:focus[b-i5kv8z2dww] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 25px rgba(59, 130, 246, 0.2);
        transform: translateY(-2px);
        background: #fafbff;
    }

    .text-input:disabled[b-i5kv8z2dww] {
        background: #f9fafb;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* 记住我样式 */
.remember-group[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    margin: 1rem 0 0.5rem;
}

.checkbox-label[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #6b7280;
    user-select: none;
    font-weight: 500;
}

.checkbox-input[b-i5kv8z2dww] {
    display: none;
}

.checkmark[b-i5kv8z2dww] {
    width: 22px;
    height: 22px;
    border: 2.5px solid #d1d5db;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.checkbox-input:checked + .checkmark[b-i5kv8z2dww] {
    background: #3b82f6;
    border-color: #3b82f6;
    animation: checkmarkPop-b-i5kv8z2dww 0.3s ease;
}

@keyframes checkmarkPop-b-i5kv8z2dww {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.checkbox-input:checked + .checkmark[b-i5kv8z2dww]::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.checkbox-text[b-i5kv8z2dww] {
    font-weight: 500;
}

/* 登录按钮容器 - 居中显示 */
.login-btn-container[b-i5kv8z2dww] {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0.5rem;
}

/* 按钮样式优化 */
.login-btn[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 32px;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 60px;
    min-width: 200px;
}

    .login-btn:disabled[b-i5kv8z2dww] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .login-btn.primary[b-i5kv8z2dww] {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    }

        .login-btn.primary:hover:not(:disabled)[b-i5kv8z2dww] {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(59, 130, 246, 0.5);
        }

/* 微信登录区域样式 */
.wechat-login-section[b-i5kv8z2dww] {
    text-align: center;
}

/* 返回按钮容器 */
.back-button-container[b-i5kv8z2dww] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.back-btn[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #f8fafc;
    color: #64748b;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .back-btn:hover[b-i5kv8z2dww] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #374151;
        transform: translateY(-1px);
    }

/* 微信二维码容器 */
.qr-container[b-i5kv8z2dww] {
    background: #f8fafc;
    border-radius: 18px;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
}

.qr-header[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2rem;
    position: relative;
}

.qr-icon[b-i5kv8z2dww] {
    font-size: 1.8rem;
    color: #22c55e;
}

.qr-header h3[b-i5kv8z2dww] {
    margin: 0;
    color: #1f2937;
    font-size: 1.4rem;
    font-weight: 700;
}

/* 环境标识 */
.environment-badge[b-i5kv8z2dww] {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .environment-badge.mock[b-i5kv8z2dww] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }

    .environment-badge.real[b-i5kv8z2dww] {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }

.qr-code-wrapper[b-i5kv8z2dww] {
    background: white;
    border-radius: 14px;
    padding: 2.5rem;
    margin: 0 auto 2rem;
    max-width: 240px;
    border: 2px dashed #e5e7eb;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.qr-code-placeholder[b-i5kv8z2dww] {
    text-align: center;
}

.qr-placeholder-icon[b-i5kv8z2dww] {
    font-size: 3.5rem;
    color: #d1d5db;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.qr-text[b-i5kv8z2dww] {
    font-weight: 700;
    color: #6b7280;
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
}

.qr-hint[b-i5kv8z2dww] {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
}

.qr-instruction[b-i5kv8z2dww] {
    margin-bottom: 2rem;
}

    .qr-instruction p[b-i5kv8z2dww] {
        margin: 0.3rem 0;
        color: #6b7280;
        font-size: 0.95rem;
        font-weight: 500;
    }

/* 模拟登录区域 */
.mock-form[b-i5kv8z2dww] {
    margin-top: 2rem;
}

.simulation-section[b-i5kv8z2dww] {
    background: white;
    border-radius: 14px;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.simulation-input-group[b-i5kv8z2dww] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.simulation-input[b-i5kv8z2dww] {
    flex: 1;
    padding: 18px 20px;
    border: 2.5px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .simulation-input:focus[b-i5kv8z2dww] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    }

.simulation-btn[b-i5kv8z2dww] {
    padding: 18px 24px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 56px;
    font-size: 1.05rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

    .simulation-btn:hover:not(:disabled)[b-i5kv8z2dww] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    }

.simulation-hints[b-i5kv8z2dww] {
    text-align: left;
}

.simulation-hint[b-i5kv8z2dww] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

    .simulation-hint .fas[b-i5kv8z2dww] {
        color: #f59e0b;
        font-size: 1.1rem;
    }

.simulation-example[b-i5kv8z2dww] {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
}

    .simulation-example code[b-i5kv8z2dww] {
        background: #f3f4f6;
        padding: 4px 8px;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: #4b5563;
    }

/* 辅助链接样式 */
.helper-links[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.helper-link[b-i5kv8z2dww] {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
}

    .helper-link:hover[b-i5kv8z2dww] {
        color: #3b82f6;
        background: #f8fafc;
        transform: translateY(-1px);
    }

.link-separator[b-i5kv8z2dww] {
    color: #d1d5db;
    font-weight: 300;
}

/* 登录页脚样式 */
.login-footer[b-i5kv8z2dww] {
    background: #f8fafc;
    padding: 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.security-info[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
}

.security-icon[b-i5kv8z2dww] {
    color: #10b981;
    font-size: 1.1rem;
}

/* 验证样式 */
.validation-summary[b-i5kv8z2dww] {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.validation-message[b-i5kv8z2dww] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 8px;
    font-weight: 500;
}

/* 真实微信组件样式 */
.wechat-real-container .qr-code-image[b-i5kv8z2dww] {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.qr-code-overlay[b-i5kv8z2dww] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.qr-code-wrapper:hover .qr-code-overlay[b-i5kv8z2dww] {
    opacity: 1;
}

.qr-status[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.status-waiting[b-i5kv8z2dww] {
    color: #f59e0b;
}

.status-success[b-i5kv8z2dww] {
    color: #10b981;
}

.status-expired[b-i5kv8z2dww] {
    color: #ef4444;
}

.countdown[b-i5kv8z2dww] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.retry-btn[b-i5kv8z2dww] {
    padding: 10px 18px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

    .retry-btn:hover:not(:disabled)[b-i5kv8z2dww] {
        background: #2563eb;
        transform: translateY(-1px);
    }

/* 响应式设计 */
@media (max-width: 480px) {
    .login-container[b-i5kv8z2dww] {
        padding: 15px;
    }

    .login-card[b-i5kv8z2dww] {
        border-radius: 16px;
    }

    .login-header[b-i5kv8z2dww] {
        padding: 1.8rem 1.5rem;
    }

    .login-body[b-i5kv8z2dww] {
        padding: 2rem 1.5rem;
    }

    .login-title[b-i5kv8z2dww] {
        font-size: 1.3rem;
    }

    .helper-links[b-i5kv8z2dww] {
        flex-direction: column;
        gap: 12px;
    }

    .link-separator[b-i5kv8z2dww] {
        display: none;
    }

    .simulation-input-group[b-i5kv8z2dww] {
        flex-direction: column;
    }

    .tab-btn[b-i5kv8z2dww] {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .text-input[b-i5kv8z2dww] {
        padding: 18px 20px;
        height: 60px;
    }

    .login-btn[b-i5kv8z2dww] {
        padding: 16px 28px;
        min-height: 56px;
    }
}

/* 输入框焦点动画增强 */
.text-input:focus[b-i5kv8z2dww] {
    animation: inputFocus-b-i5kv8z2dww 0.4s ease-out;
}

@keyframes inputFocus-b-i5kv8z2dww {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.1);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
    }

    100% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    }
}

/* 按钮悬停动画 */
.login-btn[b-i5kv8z2dww], .simulation-btn[b-i5kv8z2dww], .back-btn[b-i5kv8z2dww] {
    position: relative;
    overflow: hidden;
}

    .login-btn[b-i5kv8z2dww]::before, .simulation-btn[b-i5kv8z2dww]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .login-btn:hover[b-i5kv8z2dww]::before, .simulation-btn:hover[b-i5kv8z2dww]::before {
        left: 100%;
    }
/* _content/LEAFBlazorApp25/Components/Account/Pages/Login4.razor.rz.scp.css */
/* ===== 登录组件样式文件 ===== */
/* 现代化紧凑设计，优化间距和输入区域 */

/* 主容器样式 */
.login-container[b-uj1umwbwgz] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 登录卡片样式 */
.login-card[b-uj1umwbwgz] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
    position: relative;
    animation: cardEntrance-b-uj1umwbwgz 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes cardEntrance-b-uj1umwbwgz {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 简洁的登录头部 - 减少高度 */
.login-header[b-uj1umwbwgz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
    position: relative;
}

    .login-header[b-uj1umwbwgz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
    }

.login-title[b-uj1umwbwgz] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    line-height: 1.2;
}

    .login-title .fas[b-uj1umwbwgz] {
        font-size: 1.6rem;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

/* 登录主体样式 - 优化间距 */
.login-body[b-uj1umwbwgz] {
    padding: 2rem 2rem 1.5rem;
    position: relative;
}

/* 加载状态样式 */
.loading-overlay[b-uj1umwbwgz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0 0 16px 16px;
    backdrop-filter: blur(5px);
}

.spinner-container[b-uj1umwbwgz] {
    text-align: center;
}

.spinner[b-uj1umwbwgz] {
    width: 42px;
    height: 42px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-uj1umwbwgz 1s linear infinite;
    margin: 0 auto 0.8rem;
}

@keyframes spin-b-uj1umwbwgz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-uj1umwbwgz] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
}

/* 消息提示样式 */
.message-alert[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    animation: slideIn-b-uj1umwbwgz 0.3s ease-out;
    border: 1px solid;
    line-height: 1.3;
}

@keyframes slideIn-b-uj1umwbwgz {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-uj1umwbwgz] {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-info[b-uj1umwbwgz] {
    background: #f0f9ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.alert-error[b-uj1umwbwgz] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.close-btn[b-uj1umwbwgz] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: inherit;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-uj1umwbwgz] {
        opacity: 1;
    }

/* 登录标签样式 - 紧凑设计 */
.login-tabs[b-uj1umwbwgz] {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
}

.tab-btn[b-uj1umwbwgz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    background: none;
    border-radius: 8px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.2;
}

    .tab-btn.active[b-uj1umwbwgz] {
        background: white;
        color: #3b82f6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

    .tab-btn:hover:not(.active)[b-uj1umwbwgz] {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
        transform: translateY(-1px);
    }

/* 表单样式 - 优化输入区域 */
.login-form[b-uj1umwbwgz] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group[b-uj1umwbwgz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 优化输入框样式 - 更紧凑美观 */
.text-input[b-uj1umwbwgz] {
    padding: 16px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    line-height: 1.4;
    height: 56px;
    box-sizing: border-box;
    font-weight: 500;
    color: #374151;
}

    .text-input[b-uj1umwbwgz]::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .text-input:focus[b-uj1umwbwgz] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 6px 20px rgba(59, 130, 246, 0.15);
        transform: translateY(-1px);
        background: #fafbff;
    }

    .text-input:disabled[b-uj1umwbwgz] {
        background: #f9fafb;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* 记住我样式 */
.remember-group[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    margin: 0.8rem 0 0.3rem;
}

.checkbox-label[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6b7280;
    user-select: none;
    font-weight: 500;
}

.checkbox-input[b-uj1umwbwgz] {
    display: none;
}

.checkmark[b-uj1umwbwgz] {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.checkbox-input:checked + .checkmark[b-uj1umwbwgz] {
    background: #3b82f6;
    border-color: #3b82f6;
    animation: checkmarkPop-b-uj1umwbwgz 0.3s ease;
}

@keyframes checkmarkPop-b-uj1umwbwgz {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.checkbox-input:checked + .checkmark[b-uj1umwbwgz]::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-text[b-uj1umwbwgz] {
    font-weight: 500;
    line-height: 1.2;
}

/* 登录按钮容器 - 居中显示 */
.login-btn-container[b-uj1umwbwgz] {
    display: flex;
    justify-content: center;
    margin: 1.2rem 0 0.3rem;
}

/* 按钮样式优化 - 更紧凑 */
.login-btn[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 54px;
    min-width: 180px;
    line-height: 1.2;
}

    .login-btn:disabled[b-uj1umwbwgz] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .login-btn.primary[b-uj1umwbwgz] {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }

        .login-btn.primary:hover:not(:disabled)[b-uj1umwbwgz] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        }

/* 微信登录区域样式 */
.wechat-login-section[b-uj1umwbwgz] {
    text-align: center;
    margin: 1rem 0;
}

/* 微信登录组件容器 */
.wechat-login-component[b-uj1umwbwgz] {
    display: none;
}

    .wechat-login-component.active[b-uj1umwbwgz] {
        display: block;
    }

/* 辅助链接样式 */
.helper-links[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.helper-link[b-uj1umwbwgz] {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.2;
}

    .helper-link:hover[b-uj1umwbwgz] {
        color: #3b82f6;
        background: #f8fafc;
        transform: translateY(-1px);
    }

.link-separator[b-uj1umwbwgz] {
    color: #d1d5db;
    font-weight: 300;
}

/* 登录页脚样式 */
.login-footer[b-uj1umwbwgz] {
    background: #f8fafc;
    padding: 1.2rem 2rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.security-info[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.security-icon[b-uj1umwbwgz] {
    color: #10b981;
    font-size: 1rem;
}

/* 验证样式 */
.validation-summary[b-uj1umwbwgz] {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

.validation-message[b-uj1umwbwgz] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 6px;
    font-weight: 500;
}

/* 微信登录嵌入组件样式 */
.wechat-login-embedded[b-uj1umwbwgz] {
    background: #f8fafc;
    border-radius: 14px;
    padding: 2rem;
    margin: 1rem 0;
    border: 1px solid #e5e7eb;
}

.wechat-login-header[b-uj1umwbwgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.wechat-login-icon[b-uj1umwbwgz] {
    font-size: 1.6rem;
    color: #22c55e;
}

.wechat-login-title[b-uj1umwbwgz] {
    margin: 0;
    color: #1f2937;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.wechat-login-content[b-uj1umwbwgz] {
    text-align: center;
}

.wechat-qr-placeholder[b-uj1umwbwgz] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin: 0 auto 1.5rem;
    max-width: 220px;
    border: 2px dashed #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.qr-placeholder-icon[b-uj1umwbwgz] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1.2rem;
    opacity: 0.7;
}

.qr-text[b-uj1umwbwgz] {
    font-weight: 700;
    color: #6b7280;
    margin: 0 0 0.6rem;
    font-size: 1rem;
    line-height: 1.2;
}

.qr-hint[b-uj1umwbwgz] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}

.wechat-instruction[b-uj1umwbwgz] {
    margin-bottom: 1.5rem;
}

    .wechat-instruction p[b-uj1umwbwgz] {
        margin: 0.2rem 0;
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.3;
    }

/* 模拟微信ID输入 */
.wechat-mock-input[b-uj1umwbwgz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.mock-input-group[b-uj1umwbwgz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.mock-input[b-uj1umwbwgz] {
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #374151;
}

    .mock-input:focus[b-uj1umwbwgz] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

.mock-submit-btn[b-uj1umwbwgz] {
    padding: 14px 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 50px;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    line-height: 1.2;
}

    .mock-submit-btn:hover:not(:disabled)[b-uj1umwbwgz] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
    }

.mock-hints[b-uj1umwbwgz] {
    text-align: left;
}

.mock-hint[b-uj1umwbwgz] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    line-height: 1.3;
}

    .mock-hint .fas[b-uj1umwbwgz] {
        color: #f59e0b;
        font-size: 1rem;
    }

.mock-example[b-uj1umwbwgz] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
}

    .mock-example code[b-uj1umwbwgz] {
        background: #f3f4f6;
        padding: 3px 6px;
        border-radius: 5px;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: #4b5563;
    }

/* 输入框焦点动画增强 */
.text-input:focus[b-uj1umwbwgz], .mock-input:focus[b-uj1umwbwgz] {
    animation: inputFocus-b-uj1umwbwgz 0.4s ease-out;
}

@keyframes inputFocus-b-uj1umwbwgz {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
}

/* 按钮悬停动画 */
.login-btn[b-uj1umwbwgz], .mock-submit-btn[b-uj1umwbwgz] {
    position: relative;
    overflow: hidden;
}

    .login-btn[b-uj1umwbwgz]::before, .mock-submit-btn[b-uj1umwbwgz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .login-btn:hover[b-uj1umwbwgz]::before, .mock-submit-btn:hover[b-uj1umwbwgz]::before {
        left: 100%;
    }

/* 响应式设计 */
@media (max-width: 480px) {
    .login-container[b-uj1umwbwgz] {
        padding: 10px;
    }

    .login-card[b-uj1umwbwgz] {
        border-radius: 14px;
    }

    .login-header[b-uj1umwbwgz] {
        padding: 1.2rem 1.5rem;
    }

    .login-body[b-uj1umwbwgz] {
        padding: 1.5rem 1.5rem 1.2rem;
    }

    .login-title[b-uj1umwbwgz] {
        font-size: 1.2rem;
    }

    .helper-links[b-uj1umwbwgz] {
        flex-direction: column;
        gap: 10px;
    }

    .link-separator[b-uj1umwbwgz] {
        display: none;
    }

    .tab-btn[b-uj1umwbwgz] {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .text-input[b-uj1umwbwgz] {
        padding: 14px 16px;
        height: 52px;
        font-size: 0.95rem;
    }

    .login-btn[b-uj1umwbwgz] {
        padding: 14px 24px;
        min-height: 50px;
        font-size: 1rem;
    }

    .wechat-login-embedded[b-uj1umwbwgz] {
        padding: 1.5rem;
    }

    .wechat-qr-placeholder[b-uj1umwbwgz] {
        padding: 1.5rem;
        max-width: 200px;
    }
}

/* 紧凑模式额外调整 */
.compact-mode .login-body[b-uj1umwbwgz] {
    padding: 1.5rem 1.8rem 1.2rem;
}

.compact-mode .input-group[b-uj1umwbwgz] {
    gap: 6px;
}

.compact-mode .login-form[b-uj1umwbwgz] {
    gap: 1.2rem;
}

.compact-mode .login-tabs[b-uj1umwbwgz] {
    margin-bottom: 1.2rem;
}

.compact-mode .helper-links[b-uj1umwbwgz] {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/LoginEmail.razor.rz.scp.css */
/* =============================================
   LEAF系统登录组件样式表 - 代码隔离类
   文件名：LoginEmail.razor.css
   ============================================= */

/* ===== 基础样式重置 ===== */
*[b-t97uojybtd] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 主容器样式 ===== */
.login-container[b-t97uojybtd] {
    min-height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 10px 20px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #333;
    line-height: 1.5;
    position: relative;
    overflow: auto;
    background: linear-gradient(135deg, #f0f9f0 0%, #e0f2e1 100%);
}

/* 科技感背景 */
.tech-background[b-t97uojybtd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.tech-grid[b-t97uojybtd] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(76, 175, 80, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 175, 80, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.4;
}

.tech-orbit[b-t97uojybtd] {
    position: absolute;
    border: 1px solid rgba(76, 175, 80, 0.15);
    border-radius: 50%;
    animation: orbit-rotate-b-t97uojybtd 20s linear infinite;
}

.orbit-1[b-t97uojybtd] {
    width: min(300px, 80vw);
    height: min(300px, 80vw);
    top: -150px;
    right: -150px;
}

.orbit-2[b-t97uojybtd] {
    width: min(200px, 60vw);
    height: min(200px, 60vw);
    bottom: -100px;
    left: -100px;
    animation-delay: -10s;
}

@keyframes orbit-rotate-b-t97uojybtd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 登录内容区域 */
.login-content[b-t97uojybtd] {
    width: 100%;
    max-width: min(480px, 90vw);
    position: relative;
    z-index: 2;
    margin: 20px 0;
}

/* ===== 登录卡片设计 ===== */
.login-card[b-t97uojybtd] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(76, 175, 80, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .login-card:hover[b-t97uojybtd] {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(76, 175, 80, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* 卡片头部 */
.card-header[b-t97uojybtd] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 15px 30px;
    color: white;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .card-header[b-t97uojybtd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
    }

.header-content[b-t97uojybtd] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-icon-circle[b-t97uojybtd] {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
}

    .header-icon-circle i[b-t97uojybtd] {
        font-size: 1.8rem;
        color: white;
    }

.header-text h2[b-t97uojybtd] {
    margin: 0 0 8px 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.header-text p[b-t97uojybtd] {
    margin: 0;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    opacity: 0.95;
    line-height: 1.3;
    font-weight: 500;
}

/* 卡片主体 */
.card-body[b-t97uojybtd] {
    padding: 40px 35px;
    position: relative;
}

/* ===== 已登录提示模态框 ===== */
.modal-overlay[b-t97uojybtd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    backdrop-filter: blur(8px);
    animation: fadeIn-b-t97uojybtd 0.3s ease;
}

.modal-container[b-t97uojybtd] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
    max-width: 450px;
    width: 100%;
    overflow: hidden;
    border: 2px solid #4caf50;
    animation: slideUp-b-t97uojybtd 0.3s ease;
}

.modal-header[b-t97uojybtd] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-icon[b-t97uojybtd] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

    .modal-icon i[b-t97uojybtd] {
        font-size: 1.3rem;
    }

.modal-header h3[b-t97uojybtd] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    flex: 1;
}

.modal-close[b-t97uojybtd] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .modal-close:hover[b-t97uojybtd] {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

.modal-body[b-t97uojybtd] {
    padding: 30px;
    color: #333;
    line-height: 1.6;
}

.modal-message[b-t97uojybtd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

    .modal-message i[b-t97uojybtd] {
        font-size: 3rem;
        color: #4caf50;
        margin-bottom: 10px;
    }

    .modal-message p[b-t97uojybtd] {
        font-size: 1.1rem;
        margin: 0;
        font-weight: 500;
    }

.modal-subtext[b-t97uojybtd] {
    color: #666;
    font-size: 0.95rem !important;
    font-weight: normal !important;
    max-width: 80%;
    margin: 0 auto;
}

.modal-footer[b-t97uojybtd] {
    padding: 20px 30px;
    background: #f9f9f9;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    border-top: 1px solid #eee;
}

.btn-modal-confirm[b-t97uojybtd] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-modal-confirm:hover[b-t97uojybtd] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }

.btn-modal-logout[b-t97uojybtd] {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-modal-logout:hover[b-t97uojybtd] {
        background: linear-gradient(135deg, #e53935, #c62828);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
    }

@keyframes fadeIn-b-t97uojybtd {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-t97uojybtd {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 加载覆盖层 */
.loading-overlay[b-t97uojybtd] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.tech-spinner[b-t97uojybtd] {
    position: relative;
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
}

.spinner-core[b-t97uojybtd] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: core-pulse-b-t97uojybtd 2s ease-in-out infinite;
}

.spinner-orbits .orbit[b-t97uojybtd] {
    position: absolute;
    border: 2px solid transparent;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: orbit-spin-b-t97uojybtd 1.5s linear infinite;
}

    .spinner-orbits .orbit:nth-child(1)[b-t97uojybtd] {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .spinner-orbits .orbit:nth-child(2)[b-t97uojybtd] {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        animation-delay: -0.5s;
    }

    .spinner-orbits .orbit:nth-child(3)[b-t97uojybtd] {
        top: 16px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        animation-delay: -1s;
    }

@keyframes core-pulse-b-t97uojybtd {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes orbit-spin-b-t97uojybtd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-t97uojybtd] {
    color: #4b5563;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===== 消息提示样式 ===== */
.message-alert[b-t97uojybtd] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-top: 15px;
    animation: alert-slide-b-t97uojybtd 0.3s ease-out;
    border: 1px solid;
    line-height: 1.5;
    gap: 12px;
}

.alert-success[b-t97uojybtd] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: #065f46;
}

.alert-error[b-t97uojybtd] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #7f1d1d;
}

.alert-icon[b-t97uojybtd] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.alert-content[b-t97uojybtd] {
    flex: 1;
    font-weight: 500;
    font-size: 0.95rem;
}

.alert-close[b-t97uojybtd] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    padding: 6px;
    border-radius: 6px;
    font-size: 1rem;
    flex-shrink: 0;
}

    .alert-close:hover[b-t97uojybtd] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.05);
    }

@keyframes alert-slide-b-t97uojybtd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 登录表单样式 ===== */
.login-form[b-t97uojybtd] {
    width: 100%;
}

.form-group[b-t97uojybtd] {
    margin-bottom: 28px;
}

.form-label[b-t97uojybtd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.3;
}

    .form-label i[b-t97uojybtd] {
        color: #4caf50;
        font-size: 1rem;
    }

.required[b-t97uojybtd] {
    color: #f44336;
    font-weight: bold;
    margin-left: 2px;
}

.input-container[b-t97uojybtd] {
    position: relative;
    width: 100%;
}

/* 输入框样式 - 重点优化 */
.form-input[b-t97uojybtd] {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #c8e6c9 !important;
    border-radius: 10px !important;
    font-size: 1.05rem !important;
    transition: all 0.3s ease !important;
    background: #f9f9f9 !important;
    color: #333 !important;
    font-family: inherit !important;
    height: 52px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    /* 文本居中 */
    text-align: center !important;
}

    .form-input[b-t97uojybtd]::placeholder {
        color: #9ca3af;
        font-weight: 500;
        text-align: center !important;
    }

    .form-input:focus[b-t97uojybtd] {
        outline: none !important;
        border-color: #4caf50 !important;
        background: white !important;
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15), 0 2px 8px rgba(76, 175, 80, 0.1) !important;
        transform: translateY(-1px);
    }

    .form-input:hover:not(:focus)[b-t97uojybtd] {
        border-color: #81c784 !important;
        background: #f5f9f5 !important;
    }

/* 验证消息样式 */
.validation-message[b-t97uojybtd] {
    display: block;
    color: #f44336;
    font-size: 0.9rem;
    margin-top: 8px;
    font-weight: 500;
    padding-left: 5px;
    line-height: 1.3;
}

.validation-summary[b-t97uojybtd] {
    color: #f44336;
    background: rgba(239, 68, 68, 0.05);
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 24px;
    border: 1px solid rgba(239, 68, 68, 0.1);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ===== 表单选项样式 ===== */
.form-options[b-t97uojybtd] {
    margin: 28px 0 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tech-checkbox[b-t97uojybtd] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
    transition: color 0.2s;
    gap: 12px;
    position: relative;
    user-select: none;
}

    .tech-checkbox:hover[b-t97uojybtd] {
        color: #374151;
    }

    .tech-checkbox input[b-t97uojybtd] {
        display: none;
    }

.checkmark[b-t97uojybtd] {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
    background: #ffffff;
    flex-shrink: 0;
}

.tech-checkbox input:checked + .checkmark[b-t97uojybtd] {
    background: #4caf50;
    border-color: #4caf50;
    transform: scale(1.05);
}

    .tech-checkbox input:checked + .checkmark[b-t97uojybtd]::after {
        content: '✓';
        position: absolute;
        color: #ffffff;
        font-size: 13px;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.checkbox-label[b-t97uojybtd] {
    font-size: 0.95rem;
    white-space: nowrap;
}

.checkbox-tooltip[b-t97uojybtd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    cursor: help;
}

    .checkbox-tooltip:hover .tooltip-text[b-t97uojybtd] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.tooltip-text[b-t97uojybtd] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #1f2937;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: normal;
    width: 250px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .tooltip-text[b-t97uojybtd]::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #1f2937;
    }

/* ===== 表单操作按钮 ===== */
.form-actions[b-t97uojybtd] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 3px solid #e8f5e9;
}

.btn[b-t97uojybtd] {
    padding: 14px 32px;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    height: 45px;
    letter-spacing: 0.5px;
}

    .btn:hover:not(:disabled)[b-t97uojybtd] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .btn:active:not(:disabled)[b-t97uojybtd] {
        transform: translateY(0);
    }

    .btn:disabled[b-t97uojybtd] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.btn-login[b-t97uojybtd] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}

    .btn-login:hover:not(:disabled)[b-t97uojybtd] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
    }

    .btn-login.loading[b-t97uojybtd] {
        opacity: 0.9;
        cursor: wait;
    }

    .btn-login .spinner-border[b-t97uojybtd] {
        width: 1rem;
        height: 1rem;
        border-width: 0.2em;
        margin-right: 8px;
    }

/* ===== 辅助链接样式 ===== */
.login-links[b-t97uojybtd] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 3px solid #f0f0f0;
    flex-wrap: wrap;
}

.link-button[b-t97uojybtd] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    min-width: 0;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    max-width: 110px;
}

    .link-button:hover[b-t97uojybtd] {
        color: #4caf50;
        background: rgba(76, 175, 80, 0.05);
        border-color: #4caf50;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .link-button i[b-t97uojybtd] {
        font-size: 0.9rem;
    }

/* ===== 卡片底部样式 ===== */
.card-footer[b-t97uojybtd] {
    padding: 18px 30px;
    background: rgba(249, 250, 251, 0.9);
    border-top: 1px solid #f0f0f0;
    backdrop-filter: blur(10px);
}

.security-badge[b-t97uojybtd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

    .security-badge i[b-t97uojybtd] {
        color: #10b981;
        font-size: 0.95rem;
    }

/* ===== 强制样式覆盖 ===== */
[b-t97uojybtd] .form-input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

[b-t97uojybtd] .validation-message {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}

/* ===== 响应式设计 ===== */

/* 平板设备 */
@media (max-width: 768px) {
    .login-container[b-t97uojybtd] {
        padding: 16px;
        min-height: 100vh;
        align-items: center;
    }

    .login-content[b-t97uojybtd] {
        max-width: 95vw;
        margin: 10px 0;
    }

    .card-header[b-t97uojybtd] {
        padding: 20px 25px;
    }

    .card-body[b-t97uojybtd] {
        padding: 30px 25px;
    }

    .card-footer[b-t97uojybtd] {
        padding: 16px 25px;
    }

    .header-icon-circle[b-t97uojybtd] {
        width: 50px;
        height: 50px;
    }

    .header-text h2[b-t97uojybtd] {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }

    .header-text p[b-t97uojybtd] {
        font-size: 1rem;
    }

    .form-input[b-t97uojybtd] {
        height: 48px !important;
        padding: 12px 16px !important;
        font-size: 1rem !important;
    }

    .btn[b-t97uojybtd] {
        height: 48px;
        padding: 12px 28px;
        font-size: 1rem;
    }

    .modal-container[b-t97uojybtd] {
        max-width: 90vw;
    }

    .modal-body[b-t97uojybtd] {
        padding: 24px;
    }

    .modal-footer[b-t97uojybtd] {
        padding: 16px 24px;
        flex-direction: column;
        gap: 10px;
    }

    .btn-modal-confirm[b-t97uojybtd],
    .btn-modal-logout[b-t97uojybtd] {
        width: 100%;
        justify-content: center;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .login-container[b-t97uojybtd] {
        padding: 12px;
    }

    .login-content[b-t97uojybtd] {
        max-width: 100vw;
        margin: 0;
    }

    .card-header[b-t97uojybtd] {
        padding: 16px 20px;
    }

    .card-body[b-t97uojybtd] {
        padding: 24px 20px;
    }

    .header-content[b-t97uojybtd] {
        gap: 15px;
    }

    .header-icon-circle[b-t97uojybtd] {
        width: 45px;
        height: 45px;
    }

        .header-icon-circle i[b-t97uojybtd] {
            font-size: 1.3rem;
        }

    .header-text h2[b-t97uojybtd] {
        font-size: 1.3rem;
        margin-bottom: 4px;
    }

    .header-text p[b-t97uojybtd] {
        font-size: 0.95rem;
    }

    .form-group[b-t97uojybtd] {
        margin-bottom: 22px;
    }

    .form-input[b-t97uojybtd] {
        height: 46px !important;
        padding: 11px 14px !important;
        font-size: 0.95rem !important;
    }

    .form-label[b-t97uojybtd] {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .btn[b-t97uojybtd] {
        height: 46px;
        padding: 11px 24px;
        font-size: 0.95rem;
        min-width: 140px;
    }

    .form-options[b-t97uojybtd] {
        margin: 24px 0 28px;
    }

    .login-links[b-t97uojybtd] {
        gap: 8px;
        padding-top: 20px;
        margin-top: 26px;
    }

    .link-button[b-t97uojybtd] {
        padding: 8px 12px;
        font-size: 0.9rem;
        max-width: 120px;
    }

    .security-badge[b-t97uojybtd] {
        font-size: 0.85rem;
    }

    .modal-header[b-t97uojybtd] {
        padding: 20px 24px;
    }

    .modal-body[b-t97uojybtd] {
        padding: 20px;
    }

    .modal-message p[b-t97uojybtd] {
        font-size: 1rem;
    }

    .modal-subtext[b-t97uojybtd] {
        font-size: 0.9rem !important;
    }
}

/* 超小屏幕处理 */
@media (max-width: 360px) {
    .card-header[b-t97uojybtd] {
        padding: 14px 16px;
    }

    .card-body[b-t97uojybtd] {
        padding: 20px 16px;
    }

    .header-content[b-t97uojybtd] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .header-icon-circle[b-t97uojybtd] {
        width: 40px;
        height: 40px;
    }

    .header-text h2[b-t97uojybtd] {
        font-size: 1.2rem;
    }

    .form-input[b-t97uojybtd] {
        height: 44px !important;
        padding: 10px 12px !important;
    }

    .btn[b-t97uojybtd] {
        height: 44px;
        padding: 10px 20px;
        min-width: 120px;
    }

    .login-links[b-t97uojybtd] {
        flex-direction: column;
        align-items: center;
    }

    .link-button[b-t97uojybtd] {
        width: 100%;
        max-width: 200px;
    }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
    .login-content[b-t97uojybtd] {
        max-width: 520px;
    }

    .card-header[b-t97uojybtd] {
        padding: 28px 35px;
    }

    .card-body[b-t97uojybtd] {
        padding: 45px 40px;
    }

    .header-icon-circle[b-t97uojybtd] {
        width: 65px;
        height: 65px;
    }

        .header-icon-circle i[b-t97uojybtd] {
            font-size: 2rem;
        }

    .header-text h2[b-t97uojybtd] {
        font-size: 2.2rem;
    }

    .header-text p[b-t97uojybtd] {
        font-size: 1.2rem;
    }

    .form-input[b-t97uojybtd] {
        height: 56px !important;
        padding: 16px 20px !important;
        font-size: 1.1rem !important;
    }

    .form-label[b-t97uojybtd] {
        font-size: 1.1rem;
    }

    .btn[b-t97uojybtd] {
        height: 56px;
        padding: 16px 36px;
        font-size: 1.1rem;
        min-width: 180px;
    }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
    .form-input[b-t97uojybtd] {
        border-width: 3px !important;
    }

    .link-button[b-t97uojybtd] {
        border-width: 2px;
    }

    .btn[b-t97uojybtd] {
        border: 2px solid currentColor;
    }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
    *[b-t97uojybtd] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn:hover:not(:disabled)[b-t97uojybtd],
    .link-button:hover[b-t97uojybtd] {
        transform: none;
    }

    .form-input:focus[b-t97uojybtd] {
        transform: none;
    }
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/LoginEmailWe.razor.rz.scp.css */
/* ===== 登录组件样式文件 ===== */
/* 现代化紧凑设计，优化间距和输入区域 */

/* 主容器样式 */
.login-container[b-q7rqyj6nex] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

/* 登录卡片样式 */
.login-card[b-q7rqyj6nex] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
    position: relative;
    animation: cardEntrance-b-q7rqyj6nex 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes cardEntrance-b-q7rqyj6nex {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 简洁的登录头部 - 减少高度 */
.login-header[b-q7rqyj6nex] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
    position: relative;
}

    .login-header[b-q7rqyj6nex]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
    }

.login-title[b-q7rqyj6nex] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    line-height: 1.2;
}

    .login-title .fas[b-q7rqyj6nex] {
        font-size: 1.6rem;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

/* 登录主体样式 - 优化间距 */
.login-body[b-q7rqyj6nex] {
    padding: 2rem 2rem 1.5rem;
    position: relative;
}

/* 加载状态样式 */
.loading-overlay[b-q7rqyj6nex] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0 0 16px 16px;
    backdrop-filter: blur(5px);
}

.spinner-container[b-q7rqyj6nex] {
    text-align: center;
}

.spinner[b-q7rqyj6nex] {
    width: 42px;
    height: 42px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-q7rqyj6nex 1s linear infinite;
    margin: 0 auto 0.8rem;
}

@keyframes spin-b-q7rqyj6nex {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-q7rqyj6nex] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
}

/* 消息提示样式 */
.message-alert[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    animation: slideIn-b-q7rqyj6nex 0.3s ease-out;
    border: 1px solid;
    line-height: 1.3;
}

@keyframes slideIn-b-q7rqyj6nex {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-q7rqyj6nex] {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-info[b-q7rqyj6nex] {
    background: #f0f9ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

.alert-error[b-q7rqyj6nex] {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.close-btn[b-q7rqyj6nex] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: inherit;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-q7rqyj6nex] {
        opacity: 1;
    }

/* 登录标签样式 - 紧凑设计 */
.login-tabs[b-q7rqyj6nex] {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
}

.tab-btn[b-q7rqyj6nex] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    background: none;
    border-radius: 8px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.2;
}

    .tab-btn.active[b-q7rqyj6nex] {
        background: white;
        color: #3b82f6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }

    .tab-btn:hover:not(.active)[b-q7rqyj6nex] {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
        transform: translateY(-1px);
    }

/* 表单样式 - 优化输入区域 */
.login-form[b-q7rqyj6nex] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group[b-q7rqyj6nex] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 优化输入框样式 - 更紧凑美观 */
.text-input[b-q7rqyj6nex] {
    padding: 16px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    line-height: 1.4;
    height: 56px;
    box-sizing: border-box;
    font-weight: 500;
    color: #374151;
}

    .text-input[b-q7rqyj6nex]::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .text-input:focus[b-q7rqyj6nex] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 6px 20px rgba(59, 130, 246, 0.15);
        transform: translateY(-1px);
        background: #fafbff;
    }

    .text-input:disabled[b-q7rqyj6nex] {
        background: #f9fafb;
        cursor: not-allowed;
        opacity: 0.7;
    }

/* 记住我样式 */
.remember-group[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    margin: 0.8rem 0 0.3rem;
}

.checkbox-label[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #6b7280;
    user-select: none;
    font-weight: 500;
}

.checkbox-input[b-q7rqyj6nex] {
    display: none;
}

.checkmark[b-q7rqyj6nex] {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.checkbox-input:checked + .checkmark[b-q7rqyj6nex] {
    background: #3b82f6;
    border-color: #3b82f6;
    animation: checkmarkPop-b-q7rqyj6nex 0.3s ease;
}

@keyframes checkmarkPop-b-q7rqyj6nex {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.checkbox-input:checked + .checkmark[b-q7rqyj6nex]::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-text[b-q7rqyj6nex] {
    font-weight: 500;
    line-height: 1.2;
}

/* 登录按钮容器 - 居中显示 */
.login-btn-container[b-q7rqyj6nex] {
    display: flex;
    justify-content: center;
    margin: 1.2rem 0 0.3rem;
}

/* 按钮样式优化 - 更紧凑 */
.login-btn[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 54px;
    min-width: 180px;
    line-height: 1.2;
}

    .login-btn:disabled[b-q7rqyj6nex] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .login-btn.primary[b-q7rqyj6nex] {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    }

        .login-btn.primary:hover:not(:disabled)[b-q7rqyj6nex] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        }

/* 微信登录区域样式 */
.wechat-login-section[b-q7rqyj6nex] {
    text-align: center;
    margin: 1rem 0;
}

/* 辅助链接样式 */
.helper-links[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.helper-link[b-q7rqyj6nex] {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.2;
}

    .helper-link:hover[b-q7rqyj6nex] {
        color: #3b82f6;
        background: #f8fafc;
        transform: translateY(-1px);
    }

.link-separator[b-q7rqyj6nex] {
    color: #d1d5db;
    font-weight: 300;
}

/* 登录页脚样式 */
.login-footer[b-q7rqyj6nex] {
    background: #f8fafc;
    padding: 1.2rem 2rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.security-info[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.security-icon[b-q7rqyj6nex] {
    color: #10b981;
    font-size: 1rem;
}

/* 验证样式 */
.validation-summary[b-q7rqyj6nex] {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

.validation-message[b-q7rqyj6nex] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 6px;
    font-weight: 500;
}

/* ===== 微信模拟登录组件样式 ===== */
.wechat-mock-container[b-q7rqyj6nex] {
    background: #f8fafc;
    border-radius: 14px;
    padding: 2rem;
    margin: 1rem 0;
    border: 1px solid #e5e7eb;
}

.qr-container[b-q7rqyj6nex] {
    text-align: center;
}

.qr-header[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1.5rem;
    position: relative;
}

.qr-icon[b-q7rqyj6nex] {
    font-size: 1.6rem;
    color: #22c55e;
}

.qr-header h3[b-q7rqyj6nex] {
    margin: 0;
    color: #1f2937;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.environment-badge[b-q7rqyj6nex] {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .environment-badge.mock[b-q7rqyj6nex] {
        background: #fef3c7;
        color: #d97706;
        border: 1px solid #fbbf24;
    }

    .environment-badge.real[b-q7rqyj6nex] {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #10b981;
    }

.qr-code-wrapper[b-q7rqyj6nex] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin: 0 auto 1.5rem;
    max-width: 220px;
    border: 2px dashed #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.qr-code-placeholder[b-q7rqyj6nex] {
    text-align: center;
}

.qr-placeholder-icon[b-q7rqyj6nex] {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1.2rem;
    opacity: 0.7;
}

.qr-text[b-q7rqyj6nex] {
    font-weight: 700;
    color: #6b7280;
    margin: 0 0 0.6rem;
    font-size: 1rem;
    line-height: 1.2;
}

.qr-hint[b-q7rqyj6nex] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}

.qr-instruction[b-q7rqyj6nex] {
    margin-bottom: 1.5rem;
}

    .qr-instruction p[b-q7rqyj6nex] {
        margin: 0.2rem 0;
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.3;
    }

/* 模拟微信ID输入 */
.mock-form[b-q7rqyj6nex] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.simulation-section[b-q7rqyj6nex] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.simulation-input-group[b-q7rqyj6nex] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group[b-q7rqyj6nex] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-label[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.input-icon[b-q7rqyj6nex] {
    color: #6b7280;
    font-size: 1rem;
}

.simulation-input[b-q7rqyj6nex] {
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #374151;
    width: 100%;
    box-sizing: border-box;
}

    .simulation-input:focus[b-q7rqyj6nex] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .simulation-input:disabled[b-q7rqyj6nex] {
        background: #f9fafb;
        cursor: not-allowed;
        opacity: 0.7;
    }

.simulation-btn[b-q7rqyj6nex] {
    padding: 14px 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 50px;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .simulation-btn:hover:not(:disabled)[b-q7rqyj6nex] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
    }

    .simulation-btn:disabled[b-q7rqyj6nex] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.simulation-hints[b-q7rqyj6nex] {
    text-align: left;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #f59e0b;
}

.simulation-hint[b-q7rqyj6nex] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    line-height: 1.3;
}

    .simulation-hint .fas[b-q7rqyj6nex] {
        color: #f59e0b;
        font-size: 1rem;
    }

.simulation-example[b-q7rqyj6nex] {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
}

    .simulation-example code[b-q7rqyj6nex] {
        background: #f3f4f6;
        padding: 3px 6px;
        border-radius: 5px;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: #4b5563;
    }

/* ===== 微信真实登录组件样式 ===== */
.wechat-real-container[b-q7rqyj6nex] {
    background: #f8fafc;
    border-radius: 14px;
    padding: 2rem;
    margin: 1rem 0;
    border: 1px solid #e5e7eb;
}

.qr-code-image[b-q7rqyj6nex] {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.qr-code-overlay[b-q7rqyj6nex] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.qr-status[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-waiting[b-q7rqyj6nex] {
    color: #fbbf24;
}

.status-success[b-q7rqyj6nex] {
    color: #10b981;
}

.status-expired[b-q7rqyj6nex] {
    color: #ef4444;
}

.retry-btn[b-q7rqyj6nex] {
    padding: 10px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    margin-top: 1rem;
}

    .retry-btn:hover:not(:disabled)[b-q7rqyj6nex] {
        background: #2563eb;
        transform: translateY(-1px);
    }

    .retry-btn:disabled[b-q7rqyj6nex] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.countdown[b-q7rqyj6nex] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* 输入框焦点动画增强 */
.text-input:focus[b-q7rqyj6nex], .simulation-input:focus[b-q7rqyj6nex] {
    animation: inputFocus-b-q7rqyj6nex 0.4s ease-out;
}

@keyframes inputFocus-b-q7rqyj6nex {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
}

/* 按钮悬停动画 */
.login-btn[b-q7rqyj6nex], .simulation-btn[b-q7rqyj6nex], .retry-btn[b-q7rqyj6nex] {
    position: relative;
    overflow: hidden;
}

    .login-btn[b-q7rqyj6nex]::before, .simulation-btn[b-q7rqyj6nex]::before, .retry-btn[b-q7rqyj6nex]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }

    .login-btn:hover[b-q7rqyj6nex]::before, .simulation-btn:hover[b-q7rqyj6nex]::before, .retry-btn:hover[b-q7rqyj6nex]::before {
        left: 100%;
    }

/* 响应式设计 */
@media (max-width: 480px) {
    .login-container[b-q7rqyj6nex] {
        padding: 10px;
    }

    .login-card[b-q7rqyj6nex] {
        border-radius: 14px;
    }

    .login-header[b-q7rqyj6nex] {
        padding: 1.2rem 1.5rem;
    }

    .login-body[b-q7rqyj6nex] {
        padding: 1.5rem 1.5rem 1.2rem;
    }

    .login-title[b-q7rqyj6nex] {
        font-size: 1.2rem;
    }

    .helper-links[b-q7rqyj6nex] {
        flex-direction: column;
        gap: 10px;
    }

    .link-separator[b-q7rqyj6nex] {
        display: none;
    }

    .tab-btn[b-q7rqyj6nex] {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .text-input[b-q7rqyj6nex] {
        padding: 14px 16px;
        height: 52px;
        font-size: 0.95rem;
    }

    .login-btn[b-q7rqyj6nex] {
        padding: 14px 24px;
        min-height: 50px;
        font-size: 1rem;
    }

    .wechat-mock-container[b-q7rqyj6nex], .wechat-real-container[b-q7rqyj6nex] {
        padding: 1.5rem;
    }

    .qr-code-wrapper[b-q7rqyj6nex] {
        padding: 1.5rem;
        max-width: 200px;
    }

    .mock-form[b-q7rqyj6nex] {
        padding: 1.2rem;
    }
}

/* 紧凑模式额外调整 */
.compact-mode .login-body[b-q7rqyj6nex] {
    padding: 1.5rem 1.8rem 1.2rem;
}

.compact-mode .input-group[b-q7rqyj6nex] {
    gap: 6px;
}

.compact-mode .login-form[b-q7rqyj6nex] {
    gap: 1.2rem;
}

.compact-mode .login-tabs[b-q7rqyj6nex] {
    margin-bottom: 1.2rem;
}

.compact-mode .helper-links[b-q7rqyj6nex] {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
}
/* _content/LEAFBlazorApp25/Components/Account/Pages/Register.razor.rz.scp.css */
/* =============================================
   LEAF系统注册组件样式表 - 代码隔离类
   文件名：Register.razor.css
   ============================================= */

/* ===== 基础样式重置 ===== */
*[b-mur5kh8fpw] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 主容器样式 ===== */
.register-container[b-mur5kh8fpw] {
    min-height: 100%;
    display: flex;
    align-items: flex-start; /* 修改这一行  center;*/
    justify-content: center;
    padding: 10px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #333;
    line-height: 1.4;
    position: relative;
    overflow: auto;
    background: linear-gradient(135deg, #f0f9f0 0%, #e0f2e1 100%);
}

/* 科技感背景 */
.tech-background[b-mur5kh8fpw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.tech-grid[b-mur5kh8fpw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(76, 175, 80, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 175, 80, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.4;
}

.tech-orbit[b-mur5kh8fpw] {
    position: absolute;
    border: 1px solid rgba(76, 175, 80, 0.15);
    border-radius: 50%;
    animation: orbit-rotate-b-mur5kh8fpw 20s linear infinite;
}

.orbit-1[b-mur5kh8fpw] {
    width: min(300px, 80vw);
    height: min(300px, 80vw);
    top: -150px;
    right: -150px;
}

.orbit-2[b-mur5kh8fpw] {
    width: min(200px, 60vw);
    height: min(200px, 60vw);
    bottom: -100px;
    left: -100px;
    animation-delay: -10s;
}

@keyframes orbit-rotate-b-mur5kh8fpw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 注册内容区域 */
.register-content[b-mur5kh8fpw] {
    width: 100%;
    max-width: min(500px, 95vw);
    position: relative;
    z-index: 2;
    margin: 15px 0;
}

/* ===== 注册卡片设计 ===== */
.register-card[b-mur5kh8fpw] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid rgba(76, 175, 80, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .register-card:hover[b-mur5kh8fpw] {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(76, 175, 80, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* 卡片头部 */
.card-header[b-mur5kh8fpw] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 15px 30px;
    color: white;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .card-header[b-mur5kh8fpw]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
    }

.header-content[b-mur5kh8fpw] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon-circle[b-mur5kh8fpw] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
}

    .header-icon-circle i[b-mur5kh8fpw] {
        font-size: 1.6rem;
        color: white;
    }

.header-text h2[b-mur5kh8fpw] {
    margin: 0 0 5px 0;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.header-text p[b-mur5kh8fpw] {
    margin: 0;
    font-size: clamp(0.85rem, 3vw, 1rem);
    opacity: 0.95;
    line-height: 1.2;
    font-weight: 500;
}

/* 卡片主体 */
.card-body[b-mur5kh8fpw] {
    padding: 30px;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}

/* ===== 成功注册容器 ===== */
.success-container[b-mur5kh8fpw] {
    text-align: center;
    padding: 20px 0;
}

.success-icon[b-mur5kh8fpw] {
    font-size: 4rem;
    color: #4caf50;
    margin-bottom: 15px;
    animation: success-pulse-b-mur5kh8fpw 1.5s ease-in-out;
}

@keyframes success-pulse-b-mur5kh8fpw {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.success-content[b-mur5kh8fpw] {
    margin-bottom: 25px;
}

    .success-content h4[b-mur5kh8fpw] {
        font-size: 1.8rem;
        color: #2e7d32;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .success-content p[b-mur5kh8fpw] {
        font-size: 1.1rem;
        color: #666;
        margin-bottom: 5px;
    }

.success-subtext[b-mur5kh8fpw] {
    font-size: 0.95rem !important;
    color: #888 !important;
    margin-bottom: 15px !important;
}

.success-tip[b-mur5kh8fpw] {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 10px;
    padding: 12px 15px;
    margin: 20px 0;
    color: #2e7d32;
    font-size: 0.9rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .success-tip i[b-mur5kh8fpw] {
        color: #4caf50;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

.success-actions[b-mur5kh8fpw] {
    margin-top: 25px;
}

.btn-success[b-mur5kh8fpw] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    text-decoration: none;
}

    .btn-success:hover[b-mur5kh8fpw] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        text-decoration: none;
    }

/* ===== 加载覆盖层 ===== */
.loading-overlay[b-mur5kh8fpw] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.tech-spinner[b-mur5kh8fpw] {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.spinner-core[b-mur5kh8fpw] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: core-pulse-b-mur5kh8fpw 2s ease-in-out infinite;
}

.spinner-orbits .orbit[b-mur5kh8fpw] {
    position: absolute;
    border: 2px solid transparent;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: orbit-spin-b-mur5kh8fpw 1.5s linear infinite;
}

    .spinner-orbits .orbit:nth-child(1)[b-mur5kh8fpw] {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .spinner-orbits .orbit:nth-child(2)[b-mur5kh8fpw] {
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
        animation-delay: -0.5s;
    }

    .spinner-orbits .orbit:nth-child(3)[b-mur5kh8fpw] {
        top: 16px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        animation-delay: -1s;
    }

@keyframes core-pulse-b-mur5kh8fpw {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes orbit-spin-b-mur5kh8fpw {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-mur5kh8fpw] {
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===== 消息提示样式 ===== */
.message-alert[b-mur5kh8fpw] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    animation: alert-slide-b-mur5kh8fpw 0.3s ease-out;
    border: 1px solid;
    line-height: 1.4;
    gap: 12px;
}

.alert-success[b-mur5kh8fpw] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    color: #065f46;
}

.alert-error[b-mur5kh8fpw] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #7f1d1d;
}

.alert-icon[b-mur5kh8fpw] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.alert-content[b-mur5kh8fpw] {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-close[b-mur5kh8fpw] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

    .alert-close:hover[b-mur5kh8fpw] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.05);
    }

@keyframes alert-slide-b-mur5kh8fpw {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 注册表单样式 ===== */
.register-form[b-mur5kh8fpw] {
    width: 100%;
}

.form-group[b-mur5kh8fpw] {
    margin-bottom: 18px;
}

.input-container[b-mur5kh8fpw] {
    position: relative;
    width: 100%;
}

.input-icon[b-mur5kh8fpw] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
}

/* 输入框样式 - 重点优化 */
.form-input[b-mur5kh8fpw] {
    width: 100% !important;
    padding: 12px 16px 12px 40px !important;
    border: 2px solid #c8e6c9 !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: #f9f9f9 !important;
    color: #333 !important;
    font-family: inherit !important;
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

    .form-input[b-mur5kh8fpw]::placeholder {
        color: #9ca3af;
        font-weight: 500;
    }

    .form-input:focus[b-mur5kh8fpw] {
        outline: none !important;
        border-color: #4caf50 !important;
        background: white !important;
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15), 0 2px 6px rgba(76, 175, 80, 0.1) !important;
        transform: translateY(-1px);
    }

    .form-input:hover:not(:focus)[b-mur5kh8fpw] {
        border-color: #81c784 !important;
        background: #f5f9f5 !important;
    }

/* 验证消息样式 */
.validation-message[b-mur5kh8fpw] {
    display: block;
    color: #f44336;
    font-size: 0.85rem;
    margin-top: 6px;
    font-weight: 500;
    padding-left: 5px;
    line-height: 1.2;
}

.validation-summary[b-mur5kh8fpw] {
    color: #f44336;
    background: rgba(239, 68, 68, 0.05);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(239, 68, 68, 0.1);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

/* 表单提示样式 */
.form-tip[b-mur5kh8fpw] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.85rem;
    margin-top: 6px;
    padding-left: 5px;
    line-height: 1.3;
}

    .form-tip i[b-mur5kh8fpw] {
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .form-tip.warning[b-mur5kh8fpw] {
        color: #f59e0b;
    }

        .form-tip.warning i[b-mur5kh8fpw] {
            color: #f59e0b;
        }

/* ===== 表单操作按钮 ===== */
.form-actions[b-mur5kh8fpw] {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 3px solid #e8f5e9;
}

.btn[b-mur5kh8fpw] {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 150px;
    height: 44px;
    letter-spacing: 0.5px;
}

    .btn:hover:not(:disabled)[b-mur5kh8fpw] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .btn:active:not(:disabled)[b-mur5kh8fpw] {
        transform: translateY(0);
    }

    .btn:disabled[b-mur5kh8fpw] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.btn-register[b-mur5kh8fpw] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.25);
}

    .btn-register:hover:not(:disabled)[b-mur5kh8fpw] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        box-shadow: 0 6px 18px rgba(76, 175, 80, 0.35);
    }

    .btn-register.loading[b-mur5kh8fpw] {
        opacity: 0.9;
        cursor: wait;
    }

    .btn-register .spinner-border[b-mur5kh8fpw] {
        width: 1rem;
        height: 1rem;
        border-width: 0.2em;
        margin-right: 8px;
    }

/* ===== 辅助链接样式 ===== */
.register-links[b-mur5kh8fpw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 3px solid #f0f0f0;
    flex-wrap: wrap;
}

.link-button[b-mur5kh8fpw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    max-width: calc(50% - 5px);
}

    .link-button:hover[b-mur5kh8fpw] {
        color: #4caf50;
        background: rgba(76, 175, 80, 0.05);
        border-color: #4caf50;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .link-button i[b-mur5kh8fpw] {
        font-size: 0.85rem;
    }

/* ===== 强制样式覆盖 ===== */
[b-mur5kh8fpw] .form-input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 46px !important;
    min-height: 46px !important;
    line-height: 1.4 !important;
}

[b-mur5kh8fpw] .validation-message {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
}

/* ===== 响应式设计 ===== */

/* 平板设备 */
@media (max-width: 768px) {
    .register-container[b-mur5kh8fpw] {
        padding: 16px;
    }

    .register-content[b-mur5kh8fpw] {
        max-width: 95vw;
        margin: 10px 0;
    }

    .card-header[b-mur5kh8fpw] {
        padding: 16px 20px;
    }

    .card-body[b-mur5kh8fpw] {
        padding: 24px;
        max-height: 65vh;
    }

    .header-icon-circle[b-mur5kh8fpw] {
        width: 45px;
        height: 45px;
    }

        .header-icon-circle i[b-mur5kh8fpw] {
            font-size: 1.3rem;
        }

    .header-text h2[b-mur5kh8fpw] {
        font-size: 1.3rem;
        margin-bottom: 4px;
    }

    .header-text p[b-mur5kh8fpw] {
        font-size: 0.95rem;
    }

    .success-icon[b-mur5kh8fpw] {
        font-size: 3rem;
    }

    .success-content h4[b-mur5kh8fpw] {
        font-size: 1.5rem;
    }

    .success-content p[b-mur5kh8fpw] {
        font-size: 1rem;
    }

    .form-input[b-mur5kh8fpw] {
        height: 44px !important;
        padding: 11px 14px 11px 36px !important;
        font-size: 0.95rem !important;
    }

    .input-icon[b-mur5kh8fpw] {
        left: 12px;
        font-size: 0.9rem;
    }

    .btn[b-mur5kh8fpw] {
        height: 44px;
        padding: 11px 24px;
        font-size: 1rem;
        min-width: 140px;
    }

    .form-group[b-mur5kh8fpw] {
        margin-bottom: 16px;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .register-container[b-mur5kh8fpw] {
        padding: 12px;
    }

    .register-content[b-mur5kh8fpw] {
        max-width: 100vw;
        margin: 5px 0;
    }

    .card-header[b-mur5kh8fpw] {
        padding: 14px 16px;
    }

    .card-body[b-mur5kh8fpw] {
        padding: 20px;
        max-height: 70vh;
    }

    .header-content[b-mur5kh8fpw] {
        gap: 12px;
    }

    .header-icon-circle[b-mur5kh8fpw] {
        width: 40px;
        height: 40px;
    }

        .header-icon-circle i[b-mur5kh8fpw] {
            font-size: 1.1rem;
        }

    .header-text h2[b-mur5kh8fpw] {
        font-size: 1.2rem;
        margin-bottom: 3px;
    }

    .header-text p[b-mur5kh8fpw] {
        font-size: 0.9rem;
    }

    .form-input[b-mur5kh8fpw] {
        height: 42px !important;
        padding: 10px 12px 10px 34px !important;
        font-size: 0.9rem !important;
    }

    .input-icon[b-mur5kh8fpw] {
        left: 10px;
        font-size: 0.85rem;
    }

    .form-group[b-mur5kh8fpw] {
        margin-bottom: 14px;
    }

    .btn[b-mur5kh8fpw] {
        height: 42px;
        padding: 10px 20px;
        font-size: 0.95rem;
        min-width: 130px;
    }

    .register-links[b-mur5kh8fpw] {
        flex-direction: column;
        gap: 10px;
    }

    .link-button[b-mur5kh8fpw] {
        max-width: 100%;
        width: 100%;
    }
}

/* 超小屏幕处理 */
@media (max-width: 360px) {
    .card-header[b-mur5kh8fpw] {
        padding: 12px 14px;
    }

    .card-body[b-mur5kh8fpw] {
        padding: 16px;
    }

    .header-icon-circle[b-mur5kh8fpw] {
        width: 35px;
        height: 35px;
    }

    .header-text h2[b-mur5kh8fpw] {
        font-size: 1.1rem;
    }

    .form-input[b-mur5kh8fpw] {
        height: 40px !important;
        padding: 9px 10px 9px 32px !important;
    }

    .btn[b-mur5kh8fpw] {
        height: 40px;
        padding: 9px 16px;
        min-width: 120px;
    }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
    .form-input[b-mur5kh8fpw] {
        border-width: 2px !important;
    }

    .link-button[b-mur5kh8fpw] {
        border-width: 2px;
    }

    .btn[b-mur5kh8fpw] {
        border: 2px solid currentColor;
    }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
    *[b-mur5kh8fpw] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn:hover:not(:disabled)[b-mur5kh8fpw],
    .link-button:hover[b-mur5kh8fpw] {
        transform: none;
    }

    .form-input:focus[b-mur5kh8fpw] {
        transform: none;
    }
}
/* _content/LEAFBlazorApp25/Components/AIWork/AIPages/AIWorkProgsAnl.razor.rz.scp.css */
/* Components/AIWork/AIPages/AIWorkProgsAnl.razor.css */

/* ========== AI工作任务管理主容器样式 ========== */
.aiworkprog-management-container[b-i0ozngussp] {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0px 0px 15px 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow: hidden;
}

/* ========== 标题和功能区样式 ========== */
.management-header[b-i0ozngussp] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.header-main[b-i0ozngussp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-section[b-i0ozngussp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-i0ozngussp] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-i0ozngussp] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.task-count-badge[b-i0ozngussp] {
    background: #3b82f6;
    color: white;
    padding: 5px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.action-section[b-i0ozngussp] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

.search-box[b-i0ozngussp] {
    min-width: 200px;
}

    .search-box .input-group[b-i0ozngussp] {
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        overflow: hidden;
    }

.input-icon[b-i0ozngussp] {
    padding: 6px 8px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    color: #64748b;
}

.search-input[b-i0ozngussp] {
    border: none;
    padding: 6px 8px;
    flex-grow: 1;
    font-size: 0.9rem;
    background: transparent;
    outline: none;
}

    .search-input[b-i0ozngussp]::placeholder {
        color: #94a3b8;
    }

.filter-box[b-i0ozngussp] {
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .filter-box .input-group[b-i0ozngussp] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.filter-select[b-i0ozngussp] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 140px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.btn-filter[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: white;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 110px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-filter:hover[b-i0ozngussp] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-clear-filter[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6b7280;
    color: white;
    border: 1px solid #6b7280;
    border-radius: 6px;
    padding: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
}

    .btn-clear-filter:hover[b-i0ozngussp] {
        background: #4b5563;
        border-color: #4b5563;
    }

.sort-box[b-i0ozngussp] {
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .sort-box .input-group[b-i0ozngussp] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.sort-select[b-i0ozngussp] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 140px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.sort-order[b-i0ozngussp] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    width: 90px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .sort-select:focus[b-i0ozngussp],
    .sort-order:focus[b-i0ozngussp],
    .filter-select:focus[b-i0ozngussp] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.btn-sort[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 100px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-sort:hover[b-i0ozngussp] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

.action-buttons[b-i0ozngussp] {
    display: flex;
    gap: 8px;
}

.btn[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-i0ozngussp] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.btn-refresh[b-i0ozngussp] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-i0ozngussp] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

/* ========== 表格容器样式 ========== */
.table-container[b-i0ozngussp] {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-scroll-wrapper[b-i0ozngussp] {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: auto;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .table-scroll-wrapper[b-i0ozngussp]::-webkit-scrollbar {
        height: 20px;
    }

/* ========== 表格样式 ========== */
.aiworkprog-table[b-i0ozngussp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem !important;
    min-width: 1800px;
    table-layout: auto;
}

.table-header[b-i0ozngussp] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-i0ozngussp] {
        padding: 10px 8px;
        text-align: left;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        text-align: center;
        font-size: 0.9rem !important;
    }

/* 列宽定义 */
.col-id[b-i0ozngussp] {
    width: 4%;
    min-width: 60px;
}

.col-workid[b-i0ozngussp] {
    width: 8%;
    min-width: 120px;
}

.col-userid[b-i0ozngussp] {
    width: 6%;
    min-width: 100px;
}

.col-email[b-i0ozngussp] {
    width: 8%;
    min-width: 150px;
}

.col-worktype[b-i0ozngussp] {
    width: 6%;
    min-width: 100px;
}

.col-workname[b-i0ozngussp] {
    width: 7%;
    min-width: 120px;
}

.col-doctype[b-i0ozngussp] {
    width: 5%;
    min-width: 80px;
}

.col-price[b-i0ozngussp] {
    width: 5%;
    min-width: 80px;
}

.col-filename[b-i0ozngussp] {
    width: 8%;
    min-width: 150px;
}

.col-filesize[b-i0ozngussp] {
    width: 5%;
    min-width: 80px;
}

.col-status[b-i0ozngussp] {
    width: 6%;
    min-width: 100px;
}

.col-created[b-i0ozngussp] {
    width: 7%;
    min-width: 120px;
}

.col-processed[b-i0ozngussp] {
    width: 7%;
    min-width: 120px;
}

.col-completed[b-i0ozngussp] {
    width: 7%;
    min-width: 120px;
}

.col-priority[b-i0ozngussp] {
    width: 4%;
    min-width: 60px;
}

.col-downloadcount[b-i0ozngussp] {
    width: 4%;
    min-width: 60px;
}

.col-emailsent[b-i0ozngussp] {
    width: 5%;
    min-width: 80px;
}

.col-actions[b-i0ozngussp] {
    width: 10%;
    min-width: 150px;
}

.table-body[b-i0ozngussp] {
    background: white;
}

.table-row[b-i0ozngussp] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-i0ozngussp] {
        background: #f8fafc;
    }

    .table-row td[b-i0ozngussp] {
        padding: 8px 8px;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9rem !important;
    }

/* ========== 状态选择框样式 ========== */
.status-select[b-i0ozngussp] {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 100px;
    transition: all 0.2s;
}

    .status-select.status-pending[b-i0ozngussp] {
        background-color: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }

    .status-select.status-processing[b-i0ozngussp] {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
    }

    .status-select.status-completed[b-i0ozngussp] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .status-select.status-failed[b-i0ozngussp] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    .status-select:hover[b-i0ozngussp] {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* ========== 单元格样式 ========== */
.id-text[b-i0ozngussp] {
    font-weight: 600;
    color: #0d6efd;
}

.workid-text[b-i0ozngussp] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
}

.price-text[b-i0ozngussp] {
    font-weight: 600;
    color: #198754;
}

.time-text[b-i0ozngussp] {
    color: #6c757d;
}

/* ========== 徽章样式 ========== */
.badge[b-i0ozngussp] {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
}

    .badge.bg-info[b-i0ozngussp] {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    }

    .badge.bg-secondary[b-i0ozngussp] {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    }

    .badge.bg-danger[b-i0ozngussp] {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    }

    .badge.bg-warning[b-i0ozngussp] {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    }

    .badge.bg-success[b-i0ozngussp] {
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    }

/* ========== 操作按钮样式 ========== */
.action-buttons-group[b-i0ozngussp] {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
}

.btn-action[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    height: 26px;
}

    .btn-action:focus[b-i0ozngussp] {
        outline: 2px solid rgba(59, 130, 246, 0.2);
        outline-offset: 1px;
    }

.btn-view[b-i0ozngussp] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

    .btn-view:hover[b-i0ozngussp] {
        background: #bfdbfe;
        border-color: #60a5fa;
    }

.btn-delete[b-i0ozngussp] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

    .btn-delete:hover[b-i0ozngussp] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

.btn-archive[b-i0ozngussp] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

    .btn-archive:hover[b-i0ozngussp] {
        background: #e0f2fe;
        border-color: #7dd3fc;
    }

    .btn-archive:disabled[b-i0ozngussp] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== 空状态样式 ========== */
.empty-row[b-i0ozngussp] {
    border-bottom: none;
}

.empty-state[b-i0ozngussp] {
    padding: 0;
}

.empty-content[b-i0ozngussp] {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-i0ozngussp] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-content h3[b-i0ozngussp] {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-i0ozngussp] {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

/* ========== 分页样式 ========== */
.pagination-container[b-i0ozngussp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    gap: 15px;
    flex-wrap: wrap;
}

.pagination-info[b-i0ozngussp] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.page-size-selector[b-i0ozngussp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    .page-size-selector label[b-i0ozngussp] {
        font-size: 0.9rem;
        color: #64748b;
        font-weight: 500;
        white-space: nowrap;
    }

    .page-size-selector select[b-i0ozngussp] {
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 0.9rem;
        color: #374151;
        background-color: white;
        cursor: pointer;
        transition: border-color 0.2s;
        min-width: 80px;
        height: 32px;
    }

        .page-size-selector select:focus[b-i0ozngussp] {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }

.pagination-controls[b-i0ozngussp] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.page-info[b-i0ozngussp] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    background: white;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    white-space: nowrap;
}

.btn-pagination[b-i0ozngussp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-pagination:hover:not(:disabled)[b-i0ozngussp] {
        background: #f3f4f6;
        border-color: #9ca3af;
    }

    .btn-pagination:disabled[b-i0ozngussp] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ========== 模态框样式 ========== */
.modal-backdrop[b-i0ozngussp] {
    opacity: 0.5;
    background: #000;
}

.modal-content[b-i0ozngussp] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.modal-header[b-i0ozngussp] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
}

.modal-title[b-i0ozngussp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.modal-body[b-i0ozngussp] {
    padding: 16px;
}

.modal-footer[b-i0ozngussp] {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
}

/* ========== 详情网格样式 ========== */
.detail-grid[b-i0ozngussp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
}

.detail-item[b-i0ozngussp] {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

    .detail-item.full-width[b-i0ozngussp] {
        grid-column: 1 / -1;
    }

    .detail-item label[b-i0ozngussp] {
        font-weight: 600;
        color: #495057;
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .detail-item span[b-i0ozngussp] {
        color: #212529;
        font-size: 0.9rem;
        word-break: break-all;
    }

.error-message[b-i0ozngussp] {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px;
    color: #721c24;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ========== 动画效果 ========== */
@keyframes fadeIn-b-i0ozngussp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aiworkprog-management-container[b-i0ozngussp] {
    animation: fadeIn-b-i0ozngussp 0.3s ease-out;
}

.table-row[b-i0ozngussp] {
    animation: fadeIn-b-i0ozngussp 0.2s ease-out;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1400px) {
    .detail-grid[b-i0ozngussp] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 1200px) {
    .detail-grid[b-i0ozngussp] {
        grid-template-columns: 1fr 1fr;
    }

    .pagination-container[b-i0ozngussp] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
}

@media (max-width: 992px) {
    .aiworkprog-management-container[b-i0ozngussp] {
        padding: 4px 8px;
    }

    .management-header[b-i0ozngussp] {
        padding: 6px 12px;
        position: relative;
    }

    .header-main[b-i0ozngussp] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .detail-grid[b-i0ozngussp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .aiworkprog-table[b-i0ozngussp] {
        font-size: 0.8rem !important;
    }

    .status-select[b-i0ozngussp] {
        font-size: 0.8rem;
        min-width: 80px;
        padding: 3px 6px;
    }

    .btn-action span[b-i0ozngussp] {
        display: none;
    }

    .action-section[b-i0ozngussp] {
        flex-direction: column;
        gap: 8px;
    }

    .search-box[b-i0ozngussp],
    .filter-box[b-i0ozngussp],
    .sort-box[b-i0ozngussp] {
        width: 100%;
    }
}

/* 滚动条美化 */
.table-scroll-wrapper[b-i0ozngussp]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll-wrapper[b-i0ozngussp]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-scroll-wrapper[b-i0ozngussp]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

    .table-scroll-wrapper[b-i0ozngussp]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* _content/LEAFBlazorApp25/Components/AIWork/AIPages/AIWorkRecordAnl.razor.rz.scp.css */
/* Components/AIWork/AIPages/AIWorkRecordAnl.razor.css */

/* ========== AI工作记录统计主容器样式 ========== */
.statistics-container[b-8fwqsn7ky8] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0px 12px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .statistics-container[b-8fwqsn7ky8]::-webkit-scrollbar {
        width: 8px;
    }

    .statistics-container[b-8fwqsn7ky8]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .statistics-container[b-8fwqsn7ky8]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
        border: 2px solid #f1f5f9;
    }

        .statistics-container[b-8fwqsn7ky8]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ========== 标题和功能区样式 ========== */
.management-header[b-8fwqsn7ky8] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.header-main[b-8fwqsn7ky8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.title-section[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-8fwqsn7ky8] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-8fwqsn7ky8] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.action-section[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

/* ========== 日期筛选区域样式 ========== */
.filter-box.date-filter[b-8fwqsn7ky8] {
    min-width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.date-inputs[b-8fwqsn7ky8] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-group[b-8fwqsn7ky8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.date-label[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.date-icon[b-8fwqsn7ky8] {
    color: #3b82f6;
    font-size: 0.9rem;
}

.date-input[b-8fwqsn7ky8] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 32px;
    min-width: 130px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .date-input:focus[b-8fwqsn7ky8] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* ========== 过滤网格区域样式 ========== */
.filter-box[b-8fwqsn7ky8] {
    min-width: 580px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-grid[b-8fwqsn7ky8] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: end;
}

.filter-item[b-8fwqsn7ky8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

    .filter-label i[b-8fwqsn7ky8] {
        color: #3b82f6;
        font-size: 0.85rem;
    }

.filter-select[b-8fwqsn7ky8] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    background: white;
    outline: none;
    height: 32px;
    width: 100%;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .filter-select:focus[b-8fwqsn7ky8] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.filter-input[b-8fwqsn7ky8] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    background: white;
    outline: none;
    height: 32px;
    width: 100%;
    transition: border-color 0.2s;
}

    .filter-input:focus[b-8fwqsn7ky8] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* 生成按钮在过滤器网格中的样式 */
.filter-item:last-child[b-8fwqsn7ky8] {
    display: flex;
    align-items: flex-end;
}

.btn-generate[b-8fwqsn7ky8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: white;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 32px;
    white-space: nowrap;
    text-decoration: none;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-generate:hover:not(:disabled)[b-8fwqsn7ky8] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

    .btn-generate:disabled[b-8fwqsn7ky8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* ========== 操作按钮组 ========== */
.action-buttons[b-8fwqsn7ky8] {
    display: flex;
    gap: 8px;
}

.btn[b-8fwqsn7ky8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-8fwqsn7ky8] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

.btn-export[b-8fwqsn7ky8] {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

    .btn-export:hover:not(:disabled)[b-8fwqsn7ky8] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

    .btn-export:disabled[b-8fwqsn7ky8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-refresh[b-8fwqsn7ky8] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-8fwqsn7ky8] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-primary[b-8fwqsn7ky8] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-8fwqsn7ky8] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

.btn-export-sm[b-8fwqsn7ky8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #8b5cf6;
    border: 1px solid #8b5cf6;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    height: 32px;
    white-space: nowrap;
}

    .btn-export-sm:hover[b-8fwqsn7ky8] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

/* ========== 主要内容区域样式 ========== */
.content-area[b-8fwqsn7ky8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* ========== 加载状态样式 ========== */
.loading-overlay[b-8fwqsn7ky8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner-container[b-8fwqsn7ky8] {
    text-align: center;
}

    .spinner-container p[b-8fwqsn7ky8] {
        margin-top: 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* ========== 统计卡片区域样式 ========== */
.stats-cards-section[b-8fwqsn7ky8] {
    margin: 5px 0 8px 0;
    width: 100%;
}

.stats-grid[b-8fwqsn7ky8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 600px;
}

.stat-card[b-8fwqsn7ky8] {
    background: white;
    padding: 5px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    min-width: 0;
    overflow: hidden;
}

    .stat-card:hover[b-8fwqsn7ky8] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

.stat-icon[b-8fwqsn7ky8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.total-records .stat-icon[b-8fwqsn7ky8] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.total-amount .stat-icon[b-8fwqsn7ky8] {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.unique-types .stat-icon[b-8fwqsn7ky8] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.with-email .stat-icon[b-8fwqsn7ky8] {
    background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
}

.stat-content[b-8fwqsn7ky8] {
    flex: 1;
    min-width: 0;
}

.stat-value[b-8fwqsn7ky8] {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label[b-8fwqsn7ky8] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== 图表区域样式 ========== */
.chart-section[b-8fwqsn7ky8] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
}

.chart-container[b-8fwqsn7ky8] {
    height: 320px;
    padding: 8px 16px 16px 16px;
    position: relative;
}

/* ========== 数据表格区域样式 ========== */
.data-section[b-8fwqsn7ky8] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.section-header[b-8fwqsn7ky8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title[b-8fwqsn7ky8] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.date-range-info[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
}

.date-range-text[b-8fwqsn7ky8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    background: #e2e8f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .date-range-text i[b-8fwqsn7ky8] {
        color: #3b82f6;
        font-size: 0.9rem;
    }

.stat-meta[b-8fwqsn7ky8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-meta-item[b-8fwqsn7ky8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 16px;
}

    .stat-meta-item i[b-8fwqsn7ky8] {
        color: #8b5cf6;
        font-size: 0.8rem;
    }

/* 表格容器 */
.table-container[b-8fwqsn7ky8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-scroll-wrapper[b-8fwqsn7ky8] {
    flex: 1;
    overflow: auto;
}

/* 表格基础样式 */
.data-table[b-8fwqsn7ky8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

/* 表头样式 */
.table-header[b-8fwqsn7ky8] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-8fwqsn7ky8] {
        padding: 12px 16px;
        text-align: center;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    }

/* 表尾样式 */
.table-footer[b-8fwqsn7ky8] {
    background: #f8fafc;
    border-top: 2px solid #e2e8f0;
}

    .table-footer td[b-8fwqsn7ky8] {
        padding: 12px 16px;
        font-weight: 600;
        color: #1e293b;
        border-top: 2px solid #e2e8f0;
    }

/* 列宽设置 */
.col-period[b-8fwqsn7ky8] {
    min-width: 120px;
    width: 20%;
}

.col-worktype[b-8fwqsn7ky8] {
    min-width: 150px;
    width: 25%;
}

.col-count[b-8fwqsn7ky8] {
    min-width: 100px;
    width: 15%;
}

.col-amount[b-8fwqsn7ky8] {
    min-width: 120px;
    width: 20%;
}

.col-avg[b-8fwqsn7ky8] {
    min-width: 120px;
    width: 20%;
}

/* 表格行样式 */
.table-body[b-8fwqsn7ky8] {
    background: white;
}

.table-row[b-8fwqsn7ky8] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-8fwqsn7ky8] {
        background: #f8fafc;
    }

    .table-row td[b-8fwqsn7ky8] {
        padding: 10px 16px;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8rem;
    }

/* 数字列样式 */
.number[b-8fwqsn7ky8] {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ========== 空状态样式 ========== */
.empty-state[b-8fwqsn7ky8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.empty-content[b-8fwqsn7ky8] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.empty-icon[b-8fwqsn7ky8] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.empty-content h3[b-8fwqsn7ky8] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-8fwqsn7ky8] {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

/* ========== 滚动条美化 ========== */
.table-scroll-wrapper[b-8fwqsn7ky8] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar {
        width: 12px;
        height: 14px;
    }

    .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 6px;
    }

    .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 6px;
        border: 2px solid #f1f5f9;
    }

        .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar-thumb:horizontal {
            background: #3b82f6;
        }

            .table-scroll-wrapper[b-8fwqsn7ky8]::-webkit-scrollbar-thumb:horizontal:hover {
                background: #2563eb;
            }

/* ========== 响应式设计 ========== */
@media (max-width: 1400px) {
    .action-section[b-8fwqsn7ky8] {
        gap: 8px;
    }

    .filter-box.date-filter[b-8fwqsn7ky8] {
        min-width: 300px;
    }

    .filter-box[b-8fwqsn7ky8] {
        min-width: 500px;
    }

    .filter-grid[b-8fwqsn7ky8] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .filter-grid[b-8fwqsn7ky8] {
        grid-template-columns: repeat(3, 1fr);
    }

    .filter-box[b-8fwqsn7ky8] {
        min-width: 450px;
    }
}

@media (max-width: 992px) {
    .statistics-container[b-8fwqsn7ky8] {
        padding: 4px 8px;
    }

    .management-header[b-8fwqsn7ky8] {
        padding: 6px 12px;
        position: relative;
    }

    .header-main[b-8fwqsn7ky8] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .title-section[b-8fwqsn7ky8] {
        justify-content: center;
    }

    .action-section[b-8fwqsn7ky8] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-8fwqsn7ky8] {
        width: 100%;
    }

    .date-inputs[b-8fwqsn7ky8] {
        flex-wrap: nowrap;
    }

    .filter-box[b-8fwqsn7ky8] {
        width: 100%;
        min-width: unset;
    }

    .filter-grid[b-8fwqsn7ky8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header[b-8fwqsn7ky8] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .date-range-info[b-8fwqsn7ky8] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-export-sm[b-8fwqsn7ky8] {
        align-self: flex-end;
    }
}

@media (max-width: 768px) {
    .statistics-container[b-8fwqsn7ky8] {
        padding: 2px 4px;
    }

    .management-header[b-8fwqsn7ky8] {
        padding: 4px 8px;
    }

    .action-section[b-8fwqsn7ky8] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-8fwqsn7ky8] {
        width: 100%;
        padding: 6px 8px;
    }

    .date-inputs[b-8fwqsn7ky8] {
        flex-direction: column;
        gap: 6px;
    }

    .date-group[b-8fwqsn7ky8] {
        width: 100%;
    }

    .date-input[b-8fwqsn7ky8] {
        width: 100%;
        min-width: unset;
    }

    .filter-box[b-8fwqsn7ky8] {
        width: 100%;
        padding: 6px 8px;
    }

    .filter-grid[b-8fwqsn7ky8] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .filter-item[b-8fwqsn7ky8] {
        width: 100%;
    }

    .action-buttons[b-8fwqsn7ky8] {
        width: 100%;
        justify-content: center;
    }

    .stats-grid[b-8fwqsn7ky8] {
        min-width: 450px;
        gap: 4px;
    }

    .stat-card[b-8fwqsn7ky8] {
        padding: 3px 6px;
        gap: 4px;
        height: 45px;
    }

    .section-title[b-8fwqsn7ky8] {
        font-size: 1.1rem;
    }

    .section-header[b-8fwqsn7ky8] {
        flex-direction: column;
        gap: 10px;
    }

    .date-range-info[b-8fwqsn7ky8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .filter-grid[b-8fwqsn7ky8] {
        gap: 6px;
    }

    .filter-select[b-8fwqsn7ky8] {
        font-size: 0.8rem;
        padding: 5px 8px;
    }

    .btn-generate[b-8fwqsn7ky8] {
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .section-title[b-8fwqsn7ky8] {
        font-size: 1rem;
    }

    .stats-grid[b-8fwqsn7ky8] {
        min-width: 300px;
        gap: 3px;
    }

    .stat-card[b-8fwqsn7ky8] {
        padding: 2px 4px;
        gap: 3px;
        height: 40px;
    }
}

/* 动画效果 */
@keyframes fadeIn-b-8fwqsn7ky8 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.statistics-container[b-8fwqsn7ky8] {
    animation: fadeIn-b-8fwqsn7ky8 0.3s ease-out;
}

.stat-card[b-8fwqsn7ky8] {
    animation: fadeIn-b-8fwqsn7ky8 0.2s ease-out;
}
/* _content/LEAFBlazorApp25/Components/AIWork/AIPages/LFAgent.razor.rz.scp.css */
/* ============================================================================
   LFAgent 组件专用样式 - 优化版本
   ============================================================================ */

/* 主容器和全局样式 */
.lfagent-container[b-a3de5fpxo4] {
    padding: 8px;
    height: 100% !important;
    width: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    gap: 8px;
}

/* ============================================================================
   通用标题样式
   ============================================================================ */

.section-title[b-a3de5fpxo4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.title-indicator[b-a3de5fpxo4] {
    width: 15px;
    height: 25px;
    border-radius: 3px;
    flex-shrink: 0;
}

.section-title h3[b-a3de5fpxo4] {
    color: #2d3748;
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 不同区域的柱子颜色 */
.work-options-section .title-indicator[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.work-area-section .title-indicator[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.description-section .title-indicator[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

/* ============================================================================
   工作选项区样式
   ============================================================================ */
.work-options-section[b-a3de5fpxo4] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 10px 10px 5px 10px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    margin: 0px 4px 1px 4px;
    flex-shrink: 0;
}

.section-header[b-a3de5fpxo4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 12px;
}

.column-controls[b-a3de5fpxo4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #718096;
    flex-shrink: 0;
    white-space: nowrap;
}

.column-select[b-a3de5fpxo4] {
    padding: 3px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-width: 60px;
}

    .column-select:focus[b-a3de5fpxo4] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
    }

/* 小屏幕时隐藏列数控件 */
@media (max-width: 768px) {
    .column-controls[b-a3de5fpxo4] {
        display: none !important;
    }
}

/* 工作选项网格布局 */
.work-options-grid[b-a3de5fpxo4] {
    display: grid;
    gap: 8px;
    transition: grid-template-columns 0.3s ease;
}

/* 工作选项卡片样式 */
.work-option-card[b-a3de5fpxo4] {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .work-option-card[b-a3de5fpxo4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .work-option-card.selected[b-a3de5fpxo4]::before {
        transform: scaleX(1);
    }

    .work-option-card:hover[b-a3de5fpxo4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e0;
    }

    .work-option-card.selected[b-a3de5fpxo4] {
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

/* 选项头部区域 */
.work-option-header[b-a3de5fpxo4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

    .work-option-header:hover[b-a3de5fpxo4] {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* 单选指示器样式 */
.radio-indicator[b-a3de5fpxo4] {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.radio-circle[b-a3de5fpxo4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #667eea;
    transform: scale(0);
    transition: transform 0.3s ease;
}

    .radio-circle.active[b-a3de5fpxo4] {
        transform: scale(1);
    }

.work-option-card.selected .radio-indicator[b-a3de5fpxo4] {
    border-color: #667eea;
}

/* 工作标题样式 */
.work-title[b-a3de5fpxo4] {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #2d3748;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 选项内容区域 */
.work-option-content[b-a3de5fpxo4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

/* 类型徽章样式 */
.work-type-badge[b-a3de5fpxo4] {
    padding: 4px 10px;
    border-radius: 12px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* 价格信息样式 */
.price-info[b-a3de5fpxo4] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.price[b-a3de5fpxo4] {
    font-size: 13px;
    font-weight: 500;
    color: #2d3748;
}

    .price.free[b-a3de5fpxo4] {
        color: #48bb78;
        font-weight: 600;
    }

.unit[b-a3de5fpxo4] {
    font-size: 11px;
    color: #718096;
}

/* ============================================================================
   工作区样式
   ============================================================================ */

/* 工作区容器 */
.work-area-section[b-a3de5fpxo4] {
    border: 3px solid #8B0000; /* 暗红色（标准深红 */
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    margin: 4px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 工作区标题行 */
.work-header-row[b-a3de5fpxo4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    min-height: 32px; /* 适中高度 */
}

    /* 标题区域固定宽度 */
    .work-header-row .section-title[b-a3de5fpxo4] {
        flex-shrink: 0;
        min-width: 120px;
        max-width: 200px;
    }

/* 状态信息容器占据剩余宽度 */
.state-info-container[b-a3de5fpxo4] {
    flex: 1;
    min-width: 100px;
    display: flex;
    align-items: center;
}

/* 【修改】状态信息样式 - 文本居中 */
.state-info[b-a3de5fpxo4] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center; /* 添加此行使文本居中 */
    gap: 8px;
    min-height: 32px; /* 适中高度 */
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center; /* 确保文本居中 */
}

/* ============================================================================
   按钮组样式 - 重要优化
   ============================================================================ */

/* 按钮组包装器 */
.button-group-wrapper[b-a3de5fpxo4] {
    width: 100%;
    position: relative;
    overflow: hidden; /* 隐藏溢出的阴影效果 */
}

/* 按钮组容器 - 确保小屏幕时按钮完全可见 */
.button-group-container[b-a3de5fpxo4] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 8px 0;
    scroll-padding: 0 20px; /* 确保滚动时按钮能完全显示 */
}

    /* 自定义滚动条样式 */
    .button-group-container[b-a3de5fpxo4]::-webkit-scrollbar {
        height: 6px;
    }

    .button-group-container[b-a3de5fpxo4]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
        margin: 0 10px;
    }

    .button-group-container[b-a3de5fpxo4]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

        .button-group-container[b-a3de5fpxo4]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

/* 按钮组 - 确保按钮有足够间距 */
.button-group[b-a3de5fpxo4] {
    display: flex;
    gap: 30px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 2px 20px; /* 增加左右内边距确保边缘按钮可见 */
}

/* 按钮基础样式 */
.btn[b-a3de5fpxo4] {
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px; /* 保持原字体大小 */
    min-height: 32px; /* 适中高度 */
    text-decoration: none;
    white-space: nowrap;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
    min-width: 120px;
    flex-shrink: 0;
    text-align: center; /* 确保文本居中 */
}

    .btn:disabled[b-a3de5fpxo4] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
        background: #a0aec0 !important;
        border-color: #a0aec0 !important;
    }

    .btn:hover:not(:disabled)[b-a3de5fpxo4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        filter: brightness(1.1);
    }

/* 按钮颜色变体 */
.btn-primary[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #333333 0%, #222222 50%, #111111 100%) !important;
    border-color: #000000 !important;
}

.btn-processing[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #2B579A 0%, #1B4D9A 50%, #0F3D8C 100%) !important;
    border-color: #0F3D8C !important;
}

.btn-success[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #F40F02 0%, #D5100A 50%, #B80E08 100%) !important;
    border-color: #B80E08 !important;
}

.btn-testing[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #D83B01 0%, #CA5010 50%, #B3470D 100%) !important;
    border-color: #B3470D !important;
}

.btn-complete[b-a3de5fpxo4] {
    background: linear-gradient(135deg, #D24726 0%, #BC3F1D 50%, #A53615 100%) !important;
    border-color: #A53615 !important;
}

/* ============================================================================
   说明区样式 - 优化标题行高
   ============================================================================ */

.description-section[b-a3de5fpxo4] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin: 4px;
    height: 0;
}

.description-content[b-a3de5fpxo4] {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧文字区 */
.description-text-container[b-a3de5fpxo4] {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 12px; /* 标题区和内容区的间距 */
}

/* 左上：标题区 - 优化行高 */
.left-title-area[b-a3de5fpxo4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0; /* 减少上下内边距 */
    min-height: 36px; /* 适中的最小高度 */
}

/* 说明区标题样式 */
.description-section .section-title[b-a3de5fpxo4] {
    margin-bottom: 0; /* 移除底部边距 */
}

.description-section .title-indicator[b-a3de5fpxo4] {
    height: 18px; /* 稍微降低高度 */
}

.description-section .section-title h3[b-a3de5fpxo4] {
    font-size: 15px;
    line-height: 1.2;
}

/* 查看大图按钮 */
.btn-view-large[b-a3de5fpxo4] {
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
    justify-content: center;
    height: 28px; /* 固定高度 */
    line-height: 1;
}

    .btn-view-large:hover[b-a3de5fpxo4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* 详细介绍区域 */
.description-text-scroll[b-a3de5fpxo4] {
    overflow-y: auto;
    padding-right: 10px;
    flex: 1;
    max-height: 100%;
    margin-top: 0; /* 移除顶部边距 */
}

    .description-text-scroll h4[b-a3de5fpxo4] {
        color: #2d3748;
        margin: 0 0 8px 0;
        font-weight: 700;
        font-size: 15px;
    }

    .description-text-scroll p[b-a3de5fpxo4] {
        line-height: 1.6;
        color: #4a5568;
        margin: 0 0 12px 0;
        font-size: 14px;
    }

/* 右侧图片区 */
.description-image-container[b-a3de5fpxo4] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7fafc;
    border-radius: 6px;
    overflow: hidden;
    min-height: 200px;
    max-height: 100%;
    border: 1px solid #e2e8f0;
}

.description-image[b-a3de5fpxo4] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* ============================================================================
   大图模态窗口样式
   ============================================================================ */

.modal-overlay[b-a3de5fpxo4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-a3de5fpxo4] {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
}

.modal-header[b-a3de5fpxo4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
}

    .modal-header h5[b-a3de5fpxo4] {
        margin: 0;
        color: #2d3748;
        font-size: 14px;
    }

.modal-controls[b-a3de5fpxo4] {
    display: flex;
    gap: 6px;
}

.modal-btn[b-a3de5fpxo4] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    background: transparent;
    color: #4a5568;
    font-size: 12px;
}

    .modal-btn:hover[b-a3de5fpxo4] {
        background: #e2e8f0;
    }

.modal-close:hover[b-a3de5fpxo4] {
    background: #e53e3e;
    color: white;
}

.modal-body[b-a3de5fpxo4] {
    flex: 1;
    padding: 12px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-image[b-a3de5fpxo4] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    transition: all 0.3s ease;
}

    .large-image.maximized[b-a3de5fpxo4] {
        max-width: 100vw;
        max-height: 100vh;
    }

/* ============================================================================
   响应式设计
   ============================================================================ */

@media (max-width: 1024px) {
    /* 中等屏幕调整 */
    .work-header-row[b-a3de5fpxo4] {
        gap: 8px;
    }

        .work-header-row .section-title[b-a3de5fpxo4] {
            min-width: 100px;
        }

    /* 【修改】移除按钮字体缩小设置，保持原字体大小 */
    .btn[b-a3de5fpxo4] {
        min-width: 110px;
        font-size: 13px; /* 保持原字体大小 */
        padding: 5px 10px;
    }
}

@media (max-width: 767px) {
    /* 平板和小屏幕调整 */
    .lfagent-container[b-a3de5fpxo4] {
        height: auto;
        min-height: 100vh;
        padding: 6px;
        gap: 6px;
    }

    .work-options-grid[b-a3de5fpxo4] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .work-header-row[b-a3de5fpxo4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-height: auto;
    }

        .work-header-row .section-title[b-a3de5fpxo4] {
            width: 100%;
            min-width: 0;
        }

    .state-info-container[b-a3de5fpxo4] {
        width: 100%;
    }

    /* 【修改】小屏幕时按钮组保持水平布局，不改变字体大小 */
    .button-group-container[b-a3de5fpxo4] {
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        justify-content: flex-start;
        padding: 8px 0;
    }

    .button-group[b-a3de5fpxo4] {
        flex-direction: row; /* 保持水平布局 */
        width: auto;
        padding: 0;
    }

    /* 【修改】按钮在小屏幕下保持原有字体大小，不缩小 */
    .btn[b-a3de5fpxo4] {
        width: auto;
        min-width: 110px;
        max-width: none;
        font-size: 13px; /* 保持原字体大小 */
        padding: 6px 10px;
        justify-content: center; /* 确保文本居中 */
    }

    .description-content[b-a3de5fpxo4] {
        flex-direction: column;
        height: auto;
    }

    .description-text-container[b-a3de5fpxo4] {
        flex: none;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .left-title-area[b-a3de5fpxo4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
    }

    .description-section .section-title[b-a3de5fpxo4] {
        width: 100%;
    }

    .btn-view-large[b-a3de5fpxo4] {
        align-self: flex-start;
    }

    .description-text-scroll[b-a3de5fpxo4] {
        margin-top: 0;
    }

    .description-image-container[b-a3de5fpxo4] {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-height: 200px;
        max-height: 250px;
        margin-top: 12px;
    }

    .title-indicator[b-a3de5fpxo4] {
        width: 5px;
        height: 16px;
    }

    .section-title h3[b-a3de5fpxo4] {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    /* 手机屏幕调整 */
    .work-options-grid[b-a3de5fpxo4] {
        grid-template-columns: 1fr !important;
    }

    .work-options-section[b-a3de5fpxo4],
    .work-area-section[b-a3de5fpxo4],
    .description-section[b-a3de5fpxo4] {
        padding: 10px;
        margin: 2px;
    }

    .state-info[b-a3de5fpxo4] {
        font-size: 12px;
        padding: 5px 10px;
    }

    .btn-view-large[b-a3de5fpxo4] {
        min-width: 80px;
        font-size: 12px;
        padding: 4px 8px;
        height: 26px;
    }
}

/* 状态信息颜色类 */
.state-default[b-a3de5fpxo4] {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #718096;
}

.state-info[b-a3de5fpxo4] {
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #3182ce;
}

.state-warning[b-a3de5fpxo4] {
    background: #fffaf0;
    border: 1px solid #fed7d7;
    color: #dd6b20;
}

.state-processing[b-a3de5fpxo4] {
    background: #f0fff4;
    border: 1px solid #c6f6d5;
    color: #38a169;
}

.state-success[b-a3de5fpxo4] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}
/* _content/LEAFBlazorApp25/Components/AIWork/AIPages/LFAgentProducts.razor.rz.scp.css */
/* ============================================================================
   Main container styles - Full parent container
   ============================================================================ */
.lfagent-manage-container[b-s4o31al8hx] {
    padding: 4px; /* 内边距：元素内容与边框之间的间距，4px表示上下左右相同 */
    height: 100% !important; /* 高度：继承父容器高度（原100vh是屏幕高度，会超出父容器） */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: hidden; /* 溢出处理：隐藏超出容器范围的内容 */
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
}
/* ============================================================================
   Edit controls section - Compact layout
   ============================================================================ */
/* 调整子元素间距 */
.edit-controls-section[b-s4o31al8hx] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 8px 8px 8px 8px; /*上右下左*/
    background: #f8f9fa;
    margin: 4px 4px 4px 4px; /* 调整外边距 */
    flex-shrink: 0;    /*表示不压缩，高度由内容决定*/
}

.controls-header[b-s4o31al8hx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .controls-header h3[b-s4o31al8hx] {
        color: #2d3748;
        margin: 0;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
    }

.control-buttons[b-s4o31al8hx] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   Data grid section - Compact layout
   ============================================================================ */
.data-grid-section[b-s4o31al8hx] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    margin: 0 4px 4px 4px; /* 调整外边距 */
    flex: 1; /* 关键：占据剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* ============================================================================
   Table container - Horizontal scrolling
   ============================================================================ */
.table-container[b-s4o31al8hx] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
}

.data-table[b-s4o31al8hx] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1400px;
}

    /* ============================================================================
   Table header styles - Compact design
   ============================================================================ */
    .data-table thead[b-s4o31al8hx] {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table th[b-s4o31al8hx] {
        color: white;
        font-weight: 600;
        border: none;
        padding: 6px 4px;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

/* ============================================================================
   Column width definitions - Optimized layout
   ============================================================================ */
.col-id[b-s4o31al8hx] {
    width: 40px;
    min-width: 40px;
}

.col-code[b-s4o31al8hx] {
    width: 100px;
    min-width: 100px;
}

.col-name[b-s4o31al8hx] {
    width: 120px;
    min-width: 120px;
}

.col-type[b-s4o31al8hx] {
    width: 70px;
    min-width: 70px;
}

.col-unit[b-s4o31al8hx] {
    width: 60px;
    min-width: 60px;
}

.col-price[b-s4o31al8hx] {
    width: 70px;
    min-width: 70px;
}

.col-total-price[b-s4o31al8hx] {
    width: 70px;
    min-width: 70px;
}

.col-count[b-s4o31al8hx] {
    width: 60px;
    min-width: 60px;
}

.col-order[b-s4o31al8hx] {
    width: 70px;
    min-width: 70px;
}

.col-status[b-s4o31al8hx] {
    width: 50px;
    min-width: 50px;
}

.col-remark[b-s4o31al8hx] {
    width: 150px;
    min-width: 150px;
}

.col-picture[b-s4o31al8hx] {
    width: 120px;
    min-width: 120px;
}

.col-actions[b-s4o31al8hx] {
    width: 100px;
    min-width: 100px;
}

/* ============================================================================
   Table data row styles - Compact design with small row spacing
   ============================================================================ */
.data-table td[b-s4o31al8hx] {
    padding: 3px 2px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 12px;
}

.data-table tbody tr[b-s4o31al8hx] {
    transition: background-color 0.2s ease;
    height: 40px;
}

    .data-table tbody tr:hover[b-s4o31al8hx] {
        background-color: #f7fafc;
    }

.readonly-cell[b-s4o31al8hx] {
    background-color: #f8f9fa;
    color: #718096;
    font-weight: 500;
}

/* ============================================================================
   Form control styles - Compact design
   ============================================================================ */
.form-input[b-s4o31al8hx] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 28px;
}

    .form-input:focus[b-s4o31al8hx] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.form-select[b-s4o31al8hx] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
    height: 28px;
}

    .form-select:focus[b-s4o31al8hx] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.number-input[b-s4o31al8hx] {
    text-align: right;
}

.form-textarea[b-s4o31al8hx] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    resize: vertical;
    min-height: 35px;
    box-sizing: border-box;
    font-family: inherit;
}

    .form-textarea:focus[b-s4o31al8hx] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

/* ============================================================================
   Picture cell styles - Small font and compact layout
   ============================================================================ */
.picture-cell[b-s4o31al8hx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picture-input[b-s4o31al8hx] {
    font-size: 10px !important;
    height: 24px;
    width: 100%;
}

.picture-buttons[b-s4o31al8hx] {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.btn-pic-upload[b-s4o31al8hx], .btn-pic-preview[b-s4o31al8hx] {
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 8px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

    .btn-pic-upload:hover[b-s4o31al8hx] {
        background: #e9ecef;
    }

.btn-pic-preview[b-s4o31al8hx] {
    background: #e3f2fd;
    border-color: #90caf9;
}

    .btn-pic-preview:hover[b-s4o31al8hx] {
        background: #bbdefb;
    }

/* ============================================================================
   Action buttons styles - Two rows layout
   ============================================================================ */
.action-buttons[b-s4o31al8hx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.btn-save[b-s4o31al8hx], .btn-delete[b-s4o31al8hx] {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    height: 20px;
    gap: 2px;
}

.btn-save[b-s4o31al8hx] {
    background: #bdc3c7;
    color: white;
}

.btn-save-modified[b-s4o31al8hx] {
    background: #3498db !important;
}

.btn-save:hover:not(:disabled)[b-s4o31al8hx] {
    background: #2980b9;
    transform: translateY(-1px);
}

.btn-save:disabled[b-s4o31al8hx] {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none !important;
}

.btn-delete[b-s4o31al8hx] {
    background: #e74c3c;
    color: white;
}

    .btn-delete:hover[b-s4o31al8hx] {
        background: #c0392b;
        transform: translateY(-1px);
    }

/* ============================================================================
   Checkbox styles
   ============================================================================ */
.checkbox-label[b-s4o31al8hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-input[b-s4o31al8hx] {
    display: none;
}

.checkmark[b-s4o31al8hx] {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-input:checked + .checkmark[b-s4o31al8hx] {
    background: #27ae60;
    border-color: #27ae60;
}

    .checkbox-input:checked + .checkmark[b-s4o31al8hx]::after {
        content: '✓';
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

/* ============================================================================
   Button styles
   ============================================================================ */
.btn[b-s4o31al8hx] {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    min-height: 28px;
    white-space: nowrap;
}

    .btn:hover[b-s4o31al8hx] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

.btn-success[b-s4o31al8hx] {
    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
    color: white;
}

.btn-secondary[b-s4o31al8hx] {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.btn:disabled[b-s4o31al8hx] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================================
   No data styles
   ============================================================================ */
.no-data[b-s4o31al8hx] {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
    font-style: italic;
    background: white;
    border-radius: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .no-data i[b-s4o31al8hx] {
        font-size: 36px;
        margin-bottom: 12px;
        color: #cbd5e0;
    }

    .no-data p[b-s4o31al8hx] {
        font-size: 16px;
        margin: 0;
    }

/* ============================================================================
   Scrollbar styles
   ============================================================================ */
.table-container[b-s4o31al8hx]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-container[b-s4o31al8hx]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-container[b-s4o31al8hx]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .table-container[b-s4o31al8hx]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/DocTemplate/Pages/DocCategoryManage.razor.rz.scp.css */
/* ===========================================================================
   文档模板分类管理组件样式 - 优化版本
   =========================================================================== */

/* #region 全局与容器样式 */
.category-management-container[b-lagw8dzo5a] {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px);
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
/* #endregion */

/* #region 头部区域 */
.management-header[b-lagw8dzo5a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

    .management-header[b-lagw8dzo5a]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    }

.header-left[b-lagw8dzo5a],
.header-center[b-lagw8dzo5a],
.header-right[b-lagw8dzo5a] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-title[b-lagw8dzo5a] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .page-title i[b-lagw8dzo5a] {
        color: #4a6fa5;
        font-size: 14px;
    }

.expand-collapse-group[b-lagw8dzo5a] {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.btn-action[b-lagw8dzo5a] {
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #e0e6ed;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

    .btn-action:hover[b-lagw8dzo5a] {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

.btn-outline-primary[b-lagw8dzo5a] {
    color: #4a6fa5;
    border-color: #4a6fa5;
    background: transparent;
}

    .btn-outline-primary:hover[b-lagw8dzo5a] {
        background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
        color: white;
        border-color: #4a6fa5;
    }

.btn-primary[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    border: none;
    color: white;
}

    .btn-primary:hover[b-lagw8dzo5a] {
        background: linear-gradient(135deg, #3a5f95, #5b7cac);
        color: white;
    }
/* #endregion */

/* #region 统计卡片 */
.stats-cards[b-lagw8dzo5a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.stat-card[b-lagw8dzo5a] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .stat-card:hover[b-lagw8dzo5a] {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .stat-card[b-lagw8dzo5a]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
    }

.stat-card-primary[b-lagw8dzo5a]::before {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
}

.stat-card-info[b-lagw8dzo5a]::before {
    background: linear-gradient(135deg, #17a2b8, #2bbfd8);
}

.stat-card-success[b-lagw8dzo5a]::before {
    background: linear-gradient(135deg, #28a745, #3dc95d);
}

.stat-card-warning[b-lagw8dzo5a]::before {
    background: linear-gradient(135deg, #ffc107, #ffd351);
}

.stat-icon[b-lagw8dzo5a] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.stat-card-primary .stat-icon[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
}

.stat-card-info .stat-icon[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #17a2b8, #2bbfd8);
}

.stat-card-success .stat-icon[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #28a745, #3dc95d);
}

.stat-card-warning .stat-icon[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #ffc107, #ffd351);
}

.stat-content[b-lagw8dzo5a] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.stat-value[b-lagw8dzo5a] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.stat-card-primary .stat-value[b-lagw8dzo5a] {
    color: #4a6fa5;
}

.stat-card-info .stat-value[b-lagw8dzo5a] {
    color: #17a2b8;
}

.stat-card-success .stat-value[b-lagw8dzo5a] {
    color: #28a745;
}

.stat-card-warning .stat-value[b-lagw8dzo5a] {
    color: #ffc107;
}

.stat-label[b-lagw8dzo5a] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    white-space: nowrap;
}

.stat-progress[b-lagw8dzo5a] {
    margin-top: 4px;
}

.progress[b-lagw8dzo5a] {
    background-color: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    height: 3px;
}

.progress-bar[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    border-radius: 6px;
    transition: width 0.4s ease;
}
/* #endregion */

/* #region 表格区域 */
.category-tree-container[b-lagw8dzo5a] {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.table-responsive[b-lagw8dzo5a] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}

    /* 滚动条样式 */
    .table-responsive[b-lagw8dzo5a]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-responsive[b-lagw8dzo5a]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .table-responsive[b-lagw8dzo5a]::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 4px;
        border: 2px solid #f1f5f9;
    }

        .table-responsive[b-lagw8dzo5a]::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

.category-table[b-lagw8dzo5a] {
    margin: 0;
    font-size: 12px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1100px;
}

/* 表头 */
.table-header[b-lagw8dzo5a] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

    .table-header th[b-lagw8dzo5a] {
        padding: 6px;
        font-weight: 600;
        color: white;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid #1a252f;
        text-align: center;
        font-size: 12px;
        position: relative;
    }

        .table-header th[b-lagw8dzo5a]::after {
            content: '';
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
        }

        .table-header th:last-child[b-lagw8dzo5a]::after {
            display: none;
        }

/* 列宽定义 */
.col-checkbox[b-lagw8dzo5a] {
    width: 40px;
    min-width: 40px;
    text-align: center !important;
}

.col-index[b-lagw8dzo5a] {
    width: 50px;
    min-width: 50px;
    text-align: center !important;
}

.col-code[b-lagw8dzo5a] {
    width: 120px;
    min-width: 120px;
    text-align: left !important;
}

.col-name[b-lagw8dzo5a] {
    width: 140px;
    min-width: 140px;
    text-align: left !important;
}

.col-subcode[b-lagw8dzo5a] {
    width: 120px;
    min-width: 120px;
    text-align: left !important;
}

.col-subname[b-lagw8dzo5a] {
    width: 140px;
    min-width: 140px;
    text-align: left !important;
}

.col-sort[b-lagw8dzo5a] {
    width: 60px;
    min-width: 60px;
    text-align: center !important;
}

.col-active[b-lagw8dzo5a] {
    width: 70px;
    min-width: 70px;
    text-align: center !important;
}

.col-remark[b-lagw8dzo5a] {
    min-width: 180px;
    text-align: left !important;
    width: auto;
}

.col-action[b-lagw8dzo5a] {
    width: 250px;
    min-width: 250px;
    text-align: center !important;
}

/* 表格内容 */
.category-table tbody td[b-lagw8dzo5a] {
    padding: 4px 6px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.3;
}

/* 对齐方式 */
.category-table td.col-checkbox[b-lagw8dzo5a],
.category-table td.col-index[b-lagw8dzo5a],
.category-table td.col-sort[b-lagw8dzo5a],
.category-table td.col-active[b-lagw8dzo5a],
.category-table td.col-action[b-lagw8dzo5a] {
    text-align: center;
}

.category-table td.col-code[b-lagw8dzo5a],
.category-table td.col-name[b-lagw8dzo5a],
.category-table td.col-subcode[b-lagw8dzo5a],
.category-table td.col-subname[b-lagw8dzo5a],
.category-table td.col-remark[b-lagw8dzo5a] {
    text-align: left;
}

/* 主分类行 */
.main-category-row[b-lagw8dzo5a] {
    background-color: #f8fafc;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

    .main-category-row:hover[b-lagw8dzo5a] {
        background-color: #e8f4fd;
        border-left-color: #4a6fa5;
    }

    .main-category-row.expanded[b-lagw8dzo5a] {
        background-color: #e8f4fd;
        border-left-color: #4a6fa5;
    }

/* 子分类行 */
.sub-category-row[b-lagw8dzo5a] {
    background-color: white;
    transition: all 0.2s ease;
}

    .sub-category-row:hover[b-lagw8dzo5a] {
        background-color: #f8fafc;
    }

.inactive-row[b-lagw8dzo5a] {
    opacity: 0.7;
    background-color: #f9f9f9;
}

    .inactive-row:hover[b-lagw8dzo5a] {
        background-color: #f0f0f0;
    }

/* 分类代码单元格 */
.category-code-cell[b-lagw8dzo5a] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toggle-icon[b-lagw8dzo5a] {
    cursor: pointer;
    color: #6c757d;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    transition: all 0.2s ease;
}

    .toggle-icon:hover[b-lagw8dzo5a] {
        color: #4a6fa5;
        transform: scale(1.1);
    }

.code-text[b-lagw8dzo5a] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 子分类单元格 */
.sub-code-cell[b-lagw8dzo5a] {
    position: relative;
    padding-left: 20px !important;
}

.sub-indent[b-lagw8dzo5a] {
    position: absolute;
    left: 8px;
    color: #adb5bd;
    font-size: 11px;
}

/* 分类名称单元格 */
.category-name-cell[b-lagw8dzo5a] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.category-name-text[b-lagw8dzo5a] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2c3e50;
    font-weight: 500;
}

.badge-count[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #8B0000, #A52A2A);
    color: white;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 8px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    border: 1px solid #660000;
    box-shadow: 0 1px 2px rgba(139, 0, 0, 0.2);
}

/* 子分类汇总 */
.sub-category-summary[b-lagw8dzo5a] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7f8c8d;
    white-space: nowrap;
    font-size: 11px;
    padding: 2px 6px;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px dashed #dee2e6;
}

.btn-add-sub[b-lagw8dzo5a] {
    padding: 1px 4px;
    font-size: 10px;
    color: #4a6fa5;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
}

    .btn-add-sub:hover[b-lagw8dzo5a] {
        color: white;
        background: #4a6fa5;
        border-radius: 3px;
    }

/* 徽章样式 */
.badge[b-lagw8dzo5a] {
    font-weight: 500;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 10px;
    display: inline-block;
    min-width: 40px;
    text-align: center;
}

    .badge.badge-success[b-lagw8dzo5a] {
        background: linear-gradient(135deg, #1e4b8f, #2a5caa) !important;
        color: white !important;
    }

.badge-secondary[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #6c757d, #868e96) !important;
    color: white !important;
}

.badge-primary[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc) !important;
    color: white !important;
}

.badge-info[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #17a2b8, #2bbfd8) !important;
    color: white !important;
}

/* 排序徽章 */
.sort-badge[b-lagw8dzo5a] {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    border-radius: 4px;
    font-weight: 600;
    color: #495057;
    min-width: 30px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}

.sort-highlight[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #d4edda, #e8f5e9);
    color: #155724;
    border-color: #c3e6cb;
    box-shadow: 0 1px 2px rgba(21, 87, 36, 0.1);
}

/* 备注文本 */
.remark-text[b-lagw8dzo5a] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #6c757d;
    font-size: 11px;
    max-width: 180px;
    padding: 2px 6px;
    background: #f8fafc;
    border-radius: 3px;
    border-left: 2px solid #dee2e6;
}

/* 操作按钮 */
.action-buttons[b-lagw8dzo5a] {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    min-width: 240px;
}

.action-btn[b-lagw8dzo5a] {
    padding: 2px 4px;
    font-size: 11px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e0e6ed;
    background-color: white;
    color: #495057;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 50px;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .action-btn:hover[b-lagw8dzo5a] {
        transform: translateY(-1px);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

    .action-btn.btn-outline-primary[b-lagw8dzo5a] {
        color: #4a6fa5;
        border-color: #4a6fa5;
        background: rgba(74, 111, 165, 0.1);
    }

        .action-btn.btn-outline-primary:hover[b-lagw8dzo5a] {
            background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
            color: white;
            border-color: #4a6fa5;
        }

    .action-btn.btn-outline-danger[b-lagw8dzo5a] {
        color: #e74c3c;
        border-color: #e74c3c;
        background: rgba(231, 76, 60, 0.1);
    }

        .action-btn.btn-outline-danger:hover[b-lagw8dzo5a] {
            background: linear-gradient(135deg, #e74c3c, #eb6656);
            color: white;
            border-color: #e74c3c;
        }

    .action-btn.btn-outline-success[b-lagw8dzo5a] {
        color: #28a745;
        border-color: #28a745;
        background: rgba(40, 167, 69, 0.1);
    }

        .action-btn.btn-outline-success:hover[b-lagw8dzo5a] {
            background: linear-gradient(135deg, #28a745, #3dc95d);
            color: white;
            border-color: #28a745;
        }

    .action-btn.btn-outline-info[b-lagw8dzo5a] {
        color: #17a2b8;
        border-color: #17a2b8;
        background: rgba(23, 162, 184, 0.1);
    }

        .action-btn.btn-outline-info:hover[b-lagw8dzo5a] {
            background: linear-gradient(135deg, #17a2b8, #2bbfd8);
            color: white;
            border-color: #17a2b8;
        }

    .action-btn.btn-outline-warning[b-lagw8dzo5a] {
        color: #ffc107;
        border-color: #ffc107;
        background: rgba(255, 193, 7, 0.1);
    }

        .action-btn.btn-outline-warning:hover[b-lagw8dzo5a] {
            background: linear-gradient(135deg, #ffc107, #ffd351);
            color: #212529;
            border-color: #ffc107;
        }

/* 加载状态 */
.loading-spinner[b-lagw8dzo5a] {
    padding: 30px;
    text-align: center;
    color: #4a6fa5;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .loading-spinner p[b-lagw8dzo5a] {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 500;
        color: #6c757d;
    }

/* 无数据状态 */
.no-data[b-lagw8dzo5a] {
    padding: 30px 20px;
    text-align: center;
    color: #94a3b8;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .no-data i[b-lagw8dzo5a] {
        font-size: 32px;
        margin-bottom: 8px;
        opacity: 0.5;
    }

    .no-data p[b-lagw8dzo5a] {
        margin-bottom: 12px;
        font-size: 12px;
        color: #64748b;
    }

    .no-data .btn[b-lagw8dzo5a] {
        font-size: 12px;
        padding: 3px 8px;
    }
/* #endregion */

/* #region 批量操作栏 */
.batch-action-bar[b-lagw8dzo5a] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    flex-shrink: 0;
    animation: slideUp-b-lagw8dzo5a 0.2s ease;
}

@keyframes slideUp-b-lagw8dzo5a {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.selected-count[b-lagw8dzo5a] {
    font-weight: 600;
    color: #856404;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.batch-actions[b-lagw8dzo5a] {
    display: flex;
    gap: 6px;
}

    .batch-actions .btn[b-lagw8dzo5a] {
        font-size: 11px;
        padding: 3px 6px;
    }
/* #endregion */

/* #region 模态对话框 - 公共样式 */
.modal-backdrop.show[b-lagw8dzo5a] {
    opacity: 0.5;
}

.modal.show.d-block[b-lagw8dzo5a] {
    z-index: 1050;
}

.modal-content[b-lagw8dzo5a] {
    border: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid #e0e6ed;
}

.modal-header[b-lagw8dzo5a] {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e6ed;
    border-radius: 10px 10px 0 0;
}

.modal-header-gradient[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    color: white;
}

.modal-header-danger[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #e74c3c, #eb6656);
    color: white;
}

.modal-title[b-lagw8dzo5a] {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-close-white[b-lagw8dzo5a] {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

    .btn-close-white:hover[b-lagw8dzo5a] {
        opacity: 1;
    }

.modal-body[b-lagw8dzo5a] {
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-lagw8dzo5a] {
    padding: 8px 12px;
    border-top: 1px solid #e0e6ed;
    border-radius: 0 0 10px 10px;
    background: #f8fafc;
}

/* 表单样式 */
.form-label[b-lagw8dzo5a] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #495057;
}

    .form-label.required[b-lagw8dzo5a]::after {
        content: " *";
        color: #e74c3c;
    }

.form-control-sm[b-lagw8dzo5a] {
    font-size: 12px;
    padding: 4px 8px;
    height: 30px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .form-control-sm:focus[b-lagw8dzo5a] {
        border-color: #4a6fa5;
        box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
    }

.form-text[b-lagw8dzo5a] {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

.form-check-input:checked[b-lagw8dzo5a] {
    background-color: #4a6fa5;
    border-color: #4a6fa5;
}

/* 禁用字段样式 */
.form-control.bg-light.locked-field[b-lagw8dzo5a] {
    background-color: #f8f9fa !important;
    border-color: #dee2e6;
    color: #6c757d;
    cursor: not-allowed;
}

/* 警告框样式 */
.alert[b-lagw8dzo5a] {
    padding: 6px 8px;
    margin: 0 0 8px 0;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.alert-warning[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border-color: #ffc107;
    color: #856404;
}

.alert-danger[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    border-color: #dc3545;
    color: #721c24;
}

.alert-info[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    border-color: #17a2b8;
    color: #0c5460;
}

.alert-success[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    border-color: #28a745;
    color: #155724;
}

/* 预览区域 */
.preview-section[b-lagw8dzo5a] {
    margin-top: 8px;
    padding: 8px;
    background: linear-gradient(135deg, #f8fafc, #eef2f6);
    border-radius: 4px;
    border-left: 3px solid #4a6fa5;
}

    .preview-section h6[b-lagw8dzo5a] {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.main-category-selector[b-lagw8dzo5a] {
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #e0e6ed;
}

.selected-category-info .alert[b-lagw8dzo5a] {
    margin: 0;
    padding: 4px 6px;
}

/* 徽章样式增强 */
.badge.bg-warning[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #ffc107, #ffd351) !important;
    color: #212529 !important;
    font-size: 10px;
    padding: 1px 4px;
    font-weight: 600;
}

.badge.bg-info[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #17a2b8, #2bbfd8) !important;
    color: white !important;
    font-size: 10px;
    padding: 1px 4px;
    font-weight: 600;
}

.badge.bg-success[b-lagw8dzo5a] {
    background: linear-gradient(135deg, #28a745, #3dc95d) !important;
    color: white !important;
    font-size: 10px;
    padding: 1px 4px;
    font-weight: 600;
}
/* #endregion */

/* #region 删除确认对话框 */
.delete-list[b-lagw8dzo5a] {
    max-height: 120px;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px;
}

.delete-item[b-lagw8dzo5a] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-bottom: 1px solid #f1f5f9;
    color: #495057;
    font-size: 11px;
}

    .delete-item:last-child[b-lagw8dzo5a] {
        border-bottom: none;
    }

    .delete-item i[b-lagw8dzo5a] {
        color: #4a6fa5;
        flex-shrink: 0;
    }

    .delete-item small[b-lagw8dzo5a] {
        color: #94a3b8;
        font-size: 10px;
    }

.delete-confirm-content[b-lagw8dzo5a] {
    text-align: center;
}

    .delete-confirm-content .bi-trash[b-lagw8dzo5a] {
        font-size: 1.2rem;
        color: #e74c3c;
    }
/* #endregion */

/* #region 响应式设计 */
@media (max-width: 1400px) {
    .col-action[b-lagw8dzo5a] {
        width: 240px;
        min-width: 240px;
    }
}

@media (max-width: 1200px) {
    .stats-cards[b-lagw8dzo5a] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .col-action[b-lagw8dzo5a] {
        width: 230px;
        min-width: 230px;
    }

    .action-buttons[b-lagw8dzo5a] {
        min-width: 220px;
    }

    .action-btn[b-lagw8dzo5a] {
        min-width: 45px;
        padding: 1px 3px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    /* 头部区域调整 */
    .management-header[b-lagw8dzo5a] {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        padding: 6px 8px;
    }

    .header-left[b-lagw8dzo5a] {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

    .header-center[b-lagw8dzo5a], .header-right[b-lagw8dzo5a] {
        order: 2;
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .expand-collapse-group[b-lagw8dzo5a], .header-right[b-lagw8dzo5a] {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
    }

    /* 统计卡片水平滚动 */
    .stats-cards[b-lagw8dzo5a] {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 6px;
        padding: 6px 0 8px;
        margin: 0 -6px;
        padding-left: 6px;
        padding-right: 6px;
    }

        .stats-cards[b-lagw8dzo5a]::-webkit-scrollbar {
            height: 3px;
        }

        .stats-cards[b-lagw8dzo5a]::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 1px;
        }

        .stats-cards[b-lagw8dzo5a]::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 1px;
        }

    .stat-card[b-lagw8dzo5a] {
        flex: 0 0 auto;
        width: 140px;
        min-width: 140px;
        scroll-snap-align: start;
        padding: 6px;
    }

    .category-table[b-lagw8dzo5a] {
        min-width: 900px;
    }

    .col-action[b-lagw8dzo5a] {
        width: 200px;
        min-width: 200px;
    }

    .action-buttons[b-lagw8dzo5a] {
        min-width: 180px;
    }

    .action-btn[b-lagw8dzo5a] {
        min-width: 40px;
    }

    .modal-dialog[b-lagw8dzo5a] {
        margin: 6px;
    }
}

@media (max-width: 576px) {
    .category-management-container[b-lagw8dzo5a] {
        padding: 6px 8px;
    }

    .management-header[b-lagw8dzo5a] {
        flex-direction: column;
        align-items: stretch;
        padding: 4px 6px;
    }

    .header-left[b-lagw8dzo5a] {
        margin-bottom: 6px;
    }

    .header-center[b-lagw8dzo5a], .header-right[b-lagw8dzo5a] {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        gap: 4px;
    }

    .stats-cards[b-lagw8dzo5a] {
        gap: 4px;
    }

    .stat-card[b-lagw8dzo5a] {
        width: 130px;
        min-width: 130px;
        padding: 5px;
    }

    .page-title[b-lagw8dzo5a] {
        font-size: 13px;
    }

    .category-table[b-lagw8dzo5a] {
        min-width: 800px;
    }

    .col-action[b-lagw8dzo5a] {
        width: 180px;
        min-width: 180px;
    }

    .action-buttons[b-lagw8dzo5a] {
        min-width: 160px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .action-btn[b-lagw8dzo5a] {
        min-width: 35px;
        margin-bottom: 2px;
    }

    .batch-actions[b-lagw8dzo5a] {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 400px) {
    .stat-card[b-lagw8dzo5a] {
        width: 120px;
        min-width: 120px;
    }

    .btn-action[b-lagw8dzo5a] {
        padding: 2px 4px;
        font-size: 11px;
    }

    .expand-collapse-group[b-lagw8dzo5a] {
        gap: 3px;
    }

    .header-right[b-lagw8dzo5a] {
        gap: 3px;
    }

    .category-table[b-lagw8dzo5a] {
        min-width: 750px;
    }

    .col-action[b-lagw8dzo5a] {
        width: 160px;
        min-width: 160px;
    }
}
/* #endregion */

/* #region 打印样式 */
@media print {
    .management-header[b-lagw8dzo5a],
    .expand-collapse-group[b-lagw8dzo5a],
    .batch-action-bar[b-lagw8dzo5a],
    .action-buttons[b-lagw8dzo5a] {
        display: none !important;
    }

    .category-table[b-lagw8dzo5a] {
        font-size: 10px;
        min-width: auto;
    }

    .stat-card[b-lagw8dzo5a] {
        box-shadow: none;
        border: 1px solid #dee2e6;
        page-break-inside: avoid;
    }
}
/* #endregion */
/* _content/LEAFBlazorApp25/Components/DocTemplate/Pages/DocTemplateLoad.razor.rz.scp.css */
 /* DocTemplateLoad.razor.css - 文档模板加载页面样式（优化版） */
/* ================ 1. 主容器和基础样式 ================ */
.doc-template-container[b-g4khs4t9es] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0px 3px 5px 3px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.4;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: calc(100vh - 40px);
    box-sizing: border-box;
    color: #1e293b;
}

/* ================ 2. 粘性标题区域 ================ */
.sticky-header[b-g4khs4t9es] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.page-header[b-g4khs4t9es] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 8px;
}

.page-title[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    white-space: nowrap;
    flex-shrink: 0;
}

.title-icon[b-g4khs4t9es] {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.category-count[b-g4khs4t9es] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    background: rgba(226, 232, 240, 0.8);
    padding: 5px 15px;
    border-radius: 12px;
    margin-left: 8px;
}

/* ================ 3. 控制面板 ================ */
.control-panel[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}

.columns-selector[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.selector-label[b-g4khs4t9es] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
}

.columns-dropdown[b-g4khs4t9es] {
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
    max-width: 80px;
}

    .columns-dropdown:focus[b-g4khs4t9es] {
        outline: none;
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
    }

    .columns-dropdown:hover[b-g4khs4t9es] {
        border-color: #3b82f6;
        background: #f8fafc;
    }

.toggle-all-btn[b-g4khs4t9es] {
    padding: 4px 8px;
    background: white;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    .toggle-all-btn:hover[b-g4khs4t9es] {
        background: #f8fafc;
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateY(-1px);
    }

.toggle-icon[b-g4khs4t9es] {
    font-size: 1rem;
}

/* ================ 4. 状态消息 ================ */
.status-message[b-g4khs4t9es] {
    padding: 8px 12px;
    margin: 4px 0 0 0;
    border-radius: 4px;
    font-weight: 500;
    border-left: 3px solid;
    font-size: 0.85rem;
    animation: fadeIn-b-g4khs4t9es 0.3s ease;
}

    .status-message.success[b-g4khs4t9es] {
        background: rgba(187, 247, 208, 0.9);
        color: #065f46;
        border-left-color: #10b981;
    }

    .status-message.error[b-g4khs4t9es] {
        background: rgba(254, 202, 202, 0.9);
        color: #7f1d1d;
        border-left-color: #ef4444;
    }

/* ================ 5. 加载和空状态 ================ */
.loading-state[b-g4khs4t9es] {
    text-align: center;
    padding: 40px 16px;
    color: #64748b;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    margin: 12px 0;
}

.loading-spinner[b-g4khs4t9es] {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-g4khs4t9es 1s linear infinite;
}

.empty-state[b-g4khs4t9es] {
    text-align: center;
    padding: 60px 16px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    margin: 12px 0;
}

.empty-icon[b-g4khs4t9es] {
    font-size: 3rem;
    opacity: 0.5;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.empty-state h3[b-g4khs4t9es] {
    color: #334155;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.empty-state p[b-g4khs4t9es] {
    color: #64748b;
    margin: 0;
    font-size: 0.95rem;
}

/* ================ 6. 分类区域 ================ */
.categories-container[b-g4khs4t9es] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-section[b-g4khs4t9es] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.category-header[b-g4khs4t9es] {
    color: white;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: all 0.2s ease;
    flex-wrap: nowrap;
    min-height: 44px;
    overflow: hidden; /* 确保内容不溢出 */
}

/* 分类标题区域 */
.category-title-area[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    overflow: hidden; /* 防止标题过长 */
}

/* ================【需求修改1：折叠按钮宽度调整】================ */
.collapse-btn[b-g4khs4t9es] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 2px 6px; /* 增加左右内边距 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-width: 70px; /* 设置最小宽度以适应文本 */
    height: 28px; /* 增加高度 */
    white-space: nowrap; /* 防止文本换行 */
}

    .collapse-btn:hover[b-g4khs4t9es] {
        background: rgba(255, 255, 255, 0.15);
    }

.collapse-icon[b-g4khs4t9es] {
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    min-width: 60px; /* 确保有足够宽度显示"▶ 展开" */
    text-align: center;
    white-space: nowrap; /* 防止图标和文本分开 */
}

.category-title[b-g4khs4t9es] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.template-count[b-g4khs4t9es] {
    font-size: 0.95rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    color: white;
    flex-shrink: 0;
    min-width: 28px;
    text-align: center;
    font-size: 14px;
}

/* 子分类过滤区域 */
.subcategory-filter[b-g4khs4t9es] {
    flex-shrink: 0;
    min-width: 140px; /* 固定最小宽度 */
    max-width: 180px; /* 固定最大宽度 */
    width: 180px; /* 固定宽度 */
}

.subcategory-dropdown[b-g4khs4t9es] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%; /* 占满父容器宽度 */
    height: 28px;
    min-width: 140px; /* 确保最小宽度 */
    max-width: 180px; /* 限制最大宽度 */
}

    .subcategory-dropdown:focus[b-g4khs4t9es] {
        outline: none;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
        border-color: white;
        background: rgba(255, 255, 255, 0.25);
    }

    .subcategory-dropdown:hover[b-g4khs4t9es] {
        background: rgba(255, 255, 255, 0.25);
        border-color: white;
    }

    .subcategory-dropdown option[b-g4khs4t9es] {
        background: #3b82f6;
        color: white;
    }

/* 分类操作区域 */
.category-action[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toggle-text[b-g4khs4t9es] {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.9;
    white-space: nowrap;
    color: white;
}

.category-content[b-g4khs4t9es] {
    padding: 12px;
}

.no-templates-message[b-g4khs4t9es] {
    text-align: center;
    padding: 30px 16px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.no-data-icon[b-g4khs4t9es] {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    opacity: 0.5;
}

/* ================ 7. 模板网格布局 ================ */
.templates-grid[b-g4khs4t9es] {
    display: grid;
    gap: 16px;
}

/* ================ 8. 模板卡片样式 ================ */
.template-card[b-g4khs4t9es] {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 100%;
    min-height: 320px;
}

    .template-card:hover[b-g4khs4t9es] {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.1);
        border-color: #cbd5e1;
    }

/* ================ 9. 模板图片区域 ================ */
.template-image[b-g4khs4t9es] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16/9; /* 固定16:9比例 */
}

    .template-image img[b-g4khs4t9es] {
        width: 100%;
        height: 100%;
        object-fit: cover; /*保持比例填充、有剪切 */
        /*object-fit: contain;*/ /* 改为contain，完整显示图片 */
        /* 新增：固定显示左上角区域，隐藏右下角 */
        object-position: left top;
        transition: transform 0.3s ease;
    }

.template-card:hover .template-image img[b-g4khs4t9es] {
    transform: scale(1.05);
    /* 新增：固定显示左上角区域，隐藏右下角 */
    object-position: left top;
}

.image-placeholder[b-g4khs4t9es] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
}

.file-type-icon[b-g4khs4t9es] {
    font-size: 2.5rem;
    opacity: 0.7;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.file-type-text[b-g4khs4t9es] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
}

/* ================ 10. 模板信息区域 ================ */
.template-info[b-g4khs4t9es] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 130px; /* 减少高度 */
}

/* 描述区域 - 高度减小 */
.description-section[b-g4khs4t9es] {
    /*margin-bottom: 10px;*/
    flex-grow: 0;
    overflow: hidden;
    max-height: 2.8em; /* 大约两行文本的高度 */
    line-height: 1.4em;
}

.template-description[b-g4khs4t9es] {
    color: #475569;
    line-height: 1.4;
    margin: 0;
    font-size: 0.9rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-description .template-description[b-g4khs4t9es] {
    color: #94a3b8;
    font-style: italic;
}

/* 元数据信息和操作按钮同行 */
.meta-action-row[b-g4khs4t9es] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: auto;
}

.meta-info[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    flex: 1;
}

.price-tag[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

    .price-tag.free[b-g4khs4t9es] {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .price-tag.paid[b-g4khs4t9es] {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

.price-icon[b-g4khs4t9es] {
    font-size: 0.9rem;
}

.price-text[b-g4khs4t9es] {
    font-size: 0.8rem;
}

.file-size[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}

.size-icon[b-g4khs4t9es] {
    font-size: 0.9rem;
}

/* ================ 11. 操作按钮区域 ================ */
.action-area[b-g4khs4t9es] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* 大图预览按钮 */
.preview-btn[b-g4khs4t9es] {
    padding: 3px 10px;
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
    min-width: 65px;
    white-space: nowrap;
}

    .preview-btn:hover[b-g4khs4t9es] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    }

    .preview-btn:active[b-g4khs4t9es] {
        transform: translateY(0);
    }

/* 下载按钮 */
.download-btn[b-g4khs4t9es] {
    padding: 3px 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    min-width: 65px;
    white-space: nowrap;
}

    .download-btn:hover[b-g4khs4t9es] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }

    .download-btn:active[b-g4khs4t9es] {
        transform: translateY(0);
    }

.btn-icon[b-g4khs4t9es] {
    font-size: 1rem;
}

.btn-text[b-g4khs4t9es] {
    font-size: 1.0rem;
}

/* ================ 12. 预览悬浮窗样式 ================ */
.preview-modal-overlay[b-g4khs4t9es] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn-b-g4khs4t9es 0.3s ease;
    /* 确保悬浮窗本身不出现滚动条 */
    overflow: hidden;
}

.preview-modal-content[b-g4khs4t9es] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 100%;
    max-height: 90vh; /* 悬浮窗最大高度为视口的90% */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 内容超出时隐藏，确保悬浮窗本身不滚动 */
    animation: slideUp-b-g4khs4t9es 0.3s ease;
}

.preview-modal-header[b-g4khs4t9es] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 固定高度，防止压缩 */
    flex-shrink: 0;
}

.preview-title[b-g4khs4t9es] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: white;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-close-btn[b-g4khs4t9es] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .preview-close-btn:hover[b-g4khs4t9es] {
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(90deg);
    }

.preview-modal-body[b-g4khs4t9es] {
    padding: 10px 20px;
    overflow-y: auto; /* 悬浮窗内容可以滚动 */
    flex: 1;
    /* 确保内容高度计算正确 */
    min-height: 0;
}

/* ====== 大图预览容器 - 关键修改部分 ================ */
/* 大图预览容器 */
.preview-image-container[b-g4khs4t9es] {
    width: 100%;
    min-height: 300px;
    max-height: 400px; /* 固定最大高度，超过此高度会出现滚动条 */
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 8px;
    overflow: hidden; /* 外层隐藏溢出，内部滚动条由内层控制 */
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    /* 重要：使用flex布局，确保内层容器正确填充 */
    display: flex;
    flex-direction: column;
}

/* 图片滚动包装器 - 关键修改：添加滚动条 */
.preview-image-scroll-wrapper[b-g4khs4t9es] {
    width: 100%;
    flex: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box;
    /* 确保滚动条在图片容器内部 */
    max-height: 400px; /* 与父容器最大高度一致 */
}

/* 图片比例容器 */
.preview-image-ratio-container[b-g4khs4t9es] {
    position: relative;
    width: 100%;
    /* 重要：不设置固定高度，由图片内容决定 */
    display: block;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    /* 确保容器足够大以包含图片 */
    min-height: 100px;
}

/* 大图预览图片样式 - 关键修改：按比例缩放，宽度填满容器 */
.preview-large-image[b-g4khs4t9es] {
    width: 100%; /* 宽度填满容器 */
    height: auto; /* 高度按比例自动计算 */
    display: block;
    /* 确保图片按原始比例显示，不拉伸 */
    object-fit: contain; /* 保持比例，完整显示图片 */
    /* 图片默认显示顶部 */
    object-position: top center;
    /* 确保图片最大宽度不超过容器 */
    max-width: 100%;
}

/* 滚动条样式 - 修正选择器错误 */
.preview-image-scroll-wrapper[b-g4khs4t9es]::-webkit-scrollbar {
    width: 10px;
}

.preview-image-scroll-wrapper[b-g4khs4t9es]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 5px;
}

.preview-image-scroll-wrapper[b-g4khs4t9es]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

    .preview-image-scroll-wrapper[b-g4khs4t9es]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* 占位符样式保持不变 */
.preview-image-placeholder[b-g4khs4t9es] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    width: 100%;
    height: 100%;
    /* 占位符也需要滚动容器 */
    overflow-y: auto;
}

.preview-file-type-icon[b-g4khs4t9es] {
    font-size: 4rem;
    opacity: 0.7;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.preview-file-type-text[b-g4khs4t9es] {
    font-size: 1.2rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

/* 详细描述区域 */
.preview-description-section[b-g4khs4t9es] {
    margin-bottom: 10px;
    padding: 8px 16px 8px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.preview-section-title[b-g4khs4t9es] {
    font-size: 1.0rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.preview-description-content[b-g4khs4t9es] {
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
}

    .preview-description-content p[b-g4khs4t9es] {
        margin: 0 0 10px 0;
    }

        .preview-description-content p:last-child[b-g4khs4t9es] {
            margin-bottom: 0;
        }

.no-description[b-g4khs4t9es] {
    color: #94a3b8;
    font-style: italic;
}

/* 元数据信息区域 */
.preview-meta-section[b-g4khs4t9es] {
    margin-bottom: 0px;
}

.preview-meta-grid[b-g4khs4t9es] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.preview-meta-item[b-g4khs4t9es] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.meta-label[b-g4khs4t9es] {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    margin-right: 8px;
    min-width: 70px;
}

.meta-value[b-g4khs4t9es] {
    font-size: 0.95rem;
    color: #334155;
    font-weight: 500;
    flex: 1;
}

.free-price[b-g4khs4t9es] {
    color: #059669;
    font-weight: 700;
}

.paid-price[b-g4khs4t9es] {
    color: #dc2626;
    font-weight: 700;
}

/* 预览悬浮窗底部按钮 */
.preview-modal-footer[b-g4khs4t9es] {
    padding: 10px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    /* 固定高度，防止压缩 */
    flex-shrink: 0;
}

.preview-download-btn[b-g4khs4t9es] {
    padding: 8px 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    min-width: 140px;
}

    .preview-download-btn:hover[b-g4khs4t9es] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }

.preview-cancel-btn[b-g4khs4t9es] {
    padding: 10px 20px;
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

    .preview-cancel-btn:hover[b-g4khs4t9es] {
        background: #f8fafc;
        color: #475569;
        border-color: #94a3b8;
    }

/* ================ 13. 动画效果 ================ */
@keyframes fadeIn-b-g4khs4t9es {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-g4khs4t9es {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ================ 14. 响应式设计 ================ */

/* 大屏幕（≥1200px） */
@media (min-width: 1200px) {
    .doc-template-container[b-g4khs4t9es] {
        padding: 16px 24px;
    }

    .page-title[b-g4khs4t9es] {
        font-size: 1.6rem;
    }

    .category-header[b-g4khs4t9es] {
        padding: 10px 16px;
    }

    .category-title[b-g4khs4t9es] {
        font-size: 1.1rem;
    }

    .subcategory-dropdown[b-g4khs4t9es] {
        max-width: 200px;
    }

    .preview-modal-content[b-g4khs4t9es] {
        max-width: 1000px;
    }
}

/* 中等屏幕（992px-1199px） */
@media (max-width: 1199px) {
    .templates-grid[b-g4khs4t9es] {
        gap: 14px;
    }

    .template-card[b-g4khs4t9es] {
        min-height: 310px;
    }

    .preview-modal-content[b-g4khs4t9es] {
        max-width: 800px;
    }

    .preview-image-container[b-g4khs4t9es] {
        max-height: 380px;
    }
}

/* 平板（768px-991px） */
@media (max-width: 991px) {
    .doc-template-container[b-g4khs4t9es] {
        padding: 12px 16px;
    }

    .sticky-header[b-g4khs4t9es] {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .page-header[b-g4khs4t9es] {
        flex-direction: row;
        gap: 12px;
    }

    .page-title[b-g4khs4t9es] {
        font-size: 1.3rem;
    }

    .control-panel[b-g4khs4t9es] {
        gap: 8px;
    }

    /*【需求修改2：标题行控件保持在一行】*/
    .category-header[b-g4khs4t9es] {
        flex-wrap: nowrap; /* 禁止换行 */
        gap: 10px;
        min-height: 44px;
        overflow: hidden; /* 隐藏溢出的内容 */
        padding: 8px 10px;
    }

    .subcategory-filter[b-g4khs4t9es] {
        order: 0; /* 保持原有顺序 */
        flex: 0 0 auto; /* 不伸缩，固定宽度 */
        min-width: 140px; /* 保持固定宽度 */
        max-width: 180px;
        margin-top: 0;
    }

    .subcategory-dropdown[b-g4khs4t9es] {
        width: 100%;
        height: 28px;
        min-width: 140px; /* 确保最小宽度 */
        max-width: 180px; /* 限制最大宽度 */
    }

    .template-card[b-g4khs4t9es] {
        min-height: 300px;
    }

    .template-description[b-g4khs4t9es] {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }

    .preview-modal-content[b-g4khs4t9es] {
        max-width: 700px;
    }

    .preview-image-container[b-g4khs4t9es] {
        max-height: 350px;
    }

    .preview-image-scroll-wrapper[b-g4khs4t9es] {
        padding: 8px;
        max-height: 350px;
    }

    .preview-meta-grid[b-g4khs4t9es] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机（576px-767px） */
@media (max-width: 767px) {
    .doc-template-container[b-g4khs4t9es] {
        padding: 8px 12px;
    }

    .page-header[b-g4khs4t9es] {
        flex-direction: row; /* 保持水平排列 */
        align-items: center;
        gap: 8px;
    }

    .page-title[b-g4khs4t9es] {
        font-size: 1.2rem;
        justify-content: flex-start;
    }

    .control-panel[b-g4khs4t9es] {
        justify-content: flex-end;
    }

    /*【需求修改2：标题行控件保持在一行】*/
    .category-header[b-g4khs4t9es] {
        flex-direction: row; /* 保持水平排列 */
        flex-wrap: nowrap; /* 禁止换行 */
        align-items: center;
        gap: 8px;
        padding: 8px;
        min-height: 40px;
        overflow: hidden; /* 隐藏溢出的内容 */
    }

    .category-title-area[b-g4khs4t9es] {
        width: auto;
        flex: 1;
        min-width: 0; /* 允许缩小 */
        overflow: hidden; /* 隐藏溢出的标题文本 */
    }

    .category-title[b-g4khs4t9es] {
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .template-count[b-g4khs4t9es] {
        font-size: 0.85rem;
        padding: 1px 6px;
        margin-left: 4px;
    }

    .subcategory-filter[b-g4khs4t9es] {
        order: 0;
        flex: 0 0 auto;
        width: auto;
        min-width: 120px; /* 适当减小最小宽度 */
        max-width: 150px;
        margin: 0;
    }

    .subcategory-dropdown[b-g4khs4t9es] {
        width: 100%;
        height: 26px;
        font-size: 0.8rem;
        min-width: 120px;
        max-width: 150px;
    }

    .category-action[b-g4khs4t9es] {
        order: 0;
        width: auto;
        justify-content: flex-start;
        margin: 0;
    }

    .collapse-btn[b-g4khs4t9es] {
        min-width: 60px; /* 适当减小最小宽度 */
        height: 26px;
        padding: 2px 4px;
    }

    .collapse-icon[b-g4khs4t9es] {
        min-width: 50px;
        font-size: 0.8rem;
    }

    .templates-grid[b-g4khs4t9es] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .template-card[b-g4khs4t9es] {
        min-height: 280px;
    }

    .template-info[b-g4khs4t9es] {
        padding: 10px;
        min-height: 120px;
    }

    .template-description[b-g4khs4t9es] {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }

    .meta-action-row[b-g4khs4t9es] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .meta-info[b-g4khs4t9es] {
        justify-content: space-between;
    }

    .action-area[b-g4khs4t9es] {
        width: 100%;
        justify-content: center;
    }

    .preview-btn[b-g4khs4t9es],
    .download-btn[b-g4khs4t9es] {
        flex: 1;
        max-width: none;
    }

    .preview-modal-overlay[b-g4khs4t9es] {
        padding: 10px;
    }

    .preview-modal-content[b-g4khs4t9es] {
        max-height: 90vh;
        margin: 0;
    }

    .preview-image-container[b-g4khs4t9es] {
        max-height: 300px;
        min-height: 250px;
    }

    .preview-image-scroll-wrapper[b-g4khs4t9es] {
        padding: 6px;
        max-height: 300px;
    }

    .preview-meta-grid[b-g4khs4t9es] {
        grid-template-columns: 1fr;
    }

    .preview-modal-footer[b-g4khs4t9es] {
        flex-direction: column;
        gap: 8px;
    }

    .preview-download-btn[b-g4khs4t9es],
    .preview-cancel-btn[b-g4khs4t9es] {
        width: 100%;
        min-width: auto;
    }
}

/* 小手机（≤575px） */
@media (max-width: 575px) {
    .doc-template-container[b-g4khs4t9es] {
        padding: 6px 8px;
    }

    .page-title[b-g4khs4t9es] {
        font-size: 1.1rem;
    }

    .category-count[b-g4khs4t9es] {
        font-size: 0.8rem;
        padding: 2px 8px;
    }

    /*【需求修改2：标题行控件保持在一行】*/
    .category-header[b-g4khs4t9es] {
        gap: 6px;
        padding: 6px 8px;
    }

    .category-title[b-g4khs4t9es] {
        font-size: 0.9rem;
    }

    .template-count[b-g4khs4t9es] {
        font-size: 0.8rem;
        padding: 1px 4px;
        min-width: 24px;
    }

    .subcategory-filter[b-g4khs4t9es] {
        min-width: 110px; /* 进一步减小最小宽度 */
        max-width: 130px;
    }

    .subcategory-dropdown[b-g4khs4t9es] {
        min-width: 110px;
        max-width: 130px;
        font-size: 0.75rem;
        height: 24px;
        padding: 2px 4px;
    }

    .collapse-btn[b-g4khs4t9es] {
        min-width: 55px;
        height: 24px;
        padding: 1px 3px;
    }

    .collapse-icon[b-g4khs4t9es] {
        min-width: 45px;
        font-size: 0.75rem;
    }

    .templates-grid[b-g4khs4t9es] {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .template-card[b-g4khs4t9es] {
        min-height: 260px;
    }

    .template-description[b-g4khs4t9es] {
        font-size: 0.8rem; /* 确保不小于五号字 */
        -webkit-line-clamp: 2;
    }

    .preview-btn[b-g4khs4t9es],
    .download-btn[b-g4khs4t9es] {
        padding: 3px 8px;
        font-size: 0.7rem;
        min-width: 60px;
    }

    .btn-text[b-g4khs4t9es] {
        font-size: 1.0rem;
    }

    .preview-modal-body[b-g4khs4t9es] {
        padding: 15px;
    }

    .preview-modal-header[b-g4khs4t9es] {
        padding: 12px 15px;
    }

    .preview-title[b-g4khs4t9es] {
        font-size: 1.0rem;
    }

    .preview-image-container[b-g4khs4t9es] {
        max-height: 250px;
        min-height: 200px;
    }

    .preview-image-scroll-wrapper[b-g4khs4t9es] {
        padding: 4px;
        max-height: 250px;
    }

        /* 在小屏幕上滚动条变细 */
        .preview-image-scroll-wrapper[b-g4khs4t9es]::-webkit-scrollbar {
            width: 6px;
        }
}

/* 超小屏幕（≤375px） */
@media (max-width: 375px) {
    .page-header[b-g4khs4t9es] {
        gap: 6px;
    }

    .page-title[b-g4khs4t9es] {
        font-size: 1rem;
    }

    .control-panel[b-g4khs4t9es] {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .columns-selector[b-g4khs4t9es] {
        justify-content: space-between;
    }

    .toggle-all-btn[b-g4khs4t9es] {
        justify-content: center;
    }

    .category-title[b-g4khs4t9es] {
        font-size: 0.85rem;
    }

    .template-count[b-g4khs4t9es] {
        font-size: 0.8rem;
        padding: 1px 4px;
    }

    .subcategory-filter[b-g4khs4t9es] {
        min-width: 100px;
        max-width: 120px;
    }

    .subcategory-dropdown[b-g4khs4t9es] {
        min-width: 100px;
        max-width: 120px;
    }

    .collapse-btn[b-g4khs4t9es] {
        min-width: 50px;
    }

    .collapse-icon[b-g4khs4t9es] {
        min-width: 40px;
        font-size: 0.7rem;
    }

    .template-description[b-g4khs4t9es] {
        font-size: 0.8rem;
    }

    .preview-image-container[b-g4khs4t9es] {
        max-height: 220px;
    }

    .preview-image-scroll-wrapper[b-g4khs4t9es] {
        max-height: 220px;
    }
}

/* 打印样式 */
@media print {
    .sticky-header[b-g4khs4t9es],
    .download-btn[b-g4khs4t9es],
    .preview-btn[b-g4khs4t9es],
    .subcategory-filter[b-g4khs4t9es],
    .preview-modal-overlay[b-g4khs4t9es] {
        display: none !important;
    }

    .category-section[b-g4khs4t9es] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .template-image[b-g4khs4t9es] {
        display: none !important;
    }

    .doc-template-container[b-g4khs4t9es] {
        background: white !important;
        padding: 0 !important;
    }
}
/* _content/LEAFBlazorApp25/Components/DocTemplate/Pages/DocTemplateManage.razor.rz.scp.css */
/* ===========================================================================
   文档模板管理组件样式 - 完整版（包含所有修改）
   LEAFBlazorApp25 - DocTemplateManage.razor.css
   =========================================================================== */

/* ===== 1. 主容器和全局设置 ===== */
.doctemplate-manage-container[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

/* ===== 2. 头部区域 - 优化布局 ===== */
.management-header[b-5avbwdlxz0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

    .management-header[b-5avbwdlxz0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    }

/* 左侧标题区域 */
.header-left[b-5avbwdlxz0] {
    flex: 1;
    min-width: 300px;
}

.header-title-actions[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.page-title[b-5avbwdlxz0] {
    margin: 0;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .page-title i[b-5avbwdlxz0] {
        color: #4a6fa5;
        font-size: 20px;
    }

.title-action-buttons[b-5avbwdlxz0] {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.btn-action[b-5avbwdlxz0] {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 2px;
}

    .btn-action:hover[b-5avbwdlxz0] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.btn-primary[b-5avbwdlxz0] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    border: none;
    color: white;
}

    .btn-primary:hover[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #3a5f95, #5b7cac);
        color: white;
    }

.btn-outline-primary[b-5avbwdlxz0] {
    color: #4a6fa5;
    border-color: #4a6fa5;
    background: transparent;
}

    .btn-outline-primary:hover[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
        color: white;
        border-color: #4a6fa5;
    }

/* 右侧统计区域 */
.header-stats[b-5avbwdlxz0] {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    min-width: 400px;
}

.stat-item[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.stat-label[b-5avbwdlxz0] {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.stat-value[b-5avbwdlxz0] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: none;
}

.stat-primary .stat-value[b-5avbwdlxz0] {
    color: #4a6fa5;
}

.stat-success .stat-value[b-5avbwdlxz0] {
    color: #28a745;
}

.stat-info .stat-value[b-5avbwdlxz0] {
    color: #17a2b8;
}

.stat-warning .stat-value[b-5avbwdlxz0] {
    color: #ffc107;
}

/* ===== 3. 筛选区域 - 优化布局 ===== */
.filter-section[b-5avbwdlxz0] {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 12px 8px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.filter-row[b-5avbwdlxz0] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 筛选组包装器 - 用于分组 */
.filter-group-wrapper[b-5avbwdlxz0] {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 300px;
}

.filter-group[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 120px;
}

.filter-label[b-5avbwdlxz0] {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
}

.form-select-sm[b-5avbwdlxz0] {
    font-size: 12px;
    padding: 5px 8px;
    height: 30px;
    flex: 1;
    min-width: 120px;
}

/* 搜索输入框美化 */
.search-input-group[b-5avbwdlxz0] {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
    flex: 1;
}

    .search-input-group:focus-within[b-5avbwdlxz0] {
        border-color: #4a6fa5;
        box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
    }

.search-icon[b-5avbwdlxz0] {
    background-color: #f8f9fa;
    border-right: 1px solid #ced4da;
    color: #6c757d;
}

.search-input[b-5avbwdlxz0] {
    border: none;
    box-shadow: none;
    flex: 1;
}

    .search-input:focus[b-5avbwdlxz0] {
        box-shadow: none;
    }

.input-group-sm[b-5avbwdlxz0] {
    height: 30px;
    flex: 1;
}

    .input-group-sm input[b-5avbwdlxz0] {
        font-size: 12px;
        padding: 5px 10px;
        height: 30px;
    }

    .input-group-sm .btn[b-5avbwdlxz0] {
        padding: 5px 10px;
        font-size: 12px;
    }

/* 搜索和重置按钮 */
.filter-actions[b-5avbwdlxz0] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.btn-filter[b-5avbwdlxz0] {
    padding: 6px 16px;
    font-size: 12px;
    min-width: 80px;
    white-space: nowrap;
    border-radius: 6px;
    font-weight: 600;
}

.btn-search[b-5avbwdlxz0] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(74, 111, 165, 0.3);
}

    .btn-search:hover[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #3a5f95, #5b7cac);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(74, 111, 165, 0.4);
        color: white;
    }

.btn-reset[b-5avbwdlxz0] {
    border: 2px solid #6c757d;
    color: #6c757d;
    background: transparent;
}

    .btn-reset:hover[b-5avbwdlxz0] {
        background: #6c757d;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    }

/* ===== 4. 批量操作栏 ===== */
.batch-action-bar[b-5avbwdlxz0] {
    margin-top: 12px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideUp-b-5avbwdlxz0 0.3s ease;
}

@keyframes slideUp-b-5avbwdlxz0 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.selected-count[b-5avbwdlxz0] {
    font-weight: 600;
    color: #856404;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.batch-actions[b-5avbwdlxz0] {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.batch-btn[b-5avbwdlxz0] {
    padding: 4px 8px;
    font-size: 12px;
    min-width: 70px;
}

/* ===== 5. 表格区域 ===== */
.templates-table-container[b-5avbwdlxz0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.table-responsive[b-5avbwdlxz0] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}

    /* 滚动条样式 */
    .table-responsive[b-5avbwdlxz0]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-responsive[b-5avbwdlxz0]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .table-responsive[b-5avbwdlxz0]::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 4px;
        border: 2px solid #f1f5f9;
    }

        .table-responsive[b-5avbwdlxz0]::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

/* 表格基础样式 */
.table[b-5avbwdlxz0] {
    margin: 0;
    font-size: 12px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1200px;
}

    .table th[b-5avbwdlxz0] {
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 600;
        background: linear-gradient(135deg, #2c3e50, #34495e);
        color: white;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 2px solid #1a252f;
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: center;
        border: 1px solid #dee2e6;
    }

    .table td[b-5avbwdlxz0] {
        padding: 6px 10px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        border: 1px solid #e9ecef;
    }

/* 表头排序 */
.sortable-header[b-5avbwdlxz0] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    padding: 4px 8px;
}

    .sortable-header:hover[b-5avbwdlxz0] {
        color: #cbd5e1;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

/* 表格行样式 */
.template-row[b-5avbwdlxz0] {
    transition: all 0.2s ease;
    height: 50px;
}

    .template-row:hover[b-5avbwdlxz0] {
        background-color: #f8fafc;
    }

.selected-row[b-5avbwdlxz0] {
    background-color: #e8f4fd !important;
}

.inactive-row[b-5avbwdlxz0] {
    opacity: 0.6;
    background-color: #f9f9f9;
}

    .inactive-row:hover[b-5avbwdlxz0] {
        background-color: #f0f0f0;
    }

/* ===== 6. 表格列样式 ===== */

/* 复选框列 */
.col-checkbox[b-5avbwdlxz0] {
    width: 40px;
    text-align: center;
}

/* ID列 */
.col-id[b-5avbwdlxz0] {
    width: 60px;
    text-align: center;
}

    .col-id .template-id[b-5avbwdlxz0] {
        font-family: 'Consolas', monospace;
        font-weight: 600;
        color: #4a6fa5;
        font-size: 12px;
    }

/* 预览列 */
.col-preview[b-5avbwdlxz0] {
    width: 80px;
    text-align: center;
}

.preview-container[b-5avbwdlxz0] {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e0e6ed;
    transition: all 0.2s ease;
    background-color: white;
}

    .preview-container:hover[b-5avbwdlxz0] {
        border-color: #4a6fa5;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

.preview-image[b-5avbwdlxz0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-placeholder[b-5avbwdlxz0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

    .preview-placeholder.word[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #2b579a, #2b579a);
    }

    .preview-placeholder.excel[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #217346, #217346);
    }

    .preview-placeholder.ppt[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #d24726, #d24726);
    }

    .preview-placeholder.pdf[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #f40f02, #f40f02);
    }

    .preview-placeholder.image[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    }

    .preview-placeholder.other[b-5avbwdlxz0] {
        background: linear-gradient(135deg, #6c757d, #868e96);
    }

/* 模板名称列 */
.col-name[b-5avbwdlxz0] {
    min-width: 250px;
    max-width: 300px;
    text-align: left;
    font-size: 12px !important;
}

.template-name-cell[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.template-name[b-5avbwdlxz0] {
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.template-remark[b-5avbwdlxz0] {
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-tags[b-5avbwdlxz0] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tag-badge[b-5avbwdlxz0] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #e0e6ed;
    font-weight: 500;
}

/* 分类列 */
.col-category[b-5avbwdlxz0] {
    width: 180px;
    text-align: left;
    font-size: 12px !important;
}

.category-cell[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-display[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-main[b-5avbwdlxz0] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 12px;
}

.category-sub[b-5avbwdlxz0] {
    font-size: 11px;
    color: #6c757d;
}

.category-codes[b-5avbwdlxz0] {
    font-size: 11px;
    color: #94a3b8;
    font-family: 'Consolas', monospace;
}

/* 价格列 */
.col-price[b-5avbwdlxz0] {
    width: 110px;
}

.price-badge[b-5avbwdlxz0] {
    font-size: 12px;
    padding: 4px 8px;
    font-weight: 600;
    min-width: 60px;
    display: inline-block;
}

/* 下载次数列 */
.col-downloads[b-5avbwdlxz0] {
    width: 100px;
}

.download-cell[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.download-count[b-5avbwdlxz0] {
    font-weight: 700;
    color: #4a6fa5;
    font-size: 13px;
}

/* 文件大小列 */
.col-size[b-5avbwdlxz0] {
    width: 110px;
}

.file-size[b-5avbwdlxz0] {
    font-family: 'Consolas', monospace;
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

/* 上传时间列 */
.col-upload[b-5avbwdlxz0] {
    width: 130px;
}

.upload-date[b-5avbwdlxz0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

    .upload-date div:first-child[b-5avbwdlxz0] {
        font-weight: 600;
        color: #2c3e50;
        font-size: 12px;
    }

    .upload-date small[b-5avbwdlxz0] {
        font-size: 11px;
        color: #6c757d;
    }

/* 状态列 */
.col-status[b-5avbwdlxz0] {
    width: 90px;
}

.status-badge[b-5avbwdlxz0] {
    font-size: 12px;
    padding: 5px 10px;
    min-width: 50px;
    font-weight: 600;
}

/* ===== 7. 操作列样式 ===== */
.col-actions[b-5avbwdlxz0] {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

/* 操作按钮容器 - 水平布局 */
.action-buttons-horizontal[b-5avbwdlxz0] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 2px !important;
}

/* 水平按钮样式 */
.action-btn-horizontal[b-5avbwdlxz0] {
    flex: 1;
    min-width: 40px;
    max-width: 50px;
    padding: 3px 2px !important;
    font-size: 10px !important; /* 字体大小减小 */
    border-radius: 4px !important;
    font-weight: 500 !important;
    border: 1px solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 26px !important;
}

    /* 按钮内文字 */
    .action-btn-horizontal span[b-5avbwdlxz0] {
        display: inline-block;
        max-width: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px !important; /* 文字更小 */
    }

    /* 按钮图标 */
    .action-btn-horizontal i[b-5avbwdlxz0] {
        font-size: 10px !important;
        flex-shrink: 0;
    }

    /* 不同按钮的颜色设置 */
    .action-btn-horizontal.btn-outline-primary[b-5avbwdlxz0] {
        background-color: rgba(13, 110, 253, 0.05) !important;
        border-color: #0d6efd !important;
        color: #0d6efd !important;
    }

        .action-btn-horizontal.btn-outline-primary:hover[b-5avbwdlxz0] {
            background-color: #0d6efd !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
        }

    .action-btn-horizontal.btn-outline-info[b-5avbwdlxz0] {
        background-color: rgba(13, 202, 240, 0.05) !important;
        border-color: #0dcaf0 !important;
        color: #0dcaf0 !important;
    }

        .action-btn-horizontal.btn-outline-info:hover[b-5avbwdlxz0] {
            background-color: #0dcaf0 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(13, 202, 240, 0.3);
        }

    .action-btn-horizontal.btn-outline-warning[b-5avbwdlxz0] {
        background-color: rgba(255, 193, 7, 0.05) !important;
        border-color: #ffc107 !important;
        color: #ffc107 !important;
    }

        .action-btn-horizontal.btn-outline-warning:hover[b-5avbwdlxz0] {
            background-color: #ffc107 !important;
            color: #212529 !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
        }

    .action-btn-horizontal.btn-outline-danger[b-5avbwdlxz0] {
        background-color: rgba(220, 53, 69, 0.05) !important;
        border-color: #dc3545 !important;
        color: #dc3545 !important;
    }

        .action-btn-horizontal.btn-outline-danger:hover[b-5avbwdlxz0] {
            background-color: #dc3545 !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
        }

/* ===== 8. 分页区域 ===== */
.pagination-section[b-5avbwdlxz0] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 16px;
    border-top: 1px solid #e0e6ed;
    background: #f8fafc;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-top: 10px;
}

/* 左侧分页导航 */
.pagination-left[b-5avbwdlxz0] {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.pagination[b-5avbwdlxz0] {
    margin: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.pagination-sm .page-link[b-5avbwdlxz0] {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border: 1px solid #dee2e6 !important;
    color: #4a6fa5;
    min-width: 28px !important;
    height: 26px !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagination-sm .page-item.active .page-link[b-5avbwdlxz0] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    border-color: #4a6fa5 !important;
    color: white;
}

.pagination-sm .page-item .page-link:hover:not(.disabled)[b-5avbwdlxz0] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #4a6fa5;
}

.pagination-sm .page-item.disabled .page-link[b-5avbwdlxz0] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* 每页显示数量选择器 */
.page-size-selector[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.page-size-label[b-5avbwdlxz0] {
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-size-select[b-5avbwdlxz0] {
    font-size: 10px !important;
    padding: 2px 6px !important;
    height: 26px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px;
    background-color: white;
    min-width: 70px;
}

    .page-size-select:focus[b-5avbwdlxz0] {
        border-color: #4a6fa5 !important;
        box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
    }

/* 右侧分页信息 */
.pagination-info[b-5avbwdlxz0] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 10px !important;
    color: #64748b;
    font-weight: 500;
    text-align: right;
    padding-left: 16px;
}

    .pagination-info span[b-5avbwdlxz0] {
        font-weight: 500 !important;
        color: #2c3e50;
        margin: 0 2px;
    }

/* ===== 9. 模态对话框 ===== */
.modal-content[b-5avbwdlxz0] {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid #e0e6ed;
}

.modal-header[b-5avbwdlxz0] {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e6ed;
    border-radius: 12px 12px 0 0;
}

.modal-header-gradient[b-5avbwdlxz0] {
    background: linear-gradient(135deg, #4a6fa5, #6b8cbc);
    color: white;
}

.modal-header-danger[b-5avbwdlxz0] {
    background: linear-gradient(135deg, #e74c3c, #eb6656);
    color: white;
}

.modal-title[b-5avbwdlxz0] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-white[b-5avbwdlxz0] {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

    .btn-close-white:hover[b-5avbwdlxz0] {
        opacity: 1;
    }

.modal-body[b-5avbwdlxz0] {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer[b-5avbwdlxz0] {
    padding: 15px 20px;
    border-top: 1px solid #e0e6ed;
    border-radius: 0 0 12px 12px;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== 10. 加载和空状态 ===== */
.loading-container[b-5avbwdlxz0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #4a6fa5;
}

    .loading-container p[b-5avbwdlxz0] {
        margin-top: 12px;
        font-size: 14px;
        font-weight: 500;
        color: #6c757d;
    }

.empty-state[b-5avbwdlxz0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
}

.empty-icon[b-5avbwdlxz0] {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-state h4[b-5avbwdlxz0] {
    color: #334155;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
}

.empty-state .text-muted[b-5avbwdlxz0] {
    color: #94a3b8;
    margin-bottom: 16px;
    font-size: 14px;
}

.empty-state .btn[b-5avbwdlxz0] {
    font-size: 13px;
    padding: 6px 16px;
}

/* ===== 11. 上传区域和表单样式 ===== */
.upload-section[b-5avbwdlxz0] {
    margin-bottom: 20px;
}

.section-title[b-5avbwdlxz0] {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title .text-danger[b-5avbwdlxz0] {
        color: #e74c3c;
        font-size: 16px;
    }

/* 文件上传区域样式 */
.file-upload-area[b-5avbwdlxz0],
.image-upload-area[b-5avbwdlxz0] {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .file-upload-area.has-file[b-5avbwdlxz0],
    .image-upload-area.has-image[b-5avbwdlxz0] {
        border-color: #4a6fa5;
        border-style: solid;
        background: #f1f5f9;
    }

    .file-upload-area:hover[b-5avbwdlxz0],
    .image-upload-area:hover[b-5avbwdlxz0] {
        border-color: #4a6fa5;
        background: #f1f5f9;
        transform: translateY(-2px);
    }

/* 上传占位符 */
.upload-placeholder[b-5avbwdlxz0] {
    text-align: center;
    color: #64748b;
}

    .upload-placeholder i[b-5avbwdlxz0] {
        font-size: 48px;
        color: #94a3b8;
        margin-bottom: 10px;
    }

    .upload-placeholder p[b-5avbwdlxz0] {
        margin: 5px 0;
        font-size: 14px;
    }

    .upload-placeholder .small[b-5avbwdlxz0] {
        font-size: 12px;
    }

/* 文件信息显示 */
.file-info[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
}

.file-icon[b-5avbwdlxz0] {
    font-size: 24px;
    color: #4a6fa5;
    min-width: 40px;
    text-align: center;
}

.file-details[b-5avbwdlxz0] {
    flex: 1;
    min-width: 0;
}

.file-name[b-5avbwdlxz0] {
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.file-size[b-5avbwdlxz0] {
    font-size: 12px;
    color: #6c757d;
}

.file-status[b-5avbwdlxz0] {
    margin-top: 4px;
}

/* ===== 12. 移除文件按钮样式（新增/修改） ===== */
.btn-remove-file[b-5avbwdlxz0],
.btn-remove-image[b-5avbwdlxz0] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px; /* 增大宽度 */
    padding: 4px 8px !important;
    font-size: 11px !important; /* 小五号字体 */
    background-color: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    z-index: 10;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .btn-remove-file:hover[b-5avbwdlxz0],
    .btn-remove-image:hover[b-5avbwdlxz0] {
        background-color: #c82333 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .btn-remove-file i[b-5avbwdlxz0],
    .btn-remove-image i[b-5avbwdlxz0] {
        font-size: 12px;
    }

/* 图片预览区域 */
.image-preview[b-5avbwdlxz0] {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f8f9fa;
    border-radius: 6px;
    overflow: hidden; /* 这个很重要，防止内容溢出 */
    border: 1px solid #e0e6ed;
    display: flex; /* 新增：使用 flex 布局 */
    align-items: center; /* 新增：垂直居中 */
    justify-content: center; /* 新增：水平居中 */
}

    /* 图片预览区域内的图片 */
    .image-preview img[b-5avbwdlxz0] {
        width: 100%; /* 修改为 100% */
        height: 100%; /* 修改为 100% */
        object-fit: contain; /* 关键：保持原始比例缩放，不拉伸 */
        background-color: white;
        display: block; /* 避免图片下方的空白间隙 */
        max-width: 100%; /* 确保不超过容器宽度 */
        max-height: 100%; /* 确保不超过容器高度 */
    }

/* 图片操作按钮 */
.image-actions[b-5avbwdlxz0] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.btn-delete-image[b-5avbwdlxz0],
.btn-change-image[b-5avbwdlxz0] {
    padding: 4px 8px !important;
    font-size: 11px !important;
}

/* ===== 13. 表单区域样式 ===== */
.form-label[b-5avbwdlxz0] {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

    .form-label.required[b-5avbwdlxz0]::after {
        content: " *";
        color: #e74c3c;
    }

.form-control-sm[b-5avbwdlxz0],
.form-select-sm[b-5avbwdlxz0] {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}

.form-text[b-5avbwdlxz0] {
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
}

/* 预览信息区域 */
.preview-section[b-5avbwdlxz0] {
    margin-top: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e0e6ed;
}

.preview-card[b-5avbwdlxz0] {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
}

.preview-item[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.preview-label[b-5avbwdlxz0] {
    min-width: 80px;
    font-weight: 600;
    color: #495057;
    font-size: 12px;
}

.preview-value[b-5avbwdlxz0] {
    flex: 1;
    color: #2c3e50;
    font-size: 12px;
    word-break: break-word;
}

/* ===== 14. 确认对话框样式 ===== */
.delete-confirm-content[b-5avbwdlxz0] {
    text-align: center;
    padding: 10px 0;
}

.delete-list[b-5avbwdlxz0] {
    max-height: 200px;
    overflow-y: auto;
    margin: 15px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
}

.delete-item[b-5avbwdlxz0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #e9ecef;
}

    .delete-item:last-child[b-5avbwdlxz0] {
        border-bottom: none;
    }

    .delete-item i[b-5avbwdlxz0] {
        color: #6c757d;
        min-width: 16px;
    }

/* ===== 15. 响应式设计 ===== */

/* 大屏幕（1400px以上） */
@media (min-width: 1400px) {
    .col-actions[b-5avbwdlxz0] {
        width: 200px !important;
    }

    .action-buttons-horizontal[b-5avbwdlxz0] {
        max-width: 200px !important;
    }
}

/* 中等屏幕（992px-1199px） */
@media (max-width: 1199px) and (min-width: 992px) {
    .col-actions[b-5avbwdlxz0] {
        width: 180px !important;
    }

    .action-buttons-horizontal[b-5avbwdlxz0] {
        max-width: 200px !important;
    }

    .action-btn-horizontal span[b-5avbwdlxz0] {
        max-width: 15px !important;
    }
}

/* 平板（768px-991px） */
@media (max-width: 991px) and (min-width: 768px) {
    .col-actions[b-5avbwdlxz0] {
        width: 180px !important;
    }

    .action-buttons-horizontal[b-5avbwdlxz0] {
        max-width: 200px !important;
    }

    .action-btn-horizontal[b-5avbwdlxz0] {
        padding: 3px 1px !important;
        gap: 1px !important;
    }

        .action-btn-horizontal span[b-5avbwdlxz0] {
            max-width: 12px !important;
            font-size: 8px !important;
        }

        .action-btn-horizontal i[b-5avbwdlxz0] {
            font-size: 9px !important;
        }
}

/* 手机（小于768px） */
@media (max-width: 767px) {
    .doctemplate-manage-container[b-5avbwdlxz0] {
        padding: 8px;
        height: auto;
        min-height: calc(100vh - 80px);
    }

    .management-header[b-5avbwdlxz0] {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }

    .header-title-actions[b-5avbwdlxz0] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .page-title[b-5avbwdlxz0] {
        font-size: 16px !important;
        text-align: center;
        justify-content: center;
    }

    .title-action-buttons[b-5avbwdlxz0] {
        justify-content: center;
    }

    .header-stats[b-5avbwdlxz0] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        min-width: auto;
        margin-top: 5px;
    }

    .stat-item[b-5avbwdlxz0] {
        min-width: 60px;
    }

    .stat-value[b-5avbwdlxz0] {
        font-size: 18px;
    }

    .table-responsive[b-5avbwdlxz0] {
        border: 1px solid #e0e6ed;
        border-radius: 6px;
    }

    .table th[b-5avbwdlxz0],
    .table td[b-5avbwdlxz0] {
        padding: 4px 6px;
        font-size: 11px;
    }

    /* 手机端保持操作列固定宽度 */
    .col-actions[b-5avbwdlxz0] {
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }

    .action-buttons-horizontal[b-5avbwdlxz0] {
        max-width: 200px !important;
    }

    /* 在非常小的屏幕上，可以隐藏按钮文字，只显示图标 */
    .action-btn-horizontal span[b-5avbwdlxz0] {
        display: none !important;
    }

    .action-btn-horizontal[b-5avbwdlxz0] {
        justify-content: center !important;
        padding: 3px 2px !important;
        height: 24px !important;
    }

    .pagination-section[b-5avbwdlxz0] {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .pagination-left[b-5avbwdlxz0] {
        justify-content: center;
    }

    .pagination-info[b-5avbwdlxz0] {
        justify-content: center;
        text-align: center;
        font-size: 9px !important;
    }

    .pagination-sm .page-link[b-5avbwdlxz0] {
        padding: 3px 6px !important;
        font-size: 9px !important;
        min-width: 24px !important;
        height: 24px !important;
    }

    .page-size-label[b-5avbwdlxz0] {
        font-size: 9px !important;
    }

    .page-size-select[b-5avbwdlxz0] {
        font-size: 9px !important;
        min-width: 60px;
    }
}

/* 超小手机（小于576px） */
@media (max-width: 575px) {
    .col-actions[b-5avbwdlxz0] {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }

    .action-buttons-horizontal[b-5avbwdlxz0] {
        max-width: 200px !important;
        gap: 3px !important;
    }

    .action-btn-horizontal[b-5avbwdlxz0] {
        height: 22px !important;
        font-size: 9px !important;
    }

        .action-btn-horizontal i[b-5avbwdlxz0] {
            font-size: 9px !important;
        }
}

/* ===== 16. 动画效果 ===== */
@keyframes fadeIn-b-5avbwdlxz0 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.template-row[b-5avbwdlxz0] {
    animation: fadeIn-b-5avbwdlxz0 0.3s ease;
}

.modal-content[b-5avbwdlxz0] {
    animation: fadeIn-b-5avbwdlxz0 0.2s ease;
}

/* ===== 17. 工具类 ===== */
.text-truncate[b-5avbwdlxz0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-1[b-5avbwdlxz0] {
    flex: 1;
}

.min-width-0[b-5avbwdlxz0] {
    min-width: 0;
}

.nowrap[b-5avbwdlxz0] {
    white-space: nowrap;
}

/* ===== 18. 自定义滚动条 ===== */
[b-5avbwdlxz0]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[b-5avbwdlxz0]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 5px;
}

[b-5avbwdlxz0]::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
    border: 2px solid #f1f5f9;
}

    [b-5avbwdlxz0]::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
/* _content/LEAFBlazorApp25/Components/DocTemplate/Pages/DocTemplateSaleAnl.razor.rz.scp.css */
/* ========== 销售分析主容器样式 ========== */
/* 主容器：设置最大宽度、居中对齐和紧凑内边距 */
/* 添加右边垂直滚动条，当内容超出屏幕时显示 */
.sale-analysis-container[b-0ig7wy2eh4] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0px 12px;
    height: 100%; /* 使用视口高度确保滚动区域正确计算 */
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    gap: 8px;
    overflow-y: auto; /* 主容器添加垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
    /* 滚动条美化 */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    /* Webkit浏览器滚动条样式 */
    .sale-analysis-container[b-0ig7wy2eh4]::-webkit-scrollbar {
        width: 8px;
    }

    .sale-analysis-container[b-0ig7wy2eh4]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .sale-analysis-container[b-0ig7wy2eh4]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
        border: 2px solid #f1f5f9;
    }

        .sale-analysis-container[b-0ig7wy2eh4]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

/* ========== 标题和功能区样式 ========== */
/* 管理头部：浅灰色背景，紧凑布局 */
.management-header[b-0ig7wy2eh4] {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.header-main[b-0ig7wy2eh4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* 标题区域 */
.title-section[b-0ig7wy2eh4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon[b-0ig7wy2eh4] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.title-section h1[b-0ig7wy2eh4] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

/* 操作区域 */
.action-section[b-0ig7wy2eh4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: flex-end;
}

/* ========== 日期筛选区域样式 ========== */
.filter-box.date-filter[b-0ig7wy2eh4] {
    min-width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.date-inputs[b-0ig7wy2eh4] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-group[b-0ig7wy2eh4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.date-label[b-0ig7wy2eh4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.date-icon[b-0ig7wy2eh4] {
    color: #3b82f6;
    font-size: 0.9rem;
}

.date-input[b-0ig7wy2eh4] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 32px;
    min-width: 130px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

    .date-input:focus[b-0ig7wy2eh4] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* ========== 过滤功能区域样式 ========== */
.filter-box[b-0ig7wy2eh4] {
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .filter-box .input-group[b-0ig7wy2eh4] {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 36px;
        flex-wrap: nowrap;
    }

.filter-select[b-0ig7wy2eh4] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: white;
    outline: none;
    height: 36px;
    min-width: 120px;
    transition: border-color 0.2s;
    flex-shrink: 0;
    flex: 1;
}

.btn-generate[b-0ig7wy2eh4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #10b981;
    color: white;
    border: 1px solid #10b981;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    white-space: nowrap;
    text-decoration: none;
    width: 100px;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-generate:hover[b-0ig7wy2eh4] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    }

/* 操作按钮组 */
.action-buttons[b-0ig7wy2eh4] {
    display: flex;
    gap: 8px;
}

/* 基础按钮样式 */
.btn[b-0ig7wy2eh4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    outline: none;
    height: 36px;
}

    .btn:focus[b-0ig7wy2eh4] {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

/* 具体按钮样式 */
.btn-export[b-0ig7wy2eh4] {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

    .btn-export:hover[b-0ig7wy2eh4] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

.btn-refresh[b-0ig7wy2eh4] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}

    .btn-refresh:hover[b-0ig7wy2eh4] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
    }

.btn-primary[b-0ig7wy2eh4] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover[b-0ig7wy2eh4] {
        background: #2563eb;
        border-color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }

.btn-export-sm[b-0ig7wy2eh4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #8b5cf6;
    border: 1px solid #8b5cf6;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    height: 32px;
    white-space: nowrap;
}

    .btn-export-sm:hover[b-0ig7wy2eh4] {
        background: #7c3aed;
        border-color: #7c3aed;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
    }

/* ========== 主要内容区域样式 ========== */
.content-area[b-0ig7wy2eh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden; /* 内容区域不显示滚动条，由父容器控制 */
}

/* ========== 加载状态样式 ========== */
.loading-overlay[b-0ig7wy2eh4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner-container[b-0ig7wy2eh4] {
    text-align: center;
}

    .spinner-container p[b-0ig7wy2eh4] {
        margin-top: 1rem;
        color: #64748b;
        font-size: 0.9rem;
    }

/* ========== 统计卡片区域样式 ========== */
/* 【需求】4个统计项，不论窗体如何变化，都是在一行,不换行 */
.stats-cards-section[b-0ig7wy2eh4] {
    margin: 5px 0 8px 0;
    width: 100%;
}

/* 统计网格布局 - 始终4列不换行 */
.stats-grid[b-0ig7wy2eh4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制4列布局 */
    gap: 12px;
    width: 100%;
    min-width: 600px; /* 确保最小宽度，防止挤压变形 */
}

.stat-card[b-0ig7wy2eh4] {
    background: white;
    padding: 5px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    min-width: 0; /* 允许内容收缩 */
    overflow: hidden; /* 防止内容溢出 */
}

    .stat-card:hover[b-0ig7wy2eh4] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

/* 统计图标样式 - 缩小尺寸 */
.stat-icon[b-0ig7wy2eh4] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0; /* 防止图标被压缩 */
}

.total-sales .stat-icon[b-0ig7wy2eh4] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.total-amount .stat-icon[b-0ig7wy2eh4] {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.avg-amount .stat-icon[b-0ig7wy2eh4] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.top-category .stat-icon[b-0ig7wy2eh4] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-content[b-0ig7wy2eh4] {
    flex: 1;
    min-width: 0; /* 允许文本内容收缩 */
}

.stat-value[b-0ig7wy2eh4] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label[b-0ig7wy2eh4] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== 图表区域样式 ========== */
/* 【需求】1.图的标题和区域的上边界的距离减小。2.标题和图例的行间距也减少，节省高度 */
.chart-section[b-0ig7wy2eh4] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
}

.chart-container[b-0ig7wy2eh4] {
    height: 320px;
    padding: 8px 16px 16px 16px; /* 上边距减小为8px */
    position: relative;
}

/* ========== 数据表格区域样式 ========== */
/* 【需求】标题和btn在一行，btn靠右。不论窗体怎么变化，都是在1行 */
.data-section[b-0ig7wy2eh4] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 区域头部 - 标题和按钮在同一行 */
.section-header[b-0ig7wy2eh4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.section-title[b-0ig7wy2eh4] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.date-range-info[b-0ig7wy2eh4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
}

.date-range-text[b-0ig7wy2eh4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
    background: #e2e8f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .date-range-text i[b-0ig7wy2eh4] {
        color: #3b82f6;
        font-size: 0.9rem;
    }

/* 表格容器 */
.table-container[b-0ig7wy2eh4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.table-scroll-wrapper[b-0ig7wy2eh4] {
    flex: 1;
    overflow: auto;
}

/* 表格基础样式 */
.data-table[b-0ig7wy2eh4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

/* 表头样式 */
.table-header[b-0ig7wy2eh4] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

    .table-header th[b-0ig7wy2eh4] {
        padding: 12px 16px;
        text-align: center;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid #475569;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    }

/* 列宽设置 */
.col-period[b-0ig7wy2eh4] {
    min-width: 120px;
    width: 25%;
}

.col-category[b-0ig7wy2eh4] {
    min-width: 150px;
    width: 25%;
}

.col-count[b-0ig7wy2eh4] {
    min-width: 100px;
    width: 25%;
}

.col-amount[b-0ig7wy2eh4] {
    min-width: 100px;
    width: 25%;
}

/* 表格行样式 */
.table-body[b-0ig7wy2eh4] {
    background: white;
}

.table-row[b-0ig7wy2eh4] {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s;
}

    .table-row:hover[b-0ig7wy2eh4] {
        background: #f8fafc;
    }

    .table-row td[b-0ig7wy2eh4] {
        padding: 10px 16px;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8rem;
        text-align: center;
    }

/* 数字列样式 */
.number[b-0ig7wy2eh4] {
    text-align: right !important;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ========== 空状态样式 ========== */
.empty-state[b-0ig7wy2eh4] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.empty-content[b-0ig7wy2eh4] {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

.empty-icon[b-0ig7wy2eh4] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.empty-content h3[b-0ig7wy2eh4] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #475569;
}

.empty-content p[b-0ig7wy2eh4] {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

/* ========== 滚动条美化 ========== */
.table-scroll-wrapper[b-0ig7wy2eh4] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar {
        width: 12px;
        height: 14px;
    }

    .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 6px;
    }

    .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 6px;
        border: 2px solid #f1f5f9;
    }

        .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar-thumb:horizontal {
            background: #3b82f6;
        }

            .table-scroll-wrapper[b-0ig7wy2eh4]::-webkit-scrollbar-thumb:horizontal:hover {
                background: #2563eb;
            }

/* ========== 响应式设计 ========== */
/* 中等屏幕适配 */
@media (max-width: 1400px) {
    .action-section[b-0ig7wy2eh4] {
        gap: 8px;
    }

    .filter-box.date-filter[b-0ig7wy2eh4] {
        min-width: 300px;
    }

    .date-inputs[b-0ig7wy2eh4] {
        gap: 8px;
    }

    .date-input[b-0ig7wy2eh4] {
        min-width: 120px;
    }

    .filter-box[b-0ig7wy2eh4] {
        min-width: 200px;
    }

    /* 中等屏幕下统计卡片适当缩小 */
    .stats-grid[b-0ig7wy2eh4] {
        min-width: 500px;
        gap: 10px;
    }

    .stat-card[b-0ig7wy2eh4] {
        padding: 5px 12px;
        gap: 10px;
    }

    .stat-icon[b-0ig7wy2eh4] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .stat-value[b-0ig7wy2eh4] {
        font-size: 1.2rem;
    }

    .stat-label[b-0ig7wy2eh4] {
        font-size: 0.8rem;
    }
}

/* 平板适配 */
@media (max-width: 1200px) {
    .stats-grid[b-0ig7wy2eh4] {
        min-width: 450px;
        gap: 8px;
    }

    .stat-card[b-0ig7wy2eh4] {
        padding: 5px 10px;
        gap: 8px;
        height: 55px;
    }

    .stat-icon[b-0ig7wy2eh4] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .stat-value[b-0ig7wy2eh4] {
        font-size: 1.1rem;
    }

    .stat-label[b-0ig7wy2eh4] {
        font-size: 0.75rem;
    }
}

/* 平板适配 */
@media (max-width: 992px) {
    .sale-analysis-container[b-0ig7wy2eh4] {
        padding: 4px 8px;
    }

    .management-header[b-0ig7wy2eh4] {
        padding: 6px 12px;
        position: relative;
    }

    .header-main[b-0ig7wy2eh4] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .title-section[b-0ig7wy2eh4] {
        justify-content: center;
    }

    .action-section[b-0ig7wy2eh4] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-0ig7wy2eh4] {
        width: 100%;
    }

    .date-inputs[b-0ig7wy2eh4] {
        flex-wrap: nowrap;
    }

    .filter-box[b-0ig7wy2eh4] {
        width: 100%;
    }

        .filter-box .input-group[b-0ig7wy2eh4] {
            flex-wrap: nowrap;
        }

    .filter-select[b-0ig7wy2eh4] {
        min-width: 120px;
        flex: 1;
    }

    .btn-generate[b-0ig7wy2eh4] {
        width: 100px;
        flex-shrink: 0;
    }

    .section-header[b-0ig7wy2eh4] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .date-range-info[b-0ig7wy2eh4] {
        width: 100%;
        justify-content: space-between;
    }

    .btn-export-sm[b-0ig7wy2eh4] {
        align-self: flex-end;
    }

    /* 平板下统计卡片进一步缩小 */
    .stats-grid[b-0ig7wy2eh4] {
        min-width: 600px;
        gap: 6px;
    }

    .stat-card[b-0ig7wy2eh4] {
        padding: 4px 8px;
        gap: 6px;
        height: 50px;
    }

    .stat-icon[b-0ig7wy2eh4] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .stat-value[b-0ig7wy2eh4] {
        font-size: 1rem;
    }

    .stat-label[b-0ig7wy2eh4] {
        font-size: 0.7rem;
    }
}

/* 手机适配 */
@media (max-width: 768px) {
    .sale-analysis-container[b-0ig7wy2eh4] {
        padding: 2px 4px;
    }

    .management-header[b-0ig7wy2eh4] {
        padding: 4px 8px;
    }

    .action-section[b-0ig7wy2eh4] {
        flex-direction: column;
        gap: 8px;
    }

    .filter-box.date-filter[b-0ig7wy2eh4] {
        width: 100%;
        padding: 6px 8px;
    }

    .date-inputs[b-0ig7wy2eh4] {
        flex-direction: column;
        gap: 6px;
    }

    .date-group[b-0ig7wy2eh4] {
        width: 100%;
    }

    .date-input[b-0ig7wy2eh4] {
        width: 100%;
        min-width: unset;
    }

    .filter-box[b-0ig7wy2eh4] {
        width: 100%;
        padding: 6px 8px;
    }

        .filter-box .input-group[b-0ig7wy2eh4] {
            flex-wrap: nowrap;
            height: auto;
            gap: 6px;
        }

    .filter-select[b-0ig7wy2eh4] {
        min-width: 100px;
        flex: 2;
    }

    .btn-generate[b-0ig7wy2eh4] {
        width: 90px;
        flex-shrink: 0;
    }

    .action-buttons[b-0ig7wy2eh4] {
        width: 100%;
        justify-content: center;
    }

    /* 手机上统计卡片保持4列但进一步压缩 */
    .stats-grid[b-0ig7wy2eh4] {
        min-width: 450px;
        gap: 4px;
    }

    .stat-card[b-0ig7wy2eh4] {
        padding: 3px 6px;
        gap: 4px;
        height: 45px;
    }

    .stat-icon[b-0ig7wy2eh4] {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .stat-value[b-0ig7wy2eh4] {
        font-size: 0.9rem;
    }

    .stat-label[b-0ig7wy2eh4] {
        font-size: 0.65rem;
        letter-spacing: 0.3px;
    }

    .chart-container[b-0ig7wy2eh4] {
        height: 280px;
        padding: 6px 12px 12px 12px;
    }

    .section-title[b-0ig7wy2eh4] {
        font-size: 1.1rem;
    }

    .section-header[b-0ig7wy2eh4] {
        flex-direction: column; /* 手机上改为垂直布局 */
        gap: 10px;
    }

    .date-range-info[b-0ig7wy2eh4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .filter-box .input-group[b-0ig7wy2eh4] {
        gap: 4px;
    }

    .filter-select[b-0ig7wy2eh4] {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .btn-generate[b-0ig7wy2eh4] {
        width: 80px;
        font-size: 0.8rem;
        padding: 6px 8px;
    }

        .btn-generate span[b-0ig7wy2eh4] {
            display: none;
        }

        .btn-generate i[b-0ig7wy2eh4] {
            margin-right: 0;
        }

    .section-title[b-0ig7wy2eh4] {
        font-size: 1rem;
    }

    .chart-container[b-0ig7wy2eh4] {
        height: 250px;
        padding: 4px 8px 8px 8px;
    }

    .section-header[b-0ig7wy2eh4] {
        flex-direction: column;
        gap: 8px;
    }

    .date-range-text[b-0ig7wy2eh4] {
        font-size: 0.8rem;
        padding: 3px 8px;
    }

    .btn-export-sm[b-0ig7wy2eh4] {
        width: 100%;
        justify-content: center;
    }

    /* 超小屏幕下统计卡片极致压缩 */
    .stats-grid[b-0ig7wy2eh4] {
        min-width: 300px;
        gap: 3px;
    }

    .stat-card[b-0ig7wy2eh4] {
        padding: 2px 4px;
        gap: 3px;
        height: 40px;
    }

    .stat-icon[b-0ig7wy2eh4] {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .stat-value[b-0ig7wy2eh4] {
        font-size: 0.8rem;
    }

    .stat-label[b-0ig7wy2eh4] {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }
}

/* 动画效果 */
@keyframes fadeIn-b-0ig7wy2eh4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sale-analysis-container[b-0ig7wy2eh4] {
    animation: fadeIn-b-0ig7wy2eh4 0.3s ease-out;
}

.stat-card[b-0ig7wy2eh4] {
    animation: fadeIn-b-0ig7wy2eh4 0.2s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/AllQuestionsMode.razor.rz.scp.css */
.all-questions-mode[b-grs7fo0p0r] {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.loading[b-grs7fo0p0r] {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.questions-content[b-grs7fo0p0r] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-section[b-grs7fo0p0r] {
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    overflow: hidden;
}

.category-header[b-grs7fo0p0r] {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-grs7fo0p0r] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.category-weight[b-grs7fo0p0r] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.questions-list[b-grs7fo0p0r] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-item[b-grs7fo0p0r] {
    padding: 16px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
}

.question-text[b-grs7fo0p0r] {
    margin-bottom: 12px;
    font-weight: 500;
    color: #2c3e50;
}

.question-number[b-grs7fo0p0r] {
    background: #3498db;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.options-grid[b-grs7fo0p0r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-label[b-grs7fo0p0r] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .option-label:hover[b-grs7fo0p0r] {
        border-color: #3498db;
        background: #ebf5fb;
    }

    .option-label input[b-grs7fo0p0r] {
        margin-right: 8px;
    }

.option-text[b-grs7fo0p0r] {
    flex: 1;
}

.option-score[b-grs7fo0p0r] {
    background: #27ae60;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}

.text-answer-input[b-grs7fo0p0r] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

    .text-answer-input:focus[b-grs7fo0p0r] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvalAdminProject.razor.rz.scp.css */
@* wwwroot/css/Admin/EvalAdminProject.css *@
/* ========== 整体容器样式 ========== */
.eval-admin-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 页面头部样式 ========== */
.admin-header[b-cobiqv56h2] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content h1[b-cobiqv56h2] {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-content p[b-cobiqv56h2] {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.header-actions[b-cobiqv56h2] {
    display: flex;
    gap: 12px;
}

.btn[b-cobiqv56h2] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

    .btn-primary:hover[b-cobiqv56h2] {
        background: #2980b9;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
    }

.btn-secondary[b-cobiqv56h2] {
    background: #95a5a6;
    color: white;
}

    .btn-secondary:hover[b-cobiqv56h2] {
        background: #7f8c8d;
        transform: translateY(-1px);
    }

/* ========== 主要内容区域样式 ========== */
.admin-main-content[b-cobiqv56h2] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========== 左侧导航样式 ========== */
.admin-sidebar[b-cobiqv56h2] {
    width: 260px;
    background: white;
    border-right: 1px solid #e1e8ed;
    padding: 20px 0;
    overflow-y: auto;
}

.sidebar-section[b-cobiqv56h2] {
    margin-bottom: 24px;
}

    .sidebar-section h3[b-cobiqv56h2] {
        margin: 0 0 12px 16px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #7f8c8d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.nav-list[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
}

.nav-item[b-cobiqv56h2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    color: #5d6d7e;
}

    .nav-item:hover[b-cobiqv56h2] {
        background: #f8f9fa;
        color: #3498db;
    }

    .nav-item.active[b-cobiqv56h2] {
        background: #ebf5fb;
        border-left-color: #3498db;
        color: #3498db;
        font-weight: 500;
    }

    .nav-item i[b-cobiqv56h2] {
        width: 16px;
        text-align: center;
    }

/* ========== 右侧内容区域样式 ========== */
.admin-content-area[b-cobiqv56h2] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: white;
    margin: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content-section[b-cobiqv56h2] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-cobiqv56h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

    .section-header h2[b-cobiqv56h2] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
        font-size: 1.3rem;
    }

.section-actions[b-cobiqv56h2] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box[b-cobiqv56h2] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-box input[b-cobiqv56h2] {
        padding: 8px 12px 8px 36px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 0.9rem;
        width: 250px;
        transition: all 0.3s ease;
    }

        .search-box input:focus[b-cobiqv56h2] {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

    .search-box i[b-cobiqv56h2] {
        position: absolute;
        left: 12px;
        color: #7f8c8d;
        font-size: 0.9rem;
    }

/* ========== 数据表格样式 ========== */
.data-table-container[b-cobiqv56h2] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
}

.data-table[b-cobiqv56h2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .data-table th[b-cobiqv56h2] {
        background: #f8f9fa;
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid #e1e8ed;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table td[b-cobiqv56h2] {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: top;
    }

    .data-table tr:hover[b-cobiqv56h2] {
        background: #f8f9fa;
    }

    .data-table tr:last-child td[b-cobiqv56h2] {
        border-bottom: none;
    }

/* ========== 表格单元格样式 ========== */
.code-cell[b-cobiqv56h2] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: #2c3e50;
}

.name-cell strong[b-cobiqv56h2] {
    display: block;
    margin-bottom: 4px;
    color: #2c3e50;
}

.description[b-cobiqv56h2] {
    font-size: 0.8rem;
    color: #7f8c8d;
    line-height: 1.3;
}

/* ========== 徽章样式 ========== */
.badge[b-cobiqv56h2] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.badge-iq[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

.badge-eq[b-cobiqv56h2] {
    background: #e74c3c;
    color: white;
}

.badge-aq[b-cobiqv56h2] {
    background: #f39c12;
    color: white;
}

.badge-business[b-cobiqv56h2] {
    background: #2ecc71;
    color: white;
}

.badge-project[b-cobiqv56h2] {
    background: #9b59b6;
    color: white;
}

.badge-digital[b-cobiqv56h2] {
    background: #1abc9c;
    color: white;
}

.badge-scheduleengineer[b-cobiqv56h2] {
    background: #d35400;
    color: white;
}

.badge-projectschedule[b-cobiqv56h2] {
    background: #34495e;
    color: white;
}

.badge-mode[b-cobiqv56h2] {
    background: #bdc3c7;
    color: white;
}

/* ========== 状态样式 ========== */
.status[b-cobiqv56h2] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

    .status.active[b-cobiqv56h2] {
        background: #d5f4e6;
        color: #27ae60;
    }

    .status.inactive[b-cobiqv56h2] {
        background: #fadbd8;
        color: #e74c3c;
    }

/* ========== 操作按钮样式 ========== */
.actions[b-cobiqv56h2] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.btn-sm[b-cobiqv56h2] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-info[b-cobiqv56h2] {
    background: #3498db;
    color: white;
}

    .btn-info:hover[b-cobiqv56h2] {
        background: #2980b9;
    }

.btn-warning[b-cobiqv56h2] {
    background: #f39c12;
    color: white;
}

    .btn-warning:hover[b-cobiqv56h2] {
        background: #e67e22;
    }

.btn-danger[b-cobiqv56h2] {
    background: #e74c3c;
    color: white;
}

    .btn-danger:hover[b-cobiqv56h2] {
        background: #c0392b;
    }

/* ========== 空状态样式 ========== */
.empty-state[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bdc3c7;
    text-align: center;
}

    .empty-state i[b-cobiqv56h2] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .empty-state p[b-cobiqv56h2] {
        margin: 0;
        font-size: 1rem;
    }

/* ========== 模态框样式 ========== */
.modal-overlay[b-cobiqv56h2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-cobiqv56h2] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-cobiqv56h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .modal-header h3[b-cobiqv56h2] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }

.btn-close[b-cobiqv56h2] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-cobiqv56h2] {
        color: #e74c3c;
    }

.modal-body[b-cobiqv56h2] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-cobiqv56h2] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ========== 表单样式 ========== */
.form-row[b-cobiqv56h2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-cobiqv56h2] {
    margin-bottom: 16px;
}

    .form-group label[b-cobiqv56h2] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 0.9rem;
    }

.form-control[b-cobiqv56h2] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-cobiqv56h2] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

.form-hint[b-cobiqv56h2] {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 4px;
}

/* ========== 复选框样式 ========== */
.checkbox-label[b-cobiqv56h2] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

    .checkbox-label input[b-cobiqv56h2] {
        display: none;
    }

.checkmark[b-cobiqv56h2] {
    width: 18px;
    height: 18px;
    border: 2px solid #bdc3c7;
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-label input:checked + .checkmark[b-cobiqv56h2] {
    background: #3498db;
    border-color: #3498db;
}

    .checkbox-label input:checked + .checkmark[b-cobiqv56h2]::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .admin-main-content[b-cobiqv56h2] {
        flex-direction: column;
    }

    .admin-sidebar[b-cobiqv56h2] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e1e8ed;
    }

    .nav-list[b-cobiqv56h2] {
        flex-direction: row;
        overflow-x: auto;
    }

    .nav-item[b-cobiqv56h2] {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

        .nav-item.active[b-cobiqv56h2] {
            border-left-color: transparent;
            border-bottom-color: #3498db;
        }
}

/* ========== 占位区域样式 ========== */
.placeholder-section[b-cobiqv56h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    text-align: center;
    color: #7f8c8d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #e1e8ed;
}

    .placeholder-section h3[b-cobiqv56h2] {
        margin-bottom: 12px;
        color: #2c3e50;
    }

    .placeholder-section p[b-cobiqv56h2] {
        margin: 0;
        font-size: 1rem;
    }

@media (max-width: 768px) {
    .admin-header[b-cobiqv56h2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .header-actions[b-cobiqv56h2] {
        justify-content: center;
    }

    .section-header[b-cobiqv56h2] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .section-actions[b-cobiqv56h2] {
        justify-content: center;
    }

    .search-box input[b-cobiqv56h2] {
        width: 100%;
    }

    .form-row[b-cobiqv56h2] {
        grid-template-columns: 1fr;
    }

    .data-table[b-cobiqv56h2] {
        font-size: 0.8rem;
    }

    .actions[b-cobiqv56h2] {
        flex-direction: column;
        gap: 4px;
    }

    .btn-sm[b-cobiqv56h2] {
        width: 28px;
        height: 28px;
    }
}

/* ========== 滚动条样式 ========== */
.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-track,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-track,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar-track,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.data-table-container[b-cobiqv56h2]::-webkit-scrollbar-thumb,
.modal-body[b-cobiqv56h2]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .admin-sidebar[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .admin-content-area[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .data-table-container[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover,
    .modal-body[b-cobiqv56h2]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvalCategoryManager.razor.rz.scp.css */
@* Components/Admin/EvalCategoryManager.razor.css *@ .category-manager {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-9pi7injb91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

    .section-header h2[b-9pi7injb91] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
        font-size: 1.3rem;
    }

.section-actions[b-9pi7injb91] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-control[b-9pi7injb91] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 200px;
}

    .form-control.readonly[b-9pi7injb91] {
        background: #f8f9fa;
        color: #6c757d;
        border-color: #e9ecef;
    }

.btn[b-9pi7injb91] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-primary[b-9pi7injb91] {
    background: #3498db;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-9pi7injb91] {
        background: #2980b9;
    }

    .btn-primary:disabled[b-9pi7injb91] {
        background: #bdc3c7;
        cursor: not-allowed;
    }

.data-table-container[b-9pi7injb91] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
}

.data-table[b-9pi7injb91] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .data-table th[b-9pi7injb91] {
        background: #f8f9fa;
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid #e1e8ed;
        position: sticky;
        top: 0;
    }

    .data-table td[b-9pi7injb91] {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: top;
    }

    .data-table tr:hover[b-9pi7injb91] {
        background: #f8f9fa;
    }

.code-cell[b-9pi7injb91] {
    font-family: 'Consolas', monospace;
    font-weight: 600;
    color: #2c3e50;
}

.name-cell strong[b-9pi7injb91] {
    color: #2c3e50;
}

.description[b-9pi7injb91] {
    color: #7f8c8d;
    font-size: 0.85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions[b-9pi7injb91] {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.btn-sm[b-9pi7injb91] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-info[b-9pi7injb91] {
    background: #3498db;
    color: white;
}

    .btn-info:hover[b-9pi7injb91] {
        background: #2980b9;
    }

.btn-danger[b-9pi7injb91] {
    background: #e74c3c;
    color: white;
}

    .btn-danger:hover[b-9pi7injb91] {
        background: #c0392b;
    }

.empty-state[b-9pi7injb91] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bdc3c7;
    text-align: center;
}

    .empty-state i[b-9pi7injb91] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .empty-state p[b-9pi7injb91] {
        margin: 0;
        font-size: 1rem;
    }

/* 模态框样式（与主页面保持一致） */
.modal-overlay[b-9pi7injb91] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-9pi7injb91] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-9pi7injb91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

    .modal-header h3[b-9pi7injb91] {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }

.btn-close[b-9pi7injb91] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-9pi7injb91] {
        color: #e74c3c;
    }

.modal-body[b-9pi7injb91] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-9pi7injb91] {
    padding: 16px 24px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 表单样式 */
.form-row[b-9pi7injb91] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-9pi7injb91] {
    margin-bottom: 16px;
}

    .form-group label[b-9pi7injb91] {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 0.9rem;
    }

.form-control[b-9pi7injb91] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-9pi7injb91] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

.form-hint[b-9pi7injb91] {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 4px;
}

.btn-secondary[b-9pi7injb91] {
    background: #95a5a6;
    color: white;
}

    .btn-secondary:hover[b-9pi7injb91] {
        background: #7f8c8d;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvaluationProject.razor.rz.scp.css */
/* EvaluationProject.razor.css - 现代科技风格 */

/* ========== 全局变量和基础样式 ========== */
:root[b-7hzj66g6gg] {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --tech-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --light-bg: #f8fafc;
    --light-card: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 主容器样式 ========== */
.evaluation-master-container[b-7hzj66g6gg] {
    display: flex;
    height: 100%;
    background: var(--light-bg);
    overflow: hidden;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 垂直分割条样式 ========== */
.vertical-splitter[b-7hzj66g6gg] {
    width: 8px;
    background: transparent;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    transition: var(--transition-fast);
}

    .vertical-splitter:hover[b-7hzj66g6gg] {
        background: var(--accent-color);
    }

        .vertical-splitter:hover .splitter-handle[b-7hzj66g6gg] {
            opacity: 1;
            transform: scale(1.1);
        }

.splitter-handle[b-7hzj66g6gg] {
    width: 4px;
    height: 40px;
    background: var(--accent-color);
    border-radius: 2px;
    opacity: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* ========== 左区域：项目控制区 ========== */
.left-control-panel[b-7hzj66g6gg] {
    width: 320px;
    min-width: 280px;
    max-width: 480px;
    background: var(--light-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    z-index: 10;
    position: relative;
    overflow: hidden;
}

/* 控制按钮区 */
.control-button-area[b-7hzj66g6gg] {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header[b-7hzj66g6gg] {
    margin-bottom: 20px;
}

    .section-header h3[b-7hzj66g6gg] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header i[b-7hzj66g6gg] {
        font-size: 1.1rem;
        opacity: 0.9;
    }

.button-grid[b-7hzj66g6gg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.control-btn[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-sm);
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
}

    .control-btn:hover:not(.disabled):not([disabled])[b-7hzj66g6gg] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .control-btn.disabled[b-7hzj66g6gg],
    .control-btn:disabled[b-7hzj66g6gg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .control-btn i[b-7hzj66g6gg] {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .control-btn span[b-7hzj66g6gg] {
        font-size: 0.8rem;
    }

.btn-load[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.btn-submit[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-result[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.btn-reset[b-7hzj66g6gg] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.current-project-info[b-7hzj66g6gg] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    backdrop-filter: blur(10px);
}

.project-badge[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .project-badge i[b-7hzj66g6gg] {
        font-size: 1.5rem;
        opacity: 0.9;
    }

.badge-content[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
}

    .badge-content strong[b-7hzj66g6gg] {
        font-size: 0.8rem;
        opacity: 0.9;
        margin-bottom: 2px;
    }

.project-name[b-7hzj66g6gg] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 项目选择区 */
.project-selection-panel[b-7hzj66g6gg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-7hzj66g6gg] {
    padding: 16px 20px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .panel-header h4[b-7hzj66g6gg] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.project-count[b-7hzj66g6gg] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--light-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.project-list-container[b-7hzj66g6gg] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.project-list[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-card[b-7hzj66g6gg] {
    background: var(--light-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

    .project-card[b-7hzj66g6gg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--accent-color);
        transform: scaleY(0);
        transition: var(--transition-fast);
    }

    .project-card:hover[b-7hzj66g6gg] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

        .project-card:hover[b-7hzj66g6gg]::before {
            transform: scaleY(1);
        }

    .project-card.selected[b-7hzj66g6gg] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
        box-shadow: var(--shadow-sm);
    }

        .project-card.selected[b-7hzj66g6gg]::before {
            transform: scaleY(1);
            background: var(--accent-color);
        }

.project-card-header[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.project-icon[b-7hzj66g6gg] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.project-card-title[b-7hzj66g6gg] {
    flex: 1;
}

    .project-card-title h5[b-7hzj66g6gg] {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.project-category[b-7hzj66g6gg] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--light-bg);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

.selection-indicator[b-7hzj66g6gg] {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.project-card-body[b-7hzj66g6gg] {
    margin-top: 12px;
}

.project-description[b-7hzj66g6gg] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-meta[b-7hzj66g6gg] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
}

.meta-item[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

    .meta-item i[b-7hzj66g6gg] {
        font-size: 0.7rem;
    }

.empty-state[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

    .empty-state i[b-7hzj66g6gg] {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state p[b-7hzj66g6gg] {
        margin: 0 0 4px 0;
        font-size: 1rem;
    }

    .empty-state small[b-7hzj66g6gg] {
        font-size: 0.85rem;
    }

/* ========== 右区域：测评工作区 ========== */
.right-work-panel[b-7hzj66g6gg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--light-bg);
}

/* 水平分割条 */
.horizontal-splitter[b-7hzj66g6gg] {
    height: 8px;
    background: transparent;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 50;
    transition: var(--transition-fast);
}

    .horizontal-splitter:hover[b-7hzj66g6gg] {
        background: var(--accent-color);
    }

        .horizontal-splitter:hover .splitter-handle-horizontal[b-7hzj66g6gg] {
            opacity: 1;
            transform: scale(1.1);
        }

.splitter-handle-horizontal[b-7hzj66g6gg] {
    height: 4px;
    width: 40px;
    background: var(--accent-color);
    border-radius: 2px;
    opacity: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* 上部：题目显示区 */
.questions-display-panel[b-7hzj66g6gg] {
    flex: 1;
    min-height: 200px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.welcome-state[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.welcome-illustration[b-7hzj66g6gg] {
    margin-bottom: 30px;
}

.icon-circle[b-7hzj66g6gg] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.welcome-content h2[b-7hzj66g6gg] {
    color: var(--text-primary);
    margin: 0 0 16px 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.welcome-description[b-7hzj66g6gg] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 30px;
}

.welcome-features[b-7hzj66g6gg] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.feature[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .feature i[b-7hzj66g6gg] {
        font-size: 1.8rem;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .feature span[b-7hzj66g6gg] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
    }

.result-state[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.result-header-icon[b-7hzj66g6gg] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.result-state-content h3[b-7hzj66g6gg] {
    font-size: 2rem;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.result-state-content p[b-7hzj66g6gg] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 25px;
}

.btn-view-full-report[b-7hzj66g6gg] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

    .btn-view-full-report:hover[b-7hzj66g6gg] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.questions-work-area[b-7hzj66g6gg] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.work-area-header[b-7hzj66g6gg] {
    padding: 16px 20px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-indicator[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 300px;
}

.progress-bar[b-7hzj66g6gg] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-7hzj66g6gg] {
    height: 100%;
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-text[b-7hzj66g6gg] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.display-mode-toggle[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .display-mode-toggle span[b-7hzj66g6gg] {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

.mode-btn[b-7hzj66g6gg] {
    padding: 6px 12px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .mode-btn:hover[b-7hzj66g6gg] {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }

    .mode-btn.active[b-7hzj66g6gg] {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: white;
    }

.questions-content[b-7hzj66g6gg] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* 下部：测评结果区 */
.results-display-panel[b-7hzj66g6gg] {
    background: var(--light-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}

    .results-display-panel.collapsed[b-7hzj66g6gg] {
        max-height: 60px;
        overflow: hidden;
    }

    .results-display-panel.expanded[b-7hzj66g6gg] {
        flex: 1;
        max-height: 45vh;
        min-height: 200px;
    }

.results-header[b-7hzj66g6gg] {
    padding: 16px 20px;
    background: var(--dark-card);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .results-header:hover[b-7hzj66g6gg] {
        background: #2d3748;
    }

    .results-header h4[b-7hzj66g6gg] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.results-toggle-icon[b-7hzj66g6gg] {
    margin-left: 8px;
    transition: var(--transition-fast);
}

.results-actions[b-7hzj66g6gg] {
    display: flex;
    gap: 8px;
}

.action-btn[b-7hzj66g6gg] {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

    .action-btn:hover[b-7hzj66g6gg] {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }

.results-content[b-7hzj66g6gg] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.report-container[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-summary[b-7hzj66g6gg] {
    display: flex;
    gap: 30px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.total-score-display[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.score-circle-large[b-7hzj66g6gg] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
    position: relative;
}

    .score-circle-large[b-7hzj66g6gg]::before {
        content: '';
        position: absolute;
        inset: -6px;
        border: 2px dashed rgba(102, 126, 234, 0.3);
        border-radius: 50%;
    }

.score-value-large[b-7hzj66g6gg] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.score-label-large[b-7hzj66g6gg] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.score-breakdown[b-7hzj66g6gg] {
    display: flex;
    gap: 16px;
}

.breakdown-item[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.breakdown-label[b-7hzj66g6gg] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.breakdown-value[b-7hzj66g6gg] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--light-bg);
    padding: 2px 8px;
    border-radius: 12px;
}

.assessment-summary[b-7hzj66g6gg] {
    flex: 1;
}

    .assessment-summary h5[b-7hzj66g6gg] {
        margin: 0 0 12px 0;
        font-size: 1rem;
        color: var(--text-primary);
    }

.assessment-level[b-7hzj66g6gg] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: white;
}

.level-excellent[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.level-good[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.level-average[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.level-poor[b-7hzj66g6gg] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.assessment-suggestions[b-7hzj66g6gg] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.category-scores-section h5[b-7hzj66g6gg] {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.categories-grid[b-7hzj66g6gg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.category-score-card[b-7hzj66g6gg] {
    background: var(--light-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    transition: var(--transition-fast);
}

    .category-score-card:hover[b-7hzj66g6gg] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.category-header[b-7hzj66g6gg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.category-name[b-7hzj66g6gg] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.category-score[b-7hzj66g6gg] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.category-progress[b-7hzj66g6gg] {
    margin-bottom: 12px;
}

.progress-track[b-7hzj66g6gg] {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-thumb[b-7hzj66g6gg] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.category-meta[b-7hzj66g6gg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-badge[b-7hzj66g6gg] {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.badge-excellent[b-7hzj66g6gg] {
    background: rgba(67, 233, 123, 0.1);
    color: #10b981;
}

.badge-good[b-7hzj66g6gg] {
    background: rgba(79, 172, 254, 0.1);
    color: #3b82f6;
}

.badge-average[b-7hzj66g6gg] {
    background: rgba(250, 112, 154, 0.1);
    color: #ec4899;
}

.badge-poor[b-7hzj66g6gg] {
    background: rgba(102, 126, 234, 0.1);
    color: #8b5cf6;
}

.badge-default[b-7hzj66g6gg] {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.score-percentage[b-7hzj66g6gg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.recommendations-section h5[b-7hzj66g6gg] {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommendations-list[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-item[b-7hzj66g6gg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-color);
}

    .recommendation-item i[b-7hzj66g6gg] {
        color: var(--accent-color);
        font-size: 0.9rem;
    }

    .recommendation-item span[b-7hzj66g6gg] {
        font-size: 0.9rem;
        color: var(--text-primary);
        flex: 1;
    }

.empty-results[b-7hzj66g6gg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

    .empty-results i[b-7hzj66g6gg] {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.5;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-results p[b-7hzj66g6gg] {
        margin: 0 0 4px 0;
        font-size: 1rem;
    }

    .empty-results small[b-7hzj66g6gg] {
        font-size: 0.85rem;
    }

/* ========== 滚动条样式 ========== */
.project-list-container[b-7hzj66g6gg]::-webkit-scrollbar,
.questions-content[b-7hzj66g6gg]::-webkit-scrollbar,
.results-content[b-7hzj66g6gg]::-webkit-scrollbar {
    width: 6px;
}

.project-list-container[b-7hzj66g6gg]::-webkit-scrollbar-track,
.questions-content[b-7hzj66g6gg]::-webkit-scrollbar-track,
.results-content[b-7hzj66g6gg]::-webkit-scrollbar-track {
    background: transparent;
}

.project-list-container[b-7hzj66g6gg]::-webkit-scrollbar-thumb,
.questions-content[b-7hzj66g6gg]::-webkit-scrollbar-thumb,
.results-content[b-7hzj66g6gg]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .project-list-container[b-7hzj66g6gg]::-webkit-scrollbar-thumb:hover,
    .questions-content[b-7hzj66g6gg]::-webkit-scrollbar-thumb:hover,
    .results-content[b-7hzj66g6gg]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .evaluation-master-container[b-7hzj66g6gg] {
        flex-direction: column;
    }

    .vertical-splitter[b-7hzj66g6gg] {
        display: none;
    }

    .left-control-panel[b-7hzj66g6gg] {
        width: 100%;
        max-width: none;
        height: 300px;
        flex-shrink: 0;
    }

    .project-list[b-7hzj66g6gg] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .button-grid[b-7hzj66g6gg] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .button-grid[b-7hzj66g6gg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-features[b-7hzj66g6gg] {
        flex-direction: column;
        gap: 20px;
    }

    .report-summary[b-7hzj66g6gg] {
        flex-direction: column;
        text-align: center;
    }

    .categories-grid[b-7hzj66g6gg] {
        grid-template-columns: 1fr;
    }

    .work-area-header[b-7hzj66g6gg] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .progress-indicator[b-7hzj66g6gg] {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .panel-header[b-7hzj66g6gg] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .project-count[b-7hzj66g6gg] {
        align-self: flex-start;
    }

    .control-btn span[b-7hzj66g6gg] {
        display: none;
    }

    .control-btn i[b-7hzj66g6gg] {
        margin-bottom: 0;
        font-size: 1.4rem;
    }
}

/* ========== 动画效果 ========== */
@keyframes fadeIn-b-7hzj66g6gg {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-card[b-7hzj66g6gg] {
    animation: fadeIn-b-7hzj66g6gg 0.3s ease forwards;
}

@keyframes pulse-b-7hzj66g6gg {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.control-btn:not(.disabled):not([disabled]):hover[b-7hzj66g6gg] {
    animation: pulse-b-7hzj66g6gg 1.5s infinite;
}
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvaluationProjectV1.razor.rz.scp.css */
@* wwwroot/css/EvaluationProject.css *@
/* ========== 整体容器样式 ========== */
.evaluation-project-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 上部区域样式 ========== */
.top-section[b-69gkb9yrd4] {
    background: #ffffff;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    min-height: 80px;
}

.project-selection-area[b-69gkb9yrd4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-header h3[b-69gkb9yrd4] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.project-radio-group[b-69gkb9yrd4] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.project-radio-item[b-69gkb9yrd4] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    min-width: 200px;
}

    .project-radio-item:hover[b-69gkb9yrd4] {
        border-color: #3498db;
        background: #f8f9fa;
    }

    .project-radio-item.selected[b-69gkb9yrd4] {
        border-color: #3498db;
        background: #ebf5fb;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    }

    .project-radio-item input[b-69gkb9yrd4] {
        display: none;
    }

.radio-dot[b-69gkb9yrd4] {
    width: 16px;
    height: 16px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.project-radio-item.selected .radio-dot[b-69gkb9yrd4] {
    border-color: #3498db;
    background: #3498db;
}

    .project-radio-item.selected .radio-dot[b-69gkb9yrd4]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
    }

.project-info[b-69gkb9yrd4] {
    display: flex;
    flex-direction: column;
}

.project-name[b-69gkb9yrd4] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.project-desc[b-69gkb9yrd4] {
    color: #7f8c8d;
    font-size: 0.8rem;
    margin-top: 2px;
}

.no-projects[b-69gkb9yrd4] {
    padding: 20px;
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
}

/* ========== 操作按钮区域样式 ========== */
.action-buttons-area[b-69gkb9yrd4] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn[b-69gkb9yrd4] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

    .btn:disabled[b-69gkb9yrd4] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn:hover:not(:disabled)[b-69gkb9yrd4] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

.btn-load[b-69gkb9yrd4] {
    background: #3498db;
    color: white;
}

    .btn-load:hover:not(:disabled)[b-69gkb9yrd4] {
        background: #2980b9;
    }

.btn-submit[b-69gkb9yrd4] {
    background: #27ae60;
    color: white;
}

    .btn-submit:hover:not(:disabled)[b-69gkb9yrd4] {
        background: #229954;
    }

.btn-result[b-69gkb9yrd4] {
    background: #e74c3c;
    color: white;
}

    .btn-result:hover:not(:disabled)[b-69gkb9yrd4] {
        background: #c0392b;
    }

/* ========== 中部区域样式 ========== */
.middle-section[b-69gkb9yrd4] {
    flex: 1;
    background: #ffffff;
    margin: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.initial-prompt[b-69gkb9yrd4], .result-placeholder[b-69gkb9yrd4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.prompt-icon[b-69gkb9yrd4], .result-icon[b-69gkb9yrd4] {
    font-size: 4rem;
    color: #bdc3c7;
    margin-bottom: 20px;
}

.initial-prompt h3[b-69gkb9yrd4], .result-placeholder h3[b-69gkb9yrd4] {
    color: #2c3e50;
    margin-bottom: 12px;
    font-weight: 600;
}

.initial-prompt p[b-69gkb9yrd4], .result-placeholder p[b-69gkb9yrd4] {
    color: #7f8c8d;
    font-size: 1rem;
    max-width: 400px;
    line-height: 1.5;
}

.questions-container[b-69gkb9yrd4] {
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* ========== 下部区域样式 ========== */
.bottom-section[b-69gkb9yrd4] {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

    .bottom-section.visible[b-69gkb9yrd4] {
        max-height: 400px;
        margin: 8px;
    }

    .bottom-section.hidden[b-69gkb9yrd4] {
        max-height: 0;
        margin: 0 8px;
    }

.result-container[b-69gkb9yrd4] {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.result-header[b-69gkb9yrd4] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 20px;
}

    .result-header h2[b-69gkb9yrd4] {
        margin: 0 0 8px 0;
        font-weight: 600;
    }

.result-meta[b-69gkb9yrd4] {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.result-content[b-69gkb9yrd4] {
    padding: 20px;
}

.overall-score-card[b-69gkb9yrd4] {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.score-circle[b-69gkb9yrd4] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2980b9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.score-value[b-69gkb9yrd4] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.score-label[b-69gkb9yrd4] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.score-assessment[b-69gkb9yrd4] {
    flex: 1;
}

    .score-assessment h3[b-69gkb9yrd4] {
        color: #2c3e50;
        margin: 0 0 8px 0;
        font-size: 1.3rem;
    }

    .score-assessment p[b-69gkb9yrd4] {
        color: #5d6d7e;
        margin: 0;
        line-height: 1.5;
    }

.category-scores h4[b-69gkb9yrd4] {
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.scores-grid[b-69gkb9yrd4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-score-item[b-69gkb9yrd4] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.category-name[b-69gkb9yrd4] {
    min-width: 120px;
    font-weight: 500;
    color: #2c3e50;
}

.score-bar[b-69gkb9yrd4] {
    flex: 1;
    height: 8px;
    background: #e1e8ed;
    border-radius: 4px;
    overflow: hidden;
}

.score-fill[b-69gkb9yrd4] {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-details[b-69gkb9yrd4] {
    display: flex;
    gap: 15px;
    min-width: 100px;
    justify-content: flex-end;
}

.score-value[b-69gkb9yrd4] {
    font-weight: 600;
    color: #2c3e50;
}

.score-level[b-69gkb9yrd4] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    background: #3498db;
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
    .top-section[b-69gkb9yrd4] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .project-radio-group[b-69gkb9yrd4] {
        flex-direction: column;
    }

    .project-radio-item[b-69gkb9yrd4] {
        min-width: auto;
    }

    .action-buttons-area[b-69gkb9yrd4] {
        justify-content: center;
    }

    .btn[b-69gkb9yrd4] {
        min-width: 100px;
        padding: 8px 16px;
    }

    .overall-score-card[b-69gkb9yrd4] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .category-score-item[b-69gkb9yrd4] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .score-details[b-69gkb9yrd4] {
        justify-content: space-between;
    }
}

/* ========== 滚动条样式 ========== */
.questions-container[b-69gkb9yrd4]::-webkit-scrollbar {
    width: 6px;
}

.questions-container[b-69gkb9yrd4]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.questions-container[b-69gkb9yrd4]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .questions-container[b-69gkb9yrd4]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/EvaluationProjectV2.razor.rz.scp.css */
/* EvaluationProject.razor.css - 现代科技风格 */

/* ========== 全局变量和基础样式 ========== */
:root[b-kkbash1stn] {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --tech-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --light-bg: #f8fafc;
    --light-card: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 主容器样式 ========== */
.evaluation-master-container[b-kkbash1stn] {
    display: flex;
    height: 100%;
    background: var(--light-bg);
    overflow: hidden;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ========== 垂直分割条样式 ========== */
.vertical-splitter[b-kkbash1stn] {
    width: 8px;
    background: transparent;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    transition: var(--transition-fast);
}

    .vertical-splitter:hover[b-kkbash1stn] {
        background: var(--accent-color);
    }

        .vertical-splitter:hover .splitter-handle[b-kkbash1stn] {
            opacity: 1;
            transform: scale(1.1);
        }

.splitter-handle[b-kkbash1stn] {
    width: 4px;
    height: 40px;
    background: var(--accent-color);
    border-radius: 2px;
    opacity: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* ========== 左区域：项目控制区 ========== */
.left-control-panel[b-kkbash1stn] {
    width: 320px;
    min-width: 280px;
    max-width: 480px;
    background: var(--light-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    z-index: 10;
    position: relative;
    overflow: hidden;
}

/* 控制按钮区 */
.control-button-area[b-kkbash1stn] {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header[b-kkbash1stn] {
    margin-bottom: 20px;
}

    .section-header h3[b-kkbash1stn] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header i[b-kkbash1stn] {
        font-size: 1.1rem;
        opacity: 0.9;
    }

.button-grid[b-kkbash1stn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.control-btn[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-sm);
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
}

    .control-btn:hover:not(.disabled):not([disabled])[b-kkbash1stn] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .control-btn.disabled[b-kkbash1stn],
    .control-btn:disabled[b-kkbash1stn] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .control-btn i[b-kkbash1stn] {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .control-btn span[b-kkbash1stn] {
        font-size: 0.8rem;
    }

.btn-load[b-kkbash1stn] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.btn-submit[b-kkbash1stn] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.btn-result[b-kkbash1stn] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.btn-reset[b-kkbash1stn] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.current-project-info[b-kkbash1stn] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    backdrop-filter: blur(10px);
}

.project-badge[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .project-badge i[b-kkbash1stn] {
        font-size: 1.5rem;
        opacity: 0.9;
    }

.badge-content[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
}

    .badge-content strong[b-kkbash1stn] {
        font-size: 0.8rem;
        opacity: 0.9;
        margin-bottom: 2px;
    }

.project-name[b-kkbash1stn] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 项目选择区 */
.project-selection-panel[b-kkbash1stn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-kkbash1stn] {
    padding: 16px 20px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .panel-header h4[b-kkbash1stn] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.project-count[b-kkbash1stn] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--light-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.project-list-container[b-kkbash1stn] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.project-list[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-card[b-kkbash1stn] {
    background: var(--light-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

    .project-card[b-kkbash1stn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--accent-color);
        transform: scaleY(0);
        transition: var(--transition-fast);
    }

    .project-card:hover[b-kkbash1stn] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

        .project-card:hover[b-kkbash1stn]::before {
            transform: scaleY(1);
        }

    .project-card.selected[b-kkbash1stn] {
        border-color: var(--accent-color);
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
        box-shadow: var(--shadow-sm);
    }

        .project-card.selected[b-kkbash1stn]::before {
            transform: scaleY(1);
            background: var(--accent-color);
        }

.project-card-header[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.project-icon[b-kkbash1stn] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.project-card-title[b-kkbash1stn] {
    flex: 1;
}

    .project-card-title h5[b-kkbash1stn] {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.project-category[b-kkbash1stn] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--light-bg);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

.selection-indicator[b-kkbash1stn] {
    color: var(--accent-color);
    font-size: 1.2rem;
}

.project-card-body[b-kkbash1stn] {
    margin-top: 12px;
}

.project-description[b-kkbash1stn] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-meta[b-kkbash1stn] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
}

.meta-item[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

    .meta-item i[b-kkbash1stn] {
        font-size: 0.7rem;
    }

.empty-state[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

    .empty-state i[b-kkbash1stn] {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state p[b-kkbash1stn] {
        margin: 0 0 4px 0;
        font-size: 1rem;
    }

    .empty-state small[b-kkbash1stn] {
        font-size: 0.85rem;
    }

/* ========== 右区域：测评工作区 ========== */
.right-work-panel[b-kkbash1stn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--light-bg);
}

/* 水平分割条 */
.horizontal-splitter[b-kkbash1stn] {
    height: 8px;
    background: transparent;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 50;
    transition: var(--transition-fast);
}

    .horizontal-splitter:hover[b-kkbash1stn] {
        background: var(--accent-color);
    }

        .horizontal-splitter:hover .splitter-handle-horizontal[b-kkbash1stn] {
            opacity: 1;
            transform: scale(1.1);
        }

.splitter-handle-horizontal[b-kkbash1stn] {
    height: 4px;
    width: 40px;
    background: var(--accent-color);
    border-radius: 2px;
    opacity: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* 上部：题目显示区 */
.questions-display-panel[b-kkbash1stn] {
    flex: 1;
    min-height: 200px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.welcome-state[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.welcome-illustration[b-kkbash1stn] {
    margin-bottom: 30px;
}

.icon-circle[b-kkbash1stn] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.welcome-content h2[b-kkbash1stn] {
    color: var(--text-primary);
    margin: 0 0 16px 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.welcome-description[b-kkbash1stn] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 30px;
}

.welcome-features[b-kkbash1stn] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.feature[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .feature i[b-kkbash1stn] {
        font-size: 1.8rem;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .feature span[b-kkbash1stn] {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
    }

.result-state[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.result-header-icon[b-kkbash1stn] {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.result-state-content h3[b-kkbash1stn] {
    font-size: 2rem;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.result-state-content p[b-kkbash1stn] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 25px;
}

.btn-view-full-report[b-kkbash1stn] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

    .btn-view-full-report:hover[b-kkbash1stn] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.questions-work-area[b-kkbash1stn] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.work-area-header[b-kkbash1stn] {
    padding: 16px 20px;
    background: var(--light-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-indicator[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 300px;
}

.progress-bar[b-kkbash1stn] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-kkbash1stn] {
    height: 100%;
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-text[b-kkbash1stn] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 80px;
}

.display-mode-toggle[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .display-mode-toggle span[b-kkbash1stn] {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

.mode-btn[b-kkbash1stn] {
    padding: 6px 12px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
}

    .mode-btn:hover[b-kkbash1stn] {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }

    .mode-btn.active[b-kkbash1stn] {
        background: var(--accent-color);
        border-color: var(--accent-color);
        color: white;
    }

.questions-content[b-kkbash1stn] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* 下部：测评结果区 */
.results-display-panel[b-kkbash1stn] {
    background: var(--light-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
}

    .results-display-panel.collapsed[b-kkbash1stn] {
        max-height: 60px;
        overflow: hidden;
    }

    .results-display-panel.expanded[b-kkbash1stn] {
        flex: 1;
        max-height: 45vh;
        min-height: 200px;
    }

.results-header[b-kkbash1stn] {
    padding: 16px 20px;
    background: var(--dark-card);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .results-header:hover[b-kkbash1stn] {
        background: #2d3748;
    }

    .results-header h4[b-kkbash1stn] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.results-toggle-icon[b-kkbash1stn] {
    margin-left: 8px;
    transition: var(--transition-fast);
}

.results-actions[b-kkbash1stn] {
    display: flex;
    gap: 8px;
}

.action-btn[b-kkbash1stn] {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

    .action-btn:hover[b-kkbash1stn] {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }

.results-content[b-kkbash1stn] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.report-container[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-summary[b-kkbash1stn] {
    display: flex;
    gap: 30px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.total-score-display[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.score-circle-large[b-kkbash1stn] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
    position: relative;
}

    .score-circle-large[b-kkbash1stn]::before {
        content: '';
        position: absolute;
        inset: -6px;
        border: 2px dashed rgba(102, 126, 234, 0.3);
        border-radius: 50%;
    }

.score-value-large[b-kkbash1stn] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.score-label-large[b-kkbash1stn] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.score-breakdown[b-kkbash1stn] {
    display: flex;
    gap: 16px;
}

.breakdown-item[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.breakdown-label[b-kkbash1stn] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.breakdown-value[b-kkbash1stn] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--light-bg);
    padding: 2px 8px;
    border-radius: 12px;
}

.assessment-summary[b-kkbash1stn] {
    flex: 1;
}

    .assessment-summary h5[b-kkbash1stn] {
        margin: 0 0 12px 0;
        font-size: 1rem;
        color: var(--text-primary);
    }

.assessment-level[b-kkbash1stn] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: white;
}

.level-excellent[b-kkbash1stn] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.level-good[b-kkbash1stn] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.level-average[b-kkbash1stn] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.level-poor[b-kkbash1stn] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.assessment-suggestions[b-kkbash1stn] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.category-scores-section h5[b-kkbash1stn] {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.categories-grid[b-kkbash1stn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.category-score-card[b-kkbash1stn] {
    background: var(--light-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    transition: var(--transition-fast);
}

    .category-score-card:hover[b-kkbash1stn] {
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.category-header[b-kkbash1stn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.category-name[b-kkbash1stn] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.category-score[b-kkbash1stn] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.category-progress[b-kkbash1stn] {
    margin-bottom: 12px;
}

.progress-track[b-kkbash1stn] {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-thumb[b-kkbash1stn] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.category-meta[b-kkbash1stn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-badge[b-kkbash1stn] {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.badge-excellent[b-kkbash1stn] {
    background: rgba(67, 233, 123, 0.1);
    color: #10b981;
}

.badge-good[b-kkbash1stn] {
    background: rgba(79, 172, 254, 0.1);
    color: #3b82f6;
}

.badge-average[b-kkbash1stn] {
    background: rgba(250, 112, 154, 0.1);
    color: #ec4899;
}

.badge-poor[b-kkbash1stn] {
    background: rgba(102, 126, 234, 0.1);
    color: #8b5cf6;
}

.badge-default[b-kkbash1stn] {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.score-percentage[b-kkbash1stn] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.recommendations-section h5[b-kkbash1stn] {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommendations-list[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-item[b-kkbash1stn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-color);
}

    .recommendation-item i[b-kkbash1stn] {
        color: var(--accent-color);
        font-size: 0.9rem;
    }

    .recommendation-item span[b-kkbash1stn] {
        font-size: 0.9rem;
        color: var(--text-primary);
        flex: 1;
    }

.empty-results[b-kkbash1stn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    text-align: center;
}

    .empty-results i[b-kkbash1stn] {
        font-size: 3rem;
        margin-bottom: 16px;
        opacity: 0.5;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-results p[b-kkbash1stn] {
        margin: 0 0 4px 0;
        font-size: 1rem;
    }

    .empty-results small[b-kkbash1stn] {
        font-size: 0.85rem;
    }

/* ========== 滚动条样式 ========== */
.project-list-container[b-kkbash1stn]::-webkit-scrollbar,
.questions-content[b-kkbash1stn]::-webkit-scrollbar,
.results-content[b-kkbash1stn]::-webkit-scrollbar {
    width: 6px;
}

.project-list-container[b-kkbash1stn]::-webkit-scrollbar-track,
.questions-content[b-kkbash1stn]::-webkit-scrollbar-track,
.results-content[b-kkbash1stn]::-webkit-scrollbar-track {
    background: transparent;
}

.project-list-container[b-kkbash1stn]::-webkit-scrollbar-thumb,
.questions-content[b-kkbash1stn]::-webkit-scrollbar-thumb,
.results-content[b-kkbash1stn]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .project-list-container[b-kkbash1stn]::-webkit-scrollbar-thumb:hover,
    .questions-content[b-kkbash1stn]::-webkit-scrollbar-thumb:hover,
    .results-content[b-kkbash1stn]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .evaluation-master-container[b-kkbash1stn] {
        flex-direction: column;
    }

    .vertical-splitter[b-kkbash1stn] {
        display: none;
    }

    .left-control-panel[b-kkbash1stn] {
        width: 100%;
        max-width: none;
        height: 300px;
        flex-shrink: 0;
    }

    .project-list[b-kkbash1stn] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .button-grid[b-kkbash1stn] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .button-grid[b-kkbash1stn] {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-features[b-kkbash1stn] {
        flex-direction: column;
        gap: 20px;
    }

    .report-summary[b-kkbash1stn] {
        flex-direction: column;
        text-align: center;
    }

    .categories-grid[b-kkbash1stn] {
        grid-template-columns: 1fr;
    }

    .work-area-header[b-kkbash1stn] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .progress-indicator[b-kkbash1stn] {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .panel-header[b-kkbash1stn] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .project-count[b-kkbash1stn] {
        align-self: flex-start;
    }

    .control-btn span[b-kkbash1stn] {
        display: none;
    }

    .control-btn i[b-kkbash1stn] {
        margin-bottom: 0;
        font-size: 1.4rem;
    }
}

/* ========== 动画效果 ========== */
@keyframes fadeIn-b-kkbash1stn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-card[b-kkbash1stn] {
    animation: fadeIn-b-kkbash1stn 0.3s ease forwards;
}

@keyframes pulse-b-kkbash1stn {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.control-btn:not(.disabled):not([disabled]):hover[b-kkbash1stn] {
    animation: pulse-b-kkbash1stn 1.5s infinite;
}
/* _content/LEAFBlazorApp25/Components/Evaluation/Pages/SingleQuestionMode.razor.rz.scp.css */
.single-question-mode[b-dhzikn9xrx] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.completion-message[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #27ae60;
}

    .completion-message i[b-dhzikn9xrx] {
        font-size: 4rem;
        margin-bottom: 20px;
    }

    .completion-message h3[b-dhzikn9xrx] {
        margin: 0 0 8px 0;
        font-weight: 600;
    }

    .completion-message p[b-dhzikn9xrx] {
        margin: 0;
        color: #7f8c8d;
    }

.single-question-content[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.progress-info[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.progress-bar[b-dhzikn9xrx] {
    flex: 1;
    height: 6px;
    background: #e1e8ed;
    border-radius: 3px;
    margin: 0 15px;
    overflow: hidden;
}

.progress-fill[b-dhzikn9xrx] {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.question-display[b-dhzikn9xrx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-header[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-badge[b-dhzikn9xrx] {
    background: #9b59b6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.question-text h4[b-dhzikn9xrx] {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
}

.question-desc[b-dhzikn9xrx] {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.options-list[b-dhzikn9xrx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-item[b-dhzikn9xrx] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .option-item:hover[b-dhzikn9xrx] {
        border-color: #3498db;
        background: #f8f9fa;
    }

    .option-item.selected[b-dhzikn9xrx] {
        border-color: #3498db;
        background: #ebf5fb;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    }

.option-radio[b-dhzikn9xrx] {
    margin-right: 12px;
}

.radio-dot[b-dhzikn9xrx] {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.option-item.selected .radio-dot[b-dhzikn9xrx] {
    border-color: #3498db;
    background: #3498db;
}

    .option-item.selected .radio-dot[b-dhzikn9xrx]::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
    }

.option-content[b-dhzikn9xrx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.option-text[b-dhzikn9xrx] {
    font-weight: 500;
    color: #2c3e50;
}

.option-score[b-dhzikn9xrx] {
    background: #27ae60;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.text-answer-area[b-dhzikn9xrx] {
    flex: 1;
}

.text-answer-input[b-dhzikn9xrx] {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .text-answer-input:focus[b-dhzikn9xrx] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

.question-actions[b-dhzikn9xrx] {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.btn-submit-question[b-dhzikn9xrx] {
    background: #3498db;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-submit-question:hover:not(:disabled)[b-dhzikn9xrx] {
        background: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .btn-submit-question:disabled[b-dhzikn9xrx] {
        background: #bdc3c7;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
/* _content/LEAFBlazorApp25/Components/FaceDetection/FaceAPI/Components/CheckFaceAPI.razor.rz.scp.css */
/* CheckFaceAPI.razor.css */
/* FaceAPI人脸分析组件样式 */

.face-api-detection-container[b-1hqhk39e9t] {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    color: #333;
}

/* 头部样式 */
.face-api-header[b-1hqhk39e9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.header-left h3[b-1hqhk39e9t] {
    margin: 0 0 8px 0;
    color: #1a2980;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left .subtitle[b-1hqhk39e9t] {
    margin: 0;
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

/* 状态指示器 */
.status-indicator[b-1hqhk39e9t] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 25px;
    background: linear-gradient(135deg, #34d399, #10b981);
    gap: 10px;
    min-width: 200px;
    justify-content: center;
}

.status-dot[b-1hqhk39e9t] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-b-1hqhk39e9t 1.5s infinite;
    background: white;
}

.status-text[b-1hqhk39e9t] {
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

/* 状态颜色 */
.status-success[b-1hqhk39e9t] {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.status-warning[b-1hqhk39e9t] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.status-error[b-1hqhk39e9t] {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.status-info[b-1hqhk39e9t] {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

@keyframes pulse-b-1hqhk39e9t {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* 内容区域布局 */
.face-api-content[b-1hqhk39e9t] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

@media (max-width: 1200px) {
    .face-api-content[b-1hqhk39e9t] {
        grid-template-columns: 1fr;
    }
}

/* 左侧面板 */
.left-panel[b-1hqhk39e9t] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 视频区域 */
.video-section[b-1hqhk39e9t] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-container[b-1hqhk39e9t] {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.video-wrapper[b-1hqhk39e9t] {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 比例 */
    background: #111;
}

.face-api-video[b-1hqhk39e9t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    filter: brightness(1.05) contrast(1.05);
}

.face-api-canvas[b-1hqhk39e9t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 模型加载遮罩 */
.model-loading-overlay[b-1hqhk39e9t] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: white;
    gap: 20px;
}

.loading-spinner[b-1hqhk39e9t] {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-1hqhk39e9t 1s linear infinite;
}

@keyframes spin-b-1hqhk39e9t {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-1hqhk39e9t] {
    text-align: center;
    max-width: 300px;
}

    .loading-text p[b-1hqhk39e9t] {
        margin: 10px 0;
        font-size: 1.1rem;
    }

.progress-bar[b-1hqhk39e9t] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin: 15px 0;
    overflow: hidden;
}

.progress-fill[b-1hqhk39e9t] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-1hqhk39e9t] {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3b82f6;
}

/* 视频控制按钮 */
.video-controls[b-1hqhk39e9t] {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-control[b-1hqhk39e9t] {
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

    .btn-control:hover:not(:disabled)[b-1hqhk39e9t] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-control:disabled[b-1hqhk39e9t] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-control.btn-active[b-1hqhk39e9t] {
        background: linear-gradient(135deg, #10b981, #059669);
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }

    .btn-control.btn-secondary[b-1hqhk39e9t] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

/* 检测结果摘要 */
.detection-summary[b-1hqhk39e9t] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    border-left: 6px solid #3b82f6;
}

    .detection-summary h4[b-1hqhk39e9t] {
        margin: 0 0 15px 0;
        color: #1e40af;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.summary-content[b-1hqhk39e9t] {
    font-size: 1.1rem;
    color: #374151;
}

    .summary-content p[b-1hqhk39e9t] {
        margin: 8px 0;
        font-weight: 500;
    }

.face-details[b-1hqhk39e9t] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px dashed rgba(59, 130, 246, 0.3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    font-size: 0.95rem;
}

/* 详细分析区域 */
.analysis-details[b-1hqhk39e9t] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

    .analysis-details h4[b-1hqhk39e9t] {
        margin: 0 0 20px 0;
        color: #1a2980;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.details-grid[b-1hqhk39e9t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.detail-item[b-1hqhk39e9t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.detail-label[b-1hqhk39e9t] {
    font-weight: 600;
    color: #64748b;
    font-size: 0.95rem;
}

.detail-value[b-1hqhk39e9t] {
    font-weight: 700;
    font-size: 1.2rem;
    color: #1e293b;
}

.gender-male[b-1hqhk39e9t] {
    color: #3b82f6 !important;
}

.gender-female[b-1hqhk39e9t] {
    color: #ec4899 !important;
}

.probability[b-1hqhk39e9t] {
    font-size: 0.9rem;
    font-weight: normal;
    color: #64748b;
    margin-left: 8px;
}

/* 表情分布图 */
.expressions-chart[b-1hqhk39e9t] {
    margin-top: 25px;
}

    .expressions-chart h5[b-1hqhk39e9t] {
        margin: 0 0 15px 0;
        color: #475569;
        font-size: 1.1rem;
    }

.expression-bars[b-1hqhk39e9t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expression-bar[b-1hqhk39e9t] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.expression-label[b-1hqhk39e9t] {
    min-width: 80px;
    font-weight: 600;
    color: #475569;
}

.expression-bar-container[b-1hqhk39e9t] {
    flex: 1;
    height: 30px;
    background: #e2e8f0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.expression-bar-fill[b-1hqhk39e9t] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 15px;
    transition: width 0.5s ease;
}

.expression-percentage[b-1hqhk39e9t] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 右侧控制面板 */
.right-panel[b-1hqhk39e9t] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.control-panel[b-1hqhk39e9t] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.config-section h4[b-1hqhk39e9t],
.info-section h4[b-1hqhk39e9t],
.guide-section h4[b-1hqhk39e9t] {
    margin: 0 0 20px 0;
    color: #1a2980;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 配置组 */
.config-group[b-1hqhk39e9t] {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

    .config-group:last-child[b-1hqhk39e9t] {
        border-bottom: none;
    }

    .config-group h5[b-1hqhk39e9t] {
        margin: 0 0 15px 0;
        color: #475569;
        font-size: 1.1rem;
    }

.config-item[b-1hqhk39e9t] {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .config-item label[b-1hqhk39e9t] {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4b5563;
        font-weight: 500;
        cursor: pointer;
    }

    .config-item input[type="checkbox"][b-1hqhk39e9t] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .config-item input[type="range"][b-1hqhk39e9t] {
        flex: 1;
        min-width: 150px;
        height: 6px;
        background: linear-gradient(to right, #667eea, #764ba2);
        border-radius: 3px;
        outline: none;
        -webkit-appearance: none;
    }

        .config-item input[type="range"][b-1hqhk39e9t]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            border: 3px solid #667eea;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

    .config-item span[b-1hqhk39e9t] {
        min-width: 70px;
        color: #374151;
        font-weight: 600;
    }

/* 系统信息 */
.info-content[b-1hqhk39e9t] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.info-item[b-1hqhk39e9t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.info-label[b-1hqhk39e9t] {
    font-weight: 600;
    color: #64748b;
}

.info-value[b-1hqhk39e9t] {
    font-weight: 700;
    color: #1e293b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* 操作指南 */
.guide-steps[b-1hqhk39e9t] {
    margin: 0 0 20px 0;
    padding-left: 20px;
    color: #4b5563;
}

    .guide-steps li[b-1hqhk39e9t] {
        margin-bottom: 12px;
        line-height: 1.5;
        position: relative;
    }

        .guide-steps li[b-1hqhk39e9t]:before {
            content: '✓';
            position: absolute;
            left: -25px;
            color: #10b981;
            font-weight: bold;
        }

.tips[b-1hqhk39e9t] {
    background: #f0f9ff;
    border-radius: 10px;
    padding: 20px;
    border-left: 4px solid #0ea5e9;
}

    .tips p[b-1hqhk39e9t] {
        margin: 0 0 10px 0;
        color: #0369a1;
        font-weight: 600;
    }

    .tips ul[b-1hqhk39e9t] {
        margin: 0;
        padding-left: 20px;
        color: #475569;
    }

    .tips li[b-1hqhk39e9t] {
        margin-bottom: 8px;
        line-height: 1.4;
    }

/* 隐私声明 */
.privacy-footer[b-1hqhk39e9t] {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.privacy-notice[b-1hqhk39e9t] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .privacy-notice i[b-1hqhk39e9t] {
        font-size: 1.5rem;
        color: #3b82f6;
    }

.tech-info[b-1hqhk39e9t] {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    padding: 10px;
}

/* 图标样式 */
.icon-face[b-1hqhk39e9t]:before {
    content: "👤";
}

.icon-camera[b-1hqhk39e9t]:before {
    content: "📷";
}

.icon-scan[b-1hqhk39e9t]:before {
    content: "🔍";
}

.icon-brain[b-1hqhk39e9t]:before {
    content: "🧠";
}

.icon-result[b-1hqhk39e9t]:before {
    content: "📊";
}

.icon-details[b-1hqhk39e9t]:before {
    content: "📋";
}

.icon-config[b-1hqhk39e9t]:before {
    content: "⚙️";
}

.icon-info[b-1hqhk39e9t]:before {
    content: "ℹ️";
}

.icon-guide[b-1hqhk39e9t]:before {
    content: "📖";
}

.icon-privacy[b-1hqhk39e9t]:before {
    content: "🔒";
}

/* 响应式设计 */
@media (max-width: 768px) {
    .face-api-detection-container[b-1hqhk39e9t] {
        padding: 16px;
        margin: 8px;
    }

    .face-api-header[b-1hqhk39e9t] {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .video-controls[b-1hqhk39e9t] {
        flex-direction: column;
    }

    .btn-control[b-1hqhk39e9t] {
        width: 100%;
    }

    .details-grid[b-1hqhk39e9t] {
        grid-template-columns: 1fr;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .face-api-detection-container[b-1hqhk39e9t] {
        background: linear-gradient(135deg, #0f172a, #1e293b);
    }

    .face-api-header[b-1hqhk39e9t],
    .video-section[b-1hqhk39e9t],
    .analysis-details[b-1hqhk39e9t],
    .control-panel[b-1hqhk39e9t],
    .privacy-notice[b-1hqhk39e9t] {
        background: rgba(30, 41, 59, 0.95);
        color: #f1f5f9;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .detail-item[b-1hqhk39e9t],
    .info-item[b-1hqhk39e9t] {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .detection-summary[b-1hqhk39e9t] {
        background: linear-gradient(135deg, #1e293b, #334155);
        color: #f1f5f9;
    }

    .tips[b-1hqhk39e9t] {
        background: rgba(30, 64, 175, 0.2);
        color: #dbeafe;
    }

    .expression-bar-container[b-1hqhk39e9t] {
        background: rgba(255, 255, 255, 0.1);
    }
}
/* _content/LEAFBlazorApp25/Components/FaceDetection/JSFace/CheckFaceJS.razor.rz.scp.css */
/* 
    CheckFaceJS.razor.css
    人脸检测组件样式
    修复：按钮状态、视频区域、字体大小
*/

/* ===== 全局容器 ===== */
.js-face-detection-container[b-nt1qvz727w] {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 14px; /* 小四号字体 */
    line-height: 1.5;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    overflow: hidden;
    position: relative;
}

/* ===== 标题启动区域 ===== */
.js-face-header[b-nt1qvz727w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    min-height: 60px;
    padding: 0 15px;
    background: white;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-title[b-nt1qvz727w] {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #2c3e50;
}

/* 状态指示器 */
.status-indicator[b-nt1qvz727w] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    gap: 8px;
}

.status-dot[b-nt1qvz727w] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-text[b-nt1qvz727w] {
    font-size: 0.95em;
    color: #495057;
    font-weight: 500;
    min-width: 140px;
}

/* 状态颜色 */
.status-success .status-dot[b-nt1qvz727w] {
    background-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.status-warning .status-dot[b-nt1qvz727w] {
    background-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.status-error .status-dot[b-nt1qvz727w] {
    background-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.status-info .status-dot[b-nt1qvz727w] {
    background-color: #17a2b8;
    box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.2);
}

/* 头部控制按钮 */
.header-controls[b-nt1qvz727w] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn[b-nt1qvz727w] {
    padding: 6px 12px;
    font-size: 0.95em;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    min-width: 90px;
}

.btn-sm[b-nt1qvz727w] {
    padding: 5px 10px;
    font-size: 0.9em;
    min-height: 30px;
    min-width: 80px;
}

.btn-primary[b-nt1qvz727w] {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

    .btn-primary:hover:not(:disabled)[b-nt1qvz727w] {
        background-color: #0056b3;
        border-color: #0056b3;
        transform: translateY(-1px);
    }

    .btn-primary:disabled[b-nt1qvz727w] {
        background-color: #6c757d;
        border-color: #6c757d;
        cursor: not-allowed;
    }

.btn-warning[b-nt1qvz727w] {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-warning:hover:not(:disabled)[b-nt1qvz727w] {
        background-color: #e0a800;
        border-color: #d39e00;
    }

.btn-success[b-nt1qvz727w] {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

    .btn-success:hover:not(:disabled)[b-nt1qvz727w] {
        background-color: #218838;
        border-color: #1e7e34;
    }

.btn-danger[b-nt1qvz727w] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-danger:hover:not(:disabled)[b-nt1qvz727w] {
        background-color: #c82333;
        border-color: #bd2130;
    }

.btn-outline[b-nt1qvz727w] {
    background-color: transparent;
    color: #6c757d;
    border-color: #6c757d;
}

    .btn-outline:hover:not(:disabled)[b-nt1qvz727w] {
        background-color: #f8f9fa;
        color: #495057;
    }

/* 加载动画 */
.spinner[b-nt1qvz727w] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-nt1qvz727w 1s ease-in-out infinite;
    margin-right: 8px;
}

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

/* ===== 内容区域 ===== */
.js-face-content[b-nt1qvz727w] {
    flex: 1;
    display: flex;
    gap: 15px;
    padding: 15px;
    min-height: 0;
    overflow: hidden;
}

/* ===== 视频容器 ===== */
.video-container[b-nt1qvz727w] {
    flex: 1;
    position: relative;
    background: #000; /* 始终黑色背景，避免灰色幕布 */
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.video-wrapper[b-nt1qvz727w] {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.face-video[b-nt1qvz727w] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* 镜像效果，更自然 */
    background: #000; /* 确保视频区域黑色 */
}

.face-canvas[b-nt1qvz727w] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 检测提示 */
.detection-hint[b-nt1qvz727w] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

.hint-content[b-nt1qvz727w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: white;
    text-align: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 12px;
    max-width: 80%;
    border: 1px solid rgba(255,255,255,0.1);
}

.hint-icon[b-nt1qvz727w] {
    font-size: 3.5em;
}

.hint-text[b-nt1qvz727w] {
    font-size: 1.2em;
    line-height: 1.4;
    max-width: 400px;
}

/* 检测结果 */
.detection-result[b-nt1qvz727w] {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 4px solid #28a745;
    z-index: 5;
    animation: slideInUp-b-nt1qvz727w 0.3s ease;
}

@keyframes slideInUp-b-nt1qvz727w {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header[b-nt1qvz727w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

    .result-header h4[b-nt1qvz727w] {
        margin: 0;
        font-size: 1.1em;
        color: #28a745;
        font-weight: 600;
    }

.btn-close[b-nt1qvz727w] {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close:hover[b-nt1qvz727w] {
        background: #f8f9fa;
        color: #dc3545;
    }

.result-grid[b-nt1qvz727w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.result-item[b-nt1qvz727w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-label[b-nt1qvz727w] {
    color: #6c757d;
    font-size: 0.9em;
}

.result-value[b-nt1qvz727w] {
    font-weight: 500;
    color: #343a40;
}

.confidence-high[b-nt1qvz727w] {
    color: #28a745;
}

.confidence-medium[b-nt1qvz727w] {
    color: #ffc107;
}

.confidence-low[b-nt1qvz727w] {
    color: #dc3545;
}

.ratio-suitable[b-nt1qvz727w] {
    color: #28a745;
}

.ratio-unsuitable[b-nt1qvz727w] {
    color: #dc3545;
}

.ratio-warning[b-nt1qvz727w] {
    margin-top: 10px;
    padding: 8px;
    background: #fff3cd;
    border-radius: 4px;
    border: 1px solid #ffc107;
    color: #856404;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== 控制面板 ===== */
.control-panel[b-nt1qvz727w] {
    width: 350px;
    min-width: 350px;
    background: white;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.control-panel-content[b-nt1qvz727w] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 控制组 */
.control-group[b-nt1qvz727w] {
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

    .control-group h5[b-nt1qvz727w] {
        margin: 0 0 15px 0;
        font-size: 1.1em;
        font-weight: 600;
        color: #495057;
    }

.button-group[b-nt1qvz727w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 配置面板 */
.config-panel h5[b-nt1qvz727w] {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #495057;
}

.config-item[b-nt1qvz727w] {
    margin-bottom: 15px;
}

.config-label[b-nt1qvz727w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #495057;
    font-size: 0.95em;
}

.config-value[b-nt1qvz727w] {
    font-weight: 600;
    color: #007bff;
}

.config-slider[b-nt1qvz727w] {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    margin: 8px 0;
}

    .config-slider[b-nt1qvz727w]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        border: 2px solid #007bff;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

.config-hint[b-nt1qvz727w] {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 4px;
    font-style: italic;
}

.config-checkbox[b-nt1qvz727w] {
    margin: 15px 0;
}

.checkbox-label[b-nt1qvz727w] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

    .checkbox-label input[type="checkbox"][b-nt1qvz727w] {
        display: none;
    }

.checkmark[b-nt1qvz727w] {
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s;
}

.checkbox-label input:checked + .checkmark[b-nt1qvz727w] {
    background: #007bff;
    border-color: #007bff;
}

    .checkbox-label input:checked + .checkmark[b-nt1qvz727w]::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 0.9em;
        font-weight: bold;
    }

.checkbox-text[b-nt1qvz727w] {
    color: #495057;
    font-size: 0.95em;
}

/* 消息框 */
.message-box[b-nt1qvz727w] {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 0.95em;
    line-height: 1.4;
    animation: fadeIn-b-nt1qvz727w 0.3s ease;
}

@keyframes fadeIn-b-nt1qvz727w {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.message-success[b-nt1qvz727w] {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.message-info[b-nt1qvz727w] {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

/* 使用说明面板 */
.instructions-panel[b-nt1qvz727w] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

    .instructions-panel h5[b-nt1qvz727w] {
        margin: 0 0 12px 0;
        font-size: 1.1em;
        font-weight: 600;
        color: #495057;
    }

.instructions-content ol[b-nt1qvz727w] {
    margin: 0;
    padding-left: 20px;
    color: #495057;
}

.instructions-content li[b-nt1qvz727w] {
    margin-bottom: 8px;
    line-height: 1.5;
}

    .instructions-content li strong[b-nt1qvz727w] {
        color: #2c3e50;
    }

.privacy-note[b-nt1qvz727w] {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed #dee2e6;
    color: #6c757d;
    font-size: 0.9em;
    line-height: 1.4;
}

    .privacy-note strong[b-nt1qvz727w] {
        color: #495057;
    }

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .js-face-content[b-nt1qvz727w] {
        flex-direction: column;
    }

    .control-panel[b-nt1qvz727w] {
        width: 100%;
        min-width: 100%;
        max-height: 300px;
    }

    .header-controls[b-nt1qvz727w] {
        flex-wrap: wrap;
    }

    .result-grid[b-nt1qvz727w] {
        grid-template-columns: 1fr;
    }
}

/* 滚动条美化 */
.control-panel-content[b-nt1qvz727w]::-webkit-scrollbar {
    width: 8px;
}

.control-panel-content[b-nt1qvz727w]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.control-panel-content[b-nt1qvz727w]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .control-panel-content[b-nt1qvz727w]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/IChing/Lots/DrawLotsThemeWeb.razor.rz.scp.css */
/* ===== 主题变量定义 ===== */
.iching-container[b-4yvls3sim7] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-secondary-color: #FF9800;
}

    /* 朱砂祥瑞主题 */
    .iching-container.theme-vermillion[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 碧海青天主题 */
    .iching-container.theme-ocean[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 紫气东来主题 */
    .iching-container.theme-purple[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .iching-container.theme-golden[b-4yvls3sim7] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

/* =====css隔离类： 主容器布局 ===== */
.iching-container[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    transition: all 0.3s ease;
}

/* 垂直面板布局 */
.vertical-panel[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    flex: 1;
}

/* ===== 第一部分：介绍区域 ===== */
.intro-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 8px 16px 4px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.intro-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.header-controls[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 主题选择器样式 */
.theme-selector[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.theme-dropdown[b-4yvls3sim7] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-4yvls3sim7] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-4yvls3sim7] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

.section-title[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0;
    font-weight: 600;
}

.section-title2[b-4yvls3sim7] {
    color: var(--primary-color);
    font-size: 1.0em;
    margin: 0;
    font-weight: 600;
}

/* ===== 按钮样式 - 新增PDF按钮 ===== */
.btn-compact[b-4yvls3sim7] {
    padding: 5px 15px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    font-weight: 500;
}

/* PDF按钮样式 */
.btn-pdf[b-4yvls3sim7] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
}

    .btn-pdf:hover[b-4yvls3sim7] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 - 确保所有按钮宽度一致 */
.fixed-width-btn[b-4yvls3sim7] {
    min-width: 80px;
    flex-shrink: 0;
}

.btn-primary[b-4yvls3sim7] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 15px;
    margin-right:20px;
}

    /*让乾坤运转 悬停时：手势*/
    .btn-primary:hover[b-4yvls3sim7] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        /* 使用滤镜加深背景色 */
        filter: brightness(0.9);
    }

.btn-secondary[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

    .btn-secondary:hover[b-4yvls3sim7] {
        background: rgba(255, 152, 0, 0.2);
    }

.btn-info[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-4yvls3sim7] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-4yvls3sim7] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}


.header-actions[b-4yvls3sim7] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* 抽签须知网格 - 六列布局 */
.intro-content[b-4yvls3sim7] {
    margin: 0;
}

.guidance-grid[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.guidance-item[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    min-height: 50px;
}

.guidance-icon[b-4yvls3sim7] {
    font-size: 1.1em;
    margin-right: 6px;
    flex-shrink: 0;
}

.guidance-text[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .guidance-text strong[b-4yvls3sim7] {
        color: var(--secondary-text);
        font-size: 0.9em;
        line-height: 1.2;
    }

    .guidance-text span[b-4yvls3sim7] {
        color: var(--secondary-text);
        font-size: 0.8em;
        line-height: 1.4;
        padding-top: 3px;
    }

/* ===== 第二部分：签筒区域 - 关键修改 ===== */
.lots-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* 关键修改：移除固定高度，改为自动高度 */
    height: auto;
    min-height: 250px;
    transition: all 0.3s ease;
}

    /* 展开状态 - 关键修改：使用自动高度 */
    .lots-section.expanded[b-4yvls3sim7] {
        flex: 0 1 auto;
        height: auto;
        min-height: 300px;
        max-height: 70vh;
    }

    /* 小屏幕高度增强 - 新增样式 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 250px;
    }

    /* 收起状态 */
    .lots-section.collapsed[b-4yvls3sim7] {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

        /* 确保收起状态下只显示标题区域 */
        .lots-section.collapsed .problem-category-section[b-4yvls3sim7],
        .lots-section.collapsed .lots-container-scroll[b-4yvls3sim7] {
            display: none;
        }

.section-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-shrink: 0;
    gap: 20px;
}

    .section-header h3[b-4yvls3sim7] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        flex-shrink: 0;
    }

.selection-info[b-4yvls3sim7] {
    font-size: 0.9em;
    flex-shrink: 0;
    text-align: right;
    min-width: 180px;
    margin-left: 20px;
}

.selected-indicator[b-4yvls3sim7] {
    color: var(--primary-light);
    font-weight: 500;
}

    .selected-indicator strong[b-4yvls3sim7] {
        color: var(--primary-color);
    }

.select-prompt[b-4yvls3sim7] {
    color: var(--secondary-text);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
}

/* 问题类别选择区域 - 关键修改：允许内容换行但不固定高度 */
.problem-category-section[b-4yvls3sim7] {
    margin-bottom: 5px;
    padding: 3px 10px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
    height: auto;
    min-height: auto;
}

.category-grid[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}

.category-radio[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--secondary-text);
}

    .category-radio:hover[b-4yvls3sim7] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    .category-radio.selected[b-4yvls3sim7] {
        background: var(--button-primary-bg);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    .category-radio input[type="radio"][b-4yvls3sim7] {
        display: none;
    }

.radio-dot[b-4yvls3sim7] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.category-radio.selected .radio-dot[b-4yvls3sim7] {
    border-color: white;
    background: white;
}

.radio-label[b-4yvls3sim7] {
    flex: 1;
    text-align: center;
    letter-spacing: 6px;
    font-size: 15px;
    /*padding:0px 10px !important;*/
}

/* 签筒容器 - 关键修改：动态高度 */
.lots-container-scroll[b-4yvls3sim7] {
    height: auto;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8f8f8;
    flex: 1 1 auto;
}

.lots-container[b-4yvls3sim7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
    padding: 6px;
    min-height: min-content;
    height: fit-content;
}

/* 签筒圆圈 */
.lot-circle[b-4yvls3sim7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.8em;
}

    /* 签筒圆圈 - 基本选中状态（未查看签文） */
    .lot-circle.selected-basic[b-4yvls3sim7] {
        background: var(--primary-light);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    /* 签筒圆圈 - 已查看签文状态 */
    .lot-circle.selected-viewed[b-4yvls3sim7] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-4yvls3sim7 2s infinite;
    }

    .lot-circle.available[b-4yvls3sim7] {
        background: #f0f0f0;
        border: 2px solid #d0d0d0;
        color: var(--secondary-text);
    }

        .lot-circle.available:hover[b-4yvls3sim7] {
            background: var(--primary-light);
            color: white;
            transform: scale(1.1);
            border-color: var(--primary-color);
        }

    .lot-circle.selected[b-4yvls3sim7] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-4yvls3sim7 2s infinite;
    }

@keyframes pulse-b-4yvls3sim7 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.lot-number[b-4yvls3sim7] {
    font-size: 1.0em;
    font-weight: normal; /* 确保卦号不加粗 */
}

.fixed-number[b-4yvls3sim7] {
    color: var(--button-info-color);
    font-weight: bold; /* 新增这行 */
}

.lot-dot[b-4yvls3sim7] {
    font-size: 1.2em;
    color: #999;
}

/* ===== 第三部分：签文显示区域 ===== */
.result-section[b-4yvls3sim7] {
    background: var(--section-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
}

.result-content[b-4yvls3sim7] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.result-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

    .result-header h3[b-4yvls3sim7] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

/* 签文详情滚动容器 */
.lot-details-scroll[b-4yvls3sim7] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.lot-details[b-4yvls3sim7] {
    padding: 0;
    min-height: min-content;
}

.lot-header[b-4yvls3sim7] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-bottom: 1px solid #e8f5e9;
}

.lot-meta[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lot-number-badge[b-4yvls3sim7] {
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.lot-title[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.palace-tag[b-4yvls3sim7] {
    background: #E3F2FD;
    color: #1976D2;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
}

.fortune-tag[b-4yvls3sim7] {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.fortune-good[b-4yvls3sim7] {
    background: #E8F5E8;
    color: var(--primary-color);
}

.fortune-medium[b-4yvls3sim7] {
    background: #FFF3E0;
    color: #EF6C00;
}

.fortune-bad[b-4yvls3sim7] {
    background: #FFEBEE;
    color: #C62828;
}

.fortune-unknown[b-4yvls3sim7] {
    background: #F5F5F5;
    color: #757575;
}

/* 签文内容布局 */
.lot-content-vertical[b-4yvls3sim7] {
    padding: 0;
}

.content-item[b-4yvls3sim7] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
}

    .content-item:hover[b-4yvls3sim7] {
        background: #fdf2f2;
    }

    .content-item:last-child[b-4yvls3sim7] {
        border-bottom: none;
    }

.content-header[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.content-icon[b-4yvls3sim7] {
    font-size: 1.1em;
}

.content-header h4[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.content-body[b-4yvls3sim7] {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.poem-text[b-4yvls3sim7] {
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.8;
}

/* 特殊内容项样式 */
.advice-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-left: 4px solid var(--primary-light);
}

    .advice-item .content-header[b-4yvls3sim7] {
        color: var(--primary-color);
    }

.advice-text[b-4yvls3sim7] {
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.7;
}

.category-analysis-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%);
    border-left: 4px solid #FF9800;
}

    .category-analysis-item .content-header[b-4yvls3sim7] {
        color: #EF6C00;
    }

.category-analysis-text[b-4yvls3sim7] {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* 宫位分析样式 */
.palace-analysis-item[b-4yvls3sim7] {
    background: linear-gradient(135deg, #f8f8ff 0%, #f0f0ff 100%);
    border-left: 4px solid #7e57c2;
}

    .palace-analysis-item .content-header[b-4yvls3sim7] {
        color: #5e35b1;
    }

/* 宫位信息容器 */
.palace-info-container[b-4yvls3sim7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 12px;
    padding: 5px 10px;
    background: rgba(126, 87, 194, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(126, 87, 194, 0.1);
}

.info-item[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    min-width: 90px;
    max-width: 130px;
    padding: 5px 6px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    font-size: 0.85em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label[b-4yvls3sim7] {
    font-weight: 600;
    color: #5e35b1;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.info-value[b-4yvls3sim7] {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫位建议容器 */
.palace-advice-container[b-4yvls3sim7] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 1.0em;
}

.palace-advantages[b-4yvls3sim7],
.palace-disadvantages[b-4yvls3sim7] {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.palace-advantages[b-4yvls3sim7] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-left: 4px solid var(--primary-light);
}

.palace-disadvantages[b-4yvls3sim7] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
}

    .palace-advantages h5[b-4yvls3sim7],
    .palace-disadvantages h5[b-4yvls3sim7] {
        margin: 0 0 6px 0;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.palace-advantages h5[b-4yvls3sim7] {
    color: var(--primary-color);
}

.palace-disadvantages h5[b-4yvls3sim7] {
    color: #EF6C00;
}

.palace-advantages p[b-4yvls3sim7],
.palace-disadvantages p[b-4yvls3sim7] {
    margin: 0;
    line-height: 1.5;
    color: var(--secondary-text);
    font-size: 0.85em;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* 状态样式 */
.loading-state[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--secondary-text);
    flex: 1;
}

.spinner[b-4yvls3sim7] {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--primary-light);
    border-radius: 50%;
    animation: spin-b-4yvls3sim7 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-4yvls3sim7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*没有抽签时：签词区域显示*/
.empty-state[b-4yvls3sim7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
}

.empty-icon[b-4yvls3sim7] {
    font-size: 2.5em;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state h3[b-4yvls3sim7] {
    color: var(--secondary-text);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.empty-state p[b-4yvls3sim7] {
    margin: 0;
    font-size: 0.9em;
}

.empty-state-container[b-4yvls3sim7] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.empty-state-image[b-4yvls3sim7] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
}

/* 带边框的图片容器 - 修改样式 */
.bordered-image[b-4yvls3sim7] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


/* 右侧内容区域 - 修改为 Flex 布局 */
.empty-state-content[b-4yvls3sim7] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 改为从顶部开始 */
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px; /* 添加内边距 */
}

/* ===== txt说明 ===== */
/* 文本内容区域 - 占据剩余空间 */
.remark-content-txt[b-4yvls3sim7] {
    flex: 1; /* 占据剩余所有空间 */
    width: 100%;
    overflow-y: auto; /* 允许垂直滚动 */
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap; /* 保留换行 */
    text-align: left;
    max-height: none; /* 移除固定高度限制 */
}

/* ===== 图片轮播相关样式 - 修改 ===== */
.carousel-container[b-4yvls3sim7] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 修改图片样式 */
.responsive-image[b-4yvls3sim7] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 - 修复布局：三个按钮分开 */
.carousel-controls[b-4yvls3sim7] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-4yvls3sim7],
.carousel-btn-center[b-4yvls3sim7],
.carousel-btn-right[b-4yvls3sim7] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-4yvls3sim7] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

    .carousel-btn:active[b-4yvls3sim7] {
        transform: scale(0.95);
    }

.carousel-toggle[b-4yvls3sim7] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* ===== Split窗口分割相关样式 - 修改 ===== */
.empty-state-container[b-4yvls3sim7] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-4yvls3sim7] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-4yvls3sim7] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-4yvls3sim7] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-4yvls3sim7] {
    background-color: #888;
}

.empty-state-image[b-4yvls3sim7], .empty-state-content[b-4yvls3sim7] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* ===== 模态对话框 ===== */
.modal-overlay[b-4yvls3sim7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.confirmation-dialog[b-4yvls3sim7] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
}

.dialog-icon[b-4yvls3sim7] {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.confirmation-dialog h3[b-4yvls3sim7] {
    color: var(--primary-color);
    margin: 0 0 6px 0;
    font-size: 1.1em;
}

.confirmation-dialog p[b-4yvls3sim7] {
    color: var(--secondary-text);
    margin: 0 0 16px 0;
    font-size: 0.9em;
}

.confirmation-dialog strong[b-4yvls3sim7] {
    color: var(--primary-color);
}

.dialog-buttons[b-4yvls3sim7] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-confirm[b-4yvls3sim7], .btn-cancel[b-4yvls3sim7] {
    padding: 6px 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 70px;
}

.btn-confirm[b-4yvls3sim7] {
    background: var(--button-primary-bg);
    color: white;
}

    .btn-confirm:hover[b-4yvls3sim7] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

.btn-cancel[b-4yvls3sim7] {
    background: #f5f5f5;
    color: var(--secondary-text);
    border: 1px solid #e0e0e0;
}

    .btn-cancel:hover[b-4yvls3sim7] {
        background: #eeeeee;
    }

/* ===== 滚动条样式 ===== */
.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar {
    width: 12px;
}

.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-track,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb,
.lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

    .lots-container-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb:hover,
    .lot-details-scroll[b-4yvls3sim7]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.lots-container-scroll[b-4yvls3sim7],
.lot-details-scroll[b-4yvls3sim7] {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 响应式设计 - 关键修改 ===== */
@media (max-width: 1200px) {
    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(3, 1fr);
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 320px;
        max-height: 65vh;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 350px;
        min-height: 220px;
    }
}

@media (max-width: 1024px) {
    .iching-container[b-4yvls3sim7] {
        padding: 6px;
        height: 100%;
    }

    .vertical-panel[b-4yvls3sim7] {
        gap: 6px;
        min-height: 800px;
    }

    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-actions[b-4yvls3sim7] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header[b-4yvls3sim7] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: left;
    }

    .header-Title[b-4yvls3sim7] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .selection-info[b-4yvls3sim7] {
        text-align: left;
        min-width: auto;
        margin-left: 20px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 400px;
        max-height: 60vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 400px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 300px;
        min-height: 200px;
        flex: 1 1 auto;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 350px;
        flex: 1;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }

    /* 主题选择器在小屏幕上的适配 */
    .header-controls[b-4yvls3sim7] {
        gap: 10px;
    }

    .theme-selector[b-4yvls3sim7] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .theme-label[b-4yvls3sim7] {
        font-size: 0.8em;
    }

    .theme-dropdown[b-4yvls3sim7] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 响应式轮播控制 */
    .carousel-controls[b-4yvls3sim7] {
        width: 180px;
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .empty-state-image[b-4yvls3sim7] {
        min-width: 150px;
    }

    .empty-state-content[b-4yvls3sim7] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .iching-container[b-4yvls3sim7] {
        padding: 4px;
        height: 100%;
    }

    /* 关键修改：确保标题和按钮在一行 */
    .intro-header[b-4yvls3sim7] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .guidance-grid[b-4yvls3sim7] {
        grid-template-columns: 1fr;
    }

    .guidance-item[b-4yvls3sim7] {
        min-height: 45px;
    }

    .lots-container[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        gap: 4px;
    }

    .lot-circle[b-4yvls3sim7] {
        width: 32px;
        height: 32px;
    }

    .lot-header[b-4yvls3sim7] {
        padding: 10px 12px;
    }

    .lot-meta[b-4yvls3sim7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .content-item[b-4yvls3sim7] {
        padding: 10px 12px;
    }

    .palace-info-container[b-4yvls3sim7] {
        gap: 6px 10px;
    }

    .info-item[b-4yvls3sim7] {
        min-width: 80px;
        max-width: 110px;
        font-size: 0.8em;
        padding: 4px 5px;
    }

    .info-label[b-4yvls3sim7] {
        margin-right: 4px;
        font-size: 0.85em;
    }

    .palace-advice-container[b-4yvls3sim7] {
        flex-direction: column;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
    }

    .category-radio[b-4yvls3sim7] {
        padding: 4px 8px;
        font-size: 0.8em;
    }

    .radio-dot[b-4yvls3sim7] {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 380px;
        max-height: 55vh;
        flex: 0 1 auto;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 420px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 280px;
        min-height: 180px;
        flex: 1 1 auto;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 380px;
        flex: 1;
    }

    .problem-category-section[b-4yvls3sim7] {
        padding: 8px;
    }

    /* 在小屏幕上调整图片轮播布局 */
    .empty-state-container[b-4yvls3sim7] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-4yvls3sim7],
    .empty-state-content[b-4yvls3sim7] {
        flex: 1 1 100%;
        width: 100%;
    }

    .carousel-controls[b-4yvls3sim7] {
        bottom: 5px;
        width: 180px; /* 小屏幕调整宽度 */
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px; /* 小屏幕调整边距 */
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* PDF按钮在小屏幕上的适配 */
    .fixed-width-btn[b-4yvls3sim7] {
        min-width: 70px;
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .lots-container[b-4yvls3sim7] {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    }

    .lot-circle[b-4yvls3sim7] {
        width: 28px;
        height: 28px;
    }

    .palace-info-container[b-4yvls3sim7] {
        gap: 4px 6px;
    }

    .info-item[b-4yvls3sim7] {
        min-width: 70px;
        max-width: 90px;
        font-size: 0.75em;
    }

    .info-label[b-4yvls3sim7] {
        margin-right: 3px;
        font-size: 0.8em;
    }

    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .problem-category-section[b-4yvls3sim7] {
        padding: 6px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 420px;
        max-height: 60vh;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-4yvls3sim7] {
        min-height: 460px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 320px;
        min-height: 200px;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 400px;
    }

    .section-header[b-4yvls3sim7] {
        gap: 6px;
    }

    .header-actions[b-4yvls3sim7] {
        justify-content: center;
    }

        .header-actions .btn-compact[b-4yvls3sim7] {
            padding: 3px 8px;
            font-size: 0.75em;
        }

    /* 超小屏幕时确保按钮和标题仍在一行 */
    .intro-header[b-4yvls3sim7] {
        flex-wrap: nowrap;
    }

    .fixed-width-btn[b-4yvls3sim7] {
        min-width: 65px;
        font-size: 0.75em;
        padding: 2px 6px;
    }

    /* 在超小屏幕上隐藏主题标签文字 */
    .theme-label[b-4yvls3sim7] {
        display: none;
    }

    .theme-selector[b-4yvls3sim7] {
        align-items: center;
    }

    .theme-dropdown[b-4yvls3sim7] {
        min-width: 80px;
        font-size: 0.75em;
        padding: 3px 6px;
    }

    /* 超小屏幕轮播控制 */
    .carousel-controls[b-4yvls3sim7] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-4yvls3sim7] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-4yvls3sim7] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ----支付模态框 - 整合确认和支付界面：---------- */
.payment-modal[b-4yvls3sim7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.payment-confirm-section[b-4yvls3sim7] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.confirm-icon[b-4yvls3sim7] {
    font-size: 2em;
    margin-bottom: 10px;
}

.confirm-details[b-4yvls3sim7] {
    margin-top: 10px;
}

.amount[b-4yvls3sim7] {
    font-size: 1.1em;
    color: #e74c3c;
    margin: 5px 0;
}

.benefits[b-4yvls3sim7] {
    color: #666;
    font-size: 1.0em;
}

.wechat-pay-section[b-4yvls3sim7] {
    margin: 20px 0;
}

.payment-actions[b-4yvls3sim7] {
    text-align: center;
    margin-top: 15px;
}

.btn-cancel-payment[b-4yvls3sim7] {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel-payment:hover[b-4yvls3sim7] {
        background: #7f8c8d;
    }


/* -----微信支付对话框样式：这部分可能需要删除、因为代码移除了---------- */
.wechat-payment-dialog[b-4yvls3sim7] {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dialog-header[b-4yvls3sim7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

    .dialog-header h3[b-4yvls3sim7] {
        margin: 0;
        color: #333;
    }

.btn-close[b-4yvls3sim7] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

    .btn-close:hover[b-4yvls3sim7] {
        color: #333;
    }

.payment-content[b-4yvls3sim7] {
    padding: 20px;
}

.qr-code-section[b-4yvls3sim7] {
    text-align: center;
    margin-bottom: 20px;
}

.qr-code-img[b-4yvls3sim7] {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    margin: 15px 0;
}

.payment-info[b-4yvls3sim7] {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: left;
}

    .payment-info p[b-4yvls3sim7] {
        margin: 5px 0;
    }

.payment-status[b-4yvls3sim7] {
    margin-top: 15px;
}

.status-loading[b-4yvls3sim7] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.spinner[b-4yvls3sim7] {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #07C160;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin-b-4yvls3sim7 1s linear infinite;
    margin-right: 10px;
}

.status-message.success[b-4yvls3sim7] {
    color: #07C160;
    background: #f0f9f4;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.status-message.error[b-4yvls3sim7] {
    color: #e74c3c;
    background: #fdf2f2;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.dialog-footer[b-4yvls3sim7] {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-cancel[b-4yvls3sim7] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .btn-cancel:hover[b-4yvls3sim7] {
        background: #5a6268;
    }

@keyframes spin-b-4yvls3sim7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 超小高度设备适配 */
@media (max-height: 700px) {
    .iching-container[b-4yvls3sim7] {
        min-height: 650px;
    }

    .vertical-panel[b-4yvls3sim7] {
        min-height: 600px;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 280px;
        max-height: 45vh;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        max-height: 220px;
        min-height: 160px;
    }

    .result-section[b-4yvls3sim7] {
        min-height: 280px;
    }
}

/* 新增：针对问题类别区域换行的特殊处理 */
@media (max-width: 360px) {
    .category-grid[b-4yvls3sim7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-radio[b-4yvls3sim7] {
        padding: 3px 6px;
        font-size: 0.75em;
    }

    .lots-section.expanded[b-4yvls3sim7] {
        min-height: 450px;
    }

    .lots-container-scroll[b-4yvls3sim7] {
        min-height: 220px;
    }
}
/* _content/LEAFBlazorApp25/Components/IChing/Lots/DrawLotsThemeZb.razor.rz.scp.css */

/*#region === 主题变量定义 === */
.iching-container[b-lpbc661j0f] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-secondary-color: #FF9800;
}

    /* 朱砂祥瑞主题 */
    .iching-container.theme-vermillion[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 碧海青天主题 */
    .iching-container.theme-ocean[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 紫气东来主题 */
    .iching-container.theme-purple[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .iching-container.theme-golden[b-lpbc661j0f] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }
/*#endregion ----- */

/* === 语音设置样式 === */
.voice-settings-section[b-lpbc661j0f] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    border: 1px solid var(--border-color);
}

/* 语音设置顶部区域 */
.voice-settings-top[b-lpbc661j0f] {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 1px;
    border-bottom: 1px solid var(--border-color);
}

/* 播放公共参数行 */
.public-params-row[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0;
    margin-top: 4px;
    margin-bottom: 0px;
}

    .public-params-row .text-input-item[b-lpbc661j0f] {
        flex: 0 0 auto;
        min-width: fit-content;
        margin-bottom: 0;
    }

    .public-params-row .text-input[b-lpbc661j0f] {
        width: auto;
        min-width: 60px;
        padding: 3px 6px;
    }

    .public-params-row label[b-lpbc661j0f] {
        font-size: 0.85em;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .public-params-row .btn-update[b-lpbc661j0f] {
        width: auto;
        padding: 4px 8px;
        margin-left: 4px;
        flex-shrink: 0;
    }

.voice-controls-grid[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 小尺寸按钮 - 测试功能用 */
.btn-small[b-lpbc661j0f] {
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    min-width: 60px !important;
    border: 1px solid rgba(120, 120, 120, 0.3) !important;
}

/* 语音模式选择器 */
.voice-mode-selector[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.checkbox-label[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-lpbc661j0f] {
        display: none;
    }

.checkmark[b-lpbc661j0f] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-lpbc661j0f] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-lpbc661j0f]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-lpbc661j0f] {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9em;
}

/* 播音员选择行 */
.speaker-selector[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

    .speaker-selector .voice-dropdown[b-lpbc661j0f] {
        max-height: 26px;
        font-size: 0.9em;
        padding: 2px 6px;
        min-width: 150px;
        flex-shrink: 0;
    }

/* 语音下拉菜单分组样式 */
.voice-dropdown[b-lpbc661j0f] {
    width: 250px;
    padding: 4px 8px;
    border: 1px solid #4a6fa5;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #333;
    font-size: 1.0em;
    transition: all 0.3s ease;
}

    .voice-dropdown optgroup[b-lpbc661j0f] {
        font-weight: bold;
        color: #4a6fa5;
        padding: 5px 0;
    }

        .voice-dropdown optgroup[label*="中文"][b-lpbc661j0f] {
            color: #2e7d32;
        }

        .voice-dropdown optgroup[label*="英语"][b-lpbc661j0f] {
            color: #1565c0;
        }

        .voice-dropdown optgroup[label*="方言"][b-lpbc661j0f] {
            color: #6a1b9a;
        }

        .voice-dropdown optgroup[label*="多语言"][b-lpbc661j0f] {
            color: #f57c00;
        }

    .voice-dropdown option[b-lpbc661j0f] {
        padding: 6px 12px;
        font-size: 0.8em;
    }

        .voice-dropdown option:hover[b-lpbc661j0f] {
            background-color: #e3f2fd;
        }

/* 调控杆响应式 */
.voice-sliders-horizontal[b-lpbc661j0f] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 8px;
}

    .voice-sliders-horizontal .slider-item[b-lpbc661j0f] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.85em;
        min-width: 120px;
    }

        .voice-sliders-horizontal .slider-item label[b-lpbc661j0f] {
            min-width: 25px;
            color: var(--secondary-text);
            font-size: 0.85em;
            white-space: nowrap;
        }

        .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f] {
            width: 80px;
            height: 4px;
            background: var(--border-color);
            border-radius: 2px;
            outline: none;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f]::-webkit-slider-thumb {
                appearance: none;
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
            }

            .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f]::-moz-range-thumb {
                width: 12px;
                height: 12px;
                background: var(--primary-light);
                border-radius: 50%;
                cursor: pointer;
                border: none;
            }

        .voice-sliders-horizontal .slider-item span[b-lpbc661j0f] {
            min-width: 18px;
            text-align: center;
            font-size: 0.85em;
            color: var(--primary-color);
            font-weight: 500;
        }

/* 语音文本输入区域 */
.voice-text-inputs[b-lpbc661j0f] {
    margin-top: 0px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.text-inputs-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 0px;
}

/* 语音文本输入项 */
.text-input-item[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}

    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em;
        color: var(--secondary-text);
        font-weight: 500;
        white-space: nowrap;
    }

.text-input[b-lpbc661j0f] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.8em;
    width: 100%;
    box-sizing: border-box;
}

    .text-input:focus[b-lpbc661j0f] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.btn-update[b-lpbc661j0f] {
    padding: 4px 10px;
    font-size: 0.8em;
    background: var(--button-info-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-update:hover[b-lpbc661j0f] {
        background: #1976D2;
        transform: translateY(-1px);
    }

/* ===== 主容器布局 ===== */
.iching-container[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    transition: all 0.3s ease;
}

/* 垂直面板布局 */
.vertical-panel[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    flex: 1;
}

/* ===== 第一部分：介绍区域 ===== */
.intro-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 8px 16px 4px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

/* intro-header区域 */
.intro-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    min-height: 50px;
}

    .intro-header[b-lpbc661j0f]::-webkit-scrollbar {
        height: 6px;
    }

    .intro-header[b-lpbc661j0f]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .intro-header[b-lpbc661j0f]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

        .intro-header[b-lpbc661j0f]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

.header-controls[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* 主题选择器样式 */
.theme-selector[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.theme-label[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.theme-dropdown[b-lpbc661j0f] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    flex-shrink: 0;
}

    .theme-dropdown:hover[b-lpbc661j0f] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-lpbc661j0f] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

.section-title[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.section-title2[b-lpbc661j0f] {
    color: var(--primary-color);
    font-size: 1.0em;
    margin: 0;
    font-weight: 600;
}

/* ===== 按钮样式 ===== */
.btn-compact[b-lpbc661j0f] {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}

/* PDF按钮样式 */
.btn-pdf[b-lpbc661j0f] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
}

    .btn-pdf:hover[b-lpbc661j0f] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

/* 固定宽度按钮 */
.fixed-width-btn[b-lpbc661j0f] {
    min-width: 80px;
    flex-shrink: 0;
}

.btn-primary[b-lpbc661j0f] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 14px;
}

    .btn-primary:hover[b-lpbc661j0f] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

.btn-secondary[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

    .btn-secondary:hover[b-lpbc661j0f] {
        background: rgba(255, 152, 0, 0.2);
    }

.btn-info[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-lpbc661j0f] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-lpbc661j0f] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.header-actions[b-lpbc661j0f] {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* 邮件发送控件样式 */
.email-send-option[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
    flex-shrink: 0;
}

.email-checkbox[b-lpbc661j0f] {
    margin-right: 5px;
}

.email-input[b-lpbc661j0f] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    width: 200px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

    .email-input:focus[b-lpbc661j0f] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

/* 抽签须知网格 - 六列布局 */
.intro-content[b-lpbc661j0f] {
    margin: 0;
}

.guidance-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.guidance-item[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    min-height: 50px;
    min-width: 0;
    overflow: hidden;
}

.guidance-icon[b-lpbc661j0f] {
    font-size: 1.1em;
    margin-right: 6px;
    flex-shrink: 0;
}

.guidance-text[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

    .guidance-text strong[b-lpbc661j0f] {
        color: var(--secondary-text);
        font-size: 0.9em;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .guidance-text span[b-lpbc661j0f] {
        color: var(--secondary-text);
        font-size: 0.8em;
        line-height: 1.4;
        padding-top: 3px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

/* ===== 第二部分：签筒区域 ===== */
.lots-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 250px;
    transition: all 0.3s ease;
}

    /* 展开状态 */
    .lots-section.expanded[b-lpbc661j0f] {
        flex: 0 1 auto;
        height: auto;
        min-height: 300px;
        max-height: 70vh;
    }

    /* 小屏幕高度增强 */
    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 250px;
    }

    /* 收起状态 */
    .lots-section.collapsed[b-lpbc661j0f] {
        flex: 0 0 auto;
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

        .lots-section.collapsed .problem-category-section[b-lpbc661j0f],
        .lots-section.collapsed .lots-container-scroll[b-lpbc661j0f] {
            display: none;
        }

.section-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-shrink: 0;
    gap: 20px;
}

    .section-header h3[b-lpbc661j0f] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        flex-shrink: 0;
    }

.selection-info[b-lpbc661j0f] {
    font-size: 0.9em;
    flex-shrink: 0;
    text-align: right;
    min-width: 180px;
    margin-left: 20px;
}

.selected-indicator[b-lpbc661j0f] {
    color: var(--primary-light);
    font-weight: 500;
}

    .selected-indicator strong[b-lpbc661j0f] {
        color: var(--primary-color);
    }

.select-prompt[b-lpbc661j0f] {
    color: var(--secondary-text);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
}

/* 问题类别选择区域 */
.problem-category-section[b-lpbc661j0f] {
    margin-bottom: 5px;
    padding: 3px 10px;
    background: var(--hover-bg);
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    flex-shrink: 0;
    height: auto;
    min-height: auto;
}

.category-grid[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
}

.category-radio[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--secondary-text);
}

    .category-radio:hover[b-lpbc661j0f] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    .category-radio.selected[b-lpbc661j0f] {
        background: var(--button-primary-bg);
        border-color: var(--primary-color);
        color: white;
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    }

    .category-radio input[type="radio"][b-lpbc661j0f] {
        display: none;
    }

.radio-dot[b-lpbc661j0f] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 5px;
    transition: all 0.3s ease;
    position: relative;
}

.category-radio.selected .radio-dot[b-lpbc661j0f] {
    border-color: white;
    background: white;
}

.radio-label[b-lpbc661j0f] {
    flex: 1;
    text-align: center;
    letter-spacing: 6px;
    font-size: 15px;
}

/* 签筒容器 */
.lots-container-scroll[b-lpbc661j0f] {
    height: auto;
    min-height: 200px;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #f8f8f8;
    flex: 1 1 auto;
}

.lots-container[b-lpbc661j0f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 5px;
    padding: 6px;
    min-height: min-content;
    height: fit-content;
}

/* 签筒圆圈 */
.lot-circle[b-lpbc661j0f] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.8em;
}

    .lot-circle.available[b-lpbc661j0f] {
        background: #f0f0f0;
        border: 2px solid #d0d0d0;
        color: var(--secondary-text);
    }

        .lot-circle.available:hover[b-lpbc661j0f] {
            background: var(--primary-light);
            color: white;
            transform: scale(1.1);
            border-color: var(--primary-color);
        }

    .lot-circle.selected[b-lpbc661j0f] {
        background: var(--button-primary-bg);
        color: white;
        border: 2px solid var(--primary-color);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
        animation: pulse-b-lpbc661j0f 2s infinite;
    }

/* 脉冲动画 */
@keyframes pulse-b-lpbc661j0f {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
    }
}

.lot-number[b-lpbc661j0f] {
    font-size: 1.0em;
    font-weight: normal;
}

.fixed-number[b-lpbc661j0f] {
    color: var(--button-info-color);
    font-weight: bold;
}

.lot-dot[b-lpbc661j0f] {
    font-size: 1.2em;
    color: #999;
}

/* ===== 第三部分：签文显示区域 ===== */
.result-section[b-lpbc661j0f] {
    background: var(--section-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    flex: 1;
}

.result-content[b-lpbc661j0f] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.result-header[b-lpbc661j0f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    flex-shrink: 0;
}

    .result-header h3[b-lpbc661j0f] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.2em;
        font-weight: 600;
    }

/* 签文详情滚动容器 */
.lot-details-scroll[b-lpbc661j0f] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.lot-details[b-lpbc661j0f] {
    padding: 0;
    min-height: min-content;
}

.lot-header[b-lpbc661j0f] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-bottom: 1px solid #e8f5e9;
}

.lot-meta[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lot-number-badge[b-lpbc661j0f] {
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.lot-title[b-lpbc661j0f] {
    color: var(--primary-color);
    margin: 0 0 0 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.palace-tag[b-lpbc661j0f] {
    background: #E3F2FD;
    color: #1976D2;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 500;
}

.fortune-tag[b-lpbc661j0f] {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
}

.fortune-good[b-lpbc661j0f] {
    background: #E8F5E8;
    color: var(--primary-color);
}

.fortune-medium[b-lpbc661j0f] {
    background: #FFF3E0;
    color: #EF6C00;
}

.fortune-bad[b-lpbc661j0f] {
    background: #FFEBEE;
    color: #C62828;
}

.fortune-unknown[b-lpbc661j0f] {
    background: #F5F5F5;
    color: #757575;
}

/* 签文内容布局 */
.lot-content-vertical[b-lpbc661j0f] {
    padding: 0;
}

.content-item[b-lpbc661j0f] {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
}

    .content-item:hover[b-lpbc661j0f] {
        background: #fdf2f2;
    }

    .content-item:last-child[b-lpbc661j0f] {
        border-bottom: none;
    }

.content-header[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.content-icon[b-lpbc661j0f] {
    font-size: 1.1em;
}

.content-header h4[b-lpbc661j0f] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.content-body[b-lpbc661j0f] {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.poem-text[b-lpbc661j0f] {
    font-style: italic;
    color: var(--secondary-text);
    line-height: 1.8;
}

/* 特殊内容项样式 */
.advice-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
    border-left: 4px solid var(--primary-light);
}

    .advice-item .content-header[b-lpbc661j0f] {
        color: var(--primary-color);
    }

.advice-text[b-lpbc661j0f] {
    color: var(--primary-color);
    font-style: italic;
    line-height: 1.7;
}

.category-analysis-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #fff8f0 0%, #fff0e8 100%);
    border-left: 4px solid #FF9800;
}

    .category-analysis-item .content-header[b-lpbc661j0f] {
        color: #EF6C00;
    }

.category-analysis-text[b-lpbc661j0f] {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* 宫位分析样式 */
.palace-analysis-item[b-lpbc661j0f] {
    background: linear-gradient(135deg, #f8f8ff 0%, #f0f0ff 100%);
    border-left: 4px solid #7e57c2;
}

    .palace-analysis-item .content-header[b-lpbc661j0f] {
        color: #5e35b1;
    }

/* 宫位信息容器 */
.palace-info-container[b-lpbc661j0f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-bottom: 12px;
    padding: 5px 10px;
    background: rgba(126, 87, 194, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(126, 87, 194, 0.1);
}

.info-item[b-lpbc661j0f] {
    display: flex;
    align-items: center;
    min-width: 90px;
    max-width: 130px;
    padding: 5px 6px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    font-size: 0.85em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label[b-lpbc661j0f] {
    font-weight: 600;
    color: #5e35b1;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.info-value[b-lpbc661j0f] {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 宫位建议容器 */
.palace-advice-container[b-lpbc661j0f] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    font-size: 1.0em;
}

.palace-advantages[b-lpbc661j0f],
.palace-disadvantages[b-lpbc661j0f] {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.palace-advantages[b-lpbc661j0f] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-left: 4px solid var(--primary-light);
}

.palace-disadvantages[b-lpbc661j0f] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-left: 4px solid #FF9800;
}

    .palace-advantages h5[b-lpbc661j0f],
    .palace-disadvantages h5[b-lpbc661j0f] {
        margin: 0 0 6px 0;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.palace-advantages h5[b-lpbc661j0f] {
    color: var(--primary-color);
}

.palace-disadvantages h5[b-lpbc661j0f] {
    color: #EF6C00;
}

.palace-advantages p[b-lpbc661j0f],
.palace-disadvantages p[b-lpbc661j0f] {
    margin: 0;
    line-height: 1.5;
    color: var(--secondary-text);
    font-size: 0.85em;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

/* 状态样式 */
.loading-state[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    color: var(--secondary-text);
    flex: 1;
}

.spinner[b-lpbc661j0f] {
    width: 22px;
    height: 22px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid var(--primary-light);
    border-radius: 50%;
    animation: spin-b-lpbc661j0f 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-lpbc661j0f {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 没有抽签时：签词区域显示 */
.empty-state[b-lpbc661j0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
}

.empty-icon[b-lpbc661j0f] {
    font-size: 2.5em;
    margin-bottom: 0px;
    opacity: 0.9;
}

.empty-state h3[b-lpbc661j0f] {
    color: var(--secondary-text);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.empty-state p[b-lpbc661j0f] {
    margin: 0;
    font-size: 0.9em;
}

.empty-state-container[b-lpbc661j0f] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.empty-state-image[b-lpbc661j0f] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
}

/* 带边框的图片容器 */
.bordered-image[b-lpbc661j0f] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 右侧内容区域 */
.empty-state-content[b-lpbc661j0f] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
}

/* txt说明 */
.remark-content-txt[b-lpbc661j0f] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: none;
}

/* 图片轮播相关样式 */
.carousel-container[b-lpbc661j0f] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 图片样式 */
.responsive-image[b-lpbc661j0f] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 轮播控制按钮 */
.carousel-controls[b-lpbc661j0f] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

/* 三个按钮容器分别定位 */
.carousel-btn-left[b-lpbc661j0f],
.carousel-btn-center[b-lpbc661j0f],
.carousel-btn-right[b-lpbc661j0f] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-lpbc661j0f] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

    .carousel-btn:active[b-lpbc661j0f] {
        transform: scale(0.95);
    }

.carousel-toggle[b-lpbc661j0f] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

/* Split窗口分割相关样式 */
.empty-state-container[b-lpbc661j0f] {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.resizer[b-lpbc661j0f] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-lpbc661j0f] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-lpbc661j0f] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-lpbc661j0f] {
    background-color: #888;
}

.empty-state-image[b-lpbc661j0f], .empty-state-content[b-lpbc661j0f] {
    transition: width 0.1s ease;
    overflow: hidden;
}

/* 滚动条样式 */
.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar {
    width: 12px;
}

.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-track,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb,
.lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

    .lots-container-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb:hover,
    .lot-details-scroll[b-lpbc661j0f]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.lots-container-scroll[b-lpbc661j0f],
.lot-details-scroll[b-lpbc661j0f] {
    scrollbar-width: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* === 响应式设计 === */
@media (max-width: 1200px) {
    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 320px;
        max-height: 65vh;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 350px;
        min-height: 220px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .iching-container[b-lpbc661j0f] {
        padding: 6px;
        height: 100%;
    }

    .vertical-panel[b-lpbc661j0f] {
        gap: 6px;
        min-height: 800px;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .header-actions[b-lpbc661j0f] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header[b-lpbc661j0f] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        text-align: left;
    }

    .header-Title[b-lpbc661j0f] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .selection-info[b-lpbc661j0f] {
        text-align: left;
        min-width: auto;
        margin-left: 20px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 400px;
        max-height: 60vh;
        flex: 0 1 auto;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 400px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 300px;
        min-height: 200px;
        flex: 1 1 auto;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 350px;
        flex: 1;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
    }

    .header-controls[b-lpbc661j0f] {
        gap: 10px;
    }

    .theme-selector[b-lpbc661j0f] {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .theme-label[b-lpbc661j0f] {
        font-size: 0.8em;
    }

    .theme-dropdown[b-lpbc661j0f] {
        min-width: 100px;
        font-size: 0.8em;
    }

    .voice-controls-grid[b-lpbc661j0f] {
        gap: 10px;
    }

    .voice-params[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .voice-sliders-horizontal[b-lpbc661j0f] {
        flex-wrap: wrap;
    }

        .voice-sliders-horizontal .slider-item[b-lpbc661j0f] {
            flex: 1 1 120px;
            min-width: 100px;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f] {
                width: 80px;
            }

    .public-params-row[b-lpbc661j0f] {
        gap: 6px;
        padding-bottom: 6px;
    }

        .public-params-row .text-input[b-lpbc661j0f] {
            min-width: 50px;
            font-size: 0.75em;
        }

    .speaker-selector[b-lpbc661j0f] {
        gap: 4px;
    }

        .speaker-selector .voice-dropdown[b-lpbc661j0f] {
            font-size: 0.9em;
            min-width: 150px;
        }

    .carousel-controls[b-lpbc661j0f] {
        width: 180px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .empty-state-image[b-lpbc661j0f] {
        min-width: 150px;
    }

    .empty-state-content[b-lpbc661j0f] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .iching-container[b-lpbc661j0f] {
        padding: 4px;
        height: 100%;
    }

    .intro-header[b-lpbc661j0f] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        padding-right: 8px;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .guidance-item[b-lpbc661j0f] {
        min-height: 45px;
    }

    .guidance-text strong[b-lpbc661j0f] {
        font-size: 0.85em;
    }

    .guidance-text span[b-lpbc661j0f] {
        font-size: 0.75em;
        -webkit-line-clamp: 2;
    }

    .lots-container[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        gap: 4px;
    }

    .lot-circle[b-lpbc661j0f] {
        width: 32px;
        height: 32px;
    }

    .lot-header[b-lpbc661j0f] {
        padding: 10px 12px;
    }

    .lot-meta[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .content-item[b-lpbc661j0f] {
        padding: 10px 12px;
    }

    .palace-info-container[b-lpbc661j0f] {
        gap: 6px 10px;
    }

    .info-item[b-lpbc661j0f] {
        min-width: 80px;
        max-width: 110px;
        font-size: 0.8em;
        padding: 4px 5px;
    }

    .info-label[b-lpbc661j0f] {
        margin-right: 4px;
        font-size: 0.85em;
    }

    .palace-advice-container[b-lpbc661j0f] {
        flex-direction: column;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 6px;
    }

    .category-radio[b-lpbc661j0f] {
        padding: 4px 8px;
        font-size: 0.8em;
    }

    .radio-dot[b-lpbc661j0f] {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 380px;
        max-height: 55vh;
        flex: 0 1 auto;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 420px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 280px;
        min-height: 180px;
        flex: 1 1 auto;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 380px;
        flex: 1;
    }

    .problem-category-section[b-lpbc661j0f] {
        padding: 8px;
    }

    .voice-controls-grid[b-lpbc661j0f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .voice-test-buttons[b-lpbc661j0f] {
        order: 1;
    }

    .voice-mode-selector[b-lpbc661j0f] {
        order: 2;
    }

    .voice-params[b-lpbc661j0f] {
        order: 3;
        width: 100%;
    }

    .voice-sliders-horizontal[b-lpbc661j0f] {
        width: 100%;
        justify-content: space-between;
    }

        .voice-sliders-horizontal .slider-item[b-lpbc661j0f] {
            flex: 1;
            justify-content: center;
        }

    .public-params-row[b-lpbc661j0f] {
        overflow-x: auto;
        padding: 4px 2px;
        gap: 4px;
    }

        .public-params-row .text-input[b-lpbc661j0f] {
            min-width: 45px;
            font-size: 0.7em;
        }

        .public-params-row label[b-lpbc661j0f] {
            font-size: 0.75em;
        }

    .speaker-selector[b-lpbc661j0f] {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
    }

        .speaker-selector .label-text[b-lpbc661j0f] {
            font-size: 0.75em;
        }

        .speaker-selector .voice-dropdown[b-lpbc661j0f] {
            min-width: 150px;
            font-size: 0.9em;
        }

    .voice-text-inputs[b-lpbc661j0f] {
        padding: 6px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em;
    }

    .text-input[b-lpbc661j0f] {
        font-size: 0.75em;
        padding: 2px 4px;
    }

    .btn-update[b-lpbc661j0f] {
        font-size: 0.75em;
        padding: 3px 6px;
    }

    .empty-state-container[b-lpbc661j0f] {
        flex-direction: column;
        gap: 5px;
    }

    .empty-state-image[b-lpbc661j0f],
    .empty-state-content[b-lpbc661j0f] {
        flex: 1 1 100%;
        width: 100%;
    }

    .carousel-controls[b-lpbc661j0f] {
        bottom: 5px;
        width: 180px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 25px;
        height: 25px;
        font-size: 10px;
        margin: 0 10px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .fixed-width-btn[b-lpbc661j0f] {
        min-width: 70px;
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .lots-container[b-lpbc661j0f] {
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    }

    .lot-circle[b-lpbc661j0f] {
        width: 28px;
        height: 28px;
    }

    .palace-info-container[b-lpbc661j0f] {
        gap: 4px 6px;
    }

    .info-item[b-lpbc661j0f] {
        min-width: 70px;
        max-width: 90px;
        font-size: 0.75em;
    }

    .info-label[b-lpbc661j0f] {
        margin-right: 3px;
        font-size: 0.8em;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .guidance-item[b-lpbc661j0f] {
        padding: 4px;
    }

    .guidance-text strong[b-lpbc661j0f] {
        font-size: 0.8em;
    }

    .guidance-text span[b-lpbc661j0f] {
        font-size: 0.7em;
        -webkit-line-clamp: 2;
    }

    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .problem-category-section[b-lpbc661j0f] {
        padding: 6px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 420px;
        max-height: 60vh;
    }

    .lots-section.enhanced-mobile-height.expanded[b-lpbc661j0f] {
        min-height: 460px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 320px;
        min-height: 200px;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 400px;
    }

    .section-header[b-lpbc661j0f] {
        gap: 6px;
    }

    .header-actions[b-lpbc661j0f] {
        justify-content: center;
    }

        .header-actions .btn-compact[b-lpbc661j0f] {
            padding: 3px 8px;
            font-size: 0.75em;
        }

    .intro-header[b-lpbc661j0f] {
        flex-wrap: nowrap;
        gap: 5px;
        padding-bottom: 6px;
    }

    .fixed-width-btn[b-lpbc661j0f] {
        min-width: 65px;
        font-size: 0.75em;
        padding: 2px 6px;
    }

    .theme-label[b-lpbc661j0f] {
        display: none;
    }

    .theme-selector[b-lpbc661j0f] {
        align-items: center;
    }

    .theme-dropdown[b-lpbc661j0f] {
        min-width: 80px;
        font-size: 0.75em;
        padding: 3px 6px;
    }

    .voice-settings-section[b-lpbc661j0f] {
        padding: 6px 8px;
    }

    .voice-controls-grid[b-lpbc661j0f] {
        gap: 6px;
    }

    .btn-small[b-lpbc661j0f] {
        min-width: 55px !important;
        font-size: 0.7em !important;
        padding: 1px 6px !important;
    }

    .voice-dropdown[b-lpbc661j0f] {
        min-width: 60px;
        font-size: 0.7em;
    }

    .public-params-row[b-lpbc661j0f] {
        gap: 3px;
        padding: 3px 2px;
    }

        .public-params-row .text-input[b-lpbc661j0f] {
            min-width: 40px;
            font-size: 0.65em;
            padding: 1px 3px;
        }

        .public-params-row label[b-lpbc661j0f] {
            font-size: 0.7em;
        }

        .public-params-row .btn-update[b-lpbc661j0f] {
            font-size: 0.7em;
            padding: 2px 4px;
            min-width: 90px;
        }

    .speaker-selector[b-lpbc661j0f] {
        gap: 3px;
    }

        .speaker-selector .label-text[b-lpbc661j0f] {
            font-size: 0.7em;
        }

        .speaker-selector .voice-dropdown[b-lpbc661j0f] {
            min-width: 150px;
            font-size: 0.8em;
        }

    .voice-sliders-horizontal .slider-item input[type="range"][b-lpbc661j0f] {
        width: 60px;
    }

    .voice-sliders-horizontal .slider-item span[b-lpbc661j0f] {
        min-width: 18px;
        font-size: 0.6em;
    }

    .voice-text-inputs[b-lpbc661j0f] {
        padding: 4px;
    }

    .text-inputs-grid[b-lpbc661j0f] {
        gap: 3px;
    }

    .text-input-item label[b-lpbc661j0f] {
        font-size: 0.8em;
    }

    .text-input[b-lpbc661j0f] {
        font-size: 0.75em;
        padding: 1px 3px;
    }

    .btn-update[b-lpbc661j0f] {
        font-size: 0.75em;
        padding: 2px 4px;
    }

    .carousel-controls[b-lpbc661j0f] {
        width: 160px;
        bottom: 3px;
    }

    .carousel-btn[b-lpbc661j0f] {
        width: 22px;
        height: 22px;
        font-size: 9px;
        margin: 0 8px;
    }

    .carousel-toggle[b-lpbc661j0f] {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* 超小高度设备适配 */
@media (max-height: 700px) {
    .iching-container[b-lpbc661j0f] {
        min-height: 650px;
    }

    .vertical-panel[b-lpbc661j0f] {
        min-height: 600px;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 280px;
        max-height: 45vh;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        max-height: 220px;
        min-height: 160px;
    }

    .result-section[b-lpbc661j0f] {
        min-height: 280px;
    }
}

/* 针对问题类别区域换行的特殊处理 */
@media (max-width: 360px) {
    .category-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-radio[b-lpbc661j0f] {
        padding: 3px 6px;
        font-size: 0.75em;
    }

    .guidance-grid[b-lpbc661j0f] {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .guidance-item[b-lpbc661j0f] {
        padding: 3px;
    }

    .guidance-text strong[b-lpbc661j0f] {
        font-size: 0.75em;
    }

    .guidance-text span[b-lpbc661j0f] {
        font-size: 0.65em;
        -webkit-line-clamp: 2;
    }

    .lots-section.expanded[b-lpbc661j0f] {
        min-height: 450px;
    }

    .lots-container-scroll[b-lpbc661j0f] {
        min-height: 220px;
    }
}
/* _content/LEAFBlazorApp25/Components/IChing/Read/Reading.razor.rz.scp.css */
/* ===== 主题变量定义 ===== */
/*#region 主题变量 */
/* 默认主题 - 青莲禅意 */
.reading-container[b-44ji60or6u] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-nav-color: #9C27B0;
    /* 朗读状态颜色 */
    --status-speaking: #4CAF50;
    --status-paused: #FF9800;
    --status-stopped: #F44336;
    --status-idle: #757575;
    /* 段落高亮颜色 */
    --paragraph-current: #E8F5E8;
    --paragraph-completed: #F1F8E9;
    --paragraph-highlight: #FFF3E0;
    --paragraph-highlight-border: #ff9800;
    --paragraph-speaking: rgba(33, 150, 243, 0.1);
    --paragraph-speaking-border: #2196f3;
}

    /* 朱砂祥瑞主题 */
    .reading-container.theme-vermillion[b-44ji60or6u] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #D32F2F;
        --paragraph-current: #FFEBEE;
        --paragraph-completed: #FFE0E0;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(211, 47, 47, 0.1);
        --paragraph-speaking-border: #d32f2f;
    }

    /* 碧海青天主题 */
    .reading-container.theme-ocean[b-44ji60or6u] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #1976D2;
        --paragraph-current: #E3F2FD;
        --paragraph-completed: #E8EAF6;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(25, 118, 210, 0.1);
        --paragraph-speaking-border: #1976d2;
    }

    /* 紫气东来主题 */
    .reading-container.theme-purple[b-44ji60or6u] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .reading-container.theme-golden[b-44ji60or6u] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }
/*#endregion */

/* ===== 主容器布局 ===== */
.reading-container[b-44ji60or6u] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 3px 8px 15px 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

.vertical-panel[b-44ji60or6u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* ===== 控制面板区域 ===== */
.control-panel[b-44ji60or6u] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px 16px 0px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

/*#region panel-header 区域 - 新需求：小窗体时不换行 */
.panel-header[b-44ji60or6u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    /*border-bottom: 2px solid #f0f0f0;*/
    border-bottom: 2px solid var(--primary-color);
    gap: 15px;
    flex-wrap: nowrap !important; /* 强制不换行 */
}

.section-title[b-44ji60or6u] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.header-icon[b-44ji60or6u] {
    margin-right: 8px;
    font-size: 1.2em;
}

.theme-selector[b-44ji60or6u] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.theme-dropdown[b-44ji60or6u] {
    padding: 4px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 130px;
    white-space: nowrap;
}

.panel-header .stats-info[b-44ji60or6u] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: normal;
    margin-left: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* 允许文本截断 */
}
/*#endregion */

/* ===== 控制按钮区域 ===== */
/*#region control-buttons - 新需求：小窗体时换行 */
.control-buttons[b-44ji60or6u] {
    display: flex;
    flex-wrap: wrap; /* 恢复换行 */
    gap: 15px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
}

/* 小屏幕时调整按钮间距 */
@media (max-width: 768px) {
    .control-buttons[b-44ji60or6u] {
        gap: 8px;
        justify-content: center;
    }
}
/*#endregion */

/* ===== 按钮样式 ===== */
.btn-compact[b-44ji60or6u] {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 90px;
    text-align: center;
    white-space: nowrap;
}

.btn-primary[b-44ji60or6u] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-44ji60or6u] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .btn-primary:disabled[b-44ji60or6u] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-44ji60or6u] {
    background: var(--button-secondary-bg);
    color: var(--secondary-text);
    border: 1px solid rgba(120, 120, 120, 0.3);
}

    .btn-secondary:hover:not(:disabled)[b-44ji60or6u] {
        background: rgba(120, 120, 120, 0.2);
    }

.btn-info[b-44ji60or6u] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-44ji60or6u] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-44ji60or6u] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.btn-nav[b-44ji60or6u] {
    background: var(--button-secondary-bg);
    color: var(--button-nav-color);
    border: 1px solid rgba(156, 39, 176, 0.3);
    min-width: 80px;
}

    .btn-nav:hover:not(:disabled)[b-44ji60or6u] {
        background: rgba(156, 39, 176, 0.2);
    }

.btn-small[b-44ji60or6u] {
    padding: 3px 10px 3px 5px !important;
    font-size: 0.8em !important;
    min-width: 60px !important;
}

/* ===== 语音下拉菜单分组颜色标识 ===== */
/* 分组标题样式 - 增强可读性 */
optgroup[b-44ji60or6u] {
    font-weight: bold !important;
    font-size: 0.95em !important;
    padding: 8px 5px !important;
    border-top: 1px solid #eee !important;
}
    /* 第1组：推荐语音 (绿色) */
    optgroup.core-voice-group[b-44ji60or6u] {
        color: #2E7D32 !important;
        background-color: rgba(46, 125, 50, 0.08) !important;
        border-left: 4px solid #2E7D32 !important;
        margin: 3px 0 !important;
        padding: 6px 8px !important;
    }

    /* 第2组：常用语音 (蓝色) */
    optgroup.extension-voice-group[b-44ji60or6u] {
        color: #1976D2 !important;
        background-color: rgba(25, 118, 210, 0.08) !important;
        border-left: 4px solid #1976D2 !important;
        margin: 3px 0 !important;
        padding: 6px 8px !important;
    }

    /* 第3组：其他语音 (紫色) */
    optgroup.other-voice-group[b-44ji60or6u] {
        color: #7B1FA2 !important;
        background-color: rgba(123, 31, 162, 0.08) !important;
        border-left: 4px solid #7B1FA2 !important;
        margin: 3px 0 !important;
        padding: 6px 8px !important;
    }

    /* 第4组：系统语音 (灰色) */
    optgroup.system-voice-group[b-44ji60or6u] {
        color: #757575 !important;
        font-style: italic !important;
        background-color: rgba(117, 117, 117, 0.08) !important;
        border-left: 4px dashed #757575 !important;
        margin: 3px 0 !important;
        padding: 6px 8px !important;
    }

/* 下拉选项根据分组着色 */
.voice-dropdown option[data-group="core"][b-44ji60or6u] {
    color: #2E7D32 !important;
    font-weight: 500 !important;
    padding-left: 20px !important;
    background-color: rgba(46, 125, 50, 0.1) !important;
}

.voice-dropdown option[data-group="extension"][b-44ji60or6u] {
    color: #1976D2 !important;
    padding-left: 20px !important;
    background-color: rgba(25, 118, 210, 0.1) !important;
}

.voice-dropdown option[data-group="other"][b-44ji60or6u] {
    color: #7B1FA2 !important;
    padding-left: 20px !important;
    background-color: rgba(123, 31, 162, 0.1) !important;
}

.voice-dropdown option[data-group="system"][b-44ji60or6u] {
    color: #757575 !important;
    font-style: italic !important;
    padding-left: 20px !important;
    background-color: rgba(117, 117, 117, 0.1) !important;
}

/* 鼠标悬停效果 */
.voice-dropdown option:hover[b-44ji60or6u] {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: #333 !important;
}

/* 选中项效果 */
.voice-dropdown option:checked[b-44ji60or6u] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1)) !important;
    font-weight: bold !important;
}

/* 下拉菜单整体样式增强 */
.voice-dropdown[b-44ji60or6u] {
    border: 2px solid var(--border-color) !important;
    background: linear-gradient(135deg, #ffffff, #f9f9f9) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    max-height: 400px !important; /* 限制高度避免过长 */
    overflow-y: auto !important;
}

    .voice-dropdown:hover[b-44ji60or6u] {
        border-color: var(--primary-light) !important;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15) !important;
    }

    .voice-dropdown:focus[b-44ji60or6u] {
        outline: none !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
    }

/* 语音统计信息增强 */
.voice-stats[b-44ji60or6u] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 0px;
    padding: 0px;
    border-radius: 6px;
    border: 0px solid #eee;
}

.stat-item[b-44ji60or6u] {
    font-size: 0.9em !important;
    color: var(--secondary-text);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    optgroup.core-voice-group[b-44ji60or6u],
    optgroup.extension-voice-group[b-44ji60or6u],
    optgroup.other-voice-group[b-44ji60or6u],
    optgroup.system-voice-group[b-44ji60or6u] {
        font-size: 0.9em !important;
        padding: 3px 6px !important;
    }

    .voice-dropdown option[b-44ji60or6u] {
        font-size: 0.9em !important;
        padding-left: 15px !important;
    }
}
/* ===== 语音设置区域 ===== */
.voice-settings-section[b-44ji60or6u] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    border: 1px solid var(--border-color);
}

.voice-controls-grid[b-44ji60or6u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 12px;
}

.voice-param-group[b-44ji60or6u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.param-label[b-44ji60or6u] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.voice-dropdown[b-44ji60or6u] {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    width: 100%;
    max-width: 300px;
}

    .voice-dropdown:hover[b-44ji60or6u] {
        border-color: var(--primary-light);
    }

    .voice-dropdown:focus[b-44ji60or6u] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

/* 语音信息显示 */
.voice-info[b-44ji60or6u] {
    font-size: 0.8em;
    color: var(--secondary-text);
    margin-top: 4px;
    font-style: italic;
}

.voice-stats[b-44ji60or6u] {
    display: flex;
    gap: 8px;
    font-size: 0.75em;
    color: var(--secondary-text);
}

.stat-item[b-44ji60or6u] {
    background: rgba(120, 120, 120, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===== 滑动条样式 ===== */
.slider-with-value[b-44ji60or6u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-slider[b-44ji60or6u] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

    .voice-slider[b-44ji60or6u]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .voice-slider[b-44ji60or6u]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.slider-value[b-44ji60or6u] {
    min-width: 35px;
    text-align: center;
    font-size: 0.85em;
    color: var(--primary-color);
    font-weight: 600;
}

/* ===== 预设按钮 ===== */
.speed-presets[b-44ji60or6u],
.pitch-presets[b-44ji60or6u],
.volume-presets[b-44ji60or6u],
.pause-presets[b-44ji60or6u] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.preset-btn[b-44ji60or6u] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    color: var(--secondary-text);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .preset-btn:hover[b-44ji60or6u] {
        border-color: var(--primary-light);
        color: var(--primary-color);
    }

    .preset-btn.active[b-44ji60or6u] {
        background: var(--primary-light);
        color: white;
        border-color: var(--primary-color);
    }

/* ===== 高级设置 ===== */
.advanced-settings[b-44ji60or6u] {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.setting-group[b-44ji60or6u] {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.checkbox-label[b-44ji60or6u] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-44ji60or6u] {
        display: none;
    }

.checkmark[b-44ji60or6u] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-44ji60or6u] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-44ji60or6u]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-44ji60or6u] {
    white-space: nowrap;
    font-weight: 500;
}

/* ===== 文本区域容器 ===== */
.text-area-container[b-44ji60or6u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 100%;
    min-height: 0;
    flex: 1;
    margin-bottom:5px;
}

@media (max-width: 1024px) {
    .text-area-container[b-44ji60or6u] {
        grid-template-columns: 1fr;
    }
}

/*#region 文本输入区域 - 新需求：重新组织结构 */
.text-input-section[b-44ji60or6u] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 新的文本头部结构 */
.text-header[b-44ji60or6u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    gap: 15px;
}

.text-header-title-row[b-44ji60or6u] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0; /* 允许文本截断 */
}

.text-header h3[b-44ji60or6u] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-icon[b-44ji60or6u] {
    font-size: 1.1em;
}

.text-header .text-actions[b-44ji60or6u] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-left:20px;
}

.text-header .stats-info[b-44ji60or6u] {
    font-size: 0.9em;
    color: var(--secondary-text);
    font-weight: normal;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: right;
    padding-right:6px;
}
/*#endregion */

/* ===== 文本输入框 ===== */
.text-input-area[b-44ji60or6u] {
    flex: 1;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.5;
    resize: none;
    font-family: 'Microsoft YaHei', 'Segoe UI', monospace;
    min-height: 60px;
    /*max-height: 250px;*/
    overflow-y: auto;
    transition: max-height 0.3s ease;
    /* 默认：横向布局时不限制高度 */
    max-height: none;
}

    .text-input-area:focus[b-44ji60or6u] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .text-input-area[b-44ji60or6u]::placeholder {
        color: #999;
        font-style: italic;
    }

    /*#region 文本输入区域折叠状态 */
    .text-input-area.collapsed[b-44ji60or6u] {
        max-height: 40px !important;
        overflow: hidden;
    }
/*#endregion */

/* ===== 段落显示区域 ===== */
/*#region paragraph-header - 新需求：小窗体时不换行 */
.paragraph-display-section[b-44ji60or6u] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.paragraph-header[b-44ji60or6u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    gap: 15px;
    flex-wrap: nowrap !important; /* 强制不换行 */
}

    .paragraph-header h3[b-44ji60or6u] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .paragraph-header .text-actions[b-44ji60or6u] {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
/*#endregion */

/* ===== 段落容器 ===== */
.paragraph-container[b-44ji60or6u] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* ===== 段落项目样式 ===== */
.paragraph-item[b-44ji60or6u] {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
}

    .paragraph-item:hover[b-44ji60or6u] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    /* ===== 段落高亮样式 ===== */
    .paragraph-item.current-highlighted[b-44ji60or6u] {
        background-color: rgba(255, 255, 200, 0.3) !important;
        border-left: 4px solid var(--paragraph-highlight-border) !important;
        padding-left: 12px !important;
        transition: all 0.3s ease !important;
    }

    .paragraph-item.current-speaking[b-44ji60or6u] {
        background-color: var(--paragraph-speaking) !important;
        border-left: 4px solid var(--paragraph-speaking-border) !important;
        font-weight: bold !important;
        animation: pulse-highlight-b-44ji60or6u 2s infinite;
    }

    .paragraph-item.completed[b-44ji60or6u] {
        background: var(--paragraph-completed);
        border-color: #C8E6C9;
        opacity: 0.7;
        color: #666;
    }

.paragraph-number[b-44ji60or6u] {
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 8px;
    min-width: 25px;
    flex-shrink: 0;
}

.paragraph-text[b-44ji60or6u] {
    flex: 1;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 0.95em;
    white-space: pre-wrap;
    word-break: break-word;
}

.paragraph-status[b-44ji60or6u] {
    margin-left: 8px;
    font-size: 0.9em;
    flex-shrink: 0;
}

    .paragraph-status.completed[b-44ji60or6u] {
        color: #4CAF50;
    }

    .paragraph-status.speaking[b-44ji60or6u] {
        color: var(--primary-light);
        animation: blink-b-44ji60or6u 1s infinite;
    }

.paragraph-duration[b-44ji60or6u] {
    font-size: 0.7em;
    color: #888;
    margin-left: 5px;
}

/* ===== 从此处开始按钮 ===== */
.start-from-here-btn[b-44ji60or6u] {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.7em;
    transition: all 0.2s ease;
    z-index: 10;
}

.paragraph-item:hover .start-from-here-btn[b-44ji60or6u] {
    display: block;
}

.start-from-here-btn:hover[b-44ji60or6u] {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--primary-color);
}

/* ===== 空段落显示 ===== */
.empty-paragraphs[b-44ji60or6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--secondary-text);
    padding: 40px 20px;
}

.empty-icon[b-44ji60or6u] {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-text[b-44ji60or6u] {
    font-size: 1em;
    text-align: center;
    max-width: 300px;
}

/* ===== 状态指示器 ===== */
.status-indicator[b-44ji60or6u] {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 10px;
    white-space: nowrap;
}

.status-speaking[b-44ji60or6u] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--status-speaking);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-paused[b-44ji60or6u] {
    background: rgba(255, 152, 0, 0.1);
    color: var(--status-paused);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-stopped[b-44ji60or6u] {
    background: rgba(244, 67, 54, 0.1);
    color: var(--status-stopped);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.status-idle[b-44ji60or6u] {
    background: rgba(117, 117, 117, 0.1);
    color: var(--status-idle);
    border: 1px solid rgba(117, 117, 117, 0.3);
}

/* ===== 动画定义 ===== */
@keyframes pulse-b-44ji60or6u {
    0% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }
}

@keyframes blink-b-44ji60or6u {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes pulse-highlight-b-44ji60or6u {
    0% {
        background-color: var(--paragraph-speaking);
    }

    50% {
        background-color: rgba(33, 150, 243, 0.2);
    }

    100% {
        background-color: var(--paragraph-speaking);
    }
}

/* ===== 滚动条样式 ===== */
.text-input-area[b-44ji60or6u]::-webkit-scrollbar,
.paragraph-container[b-44ji60or6u]::-webkit-scrollbar {
    width: 10px;
}

.text-input-area[b-44ji60or6u]::-webkit-scrollbar-track,
.paragraph-container[b-44ji60or6u]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.text-input-area[b-44ji60or6u]::-webkit-scrollbar-thumb,
.paragraph-container[b-44ji60or6u]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

    .text-input-area[b-44ji60or6u]::-webkit-scrollbar-thumb:hover,
    .paragraph-container[b-44ji60or6u]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/*#region 响应式字体调整 - 新需求：小窗体时字体调整 */
@media (max-width: 1024px) {
    .section-title[b-44ji60or6u] {
        font-size: 1.2em !important; /* 不小于四号字 */
    }

    .text-header h3[b-44ji60or6u],
    .paragraph-header h3[b-44ji60or6u] {
        font-size: 1.0em !important; /* 小四号 */
    }
}

@media (max-width: 768px) {
    .section-title[b-44ji60or6u] {
        font-size: 1.1em !important;
    }

    .text-header h3[b-44ji60or6u],
    .paragraph-header h3[b-44ji60or6u] {
        font-size: 0.95em !important;
    }

    .panel-header[b-44ji60or6u] {
        gap: 10px;
    }

        .panel-header .stats-info[b-44ji60or6u] {
            max-width: 150px;
        }
}

@media (max-width: 480px) {
    .section-title[b-44ji60or6u] {
        font-size: 1.0em !important;
    }

    .text-header h3[b-44ji60or6u],
    .paragraph-header h3[b-44ji60or6u] {
        font-size: 0.9em !important;
    }

    .panel-header .stats-info[b-44ji60or6u] {
        max-width: 100px;
        display: none; /* 超小屏幕隐藏 */
    }
}
/*#endregion */

/* ===== 响应式设计 ===== */

/* 大屏幕 (1200px以下) */
@media (max-width: 1200px) {
    .voice-controls-grid[b-44ji60or6u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .setting-group[b-44ji60or6u] {
        gap: 10px;
    }
}

/* 中等屏幕 (1024px以下) */
@media (max-width: 1024px) {
    .reading-container[b-44ji60or6u] {
        height: auto;
        min-height: 100vh;
        padding: 6px;
    }

    .vertical-panel[b-44ji60or6u] {
        gap: 8px;
    }

    .voice-controls-grid[b-44ji60or6u] {
        grid-template-columns: 1fr;
    }

    .text-area-container[b-44ji60or6u] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .text-input-area[b-44ji60or6u] {
        max-height: 200px; /* 纵向布局时限制高度 */
    }
}

/* 平板屏幕 (768px以下) */
@media (max-width: 768px) {
    .reading-container[b-44ji60or6u] {
        padding: 4px;
    }

    .control-panel[b-44ji60or6u] {
        padding: 10px 12px;
    }

    .voice-settings-section[b-44ji60or6u] {
        padding: 10px;
    }

    .text-input-section[b-44ji60or6u],
    .paragraph-display-section[b-44ji60or6u] {
        padding: 8px;
    }

    .text-input-area[b-44ji60or6u] {
        padding: 8px;
        font-size: 0.9em;
    }

    .paragraph-item[b-44ji60or6u] {
        padding: 8px;
        flex-direction: column;
    }

    .paragraph-number[b-44ji60or6u] {
        margin-bottom: 4px;
    }

    .start-from-here-btn[b-44ji60or6u] {
        position: relative;
        right: auto;
        top: auto;
        align-self: flex-end;
        margin-top: 5px;
    }
}

/* 手机屏幕 (480px以下) */
@media (max-width: 480px) {
    .btn-compact[b-44ji60or6u] {
        min-width: 70px;
        font-size: 0.75em;
        padding: 4px 8px;
    }

    .voice-dropdown[b-44ji60or6u] {
        max-width: 100%;
    }

    .slider-with-value[b-44ji60or6u] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .slider-value[b-44ji60or6u] {
        text-align: right;
    }

    .speed-presets[b-44ji60or6u],
    .pitch-presets[b-44ji60or6u],
    .volume-presets[b-44ji60or6u] {
        justify-content: center;
    }

    .preset-btn[b-44ji60or6u] {
        padding: 2px 4px;
        font-size: 0.7em;
    }
}

/* ===== 高亮样式增强 ===== */
.paragraph-item.current-highlighted[b-44ji60or6u] {
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.paragraph-item.current-speaking[b-44ji60or6u]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(33, 150, 243, 0.3);
    pointer-events: none;
    z-index: 1;
}

.paragraph-item:hover:not(.current-speaking):not(.current-highlighted)[b-44ji60or6u] {
    background: linear-gradient(135deg, var(--hover-bg), rgba(255, 255, 255, 0.8)) !important;
    border-color: var(--primary-light) !important;
}

/* 语音标签样式 */
.voice-language[b-44ji60or6u] {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.voice-recommend[b-44ji60or6u] {
    color: #ff9800;
    margin-left: 5px;
}

/* 语音映射标签 */
.voice-tag[b-44ji60or6u] {
    font-size: 0.7em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

.core-tag[b-44ji60or6u] {
    background: rgba(76, 175, 80, 0.2);
    color: #2E7D32;
}

.mapped-tag[b-44ji60or6u] {
    background: rgba(33, 150, 243, 0.2);
    color: #1565C0;
}

.system-tag[b-44ji60or6u] {
    background: rgba(117, 117, 117, 0.2);
    color: #424242;
}

/* 段落下划线提示 */
.paragraph-item.current-highlighted .paragraph-text[b-44ji60or6u] {
    position: relative;
}

    .paragraph-item.current-highlighted .paragraph-text[b-44ji60or6u]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--paragraph-highlight-border), transparent);
        border-radius: 1px;
    }

/* 滚动动画 */
@keyframes scroll-highlight-b-44ji60or6u {
    0% {
        background-color: rgba(255, 235, 59, 0.3);
    }

    50% {
        background-color: rgba(255, 235, 59, 0.6);
    }

    100% {
        background-color: rgba(255, 235, 59, 0.3);
    }
}

.paragraph-item.scrolling-highlight[b-44ji60or6u] {
    animation: scroll-highlight-b-44ji60or6u 2s ease-in-out infinite;
}

/* 语音加载动画 */
.voice-loading[b-44ji60or6u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

.loading-spinner[b-44ji60or6u] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-44ji60or6u 1s linear infinite;
}

@keyframes spin-b-44ji60or6u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-44ji60or6u] {
    font-size: 0.85em;
    color: var(--secondary-text);
}

/* ===== 段落容器滚动优化 ===== */
.paragraph-container[b-44ji60or6u] {
    scroll-behavior: smooth;
}

.paragraph-item[b-44ji60or6u] {
    scroll-margin-top: 20px;
    scroll-margin-bottom: 20px;
}

.paragraph-container:has(.paragraph-item.current-highlighted)[b-44ji60or6u] {
    transition: scroll-top 0.5s ease;
}

/* ==**【独立功能区】 1Split 分割条样式 **== */
/* ===== 1Split 分割条样式 - 修复版 ===== */

/* 分割条容器 */
.split-container-1[b-44ji60or6u] {
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 400px !important;
}

/* 左侧面板 */
#1SplitLeft.text-input-section[b-44ji60or6u] {
    width: 50% !important;
    min-width: 300px !important;
    max-width: 80% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    resize: none !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* 分割条 */
#1SplitBar.splitter-bar[b-44ji60or6u] {
    width: 8px !important;
    min-width: 8px !important;
    background-color: #ddd !important; /* 浅灰色 */
    cursor: col-resize !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1000 !important;
    margin: 5px 1px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background-color 0.2s ease !important; /* 添加过渡效果 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    #1SplitBar.splitter-bar:hover[b-44ji60or6u] {
        background-color: #4CAF50 !important;
    }

    #1SplitBar.splitter-bar.dragging[b-44ji60or6u] {
        background-color: #888 !important; /* 拖动时变为深灰色 */
        cursor: col-resize !important;
    }

    #1SplitBar.splitter-bar[b-44ji60or6u]::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 2px !important;
        height: 25px !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 4px !important;
    }

/* 右侧面板 */
#1SplitRight.paragraph-display-section[b-44ji60or6u] {
    flex: 1 !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* 防止在拖动时选择文本 */
body.split-dragging[b-44ji60or6u] {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: col-resize !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .split-container-1[b-44ji60or6u] {
        flex-direction: column !important;
    }

    #1SplitLeft.text-input-section[b-44ji60or6u] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitRight.paragraph-display-section[b-44ji60or6u] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitBar.splitter-bar[b-44ji60or6u] {
        width: 100% !important;
        height: 8px !important;
        cursor: row-resize !important;
    }

        #1SplitBar.splitter-bar[b-44ji60or6u]::before {
            width: 30px !important;
            height: 2px !important;
        }
}
/* _content/LEAFBlazorApp25/Components/IChing/Read/ReadingB1.razor.rz.scp.css */
/* ============================================
   Components/IChing/Read/Reading.razor.css文本朗读组件样式 - 完整版本
   已经修复：增强段落高亮显示效果，确保当前朗读段落可见； 修复高亮和滚动显示问题
   ============================================ */

/* ===== 主题变量定义 ===== */
/*#region name */
/* 默认主题 - 青莲禅意 */
.reading-container[b-8hg2qg01o7] {
     --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-nav-color: #9C27B0;
    /* 朗读状态颜色 */
    --status-speaking: #4CAF50;
    --status-paused: #FF9800;
    --status-stopped: #F44336;
    --status-idle: #757575;
    /* 段落高亮颜色 */
    --paragraph-current: #E8F5E8;
    --paragraph-completed: #F1F8E9;
    --paragraph-highlight: #FFF3E0;
    --paragraph-highlight-border: #ff9800;
    --paragraph-speaking: rgba(33, 150, 243, 0.1);
    --paragraph-speaking-border: #2196f3;
}

    /* 朱砂祥瑞主题 */
    .reading-container.theme-vermillion[b-8hg2qg01o7] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #D32F2F;
        --paragraph-current: #FFEBEE;
        --paragraph-completed: #FFE0E0;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(211, 47, 47, 0.1);
        --paragraph-speaking-border: #d32f2f;
    }

    /* 碧海青天主题 */
    .reading-container.theme-ocean[b-8hg2qg01o7] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #1976D2;
        --paragraph-current: #E3F2FD;
        --paragraph-completed: #E8EAF6;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(25, 118, 210, 0.1);
        --paragraph-speaking-border: #1976d2;
    }

/*#endregion */

/*#region === 主题变量定义 === */
    /* 紫气东来主题 */
    .reading-container.theme-purple[b-8hg2qg01o7] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --border-color: #e1bee7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }

    /* 金玉满堂主题 */
    .reading-container.theme-golden[b-8hg2qg01o7] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #FF8F00;
        --primary-light: #FFA000;
        --primary-lighter: #FFB300;
        --border-color: #ffe0b2;
        --shadow-color: rgba(255, 143, 0, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(255, 160, 0, 0.05);
        --button-primary-bg: linear-gradient(135deg, #FFA000, #FFB300);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-secondary-color: #FF9800;
    }
/*#endregion ----- */

/* ===== 主容器布局 ===== */
.reading-container[b-8hg2qg01o7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

.vertical-panel[b-8hg2qg01o7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* ===== 控制面板区域 ===== */
.control-panel[b-8hg2qg01o7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px 16px 0px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.panel-header[b-8hg2qg01o7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.header-icon[b-8hg2qg01o7] {
    margin-right: 8px;
    font-size: 1.2em;
}

.section-title[b-8hg2qg01o7] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
}

/* 主题选择器 */
.theme-selector[b-8hg2qg01o7] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-8hg2qg01o7] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-8hg2qg01o7] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-8hg2qg01o7] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

/* ===== 控制按钮区域 ===== */
.control-buttons[b-8hg2qg01o7] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 8px;
    align-items: center;
    justify-content: center;
}

/* ===== 按钮样式 ===== */
.btn-compact[b-8hg2qg01o7] {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 90px;
    text-align: center;
}

.btn-primary[b-8hg2qg01o7] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-8hg2qg01o7] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .btn-primary:disabled[b-8hg2qg01o7] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-8hg2qg01o7] {
    background: var(--button-secondary-bg);
    color: var(--secondary-text);
    border: 1px solid rgba(120, 120, 120, 0.3);
}

    .btn-secondary:hover:not(:disabled)[b-8hg2qg01o7] {
        background: rgba(120, 120, 120, 0.2);
    }

.btn-info[b-8hg2qg01o7] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-8hg2qg01o7] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-8hg2qg01o7] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.btn-nav[b-8hg2qg01o7] {
    background: var(--button-secondary-bg);
    color: var(--button-nav-color);
    border: 1px solid rgba(156, 39, 176, 0.3);
    min-width: 80px;
}

    .btn-nav:hover:not(:disabled)[b-8hg2qg01o7] {
        background: rgba(156, 39, 176, 0.2);
    }

.btn-small[b-8hg2qg01o7] {
    padding: 3px 8px !important;
    font-size: 0.75em !important;
    min-width: 60px !important;
}

/* ===== 语音设置区域 ===== */
.voice-settings-section[b-8hg2qg01o7] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    border: 1px solid var(--border-color);
}

.voice-controls-grid[b-8hg2qg01o7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 12px;
}

.voice-param-group[b-8hg2qg01o7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.param-label[b-8hg2qg01o7] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.voice-dropdown[b-8hg2qg01o7] {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    width: 100%;
    max-width: 300px;
}

    .voice-dropdown:hover[b-8hg2qg01o7] {
        border-color: var(--primary-light);
    }

    .voice-dropdown:focus[b-8hg2qg01o7] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

/* 语音信息显示 */
.voice-info[b-8hg2qg01o7] {
    font-size: 0.8em;
    color: var(--secondary-text);
    margin-top: 4px;
    font-style: italic;
}

.voice-stats[b-8hg2qg01o7] {
    display: flex;
    gap: 8px;
    font-size: 0.75em;
    color: var(--secondary-text);
}

.stat-item[b-8hg2qg01o7] {
    background: rgba(120, 120, 120, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===== 滑动条样式 ===== */
.slider-with-value[b-8hg2qg01o7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-slider[b-8hg2qg01o7] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

    .voice-slider[b-8hg2qg01o7]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .voice-slider[b-8hg2qg01o7]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.slider-value[b-8hg2qg01o7] {
    min-width: 35px;
    text-align: center;
    font-size: 0.85em;
    color: var(--primary-color);
    font-weight: 600;
}

/* ===== 预设按钮 ===== */
.speed-presets[b-8hg2qg01o7],
.pitch-presets[b-8hg2qg01o7],
.volume-presets[b-8hg2qg01o7],
.pause-presets[b-8hg2qg01o7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.preset-btn[b-8hg2qg01o7] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    color: var(--secondary-text);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .preset-btn:hover[b-8hg2qg01o7] {
        border-color: var(--primary-light);
        color: var(--primary-color);
    }

    .preset-btn.active[b-8hg2qg01o7] {
        background: var(--primary-light);
        color: white;
        border-color: var(--primary-color);
    }

/* ===== 高级设置 ===== */
.advanced-settings[b-8hg2qg01o7] {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.setting-group[b-8hg2qg01o7] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.checkbox-label[b-8hg2qg01o7] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-8hg2qg01o7] {
        display: none;
    }

.checkmark[b-8hg2qg01o7] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-8hg2qg01o7] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-8hg2qg01o7]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-8hg2qg01o7] {
    white-space: nowrap;
    font-weight: 500;
}

/* ===== 进度信息区域 ===== */
.progress-info[b-8hg2qg01o7] {
    margin-bottom: 12px;
}

.progress-bar-container[b-8hg2qg01o7] {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}

.progress-bar[b-8hg2qg01o7] {
    height: 100%;
    background: var(--primary-light);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-8hg2qg01o7] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--secondary-text);
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== 导航控制区域 ===== */
.navigation-controls[b-8hg2qg01o7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}

.paragraph-info[b-8hg2qg01o7] {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9em;
}

/* ===== 文本区域容器 ===== */
.text-area-container[b-8hg2qg01o7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
    min-height: 0;
    flex: 1;
}


@media (max-width: 1024px) {
    .text-area-container[b-8hg2qg01o7] {
        grid-template-columns: 1fr;
    }
}

/* ===== 文本输入区域 ===== */
.text-input-section[b-8hg2qg01o7],
.paragraph-display-section[b-8hg2qg01o7] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.text-header[b-8hg2qg01o7],
.paragraph-header[b-8hg2qg01o7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

    .text-header h3[b-8hg2qg01o7],
    .paragraph-header h3[b-8hg2qg01o7] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.section-icon[b-8hg2qg01o7] {
    font-size: 1.1em;
}

.stats-info[b-8hg2qg01o7] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: normal;
    margin-left: 8px;
}

.text-actions[b-8hg2qg01o7] {
    display: flex;
    gap: 6px;
}

/* ===== 状态指示器 ===== */
.status-indicator[b-8hg2qg01o7] {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 10px;
}

.status-speaking[b-8hg2qg01o7] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--status-speaking);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-paused[b-8hg2qg01o7] {
    background: rgba(255, 152, 0, 0.1);
    color: var(--status-paused);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-stopped[b-8hg2qg01o7] {
    background: rgba(244, 67, 54, 0.1);
    color: var(--status-stopped);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.status-idle[b-8hg2qg01o7] {
    background: rgba(117, 117, 117, 0.1);
    color: var(--status-idle);
    border: 1px solid rgba(117, 117, 117, 0.3);
}

/* ===== 文本输入框 ===== */
.text-input-area[b-8hg2qg01o7] {
    flex: 1;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.5;
    resize: none;
    font-family: 'Microsoft YaHei', 'Segoe UI', monospace;
    min-height: 200px;
    overflow-y: auto;
}

    .text-input-area:focus[b-8hg2qg01o7] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .text-input-area[b-8hg2qg01o7]::placeholder {
        color: #999;
        font-style: italic;
    }

/* ===== 段落显示区域 ===== */
.paragraph-container[b-8hg2qg01o7] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* ===== 段落项目样式 ===== */
.paragraph-item[b-8hg2qg01o7] {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
}

    .paragraph-item:hover[b-8hg2qg01o7] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    /* ===== 段落高亮样式 - 关键修复部分 ===== */

    /* 当前朗读段落（高亮显示） */
    .paragraph-item.current-highlighted[b-8hg2qg01o7] {
        background-color: rgba(255, 255, 200, 0.3) !important;
        border-left: 4px solid var(--paragraph-highlight-border) !important;
        padding-left: 12px !important;
        transition: all 0.3s ease !important;
    }

    /* 当前正在朗读的段落 */
    .paragraph-item.current-speaking[b-8hg2qg01o7] {
        background-color: var(--paragraph-speaking) !important;
        border-left: 4px solid var(--paragraph-speaking-border) !important;
        font-weight: bold !important;
        animation: pulse-highlight-b-8hg2qg01o7 2s infinite;
    }

    /* 已完成段落 */
    .paragraph-item.completed[b-8hg2qg01o7] {
        background: var(--paragraph-completed);
        border-color: #C8E6C9;
        opacity: 0.7;
        color: #666;
    }

    /* 滚动时的高亮效果 */
    .paragraph-item.scrolling-highlight[b-8hg2qg01o7] {
        box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5);
        transition: box-shadow 0.5s ease;
    }

/* 段落编号 */
.paragraph-number[b-8hg2qg01o7] {
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 8px;
    min-width: 25px;
    flex-shrink: 0;
}

/* 段落文本 */
.paragraph-text[b-8hg2qg01o7] {
    flex: 1;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 0.95em;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 段落状态图标 */
.paragraph-status[b-8hg2qg01o7] {
    margin-left: 8px;
    font-size: 0.9em;
    flex-shrink: 0;
}

    .paragraph-status.completed[b-8hg2qg01o7] {
        color: #4CAF50;
    }

    .paragraph-status.speaking[b-8hg2qg01o7] {
        color: var(--primary-light);
        animation: blink-b-8hg2qg01o7 1s infinite;
    }

/* 段落时长显示 */
.paragraph-duration[b-8hg2qg01o7] {
    font-size: 0.7em;
    color: #888;
    margin-left: 5px;
}

/* ===== 从此处开始按钮 ===== */
.start-from-here-btn[b-8hg2qg01o7] {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.7em;
    transition: all 0.2s ease;
    z-index: 10;
}

.paragraph-item:hover .start-from-here-btn[b-8hg2qg01o7] {
    display: block;
}

.start-from-here-btn:hover[b-8hg2qg01o7] {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--primary-color);
}

/* ===== 空段落显示 ===== */
.empty-paragraphs[b-8hg2qg01o7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--secondary-text);
    padding: 40px 20px;
}

.empty-icon[b-8hg2qg01o7] {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-text[b-8hg2qg01o7] {
    font-size: 1em;
    text-align: center;
    max-width: 300px;
}

/* ===== 动画定义 ===== */
@keyframes pulse-b-8hg2qg01o7 {
    0% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }
}

@keyframes blink-b-8hg2qg01o7 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes pulse-highlight-b-8hg2qg01o7 {
    0% {
        background-color: var(--paragraph-speaking);
    }

    50% {
        background-color: rgba(33, 150, 243, 0.2);
    }

    100% {
        background-color: var(--paragraph-speaking);
    }
}

/* ===== 滚动条样式 ===== */
.text-input-area[b-8hg2qg01o7]::-webkit-scrollbar,
.paragraph-container[b-8hg2qg01o7]::-webkit-scrollbar {
    width: 10px;
}

.text-input-area[b-8hg2qg01o7]::-webkit-scrollbar-track,
.paragraph-container[b-8hg2qg01o7]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.text-input-area[b-8hg2qg01o7]::-webkit-scrollbar-thumb,
.paragraph-container[b-8hg2qg01o7]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

    .text-input-area[b-8hg2qg01o7]::-webkit-scrollbar-thumb:hover,
    .paragraph-container[b-8hg2qg01o7]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ===== 响应式设计 ===== */

/* 大屏幕 (1200px以下) */
@media (max-width: 1200px) {
    .voice-controls-grid[b-8hg2qg01o7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .setting-group[b-8hg2qg01o7] {
        gap: 10px;
    }
}

/* 中等屏幕 (1024px以下) */
@media (max-width: 1024px) {
    .reading-container[b-8hg2qg01o7] {
        height: auto;
        min-height: 100vh;
        padding: 6px;
    }

    .vertical-panel[b-8hg2qg01o7] {
        gap: 8px;
    }

    .voice-controls-grid[b-8hg2qg01o7] {
        grid-template-columns: 1fr;
    }

    .text-area-container[b-8hg2qg01o7] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 平板屏幕 (768px以下) */
@media (max-width: 768px) {
    .reading-container[b-8hg2qg01o7] {
        padding: 4px;
    }

    .control-panel[b-8hg2qg01o7] {
        padding: 10px 12px;
    }

    .panel-header[b-8hg2qg01o7] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .theme-selector[b-8hg2qg01o7] {
        align-self: flex-end;
    }

    .control-buttons[b-8hg2qg01o7] {
        gap: 6px;
    }

    .btn-compact[b-8hg2qg01o7] {
        padding: 5px 10px;
        font-size: 0.8em;
        min-width: 80px;
    }

    .voice-settings-section[b-8hg2qg01o7] {
        padding: 10px;
    }

    .progress-text[b-8hg2qg01o7] {
        flex-direction: column;
        gap: 4px;
    }

    .text-header[b-8hg2qg01o7],
    .paragraph-header[b-8hg2qg01o7] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .text-actions[b-8hg2qg01o7] {
        justify-content: center;
    }
}

/* 手机屏幕 (480px以下) */
@media (max-width: 480px) {
    .btn-compact[b-8hg2qg01o7] {
        min-width: 70px;
        font-size: 0.75em;
        padding: 4px 8px;
    }

    .voice-dropdown[b-8hg2qg01o7] {
        max-width: 100%;
    }

    .slider-with-value[b-8hg2qg01o7] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .slider-value[b-8hg2qg01o7] {
        text-align: right;
    }

    .speed-presets[b-8hg2qg01o7],
    .pitch-presets[b-8hg2qg01o7],
    .volume-presets[b-8hg2qg01o7] {
        justify-content: center;
    }

    .preset-btn[b-8hg2qg01o7] {
        padding: 2px 4px;
        font-size: 0.7em;
    }

    .text-input-section[b-8hg2qg01o7],
    .paragraph-display-section[b-8hg2qg01o7] {
        padding: 8px;
    }

    .text-input-area[b-8hg2qg01o7] {
        padding: 8px;
        font-size: 0.9em;
    }

    .paragraph-item[b-8hg2qg01o7] {
        padding: 8px;
        flex-direction: column;
    }

    .paragraph-number[b-8hg2qg01o7] {
        margin-bottom: 4px;
    }

    .start-from-here-btn[b-8hg2qg01o7] {
        position: relative;
        right: auto;
        top: auto;
        align-self: flex-end;
        margin-top: 5px;
    }
}

/* ===== 高亮样式增强 - 确保段落高亮可见 ===== */

/* 确保高亮段落有足够的视觉权重 */
.paragraph-item.current-highlighted[b-8hg2qg01o7] {
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 当前朗读段落的光晕效果 */
.paragraph-item.current-speaking[b-8hg2qg01o7]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(33, 150, 243, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* 段落悬停效果增强 */
.paragraph-item:hover:not(.current-speaking):not(.current-highlighted)[b-8hg2qg01o7] {
    background: linear-gradient(135deg, var(--hover-bg), rgba(255, 255, 255, 0.8)) !important;
    border-color: var(--primary-light) !important;
}

/* 语音标签样式 */
.voice-language[b-8hg2qg01o7] {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.voice-recommend[b-8hg2qg01o7] {
    color: #ff9800;
    margin-left: 5px;
}

/* 语音映射标签 */
.voice-tag[b-8hg2qg01o7] {
    font-size: 0.7em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

.core-tag[b-8hg2qg01o7] {
    background: rgba(76, 175, 80, 0.2);
    color: #2E7D32;
}

.mapped-tag[b-8hg2qg01o7] {
    background: rgba(33, 150, 243, 0.2);
    color: #1565C0;
}

.system-tag[b-8hg2qg01o7] {
    background: rgba(117, 117, 117, 0.2);
    color: #424242;
}

/* 段落下划线提示 */
.paragraph-item.current-highlighted .paragraph-text[b-8hg2qg01o7] {
    position: relative;
}

    .paragraph-item.current-highlighted .paragraph-text[b-8hg2qg01o7]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--paragraph-highlight-border), transparent);
        border-radius: 1px;
    }

/* 滚动动画 */
@keyframes scroll-highlight-b-8hg2qg01o7 {
    0% {
        background-color: rgba(255, 235, 59, 0.3);
    }

    50% {
        background-color: rgba(255, 235, 59, 0.6);
    }

    100% {
        background-color: rgba(255, 235, 59, 0.3);
    }
}

.paragraph-item.scrolling-highlight[b-8hg2qg01o7] {
    animation: scroll-highlight-b-8hg2qg01o7 2s ease-in-out infinite;
}

/* 语音加载动画 */
.voice-loading[b-8hg2qg01o7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

.loading-spinner[b-8hg2qg01o7] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-8hg2qg01o7 1s linear infinite;
}

@keyframes spin-b-8hg2qg01o7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-8hg2qg01o7] {
    font-size: 0.85em;
    color: var(--secondary-text);
}

/* ===== 段落容器滚动优化 ===== */
.paragraph-container[b-8hg2qg01o7] {
    scroll-behavior: smooth;
}

/* 确保段落项目在滚动容器中可见 */
.paragraph-item[b-8hg2qg01o7] {
    scroll-margin-top: 20px;
    scroll-margin-bottom: 20px;
}

/* 滚动到视图时的平滑过渡 */
.paragraph-container:has(.paragraph-item.current-highlighted)[b-8hg2qg01o7] {
    transition: scroll-top 0.5s ease;
}



/* ==**【独立功能区】 1Split 分割条样式 **== */
/* ===== 1Split 分割条样式 - 修复版 ===== */

/* 分割条容器 */
.split-container-1[b-8hg2qg01o7] {
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 400px !important;
}

/* 左侧面板 */
#1SplitLeft.text-input-section[b-8hg2qg01o7] {
    width: 50% !important;
    min-width: 300px !important;
    max-width: 80% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    resize: none !important;
    user-select: text !important; /* 允许文本选择 */
    -webkit-user-select: text !important;
}

/* 分割条 */
#1SplitBar.splitter-bar[b-8hg2qg01o7] {
    width: 8px !important;
    min-width: 8px !important;
    background-color: #ddd !important;
    cursor: col-resize !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1000 !important;
    margin: 0 2px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background-color 0.2s !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    /* 分割条悬停状态 */
    #1SplitBar.splitter-bar:hover[b-8hg2qg01o7] {
        background-color: #4CAF50 !important;
    }

    /* 分割条拖动状态 */
    #1SplitBar.splitter-bar.dragging[b-8hg2qg01o7] {
        background-color: #2E7D32 !important;
    }

    /* 分割条手柄 */
    #1SplitBar.splitter-bar[b-8hg2qg01o7]::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 2px !important;
        height: 30px !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 1px !important;
    }

/* 右侧面板 */
#1SplitRight.paragraph-display-section[b-8hg2qg01o7] {
    flex: 1 !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    user-select: text !important; /* 允许文本选择 */
    -webkit-user-select: text !important;
}

/* 防止在拖动时选择文本 */
body.split-dragging[b-8hg2qg01o7] {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: col-resize !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .split-container-1[b-8hg2qg01o7] {
        flex-direction: column !important;
    }

    #1SplitLeft.text-input-section[b-8hg2qg01o7] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitRight.paragraph-display-section[b-8hg2qg01o7] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitBar.splitter-bar[b-8hg2qg01o7] {
        width: 100% !important;
        height: 8px !important;
        cursor: row-resize !important;
    }

        #1SplitBar.splitter-bar[b-8hg2qg01o7]::before {
            width: 30px !important;
            height: 2px !important;
        }
}
/* _content/LEAFBlazorApp25/Components/IChing/Read/ReadingV1.razor.rz.scp.css */
/* ============================================
   Components/IChing/Read/Reading.razor.css
   文本朗读组件样式 - 完整版本
   修复：增强段落高亮显示效果，确保当前朗读段落可见
   版本：1.2 - 修复高亮和滚动显示问题
   ============================================ */

/* ===== 主题变量定义 ===== */
.reading-container[b-nxmihomwv9] {
    /* 默认主题 - 青莲禅意 */
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: white;
    --text-color: #333;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(120, 120, 120, 0.1);
    --button-info-color: #2196F3;
    --button-nav-color: #9C27B0;
    /* 朗读状态颜色 */
    --status-speaking: #4CAF50;
    --status-paused: #FF9800;
    --status-stopped: #F44336;
    --status-idle: #757575;
    /* 段落高亮颜色 */
    --paragraph-current: #E8F5E8;
    --paragraph-completed: #F1F8E9;
    --paragraph-highlight: #FFF3E0;
    --paragraph-highlight-border: #ff9800;
    --paragraph-speaking: rgba(33, 150, 243, 0.1);
    --paragraph-speaking-border: #2196f3;
}

    /* 朱砂祥瑞主题 */
    .reading-container.theme-vermillion[b-nxmihomwv9] {
        --primary-bg-gradient: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        --primary-color: #C62828;
        --primary-light: #D32F2F;
        --primary-lighter: #E53935;
        --border-color: #ffcdd2;
        --shadow-color: rgba(198, 40, 40, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(211, 47, 47, 0.05);
        --button-primary-bg: linear-gradient(135deg, #D32F2F, #E53935);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #D32F2F;
        --paragraph-current: #FFEBEE;
        --paragraph-completed: #FFE0E0;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(211, 47, 47, 0.1);
        --paragraph-speaking-border: #d32f2f;
    }

    /* 碧海青天主题 */
    .reading-container.theme-ocean[b-nxmihomwv9] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --border-color: #bbdefb;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: white;
        --text-color: #333;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(120, 120, 120, 0.1);
        --button-info-color: #2196F3;
        --button-nav-color: #9C27B0;
        --status-speaking: #1976D2;
        --paragraph-current: #E3F2FD;
        --paragraph-completed: #E8EAF6;
        --paragraph-highlight: #FFF3E0;
        --paragraph-highlight-border: #ff9800;
        --paragraph-speaking: rgba(25, 118, 210, 0.1);
        --paragraph-speaking-border: #1976d2;
    }

/* ===== 主容器布局 ===== */
.reading-container[b-nxmihomwv9] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 8px;
    background: var(--primary-bg-gradient);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

.vertical-panel[b-nxmihomwv9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* ===== 控制面板区域 ===== */
.control-panel[b-nxmihomwv9] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0;
}

.panel-header[b-nxmihomwv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.header-icon[b-nxmihomwv9] {
    margin-right: 8px;
    font-size: 1.2em;
}

.section-title[b-nxmihomwv9] {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
}

/* 主题选择器 */
.theme-selector[b-nxmihomwv9] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-nxmihomwv9] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-nxmihomwv9] {
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .theme-dropdown:focus[b-nxmihomwv9] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

/* ===== 控制按钮区域 ===== */
.control-buttons[b-nxmihomwv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
    justify-content: center;
}

/* ===== 按钮样式 ===== */
.btn-compact[b-nxmihomwv9] {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 90px;
    text-align: center;
}

.btn-primary[b-nxmihomwv9] {
    background: var(--button-primary-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-nxmihomwv9] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .btn-primary:disabled[b-nxmihomwv9] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-nxmihomwv9] {
    background: var(--button-secondary-bg);
    color: var(--secondary-text);
    border: 1px solid rgba(120, 120, 120, 0.3);
}

    .btn-secondary:hover:not(:disabled)[b-nxmihomwv9] {
        background: rgba(120, 120, 120, 0.2);
    }

.btn-info[b-nxmihomwv9] {
    background: var(--button-secondary-bg);
    color: var(--button-info-color);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

    .btn-info:hover[b-nxmihomwv9] {
        background: rgba(33, 150, 243, 0.2);
    }

.btn-toggle[b-nxmihomwv9] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.btn-nav[b-nxmihomwv9] {
    background: var(--button-secondary-bg);
    color: var(--button-nav-color);
    border: 1px solid rgba(156, 39, 176, 0.3);
    min-width: 80px;
}

    .btn-nav:hover:not(:disabled)[b-nxmihomwv9] {
        background: rgba(156, 39, 176, 0.2);
    }

.btn-small[b-nxmihomwv9] {
    padding: 3px 8px !important;
    font-size: 0.75em !important;
    min-width: 60px !important;
}

/* ===== 语音设置区域 ===== */
.voice-settings-section[b-nxmihomwv9] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
}

.voice-controls-grid[b-nxmihomwv9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 12px;
}

.voice-param-group[b-nxmihomwv9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.param-label[b-nxmihomwv9] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.voice-dropdown[b-nxmihomwv9] {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.85em;
    width: 100%;
    max-width: 300px;
}

    .voice-dropdown:hover[b-nxmihomwv9] {
        border-color: var(--primary-light);
    }

    .voice-dropdown:focus[b-nxmihomwv9] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

/* 语音信息显示 */
.voice-info[b-nxmihomwv9] {
    font-size: 0.8em;
    color: var(--secondary-text);
    margin-top: 4px;
    font-style: italic;
}

.voice-stats[b-nxmihomwv9] {
    display: flex;
    gap: 8px;
    font-size: 0.75em;
    color: var(--secondary-text);
}

.stat-item[b-nxmihomwv9] {
    background: rgba(120, 120, 120, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===== 滑动条样式 ===== */
.slider-with-value[b-nxmihomwv9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-slider[b-nxmihomwv9] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

    .voice-slider[b-nxmihomwv9]::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .voice-slider[b-nxmihomwv9]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--primary-light);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.slider-value[b-nxmihomwv9] {
    min-width: 35px;
    text-align: center;
    font-size: 0.85em;
    color: var(--primary-color);
    font-weight: 600;
}

/* ===== 预设按钮 ===== */
.speed-presets[b-nxmihomwv9],
.pitch-presets[b-nxmihomwv9],
.volume-presets[b-nxmihomwv9],
.pause-presets[b-nxmihomwv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.preset-btn[b-nxmihomwv9] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    color: var(--secondary-text);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .preset-btn:hover[b-nxmihomwv9] {
        border-color: var(--primary-light);
        color: var(--primary-color);
    }

    .preset-btn.active[b-nxmihomwv9] {
        background: var(--primary-light);
        color: white;
        border-color: var(--primary-color);
    }

/* ===== 高级设置 ===== */
.advanced-settings[b-nxmihomwv9] {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.setting-group[b-nxmihomwv9] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.checkbox-label[b-nxmihomwv9] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-nxmihomwv9] {
        display: none;
    }

.checkmark[b-nxmihomwv9] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-nxmihomwv9] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-nxmihomwv9]::after {
        content: "✓";
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

.label-text[b-nxmihomwv9] {
    white-space: nowrap;
    font-weight: 500;
}

/* ===== 进度信息区域 ===== */
.progress-info[b-nxmihomwv9] {
    margin-bottom: 12px;
}

.progress-bar-container[b-nxmihomwv9] {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
}

.progress-bar[b-nxmihomwv9] {
    height: 100%;
    background: var(--primary-light);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-nxmihomwv9] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--secondary-text);
    flex-wrap: wrap;
    gap: 10px;
}

/* ===== 导航控制区域 ===== */
.navigation-controls[b-nxmihomwv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}

.paragraph-info[b-nxmihomwv9] {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9em;
}

/* ===== 文本区域容器 ===== */
.text-area-container[b-nxmihomwv9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
    min-height: 0;
    flex: 1;
}

@media (max-width: 1024px) {
    .text-area-container[b-nxmihomwv9] {
        grid-template-columns: 1fr;
    }
}

/* ===== 文本输入区域 ===== */
.text-input-section[b-nxmihomwv9],
.paragraph-display-section[b-nxmihomwv9] {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.text-header[b-nxmihomwv9],
.paragraph-header[b-nxmihomwv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

    .text-header h3[b-nxmihomwv9],
    .paragraph-header h3[b-nxmihomwv9] {
        color: var(--primary-color);
        margin: 0;
        font-size: 1.1em;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.section-icon[b-nxmihomwv9] {
    font-size: 1.1em;
}

.stats-info[b-nxmihomwv9] {
    font-size: 0.85em;
    color: var(--secondary-text);
    font-weight: normal;
    margin-left: 8px;
}

.text-actions[b-nxmihomwv9] {
    display: flex;
    gap: 6px;
}

/* ===== 状态指示器 ===== */
.status-indicator[b-nxmihomwv9] {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 10px;
}

.status-speaking[b-nxmihomwv9] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--status-speaking);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-paused[b-nxmihomwv9] {
    background: rgba(255, 152, 0, 0.1);
    color: var(--status-paused);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-stopped[b-nxmihomwv9] {
    background: rgba(244, 67, 54, 0.1);
    color: var(--status-stopped);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.status-idle[b-nxmihomwv9] {
    background: rgba(117, 117, 117, 0.1);
    color: var(--status-idle);
    border: 1px solid rgba(117, 117, 117, 0.3);
}

/* ===== 文本输入框 ===== */
.text-input-area[b-nxmihomwv9] {
    flex: 1;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.5;
    resize: none;
    font-family: 'Microsoft YaHei', 'Segoe UI', monospace;
    min-height: 200px;
    overflow-y: auto;
}

    .text-input-area:focus[b-nxmihomwv9] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .text-input-area[b-nxmihomwv9]::placeholder {
        color: #999;
        font-style: italic;
    }

/* ===== 段落显示区域 ===== */
.paragraph-container[b-nxmihomwv9] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* ===== 段落项目样式 ===== */
.paragraph-item[b-nxmihomwv9] {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
}

    .paragraph-item:hover[b-nxmihomwv9] {
        border-color: var(--primary-light);
        background: var(--hover-bg);
    }

    /* ===== 段落高亮样式 - 关键修复部分 ===== */

    /* 当前朗读段落（高亮显示） */
    .paragraph-item.current-highlighted[b-nxmihomwv9] {
        background-color: rgba(255, 255, 200, 0.3) !important;
        border-left: 4px solid var(--paragraph-highlight-border) !important;
        padding-left: 12px !important;
        transition: all 0.3s ease !important;
    }

    /* 当前正在朗读的段落 */
    .paragraph-item.current-speaking[b-nxmihomwv9] {
        background-color: var(--paragraph-speaking) !important;
        border-left: 4px solid var(--paragraph-speaking-border) !important;
        font-weight: bold !important;
        animation: pulse-highlight-b-nxmihomwv9 2s infinite;
    }

    /* 已完成段落 */
    .paragraph-item.completed[b-nxmihomwv9] {
        background: var(--paragraph-completed);
        border-color: #C8E6C9;
        opacity: 0.7;
        color: #666;
    }

    /* 滚动时的高亮效果 */
    .paragraph-item.scrolling-highlight[b-nxmihomwv9] {
        box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5);
        transition: box-shadow 0.5s ease;
    }

/* 段落编号 */
.paragraph-number[b-nxmihomwv9] {
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 8px;
    min-width: 25px;
    flex-shrink: 0;
}

/* 段落文本 */
.paragraph-text[b-nxmihomwv9] {
    flex: 1;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 0.95em;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 段落状态图标 */
.paragraph-status[b-nxmihomwv9] {
    margin-left: 8px;
    font-size: 0.9em;
    flex-shrink: 0;
}

    .paragraph-status.completed[b-nxmihomwv9] {
        color: #4CAF50;
    }

    .paragraph-status.speaking[b-nxmihomwv9] {
        color: var(--primary-light);
        animation: blink-b-nxmihomwv9 1s infinite;
    }

/* 段落时长显示 */
.paragraph-duration[b-nxmihomwv9] {
    font-size: 0.7em;
    color: #888;
    margin-left: 5px;
}

/* ===== 从此处开始按钮 ===== */
.start-from-here-btn[b-nxmihomwv9] {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.7em;
    transition: all 0.2s ease;
    z-index: 10;
}

.paragraph-item:hover .start-from-here-btn[b-nxmihomwv9] {
    display: block;
}

.start-from-here-btn:hover[b-nxmihomwv9] {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--primary-color);
}

/* ===== 空段落显示 ===== */
.empty-paragraphs[b-nxmihomwv9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--secondary-text);
    padding: 40px 20px;
}

.empty-icon[b-nxmihomwv9] {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-text[b-nxmihomwv9] {
    font-size: 1em;
    text-align: center;
    max-width: 300px;
}

/* ===== 动画定义 ===== */
@keyframes pulse-b-nxmihomwv9 {
    0% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }
}

@keyframes blink-b-nxmihomwv9 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes pulse-highlight-b-nxmihomwv9 {
    0% {
        background-color: var(--paragraph-speaking);
    }

    50% {
        background-color: rgba(33, 150, 243, 0.2);
    }

    100% {
        background-color: var(--paragraph-speaking);
    }
}

/* ===== 滚动条样式 ===== */
.text-input-area[b-nxmihomwv9]::-webkit-scrollbar,
.paragraph-container[b-nxmihomwv9]::-webkit-scrollbar {
    width: 10px;
}

.text-input-area[b-nxmihomwv9]::-webkit-scrollbar-track,
.paragraph-container[b-nxmihomwv9]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.text-input-area[b-nxmihomwv9]::-webkit-scrollbar-thumb,
.paragraph-container[b-nxmihomwv9]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

    .text-input-area[b-nxmihomwv9]::-webkit-scrollbar-thumb:hover,
    .paragraph-container[b-nxmihomwv9]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ===== 响应式设计 ===== */

/* 大屏幕 (1200px以下) */
@media (max-width: 1200px) {
    .voice-controls-grid[b-nxmihomwv9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .setting-group[b-nxmihomwv9] {
        gap: 10px;
    }
}

/* 中等屏幕 (1024px以下) */
@media (max-width: 1024px) {
    .reading-container[b-nxmihomwv9] {
        height: auto;
        min-height: 100vh;
        padding: 6px;
    }

    .vertical-panel[b-nxmihomwv9] {
        gap: 8px;
    }

    .voice-controls-grid[b-nxmihomwv9] {
        grid-template-columns: 1fr;
    }

    .text-area-container[b-nxmihomwv9] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 平板屏幕 (768px以下) */
@media (max-width: 768px) {
    .reading-container[b-nxmihomwv9] {
        padding: 4px;
    }

    .control-panel[b-nxmihomwv9] {
        padding: 10px 12px;
    }

    .panel-header[b-nxmihomwv9] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .theme-selector[b-nxmihomwv9] {
        align-self: flex-end;
    }

    .control-buttons[b-nxmihomwv9] {
        gap: 6px;
    }

    .btn-compact[b-nxmihomwv9] {
        padding: 5px 10px;
        font-size: 0.8em;
        min-width: 80px;
    }

    .voice-settings-section[b-nxmihomwv9] {
        padding: 10px;
    }

    .progress-text[b-nxmihomwv9] {
        flex-direction: column;
        gap: 4px;
    }

    .text-header[b-nxmihomwv9],
    .paragraph-header[b-nxmihomwv9] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .text-actions[b-nxmihomwv9] {
        justify-content: center;
    }
}

/* 手机屏幕 (480px以下) */
@media (max-width: 480px) {
    .btn-compact[b-nxmihomwv9] {
        min-width: 70px;
        font-size: 0.75em;
        padding: 4px 8px;
    }

    .voice-dropdown[b-nxmihomwv9] {
        max-width: 100%;
    }

    .slider-with-value[b-nxmihomwv9] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .slider-value[b-nxmihomwv9] {
        text-align: right;
    }

    .speed-presets[b-nxmihomwv9],
    .pitch-presets[b-nxmihomwv9],
    .volume-presets[b-nxmihomwv9] {
        justify-content: center;
    }

    .preset-btn[b-nxmihomwv9] {
        padding: 2px 4px;
        font-size: 0.7em;
    }

    .text-input-section[b-nxmihomwv9],
    .paragraph-display-section[b-nxmihomwv9] {
        padding: 8px;
    }

    .text-input-area[b-nxmihomwv9] {
        padding: 8px;
        font-size: 0.9em;
    }

    .paragraph-item[b-nxmihomwv9] {
        padding: 8px;
        flex-direction: column;
    }

    .paragraph-number[b-nxmihomwv9] {
        margin-bottom: 4px;
    }

    .start-from-here-btn[b-nxmihomwv9] {
        position: relative;
        right: auto;
        top: auto;
        align-self: flex-end;
        margin-top: 5px;
    }
}

/* ===== 高亮样式增强 - 确保段落高亮可见 ===== */

/* 确保高亮段落有足够的视觉权重 */
.paragraph-item.current-highlighted[b-nxmihomwv9] {
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15) !important;
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 当前朗读段落的光晕效果 */
.paragraph-item.current-speaking[b-nxmihomwv9]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(33, 150, 243, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* 段落悬停效果增强 */
.paragraph-item:hover:not(.current-speaking):not(.current-highlighted)[b-nxmihomwv9] {
    background: linear-gradient(135deg, var(--hover-bg), rgba(255, 255, 255, 0.8)) !important;
    border-color: var(--primary-light) !important;
}

/* 语音标签样式 */
.voice-language[b-nxmihomwv9] {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.voice-recommend[b-nxmihomwv9] {
    color: #ff9800;
    margin-left: 5px;
}

/* 语音映射标签 */
.voice-tag[b-nxmihomwv9] {
    font-size: 0.7em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

.core-tag[b-nxmihomwv9] {
    background: rgba(76, 175, 80, 0.2);
    color: #2E7D32;
}

.mapped-tag[b-nxmihomwv9] {
    background: rgba(33, 150, 243, 0.2);
    color: #1565C0;
}

.system-tag[b-nxmihomwv9] {
    background: rgba(117, 117, 117, 0.2);
    color: #424242;
}

/* 段落下划线提示 */
.paragraph-item.current-highlighted .paragraph-text[b-nxmihomwv9] {
    position: relative;
}

    .paragraph-item.current-highlighted .paragraph-text[b-nxmihomwv9]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--paragraph-highlight-border), transparent);
        border-radius: 1px;
    }

/* 滚动动画 */
@keyframes scroll-highlight-b-nxmihomwv9 {
    0% {
        background-color: rgba(255, 235, 59, 0.3);
    }

    50% {
        background-color: rgba(255, 235, 59, 0.6);
    }

    100% {
        background-color: rgba(255, 235, 59, 0.3);
    }
}

.paragraph-item.scrolling-highlight[b-nxmihomwv9] {
    animation: scroll-highlight-b-nxmihomwv9 2s ease-in-out infinite;
}

/* 语音加载动画 */
.voice-loading[b-nxmihomwv9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

.loading-spinner[b-nxmihomwv9] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-nxmihomwv9 1s linear infinite;
}

@keyframes spin-b-nxmihomwv9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-nxmihomwv9] {
    font-size: 0.85em;
    color: var(--secondary-text);
}

/* ===== 段落容器滚动优化 ===== */
.paragraph-container[b-nxmihomwv9] {
    scroll-behavior: smooth;
}

/* 确保段落项目在滚动容器中可见 */
.paragraph-item[b-nxmihomwv9] {
    scroll-margin-top: 20px;
    scroll-margin-bottom: 20px;
}

/* 滚动到视图时的平滑过渡 */
.paragraph-container:has(.paragraph-item.current-highlighted)[b-nxmihomwv9] {
    transition: scroll-top 0.5s ease;
}



/* ==**【独立功能区】 1Split 分割条样式 **== */
/* ===== 1Split 分割条样式 - 修复版 ===== */

/* 分割条容器 */
.split-container-1[b-nxmihomwv9] {
    display: flex !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 400px !important;
}

/* 左侧面板 */
#1SplitLeft.text-input-section[b-nxmihomwv9] {
    width: 50% !important;
    min-width: 300px !important;
    max-width: 80% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    resize: none !important;
    user-select: text !important; /* 允许文本选择 */
    -webkit-user-select: text !important;
}

/* 分割条 */
#1SplitBar.splitter-bar[b-nxmihomwv9] {
    width: 8px !important;
    min-width: 8px !important;
    background-color: #ddd !important;
    cursor: col-resize !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1000 !important;
    margin: 0 2px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: background-color 0.2s !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    /* 分割条悬停状态 */
    #1SplitBar.splitter-bar:hover[b-nxmihomwv9] {
        background-color: #4CAF50 !important;
    }

    /* 分割条拖动状态 */
    #1SplitBar.splitter-bar.dragging[b-nxmihomwv9] {
        background-color: #2E7D32 !important;
    }

    /* 分割条手柄 */
    #1SplitBar.splitter-bar[b-nxmihomwv9]::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 2px !important;
        height: 30px !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 1px !important;
    }

/* 右侧面板 */
#1SplitRight.paragraph-display-section[b-nxmihomwv9] {
    flex: 1 !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    user-select: text !important; /* 允许文本选择 */
    -webkit-user-select: text !important;
}

/* 防止在拖动时选择文本 */
body.split-dragging[b-nxmihomwv9] {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: col-resize !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .split-container-1[b-nxmihomwv9] {
        flex-direction: column !important;
    }

    #1SplitLeft.text-input-section[b-nxmihomwv9] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitRight.paragraph-display-section[b-nxmihomwv9] {
        width: 100% !important;
        height: 50% !important;
    }

    #1SplitBar.splitter-bar[b-nxmihomwv9] {
        width: 100% !important;
        height: 8px !important;
        cursor: row-resize !important;
    }

        #1SplitBar.splitter-bar[b-nxmihomwv9]::before {
            width: 30px !important;
            height: 2px !important;
        }
}
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaTheme.razor.rz.scp.css */
/*#region 【主题变量定义】*/
/* 竹简清风主题 */
.zhouyi-container.theme-bamboo[b-bh177l20zl] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --secondary-color: #81C784;
    --accent-color: #A5D6A7;
    --tertiary-color: #4CAF50;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: #ffffff;
    --text-color: #2c3e50;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(76, 175, 80, 0.1);
    --button-info-color: #66BB6A;
    --button-secondary-color: #A5D6A7;
    --client-bg: transparent;
    --client-border: #d8e8d8;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f0f7f0;
    --interpretation-alt-color: #e8f5e9;
}

/* 默认主题 - 天地玄黄 */
.zhouyi-container[b-bh177l20zl] {
    --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
    --primary-color: #8B4513;
    --primary-light: #A0522D;
    --primary-lighter: #CD853F;
    --secondary-color: #D2691E;
    --accent-color: #CD853F;
    --tertiary-color: #8B4513;
    --border-color: #d4c6a8;
    --shadow-color: rgba(139, 69, 19, 0.08);
    --section-bg: #ffffff;
    --text-color: #5D4037;
    --secondary-text: #795548;
    --hover-bg: rgba(139, 69, 19, 0.05);
    --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
    --button-secondary-bg: rgba(160, 82, 45, 0.1);
    --button-info-color: #D2691E;
    --button-secondary-color: #CD853F;
    --client-bg: transparent;
    --client-border: #e0d6c0;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f8f6f2;
    --interpretation-alt-color: #e8dfce;
}

    /* 朱砂祥瑞主题 */
    .zhouyi-container.theme-vermillion[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000;
        --primary-light: #A52A2A;
        --primary-lighter: #CD5C5C;
        --secondary-color: #B22222;
        --accent-color: #CD5C5C;
        --tertiary-color: #C44545;
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --secondary-color: #2196F3;
        --accent-color: #42A5F5;
        --tertiary-color: #1976D2;
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --secondary-color: #AB47BC;
        --accent-color: #BA68C8;
        --tertiary-color: #8E24AA;
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 */
    .zhouyi-container.theme-golden[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B;
        --primary-light: #DAA520;
        --primary-lighter: #F4C430;
        --secondary-color: #FFC107;
        --accent-color: #FFD54F;
        --tertiary-color: #DAA520;
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037;
        --secondary-text: #795548;
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

    /* 墨韵玄烨黑色主题 */
    .zhouyi-container.theme-dark[b-bh177l20zl] {
        --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        --primary-color: #000000;
        --primary-light: #222222;
        --primary-lighter: #333333;
        --secondary-color: #444444;
        --accent-color: #555555;
        --tertiary-color: #111111;
        --border-color: #444444;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --section-bg: #f5f5f5;
        --text-color: #222222;
        --secondary-text: #444444;
        --hover-bg: rgba(0, 0, 0, 0.1);
        --button-primary-bg: linear-gradient(135deg, #333333, #555555);
        --button-secondary-bg: rgba(0, 0, 0, 0.1);
        --button-info-color: #666666;
        --button-secondary-color: #777777;
        --client-bg: #2d2d2d;
        --client-border: #444444;
        --client-text: #e0e0e0;
        --interpretation-block-bg-1: #f5f5f5;
        --interpretation-block-bg-2: #e8e8e8;
        --interpretation-alt-color: #dcdcdc;
    }
/*#endregion*/

/*#region 【主容器和基础样式】*/
.zhouyi-container[b-bh177l20zl] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}
/*#endregion*/

/*#region 【标题区域样式】*/
.title-section[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.title-text[b-bh177l20zl] {
    color: white;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    flex: 1;
    white-space: nowrap;
}

.title-controls[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.title-buttons[b-bh177l20zl] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* 主题选择器样式 */
.theme-selector[b-bh177l20zl] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-bh177l20zl] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-bh177l20zl] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-bh177l20zl] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-bh177l20zl] {
        background: white;
        color: var(--text-color);
    }

/* 新增标题区域布局分组 */
.title-main-group[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    max-width: 300px;
}

.title-center-group[b-bh177l20zl] {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 20px;
}

.btn[b-bh177l20zl] {
    padding: 3px 10px;
    border: none;
    border-radius: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-hongmeng[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 6px;
    padding: 3px 10px;
    font-weight: 700;
}

.btn-jieguo[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    letter-spacing: 6px;
    padding: 3px 10px;
    font-weight: 700;
}

.btn-PDF[b-bh177l20zl] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    padding: 3px 10px 3px 5px;
    font-weight: 500;
}

.btn:hover:not(:disabled)[b-bh177l20zl] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn:disabled[b-bh177l20zl] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/*#endregion*/

/*#region 【客户信息区样式】*/
.client-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
    margin: -6px 0px -5px 0px;
    border: 1px solid var(--client-border);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.client-form-scroll[b-bh177l20zl] {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar {
        height: 6px;
    }

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

        .client-form-scroll[b-bh177l20zl]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.form-field-group[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 0px 0px 10px;
    background: var(--client-bg);
    border-radius: 6px;
    border: 1px solid var(--client-border);
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    margin-top: 3px;
}

    .form-field-group label[b-bh177l20zl] {
        font-weight: bold;
        color: var(--client-text);
        font-size: 0.85rem;
        min-width: 60px;
        margin: 0;
        white-space: nowrap;
    }

.form-control[b-bh177l20zl] {
    min-width: 150px;
    margin: 0px 0px 0px -25px;
}

.form-control[b-bh177l20zl], .form-control-email[b-bh177l20zl] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--client-border);
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
}

.form-control-email[b-bh177l20zl] {
    min-width: 200px;
    margin-left: -25px;
}

    .form-control:focus[b-bh177l20zl], .form-control-email:focus[b-bh177l20zl] {
        border-color: var(--primary-light);
        outline: none;
        box-shadow: 0 0 0 2px rgba(160, 82, 45, 0.2);
    }
/*#endregion*/

/*#region 【C1:问事选择区样式】*/
.casting-main-container[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* C1: 问事选择区 - 使用主浅色 */
.question-section-row[b-bh177l20zl] {
    width: 100%;
}

.function-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
}

/* 问事选择区两列布局 */
.question-section-layout[b-bh177l20zl] {
    display: flex;
    align-items: stretch;
    min-height: 45px;
}

.question-title-column[b-bh177l20zl] {
    flex: 0 0 100px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 5px 4px 2px;
    margin: 4px 0px;
}

.question-options-column[b-bh177l20zl] {
    flex: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-bh177l20zl] {
    color: white;
    padding: 4px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-bh177l20zl] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;
    color: white;
}

/* C1区域：紧凑网格布局 - 固定宽度自动换行 */
.compact-grid[b-bh177l20zl] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start;
}

.compact-item[b-bh177l20zl] {
    flex: 0 0 auto !important;
    width: 90px !important;
    margin: 2px 2px 2px 8px !important;
}

.category-item input[type="radio"][b-bh177l20zl] {
    position: absolute;
    opacity: 0;
}

.category-label[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 3px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.0rem;
    max-width: 100px;
    margin: 0 auto;
}

.radio-circle[b-bh177l20zl] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-bh177l20zl]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-bh177l20zl] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-bh177l20zl] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-bh177l20zl]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-bh177l20zl] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
/*#endregion*/

/*#region 【C2:摇卦区优化布局】*/
/* C2: 摇卦区 - 使用次级色 */
.casting-section-row[b-bh177l20zl] {
    width: 100%;
    margin: 0px 0;
}

.casting-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
}

/* 摇卦区三列布局 - 主要优化区域 */
.casting-section-layout.responsive-layout[b-bh177l20zl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
}

/* 三列分组 */
.casting-title-group[b-bh177l20zl] {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
}

.casting-coins-group[b-bh177l20zl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.casting-buttons-group[b-bh177l20zl] {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4px;
}

/* 摇卦标题列 - 优化布局 */
.casting-title-column[b-bh177l20zl] {
    width: 100%;
    background: var(--primary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    min-height: 40px;
}

/* 摇卦标题内容 - 改为flex布局，确保标题和进度在一行 */
.casting-header-content[b-bh177l20zl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.draw-head[b-bh177l20zl] {
    margin: 0;
    font-size: clamp(1.0rem, 1.2vw, 1.2rem); /* 响应式字体大小 */
    font-weight: 600;
    white-space: nowrap;
    color: white;
    letter-spacing: 2px;
}

.progress-badge[b-bh177l20zl] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* 响应式字体大小 */
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 摇卦控制容器 */
.casting-controls-container[b-bh177l20zl] {
    padding: 0;
}

/* 按钮组布局 */
.button-group-left[b-bh177l20zl] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-touzi[b-bh177l20zl] {
    background: var(--tertiary-color);
    color: white;
    padding: 8px 16px;
    font-size: clamp(0.9rem, 1vw, 1.0rem); /* 响应式字体大小 */
    letter-spacing: 3px;
    white-space: nowrap;
    min-width: 120px;
}

.btn-info-small[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 6px 12px !important;
    font-size: clamp(0.85rem, 0.9vw, 0.9rem); /* 响应式字体大小 */
    letter-spacing: 2px;
    white-space: nowrap;
}

.coins-display-center[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* 硬币值显示 */
.coin-values-display[b-bh177l20zl] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 12px;
    margin: -2px 0px 0px 0px;
    width: fit-content;
}

.coin-values-row[b-bh177l20zl] {
    display: flex;
    justify-content: space-around;
    gap: 60px;
}

.coin-value-badge[b-bh177l20zl] {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: clamp(0.75rem, 0.8vw, 0.85rem); /* 响应式字体大小 */
    min-width: 80px;
    text-align: center;
}

.coin-yang[b-bh177l20zl] {
    background: var(--accent-color);
}

.coin-yin[b-bh177l20zl] {
    background: var(--primary-color);
}

/* 硬币样式 */
.coins-container[b-bh177l20zl] {
    margin-bottom: 0;
    width: 100%;
}

/* 硬币行布局 */
.coins-row[b-bh177l20zl] {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 4vw, 50px); /* 响应式间隔 */
    width: 100%;
}

/* 紧凑硬币布局 */
.compact-coins[b-bh177l20zl] {
    gap: clamp(20px, 3vw, 40px) !important;
}

/* 硬币列样式 */
.coin-column[b-bh177l20zl] {
    text-align: center;
}

.coin-wrapper[b-bh177l20zl] {
    margin-bottom: 6px;
}

.coin[b-bh177l20zl] {
    min-width: clamp(100px, 12vw, 140px); /* 响应式宽度 */
    height: clamp(45px, 5vw, 55px); /* 响应式高度 */
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
    padding: 4px;
}

/* 爻币背景色 */
.coin-hidden[b-bh177l20zl] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-bh177l20zl] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-bh177l20zl] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-bh177l20zl] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 爻币悬停效果 */
.coin:not(.disabled):hover[b-bh177l20zl] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}

.coin-value[b-bh177l20zl] {
    text-align: center;
    width: 100%;
}

.coin-text[b-bh177l20zl] {
    font-size: clamp(0.7rem, 0.8vw, 0.85rem); /* 响应式字体大小 */
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

.coin-symbol[b-bh177l20zl] {
    font-size: clamp(1.2rem, 1.5vw, 1.8rem); /* 响应式字体大小 */
    line-height: 1;
}

.coin-hidden .coin-tip[b-bh177l20zl] {
    font-size: clamp(0.8rem, 0.9vw, 1.0rem); /* 响应式字体大小 */
    margin-top: 2px;
    color: white;
    font-weight: bold;
}
/*#endregion*/

/*#region 【C3:卦象显示区优化布局】*/
/* C3: 卦象显示区 - 使用强调色 - 响应式优化 */
.display-section-row[b-bh177l20zl] {
    width: 100%;
}

.display-section[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
}

.display-header[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 10px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-bh177l20zl] {
        margin: 0;
        font-size: clamp(1.0rem, 1.1vw, 1.2rem); /* 响应式字体大小 */
        font-weight: 600;
    }

.gua-display-container[b-bh177l20zl] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

/* 卦象显示区左右并排布局 - 响应式优化 */
.gua-display-layout[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(10px, 2vw, 20px); /* 响应式间隔 */
    margin-bottom: 0px;
    min-height: 120px;
    flex-wrap: nowrap;
    padding: 8px clamp(8px, 2vw, 12px); /* 响应式内边距 */
    min-width: 350px;
    overflow-x: auto;
}

.trigram-display-area[b-bh177l20zl] {
    flex: 1;
    text-align: center;
    padding: clamp(6px, 1vw, 10px) clamp(8px, 1.5vw, 12px); /* 响应式内边距 */
    border: 2px solid var(--accent-color);
    border-radius: 6px;
    margin: 0;
    min-width: 160px;
}

/* 上挂和下挂内部两列布局 */
.trigram-two-column-layout[b-bh177l20zl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 15px); /* 响应式间隔 */
    width: 100%;
}

.trigram-label-column[b-bh177l20zl] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yao-symbols-column[b-bh177l20zl] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 180px;
}

.upper-trigram-area[b-bh177l20zl] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-bh177l20zl] {
    border-left: 1px solid var(--border-color);
}

/* 卦标签响应式设计 */
.trigram-label[b-bh177l20zl] {
    text-align: center;
    font-weight: bold;
    padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1.2vw, 12px);
    border-radius: 15px;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem); /* 大窗体18-20px，小窗体不小于14px */
    display: inline-block;
    color: white;
    min-width: clamp(50px, 7vw, 65px);
    white-space: nowrap;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.upper-label[b-bh177l20zl] {
    background: var(--primary-light);
}

.lower-label[b-bh177l20zl] {
    background: var(--tertiary-color);
}

/* 水平爻列表 - 宽度优化 */
.yao-list-horizontal[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* 爻项响应式设计 */
.yao-item-horizontal[b-bh177l20zl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.2vw, 14px);
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: clamp(110px, 14vw, 150px); /* 响应式宽度 */
    margin: 0 clamp(2px, 0.5vw, 4px); /* 响应式外边距 */
}

    .yao-item-horizontal.yang[b-bh177l20zl] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-bh177l20zl] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-bh177l20zl] {
        animation: pulse-b-bh177l20zl 2s infinite;
        border: 2px solid var(--accent-color);
    }

/* 爻位文字响应式 */
.yao-position-horizontal[b-bh177l20zl] {
    width: clamp(30px, 5vw, 40px);
    font-weight: bold;
    color: var(--text-color);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem); /* 响应式字体大小 */
    text-align: center;
    white-space: nowrap;
}

.yao-symbol-horizontal[b-bh177l20zl] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 阳爻线响应式 */
.yang-line-horizontal[b-bh177l20zl] {
    width: clamp(40px, 6vw, 60px);
    height: clamp(5px, 0.6vw, 7px);
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-bh177l20zl] {
    display: flex;
    gap: clamp(12px, 1.8vw, 18px);
    align-items: center;
}

/* 阴爻段响应式 */
.yin-segment-horizontal[b-bh177l20zl] {
    width: clamp(12px, 2vw, 18px);
    height: clamp(5px, 0.6vw, 7px);
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-bh177l20zl] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: clamp(0.8rem, 0.9vw, 1.0rem);
}

.empty-line-horizontal[b-bh177l20zl] {
    width: 50px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}
/*#endregion*/

/*#region 【解卦区域样式】*/
.interpretation-card[b-bh177l20zl] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-bh177l20zl] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

/* 解卦标题行 - 确保标题和缩略图同行不换行 */
.interpretation-header[b-bh177l20zl] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 3px 6px 3px 10px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 标题在左，缩略图在右 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
    flex-wrap: nowrap; /* 禁止换行 */
    width: 100%; /* 确保占据全宽 */
    min-height: 38px; /* 固定最小高度 */
}

    .interpretation-header h5[b-bh177l20zl] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
        white-space: nowrap; /* 标题不换行 */
        flex-shrink: 0; /* 不允许收缩 */
        min-width: max-content; /* 最小宽度为内容宽度 */
    }

.interpretation-content[b-bh177l20zl] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-bh177l20zl]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-bh177l20zl] {
    padding: 4px;
}

    /* 解卦区内部分区交替配色 */
    .interpretation-sections .section-block:nth-child(odd)[b-bh177l20zl] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-bh177l20zl] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-bh177l20zl] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-bh177l20zl] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 带切换按钮的标题布局 */
.section-header-with-toggle[b-bh177l20zl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-bh177l20zl] {
    width: 70px;
    height: 12px;
    padding: 10px;
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
}

    .toggle-btn:hover[b-bh177l20zl] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-bh177l20zl] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-bh177l20zl] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

.section-subtitle.category-title[b-bh177l20zl] {
    color: var(--tertiary-color);
}

.section-subtitle.yao-title[b-bh177l20zl] {
    color: var(--accent-color);
}

.section-subtitle.transformation-title[b-bh177l20zl] {
    color: var(--primary-lighter);
}

.section-subtitle.gua-transformation-title[b-bh177l20zl] {
    color: var(--secondary-color);
}

.section-subtitle[b-bh177l20zl] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
}

.section-subtitle-Remark[b-bh177l20zl] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
    white-space: normal;
}

.classic-text[b-bh177l20zl] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

.gua-basic-info[b-bh177l20zl] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-bh177l20zl] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-bh177l20zl] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
}

.yao-ci-container[b-bh177l20zl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-bh177l20zl] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-bh177l20zl] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-bh177l20zl] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
}

.yao-type-badge[b-bh177l20zl] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.yang-badge[b-bh177l20zl] {
    background: var(--primary-light);
}

.yin-badge[b-bh177l20zl] {
    background: var(--tertiary-color);
}

.yao-position[b-bh177l20zl] {
    color: var(--secondary-text);
    font-size: 0.75rem;
}

.yao-content[b-bh177l20zl] {
    font-size: 0.85rem;
}

.yao-ci-text[b-bh177l20zl] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-bh177l20zl], .changing-meaning[b-bh177l20zl] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.category-interpretation[b-bh177l20zl] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-bh177l20zl] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-bh177l20zl] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-bh177l20zl] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-bh177l20zl] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .interpretation-section p[b-bh177l20zl] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-bh177l20zl] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.luck-level2[b-bh177l20zl], .trend-badge[b-bh177l20zl] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

.luck-level[b-bh177l20zl], .trend-badge[b-bh177l20zl] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

    .luck-daji[b-bh177l20zl], .trend-badge.luck-daji[b-bh177l20zl] {
        background: #27ae60;
    }

    .luck-ji[b-bh177l20zl], .trend-badge.luck-ji[b-bh177l20zl] {
        background: #2ecc71;
    }

    .luck-zhongji[b-bh177l20zl], .trend-badge.luck-zhongji[b-bh177l20zl] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-bh177l20zl], .trend-badge.luck-xiaoji[b-bh177l20zl] {
        background: #e67e22;
    }

    .luck-ping[b-bh177l20zl], .trend-badge.luck-ping[b-bh177l20zl] {
        background: #95a5a6;
    }

    .luck-xiong[b-bh177l20zl], .trend-badge.luck-xiong[b-bh177l20zl] {
        background: #e74c3c;
    }

    .luck-daxiong[b-bh177l20zl], .trend-badge.luck-daxiong[b-bh177l20zl] {
        background: #c0392b;
    }

.trend-badge-Trend[b-bh177l20zl] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
}

.loading-content[b-bh177l20zl] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-bh177l20zl] {
    width: 60px;
    height: 60px;
    border: 10px solid black;
    border-top: 1px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-bh177l20zl 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin-b-bh177l20zl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.transformations-container[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-bh177l20zl] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-bh177l20zl] {
    flex: 0 0 auto;
}

.transformation-badge[b-bh177l20zl] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.transformation-content[b-bh177l20zl] {
    flex: 1;
}

.transformation-gua[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-bh177l20zl] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-bh177l20zl] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-bh177l20zl] {
    margin-top: 4px;
}
/*#endregion*/

/*#region 【卦象图片缩略图样式】*/
.gua-image-preview-container[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 不允许收缩 */
    white-space: nowrap; /* 内容不换行 */
    margin-left: auto; /* 右对齐 */
}

.gua-preview-wrapper[b-bh177l20zl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 卦象图片缩略图 */
.gua-preview-image[b-bh177l20zl] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    background: var(--hover-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
    flex-shrink: 0; /* 不允许收缩 */
}

    .gua-preview-image:hover[b-bh177l20zl] {
        transform: scale(1.1);
        border-color: var(--primary-light);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* 卦图占位符 */
.gua-placeholder[b-bh177l20zl] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: bold;
    flex-shrink: 0; /* 不允许收缩 */
}

/* 卦象图片模态框 */
.gua-modal-image[b-bh177l20zl] {
    max-width: 90%;
    max-height: 60vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/*#endregion*/

/*#region 【空状态样式 - 图片轮播和分割条】*/
.empty-state[b-bh177l20zl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500px);
    min-height: 120px;
    max-height: 400px;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
    overflow: hidden;
    transition: height 0.3s ease;
}

.empty-state-container[b-bh177l20zl] {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 5px;
    height: 100%;
    overflow: hidden;
}

.empty-state-image[b-bh177l20zl] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
    overflow: hidden;
}

.bordered-image[b-bh177l20zl] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state-content[b-bh177l20zl] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
    overflow: hidden;
}

.remark-content-txt[b-bh177l20zl] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: calc(100% - 50px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .remark-content-txt[b-bh177l20zl]::-webkit-scrollbar {
        display: none;
    }

.empty-icon[b-bh177l20zl] {
    font-size: 2.5em;
    margin-top: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

.carousel-container[b-bh177l20zl] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.responsive-image[b-bh177l20zl] {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

.carousel-controls[b-bh177l20zl] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

.carousel-btn-left[b-bh177l20zl],
.carousel-btn-center[b-bh177l20zl],
.carousel-btn-right[b-bh177l20zl] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-bh177l20zl] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

    .carousel-btn:active[b-bh177l20zl] {
        transform: scale(0.95);
    }

.carousel-toggle[b-bh177l20zl] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.resizer[b-bh177l20zl] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-bh177l20zl] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-bh177l20zl] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-bh177l20zl] {
    background-color: #888;
}

.empty-state-image[b-bh177l20zl],
.empty-state-content[b-bh177l20zl] {
    transition: width 0.1s ease;
    overflow: hidden;
}
/*#endregion*/

/*#region 【响应式设计优化】*/
/* 大屏幕 (> 1200px) */
@media (min-width: 1200px) {
    .casting-section-layout.responsive-layout[b-bh177l20zl] {
        padding: 6px 12px;
        gap: 15px;
    }

    .draw-head[b-bh177l20zl] {
        font-size: 1.2rem;
    }

    .trigram-label[b-bh177l20zl] {
        font-size: 1.1rem;
        padding: 6px 12px;
    }

    .coin[b-bh177l20zl] {
        min-width: 140px;
        height: 55px;
    }

    .coin-text[b-bh177l20zl] {
        font-size: 0.85rem;
    }

    .coin-symbol[b-bh177l20zl] {
        font-size: 1.8rem;
    }
}

/* 中等屏幕 (992px - 1200px) */
@media (max-width: 1200px) and (min-width: 992px) {
    .title-section[b-bh177l20zl] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .title-main-group[b-bh177l20zl] {
        flex: 1;
        justify-content: flex-start;
    }

    .title-center-group[b-bh177l20zl] {
        flex: 2;
        justify-content: center;
    }

    .yao-ci-container[b-bh177l20zl] {
        grid-template-columns: 1fr;
    }

    .casting-section-layout.responsive-layout[b-bh177l20zl] {
        gap: 8px;
        padding: 4px 8px;
    }

    .casting-title-group[b-bh177l20zl] {
        flex: 0 0 160px;
    }

    .casting-buttons-group[b-bh177l20zl] {
        flex: 0 0 280px;
    }

    /* 问事选择区响应式 */
    .question-section-layout[b-bh177l20zl] {
        flex-direction: column;
        min-height: auto;
    }

    .question-title-column[b-bh177l20zl] {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        padding: 6px 0;
        margin: 0;
    }

    .question-options-column[b-bh177l20zl] {
        padding: 8px 10px;
    }

    .compact-grid[b-bh177l20zl] {
        justify-content: center;
    }
}

/* 平板屏幕 (768px - 992px) */
@media (max-width: 992px) and (min-width: 768px) {
    .casting-section-layout.responsive-layout[b-bh177l20zl] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .casting-title-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 1;
    }

    .casting-coins-group[b-bh177l20zl] {
        flex: 0 0 100%;
        order: 3;
        margin-top: 10px;
    }

    .casting-buttons-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 2;
        margin: 10px 0;
    }

    .button-group-left[b-bh177l20zl] {
        justify-content: center;
        width: auto;
    }

    .gua-display-layout[b-bh177l20zl] {
        flex-direction: row;
        gap: 10px;
        padding: 6px 8px;
        min-width: 350px;
    }

    .trigram-display-area[b-bh177l20zl] {
        width: 100%;
    }

    .trigram-label[b-bh177l20zl] {
        font-size: 1.0rem;
        min-width: 60px;
        padding: 5px 10px;
    }

    .yao-item-horizontal[b-bh177l20zl] {
        width: 120px;
    }

    /* 问事选择区响应式 */
    .question-section-layout[b-bh177l20zl] {
        flex-direction: column;
        min-height: auto;
    }

    .question-title-column[b-bh177l20zl] {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        padding: 6px 0;
        margin: 0;
    }

    .question-options-column[b-bh177l20zl] {
        padding: 8px 10px;
    }

    .compact-grid[b-bh177l20zl] {
        justify-content: center;
    }
}

/* 小屏幕 (480px - 768px) */
@media (max-width: 768px) and (min-width: 480px) {
    .title-section[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }

    .title-main-group[b-bh177l20zl] {
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    .title-center-group[b-bh177l20zl] {
        width: 100%;
        justify-content: center;
    }

    .casting-section-layout.responsive-layout[b-bh177l20zl] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .casting-title-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 1;
    }

    .casting-coins-group[b-bh177l20zl] {
        flex: 0 0 100%;
        order: 3;
        margin-top: 8px;
    }

    .casting-buttons-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 2;
        margin: 8px 0;
    }

    .casting-title-column[b-bh177l20zl] {
        padding: 6px 10px;
        min-height: 36px;
    }

    .draw-head[b-bh177l20zl] {
        font-size: 1.0rem;
    }

    .progress-badge[b-bh177l20zl] {
        font-size: 0.85rem;
        padding: 3px 6px;
    }

    .button-group-left[b-bh177l20zl] {
        flex-direction: row;
        gap: 10px;
        width: 100%;
        justify-content: center;
    }

    .compact-buttons[b-bh177l20zl] {
        flex-direction: row !important;
        gap: 10px !important;
    }

        .compact-buttons .btn-touzi[b-bh177l20zl] {
            padding: 6px 12px;
            font-size: 0.9rem;
            letter-spacing: 3px;
            min-width: 110px;
        }

        .compact-buttons .btn-info-small[b-bh177l20zl] {
            padding: 5px 10px !important;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }

    .coins-row[b-bh177l20zl] {
        gap: 25px;
    }

    .coin[b-bh177l20zl] {
        min-width: 110px;
        height: 50px;
    }

    .coin-text[b-bh177l20zl] {
        font-size: 0.8rem;
    }

    .coin-symbol[b-bh177l20zl] {
        font-size: 1.5rem;
    }

    .gua-display-layout[b-bh177l20zl] {
        flex-direction: row;
        gap: 8px;
        padding: 6px;
        min-width: 320px;
    }

    .upper-trigram-area[b-bh177l20zl] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .lower-trigram-area[b-bh177l20zl] {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .trigram-label[b-bh177l20zl] {
        font-size: 0.95rem;
        min-width: 55px;
        padding: 4px 8px;
    }

    .yao-item-horizontal[b-bh177l20zl] {
        width: 100px;
        padding: 5px 8px;
    }

    .yang-line-horizontal[b-bh177l20zl] {
        width: 45px;
    }

    .yin-line-horizontal[b-bh177l20zl] {
        gap: 10px;
    }

    .yin-segment-horizontal[b-bh177l20zl] {
        width: 15px;
    }

    /* 问事选择区响应式 */
    .question-section-layout[b-bh177l20zl] {
        flex-direction: column;
        min-height: auto;
    }

    .question-title-column[b-bh177l20zl] {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        padding: 6px 0;
        margin: 0;
    }

    .question-options-column[b-bh177l20zl] {
        padding: 8px 10px;
    }

    .compact-grid[b-bh177l20zl] {
        justify-content: center;
    }

    .compact-item[b-bh177l20zl] {
        width: 70px !important;
    }

    .category-label[b-bh177l20zl] {
        padding: 5px 6px;
        font-size: 0.9rem;
        max-width: 90px;
    }

    /* 解卦标题行在中等屏幕下的优化 */
    .interpretation-header[b-bh177l20zl] {
        padding: 3px 4px 3px 6px;
        gap: 6px;
        min-height: 34px;
    }

        .interpretation-header h5[b-bh177l20zl] {
            font-size: 1.1rem;
        }

    .gua-preview-image[b-bh177l20zl],
    .gua-placeholder[b-bh177l20zl] {
        width: 35px;
        height: 35px;
    }
}

/* 手机屏幕 (< 480px) */
@media (max-width: 480px) {
    .zhouyi-container[b-bh177l20zl] {
        padding: 6px;
        gap: 10px;
    }

    .casting-section-layout.responsive-layout[b-bh177l20zl] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 4px 6px;
    }

    .casting-title-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 1;
    }

    .casting-coins-group[b-bh177l20zl] {
        flex: 0 0 100%;
        order: 3;
        margin-top: 6px;
    }

    .casting-buttons-group[b-bh177l20zl] {
        flex: 0 0 100%;
        justify-content: center;
        order: 2;
        margin: 6px 0;
    }

    .casting-title-column[b-bh177l20zl] {
        padding: 5px 8px;
        min-height: 34px;
    }

    .draw-head[b-bh177l20zl] {
        font-size: 0.95rem;
        letter-spacing: 1px;
    }

    .progress-badge[b-bh177l20zl] {
        font-size: 0.8rem;
        padding: 2px 5px;
    }

    .button-group-left[b-bh177l20zl] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .btn-touzi[b-bh177l20zl] {
        width: 100%;
        max-width: 200px;
        padding: 6px 12px;
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .btn-info-small[b-bh177l20zl] {
        width: 100%;
        max-width: 150px;
        padding: 5px 10px !important;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    .coins-row[b-bh177l20zl] {
        gap: 15px;
        flex-direction: row;
    }

    .coin[b-bh177l20zl] {
        min-width: 90px;
        height: 45px;
    }

    .coin-text[b-bh177l20zl] {
        font-size: 0.75rem;
    }

    .coin-symbol[b-bh177l20zl] {
        font-size: 1.3rem;
    }

    .coin-values-row[b-bh177l20zl] {
        gap: 40px;
    }

    .coin-value-badge[b-bh177l20zl] {
        min-width: 70px;
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .form-field-group[b-bh177l20zl] {
        min-width: 180px;
    }

    .gua-display-layout[b-bh177l20zl] {
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 6px;
        padding: 4px;
        min-width: 300px;
    }

    .trigram-display-area[b-bh177l20zl] {
        width: 100%;
        padding: 4px 6px;
    }

    .trigram-label[b-bh177l20zl] {
        font-size: 0.9rem;
        min-width: 50px;
        padding: 3px 6px;
    }

    .yao-item-horizontal[b-bh177l20zl] {
        width: 85px;
        padding: 4px 6px;
        margin: 0 2px;
    }

    .yang-line-horizontal[b-bh177l20zl] {
        width: 35px;
    }

    .yin-line-horizontal[b-bh177l20zl] {
        gap: 8px;
    }

    .yin-segment-horizontal[b-bh177l20zl] {
        width: 12px;
    }

    .yao-position-horizontal[b-bh177l20zl] {
        font-size: 0.7rem;
        width: 25px;
    }

    /* 问事选择区响应式 */
    .question-section-layout[b-bh177l20zl] {
        flex-direction: column;
        min-height: auto;
    }

    .question-title-column[b-bh177l20zl] {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
        padding: 5px 0;
        margin: 0;
    }

    .question-options-column[b-bh177l20zl] {
        padding: 6px 8px;
    }

    .compact-grid[b-bh177l20zl] {
        gap: 3px !important;
        justify-content: center;
    }

    .compact-item[b-bh177l20zl] {
        width: 65px !important;
        margin: 1px !important;
    }

    .category-label[b-bh177l20zl] {
        padding: 4px 5px;
        font-size: 0.9rem;
        max-width: 90px;
        gap: 6px;
    }

    .radio-circle[b-bh177l20zl] {
        width: 10px;
        height: 10px;
    }

    .theme-dropdown[b-bh177l20zl] {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* 解卦标题行在小屏幕下的优化 */
    .interpretation-header[b-bh177l20zl] {
        padding: 2px 3px 2px 4px;
        gap: 4px;
        min-height: 30px;
    }

        .interpretation-header h5[b-bh177l20zl] {
            font-size: 1.0rem;
            gap: 2px;
        }

    .gua-preview-image[b-bh177l20zl],
    .gua-placeholder[b-bh177l20zl] {
        width: 28px;
        height: 28px;
        font-size: 1.0rem;
    }

    .gua-preview-wrapper[b-bh177l20zl] {
        gap: 4px;
    }
}

/* 超窄屏幕 (< 360px) */
@media (max-width: 360px) {
    .interpretation-header h5[b-bh177l20zl] {
        font-size: 0.9rem;
    }

    .gua-preview-image[b-bh177l20zl],
    .gua-placeholder[b-bh177l20zl] {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }

    .gua-display-layout[b-bh177l20zl] {
        min-width: 280px;
    }

    .yao-item-horizontal[b-bh177l20zl] {
        width: 75px;
    }

    /* 问事选择区响应式 */
    .compact-item[b-bh177l20zl] {
        width: 60px !important;
    }

    .category-label[b-bh177l20zl] {
        max-width: 80px;
        font-size: 0.8rem;
        padding: 3px 6px;
    }

    .question-section-title[b-bh177l20zl] {
        font-size: 0.9rem;
    }
}
/*#endregion*/

/*#region 【动画效果】*/
@keyframes pulse-b-bh177l20zl {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}
/*#endregion*/

/*#region 【PDF打印样式】*/
.pdf-exporting[b-bh177l20zl] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

@media print, .pdf-exporting {
    .no-print[b-bh177l20zl],
    .btn[b-bh177l20zl],
    .theme-selector[b-bh177l20zl] {
        display: none !important;
    }

    .zhouyi-container[b-bh177l20zl] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .title-text[b-bh177l20zl] {
        font-size: 24pt !important;
    }

    .section-title[b-bh177l20zl] {
        font-size: 16pt !important;
    }

    .classic-text[b-bh177l20zl] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    .theme-dark .interpretation-content[b-bh177l20zl],
    .theme-dark .section-block[b-bh177l20zl] {
        background: white !important;
        color: black !important;
    }

    .zhouyi-page-break-before[b-bh177l20zl] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-bh177l20zl] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-bh177l20zl] {
        page-break-inside: avoid;
    }
}

.btn-pdf-full[b-bh177l20zl] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
    min-width: 140px;
}

    .btn-pdf-full:hover[b-bh177l20zl] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }
/*#endregion*/
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaTheme3.razor.rz.scp.css */
/*#region 【主题变量定义】*/
/* 竹简清风主题 */
.zhouyi-container.theme-bamboo[b-qgwc35qr1o] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --secondary-color: #81C784;
    --accent-color: #A5D6A7;
    --tertiary-color: #4CAF50;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: #ffffff;
    --text-color: #2c3e50;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(76, 175, 80, 0.1);
    --button-info-color: #66BB6A;
    --button-secondary-color: #A5D6A7;
    --client-bg: transparent;
    --client-border: #d8e8d8;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f0f7f0;
    --interpretation-alt-color: #e8f5e9;
}

/* 默认主题 - 天地玄黄 */
.zhouyi-container[b-qgwc35qr1o] {
    --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
    --primary-color: #8B4513;
    --primary-light: #A0522D;
    --primary-lighter: #CD853F;
    --secondary-color: #D2691E;
    --accent-color: #CD853F;
    --tertiary-color: #8B4513;
    --border-color: #d4c6a8;
    --shadow-color: rgba(139, 69, 19, 0.08);
    --section-bg: #ffffff;
    --text-color: #5D4037;
    --secondary-text: #795548;
    --hover-bg: rgba(139, 69, 19, 0.05);
    --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
    --button-secondary-bg: rgba(160, 82, 45, 0.1);
    --button-info-color: #D2691E;
    --button-secondary-color: #CD853F;
    --client-bg: transparent;
    --client-border: #e0d6c0;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f8f6f2;
    --interpretation-alt-color: #e8dfce;
}

    /* 朱砂祥瑞主题 */
    .zhouyi-container.theme-vermillion[b-qgwc35qr1o] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000;
        --primary-light: #A52A2A;
        --primary-lighter: #CD5C5C;
        --secondary-color: #B22222;
        --accent-color: #CD5C5C;
        --tertiary-color: #C44545;
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-qgwc35qr1o] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --secondary-color: #2196F3;
        --accent-color: #42A5F5;
        --tertiary-color: #1976D2;
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-qgwc35qr1o] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --secondary-color: #AB47BC;
        --accent-color: #BA68C8;
        --tertiary-color: #8E24AA;
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 */
    .zhouyi-container.theme-golden[b-qgwc35qr1o] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B;
        --primary-light: #DAA520;
        --primary-lighter: #F4C430;
        --secondary-color: #FFC107;
        --accent-color: #FFD54F;
        --tertiary-color: #DAA520;
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037;
        --secondary-text: #795548;
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

    /* 墨韵玄烨黑色主题 */
    .zhouyi-container.theme-dark[b-qgwc35qr1o] {
        --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        --primary-color: #000000;
        --primary-light: #222222;
        --primary-lighter: #333333;
        --secondary-color: #444444;
        --accent-color: #555555;
        --tertiary-color: #111111;
        --border-color: #444444;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --section-bg: #f5f5f5;
        --text-color: #222222;
        --secondary-text: #444444;
        --hover-bg: rgba(0, 0, 0, 0.1);
        --button-primary-bg: linear-gradient(135deg, #333333, #555555);
        --button-secondary-bg: rgba(0, 0, 0, 0.1);
        --button-info-color: #666666;
        --button-secondary-color: #777777;
        --client-bg: #2d2d2d;
        --client-border: #444444;
        --client-text: #e0e0e0;
        --interpretation-block-bg-1: #f5f5f5;
        --interpretation-block-bg-2: #e8e8e8;
        --interpretation-alt-color: #dcdcdc;
    }
/*#endregion*/

/*#region 【主容器和基础样式】*/
.zhouyi-container[b-qgwc35qr1o] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}
/*#endregion*/

/*#region 【标题区域样式】*/
.title-section[b-qgwc35qr1o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 8px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.title-text[b-qgwc35qr1o] {
    color: white;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
    flex: 1;
    white-space: nowrap;
}

.title-controls[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: flex-end;
}

.title-buttons[b-qgwc35qr1o] {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* 主题选择器样式 */
.theme-selector[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
}

.theme-dropdown[b-qgwc35qr1o] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

    .theme-dropdown:hover[b-qgwc35qr1o] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-qgwc35qr1o] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-qgwc35qr1o] {
        background: white;
        color: var(--text-color);
    }

/* 新增标题区域布局分组 */
.title-main-group[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    max-width: 300px;
}

.title-center-group[b-qgwc35qr1o] {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 20px;
}

.btn[b-qgwc35qr1o] {
    padding: 3px 10px;
    border: none;
    border-radius: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-hongmeng[b-qgwc35qr1o] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    letter-spacing: 6px;
    padding: 3px 10px;
    font-weight: 700;
}

.btn-jieguo[b-qgwc35qr1o] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    letter-spacing: 6px;
    padding: 3px 10px;
    font-weight: 700;
}

.btn-PDF[b-qgwc35qr1o] {
    background: var(--button-primary-bg);
    color: white;
    font-size: 1.0rem;
    padding: 3px 10px 3px 5px;
    font-weight: 500;
}

.btn:hover:not(:disabled)[b-qgwc35qr1o] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn:disabled[b-qgwc35qr1o] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/*#endregion*/

/*#region 【客户信息区样式】*/
.client-section[b-qgwc35qr1o] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 12px 0px 12px;
    margin: -6px 0px -5px 0px;
    border: 1px solid var(--client-border);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.client-form-scroll[b-qgwc35qr1o] {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f1f1f1;
}

    .client-form-scroll[b-qgwc35qr1o]::-webkit-scrollbar {
        height: 6px;
    }

    .client-form-scroll[b-qgwc35qr1o]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .client-form-scroll[b-qgwc35qr1o]::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }

        .client-form-scroll[b-qgwc35qr1o]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.form-field-group[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 0px 0px 10px;
    background: var(--client-bg);
    border-radius: 6px;
    border: 1px solid var(--client-border);
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    margin-top: 3px;
}

    .form-field-group label[b-qgwc35qr1o] {
        font-weight: bold;
        color: var(--client-text);
        font-size: 0.85rem;
        min-width: 60px;
        margin: 0;
        white-space: nowrap;
    }

.form-control[b-qgwc35qr1o] {
    min-width: 150px;
    margin: 0px 0px 0px -25px;
}

.form-control[b-qgwc35qr1o], .form-control-email[b-qgwc35qr1o] {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--client-border);
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
}

.form-control-email[b-qgwc35qr1o] {
    min-width: 200px;
    margin-left: -25px;
}

    .form-control:focus[b-qgwc35qr1o], .form-control-email:focus[b-qgwc35qr1o] {
        border-color: var(--primary-light);
        outline: none;
        box-shadow: 0 0 0 2px rgba(160, 82, 45, 0.2);
    }
/*#endregion*/

/*#region 【起卦区样式】*/
.casting-main-container[b-qgwc35qr1o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* C1: 问事选择区 - 使用主浅色 */
.question-section-row[b-qgwc35qr1o] {
    width: 100%;
}

.function-section[b-qgwc35qr1o] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
}

/* 问事选择区两列布局 */
.question-section-layout[b-qgwc35qr1o] {
    display: flex;
    align-items: stretch;
    min-height: 45px;
}

.question-title-column[b-qgwc35qr1o] {
    flex: 0 0 100px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 5px 4px 2px;
    margin: 4px 0px;
}

.question-options-column[b-qgwc35qr1o] {
    flex: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-qgwc35qr1o] {
    color: white;
    padding: 4px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-qgwc35qr1o] {
    margin: 0;
    font-size: 1.0rem;
    font-weight: 700;
    text-align: left;
    letter-spacing: 2px;
}

/* C1区域：紧凑网格布局 - 固定宽度自动换行 */
.compact-grid[b-qgwc35qr1o] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start;
}

.compact-item[b-qgwc35qr1o] {
    flex: 0 0 auto !important;
    width: 80px !important;
    margin: 2px !important;
}

.category-item input[type="radio"][b-qgwc35qr1o] {
    position: absolute;
    opacity: 0;
}

.category-label[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.8rem;
    max-width: 80px;
    margin: 0 auto;
}

.radio-circle[b-qgwc35qr1o] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-qgwc35qr1o]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-qgwc35qr1o] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-qgwc35qr1o] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-qgwc35qr1o]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-qgwc35qr1o] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* C2: 摇卦区 - 使用次级色 */
.casting-section-row[b-qgwc35qr1o] {
    width: 100%;
    margin: 0px 0;
}

.casting-section[b-qgwc35qr1o] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
}

/* 摇卦区四列布局 */
.casting-section-layout[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    padding: 0;
}

/* 摇卦标题列 - 优化布局 */
.casting-title-column[b-qgwc35qr1o] {
    flex: 0 0 180px;
    background: var(--primary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 4px;
}

.casting-buttons-column[b-qgwc35qr1o] {
    flex: 0 0 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-coins-column[b-qgwc35qr1o] {
    flex: 1;
    padding: 5px 8px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-header[b-qgwc35qr1o] {
    color: white;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
}

/* 摇卦标题内容 - 改为flex布局，确保标题和进度在一行 */
.casting-header-content[b-qgwc35qr1o] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.draw-head[b-qgwc35qr1o] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

.progress-badge[b-qgwc35qr1o] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 摇卦控制容器 */
.casting-controls-container[b-qgwc35qr1o] {
    padding: 0;
}

/* 按钮组布局 */
.button-group-left[b-qgwc35qr1o] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.btn-touzi[b-qgwc35qr1o] {
    background: var(--tertiary-color);
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    letter-spacing: 4px;
}

.btn-info-small[b-qgwc35qr1o] {
    background: var(--accent-color);
    color: white;
    padding: 4px 8px !important;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.coins-display-center[b-qgwc35qr1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 硬币值显示 */
.coin-values-display[b-qgwc35qr1o] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -2px 0px 0px 0px;
}

.coin-values-row[b-qgwc35qr1o] {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.coin-value-badge[b-qgwc35qr1o] {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
}

.coin-yang[b-qgwc35qr1o] {
    background: var(--accent-color);
}

.coin-yin[b-qgwc35qr1o] {
    background: var(--primary-color);
}

/* 硬币样式 */
.coins-container[b-qgwc35qr1o] {
    margin-bottom: 0;
}

/* 硬币行布局 - 调整水平间隔 */
.coins-row[b-qgwc35qr1o] {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* 紧凑硬币布局 - 调整水平间隔 */
.compact-coins[b-qgwc35qr1o] {
    gap: 40px !important;
}

/* 硬币列样式 */
.coin-column[b-qgwc35qr1o] {
    text-align: center;
}

.coin-wrapper[b-qgwc35qr1o] {
    margin-bottom: 6px;
}

.coin[b-qgwc35qr1o] {
    min-width: 120px;
    height: 50px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
}

/* 爻币背景色 */
.coin-hidden[b-qgwc35qr1o] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-qgwc35qr1o] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-qgwc35qr1o] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-qgwc35qr1o] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 爻币悬停效果 - 统一应用到整个爻币 */
.coin:not(.disabled):hover[b-qgwc35qr1o] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}

.coin-value[b-qgwc35qr1o] {
    text-align: center;
}

.coin-text[b-qgwc35qr1o] {
    font-size: 0.75rem;
    font-weight: bold;
    margin-bottom: 2px;
}

.coin-symbol[b-qgwc35qr1o] {
    font-size: 1.5rem;
    line-height: 1;
}

.coin-hidden .coin-tip[b-qgwc35qr1o] {
    font-size: 0.9rem;
    margin-top: 2px;
    color: white;
    font-weight: bold;
}

/* 调整硬币之间的间距 */
.casting-coins-column .coins-row[b-qgwc35qr1o] {
    display: flex;
    justify-content: center;
    gap: 80px;
}

/* C3: 卦象显示区 - 使用强调色 - 响应式优化 */
.display-section-row[b-qgwc35qr1o] {
    width: 100%;
}

.display-section[b-qgwc35qr1o] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
}

.display-header[b-qgwc35qr1o] {
    background: var(--accent-color);
    color: white;
    padding: 10px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-qgwc35qr1o] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

.gua-display-container[b-qgwc35qr1o] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

/* 卦象显示区左右并排布局 - 响应式优化 */
.gua-display-layout[b-qgwc35qr1o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    min-height: 120px;
    flex-wrap: nowrap;
    padding: 4px 10px;
    /* 设置最小宽度和水平滚动 */
    min-width: 400px;
    overflow-x: auto;
}

.trigram-display-area[b-qgwc35qr1o] {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid var(--accent-color);
}

/* 上挂和下挂内部两列布局 */
.trigram-two-column-layout[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.trigram-label-column[b-qgwc35qr1o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yao-symbols-column[b-qgwc35qr1o] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 180px;
}

.upper-trigram-area[b-qgwc35qr1o] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-qgwc35qr1o] {
    border-left: 1px solid var(--border-color);
}

/* 卦标签响应式设计 */
.trigram-label[b-qgwc35qr1o] {
    text-align: center;
    font-weight: bold;
    padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    border-radius: 15px;
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
    display: inline-block;
    color: white;
    min-width: clamp(45px, 8vw, 60px);
    white-space: normal;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.upper-label[b-qgwc35qr1o] {
    background: var(--primary-light);
}

.lower-label[b-qgwc35qr1o] {
    background: var(--tertiary-color);
}

/* 水平爻列表 - 宽度优化 */
.yao-list-horizontal[b-qgwc35qr1o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* 爻项响应式设计 */
.yao-item-horizontal[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px);
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: clamp(100px, 15vw, 140px);
}

    .yao-item-horizontal.yang[b-qgwc35qr1o] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-qgwc35qr1o] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-qgwc35qr1o] {
        animation: pulse-b-qgwc35qr1o 2s infinite;
        border: 2px solid var(--accent-color);
    }

/* 爻位文字响应式 */
.yao-position-horizontal[b-qgwc35qr1o] {
    width: clamp(25px, 6vw, 35px);
    font-weight: bold;
    color: var(--text-color);
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    text-align: center;
    white-space: nowrap;
}

.yao-symbol-horizontal[b-qgwc35qr1o] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 阳爻线响应式 */
.yang-line-horizontal[b-qgwc35qr1o] {
    width: clamp(35px, 8vw, 50px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-qgwc35qr1o] {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* 阴爻段响应式 */
.yin-segment-horizontal[b-qgwc35qr1o] {
    width: clamp(10px, 3vw, 15px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-qgwc35qr1o] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.empty-line-horizontal[b-qgwc35qr1o] {
    width: 50px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}
/*#endregion*/

/*#region 【解卦区域样式】*/
.interpretation-card[b-qgwc35qr1o] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-qgwc35qr1o] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

/* 解卦标题行 - 确保标题和缩略图同行不换行 */
.interpretation-header[b-qgwc35qr1o] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 3px 6px 3px 10px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 标题在左，缩略图在右 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
    flex-wrap: nowrap; /* 禁止换行 */
    width: 100%; /* 确保占据全宽 */
    min-height: 38px; /* 固定最小高度 */
}

    .interpretation-header h5[b-qgwc35qr1o] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
        white-space: nowrap; /* 标题不换行 */
        flex-shrink: 0; /* 不允许收缩 */
        min-width: max-content; /* 最小宽度为内容宽度 */
    }

.interpretation-content[b-qgwc35qr1o] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-qgwc35qr1o]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-qgwc35qr1o]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-qgwc35qr1o]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-qgwc35qr1o]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-qgwc35qr1o] {
    padding: 4px;
}

    /* 解卦区内部分区交替配色 */
    .interpretation-sections .section-block:nth-child(odd)[b-qgwc35qr1o] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-qgwc35qr1o] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-qgwc35qr1o] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-qgwc35qr1o] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 带切换按钮的标题布局 */
.section-header-with-toggle[b-qgwc35qr1o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-qgwc35qr1o] {
    width: 70px;
    height: 12px;
    padding: 10px;
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
}

    .toggle-btn:hover[b-qgwc35qr1o] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-qgwc35qr1o] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-qgwc35qr1o] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

.section-subtitle.category-title[b-qgwc35qr1o] {
    color: var(--tertiary-color);
}

.section-subtitle.yao-title[b-qgwc35qr1o] {
    color: var(--accent-color);
}

.section-subtitle.transformation-title[b-qgwc35qr1o] {
    color: var(--primary-lighter);
}

.section-subtitle.gua-transformation-title[b-qgwc35qr1o] {
    color: var(--secondary-color);
}

.section-subtitle[b-qgwc35qr1o] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
}

.section-subtitle-Remark[b-qgwc35qr1o] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
    white-space: normal;
}

.classic-text[b-qgwc35qr1o] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

.gua-basic-info[b-qgwc35qr1o] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-qgwc35qr1o] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-qgwc35qr1o] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
}

.yao-ci-container[b-qgwc35qr1o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-qgwc35qr1o] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-qgwc35qr1o] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-qgwc35qr1o] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
}

.yao-type-badge[b-qgwc35qr1o] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
}

.yang-badge[b-qgwc35qr1o] {
    background: var(--primary-light);
}

.yin-badge[b-qgwc35qr1o] {
    background: var(--tertiary-color);
}

.yao-position[b-qgwc35qr1o] {
    color: var(--secondary-text);
    font-size: 0.75rem;
}

.yao-content[b-qgwc35qr1o] {
    font-size: 0.85rem;
}

.yao-ci-text[b-qgwc35qr1o] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-qgwc35qr1o], .changing-meaning[b-qgwc35qr1o] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.category-interpretation[b-qgwc35qr1o] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-qgwc35qr1o] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-qgwc35qr1o] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-qgwc35qr1o] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-qgwc35qr1o] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .interpretation-section p[b-qgwc35qr1o] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-qgwc35qr1o] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.luck-level2[b-qgwc35qr1o], .trend-badge[b-qgwc35qr1o] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

.luck-level[b-qgwc35qr1o], .trend-badge[b-qgwc35qr1o] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
}

    .luck-daji[b-qgwc35qr1o], .trend-badge.luck-daji[b-qgwc35qr1o] {
        background: #27ae60;
    }

    .luck-ji[b-qgwc35qr1o], .trend-badge.luck-ji[b-qgwc35qr1o] {
        background: #2ecc71;
    }

    .luck-zhongji[b-qgwc35qr1o], .trend-badge.luck-zhongji[b-qgwc35qr1o] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-qgwc35qr1o], .trend-badge.luck-xiaoji[b-qgwc35qr1o] {
        background: #e67e22;
    }

    .luck-ping[b-qgwc35qr1o], .trend-badge.luck-ping[b-qgwc35qr1o] {
        background: #95a5a6;
    }

    .luck-xiong[b-qgwc35qr1o], .trend-badge.luck-xiong[b-qgwc35qr1o] {
        background: #e74c3c;
    }

    .luck-daxiong[b-qgwc35qr1o], .trend-badge.luck-daxiong[b-qgwc35qr1o] {
        background: #c0392b;
    }

.trend-badge-Trend[b-qgwc35qr1o] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
}

.loading-content[b-qgwc35qr1o] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-qgwc35qr1o] {
    width: 60px;
    height: 60px;
    border: 10px solid black;
    border-top: 1px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-qgwc35qr1o 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin-b-qgwc35qr1o {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.transformations-container[b-qgwc35qr1o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-qgwc35qr1o] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-qgwc35qr1o] {
    flex: 0 0 auto;
}

.transformation-badge[b-qgwc35qr1o] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.transformation-content[b-qgwc35qr1o] {
    flex: 1;
}

.transformation-gua[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-qgwc35qr1o] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-qgwc35qr1o] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-qgwc35qr1o] {
    margin-top: 4px;
}
/*#endregion*/

/*#region 【卦象图片缩略图样式】*/
.gua-image-preview-container[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 不允许收缩 */
    white-space: nowrap; /* 内容不换行 */
    margin-left: auto; /* 右对齐 */
}

.gua-preview-wrapper[b-qgwc35qr1o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 卦象图片缩略图 */
.gua-preview-image[b-qgwc35qr1o] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    background: var(--hover-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
    flex-shrink: 0; /* 不允许收缩 */
}

    .gua-preview-image:hover[b-qgwc35qr1o] {
        transform: scale(1.1);
        border-color: var(--primary-light);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* 卦图占位符 */
.gua-placeholder[b-qgwc35qr1o] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: bold;
    flex-shrink: 0; /* 不允许收缩 */
}

/* 卦象图片模态框 */
.gua-modal-image[b-qgwc35qr1o] {
    max-width: 90%;
    max-height: 60vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/*#endregion*/

/*#region 【空状态样式 - 图片轮播和分割条】*/
.empty-state[b-qgwc35qr1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500px);
    min-height: 120px;
    max-height: 400px;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
    overflow: hidden;
    transition: height 0.3s ease;
}

.empty-state-container[b-qgwc35qr1o] {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 5px;
    height: 100%;
    overflow: hidden;
}

.empty-state-image[b-qgwc35qr1o] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
    overflow: hidden;
}

.bordered-image[b-qgwc35qr1o] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state-content[b-qgwc35qr1o] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
    overflow: hidden;
}

.remark-content-txt[b-qgwc35qr1o] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: calc(100% - 50px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .remark-content-txt[b-qgwc35qr1o]::-webkit-scrollbar {
        display: none;
    }

.empty-icon[b-qgwc35qr1o] {
    font-size: 2.5em;
    margin-top: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

.carousel-container[b-qgwc35qr1o] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.responsive-image[b-qgwc35qr1o] {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

.carousel-controls[b-qgwc35qr1o] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

.carousel-btn-left[b-qgwc35qr1o],
.carousel-btn-center[b-qgwc35qr1o],
.carousel-btn-right[b-qgwc35qr1o] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-qgwc35qr1o] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

    .carousel-btn:active[b-qgwc35qr1o] {
        transform: scale(0.95);
    }

.carousel-toggle[b-qgwc35qr1o] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.resizer[b-qgwc35qr1o] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-qgwc35qr1o] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-qgwc35qr1o] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-qgwc35qr1o] {
    background-color: #888;
}

.empty-state-image[b-qgwc35qr1o],
.empty-state-content[b-qgwc35qr1o] {
    transition: width 0.1s ease;
    overflow: hidden;
}
/*#endregion*/

/*#region 【响应式设计】*/
/* 中等屏幕 (992px - 1200px) */
@media (max-width: 1200px) {
    .title-section[b-qgwc35qr1o] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .title-main-group[b-qgwc35qr1o] {
        flex: 1;
        justify-content: flex-start;
    }

    .title-center-group[b-qgwc35qr1o] {
        flex: 2;
        justify-content: center;
    }

    .yao-ci-container[b-qgwc35qr1o] {
        grid-template-columns: 1fr;
    }
}

/* 平板屏幕 (768px - 992px) */
@media (max-width: 992px) {
    .compact-grid[b-qgwc35qr1o] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .casting-section-layout[b-qgwc35qr1o] {
        flex-direction: column;
        gap: 8px;
    }

    .casting-title-group[b-qgwc35qr1o],
    .casting-coins-group[b-qgwc35qr1o],
    .casting-buttons-group[b-qgwc35qr1o] {
        min-width: 100%;
        justify-content: center;
    }

    .coins-row[b-qgwc35qr1o] {
        flex-direction: row;
        gap: 15px;
    }

    .gua-display-layout[b-qgwc35qr1o] {
        flex-direction: row;
        gap: 10px;
        padding: 6px 8px;
        min-width: 350px;
    }

    .trigram-display-area[b-qgwc35qr1o] {
        width: 100%;
    }

    .trigram-label[b-qgwc35qr1o] {
        font-size: clamp(0.8rem, 1.5vw, 1.0rem);
        min-width: clamp(45px, 8vw, 60px);
        padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    }

    .yao-item-horizontal[b-qgwc35qr1o] {
        width: 120px;
    }
}

/* 小屏幕 (480px - 768px) */
@media (max-width: 768px) {
    .title-section[b-qgwc35qr1o] {
        flex-direction: column;
        gap: 8px;
    }

    .title-main-group[b-qgwc35qr1o] {
        justify-content: center;
        width: 100%;
    }

    .title-center-group[b-qgwc35qr1o] {
        width: 100%;
    }

    .question-section-layout[b-qgwc35qr1o],
    .gua-display-layout[b-qgwc35qr1o] {
        flex-direction: column;
    }

    .question-title-column[b-qgwc35qr1o],
    .casting-title-column[b-qgwc35qr1o],
    .casting-buttons-column[b-qgwc35qr1o],
    .casting-coins-column[b-qgwc35qr1o] {
        flex: 1;
        width: 100%;
        text-align: center;
        padding: 2px 4px;
    }

    .casting-title-column[b-qgwc35qr1o] {
        flex: 1;
        width: 100%;
        padding: 4px 8px;
    }

    .casting-header-content[b-qgwc35qr1o] {
        gap: 8px;
    }

    .draw-head[b-qgwc35qr1o] {
        font-size: 1.0rem;
    }

    .progress-badge[b-qgwc35qr1o] {
        font-size: 0.75rem;
        padding: 3px 6px;
    }

    .button-group-left[b-qgwc35qr1o] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .compact-buttons[b-qgwc35qr1o] {
        flex-direction: row !important;
        gap: 10px !important;
    }

    .compact-coins[b-qgwc35qr1o] {
        gap: 15px !important;
    }

    .compact-buttons .btn-touzi[b-qgwc35qr1o] {
        padding: 4px 10px;
        font-size: 0.85rem;
        letter-spacing: 3px;
    }

    .compact-buttons .btn-info-small[b-qgwc35qr1o] {
        padding: 3px 6px !important;
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .upper-trigram-area[b-qgwc35qr1o] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .lower-trigram-area[b-qgwc35qr1o] {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .coin[b-qgwc35qr1o] {
        width: 60px;
        height: 60px;
    }

    .yang-line-horizontal[b-qgwc35qr1o], .yin-line-horizontal[b-qgwc35qr1o] {
        width: 50px;
    }

    /* 解卦标题行在中等屏幕下的优化 */
    .interpretation-header[b-qgwc35qr1o] {
        padding: 3px 4px 3px 6px;
        gap: 6px;
        min-height: 34px;
    }

        .interpretation-header h5[b-qgwc35qr1o] {
            font-size: 1.1rem;
        }

    .gua-preview-image[b-qgwc35qr1o],
    .gua-placeholder[b-qgwc35qr1o] {
        width: 35px;
        height: 35px;
    }
}

/* 手机屏幕 (< 480px) */
@media (max-width: 480px) {
    .zhouyi-container[b-qgwc35qr1o] {
        padding: 6px;
        gap: 10px;
    }

    .compact-grid[b-qgwc35qr1o] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .compact-label[b-qgwc35qr1o] {
        padding: 3px 4px !important;
        font-size: 0.7rem !important;
        max-width: 60px !important;
    }

    .compact-coins .coin[b-qgwc35qr1o] {
        min-width: 80px !important;
        height: 40px !important;
    }

    .coin-text[b-qgwc35qr1o] {
        font-size: 0.65rem !important;
    }

    .coin-symbol[b-qgwc35qr1o] {
        font-size: 1.2rem !important;
    }

    .compact-buttons .btn[b-qgwc35qr1o] {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }

    .form-field-group[b-qgwc35qr1o] {
        min-width: 180px;
    }

    .coin[b-qgwc35qr1o] {
        width: 70px;
        height: 70px;
    }

    .yang-line-horizontal[b-qgwc35qr1o] {
        width: 60px;
    }

    .yin-line-horizontal[b-qgwc35qr1o] {
        gap: 20px;
    }

    .yin-segment-horizontal[b-qgwc35qr1o] {
        width: 20px;
    }

    .yao-item-horizontal[b-qgwc35qr1o] {
        width: 160px;
    }

    .casting-section-layout[b-qgwc35qr1o] {
        gap: 10px;
    }

    .theme-dropdown[b-qgwc35qr1o] {
        min-width: 100px;
        font-size: 0.8em;
    }

    .gua-display-layout[b-qgwc35qr1o] {
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        min-width: 350px;
    }

    .trigram-display-area[b-qgwc35qr1o] {
        width: 100%;
    }

    .yao-item-horizontal[b-qgwc35qr1o] {
        width: 90px;
        padding: 3px 6px;
    }

    .yang-line-horizontal[b-qgwc35qr1o] {
        width: 35px;
    }

    .yin-line-horizontal[b-qgwc35qr1o] {
        gap: 8px;
    }

    .yin-segment-horizontal[b-qgwc35qr1o] {
        width: 10px;
    }

    /* 解卦标题行在小屏幕下的优化 */
    .interpretation-header[b-qgwc35qr1o] {
        padding: 2px 3px 2px 4px;
        gap: 4px;
        min-height: 30px;
    }

        .interpretation-header h5[b-qgwc35qr1o] {
            font-size: 1.0rem;
            gap: 2px;
        }

    .gua-preview-image[b-qgwc35qr1o],
    .gua-placeholder[b-qgwc35qr1o] {
        width: 28px;
        height: 28px;
        font-size: 1.0rem;
    }

    .gua-preview-wrapper[b-qgwc35qr1o] {
        gap: 4px;
    }
}

/* 超窄屏幕 (< 360px) */
@media (max-width: 360px) {
    .interpretation-header h5[b-qgwc35qr1o] {
        font-size: 0.9rem;
    }

    .gua-preview-image[b-qgwc35qr1o],
    .gua-placeholder[b-qgwc35qr1o] {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}
/*#endregion*/

/*#region 【动画效果】*/
@keyframes pulse-b-qgwc35qr1o {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}
/*#endregion*/

/*#region 【PDF打印样式】*/
.pdf-exporting[b-qgwc35qr1o] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

@media print, .pdf-exporting {
    .no-print[b-qgwc35qr1o],
    .btn[b-qgwc35qr1o],
    .theme-selector[b-qgwc35qr1o] {
        display: none !important;
    }

    .zhouyi-container[b-qgwc35qr1o] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .title-text[b-qgwc35qr1o] {
        font-size: 24pt !important;
    }

    .section-title[b-qgwc35qr1o] {
        font-size: 16pt !important;
    }

    .classic-text[b-qgwc35qr1o] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    .theme-dark .interpretation-content[b-qgwc35qr1o],
    .theme-dark .section-block[b-qgwc35qr1o] {
        background: white !important;
        color: black !important;
    }

    .zhouyi-page-break-before[b-qgwc35qr1o] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-qgwc35qr1o] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-qgwc35qr1o] {
        page-break-inside: avoid;
    }
}

.btn-pdf-full[b-qgwc35qr1o] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
    min-width: 140px;
}

    .btn-pdf-full:hover[b-qgwc35qr1o] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }
/*#endregion*/
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaThemeZb.razor.rz.scp.css */
/*#region 【主题变量定义】 Blazor支持#region外侧代码分组*/
/* 竹简清风主题 */
.zhouyi-container.theme-bamboo[b-74j7eelao0] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --secondary-color: #81C784;
    --accent-color: #A5D6A7;
    --tertiary-color: #4CAF50;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: #ffffff;
    --text-color: #2c3e50;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(76, 175, 80, 0.1);
    --button-info-color: #66BB6A;
    --button-secondary-color: #A5D6A7;
    --client-bg: transparent;
    --client-border: #d8e8d8;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f0f7f0;
    --interpretation-alt-color: #e8f5e9;
}

/* 默认主题 - 天地玄黄 */
.zhouyi-container[b-74j7eelao0] {
    --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
    --primary-color: #8B4513;
    --primary-light: #A0522D;
    --primary-lighter: #CD853F;
    --secondary-color: #D2691E;
    --accent-color: #CD853F;
    --tertiary-color: #8B4513;
    --border-color: #d4c6a8;
    --shadow-color: rgba(139, 69, 19, 0.08);
    --section-bg: #ffffff;
    --text-color: #5D4037;
    --secondary-text: #795548;
    --hover-bg: rgba(139, 69, 19, 0.05);
    --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
    --button-secondary-bg: rgba(160, 82, 45, 0.1);
    --button-info-color: #D2691E;
    --button-secondary-color: #CD853F;
    --client-bg: transparent;
    --client-border: #e0d6c0;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f8f6f2;
    --interpretation-alt-color: #e8dfce;
}

    /* 朱砂祥瑞主题 */
    .zhouyi-container.theme-vermillion[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000;
        --primary-light: #A52A2A;
        --primary-lighter: #CD5C5C;
        --secondary-color: #B22222;
        --accent-color: #CD5C5C;
        --tertiary-color: #C44545;
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --secondary-color: #2196F3;
        --accent-color: #42A5F5;
        --tertiary-color: #1976D2;
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --secondary-color: #AB47BC;
        --accent-color: #BA68C8;
        --tertiary-color: #8E24AA;
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 */
    .zhouyi-container.theme-golden[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B;
        --primary-light: #DAA520;
        --primary-lighter: #F4C430;
        --secondary-color: #FFC107;
        --accent-color: #FFD54F;
        --tertiary-color: #DAA520;
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037;
        --secondary-text: #795548;
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

    /* 墨韵玄烨黑色主题 */
    .zhouyi-container.theme-dark[b-74j7eelao0] {
        --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        --primary-color: #000000;
        --primary-light: #222222;
        --primary-lighter: #333333;
        --secondary-color: #444444;
        --accent-color: #555555;
        --tertiary-color: #111111;
        --border-color: #444444;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --section-bg: #f5f5f5;
        --text-color: #222222;
        --secondary-text: #444444;
        --hover-bg: rgba(0, 0, 0, 0.1);
        --button-primary-bg: linear-gradient(135deg, #333333, #555555);
        --button-secondary-bg: rgba(0, 0, 0, 0.1);
        --button-info-color: #666666;
        --button-secondary-color: #777777;
        --client-bg: #2d2d2d;
        --client-border: #444444;
        --client-text: #e0e0e0;
        --interpretation-block-bg-1: #f5f5f5;
        --interpretation-block-bg-2: #e8e8e8;
        --interpretation-alt-color: #dcdcdc;
    }
/*#endregion*/

/*#region 【主容器和基础样式】*/
.zhouyi-container[b-74j7eelao0] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}

/* 所有btn默认值：放在开始、可以被后面的覆盖 */
.btn[b-74j7eelao0] {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.0rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 100px;
    height: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .btn:hover:not(:disabled)[b-74j7eelao0] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .btn:disabled[b-74j7eelao0] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }
/*#endregion*/

/*#region 【标题区域样式】*/
.title-section[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 6px 20px 2px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 8px;
}

.head-row-section[b-74j7eelao0] {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    padding-bottom: 8px;
    margin-bottom: -4px;
    min-height: 45px;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: space-between;
    gap: 10px;
}

    .head-row-section[b-74j7eelao0]::-webkit-scrollbar {
        height: 6px;
    }

    .head-row-section[b-74j7eelao0]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .head-row-section[b-74j7eelao0]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        min-width: 60px;
    }

        .head-row-section[b-74j7eelao0]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

.title-main-group[b-74j7eelao0],
.title-center-group[b-74j7eelao0],
.Voice-controls[b-74j7eelao0] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    min-width: auto;
}

.title-main-group[b-74j7eelao0] {
    gap: 15px;
}

.title-center-group[b-74j7eelao0] {
    gap: 10px;
}

.Voice-controls[b-74j7eelao0] {
    gap: 8px;
}

.title-text[b-74j7eelao0] {
    color: white;
    margin: 0;
    font-size: clamp(1.0rem, 2.5vw, 1.4rem);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    min-width: clamp(90px, 15vw, 120px);
}

.button-group-1[b-74j7eelao0],
.button-group-2[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 100%;
    flex-wrap: nowrap;
}

.btn-hongmeng[b-74j7eelao0],
.btn-jieguo[b-74j7eelao0] {
    height: 34px !important;
    min-width: clamp(100px, 10vw, 140px);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}

.btn-hongmeng[b-74j7eelao0],
.btn-jieguo[b-74j7eelao0] {
    background: var(--button-primary-bg);
    color: white;
    margin-left: 10px;
}


.btn-compact.btn-pdf.fixed-width-btn[b-74j7eelao0] {
    border-radius: 6px;
    height: 30px;
    min-width: clamp(75px, 9vw, 90px);
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

    .btn-compact.btn-pdf.fixed-width-btn:hover[b-74j7eelao0] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

.email-send-option[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 34px;
    flex-wrap: nowrap;
}

.email-checkbox .label-text[b-74j7eelao0] {
    font-size: clamp(0.8rem, 1vw, 0.85rem);
    color: white;
    font-weight: 500;
}

.email-input[b-74j7eelao0] {
    padding: 4px 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    width: clamp(120px, 18vw, 160px);
    font-size: clamp(0.7rem, 0.9vw, 0.75rem);
    height: 28px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

    .email-input[b-74j7eelao0]::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-size: clamp(0.7rem, 0.9vw, 0.75rem);
    }

    .email-input:focus[b-74j7eelao0] {
        outline: none;
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
    }

.theme-dropdown[b-74j7eelao0] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: clamp(0.8em, 0.9vw, 1.0em);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: clamp(110px, 12vw, 140px);
    height: 32px;
}

    .theme-dropdown:hover[b-74j7eelao0] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-74j7eelao0] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-74j7eelao0] {
        background: white;
        color: var(--text-color);
    }

.Voice-controls .btn-compact-voice[b-74j7eelao0] {
    height: 28px;
    min-width: clamp(70px, 9vw, 85px);
    font-size: clamp(0.8rem, 1vw, 1.0rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    background: var(--button-primary-bg);
}

.fixed-width-btn[b-74j7eelao0] {
    min-width: 80px;
    flex-shrink: 0;
}

.fontColor-voice[b-74j7eelao0] {
    color: white !important;
    font-size: clamp(11px, 1.2vw, 13px) !important;
    padding: 0px !important;
}

.btn-toggle[b-74j7eelao0] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.live-speak-checkbox[b-74j7eelao0] {
    display: flex;
    align-items: center;
    margin-left: 5px;
    white-space: nowrap;
}

    .live-speak-checkbox .label-text[b-74j7eelao0] {
        font-size: clamp(0.7rem, 0.9vw, 0.8rem) !important;
    }



.btn-compact[b-74j7eelao0] {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 32px;
    flex-shrink: 0;
}

.btn-compact-voice[b-74j7eelao0] {
    padding: 4px 6px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 30px;
    flex-shrink: 0;
    gap:4px;
}
/*#endregion*/

/*#region 【语音设置区域样式】*/
.voice-settings-section[b-74j7eelao0] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    border: 2px solid var(--border-color);
    width: 100%;
}

.voice-controls-grid[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voice-settings-top[b-74j7eelao0] {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 1px;
    border-bottom: 1px solid var(--border-color);
}

.public-params-row[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0;
    margin-top: 4px;
    margin-bottom: 0px;
}

    .public-params-row .text-input-item[b-74j7eelao0] {
        flex: 0 0 auto;
        min-width: fit-content;
        margin-bottom: 0;
    }

    .public-params-row .text-input[b-74j7eelao0] {
        width: auto;
        min-width: 60px;
        padding: 3px 6px;
    }

    .public-params-row label[b-74j7eelao0] {
        font-size: 0.85em;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .public-params-row .btn-update[b-74j7eelao0] {
        width: auto;
        padding: 4px 8px;
        margin-left: 4px;
        flex-shrink: 0;
    }

.voice-mode-selector[b-74j7eelao0] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.checkbox-label[b-74j7eelao0] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-74j7eelao0] {
        display: none;
    }

.checkmark[b-74j7eelao0] {
    width: 20px;
    height: 20px;
    border: 4px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left:15px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-74j7eelao0] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-74j7eelao0]::after {
        content: "✓";
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

.label-text[b-74j7eelao0] {
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.0em;
}

.voice-params[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.speaker-selector[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

    .speaker-selector .voice-dropdown[b-74j7eelao0] {
        max-height: 26px;
        font-size: 0.9em;
        padding: 2px 6px;
        min-width: 150px;
        flex-shrink: 0;
    }

.voice-dropdown[b-74j7eelao0] {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    max-width: 350px;
    width: auto;
    min-width: 120px;
    flex-shrink: 1;
}

.voice-dropdown[b-74j7eelao0] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4a6fa5;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .voice-dropdown optgroup[b-74j7eelao0] {
        font-weight: bold;
        color: #4a6fa5;
        padding: 5px 0;
    }

        .voice-dropdown optgroup[label*="中文"][b-74j7eelao0] {
            color: #2e7d32;
        }

        .voice-dropdown optgroup[label*="英语"][b-74j7eelao0] {
            color: #1565c0;
        }

        .voice-dropdown optgroup[label*="方言"][b-74j7eelao0] {
            color: #6a1b9a;
        }

        .voice-dropdown optgroup[label*="多语言"][b-74j7eelao0] {
            color: #f57c00;
        }

    .voice-dropdown option[b-74j7eelao0] {
        padding: 6px 12px;
        font-size: 13px;
    }

        .voice-dropdown option:hover[b-74j7eelao0] {
            background-color: #e3f2fd;
        }

.voice-sliders-horizontal[b-74j7eelao0] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .voice-sliders-horizontal .slider-item[b-74j7eelao0] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9em;
        white-space: nowrap;
        flex-shrink: 0;
    }

        .voice-sliders-horizontal .slider-item label[b-74j7eelao0] {
            min-width: 25px;
            color: var(--secondary-text);
            font-size: 0.9em;
            white-space: nowrap;
        }

        .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0] {
            width: 80px;
            height: 6px;
            background: linear-gradient(to right, #FFD700, #FFA500);
            border-radius: 3px;
            outline: none;
            flex-shrink: 1;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0]::-webkit-slider-thumb {
                appearance: none;
                width: 16px;
                height: 16px;
                background: #FF8C00;
                border-radius: 50%;
                cursor: pointer;
                border: 2px solid #FFD700;
            }

            .voice-sliders-horizontal .slider-item input[type="range"][b-74j7eelao0]::-moz-range-thumb {
                width: 16px;
                height: 16px;
                background: #FF8C00;
                border-radius: 50%;
                cursor: pointer;
                border: 2px solid #FFD700;
            }

        .voice-sliders-horizontal .slider-item span[b-74j7eelao0] {
            min-width: 20px;
            text-align: center;
            font-size: 0.9em;
            color: #FF8C00;
            font-weight: 500;
            white-space: nowrap;
        }

.voice-text-inputs[b-74j7eelao0] {
    margin-top: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.text-inputs-grid[b-74j7eelao0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.text-input-item[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

    .text-input-item label[b-74j7eelao0] {
        font-size: 0.8em;
        color: var(--secondary-text);
        font-weight: 500;
        min-width: 80px;
        white-space: nowrap;
    }

.text-input[b-74j7eelao0] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    width: 100%;
    box-sizing: border-box;
}

    .text-input:focus[b-74j7eelao0] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.btn-update[b-74j7eelao0] {
    width: 180px;
    margin: 0 auto;
    padding: 4px 8px;
    font-size: 0.75em;
    background: var(--button-info-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    white-space: nowrap;
}

    .btn-update:hover[b-74j7eelao0] {
        background: #1976D2;
        transform: translateY(-1px);
    }
/*#endregion*/

/*#region 【起卦区域样式】*/
.casting-main-container[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 问事选择区 */
.question-section-row[b-74j7eelao0] {
    width: 100%;
    margin: 0px 0;
    min-height: 45px;
}

.function-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
    padding: 2px 0;
}

.question-section-layout[b-74j7eelao0] {
    display: flex;
    align-items: stretch;
    min-height: 40px;
    padding: 2px 0;
}

.question-title-column[b-74j7eelao0] {
    flex: 0 0 110px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 5px 2px 5px;
    margin: 4px 0px;
}

.question-options-column[b-74j7eelao0] {
    flex: 1;
    padding: 3px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-74j7eelao0] {
    color: white;
    padding: 2px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-74j7eelao0] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 2px;
}

.compact-grid[b-74j7eelao0] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start;
}

.compact-item[b-74j7eelao0] {
    flex: 0 0 auto !important;
    width: 80px !important;
    margin: 2px !important;
}

.category-item input[type="radio"][b-74j7eelao0] {
    position: absolute;
    opacity: 0;
}

.category-label[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.8rem;
    max-width: 80px;
    margin: 0 auto;
    white-space: nowrap;
}

.radio-circle[b-74j7eelao0] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-74j7eelao0]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-74j7eelao0] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-74j7eelao0] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-74j7eelao0]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-74j7eelao0] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 摇卦区 */
.casting-section-row[b-74j7eelao0] {
    width: 100%;
    margin: 0px 0;
    min-height: 70px;
}

.casting-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
    padding: 4px 0;
}

.casting-section-layout[b-74j7eelao0] {
    display: flex;
    align-items: center;
    padding: 0;
    flex-wrap: wrap;
}

.casting-title-group[b-74j7eelao0],
.casting-coins-group[b-74j7eelao0],
.casting-buttons-group[b-74j7eelao0] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.casting-title-column[b-74j7eelao0] {
    flex: 0 0 150px;
    background: var(--primary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 2px;
}

.casting-buttons-column[b-74j7eelao0] {
    flex: 0 0 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-coins-column[b-74j7eelao0] {
    flex: 1;
    padding: 5px 8px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-header[b-74j7eelao0] {
    color: white;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
}

.casting-header-content[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.draw-head[b-74j7eelao0] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.progress-badge[b-74j7eelao0] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.button-group-left[b-74j7eelao0] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.btn-touzi[b-74j7eelao0],
.btn-info-small[b-74j7eelao0] {
    background: var(--button-primary-bg);
    color: white;
}

.coins-display-center[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.coin-values-display[b-74j7eelao0] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -2px 0px 0px 0px;
}

.coin-values-row[b-74j7eelao0] {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.coin-value-badge[b-74j7eelao0] {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
}

.coin-yang[b-74j7eelao0] {
    background: var(--accent-color);
}

.coin-yin[b-74j7eelao0] {
    background: var(--primary-color);
}

.coins-container[b-74j7eelao0] {
    margin-bottom: 0;
}

.coins-row[b-74j7eelao0] {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.compact-coins[b-74j7eelao0] {
    gap: 40px !important;
}

.coin-column[b-74j7eelao0] {
    text-align: center;
}

.coin-wrapper[b-74j7eelao0] {
    margin-bottom: 6px;
}

.coin[b-74j7eelao0] {
    min-width: clamp(100px, 10vw, 140px);
    height: clamp(45px, 8vw, 60px);
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
}

.coin-hidden[b-74j7eelao0] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-74j7eelao0] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-74j7eelao0] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-74j7eelao0] {
    cursor: not-allowed;
    opacity: 0.6;
}

.coin:not(.disabled):hover[b-74j7eelao0] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}

.coin-value[b-74j7eelao0] {
    text-align: center;
}

.coin-text[b-74j7eelao0] {
    font-size: clamp(0.8rem, 1.2vw, 1.0rem);
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

.coin-symbol[b-74j7eelao0] {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
}

.coin-hidden .coin-tip[b-74j7eelao0] {
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    margin-top: 2px;
    color: white;
    font-weight: bold;
    white-space: nowrap;
}

.casting-coins-column .coins-row[b-74j7eelao0] {
    display: flex;
    justify-content: center;
    gap: clamp(40px, 8vw, 80px);
}

/* 卦象显示区 */
.display-section-row[b-74j7eelao0] {
    width: 100%;
    margin: 0px 0;
    min-height: 110px;
    padding: 0 0;
}

.display-section[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
    padding: 0px 0;
}

.display-header[b-74j7eelao0] {
    background: var(--secondary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-74j7eelao0] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        white-space: nowrap;
    }

.gua-display-container[b-74j7eelao0] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

.gua-display-layout[b-74j7eelao0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    min-height: 120px;
    flex-wrap: nowrap;
    padding: 4px 10px;
    min-width: 400px;
    overflow-x: auto;
}

.trigram-display-area[b-74j7eelao0] {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid var(--accent-color);
}

.trigram-two-column-layout[b-74j7eelao0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.trigram-label-column[b-74j7eelao0] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.yao-symbols-column[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 180px;
}

.upper-trigram-area[b-74j7eelao0] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-74j7eelao0] {
    border-left: 1px solid var(--border-color);
}

.trigram-label[b-74j7eelao0] {
    text-align: center;
    font-weight: bold;
    padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    border-radius: 15px;
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
    display: inline-block;
    color: white;
    min-width: clamp(45px, 8vw, 60px);
    white-space: normal;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.upper-label[b-74j7eelao0] {
    background: var(--primary-light);
}

.lower-label[b-74j7eelao0] {
    background: var(--tertiary-color);
}

.yao-list-horizontal[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.yao-item-horizontal[b-74j7eelao0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px);
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: clamp(100px, 15vw, 140px);
}

    .yao-item-horizontal.yang[b-74j7eelao0] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-74j7eelao0] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-74j7eelao0] {
        animation: pulse-b-74j7eelao0 2s infinite;
        border: 2px solid var(--accent-color);
    }

.yao-position-horizontal[b-74j7eelao0] {
    width: clamp(25px, 6vw, 35px);
    font-weight: bold;
    color: var(--text-color);
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    text-align: center;
    white-space: nowrap;
}

.yao-symbol-horizontal[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yang-line-horizontal[b-74j7eelao0] {
    width: clamp(35px, 8vw, 50px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-74j7eelao0] {
    display: flex;
    gap: 15px;
    align-items: center;
}

.yin-segment-horizontal[b-74j7eelao0] {
    width: clamp(10px, 3vw, 15px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-74j7eelao0] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.empty-line-horizontal[b-74j7eelao0] {
    width: 50px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}
/*#endregion*/

/*#region 【解卦区域样式 - 修复标题和缩略图同行显示】*/
.interpretation-card[b-74j7eelao0] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-74j7eelao0] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

/* 修复解卦标题行 - 确保标题和缩略图同行不换行 */
.interpretation-header[b-74j7eelao0] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 4px 6px 4px 10px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 标题在左，缩略图在右 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
    flex-wrap: nowrap; /* 禁止换行 */
    width: 100%; /* 确保占据全宽 */
    min-height: 38px; /* 固定最小高度 */
}

    .interpretation-header h5[b-74j7eelao0] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
        white-space: nowrap; /* 标题不换行 */
        flex-shrink: 0; /* 不允许收缩 */
        min-width: max-content; /* 最小宽度为内容宽度 */
    }

.interpretation-content[b-74j7eelao0] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-74j7eelao0]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-74j7eelao0] {
    padding: 4px;
}

    .interpretation-sections .section-block:nth-child(odd)[b-74j7eelao0] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-74j7eelao0] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-74j7eelao0] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-74j7eelao0] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
}

.section-header-with-toggle[b-74j7eelao0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-74j7eelao0] {
    width: 70px;
    height: 12px;
    padding: 10px;
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
}

    .toggle-btn:hover[b-74j7eelao0] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-74j7eelao0] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-74j7eelao0] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

.section-subtitle.category-title[b-74j7eelao0] {
    color: var(--tertiary-color);
}

.section-subtitle.yao-title[b-74j7eelao0] {
    color: var(--accent-color);
}

.section-subtitle.transformation-title[b-74j7eelao0] {
    color: var(--primary-lighter);
}

.section-subtitle.gua-transformation-title[b-74j7eelao0] {
    color: var(--secondary-color);
}

.section-subtitle[b-74j7eelao0] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.section-subtitle-Remark[b-74j7eelao0] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
    white-space: normal;
}

.classic-text[b-74j7eelao0] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

.gua-basic-info[b-74j7eelao0] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-74j7eelao0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-74j7eelao0] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
    white-space: nowrap;
}

.yao-ci-container[b-74j7eelao0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-74j7eelao0] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-74j7eelao0] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-74j7eelao0] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
    white-space: nowrap;
}

.yao-type-badge[b-74j7eelao0] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.yang-badge[b-74j7eelao0] {
    background: var(--primary-light);
}

.yin-badge[b-74j7eelao0] {
    background: var(--tertiary-color);
}

.yao-position[b-74j7eelao0] {
    color: var(--secondary-text);
    font-size: 0.75rem;
    white-space: nowrap;
}

.yao-content[b-74j7eelao0] {
    font-size: 0.85rem;
}

.yao-ci-text[b-74j7eelao0] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-74j7eelao0],
.changing-meaning[b-74j7eelao0] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.category-interpretation[b-74j7eelao0] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-74j7eelao0] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-74j7eelao0] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-74j7eelao0] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-74j7eelao0] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .interpretation-section p[b-74j7eelao0] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-74j7eelao0] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.luck-level2[b-74j7eelao0],
.trend-badge[b-74j7eelao0] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

.luck-level[b-74j7eelao0],
.trend-badge[b-74j7eelao0] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

    .luck-daji[b-74j7eelao0],
    .trend-badge.luck-daji[b-74j7eelao0] {
        background: #27ae60;
    }

    .luck-ji[b-74j7eelao0],
    .trend-badge.luck-ji[b-74j7eelao0] {
        background: #2ecc71;
    }

    .luck-zhongji[b-74j7eelao0],
    .trend-badge.luck-zhongji[b-74j7eelao0] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-74j7eelao0],
    .trend-badge.luck-xiaoji[b-74j7eelao0] {
        background: #e67e22;
    }

    .luck-ping[b-74j7eelao0],
    .trend-badge.luck-ping[b-74j7eelao0] {
        background: #95a5a6;
    }

    .luck-xiong[b-74j7eelao0],
    .trend-badge.luck-xiong[b-74j7eelao0] {
        background: #e74c3c;
    }

    .luck-daxiong[b-74j7eelao0],
    .trend-badge.luck-daxiong[b-74j7eelao0] {
        background: #c0392b;
    }

.trend-badge-Trend[b-74j7eelao0] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
    white-space: nowrap;
}

.loading-content[b-74j7eelao0] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-74j7eelao0] {
    width: 60px;
    height: 60px;
    border: 10px solid black;
    border-top: 1px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-74j7eelao0 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin-b-74j7eelao0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.transformations-container[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-74j7eelao0] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-74j7eelao0] {
    flex: 0 0 auto;
}

.transformation-badge[b-74j7eelao0] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.transformation-content[b-74j7eelao0] {
    flex: 1;
}

.transformation-gua[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-74j7eelao0] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-74j7eelao0] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-74j7eelao0] {
    margin-top: 4px;
}
/*#endregion*/

/*#region 【卦象图片模态和预览样式】*/
.gua-image-preview-container[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 不允许收缩 */
    white-space: nowrap; /* 内容不换行 */
    margin-left: auto; /* 右对齐 */
}

.gua-preview-wrapper[b-74j7eelao0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 卦象图片缩略图 */
.gua-preview-image[b-74j7eelao0] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    background: var(--hover-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
    flex-shrink: 0; /* 不允许收缩 */
}

    .gua-preview-image:hover[b-74j7eelao0] {
        transform: scale(1.1);
        border-color: var(--primary-light);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

/* 卦图占位符 */
.gua-placeholder[b-74j7eelao0] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: bold;
    flex-shrink: 0; /* 不允许收缩 */
}

.gua-modal-image[b-74j7eelao0] {
    max-width: 90%;
    max-height: 60vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/*#endregion*/

/*#region 【空状态样式 - 图片轮播和分割条】*/
.empty-state[b-74j7eelao0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500px);
    min-height: 120px;
    max-height: 400px;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
    overflow: hidden;
    transition: height 0.3s ease;
}

.empty-state-container[b-74j7eelao0] {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 5px;
    height: 100%;
    overflow: hidden;
}

.empty-state-image[b-74j7eelao0] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
    overflow: hidden;
}

.bordered-image[b-74j7eelao0] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state-content[b-74j7eelao0] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
    overflow: hidden;
}

.remark-content-txt[b-74j7eelao0] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: calc(100% - 50px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .remark-content-txt[b-74j7eelao0]::-webkit-scrollbar {
        display: none;
    }

.empty-icon[b-74j7eelao0] {
    font-size: 2.5em;
    margin-top: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

.carousel-container[b-74j7eelao0] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.responsive-image[b-74j7eelao0] {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

.carousel-controls[b-74j7eelao0] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

.carousel-btn-left[b-74j7eelao0],
.carousel-btn-center[b-74j7eelao0],
.carousel-btn-right[b-74j7eelao0] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-74j7eelao0] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

    .carousel-btn:active[b-74j7eelao0] {
        transform: scale(0.95);
    }

.carousel-toggle[b-74j7eelao0] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.resizer[b-74j7eelao0] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-74j7eelao0] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-74j7eelao0] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-74j7eelao0] {
    background-color: #888;
}

.empty-state-image[b-74j7eelao0],
.empty-state-content[b-74j7eelao0] {
    transition: width 0.1s ease;
    overflow: hidden;
}
/*#endregion*/

/*#region 【响应式设计优化】*/
@media (max-width: 1200px) {
    .head-row-section[b-74j7eelao0] {
        gap: 8px;
    }

    .title-main-group[b-74j7eelao0] {
        gap: 10px;
    }

    .title-center-group[b-74j7eelao0] {
        gap: 8px;
    }

    .Voice-controls[b-74j7eelao0] {
        gap: 6px;
    }
}

@media (max-width: 992px) {
    .head-row-section[b-74j7eelao0] {
        gap: 6px;
    }

    .title-main-group[b-74j7eelao0] {
        gap: 8px;
    }

    .title-center-group[b-74j7eelao0] {
        gap: 6px;
    }

    .Voice-controls[b-74j7eelao0] {
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .title-section[b-74j7eelao0] {
        padding: 4px 10px;
    }

    .head-row-section[b-74j7eelao0] {
        gap: 6px;
        padding-bottom: 6px;
    }

    .email-send-option[b-74j7eelao0] {
        flex-wrap: wrap;
        height: auto;
        min-height: 34px;
    }

    .email-input[b-74j7eelao0] {
        width: 150px;
    }

    .title-main-group[b-74j7eelao0] {
        min-width: 200px;
    }

    .title-center-group[b-74j7eelao0] {
        min-width: 350px;
        gap: 10px;
    }

    .button-group-1[b-74j7eelao0],
    .button-group-2[b-74j7eelao0] {
        gap: 5px;
    }

    .btn-hongmeng[b-74j7eelao0],
    .btn-jieguo[b-74j7eelao0] {
        min-width: 100px;
        font-size: 1.0rem;
        letter-spacing: 2px;
        padding: 2px 4px;
    }

    .btn-compact.btn-pdf.fixed-width-btn[b-74j7eelao0] {
        min-width: 70px;
        font-size: 0.8rem;
    }

    .email-input[b-74j7eelao0] {
        width: 120px;
        font-size: 0.8rem;
    }

    .Voice-controls[b-74j7eelao0] {
        min-width: 150px;
    }

    .btn-compact-voice[b-74j7eelao0] {
        min-width: 70px;
        font-size: 0.85rem;
    }

    .compact-coins[b-74j7eelao0] {
        gap: 20px !important;
    }

    .coin[b-74j7eelao0] {
        min-width: 100px;
        height: 50px;
    }

    .coin-text[b-74j7eelao0] {
        font-size: 0.9rem;
    }

    .coin-symbol[b-74j7eelao0] {
        font-size: 1.5rem;
    }

    .gua-display-layout[b-74j7eelao0] {
        flex-direction: row;
        gap: 10px;
        padding: 6px 8px;
        min-width: 350px;
    }

    .trigram-display-area[b-74j7eelao0] {
        width: 100%;
    }

    .trigram-label[b-74j7eelao0] {
        font-size: clamp(0.8rem, 1.5vw, 1.0rem);
        min-width: clamp(45px, 8vw, 60px);
        padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    }

    .yao-item-horizontal[b-74j7eelao0] {
        width: 120px;
    }

    .gua-preview-image[b-74j7eelao0] {
        width: 35px;
        height: 35px;
    }

    /* 解卦标题行在中等屏幕下的优化 */
    .interpretation-header[b-74j7eelao0] {
        padding: 3px 4px 3px 6px;
        gap: 6px;
        min-height: 34px;
    }

        .interpretation-header h5[b-74j7eelao0] {
            font-size: 1.1rem;
        }
}

@media (max-width: 480px) {
    .head-row-section[b-74j7eelao0] {
        gap: 4px;
    }

    .title-main-group[b-74j7eelao0] {
        gap: 6px;
    }

    .title-center-group[b-74j7eelao0] {
        gap: 3px;
    }

    .Voice-controls[b-74j7eelao0] {
        gap: 3px;
    }

    .theme-dropdown[b-74j7eelao0] {
        min-width: 80px;
    }

    .email-checkbox .label-text[b-74j7eelao0] {
        display: none;
    }

    .email-input[b-74j7eelao0] {
        width: 100px;
    }

    .title-text[b-74j7eelao0] {
        font-size: 1.1rem;
        min-width: 90px;
    }

    .theme-dropdown[b-74j7eelao0] {
        min-width: 100px;
    }

    .title-center-group[b-74j7eelao0] {
        min-width: 250px;
        gap: 5px;
    }

    .btn-hongmeng[b-74j7eelao0],
    .btn-jieguo[b-74j7eelao0] {
        min-width: 90px;
        font-size: 0.95rem;
        height: 32px;
        padding: 1px 3px;
    }

    .btn-compact.btn-pdf.fixed-width-btn[b-74j7eelao0] {
        min-width: 60px;
        height: 30px;
        font-size: 0.7rem;
    }

    .email-checkbox .label-text[b-74j7eelao0] {
        font-size: 0.8rem;
    }

    .email-input[b-74j7eelao0] {
        width: 100px;
        font-size: 0.7rem;
        height: 25px;
    }

    .Voice-controls[b-74j7eelao0] {
        min-width: 120px;
        gap: 5px;
    }

    .btn-compact-voice[b-74j7eelao0] {
        min-width: 60px;
        height: 28px;
        font-size: 0.8rem;
    }

    .fontColor-voice[b-74j7eelao0] {
        font-size: 11px !important;
    }

    .gua-display-layout[b-74j7eelao0] {
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        min-width: 350px;
    }

    .trigram-display-area[b-74j7eelao0] {
        width: 100%;
    }

    .yao-item-horizontal[b-74j7eelao0] {
        width: 90px;
        padding: 3px 6px;
    }

    .yang-line-horizontal[b-74j7eelao0] {
        width: 35px;
    }

    .yin-line-horizontal[b-74j7eelao0] {
        gap: 8px;
    }

    .yin-segment-horizontal[b-74j7eelao0] {
        width: 10px;
    }

    .gua-preview-image[b-74j7eelao0],
    .gua-placeholder[b-74j7eelao0] {
        width: 28px;
        height: 28px;
        font-size: 1.0rem;
    }

    .gua-preview-wrapper[b-74j7eelao0] {
        gap: 4px;
    }

    /* 解卦标题行在小屏幕下的优化 */
    .interpretation-header[b-74j7eelao0] {
        padding: 2px 3px 2px 4px;
        gap: 4px;
        min-height: 30px;
    }

        .interpretation-header h5[b-74j7eelao0] {
            font-size: 1.0rem;
            gap: 2px;
        }

    .trigram-label[b-74j7eelao0] {
        font-size: 0.8rem;
        min-width: 45px;
        padding: 2px 4px;
    }
}

/* 在超窄屏幕下的进一步优化 */
@media (max-width: 360px) {
    .interpretation-header h5[b-74j7eelao0] {
        font-size: 0.9rem; /* 进一步缩小标题字号 */
    }

    .gua-preview-image[b-74j7eelao0],
    .gua-placeholder[b-74j7eelao0] {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}
/*#endregion*/

/*#region 【PDF打印样式】*/
.pdf-exporting[b-74j7eelao0] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

@media print, .pdf-exporting {
    .no-print[b-74j7eelao0],
    .btn[b-74j7eelao0],
    .theme-selector[b-74j7eelao0] {
        display: none !important;
    }

    .zhouyi-container[b-74j7eelao0] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .title-text[b-74j7eelao0] {
        font-size: 24pt !important;
    }

    .section-title[b-74j7eelao0] {
        font-size: 16pt !important;
    }

    .classic-text[b-74j7eelao0] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    .theme-dark .interpretation-content[b-74j7eelao0],
    .theme-dark .section-block[b-74j7eelao0] {
        background: white !important;
        color: black !important;
    }

    .zhouyi-page-break-before[b-74j7eelao0] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-74j7eelao0] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-74j7eelao0] {
        page-break-inside: avoid;
    }
}

.btn-pdf-full[b-74j7eelao0] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
    min-width: 140px;
}

    .btn-pdf-full:hover[b-74j7eelao0] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }
/*#endregion*/

/*#region 【动画效果】*/
@keyframes pulse-b-74j7eelao0 {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}
/*#endregion*/
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZhouyiGuaThemeZb3.razor.rz.scp.css */
/*#region 【主题变量定义】 Blazor支持#region外侧代码分组*/
/* 竹简清风主题 */
.zhouyi-container.theme-bamboo[b-dlphrq6f08] {
    --primary-bg-gradient: linear-gradient(135deg, #f0f7f0 0%, #e8f2e8 100%);
    --primary-color: #2E7D32;
    --primary-light: #4CAF50;
    --primary-lighter: #66BB6A;
    --secondary-color: #81C784;
    --accent-color: #A5D6A7;
    --tertiary-color: #4CAF50;
    --border-color: #d8e8d8;
    --shadow-color: rgba(46, 125, 50, 0.08);
    --section-bg: #ffffff;
    --text-color: #2c3e50;
    --secondary-text: #666;
    --hover-bg: rgba(76, 175, 80, 0.05);
    --button-primary-bg: linear-gradient(135deg, #4CAF50, #66BB6A);
    --button-secondary-bg: rgba(76, 175, 80, 0.1);
    --button-info-color: #66BB6A;
    --button-secondary-color: #A5D6A7;
    --client-bg: transparent;
    --client-border: #d8e8d8;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f0f7f0;
    --interpretation-alt-color: #e8f5e9;
}

/* 默认主题 - 天地玄黄 */
.zhouyi-container[b-dlphrq6f08] {
    --primary-bg-gradient: linear-gradient(135deg, #f8f6f2 0%, #f0ece0 100%);
    --primary-color: #8B4513;
    --primary-light: #A0522D;
    --primary-lighter: #CD853F;
    --secondary-color: #D2691E;
    --accent-color: #CD853F;
    --tertiary-color: #8B4513;
    --border-color: #d4c6a8;
    --shadow-color: rgba(139, 69, 19, 0.08);
    --section-bg: #ffffff;
    --text-color: #5D4037;
    --secondary-text: #795548;
    --hover-bg: rgba(139, 69, 19, 0.05);
    --button-primary-bg: linear-gradient(135deg, #A0522D, #CD853F);
    --button-secondary-bg: rgba(160, 82, 45, 0.1);
    --button-info-color: #D2691E;
    --button-secondary-color: #CD853F;
    --client-bg: transparent;
    --client-border: #e0d6c0;
    --client-text: var(--text-color);
    --interpretation-block-bg-1: #ffffff;
    --interpretation-block-bg-2: #f8f6f2;
    --interpretation-alt-color: #e8dfce;
}

    /* 朱砂祥瑞主题 */
    .zhouyi-container.theme-vermillion[b-dlphrq6f08] {
        --primary-bg-gradient: linear-gradient(135deg, #fef7f7 0%, #fdeeee 100%);
        --primary-color: #8B0000;
        --primary-light: #A52A2A;
        --primary-lighter: #CD5C5C;
        --secondary-color: #B22222;
        --accent-color: #CD5C5C;
        --tertiary-color: #C44545;
        --border-color: #f0c8c8;
        --shadow-color: rgba(139, 0, 0, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(165, 42, 42, 0.05);
        --button-primary-bg: linear-gradient(135deg, #A52A2A, #CD5C5C);
        --button-secondary-bg: rgba(165, 42, 42, 0.1);
        --button-info-color: #B22222;
        --button-secondary-color: #CD5C5C;
        --client-bg: transparent;
        --client-border: #f0c8c8;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fef7f7;
        --interpretation-alt-color: #f8e8e8;
    }

    /* 碧海青天主题 */
    .zhouyi-container.theme-ocean[b-dlphrq6f08] {
        --primary-bg-gradient: linear-gradient(135deg, #f0f7ff 0%, #e8f2ff 100%);
        --primary-color: #1565C0;
        --primary-light: #1976D2;
        --primary-lighter: #1E88E5;
        --secondary-color: #2196F3;
        --accent-color: #42A5F5;
        --tertiary-color: #1976D2;
        --border-color: #c5daf5;
        --shadow-color: rgba(21, 101, 192, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(25, 118, 210, 0.05);
        --button-primary-bg: linear-gradient(135deg, #1976D2, #1E88E5);
        --button-secondary-bg: rgba(25, 118, 210, 0.1);
        --button-info-color: #1E88E5;
        --button-secondary-color: #42A5F5;
        --client-bg: transparent;
        --client-border: #c5daf5;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f0f7ff;
        --interpretation-alt-color: #e3f2fd;
    }

    /* 紫气东来主题 */
    .zhouyi-container.theme-purple[b-dlphrq6f08] {
        --primary-bg-gradient: linear-gradient(135deg, #f8f0ff 0%, #f0e8ff 100%);
        --primary-color: #7B1FA2;
        --primary-light: #8E24AA;
        --primary-lighter: #9C27B0;
        --secondary-color: #AB47BC;
        --accent-color: #BA68C8;
        --tertiary-color: #8E24AA;
        --border-color: #e1cfe7;
        --shadow-color: rgba(123, 31, 162, 0.08);
        --section-bg: #ffffff;
        --text-color: #2c3e50;
        --secondary-text: #666;
        --hover-bg: rgba(142, 36, 170, 0.05);
        --button-primary-bg: linear-gradient(135deg, #8E24AA, #9C27B0);
        --button-secondary-bg: rgba(142, 36, 170, 0.1);
        --button-info-color: #9C27B0;
        --button-secondary-color: #BA68C8;
        --client-bg: transparent;
        --client-border: #e1cfe7;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #f8f0ff;
        --interpretation-alt-color: #f3e5f5;
    }

    /* 金玉满堂主题 */
    .zhouyi-container.theme-golden[b-dlphrq6f08] {
        --primary-bg-gradient: linear-gradient(135deg, #fffaf0 0%, #fff5e6 100%);
        --primary-color: #B8860B;
        --primary-light: #DAA520;
        --primary-lighter: #F4C430;
        --secondary-color: #FFC107;
        --accent-color: #FFD54F;
        --tertiary-color: #DAA520;
        --border-color: #f0e0b2;
        --shadow-color: rgba(184, 134, 11, 0.08);
        --section-bg: #ffffff;
        --text-color: #5D4037;
        --secondary-text: #795548;
        --hover-bg: rgba(218, 165, 32, 0.05);
        --button-primary-bg: linear-gradient(135deg, #DAA520, #F4C430);
        --button-secondary-bg: rgba(218, 165, 32, 0.1);
        --button-info-color: #F4C430;
        --button-secondary-color: #FFD54F;
        --client-bg: transparent;
        --client-border: #f0e0b2;
        --client-text: var(--text-color);
        --interpretation-block-bg-1: #ffffff;
        --interpretation-block-bg-2: #fffaf0;
        --interpretation-alt-color: #fff8e1;
    }

    /* 墨韵玄烨黑色主题 */
    .zhouyi-container.theme-dark[b-dlphrq6f08] {
        --primary-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        --primary-color: #000000;
        --primary-light: #222222;
        --primary-lighter: #333333;
        --secondary-color: #444444;
        --accent-color: #555555;
        --tertiary-color: #111111;
        --border-color: #444444;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --section-bg: #f5f5f5;
        --text-color: #222222;
        --secondary-text: #444444;
        --hover-bg: rgba(0, 0, 0, 0.1);
        --button-primary-bg: linear-gradient(135deg, #333333, #555555);
        --button-secondary-bg: rgba(0, 0, 0, 0.1);
        --button-info-color: #666666;
        --button-secondary-color: #777777;
        --client-bg: #2d2d2d;
        --client-border: #444444;
        --client-text: #e0e0e0;
        --interpretation-block-bg-1: #f5f5f5;
        --interpretation-block-bg-2: #e8e8e8;
        --interpretation-alt-color: #dcdcdc;
    }
/*#endregion*/

/*#region 【主容器和基础样式】*/
.zhouyi-container[b-dlphrq6f08] {
    background: var(--primary-bg-gradient);
    min-height: 100%;
    width: 100%;
    padding: 0px 0px 4px 0px;
    color: var(--text-color);
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}
/*#endregion*/

/*#region 【标题区域样式】*/
.title-section[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 6px 20px 2px 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 4px;
}

.head-row-section[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    padding-bottom: 8px;
    margin-bottom: -4px;
    min-height: 45px;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: space-between;
    gap: 10px;
}

    .head-row-section[b-dlphrq6f08]::-webkit-scrollbar {
        height: 6px;
    }

    .head-row-section[b-dlphrq6f08]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .head-row-section[b-dlphrq6f08]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        min-width: 60px;
    }

        .head-row-section[b-dlphrq6f08]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

.title-main-group[b-dlphrq6f08],
.title-center-group[b-dlphrq6f08],
.Voice-controls[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    min-width: auto;
}

.title-main-group[b-dlphrq6f08] {
    gap: 15px;
}

.title-center-group[b-dlphrq6f08] {
    gap: 10px;
}

.Voice-controls[b-dlphrq6f08] {
    gap: 8px;
}

.title-text[b-dlphrq6f08] {
    color: white;
    margin: 0;
    font-size: clamp(1.0rem, 2.5vw, 1.4rem);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    min-width: clamp(90px, 15vw, 120px);
}

.button-group-1[b-dlphrq6f08],
.button-group-2[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 100%;
    flex-wrap: nowrap;
}

.btn-hongmeng[b-dlphrq6f08],
.btn-jieguo[b-dlphrq6f08] {
    height: 34px !important;
    min-width: clamp(85px, 10vw, 110px);
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    letter-spacing: 4px;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-hongmeng[b-dlphrq6f08],
.btn-jieguo[b-dlphrq6f08] {
    background: var(--button-primary-bg);
    color: white;
}

.btn-compact.btn-pdf.fixed-width-btn[b-dlphrq6f08] {
    border-radius: 6px;
    height: 30px;
    min-width: clamp(75px, 9vw, 90px);
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

    .btn-compact.btn-pdf.fixed-width-btn:hover[b-dlphrq6f08] {
        background: linear-gradient(135deg, #c82333, #e05290);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
    }

.email-send-option[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 34px;
    flex-wrap: nowrap;
}

.email-checkbox .label-text[b-dlphrq6f08] {
    font-size: clamp(0.8rem, 1vw, 0.85rem);
    color: white;
    font-weight: 500;
}

.email-input[b-dlphrq6f08] {
    padding: 4px 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    width: clamp(120px, 18vw, 160px);
    font-size: clamp(0.7rem, 0.9vw, 0.75rem);
    height: 28px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

    .email-input[b-dlphrq6f08]::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-size: clamp(0.7rem, 0.9vw, 0.75rem);
    }

    .email-input:focus[b-dlphrq6f08] {
        outline: none;
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.2);
    }

.theme-dropdown[b-dlphrq6f08] {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: clamp(0.75em, 0.9vw, 0.85em);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: clamp(100px, 12vw, 120px);
    height: 32px;
}

    .theme-dropdown:hover[b-dlphrq6f08] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-dropdown:focus[b-dlphrq6f08] {
        outline: none;
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .theme-dropdown option[b-dlphrq6f08] {
        background: white;
        color: var(--text-color);
    }

.Voice-controls .btn-compact-voice[b-dlphrq6f08] {
    height: 28px;
    min-width: clamp(70px, 9vw, 85px);
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    background: var(--button-primary-bg);
}

.fixed-width-btn[b-dlphrq6f08] {
    min-width: 80px;
    flex-shrink: 0;
}

.fontColor-voice[b-dlphrq6f08] {
    color: white !important;
    font-size: clamp(11px, 1.2vw, 13px) !important;
    padding: 0px !important;
}

.btn-toggle[b-dlphrq6f08] {
    background: var(--button-secondary-bg);
    color: #555555;
    border: 1px solid rgba(120, 120, 120, 0.3);
}

.live-speak-checkbox[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    margin-left: 5px;
    white-space: nowrap;
}

    .live-speak-checkbox .label-text[b-dlphrq6f08] {
        font-size: clamp(0.7rem, 0.9vw, 0.8rem) !important;
    }

.btn[b-dlphrq6f08] {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 100px;
    height: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .btn:hover:not(:disabled)[b-dlphrq6f08] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .btn:disabled[b-dlphrq6f08] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.btn-compact[b-dlphrq6f08] {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 32px;
    flex-shrink: 0;
}

.btn-compact-voice[b-dlphrq6f08] {
    padding: 2px 8px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    height: 30px;
    flex-shrink: 0;
}
/*#endregion*/

/*#region 【语音设置区域样式】*/
.voice-settings-section[b-dlphrq6f08] {
    background: var(--hover-bg);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 4px;
    border: 2px solid var(--border-color);
    width: 100%;
}

.voice-controls-grid[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voice-settings-top[b-dlphrq6f08] {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 1px;
    border-bottom: 1px solid var(--border-color);
}

.public-params-row[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0;
    margin-top: 4px;
    margin-bottom: 0px;
}

    .public-params-row .text-input-item[b-dlphrq6f08] {
        flex: 0 0 auto;
        min-width: fit-content;
        margin-bottom: 0;
    }

    .public-params-row .text-input[b-dlphrq6f08] {
        width: auto;
        min-width: 60px;
        padding: 3px 6px;
    }

    .public-params-row label[b-dlphrq6f08] {
        font-size: 0.85em;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .public-params-row .btn-update[b-dlphrq6f08] {
        width: auto;
        padding: 4px 8px;
        margin-left: 4px;
        flex-shrink: 0;
    }

.voice-mode-selector[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.checkbox-label[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-color);
    gap: 6px;
}

    .checkbox-label input[type="checkbox"][b-dlphrq6f08] {
        display: none;
    }

.checkmark[b-dlphrq6f08] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark[b-dlphrq6f08] {
    background: var(--primary-light);
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark[b-dlphrq6f08]::after {
        content: "✓";
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

.label-text[b-dlphrq6f08] {
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.0em;
}

.voice-params[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.speaker-selector[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

    .speaker-selector .voice-dropdown[b-dlphrq6f08] {
        max-height: 26px;
        font-size: 0.9em;
        padding: 2px 6px;
        min-width: 150px;
        flex-shrink: 0;
    }

.voice-dropdown[b-dlphrq6f08] {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    max-width: 350px;
    width: auto;
    min-width: 120px;
    flex-shrink: 1;
}

.voice-dropdown[b-dlphrq6f08] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4a6fa5;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .voice-dropdown optgroup[b-dlphrq6f08] {
        font-weight: bold;
        color: #4a6fa5;
        padding: 5px 0;
    }

        .voice-dropdown optgroup[label*="中文"][b-dlphrq6f08] {
            color: #2e7d32;
        }

        .voice-dropdown optgroup[label*="英语"][b-dlphrq6f08] {
            color: #1565c0;
        }

        .voice-dropdown optgroup[label*="方言"][b-dlphrq6f08] {
            color: #6a1b9a;
        }

        .voice-dropdown optgroup[label*="多语言"][b-dlphrq6f08] {
            color: #f57c00;
        }

    .voice-dropdown option[b-dlphrq6f08] {
        padding: 6px 12px;
        font-size: 13px;
    }

        .voice-dropdown option:hover[b-dlphrq6f08] {
            background-color: #e3f2fd;
        }

.voice-sliders-horizontal[b-dlphrq6f08] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

    .voice-sliders-horizontal .slider-item[b-dlphrq6f08] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9em;
        white-space: nowrap;
        flex-shrink: 0;
    }

        .voice-sliders-horizontal .slider-item label[b-dlphrq6f08] {
            min-width: 25px;
            color: var(--secondary-text);
            font-size: 0.9em;
            white-space: nowrap;
        }

        .voice-sliders-horizontal .slider-item input[type="range"][b-dlphrq6f08] {
            width: 80px;
            height: 6px;
            background: linear-gradient(to right, #FFD700, #FFA500);
            border-radius: 3px;
            outline: none;
            flex-shrink: 1;
        }

            .voice-sliders-horizontal .slider-item input[type="range"][b-dlphrq6f08]::-webkit-slider-thumb {
                appearance: none;
                width: 16px;
                height: 16px;
                background: #FF8C00;
                border-radius: 50%;
                cursor: pointer;
                border: 2px solid #FFD700;
            }

            .voice-sliders-horizontal .slider-item input[type="range"][b-dlphrq6f08]::-moz-range-thumb {
                width: 16px;
                height: 16px;
                background: #FF8C00;
                border-radius: 50%;
                cursor: pointer;
                border: 2px solid #FFD700;
            }

        .voice-sliders-horizontal .slider-item span[b-dlphrq6f08] {
            min-width: 20px;
            text-align: center;
            font-size: 0.9em;
            color: #FF8C00;
            font-weight: 500;
            white-space: nowrap;
        }

.voice-text-inputs[b-dlphrq6f08] {
    margin-top: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 100%;
}

.text-inputs-grid[b-dlphrq6f08] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.text-input-item[b-dlphrq6f08] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

    .text-input-item label[b-dlphrq6f08] {
        font-size: 0.8em;
        color: var(--secondary-text);
        font-weight: 500;
        min-width: 80px;
        white-space: nowrap;
    }

.text-input[b-dlphrq6f08] {
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--section-bg);
    color: var(--text-color);
    font-size: 0.75em;
    width: 100%;
    box-sizing: border-box;
}

    .text-input:focus[b-dlphrq6f08] {
        outline: none;
        border-color: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.btn-update[b-dlphrq6f08] {
    width: 180px;
    margin: 0 auto;
    padding: 4px 8px;
    font-size: 0.75em;
    background: var(--button-info-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    white-space: nowrap;
}

    .btn-update:hover[b-dlphrq6f08] {
        background: #1976D2;
        transform: translateY(-1px);
    }
/*#endregion*/

/*#region 【起卦区域样式】*/
.casting-main-container[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* 问事选择区 */
.question-section-row[b-dlphrq6f08] {
    width: 100%;
    margin: 0px 0;
    min-height: 45px;
}

.function-section[b-dlphrq6f08] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 1px solid var(--primary-lighter);
    width: 100%;
    padding: 2px 0;
}

.question-section-layout[b-dlphrq6f08] {
    display: flex;
    align-items: stretch;
    min-height: 40px;
    padding: 2px 0;
}

.question-title-column[b-dlphrq6f08] {
    flex: 0 0 110px;
    background: var(--primary-lighter);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 5px 2px 5px;
    margin: 4px 0px;
}

.question-options-column[b-dlphrq6f08] {
    flex: 1;
    padding: 3px 10px;
    display: flex;
    align-items: center;
}

.function-header[b-dlphrq6f08] {
    color: white;
    padding: 2px 0;
    border-radius: 0;
    font-weight: bold;
}

.question-section-title[b-dlphrq6f08] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    letter-spacing: 2px;
}

.compact-grid[b-dlphrq6f08] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start;
}

.compact-item[b-dlphrq6f08] {
    flex: 0 0 auto !important;
    width: 80px !important;
    margin: 2px !important;
}

.category-item input[type="radio"][b-dlphrq6f08] {
    position: absolute;
    opacity: 0;
}

.category-label[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.8rem;
    max-width: 80px;
    margin: 0 auto;
    white-space: nowrap;
}

.radio-circle[b-dlphrq6f08] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

    .radio-circle[b-dlphrq6f08]::after {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--primary-color);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: all 0.3s ease;
    }

.category-item input[type="radio"]:checked + .category-label[b-dlphrq6f08] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

    .category-item input[type="radio"]:checked + .category-label .radio-circle[b-dlphrq6f08] {
        border-color: white;
    }

        .category-item input[type="radio"]:checked + .category-label .radio-circle[b-dlphrq6f08]::after {
            transform: translate(-50%, -50%) scale(1);
            background: white;
        }

.category-label:hover[b-dlphrq6f08] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 摇卦区 */
.casting-section-row[b-dlphrq6f08] {
    width: 100%;
    margin: 0px 0;
    min-height: 70px;
}

.casting-section[b-dlphrq6f08] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--secondary-color);
    width: 100%;
    padding: 4px 0;
}

.casting-section-layout[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    padding: 0;
    flex-wrap: wrap;
}

.casting-title-group[b-dlphrq6f08],
.casting-coins-group[b-dlphrq6f08],
.casting-buttons-group[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.casting-title-column[b-dlphrq6f08] {
    flex: 0 0 150px;
    background: var(--primary-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 2px;
}

.casting-buttons-column[b-dlphrq6f08] {
    flex: 0 0 300px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-coins-column[b-dlphrq6f08] {
    flex: 1;
    padding: 5px 8px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.casting-header[b-dlphrq6f08] {
    color: white;
    padding: 0;
    border-radius: 0;
    font-weight: bold;
}

.casting-header-content[b-dlphrq6f08] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.draw-head[b-dlphrq6f08] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.progress-badge[b-dlphrq6f08] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.button-group-left[b-dlphrq6f08] {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.btn-touzi[b-dlphrq6f08],
.btn-info-small[b-dlphrq6f08] {
    background: var(--button-primary-bg);
    color: white;
}

.coins-display-center[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.coin-values-display[b-dlphrq6f08] {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 6px;
    padding: 4px 8px;
    margin: -2px 0px 0px 0px;
}

.coin-values-row[b-dlphrq6f08] {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.coin-value-badge[b-dlphrq6f08] {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
}

.coin-yang[b-dlphrq6f08] {
    background: var(--accent-color);
}

.coin-yin[b-dlphrq6f08] {
    background: var(--primary-color);
}

.coins-container[b-dlphrq6f08] {
    margin-bottom: 0;
}

.coins-row[b-dlphrq6f08] {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.compact-coins[b-dlphrq6f08] {
    gap: 40px !important;
}

.coin-column[b-dlphrq6f08] {
    text-align: center;
}

.coin-wrapper[b-dlphrq6f08] {
    margin-bottom: 6px;
}

.coin[b-dlphrq6f08] {
    min-width: clamp(80px, 10vw, 120px);
    height: clamp(35px, 8vw, 50px);
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.3);
    border: 3px solid transparent;
}

.coin-hidden[b-dlphrq6f08] {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border-color: #D2691E;
    color: #FFD700;
}

.coin-yang[b-dlphrq6f08] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FF8C00;
    color: #8B4513;
}

.coin-yin[b-dlphrq6f08] {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    border-color: #696969;
    color: #2F4F4F;
}

.coin.disabled[b-dlphrq6f08] {
    cursor: not-allowed;
    opacity: 0.6;
}

.coin:not(.disabled):hover[b-dlphrq6f08] {
    transform: scale(1.05);
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 15px var(--shadow-color), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.4);
}

.coin-value[b-dlphrq6f08] {
    text-align: center;
}

.coin-text[b-dlphrq6f08] {
    font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

.coin-symbol[b-dlphrq6f08] {
    font-size: clamp(1.0rem, 2vw, 1.5rem);
    line-height: 1;
}

.coin-hidden .coin-tip[b-dlphrq6f08] {
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
    margin-top: 2px;
    color: white;
    font-weight: bold;
    white-space: nowrap;
}

.casting-coins-column .coins-row[b-dlphrq6f08] {
    display: flex;
    justify-content: center;
    gap: clamp(40px, 8vw, 80px);
}

/* 卦象显示区 */
.display-section-row[b-dlphrq6f08] {
    width: 100%;
    margin: 0px 0;
    min-height: 110px;
    padding: 0 0;
}

.display-section[b-dlphrq6f08] {
    background: var(--section-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px var(--shadow-color);
    border: 2px solid var(--accent-color);
    width: 100%;
    padding: 0px 0;
}

.display-header[b-dlphrq6f08] {
    background: var(--secondary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}

    .display-header h3[b-dlphrq6f08] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        white-space: nowrap;
    }

.gua-display-container[b-dlphrq6f08] {
    background: white;
    border-radius: 6px;
    padding: 0px;
    border: 2px solid var(--accent-color);
    margin: 0px;
}

.gua-display-layout[b-dlphrq6f08] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    min-height: 120px;
    flex-wrap: nowrap;
    padding: 4px 10px;
    min-width: 400px;
    overflow-x: auto;
}

.trigram-display-area[b-dlphrq6f08] {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border: 2px solid var(--accent-color);
}

.trigram-two-column-layout[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.trigram-label-column[b-dlphrq6f08] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yao-symbols-column[b-dlphrq6f08] {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 180px;
}

.upper-trigram-area[b-dlphrq6f08] {
    border-right: 1px solid var(--border-color);
}

.lower-trigram-area[b-dlphrq6f08] {
    border-left: 1px solid var(--border-color);
}

.trigram-label[b-dlphrq6f08] {
    text-align: center;
    font-weight: bold;
    padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    border-radius: 15px;
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
    display: inline-block;
    color: white;
    min-width: clamp(45px, 8vw, 60px);
    white-space: normal;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.upper-label[b-dlphrq6f08] {
    background: var(--primary-light);
}

.lower-label[b-dlphrq6f08] {
    background: var(--tertiary-color);
}

.yao-list-horizontal[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.yao-item-horizontal[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px);
    border-radius: 6px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    width: clamp(100px, 15vw, 140px);
}

    .yao-item-horizontal.yang[b-dlphrq6f08] {
        background: #e3f2fd;
        border-color: var(--primary-light);
    }

    .yao-item-horizontal.yin[b-dlphrq6f08] {
        background: #fce4ec;
        border-color: var(--accent-color);
    }

    .yao-item-horizontal.changing[b-dlphrq6f08] {
        animation: pulse-b-dlphrq6f08 2s infinite;
        border: 2px solid var(--accent-color);
    }

.yao-position-horizontal[b-dlphrq6f08] {
    width: clamp(25px, 6vw, 35px);
    font-weight: bold;
    color: var(--text-color);
    font-size: clamp(0.6rem, 1.2vw, 0.75rem);
    text-align: center;
    white-space: nowrap;
}

.yao-symbol-horizontal[b-dlphrq6f08] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.yang-line-horizontal[b-dlphrq6f08] {
    width: clamp(35px, 8vw, 50px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.yin-line-horizontal[b-dlphrq6f08] {
    display: flex;
    gap: 15px;
    align-items: center;
}

.yin-segment-horizontal[b-dlphrq6f08] {
    width: clamp(10px, 3vw, 15px);
    height: 6px;
    background: #000;
    border-radius: 3px;
}

.changing-indicator-horizontal[b-dlphrq6f08] {
    position: absolute;
    top: -8px;
    right: 10px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.empty-line-horizontal[b-dlphrq6f08] {
    width: 50px;
    height: 6px;
    background: #ecf0f1;
    border-radius: 3px;
    border: 1px dashed var(--border-color);
}
/*#endregion*/

/*#region 【解卦区域样式】*/
.interpretation-card[b-dlphrq6f08] {
    background: var(--section-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
    border: 2px solid var(--tertiary-color);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .interpretation-card:hover[b-dlphrq6f08] {
        box-shadow: 0 4px 12px var(--shadow-color);
    }

.interpretation-header[b-dlphrq6f08] {
    background: var(--tertiary-color);
    flex-shrink: 0;
    padding: 6px 6px 8px 3px;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid;
    font-size: 0.9rem;
}

    .interpretation-header h5[b-dlphrq6f08] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 1.2rem;
        white-space: nowrap;
    }

.interpretation-content[b-dlphrq6f08] {
    flex: 1;
    overflow-y: auto;
    background: var(--hover-bg);
    padding: 4px 10px 0px 5px;
}

    .interpretation-content[b-dlphrq6f08]::-webkit-scrollbar {
        width: 6px;
    }

    .interpretation-content[b-dlphrq6f08]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .interpretation-content[b-dlphrq6f08]::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 3px;
    }

        .interpretation-content[b-dlphrq6f08]::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

.interpretation-sections[b-dlphrq6f08] {
    padding: 4px;
}

    .interpretation-sections .section-block:nth-child(odd)[b-dlphrq6f08] {
        background: var(--interpretation-block-bg-1);
        border-left-color: var(--tertiary-color);
    }

    .interpretation-sections .section-block:nth-child(even)[b-dlphrq6f08] {
        background: var(--interpretation-block-bg-2);
        border-left-color: var(--accent-color);
    }

.section-block[b-dlphrq6f08] {
    margin-bottom: 10px;
    padding: 5px 12px 5px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.section-title[b-dlphrq6f08] {
    color: var(--accent-color);
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
}

.section-header-with-toggle[b-dlphrq6f08] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
}

.toggle-btn[b-dlphrq6f08] {
    width: 70px;
    height: 12px;
    padding: 10px;
    background-color: var(--button-secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
}

    .toggle-btn:hover[b-dlphrq6f08] {
        background: var(--hover-bg);
        border-color: var(--primary-light);
    }

    .toggle-btn.expanded[b-dlphrq6f08] {
        background: var(--button-secondary-bg);
        border-color: var(--tertiary-color);
    }

    .toggle-btn.collapsed[b-dlphrq6f08] {
        background: var(--button-secondary-bg);
        border-color: var(--accent-color);
    }

.section-subtitle.category-title[b-dlphrq6f08] {
    color: var(--tertiary-color);
}

.section-subtitle.yao-title[b-dlphrq6f08] {
    color: var(--accent-color);
}

.section-subtitle.transformation-title[b-dlphrq6f08] {
    color: var(--primary-lighter);
}

.section-subtitle.gua-transformation-title[b-dlphrq6f08] {
    color: var(--secondary-color);
}

.section-subtitle[b-dlphrq6f08] {
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1rem;
    padding-left: 8px;
    background: var(--hover-bg);
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.section-subtitle-Remark[b-dlphrq6f08] {
    font-size: 0.95rem;
    padding: 6px 8px;
    color: var(--secondary-text);
    white-space: normal;
}

.classic-text[b-dlphrq6f08] {
    color: var(--secondary-text);
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0rem;
    background: var(--hover-bg);
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
    min-width: 200px;
}

.gua-basic-info[b-dlphrq6f08] {
    margin: -5px 12px 0px 12px;
}

.info-grid[b-dlphrq6f08] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-item[b-dlphrq6f08] {
    padding: 2px 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 2px solid var(--primary-light);
    font-size: 1.0rem;
    word-wrap: break-word;
    min-width: 150px;
    text-align: center;
    flex: 1;
    max-width: calc(25% - 8px);
    white-space: nowrap;
}

.yao-ci-container[b-dlphrq6f08] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.yao-item[b-dlphrq6f08] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
    transition: all 0.3s ease;
}

    .yao-item.changing-yao[b-dlphrq6f08] {
        border: 2px solid var(--accent-color);
        background: #fff3e0;
    }

.yao-header[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.yao-name[b-dlphrq6f08] {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 0.9rem;
    white-space: nowrap;
}

.yao-type-badge[b-dlphrq6f08] {
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.yang-badge[b-dlphrq6f08] {
    background: var(--primary-light);
}

.yin-badge[b-dlphrq6f08] {
    background: var(--tertiary-color);
}

.yao-position[b-dlphrq6f08] {
    color: var(--secondary-text);
    font-size: 0.75rem;
    white-space: nowrap;
}

.yao-content[b-dlphrq6f08] {
    font-size: 0.85rem;
}

.yao-ci-text[b-dlphrq6f08] {
    margin-bottom: 6px;
    line-height: 1.5;
}

.yao-explanation[b-dlphrq6f08],
.changing-meaning[b-dlphrq6f08] {
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.category-interpretation[b-dlphrq6f08] {
    border-left-color: var(--secondary-color) !important;
}

.category-content[b-dlphrq6f08] {
    background: var(--hover-bg);
    padding: 10px;
    border-radius: 4px;
}

.interpretation-section[b-dlphrq6f08] {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

    .interpretation-section:last-child[b-dlphrq6f08] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .interpretation-section h6[b-dlphrq6f08] {
        color: var(--tertiary-color);
        margin-bottom: 4px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .interpretation-section p[b-dlphrq6f08] {
        color: var(--secondary-text);
        line-height: 1.6;
        margin: 0;
        font-size: 0.9rem;
    }

.luck-trend[b-dlphrq6f08] {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.luck-level2[b-dlphrq6f08],
.trend-badge[b-dlphrq6f08] {
    font-weight: bold;
    padding: 3px 3px 3px 7px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

.luck-level[b-dlphrq6f08],
.trend-badge[b-dlphrq6f08] {
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 5px;
    white-space: nowrap;
}

    .luck-daji[b-dlphrq6f08],
    .trend-badge.luck-daji[b-dlphrq6f08] {
        background: #27ae60;
    }

    .luck-ji[b-dlphrq6f08],
    .trend-badge.luck-ji[b-dlphrq6f08] {
        background: #2ecc71;
    }

    .luck-zhongji[b-dlphrq6f08],
    .trend-badge.luck-zhongji[b-dlphrq6f08] {
        background: #f39c12;
        color: #000;
    }

    .luck-xiaoji[b-dlphrq6f08],
    .trend-badge.luck-xiaoji[b-dlphrq6f08] {
        background: #e67e22;
    }

    .luck-ping[b-dlphrq6f08],
    .trend-badge.luck-ping[b-dlphrq6f08] {
        background: #95a5a6;
    }

    .luck-xiong[b-dlphrq6f08],
    .trend-badge.luck-xiong[b-dlphrq6f08] {
        background: #e74c3c;
    }

    .luck-daxiong[b-dlphrq6f08],
    .trend-badge.luck-daxiong[b-dlphrq6f08] {
        background: #c0392b;
    }

.trend-badge-Trend[b-dlphrq6f08] {
    font-weight: bold;
    padding: 4px 10px 4px 15px;
    border-radius: 12px;
    color: white;
    font-size: 1.0rem;
    letter-spacing: 5px;
    background: var(--accent-color);
    white-space: nowrap;
}

.loading-content[b-dlphrq6f08] {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.spinner[b-dlphrq6f08] {
    width: 60px;
    height: 60px;
    border: 10px solid black;
    border-top: 1px solid var(--accent-color);
    border-radius: 50%;
    animation: spin-b-dlphrq6f08 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin-b-dlphrq6f08 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.transformations-container[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.transformation-item[b-dlphrq6f08] {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

.transformation-type[b-dlphrq6f08] {
    flex: 0 0 auto;
}

.transformation-badge[b-dlphrq6f08] {
    background: var(--accent-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.transformation-content[b-dlphrq6f08] {
    flex: 1;
}

.transformation-gua[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.gua-symbol[b-dlphrq6f08] {
    font-size: 1.2rem;
    font-weight: bold;
}

.transformation-desc[b-dlphrq6f08] {
    color: var(--secondary-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.changing-yaos[b-dlphrq6f08] {
    margin-top: 4px;
}
/*#endregion*/

/*#region 【空状态样式 - 图片轮播和分割条】*/
.empty-state[b-dlphrq6f08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 500px);
    min-height: 120px;
    max-height: 400px;
    padding: 5px 10px;
    text-align: center;
    color: #888;
    flex: 1;
    overflow: hidden;
    transition: height 0.3s ease;
}

.empty-state-container[b-dlphrq6f08] {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 5px;
    height: 100%;
    overflow: hidden;
}

.empty-state-image[b-dlphrq6f08] {
    flex: 0 0 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
    height: 100%;
    max-height: 100%;
    min-width: 200px;
    max-width: 80%;
    overflow: hidden;
}

.bordered-image[b-dlphrq6f08] {
    border: 6px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state-content[b-dlphrq6f08] {
    flex: 0 0 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    min-width: 100px;
    padding: 5px;
    overflow: hidden;
}

.remark-content-txt[b-dlphrq6f08] {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    margin-top: 5px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(76, 175, 80, 0.1);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 1.0em;
    white-space: pre-wrap;
    text-align: left;
    max-height: calc(100% - 50px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .remark-content-txt[b-dlphrq6f08]::-webkit-scrollbar {
        display: none;
    }

.empty-icon[b-dlphrq6f08] {
    font-size: 2.5em;
    margin-top: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

.carousel-container[b-dlphrq6f08] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.responsive-image[b-dlphrq6f08] {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

.carousel-controls[b-dlphrq6f08] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    z-index: 10;
    box-sizing: border-box;
}

.carousel-btn-left[b-dlphrq6f08],
.carousel-btn-center[b-dlphrq6f08],
.carousel-btn-right[b-dlphrq6f08] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn[b-dlphrq6f08] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
}

    .carousel-btn:active[b-dlphrq6f08] {
        transform: scale(0.95);
    }

.carousel-toggle[b-dlphrq6f08] {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.resizer[b-dlphrq6f08] {
    width: 20px;
    background-color: #f0f0f0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s;
    z-index: 20;
}

    .resizer:hover[b-dlphrq6f08] {
        background-color: #e0e0e0;
    }

.resizer-handle[b-dlphrq6f08] {
    width: 8px;
    height: 30px;
    background-color: #ccc;
    border-radius: 2px;
}

.resizer:hover .resizer-handle[b-dlphrq6f08] {
    background-color: #888;
}

.empty-state-image[b-dlphrq6f08],
.empty-state-content[b-dlphrq6f08] {
    transition: width 0.1s ease;
    overflow: hidden;
}
/*#endregion*/

/*#region 【卦象图片模态和预览样式】*/
.gua-image-preview-container[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 8px;
    flex-shrink: 0;
}

.gua-preview-wrapper[b-dlphrq6f08] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gua-preview-image[b-dlphrq6f08] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: cover;
    background: var(--hover-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
}

    .gua-preview-image:hover[b-dlphrq6f08] {
        transform: scale(1.1);
        border-color: var(--primary-light);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

.gua-placeholder[b-dlphrq6f08] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
}

.gua-modal-image[b-dlphrq6f08] {
    max-width: 90%;
    max-height: 60vh;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/*#endregion*/

/*#region 【响应式设计】*/
@media (max-width: 1200px) {
    .head-row-section[b-dlphrq6f08] {
        gap: 8px;
    }

    .title-main-group[b-dlphrq6f08] {
        gap: 10px;
    }

    .title-center-group[b-dlphrq6f08] {
        gap: 8px;
    }

    .Voice-controls[b-dlphrq6f08] {
        gap: 6px;
    }
}

@media (max-width: 992px) {
    .head-row-section[b-dlphrq6f08] {
        gap: 6px;
    }

    .title-main-group[b-dlphrq6f08] {
        gap: 8px;
    }

    .title-center-group[b-dlphrq6f08] {
        gap: 6px;
    }

    .Voice-controls[b-dlphrq6f08] {
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .title-section[b-dlphrq6f08] {
        padding: 4px 10px;
    }

    .head-row-section[b-dlphrq6f08] {
        gap: 6px;
        padding-bottom: 6px;
    }

    .email-send-option[b-dlphrq6f08] {
        flex-wrap: wrap;
        height: auto;
        min-height: 34px;
    }

    .email-input[b-dlphrq6f08] {
        width: 150px;
    }

    .title-main-group[b-dlphrq6f08] {
        min-width: 200px;
    }

    .title-center-group[b-dlphrq6f08] {
        min-width: 350px;
        gap: 10px;
    }

    .button-group-1[b-dlphrq6f08],
    .button-group-2[b-dlphrq6f08] {
        gap: 5px;
    }

    .btn-hongmeng[b-dlphrq6f08],
    .btn-jieguo[b-dlphrq6f08] {
        min-width: 90px;
        font-size: 0.8rem;
        letter-spacing: 2px;
        padding: 2px 4px;
    }

    .btn-compact.btn-pdf.fixed-width-btn[b-dlphrq6f08] {
        min-width: 70px;
        font-size: 0.8rem;
    }

    .email-input[b-dlphrq6f08] {
        width: 120px;
        font-size: 0.8rem;
    }

    .Voice-controls[b-dlphrq6f08] {
        min-width: 150px;
    }

    .btn-compact-voice[b-dlphrq6f08] {
        min-width: 70px;
        font-size: 0.8rem;
    }

    .compact-coins[b-dlphrq6f08] {
        gap: 20px !important;
    }

    .coin[b-dlphrq6f08] {
        min-width: 80px;
        height: 40px;
    }

    .coin-text[b-dlphrq6f08] {
        font-size: 0.7rem;
    }

    .coin-symbol[b-dlphrq6f08] {
        font-size: 1.2rem;
    }

    .gua-display-layout[b-dlphrq6f08] {
        flex-direction: row;
        gap: 10px;
        padding: 6px 8px;
        min-width: 350px;
    }

    .trigram-display-area[b-dlphrq6f08] {
        width: 100%;
    }

    .trigram-label[b-dlphrq6f08] {
        font-size: clamp(0.8rem, 1.5vw, 1.0rem);
        min-width: clamp(45px, 8vw, 60px);
        padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px);
    }

    .yao-item-horizontal[b-dlphrq6f08] {
        width: 120px;
    }

    .gua-preview-image[b-dlphrq6f08] {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .head-row-section[b-dlphrq6f08] {
        gap: 4px;
    }

    .title-main-group[b-dlphrq6f08] {
        gap: 6px;
    }

    .title-center-group[b-dlphrq6f08] {
        gap: 3px;
    }

    .Voice-controls[b-dlphrq6f08] {
        gap: 3px;
    }

    .theme-dropdown[b-dlphrq6f08] {
        min-width: 80px;
    }

    .email-checkbox .label-text[b-dlphrq6f08] {
        display: none;
    }

    .email-input[b-dlphrq6f08] {
        width: 100px;
    }

    .title-text[b-dlphrq6f08] {
        font-size: 1.1rem;
        min-width: 90px;
    }

    .theme-dropdown[b-dlphrq6f08] {
        min-width: 100px;
    }

    .title-center-group[b-dlphrq6f08] {
        min-width: 250px;
        gap: 5px;
    }

    .btn-hongmeng[b-dlphrq6f08],
    .btn-jieguo[b-dlphrq6f08] {
        min-width: 70px;
        font-size: 0.7rem;
        height: 32px;
        padding: 1px 3px;
    }

    .btn-compact.btn-pdf.fixed-width-btn[b-dlphrq6f08] {
        min-width: 60px;
        height: 30px;
        font-size: 0.7rem;
    }

    .email-checkbox .label-text[b-dlphrq6f08] {
        font-size: 0.8rem;
    }

    .email-input[b-dlphrq6f08] {
        width: 100px;
        font-size: 0.7rem;
        height: 25px;
    }

    .Voice-controls[b-dlphrq6f08] {
        min-width: 120px;
        gap: 5px;
    }

    .btn-compact-voice[b-dlphrq6f08] {
        min-width: 60px;
        height: 28px;
        font-size: 0.7rem;
    }

    .fontColor-voice[b-dlphrq6f08] {
        font-size: 11px !important;
    }

    .gua-display-layout[b-dlphrq6f08] {
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        min-width: 350px;
    }

    .trigram-display-area[b-dlphrq6f08] {
        width: 100%;
    }

    .yao-item-horizontal[b-dlphrq6f08] {
        width: 90px;
        padding: 3px 6px;
    }

    .yang-line-horizontal[b-dlphrq6f08] {
        width: 35px;
    }

    .yin-line-horizontal[b-dlphrq6f08] {
        gap: 8px;
    }

    .yin-segment-horizontal[b-dlphrq6f08] {
        width: 10px;
    }

    .gua-preview-image[b-dlphrq6f08] {
        width: 30px;
        height: 30px;
        border-width: 1px;
    }

    .gua-preview-wrapper[b-dlphrq6f08] {
        gap: 4px;
    }

    .trigram-label[b-dlphrq6f08] {
        font-size: 0.8rem;
        min-width: 45px;
        padding: 2px 4px;
    }
}
/*#endregion*/

/*#region 【PDF打印样式】*/
.pdf-exporting[b-dlphrq6f08] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

@media print, .pdf-exporting {
    .no-print[b-dlphrq6f08],
    .btn[b-dlphrq6f08],
    .theme-selector[b-dlphrq6f08] {
        display: none !important;
    }

    .zhouyi-container[b-dlphrq6f08] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .title-text[b-dlphrq6f08] {
        font-size: 24pt !important;
    }

    .section-title[b-dlphrq6f08] {
        font-size: 16pt !important;
    }

    .classic-text[b-dlphrq6f08] {
        font-size: 11pt !important;
        line-height: 1.6 !important;
    }

    .theme-dark .interpretation-content[b-dlphrq6f08],
    .theme-dark .section-block[b-dlphrq6f08] {
        background: white !important;
        color: black !important;
    }

    .zhouyi-page-break-before[b-dlphrq6f08] {
        page-break-before: always;
    }

    .zhouyi-page-break-after[b-dlphrq6f08] {
        page-break-after: always;
    }

    .zhouyi-page-break-avoid[b-dlphrq6f08] {
        page-break-inside: avoid;
    }
}

.btn-pdf-full[b-dlphrq6f08] {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
    font-size: 1.1rem;
    letter-spacing: 4px;
    padding: 4px 14px;
    font-weight: 700;
    min-width: 140px;
}

    .btn-pdf-full:hover[b-dlphrq6f08] {
        background: linear-gradient(135deg, #c82333, #e05290);
    }
/*#endregion*/

/*#region 【动画效果】*/
@keyframes pulse-b-dlphrq6f08 {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}
/*#endregion*/
/* _content/LEAFBlazorApp25/Components/IChing/Zhouyi/ZyGuaCountAnl.razor.rz.scp.css */
/* 总体布局 */
.gua-count-analysis[b-ty9cnc3iby] {
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    font-family: 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 标题样式 */
.section-title[b-ty9cnc3iby] {
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.page-title[b-ty9cnc3iby] {
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 700;
    color: #2c3e50;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 1.3rem;
}

/* 表格区域样式 */
.table-section[b-ty9cnc3iby] {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 重要：允许内部滚动 */
}

.table-container[b-ty9cnc3iby] {
    overflow: auto;
    flex: 1;
}

    /* 自定义滚动条 */
    .table-container[b-ty9cnc3iby]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .table-container[b-ty9cnc3iby]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    .table-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 6px;
    }

        .table-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

.data-table[b-ty9cnc3iby] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 600px;
}

    .data-table th[b-ty9cnc3iby] {
        background: #2c3e50;
        color: white;
        padding: 0.4rem 0.3rem;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 10;
        font-weight: 600;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .data-table td[b-ty9cnc3iby] {
        padding: 0.3rem 0.2rem;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
        font-family: 'SimSun', '宋体', serif;
    }

    .data-table tr:nth-child(even)[b-ty9cnc3iby] {
        background-color: #f8f9fa;
    }

    .data-table tr:hover[b-ty9cnc3iby] {
        background-color: #e3f2fd;
    }

.summary-row[b-ty9cnc3iby] {
    background-color: #e8f5e8 !important;
    font-weight: 600;
    font-family: 'Microsoft YaHei', sans-serif;
}

/* 紧凑的列宽 */
.col-sequence[b-ty9cnc3iby] {
    width: 60px;
}

.col-name[b-ty9cnc3iby] {
    width: 80px;
}

.col-symbol[b-ty9cnc3iby] {
    width: 70px;
}

.col-unicode[b-ty9cnc3iby] {
    width: 80px;
}

.col-count[b-ty9cnc3iby] {
    width: 70px;
}

.col-count-pct[b-ty9cnc3iby] {
    width: 70px;
}

.col-use-count[b-ty9cnc3iby] {
    width: 90px;
}

.col-use-count-pct[b-ty9cnc3iby] {
    width: 70px;
}

/* 图表区域样式 */
.chart-section[b-ty9cnc3iby] {
    height: 35%; /* 页面高度的四分之一 */
    min-height: 200px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
}

.chart-container[b-ty9cnc3iby] {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.chart-bars-container[b-ty9cnc3iby] {
    min-width: 1200px; /* 确保有足够宽度显示所有柱子 */
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    /* 修改底部padding为50px，为下移的标签留出空间，同时Y轴的bottom也要同步修改 */
    padding: 0 0.5rem 50px 40px; /* 底部留空间给X轴标签 - 从30px增加到50px */
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    position: relative;
}

.chart-bar[b-ty9cnc3iby] {
    flex: 1;
    background: linear-gradient(to top, #4CAF50, #8BC34A);
    position: relative;
    transition: all 0.3s ease;
    min-width: 10px;
    max-width: 20px;
}

    .chart-bar:hover[b-ty9cnc3iby] {
        background: linear-gradient(to top, #2196F3, #64B5F6);
        transform: scale(1.05);
    }

.bar-label[b-ty9cnc3iby] {
    position: absolute;
    bottom: -45px; /* 增加与柱子的间距 */
    left: -5%; /* 向左移动 */
    transform: translateX(-50%) rotate(-45deg);
    font-size: 0.75rem;
    white-space: nowrap;
    color: #333;
    font-family: 'SimSun', '宋体', serif;
    font-weight: normal; /* 不加粗 */
    transform-origin: top left;
}

.bar-value[b-ty9cnc3iby] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: normal; /* 不加粗 */
    color: #333;
    font-family: 'SimSun', '宋体', serif;
}

.y-axis[b-ty9cnc3iby] {
    position: absolute;
    left: 0;
    top: 0;
    /* 同步修改：Y轴底部位置与chart-bars-container的padding-bottom保持一致 */
    bottom: 50px; /* 从40px增加到50px，与padding-bottom同步 */
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 5px;
}

.y-tick[b-ty9cnc3iby] {
    font-size: 0.7rem;
    color: #666;
    text-align: right;
    font-family: 'SimSun', '宋体', serif;
}

/* 水平滚动条样式 */
.chart-container[b-ty9cnc3iby]::-webkit-scrollbar {
    height: 10px;
}

.chart-container[b-ty9cnc3iby]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.chart-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
}

    .chart-container[b-ty9cnc3iby]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 加载状态 */
.loading[b-ty9cnc3iby] {
    text-align: center;
    padding: 1rem;
    color: #666;
    font-family: 'Microsoft YaHei', sans-serif;
}

.error[b-ty9cnc3iby] {
    color: #d32f2f;
    text-align: center;
    padding: 1rem;
    background: #ffebee;
    border-radius: 4px;
    margin: 0.5rem 0;
    font-family: 'Microsoft YaHei', sans-serif;
}
/* _content/LEAFBlazorApp25/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==================== ��һ���֣�ȫ��CSS�������� ==================== */
/* ������������ʹ�õĹؼ��ߴ��������ɫ����������ͳһ�޸ĺ�ά�� */
:root[b-h9f3kgv5lw], html[b-h9f3kgv5lw], body[b-h9f3kgv5lw] {
    /* ���ֳߴ���� */
    --header-height: 40px !important; /* ҳü����߶� */
    --footer-height: 25px !important; /* ҳ������߶� */
    --header-image-height: 58px !important; /* ҳü����ͼƬ�ο��߶� */
    /* ������ɫ����������ֵ��JavaScript��̬���ã� */
    --theme-primary:;
    --theme-secondary:;
    --theme-hover:;
    --theme-active:;
    --theme-section-bg:;
    --theme-section-border:;
    --theme-section-header-bg:;
    --theme-header-bg:;
    --theme-footer-bg:;
    --theme-header-text:;
    --theme-footer-text:;
    --theme-admin-header-bg:;
    --theme-admin-header-text:;
    --theme-nav-text:;
    --theme-nav-text-hover:;
    --theme-section-text:;
}

/* �ڲ�����������������������ȷ����Ԫ������ȷ�̳� */
.page[b-h9f3kgv5lw], .main-container[b-h9f3kgv5lw] {
    --header-height: 40px !important;
    --footer-height: 25px !important;
}

/* ==================== �ڶ����֣���Ҫҳ�沼�ֽṹ ==================== */

/* ҳ�������������Flexbox��ֱ���֣�ռ�������ӿ� */
.page[b-h9f3kgv5lw] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh; /* �ӿڸ߶� */
    overflow: hidden; /* ����������� */
}

/* �������ʽ���̶���ȣ�ȫ�߶ȣ����䱳�� */
.sidebar[b-h9f3kgv5lw] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    height: 100vh;
    overflow-y: hidden; /* ���ش�ֱ������ */
    overflow-x: hidden; /* ����ˮƽ������ */
    z-index: 111; /* ���öѵ�˳�� */
}

    /* ������ڲ������������������ݴ�ֱ���� */
    .sidebar[b-h9f3kgv5lw]  .scroll-container {
        height: 100vh;
        overflow-y: auto; /* �����ֱ���� */
        overflow-x: hidden;
    }

/* ����������ռ��ʣ�����пռ� */
main[b-h9f3kgv5lw] {
    flex: 1; /* ������չ���� */
}

/* ��������ȫ�߶ȣ���Զ�λ */
.main-container[b-h9f3kgv5lw] {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* �ɹ�����������������ҳüҲҳ�š�����߶��Աܿ�ҳüҳ�� */
.scrollable-content[b-h9f3kgv5lw] {
    /* ���������ҳüҳ�ŵľ��� */
/*    margin-top: var(--header-height) !important;
    margin-bottom: var(--footer-height) !important;*/
    height: calc(100vh - (var(--header-height) + var(--footer-height))) !important;
    overflow-y: auto; /* �����ֱ���� */
    overflow-x: hidden;
}

/* ==================== �������֣�ҳü��ҳ����ʽ ==================== */

/* ���������л�����ʽ */
.top-row[b-h9f3kgv5lw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end; /* ���ݿ��Ҷ��� */
    height: 3.5rem;
    display: flex;
    align-items: center; /* ��ֱ���� */
}

    /* �������ڵ����ӺͰ�ť������ʽ */
    .top-row[b-h9f3kgv5lw]  a, .top-row[b-h9f3kgv5lw]  .btn-link {
        white-space: nowrap; /* ��ֹ�ı����� */
        margin-left: 1.5rem;
        text-decoration: none; /* ȥ���»��� */
    }

        /* ������ͣЧ�� */
        .top-row[b-h9f3kgv5lw]  a:hover, .top-row[b-h9f3kgv5lw]  .btn-link:hover {
            text-decoration: underline;
        }

        /* ��һ���������⴦��������ʾʡ�Ժ� */
        .top-row[b-h9f3kgv5lw]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis; /* �ı����ʱ��ʾʡ�Ժ� */
        }

/* �̶�ҳü��ʹ�ù̶���λ��ʼ��ͣ���ڶ��� */
.fixed-header[b-h9f3kgv5lw] {
    position: fixed;
    top: 0;
    left: 220px; /* ����������� */
    right: 0;
    z-index: 1000; /* ȷ�������ϲ� */
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    pointer-events: none; /* ��������͸ */
}

    /* �ָ�ҳü�����ֵĽ������� */
    .fixed-header .HeadText-Move[b-h9f3kgv5lw] {
        pointer-events: auto;
    }

/* �����ġ�ҳü������ʽ�����ñ���ͼƬ��ʾ��ʽ */
.main-header[b-h9f3kgv5lw] {
    background-color: var(--theme-header-bg) !important;
    /* ����ͼƬ���߶ȳ�������(100%)����Ȱ�ԭͼ�����Զ�����(auto) */
    background-image: url('/Logo/HeadAI.jpg') !important;
    background-size: auto 100% !important;
    background-position: 0 0 !important;
    /* �����ظ��������ظ�������ȴ���ͼƬ������ */
    background-repeat: repeat !important;
    background-blend-mode: overlay; /* �������ģʽ */
}

/* ҳü������ʽ�����Ʋ��֣��Ƴ��˱��������Ա��⸲�� */
.top-row.px-4.main-header[b-h9f3kgv5lw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* �������ݻ��� */
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    background-color: var(--theme-header-bg) !important;
    /* ע�⣺�˴��Ƴ������б���ͼƬ������ԣ�������.main-header��ͻ */
}

/* ҳü����������ʽ */
.HeadText-Move[b-h9f3kgv5lw] {
    width: 100%;
    overflow: hidden;
    flex: 1; /* ������չ��ռ�ݿ��ÿռ� */
    padding: 0 20px;
    color: var(--theme-header-text, #FFD700) !important;
    font-family: 'Microsoft YaHei';
    position: relative;
    z-index: 1; /* ȷ���ڱ���֮�� */
    word-wrap: break-word; /* ��������ʻ��� */
    line-height: 1.4;
    max-height: var(--header-height) !important;
    min-height: var(--header-height) !important;

    font-size: 20px !important; /* �̶���С��ʹ��!importantȷ�����ȼ� */
    font-weight: bold !important; /* ���壬ʹ��!importantȷ�����ȼ� */
    white-space: nowrap !important; /* ���ؼ���ǿ�Ʋ����� normal; �������ֻ��� */
    overflow: hidden !important; /* ����������ı� */
    text-overflow: ellipsis !important; /* ������ı���ʾΪʡ�Ժ� */
    text-align: center; /* ����ˮƽ���У�flex�����ڴ����Կ��ܸ�����Ч�� */
    /* ����flex����ȷ������������ˮƽ�ʹ�ֱ���� */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* �����ġ�ҳ����ʽ���̶��ײ���������ʾ����ˮƽ���� */
.app-footer[b-h9f3kgv5lw] {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    min-height: var(--footer-height) !important;
    height: var(--footer-height) !important;
    z-index: 90;
    background-color: var(--theme-footer-bg) !important;
    font-size: 12px;
    color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Ԫ�ؼ�� */
    flex-wrap: nowrap !important; /* ��ֹ���� */
    pointer-events: none;
    overflow-x: auto !important; /* ����ˮƽ���� */
    overflow-y: hidden !important;
    white-space: nowrap !important; /* ��ֹ�ı����� */
    padding: 0 15px;
    border-top: 1px solid var(--theme-section-border) !important;
}

    /* ҳ���ڽ���Ԫ�أ��ָ�������� */
    .app-footer a[b-h9f3kgv5lw], .app-footer i[b-h9f3kgv5lw], .app-footer span[b-h9f3kgv5lw] {
        pointer-events: auto;
        white-space: nowrap !important;
        flex-shrink: 0 !important; /* ��ֹ���� */
    }

        /* ҳ���ı�Ԫ�����⴦�� */
        .app-footer .phone-text[b-h9f3kgv5lw],
        .app-footer span:not(.phone-text):not([href])[b-h9f3kgv5lw] {
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            display: inline-block;
        }

        /* ҳ��������ʽ */
        .app-footer a[href][b-h9f3kgv5lw] {
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            text-decoration: none !important;
            color: inherit !important; /* �̳и�Ԫ����ɫ */
        }

            /* ҳ��������ͣЧ�� */
            .app-footer a[href]:hover[b-h9f3kgv5lw] {
                text-decoration: underline !important;
                color: var(--theme-footer-text) !important;
            }

    /* ҳ��ˮƽ��������ʽ */
    .app-footer[b-h9f3kgv5lw]::-webkit-scrollbar {
        height: 4px; /* �������߶� */
    }

    .app-footer[b-h9f3kgv5lw]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }

    .app-footer[b-h9f3kgv5lw]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }

        .app-footer[b-h9f3kgv5lw]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

/* ==================== ���IJ��֣�������ʾ���� ==================== */

/* Blazor���������ʽ */
#blazor-error-ui[b-h9f3kgv5lw] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; /* Ĭ������ */
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000; /* ȷ�������ϲ� */
}

    /* �������رհ�ť */
    #blazor-error-ui .dismiss[b-h9f3kgv5lw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ==================== ���岿�֣���Ӧʽ��� ==================== */

/* �ƶ�����ʽ (��Ļ��� <= 640.98px) */
@media (max-width: 640px) {
    .page[b-h9f3kgv5lw] {
        height: 100vh;
        overflow: hidden;
    }

    /* �ƶ��˲����ȫ�����ʾ */
    .sidebar[b-h9f3kgv5lw] {
        width: 100% !important;
        height: auto;
        overflow-y: hidden;
    }

    /* �ƶ������ض��������� */
    .top-row[b-h9f3kgv5lw] {
        display: none !important;
    }

    /* �ƶ���ҳ�ŵ��� */
    .app-footer[b-h9f3kgv5lw] {
        left: 0 !important;
        gap: 15px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

        /* �ƶ���ҳ��Ԫ�ص��� */
        .app-footer span[b-h9f3kgv5lw],
        .app-footer a[b-h9f3kgv5lw],
        .app-footer .phone-text[b-h9f3kgv5lw] {
            font-size: 11px !important;
            padding: 0 3px !important;
        }
}

/* �������ʽ (��Ļ��� >= 641px) */
@media (min-width: 641px) {
    .page[b-h9f3kgv5lw] {
        height: 100vh;
        overflow: hidden;
        flex-direction: row; /* ��Ϊˮƽ���� */
    }

    /* ����˲�����̶���� */
    .sidebar[b-h9f3kgv5lw] {
        width: 220px;
        height: 100vh;
        position: sticky; /* ճ�Զ�λ */
        top: 0;
        overflow-y: hidden;
    }

    /* ����˶���������ճ�Զ�λ */
    .top-row[b-h9f3kgv5lw] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* ��������������ڱ߾� */
    .top-row[b-h9f3kgv5lw], article[b-h9f3kgv5lw] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* �е���Ļҳ���Ż� (��� <= 1024px) */
    @media (max-width: 1024px) {
        .app-footer[b-h9f3kgv5lw] {
            gap: 20px !important;
            padding: 0 12px !important;
        }
    }
}

/* ��С��Ļ�Ż� (��Ļ��� <= 480px) */
@media (max-width: 480px) {
    .app-footer[b-h9f3kgv5lw] {
        gap: 10px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
        justify-content: flex-start !important; /* ������Ա���� */
    }

        .app-footer span[b-h9f3kgv5lw],
        .app-footer a[b-h9f3kgv5lw],
        .app-footer .phone-text[b-h9f3kgv5lw] {
            font-size: 10px !important;
            padding: 0 2px !important;
        }

            /* ��С��Ļ���ز��ִ�Ҫ��Ϣ */
            .app-footer span:nth-child(4)[b-h9f3kgv5lw], /* ������ */
            .app-footer span:nth-child(5)[b-h9f3kgv5lw] { /* ��Ȩ��Ϣ */
                display: none !important;
            }
}

/* С��Ļ����� (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .app-footer[b-h9f3kgv5lw] {
        gap: 15px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Layout/NavMenu.razor.rz.scp.css */

/*#region = 导航栏 ========== */

/* 导航栏切换按钮样式 */
.navbar-toggler[b-h5067sct3h] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: gray;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    .navbar-toggler:checked[b-h5067sct3h] {
        background-color: rgba(255, 255, 255, 0.5);
    }

/* 顶部导航栏样式 */
.top-row[b-h5067sct3h] {
    height: 3.5rem;
    background-color: var(--theme-primary) !important;
}

/* 导航栏品牌标题 */
.navbar-brand[b-h5067sct3h] {
    font-size: 1.1rem;
}

/* Bootstrap Icons 基础样式 */
.bi[b-h5067sct3h] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* 导航菜单容器 */
.nav-scrollable[b-h5067sct3h] {
    background-color: var(--theme-primary);
    display: none;
}

/* 导航项基础样式 - 增大字号，减少间距 */
.nav-item[b-h5067sct3h] {
    font-size: 1rem !important; /* 增大字号 */
    padding-bottom: 0.25rem !important; /* 减少间距 */
}

    .nav-item:first-of-type[b-h5067sct3h] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-h5067sct3h] {
        padding-bottom: 0.5rem;
    }

    /* 导航链接基础样式 */
    .nav-item[b-h5067sct3h]  .nav-link {
        color: var(--theme-nav-text) !important;
        background: none !important;
        border: none !important;
        border-radius: 4px;
        height: 2.25rem !important; /* 稍微增加高度 */
        display: flex;
        align-items: center;
        line-height: 2.25rem !important;
        width: 100%;
        transition: color 0.3s ease;
        font-size: 1rem !important; /* 增大字号 */
    }

        /* 激活状态导航链接 */
        .nav-item[b-h5067sct3h]  .nav-link.active {
            background-color: var(--theme-active) !important;
            color: var(--theme-nav-text-hover) !important;
            font-weight: 600;
        }

        /* 导航链接悬停状态 */
        .nav-item[b-h5067sct3h]  .nav-link:hover {
            background-color: var(--theme-hover) !important;
            color: var(--theme-nav-text-hover) !important;
            transform: translateX(4px);
        }

        /* 焦点状态（可访问性） */
        .nav-item[b-h5067sct3h]  .nav-link:focus {
            outline: 2px solid var(--theme-active);
            outline-offset: 2px;
        }

/* 移动端：切换按钮选中时显示导航菜单 */
.navbar-toggler:checked ~ .nav-scrollable[b-h5067sct3h] {
    display: block;
}

/*#endregion ----------------- */


/*#region ==== 响应式设计 =========== */

/* 移动端样式 (max-width: 640px) */
@media (max-width: 640px) {
    .nav-item[b-h5067sct3h] {
        font-size: 1.05rem !important;
        padding-bottom: 0.3rem !important;
    }

        .nav-item[b-h5067sct3h]  .nav-link {
            height: 2.5rem !important;
            line-height: 2.5rem !important;
            font-size: 1.05rem !important;
        }

    .navbar-toggler:checked ~ .nav-scrollable[b-h5067sct3h] {
        display: block;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* 语言按钮和主题选择器保持原始大小，不响应式变化 */
    .language-btn[b-h5067sct3h], .theme-select[b-h5067sct3h] {
        font-size: 0.7rem !important;
        height: 20px !important;
        line-height: 1.2 !important;
    }
}

/* 宽屏设备样式 (min-width: 641px) */
@media (min-width: 641px) {
    .navbar-toggler[b-h5067sct3h] {
        display: none;
    }

    .nav-scrollable[b-h5067sct3h] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    .nav-item[b-h5067sct3h]  .nav-link:hover {
        transform: translateX(8px);
    }
}

/*#endregion ----------*/


/*#region ==== 主题选择器样式 ===== */

.theme-selector[b-h5067sct3h] {
    min-width: 120px;
}

    .theme-selector .theme-select[b-h5067sct3h] {
        font-size: 0.7rem !important; /* 固定大小 */
        padding: 1px 8px !important;
        height: 24px !important; /* 固定高度 */
        line-height: 1.2 !important;
        background-color: transparent;
        color: white;
        border: 1px solid white;
        border-radius: 4px;
    }

        .theme-selector .theme-select:focus[b-h5067sct3h] {
            box-shadow: none;
            border-color: white;
            outline: none;
        }

        .theme-selector .theme-select option[b-h5067sct3h] {
            background-color: #2d2d2d;
            color: white;
        }

/*#endregion ----------*/


/*#region ==== 按钮样式 ======== */

/* 强制覆盖顶部导航栏 */
.top-row.ps-3.navbar.navbar-dark[b-h5067sct3h] {
    background-color: var(--theme-admin-header-bg) !important;
    color: var(--theme-admin-header-text) !important;
}

/* 主要按钮样式 - 修复丹霞鎏金主题问题 */
.btn-primary[b-h5067sct3h] {
    background-color: var(--theme-secondary) !important; /* 使用次要色 */
    border-color: var(--theme-secondary) !important;
    color: white !important;
}

/* 语言按钮样式 - 确保背景色变化，不是文字颜色 */
.language-btn[b-h5067sct3h] {
    transition: all 0.3s ease;
}

.btn-outline-light[b-h5067sct3h] {
    border-color: var(--theme-section-border) !important;
    color: var(--theme-nav-text) !important;
    background-color: transparent !important;
}

    .btn-outline-light:hover[b-h5067sct3h] {
        background-color: var(--theme-hover) !important;
        color: var(--theme-nav-text-hover) !important;
    }

/*#endregion ----------- */


/*#region ===== 功能分区样式 ======== */

/* 分区通用样式 */
.nav-section[b-h5067sct3h] {
    border: 1px solid var(--theme-section-border);
    border-radius: 10px;
    background-color: var(--theme-section-bg);
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

/* 分区标题样式 - 加粗显示 */
.nav-section-header[b-h5067sct3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.8rem !important; /* 增加内边距 */
    color: var(--theme-section-text) !important;
    cursor: pointer;
    font-weight: bold !important; /* 确保加粗 */
    background-color: var(--theme-section-header-bg);
    margin: 0 0.5rem;
    border-radius: 4px;
    line-height: 1.5;
    font-size: 1rem !important; /* 增大字号 */
}

    .nav-section-header:hover[b-h5067sct3h] {
        background-color: var(--theme-hover);
    }

/* 分区标题文字 */
.nav-section-title[b-h5067sct3h] {
    color: var(--theme-section-text) !important;
    font-size: 1rem !important; /* 增大字号 */
    font-weight: bold !important; /* 确保加粗 */
}

/* 分区切换图标 */
.nav-section-toggle[b-h5067sct3h] {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* 分区内容区域 */
.nav-section-content[b-h5067sct3h] {
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    color: var(--theme-section-text) !important;
}

    /* 分区内导航链接样式 */
    .nav-section-content .nav-item[b-h5067sct3h]  .nav-link {
        color: var(--theme-section-text) !important;
    }

        .nav-section-content .nav-item[b-h5067sct3h]  .nav-link.active {
            color: var(--theme-nav-text-hover) !important;
        }

        .nav-section-content .nav-item[b-h5067sct3h]  .nav-link:hover {
            color: var(--theme-nav-text-hover) !important;
        }

/*#endregion --------- */


/*#region ==== 标题区 + 页眉 + 页脚 ======== */
/* 页眉样式 */
.main-header[b-h5067sct3h] {
    background-color: var(--theme-header-bg) !important;
    background-image: url('/Logo/HeadAI.jpg'), linear-gradient(var(--theme-header-bg), var(--theme-header-bg)) !important;
    background-size: auto 58px, cover !important;
    background-position: 0 0, 0 0 !important;
    background-repeat: repeat, no-repeat !important;
    background-blend-mode: overlay !important;
}

/* 页脚样式 */
.app-footer[b-h5067sct3h] {
    background-color: var(--theme-footer-bg) !important;
    border-top: 1px solid var(--theme-section-border) !important;
}

/* 左上角标题区专用样式 */
.admin-header-area[b-h5067sct3h] {
    background-color: var(--theme-admin-header-bg) !important;
    color: var(--theme-admin-header-text) !important;
}

    .admin-header-area .navbar-brand[b-h5067sct3h],
    .admin-header-area .HeadText-Move[b-h5067sct3h] {
        color: var(--theme-admin-header-text) !important;
    }

    /* 左上角标题区内的按钮样式 */
    .admin-header-area .btn[b-h5067sct3h] {
        border-color: var(--theme-admin-header-text) !important;
        color: var(--theme-admin-header-text) !important;
    }

    .admin-header-area .btn-primary[b-h5067sct3h] {
        background-color: var(--theme-admin-header-text) !important;
        color: var(--theme-admin-header-bg) !important;
    }

    .admin-header-area .btn-outline-light[b-h5067sct3h] {
        background-color: transparent !important;
        color: var(--theme-admin-header-text) !important;
    }

        .admin-header-area .btn-outline-light:hover[b-h5067sct3h] {
            background-color: var(--theme-admin-header-text) !important;
            color: var(--theme-admin-header-bg) !important;
        }

/*#endregion -------- */


/*#region ==不同模块管理员功能 Admin Line 分割线 === */

/* 基础分隔线容器 */
.adminLine-container[b-h5067sct3h] {
    position: relative;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0;
}

/* 分隔线样式 */
.adminLine-line[b-h5067sct3h] {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 20%, transparent 20%, transparent 80%, #FFFFFF 80%, #FFFFFF 100% );
    margin: 0;
}

/* 分隔线文本样式 */
.adminLine-text[b-h5067sct3h] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: inherit;
    padding: 0 10px;
    color: #FFC107;
    font-size: 0.8rem;
    font-weight: 300;
    white-space: nowrap;
}

/* 变体样式：右侧对齐 */
.adminLine-text-right[b-h5067sct3h] {
    left: auto;
    right: 0;
    transform: translateY(-50%);
    padding-right: 15px;
}

/* 变体样式：左侧对齐 */
.adminLine-text-left[b-h5067sct3h] {
    left: 0;
    transform: translateY(-50%);
    padding-left: 15px;
}

/* 变体样式：紧凑文本 */
.adminLine-text-compact[b-h5067sct3h] {
    padding: 0 5px;
}

/* 变体样式：突出文本 */
.adminLine-text-emphasis[b-h5067sct3h] {
    font-weight: 300;
    letter-spacing: 1px;
}

/*#endregion */

/*#region ==== Bootstrap Icons 样式代码图标：只设计白色，命名要 见名知义= .bi + 名称 + 颜色，备注说明 ========= */

/* 主页图标 - 白色 */
.bi-house-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z'/%3E%3Cpath d='m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z'/%3E%3C/svg%3E");
}

/* 下载图标 - 白色 */
.bi-download-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E");
}

/* 邮箱图标 - 白色 */
.bi-envelope-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}

/* 树叶图标 - 白色 */
.bi-leaf-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* 二维码图标 - 白色 */
.bi-qrcode-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h2v2H2V2Z'/%3E%3Cpath d='M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z'/%3E%3Cpath d='M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z'/%3E%3Cpath d='M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM3 8V7h1v1H3Zm4 0V7h1v1H7Zm1 0v1h1V8H8Zm2 0v1h1V8h-1Zm2 0v1h1V8h-1Zm1 0v1h1V8h-1Zm1 0v1h1V8h-1Zm1 0v1h1V8h-1Zm-7 2v1h1v-1H3Zm1 0v1h1v-1H4Zm2 0v1h1v-1H6Zm2 0v1h1v-1H8Zm2 0v1h1v-1h-1Zm2 0v1h1v-1h-1Zm2 0v1h1v-1h-1Zm-10 2v1h1v-1H3Zm1 0v1h1v-1H4Zm2 0v1h1v-1H6Zm2 0v1h1v-1H8Zm2 0v1h1v-1h-1Zm2 0v1h1v-1h-1Zm2 0v1h1v-1h-1Z'/%3E%3C/svg%3E");
}

/* 太极图 - 白色 */
.bi-taiji-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle fill='white' cx='8' cy='8' r='8'/%3E%3Ccircle fill='black' cx='8' cy='8' r='3.2'/%3E%3C/svg%3E");
}

/* 盒子图标 - 白色 */
.bi-box-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
}

/* 图表图标 - 白色 */
.bi-chart-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

/* 楼梯图标 - 白色 */
.bi-stairs-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 14h10V8H8V4H4V2H2v12z'/%3E%3C/svg%3E");
}


/* 人员图标 - 金色 */
.bi-people-gold[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFD700' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

/* 齿轮图标 - 金色 */
.bi-gear-gold[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFD700' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* 速度计图标 - 白色 */
.bi-speedometer-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 0 1-1 0l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z'/%3E%3C/svg%3E");
}

/* 剪贴板图标 - 白色 */
.bi-clipboard-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z'/%3E%3C/svg%3E");
}

/* 列表检查图标 - 白色 */
.bi-list-check-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* 相机图标 - 白色 */
.bi-camera-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175l3.5 1.556V4.269l-3.5 1.556v4.35zM1 5v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z'/%3E%3C/svg%3E");
}

/* 机器人图标 - 白色 */
.bi-robot-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3Cpath d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3C/svg%3E");
}

/* 机器人图标 - 白色身体黄色细节 */
.bi-robot-white-yellow[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z'/%3E%3Cpath fill='%23FFD700' d='M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z'/%3E%3C/svg%3E");
}

/* 人员图标 - 白色 */
.bi-person-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

/* 左箭头图标 - 白色 */
.bi-arrow-left-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

/* 锁图标 - 白色 */
.bi-lock-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

/* 人员填充图标 - 白色 */
.bi-person-fill-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

/* 人员图标 - 白色 */
.bi-people-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

/* 链接图标 - 白色 */
.bi-link-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z'/%3E%3Cpath d='M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z'/%3E%3C/svg%3E");
}

/* 加号图标 - 白色 */
.bi-plus-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

/* 列表图标 - 白色 */
.bi-list-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* 聊天图标 - 白色 */
.bi-chat-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z'/%3E%3C/svg%3E");
}

/* 微信图标 - 白色 */
.bi-wechat-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.186 1.113a.5.5 0 0 0-.745.041L8 5.09 5.559 1.154a.5.5 0 0 0-.745-.041 12.97 12.97 0 0 0-2.18 9.334c.881 3.148 4.02 5.483 7.366 5.483a7.11 7.11 0 0 0 2.77-.585l.034.023c.268.178.593.286.912.286.63 0 1.127-.414 1.284-1.016.569-2.102.866-4.163.866-6.258 0-3.844-2.33-7.227-5.834-8.83zm-.182 13.95a6.09 6.09 0 0 1-2.255-.434c-2.941-1.011-5.078-3.705-5.078-6.8 0-2.689 1.394-5.135 3.642-6.542l.02.013c1.522.888 3.672 1.438 5.93 1.438 2.257 0 4.407-.55 5.93-1.438l.02-.013c2.248 1.407 3.642 3.853 3.642 6.542 0 2.689-1.394 5.135-3.642 6.542l-.02-.013a10.27 10.27 0 0 1-1.09.452z'/%3E%3C/svg%3E");
}

/* 文件图标 - 白色 */
.bi-file-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/%3E%3C/svg%3E");
}

/* 文档模版图标 - 白色 */
.bi-file-earmark-text-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z'/%3E%3C/svg%3E");
}


/* 软件图标 - 白色 */
/* 用途：代表软件、应用程序、系统设置等相关功能 */
.bi-software-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 0A1.5 1.5 0 0 0 0 1.5v7A1.5 1.5 0 0 0 1.5 10H6v1H1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5v-1h4.5A1.5 1.5 0 0 0 16 8.5v-7A1.5 1.5 0 0 0 14.5 0h-13Zm13 1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h13ZM2 1.5a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0Zm2 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0ZM14 13H2v-2h12v2Z'/%3E%3C/svg%3E");
}

/* 喇叭图标（扬声器）- 白色 */
/* 用途：代表朗读、播放音频、声音控制、音量调节等功能 */
.bi-speaker-white[b-h5067sct3h] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z'/%3E%3C/svg%3E");
}
/*#endregion --------- */
/* _content/LEAFBlazorApp25/Components/Pages/Home.razor.rz.scp.css */
/* 
 * 图片索引页面样式 - 紧凑布局与主题支持
 * 主题配色通过PictureThemeService动态生成，此处为基础布局样式
 */

/* ===== 基础布局样式 ===== */
.compact-controls-container[b-dfns2srr2t] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.control-label[b-dfns2srr2t] {
    font-size: 0.9rem;
    font-weight: 500;
}

.control-group[b-dfns2srr2t] {
    display: flex;
    align-items: center;
}

/* ===== 紧凑分类卡片 ===== */
.compact-category-card[b-dfns2srr2t] {
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .compact-category-card:hover[b-dfns2srr2t] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

.category-header[b-dfns2srr2t] {
    border-bottom: 1px solid;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.category-content[b-dfns2srr2t] {
    padding: 0.25rem;
}

/* ===== 紧凑文件夹卡片 ===== */
.compact-folder-card[b-dfns2srr2t] {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .compact-folder-card:hover[b-dfns2srr2t] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #dee2e6;
    }

.folder-header[b-dfns2srr2t] {
    border-bottom: 1px solid #e9ecef;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.folder-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
}

.folder-description[b-dfns2srr2t] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
}

.folder-actions .btn[b-dfns2srr2t] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.folder-footer[b-dfns2srr2t] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    text-align: center;
}

/* ===== 紧凑轮播样式 ===== */
.compact-carousel-container[b-dfns2srr2t] {
    overflow: hidden;
    border-radius: 0.25rem;
    position: relative;
    /* 移除固定高度，由内容决定 */
    border: 1px solid #e9ecef;
}

.compact-carousel-track[b-dfns2srr2t] {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
    width: 100%;
}

.compact-carousel-slide[b-dfns2srr2t] {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 新增：图片容器，用于控制图片显示区域 */
.image-container[b-dfns2srr2t] {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.compact-carousel-image[b-dfns2srr2t] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 填充整个区域 */
    display: block;
}

/* 图片信息区域样式 - 修改为透明背景和灰色文字 */
.compact-image-info[b-dfns2srr2t] {
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important; /* 修改为白色 */
    /*color: #6c757d !important;*/
    padding: 0.3rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border: none !important;
    box-shadow: none !important;
    /* 移除所有可能的背景 */
    background-image: none !important;
}

/*.image-name {
    font-weight: 500;
    color: #6c757d !important;*/ /* 灰色文字 */
/*}*/

/* 同时需要修改图片名称的颜色 */
.image-name[b-dfns2srr2t] {
    font-weight: 500;
    color: #ffffff !important; /* 修改为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 图片名称也添加阴影 */
    text-align: left;
}
/*最后一个按钮靠右*/
.compact-image-info > :last-child[b-dfns2srr2t] {
    margin-left: auto;
}

.compact-carousel-btn[b-dfns2srr2t] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.9;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    background-color: rgba(128, 128, 128, 0.8) !important;
    color: white !important;
}

    .compact-carousel-btn:hover[b-dfns2srr2t] {
        opacity: 1;
        background-color: rgba(96, 96, 96, 0.9) !important;
    }

    .compact-carousel-btn.prev[b-dfns2srr2t] {
        left: 0.3rem;
    }

    .compact-carousel-btn.next[b-dfns2srr2t] {
        right: 0.3rem;
    }

.compact-carousel-indicators[b-dfns2srr2t] {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    z-index: 10;
}

.compact-carousel-indicator[b-dfns2srr2t] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

    .compact-carousel-indicator.active[b-dfns2srr2t] {
        transform: scale(1.2);
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

    .compact-carousel-indicator:hover[b-dfns2srr2t] {
        opacity: 0.8;
        background-color: rgba(255, 255, 255, 0.7) !important;
    }

/* ===== 管理员面板 ===== */
.admin-panel[b-dfns2srr2t] {
    border-left: 3px solid;
}

    .admin-panel h6[b-dfns2srr2t] {
        font-weight: 600;
        font-size: 1rem;
    }

/* ===== 无图片占位符 ===== */
.no-images-placeholder[b-dfns2srr2t] {
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #e9ecef;
    min-height: 120px; /* 最小高度 */
}

/* ===== 徽章样式 ===== */
.badge[b-dfns2srr2t] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ===== 按钮样式优化 ===== */
.btn[b-dfns2srr2t] {
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

    .btn:hover[b-dfns2srr2t] {
        transform: translateY(-1px);
    }

.btn-sm[b-dfns2srr2t] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-outline-secondary[b-dfns2srr2t] {
    color: #6c757d; /* 减小按钮的颜色 */
    border-color: #6c757d;
}

    .btn-outline-secondary:hover[b-dfns2srr2t] {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

/* ===== 模态框优化 ===== */
.modal-content[b-dfns2srr2t] {
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header[b-dfns2srr2t] {
    border-bottom: 1px solid;
}

.modal-footer[b-dfns2srr2t] {
    border-top: 1px solid;
}

.modal-title[b-dfns2srr2t] {
    font-weight: 600;
    font-size: 1rem;
}

/* ===== 表单控件优化 ===== */
.form-control[b-dfns2srr2t], .form-select[b-dfns2srr2t] {
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

    .form-control:focus[b-dfns2srr2t], .form-select:focus[b-dfns2srr2t] {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        border-color: #007bff;
    }

.form-label[b-dfns2srr2t] {
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== 自定义5列布局 ===== */
.col-lg-2-4[b-dfns2srr2t] {
    flex: 0 0 auto;
    width: 20%;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .compact-controls-container[b-dfns2srr2t] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .control-group[b-dfns2srr2t] {
        width: 100%;
        justify-content: space-between;
    }

    .col-lg-2-4[b-dfns2srr2t] {
        width: 50%;
    }

    .folder-actions .btn[b-dfns2srr2t] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .col-lg-2-4[b-dfns2srr2t] {
        width: 100%;
    }

    .folder-actions[b-dfns2srr2t] {
        flex-direction: column;
        gap: 0.2rem;
    }

        .folder-actions .btn[b-dfns2srr2t] {
            font-size: 0.75rem;
        }
}

/* ===== 动画效果 ===== */
@keyframes fadeIn-b-dfns2srr2t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compact-folder-card[b-dfns2srr2t] {
    animation: fadeIn-b-dfns2srr2t 0.3s ease;
}

/* ===== 滚动条优化 ===== */
[b-dfns2srr2t]::-webkit-scrollbar {
    width: 6px;
}

[b-dfns2srr2t]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

[b-dfns2srr2t]::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 3px;
}

    [b-dfns2srr2t]::-webkit-scrollbar-thumb:hover {
        background: #495057;
    }

/* ===== 主题选择器 ===== */
.theme-selector-container[b-dfns2srr2t] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: inline-block;
    border: 1px solid #e9ecef;
}

/* ===== 链接按钮样式 ===== */
.btn-link[b-dfns2srr2t] {
    font-size: 0.9rem;
}

/* ===== 上传预览样式 ===== */
.upload-preview[b-dfns2srr2t] {
    border: 1px dashed #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

    .upload-preview ul[b-dfns2srr2t] {
        margin: 0;
        padding-left: 1rem;
    }

/*#region --动态公司介绍 iframe */
/* 公司介绍区域样式 */
.company-profile-section[b-dfns2srr2t] {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0; /* 修改：移除上下外边距，消除与周围元素的间隔 */
    padding: 0; /* 修改：移除内边距，消除内部间隔 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden;
    /*box-shadow: none;*/ /* 修改：移除阴影效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: transparent; /* 新增：设置背景透明 */
}

    .company-profile-section iframe[b-dfns2srr2t] {
        width: 100%;
        height: 200px; /* 可根据需要调整高度 */
        border: none; /* 确保无边框 */
        display: block;
        margin: 0; /* 移除iframe外边距 */
        padding: 0; /* 移除iframe内边距 */
        background: transparent; /* 设置iframe背景透明 */
    }

/* 加载遮罩层 */
.loading-overlay[b-dfns2srr2t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(240, 240, 240, 0.9); /* 使用浅灰色背景，符合注释要求 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

    .loading-overlay .spinner[b-dfns2srr2t] {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #007bff;
        border-radius: 50%;
        animation: spin-b-dfns2srr2t 1s linear infinite;
        margin-bottom: 1rem;
    }

    .loading-overlay span[b-dfns2srr2t] {
        color: #666;
        font-size: 0.9rem;
    }

@keyframes spin-b-dfns2srr2t {
    0% {
        transform: rotate(0deg);
    }
    /* 调试：动画起始状态 */
    100% {
        transform: rotate(360deg);
    }
    /* 调试：动画结束状态，确保完整循环 */
}

/*#endregion------------ */



/* _content/LEAFBlazorApp25/Components/Pages/LEAFSoft/DownloadSoft.razor.rz.scp.css */
/* 
 * DownloadSoft.razor.css - 软件下载页面样式
 * 匿名访客版本，移除了管理员相关样式
 * 标题区域高度优化版本，小窗口不换行
 */

/* ================ 1. 主容器 ================ */
.download-container[b-q5138151zd] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0px 10px 10px 10px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: calc(100vh - 40px);
    box-sizing: border-box;
}

/* ================ 2. 状态消息 ================ */
.status-message[b-q5138151zd] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    animation: fadeIn-b-q5138151zd 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 300px;
}

    .status-message.success[b-q5138151zd] {
        background: #10b981;
        color: white;
        border-left: 4px solid #059669;
    }

    .status-message.error[b-q5138151zd] {
        background: #ef4444;
        color: white;
        border-left: 4px solid #dc2626;
    }

/* ================ 3. 下载区域 ================ */
.download-section[b-q5138151zd] {
    background: white;
    border-radius: 12px;
    padding: 10px 20px 20px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 2px solid #e2e8f0;
}

/* ================ 4. 标题区域 - 高度优化版本 ================ */
.section-header[b-q5138151zd] {
    position: sticky; /* 使用sticky定位，兼容性好 */
    top: 0;
    z-index: 100; /* 确保在最上层 */
    background-color: white; /* 添加背景色，避免内容穿透 */

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* 减小下边距 */
    flex-wrap: nowrap; /* 禁止换行，保持在一行 */
    gap: 12px; /* 稍微减小元素间间距 */
    padding: 3px 0; /* 主要修改：减小垂直内边距 */
    /* 为固定定位添加视觉效果 */
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title[b-q5138151zd] {
    display: flex;
    align-items: center;
    gap: 10px; /* 保持原样 */
    color: #1e293b;
    font-size: 1.6rem; /* 保持原字体大小 */
    margin: 0;
    font-weight: 800;
    white-space: nowrap; /* 禁止标题换行 */
}

.download-title[b-q5138151zd] {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.software-count[b-q5138151zd] {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 600;
    background: rgba(226, 232, 240, 0.8);
    padding: 4px 8px; /* 稍微减小内边距 */
    border-radius: 16px;
    margin-left: 8px;
    white-space: nowrap; /* 禁止计数标签换行 */
}

/* ================ 5. 列选择器 ================ */
.section-controls[b-q5138151zd] {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap; /* 禁止控件换行 */
}

.columns-selector[b-q5138151zd] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 6px 10px; /* 稍微减小内边距 */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap; /* 禁止列选择器内部换行 */
}

.columns-dropdown[b-q5138151zd] {
    padding: 5px 8px; /* 稍微减小内边距 */
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: white;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
}

    .columns-dropdown:focus[b-q5138151zd] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
    }

    .columns-dropdown:hover[b-q5138151zd] {
        border-color: #3b82f6;
        background: #f8fafc;
    }

.section-icon[b-q5138151zd] {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 6px; /* 稍微减小内边距 */
}

/* ================ 6. 加载状态 ================ */
.loading[b-q5138151zd], .empty-state[b-q5138151zd] {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    margin: 10px 0;
}

.loading[b-q5138151zd] {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.empty-icon[b-q5138151zd] {
    font-size: 2.5rem;
    opacity: 0.7;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.empty-state h3[b-q5138151zd] {
    color: #334155;
    margin: 0;
    font-size: 1.2rem;
}

.empty-state p[b-q5138151zd] {
    color: #64748b;
    margin: 0;
    font-size: 0.9rem;
}

/* ================ 7. 软件网格 ================ */
.software-grid[b-q5138151zd] {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

/* ================ 8. 软件卡片 ================ */
.software-card[b-q5138151zd] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 100%;
}

    .software-card:hover[b-q5138151zd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
        border-color: #cbd5e1;
    }

/* ================ 9. 软件图片区域 ================ */
.software-image[b-q5138151zd] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
    aspect-ratio: 16/9;
}

@supports not (aspect-ratio: 16/9) {
    .software-image[b-q5138151zd] {
        padding-top: 56.25%;
        height: 0;
    }

        .software-image img[b-q5138151zd] {
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
        }
}

.software-image img[b-q5138151zd] {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: contain;
    border-radius: 4px;
    background: white;
}

.software-placeholder[b-q5138151zd] {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.7;
}

/* ================ 10. 软件内容区域 ================ */
.software-content[b-q5138151zd] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.software-header[b-q5138151zd] {
    margin-bottom: 10px;
    text-align: center;
}

.software-name[b-q5138151zd] {
    margin: 0;
    color: #1e293b;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    word-break: break-word;
    padding: 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 软件描述 */
.software-description-section[b-q5138151zd] {
    margin-bottom: 14px;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 100px;
    padding-right: 4px;
}

.software-description[b-q5138151zd] {
    color: #475569;
    line-height: 1.4;
    margin: 0;
    font-size: 0.9rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================ 11. 下载按钮区域 ================ */
.download-button-container[b-q5138151zd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.download-button[b-q5138151zd] {
    width: 140px;
    min-width: 140px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

    .download-button:hover[b-q5138151zd] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }

/* 文件信息 - 靠右对齐 */
.software-meta[b-q5138151zd] {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.file-size[b-q5138151zd] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.download-text[b-q5138151zd] {
    flex: 1;
    text-align: center;
}

/* ================ 12. 动画 ================ */
.spinner[b-q5138151zd] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-q5138151zd 1s linear infinite;
}

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

@keyframes fadeIn-b-q5138151zd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================ 13. 响应式设计 - 大窗体优化 ================ */

/* 超大屏幕 (1400px 以上) */
@media (min-width: 1401px) {
    .software-grid[b-q5138151zd] {
        gap: 24px;
    }

    .section-header[b-q5138151zd] {
        padding: 3px 0; /* 保持紧凑的垂直内边距 */
        margin-bottom: 10px;
    }

    .download-section[b-q5138151zd] {
        padding: 10px 25px 25px 25px;
    }
}

/* 大屏幕 (1200px - 1400px) */
@media (min-width: 1200px) and (max-width: 1400px) {
    .software-grid[b-q5138151zd] {
        gap: 20px;
    }

    .download-button[b-q5138151zd] {
        width: 130px;
        min-width: 130px;
        padding: 9px 15px;
        font-size: 0.9rem;
    }
}

/* ================ 14. 响应式设计 - 小窗体优化 ================ */

/* 中等屏幕 (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 993px) {
    .software-grid[style*="grid-template-columns: repeat(3, 1fr)"][b-q5138151zd] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .section-header[b-q5138151zd] {
        padding: 3px 0; /* 保持紧凑的垂直内边距 */
        margin-bottom: 8px;
        gap: 8px; /* 减小间距 */
    }

    .section-title[b-q5138151zd] {
        font-size: 1.5rem;
    }

    .software-count[b-q5138151zd] {
        font-size: 0.85rem; /* 减小字体大小以节省空间 */
    }

    .download-button[b-q5138151zd] {
        width: 120px;
        min-width: 120px;
        padding: 9px 14px;
        font-size: 0.85rem;
    }
}

/* 平板横向 (768px - 992px) */
@media (max-width: 992px) {
    .software-grid[style*="grid-template-columns: repeat(2, 1fr)"][b-q5138151zd] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .download-container[b-q5138151zd] {
        padding: 0px 8px 8px 8px;
    }

    .section-header[b-q5138151zd] {
        /* 重要修改：保持一行布局，不换行 */
        flex-direction: row; /* 保持横向布局 */
        align-items: center;
        gap: 8px;
        margin-bottom: 8px; /* 保持紧凑的下边距 */
        padding: 3px 0; /* 保持紧凑的垂直内边距 */
        position: sticky;
        top: 0;
        z-index: 100;
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .section-controls[b-q5138151zd] {
        width: auto; /* 恢复为自动宽度 */
        justify-content: flex-end; /* 右对齐 */
        flex-wrap: nowrap; /* 禁止换行 */
        gap: 10px;
    }

    .section-title[b-q5138151zd] {
        font-size: 1.4rem;
        white-space: nowrap; /* 禁止标题换行 */
    }

    .download-section[b-q5138151zd] {
        padding: 8px 15px 15px 15px;
    }

    .download-button-container[b-q5138151zd] {
        flex-direction: row; /* 保持横向布局 */
        align-items: center;
        gap: 10px;
    }

    .download-button[b-q5138151zd] {
        width: 140px;
        min-width: 140px;
        padding: 10px 16px;
    }

    .software-meta[b-q5138151zd] {
        margin-left: auto;
        justify-content: flex-end;
    }

    .software-content[b-q5138151zd] {
        padding: 14px;
    }
}

/* 平板竖向 (576px - 768px) */
@media (max-width: 768px) {
    .software-grid[style*="grid-template-columns: repeat(1, 1fr)"][b-q5138151zd] {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .download-container[b-q5138151zd] {
        padding: 0px 6px 6px 6px;
    }

    .section-header[b-q5138151zd] {
        padding: 3px 0; /* 保持紧凑的垂直内边距 */
        margin-bottom: 6px;
        gap: 6px; /* 进一步减小间距 */
        flex-wrap: nowrap; /* 禁止换行 */
        overflow-x: auto; /* 允许水平滚动以防万一 */
        overflow-y: hidden; /* 禁止垂直滚动 */
    }

    .section-title[b-q5138151zd] {
        font-size: 1.3rem;
        white-space: nowrap; /* 禁止标题换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        max-width: 50%; /* 限制最大宽度，给右侧控件留空间 */
    }

    .section-icon[b-q5138151zd] {
        font-size: 1.4rem;
    }

    .software-count[b-q5138151zd] {
        font-size: 0.85rem;
        padding: 3px 6px;
        white-space: nowrap; /* 禁止计数标签换行 */
    }

    .section-controls[b-q5138151zd] {
        gap: 8px;
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .columns-selector[b-q5138151zd] {
        padding: 5px 8px; /* 减小内边距 */
        font-size: 0.85rem; /* 减小字体大小 */
        white-space: nowrap; /* 禁止内部换行 */
    }

    .columns-dropdown[b-q5138151zd] {
        min-width: 80px;
        padding: 4px 6px;
        font-size: 0.8rem;
    }

    .download-section[b-q5138151zd] {
        padding: 6px 12px 12px 12px;
        border-radius: 10px;
    }

    .software-grid[b-q5138151zd] {
        gap: 16px;
        margin-bottom: 18px;
    }

    .software-card[b-q5138151zd] {
        border-radius: 8px;
    }

    .software-name[b-q5138151zd] {
        font-size: 1rem;
        line-height: 1.2;
    }

    .software-description[b-q5138151zd] {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .status-message[b-q5138151zd] {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        font-size: 0.8rem;
        padding: 10px 14px;
    }
}

/* 小手机屏幕 (576px 以下) */
@media (max-width: 576px) {
    .software-grid[style*="grid-template-columns: repeat(1, 1fr)"][b-q5138151zd] {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .download-container[b-q5138151zd] {
        padding: 0px 4px 4px 4px;
    }

    .section-header[b-q5138151zd] {
        padding: 3px 0; /* 保持紧凑的垂直内边距 */
        margin-bottom: 5px;
        gap: 6px;
        flex-wrap: nowrap; /* 禁止换行 */
        overflow-x: auto; /* 允许水平滚动 */
        overflow-y: hidden; /* 禁止垂直滚动 */
    }

    .section-title[b-q5138151zd] {
        font-size: 1.1rem;
        white-space: nowrap; /* 禁止标题换行 */
        overflow: hidden; /* 隐藏溢出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        max-width: 40%; /* 进一步减小最大宽度 */
    }

    .download-title[b-q5138151zd] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .software-count[b-q5138151zd] {
        margin-left: 0;
        font-size: 0.8rem;
        padding: 2px 5px;
        white-space: nowrap; /* 禁止计数标签换行 */
    }

    .section-controls[b-q5138151zd] {
        gap: 6px;
        flex-wrap: nowrap; /* 禁止换行 */
    }

    .columns-selector[b-q5138151zd] {
        width: auto; /* 恢复自动宽度 */
        justify-content: flex-start; /* 左对齐 */
        padding: 4px 6px; /* 减小内边距 */
        font-size: 0.8rem; /* 减小字体大小 */
    }

    .columns-dropdown[b-q5138151zd] {
        min-width: 70px;
        padding: 3px 5px;
        font-size: 0.75rem;
    }

    .download-section[b-q5138151zd] {
        padding: 5px 10px 10px 10px;
        border-radius: 8px;
    }

    .software-grid[b-q5138151zd] {
        gap: 12px;
        margin-bottom: 15px;
    }

    .software-content[b-q5138151zd] {
        padding: 12px;
    }

    .download-button[b-q5138151zd] {
        padding: 8px 14px;
        font-size: 0.85rem;
        gap: 4px;
    }

    .file-size[b-q5138151zd] {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .loading[b-q5138151zd], .empty-state[b-q5138151zd] {
        padding: 30px 15px;
        font-size: 0.9rem;
    }

    .empty-icon[b-q5138151zd] {
        font-size: 2rem;
    }

    .empty-state h3[b-q5138151zd] {
        font-size: 1rem;
    }

    .empty-state p[b-q5138151zd] {
        font-size: 0.8rem;
    }
}

/* 超小手机屏幕 (400px 以下) */
@media (max-width: 400px) {
    .section-title[b-q5138151zd] {
        font-size: 1rem;
        max-width: 35%; /* 进一步减小最大宽度 */
    }

    .section-icon[b-q5138151zd] {
        font-size: 1.2rem;
    }

    .software-count[b-q5138151zd] {
        font-size: 0.75rem;
        padding: 2px 4px;
    }

    .columns-selector[b-q5138151zd] {
        font-size: 0.75rem;
        padding: 3px 5px;
    }

    .columns-dropdown[b-q5138151zd] {
        min-width: 60px;
        padding: 2px 4px;
        font-size: 0.7rem;
    }

    .software-name[b-q5138151zd] {
        font-size: 0.95rem;
    }

    .software-description[b-q5138151zd] {
        font-size: 0.8rem;
    }

    .download-button[b-q5138151zd] {
        padding: 7px 12px;
        font-size: 0.8rem;
    }
}

/* ================ 15. 打印样式 ================ */
@media print {
    .section-controls[b-q5138151zd],
    .download-button[b-q5138151zd] {
        display: none !important;
    }

    .software-card[b-q5138151zd] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 15px;
    }

    .software-image[b-q5138151zd] {
        display: none !important;
    }

    .section-header[b-q5138151zd] {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 1px solid #ccc !important;
        padding: 3px 0 !important;
        margin-bottom: 5px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .download-container[b-q5138151zd] {
        background: white !important;
    }

    .download-section[b-q5138151zd] {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/LEAFSoft/DownloadSoftAdmin.razor.rz.scp.css */
/* DownloadSoft.razor.css - 优化版本 */

/* ================ 1. 主容器 ================ */
/* 填满父容器宽度，现代配色方案 */
.download-container[b-yaqk3whofl] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px 20px; /* 减少上下内边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: calc(100vh - 40px);
    box-sizing: border-box;
}

/* ================ 2. 管理员面板 ================ */
/* 现代渐变色方案 - 蓝紫色调 */
.admin-panel[b-yaqk3whofl] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 20px; /* 减少间距 */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    padding: 18px 22px; /* 减少内边距 */
    border: 2px solid #ffffff;
}

.admin-title[b-yaqk3whofl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 14px; /* 减少间距 */
    flex-wrap: wrap;
    gap: 12px;
}

.title-left[b-yaqk3whofl] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem; /* 稍小字号 */
    font-weight: 700;
    color: #fff;
}

.admin-icon[b-yaqk3whofl] {
    font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: 50%;
}

/* ================ 3. 操作按钮 ================ */
.form-actions[b-yaqk3whofl] {
    display: flex;
    gap: 10px; /* 减少间距 */
    align-items: center;
    margin: 0;
}

/* 紧凑按钮样式 - 现代配色 */
.upload-btn.compact[b-yaqk3whofl], .cancel-btn.compact[b-yaqk3whofl] {
    min-width: 100px; /* 减小宽度 */
    padding: 8px 16px; /* 减少内边距 */
    height: 36px; /* 减小高度 */
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.cancel-btn.compact[b-yaqk3whofl] {
    min-width: 60px;
    background: rgba(255, 255, 255, 0.9);
    color: #64748b;
}

    .cancel-btn.compact:hover[b-yaqk3whofl] {
        background: white;
        color: #475569;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

.upload-btn.compact[b-yaqk3whofl] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

    .upload-btn.compact:hover:not(:disabled)[b-yaqk3whofl] {
        background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        transform: translateY(-1px); /* 减小动画幅度 */
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .upload-btn.compact:disabled[b-yaqk3whofl] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .upload-btn.compact.uploading[b-yaqk3whofl] {
        background: #64748b;
    }

/* ================ 4. 状态消息 ================ */
.status-message[b-yaqk3whofl] {
    padding: 10px 14px; /* 减少内边距 */
    margin: 10px 0 8px 0; /* 减少间距 */
    border-radius: 6px;
    font-weight: 600;
    border-left: 4px solid;
    font-size: 0.9rem;
    animation: fadeIn-b-yaqk3whofl 0.3s ease;
}

    .status-message.success[b-yaqk3whofl] {
        background: rgba(187, 247, 208, 0.9);
        color: #065f46;
        border-left-color: #10b981;
    }

    .status-message.error[b-yaqk3whofl] {
        background: rgba(254, 202, 202, 0.9);
        color: #7f1d1d;
        border-left-color: #ef4444;
    }

/* ================ 5. 表单样式 ================ */
.compact-form .form-row[b-yaqk3whofl] {
    display: flex;
    align-items: flex-start;
    gap: 14px; /* 减少间距 */
    flex-wrap: wrap;
}

.compact-form .form-group.compact[b-yaqk3whofl] {
    flex: 1;
    min-width: 220px; /* 减小最小宽度 */
    margin: 0;
}

.file-select-btn[b-yaqk3whofl] {
    width: 100%;
    padding: 10px 14px; /* 减少内边距 */
    background: rgba(255, 255, 255, 0.95);
    color: #3b82f6;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .file-select-btn:hover[b-yaqk3whofl] {
        background: white;
        color: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
        border-color: #3b82f6;
    }

.file-input-hidden[b-yaqk3whofl] {
    display: none;
}

.description-input[b-yaqk3whofl] {
    width: 100%;
    padding: 10px 14px; /* 减少内边距 */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 54px; /* 减小最小高度 */
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.2s ease;
    color: #334155;
    font-family: inherit;
}

    .description-input:focus[b-yaqk3whofl] {
        border-color: white;
        outline: none;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        background: white;
    }

/* ================ 6. 下载区域 ================ */
.download-section[b-yaqk3whofl] {
    background: white;
    border-radius: 12px;
    padding: 20px; /* 减少内边距 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 2px solid #e2e8f0; /* 现代灰色边框 */
    margin-top: 16px; /* 减少间距 */
}

/* ================ 7. 标题区域 ================ */
.section-header[b-yaqk3whofl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px; /* 减少间距 */
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 6px;
}

.section-title[b-yaqk3whofl] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1e293b;
    font-size: 1.6rem; /* 减小字号 */
    margin: 0;
    font-weight: 800;
}

.download-title[b-yaqk3whofl] {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); /* 蓝紫色渐变 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.software-count[b-yaqk3whofl] {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 600;
    background: rgba(226, 232, 240, 0.8);
    padding: 5px 10px;
    border-radius: 16px;
    margin-left: 8px;
}

/* ================ 8. 列选择器 ================ */
.section-controls[b-yaqk3whofl] {
    display: flex;
    align-items: center;
    gap: 16px; /* 减少间距 */
}

.columns-selector[b-yaqk3whofl] {
    display: flex;
    align-items: center;
    gap: 8px; /* 减少间距 */
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
}

.columns-dropdown[b-yaqk3whofl] {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: white;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 90px;
}

    .columns-dropdown:focus[b-yaqk3whofl] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
    }

    .columns-dropdown:hover[b-yaqk3whofl] {
        border-color: #3b82f6;
        background: #f8fafc;
    }

.section-icon[b-yaqk3whofl] {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 8px;
}

/* ================ 9. 加载状态 ================ */
.loading[b-yaqk3whofl], .empty-state[b-yaqk3whofl] {
    text-align: center;
    padding: 40px 20px; /* 减少内边距 */
    color: #64748b;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    margin: 10px 0;
}

.loading[b-yaqk3whofl] {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.empty-icon[b-yaqk3whofl] {
    font-size: 2.5rem;
    opacity: 0.7;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.empty-state h3[b-yaqk3whofl] {
    color: #334155;
    margin: 0;
    font-size: 1.2rem;
}

.empty-state p[b-yaqk3whofl] {
    color: #64748b;
    margin: 0;
    font-size: 0.9rem;
}

/* ================ 10. 软件网格 ================ */
.software-grid[b-yaqk3whofl] {
    display: grid;
    gap: 20px; /* 减少间距 */
    margin-bottom: 24px;
}

/* ================ 11. 软件卡片 ================ */
.software-card[b-yaqk3whofl] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0; /* 细边框 */
    position: relative;
    height: 100%;
}

    /* 1. 移除煽动动画，只保留轻微阴影变化 */
    .software-card:hover[b-yaqk3whofl] {
        transform: translateY(-2px); /* 减小动画幅度 */
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12); /* 更柔和的阴影 */
        border-color: #cbd5e1;
    }

/* ================ 12. 软件图片区域 ================ */
/* 2. 优化图片显示，确保填充整个区域 */
.software-image[b-yaqk3whofl] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 16:9比例优化，确保图片完全显示 */
    padding: 2px; /* 图片和边框的2px空隙 */
    box-sizing: border-box;
    aspect-ratio: 16/9; /* 现代浏览器支持 */
}

/* 兼容性方案 */
@supports not (aspect-ratio: 16/9) {
    .software-image[b-yaqk3whofl] {
        padding-top: 56.25%; /* 9/16 = 0.5625 */
        height: 0;
    }

        .software-image img[b-yaqk3whofl] {
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
        }
}

.software-image img[b-yaqk3whofl] {
    width: calc(100% - 4px); /* 减去内边距 */
    height: calc(100% - 4px);
    object-fit: contain; /* 确保图片完整显示 */
    border-radius: 4px;
    background: white;
}

/* 移除悬停放大效果 */
.software-card:hover .software-image img[b-yaqk3whofl] {
    transform: none;
}

.software-placeholder[b-yaqk3whofl] {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.7;
}

/* ================ 13. 软件内容区域 ================ */
.software-content[b-yaqk3whofl] {
    padding: 16px; /* 减少内边距 */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.software-header[b-yaqk3whofl] {
    margin-bottom: 10px; /* 减少间距 */
    text-align: center;
}

.software-name[b-yaqk3whofl] {
    margin: 0;
    color: #1e293b;
    font-size: 1.1rem; /* 减小字号 */
    line-height: 1.3;
    font-weight: 700;
    word-break: break-word;
    padding: 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 软件描述 */
.software-description-section[b-yaqk3whofl] {
    margin-bottom: 14px; /* 减少间距 */
    flex-grow: 1;
    overflow-y: auto;
    max-height: 100px; /* 减小最大高度 */
    padding-right: 4px;
}

.software-description[b-yaqk3whofl] {
    color: #475569;
    line-height: 1.4;
    margin: 0;
    font-size: 0.9rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 减少显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================ 14. 管理员编辑区域 ================ */
.admin-edit-section[b-yaqk3whofl] {
    margin-bottom: 14px; /* 减少间距 */
    padding: 10px; /* 减少内边距 */
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.admin-description[b-yaqk3whofl] {
    width: 100%;
    min-height: 60px; /* 减小最小高度 */
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    margin-bottom: 10px;
    resize: vertical;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: white;
}

    .admin-description:focus[b-yaqk3whofl] {
        border-color: #3b82f6;
        outline: none;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

.admin-actions[b-yaqk3whofl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px; /* 减少间距 */
}

.btn-update[b-yaqk3whofl], .btn-delete[b-yaqk3whofl] {
    padding: 6px 10px; /* 减少内边距 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-update[b-yaqk3whofl] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* 绿色 */
    color: white;
}

    .btn-update:hover[b-yaqk3whofl] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(16, 185, 129, 0.2);
    }

.btn-delete[b-yaqk3whofl] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* 红色 */
    color: white;
}

    .btn-delete:hover[b-yaqk3whofl] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(239, 68, 68, 0.2);
    }

/* ================ 15. 下载按钮区域 ================ */
.download-button-container[b-yaqk3whofl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 14px; /* 减少间距 */
    border-top: 1px solid #e2e8f0;
}

.download-button[b-yaqk3whofl] {
    width: 140px; /* 减小宽度 */
    min-width: 140px;
    padding: 10px 16px; /* 减少内边距 */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); /* 蓝色渐变 */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

    .download-button:hover[b-yaqk3whofl] {
        transform: translateY(-2px); /* 减小动画幅度 */
        box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    }

/* 文件信息 - 靠右对齐 */
.software-meta[b-yaqk3whofl] {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.file-size[b-yaqk3whofl] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.download-text[b-yaqk3whofl] {
    flex: 1;
    text-align: center;
}

/* ================ 16. 模态对话框 ================ */
.modal-overlay[b-yaqk3whofl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 12px;
}

.modal-content[b-yaqk3whofl] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border: 2px solid #e2e8f0;
}

.modal-header[b-yaqk3whofl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    border-radius: 10px 10px 0 0;
}

    .modal-header h3[b-yaqk3whofl] {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 700;
    }

.modal-close[b-yaqk3whofl] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .modal-close:hover[b-yaqk3whofl] {
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(90deg);
    }

.modal-body[b-yaqk3whofl] {
    padding: 20px;
}

.modal-actions[b-yaqk3whofl] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px 22px;
    border-top: 1px solid #e2e8f0;
}

.file-preview[b-yaqk3whofl] {
    margin-top: 14px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.file-info[b-yaqk3whofl] {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
}

/* ================ 17. 动画 ================ */
.spinner[b-yaqk3whofl] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-yaqk3whofl 1s linear infinite;
}

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

@keyframes fadeIn-b-yaqk3whofl {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ================ 18. 响应式设计 ================ */
@media (max-width: 1400px) {
    .software-grid[b-yaqk3whofl] {
        gap: 18px;
    }
}

@media (max-width: 1200px) {
    .software-grid[style*="grid-template-columns: repeat(3, 1fr)"][b-yaqk3whofl] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .download-button[b-yaqk3whofl] {
        width: 130px;
        min-width: 130px;
    }
}

@media (max-width: 992px) {
    .software-grid[style*="grid-template-columns: repeat(2, 1fr)"][b-yaqk3whofl] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .download-container[b-yaqk3whofl] {
        padding: 14px 16px;
    }

    .section-header[b-yaqk3whofl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .section-controls[b-yaqk3whofl] {
        width: 100%;
        justify-content: space-between;
    }

    .admin-actions[b-yaqk3whofl] {
        grid-template-columns: 1fr;
    }

    .download-button-container[b-yaqk3whofl] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .download-button[b-yaqk3whofl] {
        width: 100%;
        max-width: 100%;
    }

    .software-meta[b-yaqk3whofl] {
        margin-left: 0;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .software-grid[style*="grid-template-columns: repeat(1, 1fr)"][b-yaqk3whofl] {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .compact-form .form-row[b-yaqk3whofl] {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-content[b-yaqk3whofl] {
        margin: 8px;
        max-width: none;
    }

    .form-actions[b-yaqk3whofl] {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .upload-btn.compact[b-yaqk3whofl], .cancel-btn.compact[b-yaqk3whofl] {
        width: 100%;
    }

    .download-section[b-yaqk3whofl] {
        padding: 16px;
    }

    .section-title[b-yaqk3whofl] {
        font-size: 1.4rem;
    }
}

@media (max-width: 576px) {
    .download-container[b-yaqk3whofl] {
        padding: 12px;
    }

    .software-content[b-yaqk3whofl] {
        padding: 14px;
    }

    .download-button[b-yaqk3whofl] {
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    .section-title[b-yaqk3whofl] {
        font-size: 1.2rem;
    }

    .admin-panel[b-yaqk3whofl] {
        padding: 14px 18px;
    }

    .admin-title[b-yaqk3whofl] {
        font-size: 1.1rem;
    }

    .columns-selector[b-yaqk3whofl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }

    .columns-dropdown[b-yaqk3whofl] {
        width: 100%;
    }
}

/* 19. 打印样式 */
@media print {
    .admin-panel[b-yaqk3whofl],
    .admin-actions[b-yaqk3whofl],
    .section-controls[b-yaqk3whofl],
    .download-button[b-yaqk3whofl] {
        display: none !important;
    }

    .software-card[b-yaqk3whofl] {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .software-image[b-yaqk3whofl] {
        display: none !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/LFAgentManage1021.razor.rz.scp.css */
/* ============================================================================
   Main container styles - Full parent container
   ============================================================================ */
.lfagent-manage-container[b-ikm7zpf504] {
    padding: 4px; /* 内边距：元素内容与边框之间的间距，4px表示上下左右相同 */
    height: 100% !important; /* 高度：继承父容器高度（原100vh是屏幕高度，会超出父容器） */
    width: 100%; /* 宽度：占据父容器100%宽度 */
    margin: 0; /* 外边距：元素与外部元素的间距，0表示无外边距 */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* 字体族：优先使用Segoe UI，备用系统字体 */
    background: #ffffff; /* 背景色：纯白色 */
    display: flex; /* 显示方式：弹性布局，便于子元素排列 */
    flex-direction: column; /* 弹性方向：垂直排列子元素 */
    overflow: hidden; /* 溢出处理：隐藏超出容器范围的内容 */
    box-sizing: border-box; /* 盒模型：边框和内边距包含在元素总宽高中 */
}
/* ============================================================================
   Edit controls section - Compact layout
   ============================================================================ */
/* 调整子元素间距 */
.edit-controls-section[b-ikm7zpf504] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 8px 8px 8px 8px; /*上右下左*/
    background: #f8f9fa;
    margin: 4px 4px 4px 4px; /* 调整外边距 */
    flex-shrink: 0;    /*表示不压缩，高度由内容决定*/
}

.controls-header[b-ikm7zpf504] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .controls-header h3[b-ikm7zpf504] {
        color: #2d3748;
        margin: 0;
        font-weight: 700;
        font-size: 16px;
        white-space: nowrap;
    }

.control-buttons[b-ikm7zpf504] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   Data grid section - Compact layout
   ============================================================================ */
.data-grid-section[b-ikm7zpf504] {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
    margin: 0 4px 4px 4px; /* 调整外边距 */
    flex: 1; /* 关键：占据剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* ============================================================================
   Table container - Horizontal scrolling
   ============================================================================ */
.table-container[b-ikm7zpf504] {
    flex: 1;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
}

.data-table[b-ikm7zpf504] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1400px;
}

    /* ============================================================================
   Table header styles - Compact design
   ============================================================================ */
    .data-table thead[b-ikm7zpf504] {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .data-table th[b-ikm7zpf504] {
        color: white;
        font-weight: 600;
        border: none;
        padding: 6px 4px;
        font-size: 11px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

/* ============================================================================
   Column width definitions - Optimized layout
   ============================================================================ */
.col-id[b-ikm7zpf504] {
    width: 40px;
    min-width: 40px;
}

.col-code[b-ikm7zpf504] {
    width: 100px;
    min-width: 100px;
}

.col-name[b-ikm7zpf504] {
    width: 120px;
    min-width: 120px;
}

.col-type[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-unit[b-ikm7zpf504] {
    width: 60px;
    min-width: 60px;
}

.col-price[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-total-price[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-count[b-ikm7zpf504] {
    width: 60px;
    min-width: 60px;
}

.col-order[b-ikm7zpf504] {
    width: 70px;
    min-width: 70px;
}

.col-status[b-ikm7zpf504] {
    width: 50px;
    min-width: 50px;
}

.col-remark[b-ikm7zpf504] {
    width: 150px;
    min-width: 150px;
}

.col-picture[b-ikm7zpf504] {
    width: 120px;
    min-width: 120px;
}

.col-actions[b-ikm7zpf504] {
    width: 100px;
    min-width: 100px;
}

/* ============================================================================
   Table data row styles - Compact design with small row spacing
   ============================================================================ */
.data-table td[b-ikm7zpf504] {
    padding: 3px 2px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    font-size: 12px;
}

.data-table tbody tr[b-ikm7zpf504] {
    transition: background-color 0.2s ease;
    height: 40px;
}

    .data-table tbody tr:hover[b-ikm7zpf504] {
        background-color: #f7fafc;
    }

.readonly-cell[b-ikm7zpf504] {
    background-color: #f8f9fa;
    color: #718096;
    font-weight: 500;
}

/* ============================================================================
   Form control styles - Compact design
   ============================================================================ */
.form-input[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 28px;
}

    .form-input:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.form-select[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
    height: 28px;
}

    .form-select:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

.number-input[b-ikm7zpf504] {
    text-align: right;
}

.form-textarea[b-ikm7zpf504] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    resize: vertical;
    min-height: 35px;
    box-sizing: border-box;
    font-family: inherit;
}

    .form-textarea:focus[b-ikm7zpf504] {
        border-color: #4299e1;
        box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
        outline: none;
    }

/* ============================================================================
   Picture cell styles - Small font and compact layout
   ============================================================================ */
.picture-cell[b-ikm7zpf504] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.picture-input[b-ikm7zpf504] {
    font-size: 10px !important;
    height: 24px;
    width: 100%;
}

.picture-buttons[b-ikm7zpf504] {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.btn-pic-upload[b-ikm7zpf504], .btn-pic-preview[b-ikm7zpf504] {
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 8px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

    .btn-pic-upload:hover[b-ikm7zpf504] {
        background: #e9ecef;
    }

.btn-pic-preview[b-ikm7zpf504] {
    background: #e3f2fd;
    border-color: #90caf9;
}

    .btn-pic-preview:hover[b-ikm7zpf504] {
        background: #bbdefb;
    }

/* ============================================================================
   Action buttons styles - Two rows layout
   ============================================================================ */
.action-buttons[b-ikm7zpf504] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.btn-save[b-ikm7zpf504], .btn-delete[b-ikm7zpf504] {
    padding: 3px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    height: 20px;
    gap: 2px;
}

.btn-save[b-ikm7zpf504] {
    background: #bdc3c7;
    color: white;
}

.btn-save-modified[b-ikm7zpf504] {
    background: #3498db !important;
}

.btn-save:hover:not(:disabled)[b-ikm7zpf504] {
    background: #2980b9;
    transform: translateY(-1px);
}

.btn-save:disabled[b-ikm7zpf504] {
    background: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    transform: none !important;
}

.btn-delete[b-ikm7zpf504] {
    background: #e74c3c;
    color: white;
}

    .btn-delete:hover[b-ikm7zpf504] {
        background: #c0392b;
        transform: translateY(-1px);
    }

/* ============================================================================
   Checkbox styles
   ============================================================================ */
.checkbox-label[b-ikm7zpf504] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-input[b-ikm7zpf504] {
    display: none;
}

.checkmark[b-ikm7zpf504] {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-input:checked + .checkmark[b-ikm7zpf504] {
    background: #27ae60;
    border-color: #27ae60;
}

    .checkbox-input:checked + .checkmark[b-ikm7zpf504]::after {
        content: '✓';
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

/* ============================================================================
   Button styles
   ============================================================================ */
.btn[b-ikm7zpf504] {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    min-height: 28px;
    white-space: nowrap;
}

    .btn:hover[b-ikm7zpf504] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

.btn-success[b-ikm7zpf504] {
    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
    color: white;
}

.btn-secondary[b-ikm7zpf504] {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

.btn:disabled[b-ikm7zpf504] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================================
   No data styles
   ============================================================================ */
.no-data[b-ikm7zpf504] {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
    font-style: italic;
    background: white;
    border-radius: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .no-data i[b-ikm7zpf504] {
        font-size: 36px;
        margin-bottom: 12px;
        color: #cbd5e0;
    }

    .no-data p[b-ikm7zpf504] {
        font-size: 16px;
        margin: 0;
    }

/* ============================================================================
   Scrollbar styles
   ============================================================================ */
.table-container[b-ikm7zpf504]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-container[b-ikm7zpf504]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.table-container[b-ikm7zpf504]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .table-container[b-ikm7zpf504]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* _content/LEAFBlazorApp25/Components/Pages/LFContacWe.razor.rz.scp.css */
/* ===== 基础页面样式 ===== */
.contact-page[b-r5i0f0d5or] {
    /*min-height: calc(100vh - 100px);*/
    min-height: auto;
    /*background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);*/
    padding: 12px 8px 15px 8px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #333;
    line-height: 1.3;
    flex-direction: column;
    gap: 10px; /* 控制间距 */
}


.page-container[b-r5i0f0d5or] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8px;
    flex: 1;
}

/* ===== 联系卡片样式 ===== */
.contact-card[b-r5i0f0d5or] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
    overflow: hidden;
    margin-bottom: 20px;
    border: 2px solid #4caf50;
}

/* 卡片头部 */
.card-header[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 10px 22px;
    color: white;
    position: relative;
    border-bottom: 2px solid #1b5e20;
}

    .card-header[b-r5i0f0d5or]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
    }

.header-content[b-r5i0f0d5or] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon-circle[b-r5i0f0d5or] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

    .header-icon-circle i[b-r5i0f0d5or] {
        font-size: 1.5rem;
        color: white;
    }

.header-text h2[b-r5i0f0d5or] {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
}

.header-text p[b-r5i0f0d5or] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
    line-height: 1.2;
}

/* 卡片主体 */
.card-body[b-r5i0f0d5or] {
    padding: 22px;
}

/* 表单样式 - 修改行间距 */
.contact-form[b-r5i0f0d5or] {
    width: 100%;
}

.form-row[b-r5i0f0d5or] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* 从16px减小到10px */
    margin-bottom: 10px; /* 从16px减小到10px */
}

.form-group[b-r5i0f0d5or] {
    margin-bottom: 5px; /* 从16px减小到10px */
}

    .form-group.full-width[b-r5i0f0d5or] {
        grid-column: 1 / -1;
        margin-bottom: 10px; /* 从18px减小到12px */
    }

.form-label[b-r5i0f0d5or] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 6px; /* 从6px减小到4px */
    font-size: 0.9rem;
    line-height: 1.2;
}

    .form-label i[b-r5i0f0d5or] {
        color: #4caf50;
        font-size: 0.9rem;
    }

.required[b-r5i0f0d5or] {
    color: #f44336;
    font-weight: bold;
    margin-left: 2px;
}

.input-container[b-r5i0f0d5or] {
    position: relative;
}

.form-input[b-r5i0f0d5or] {
    width: 100%;
    padding: 8px 12px; /* 从10px 14px减小到8px 12px */
    border: 2px solid #c8e6c9;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #f9f9f9;
    color: #333;
    font-family: inherit;
    height: 38px; /* 从42px减小到38px */
}

    .form-input:focus[b-r5i0f0d5or] {
        outline: none;
        border-color: #4caf50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    }

    .form-input:hover[b-r5i0f0d5or] {
        border-color: #81c784;
    }

/* 选择框样式 */
.select-container[b-r5i0f0d5or] {
    position: relative;
}

.select-input[b-r5i0f0d5or] {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234caf50' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px;
}

.select-arrow[b-r5i0f0d5or] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #4caf50;
    pointer-events: none;
    font-size: 12px;
}

.input-hint[b-r5i0f0d5or] {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* 文本域样式 */
.textarea-container[b-r5i0f0d5or] {
    position: relative;
}

.textarea-input[b-r5i0f0d5or] {
    min-height: 90px; /* 从100px减小到90px */
    resize: vertical;
    line-height: 1.4;
    padding-top: 8px; /* 从10px减小到8px */
    padding-bottom: 8px; /* 从10px减小到8px */
}

.textarea-footer[b-r5i0f0d5or] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.char-counter[b-r5i0f0d5or] {
    font-size: 0.8rem;
    color: #666;
}

.char-count[b-r5i0f0d5or] {
    font-weight: 600;
    color: #4caf50;
    font-size: 0.85rem;
}

/* 错误信息 */
.error-message[b-r5i0f0d5or] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f44336;
    font-size: 0.8rem;
    margin-top: 4px;
    padding: 4px 8px; /* 从6px 10px减小到4px 8px */
    background: rgba(244, 67, 54, 0.08);
    border-radius: 4px;
    border-left: 2px solid #f44336;
}

    .error-message i[b-r5i0f0d5or] {
        font-size: 0.85rem;
    }

/* 表单操作按钮 */
.form-actions[b-r5i0f0d5or] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px; /* 从20px减小到16px */
    padding-top: 12px; /* 从16px减小到12px */
    border-top: 1px solid #e0f2e1;
}

.btn[b-r5i0f0d5or] {
    padding: 8px 18px; /* 从10px 22px减小到8px 18px */
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    height: 36px; /* 从40px减小到36px */
}

    .btn:hover:not(:disabled)[b-r5i0f0d5or] {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

    .btn:active:not(:disabled)[b-r5i0f0d5or] {
        transform: translateY(0);
    }

    .btn:disabled[b-r5i0f0d5or] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.btn-reset[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #757575, #616161);
    color: white;
}

    .btn-reset:hover:not(:disabled)[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #616161, #424242);
    }

.btn-submit[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

    .btn-submit:hover:not(:disabled)[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
    }

/* ===== 管理员界面样式 ===== */
.admin-section[b-r5i0f0d5or] {
    max-width: 1000px;
    margin: 0 auto 18px;
    padding: 0 8px;
}

.admin-card[b-r5i0f0d5or] {
    background: white;
    border-radius: 10px;
    border: 2px solid #ffb300;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(255, 179, 0, 0.18);
    margin-bottom: 16px;
}

.admin-header[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #ffb300, #ff9800);
    padding: 10px 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ff8f00;
}

.admin-header-icon[b-r5i0f0d5or] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid white;
}

    .admin-header-icon i[b-r5i0f0d5or] {
        font-size: 1.2rem;
        color: #333;
    }

.admin-header-text h3[b-r5i0f0d5or] {
    margin: 0 0 2px 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-header-text p[b-r5i0f0d5or] {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.1;
}

.admin-body[b-r5i0f0d5or] {
    padding: 16px 18px;
}

.options-container[b-r5i0f0d5or] {
    margin-bottom: 16px;
}

.option-row[b-r5i0f0d5or] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #fffbf0;
    border-radius: 6px;
    border: 1px solid #ffe082;
    align-items: center;
}

.option-input-group[b-r5i0f0d5or] {
    flex: 1;
    display: flex;
    gap: 10px;
}

.input-with-icon[b-r5i0f0d5or] {
    flex: 1;
    position: relative;
}

    .input-with-icon .icon[b-r5i0f0d5or] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #ffb300;
        font-size: 0.85rem;
        z-index: 1;
    }

    .input-with-icon .form-control[b-r5i0f0d5or] {
        padding-left: 30px;
        background: white;
        border: 1px solid #ffe082;
        border-radius: 4px;
        height: 36px;
        font-size: 0.85rem;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .input-with-icon .form-control:focus[b-r5i0f0d5or] {
            border-color: #ffb300;
            box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.15);
            outline: none;
        }

/* 删除按钮样式 - 调整以适应文本 */
.btn-delete[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    min-width: 80px;
    white-space: nowrap;
}

    .btn-delete:hover[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #d32f2f, #b71c1c);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(244, 67, 54, 0.2);
    }

.admin-actions[b-r5i0f0d5or] {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #ffe082;
}

.btn-add[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
}

    .btn-add:hover[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.2);
    }

.btn-save[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    height: 36px;
}

    .btn-save:hover:not(:disabled)[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #1976d2, #1565c0);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(33, 150, 243, 0.2);
    }

.admin-info[b-r5i0f0d5or] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    border-left: 2px solid #2196f3;
    font-size: 0.8rem;
    color: #555;
}

    .admin-info i[b-r5i0f0d5or] {
        color: #2196f3;
        font-size: 0.9rem;
    }

    .admin-info code[b-r5i0f0d5or] {
        background: #e0e0e0;
        padding: 1px 4px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 0.8rem;
    }

/* ===== 成功模态框样式 ===== */
.success-modal[b-r5i0f0d5or] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay[b-r5i0f0d5or] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.modal-content[b-r5i0f0d5or] {
    position: relative;
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-r5i0f0d5or 0.25s ease-out;
    z-index: 1001;
    border: 2px solid #4caf50;
    overflow: hidden;
}

@keyframes modalSlideIn-b-r5i0f0d5or {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 18px;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-icon[b-r5i0f0d5or] {
    font-size: 1.8rem;
}

.modal-header h3[b-r5i0f0d5or] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    flex: 1;
    line-height: 1.1;
}

.modal-body[b-r5i0f0d5or] {
    padding: 20px;
    text-align: center;
}

    .modal-body p[b-r5i0f0d5or] {
        color: #555;
        margin: 0;
        line-height: 1.4;
        font-size: 0.95rem;
    }

.modal-footer[b-r5i0f0d5or] {
    padding: 14px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

.btn-ok[b-r5i0f0d5or] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 8px 28px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    height: 36px;
}

    .btn-ok:hover[b-r5i0f0d5or] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.25);
    }

/* ===== 加载遮罩样式 ===== */
.loading-overlay[b-r5i0f0d5or] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-content[b-r5i0f0d5or] {
    text-align: center;
    max-width: 280px;
    width: 90%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    padding: 24px;
    border-radius: 10px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.spinner-container[b-r5i0f0d5or] {
    width: 50px;
    height: 50px;
    margin: 0 auto 14px;
    position: relative;
}

.spinner[b-r5i0f0d5or] {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(76, 175, 80, 0.2);
    border-top: 3px solid #4caf50;
    border-radius: 50%;
    animation: spin-b-r5i0f0d5or 0.8s linear infinite;
}

@keyframes spin-b-r5i0f0d5or {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-r5i0f0d5or] {
    color: white;
}

    .loading-text p[b-r5i0f0d5or] {
        margin: 0;
        font-size: 0.95rem;
        opacity: 0.9;
    }

/* ===== 响应式设计 - 小屏幕优化 ===== */
@media (max-width: 768px) {
    .contact-page[b-r5i0f0d5or] {
        padding: 8px 4px 10px 4px; /* 进一步减小间距 */
    }

    .page-container[b-r5i0f0d5or] {
        padding: 0 4px;
    }

    .card-header[b-r5i0f0d5or] {
        padding: 8px 12px; /* 减小头部内边距 */
    }

    .header-content[b-r5i0f0d5or] {
        gap: 8px;
    }

    .header-icon-circle[b-r5i0f0d5or] {
        width: 32px; /* 减小图标大小 */
        height: 32px;
    }

        .header-icon-circle i[b-r5i0f0d5or] {
            font-size: 1rem;
        }

    .header-text h2[b-r5i0f0d5or] {
        font-size: 1.1rem; /* 减小标题大小 */
        margin-bottom: 2px;
    }

    .header-text p[b-r5i0f0d5or] {
        font-size: 0.8rem;
    }

    .card-body[b-r5i0f0d5or] {
        padding: 12px; /* 减小内边距 */
    }

    .form-row[b-r5i0f0d5or] {
        grid-template-columns: 1fr;
        gap: 8px; /* 进一步减小间距 */
        margin-bottom: 8px;
    }

    .form-group[b-r5i0f0d5or] {
        margin-bottom: 5px; /* 进一步减小间距 */
    }

        .form-group.full-width[b-r5i0f0d5or] {
            margin-bottom: 5px;
        }

    .form-label[b-r5i0f0d5or] {
        margin-bottom: 3px;
        font-size: 0.85rem;
    }

    .form-input[b-r5i0f0d5or] {
        padding: 6px 10px; /* 进一步减小输入框内边距 */
        font-size: 0.85rem;
        height: 34px; /* 进一步减小高度 */
    }

    .textarea-input[b-r5i0f0d5or] {
        min-height: 80px; /* 进一步减小高度 */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .form-actions[b-r5i0f0d5or] {
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
    }

    .btn[b-r5i0f0d5or] {
        padding: 6px 12px;
        font-size: 0.85rem;
        min-width: 100px;
        height: 32px; /* 进一步减小按钮高度 */
    }

    .option-row[b-r5i0f0d5or] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        margin-bottom: 8px;
    }

    .option-input-group[b-r5i0f0d5or] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .input-with-icon .form-control[b-r5i0f0d5or] {
        height: 32px;
        font-size: 0.8rem;
    }

    .btn-delete[b-r5i0f0d5or] {
        width: 100%;
        min-width: auto;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .admin-actions[b-r5i0f0d5or] {
        flex-direction: column;
        gap: 8px;
    }

    .btn-add[b-r5i0f0d5or], .btn-save[b-r5i0f0d5or] {
        width: 100%;
        height: 32px;
        font-size: 0.85rem;
    }

    .admin-header[b-r5i0f0d5or] {
        padding: 8px 12px;
        gap: 8px;
    }

    .admin-header-icon[b-r5i0f0d5or] {
        width: 30px;
        height: 30px;
    }

    .admin-header-text h3[b-r5i0f0d5or] {
        font-size: 1.1rem;
    }

    .admin-body[b-r5i0f0d5or] {
        padding: 12px;
    }

    .modal-content[b-r5i0f0d5or] {
        width: 92%;
        max-width: 280px; /* 进一步减小模态框大小 */
    }

    .modal-header[b-r5i0f0d5or] {
        padding: 12px;
    }

    .modal-icon[b-r5i0f0d5or] {
        font-size: 1.5rem;
    }

    .modal-header h3[b-r5i0f0d5or] {
        font-size: 1rem;
    }

    .modal-body[b-r5i0f0d5or] {
        padding: 12px;
    }

        .modal-body p[b-r5i0f0d5or] {
            font-size: 0.85rem;
        }
}

@media (max-width: 480px) {
    /* 超小屏幕进一步优化 */
    .contact-page[b-r5i0f0d5or] {
        padding: 6px 3px 8px 3px;
    }

    .card-header[b-r5i0f0d5or] {
        padding: 6px 10px;
    }

    .header-icon-circle[b-r5i0f0d5or] {
        width: 28px;
        height: 28px;
    }

    .header-text h2[b-r5i0f0d5or] {
        font-size: 1rem;
    }

    .card-body[b-r5i0f0d5or] {
        padding: 10px;
    }

    .form-row[b-r5i0f0d5or] {
        gap: 6px;
        margin-bottom: 6px;
    }

    .form-group[b-r5i0f0d5or] {
        margin-bottom: 6px;
    }

    .form-input[b-r5i0f0d5or] {
        height: 32px;
        font-size: 0.8rem;
    }

    .textarea-input[b-r5i0f0d5or] {
        min-height: 70px;
    }

    .btn[b-r5i0f0d5or] {
        padding: 5px 10px;
        font-size: 0.8rem;
        min-width: 90px;
        height: 30px;
    }

    .modal-content[b-r5i0f0d5or] {
        width: 95%;
        max-width: 250px;
    }

    .modal-header[b-r5i0f0d5or] {
        padding: 10px;
    }

    .btn-ok[b-r5i0f0d5or] {
        padding: 6px 20px;
        font-size: 0.85rem;
        height: 32px;
    }
}




/* _content/LEAFBlazorApp25/Components/Pages/LFContacWeOnly.razor.rz.scp.css */
/* ===== 基础页面样式 ===== */
.contact-page[b-xszdo3ao0u] {
    min-height: calc(100vh - 100px);
    /*background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);*/
    padding: 12px 8px 15px 8px;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #333;
    line-height: 1.3;
}

.page-container[b-xszdo3ao0u] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8px;
}

/* ===== 联系卡片样式 ===== */
.contact-card[b-xszdo3ao0u] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
    overflow: hidden;
    margin-bottom: 20px;
    border: 2px solid #4caf50;
}

/* 卡片头部 */
.card-header[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 10px 22px;
    color: white;
    position: relative;
    border-bottom: 2px solid #1b5e20;
}

    .card-header[b-xszdo3ao0u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ffc107, #ff9800, #ffc107);
    }

.header-content[b-xszdo3ao0u] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon-circle[b-xszdo3ao0u] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

    .header-icon-circle i[b-xszdo3ao0u] {
        font-size: 1.5rem;
        color: white;
    }

.header-text h2[b-xszdo3ao0u] {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
}

.header-text p[b-xszdo3ao0u] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
    line-height: 1.2;
}

/* 卡片主体 */
.card-body[b-xszdo3ao0u] {
    padding: 22px;
}

/* 表单样式 - 修改行间距 */
.contact-form[b-xszdo3ao0u] {
    width: 100%;
}

.form-row[b-xszdo3ao0u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* 从16px减小到10px */
    margin-bottom: 10px; /* 从16px减小到10px */
}

.form-group[b-xszdo3ao0u] {
    margin-bottom: 10px; /* 从16px减小到10px */
}

    .form-group.full-width[b-xszdo3ao0u] {
        grid-column: 1 / -1;
        margin-bottom: 12px; /* 从18px减小到12px */
    }

.form-label[b-xszdo3ao0u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 4px; /* 从6px减小到4px */
    font-size: 0.9rem;
    line-height: 1.2;
}

    .form-label i[b-xszdo3ao0u] {
        color: #4caf50;
        font-size: 0.9rem;
    }

.required[b-xszdo3ao0u] {
    color: #f44336;
    font-weight: bold;
    margin-left: 2px;
}

.input-container[b-xszdo3ao0u] {
    position: relative;
}

.form-input[b-xszdo3ao0u] {
    width: 100%;
    padding: 8px 12px; /* 从10px 14px减小到8px 12px */
    border: 2px solid #c8e6c9;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #f9f9f9;
    color: #333;
    font-family: inherit;
    height: 38px; /* 从42px减小到38px */
}

    .form-input:focus[b-xszdo3ao0u] {
        outline: none;
        border-color: #4caf50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
    }

    .form-input:hover[b-xszdo3ao0u] {
        border-color: #81c784;
    }

/* 选择框样式 */
.select-container[b-xszdo3ao0u] {
    position: relative;
}

.select-input[b-xszdo3ao0u] {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234caf50' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px;
}

.select-arrow[b-xszdo3ao0u] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #4caf50;
    pointer-events: none;
    font-size: 12px;
}

.input-hint[b-xszdo3ao0u] {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* 文本域样式 */
.textarea-container[b-xszdo3ao0u] {
    position: relative;
}

.textarea-input[b-xszdo3ao0u] {
    min-height: 90px; /* 从100px减小到90px */
    resize: vertical;
    line-height: 1.4;
    padding-top: 8px; /* 从10px减小到8px */
    padding-bottom: 8px; /* 从10px减小到8px */
}

.textarea-footer[b-xszdo3ao0u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.char-counter[b-xszdo3ao0u] {
    font-size: 0.8rem;
    color: #666;
}

.char-count[b-xszdo3ao0u] {
    font-weight: 600;
    color: #4caf50;
    font-size: 0.85rem;
}

/* 错误信息 */
.error-message[b-xszdo3ao0u] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f44336;
    font-size: 0.8rem;
    margin-top: 4px;
    padding: 4px 8px; /* 从6px 10px减小到4px 8px */
    background: rgba(244, 67, 54, 0.08);
    border-radius: 4px;
    border-left: 2px solid #f44336;
}

    .error-message i[b-xszdo3ao0u] {
        font-size: 0.85rem;
    }

/* 表单操作按钮 */
.form-actions[b-xszdo3ao0u] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px; /* 从20px减小到16px */
    padding-top: 12px; /* 从16px减小到12px */
    border-top: 1px solid #e0f2e1;
}

.btn[b-xszdo3ao0u] {
    padding: 8px 18px; /* 从10px 22px减小到8px 18px */
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    height: 36px; /* 从40px减小到36px */
}

    .btn:hover:not(:disabled)[b-xszdo3ao0u] {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

    .btn:active:not(:disabled)[b-xszdo3ao0u] {
        transform: translateY(0);
    }

    .btn:disabled[b-xszdo3ao0u] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.btn-reset[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #757575, #616161);
    color: white;
}

    .btn-reset:hover:not(:disabled)[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #616161, #424242);
    }

.btn-submit[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

    .btn-submit:hover:not(:disabled)[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
    }

/* ===== 管理员界面样式 ===== */
.admin-section[b-xszdo3ao0u] {
    max-width: 1000px;
    margin: 0 auto 18px;
    padding: 0 8px;
}

.admin-card[b-xszdo3ao0u] {
    background: white;
    border-radius: 10px;
    border: 2px solid #ffb300;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(255, 179, 0, 0.18);
    margin-bottom: 16px;
}

.admin-header[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #ffb300, #ff9800);
    padding: 10px 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ff8f00;
}

.admin-header-icon[b-xszdo3ao0u] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid white;
}

    .admin-header-icon i[b-xszdo3ao0u] {
        font-size: 1.2rem;
        color: #333;
    }

.admin-header-text h3[b-xszdo3ao0u] {
    margin: 0 0 2px 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.admin-header-text p[b-xszdo3ao0u] {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
    line-height: 1.1;
}

.admin-body[b-xszdo3ao0u] {
    padding: 16px 18px;
}

.options-container[b-xszdo3ao0u] {
    margin-bottom: 16px;
}

.option-row[b-xszdo3ao0u] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #fffbf0;
    border-radius: 6px;
    border: 1px solid #ffe082;
    align-items: center;
}

.option-input-group[b-xszdo3ao0u] {
    flex: 1;
    display: flex;
    gap: 10px;
}

.input-with-icon[b-xszdo3ao0u] {
    flex: 1;
    position: relative;
}

    .input-with-icon .icon[b-xszdo3ao0u] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #ffb300;
        font-size: 0.85rem;
        z-index: 1;
    }

    .input-with-icon .form-control[b-xszdo3ao0u] {
        padding-left: 30px;
        background: white;
        border: 1px solid #ffe082;
        border-radius: 4px;
        height: 36px;
        font-size: 0.85rem;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .input-with-icon .form-control:focus[b-xszdo3ao0u] {
            border-color: #ffb300;
            box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.15);
            outline: none;
        }

/* 删除按钮样式 - 调整以适应文本 */
.btn-delete[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    min-width: 80px;
    white-space: nowrap;
}

    .btn-delete:hover[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #d32f2f, #b71c1c);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(244, 67, 54, 0.2);
    }

.admin-actions[b-xszdo3ao0u] {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #ffe082;
}

.btn-add[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
}

    .btn-add:hover[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.2);
    }

.btn-save[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    height: 36px;
}

    .btn-save:hover:not(:disabled)[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #1976d2, #1565c0);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(33, 150, 243, 0.2);
    }

.admin-info[b-xszdo3ao0u] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    border-left: 2px solid #2196f3;
    font-size: 0.8rem;
    color: #555;
}

    .admin-info i[b-xszdo3ao0u] {
        color: #2196f3;
        font-size: 0.9rem;
    }

    .admin-info code[b-xszdo3ao0u] {
        background: #e0e0e0;
        padding: 1px 4px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 0.8rem;
    }

/* ===== 成功模态框样式 ===== */
.success-modal[b-xszdo3ao0u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay[b-xszdo3ao0u] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.modal-content[b-xszdo3ao0u] {
    position: relative;
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-xszdo3ao0u 0.25s ease-out;
    z-index: 1001;
    border: 2px solid #4caf50;
    overflow: hidden;
}

@keyframes modalSlideIn-b-xszdo3ao0u {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    padding: 18px;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-icon[b-xszdo3ao0u] {
    font-size: 1.8rem;
}

.modal-header h3[b-xszdo3ao0u] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    flex: 1;
    line-height: 1.1;
}

.modal-body[b-xszdo3ao0u] {
    padding: 20px;
    text-align: center;
}

    .modal-body p[b-xszdo3ao0u] {
        color: #555;
        margin: 0;
        line-height: 1.4;
        font-size: 0.95rem;
    }

.modal-footer[b-xszdo3ao0u] {
    padding: 14px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

.btn-ok[b-xszdo3ao0u] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    padding: 8px 28px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    height: 36px;
}

    .btn-ok:hover[b-xszdo3ao0u] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.25);
    }

/* ===== 加载遮罩样式 ===== */
.loading-overlay[b-xszdo3ao0u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-content[b-xszdo3ao0u] {
    text-align: center;
    max-width: 280px;
    width: 90%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    padding: 24px;
    border-radius: 10px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.spinner-container[b-xszdo3ao0u] {
    width: 50px;
    height: 50px;
    margin: 0 auto 14px;
    position: relative;
}

.spinner[b-xszdo3ao0u] {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(76, 175, 80, 0.2);
    border-top: 3px solid #4caf50;
    border-radius: 50%;
    animation: spin-b-xszdo3ao0u 0.8s linear infinite;
}

@keyframes spin-b-xszdo3ao0u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-xszdo3ao0u] {
    color: white;
}

    .loading-text p[b-xszdo3ao0u] {
        margin: 0;
        font-size: 0.95rem;
        opacity: 0.9;
    }

/* ===== 响应式设计 - 小屏幕优化 ===== */
@media (max-width: 768px) {
    .contact-page[b-xszdo3ao0u] {
        padding: 8px 4px 10px 4px; /* 进一步减小间距 */
    }

    .page-container[b-xszdo3ao0u] {
        padding: 0 4px;
    }

    .card-header[b-xszdo3ao0u] {
        padding: 8px 12px; /* 减小头部内边距 */
    }

    .header-content[b-xszdo3ao0u] {
        gap: 8px;
    }

    .header-icon-circle[b-xszdo3ao0u] {
        width: 32px; /* 减小图标大小 */
        height: 32px;
    }

        .header-icon-circle i[b-xszdo3ao0u] {
            font-size: 1rem;
        }

    .header-text h2[b-xszdo3ao0u] {
        font-size: 1.1rem; /* 减小标题大小 */
        margin-bottom: 2px;
    }

    .header-text p[b-xszdo3ao0u] {
        font-size: 0.8rem;
    }

    .card-body[b-xszdo3ao0u] {
        padding: 12px; /* 减小内边距 */
    }

    .form-row[b-xszdo3ao0u] {
        grid-template-columns: 1fr;
        gap: 8px; /* 进一步减小间距 */
        margin-bottom: 8px;
    }

    .form-group[b-xszdo3ao0u] {
        margin-bottom: 8px; /* 进一步减小间距 */
    }

        .form-group.full-width[b-xszdo3ao0u] {
            margin-bottom: 10px;
        }

    .form-label[b-xszdo3ao0u] {
        margin-bottom: 3px;
        font-size: 0.85rem;
    }

    .form-input[b-xszdo3ao0u] {
        padding: 6px 10px; /* 进一步减小输入框内边距 */
        font-size: 0.85rem;
        height: 34px; /* 进一步减小高度 */
    }

    .textarea-input[b-xszdo3ao0u] {
        min-height: 80px; /* 进一步减小高度 */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .form-actions[b-xszdo3ao0u] {
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
    }

    .btn[b-xszdo3ao0u] {
        padding: 6px 12px;
        font-size: 0.85rem;
        min-width: 100px;
        height: 32px; /* 进一步减小按钮高度 */
    }

    .option-row[b-xszdo3ao0u] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        margin-bottom: 8px;
    }

    .option-input-group[b-xszdo3ao0u] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .input-with-icon .form-control[b-xszdo3ao0u] {
        height: 32px;
        font-size: 0.8rem;
    }

    .btn-delete[b-xszdo3ao0u] {
        width: 100%;
        min-width: auto;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .admin-actions[b-xszdo3ao0u] {
        flex-direction: column;
        gap: 8px;
    }

    .btn-add[b-xszdo3ao0u], .btn-save[b-xszdo3ao0u] {
        width: 100%;
        height: 32px;
        font-size: 0.85rem;
    }

    .admin-header[b-xszdo3ao0u] {
        padding: 8px 12px;
        gap: 8px;
    }

    .admin-header-icon[b-xszdo3ao0u] {
        width: 30px;
        height: 30px;
    }

    .admin-header-text h3[b-xszdo3ao0u] {
        font-size: 1.1rem;
    }

    .admin-body[b-xszdo3ao0u] {
        padding: 12px;
    }

    .modal-content[b-xszdo3ao0u] {
        width: 92%;
        max-width: 280px; /* 进一步减小模态框大小 */
    }

    .modal-header[b-xszdo3ao0u] {
        padding: 12px;
    }

    .modal-icon[b-xszdo3ao0u] {
        font-size: 1.5rem;
    }

    .modal-header h3[b-xszdo3ao0u] {
        font-size: 1rem;
    }

    .modal-body[b-xszdo3ao0u] {
        padding: 12px;
    }

        .modal-body p[b-xszdo3ao0u] {
            font-size: 0.85rem;
        }
}

@media (max-width: 480px) {
    /* 超小屏幕进一步优化 */
    .contact-page[b-xszdo3ao0u] {
        padding: 6px 3px 8px 3px;
    }

    .card-header[b-xszdo3ao0u] {
        padding: 6px 10px;
    }

    .header-icon-circle[b-xszdo3ao0u] {
        width: 28px;
        height: 28px;
    }

    .header-text h2[b-xszdo3ao0u] {
        font-size: 1rem;
    }

    .card-body[b-xszdo3ao0u] {
        padding: 10px;
    }

    .form-row[b-xszdo3ao0u] {
        gap: 6px;
        margin-bottom: 6px;
    }

    .form-group[b-xszdo3ao0u] {
        margin-bottom: 6px;
    }

    .form-input[b-xszdo3ao0u] {
        height: 32px;
        font-size: 0.8rem;
    }

    .textarea-input[b-xszdo3ao0u] {
        min-height: 70px;
    }

    .btn[b-xszdo3ao0u] {
        padding: 5px 10px;
        font-size: 0.8rem;
        min-width: 90px;
        height: 30px;
    }

    .modal-content[b-xszdo3ao0u] {
        width: 95%;
        max-width: 250px;
    }

    .modal-header[b-xszdo3ao0u] {
        padding: 10px;
    }

    .btn-ok[b-xszdo3ao0u] {
        padding: 6px 20px;
        font-size: 0.85rem;
        height: 32px;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/PictureV1.razor.rz.scp.css */
/* 管理员面板样式 */
.admin-panel[b-o8h8ja4rnt] {
    border-left: 4px solid #007bff;
}

.admin-actions[b-o8h8ja4rnt] {
    white-space: nowrap;
}

/* 控制面板样式 */
.controls-container[b-o8h8ja4rnt] {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}

.control-label[b-o8h8ja4rnt] {
    font-weight: 500;
    color: #495057;
}

/* 卡片样式 */
.feature-card[b-o8h8ja4rnt] {
    transition: transform 0.2s, box-shadow 0.2s;
}

    .feature-card:hover[b-o8h8ja4rnt] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

.feature-title[b-o8h8ja4rnt] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.feature-description[b-o8h8ja4rnt] {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 轮播样式 */
.carousel-container[b-o8h8ja4rnt] {
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
}

.carousel-track[b-o8h8ja4rnt] {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide[b-o8h8ja4rnt] {
    flex-shrink: 0;
    position: relative;
}

.carousel-image[b-o8h8ja4rnt] {
    object-fit: contain;
}

.image-name[b-o8h8ja4rnt] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.carousel-btn[b-o8h8ja4rnt] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s;
}

    .carousel-btn:hover[b-o8h8ja4rnt] {
        opacity: 1;
    }

    .carousel-btn.prev[b-o8h8ja4rnt] {
        left: 0.5rem;
    }

    .carousel-btn.next[b-o8h8ja4rnt] {
        right: 0.5rem;
    }

.carousel-indicators[b-o8h8ja4rnt] {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    z-index: 10;
}

.carousel-indicator[b-o8h8ja4rnt] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s;
}

    .carousel-indicator.active[b-o8h8ja4rnt] {
        background-color: white;
    }

    .carousel-indicator:hover[b-o8h8ja4rnt] {
        background-color: rgba(255, 255, 255, 0.8);
    }

/* 模态框样式 */
.modal-backdrop.show[b-o8h8ja4rnt] {
    opacity: 0.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .controls-container[b-o8h8ja4rnt] {
        flex-direction: column;
        gap: 1rem;
    }

    .control-group[b-o8h8ja4rnt] {
        justify-content: center;
    }

    .feature-title[b-o8h8ja4rnt] {
        font-size: 1rem;
    }
}
/* _content/LEAFBlazorApp25/Components/Pages/SmsDemo.razor.rz.scp.css */
/* Components/Pages/SmsDemo.razor.css */
.loading-overlay[b-x8fyk8tg15] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 卡片阴影效果增强 */
.card[b-x8fyk8tg15] {
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover[b-x8fyk8tg15] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

/* 表单控件样式优化 */
.form-control:focus[b-x8fyk8tg15], .form-select:focus[b-x8fyk8tg15] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* 按钮样式优化 */
.btn[b-x8fyk8tg15] {
    transition: all 0.15s ease-in-out;
}

.btn-primary[b-x8fyk8tg15] {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border: none;
}

    .btn-primary:hover[b-x8fyk8tg15] {
        background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
        transform: translateY(-1px);
    }

/* 警告框样式优化 */
.alert[b-x8fyk8tg15] {
    border: none;
    border-left: 4px solid;
}

.alert-success[b-x8fyk8tg15] {
    border-left-color: #198754;
    background-color: #f8fff9;
}

.alert-danger[b-x8fyk8tg15] {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.alert-warning[b-x8fyk8tg15] {
    border-left-color: #ffc107;
    background-color: #fffef5;
}

/* 输入组样式 */
.input-group .btn-outline-secondary[b-x8fyk8tg15] {
    border-color: #ced4da;
    transition: all 0.15s ease-in-out;
}

    .input-group .btn-outline-secondary:hover[b-x8fyk8tg15] {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

/* 徽章样式优化 */
.badge[b-x8fyk8tg15] {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-body[b-x8fyk8tg15] {
        padding: 1rem;
    }

    .btn[b-x8fyk8tg15] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-group[b-x8fyk8tg15] {
        flex-direction: column;
    }
}

/* 动画效果 */
.spinner-border[b-x8fyk8tg15] {
    animation: spinner-border-b-x8fyk8tg15 0.75s linear infinite;
}

@keyframes spinner-border-b-x8fyk8tg15 {
    to {
        transform: rotate(360deg);
    }
}

/* 自定义滚动条 */
[b-x8fyk8tg15]::-webkit-scrollbar {
    width: 8px;
}

[b-x8fyk8tg15]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

[b-x8fyk8tg15]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    [b-x8fyk8tg15]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 表单标签样式 */
.form-label.fw-semibold[b-x8fyk8tg15] {
    color: #495057;
    margin-bottom: 0.5rem;
}

/* 单选按钮组样式 */
.form-check-inline[b-x8fyk8tg15] {
    margin-right: 1rem;
}

.form-check-input:checked[b-x8fyk8tg15] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 文本区域样式 */
.form-control[rows="3"][b-x8fyk8tg15] {
    resize: vertical;
    min-height: 80px;
}

/* 使用说明区域样式 */
.small li[b-x8fyk8tg15] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
/* _content/LEAFBlazorApp25/Components/Pages/WeComDemo.razor.rz.scp.css */
/* Components/Pages/WeComDemo.razor.css */
.loading-overlay[b-ubenshyzdt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 企业微信主题色调整 */
.card-header.bg-success[b-ubenshyzdt] {
    background: linear-gradient(135deg, #1aad19 0%, #0d8b0c 100%) !important;
}

.btn-success[b-ubenshyzdt] {
    background: linear-gradient(135deg, #1aad19 0%, #0d8b0c 100%);
    border: none;
}

    .btn-success:hover[b-ubenshyzdt] {
        background: linear-gradient(135deg, #0d8b0c 0%, #0a6c0a 100%);
        transform: translateY(-1px);
    }

/* 卡片动画效果 */
.card[b-ubenshyzdt] {
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover[b-ubenshyzdt] {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(26, 173, 25, 0.15) !important;
    }

/* 表单控件样式优化 */
.form-control:focus[b-ubenshyzdt], .form-select:focus[b-ubenshyzdt] {
    border-color: #1aad19;
    box-shadow: 0 0 0 0.2rem rgba(26, 173, 25, 0.25);
}

/* 警告框样式优化 */
.alert[b-ubenshyzdt] {
    border: none;
    border-left: 4px solid;
}

.alert-success[b-ubenshyzdt] {
    border-left-color: #1aad19;
    background-color: #f8fff9;
}

.alert-danger[b-ubenshyzdt] {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.alert-warning[b-ubenshyzdt] {
    border-left-color: #ffc107;
    background-color: #fffef5;
}

.alert-info[b-ubenshyzdt] {
    border-left-color: #17a2b8;
    background-color: #f8fdff;
}

/* 预览内容区域样式 */
.alert-light.border[b-ubenshyzdt] {
    background-color: #f8f9fa;
    border-color: #e9ecef !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .card-body[b-ubenshyzdt] {
        padding: 1rem;
    }

    .btn[b-ubenshyzdt] {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* 动画效果 */
.spinner-border[b-ubenshyzdt] {
    animation: spinner-border-b-ubenshyzdt 0.75s linear infinite;
}

@keyframes spinner-border-b-ubenshyzdt {
    to {
        transform: rotate(360deg);
    }
}

/* 徽章样式优化 */
.badge[b-ubenshyzdt] {
    font-size: 0.7em;
    padding: 0.3em 0.6em;
}

/* 单选按钮组样式 */
.form-check-inline[b-ubenshyzdt] {
    margin-right: 1rem;
}

.form-check-input:checked[b-ubenshyzdt] {
    background-color: #1aad19;
    border-color: #1aad19;
}

/* 文本区域样式 */
.form-control[rows="4"][b-ubenshyzdt] {
    resize: vertical;
    min-height: 100px;
}

/* 使用说明区域样式 */
.small li[b-ubenshyzdt] {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* 结果区域动画 */
.alert[b-ubenshyzdt] {
    animation: fadeIn-b-ubenshyzdt 0.3s ease-in;
}

@keyframes fadeIn-b-ubenshyzdt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMPictureTheme.razor.rz.scp.css */
/* 
 * 图片索引页面样式 - 紧凑布局与主题支持
 * 主题配色通过PictureThemeService动态生成，此处为基础布局样式
 */

/* ===== 基础布局样式 ===== */
.compact-controls-container[b-j1p6rekql4] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.control-label[b-j1p6rekql4] {
    font-size: 0.9rem;
    font-weight: 500;
}

.control-group[b-j1p6rekql4] {
    display: flex;
    align-items: center;
}

/* ===== 紧凑分类卡片 ===== */
.compact-category-card[b-j1p6rekql4] {
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .compact-category-card:hover[b-j1p6rekql4] {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

.category-header[b-j1p6rekql4] {
    border-bottom: 1px solid;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title[b-j1p6rekql4] {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
}

.category-content[b-j1p6rekql4] {
    padding: 0.25rem;
}

/* ===== 紧凑文件夹卡片 ===== */
.compact-folder-card[b-j1p6rekql4] {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .compact-folder-card:hover[b-j1p6rekql4] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #dee2e6;
    }

.folder-header[b-j1p6rekql4] {
    border-bottom: 1px solid #e9ecef;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.folder-title[b-j1p6rekql4] {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
}

.folder-description[b-j1p6rekql4] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
}

.folder-actions .btn[b-j1p6rekql4] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.folder-footer[b-j1p6rekql4] {
    border-top: 1px solid #e9ecef;
    padding: 0.5rem;
    text-align: center;
}

/* ===== 紧凑轮播样式 ===== */
.compact-carousel-container[b-j1p6rekql4] {
    overflow: hidden;
    border-radius: 0.25rem;
    position: relative;
    /* 移除固定高度，由内容决定 */
    border: 1px solid #e9ecef;
}

.compact-carousel-track[b-j1p6rekql4] {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
    width: 100%;
}

.compact-carousel-slide[b-j1p6rekql4] {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 新增：图片容器，用于控制图片显示区域 */
.image-container[b-j1p6rekql4] {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.compact-carousel-image[b-j1p6rekql4] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 填充整个区域 */
    display: block;
}

/* 图片信息区域样式 - 修改为透明背景和灰色文字 */
.compact-image-info[b-j1p6rekql4] {
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important; /* 修改为白色 */
    /*color: #6c757d !important;*/
    padding: 0.3rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border: none !important;
    box-shadow: none !important;
    /* 移除所有可能的背景 */
    background-image: none !important;
}

/*.image-name {
    font-weight: 500;
    color: #6c757d !important;*/ /* 灰色文字 */
/*}*/

/* 同时需要修改图片名称的颜色 */
.image-name[b-j1p6rekql4] {
    font-weight: 500;
    color: #ffffff !important; /* 修改为白色 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 图片名称也添加阴影 */
    text-align: left;
}
/*最后一个按钮靠右*/
.compact-image-info > :last-child[b-j1p6rekql4] {
    margin-left: auto;
}

.compact-carousel-btn[b-j1p6rekql4] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.9;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    background-color: rgba(128, 128, 128, 0.8) !important;
    color: white !important;
}

    .compact-carousel-btn:hover[b-j1p6rekql4] {
        opacity: 1;
        background-color: rgba(96, 96, 96, 0.9) !important;
    }

    .compact-carousel-btn.prev[b-j1p6rekql4] {
        left: 0.3rem;
    }

    .compact-carousel-btn.next[b-j1p6rekql4] {
        right: 0.3rem;
    }

.compact-carousel-indicators[b-j1p6rekql4] {
    position: absolute;
    bottom: 0.3rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    z-index: 10;
}

.compact-carousel-indicator[b-j1p6rekql4] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

    .compact-carousel-indicator.active[b-j1p6rekql4] {
        transform: scale(1.2);
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

    .compact-carousel-indicator:hover[b-j1p6rekql4] {
        opacity: 0.8;
        background-color: rgba(255, 255, 255, 0.7) !important;
    }

/* ===== 管理员面板 ===== */
.admin-panel[b-j1p6rekql4] {
    border-left: 3px solid;
}

    .admin-panel h6[b-j1p6rekql4] {
        font-weight: 600;
        font-size: 1rem;
    }

/* ===== 无图片占位符 ===== */
.no-images-placeholder[b-j1p6rekql4] {
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #e9ecef;
    min-height: 120px; /* 最小高度 */
}

/* ===== 徽章样式 ===== */
.badge[b-j1p6rekql4] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ===== 按钮样式优化 ===== */
.btn[b-j1p6rekql4] {
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

    .btn:hover[b-j1p6rekql4] {
        transform: translateY(-1px);
    }

.btn-sm[b-j1p6rekql4] {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.btn-outline-secondary[b-j1p6rekql4] {
    color: #6c757d; /* 减小按钮的颜色 */
    border-color: #6c757d;
}

    .btn-outline-secondary:hover[b-j1p6rekql4] {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

/* ===== 模态框优化 ===== */
.modal-content[b-j1p6rekql4] {
    border: 1px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header[b-j1p6rekql4] {
    border-bottom: 1px solid;
}

.modal-footer[b-j1p6rekql4] {
    border-top: 1px solid;
}

.modal-title[b-j1p6rekql4] {
    font-weight: 600;
    font-size: 1rem;
}

/* ===== 表单控件优化 ===== */
.form-control[b-j1p6rekql4], .form-select[b-j1p6rekql4] {
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

    .form-control:focus[b-j1p6rekql4], .form-select:focus[b-j1p6rekql4] {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        border-color: #007bff;
    }

.form-label[b-j1p6rekql4] {
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== 自定义5列布局 ===== */
.col-lg-2-4[b-j1p6rekql4] {
    flex: 0 0 auto;
    width: 20%;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .compact-controls-container[b-j1p6rekql4] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .control-group[b-j1p6rekql4] {
        width: 100%;
        justify-content: space-between;
    }

    .col-lg-2-4[b-j1p6rekql4] {
        width: 50%;
    }

    .folder-actions .btn[b-j1p6rekql4] {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .col-lg-2-4[b-j1p6rekql4] {
        width: 100%;
    }

    .folder-actions[b-j1p6rekql4] {
        flex-direction: column;
        gap: 0.2rem;
    }

        .folder-actions .btn[b-j1p6rekql4] {
            font-size: 0.75rem;
        }
}

/* ===== 动画效果 ===== */
@keyframes fadeIn-b-j1p6rekql4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.compact-folder-card[b-j1p6rekql4] {
    animation: fadeIn-b-j1p6rekql4 0.3s ease;
}

/* ===== 滚动条优化 ===== */
[b-j1p6rekql4]::-webkit-scrollbar {
    width: 6px;
}

[b-j1p6rekql4]::-webkit-scrollbar-track {
    background: #f8f9fa;
}

[b-j1p6rekql4]::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 3px;
}

    [b-j1p6rekql4]::-webkit-scrollbar-thumb:hover {
        background: #495057;
    }

/* ===== 主题选择器 ===== */
.theme-selector-container[b-j1p6rekql4] {
    border-radius: 0.375rem;
    padding: 0.5rem;
    display: inline-block;
    border: 1px solid #e9ecef;
}

/* ===== 链接按钮样式 ===== */
.btn-link[b-j1p6rekql4] {
    font-size: 0.9rem;
}

/* ===== 上传预览样式 ===== */
.upload-preview[b-j1p6rekql4] {
    border: 1px dashed #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

    .upload-preview ul[b-j1p6rekql4] {
        margin: 0;
        padding-left: 1rem;
    }





/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMReportPDF.razor.rz.scp.css */
/* ReportPDF.razor.css - 隔离样式文件 */

/* ===== XML注释分组：主容器样式 ===== */
.report-pdf-container[b-8ci6ga3rrt] {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    margin: 0;
    background: #f5f7fa;
    position: relative;
    overflow: hidden;
    user-select: none;
}

/* ===== XML注释分组：左侧导航面板 ===== */
.left-panel[b-8ci6ga3rrt] {
    width: 320px;
    min-width: 200px;
    max-width: 500px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    border-right: 1px solid #e4e7ec;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: 100%;
}

/* ===== XML注释分组：分类选择卡片 ===== */
.category-card[b-8ci6ga3rrt] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border-radius: 6px;
    padding: 10px 10px 5px 10px;
    border: 1px solid #d1e9ff;
    margin-bottom: 0px;
}

.category-header[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.card-title[b-8ci6ga3rrt] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    flex: 1;
}

.collapse-toggle[b-8ci6ga3rrt] {
    background: transparent;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0066cc;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .collapse-toggle:hover[b-8ci6ga3rrt] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.category-select-container[b-8ci6ga3rrt] {
    position: relative;
}

.category-select[b-8ci6ga3rrt] {
    width: 100%;
    padding: 7px 10px;
    background: white;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    padding-right: 32px;
    transition: all 0.2s;
}

    .category-select:hover[b-8ci6ga3rrt] {
        border-color: #99c2ff;
        background: #f5faff;
    }

    .category-select:focus[b-8ci6ga3rrt] {
        outline: none;
        border-color: #66a3ff;
        box-shadow: 0 0 0 2px rgba(102, 163, 255, 0.2);
    }

.category-select-container[b-8ci6ga3rrt]::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #666;
    pointer-events: none;
}

/* ===== XML注释分组：文件列表卡片 ===== */
.files-card[b-8ci6ga3rrt] {
    flex: 1;
    background: white;
    border-radius: 6px;
    border: 2px solid #e4e7ec;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: all 0.3s ease;
}

    .files-card.collapsed[b-8ci6ga3rrt] {
        height: 0;
        min-height: 0;
        border: none;
        overflow: hidden;
        flex: 0;
    }

.files-header[b-8ci6ga3rrt] {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

.files-title[b-8ci6ga3rrt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-badge[b-8ci6ga3rrt] {
    background: #e6f2ff;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cce0ff;
}

.files-content[b-8ci6ga3rrt] {
    flex: 1;
    padding: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.files-card.collapsed .files-content[b-8ci6ga3rrt] {
    opacity: 0;
    pointer-events: none;
}

.files-scroll[b-8ci6ga3rrt] {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

    .files-scroll[b-8ci6ga3rrt]::-webkit-scrollbar {
        width: 12px;
    }

    .files-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    .files-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

        .files-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.files-scroll[b-8ci6ga3rrt] {
    scrollbar-width: 12px;
    scrollbar-color: #666 #f1f1f1;
}

/* ===== XML注释分组：文件项样式 ===== */
.file-item[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin: 1px 0;
    background: white;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 8px;
    position: relative;
}

    .file-item:hover[b-8ci6ga3rrt] {
        background: #f5faff;
        border-color: #cce0ff;
        transform: translateX(1px);
    }

    .file-item.selected[b-8ci6ga3rrt] {
        background: #e6f2ff;
        border-color: #99c2ff;
        border-left: 2px solid #0066cc;
    }

.file-icon[b-8ci6ga3rrt] {
    font-size: 15px;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0066cc;
}

.file-info[b-8ci6ga3rrt] {
    flex: 1;
    min-width: 0;
}

.file-name[b-8ci6ga3rrt] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.file-meta[b-8ci6ga3rrt] {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #666;
}

.file-size[b-8ci6ga3rrt]::before {
    content: '📦 ';
    font-size: 10px;
}

.file-date[b-8ci6ga3rrt]::before {
    content: '📅 ';
    font-size: 10px;
}

/* ===== XML注释分组：空状态样式 ===== */
.files-empty[b-8ci6ga3rrt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
    text-align: center;
}

.empty-icon[b-8ci6ga3rrt] {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.4;
}

.empty-text[b-8ci6ga3rrt] {
    font-size: 13px;
    margin-bottom: 3px;
    color: #666;
}

.empty-hint[b-8ci6ga3rrt] {
    font-size: 11px;
    opacity: 0.8;
}

/* ===== XML注释分组：分割条样式 ===== */
.splitter-bar[b-8ci6ga3rrt] {
    width: 5px;
    background: #e4e7ec;
    cursor: col-resize;
    position: relative;
    transition: background 0.2s ease;
    z-index: 3;
}

    .splitter-bar:hover[b-8ci6ga3rrt] {
        background: #99c2ff;
    }

    .splitter-bar[b-8ci6ga3rrt]::-webkit-scrollbar {
        width: 12px;
    }

    .splitter-bar[b-8ci6ga3rrt]::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

.splitter-handle[b-8ci6ga3rrt] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 3px;
    height: 30px;
    background: #0066cc;
    border-radius: 2px;
    transform: translateY(-50%);
}

.splitter-bar.dragging[b-8ci6ga3rrt] {
    background: #99c2ff !important;
}

    .splitter-bar.dragging .splitter-handle[b-8ci6ga3rrt] {
        background: #004d99;
    }

/* ===== XML注释分组：右侧内容面板 ===== */
.right-panel[b-8ci6ga3rrt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
    min-width: 0;
    height: 100%;
}

/* ===== XML注释分组：文件标题栏 ===== */
.file-header[b-8ci6ga3rrt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e6f2ff 0%, #d1e9ff 100%);
    border-bottom: 1px solid #cce0ff;
    min-height: 38px;
    flex-shrink: 0;
}

.file-title[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.title-text[b-8ci6ga3rrt] {
    font-size: 13px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.title-meta[b-8ci6ga3rrt] {
    font-size: 11px;
    color: #666;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #cce0ff;
    flex-shrink: 0;
    font-weight: 500;
}

/* ===== XML注释分组：文件操作按钮 ===== */
.file-actions[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
}

.zoom-controls[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #cce0ff;
}

.zoom-btn[b-8ci6ga3rrt], .reset-btn[b-8ci6ga3rrt] {
    width: 28px;
    height: 26px;
    border: 1px solid #d1e9ff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    color: #0066cc;
    font-size: 13px;
    font-weight: bold;
}

    .zoom-btn:hover[b-8ci6ga3rrt] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.reset-btn[b-8ci6ga3rrt] {
    background: #f0f9ff;
}

    .reset-btn:hover[b-8ci6ga3rrt] {
        background: #e6f2ff;
    }

.zoom-level[b-8ci6ga3rrt] {
    font-size: 11px;
    color: #0066cc;
    min-width: 34px;
    text-align: center;
    font-weight: 600;
}

/* ===== XML注释分组：预览容器（关键修复） ===== */
.preview-container[b-8ci6ga3rrt] {
    flex: 1;
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ===== XML注释分组：PDF预览样式（关键修复） ===== */
.pdf-viewer[b-8ci6ga3rrt] {
    width: 100%;
    height: 100%;
    flex: 1;
    background: #f0f2f5;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.pdf-frame[b-8ci6ga3rrt] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    min-height: 0;
}

/* 隐藏PDF控件的下载和打印按钮 */
.pdf-frame[b-8ci6ga3rrt] {
    -webkit-print-color-adjust: exact !important;
}

/* ===== XML注释分组：HTML预览样式优化（关键修复） ===== */
.html-viewer[b-8ci6ga3rrt] {
    width: 100%;
    height: 100%;
    flex: 1;
    background: #f0f2f5;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.html-scroll[b-8ci6ga3rrt] {
    width: 100%;
    height: 100%;
    flex: 1;
    transform-origin: top left;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .html-scroll[b-8ci6ga3rrt]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .html-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    .html-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

        .html-scroll[b-8ci6ga3rrt]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.html-frame[b-8ci6ga3rrt] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    min-height: 0;
}

/* ===== XML注释分组：加载状态 ===== */
.loading-state[b-8ci6ga3rrt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.95);
    min-height: 0;
}

.loading-spinner[b-8ci6ga3rrt] {
    width: 36px;
    height: 36px;
    border: 2px solid #e6f2ff;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: spin-b-8ci6ga3rrt 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-8ci6ga3rrt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-8ci6ga3rrt] {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：错误状态 ===== */
.error-state[b-8ci6ga3rrt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
    background: white;
    border: 1px solid #ffcccc;
    border-radius: 6px;
    margin: 10px;
    min-height: 0;
}

.error-icon[b-8ci6ga3rrt] {
    font-size: 36px;
    margin-bottom: 10px;
    color: #ff3333;
}

.error-text[b-8ci6ga3rrt] {
    font-size: 13px;
    color: #666;
    max-width: 400px;
    line-height: 1.4;
    background: #fff5f5;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ffcccc;
}

/* ===== XML注释分组：欢迎状态 ===== */
.welcome-state[b-8ci6ga3rrt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
    min-height: 0;
}

.welcome-icon[b-8ci6ga3rrt] {
    font-size: 42px;
    margin-bottom: 12px;
    color: #cce0ff;
    opacity: 0.8;
}

.welcome-content[b-8ci6ga3rrt] {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 380px;
    border: 1px solid #e6f2ff;
}

.welcome-title[b-8ci6ga3rrt] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6f2ff;
}

.welcome-steps[b-8ci6ga3rrt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.step[b-8ci6ga3rrt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.step-number[b-8ci6ga3rrt] {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce0ff 100%);
    color: #0066cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid #b3d1ff;
}

.step-text[b-8ci6ga3rrt] {
    font-size: 13px;
    color: #444;
    text-align: left;
    flex: 1;
}

.welcome-formats[b-8ci6ga3rrt] {
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.formats-text[b-8ci6ga3rrt] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：Toast通知样式 ===== */
.toast[b-8ci6ga3rrt] {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 10px 14px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    max-width: 280px;
    border: 1px solid #e4e7ec;
    pointer-events: none;
}

    .toast.show[b-8ci6ga3rrt] {
        transform: translateX(0);
        pointer-events: auto;
    }

.toast-icon[b-8ci6ga3rrt] {
    font-size: 15px;
    flex-shrink: 0;
}

.toast-message[b-8ci6ga3rrt] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.toast-success[b-8ci6ga3rrt] {
    border-left: 3px solid #00cc66;
    background: linear-gradient(90deg, #f0fff4 0%, white 100%);
}

.toast-error[b-8ci6ga3rrt] {
    border-left: 3px solid #ff3333;
    background: linear-gradient(90deg, #fff5f5 0%, white 100%);
}

.toast-info[b-8ci6ga3rrt] {
    border-left: 3px solid #0066cc;
    background: linear-gradient(90deg, #f0f9ff 0%, white 100%);
}

.toast-warning[b-8ci6ga3rrt] {
    border-left: 3px solid #ff9900;
    background: linear-gradient(90deg, #fffaf0 0%, white 100%);
}

/* ===== XML注释分组：全局滚动条优化 ===== */
.report-pdf-container *[b-8ci6ga3rrt] {
    scrollbar-width: thin;
    scrollbar-color: #666 #f1f1f1;
}

    .report-pdf-container *[b-8ci6ga3rrt]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .report-pdf-container *[b-8ci6ga3rrt]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }

    .report-pdf-container *[b-8ci6ga3rrt]::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

        .report-pdf-container *[b-8ci6ga3rrt]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .report-pdf-container *[b-8ci6ga3rrt]::-webkit-scrollbar-thumb:active {
            background: #444;
        }

/* ===== XML注释分组：分割条交互修复 ===== */
.splitter-bar *[b-8ci6ga3rrt] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ===== XML注释分组：响应式设计 ===== */
@media (max-width: 1200px) {
    .report-pdf-container[b-8ci6ga3rrt] {
        height: calc(100vh - 56px);
    }

    .left-panel[b-8ci6ga3rrt] {
        width: 300px;
        min-width: 280px;
    }

    .title-text[b-8ci6ga3rrt] {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .left-panel[b-8ci6ga3rrt] {
        width: 280px;
        min-width: 260px;
    }

    .category-card[b-8ci6ga3rrt], .files-header[b-8ci6ga3rrt] {
        padding: 8px;
    }

    .title-text[b-8ci6ga3rrt] {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .report-pdf-container[b-8ci6ga3rrt] {
        flex-direction: column;
        height: calc(100vh - 60px);
        min-height: 700px;
    }

    .left-panel[b-8ci6ga3rrt] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        flex-shrink: 0;
    }

    .files-card[b-8ci6ga3rrt] {
        min-height: 500px;
    }

    .splitter-bar[b-8ci6ga3rrt] {
        width: 100%;
        height: 5px;
        cursor: row-resize;
    }

        .splitter-bar:hover[b-8ci6ga3rrt] {
            background: #99c2ff;
        }

    .splitter-handle[b-8ci6ga3rrt] {
        left: 50%;
        top: 1px;
        width: 30px;
        height: 3px;
        transform: translateX(-50%);
    }

    .files-content[b-8ci6ga3rrt] {
        max-height: none;
    }

    .right-panel[b-8ci6ga3rrt] {
        flex: 1;
    }

    .file-header[b-8ci6ga3rrt] {
        padding: 5px 10px;
        min-height: 36px;
    }

    .title-text[b-8ci6ga3rrt] {
        max-width: 100%;
        font-size: 12px;
    }

    .file-actions[b-8ci6ga3rrt] {
        justify-content: flex-end;
    }

    .zoom-btn[b-8ci6ga3rrt], .reset-btn[b-8ci6ga3rrt] {
        width: 26px;
        height: 24px;
        font-size: 12px;
    }

    .zoom-level[b-8ci6ga3rrt] {
        min-width: 30px;
        font-size: 10px;
    }

    .collapse-toggle[b-8ci6ga3rrt] {
        width: 26px;
        height: 24px;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .report-pdf-container[b-8ci6ga3rrt] {
        min-height: 700px;
    }

    .left-panel[b-8ci6ga3rrt] {
        padding: 8px;
    }

    .category-card[b-8ci6ga3rrt] {
        padding: 8px;
    }

    .files-header[b-8ci6ga3rrt] {
        padding: 6px 8px;
    }

    .files-card[b-8ci6ga3rrt] {
        min-height: 500px;
    }

    .welcome-content[b-8ci6ga3rrt] {
        padding: 16px;
        margin: 0 10px;
    }

    .welcome-title[b-8ci6ga3rrt] {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .step-text[b-8ci6ga3rrt] {
        font-size: 12px;
    }

    .toast[b-8ci6ga3rrt] {
        max-width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        top: 10px;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMReportPDF1.razor.rz.scp.css */
/* ===== XML注释分组：主容器样式 ===== */
.report-pdf-container[b-7vd5s3en1z] {
    display: flex;
    height: calc(100vh - 60px);
    min-height: 700px;
    margin: 0;
    background: #f5f7fa;
    position: relative;
    overflow: hidden;
    user-select: none;
}

/* ===== XML注释分组：左侧导航面板 ===== */
.left-panel[b-7vd5s3en1z] {
    width: 320px;
    min-width: 200px;
    max-width: 500px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    border-right: 1px solid #e4e7ec;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* ===== XML注释分组：分类选择卡片 ===== */
.category-card[b-7vd5s3en1z] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border-radius: 6px;
    padding: 10px 10px 5px 10px;
    border: 1px solid #d1e9ff;
    margin-bottom: 0px;
}

.category-header[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.card-title[b-7vd5s3en1z] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    flex: 1;
}

/* 【新增】折叠按钮样式 */
.collapse-toggle[b-7vd5s3en1z] {
    background: transparent;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0066cc;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .collapse-toggle:hover[b-7vd5s3en1z] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.category-select-container[b-7vd5s3en1z] {
    position: relative;
}

.category-select[b-7vd5s3en1z] {
    width: 100%;
    padding: 7px 10px;
    background: white;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    padding-right: 32px;
    transition: all 0.2s;
}

    .category-select:hover[b-7vd5s3en1z] {
        border-color: #99c2ff;
        background: #f5faff;
    }

    .category-select:focus[b-7vd5s3en1z] {
        outline: none;
        border-color: #66a3ff;
        box-shadow: 0 0 0 2px rgba(102, 163, 255, 0.2);
    }

.category-select-container[b-7vd5s3en1z]::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #666;
    pointer-events: none;
}

/* ===== XML注释分组：文件列表卡片 ===== */
.files-card[b-7vd5s3en1z] {
    flex: 1;
    background: white;
    border-radius: 6px;
    border: 2px solid #e4e7ec;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: all 0.3s ease;
}

    /* 【新增】折叠状态样式 */
    .files-card.collapsed[b-7vd5s3en1z] {
        height: 0;
        min-height: 0;
        border: none;
        overflow: hidden;
        flex: 0;
    }

.files-header[b-7vd5s3en1z] {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

.files-title[b-7vd5s3en1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-badge[b-7vd5s3en1z] {
    background: #e6f2ff;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cce0ff;
}

.files-content[b-7vd5s3en1z] {
    flex: 1;
    padding: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.files-card.collapsed .files-content[b-7vd5s3en1z] {
    opacity: 0;
    pointer-events: none;
}

.files-scroll[b-7vd5s3en1z] {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

    /* ===== XML注释分组：滚动条样式优化 ===== */
    /* 【修改】垂直滚动条深灰色、宽度大些，参考showHtmlView右侧的垂直滚动条设置 */
    .files-scroll[b-7vd5s3en1z]::-webkit-scrollbar {
        width: 12px; /* 【增加】滚动条宽度 */
    }

    .files-scroll[b-7vd5s3en1z]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【增加】圆角增大 */
    }

    .files-scroll[b-7vd5s3en1z]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【增加】边框增大 */
    }

        .files-scroll[b-7vd5s3en1z]::-webkit-scrollbar-thumb:hover {
            background: #555; /* 【修改】更深的灰色 */
        }

.files-scroll[b-7vd5s3en1z] {
    scrollbar-width: 12px; /* 【增加】Firefox滚动条宽度 */
    scrollbar-color: #666 #f1f1f1; /* 【修改】深灰色 */
}

/* ===== XML注释分组：文件项样式 ===== */
.file-item[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin: 1px 0;
    background: white;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 8px;
    position: relative;
}

    .file-item:hover[b-7vd5s3en1z] {
        background: #f5faff;
        border-color: #cce0ff;
        transform: translateX(1px);
    }

    .file-item.selected[b-7vd5s3en1z] {
        background: #e6f2ff;
        border-color: #99c2ff;
        border-left: 2px solid #0066cc;
    }

.file-icon[b-7vd5s3en1z] {
    font-size: 15px;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0066cc;
}

.file-info[b-7vd5s3en1z] {
    flex: 1;
    min-width: 0;
}

.file-name[b-7vd5s3en1z] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.file-meta[b-7vd5s3en1z] {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #666;
}

.file-size[b-7vd5s3en1z]::before {
    content: '📦 ';
    font-size: 10px;
}

.file-date[b-7vd5s3en1z]::before {
    content: '📅 ';
    font-size: 10px;
}

/* ===== XML注释分组：空状态样式 ===== */
.files-empty[b-7vd5s3en1z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
    text-align: center;
}

.empty-icon[b-7vd5s3en1z] {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.4;
}

.empty-text[b-7vd5s3en1z] {
    font-size: 13px;
    margin-bottom: 3px;
    color: #666;
}

.empty-hint[b-7vd5s3en1z] {
    font-size: 11px;
    opacity: 0.8;
}

/* ===== XML注释分组：分割条样式 ===== */
.splitter-bar[b-7vd5s3en1z] {
    width: 5px;
    background: #e4e7ec;
    cursor: col-resize;
    position: relative;
    transition: background 0.2s ease;
    z-index: 3;
}

    .splitter-bar:hover[b-7vd5s3en1z] {
        background: #99c2ff;
    }

    /* 【修改】分割条滚动条样式优化 */
    .splitter-bar[b-7vd5s3en1z]::-webkit-scrollbar {
        width: 12px; /* 【增加】与右侧一致 */
    }

    .splitter-bar[b-7vd5s3en1z]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

.splitter-handle[b-7vd5s3en1z] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 3px;
    height: 30px;
    background: #0066cc;
    border-radius: 2px;
    transform: translateY(-50%);
}

.splitter-bar.dragging[b-7vd5s3en1z] {
    background: #99c2ff !important;
}

    .splitter-bar.dragging .splitter-handle[b-7vd5s3en1z] {
        background: #004d99;
    }

/* ===== XML注释分组：右侧内容面板 ===== */
.right-panel[b-7vd5s3en1z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

/* ===== XML注释分组：文件标题栏 ===== */
.file-header[b-7vd5s3en1z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e6f2ff 0%, #d1e9ff 100%);
    border-bottom: 1px solid #cce0ff;
    min-height: 38px;
}

.file-title[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.title-text[b-7vd5s3en1z] {
    font-size: 13px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.title-meta[b-7vd5s3en1z] {
    font-size: 11px;
    color: #666;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #cce0ff;
    flex-shrink: 0;
    font-weight: 500;
}

/* ===== XML注释分组：文件操作按钮 ===== */
.file-actions[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
}

.zoom-controls[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #cce0ff;
}

.zoom-btn[b-7vd5s3en1z], .reset-btn[b-7vd5s3en1z] {
    width: 28px;
    height: 26px;
    border: 1px solid #d1e9ff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    color: #0066cc;
    font-size: 13px;
    font-weight: bold;
}

    .zoom-btn:hover[b-7vd5s3en1z] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.reset-btn[b-7vd5s3en1z] {
    background: #f0f9ff;
}

    .reset-btn:hover[b-7vd5s3en1z] {
        background: #e6f2ff;
    }

.zoom-level[b-7vd5s3en1z] {
    font-size: 11px;
    color: #0066cc;
    min-width: 34px;
    text-align: center;
    font-weight: 600;
}

/* ===== XML注释分组：预览容器 ===== */
.preview-container[b-7vd5s3en1z] {
    flex: 1;
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== XML注释分组：PDF预览样式 ===== */
.pdf-viewer[b-7vd5s3en1z] {
    width: 100%;
    flex: 1;
    background: #f0f2f5;
    display: flex;
    overflow: auto;
}

.pdf-frame[b-7vd5s3en1z] {
    width: 100%;
    height: 100%;
    min-width: 100%;
    border: none;
    display: block;
    flex-shrink: 0;
}

/* 【新增】隐藏PDF控件的下载和打印按钮 */
.pdf-frame[b-7vd5s3en1z] {
    /* Chrome, Edge, Safari */
    -webkit-print-color-adjust: exact !important;
}

/* ===== XML注释分组：HTML预览样式优化 ===== */
/* 【修改】html-viewer高度填充父容器preview-container高度，和pdf-viewer区域一样设置 */
.html-viewer[b-7vd5s3en1z] {
    width: 100%;
    flex: 1; /* 【确保】填充剩余空间 */
    background: #f0f2f5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0; /* 【重要】允许收缩 */
}

.html-scroll[b-7vd5s3en1z] {
    width: 100%;
    min-height: 100%; /* 【修改】最小高度100% */
    margin: 0;
    transform-origin: top left;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    box-sizing: border-box;
    overflow: auto;
    flex-shrink: 0;
    display: flex; /* 【新增】flex布局 */
    flex-direction: column;
}

    .html-scroll[b-7vd5s3en1z]::-webkit-scrollbar {
        width: 12px; /* 【修改】宽度增大 */
        height: 12px;
    }

    .html-scroll[b-7vd5s3en1z]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【修改】圆角增大 */
    }

    .html-scroll[b-7vd5s3en1z]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【修改】边框增大 */
    }

        .html-scroll[b-7vd5s3en1z]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.html-frame[b-7vd5s3en1z] {
    width: 100%;
    height: 100%;
    min-width: 100%;
    border: none;
    display: block;
    border-radius: 5px;
    flex: 1; /* 【重要】填充父容器 */
}

/* ===== XML注释分组：加载状态 ===== */
.loading-state[b-7vd5s3en1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.95);
}

.loading-spinner[b-7vd5s3en1z] {
    width: 36px;
    height: 36px;
    border: 2px solid #e6f2ff;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: spin-b-7vd5s3en1z 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-7vd5s3en1z {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-7vd5s3en1z] {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：错误状态 ===== */
.error-state[b-7vd5s3en1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
    background: white;
    border: 1px solid #ffcccc;
    border-radius: 6px;
    margin: 10px;
}

.error-icon[b-7vd5s3en1z] {
    font-size: 36px;
    margin-bottom: 10px;
    color: #ff3333;
}

.error-text[b-7vd5s3en1z] {
    font-size: 13px;
    color: #666;
    max-width: 400px;
    line-height: 1.4;
    background: #fff5f5;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ffcccc;
}

/* ===== XML注释分组：欢迎状态 ===== */
.welcome-state[b-7vd5s3en1z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
}

.welcome-icon[b-7vd5s3en1z] {
    font-size: 42px;
    margin-bottom: 12px;
    color: #cce0ff;
    opacity: 0.8;
}

.welcome-content[b-7vd5s3en1z] {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 380px;
    border: 1px solid #e6f2ff;
}

.welcome-title[b-7vd5s3en1z] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6f2ff;
}

.welcome-steps[b-7vd5s3en1z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.step[b-7vd5s3en1z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.step-number[b-7vd5s3en1z] {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce0ff 100%);
    color: #0066cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid #b3d1ff;
}

.step-text[b-7vd5s3en1z] {
    font-size: 13px;
    color: #444;
    text-align: left;
    flex: 1;
}

.welcome-formats[b-7vd5s3en1z] {
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.formats-text[b-7vd5s3en1z] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：Toast通知样式 ===== */
.toast[b-7vd5s3en1z] {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 10px 14px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    max-width: 280px;
    border: 1px solid #e4e7ec;
    pointer-events: none;
}

    .toast.show[b-7vd5s3en1z] {
        transform: translateX(0);
        pointer-events: auto;
    }

.toast-icon[b-7vd5s3en1z] {
    font-size: 15px;
    flex-shrink: 0;
}

.toast-message[b-7vd5s3en1z] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.toast-success[b-7vd5s3en1z] {
    border-left: 3px solid #00cc66;
    background: linear-gradient(90deg, #f0fff4 0%, white 100%);
}

.toast-error[b-7vd5s3en1z] {
    border-left: 3px solid #ff3333;
    background: linear-gradient(90deg, #fff5f5 0%, white 100%);
}

.toast-info[b-7vd5s3en1z] {
    border-left: 3px solid #0066cc;
    background: linear-gradient(90deg, #f0f9ff 0%, white 100%);
}

.toast-warning[b-7vd5s3en1z] {
    border-left: 3px solid #ff9900;
    background: linear-gradient(90deg, #fffaf0 0%, white 100%);
}

/* ===== XML注释分组：全局滚动条优化 ===== */
*[b-7vd5s3en1z] {
    scrollbar-width: thin;
    scrollbar-color: #666 #f1f1f1; /* 【修改】深灰色 */
}

    *[b-7vd5s3en1z]::-webkit-scrollbar {
        width: 12px; /* 【增加】宽度 */
        height: 12px;
    }

    *[b-7vd5s3en1z]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【增加】圆角 */
    }

    *[b-7vd5s3en1z]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【增加】边框 */
    }

        *[b-7vd5s3en1z]::-webkit-scrollbar-thumb:hover {
            background: #555; /* 【修改】更深的灰色 */
        }

        *[b-7vd5s3en1z]::-webkit-scrollbar-thumb:active {
            background: #444; /* 【修改】更深的灰色 */
        }

/* ===== XML注释分组：分割条交互修复 ===== */
.splitter-bar *[b-7vd5s3en1z] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ===== XML注释分组：响应式设计 ===== */
@media (max-width: 1200px) {
    .report-pdf-container[b-7vd5s3en1z] {
        height: calc(100vh - 56px);
    }

    .left-panel[b-7vd5s3en1z] {
        width: 300px;
        min-width: 280px;
    }

    .title-text[b-7vd5s3en1z] {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .left-panel[b-7vd5s3en1z] {
        width: 280px;
        min-width: 260px;
    }

    .category-card[b-7vd5s3en1z], .files-header[b-7vd5s3en1z] {
        padding: 8px;
    }

    .title-text[b-7vd5s3en1z] {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .report-pdf-container[b-7vd5s3en1z] {
        flex-direction: column;
        height: auto;
        min-height: 700px;
    }

    .left-panel[b-7vd5s3en1z] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        flex-shrink: 0;
    }

    .files-card[b-7vd5s3en1z] {
        min-height: 500px;
    }

    .splitter-bar[b-7vd5s3en1z] {
        width: 100%;
        height: 5px;
        cursor: row-resize;
    }

        .splitter-bar:hover[b-7vd5s3en1z] {
            background: #99c2ff;
        }

    .splitter-handle[b-7vd5s3en1z] {
        left: 50%;
        top: 1px;
        width: 30px;
        height: 3px;
        transform: translateX(-50%);
    }

    .files-content[b-7vd5s3en1z] {
        max-height: none;
    }

    .right-panel[b-7vd5s3en1z] {
        flex: 1;
    }

    .file-header[b-7vd5s3en1z] {
        padding: 5px 10px;
        min-height: 36px;
    }

    .title-text[b-7vd5s3en1z] {
        max-width: 100%;
        font-size: 12px;
    }

    .file-actions[b-7vd5s3en1z] {
        justify-content: flex-end;
    }

    .zoom-btn[b-7vd5s3en1z], .reset-btn[b-7vd5s3en1z] {
        width: 26px;
        height: 24px;
        font-size: 12px;
    }

    .zoom-level[b-7vd5s3en1z] {
        min-width: 30px;
        font-size: 10px;
    }

    /* 【修改】移动端折叠按钮调整 */
    .collapse-toggle[b-7vd5s3en1z] {
        width: 26px;
        height: 24px;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .report-pdf-container[b-7vd5s3en1z] {
        min-height: 700px;
    }

    .left-panel[b-7vd5s3en1z] {
        padding: 8px;
    }

    .category-card[b-7vd5s3en1z] {
        padding: 8px;
    }

    .files-header[b-7vd5s3en1z] {
        padding: 6px 8px;
    }

    .files-card[b-7vd5s3en1z] {
        min-height: 500px;
    }

    .welcome-content[b-7vd5s3en1z] {
        padding: 16px;
        margin: 0 10px;
    }

    .welcome-title[b-7vd5s3en1z] {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .step-text[b-7vd5s3en1z] {
        font-size: 12px;
    }

    .toast[b-7vd5s3en1z] {
        max-width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        top: 10px;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMReportPDFMag.razor.rz.scp.css */
/* ===== 主容器布局 ===== */
.report-pdf-container[b-zkxcn3vgj2] {
    display: flex;
    height: calc(100vh - 90px);
    margin: 0;
    padding: 0;
    align-items: flex-start;
    position: relative;
    left: -20px;
    width: calc(100% + 30px);
    background: #fafafa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== 左侧面板样式 ===== */
.left-panel[b-zkxcn3vgj2] {
    width: 300px;
    min-width: 200px;
    max-width: 600px;
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    padding: 0px;
    overflow-y: auto;
    margin: 0;
    height: 100%;
    box-shadow: 1px 0 3px rgba(0,0,0,0.05);
}

/* 分类选择区域 */
.select-group[b-zkxcn3vgj2] {
    margin: 5px 10px 5px 2px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.category-select[b-zkxcn3vgj2] {
    flex: 1;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: white;
    color: #323130;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
}

    .category-select:hover[b-zkxcn3vgj2] {
        border-color: #0078d4;
    }

    .category-select:focus[b-zkxcn3vgj2] {
        outline: none;
        border-color: #0078d4;
        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
    }

.file-upload-btn[b-zkxcn3vgj2] {
    min-width: max-content;
    padding: 8px 16px;
    background: #f3f2f1;
    color: #323130;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .file-upload-btn:hover[b-zkxcn3vgj2] {
        background: #e1dfdd;
        border-color: #107c10;
        color: #107c10;
        transform: translateY(-1px);
    }

/* 管理员面板 */
.admin-panel[b-zkxcn3vgj2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 3px 8px 3px 2px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 48px;
    box-sizing: border-box;
}

.admin-input[b-zkxcn3vgj2] {
    width: 140px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.2s ease;
    background: white;
}

    .admin-input:focus[b-zkxcn3vgj2] {
        outline: none;
        border-color: #0078d4;
        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
    }

.category-btn[b-zkxcn3vgj2] {
    min-width: max-content;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .category-btn.create[b-zkxcn3vgj2] {
        background: #0078d4;
        color: white;
    }

        .category-btn.create:hover[b-zkxcn3vgj2] {
            background: #106ebe;
            transform: translateY(-1px);
        }

    .category-btn.delete[b-zkxcn3vgj2] {
        background: #d13438;
        color: white;
    }

        .category-btn.delete:hover[b-zkxcn3vgj2] {
            background: #b02a30;
            transform: translateY(-1px);
        }

.file-action-btn[b-zkxcn3vgj2] {
    min-width: max-content;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .file-action-btn.delete[b-zkxcn3vgj2] {
        background: #f3f2f1;
        color: #323130;
        border: 1px solid #d1d5db;
    }

        .file-action-btn.delete:hover[b-zkxcn3vgj2] {
            background: #e1dfdd;
            border-color: #d13438;
            color: #d13438;
        }

.panel-divider[b-zkxcn3vgj2] {
    width: 1px;
    height: 24px;
    background: #d1d5db;
    margin: 0 4px;
    flex-shrink: 0;
}

/* 文件列表头部 */
.file-list-header[b-zkxcn3vgj2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0 10px 0;
    padding: 0 15px;
}

    .file-list-header h4[b-zkxcn3vgj2] {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #323130;
    }

.selected-category[b-zkxcn3vgj2] {
    font-size: 14px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

/* 文件列表容器 */
.file-list-container[b-zkxcn3vgj2] {
    font-size: 13px;
    line-height: 1.3;
    padding: 0 15px;
}

.file-item[b-zkxcn3vgj2] {
    margin: 2px 0;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    background-color: transparent;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

    .file-item:hover[b-zkxcn3vgj2] {
        background-color: #f0f7ff;
        border-left-color: #0078d4;
    }

    .file-item.selected[b-zkxcn3vgj2] {
        background-color: #e3f2fd;
        border-left-color: #0078d4;
        font-weight: 500;
    }

.no-files[b-zkxcn3vgj2] {
    padding: 12px 8px;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* ===== 分割条样式 ===== */
.splitter-bar[b-zkxcn3vgj2] {
    width: 8px;
    background: #dee2e6;
    cursor: col-resize;
    position: relative;
    margin: 0;
    height: 100%;
    transition: background-color 0.2s ease;
}

    .splitter-bar:hover[b-zkxcn3vgj2] {
        background: #adb5bd;
    }

.splitter-handle[b-zkxcn3vgj2] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 40px;
    background: #adb5bd;
    border-radius: 3px;
    transform: translateY(-50%);
}

/* ===== 右侧面板样式 ===== */
.right-panel[b-zkxcn3vgj2] {
    flex: 1;
    padding: 15px;
    overflow: auto;
    margin: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
}

/* 文件信息栏 */
.file-info-bar[b-zkxcn3vgj2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
}

.file-name[b-zkxcn3vgj2] {
    color: #323130;
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: 500;
}

.error-message[b-zkxcn3vgj2] {
    color: #d13438;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* PDF查看器容器 */
.pdf-viewer-container[b-zkxcn3vgj2] {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 25px);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f8f9fa;
}

.pdf-iframe[b-zkxcn3vgj2] {
    border: none;
    border-radius: 0 0 4px 4px;
    flex-grow: 1;
}

/* HTML查看器容器 */
.html-viewer-container[b-zkxcn3vgj2] {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #f5f5f5;
    height: calc(100% - 25px);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.viewer-controls[b-zkxcn3vgj2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.control-btn[b-zkxcn3vgj2] {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 25px;
    height: 25px;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .control-btn:hover[b-zkxcn3vgj2] {
        background: #e8f4fd;
        border-color: #007bff;
    }

.iframe-scroll-container[b-zkxcn3vgj2] {
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}

.iframe-wrapper[b-zkxcn3vgj2] {
    transform-origin: 0 0;
    transition: transform 0.2s ease;
}

.html-iframe[b-zkxcn3vgj2] {
    border: none;
    display: block;
}

/* 滚动条样式 */
.iframe-scroll-container[b-zkxcn3vgj2]::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.iframe-scroll-container[b-zkxcn3vgj2]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 7px;
}

.iframe-scroll-container[b-zkxcn3vgj2]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 7px;
    border: 3px solid #f1f1f1;
}

    .iframe-scroll-container[b-zkxcn3vgj2]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.iframe-scroll-container[b-zkxcn3vgj2] {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ===== 状态容器样式 ===== */
.loading-container[b-zkxcn3vgj2] {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: #f8f9fa;
    border-radius: 4px;
}

.loading-spinner[b-zkxcn3vgj2] {
    width: 3rem;
    height: 3rem;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0078d4;
    border-radius: 50%;
    animation: spin-b-zkxcn3vgj2 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-zkxcn3vgj2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-container[b-zkxcn3vgj2] {
    margin-top: 5px;
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
}

.error-icon[b-zkxcn3vgj2] {
    margin-right: 8px;
    font-size: 1.2rem;
}

.welcome-container[b-zkxcn3vgj2] {
    margin-top: 5px;
    background-color: #f8f9fa;
    border-radius: 4px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.welcome-icon[b-zkxcn3vgj2] {
    font-size: 3rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.welcome-container p[b-zkxcn3vgj2] {
    color: #6c757d;
    margin: 0.5rem 0;
}

.welcome-container small[b-zkxcn3vgj2] {
    color: #8a8d91;
    margin-top: 1rem;
}

/* ===== 上传状态样式 ===== */
.upload-status[b-zkxcn3vgj2] {
    padding: 10px;
    margin: 10px 8px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 13px;
}

    .upload-status.success[b-zkxcn3vgj2] {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .upload-status.error[b-zkxcn3vgj2] {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    .upload-status.warning[b-zkxcn3vgj2] {
        background-color: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }

    .upload-status.info[b-zkxcn3vgj2] {
        background-color: #d1ecf1;
        border-color: #bee5eb;
        color: #0c5460;
        cursor: pointer;
    }

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .report-pdf-container[b-zkxcn3vgj2] {
        flex-direction: column;
        left: 0;
        width: 100%;
        height: auto;
    }

    .left-panel[b-zkxcn3vgj2] {
        width: 100%;
        max-width: none;
        height: 40vh;
    }

    .splitter-bar[b-zkxcn3vgj2] {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .splitter-handle[b-zkxcn3vgj2] {
        top: 1px;
        left: 50%;
        width: 40px;
        height: 6px;
        transform: translateX(-50%);
    }

    .right-panel[b-zkxcn3vgj2] {
        height: 60vh;
    }

    .admin-panel[b-zkxcn3vgj2] {
        gap: 5px;
        padding: 8px;
    }

    .admin-input[b-zkxcn3vgj2] {
        width: 120px;
        height: 28px;
        font-size: 12px;
    }

    .category-btn[b-zkxcn3vgj2], .file-action-btn[b-zkxcn3vgj2] {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .admin-panel[b-zkxcn3vgj2] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .admin-input[b-zkxcn3vgj2] {
        width: 100%;
        height: 32px;
    }

    .category-btn[b-zkxcn3vgj2], .file-action-btn[b-zkxcn3vgj2] {
        width: 100%;
        height: 32px;
        justify-content: center;
    }

    .panel-divider[b-zkxcn3vgj2] {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }

    .select-group[b-zkxcn3vgj2] {
        flex-direction: column;
        gap: 8px;
    }

    .category-select[b-zkxcn3vgj2], .file-upload-btn[b-zkxcn3vgj2] {
        width: 100%;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMReportPDFMagE1.razor.rz.scp.css */
/* ===== 主容器样式 ===== */
.report-pdf-container[b-3m30zgce0o] {
    display: flex;
    height: calc(100vh - 70px);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: -10px -15px -10px -20px;
    position: relative;
}

/* ===== 左侧导航面板 ===== */
.left-panel[b-3m30zgce0o] {
    width: 600px;
    min-width: 400px;
    max-width: 900px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #e1e5eb;
}

/* 卡片通用样式 */
.category-card[b-3m30zgce0o],
.management-card[b-3m30zgce0o],
.files-card[b-3m30zgce0o],
.status-card[b-3m30zgce0o] {
    background: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #f0f2f5;
    transition: all 0.3s ease;
}

    .category-card:hover[b-3m30zgce0o],
    .management-card:hover[b-3m30zgce0o],
    .files-card:hover[b-3m30zgce0o] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: #e1e5eb;
    }

/* 卡片标题 */
.card-title[b-3m30zgce0o] {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-subtitle[b-3m30zgce0o] {
    margin: 0 0 5px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #4a5568;
}

/* 分类选择区域 */
.select-group[b-3m30zgce0o] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.category-select[b-3m30zgce0o] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #2d3748;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

    .category-select:hover[b-3m30zgce0o] {
        border-color: #4299e1;
    }

    .category-select:focus[b-3m30zgce0o] {
        outline: none;
        border-color: #4299e1;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
    }

/* 按钮样式 */
.primary-btn[b-3m30zgce0o],
.secondary-btn[b-3m30zgce0o],
.danger-btn[b-3m30zgce0o] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.primary-btn[b-3m30zgce0o] {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
}

    .primary-btn:hover[b-3m30zgce0o] {
        background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3);
    }

.secondary-btn[b-3m30zgce0o] {
    background: #edf2f7;
    color: #4a5568;
}

    .secondary-btn:hover[b-3m30zgce0o] {
        background: #e2e8f0;
        color: #2d3748;
    }

.danger-btn[b-3m30zgce0o] {
    background: #fed7d7;
    color: #c53030;
}

    .danger-btn:hover[b-3m30zgce0o] {
        background: #feb2b2;
    }

    .danger-btn:disabled[b-3m30zgce0o] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.upload-btn[b-3m30zgce0o] {
    padding: 8px 12px;
}

.btn-icon[b-3m30zgce0o] {
    font-size: 16px;
}

/* 分类管理区域 */
.input-group[b-3m30zgce0o] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-input[b-3m30zgce0o] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

    .form-input:focus[b-3m30zgce0o] {
        outline: none;
        border-color: #4299e1;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
    }

/* 文件列表区域 */
.files-header[b-3m30zgce0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.category-badge[b-3m30zgce0o] {
    background: #e6f7ff;
    color: #1890ff;
    padding: 4px 10px 4px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin-top:-6px;
}

.files-container[b-3m30zgce0o] {
    min-height: 200px;
    max-height: 400px;
}

.files-scroll[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 4px;
}

    .files-scroll[b-3m30zgce0o]::-webkit-scrollbar {
        width: 6px;
    }

    .files-scroll[b-3m30zgce0o]::-webkit-scrollbar-track {
        background: #f7fafc;
        border-radius: 3px;
    }

    .files-scroll[b-3m30zgce0o]::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
    }

        .files-scroll[b-3m30zgce0o]::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

/* 文件项样式 */
.file-item[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid #edf2f7;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

    .file-item:hover[b-3m30zgce0o] {
        background: #f0f7ff;
        border-color: #bee3f8;
        transform: translateX(2px);
    }

    .file-item.selected[b-3m30zgce0o] {
        background: #ebf8ff;
        border-color: #90cdf4;
        border-left: 3px solid #4299e1;
    }

.file-icon[b-3m30zgce0o] {
    font-size: 20px;
    flex-shrink: 0;
}

.file-info[b-3m30zgce0o] {
    flex: 1;
    min-width: 0;
}

.file-name[b-3m30zgce0o] {
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.file-meta[b-3m30zgce0o] {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #718096;
}

.file-size[b-3m30zgce0o],
.file-date[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.file-action[b-3m30zgce0o] {
    opacity: 0;
    background: #fed7d7;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c53030;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.file-item:hover .file-action[b-3m30zgce0o] {
    opacity: 1;
}

.file-action:hover[b-3m30zgce0o] {
    background: #feb2b2;
}

/* 空状态样式 */
.empty-state[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #a0aec0;
    text-align: center;
}

.empty-icon[b-3m30zgce0o] {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-text[b-3m30zgce0o] {
    font-size: 14px;
    margin-bottom: 8px;
}

/* 状态卡片样式 */
.status-card[b-3m30zgce0o] {
    padding: 12px;
}

.status-content[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.status-icon[b-3m30zgce0o] {
    font-size: 18px;
    flex-shrink: 0;
}

.status-text[b-3m30zgce0o] {
    flex: 1;
    color: #4a5568;
}

.status-action[b-3m30zgce0o] {
    background: #4299e1;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

    .status-action:hover[b-3m30zgce0o] {
        background: #3182ce;
    }

/* 状态类型样式 */
.status-info[b-3m30zgce0o] {
    background: #ebf8ff;
    border-color: #bee3f8;
}

.status-success[b-3m30zgce0o] {
    background: #f0fff4;
    border-color: #c6f6d5;
}

.status-error[b-3m30zgce0o] {
    background: #fff5f5;
    border-color: #fed7d7;
}

.status-warning[b-3m30zgce0o] {
    background: #fffaf0;
    border-color: #feebc8;
}

.status-loading[b-3m30zgce0o] {
    background: #f7fafc;
    border-color: #e2e8f0;
}

/* ===== 分割条样式 ===== */
.splitter-bar[b-3m30zgce0o] {
    width: 8px;
    background: #e2e8f0;
    cursor: col-resize;
    position: relative;
    transition: background 0.2s;
}

    .splitter-bar:hover[b-3m30zgce0o] {
        background: #cbd5e0;
    }

.splitter-handle[b-3m30zgce0o] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 40px;
    background: #a0aec0;
    border-radius: 3px;
    transform: translateY(-50%);
    transition: background 0.2s;
}

.splitter-bar:hover .splitter-handle[b-3m30zgce0o] {
    background: #718096;
}

/* ===== 右侧内容面板 ===== */
.right-panel[b-3m30zgce0o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

/* 文件标题栏 */
.file-header[b-3m30zgce0o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 20px;
    background: white;
    border-bottom: 1px solid #f0f2f5;
    min-height: 56px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.file-title[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.title-text[b-3m30zgce0o] {
    font-size: 15px;
    font-weight: 500;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.title-meta[b-3m30zgce0o] {
    font-size: 13px;
    color: #718096;
    background: #f7fafc;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* 文件操作按钮 */
.file-actions[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zoom-controls[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f7fafc;
    padding: 4px;
    border-radius: 8px;
}

.icon-btn[b-3m30zgce0o] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 45px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

    .icon-btn:hover[b-3m30zgce0o] {
        background: #edf2f7;
        border-color: #cbd5e0;
        transform: translateY(-1px);
    }

.zoom-level[b-3m30zgce0o] {
    font-size: 13px;
    color: #4a5568;
    min-width: 40px;
    text-align: center;
}

/* 预览容器 */
.preview-container[b-3m30zgce0o] {
    flex: 1;
    padding: 0;
    background: #fafbfc;
    overflow: hidden; /* 隐藏自身的滚动，由子元素处理 */
}

/* PDF预览样式 */
.pdf-viewer[b-3m30zgce0o] {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    overflow-y: auto; /* 如果PDF内容超过容器高度，则显示滚动条 */
}

.pdf-frame[b-3m30zgce0o] {
    width: 100%;
    height: 100%; /* iframe高度为100%，如果PDF页面很高，则会触发.pdf-viewer的滚动条 */
    border: none;
    display: block;
}

/* HTML预览样式 */
.html-viewer[b-3m30zgce0o] {
    width: 100%;
    height: 100%;
    overflow: auto; /* 如果内容超过容器高度，则显示滚动条 */
    padding: 10px; /* 如果保留padding，需要设置box-sizing */
    background: #f5f5f5;
    box-sizing: border-box; /* 包括padding在高度内 */
}

.html-scroll[b-3m30zgce0o] {
    margin: 0 auto;
    transform-origin: top center;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 100%; /* 确保占满.html-viewer的高度 */
    box-sizing: border-box;
}

.html-frame[b-3m30zgce0o] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 加载状态 */
.loading-state[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #718096;
}

.spinner[b-3m30zgce0o] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #4299e1;
    border-radius: 50%;
    animation: spin-b-3m30zgce0o 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-3m30zgce0o {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 错误状态 */
.error-state[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: #c53030;
}

.error-icon[b-3m30zgce0o] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.8;
}

.error-text[b-3m30zgce0o] {
    font-size: 16px;
    max-width: 400px;
    line-height: 1.5;
}

/* 欢迎状态 */
.welcome-state[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: #4a5568;
}

.welcome-icon[b-3m30zgce0o] {
    font-size: 64px;
    margin-bottom: 24px;
    opacity: 0.6;
}

.welcome-content[b-3m30zgce0o] {
    max-width: 400px;
}

    .welcome-content h3[b-3m30zgce0o] {
        margin: 0 0 24px 0;
        font-size: 20px;
        font-weight: 600;
        color: #2d3748;
    }

.instructions[b-3m30zgce0o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.step[b-3m30zgce0o] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.step-number[b-3m30zgce0o] {
    width: 24px;
    height: 24px;
    background: #4299e1;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.supported-formats[b-3m30zgce0o] {
    color: #a0aec0;
    font-size: 13px;
}

/* Toast通知样式 */
.toast[b-3m30zgce0o] {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    max-width: 300px;
}

    .toast.show[b-3m30zgce0o] {
        transform: translateX(0);
    }

.toast-icon[b-3m30zgce0o] {
    font-size: 18px;
    flex-shrink: 0;
}

.toast-message[b-3m30zgce0o] {
    font-size: 14px;
    color: #2d3748;
}

.toast-success[b-3m30zgce0o] {
    border-left: 4px solid #38a169;
}

.toast-error[b-3m30zgce0o] {
    border-left: 4px solid #e53e3e;
}

.toast-info[b-3m30zgce0o] {
    border-left: 4px solid #4299e1;
}

.toast-warning[b-3m30zgce0o] {
    border-left: 4px solid #d69e2e;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1024px) {
    .report-pdf-container[b-3m30zgce0o] {
        height: calc(100vh - 60px);
    }

    .left-panel[b-3m30zgce0o] {
        width: 280px;
        min-width: 280px;
    }

    .title-text[b-3m30zgce0o] {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .report-pdf-container[b-3m30zgce0o] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .left-panel[b-3m30zgce0o] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 60vh;
        border-right: none;
        border-bottom: 1px solid #e1e5eb;
    }

    .splitter-bar[b-3m30zgce0o] {
        width: 100%;
        height: 8px;
        cursor: row-resize;
    }

    .splitter-handle[b-3m30zgce0o] {
        top: 1px;
        left: 50%;
        width: 40px;
        height: 6px;
        transform: translateX(-50%);
    }

    .files-container[b-3m30zgce0o] {
        max-height: 250px;
    }

    .title-text[b-3m30zgce0o] {
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .left-panel[b-3m30zgce0o] {
        padding: 12px;
    }

    .category-card[b-3m30zgce0o],
    .management-card[b-3m30zgce0o],
    .files-card[b-3m30zgce0o],
    .status-card[b-3m30zgce0o] {
        padding: 12px;
    }

    .file-header[b-3m30zgce0o] {
        padding: 8px 12px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .file-title[b-3m30zgce0o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .title-text[b-3m30zgce0o] {
        max-width: 100%;
    }

    .file-actions[b-3m30zgce0o] {
        justify-content: flex-end;
    }

    .select-group[b-3m30zgce0o] {
        flex-direction: column;
    }

    .input-group[b-3m30zgce0o] {
        flex-wrap: wrap;
    }

    .form-input[b-3m30zgce0o] {
        width: 100%;
        margin-bottom: 8px;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMReportPDFV2.razor.rz.scp.css */
/* ===== XML注释分组：主容器样式 ===== */
.report-pdf-container[b-2syls7ik56] {
    display: flex;
    height: calc(100vh - 60px);
    min-height: 700px;
    margin: 0;
    background: #f5f7fa;
    position: relative;
    overflow: hidden;
    user-select: none;
}

/* ===== XML注释分组：左侧导航面板 ===== */
.left-panel[b-2syls7ik56] {
    width: 320px;
    min-width: 200px;
    max-width: 500px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    border-right: 1px solid #e4e7ec;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* ===== XML注释分组：分类选择卡片 ===== */
.category-card[b-2syls7ik56] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border-radius: 6px;
    padding: 10px 10px 6px 10px;
    border: 1px solid #d1e9ff;
    margin-bottom: 0px;
}

.category-header[b-2syls7ik56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.card-title[b-2syls7ik56] {
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    letter-spacing: 3px; /* 字符之间增加3px间距 */
    flex: 1;
    margin-bottom: 3px;
}

/* 【新增】折叠按钮样式 */
.collapse-toggle[b-2syls7ik56] {
    background: transparent;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0066cc;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .collapse-toggle:hover[b-2syls7ik56] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.category-select-container[b-2syls7ik56] {
    position: relative;
}

.category-select[b-2syls7ik56] {
    width: 100%;
    padding: 7px 10px 7px 10px;
    background: white;
    border: 1px solid #cce0ff;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    padding-right: 32px;
    transition: all 0.2s;
}

    .category-select:hover[b-2syls7ik56] {
        border-color: #99c2ff;
        background: #f5faff;
    }

    .category-select:focus[b-2syls7ik56] {
        outline: none;
        border-color: #66a3ff;
        box-shadow: 0 0 0 2px rgba(102, 163, 255, 0.2);
    }

.category-select-container[b-2syls7ik56]::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #666;
    pointer-events: none;
}

/* ===== XML注释分组：文件列表卡片 ===== */
.files-card[b-2syls7ik56] {
    flex: 1;
    background: white;
    border-radius: 6px;
    border: 2px solid #e4e7ec;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: all 0.3s ease;
}

    /* 【新增】折叠状态样式 */
    .files-card.collapsed[b-2syls7ik56] {
        height: 0;
        min-height: 0;
        border: none;
        overflow: hidden;
        flex: 0;
    }

.files-header[b-2syls7ik56] {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

.files-title[b-2syls7ik56] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-badge[b-2syls7ik56] {
    background: #e6f2ff;
    color: #0066cc;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cce0ff;
}

.files-content[b-2syls7ik56] {
    flex: 1;
    padding: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.files-card.collapsed .files-content[b-2syls7ik56] {
    opacity: 0;
    pointer-events: none;
}

.files-scroll[b-2syls7ik56] {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

    /* ===== XML注释分组：滚动条样式优化 ===== */
    /* 【修改】垂直滚动条深灰色、宽度大些，参考showHtmlView右侧的垂直滚动条设置 */
    .files-scroll[b-2syls7ik56]::-webkit-scrollbar {
        width: 12px; /* 【增加】滚动条宽度 */
    }

    .files-scroll[b-2syls7ik56]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【增加】圆角增大 */
    }

    .files-scroll[b-2syls7ik56]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【增加】边框增大 */
    }

        .files-scroll[b-2syls7ik56]::-webkit-scrollbar-thumb:hover {
            background: #555; /* 【修改】更深的灰色 */
        }

.files-scroll[b-2syls7ik56] {
    scrollbar-width: 12px; /* 【增加】Firefox滚动条宽度 */
    scrollbar-color: #666 #f1f1f1; /* 【修改】深灰色 */
}

/* ===== XML注释分组：文件项样式 ===== */
.file-item[b-2syls7ik56] {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin: 1px 0;
    background: white;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 8px;
    position: relative;
}

    .file-item:hover[b-2syls7ik56] {
        background: #f5faff;
        border-color: #cce0ff;
        transform: translateX(1px);
    }

    .file-item.selected[b-2syls7ik56] {
        background: #e6f2ff;
        border-color: #99c2ff;
        border-left: 2px solid #0066cc;
    }

.file-icon[b-2syls7ik56] {
    font-size: 15px;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f0f9ff;
    color: #0066cc;
}

.file-info[b-2syls7ik56] {
    flex: 1;
    min-width: 0;
}

.file-name[b-2syls7ik56] {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.file-meta[b-2syls7ik56] {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #666;
}

.file-size[b-2syls7ik56]::before {
    content: '📦 ';
    font-size: 10px;
}

.file-date[b-2syls7ik56]::before {
    content: '📅 ';
    font-size: 10px;
}

/* ===== XML注释分组：空状态样式 ===== */
.files-empty[b-2syls7ik56] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #999;
    text-align: center;
}

.empty-icon[b-2syls7ik56] {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.4;
}

.empty-text[b-2syls7ik56] {
    font-size: 13px;
    margin-bottom: 3px;
    color: #666;
}

.empty-hint[b-2syls7ik56] {
    font-size: 11px;
    opacity: 0.8;
}

/* ===== XML注释分组：分割条样式 ===== */
.splitter-bar[b-2syls7ik56] {
    width: 8px;
    background: #bcc1c8;
    cursor: col-resize;
    position: relative;
    transition: background 0.2s ease;
    z-index: 3;
}

    .splitter-bar:hover[b-2syls7ik56] {
        background: #90EE90; /* 浅绿色 */
    }

    /* 【修改】分割条滚动条样式优化 */
    .splitter-bar[b-2syls7ik56]::-webkit-scrollbar {
        width: 12px; /* 【增加】与右侧一致 */
    }

    .splitter-bar[b-2syls7ik56]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1;
    }

.splitter-handle[b-2syls7ik56] {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 3px;
    height: 30px;
    background: #0066cc;
    border-radius: 2px;
    transform: translateY(-50%);
}

.splitter-bar.dragging[b-2syls7ik56] {
    background: #99c2ff !important;
}

    .splitter-bar.dragging .splitter-handle[b-2syls7ik56] {
        background: #004d99;
    }

/* ===== XML注释分组：右侧内容面板 ===== */
.right-panel[b-2syls7ik56] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

/* ===== XML注释分组：文件标题栏 ===== */
.file-header[b-2syls7ik56] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #e6f2ff 0%, #d1e9ff 100%);
    border-bottom: 1px solid #cce0ff;
    min-height: 38px;
}

.file-title[b-2syls7ik56] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.title-text[b-2syls7ik56] {
    font-size: 13px;
    font-weight: 600;
    color: #0066cc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.title-meta[b-2syls7ik56] {
    font-size: 11px;
    color: #666;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #cce0ff;
    flex-shrink: 0;
    font-weight: 500;
}

/* ===== XML注释分组：文件操作按钮 ===== */
.file-actions[b-2syls7ik56] {
    display: flex;
    align-items: center;
}

.zoom-controls[b-2syls7ik56] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #cce0ff;
}

.zoom-btn[b-2syls7ik56], .reset-btn[b-2syls7ik56] {
    width: 28px;
    height: 26px;
    border: 1px solid #d1e9ff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    color: #0066cc;
    font-size: 13px;
    font-weight: bold;
}

    .zoom-btn:hover[b-2syls7ik56] {
        background: #e6f2ff;
        border-color: #99c2ff;
    }

.reset-btn[b-2syls7ik56] {
    background: #f0f9ff;
}

    .reset-btn:hover[b-2syls7ik56] {
        background: #e6f2ff;
    }

.zoom-level[b-2syls7ik56] {
    font-size: 11px;
    color: #0066cc;
    min-width: 34px;
    text-align: center;
    font-weight: 600;
}

/* ===== XML注释分组：预览容器 ===== */
.preview-container[b-2syls7ik56] {
    flex: 1;
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ===== XML注释分组：PDF预览样式 ===== */
.pdf-viewer[b-2syls7ik56] {
    width: 100%;
    flex: 1;
    background: #f0f2f5;
    display: flex;
    overflow: auto;
}

.pdf-frame[b-2syls7ik56] {
    width: 100%;
    height: 100%;
    min-width: 100%;
    border: none;
    display: block;
    flex-shrink: 0;
}

/* 【新增】隐藏PDF控件的下载和打印按钮 */
.pdf-frame[b-2syls7ik56] {
    /* Chrome, Edge, Safari */
    -webkit-print-color-adjust: exact !important;
}

/* ===== XML注释分组：HTML预览样式优化 ===== */
/* 【修改】html-viewer高度填充父容器preview-container高度，和pdf-viewer区域一样设置 */
.html-viewer[b-2syls7ik56] {
    width: 100%;
    flex: 1; /* 【确保】填充剩余空间 */
    background: #f0f2f5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0; /* 【重要】允许收缩 */
}

.html-scroll[b-2syls7ik56] {
    width: 100%;
    min-height: 100%; /* 【修改】最小高度100% */
    margin: 0;
    transform-origin: top left;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    box-sizing: border-box;
    overflow: auto;
    flex-shrink: 0;
    display: flex; /* 【新增】flex布局 */
    flex-direction: column;
}

    .html-scroll[b-2syls7ik56]::-webkit-scrollbar {
        width: 12px; /* 【修改】宽度增大 */
        height: 12px;
    }

    .html-scroll[b-2syls7ik56]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【修改】圆角增大 */
    }

    .html-scroll[b-2syls7ik56]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【修改】边框增大 */
    }

        .html-scroll[b-2syls7ik56]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.html-frame[b-2syls7ik56] {
    width: 100%;
    height: 100%;
    min-width: 100%;
    border: none;
    display: block;
    border-radius: 5px;
    flex: 1; /* 【重要】填充父容器 */
}

/* ===== XML注释分组：加载状态 ===== */
.loading-state[b-2syls7ik56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.95);
}

.loading-spinner[b-2syls7ik56] {
    width: 36px;
    height: 36px;
    border: 2px solid #e6f2ff;
    border-top: 2px solid #0066cc;
    border-radius: 50%;
    animation: spin-b-2syls7ik56 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-2syls7ik56 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-2syls7ik56] {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：错误状态 ===== */
.error-state[b-2syls7ik56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
    background: white;
    border: 1px solid #ffcccc;
    border-radius: 6px;
    margin: 10px;
}

.error-icon[b-2syls7ik56] {
    font-size: 36px;
    margin-bottom: 10px;
    color: #ff3333;
}

.error-text[b-2syls7ik56] {
    font-size: 13px;
    color: #666;
    max-width: 400px;
    line-height: 1.4;
    background: #fff5f5;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ffcccc;
}

/* ===== XML注释分组：欢迎状态 ===== */
.welcome-state[b-2syls7ik56] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    text-align: center;
}

.welcome-icon[b-2syls7ik56] {
    font-size: 42px;
    margin-bottom: 12px;
    color: #cce0ff;
    opacity: 0.8;
}

.welcome-content[b-2syls7ik56] {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 380px;
    border: 1px solid #e6f2ff;
}

.welcome-title[b-2syls7ik56] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0066cc;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6f2ff;
}

.welcome-steps[b-2syls7ik56] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.step[b-2syls7ik56] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.step-number[b-2syls7ik56] {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce0ff 100%);
    color: #0066cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid #b3d1ff;
}

.step-text[b-2syls7ik56] {
    font-size: 13px;
    color: #444;
    text-align: left;
    flex: 1;
}

.welcome-formats[b-2syls7ik56] {
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.formats-text[b-2syls7ik56] {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* ===== XML注释分组：Toast通知样式 ===== */
.toast[b-2syls7ik56] {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 10px 14px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 9999;
    max-width: 280px;
    border: 1px solid #e4e7ec;
    pointer-events: none;
}

    .toast.show[b-2syls7ik56] {
        transform: translateX(0);
        pointer-events: auto;
    }

.toast-icon[b-2syls7ik56] {
    font-size: 15px;
    flex-shrink: 0;
}

.toast-message[b-2syls7ik56] {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

.toast-success[b-2syls7ik56] {
    border-left: 3px solid #00cc66;
    background: linear-gradient(90deg, #f0fff4 0%, white 100%);
}

.toast-error[b-2syls7ik56] {
    border-left: 3px solid #ff3333;
    background: linear-gradient(90deg, #fff5f5 0%, white 100%);
}

.toast-info[b-2syls7ik56] {
    border-left: 3px solid #0066cc;
    background: linear-gradient(90deg, #f0f9ff 0%, white 100%);
}

.toast-warning[b-2syls7ik56] {
    border-left: 3px solid #ff9900;
    background: linear-gradient(90deg, #fffaf0 0%, white 100%);
}

/* ===== XML注释分组：全局滚动条优化 ===== */
*[b-2syls7ik56] {
    scrollbar-width: thin;
    scrollbar-color: #666 #f1f1f1; /* 【修改】深灰色 */
}

    *[b-2syls7ik56]::-webkit-scrollbar {
        width: 12px; /* 【增加】宽度 */
        height: 12px;
    }

    *[b-2syls7ik56]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px; /* 【增加】圆角 */
    }

    *[b-2syls7ik56]::-webkit-scrollbar-thumb {
        background: #666; /* 【修改】深灰色 */
        border-radius: 6px;
        border: 3px solid #f1f1f1; /* 【增加】边框 */
    }

        *[b-2syls7ik56]::-webkit-scrollbar-thumb:hover {
            background: #555; /* 【修改】更深的灰色 */
        }

        *[b-2syls7ik56]::-webkit-scrollbar-thumb:active {
            background: #444; /* 【修改】更深的灰色 */
        }

/* ===== XML注释分组：分割条交互修复 ===== */
.splitter-bar *[b-2syls7ik56] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ===== XML注释分组：响应式设计 ===== */
@media (max-width: 1200px) {
    .report-pdf-container[b-2syls7ik56] {
        height: calc(100vh - 56px);
    }

    .left-panel[b-2syls7ik56] {
        width: 300px;
        min-width: 280px;
    }

    .title-text[b-2syls7ik56] {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .left-panel[b-2syls7ik56] {
        width: 280px;
        min-width: 260px;
    }

    .category-card[b-2syls7ik56], .files-header[b-2syls7ik56] {
        padding: 8px 8px 4px 8px;
    }

    .title-text[b-2syls7ik56] {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .report-pdf-container[b-2syls7ik56] {
        flex-direction: column;
        height: auto;
        min-height: 700px;
    }

    .left-panel[b-2syls7ik56] {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        flex-shrink: 0;
    }

    /*左侧报告清单区高度变化*/
    .files-card[b-2syls7ik56] {
        min-height: 100px;
        max-height: 350px;
    }

    /* 【新增】当文件卡片折叠时，调整左侧面板高度 */
    .left-panel:has(.files-card.collapsed)[b-2syls7ik56] {
        height: auto !important;
        min-height: auto !important;
        flex-shrink: 0;
        padding-bottom: 10px;  /*根据实际需要调整 */
    }



    .splitter-bar[b-2syls7ik56] {
        width: 100%;
        height: 5px;
        cursor: row-resize;
    }

        .splitter-bar:hover[b-2syls7ik56] {
            background: #99c2ff;
        }

    .splitter-handle[b-2syls7ik56] {
        left: 50%;
        top: 1px;
        width: 30px;
        height: 3px;
        transform: translateX(-50%);
    }

    .files-content[b-2syls7ik56] {
        max-height: none;
    }

    .right-panel[b-2syls7ik56] {
        flex: 1;
        min-height: 500px; /* 确保有最小高度 */
    }

    /* 【修改或添加这里】PDF和HTML预览区的最小高度 */
    .pdf-viewer[b-2syls7ik56] {
        min-height: 495px; /* 确保有最小高度 */
        height: 100%;
    }

    .html-viewer[b-2syls7ik56] {
        min-height: 495px; /* 确保有最小高度 */
        height: 100%;
    }

    /* 【修改或添加这里】iframe的最小高度 */
    .pdf-frame[b-2syls7ik56], .html-frame[b-2syls7ik56] {
        min-height: 495px; /* 确保有最小高度 */
        height: 100%;
        
    }

    /* 【修改或添加这里】预览容器的默认最小高度 */
    .preview-container[b-2syls7ik56] {
        min-height: 500px;
    }

    .file-header[b-2syls7ik56] {
        padding: 5px 10px;
        min-height: 36px;
    }

    .title-text[b-2syls7ik56] {
        max-width: 100%;
        font-size: 12px;
    }

    .file-actions[b-2syls7ik56] {
        justify-content: flex-end;
    }

    .zoom-btn[b-2syls7ik56], .reset-btn[b-2syls7ik56] {
        width: 26px;
        height: 24px;
        font-size: 12px;
    }

    .zoom-level[b-2syls7ik56] {
        min-width: 30px;
        font-size: 10px;
    }

    /* 【修改】移动端折叠按钮调整 */
    .collapse-toggle[b-2syls7ik56] {
        width: 26px;
        height: 24px;
        font-size: 11px;
    }
}

@media (max-width: 576px) {
    .report-pdf-container[b-2syls7ik56] {
        min-height: 700px;
    }

    .left-panel[b-2syls7ik56] {
        padding: 8px;
    }

    .category-card[b-2syls7ik56] {
        padding: 8px 8px 4px 8px;
    }

    .files-header[b-2syls7ik56] {
        padding: 6px 8px;
    }

    /*左侧报告清单区高度变化*/
    .files-card[b-2syls7ik56] {
        min-height: 100px;
        max-height: 350px;
    }

    .welcome-content[b-2syls7ik56] {
        padding: 16px;
        margin: 0 10px;
    }

    .welcome-title[b-2syls7ik56] {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .step-text[b-2syls7ik56] {
        font-size: 12px;
    }

    .toast[b-2syls7ik56] {
        max-width: calc(100% - 20px);
        right: 10px;
        left: 10px;
        top: 10px;
    }
}
/* _content/LEAFBlazorApp25/Components/ProjectManage/Pages/PMTaskTrack.razor.rz.scp.css */
/* 任务跟踪系统样式 */
.track-container[b-kg92jzuhn9] {
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* 头部样式 */
.track-header[b-kg92jzuhn9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.track-title[b-kg92jzuhn9] {
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
}

.track-header-actions[b-kg92jzuhn9] {
    display: flex;
    gap: 10px;
}

/* 筛选区域样式 */
.track-filter-section[b-kg92jzuhn9] {
    transition: all 0.3s ease-in-out;
    margin-bottom: 20px;
}

    .track-filter-section.hide[b-kg92jzuhn9] {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0;
    }

    .track-filter-section.show[b-kg92jzuhn9] {
        max-height: 500px;
        opacity: 1;
    }

.filter-card[b-kg92jzuhn9] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.filter-title[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: 0;
    padding: 15px 20px;
    font-size: 1.1rem;
}

.filter-form[b-kg92jzuhn9] {
    padding: 20px;
}

.form-row[b-kg92jzuhn9] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-kg92jzuhn9] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .form-group.full-width[b-kg92jzuhn9] {
        flex: 0 0 100%;
    }

.form-label[b-kg92jzuhn9] {
    font-weight: 600;
    margin-bottom: 5px;
    color: #495057;
}

    .form-label.required[b-kg92jzuhn9]::after {
        content: " *";
        color: #dc3545;
    }

.form-control[b-kg92jzuhn9] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.15s ease-in-out;
}

    .form-control:focus[b-kg92jzuhn9] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

.filter-actions[b-kg92jzuhn9] {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

/* 加载状态 */
.track-loading[b-kg92jzuhn9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 无数据状态 */
.track-no-data[b-kg92jzuhn9] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .track-no-data i[b-kg92jzuhn9] {
        font-size: 48px;
        color: #6c757d;
        margin-bottom: 15px;
    }

/* 表格样式 */
.track-table-section[b-kg92jzuhn9] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.table-responsive[b-kg92jzuhn9] {
    overflow-x: auto;
}

.track-table[b-kg92jzuhn9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .track-table th[b-kg92jzuhn9] {
        background: #f8f9fa;
        padding: 15px 12px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .track-table td[b-kg92jzuhn9] {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
    }

    .track-table tr:hover[b-kg92jzuhn9] {
        background-color: #f8f9fa;
    }

    .track-table tr.track-deleted[b-kg92jzuhn9] {
        background-color: #fff5f5;
        opacity: 0.7;
    }

        .track-table tr.track-deleted:hover[b-kg92jzuhn9] {
            background-color: #ffe6e6;
        }

.track-empty-row[b-kg92jzuhn9] {
    background-color: #f8f9fa;
}

    .track-empty-row:hover[b-kg92jzuhn9] {
        background-color: #e9ecef;
    }

/* 表格列特定样式 */
.track-task-number[b-kg92jzuhn9] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #667eea;
}

.track-description[b-kg92jzuhn9] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-plan-date[b-kg92jzuhn9], .track-actual-date[b-kg92jzuhn9] {
    white-space: nowrap;
}

/* 状态徽章 */
.status-badge[b-kg92jzuhn9] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    min-width: 70px;
}

.status-completed[b-kg92jzuhn9] {
    background: #d4edda;
    color: #155724;
}

.status-progress[b-kg92jzuhn9] {
    background: #d1ecf1;
    color: #0c5460;
}

.status-delayed[b-kg92jzuhn9] {
    background: #f8d7da;
    color: #721c24;
}

.status-cancelled[b-kg92jzuhn9] {
    background: #e2e3e5;
    color: #383d41;
}

/* 操作按钮 */
.track-actions[b-kg92jzuhn9] {
    white-space: nowrap;
}

    .track-actions .btn[b-kg92jzuhn9] {
        margin: 0 2px;
        padding: 4px 8px;
        font-size: 12px;
    }

/* 模态框样式 */
.track-modal[b-kg92jzuhn9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    padding: 20px;
}

.modal-dialog[b-kg92jzuhn9] {
    max-width: 800px;
    width: 100%;
}

.modal-content[b-kg92jzuhn9] {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 20px;
}

.modal-title[b-kg92jzuhn9] {
    margin: 0;
    font-weight: 600;
}

.btn-close[b-kg92jzuhn9] {
    filter: invert(1);
}

.modal-body[b-kg92jzuhn9] {
    padding: 30px;
}

.form-grid[b-kg92jzuhn9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

    .form-grid .full-width[b-kg92jzuhn9] {
        grid-column: 1 / -1;
    }

.modal-footer[b-kg92jzuhn9] {
    border-top: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}

/* 按钮样式 */
.btn[b-kg92jzuhn9] {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .btn:hover[b-kg92jzuhn9] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .btn:active[b-kg92jzuhn9] {
        transform: translateY(0);
    }

.btn-primary[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-success[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.btn-warning[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}

.btn-danger[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.btn-info[b-kg92jzuhn9] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.btn-outline-primary[b-kg92jzuhn9] {
    border: 1px solid #667eea;
    color: #667eea;
    background: transparent;
}

    .btn-outline-primary:hover[b-kg92jzuhn9] {
        background: #667eea;
        color: white;
    }

/* 响应式设计 */
@media (max-width: 768px) {
    .track-container[b-kg92jzuhn9] {
        padding: 10px;
    }

    .track-header[b-kg92jzuhn9] {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .form-row[b-kg92jzuhn9] {
        flex-direction: column;
        gap: 15px;
    }

    .form-grid[b-kg92jzuhn9] {
        grid-template-columns: 1fr;
    }

    .track-table[b-kg92jzuhn9] {
        font-size: 12px;
    }

        .track-table th[b-kg92jzuhn9],
        .track-table td[b-kg92jzuhn9] {
            padding: 8px 6px;
        }

    .track-actions[b-kg92jzuhn9] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .modal-dialog[b-kg92jzuhn9] {
        margin: 10px;
    }

    .modal-body[b-kg92jzuhn9] {
        padding: 20px;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatAdmin.razor.rz.scp.css */
/* ChatAdmin.razor.css */
/* ===== 基础重置和容器样式 ===== */
*[b-hp5r8f3kt0] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.leaf-admin-container[b-hp5r8f3kt0] {
    display: flex;
    height: 100%;
    width: 100%;
    background: #f5f6fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    gap: 0;
}

/* ===== 左侧区域样式 ===== */
.leaf-admin-left[b-hp5r8f3kt0] {
    width: 280px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e1e5e9;
    margin: 0;
    padding: 0;
}

/* 头部统计区域 - 简洁设计 */
.leaf-admin-header[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #ffffff;
    flex-shrink: 0;
}

.leaf-header-content[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaf-admin-title[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 700;
}

.leaf-admin-icon[b-hp5r8f3kt0] {
    font-size: 1.1em;
    color: #6B46C1;
}

/* 统计项样式 - 简洁边框设计 */
.leaf-admin-stats[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.leaf-stat-item[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ffffff;
    font-size: 0.9rem;
    border: 2px solid #e1e5e9;
    transition: all 0.2s ease;
    color: #2c3e50;
}

    .leaf-stat-item:hover[b-hp5r8f3kt0] {
        background: #f8f9fa;
    }

    /* 使用不同颜色的边框 */
    .leaf-stat-item.primary[b-hp5r8f3kt0] {
        border-color: #6B46C1;
    }

    .leaf-stat-item.success[b-hp5r8f3kt0] {
        border-color: #38A169;
    }

    .leaf-stat-item.warning[b-hp5r8f3kt0] {
        border-color: #D69E2E;
    }

    .leaf-stat-item.info[b-hp5r8f3kt0] {
        border-color: #3182CE;
    }

.leaf-stat-icon[b-hp5r8f3kt0] {
    font-size: 1.3rem;
    opacity: 0.8;
}

.leaf-stat-info[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.leaf-stat-value[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    color: #2c3e50;
}

.leaf-stat-label[b-hp5r8f3kt0] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 2px;
    color: #4a5568;
    font-weight: 300;
}

/* 选项卡导航区域 - 简洁设计 */
.leaf-admin-nav[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    padding: 2px 8px;
    gap: 8px;
    flex: 1;
    background: #ffffff;
    margin: 8px 0 8px 0;
    border-radius: 4px;
    /* 添加浅灰色边框 */
    border: 4px solid #e0e0e0; /* 浅灰色边框 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 可选：添加轻微阴影增强立体感 */
}

.leaf-nav-title[b-hp5r8f3kt0] {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 6px 0 6px 0;
    border-bottom: 1px solid #e1e5e9;
    text-align: center;
}

.leaf-nav-item[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a5568;
    font-size: 0.8rem;
    text-align: left;
    border: 1px solid transparent;
    margin:5px 0 5px 0;
}

    .leaf-nav-item:hover[b-hp5r8f3kt0] {
        background: #FFC000;/*#f8f9fa;*/
        color: #2c3e50;
    }

.leaf-nav-active[b-hp5r8f3kt0] {
    background: #6B46C1;
    color: #ffffff;
    border-color: #6B46C1;
}

    .leaf-nav-active .leaf-nav-icon[b-hp5r8f3kt0] {
        color: #ffffff;
    }

.leaf-nav-icon[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    width: 1.1rem;
    text-align: center;
    color: #718096;
}

.leaf-nav-text[b-hp5r8f3kt0] {
    font-weight: 600;
    font-size: 1.1rem;
    margin-left:10px;
}

/* ===== 右侧区域样式 ===== */
.leaf-admin-right[b-hp5r8f3kt0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin: 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

/* ===== 内容面板通用样式 ===== */
.leaf-admin-panel[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;

}

/* 面板头部 - 简洁设计 */
.leaf-panel-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 30px 8px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #ffffff;
    flex-shrink: 0;
    min-height: 70px;
}

.leaf-panel-title[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 700;
}

.leaf-panel-actions[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaf-action-buttons[b-hp5r8f3kt0] {
    display: flex;
    gap: 8px;
}

.leaf-results-info[b-hp5r8f3kt0] {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
}

.leaf-count[b-hp5r8f3kt0] {
    background: #6B46C1;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* ===== 查询条件区域 - 简洁设计 ===== */
.leaf-query-filters[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 4px solid #6B46C1;
    /*#e1e5e9;*/
    background: #f8f9fa;
    flex-shrink: 0;
}

.leaf-filter-row[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

    .leaf-filter-row:last-child[b-hp5r8f3kt0] {
        margin-bottom: 0;
    }

.leaf-filter-group.compact[b-hp5r8f3kt0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-filter-label[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    min-width: 70px;
    flex-shrink: 0;
}

.leaf-filter-controls[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/*分类选项*/
.leaf-filter-controls-Cate[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    margin-left:10px;
}

.leaf-select-input-Cate[b-hp5r8f3kt0] {
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 150px;
    transition: all 0.2s ease;
    gap: 20px;
}

/*其他统一设置*/
.leaf-date-group[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.leaf-date-label[b-hp5r8f3kt0] {
    font-size: 0.8rem;
    color: #6c757d;
    min-width: 30px;
    font-weight: 500;
}

.leaf-date-input[b-hp5r8f3kt0],
.leaf-text-input[b-hp5r8f3kt0],
.leaf-select-input[b-hp5r8f3kt0] {
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 120px;
    transition: all 0.2s ease;
}

    .leaf-date-input:focus[b-hp5r8f3kt0],
    .leaf-text-input:focus[b-hp5r8f3kt0],
    .leaf-select-input:focus[b-hp5r8f3kt0] {
        outline: none;
        border-color: #6B46C1;
    }

.leaf-text-input-Conent[b-hp5r8f3kt0]{
    padding: 6px 8px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 340px;
    transition: all 0.2s ease;
}

.leaf-checkbox-label.compact[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
    margin-left:20px;
}

.leaf-checkbox-text[b-hp5r8f3kt0] {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===== 查询结果区域 ===== */
.leaf-query-results[b-hp5r8f3kt0] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: #f8f9fa;
}

.leaf-messages-list[b-hp5r8f3kt0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 消息项样式 - 简洁设计 */
.leaf-message-item[b-hp5r8f3kt0] {
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

    .leaf-message-item:hover[b-hp5r8f3kt0] {
        border-color: #cbd5e0;
    }

.leaf-message-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f3f4;
}

.leaf-message-meta[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

.leaf-message-status[b-hp5r8f3kt0] {
    display: flex;
    gap: 4px;
}

.leaf-read-status[b-hp5r8f3kt0] {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

    .leaf-read-status.read[b-hp5r8f3kt0] {
        background: #C6F6D5;
        color: #22543D;
    }

    .leaf-read-status.unread[b-hp5r8f3kt0] {
        background: #FED7D7;
        color: #742A2A;
    }

.leaf-message-content[b-hp5r8f3kt0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.leaf-sender-badge[b-hp5r8f3kt0] {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

    .leaf-sender-badge.visitor[b-hp5r8f3kt0] {
        background: #EBF8FF;
        color: #2B6CB0;
    }

    .leaf-sender-badge.agent[b-hp5r8f3kt0] {
        background: #F0FFF4;
        color: #276749;
    }

.leaf-content-text[b-hp5r8f3kt0] {
    flex: 1;
    line-height: 1.4;
    color: #2c3e50;
    font-size: 0.85rem;
    padding: 2px 0;
}

.leaf-message-actions[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid #f1f3f4;
}

.leaf-category-edit[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-category-label[b-hp5r8f3kt0] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
}

.leaf-category-select[b-hp5r8f3kt0] {
    padding: 4px 6px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #ffffff;
    min-width: 100px;
    font-weight: 500;
}

.leaf-category-badge[b-hp5r8f3kt0] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

    .leaf-category-badge.follow[b-hp5r8f3kt0] {
        background: #FFFBEB;
        color: #744210;
    }

    .leaf-category-badge.important[b-hp5r8f3kt0] {
        background: #F0FFF4;
        color: #22543D;
    }

    .leaf-category-badge.urgent[b-hp5r8f3kt0] {
        background: #FED7D7;
        color: #742A2A;
    }

    .leaf-category-badge.other[b-hp5r8f3kt0] {
        background: #EDF2F7;
        color: #2D3748;
    }

/* ===== 按钮样式系统 - 简洁设计 ===== */
.leaf-btn[b-hp5r8f3kt0] {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.0rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #ffffff;
    min-width:130px;
}

.leaf-primary-btn[b-hp5r8f3kt0] {
    background: #6B46C1;
}

    .leaf-primary-btn:hover[b-hp5r8f3kt0] {
        background: #553C9A;
    }

.leaf-export-btn[b-hp5r8f3kt0] {
    background: #38A169;
}

    .leaf-export-btn:hover[b-hp5r8f3kt0] {
        background: #2F855A;
    }

.leaf-danger-btn[b-hp5r8f3kt0] {
    background: #E53E3E;
}

    .leaf-danger-btn:hover:not(:disabled)[b-hp5r8f3kt0] {
        background: #C53030;
    }

    .leaf-danger-btn:disabled[b-hp5r8f3kt0] {
        background: #A0AEC0;
        cursor: not-allowed;
    }

.leaf-secondary-btn[b-hp5r8f3kt0] {
    background: #718096;
}

    .leaf-secondary-btn:hover[b-hp5r8f3kt0] {
        background: #4A5568;
    }

.leaf-save-btn[b-hp5r8f3kt0] {
    background: #38A169;
    padding: 4px 8px;
    font-size: 0.8rem;
}

    .leaf-save-btn:hover[b-hp5r8f3kt0] {
        background: #2F855A;
    }

.leaf-btn-icon[b-hp5r8f3kt0] {
    font-size: 1.0rem;
}

/* ===== 消息操作按钮区域 ===== */
.leaf-message-action-buttons[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leaf-deleted-btn[b-hp5r8f3kt0] {
    background: #A0AEC0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

.leaf-btn-disabled[b-hp5r8f3kt0] {
    background: #A0AEC0 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

/* ===== 空状态样式 - 简洁设计 ===== */
.leaf-empty-state[b-hp5r8f3kt0] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
    background: #ffffff;
    border-radius: 4px;
    border: 1px dashed #e1e5e9;
}

.leaf-empty-icon[b-hp5r8f3kt0] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.leaf-empty-text[b-hp5r8f3kt0] {
    font-size: 1rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.leaf-empty-subtext[b-hp5r8f3kt0] {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* ===== 数据清理面板样式 ===== */
.leaf-cleanup-filters[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.leaf-cleanup-warning[b-hp5r8f3kt0] {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFBEB;
    border: 1px solid #F6E05E;
    border-radius: 4px;
    margin-bottom: 10px;
}

.leaf-warning-icon[b-hp5r8f3kt0] {
    font-size: 1.2rem;
    color: #D69E2E;
}

.leaf-warning-content[b-hp5r8f3kt0] {
    flex: 1;
}

    .leaf-warning-content strong[b-hp5r8f3kt0] {
        color: #744210;
        font-size: 0.85rem;
    }

    .leaf-warning-content p[b-hp5r8f3kt0] {
        margin: 4px 0 0 0;
        color: #744210;
        font-size: 0.8rem;
    }

.leaf-cleanup-preview[b-hp5r8f3kt0] {
    padding: 8px 12px;
    background: #F0FFF4;
    border: 1px solid #9AE6B4;
    border-radius: 4px;
    margin: 8px 0;
    font-size: 0.85rem;
}

.leaf-cleanup-result[b-hp5r8f3kt0] {
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 0.85rem;
    border: 1px solid;
}

    .leaf-cleanup-result.success[b-hp5r8f3kt0] {
        background: #F0FFF4;
        border-color: #9AE6B4;
        color: #22543D;
    }

    .leaf-cleanup-result.error[b-hp5r8f3kt0] {
        background: #FED7D7;
        border-color: #FC8181;
        color: #742A2A;
    }

/* ===== 分类统计面板样式 ===== */
.leaf-stats-controls[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right:20px;
}

.leaf-stats-type[b-hp5r8f3kt0] {
    display: flex;
    gap: 10px;
    background: #f8f9fa;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
}

.leaf-radio-label[b-hp5r8f3kt0] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background 0.2s ease;
}

    .leaf-radio-label:hover[b-hp5r8f3kt0] {
        background: rgba(107, 70, 193, 0.1);
    }

.leaf-radio-text[b-hp5r8f3kt0] {
    font-size: 1.0rem;
    color: #6c757d;
    font-weight: 500;
}

/* 统计卡片样式 - 简洁设计 */
.leaf-stats-grid[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 12px;
    padding: 0 16px;
}

.leaf-stat-card[b-hp5r8f3kt0] {
    background: #ffffff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
    transition: transform 0.2s ease;
}

    .leaf-stat-card:hover[b-hp5r8f3kt0] {
        transform: translateY(-1px);
    }

    .leaf-stat-card.follow[b-hp5r8f3kt0] {
        border-left: 3px solid #D69E2E;
        background: #FFFBEB;
    }

    .leaf-stat-card.important[b-hp5r8f3kt0] {
        border-left: 3px solid #38A169;
        background: #F0FFF4;
    }

    .leaf-stat-card.urgent[b-hp5r8f3kt0] {
        border-left: 3px solid #E53E3E;
        background: #FED7D7;
    }

    .leaf-stat-card.other[b-hp5r8f3kt0] {
        border-left: 3px solid #718096;
        background: #EDF2F7;
    }

    .leaf-stat-card.default[b-hp5r8f3kt0] {
        border-left: 3px solid #6B46C1;
        background: #EBF4FF;
    }

.leaf-stat-card-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.leaf-stat-card-title[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.8rem;
}

.leaf-stat-card-value[b-hp5r8f3kt0] {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}

.leaf-stat-card-progress[b-hp5r8f3kt0] {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}

.leaf-progress-bar[b-hp5r8f3kt0] {
    height: 100%;
    background: #6B46C1;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.leaf-stat-card-percentage[b-hp5r8f3kt0] {
    text-align: right;
    font-size: 0.8rem;
    color: #2c3e50;
    font-weight: 600;
}

/* 状态分布样式 */
.leaf-status-section[b-hp5r8f3kt0] {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 0 16px 16px;
    border: 1px solid #e1e5e9;
}

.leaf-section-title[b-hp5r8f3kt0] {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.leaf-status-grid[b-hp5r8f3kt0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

.leaf-status-item[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f8f9fa;
    transition: transform 0.2s ease;
    font-size: 0.8rem;
    border: 1px solid #e1e5e9;
}

    .leaf-status-item:hover[b-hp5r8f3kt0] {
        transform: translateX(2px);
    }

    .leaf-status-item.pending[b-hp5r8f3kt0] {
        border-left: 2px solid #ffc107;
        background: #fff9e6;
    }

    .leaf-status-item.active[b-hp5r8f3kt0] {
        border-left: 2px solid #28a745;
        background: #e8f5e8;
    }

    .leaf-status-item.closed[b-hp5r8f3kt0] {
        border-left: 2px solid #6c757d;
        background: #f8f9fa;
    }

.leaf-status-name[b-hp5r8f3kt0] {
    font-weight: 600;
    color: #2c3e50;
}

.leaf-status-count[b-hp5r8f3kt0] {
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    color: #2c3e50;
    font-size: 0.8rem;
    border: 1px solid #e1e5e9;
}

/* ===== 消息删除相关样式 ===== */
.leaf-message-deleted[b-hp5r8f3kt0] {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    opacity: 0.6;
}

.leaf-delete-preview[b-hp5r8f3kt0] {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    border: 1px solid #e1e5e9;
}

.leaf-delete-content[b-hp5r8f3kt0] {
    margin: 6px 0;
    padding: 8px;
    background: white;
    border-radius: 3px;
    border-left: 2px solid #E53E3E;
    font-style: italic;
    color: #4a5568;
    font-size: 0.85rem;
}

.leaf-delete-meta[b-hp5r8f3kt0] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===== 操作提示样式 ===== */
.leaf-alert-overlay[b-hp5r8f3kt0] {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2000;
    animation: slideInRight-b-hp5r8f3kt0 0.3s ease-out;
}

.leaf-alert[b-hp5r8f3kt0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 400px;
    border: 1px solid;
}

.leaf-alert-success[b-hp5r8f3kt0] {
    background: #F0FFF4;
    border-color: #9AE6B4;
    color: #22543D;
}

.leaf-alert-error[b-hp5r8f3kt0] {
    background: #FED7D7;
    border-color: #FC8181;
    color: #742A2A;
}

.leaf-alert-icon[b-hp5r8f3kt0] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.leaf-alert-content[b-hp5r8f3kt0] {
    flex: 1;
}

    .leaf-alert-content h4[b-hp5r8f3kt0] {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .leaf-alert-content p[b-hp5r8f3kt0] {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.4;
    }

.leaf-alert-close[b-hp5r8f3kt0] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    margin-left: 4px;
}

    .leaf-alert-close:hover[b-hp5r8f3kt0] {
        opacity: 1;
    }

@keyframes slideInRight-b-hp5r8f3kt0 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== 模态框样式 ===== */
.leaf-modal-overlay[b-hp5r8f3kt0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.leaf-modal[b-hp5r8f3kt0] {
    background: #ffffff;
    border-radius: 6px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid #e1e5e9;
    overflow: hidden;
}

.leaf-modal-header[b-hp5r8f3kt0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
    color: #2c3e50;
}

.leaf-modal-close[b-hp5r8f3kt0] {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaf-modal-body[b-hp5r8f3kt0] {
    padding: 16px;
}

.leaf-modal-footer[b-hp5r8f3kt0] {
    padding: 12px 16px;
    border-top: 1px solid #e1e5e9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1024px) {
    .leaf-admin-container[b-hp5r8f3kt0] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .leaf-admin-left[b-hp5r8f3kt0] {
        width: 100%;
        max-width: none;
        min-width: auto;
    }

    .leaf-admin-right[b-hp5r8f3kt0] {
        margin: 8px;
    }

    .leaf-filter-row[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
    }

    .leaf-filter-group.compact[b-hp5r8f3kt0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaf-filter-controls[b-hp5r8f3kt0] {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .leaf-panel-header[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 8px 12px;
    }

    .leaf-panel-actions[b-hp5r8f3kt0] {
        width: 100%;
        justify-content: space-between;
    }

    .leaf-admin-stats[b-hp5r8f3kt0] {
        grid-template-columns: 1fr;
    }

    .leaf-message-actions[b-hp5r8f3kt0] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .leaf-category-edit[b-hp5r8f3kt0] {
        flex-wrap: wrap;
    }

    .leaf-message-action-buttons[b-hp5r8f3kt0] {
        width: 100%;
        justify-content: space-between;
    }

    .leaf-alert-overlay[b-hp5r8f3kt0] {
        left: 12px;
        right: 12px;
    }

    .leaf-alert[b-hp5r8f3kt0] {
        min-width: auto;
        max-width: none;
    }

    .leaf-stats-grid[b-hp5r8f3kt0] {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

    .leaf-status-section[b-hp5r8f3kt0] {
        margin: 0 12px 12px;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatAgentPanel.razor.rz.scp.css */
/* ChatAgentPanel.razor.css - 客服工作台样式 */
/* 设计理念：现代化客服界面，清晰的视觉层次 */

/* ===== CSS变量定义 ===== */
:root[b-gnmnyqoj5r] {
    /* ===== 字体大小参数 ===== */
    /* 消息内容字体大小 - 控制聊天对话框中消息文本的字号 */
    --leaf-message-font-size: 1.1rem;
    /* 输入框字体大小 - 控制客服回复输入框中的文本字号 */
    --leaf-input-font-size: 1.1rem;

    /* ===== 间距参数 ===== */
    /* 消息行间距 - 控制聊天对话框中各条消息之间的垂直间距 */
    --leaf-message-line-spacing: 0.5rem;

    /* ===== 消息背景色 ===== */
    /* 访客消息背景色 - 控制客户发送消息的气泡背景颜色（浅蓝色） */
    --leaf-message-sent-bg: #E3F2FD;
    /* 客服消息背景色 - 控制客服发送消息的气泡背景颜色（浅紫色） */
    --leaf-message-received-bg: #F3E5F5;

    /* ===== 字体粗细参数 ===== */
    /* 细体字重 - 用于次要文本、说明文字等 */
    --leaf-font-weight-light: 400;
    /* 正常字重 - 用于正文文本、普通内容 */
    --leaf-font-weight-normal: 400;
    /* 中等字重 - 用于按钮文字、标签等需要强调的内容 */
    --leaf-font-weight-medium: 500;
    /* 半粗体字重 - 用于小标题、重要信息 */
    --leaf-font-weight-semibold: 600;
    /* 粗体字重 - 用于主要标题、关键数据 */
    --leaf-font-weight-bold: 700;
    /* 特粗体字重 - 用于品牌名称、重要标识 */
    --leaf-font-weight-extrabold: 800;
}

/* ===== 【A：标题区】 ===== */
.leaf-agent-dashboard[b-gnmnyqoj5r] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #334155;
    overflow: hidden;
}

.leaf-agent-header[b-gnmnyqoj5r] {
    background: white;
    border-bottom: 5px solid #8B0000; /* 深红色粗线 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.leaf-header-content[b-gnmnyqoj5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    max-width: 100%;
}

.leaf-brand-section[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.leaf-brand-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.5rem;
    /*font-weight: var(--leaf-font-weight-extrabold);*/ /* 使用变量定义字重 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #006400;
    font-weight: 700;
}

.leaf-brand-icon[b-gnmnyqoj5r] {
    font-size: 1.8rem;
    color: #006400;
}

.leaf-agent-id-display[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.3rem;
    border: 1px solid #e0f2fe;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 1;
    min-width: 30px;
    overflow: hidden;
    margin-top:10px;
}

.leaf-agent-id-label[b-gnmnyqoj5r] {
    color: #0369a1;
    font-weight: var(--leaf-font-weight-semibold);
}

.leaf-agent-id-value[b-gnmnyqoj5r] {
    color: #0c4a6e;
    font-family: monospace;
    font-weight: var(--leaf-font-weight-light);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.leaf-stats-panel[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
}

.leaf-stat-item[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.leaf-stat-label[b-gnmnyqoj5r] {
    font-size: 1.0rem;
    color: #000000;
    font-weight: var(--leaf-font-weight-light);
}

.leaf-stat-value[b-gnmnyqoj5r] {
    font-size: 1.3rem;
    font-weight: 500;
    color: #006400;
}

.leaf-stat-divider[b-gnmnyqoj5r] {
    width: 2px;
    height: 20px;
    background-color: #E6F3FF;
    margin: 0 8px;
    border: none;
}

.leaf-service-controls[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
}

.leaf-service-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    font-family: inherit;
}

.leaf-start-service[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

    .leaf-start-service:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #059669, #047857);
    }

.leaf-stop-service[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

    .leaf-stop-service:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
    }

.leaf-reset-all[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

    .leaf-reset-all:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

.leaf-service-status[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0.6rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-service-active[b-gnmnyqoj5r] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.leaf-service-inactive[b-gnmnyqoj5r] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.leaf-status-dot[b-gnmnyqoj5r] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.leaf-service-active .leaf-status-dot[b-gnmnyqoj5r] {
    background: #16a34a;
    animation: pulse-b-gnmnyqoj5r 2s infinite;
}

.leaf-service-inactive .leaf-status-dot[b-gnmnyqoj5r] {
    background: #9ca3af;
}

@keyframes pulse-b-gnmnyqoj5r {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* ===== 【B：交流内容区】 ===== */
.leaf-agent-main[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #e2e8f0;
    margin-top: 5px;
}

/* ===== 【B-左: 客户清单面板-左侧】 ===== */
.leaf-sessions-panel[b-gnmnyqoj5r] {
    width: 40%;
    min-width: 250px;
    background: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    overflow: hidden;
}

.leaf-panel-header[b-gnmnyqoj5r] {
    padding: 0.1rem 3rem 0.2rem 1rem;
    border-bottom: 2px solid #666666; /* 修改：使用更细的深灰色边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.leaf-panel-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--leaf-font-weight-semibold);
    color: #0f172a;
}

.leaf-refresh-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem 1.0rem 0.2rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    /*background: white;*/
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: var(--leaf-font-weight-medium);
}

    .leaf-refresh-btn:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #059669, #047857);
        border-color: #cbd5e1;
    }

.leaf-sessions-container[b-gnmnyqoj5r] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaf-session-item[b-gnmnyqoj5r] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .leaf-session-item:hover[b-gnmnyqoj5r] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .leaf-session-item.leaf-session-active[b-gnmnyqoj5r] {
        border-color: #0ea5e9;
        background: #f0f9ff;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
    }

.leaf-session-status[b-gnmnyqoj5r] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.leaf-status-text[b-gnmnyqoj5r] {
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-waiting .leaf-status-text[b-gnmnyqoj5r] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.status-active .leaf-status-text[b-gnmnyqoj5r] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.status-closed .leaf-status-text[b-gnmnyqoj5r] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.leaf-session-content[b-gnmnyqoj5r] {
    margin-right: 70px;
}

.leaf-visitor-info[b-gnmnyqoj5r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

.leaf-visitor-name[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem; /* 客户名字体大小 */
    font-weight: var(--leaf-font-weight-semibold); /* 客户名字重：中等粗细 */
    color: #0f172a;
}

.leaf-message-count[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
}

.leaf-count-badge[b-gnmnyqoj5r] {
    padding: 0.15rem 0.4rem;
    background: #0ea5e9;
    color: white;
    border-radius: 8px;
    font-size: 0.7rem; /* 消息数字体大小 */
    font-weight: var(--leaf-font-weight-semibold); /* 消息数字重：中等粗细 */
    min-width: 16px;
    text-align: center;
}

.leaf-session-time[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 时间字体大小 */
    font-weight: var(--leaf-font-weight-normal); /* 时间字重：正常 */
    color: #64748b;
    margin-bottom: 0.4rem;
}

.leaf-session-detail[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 详情字体大小 */
    color: #475569;
    line-height: 1.2;
}

.leaf-detail-label[b-gnmnyqoj5r] {
    color: #64748b;
    font-weight: var(--leaf-font-weight-medium); /* 标签字重：中等 */
}

.leaf-detail-text[b-gnmnyqoj5r] {
    display: block;
    color: #475569;
    font-weight: var(--leaf-font-weight-normal); /* 详情文字字重：正常 */
}

.leaf-last-message[b-gnmnyqoj5r] {
    font-size: 0.8rem; /* 最后消息字体大小 */
    color: #475569;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: var(--leaf-font-weight-normal); /* 最后消息字重：正常 */
}

.leaf-agent-info[b-gnmnyqoj5r] {
    font-size: 0.7rem; /* 客服信息字体大小 */
    color: #64748b;
    margin-top: 0.25rem;
}

.leaf-agent-label[b-gnmnyqoj5r] {
    font-weight: var(--leaf-font-weight-medium); /* 客服标签字重：中等 */
}

.leaf-agent-id[b-gnmnyqoj5r] {
    font-family: monospace;
    background: #f1f5f9;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: var(--leaf-font-weight-normal); /* 客服ID字重：正常 */
}

.leaf-empty-state[b-gnmnyqoj5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.leaf-empty-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.leaf-empty-text[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}


/* 新增样式 */
.leaf-agent-connection[b-gnmnyqoj5r] {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
}

.leaf-user-id[b-gnmnyqoj5r] {
    margin-top: -5px;
}

.leaf-user-id-badge[b-gnmnyqoj5r] {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75em;
    border: 1px solid #bbdefb;
}

.leaf-client-badge[b-gnmnyqoj5r] {
    background: #fff3e0;
    color: #f57c00;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.8em;
    margin-left: 5px;
    border: 1px solid #ffe0b2;
}

/* ===== 【B右: 聊天对话面板-右侧】 ===== */
.leaf-chat-panel[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    min-width: 300px;
    overflow: hidden;
    margin-left: 5px;
}

.leaf-conversation-container[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ===== 【C-1：接管失败警告标识】 ===== */
.leaf-takeover-alert[b-gnmnyqoj5r] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 6px;
    margin: 0.5rem;
    padding: 0.5rem;
    animation: slideInDown-b-gnmnyqoj5r 0.3s ease;
}

.leaf-alert-content[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leaf-alert-icon[b-gnmnyqoj5r] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.leaf-alert-text[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .leaf-alert-text strong[b-gnmnyqoj5r] {
        color: #dc2626;
        font-size: 0.9rem;
        font-weight: var(--leaf-font-weight-semibold);
    }

    .leaf-alert-text span[b-gnmnyqoj5r] {
        color: #7c2d12;
        font-size: 0.8rem;
        font-weight: var(--leaf-font-weight-normal);
    }

.leaf-alert-close[b-gnmnyqoj5r] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

    .leaf-alert-close:hover[b-gnmnyqoj5r] {
        background: #f3f4f6;
        color: #374151;
    }

@keyframes slideInDown-b-gnmnyqoj5r {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== 【C-2：交流按钮控制区】 ===== */
.leaf-chat-header[b-gnmnyqoj5r] {
    padding: 0.1rem 2rem 0.3rem 1rem;
    border-bottom: 2px solid #666666; /* 修改：使用更细的深灰色边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.leaf-chat-info[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leaf-chat-title[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: var(--leaf-font-weight-semibold);
    color: #0f172a;
}

    .leaf-chat-title strong[b-gnmnyqoj5r] {
        color: #0ea5e9;
    }

.leaf-chat-status[b-gnmnyqoj5r] {
    padding: 0.3rem 0.3rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
}

    .leaf-chat-status.pending[b-gnmnyqoj5r] {
        background: #fef3c7;
        color: #92400e;
    }

    .leaf-chat-status.active[b-gnmnyqoj5r] {
        background: #dcfce7;
        color: #166534;
    }

.leaf-agent-badge[b-gnmnyqoj5r] {
    font-size: 0.7rem;
    background: #e0f2fe;
    color: #0369a1;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    margin-left: 0.5rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-chat-actions[b-gnmnyqoj5r] {
    display: flex;
    gap: 2rem;
}

.leaf-action-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    font-family: inherit;
}

.leaf-take-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
}

    .leaf-take-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #0284c7, #0891b2);
    }

    .leaf-take-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-close-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

    .leaf-close-btn:hover[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
    }

.leaf-force-take-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: 1px solid #e55a2b;
}

    .leaf-force-take-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #e55a2b, #e08215);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
        border-color: #cc4a1f;
    }

    .leaf-force-take-btn:active[b-gnmnyqoj5r] {
        transform: translateY(0);
    }

    .leaf-force-take-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        border-color: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.leaf-cancel-takeover-btn[b-gnmnyqoj5r] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

    .leaf-cancel-takeover-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #d97706, #b45309);
    }

    .leaf-cancel-takeover-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-btn-icon[b-gnmnyqoj5r] {
    font-size: 1.1rem;
}

.leaf-btn-text[b-gnmnyqoj5r] {
    font-weight: var(--leaf-font-weight-medium);
    font-size: 1.0rem;
}

/* ===== 【C-3:状态提示区域】 ===== */
.leaf-takeover-prompt[b-gnmnyqoj5r] {
    padding: 2rem;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    margin: 1rem;
}

.leaf-prompt-content[b-gnmnyqoj5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.leaf-prompt-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    opacity: 0.7;
}

.leaf-prompt-text h3[b-gnmnyqoj5r] {
    margin: 0 0 0.5rem 0;
    color: #475569;
    font-weight: var(--leaf-font-weight-semibold);
}

.leaf-prompt-text p[b-gnmnyqoj5r] {
    margin: 0;
    color: #64748b;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 【C-4:消息显示区域】 ===== */
.leaf-messages-container[b-gnmnyqoj5r] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
    min-height: 0;
}

.leaf-message[b-gnmnyqoj5r] {
    display: flex;
    gap: 0.5rem;
    max-width: 85%;
    animation: slideIn-b-gnmnyqoj5r 0.2s ease;
}

@keyframes slideIn-b-gnmnyqoj5r {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.leaf-visitor-msg[b-gnmnyqoj5r] {
    align-self: flex-start;
}

.leaf-agent-msg[b-gnmnyqoj5r] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-avatar[b-gnmnyqoj5r] {
    flex-shrink: 0;
}

.leaf-avatar[b-gnmnyqoj5r] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

    /* 客户头像样式 */
    .leaf-avatar.visitor[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #e0f2fe, #bae6fd);
        color: #0369a1;
    }

    /* 客服头像样式 - 修改：使用深绿色背景 */
    .leaf-avatar.agent[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #228B22, #006400); /* 修改：深绿色渐变背景 */
        color: white; /* 修改：白色图标，提高对比度 */
    }

/*消息框内容边界等设置*/
.leaf-message-bubble[b-gnmnyqoj5r] {
    padding: 0.3rem 1.2rem;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    border: 1px solid; /* 修改：边框从2px改为1px，变细 */
}

/* 客户消息样式 */
.leaf-visitor-msg .leaf-message-bubble[b-gnmnyqoj5r] {
    background: var(--leaf-message-sent-bg);
    border-color: #64B5F6;
    color: #212121;
    border-bottom-left-radius: 4px;
}

/* 客服消息样式 */
.leaf-agent-msg .leaf-message-bubble[b-gnmnyqoj5r] {
    background: var(--leaf-message-received-bg);
    border-color: #81C784;
    color: #212121;
    border-bottom-right-radius: 4px;
}

.leaf-message-content[b-gnmnyqoj5r] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    word-wrap: break-word;
    margin-bottom: 0.25rem;
    font-weight: var(--leaf-font-weight-normal); /* 消息内容字重：正常 */
}

.leaf-message-time[b-gnmnyqoj5r] {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: var(--leaf-font-weight-normal); /* 消息时间字重：正常 */
}

.leaf-visitor-msg .leaf-message-time[b-gnmnyqoj5r] {
    text-align: left;
    color: #546E7A;
}

.leaf-agent-msg .leaf-message-time[b-gnmnyqoj5r] {
    text-align: right;
    color: #546E7A;
}

.leaf-read-badge[b-gnmnyqoj5r] {
    font-size: 0.7rem;
    background: #dcfce7;
    color: #166534;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-chat-empty[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaf-chat-welcome[b-gnmnyqoj5r] {
    text-align: center;
    padding: 1.5rem;
    color: #94a3b8;
}

.leaf-welcome-icon[b-gnmnyqoj5r] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.leaf-chat-welcome h3[b-gnmnyqoj5r] {
    margin: 0 0 0.25rem 0;
    color: #64748b;
    font-weight: var(--leaf-font-weight-semibold);
    font-size: 1.2rem;
}

.leaf-chat-welcome p[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 【C-5:销售输入区域】 ===== */
.leaf-input-section[b-gnmnyqoj5r] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: white;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.leaf-input-container[b-gnmnyqoj5r] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.25rem;
}

.leaf-message-input[b-gnmnyqoj5r] {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: var(--leaf-input-font-size);
    resize: vertical;
    min-height: 80px;
    max-height: 120px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f8fafc;
    line-height: 1.3;
    color: #212121;
    font-weight: var(--leaf-font-weight-normal); /* 输入框字重：正常 */
}

    .leaf-message-input:focus[b-gnmnyqoj5r] {
        outline: none;
        border-color: #0ea5e9;
        box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
        background: white;
    }

.leaf-send-btn[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.9rem;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: var(--leaf-font-weight-medium);
    transition: all 0.2s ease;
    min-width: 60px;
    justify-content: center;
}

    .leaf-send-btn:hover:not(:disabled)[b-gnmnyqoj5r] {
        background: linear-gradient(135deg, #0284c7, #0891b2);
    }

    .leaf-send-btn:disabled[b-gnmnyqoj5r] {
        background: #cbd5e1;
        cursor: not-allowed;
    }

.leaf-send-icon[b-gnmnyqoj5r] {
    font-size: 2.0rem;
}

.leaf-input-hint[b-gnmnyqoj5r] {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: var(--leaf-font-weight-normal);
}

.leaf-input-disabled[b-gnmnyqoj5r] {
    padding: 1.5rem;
    text-align: center;
    background: #f1f5f9;
    border-radius: 8px;
    margin: 0 1rem 1rem 1rem;
}

.leaf-disabled-message[b-gnmnyqoj5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
    font-weight: var(--leaf-font-weight-medium);
}

.leaf-disabled-icon[b-gnmnyqoj5r] {
    font-size: 1.2rem;
}

.leaf-no-selection[b-gnmnyqoj5r] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaf-selection-empty[b-gnmnyqoj5r] {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

.leaf-empty-illustration[b-gnmnyqoj5r] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.leaf-empty-heading[b-gnmnyqoj5r] {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-weight: var(--leaf-font-weight-semibold);
    font-size: 1.2rem;
}

.leaf-empty-subtitle[b-gnmnyqoj5r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--leaf-font-weight-normal);
}

/* ===== 滚动条样式 ===== */
.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar {
    width: 12px;
}

.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-track,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb,
.leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .leaf-sessions-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb:hover,
    .leaf-messages-container[b-gnmnyqoj5r]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* ===== 响应式设计 ===== */
@media (max-width: 1024px) {
    .leaf-sessions-panel[b-gnmnyqoj5r] {
        width: 30%;
        min-width: 250px;
    }

    .leaf-chat-panel[b-gnmnyqoj5r] {
        width: 65%;
    }
}

@media (max-width: 768px) {
    .leaf-agent-main[b-gnmnyqoj5r] {
        flex-direction: column;
    }

    .leaf-sessions-panel[b-gnmnyqoj5r] {
        width: 100%;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .leaf-chat-panel[b-gnmnyqoj5r] {
        width: 100%;
        height: 60vh;
    }

    .leaf-header-content[b-gnmnyqoj5r] {
        padding: 0.5rem 1rem;
    }

    .leaf-stats-panel[b-gnmnyqoj5r] {
        gap: 0.5rem;
    }

    .leaf-stat-value[b-gnmnyqoj5r] {
        font-size: 1rem;
    }

    .leaf-stat-label[b-gnmnyqoj5r] {
        font-size: 0.6rem;
    }

    .leaf-message[b-gnmnyqoj5r] {
        max-width: 90%;
    }

    .leaf-brand-section[b-gnmnyqoj5r] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .leaf-agent-header[b-gnmnyqoj5r] {
        padding: 0;
    }

    .leaf-header-content[b-gnmnyqoj5r] {
        padding: 0.5rem;
    }

    .leaf-brand-title[b-gnmnyqoj5r] {
        font-size: 1.1rem;
    }

    .leaf-session-item[b-gnmnyqoj5r] {
        padding: 0.6rem;
    }

    .leaf-session-content[b-gnmnyqoj5r] {
        margin-right: 60px;
    }

    .leaf-chat-header[b-gnmnyqoj5r] {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .leaf-chat-actions[b-gnmnyqoj5r] {
        width: 100%;
        justify-content: flex-end;
    }

    .leaf-message-bubble[b-gnmnyqoj5r] {
        padding: 0.4rem 0.6rem;
    }

    .leaf-input-container[b-gnmnyqoj5r] {
        flex-direction: column;
    }

    .leaf-send-btn[b-gnmnyqoj5r] {
        align-self: flex-end;
        width: 80px;
    }
}


/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatVisitorPage.razor.rz.scp.css */
/* ChatVisitorPage.razor.css - 简化版样式 */
/* 仅保留必要的CSS变量：字体大小、行间距、背景色 */

/* ===== CSS变量定义 ===== */
:root[b-ej49mlb1ul] {
    /* 字体大小：消息*/
    --leaf-message-font-size: 1.1rem;
    --leaf-input-font-size: 1.1rem;
    /* 消息行间距 */
    --leaf-message-line-spacing: 0.3rem;
    /* 消息背景色 */
    --leaf-message-sent-bg: #E3F2FD; /* 访客消息浅蓝色背景 */
    --leaf-message-received-bg: #F3E5F5; /* 客服消息浅紫色背景 */
    --leaf-message-system-bg: #FFF3E0; /* 系统消息浅橙色背景 */
}

/* ===== 基础重置和主容器 ===== */
.leaf-chat-container[b-ej49mlb1ul] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #F5F5F5;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #212121;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* ===== 页面头部 ===== */
.leaf-chat-header[b-ej49mlb1ul] {
    background: #FFFFFF;
    border-bottom: 5px solid #8B0000;
    padding: 0.2rem 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.leaf-header-content[b-ej49mlb1ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    max-width: 100%;
}

.leaf-header-title[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #006400;
}

.leaf-header-icon[b-ej49mlb1ul] {
    font-size: 1.5rem;
    color: #4CAF50;
}

.leaf-header-title h1[b-ej49mlb1ul] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #006400; /* 墨绿色 */
}

.leaf-header-info[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.leaf-status-area[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    padding: 0.2rem 1.0rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 2px solid #E0E0E0;
}

.leaf-status-label[b-ej49mlb1ul] {
    font-size: 1.0rem;
    color: #616161;
    font-weight: 400;
}

.leaf-status-badge[b-ej49mlb1ul] {
    padding: 0.1rem 1.0rem;
    border-radius: 20px;
    font-size: 1.0rem;
    font-weight: 400;
    text-transform: capitalize;
    transition: all 0.3s ease;
    margin-left:-10px;
}

.leaf-status-connecting[b-ej49mlb1ul],
.leaf-status-waiting[b-ej49mlb1ul] {
    background: #FFF3E0;
    color: #EF6C00;
    border: 1px solid #FFB74D;
}

.leaf-status-connected[b-ej49mlb1ul] {
    background: #E8F5E9;
    color: #4CAF50;
    border: 1px solid #81C784;
}

.leaf-status-disconnected[b-ej49mlb1ul] {
    background: #FFEBEE;
    color: #F44336;
    border: 1px solid #E57373;
}

.leaf-session-info[b-ej49mlb1ul] {
    font-size: 0.85rem;
    color: #616161;
    font-family: monospace;
    background: #F5F5F5;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

/* ===== 聊天主内容区域 ===== */
.leaf-chat-main[b-ej49mlb1ul] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
    gap: 0.8rem;
    min-height: 0;
    margin-top:-10px;
}

/* ===== 消息显示区域 ===== */
.leaf-messages-section[b-ej49mlb1ul] {
    flex: 1;
    background: #FAFAFA;
    border-radius: 12px;
    border: 2px solid #757575;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.leaf-messages-container[b-ej49mlb1ul] {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
}

    /* 滚动条样式 */
    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar {
        width: 14px;
    }

    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-track {
        background: #EEEEEE;
        border-radius: 6px;
    }

    .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb {
        background: #4CAF50;
        border-radius: 6px;
        border: 2px solid #EEEEEE;
    }

        .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb:hover {
            background: #388E3C;
        }

        .leaf-messages-container[b-ej49mlb1ul]::-webkit-scrollbar-thumb:active {
            background: #2E7D32;
        }

/* 消息项样式 */
.leaf-message[b-ej49mlb1ul] {
    display: flex;
    gap: 1rem;
    max-width: 80%;
}

.leaf-message-sent[b-ej49mlb1ul] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-received[b-ej49mlb1ul] {
    align-self: flex-start;
}

/* 消息头像 */
.leaf-message-avatar[b-ej49mlb1ul] {
    flex-shrink: 0;
}

.leaf-avatar[b-ej49mlb1ul] {
    width: 40px; /* 控制头像容器的宽度 */
    height: 40px; /* 控制头像容器的高度 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 这里控制图标的基础大小 */
    border: 2px solid transparent;
}

.leaf-avatar-user[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #81C784, #4CAF50);
    border-color: #388E3C;
}

.leaf-avatar-agent[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #64B5F6, #2196F3);
    border-color: #1976D2;
}

.leaf-avatar-system[b-ej49mlb1ul] {
    background: linear-gradient(135deg, #FFE0B2, #FFB74D);
    border-color: #F57C00;
}

.leaf-avatar-icon[b-ej49mlb1ul] {
    color: #FFFFFF;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));

}

.leaf-avatar-system .leaf-avatar-icon[b-ej49mlb1ul] {
    color: #E65100;
}

/* 消息内容 */
.leaf-message-content[b-ej49mlb1ul] {
    flex: 1;
    min-width: 200px;
}

.leaf-message-header[b-ej49mlb1ul] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    padding: 0 0.5rem;
}

.leaf-message-sender[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    font-weight: 600;
    color: #616161;
}

.leaf-message-time[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    color: #9E9E9E;
}

.leaf-message-bubble[b-ej49mlb1ul] {
    padding: 0.4rem 1.2rem;
    border-radius: 16px;
    border: 2px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    color: #212121; /* 黑色字体 */
}

.leaf-message-sent .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-sent-bg);
    border-color: #64B5F6;
    border-bottom-right-radius: 6px;
}

.leaf-message-received .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-received-bg);
    border-color: #81C784;
    border-bottom-left-radius: 6px;
}

.leaf-message-system .leaf-message-bubble[b-ej49mlb1ul] {
    background: var(--leaf-message-system-bg);
    border-color: #FFB74D;
    color: #E65100;
}

.leaf-message-text[b-ej49mlb1ul] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.4;
    word-wrap: break-word;
}

.leaf-system-badge[b-ej49mlb1ul] {
    font-size: 0.7rem;
    background: #FF9800;
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    margin-top: 0.3rem;
    display: inline-block;
    font-weight: 500;
}


/* ===== 输入区域 ===== */
.leaf-input-section[b-ej49mlb1ul] {
    background: transparent;
    border-radius: 12px;
    border: 2px solid #BDBDBD;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    height: 25%;
}

.leaf-input-container[b-ej49mlb1ul] {
    flex: 1;
    display: flex;
    gap: 1.0rem;
    padding: 0.5rem;
    align-items: stretch;
}

.leaf-input-main[b-ej49mlb1ul] {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    background: #FAFAFA;
    transition: all 0.3s ease;
}

    .leaf-input-main:focus-within[b-ej49mlb1ul] {
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

.leaf-message-input[b-ej49mlb1ul] {
    flex: 1;
    width: 100%;
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: var(--leaf-input-font-size);
    resize: none;
    font-family: inherit;
    color: #212121; /* 黑色字体 */
    line-height: 1.5;
    min-height: 60px;
    max-height: 150px;
    outline: none;
}

    .leaf-message-input:disabled[b-ej49mlb1ul] {
        background: #EEEEEE;
        color: #9E9E9E;
        cursor: not-allowed;
    }

    .leaf-message-input[b-ej49mlb1ul]::placeholder {
        color: #9E9E9E;
    }

.leaf-input-actions[b-ej49mlb1ul] {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
}

.leaf-char-count[b-ej49mlb1ul] {
    font-size: 0.8rem;
    color: #9E9E9E;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
}

/* 发送按钮 */
.leaf-send-btn[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 1.0rem;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
    min-width: 80px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 2px solid #388E3C;
    align-self: flex-end;
    height: fit-content;
}

    .leaf-send-btn:hover:not(:disabled)[b-ej49mlb1ul] {
        background: linear-gradient(135deg, #388E3C, #2E7D32);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .leaf-send-btn:active[b-ej49mlb1ul] {
        transform: translateY(0);
    }

    .leaf-send-btn:disabled[b-ej49mlb1ul] {
        background: #BDBDBD;
        color: #9E9E9E;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
        border-color: #BDBDBD;
    }

.leaf-send-icon[b-ej49mlb1ul] {
    font-size: 1.5rem;
}

.leaf-send-text[b-ej49mlb1ul] {
    font-weight: 600;
}

/* 输入区域底部 */
.leaf-input-footer[b-ej49mlb1ul] {
    padding: 0.08rem 1rem;
    background: #FAFAFA;
    border-top: 1px solid #E0E0E0;
}

.leaf-input-tip[b-ej49mlb1ul] {
    font-size: 0.9rem;
    color: #9E9E9E;
    text-align: center;
    display: block;
}

.leaf-warning-text[b-ej49mlb1ul] {
    color: #FF9800;
    font-weight: 500;
}

/* ===== 空状态 ===== */
.leaf-empty-state[b-ej49mlb1ul] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
}

.leaf-empty-content[b-ej49mlb1ul] {
    text-align: center;
    max-width: 400px;
}

.leaf-empty-icon[b-ej49mlb1ul] {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #4CAF50;
    opacity: 0.7;
}

.leaf-empty-title[b-ej49mlb1ul] {
    font-size: 1.3rem;
    color: #212121;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.leaf-empty-desc[b-ej49mlb1ul] {
    font-size: 0.95rem;
    color: #616161;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.leaf-connection-status[b-ej49mlb1ul] {
    margin-top: 1.5rem;
}

.leaf-status-indicator[b-ej49mlb1ul] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    border: 2px solid;
    font-size: 0.9rem;
}

.leaf-status-ready[b-ej49mlb1ul] {
    background: #E8F5E9;
    border-color: #81C784;
}

.leaf-status-connecting[b-ej49mlb1ul] {
    background: #FFF3E0;
    border-color: #FFB74D;
}

.leaf-status-icon[b-ej49mlb1ul] {
    font-size: 1rem;
}

.leaf-status-ready .leaf-status-icon[b-ej49mlb1ul] {
    color: #4CAF50;
}

.leaf-status-connecting .leaf-status-icon[b-ej49mlb1ul] {
    color: #FF9800;
}

.leaf-status-text[b-ej49mlb1ul] {
    color: #616161;
    font-weight: 500;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .leaf-header-content[b-ej49mlb1ul] {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }

    .leaf-header-info[b-ej49mlb1ul] {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }

    .leaf-status-area[b-ej49mlb1ul] {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .leaf-message[b-ej49mlb1ul] {
        max-width: 90%;
    }

    .leaf-input-container[b-ej49mlb1ul] {
        flex-direction: column;
    }

    .leaf-send-btn[b-ej49mlb1ul] {
        width: 100%;
        min-width: auto;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .leaf-chat-container[b-ej49mlb1ul] {
        height: 100vh;
    }

    .leaf-message[b-ej49mlb1ul] {
        max-width: 95%;
    }

    .leaf-message-content[b-ej49mlb1ul] {
        min-width: 160px;
    }

    .leaf-header-title h1[b-ej49mlb1ul] {
        font-size: 1.3rem;
    }

    .leaf-messages-section[b-ej49mlb1ul] {
        min-height: 150px;
    }

    .leaf-input-section[b-ej49mlb1ul] {
        min-height: 100px;
    }

    :root[b-ej49mlb1ul] {
        --leaf-message-font-size: 0.9rem;
        --leaf-input-font-size: 1rem;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleChat/ChatPages/ChatWidget.razor.rz.scp.css */
/* ChatWidget.razor.css - 优化悬浮聊天组件样式 */
/* ===== CSS变量定义 ===== */
:root[b-0kav0mxh3k] {
    --leaf-message-font-size: 0.9rem;
    --leaf-input-font-size: 0.9rem;
    --leaf-message-line-spacing: 0.2rem;
    --leaf-message-sent-bg: #E3F2FD;
    --leaf-message-received-bg: #F3E5F5;
    --leaf-message-system-bg: #FFF3E0;
}

/* ===== 主容器和悬浮按钮区域 ===== */
.leaf-chat-widget[b-0kav0mxh3k] {
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index: 1000;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 悬浮聊天按钮样式 */
.leaf-chat-toggle-button[b-0kav0mxh3k] {
    background: #8B0000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

    .leaf-chat-toggle-button:hover[b-0kav0mxh3k] {
        background: #FFD700;
        color: #000;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    }

.chat-icon[b-0kav0mxh3k] {
    font-size: 14px;
}

.chat-text[b-0kav0mxh3k] {
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ===== 聊天窗口主体区域 ===== */
.leaf-chat-window[b-0kav0mxh3k] {
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ddd;
}

.leaf-chat-expanded[b-0kav0mxh3k] {
    width: 500px;
}

/* ===== 窗口控制按钮区域 ===== */
.leaf-chat-controls[b-0kav0mxh3k] {
    display: flex;
    justify-content: flex-end;
    padding: 4px 6px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    gap: 2px;
    flex-shrink: 0;
}

/* 新增刷新按钮样式 */
.leaf-refresh-button[b-0kav0mxh3k] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s;
}

    .leaf-refresh-button:hover[b-0kav0mxh3k] {
        background: #e9ecef;
    }

.leaf-expand-button[b-0kav0mxh3k],
.leaf-close-button[b-0kav0mxh3k] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s;
}

    .leaf-expand-button:hover[b-0kav0mxh3k] {
        background: #e9ecef;
    }

.leaf-close-button[b-0kav0mxh3k] {
    font-size: 16px;
    color: #6c757d;
}

    .leaf-close-button:hover[b-0kav0mxh3k] {
        background: #dc3545;
        color: white;
    }

/* ===== 消息显示区域 - 占窗口3/4高度 ===== */
.leaf-messages-section[b-0kav0mxh3k] {
    flex: 3; /* 3/4 高度 */
    background: #FAFAFA;
    overflow: hidden;
    margin: 0;
}

.leaf-messages-container[b-0kav0mxh3k] {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--leaf-message-line-spacing);
}

    /* 消息区域滚动条样式 */
    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar {
        width: 6px;
    }

    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

        .leaf-messages-container[b-0kav0mxh3k]::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

/* ===== 消息项样式区域 ===== */
.leaf-message[b-0kav0mxh3k] {
    display: flex;
    gap: 8px;
    max-width: 85%;
    align-items: flex-start;
}

.leaf-message-sent[b-0kav0mxh3k] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.leaf-message-received[b-0kav0mxh3k] {
    align-self: flex-start;
}

/* 消息头像样式 */
.leaf-message-avatar[b-0kav0mxh3k] {
    flex-shrink: 0;
    margin-top: 2px;
}

.leaf-avatar[b-0kav0mxh3k] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.leaf-avatar-user[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #81C784, #4CAF50);
    border-color: #388E3C;
}

.leaf-avatar-agent[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #64B5F6, #2196F3);
    border-color: #1976D2;
}

.leaf-avatar-system[b-0kav0mxh3k] {
    background: linear-gradient(135deg, #FFE0B2, #FFB74D);
    border-color: #F57C00;
}

.leaf-avatar-icon[b-0kav0mxh3k] {
    color: #FFFFFF;
    font-size: 0.8rem;
}

/* 消息气泡样式 */
.leaf-message-bubble[b-0kav0mxh3k] {
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid;
    font-size: var(--leaf-message-font-size);
    line-height: 1.3;
    color: #212121;
    max-width: 100%;
    word-wrap: break-word;
}

.leaf-message-sent .leaf-message-bubble[b-0kav0mxh3k] {
    background: var(--leaf-message-sent-bg);
    border-color: #90CAF9;
    border-bottom-right-radius: 4px;
}

.leaf-message-received .leaf-message-bubble[b-0kav0mxh3k] {
    background: var(--leaf-message-received-bg);
    border-color: #CE93D8;
    border-bottom-left-radius: 4px;
}

.leaf-message-text[b-0kav0mxh3k] {
    font-size: var(--leaf-message-font-size);
    line-height: 1.3;
}

.leaf-system-badge[b-0kav0mxh3k] {
    font-size: 0.7rem;
    background: #FF9800;
    color: white;
    padding: 1px 4px;
    border-radius: 6px;
    margin-top: 2px;
    display: inline-block;
    font-weight: 500;
}

/* ===== 输入区域 - 占窗口1/4高度 ===== */
.leaf-input-section[b-0kav0mxh3k] {
    flex: 1; /* 1/4 高度 */
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-height: 120px; /* 确保最小高度 */
}

.leaf-input-main[b-0kav0mxh3k] {
    flex: 1;
    margin-bottom: 6px;
}

.leaf-message-input[b-0kav0mxh3k] {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    font-size: var(--leaf-input-font-size);
    resize: none;
    font-family: inherit;
    color: #212121;
    line-height: 1.3;
    outline: none;
    box-sizing: border-box;
}

    .leaf-message-input:disabled[b-0kav0mxh3k] {
        background: #f5f5f5;
        color: #9E9E9E;
        cursor: not-allowed;
    }

    .leaf-message-input[b-0kav0mxh3k]::placeholder {
        color: #9E9E9E;
        font-size: 0.85rem;
    }

/* 输入区域底部操作栏 */
.leaf-input-footer[b-0kav0mxh3k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.leaf-input-actions[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.leaf-char-count[b-0kav0mxh3k] {
    font-size: 0.7rem;
    color: #9E9E9E;
    white-space: nowrap;
}

.leaf-input-tip[b-0kav0mxh3k] {
    font-size: 0.7rem;
    color: #9E9E9E;
    white-space: nowrap;
}

.leaf-warning-text[b-0kav0mxh3k] {
    color: #FF9800;
    font-weight: 500;
}

/* 发送按钮样式 */
.leaf-send-btn[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #FFD700; /* 金黄色背景 */
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .leaf-send-btn:hover:not(:disabled)[b-0kav0mxh3k] {
        background: #FFC400;
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .leaf-send-btn:active[b-0kav0mxh3k] {
        transform: translateY(0);
    }

    .leaf-send-btn:disabled[b-0kav0mxh3k] {
        background: #BDBDBD;
        color: #9E9E9E;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.leaf-send-icon[b-0kav0mxh3k] {
    font-size: 0.9rem;
}

.leaf-send-text[b-0kav0mxh3k] {
    font-weight: 600;
}

/* ===== 空状态显示区域 ===== */
.leaf-empty-state[b-0kav0mxh3k] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.leaf-empty-content[b-0kav0mxh3k] {
    text-align: center;
    max-width: 300px;
}

.leaf-empty-icon[b-0kav0mxh3k] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #4CAF50;
    opacity: 0.7;
}

.leaf-empty-title[b-0kav0mxh3k] {
    font-size: 1rem;
    color: #212121;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.leaf-empty-desc[b-0kav0mxh3k] {
    font-size: 0.8rem;
    color: #616161;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.leaf-connection-status[b-0kav0mxh3k] {
    margin-top: 1rem;
}

.leaf-status-indicator[b-0kav0mxh3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.75rem;
}

.leaf-status-ready[b-0kav0mxh3k] {
    background: #E8F5E9;
    border-color: #81C784;
}

.leaf-status-connecting[b-0kav0mxh3k] {
    background: #FFF3E0;
    border-color: #FFB74D;
}

.leaf-status-icon[b-0kav0mxh3k] {
    font-size: 0.8rem;
}

.leaf-status-ready .leaf-status-icon[b-0kav0mxh3k] {
    color: #4CAF50;
}

.leaf-status-connecting .leaf-status-icon[b-0kav0mxh3k] {
    color: #FF9800;
}

.leaf-status-text[b-0kav0mxh3k] {
    color: #616161;
    font-weight: 500;
}

/* ===== 响应式设计区域 ===== */
@media (max-width: 480px) {
    .leaf-chat-widget[b-0kav0mxh3k] {
        bottom: 60px;
        right: 10px;
        left: 10px;
    }

    .leaf-chat-window[b-0kav0mxh3k] {
        width: auto;
        height: 450px;
    }

    .leaf-chat-expanded[b-0kav0mxh3k] {
        width: auto;
    }

    .leaf-chat-toggle-button[b-0kav0mxh3k] {
        width: auto;
        justify-content: center;
    }

    .leaf-message[b-0kav0mxh3k] {
        max-width: 90%;
    }

    .leaf-input-footer[b-0kav0mxh3k] {
        flex-direction: column;
        gap: 6px;
    }

    .leaf-input-actions[b-0kav0mxh3k] {
        justify-content: space-between;
        width: 100%;
    }

    .leaf-send-btn[b-0kav0mxh3k] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/ProductTypeManage.razor.rz.scp.css */
/* ProductTypeManage.razor.css - 产品管理组件样式 */

/* ====== 标题行样式 ====== */
.header-container[b-r9owcj6ezf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* 浅灰色背景 */
    padding: 6px 16px; /* 减少内边距 */
    margin: 4px 0; /* 减少外边距 */
    border-radius: 6px;
    border: 1px solid #dee2e6;
    flex-wrap: nowrap; /* 防止换行 */
    min-height: 50px; /* 确保最小高度 */
}

.header-left[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    min-width: 150px; /* 最小宽度 */
}

.header-center[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    display: flex;
    justify-content: center;
}

.header-right[b-r9owcj6ezf] {
    flex: 0 1 auto; /* 不拉伸，可收缩 */
    display: flex;
    justify-content: flex-end;
    min-width: 120px; /* 最小宽度 */
}

/* 页面标题样式 */
.page-title[b-r9owcj6ezf] {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap; /* 防止标题换行 */
}

/* 统计信息样式 */
.count-info[b-r9owcj6ezf] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap; /* 防止统计信息换行 */
}

/* ====== 表格外层容器 - 水平滚动支持 ====== */
.table-outer-container[b-r9owcj6ezf] {
    width: 100%;
    overflow-x: auto; /* 水平滚动条 */
    margin-top: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

/* 表格容器 */
.table-container[b-r9owcj6ezf] {
    min-width: 800px; /* 最小宽度，确保在小屏幕上出现水平滚动 */
    width: 100%;
}

/* ====== 表格样式优化 ====== */
.table-responsive[b-r9owcj6ezf] {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
}

.table-custom[b-r9owcj6ezf] {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 800px; /* 确保表格有最小宽度 */
}

    .table-custom thead[b-r9owcj6ezf] {
        background: linear-gradient(135deg, #34495e, #2c3e50);
        position: sticky;
        top: 0; /* 表头固定 */
        z-index: 10;
    }

        .table-custom thead th[b-r9owcj6ezf] {
            color: white;
            font-weight: 600;
            padding: 12px 8px;
            border: none;
            font-size: 0.85rem;
            text-align: center; /* 表头文本居中 */
            vertical-align: middle;
            white-space: nowrap; /* 防止表头文本换行 */
        }

/* 表格行样式 */
.table-row[b-r9owcj6ezf] {
    height: 65px; /* 增加行高 */
    max-height: 80px; /* 最大高度限制 */
    transition: all 0.2s ease;
}

.table-custom tbody tr:hover[b-r9owcj6ezf] {
    background-color: #f8f9fa;
}

.table-custom tbody td[b-r9owcj6ezf] {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* ====== 产品名称列样式 ====== */
.product-name-cell[b-r9owcj6ezf] {
    min-width: 200px;
    max-width: 300px;
}

.product-name-content[b-r9owcj6ezf] {
    display: flex;
    flex-direction: column;
    max-height: 60px; /* 限制内容高度 */
    overflow: hidden; /* 超出的内容隐藏 */
}

.product-name-main[b-r9owcj6ezf] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.product-name-desc[b-r9owcj6ezf] {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 操作列样式 ====== */
.action-column[b-r9owcj6ezf] {
    width: 130px;
    min-width: 130px;
}

.action-buttons[b-r9owcj6ezf] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* 操作按钮样式 */
.btn-action[b-r9owcj6ezf] {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin: 0; /* 移除边距 */
    white-space: nowrap; /* 按钮文本不换行 */
}

.btn-edit[b-r9owcj6ezf] {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-edit:hover[b-r9owcj6ezf] {
        background-color: #e0a800;
        border-color: #d39e00;
        transform: translateY(-1px);
    }

.btn-delete[b-r9owcj6ezf] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-delete:hover[b-r9owcj6ezf] {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-1px);
    }

/* ====== 主要按钮样式 ====== */
.btn-primary-custom[b-r9owcj6ezf] {
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    border-radius: 6px;
    padding: 4px 16px;
    color: white;
    font-weight: 500;
    font-size: 1.0rem;
    transition: all 0.3s ease;
    white-space: nowrap; /* 按钮文本不换行 */
}

    .btn-primary-custom:hover[b-r9owcj6ezf] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        background: linear-gradient(45deg, #2980b9, #3498db);
    }

/* ====== 徽章样式 ====== */
.id-badge[b-r9owcj6ezf] {
    background: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.code-badge[b-r9owcj6ezf] {
    background: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-badge[b-r9owcj6ezf] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #28a745;
}

.currency-badge[b-r9owcj6ezf] {
    background: #17a2b8;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.created-date[b-r9owcj6ezf] {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ====== 状态容器样式 ====== */
.loading-container[b-r9owcj6ezf], .empty-container[b-r9owcj6ezf] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
}

/* ====== 模态框样式 ====== */
.modal-backdrop-custom[b-r9owcj6ezf] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content-custom[b-r9owcj6ezf] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header-custom[b-r9owcj6ezf] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title-custom[b-r9owcj6ezf] {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.modal-body-custom[b-r9owcj6ezf] {
    padding: 1.5rem;
}

.modal-footer-custom[b-r9owcj6ezf] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* ====== 表单样式 ====== */
.form-label-custom[b-r9owcj6ezf] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control-custom[b-r9owcj6ezf] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .form-control-custom:focus[b-r9owcj6ezf] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

/* ====== 文本对齐类 ====== */
.text-center[b-r9owcj6ezf] {
    text-align: center !important;
}

.text-end[b-r9owcj6ezf] {
    text-align: end !important;
}

.align-middle[b-r9owcj6ezf] {
    vertical-align: middle !important;
}

/* ====== 响应式设计 ====== */
@media (max-width: 1200px) {
    .table-outer-container[b-r9owcj6ezf] {
        overflow-x: auto; /* 在中等屏幕上启用水平滚动 */
    }

    .table-container[b-r9owcj6ezf] {
        min-width: 900px; /* 增加最小宽度 */
    }
}

@media (max-width: 768px) {
    .header-container[b-r9owcj6ezf] {
        flex-wrap: nowrap; /* 在小屏幕上也不换行 */
        overflow-x: auto; /* 如果内容过多，允许水平滚动 */
        padding: 8px;
    }

    .header-left[b-r9owcj6ezf],
    .header-center[b-r9owcj6ezf],
    .header-right[b-r9owcj6ezf] {
        flex-shrink: 0; /* 防止收缩 */
        margin-right: 10px;
    }

    .header-right[b-r9owcj6ezf] {
        margin-right: 0;
    }

    .page-title[b-r9owcj6ezf] {
        font-size: 1.2rem; /* 在小屏幕上稍微缩小标题 */
    }

    .action-buttons[b-r9owcj6ezf] {
        flex-direction: row; /* 保持按钮水平排列 */
        gap: 4px;
    }

    .action-column[b-r9owcj6ezf] {
        width: 120px;
        min-width: 120px;
    }

    .product-name-cell[b-r9owcj6ezf] {
        max-width: 150px;
        min-width: 150px;
    }

    .table-row[b-r9owcj6ezf] {
        height: auto;
        min-height: 60px;
    }

    .table-container[b-r9owcj6ezf] {
        min-width: 1000px; /* 在小屏幕上需要更大的最小宽度 */
    }
}

@media (max-width: 576px) {
    .header-container[b-r9owcj6ezf] {
        padding: 6px;
    }

    .page-title[b-r9owcj6ezf] {
        font-size: 1.1rem;
    }

    .count-info[b-r9owcj6ezf] {
        font-size: 0.8rem;
    }

    .btn-primary-custom[b-r9owcj6ezf] {
        padding: 4px 12px;
        font-size: 0.8rem;
    }
}

/* ====== 辅助类 ====== */
.visually-hidden[b-r9owcj6ezf] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/ProductTypeManage1.razor.rz.scp.css */
/* ProductTypeManage.razor.css - 产品分类管理组件样式 */

/* ====== 标题行样式 ====== */
.header-container[b-h9612m6xcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* 浅灰色背景 */
    padding: 8px 16px; /* 减少内边距 */
    margin: 8px 0; /* 减少外边距 */
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.header-left[b-h9612m6xcq] {
    flex: 1;
}

.header-center[b-h9612m6xcq] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-right[b-h9612m6xcq] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* 页面标题样式 */
.page-title[b-h9612m6xcq] {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 统计信息样式 */
.count-info[b-h9612m6xcq] {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ====== 主要按钮样式 ====== */
.btn-primary-custom[b-h9612m6xcq] {
    background: linear-gradient(45deg, #3498db, #2980b9);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

    .btn-primary-custom:hover[b-h9612m6xcq] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        background: linear-gradient(45deg, #2980b9, #3498db);
    }

/* ====== 表格样式优化 ====== */
.table-container[b-h9612m6xcq] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 8px;
}

.table-custom[b-h9612m6xcq] {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-custom thead[b-h9612m6xcq] {
        background: linear-gradient(135deg, #34495e, #2c3e50);
    }

        .table-custom thead th[b-h9612m6xcq] {
            color: white;
            font-weight: 600;
            padding: 12px 8px;
            border: none;
            font-size: 0.85rem;
        }

/* 表格行样式 */
.table-row[b-h9612m6xcq] {
    height: 65px; /* 增加行高 */
    max-height: 80px; /* 最大高度限制 */
    transition: all 0.2s ease;
}

.table-custom tbody tr:hover[b-h9612m6xcq] {
    background-color: #f8f9fa;
}

.table-custom tbody td[b-h9612m6xcq] {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

/* ====== 产品名称列样式 ====== */
.product-name-cell[b-h9612m6xcq] {
    max-width: 300px;
    min-width: 200px;
}

.product-name-content[b-h9612m6xcq] {
    display: flex;
    flex-direction: column;
    max-height: 60px; /* 限制内容高度 */
    overflow: hidden; /* 超出的内容隐藏 */
}

.product-name-main[b-h9612m6xcq] {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 2px;
}

.product-name-desc[b-h9612m6xcq] {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== 操作列样式 ====== */
.action-column[b-h9612m6xcq] {
    width: 180px;
    min-width: 180px;
}

.action-buttons[b-h9612m6xcq] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* 操作按钮样式 */
.btn-action[b-h9612m6xcq] {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin: 0; /* 移除边距 */
}

.btn-edit[b-h9612m6xcq] {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-edit:hover[b-h9612m6xcq] {
        background-color: #e0a800;
        border-color: #d39e00;
        transform: translateY(-1px);
    }

.btn-delete[b-h9612m6xcq] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

    .btn-delete:hover[b-h9612m6xcq] {
        background-color: #c82333;
        border-color: #bd2130;
        transform: translateY(-1px);
    }

/* ====== 徽章样式 ====== */
.id-badge[b-h9612m6xcq] {
    background: #6c757d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.code-badge[b-h9612m6xcq] {
    background: #e9ecef;
    color: #495057;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: 600;
}

.price-badge[b-h9612m6xcq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #28a745;
}

.currency-badge[b-h9612m6xcq] {
    background: #17a2b8;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.created-date[b-h9612m6xcq] {
    color: #6c757d;
    font-size: 0.8rem;
}

/* ====== 状态容器样式 ====== */
.loading-container[b-h9612m6xcq], .empty-container[b-h9612m6xcq] {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
}

/* ====== 模态框样式 ====== */
.modal-backdrop-custom[b-h9612m6xcq] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content-custom[b-h9612m6xcq] {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-header-custom[b-h9612m6xcq] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title-custom[b-h9612m6xcq] {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.modal-body-custom[b-h9612m6xcq] {
    padding: 1.5rem;
}

.modal-footer-custom[b-h9612m6xcq] {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* ====== 表单样式 ====== */
.form-label-custom[b-h9612m6xcq] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control-custom[b-h9612m6xcq] {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .form-control-custom:focus[b-h9612m6xcq] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }

/* ====== 响应式设计 ====== */
@media (max-width: 768px) {
    .header-container[b-h9612m6xcq] {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .header-left[b-h9612m6xcq],
    .header-center[b-h9612m6xcq],
    .header-right[b-h9612m6xcq] {
        justify-content: center;
        width: 100%;
    }

    .action-buttons[b-h9612m6xcq] {
        flex-direction: column;
        gap: 4px;
    }

    .action-column[b-h9612m6xcq] {
        width: 120px;
        min-width: 120px;
    }

    .product-name-cell[b-h9612m6xcq] {
        max-width: 150px;
    }

    .table-row[b-h9612m6xcq] {
        height: auto;
        min-height: 60px;
    }
}

/* ====== 辅助类 ====== */
.align-middle[b-h9612m6xcq] {
    vertical-align: middle !important;
}

.text-end[b-h9612m6xcq] {
    text-align: end !important;
}

.visually-hidden[b-h9612m6xcq] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* _content/LEAFBlazorApp25/Components/SaleOrders/SalesStatistics.razor.rz.scp.css */
/* 销售统计分析页面样式 */
/* 主容器样式 */
.sales-statistics[b-w3d87i9b86] {
    padding: 8px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100%;
}

/* 筛选条件区域 */
.filter-section[b-w3d87i9b86] {
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.form-label[b-w3d87i9b86] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.form-control[b-w3d87i9b86], .form-select[b-w3d87i9b86] {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

    .form-control:focus[b-w3d87i9b86], .form-select:focus[b-w3d87i9b86] {
        border-color: #3498db;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        outline: none;
    }

/* 周期统计按钮 - 优化响应式布局 */
.cycle-stat-btn[b-w3d87i9b86] {
    min-width: 90px;
    max-width: 120px;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    padding: 8px 8px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    /* 添加这些换行属性 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

    .cycle-stat-btn:hover:not(:disabled)[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
        background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
    }

    .cycle-stat-btn:disabled[b-w3d87i9b86] {
        opacity: 0.6;
        transform: none;
        box-shadow: none;
    }

.btn-text[b-w3d87i9b86] {
    margin-top: 1px;
    text-align: center;

    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    line-height: 1.0;
}

/* 其他按钮样式 */
.export-btn[b-w3d87i9b86], .toggle-btn[b-w3d87i9b86], .order-details-btn[b-w3d87i9b86], .pagination-btn[b-w3d87i9b86] {
    min-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 10px;
    transition: all 0.3s ease;
}

.order-details-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

    .order-details-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    }

.export-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

    .export-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
        background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
    }

.toggle-btn[b-w3d87i9b86] {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    color: white;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    padding: 5px 10px !important;
    min-width: 70px !important;
}

    .toggle-btn:hover[b-w3d87i9b86] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
        background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    }

/* 加载状态 */
.loading-overlay[b-w3d87i9b86] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.spinner-container[b-w3d87i9b86] {
    text-align: center;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 统计概览卡片 - 优化响应式布局 */
.summary-cards[b-w3d87i9b86] {
    margin-bottom: 12px;
}

.summary-card[b-w3d87i9b86] {
    background: white;
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

    .summary-card:hover[b-w3d87i9b86] {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

.card-icon[b-w3d87i9b86] {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.total-revenue .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.total-orders .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.avg-order .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.top-product .card-icon[b-w3d87i9b86] {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.card-value[b-w3d87i9b86] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.card-label[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #7f8c8d;
    margin: 0;
    font-weight: 600;
}

/* 图表区域 */
.charts-section[b-w3d87i9b86] {
    margin-bottom: 12px;
}

.chart-card[b-w3d87i9b86] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: 350px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    overflow: hidden;
}

.chart-header[b-w3d87i9b86] {
    padding: 15px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(248, 249, 250, 0.8);
}

    .chart-header h5[b-w3d87i9b86] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.2rem;
        font-weight: 700;
    }

.chart-legend[b-w3d87i9b86] {
    display: flex;
    gap: 15px;
}

.legend-item[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
}

.legend-color[b-w3d87i9b86] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.bar-color[b-w3d87i9b86] {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.line-color[b-w3d87i9b86] {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.chart-container[b-w3d87i9b86] {
    flex: 1;
    padding: 15px;
    position: relative;
}

/* 数据表格区域 */
.data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #e1e8ed;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* 标题行样式 - 使用浅灰色背景 */
.section-header.stats-header[b-w3d87i9b86] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
}

.section-header.order-details-header[b-w3d87i9b86] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    border-bottom: 2px solid #e9ecef;
    padding: 12px 20px;
}

.section-header[b-w3d87i9b86] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.section-header h5[b-w3d87i9b86] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.table-info[b-w3d87i9b86], .date-range[b-w3d87i9b86] {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

.header-actions[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 表格容器 */
.table-container[b-w3d87i9b86] {
    max-height: 400px;
    overflow-y: auto;
}

.data-table[b-w3d87i9b86] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem; /* 增大表格字体 */
}

    .data-table th[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 12px 15px;
        text-align: left;
        font-weight: 700;
        color: #2c3e50;
        border-bottom: 3px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 0.95rem; /* 表头字体大小 */
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .data-table td[b-w3d87i9b86] {
        padding: 10px 15px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
        font-size: 0.95rem; /* 表格数据字体大小 */
    }

.amount[b-w3d87i9b86] {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.95rem; /* 金额列字体大小与其他列相同 */
    color: #2c3e50;
}

.cumulative[b-w3d87i9b86] {
    color: #e74c3c;
    font-weight: 700;
}

/* 订单详细数据表格 */
.order-details-table[b-w3d87i9b86] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 1200px;
}

    .order-details-table th[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 10px 12px;
        text-align: left;
        font-weight: 700;
        color: #2c3e50;
        border-bottom: 3px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 10;
        white-space: nowrap;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .order-details-table td[b-w3d87i9b86] {
        padding: 8px 12px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.85rem;
    }

.truncate[b-w3d87i9b86] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 状态标签 */
.status-badge[b-w3d87i9b86] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

    .status-badge.paid[b-w3d87i9b86] {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
    }

    .status-badge.pending[b-w3d87i9b86] {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        color: #856404;
    }

    .status-badge.failed[b-w3d87i9b86] {
        background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
        color: #721c24;
    }

/* 分页控件 - 重新布局 */
.pagination-container[b-w3d87i9b86] {
    padding: 15px 20px;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.pagination-info[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.pagination-controls[b-w3d87i9b86] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto; /* 将分页控件推到右侧 */
}

.page-info[b-w3d87i9b86] {
    font-size: 0.85rem;
    color: #2c3e50;
    font-weight: 600;
    background: white;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 空状态提示 */
.empty-state[b-w3d87i9b86] {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
    margin: 12px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

    .empty-state.small[b-w3d87i9b86] {
        padding: 20px;
        margin: 0;
    }

.empty-icon[b-w3d87i9b86] {
    font-size: 48px;
    color: #bdc3c7;
    margin-bottom: 15px;
    opacity: 0.7;
}

.empty-state h4[b-w3d87i9b86] {
    color: #7f8c8d;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 600;
}

.empty-state p[b-w3d87i9b86] {
    color: #95a5a6;
    margin: 0;
    font-size: 0.95rem;
}

/* 响应式设计 - 优化移动端体验
    平板：≥ 768px (min-width: 768px)*/
@media (max-width: 768px) {
    .sales-statistics[b-w3d87i9b86] {
        padding: 5px;
    }

    .filter-section[b-w3d87i9b86], .summary-card[b-w3d87i9b86], .chart-card[b-w3d87i9b86], .data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
        padding: 10px;
        margin-bottom: 10px;
    }

    .section-header[b-w3d87i9b86] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .header-actions[b-w3d87i9b86] {
        align-self: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chart-header[b-w3d87i9b86] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .summary-card[b-w3d87i9b86] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }

    .card-value[b-w3d87i9b86] {
        font-size: 1.1rem; /* 移动端减小字体 */
    }

    .card-label[b-w3d87i9b86] {
        font-size: 0.8rem; /* 移动端减小标签字体 */
    }

    .pagination-container[b-w3d87i9b86] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .pagination-controls[b-w3d87i9b86] {
        margin-left: 0;
        justify-content: center;
    }

    /* 周期统计按钮移动端优化 */
    .cycle-stat-btn[b-w3d87i9b86] {
        flex-direction: column; /* 移动端垂直排列 */
        min-width: 100%;
        max-width: 100%;
        font-size: 0.9rem;
        padding: 4px 4px;
        min-height: 40px;
        margin-top: 0px;
    }

    .export-btn[b-w3d87i9b86], .toggle-btn[b-w3d87i9b86], .order-details-btn[b-w3d87i9b86] {
        min-width: 80px;
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    /* 统计卡片移动端布局优化 */
    .summary-cards .row[b-w3d87i9b86] {
        margin: 0 -5px;
    }

    .summary-cards .col-sm-6[b-w3d87i9b86] {
        padding: 0 5px;
        margin-bottom: 10px;
    }
}

/*手机（小屏）：< 576px (通常使用 max-width: 575.98px)
    手机（大屏）：≥ 576px (min-width: 576px)*/
@media (max-width: 400px) {
    .card-value[b-w3d87i9b86] {
        font-size: 1rem;
    }

    .card-label[b-w3d87i9b86] {
        font-size: 0.75rem;
    }

    .section-header h5[b-w3d87i9b86] {
        font-size: 1rem;
    }

    .chart-header h5[b-w3d87i9b86] {
        font-size: 1rem;
    }
}

/* 滚动条样式 */
.table-container[b-w3d87i9b86]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-container[b-w3d87i9b86]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container[b-w3d87i9b86]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-radius: 4px;
}

    .table-container[b-w3d87i9b86]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
    }

/* 动画效果 */
@keyframes fadeIn-b-w3d87i9b86 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card[b-w3d87i9b86], .chart-card[b-w3d87i9b86], .data-section[b-w3d87i9b86], .order-details-section[b-w3d87i9b86] {
    animation: fadeIn-b-w3d87i9b86 0.6s ease-out;
}

/* 产品销售排行图X轴字体样式 */
#productRankingChart[b-w3d87i9b86] {
    font-family: 'SimSun', '宋体', serif !important;
}

    #productRankingChart .chartjs-size-monitor[b-w3d87i9b86],
    #productRankingChart .chartjs-render-monitor[b-w3d87i9b86] {
        font-family: 'SimSun', '宋体', serif !important;
    }
/* _content/LEAFBlazorApp25/Components/Shared/CooperationInformation.razor.rz.scp.css */
/* CooperationInformation.razor.css - 最终优化版本 */

/* 基础容器 - 更紧凑 */
.coop-container[b-jpruochs5t] {
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    font-size: 0.9rem; /* 最小字号不小于0.9rem */
}

/* 主要内容区域 - 与招聘内容区同宽度 */
.coop-content[b-jpruochs5t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 15px 18px; /* 减小内边距 */
}

/* ===== 页面头部样式 ===== */
.coop-header[b-jpruochs5t] {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    color: #ffffff;
    padding: 12px 20px 10px; /* 减小内边距 */
    margin-bottom: 12px; /* 减小间距 */
    border-radius: 8px;
    border: 1px solid #0d47a1;
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.2);
    text-align: center; /* 整个头部文本居中 */
}

.coop-header-content[b-jpruochs5t] {
    max-width: 100%;
}

/* 公司名称样式 - 科技感，居中显示 */
.coop-company-name[b-jpruochs5t] {
    font-size: 1.5rem; /* 基础大小 */
    font-weight: 700;
    margin-bottom: 8px; /* 减小间距 */
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center; /* 文本居中 */
    display: block; /* 改为块级元素，便于居中 */
}

.coop-name-part-2[b-jpruochs5t] {
    font-weight: 700;
    font-size: 1.5rem; /* 24px，使用rem单位便于响应式 */
    color: #ffffff;
    display: inline-block; /* 行内块，便于居中 */
    text-align: center;
    line-height: 1.3;
    padding: 4px 0; /* 添加少许内边距 */
}

/* 公司介绍 - 紧凑布局 */
.coop-company-intro[b-jpruochs5t] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px;
    justify-content: center; /* 居中对齐 */
}

.coop-intro-icon[b-jpruochs5t] {
    font-size: 1rem; /* 16px */
    color: #40c4ff;
    margin-top: 2px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px;
    border-radius: 50%;
}

.coop-company-intro p[b-jpruochs5t] {
    margin: 0;
    font-size: 0.95rem; /* 不小于0.9rem */
    line-height: 1.5;
    color: #e3f2fd;
    opacity: 0.95;
    text-align: left; /* 段落左对齐 */
}

/* ===== 职位导航区域 ===== */
.coop-position-nav[b-jpruochs5t] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 8px;
    padding: 12px; /* 减小内边距 */
    margin-bottom: 12px; /* 减小间距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e3f2fd;
    border-left: 4px solid #1a237e;
}

.coop-nav-header[b-jpruochs5t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px; /* 减小间距 */
}

.coop-nav-title[b-jpruochs5t] {
    font-size: 1.2rem; /* 使用相对单位 */
    color: #1a237e;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
}

.coop-nav-count[b-jpruochs5t] {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
    color: #ffffff;
    padding: 3px 8px; /* 减小内边距 */
    border-radius: 12px;
    font-size: 0.9rem; /* 调整到最小0.9rem */
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 导航标签 - 优化点击效果 */
.coop-nav-tabs[b-jpruochs5t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.coop-nav-tab[b-jpruochs5t] {
    flex: 1;
    min-width: 140px;
    background: linear-gradient(135deg, #ffffff, #f5f7fa);
    border: 1px solid #c5cae9;
    border-radius: 6px;
    padding: 8px 12px; /* 减小内边距 */
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem; /* 不小于0.9rem */
    font-weight: 500;
    color: #1a237e;
    text-align: left;
    position: relative;
    overflow: hidden;
}

    .coop-nav-tab:hover[b-jpruochs5t] {
        border-color: #7986cb;
        background: linear-gradient(135deg, #f5f7fa, #e8eaf6);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(121, 134, 203, 0.15);
    }

    /* 激活状态 - 点击后立即变为蓝色背景 */
    .coop-nav-tab-active[b-jpruochs5t],
    .coop-nav-tab:active[b-jpruochs5t] {
        background: linear-gradient(135deg, #2196F3, #1976D2) !important; /* 蓝色背景 */
        color: #ffffff !important;
        border-color: #1976D2 !important;
        font-weight: 600;
        box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2) !important;
        transform: translateY(0) !important; /* 移除悬浮效果 */
    }

        /* 移除激活状态的悬停效果 */
        .coop-nav-tab-active:hover[b-jpruochs5t] {
            background: linear-gradient(135deg, #2196F3, #1976D2) !important;
            color: #ffffff !important;
            border-color: #1976D2 !important;
            transform: translateY(0) !important;
            box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2) !important;
        }

.coop-tab-badge[b-jpruochs5t] {
    margin-left: auto;
    font-size: 0.9rem; /* 调整到最小0.9rem */
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* ===== 职位网格 ===== */
.coop-positions-grid[b-jpruochs5t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px; /* 减小间距 */
    margin-bottom: 16px; /* 减小间距 */
}

.coop-position-card[b-jpruochs5t] {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 8px;
    border: 1px solid #e3f2fd;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

    .coop-position-card[b-jpruochs5t]:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #1a237e, #0d47a1);
    }

    .coop-position-card:hover[b-jpruochs5t] {
        box-shadow: 0 6px 16px rgba(26, 35, 126, 0.15);
        border-color: #7986cb;
        transform: translateY(-3px);
    }

.coop-position-header[b-jpruochs5t] {
    background: rgba(232, 234, 246, 0.5);
    padding: 12px; /* 减小内边距 */
    border-bottom: 1px solid #e3f2fd;
}

.coop-position-title[b-jpruochs5t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px; /* 减小间距 */
}

.coop-position-title-text[b-jpruochs5t] {
    font-size: 1rem; /* 不小于0.9rem */
    font-weight: 600;
    color: #1a237e;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.coop-position-tag[b-jpruochs5t] {
    font-size: 0.9rem; /* 调整到最小0.9rem */
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
}

.coop-tag-hot[b-jpruochs5t] {
    background: linear-gradient(135deg, #ff4081, #f50057);
    color: #ffffff;
}

.coop-tag-urgent[b-jpruochs5t] {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: #ffffff;
}

.coop-position-type[b-jpruochs5t] {
    margin-top: 6px;
}

.coop-type-badge[b-jpruochs5t] {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #e8eaf6, #c5cae9);
    color: #1a237e;
    border-radius: 12px;
    font-size: 0.9rem; /* 调整到最小0.9rem */
    font-weight: 500;
}

.coop-position-body[b-jpruochs5t] {
    padding: 12px; /* 减小内边距 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 章节标题 */
.coop-section-subtitle[b-jpruochs5t] {
    font-size: 0.95rem; /* 不小于0.9rem */
    font-weight: 600;
    color: #1a237e;
    margin: 0 0 8px 0; /* 减小间距 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.coop-responsibilities[b-jpruochs5t], .coop-requirements[b-jpruochs5t] {
    margin-bottom: 12px; /* 减小间距 */
}

/* 列表样式 */
.coop-duties-list[b-jpruochs5t], .coop-requirements-list[b-jpruochs5t] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .coop-duties-list li[b-jpruochs5t], .coop-requirements-list li[b-jpruochs5t] {
        padding-left: 16px;
        position: relative;
        margin-bottom: 4px; /* 减小间距 */
        font-size: 0.9rem; /* 最小字号 */
        line-height: 1.4;
        color: #37474f;
    }

        .coop-duties-list li[b-jpruochs5t]:before, .coop-requirements-list li[b-jpruochs5t]:before {
            content: "▸";
            position: absolute;
            left: 4px;
            color: #1a237e;
            font-weight: bold;
            font-size: 14px;
        }

.coop-bonus-info[b-jpruochs5t] {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-left: 3px solid #1a237e;
    padding: 8px 10px;
    border-radius: 0 5px 5px 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem; /* 最小字号 */
    color: #0d47a1;
    font-weight: 500;
}

    .coop-bonus-info i[b-jpruochs5t] {
        color: #1a237e;
    }

/* ===== 支持区域 ===== */
.coop-support-section[b-jpruochs5t] {
    margin-bottom: 16px; /* 减小间距 */
}

.coop-section-header[b-jpruochs5t] {
    margin-bottom: 12px; /* 减小间距 */
}

.coop-section-title[b-jpruochs5t] {
    font-size: 1.2rem; /* 使用相对单位 */
    color: #1a237e;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* 支持网格 - 每行2个card在小窗体时 */
.coop-support-grid[b-jpruochs5t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

/* 支持卡片 */
.coop-support-card[b-jpruochs5t] {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 8px;
    padding: 16px 12px; /* 减小内边距 */
    text-align: center;
    border: 1px solid #e3f2fd;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .coop-support-card[b-jpruochs5t]:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #00bcd4, #40c4ff);
    }

    .coop-support-card:hover[b-jpruochs5t] {
        border-color: #7986cb;
        box-shadow: 0 6px 16px rgba(121, 134, 203, 0.15);
        transform: translateY(-3px);
    }

/* 支持图标 */
.coop-support-icon[b-jpruochs5t] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
    background: rgba(26, 35, 126, 0.1);
    border: 2px solid rgba(26, 35, 126, 0.2);
}

.coop-support-icon-product[b-jpruochs5t] {
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
}

.coop-support-icon-tech[b-jpruochs5t] {
    color: #2196f3;
    border-color: rgba(33, 150, 243, 0.3);
}

.coop-support-icon-flexible[b-jpruochs5t] {
    color: #9c27b0;
    border-color: rgba(156, 39, 176, 0.3);
}

.coop-support-icon-training[b-jpruochs5t] {
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.3);
}

.coop-support-title[b-jpruochs5t] {
    font-size: 1rem; /* 不小于0.9rem */
    margin: 0 0 6px 0;
    color: #1a237e;
    font-weight: 600;
}

.coop-support-desc[b-jpruochs5t] {
    color: #546e7a;
    margin: 0;
    line-height: 1.4;
    font-size: 0.9rem; /* 最小字号 */
    flex: 1;
}

/* ===== 联系区域 ===== */
.coop-contact-section[b-jpruochs5t] {
    background: #f8f9fa; /* 恢复老样式背景色 */
    padding: 16px; /* 减小内边距 */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 0;
}

.coop-contact-content[b-jpruochs5t] {
    max-width: 100%;
}

.coop-contact-title[b-jpruochs5t] {
    font-size: 1.2rem;
    color: #000000; /* 黑色文字 */
    margin-bottom: 8px; /* 减小间距 */
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.coop-contact-desc[b-jpruochs5t] {
    font-size: 0.95rem; /* 不小于0.9rem */
    color: #6c757d;
    margin-bottom: 12px; /* 减小间距 */
    line-height: 1.4;
}

/* 紧凑联系方式 - 大窗体同行，小窗体换行 */
.coop-contact-compact[b-jpruochs5t] {
    background: #ffffff;
    border-radius: 6px;
    padding: 10px 12px; /* 减小内边距 */
    border: 1px solid #dee2e6;
    display: flex;
    flex-wrap: nowrap; /* 大窗体时同行 */
    gap: 16px; /* 减小间距 */
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.coop-contact-line[b-jpruochs5t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0; /* 减小内边距 */
    flex: 1;
    min-width: 0; /* 允许收缩 */
}

.coop-contact-icon[b-jpruochs5t] {
    color: #007bff;
    font-size: 0.95rem; /* 不小于0.9rem */
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.coop-contact-label[b-jpruochs5t] {
    font-weight: 600;
    color: #000000;
    font-size: 0.9rem; /* 最小字号 */
    min-width: 70px;
    flex-shrink: 0;
}

.coop-contact-value[b-jpruochs5t] {
    color: #000000;
    font-weight: 500;
    font-size: 0.95rem; /* 不小于0.9rem */
    flex: 1;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .coop-content[b-jpruochs5t] {
        padding: 10px 12px 14px;
    }

    .coop-header[b-jpruochs5t] {
        padding: 10px 15px 8px;
        margin-bottom: 10px;
    }

    .coop-company-name[b-jpruochs5t] {
        font-size: 1.4rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .coop-name-part-2[b-jpruochs5t] {
        font-size: 1.4rem; /* 小屏幕适当减小，仍大于20px */
    }

    .coop-company-intro[b-jpruochs5t] {
        flex-direction: column;
        gap: 6px;
        margin-top: 2px;
    }

    .coop-intro-icon[b-jpruochs5t] {
        align-self: center;
        margin-bottom: 4px;
    }

    .coop-company-intro p[b-jpruochs5t] {
        text-align: center; /* 小屏幕段落居中 */
    }

    .coop-positions-grid[b-jpruochs5t] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .coop-nav-tab[b-jpruochs5t] {
        min-width: calc(50% - 4px);
        padding: 8px 10px;
        font-size: 0.9rem; /* 最小字号 */
    }

    /* 支持网格：小窗体时每行2个card */
    .coop-support-grid[b-jpruochs5t] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .coop-support-card[b-jpruochs5t] {
        padding: 14px 10px;
    }

    .coop-support-icon[b-jpruochs5t] {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .coop-support-title[b-jpruochs5t] {
        font-size: 0.95rem; /* 不小于0.9rem */
        margin-bottom: 5px;
    }

    .coop-support-desc[b-jpruochs5t] {
        font-size: 0.9rem; /* 保持最小0.9rem */
    }

    /* 联系信息在小窗体时变为2行 */
    .coop-contact-compact[b-jpruochs5t] {
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px;
    }

    .coop-contact-line[b-jpruochs5t] {
        flex: none;
        width: 100%;
        min-width: auto;
        padding: 6px 0;
        justify-content: flex-start;
    }

    .coop-contact-label[b-jpruochs5t] {
        min-width: 65px;
        font-size: 0.9rem; /* 保持最小0.9rem */
    }

    .coop-contact-value[b-jpruochs5t] {
        font-size: 0.95rem; /* 不小于0.9rem */
    }
}

@media (max-width: 480px) {
    .coop-company-name[b-jpruochs5t] {
        font-size: 1.3rem;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .coop-name-part-2[b-jpruochs5t] {
        font-size: 1.3rem; /* 超小屏幕适当减小，仍大于20px */
        text-align: center;
    }

    .coop-nav-tab[b-jpruochs5t] {
        min-width: 100%;
        padding: 8px 10px;
        font-size: 0.9rem; /* 最小字号 */
    }

    /* 超小屏幕时支持网格变为1列 */
    .coop-support-grid[b-jpruochs5t] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .coop-support-card[b-jpruochs5t] {
        padding: 12px 10px;
    }

    .coop-support-icon[b-jpruochs5t] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .coop-support-title[b-jpruochs5t] {
        font-size: 0.95rem; /* 不小于0.9rem */
    }

    .coop-support-desc[b-jpruochs5t] {
        font-size: 0.9rem; /* 保持最小0.9rem */
    }

    .coop-contact-line[b-jpruochs5t] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 5px 0;
    }

    .coop-contact-icon[b-jpruochs5t] {
        align-self: center;
    }

    .coop-contact-label[b-jpruochs5t] {
        min-width: 70px;
        font-size: 0.9rem; /* 保持最小0.9rem */
    }

    .coop-contact-value[b-jpruochs5t] {
        font-size: 0.95rem; /* 不小于0.9rem */
    }

    .coop-position-title-text[b-jpruochs5t] {
        font-size: 1rem; /* 不小于0.9rem */
    }

    .coop-section-subtitle[b-jpruochs5t] {
        font-size: 0.95rem; /* 不小于0.9rem */
    }

    .coop-duties-list li[b-jpruochs5t], .coop-requirements-list li[b-jpruochs5t] {
        font-size: 0.9rem; /* 保持最小0.9rem */
    }
}

/* 科技感动画效果 */
@keyframes fadeInUp-b-jpruochs5t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.coop-position-card[b-jpruochs5t], .coop-support-card[b-jpruochs5t], .coop-nav-tab[b-jpruochs5t] {
    animation: fadeInUp-b-jpruochs5t 0.3s ease-out;
}
/* _content/LEAFBlazorApp25/Components/Shared/DevelopmentReminder.razor.rz.scp.css */
/* 主容器 */
.development-reminder[b-63eoi2gwmi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .development-reminder.show[b-63eoi2gwmi] {
        opacity: 1;
        visibility: visible;
    }

    .development-reminder.hide[b-63eoi2gwmi] {
        opacity: 0;
        visibility: hidden;
    }

/* 背景遮罩 */
.reminder-backdrop[b-63eoi2gwmi] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

/* 模态框 */
.reminder-modal[b-63eoi2gwmi] {
    position: relative;
    width: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(46, 204, 113, 0.4);
    overflow: hidden;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #2ecc71;
    animation: pulse-b-63eoi2gwmi 2s infinite;
}

.development-reminder.show .reminder-modal[b-63eoi2gwmi] {
    transform: translateY(0);
    opacity: 1;
}

@keyframes pulse-b-63eoi2gwmi {
    0%, 100% {
        box-shadow: 0 20px 50px rgba(46, 204, 113, 0.4);
    }

    50% {
        box-shadow: 0 20px 60px rgba(46, 204, 113, 0.6);
    }
}

/* 头部 */
.reminder-header[b-63eoi2gwmi] {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    position: relative;
}

    .reminder-header[b-63eoi2gwmi]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 3px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    }

.header-icon[b-63eoi2gwmi] {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.reminder-title[b-63eoi2gwmi] {
    flex: 1;
    color: white;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.close-btn[b-63eoi2gwmi] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    transition: all 0.2s ease;
}

    .close-btn:hover[b-63eoi2gwmi] {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

/* 内容区域 */
.reminder-body[b-63eoi2gwmi] {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120px;
}


.message-container[b-63eoi2gwmi] {
    text-align: center;
    width: 100%;
}

.main-message[b-63eoi2gwmi] {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: pre-wrap; /* 新增：保留空格 */
}

.additional-info[b-63eoi2gwmi] {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    color: #006400; /* 深绿色 */
    letter-spacing: 0.3px;
    line-height: 1.4;
    padding: 12px 16px;
    background: rgba(0, 100, 0, 0.08);
    border-radius: 10px;
    border: 2px solid rgba(0, 100, 0, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    white-space: pre-wrap; /* 新增：保留空格 */
    word-wrap: break-word;
}

/* 底部区域 */
.reminder-footer[b-63eoi2gwmi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: rgba(249, 249, 249, 0.9);
    border-top: 1px solid rgba(46, 204, 113, 0.1);
}

.footer-left[b-63eoi2gwmi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spinner-container[b-63eoi2gwmi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spinner[b-63eoi2gwmi] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(46, 204, 113, 0.2);
    border-top: 2px solid #2ecc71;
    border-radius: 50%;
    animation: spin-b-63eoi2gwmi 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-63eoi2gwmi {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-text[b-63eoi2gwmi] {
    font-size: 0.9rem;
    color: #27ae60;
    font-weight: 600;
    white-space: nowrap;
}

.footer-right[b-63eoi2gwmi] {
    display: flex;
    gap: 12px;
}

.btn[b-63eoi2gwmi] {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.btn-confirm[b-63eoi2gwmi] {
    background: linear-gradient(to right, #2ecc71, #27ae60);
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

    .btn-confirm:hover[b-63eoi2gwmi] {
        background: linear-gradient(to right, #27ae60, #219653);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }

.btn-close[b-63eoi2gwmi] {
    background: #ecf0f1;
    color: #7f8c8d;
    border: 1px solid #dce0e1;
}

    .btn-close:hover[b-63eoi2gwmi] {
        background: #dfe6e9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* 响应式 */
@media (max-width: 576px) {
    .reminder-modal[b-63eoi2gwmi] {
        width: 90vw;
        margin: 0 5vw;
    }

    .reminder-header[b-63eoi2gwmi] {
        padding: 15px 20px;
    }

    .reminder-body[b-63eoi2gwmi] {
        padding: 24px 20px;
        min-height: 100px;
    }

    .reminder-footer[b-63eoi2gwmi] {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
    }

    .footer-left[b-63eoi2gwmi], .footer-right[b-63eoi2gwmi] {
        width: 100%;
        justify-content: center;
    }

    .main-message[b-63eoi2gwmi] {
        font-size: 1.1rem;
    }

    .additional-info[b-63eoi2gwmi] {
        font-size: 1rem;
        padding: 10px 14px;
    }

    .btn[b-63eoi2gwmi] {
        min-width: 70px;
        padding: 8px 20px;
        font-size: 0.85rem;
    }
}

/* 大屏幕适配 */
@media (min-width: 1200px) {
    .reminder-modal[b-63eoi2gwmi] {
        width: 550px;
    }

    .additional-info[b-63eoi2gwmi] {
        font-size: 1.15rem;
        padding: 14px 18px;
    }
}
/* _content/LEAFBlazorApp25/Components/Shared/PathImageModal.razor.rz.scp.css */
/* PathImageModal组件样式 - 图片预览模态框 */

/* 模态框遮罩层 */
.image-modal-overlay[b-4rzhsictw9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: image-fadeIn-b-4rzhsictw9 0.3s ease;
    backdrop-filter: blur(5px);
}

/* 模态框内容容器 */
.image-modal-content[b-4rzhsictw9] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-width: 95%;
    max-height: 95%;
    animation: image-slideUp-b-4rzhsictw9 0.4s ease;
    transition: all 0.3s ease;
}

/* 模态框头部 - 三栏布局 */
.image-modal-header[b-4rzhsictw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    min-height: 50px;
    height: 50px;
    overflow: hidden;
}

/* 左侧：标题容器 */
.header-title-container[b-4rzhsictw9] {
    flex: 0 0 auto;
    margin-right: 20px;
    max-width: 30%;
    min-width: 0;
}

.image-modal-title[b-4rzhsictw9] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* 中间：图片信息容器 - 占满剩余空间 */
.header-info-container[b-4rzhsictw9] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .header-info-container.empty[b-4rzhsictw9] {
        visibility: hidden;
    }

.image-info-text[b-4rzhsictw9] {
    margin: 0;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

/* 右侧：关闭按钮容器 */
.header-close-container[b-4rzhsictw9] {
    flex: 0 0 auto;
    margin-left: 20px;
}

/* 关闭按钮 */
.image-modal-close[b-4rzhsictw9] {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
    margin: 0;
}

    .image-modal-close:hover[b-4rzhsictw9] {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }

    .image-modal-close span[b-4rzhsictw9] {
        display: block;
        margin-top: -2px;
    }

/* 模态框主体 */
.image-modal-body[b-4rzhsictw9] {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 0;
}

/* 图片容器 */
.image-container[b-4rzhsictw9] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa;
    min-height: 200px;
    padding: 0;
    margin: 0;
}

/* 图片样式 - 响应式自适应 */
.modal-image[b-4rzhsictw9] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

    .modal-image:hover[b-4rzhsictw9] {
        transform: scale(1.01);
    }

/* 动画效果 */
@keyframes image-fadeIn-b-4rzhsictw9 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes image-slideUp-b-4rzhsictw9 {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes image-fadeOut-b-4rzhsictw9 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* 响应式设计 - 大屏幕 */
@media (min-width: 1200px) {
    .image-modal-content[b-4rzhsictw9] {
        max-width: 90%;
        max-height: 90%;
    }
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 992px) {
    .image-modal-content[b-4rzhsictw9] {
        max-width: 95%;
        max-height: 95%;
    }

    .image-modal-header[b-4rzhsictw9] {
        padding: 6px 12px;
        min-height: 45px;
        height: 45px;
    }

    .image-modal-title[b-4rzhsictw9] {
        font-size: 1.1rem;
    }

    .header-title-container[b-4rzhsictw9] {
        margin-right: 15px;
        max-width: 35%;
    }

    .header-info-container[b-4rzhsictw9] {
        margin: 0 15px;
    }

    .image-info-text[b-4rzhsictw9] {
        font-size: 0.85rem;
    }

    .header-close-container[b-4rzhsictw9] {
        margin-left: 15px;
    }
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
    .image-modal-content[b-4rzhsictw9] {
        max-width: 98%;
        max-height: 98%;
        border-radius: 8px;
    }

    .image-modal-header[b-4rzhsictw9] {
        padding: 4px 10px;
        min-height: 40px;
        height: 40px;
    }

    .image-modal-title[b-4rzhsictw9] {
        font-size: 1rem;
    }

    .header-title-container[b-4rzhsictw9] {
        margin-right: 10px;
        max-width: 40%;
    }

    .header-info-container[b-4rzhsictw9] {
        margin: 0 10px;
    }

    .image-info-text[b-4rzhsictw9] {
        font-size: 0.8rem;
    }

    .header-close-container[b-4rzhsictw9] {
        margin-left: 10px;
    }

    .image-modal-close[b-4rzhsictw9] {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }

    .image-modal-body[b-4rzhsictw9] {
        padding: 2px;
    }
}

/* 响应式设计 - 超小屏幕 */
@media (max-width: 480px) {
    .image-modal-content[b-4rzhsictw9] {
        max-width: 99%;
        max-height: 99%;
        border-radius: 6px;
    }

    .image-modal-header[b-4rzhsictw9] {
        padding: 2px 6px;
        min-height: 36px;
        height: 36px;
    }

    .image-modal-title[b-4rzhsictw9] {
        font-size: 0.9rem;
    }

    .header-title-container[b-4rzhsictw9] {
        margin-right: 8px;
        max-width: 50%;
    }

    .header-info-container[b-4rzhsictw9] {
        margin: 0 8px;
    }

    .header-close-container[b-4rzhsictw9] {
        margin-left: 8px;
    }

    /* 小屏幕时隐藏图片信息 */
    .image-info-text[b-4rzhsictw9] {
        display: none;
    }

    .image-modal-close[b-4rzhsictw9] {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }

    .image-container[b-4rzhsictw9] {
        min-height: 150px;
    }
}

/* 横屏模式（移动设备） */
@media (max-height: 600px) and (orientation: landscape) {
    .image-modal-content[b-4rzhsictw9] {
        max-height: 98%;
        max-width: 98%;
    }

    .image-modal-header[b-4rzhsictw9] {
        min-height: 35px;
        height: 35px;
        padding: 2px 6px;
    }

    .image-modal-title[b-4rzhsictw9] {
        font-size: 0.85rem;
    }

    .header-title-container[b-4rzhsictw9] {
        margin-right: 10px;
        max-width: 30%;
    }

    .header-info-container[b-4rzhsictw9] {
        margin: 0 10px;
    }

    .image-info-text[b-4rzhsictw9] {
        font-size: 0.75rem;
    }

    .header-close-container[b-4rzhsictw9] {
        margin-left: 10px;
    }
}

/* 打印样式 */
@media print {
    .image-modal-overlay[b-4rzhsictw9] {
        position: static;
        background: white;
        display: block;
    }

    .image-modal-content[b-4rzhsictw9] {
        box-shadow: none;
        border: 1px solid #ddd;
        max-width: 100%;
        max-height: none;
        page-break-inside: avoid;
    }

    .image-modal-header[b-4rzhsictw9] {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .image-modal-close[b-4rzhsictw9] {
        display: none;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .image-modal-overlay[b-4rzhsictw9] {
        background-color: rgba(0, 0, 0, 0.95);
    }

    .image-modal-header[b-4rzhsictw9] {
        border-bottom: 2px solid white;
    }

    .modal-image[b-4rzhsictw9] {
        border: 1px solid #000;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .image-modal-overlay[b-4rzhsictw9],
    .image-modal-content[b-4rzhsictw9],
    .modal-image[b-4rzhsictw9],
    .image-modal-close[b-4rzhsictw9] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Shared/PathImageModal2.razor.rz.scp.css */
/* PathImageModal组件样式 - 图片预览模态框 */

/* 模态框遮罩层 */
.image-modal-overlay[b-u5o8rhnlox] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: image-fadeIn-b-u5o8rhnlox 0.3s ease;
    backdrop-filter: blur(5px);
}

/* 模态框内容容器 */
.image-modal-content[b-u5o8rhnlox] {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-width: 95%;
    max-height: 95%;
    animation: image-slideUp-b-u5o8rhnlox 0.4s ease;
    transition: all 0.3s ease;
}

/* 模态框头部 */
.image-modal-header[b-u5o8rhnlox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    min-height: 50px;
    height: 50px;
    overflow: hidden;
}

.image-modal-title[b-u5o8rhnlox] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 8px;
}

/* 图片信息文本 */
.image-info-text[b-u5o8rhnlox] {
    margin: 0;
    margin-right: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
    max-width: 40%;
}

/* 关闭按钮 */
.image-modal-close[b-u5o8rhnlox] {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
    margin: 0;
}

    .image-modal-close:hover[b-u5o8rhnlox] {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }

    .image-modal-close span[b-u5o8rhnlox] {
        display: block;
        margin-top: -2px;
    }

/* 模态框主体 */
.image-modal-body[b-u5o8rhnlox] {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 0;
}

/* 图片容器 */
.image-container[b-u5o8rhnlox] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa;
    min-height: 200px;
    padding: 0;
    margin: 0;
}

/* 图片样式 - 响应式自适应 */
.modal-image[b-u5o8rhnlox] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

    .modal-image:hover[b-u5o8rhnlox] {
        transform: scale(1.01);
    }

/* 动画效果 */
@keyframes image-fadeIn-b-u5o8rhnlox {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes image-slideUp-b-u5o8rhnlox {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes image-fadeOut-b-u5o8rhnlox {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* 响应式设计 - 大屏幕 */
@media (min-width: 1200px) {
    .image-modal-content[b-u5o8rhnlox] {
        max-width: 90%;
        max-height: 90%;
    }
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 992px) {
    .image-modal-content[b-u5o8rhnlox] {
        max-width: 95%;
        max-height: 95%;
    }

    .image-modal-header[b-u5o8rhnlox] {
        padding: 6px 12px;
        min-height: 45px;
        height: 45px;
    }

    .image-modal-title[b-u5o8rhnlox] {
        font-size: 1.1rem;
    }

    .image-info-text[b-u5o8rhnlox] {
        font-size: 0.85rem;
        max-width: 35%;
    }
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
    .image-modal-content[b-u5o8rhnlox] {
        max-width: 98%;
        max-height: 98%;
        border-radius: 8px;
    }

    .image-modal-header[b-u5o8rhnlox] {
        padding: 4px 8px;
        min-height: 40px;
        height: 40px;
    }

    .image-modal-title[b-u5o8rhnlox] {
        font-size: 1rem;
    }

    .image-info-text[b-u5o8rhnlox] {
        font-size: 0.8rem;
        max-width: 30%;
    }

    .image-modal-close[b-u5o8rhnlox] {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }

    .image-modal-body[b-u5o8rhnlox] {
        padding: 2px;
    }
}

/* 响应式设计 - 超小屏幕 */
@media (max-width: 480px) {
    .image-modal-content[b-u5o8rhnlox] {
        max-width: 99%;
        max-height: 99%;
        border-radius: 6px;
    }

    .image-modal-header[b-u5o8rhnlox] {
        padding: 2px 6px;
        min-height: 36px;
        height: 36px;
    }

    .image-modal-title[b-u5o8rhnlox] {
        font-size: 0.9rem;
    }

    /* 小屏幕时隐藏图片信息 */
    .image-info-text[b-u5o8rhnlox] {
        display: none;
    }

    .image-modal-close[b-u5o8rhnlox] {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }

    .image-container[b-u5o8rhnlox] {
        min-height: 150px;
    }
}

/* 横屏模式（移动设备） */
@media (max-height: 600px) and (orientation: landscape) {
    .image-modal-content[b-u5o8rhnlox] {
        max-height: 98%;
        max-width: 98%;
    }

    .image-modal-header[b-u5o8rhnlox] {
        min-height: 35px;
        height: 35px;
        padding: 2px 6px;
    }

    .image-modal-title[b-u5o8rhnlox] {
        font-size: 0.85rem;
    }

    .image-info-text[b-u5o8rhnlox] {
        font-size: 0.75rem;
    }
}

/* 打印样式 */
@media print {
    .image-modal-overlay[b-u5o8rhnlox] {
        position: static;
        background: white;
        display: block;
    }

    .image-modal-content[b-u5o8rhnlox] {
        box-shadow: none;
        border: 1px solid #ddd;
        max-width: 100%;
        max-height: none;
        page-break-inside: avoid;
    }

    .image-modal-header[b-u5o8rhnlox] {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .image-modal-close[b-u5o8rhnlox] {
        display: none;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .image-modal-overlay[b-u5o8rhnlox] {
        background-color: rgba(0, 0, 0, 0.95);
    }

    .image-modal-header[b-u5o8rhnlox] {
        border-bottom: 2px solid white;
    }

    .modal-image[b-u5o8rhnlox] {
        border: 1px solid #000;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .image-modal-overlay[b-u5o8rhnlox],
    .image-modal-content[b-u5o8rhnlox],
    .modal-image[b-u5o8rhnlox],
    .image-modal-close[b-u5o8rhnlox] {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SurveyAdmin.razor.rz.scp.css */
/* SurveyAdmin.css - 问卷管理系统样式 */

/* 容器样式 */
.survey-admin-container[b-eauweoh2ru] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.survey-admin-header[b-eauweoh2ru] {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    border-radius: 10px;
    color: white;
}

.survey-admin-title[b-eauweoh2ru] {
    margin: 0;
    font-size: 2rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.survey-admin-subtitle[b-eauweoh2ru] {
    margin: 10px 0 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* 筛选区域 */
.survey-admin-filters[b-eauweoh2ru] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 统计卡片 */
.survey-overview-cards[b-eauweoh2ru] {
    margin-bottom: 30px;
}

.survey-overview-card[b-eauweoh2ru] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    height: 100%;
    transition: transform 0.3s;
}

    .survey-overview-card:hover[b-eauweoh2ru] {
        transform: translateY(-5px);
    }

.survey-card-icon[b-eauweoh2ru] {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.survey-overview-card.total .survey-card-icon[b-eauweoh2ru] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.survey-overview-card.published .survey-card-icon[b-eauweoh2ru] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.survey-overview-card.answers .survey-card-icon[b-eauweoh2ru] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.survey-overview-card.users .survey-card-icon[b-eauweoh2ru] {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
}

.survey-card-content h3[b-eauweoh2ru] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.survey-card-content p[b-eauweoh2ru] {
    margin: 5px 0 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* 表格样式 */
.survey-list-table[b-eauweoh2ru] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.survey-table-header[b-eauweoh2ru] {
    padding: 20px;
    border-bottom: 2px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.survey-list-table .table[b-eauweoh2ru] {
    margin: 0;
}

.survey-list-table th[b-eauweoh2ru] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.survey-list-table td[b-eauweoh2ru] {
    vertical-align: middle;
}

.survey-title strong[b-eauweoh2ru] {
    color: #2c3e50;
    font-size: 1rem;
}

.survey-title small[b-eauweoh2ru] {
    font-size: 0.85rem;
    margin-top: 3px;
    display: block;
    line-height: 1.4;
}

/* 模态框样式 */
.modal-overlay[b-eauweoh2ru] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-dialog[b-eauweoh2ru] {
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.modal-content[b-eauweoh2ru] {
    border-radius: 10px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalSlideIn-b-eauweoh2ru 0.3s ease-out;
}

@keyframes modalSlideIn-b-eauweoh2ru {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-eauweoh2ru] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 20px;
}

.modal-title[b-eauweoh2ru] {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-body[b-eauweoh2ru] {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-footer[b-eauweoh2ru] {
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
}

/* 答案详情样式 */
.answer-detail-item[b-eauweoh2ru] {
    padding: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #f8f9fa;
}

    .answer-detail-item h6[b-eauweoh2ru] {
        color: #2c3e50;
        margin-bottom: 10px;
        font-weight: 600;
    }

.rating-display[b-eauweoh2ru] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .rating-display i[b-eauweoh2ru] {
        font-size: 1.2rem;
    }

.text-answer[b-eauweoh2ru] {
    background: white;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* 按钮组样式 */
.btn-group-sm .btn[b-eauweoh2ru] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* 加载状态 */
.loading-state[b-eauweoh2ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

    .loading-state i[b-eauweoh2ru] {
        font-size: 3rem;
        color: #3498db;
        margin-bottom: 20px;
    }

/* 响应式调整 */
@media (max-width: 768px) {
    .survey-admin-container[b-eauweoh2ru] {
        padding: 10px;
    }

    .survey-overview-cards .col-md-3[b-eauweoh2ru] {
        margin-bottom: 15px;
    }

    .survey-overview-card[b-eauweoh2ru] {
        padding: 15px;
    }

    .survey-table-header[b-eauweoh2ru] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .modal-dialog[b-eauweoh2ru] {
        margin: 10px;
    }

    .modal-body[b-eauweoh2ru] {
        padding: 15px;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireEdit.razor.rz.scp.css */
.svy-edit-container[b-p3ei12tgis] {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.svy-edit-header[b-p3ei12tgis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.svy-edit-title[b-p3ei12tgis] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

.svy-edit-actions[b-p3ei12tgis] {
    display: flex;
    gap: 10px;
}

.svy-edit-section[b-p3ei12tgis] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden;
}

.svy-section-header[b-p3ei12tgis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.svy-section-title[b-p3ei12tgis] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

.svy-section-content[b-p3ei12tgis] {
    padding: 25px;
}

/* 问题列表样式 */
.svy-questions-list[b-p3ei12tgis] {
    min-height: 200px;
}

.svy-question-item[b-p3ei12tgis] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    .svy-question-item:hover[b-p3ei12tgis] {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }

    .svy-question-item[draggable=true][b-p3ei12tgis] {
        cursor: move;
    }

.svy-question-header[b-p3ei12tgis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.svy-question-number[b-p3ei12tgis] {
    font-weight: 600;
    color: #495057;
    font-size: 16px;
}

.svy-question-actions[b-p3ei12tgis] {
    display: flex;
    gap: 5px;
}

    .svy-question-actions .btn-link[b-p3ei12tgis] {
        padding: 2px 8px;
        color: #6c757d;
    }

        .svy-question-actions .btn-link:hover[b-p3ei12tgis] {
            color: #0056b3;
        }

        .svy-question-actions .btn-link.text-danger:hover[b-p3ei12tgis] {
            color: #dc3545;
        }

.svy-question-content[b-p3ei12tgis] {
    padding: 20px;
}

/* 选项区域样式 */
.svy-options-section[b-p3ei12tgis] {
    margin-top: 25px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.svy-options-header[b-p3ei12tgis] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.svy-options-list[b-p3ei12tgis] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svy-option-item[b-p3ei12tgis] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
}

.svy-option-content .row[b-p3ei12tgis] {
    align-items: center;
}

.svy-option-handle[b-p3ei12tgis] {
    color: #adb5bd;
    cursor: move;
    display: inline-block;
    padding: 5px;
}

    .svy-option-handle:hover[b-p3ei12tgis] {
        color: #495057;
    }

/* 空状态样式 */
.svy-empty-questions[b-p3ei12tgis] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 2px dashed #dee2e6;
}

    .svy-empty-questions i[b-p3ei12tgis] {
        font-size: 48px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .svy-empty-questions p[b-p3ei12tgis] {
        margin: 0;
        font-size: 16px;
    }

/* 页脚样式 */
.svy-edit-footer[b-p3ei12tgis] {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-edit-header[b-p3ei12tgis] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-edit-actions[b-p3ei12tgis] {
        justify-content: flex-start;
    }

    .svy-section-header[b-p3ei12tgis] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireExport.razor.rz.scp.css */
.svy-export-container[b-bpjz57301n] {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.svy-export-header[b-bpjz57301n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.svy-export-title[b-bpjz57301n] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

/* 导出选项卡片 */
.svy-export-options[b-bpjz57301n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.svy-export-card[b-bpjz57301n] {
    display: flex;
    align-items: center;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .svy-export-card:hover[b-bpjz57301n] {
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        border-color: #007bff;
    }

.svy-export-icon[b-bpjz57301n] {
    font-size: 36px;
    color: #007bff;
    margin-right: 25px;
    width: 60px;
    text-align: center;
}

.svy-export-info[b-bpjz57301n] {
    flex: 1;
}

    .svy-export-info h4[b-bpjz57301n] {
        margin: 0 0 10px 0;
        color: #2c3e50;
        font-weight: 600;
    }

    .svy-export-info p[b-bpjz57301n] {
        margin: 0;
        color: #6c757d;
        font-size: 14px;
    }

.svy-export-card button[b-bpjz57301n] {
    min-width: 120px;
}

/* 导出设置 */
.svy-export-settings[b-bpjz57301n] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.svy-settings-title[b-bpjz57301n] {
    margin: 0 0 25px 0;
    color: #2c3e50;
    font-weight: 600;
    font-size: 18px;
}

.svy-settings-form .form-check[b-bpjz57301n] {
    margin-bottom: 10px;
}

/* 导出历史 */
.svy-export-history[b-bpjz57301n] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.svy-history-title[b-bpjz57301n] {
    margin: 0 0 25px 0;
    color: #2c3e50;
    font-weight: 600;
    font-size: 18px;
}

.svy-history-list[b-bpjz57301n] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.svy-history-item[b-bpjz57301n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .svy-history-item:hover[b-bpjz57301n] {
        background: white;
        border-color: #007bff;
    }

.svy-history-info[b-bpjz57301n] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svy-history-details[b-bpjz57301n] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.svy-history-filename[b-bpjz57301n] {
    font-weight: 500;
    color: #495057;
}

.svy-history-time[b-bpjz57301n] {
    font-size: 12px;
    color: #6c757d;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-export-card[b-bpjz57301n] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .svy-export-icon[b-bpjz57301n] {
        margin-right: 0;
    }

    .svy-history-item[b-bpjz57301n] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-history-info[b-bpjz57301n] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .svy-history-actions[b-bpjz57301n] {
        display: flex;
        justify-content: flex-end;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireFill.razor.rz.scp.css */
.svy-fill-container[b-mcuwzp3mdp] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    min-height: 100vh;
}

/* 加载状态 */
.svy-loading[b-mcuwzp3mdp] {
    text-align: center;
    padding: 100px 20px;
}

    .svy-loading .spinner-border[b-mcuwzp3mdp] {
        width: 3rem;
        height: 3rem;
        margin-bottom: 20px;
    }

    .svy-loading p[b-mcuwzp3mdp] {
        color: #6c757d;
        font-size: 18px;
    }

/* 错误状态 */
.svy-error-state[b-mcuwzp3mdp] {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.error-icon[b-mcuwzp3mdp] {
    font-size: 64px;
    color: #dc3545;
    margin-bottom: 20px;
}

.svy-error-state h3[b-mcuwzp3mdp] {
    color: #dc3545;
    margin-bottom: 15px;
}

.svy-error-state p[b-mcuwzp3mdp] {
    color: #6c757d;
    margin-bottom: 30px;
    font-size: 16px;
}

/* 问卷头部 */
.svy-fill-header[b-mcuwzp3mdp] {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    color: white;
    margin-bottom: 30px;
}

.svy-fill-title[b-mcuwzp3mdp] {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.svy-fill-description[b-mcuwzp3mdp] {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 填写人信息 */
.svy-respondent-info[b-mcuwzp3mdp] {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

    .svy-respondent-info h4[b-mcuwzp3mdp] {
        color: #495057;
        margin-bottom: 20px;
        font-weight: 600;
    }

/* 问题卡片 */
.svy-questions-container[b-mcuwzp3mdp] {
    margin-bottom: 40px;
}

.svy-question-card[b-mcuwzp3mdp] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

    .svy-question-card:hover[b-mcuwzp3mdp] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.svy-question-header[b-mcuwzp3mdp] {
    margin-bottom: 20px;
}

.svy-question-title[b-mcuwzp3mdp] {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.4;
}

.svy-question-hint[b-mcuwzp3mdp] {
    background: #e7f4ff;
    padding: 10px 15px;
    border-radius: 6px;
    color: #0066cc;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .svy-question-hint i[b-mcuwzp3mdp] {
        font-size: 16px;
    }

/* 选项列表 */
.svy-options-list[b-mcuwzp3mdp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svy-option-item[b-mcuwzp3mdp] {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .svy-option-item:hover[b-mcuwzp3mdp] {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }

    .svy-option-item input[type="radio"][b-mcuwzp3mdp],
    .svy-option-item input[type="checkbox"][b-mcuwzp3mdp] {
        margin-right: 15px;
        cursor: pointer;
    }

.svy-option-label[b-mcuwzp3mdp] {
    display: flex;
    align-items: center;
    flex: 1;
    cursor: pointer;
    gap: 15px;
}

.svy-option-image[b-mcuwzp3mdp] {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

    .svy-option-image img[b-mcuwzp3mdp] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.svy-option-text[b-mcuwzp3mdp] {
    font-size: 16px;
    color: #495057;
    flex: 1;
}

/* 打分题样式 */
.svy-rating-container[b-mcuwzp3mdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.svy-rating-stars[b-mcuwzp3mdp] {
    display: flex;
    gap: 10px;
}

.svy-star[b-mcuwzp3mdp] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 32px;
    color: #e4e5e9;
    transition: all 0.2s ease;
}

    .svy-star:hover[b-mcuwzp3mdp] {
        transform: scale(1.1);
        color: #ffc107;
    }

    .svy-star.active[b-mcuwzp3mdp] {
        color: #ffc107;
    }

    .svy-star:hover ~ .svy-star[b-mcuwzp3mdp] {
        color: #e4e5e9;
    }

.svy-rating-label[b-mcuwzp3mdp] {
    font-size: 18px;
    color: #495057;
    font-weight: 500;
}

/* 长度提示 */
.svy-length-hint[b-mcuwzp3mdp] {
    text-align: right;
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

/* 描述内容 */
.svy-description-content[b-mcuwzp3mdp] {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 6px;
    color: #6c757d;
    line-height: 1.6;
}

/* 错误消息 */
.svy-error-message[b-mcuwzp3mdp] {
    color: #dc3545;
    font-size: 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 提交区域 */
.svy-submit-section[b-mcuwzp3mdp] {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 25px;
    border-top: 2px solid #e9ecef;
    margin-top: 30px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

.svy-progress[b-mcuwzp3mdp] {
    background: #e9ecef;
    border-radius: 10px;
    height: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.svy-progress-bar[b-mcuwzp3mdp] {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.svy-progress-text[b-mcuwzp3mdp] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.svy-submit-actions[b-mcuwzp3mdp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 分享区域 */
.svy-share-section[b-mcuwzp3mdp] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

/* 成功模态框 */
.svy-modal-overlay[b-mcuwzp3mdp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-mcuwzp3mdp 0.3s ease;
}

.svy-modal-content[b-mcuwzp3mdp] {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: slideIn-b-mcuwzp3mdp 0.3s ease;
}

.svy-modal-icon[b-mcuwzp3mdp] {
    font-size: 64px;
    margin-bottom: 20px;
}

    .svy-modal-icon.success[b-mcuwzp3mdp] {
        color: #28a745;
    }

.svy-modal-content h3[b-mcuwzp3mdp] {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 24px;
}

.svy-modal-content p[b-mcuwzp3mdp] {
    color: #6c757d;
    margin-bottom: 30px;
    font-size: 16px;
}

.svy-modal-actions[b-mcuwzp3mdp] {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* 动画 */
@keyframes fadeIn-b-mcuwzp3mdp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-mcuwzp3mdp {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-fill-container[b-mcuwzp3mdp] {
        padding: 15px;
    }

    .svy-fill-title[b-mcuwzp3mdp] {
        font-size: 22px;
    }

    .svy-respondent-info[b-mcuwzp3mdp],
    .svy-question-card[b-mcuwzp3mdp] {
        padding: 20px;
    }

    .svy-submit-actions[b-mcuwzp3mdp] {
        flex-direction: column;
        gap: 15px;
    }

        .svy-submit-actions button[b-mcuwzp3mdp] {
            width: 100%;
        }

    .svy-share-section[b-mcuwzp3mdp] {
        flex-direction: column;
    }

    .svy-modal-content[b-mcuwzp3mdp] {
        padding: 30px 20px;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireList.razor.rz.scp.css */
/* 列表页面样式 */
.svy-list-container[b-u9dwa24bla] {
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.svy-list-header[b-u9dwa24bla] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.svy-header-left h1[b-u9dwa24bla] {
    margin: 0;
    color: #333;
}

.svy-list-subtitle[b-u9dwa24bla] {
    color: #6c757d;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.svy-filter-section[b-u9dwa24bla] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.svy-questionnaire-grid[b-u9dwa24bla] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.svy-questionnaire-card[b-u9dwa24bla] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .svy-questionnaire-card:hover[b-u9dwa24bla] {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

.svy-card-header[b-u9dwa24bla] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 0.75rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.svy-card-title[b-u9dwa24bla] {
    flex: 1;
}

    .svy-card-title h5[b-u9dwa24bla] {
        margin: 0 0 0.5rem 0;
        font-weight: 600;
        color: #212529;
    }

.svy-card-badges[b-u9dwa24bla] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .svy-card-badges .badge[b-u9dwa24bla] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

.svy-card-actions .dropdown-toggle[b-u9dwa24bla] {
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
}

.svy-card-content[b-u9dwa24bla] {
    flex: 1;
    padding: 1.25rem;
}

.svy-card-description[b-u9dwa24bla] {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svy-card-stats[b-u9dwa24bla] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.svy-stat-item[b-u9dwa24bla] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #495057;
}

    .svy-stat-item i[b-u9dwa24bla] {
        color: #6c757d;
    }

.svy-card-expiry[b-u9dwa24bla] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #dc3545;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.svy-card-footer[b-u9dwa24bla] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.svy-footer-left[b-u9dwa24bla] {
    display: flex;
    gap: 0.5rem;
}

.svy-footer-right[b-u9dwa24bla] {
    font-size: 0.875rem;
    color: #6c757d;
}

/* 空状态 */
.svy-empty-state[b-u9dwa24bla] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-u9dwa24bla] {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.svy-empty-state h3[b-u9dwa24bla] {
    color: #495057;
    margin-bottom: 1rem;
}

.svy-empty-state p[b-u9dwa24bla] {
    color: #6c757d;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* 加载状态 */
.svy-loading[b-u9dwa24bla] {
    text-align: center;
    padding: 4rem 2rem;
}

    .svy-loading p[b-u9dwa24bla] {
        margin-top: 1rem;
        color: #6c757d;
    }

/* 快捷创建 */
.svy-quick-create[b-u9dwa24bla] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 2rem;
}

.svy-quick-title[b-u9dwa24bla] {
    margin-bottom: 1rem;
    color: #495057;
}

.svy-quick-buttons[b-u9dwa24bla] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* 分页 */
.svy-pagination[b-u9dwa24bla] {
    margin-top: 2rem;
}

.svy-pagination-info[b-u9dwa24bla] {
    text-align: center;
    margin-top: 1rem;
    color: #6c757d;
    font-size: 0.875rem;
}

/* 模态框 */
.svy-modal-overlay[b-u9dwa24bla] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.svy-modal-content[b-u9dwa24bla] {
    background: white;
    border-radius: 0.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalFadeIn-b-u9dwa24bla 0.3s;
}

@keyframes modalFadeIn-b-u9dwa24bla {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.svy-modal-header[b-u9dwa24bla] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svy-modal-body[b-u9dwa24bla] {
    padding: 1.5rem;
}

.svy-modal-icon[b-u9dwa24bla] {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

    .svy-modal-icon.danger[b-u9dwa24bla] {
        color: #dc3545;
    }

.svy-modal-footer[b-u9dwa24bla] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-list-header[b-u9dwa24bla] {
        flex-direction: column;
        gap: 1rem;
    }

    .svy-questionnaire-grid[b-u9dwa24bla] {
        grid-template-columns: 1fr;
    }

    .svy-quick-buttons[b-u9dwa24bla] {
        flex-direction: column;
    }

    .svy-card-footer[b-u9dwa24bla] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .svy-footer-left[b-u9dwa24bla] {
        flex-wrap: wrap;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnairePreview.razor.rz.scp.css */
.svy-preview-container[b-ee6r08lrzh] {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* 预览头部 */
.svy-preview-header[b-ee6r08lrzh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.svy-header-left[b-ee6r08lrzh] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svy-preview-title[b-ee6r08lrzh] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

.svy-header-right[b-ee6r08lrzh] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svy-preview-meta[b-ee6r08lrzh] {
    display: flex;
    gap: 15px;
    color: #6c757d;
}

.svy-meta-item[b-ee6r08lrzh] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

/* 预览内容 */
.svy-preview-content[b-ee6r08lrzh] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* 问卷信息卡片 */
.svy-preview-info[b-ee6r08lrzh] {
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.svy-preview-card[b-ee6r08lrzh] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.svy-questionnaire-preview-title[b-ee6r08lrzh] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.svy-questionnaire-preview-description[b-ee6r08lrzh] {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 25px;
}

.svy-questionnaire-stats[b-ee6r08lrzh] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.svy-stat[b-ee6r08lrzh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
}

/* 问题预览 */
.svy-questions-preview[b-ee6r08lrzh] {
    padding: 40px;
}

.svy-section-title[b-ee6r08lrzh] {
    font-size: 18px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.svy-question-preview[b-ee6r08lrzh] {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #e9ecef;
}

.svy-question-header[b-ee6r08lrzh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.svy-question-title[b-ee6r08lrzh] {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.svy-required-mark[b-ee6r08lrzh] {
    color: #dc3545;
    margin-left: 4px;
}

.svy-question-type[b-ee6r08lrzh] {
    margin-left: 15px;
}

.svy-question-description[b-ee6r08lrzh] {
    background: #e7f4ff;
    padding: 12px 15px;
    border-radius: 6px;
    color: #0066cc;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 选项预览 */
.svy-options-preview[b-ee6r08lrzh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svy-option-preview[b-ee6r08lrzh] {
    display: flex;
    align-items: center;
    padding: 15px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    gap: 15px;
}

    .svy-option-preview input[type="radio"][b-ee6r08lrzh],
    .svy-option-preview input[type="checkbox"][b-ee6r08lrzh] {
        margin: 0;
        cursor: default;
    }

    .svy-option-preview label[b-ee6r08lrzh] {
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 1;
        cursor: default;
    }

.svy-option-image-preview[b-ee6r08lrzh] {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    flex-shrink: 0;
}

    .svy-option-image-preview img[b-ee6r08lrzh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 打分题预览 */
.svy-rating-preview[b-ee6r08lrzh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.svy-rating-stars-preview[b-ee6r08lrzh] {
    display: flex;
    gap: 10px;
}

.svy-star-preview[b-ee6r08lrzh] {
    background: none;
    border: none;
    padding: 0;
    font-size: 32px;
    color: #e4e5e9;
    cursor: default;
}

.svy-rating-label-preview[b-ee6r08lrzh] {
    color: #6c757d;
    font-size: 14px;
}

/* 文本输入预览 */
.svy-text-input-preview .form-control[b-ee6r08lrzh],
.svy-textarea-preview .form-control[b-ee6r08lrzh] {
    background: white;
    border: 1px solid #dee2e6;
    cursor: default;
}

.svy-maxlength-hint[b-ee6r08lrzh] {
    text-align: right;
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

/* 描述预览 */
.svy-description-preview[b-ee6r08lrzh] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    color: #6c757d;
    text-align: center;
    border: 1px dashed #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 预览操作 */
.svy-preview-actions[b-ee6r08lrzh] {
    padding: 30px 40px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.svy-action-buttons[b-ee6r08lrzh] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.svy-preview-note[b-ee6r08lrzh] {
    text-align: center;
    color: #6c757d;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 分享链接 */
.svy-share-link[b-ee6r08lrzh] {
    padding: 30px 40px;
    border-top: 1px solid #e9ecef;
}

    .svy-share-link h4[b-ee6r08lrzh] {
        margin: 0 0 15px 0;
        color: #495057;
        font-weight: 600;
        font-size: 16px;
    }

.svy-link-container[b-ee6r08lrzh] {
    display: flex;
    gap: 10px;
}

    .svy-link-container .form-control[b-ee6r08lrzh] {
        font-family: 'Courier New', monospace;
        font-size: 14px;
    }

/* 加载状态 */
.svy-loading[b-ee6r08lrzh] {
    text-align: center;
    padding: 100px 20px;
    background: white;
    border-radius: 12px;
}

    .svy-loading .spinner-border[b-ee6r08lrzh] {
        width: 3rem;
        height: 3rem;
        margin-bottom: 20px;
    }

    .svy-loading p[b-ee6r08lrzh] {
        color: #6c757d;
        font-size: 18px;
    }

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-preview-header[b-ee6r08lrzh] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-header-left[b-ee6r08lrzh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .svy-header-right[b-ee6r08lrzh] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-preview-meta[b-ee6r08lrzh] {
        justify-content: center;
    }

    .svy-question-header[b-ee6r08lrzh] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .svy-question-type[b-ee6r08lrzh] {
        margin-left: 0;
    }

    .svy-action-buttons[b-ee6r08lrzh] {
        flex-direction: column;
    }

    .svy-link-container[b-ee6r08lrzh] {
        flex-direction: column;
    }

    .svy-preview-info[b-ee6r08lrzh],
    .svy-questions-preview[b-ee6r08lrzh],
    .svy-preview-actions[b-ee6r08lrzh],
    .svy-share-link[b-ee6r08lrzh] {
        padding: 25px;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireStats.razor.rz.scp.css */
.svy-stats-container[b-xm88ugqwor] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 页面头部 */
.svy-stats-header[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.svy-header-left[b-xm88ugqwor] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.svy-stats-title[b-xm88ugqwor] {
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
}

.svy-header-right[b-xm88ugqwor] {
    display: flex;
    gap: 15px;
}

/* 总览卡片 */
.svy-overview-cards[b-xm88ugqwor] {
    margin-bottom: 30px;
}

.svy-stat-card[b-xm88ugqwor] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .svy-stat-card:hover[b-xm88ugqwor] {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

    .svy-stat-card.total[b-xm88ugqwor] {
        border-left: 4px solid #007bff;
    }

    .svy-stat-card.completion[b-xm88ugqwor] {
        border-left: 4px solid #28a745;
    }

    .svy-stat-card.period[b-xm88ugqwor] {
        border-left: 4px solid #fd7e14;
    }

    .svy-stat-card.time[b-xm88ugqwor] {
        border-left: 4px solid #6f42c1;
    }

.svy-stat-icon[b-xm88ugqwor] {
    font-size: 36px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.svy-stat-card.total .svy-stat-icon[b-xm88ugqwor] {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.svy-stat-card.completion .svy-stat-icon[b-xm88ugqwor] {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.svy-stat-card.period .svy-stat-icon[b-xm88ugqwor] {
    background-color: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
}

.svy-stat-card.time .svy-stat-icon[b-xm88ugqwor] {
    background-color: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.svy-stat-content h3[b-xm88ugqwor] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.svy-stat-content p[b-xm88ugqwor] {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 图表区域 */
.svy-chart-section[b-xm88ugqwor] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.svy-section-header[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.svy-section-title[b-xm88ugqwor] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

.svy-chart-container[b-xm88ugqwor] {
    height: 300px;
    position: relative;
}

/* 问题统计卡片 */
.svy-questions-stats[b-xm88ugqwor] {
    margin-bottom: 30px;
}

.svy-question-stats-card[b-xm88ugqwor] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
    transition: box-shadow 0.3s ease;
}

    .svy-question-stats-card:hover[b-xm88ugqwor] {
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }

.svy-question-info h4[b-xm88ugqwor] {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.svy-question-meta[b-xm88ugqwor] {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.svy-answer-count[b-xm88ugqwor] {
    color: #6c757d;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.svy-required-badge[b-xm88ugqwor] {
    background-color: #fff3cd;
    color: #856404;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 选项统计 */
.svy-options-stats[b-xm88ugqwor] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svy-option-stat-item[b-xm88ugqwor] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.svy-option-header[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.svy-option-content[b-xm88ugqwor] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.svy-option-image[b-xm88ugqwor] {
    width: 60px;
    height: 45px;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    flex-shrink: 0;
}

    .svy-option-image img[b-xm88ugqwor] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.svy-option-text[b-xm88ugqwor] {
    font-weight: 500;
    color: #495057;
    font-size: 16px;
}

.svy-option-percentage[b-xm88ugqwor] {
    font-size: 18px;
    font-weight: 700;
    color: #007bff;
    min-width: 60px;
    text-align: right;
}

.svy-progress-bar-container[b-xm88ugqwor] {
    background: #e9ecef;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.svy-progress-bar[b-xm88ugqwor] {
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.svy-option-count[b-xm88ugqwor] {
    text-align: right;
    color: #6c757d;
    font-size: 14px;
}

/* 打分统计 */
.svy-rating-stats[b-xm88ugqwor] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.svy-rating-summary[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.svy-rating-score[b-xm88ugqwor] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.svy-average[b-xm88ugqwor] {
    font-size: 36px;
    font-weight: 700;
    color: #fd7e14;
}

.svy-max[b-xm88ugqwor] {
    font-size: 18px;
    color: #6c757d;
}

.svy-rating-details[b-xm88ugqwor] {
    display: flex;
    gap: 20px;
}

.svy-rating-range[b-xm88ugqwor] {
    color: #6c757d;
    font-size: 14px;
}

.svy-rating-distribution[b-xm88ugqwor] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.svy-rating-bar[b-xm88ugqwor] {
    display: grid;
    grid-template-columns: 60px 1fr 120px;
    gap: 15px;
    align-items: center;
}

.svy-rating-label[b-xm88ugqwor] {
    color: #495057;
    font-weight: 500;
    text-align: right;
}

.svy-rating-progress[b-xm88ugqwor] {
    background: #e9ecef;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.svy-rating-progress-bar[b-xm88ugqwor] {
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.svy-rating-count[b-xm88ugqwor] {
    color: #6c757d;
    font-size: 14px;
    text-align: right;
}

/* 文本统计 */
.svy-text-stats[b-xm88ugqwor] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svy-text-summary[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    background: #e7f4ff;
    padding: 15px 20px;
    border-radius: 8px;
}

.svy-text-count[b-xm88ugqwor],
.svy-unique-count[b-xm88ugqwor] {
    color: #0066cc;
    font-weight: 500;
}

.svy-text-samples[b-xm88ugqwor] {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
}

    .svy-text-samples h5[b-xm88ugqwor] {
        margin-bottom: 15px;
        color: #495057;
        font-weight: 600;
    }

.svy-text-list[b-xm88ugqwor] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.svy-text-item[b-xm88ugqwor] {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.svy-text-content[b-xm88ugqwor] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 10px;
}

.svy-text-meta[b-xm88ugqwor] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6c757d;
}

/* 描述性内容 */
.svy-description-note[b-xm88ugqwor] {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
}

/* 答卷列表 */
.svy-answers-section[b-xm88ugqwor] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.svy-answers-table[b-xm88ugqwor] {
    overflow-x: auto;
}

    .svy-answers-table .table[b-xm88ugqwor] {
        margin-bottom: 0;
    }

    .svy-answers-table th[b-xm88ugqwor] {
        font-weight: 600;
        color: #495057;
        background-color: #f8f9fa;
        white-space: nowrap;
    }

    .svy-answers-table td[b-xm88ugqwor] {
        vertical-align: middle;
    }

.svy-ip[b-xm88ugqwor] {
    font-size: 12px;
    background-color: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

/* 分页 */
.svy-pagination[b-xm88ugqwor] {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

/* 加载状态 */
.svy-loading[b-xm88ugqwor] {
    text-align: center;
    padding: 100px 20px;
}

    .svy-loading .spinner-border[b-xm88ugqwor] {
        width: 3rem;
        height: 3rem;
        margin-bottom: 20px;
    }

    .svy-loading p[b-xm88ugqwor] {
        color: #6c757d;
        font-size: 18px;
    }

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-stats-header[b-xm88ugqwor] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-header-left[b-xm88ugqwor] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .svy-header-right[b-xm88ugqwor] {
        justify-content: flex-start;
    }

    .svy-overview-cards .col-md-3[b-xm88ugqwor] {
        margin-bottom: 20px;
    }

    .svy-section-header[b-xm88ugqwor] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .svy-question-meta[b-xm88ugqwor] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .svy-rating-summary[b-xm88ugqwor] {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .svy-text-summary[b-xm88ugqwor] {
        flex-direction: column;
        gap: 10px;
    }

    .svy-answers-table[b-xm88ugqwor] {
        font-size: 14px;
    }
}


/* 在已有的 svy-chart-container 样式后添加以下内容 */

.svy-chart-container[b-xm88ugqwor] {
    height: 300px;
    position: relative;
    min-height: 200px; /* 确保有最小高度 */
}

/* 无图表数据时的显示 */
.svy-no-chart-data[b-xm88ugqwor] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 6px;
}

    .svy-no-chart-data i[b-xm88ugqwor] {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }

    .svy-no-chart-data p[b-xm88ugqwor] {
        margin: 0;
        font-size: 16px;
    }

/* 确保canvas元素充满容器 */
.svy-chart-container canvas[b-xm88ugqwor] {
    width: 100% !important;
    height: 100% !important;
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/SvyQuestionnaireTemplate.razor.rz.scp.css */
.svy-templates-container[b-femh23p98r] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.svy-templates-header[b-femh23p98r] {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 15px;
    color: white;
}

.svy-templates-title[b-femh23p98r] {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.svy-templates-description[b-femh23p98r] {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* 模板网格 */
.svy-templates-grid[b-femh23p98r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.svy-template-card[b-femh23p98r] {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .svy-template-card:hover[b-femh23p98r] {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .svy-template-card.create-new[b-femh23p98r] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
    }

.svy-template-icon[b-femh23p98r] {
    font-size: 48px;
    margin-bottom: 20px;
    color: #007bff;
}

.svy-template-card.create-new .svy-template-icon[b-femh23p98r] {
    color: white;
}

.svy-template-title[b-femh23p98r] {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
}

.svy-template-card.create-new .svy-template-title[b-femh23p98r] {
    color: white;
}

.svy-template-desc[b-femh23p98r] {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
}

.svy-template-card.create-new .svy-template-desc[b-femh23p98r] {
    color: rgba(255,255,255,0.9);
}

.svy-template-stats[b-femh23p98r] {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    color: #6c757d;
}

.svy-stat-item[b-femh23p98r] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.svy-template-card.create-new .svy-stat-item[b-femh23p98r] {
    color: rgba(255,255,255,0.9);
}

.svy-template-actions[b-femh23p98r] {
    margin-top: auto;
}

/* 已保存模板 */
.svy-saved-templates[b-femh23p98r] {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.svy-section-title[b-femh23p98r] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #2c3e50;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.svy-templates-list[b-femh23p98r] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svy-template-item[b-femh23p98r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .svy-template-item:hover[b-femh23p98r] {
        background: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-color: #007bff;
    }

.svy-template-item-info[b-femh23p98r] {
    flex: 1;
}

    .svy-template-item-info h4[b-femh23p98r] {
        margin: 0 0 10px 0;
        color: #2c3e50;
        font-weight: 600;
    }

    .svy-template-item-info p[b-femh23p98r] {
        margin: 0 0 15px 0;
        color: #6c757d;
    }

.svy-template-meta[b-femh23p98r] {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #adb5bd;
}

.svy-template-item-actions[b-femh23p98r] {
    display: flex;
    gap: 10px;
}

/* 空状态 */
.svy-empty-templates[b-femh23p98r] {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

    .svy-empty-templates i[b-femh23p98r] {
        font-size: 48px;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .svy-empty-templates p[b-femh23p98r] {
        margin-bottom: 20px;
        font-size: 16px;
    }

/* 响应式调整 */
@media (max-width: 768px) {
    .svy-templates-grid[b-femh23p98r] {
        grid-template-columns: 1fr;
    }

    .svy-template-item[b-femh23p98r] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .svy-template-item-actions[b-femh23p98r] {
        justify-content: flex-start;
    }
}
/* _content/LEAFBlazorApp25/Components/Survey/Pages/TestSurveyNavigation.razor.rz.scp.css */
.test-card[b-3x3nooyc6v] {
    border: 2px dashed #007bff;
    border-radius: 15px;
    margin-bottom: 20px;
}

.test-button[b-3x3nooyc6v] {
    margin: 5px;
    min-width: 200px;
    display: block;
    width: 100%;
}
/* _content/LEAFBlazorApp25/Components/Survey/Share/SvyToast.razor.rz.scp.css */
.svy-toast-container[b-8ibcqisns0] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.svy-toast[b-8ibcqisns0] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    opacity: 0;
}

    .svy-toast.show[b-8ibcqisns0] {
        transform: translateX(0);
        opacity: 1;
    }

.svy-toast-header[b-8ibcqisns0] {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.svy-toast-success .svy-toast-header[b-8ibcqisns0] {
    background-color: #d4edda;
    color: #155724;
}

.svy-toast-error .svy-toast-header[b-8ibcqisns0] {
    background-color: #f8d7da;
    color: #721c24;
}

.svy-toast-warning .svy-toast-header[b-8ibcqisns0] {
    background-color: #fff3cd;
    color: #856404;
}

.svy-toast-info .svy-toast-header[b-8ibcqisns0] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.svy-toast-title[b-8ibcqisns0] {
    font-size: 14px;
    font-weight: 600;
}

.svy-toast-close[b-8ibcqisns0] {
    background: none;
    border: none;
    font-size: 20px;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

    .svy-toast-close:hover[b-8ibcqisns0] {
        opacity: 1;
    }

.svy-toast-body[b-8ibcqisns0] {
    padding: 15px;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartConsult.razor.rz.scp.css */
/* === PartConsult组件专用样式 - 使用partconsult-前缀 === */
/* 咨询服务容器 */
.partconsult-sovereign-consulting[b-e6k610ybmc] {
    position: relative;
    background: linear-gradient(135deg, #1a237e, #283593, #3949ab, #5c6bc0);
    padding: 1.0rem 0 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 420px; /* 进一步减小最小高度 */
    display: flex;
    align-items: center;
}

/* 科技感背景层 - 类似PartBottom的设计 */
.partconsult-cta-bg[b-e6k610ybmc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%), url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M0,100 Q50,80 100,100 T200,100 L200,200 L0,200 Z" fill="rgba(255,255,255,0.05)"/><path d="M0,150 Q50,130 100,150 T200,150 L200,200 L0,200 Z" fill="rgba(255,255,255,0.03)"/></svg>') repeat center/cover;
    z-index: 1;
    pointer-events: none;
}

.partconsult-container[b-e6k610ybmc] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 标题区域 */
.partconsult-section-title[b-e6k610ybmc] {
    font-size: 2.0rem;
    font-weight: 800;
    margin-bottom: 0.4rem; /* 进一步减小下边距 */
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.partconsult-title-icon[b-e6k610ybmc] {
    color: #ffd700;
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.partconsult-section-subtitle[b-e6k610ybmc] {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem; /* 进一步减小下边距 */
    font-size: 1.2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 服务网格布局 */
.partconsult-service-grid[b-e6k610ybmc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.6rem; /* 进一步减小网格间距 */
    margin-top: 1.8rem; /* 进一步减小上边距 */
    box-sizing: border-box;
}

/* 服务卡片 */
.partconsult-service-card[b-e6k610ybmc] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px; /* 减小圆角 */
    padding: 0;
    position: relative;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    backdrop-filter: blur(5px);
}

    .partconsult-service-card:hover[b-e6k610ybmc] {
        transform: translateY(-8px) scale(1.012);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* 卡片顶部边框 - 上括号样式，增强科技感 */
.partconsult-card-top-border[b-e6k610ybmc] {
    height: 5px; /* 减小高度 */
    background: linear-gradient(90deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white), var(--partconsult-card-color));
    border-radius: 16px 16px 0 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .partconsult-card-top-border[b-e6k610ybmc]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: partconsult-shimmer-b-e6k610ybmc 3s infinite;
    }

@keyframes partconsult-shimmer-b-e6k610ybmc {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* 卡片头部 */
.partconsult-card-header[b-e6k610ybmc] {
    padding: 1.2rem 1.5rem 0.5rem 1.5rem; /* 进一步减小内边距 */
    display: flex;
    align-items: flex-start;
    gap: 0.9rem; /* 进一步减小间距 */
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
}

/* 卡片图标 - 调整为更小 */
.partconsult-card-icon[b-e6k610ybmc] {
    width: 48px; /* 进一步减小大小 */
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white));
    border-radius: 12px; /* 减小圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem; /* 减小字体 */
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.partconsult-service-card:hover .partconsult-card-icon[b-e6k610ybmc] {
    transform: scale(1.06) rotate(5deg);
}

.partconsult-card-title-wrapper[b-e6k610ybmc] {
    flex: 1;
    min-width: 0;
}

    .partconsult-card-title-wrapper h3[b-e6k610ybmc] {
        color: #1a237e;
        font-size: 1.45rem; /* 稍微减小字体 */
        margin-bottom: 0.2rem; /* 进一步减小下边距 */
        line-height: 1.3;
        font-weight: 800;
        background: linear-gradient(135deg, #1a237e, #3949ab);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.partconsult-card-tagline[b-e6k610ybmc] {
    color: var(--partconsult-card-color);
    font-weight: 800;
    font-size: 0.95rem; /* 减小字体 */
    line-height: 1.2;
    letter-spacing: 0.4px;
    margin-top: -0.1rem; /* 微调位置，使更紧凑 */
}

/* 卡片内容 */
.partconsult-card-content[b-e6k610ybmc] {
    padding: 0.2rem 1.5rem 0.5rem 1.5rem; /* 进一步减小内边距 */
    flex-grow: 1;
    box-sizing: border-box;
    background: white;
}

/* 价值列表 */
.partconsult-value-list[b-e6k610ybmc] {
    margin: 0.2rem 0; /* 进一步减小外边距 */
}

/* 价值项样式 - 已移除图标 */
.partconsult-value-item[b-e6k610ybmc] {
    display: block; /* 改为块级布局，不再需要flex */
    margin-bottom: 1rem; /* 减小下边距 */
    padding: 0.5rem; /* 减小内边距 */
    border-radius: 8px;
    transition: background-color 0.3s;
}

    .partconsult-value-item:hover[b-e6k610ybmc] {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .partconsult-value-item:last-child[b-e6k610ybmc] {
        margin-bottom: 0;
    }

.partconsult-value-content[b-e6k610ybmc] {
    width: 100%; /* 占据全部宽度 */
}

    .partconsult-value-content h4[b-e6k610ybmc] {
        color: #1a237e;
        font-size: 1.1rem; /* 稍微减小字体 */
        margin-bottom: 0.3rem; /* 减小下边距 */
        font-weight: 700;
        line-height: 1.3;
    }

    .partconsult-value-content p[b-e6k610ybmc] {
        color: #4a5568;
        font-size: 0.95rem;
        line-height: 1.5; /* 保持行高不变 */
        margin: 0;
        padding: 0;
    }

/* 卡片底部 */
.partconsult-card-footer[b-e6k610ybmc] {
    padding: 0.9rem 1.5rem; /* 进一步减小内边距 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 16px 16px;
    box-sizing: border-box;
    margin-top: 0;
}

.partconsult-service-tag[b-e6k610ybmc] {
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 80%, white));
    color: white;
    padding: 0.25rem 0.8rem; /* 减小内边距 */
    border-radius: 20px;
    font-size: 0.8rem; /* 减小字体 */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.partconsult-cta[b-e6k610ybmc] {
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white));
    color: white;
    padding: 0.45rem 1.2rem; /* 减小内边距 */
    border-radius: 25px;
    font-weight: 800;
    font-size: 0.9rem; /* 减小字体 */
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    border: none;
    outline: none;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

    .partconsult-cta:hover[b-e6k610ybmc] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--partconsult-card-color) 90%, black), color-mix(in srgb, var(--partconsult-card-color) 70%, black));
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
    }

    .partconsult-cta[b-e6k610ybmc]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(30deg);
        transition: all 0.6s;
    }

    .partconsult-cta:hover[b-e6k610ybmc]::after {
        left: 100%;
    }

/* 响应式设计 */
@media (max-width: 1200px) {
    .partconsult-service-grid[b-e6k610ybmc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .partconsult-sovereign-consulting[b-e6k610ybmc] {
        padding: 1.6rem 0 1.8rem 0; /* 平板设备减小内边距 */
    }

    .partconsult-section-title[b-e6k610ybmc] {
        font-size: 1.9rem; /* 平板设备减小字体 */
        margin-bottom: 0.3rem;
    }

    .partconsult-service-grid[b-e6k610ybmc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.3rem; /* 平板设备减小间距 */
        margin-top: 1.5rem;
    }

    .partconsult-card-icon[b-e6k610ybmc] {
        width: 44px; /* 平板设备调整大小 */
        height: 44px;
        min-width: 44px;
        font-size: 1.2rem;
    }

    .partconsult-card-title-wrapper h3[b-e6k610ybmc] {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .partconsult-section-title[b-e6k610ybmc] {
        font-size: 1.7rem; /* 手机设备减小字体 */
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .partconsult-section-subtitle[b-e6k610ybmc] {
        font-size: 1.1rem;
        padding: 0 1rem;
        margin-bottom: 1.6rem; /* 减小下边距 */
    }

    .partconsult-service-grid[b-e6k610ybmc] {
        grid-template-columns: 1fr;
        gap: 1.3rem;
        padding: 0 1rem;
        margin-top: 1.3rem; /* 减小上边距 */
    }

    .partconsult-card-header[b-e6k610ybmc] {
        padding: 1rem 1.2rem 0.6rem; /* 减小内边距 */
    }

    .partconsult-card-icon[b-e6k610ybmc] {
        width: 40px; /* 手机设备减小尺寸 */
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
    }

    .partconsult-card-title-wrapper h3[b-e6k610ybmc] {
        font-size: 1.25rem; /* 减小字体 */
        margin-bottom: 0.15rem; /* 减小下边距 */
    }

    .partconsult-card-content[b-e6k610ybmc] {
        padding: 0.1rem 1.2rem 0.8rem 1.2rem; /* 减小内边距 */
    }

    .partconsult-value-item[b-e6k610ybmc] {
        margin-bottom: 0.9rem; /* 减小下边距 */
        padding: 0.4rem; /* 减小内边距 */
    }

    .partconsult-value-content h4[b-e6k610ybmc] {
        font-size: 1.05rem; /* 减小字体 */
    }

    .partconsult-value-content p[b-e6k610ybmc] {
        font-size: 0.9rem; /* 减小字体 */
    }

    .partconsult-card-footer[b-e6k610ybmc] {
        padding: 0.8rem 1.2rem; /* 减小内边距 */
    }
}

@media (max-width: 480px) {
    .partconsult-sovereign-consulting[b-e6k610ybmc] {
        padding: 1.3rem 0 1.5rem 0; /* 手机设备进一步减小内边距 */
    }

    .partconsult-section-title[b-e6k610ybmc] {
        font-size: 1.5rem; /* 进一步减小字体 */
    }

    .partconsult-service-grid[b-e6k610ybmc] {
        padding: 0;
    }

    .partconsult-card-header[b-e6k610ybmc] {
        padding: 0.9rem 1.1rem 0.5rem; /* 进一步减小内边距 */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem; /* 减小间距 */
    }

    .partconsult-card-icon[b-e6k610ybmc] {
        width: 36px; /* 进一步减小尺寸 */
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
    }

    .partconsult-card-title-wrapper h3[b-e6k610ybmc] {
        font-size: 1.15rem; /* 进一步减小字体 */
    }

    .partconsult-card-content[b-e6k610ybmc] {
        padding: 0.1rem 1.1rem 0.7rem 1.1rem; /* 进一步减小内边距 */
    }

    .partconsult-value-item[b-e6k610ybmc] {
        margin-bottom: 0.8rem; /* 减小下边距 */
        padding: 0.3rem; /* 减小内边距 */
    }

    .partconsult-card-footer[b-e6k610ybmc] {
        flex-direction: column;
        gap: 0.7rem; /* 减小间距 */
        align-items: stretch;
        text-align: center;
        padding: 0.7rem 1.1rem; /* 进一步减小内边距 */
    }

    .partconsult-cta[b-e6k610ybmc] {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .partconsult-section-title[b-e6k610ybmc] {
        font-size: 1.35rem; /* 超小设备进一步减小字体 */
    }

    .partconsult-container[b-e6k610ybmc] {
        padding: 0 15px;
    }

    .partconsult-card-icon[b-e6k610ybmc] {
        width: 32px; /* 超小设备减小尺寸 */
        height: 32px;
        min-width: 32px;
        font-size: 0.9rem; /* 减小字体 */
    }

    .partconsult-card-title-wrapper h3[b-e6k610ybmc] {
        font-size: 1.05rem; /* 进一步减小字体 */
    }

    .partconsult-card-tagline[b-e6k610ybmc] {
        font-size: 0.85rem; /* 减小字体 */
    }

    .partconsult-value-content h4[b-e6k610ybmc] {
        font-size: 1rem; /* 减小字体 */
    }

    .partconsult-value-content p[b-e6k610ybmc] {
        font-size: 0.85rem; /* 减小字体 */
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartConsultEN.razor.rz.scp.css */
/* === PartConsult组件专用样式 - 使用partconsult-前缀 === */
/* 咨询服务容器 */
.partconsult-sovereign-consulting[b-ryy28wnt0d] {
    position: relative;
    background: linear-gradient(135deg, #1a237e, #283593, #3949ab, #5c6bc0);
    padding: 1.0rem 0 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 420px; /* 进一步减小最小高度 */
    display: flex;
    align-items: center;
}

/* 科技感背景层 - 类似PartBottom的设计 */
.partconsult-cta-bg[b-ryy28wnt0d] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%), url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M0,100 Q50,80 100,100 T200,100 L200,200 L0,200 Z" fill="rgba(255,255,255,0.05)"/><path d="M0,150 Q50,130 100,150 T200,150 L200,200 L0,200 Z" fill="rgba(255,255,255,0.03)"/></svg>') repeat center/cover;
    z-index: 1;
    pointer-events: none;
}

.partconsult-container[b-ryy28wnt0d] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 标题区域 */
.partconsult-section-title[b-ryy28wnt0d] {
    font-size: 2.0rem;
    font-weight: 800;
    margin-bottom: 0.4rem; /* 进一步减小下边距 */
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.partconsult-title-icon[b-ryy28wnt0d] {
    color: #ffd700;
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.partconsult-section-subtitle[b-ryy28wnt0d] {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem; /* 进一步减小下边距 */
    font-size: 1.2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 服务网格布局 */
.partconsult-service-grid[b-ryy28wnt0d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.6rem; /* 进一步减小网格间距 */
    margin-top: 1.8rem; /* 进一步减小上边距 */
    box-sizing: border-box;
}

/* 服务卡片 */
.partconsult-service-card[b-ryy28wnt0d] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 16px; /* 减小圆角 */
    padding: 0;
    position: relative;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    backdrop-filter: blur(5px);
}

    .partconsult-service-card:hover[b-ryy28wnt0d] {
        transform: translateY(-8px) scale(1.012);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* 卡片顶部边框 - 上括号样式，增强科技感 */
.partconsult-card-top-border[b-ryy28wnt0d] {
    height: 5px; /* 减小高度 */
    background: linear-gradient(90deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white), var(--partconsult-card-color));
    border-radius: 16px 16px 0 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

    .partconsult-card-top-border[b-ryy28wnt0d]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: partconsult-shimmer-b-ryy28wnt0d 3s infinite;
    }

@keyframes partconsult-shimmer-b-ryy28wnt0d {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* 卡片头部 */
.partconsult-card-header[b-ryy28wnt0d] {
    padding: 1.2rem 1.5rem 0.5rem 1.5rem; /* 进一步减小内边距 */
    display: flex;
    align-items: flex-start;
    gap: 0.9rem; /* 进一步减小间距 */
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
}

/* 卡片图标 - 调整为更小 */
.partconsult-card-icon[b-ryy28wnt0d] {
    width: 48px; /* 进一步减小大小 */
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white));
    border-radius: 12px; /* 减小圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem; /* 减小字体 */
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.partconsult-service-card:hover .partconsult-card-icon[b-ryy28wnt0d] {
    transform: scale(1.06) rotate(5deg);
}

.partconsult-card-title-wrapper[b-ryy28wnt0d] {
    flex: 1;
    min-width: 0;
}

    .partconsult-card-title-wrapper h3[b-ryy28wnt0d] {
        color: #1a237e;
        font-size: 1.45rem; /* 稍微减小字体 */
        margin-bottom: 0.2rem; /* 进一步减小下边距 */
        line-height: 1.3;
        font-weight: 800;
        background: linear-gradient(135deg, #1a237e, #3949ab);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.partconsult-card-tagline[b-ryy28wnt0d] {
    color: var(--partconsult-card-color);
    font-weight: 800;
    font-size: 0.95rem; /* 减小字体 */
    line-height: 1.2;
    letter-spacing: 0.4px;
    margin-top: -0.1rem; /* 微调位置，使更紧凑 */
}

/* 卡片内容 */
.partconsult-card-content[b-ryy28wnt0d] {
    padding: 0.2rem 1.5rem 0.5rem 1.5rem; /* 进一步减小内边距 */
    flex-grow: 1;
    box-sizing: border-box;
    background: white;
}

/* 价值列表 */
.partconsult-value-list[b-ryy28wnt0d] {
    margin: 0.2rem 0; /* 进一步减小外边距 */
}

/* 价值项样式 - 已移除图标 */
.partconsult-value-item[b-ryy28wnt0d] {
    display: block; /* 改为块级布局，不再需要flex */
    margin-bottom: 1rem; /* 减小下边距 */
    padding: 0.5rem; /* 减小内边距 */
    border-radius: 8px;
    transition: background-color 0.3s;
}

    .partconsult-value-item:hover[b-ryy28wnt0d] {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .partconsult-value-item:last-child[b-ryy28wnt0d] {
        margin-bottom: 0;
    }

.partconsult-value-content[b-ryy28wnt0d] {
    width: 100%; /* 占据全部宽度 */
}

    .partconsult-value-content h4[b-ryy28wnt0d] {
        color: #1a237e;
        font-size: 1.1rem; /* 稍微减小字体 */
        margin-bottom: 0.3rem; /* 减小下边距 */
        font-weight: 700;
        line-height: 1.3;
    }

    .partconsult-value-content p[b-ryy28wnt0d] {
        color: #4a5568;
        font-size: 0.95rem;
        line-height: 1.5; /* 保持行高不变 */
        margin: 0;
        padding: 0;
    }

/* 卡片底部 */
.partconsult-card-footer[b-ryy28wnt0d] {
    padding: 0.9rem 1.5rem; /* 进一步减小内边距 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 16px 16px;
    box-sizing: border-box;
    margin-top: 0;
}

.partconsult-service-tag[b-ryy28wnt0d] {
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 80%, white));
    color: white;
    padding: 0.25rem 0.8rem; /* 减小内边距 */
    border-radius: 20px;
    font-size: 0.8rem; /* 减小字体 */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.partconsult-cta[b-ryy28wnt0d] {
    background: linear-gradient(135deg, var(--partconsult-card-color), color-mix(in srgb, var(--partconsult-card-color) 70%, white));
    color: white;
    padding: 0.45rem 1.2rem; /* 减小内边距 */
    border-radius: 25px;
    font-weight: 800;
    font-size: 0.9rem; /* 减小字体 */
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    border: none;
    outline: none;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

    .partconsult-cta:hover[b-ryy28wnt0d] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--partconsult-card-color) 90%, black), color-mix(in srgb, var(--partconsult-card-color) 70%, black));
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
    }

    .partconsult-cta[b-ryy28wnt0d]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: rotate(30deg);
        transition: all 0.6s;
    }

    .partconsult-cta:hover[b-ryy28wnt0d]::after {
        left: 100%;
    }

/* 响应式设计 */
@media (max-width: 1200px) {
    .partconsult-service-grid[b-ryy28wnt0d] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .partconsult-sovereign-consulting[b-ryy28wnt0d] {
        padding: 1.6rem 0 1.8rem 0; /* 平板设备减小内边距 */
    }

    .partconsult-section-title[b-ryy28wnt0d] {
        font-size: 1.9rem; /* 平板设备减小字体 */
        margin-bottom: 0.3rem;
    }

    .partconsult-service-grid[b-ryy28wnt0d] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.3rem; /* 平板设备减小间距 */
        margin-top: 1.5rem;
    }

    .partconsult-card-icon[b-ryy28wnt0d] {
        width: 44px; /* 平板设备调整大小 */
        height: 44px;
        min-width: 44px;
        font-size: 1.2rem;
    }

    .partconsult-card-title-wrapper h3[b-ryy28wnt0d] {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .partconsult-section-title[b-ryy28wnt0d] {
        font-size: 1.7rem; /* 手机设备减小字体 */
        flex-direction: column;
        gap: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .partconsult-section-subtitle[b-ryy28wnt0d] {
        font-size: 1.1rem;
        padding: 0 1rem;
        margin-bottom: 1.6rem; /* 减小下边距 */
    }

    .partconsult-service-grid[b-ryy28wnt0d] {
        grid-template-columns: 1fr;
        gap: 1.3rem;
        padding: 0 1rem;
        margin-top: 1.3rem; /* 减小上边距 */
    }

    .partconsult-card-header[b-ryy28wnt0d] {
        padding: 1rem 1.2rem 0.6rem; /* 减小内边距 */
    }

    .partconsult-card-icon[b-ryy28wnt0d] {
        width: 40px; /* 手机设备减小尺寸 */
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
    }

    .partconsult-card-title-wrapper h3[b-ryy28wnt0d] {
        font-size: 1.25rem; /* 减小字体 */
        margin-bottom: 0.15rem; /* 减小下边距 */
    }

    .partconsult-card-content[b-ryy28wnt0d] {
        padding: 0.1rem 1.2rem 0.8rem 1.2rem; /* 减小内边距 */
    }

    .partconsult-value-item[b-ryy28wnt0d] {
        margin-bottom: 0.9rem; /* 减小下边距 */
        padding: 0.4rem; /* 减小内边距 */
    }

    .partconsult-value-content h4[b-ryy28wnt0d] {
        font-size: 1.05rem; /* 减小字体 */
    }

    .partconsult-value-content p[b-ryy28wnt0d] {
        font-size: 0.9rem; /* 减小字体 */
    }

    .partconsult-card-footer[b-ryy28wnt0d] {
        padding: 0.8rem 1.2rem; /* 减小内边距 */
    }
}

@media (max-width: 480px) {
    .partconsult-sovereign-consulting[b-ryy28wnt0d] {
        padding: 1.3rem 0 1.5rem 0; /* 手机设备进一步减小内边距 */
    }

    .partconsult-section-title[b-ryy28wnt0d] {
        font-size: 1.5rem; /* 进一步减小字体 */
    }

    .partconsult-service-grid[b-ryy28wnt0d] {
        padding: 0;
    }

    .partconsult-card-header[b-ryy28wnt0d] {
        padding: 0.9rem 1.1rem 0.5rem; /* 进一步减小内边距 */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem; /* 减小间距 */
    }

    .partconsult-card-icon[b-ryy28wnt0d] {
        width: 36px; /* 进一步减小尺寸 */
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
    }

    .partconsult-card-title-wrapper h3[b-ryy28wnt0d] {
        font-size: 1.15rem; /* 进一步减小字体 */
    }

    .partconsult-card-content[b-ryy28wnt0d] {
        padding: 0.1rem 1.1rem 0.7rem 1.1rem; /* 进一步减小内边距 */
    }

    .partconsult-value-item[b-ryy28wnt0d] {
        margin-bottom: 0.8rem; /* 减小下边距 */
        padding: 0.3rem; /* 减小内边距 */
    }

    .partconsult-card-footer[b-ryy28wnt0d] {
        flex-direction: column;
        gap: 0.7rem; /* 减小间距 */
        align-items: stretch;
        text-align: center;
        padding: 0.7rem 1.1rem; /* 进一步减小内边距 */
    }

    .partconsult-cta[b-ryy28wnt0d] {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .partconsult-section-title[b-ryy28wnt0d] {
        font-size: 1.35rem; /* 超小设备进一步减小字体 */
    }

    .partconsult-container[b-ryy28wnt0d] {
        padding: 0 15px;
    }

    .partconsult-card-icon[b-ryy28wnt0d] {
        width: 32px; /* 超小设备减小尺寸 */
        height: 32px;
        min-width: 32px;
        font-size: 0.9rem; /* 减小字体 */
    }

    .partconsult-card-title-wrapper h3[b-ryy28wnt0d] {
        font-size: 1.05rem; /* 进一步减小字体 */
    }

    .partconsult-card-tagline[b-ryy28wnt0d] {
        font-size: 0.85rem; /* 减小字体 */
    }

    .partconsult-value-content h4[b-ryy28wnt0d] {
        font-size: 1rem; /* 减小字体 */
    }

    .partconsult-value-content p[b-ryy28wnt0d] {
        font-size: 0.85rem; /* 减小字体 */
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartCustomerLogo.razor.rz.scp.css */
/* === PartCustomerLogo组件专用样式 === */
/* Logo展示区域 - 使用CSS变量接收组件参数 */
.partcustomerlogo-logo-section[b-z7pjfm7wwo] {
    background: white;
    padding: 1rem 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* 容器宽度100%，与父窗体同宽度 */
.partcustomerlogo-container[b-z7pjfm7wwo] {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.partcustomerlogo-section-title[b-z7pjfm7wwo] {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #1e293b;
    text-align: center;
}

.partcustomerlogo-section-subtitle[b-z7pjfm7wwo] {
    color: #64748b;
    margin-bottom: 1rem;
    font-size: 1rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Logo网格布局 - 自适应容器宽度，自动计算列数 */
.partcustomerlogo-grid[b-z7pjfm7wwo] {
    display: grid;
    /*
             * 关键：使用auto-fit和minmax实现自适应布局
             * 1. minmax确保每个Logo最小为120px，最大为1fr（平均分配）
             * 2. repeat(auto-fit, ...)自动填充可用空间
             * 3. 这样可以根据容器宽度自动计算列数
             */
    grid-template-columns: repeat(auto-fit, minmax(var(--logo-width), 1fr));
    gap: var(--logo-gap);
    row-gap: var(--logo-row-gap);
    justify-items: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 0rem;
}

/* Logo项 */
.partcustomerlogo-item[b-z7pjfm7wwo] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Logo图片容器 */
.partcustomerlogo-image-container[b-z7pjfm7wwo] {
    width: var(--logo-width);
    height: var(--logo-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

    .partcustomerlogo-image-container:hover[b-z7pjfm7wwo] {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #3b82f6;
    }

/* Logo图片 - 按比例自适应填充，不变形 */
.partcustomerlogo-image[b-z7pjfm7wwo] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .partcustomerlogo-image:hover[b-z7pjfm7wwo] {
        filter: grayscale(0%);
        opacity: 1;
    }

/* 加载状态 */
.partcustomerlogo-loading[b-z7pjfm7wwo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    color: #64748b;
}

.partcustomerlogo-spinner[b-z7pjfm7wwo] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: partcustomerlogo-spin-b-z7pjfm7wwo 1s linear infinite;
    margin-bottom: 0.8rem;
}

@keyframes partcustomerlogo-spin-b-z7pjfm7wwo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 空状态 */
.partcustomerlogo-empty[b-z7pjfm7wwo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* 使用说明 */
.partcustomerlogo-instructions[b-z7pjfm7wwo] {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    text-align: center;
    border-left: 3px solid #3b82f6;
}

    .partcustomerlogo-instructions p[b-z7pjfm7wwo] {
        color: #475569;
        font-size: 0.85rem;
        margin: 0 0 0.3rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .partcustomerlogo-instructions i[b-z7pjfm7wwo] {
        color: #3b82f6;
        font-size: 0.9rem;
    }

    .partcustomerlogo-instructions code[b-z7pjfm7wwo] {
        background: #e2e8f0;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
    }

/* 布局信息（调试用） */
.partcustomerlogo-layout-info[b-z7pjfm7wwo] {
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

.layout-detail[b-z7pjfm7wwo] {
    background: #3b82f6;
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ===== 响应式设计 ===== */

/* 超大屏幕 (大于1600px) - 可以显示更多列 */
@media (min-width: 1600px) {
    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在超大屏幕上，可以显示更多列，使用更小的最小宽度 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.9), 1fr));
    }
}

/* 大屏幕 (1200px-1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 1.8rem 0;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.7rem;
    }
}

/* 中等屏幕 (992px-1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 1.6rem 0;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.6rem;
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 20px;
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在中等屏幕上，稍微缩小Logo最小尺寸 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.9), 1fr));
    }
}

/* 平板 (768px-991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 1.4rem 0;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.5rem;
    }

    .partcustomerlogo-section-subtitle[b-z7pjfm7wwo] {
        margin-bottom: 1.2rem;
        font-size: 0.95rem;
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 20px;
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在平板上，使用原始Logo尺寸的85% */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.85), 1fr));
        gap: calc(var(--logo-gap) * 0.9);
        row-gap: calc(var(--logo-row-gap) * 0.9);
    }
}

/* 小屏幕 (小于768px) */
@media (max-width: 767px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 1.2rem 0;
        /* 小屏幕时，所有尺寸缩放为70% */
        --logo-width-scaled: calc(var(--logo-width) * 0.7);
        --logo-height-scaled: calc(var(--logo-height) * 0.7);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.7);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.7);
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 15px;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }

    .partcustomerlogo-section-subtitle[b-z7pjfm7wwo] {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        padding: 0 0.5rem;
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在小屏幕上使用缩放后的尺寸 */
        grid-template-columns: repeat(auto-fit, minmax(var(--logo-width-scaled), 1fr));
        gap: var(--logo-gap-scaled);
        row-gap: var(--logo-row-gap-scaled);
        margin-bottom: 1rem;
    }

    .partcustomerlogo-image-container[b-z7pjfm7wwo] {
        /* 在小屏幕上使用缩放后的尺寸 */
        width: var(--logo-width-scaled);
        height: var(--logo-height-scaled);
        padding: 6px;
        border-radius: 5px;
    }

    .partcustomerlogo-instructions[b-z7pjfm7wwo] {
        padding: 0.6rem 0.8rem;
        margin-top: 0.8rem;
    }

        .partcustomerlogo-instructions p[b-z7pjfm7wwo] {
            font-size: 0.8rem;
        }
}

/* 大手机 (576px-767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在大手机上，确保至少显示3列 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width-scaled) * 1.1), 1fr));
    }
}

/* 小手机 (小于576px) */
@media (max-width: 575px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 1rem 0;
        /* 小手机时，尺寸缩放为60% */
        --logo-width-scaled: calc(var(--logo-width) * 0.6);
        --logo-height-scaled: calc(var(--logo-height) * 0.6);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.6);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.6);
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.3rem;
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 确保最小窗口时也能显示合理的列数 */
        grid-template-columns: repeat(auto-fit, minmax(var(--logo-width-scaled), 1fr));
        gap: var(--logo-gap-scaled);
        row-gap: var(--logo-row-gap-scaled);
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 12px;
    }

    .partcustomerlogo-image-container[b-z7pjfm7wwo] {
        padding: 5px;
    }

    .partcustomerlogo-instructions p[b-z7pjfm7wwo] {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* 超小手机 (小于400px) */
@media (max-width: 399px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 0.8rem 0;
        /* 超小手机时，尺寸缩放为50% */
        --logo-width-scaled: calc(var(--logo-width) * 0.5);
        --logo-height-scaled: calc(var(--logo-height) * 0.5);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.5);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.5);
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在超小手机上，使用更小的间隙 */
        gap: 6px;
        row-gap: 6px;
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 10px;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.2rem;
    }

    .partcustomerlogo-image-container[b-z7pjfm7wwo] {
        padding: 4px;
    }
}

/* 极小屏幕 (小于320px) */
@media (max-width: 319px) {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        padding: 0.6rem 0;
    }

    .partcustomerlogo-container[b-z7pjfm7wwo] {
        padding: 0 8px;
    }

    .partcustomerlogo-section-title[b-z7pjfm7wwo] {
        font-size: 1.1rem;
    }

    .partcustomerlogo-grid[b-z7pjfm7wwo] {
        /* 在极小屏幕上，确保至少显示2列 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width-scaled) * 1.2), 1fr));
    }

    .partcustomerlogo-image-container[b-z7pjfm7wwo] {
        padding: 3px;
    }
}

/* 打印样式 */
@media print {
    .partcustomerlogo-logo-section[b-z7pjfm7wwo] {
        break-inside: avoid;
        border: 1px solid #ddd;
        padding: 1rem 0;
    }

    .partcustomerlogo-image-container[b-z7pjfm7wwo] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .partcustomerlogo-instructions[b-z7pjfm7wwo] {
        display: none;
    }
}

/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartCustomerLogoEN.razor.rz.scp.css */
/* === PartCustomerLogo组件专用样式 === */
/* Logo展示区域 - 使用CSS变量接收组件参数 */
.partcustomerlogo-logo-section[b-ufulb3fbd6] {
    background: white;
    padding: 1rem 0 2rem 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* 容器宽度100%，与父窗体同宽度 */
.partcustomerlogo-container[b-ufulb3fbd6] {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.partcustomerlogo-section-title[b-ufulb3fbd6] {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #1e293b;
    text-align: center;
}

.partcustomerlogo-section-subtitle[b-ufulb3fbd6] {
    color: #64748b;
    margin-bottom: 1rem;
    font-size: 1rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Logo网格布局 - 自适应容器宽度，自动计算列数 */
.partcustomerlogo-grid[b-ufulb3fbd6] {
    display: grid;
    /*
             * 关键：使用auto-fit和minmax实现自适应布局
             * 1. minmax确保每个Logo最小为120px，最大为1fr（平均分配）
             * 2. repeat(auto-fit, ...)自动填充可用空间
             * 3. 这样可以根据容器宽度自动计算列数
             */
    grid-template-columns: repeat(auto-fit, minmax(var(--logo-width), 1fr));
    gap: var(--logo-gap);
    row-gap: var(--logo-row-gap);
    justify-items: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 0rem;
}

/* Logo项 */
.partcustomerlogo-item[b-ufulb3fbd6] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Logo图片容器 */
.partcustomerlogo-image-container[b-ufulb3fbd6] {
    width: var(--logo-width);
    height: var(--logo-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

    .partcustomerlogo-image-container:hover[b-ufulb3fbd6] {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #3b82f6;
    }

/* Logo图片 - 按比例自适应填充，不变形 */
.partcustomerlogo-image[b-ufulb3fbd6] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .partcustomerlogo-image:hover[b-ufulb3fbd6] {
        filter: grayscale(0%);
        opacity: 1;
    }

/* 加载状态 */
.partcustomerlogo-loading[b-ufulb3fbd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    color: #64748b;
}

.partcustomerlogo-spinner[b-ufulb3fbd6] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: partcustomerlogo-spin-b-ufulb3fbd6 1s linear infinite;
    margin-bottom: 0.8rem;
}

@keyframes partcustomerlogo-spin-b-ufulb3fbd6 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 空状态 */
.partcustomerlogo-empty[b-ufulb3fbd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* 使用说明 */
.partcustomerlogo-instructions[b-ufulb3fbd6] {
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    text-align: center;
    border-left: 3px solid #3b82f6;
}

    .partcustomerlogo-instructions p[b-ufulb3fbd6] {
        color: #475569;
        font-size: 0.85rem;
        margin: 0 0 0.3rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .partcustomerlogo-instructions i[b-ufulb3fbd6] {
        color: #3b82f6;
        font-size: 0.9rem;
    }

    .partcustomerlogo-instructions code[b-ufulb3fbd6] {
        background: #e2e8f0;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
    }

/* 布局信息（调试用） */
.partcustomerlogo-layout-info[b-ufulb3fbd6] {
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

.layout-detail[b-ufulb3fbd6] {
    background: #3b82f6;
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.8rem;
}

/* ===== 响应式设计 ===== */

/* 超大屏幕 (大于1600px) - 可以显示更多列 */
@media (min-width: 1600px) {
    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在超大屏幕上，可以显示更多列，使用更小的最小宽度 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.9), 1fr));
    }
}

/* 大屏幕 (1200px-1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 1.8rem 0;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.7rem;
    }
}

/* 中等屏幕 (992px-1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 1.6rem 0;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.6rem;
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 20px;
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在中等屏幕上，稍微缩小Logo最小尺寸 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.9), 1fr));
    }
}

/* 平板 (768px-991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 1.4rem 0;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.5rem;
    }

    .partcustomerlogo-section-subtitle[b-ufulb3fbd6] {
        margin-bottom: 1.2rem;
        font-size: 0.95rem;
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 20px;
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在平板上，使用原始Logo尺寸的85% */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width) * 0.85), 1fr));
        gap: calc(var(--logo-gap) * 0.9);
        row-gap: calc(var(--logo-row-gap) * 0.9);
    }
}

/* 小屏幕 (小于768px) */
@media (max-width: 767px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 1.2rem 0;
        /* 小屏幕时，所有尺寸缩放为70% */
        --logo-width-scaled: calc(var(--logo-width) * 0.7);
        --logo-height-scaled: calc(var(--logo-height) * 0.7);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.7);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.7);
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 15px;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }

    .partcustomerlogo-section-subtitle[b-ufulb3fbd6] {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        padding: 0 0.5rem;
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在小屏幕上使用缩放后的尺寸 */
        grid-template-columns: repeat(auto-fit, minmax(var(--logo-width-scaled), 1fr));
        gap: var(--logo-gap-scaled);
        row-gap: var(--logo-row-gap-scaled);
        margin-bottom: 1rem;
    }

    .partcustomerlogo-image-container[b-ufulb3fbd6] {
        /* 在小屏幕上使用缩放后的尺寸 */
        width: var(--logo-width-scaled);
        height: var(--logo-height-scaled);
        padding: 6px;
        border-radius: 5px;
    }

    .partcustomerlogo-instructions[b-ufulb3fbd6] {
        padding: 0.6rem 0.8rem;
        margin-top: 0.8rem;
    }

        .partcustomerlogo-instructions p[b-ufulb3fbd6] {
            font-size: 0.8rem;
        }
}

/* 大手机 (576px-767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在大手机上，确保至少显示3列 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width-scaled) * 1.1), 1fr));
    }
}

/* 小手机 (小于576px) */
@media (max-width: 575px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 1rem 0;
        /* 小手机时，尺寸缩放为60% */
        --logo-width-scaled: calc(var(--logo-width) * 0.6);
        --logo-height-scaled: calc(var(--logo-height) * 0.6);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.6);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.6);
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.3rem;
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 确保最小窗口时也能显示合理的列数 */
        grid-template-columns: repeat(auto-fit, minmax(var(--logo-width-scaled), 1fr));
        gap: var(--logo-gap-scaled);
        row-gap: var(--logo-row-gap-scaled);
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 12px;
    }

    .partcustomerlogo-image-container[b-ufulb3fbd6] {
        padding: 5px;
    }

    .partcustomerlogo-instructions p[b-ufulb3fbd6] {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* 超小手机 (小于400px) */
@media (max-width: 399px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 0.8rem 0;
        /* 超小手机时，尺寸缩放为50% */
        --logo-width-scaled: calc(var(--logo-width) * 0.5);
        --logo-height-scaled: calc(var(--logo-height) * 0.5);
        --logo-gap-scaled: calc(var(--logo-gap) * 0.5);
        --logo-row-gap-scaled: calc(var(--logo-row-gap) * 0.5);
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在超小手机上，使用更小的间隙 */
        gap: 6px;
        row-gap: 6px;
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 10px;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.2rem;
    }

    .partcustomerlogo-image-container[b-ufulb3fbd6] {
        padding: 4px;
    }
}

/* 极小屏幕 (小于320px) */
@media (max-width: 319px) {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        padding: 0.6rem 0;
    }

    .partcustomerlogo-container[b-ufulb3fbd6] {
        padding: 0 8px;
    }

    .partcustomerlogo-section-title[b-ufulb3fbd6] {
        font-size: 1.1rem;
    }

    .partcustomerlogo-grid[b-ufulb3fbd6] {
        /* 在极小屏幕上，确保至少显示2列 */
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--logo-width-scaled) * 1.2), 1fr));
    }

    .partcustomerlogo-image-container[b-ufulb3fbd6] {
        padding: 3px;
    }
}

/* 打印样式 */
@media print {
    .partcustomerlogo-logo-section[b-ufulb3fbd6] {
        break-inside: avoid;
        border: 1px solid #ddd;
        padding: 1rem 0;
    }

    .partcustomerlogo-image-container[b-ufulb3fbd6] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .partcustomerlogo-instructions[b-ufulb3fbd6] {
        display: none;
    }
}

/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartPicture.razor.rz.scp.css */
/* === PartPictureEN Component Styles === */

/* Container - Deep red theme with minimal padding */
.partpicture-container[b-7taltpsmqe] {
    width: 100%;
    margin: 0;
    padding: 1.2rem 0.5rem 1.2rem 0.5rem; /* 最小化上下内边距 */
    box-sizing: border-box;
    background: linear-gradient(145deg, #8B0000, #B22222, #DC143C);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

    /* Background pattern for tech feel */
    .partpicture-container[b-7taltpsmqe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        z-index: 1;
        pointer-events: none;
    }

/* Title Area - 减少间距 */
.partpicture-header[b-7taltpsmqe] {
    text-align: center;
    margin-bottom: 0.8rem; /* 减少下边距 */
    padding: 0 0.5rem; /* 减少左右内边距 */
    position: relative;
    z-index: 2;
}

.partpicture-title[b-7taltpsmqe] {
    font-size: 1.8rem; /* 稍微减小字体 */
    font-weight: 800;
    color: white;
    margin-bottom: 0.2rem; /* 大大减少下边距 */
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Carousel Container - 使用更紧凑的间距 */
.partpicture-carousels-container[b-7taltpsmqe] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem; /* 减少间距 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0.5rem; /* 减少左右内边距 */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Single Carousel Wrapper - 减少内边距 */
.carousel-wrapper[b-7taltpsmqe] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border-radius: 12px; /* 稍微减小圆角 */
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

    .carousel-wrapper:hover[b-7taltpsmqe] {
        transform: translateY(-4px) scale(1.008);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

/* Carousel Header - 减少内边距和间距 */
.carousel-header[b-7taltpsmqe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem; /* 减少内边距 */
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(178, 34, 34, 0.9));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.carousel-title[b-7taltpsmqe] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 减少间距 */
    font-size: 1.2rem; /* 减小字体 */
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.flag-china[b-7taltpsmqe] {
    color: #FFDE00; /* Gold for China flag */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 1rem; /* 减小图标 */
}

.flag-foreign[b-7taltpsmqe] {
    color: #1E90FF; /* Blue for foreign flag */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 1rem; /* 减小图标 */
}

.badge[b-7taltpsmqe] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #8B0000;
    font-size: 0.75rem; /* 减小字体 */
    padding: 0.2rem 0.5rem; /* 减少内边距 */
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-left: 0.3rem; /* 减少左边距 */
}

/* Carousel Navigation - 更紧凑的布局 */
.carousel-nav[b-7taltpsmqe] {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* 减少间距 */
}

.nav-indicator[b-7taltpsmqe] {
    font-size: 0.85rem; /* 减小字体 */
    color: white;
    min-width: 70px; /* 减少最小宽度 */
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

    .nav-indicator strong[b-7taltpsmqe] {
        color: #FFD700;
        font-weight: 800;
    }

/* Enhanced Carousel Buttons - 使用圆角矩形 */
.carousel-btn[b-7taltpsmqe] {
    padding: 0.4rem 0.8rem; /* 减少内边距 */
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
    color: #8B0000;
    border: none;
    border-radius: 8px; /* 使用矩形圆角，而不是圆形 */
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem; /* 减少间距 */
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    min-width: 65px; /* 确保按钮有足够宽度 */
    white-space: nowrap; /* 防止文本换行 */
}

    .carousel-btn[b-7taltpsmqe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .carousel-btn:hover[b-7taltpsmqe]::before {
        left: 100%;
    }

    .carousel-btn:hover[b-7taltpsmqe] {
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
        color: #B22222;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .carousel-btn:active[b-7taltpsmqe] {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

.btn-text[b-7taltpsmqe] {
    font-size: 0.75rem; /* 减小字体 */
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Carousel Content */
.carousel-content[b-7taltpsmqe] {
    position: relative;
}

/* 16:9 Aspect Ratio Container - 确保16:9比例 */
.aspect-ratio-container[b-7taltpsmqe] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio (9/16 = 0.5625) */
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Image Container - 确保图片填充容器 */
.carousel-image-container[b-7taltpsmqe] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-image[b-7taltpsmqe] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填充容器，保持比例 */
    transition: transform 0.4s ease;
    background-color: rgba(0, 0, 0, 0.05); /* 图片加载前的背景色 */
}

.carousel-wrapper:hover .carousel-image[b-7taltpsmqe] {
    transform: scale(1.02); /* 轻微缩放效果 */
}

/* Image Name Display - 减少内边距 */
.image-name-display[b-7taltpsmqe] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0.8rem; /* 减少内边距 */
    background: linear-gradient(to right, rgba(139, 0, 0, 0.08), rgba(178, 34, 34, 0.08));
    border-top: 1px solid rgba(139, 0, 0, 0.15);
    border-bottom: 1px solid rgba(139, 0, 0, 0.15);
    min-height: 42px; /* 减少最小高度 */
}

.image-name-text[b-7taltpsmqe] {
    font-size: 0.9rem; /* 减小字体 */
    font-weight: 600;
    color: #8B0000;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    max-width: 95%;
    margin: 0 auto;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Thumbnail Indicators - 减少内边距和尺寸 */
.carousel-thumbnails[b-7taltpsmqe] {
    display: flex;
    justify-content: center;
    gap: 0.4rem; /* 减少间距 */
    padding: 0.6rem; /* 减少内边距 */
    background-color: rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.thumbnail[b-7taltpsmqe] {
    flex-shrink: 0;
    width: 55px; /* 减小尺寸 */
    height: 38px; /* 减小尺寸 */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.25s ease;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .thumbnail:hover[b-7taltpsmqe] {
        opacity: 0.85;
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    .thumbnail.active[b-7taltpsmqe] {
        opacity: 1;
        border-color: #8B0000;
        box-shadow: 0 3px 8px rgba(139, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.25);
        transform: translateY(-1px);
    }

    .thumbnail img[b-7taltpsmqe] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Loading State - 减少内边距 */
.partpicture-loading[b-7taltpsmqe] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem; /* 减少内边距 */
    color: white;
}

.spinner-border[b-7taltpsmqe] {
    width: 2.5rem; /* 减小尺寸 */
    height: 2.5rem; /* 减小尺寸 */
    border-width: 0.2em;
    border-color: white transparent white transparent;
    margin-bottom: 0.8rem; /* 减少下边距 */
}

.partpicture-loading p[b-7taltpsmqe] {
    margin-top: 0.8rem; /* 减少上边距 */
    font-size: 1rem; /* 减小字体 */
    font-weight: 500;
}

/* Empty State - 减少内边距 */
.partpicture-empty[b-7taltpsmqe] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem; /* 减少内边距 */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    margin: 0 auto;
    max-width: 550px; /* 减小最大宽度 */
}

.empty-icon[b-7taltpsmqe] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem; /* 减少下边距 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 2.5rem; /* 减小图标 */
}

.partpicture-empty h4[b-7taltpsmqe] {
    color: white;
    margin-bottom: 0.8rem; /* 减少下边距 */
    font-size: 1.2rem; /* 减小字体 */
}

.partpicture-empty p[b-7taltpsmqe] {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.2rem; /* 减少下边距 */
    font-size: 0.95rem; /* 减小字体 */
}

.folder-list[b-7taltpsmqe] {
    text-align: left;
    max-width: 450px; /* 减小最大宽度 */
    margin: 1rem auto; /* 减少外边距 */
    padding: 0;
    list-style: none;
}

    .folder-list li[b-7taltpsmqe] {
        background: rgba(255, 255, 255, 0.08);
        padding: 0.7rem 1rem; /* 减少内边距 */
        margin-bottom: 0.5rem; /* 减少下边距 */
        border-radius: 6px;
        border-left: 3px solid #FFD700;
        color: white;
        font-family: 'Consolas', monospace;
        transition: background 0.25s;
        font-size: 0.85rem; /* 减小字体 */
    }

        .folder-list li:hover[b-7taltpsmqe] {
            background: rgba(255, 255, 255, 0.12);
        }

    .folder-list code[b-7taltpsmqe] {
        background: rgba(255, 255, 255, 0.15);
        padding: 0.15rem 0.4rem; /* 减少内边距 */
        border-radius: 3px;
        font-size: 0.8rem; /* 减小字体 */
        color: white;
    }

/* ===== Responsive Design ===== */

/* Large Screen (Horizontal Side-by-Side) */
@media (min-width: 992px) {
    .partpicture-carousels-container[b-7taltpsmqe] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem; /* 减少间距 */
    }

    .partpicture-title[b-7taltpsmqe] {
        font-size: 2rem; /* 大屏幕稍微增大字体 */
    }

    /* 大屏幕上进一步优化按钮 */
    .carousel-btn[b-7taltpsmqe] {
        min-width: 70px;
    }
}

/* Medium Screen */
@media (max-width: 991px) and (min-width: 768px) {
    .partpicture-carousels-container[b-7taltpsmqe] {
        grid-template-columns: 1fr;
        max-width: 750px; /* 减小最大宽度 */
    }

    .partpicture-title[b-7taltpsmqe] {
        font-size: 1.7rem;
    }

    .aspect-ratio-container[b-7taltpsmqe] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Tablet Devices */
@media (max-width: 767px) and (min-width: 576px) {
    .partpicture-container[b-7taltpsmqe] {
        padding: 1rem 0.5rem 1rem 0.5rem; /* 保持最小内边距 */
    }

    .partpicture-title[b-7taltpsmqe] {
        font-size: 1.6rem;
    }

    .carousel-title[b-7taltpsmqe] {
        font-size: 1.1rem;
    }

    .carousel-header[b-7taltpsmqe] {
        padding: 0.6rem 0.8rem; /* 减少内边距 */
    }

    .carousel-btn[b-7taltpsmqe] {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
        min-width: 60px; /* 减小最小宽度 */
    }

    .btn-text[b-7taltpsmqe] {
        font-size: 0.7rem;
    }

    .image-name-display[b-7taltpsmqe] {
        padding: 0.5rem 0.6rem;
        min-height: 38px;
    }

    .image-name-text[b-7taltpsmqe] {
        font-size: 0.85rem;
    }

    .thumbnail[b-7taltpsmqe] {
        width: 50px;
        height: 35px;
    }

    .aspect-ratio-container[b-7taltpsmqe] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Mobile Devices */
@media (max-width: 575px) {
    .partpicture-container[b-7taltpsmqe] {
        padding: 0.8rem 0.3rem 0.8rem 0.3rem; /* 更小的内边距 */
    }

    .partpicture-title[b-7taltpsmqe] {
        font-size: 1.4rem;
        padding: 0 0.3rem;
        margin-bottom: 0.1rem;
    }

    .carousel-header[b-7taltpsmqe] {
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;
        padding: 0.6rem 0.7rem;
    }

    .carousel-title[b-7taltpsmqe] {
        justify-content: center;
        text-align: center;
        font-size: 1rem; /* 减小字体 */
    }

    .carousel-nav[b-7taltpsmqe] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-indicator[b-7taltpsmqe] {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 0.3rem;
        font-size: 0.8rem; /* 减小字体 */
    }

    .carousel-btn[b-7taltpsmqe] {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        min-width: 55px; /* 减小最小宽度 */
    }

    .btn-text[b-7taltpsmqe] {
        font-size: 0.65rem;
    }

    .image-name-display[b-7taltpsmqe] {
        padding: 0.4rem 0.5rem;
        min-height: 36px;
    }

    .image-name-text[b-7taltpsmqe] {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }

    .thumbnail[b-7taltpsmqe] {
        width: 45px;
        height: 32px;
    }

    .aspect-ratio-container[b-7taltpsmqe] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Extra Small Mobile */
@media (max-width: 374px) {
    .partpicture-title[b-7taltpsmqe] {
        font-size: 1.3rem;
    }

    .carousel-title[b-7taltpsmqe] {
        font-size: 0.95rem;
    }

    .nav-indicator[b-7taltpsmqe] {
        font-size: 0.75rem;
    }

    .thumbnail[b-7taltpsmqe] {
        width: 40px;
        height: 28px;
    }

    .btn-text[b-7taltpsmqe] {
        font-size: 0.6rem;
    }

    .image-name-text[b-7taltpsmqe] {
        font-size: 0.75rem;
    }

    .aspect-ratio-container[b-7taltpsmqe] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Animations */
@keyframes fadeIn-b-7taltpsmqe {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-7taltpsmqe {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-b-7taltpsmqe {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation for carousel wrappers */
.carousel-wrapper[b-7taltpsmqe] {
    animation: fadeIn-b-7taltpsmqe 0.5s ease-out;
}

/* Large screen animations */
@media (min-width: 992px) {
    .china-carousel[b-7taltpsmqe] {
        animation: slideInLeft-b-7taltpsmqe 0.5s ease-out;
    }

    .foreign-carousel[b-7taltpsmqe] {
        animation: slideInRight-b-7taltpsmqe 0.5s ease-out;
    }
}

/* Ensure 16:9 aspect ratio is maintained across all screen sizes */
.aspect-ratio-container[b-7taltpsmqe] {
    aspect-ratio: 16/9; /* 现代浏览器支持 */
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
    .aspect-ratio-container[b-7taltpsmqe] {
        /* 保持原有的padding-top方法作为回退 */
        padding-top: 56.25%;
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartPictureEN.razor.rz.scp.css */
/* === PartPictureEN Component Styles === */

/* Container - Deep red theme with minimal padding */
.partpicture-container[b-l6rr8pzioo] {
    width: 100%;
    margin: 0;
    padding: 1.2rem 0.5rem 1.2rem 0.5rem; /* 最小化上下内边距 */
    box-sizing: border-box;
    background: linear-gradient(145deg, #8B0000, #B22222, #DC143C);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

    /* Background pattern for tech feel */
    .partpicture-container[b-l6rr8pzioo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        z-index: 1;
        pointer-events: none;
    }

/* Title Area - 减少间距 */
.partpicture-header[b-l6rr8pzioo] {
    text-align: center;
    margin-bottom: 0.8rem; /* 减少下边距 */
    padding: 0 0.5rem; /* 减少左右内边距 */
    position: relative;
    z-index: 2;
}

.partpicture-title[b-l6rr8pzioo] {
    font-size: 1.8rem; /* 稍微减小字体 */
    font-weight: 800;
    color: white;
    margin-bottom: 0.2rem; /* 大大减少下边距 */
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Carousel Container - 使用更紧凑的间距 */
.partpicture-carousels-container[b-l6rr8pzioo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem; /* 减少间距 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0.5rem; /* 减少左右内边距 */
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Single Carousel Wrapper - 减少内边距 */
.carousel-wrapper[b-l6rr8pzioo] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border-radius: 12px; /* 稍微减小圆角 */
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

    .carousel-wrapper:hover[b-l6rr8pzioo] {
        transform: translateY(-4px) scale(1.008);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

/* Carousel Header - 减少内边距和间距 */
.carousel-header[b-l6rr8pzioo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1rem; /* 减少内边距 */
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(178, 34, 34, 0.9));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.carousel-title[b-l6rr8pzioo] {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* 减少间距 */
    font-size: 1.2rem; /* 减小字体 */
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.flag-china[b-l6rr8pzioo] {
    color: #FFDE00; /* Gold for China flag */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 1rem; /* 减小图标 */
}

.flag-foreign[b-l6rr8pzioo] {
    color: #1E90FF; /* Blue for foreign flag */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 1rem; /* 减小图标 */
}

.badge[b-l6rr8pzioo] {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #8B0000;
    font-size: 0.75rem; /* 减小字体 */
    padding: 0.2rem 0.5rem; /* 减少内边距 */
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-left: 0.3rem; /* 减少左边距 */
}

/* Carousel Navigation - 更紧凑的布局 */
.carousel-nav[b-l6rr8pzioo] {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* 减少间距 */
}

.nav-indicator[b-l6rr8pzioo] {
    font-size: 0.85rem; /* 减小字体 */
    color: white;
    min-width: 70px; /* 减少最小宽度 */
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

    .nav-indicator strong[b-l6rr8pzioo] {
        color: #FFD700;
        font-weight: 800;
    }

/* Enhanced Carousel Buttons - 使用圆角矩形 */
.carousel-btn[b-l6rr8pzioo] {
    padding: 0.4rem 0.8rem; /* 减少内边距 */
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
    color: #8B0000;
    border: none;
    border-radius: 8px; /* 使用矩形圆角，而不是圆形 */
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem; /* 减少间距 */
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    min-width: 65px; /* 确保按钮有足够宽度 */
    white-space: nowrap; /* 防止文本换行 */
}

    .carousel-btn[b-l6rr8pzioo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .carousel-btn:hover[b-l6rr8pzioo]::before {
        left: 100%;
    }

    .carousel-btn:hover[b-l6rr8pzioo] {
        background: linear-gradient(135deg, #ffffff, #f0f0f0);
        color: #B22222;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .carousel-btn:active[b-l6rr8pzioo] {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

.btn-text[b-l6rr8pzioo] {
    font-size: 0.75rem; /* 减小字体 */
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Carousel Content */
.carousel-content[b-l6rr8pzioo] {
    position: relative;
}

/* 16:9 Aspect Ratio Container - 确保16:9比例 */
.aspect-ratio-container[b-l6rr8pzioo] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio (9/16 = 0.5625) */
    background-color: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Image Container - 确保图片填充容器 */
.carousel-image-container[b-l6rr8pzioo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-image[b-l6rr8pzioo] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填充容器，保持比例 */
    transition: transform 0.4s ease;
    background-color: rgba(0, 0, 0, 0.05); /* 图片加载前的背景色 */
}

.carousel-wrapper:hover .carousel-image[b-l6rr8pzioo] {
    transform: scale(1.02); /* 轻微缩放效果 */
}

/* Image Name Display - 减少内边距 */
.image-name-display[b-l6rr8pzioo] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0.8rem; /* 减少内边距 */
    background: linear-gradient(to right, rgba(139, 0, 0, 0.08), rgba(178, 34, 34, 0.08));
    border-top: 1px solid rgba(139, 0, 0, 0.15);
    border-bottom: 1px solid rgba(139, 0, 0, 0.15);
    min-height: 42px; /* 减少最小高度 */
}

.image-name-text[b-l6rr8pzioo] {
    font-size: 0.9rem; /* 减小字体 */
    font-weight: 600;
    color: #8B0000;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    max-width: 95%;
    margin: 0 auto;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Thumbnail Indicators - 减少内边距和尺寸 */
.carousel-thumbnails[b-l6rr8pzioo] {
    display: flex;
    justify-content: center;
    gap: 0.4rem; /* 减少间距 */
    padding: 0.6rem; /* 减少内边距 */
    background-color: rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.thumbnail[b-l6rr8pzioo] {
    flex-shrink: 0;
    width: 55px; /* 减小尺寸 */
    height: 38px; /* 减小尺寸 */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.25s ease;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .thumbnail:hover[b-l6rr8pzioo] {
        opacity: 0.85;
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }

    .thumbnail.active[b-l6rr8pzioo] {
        opacity: 1;
        border-color: #8B0000;
        box-shadow: 0 3px 8px rgba(139, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.25);
        transform: translateY(-1px);
    }

    .thumbnail img[b-l6rr8pzioo] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Loading State - 减少内边距 */
.partpicture-loading[b-l6rr8pzioo] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem; /* 减少内边距 */
    color: white;
}

.spinner-border[b-l6rr8pzioo] {
    width: 2.5rem; /* 减小尺寸 */
    height: 2.5rem; /* 减小尺寸 */
    border-width: 0.2em;
    border-color: white transparent white transparent;
    margin-bottom: 0.8rem; /* 减少下边距 */
}

.partpicture-loading p[b-l6rr8pzioo] {
    margin-top: 0.8rem; /* 减少上边距 */
    font-size: 1rem; /* 减小字体 */
    font-weight: 500;
}

/* Empty State - 减少内边距 */
.partpicture-empty[b-l6rr8pzioo] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem; /* 减少内边距 */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    margin: 0 auto;
    max-width: 550px; /* 减小最大宽度 */
}

.empty-icon[b-l6rr8pzioo] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem; /* 减少下边距 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    font-size: 2.5rem; /* 减小图标 */
}

.partpicture-empty h4[b-l6rr8pzioo] {
    color: white;
    margin-bottom: 0.8rem; /* 减少下边距 */
    font-size: 1.2rem; /* 减小字体 */
}

.partpicture-empty p[b-l6rr8pzioo] {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.2rem; /* 减少下边距 */
    font-size: 0.95rem; /* 减小字体 */
}

.folder-list[b-l6rr8pzioo] {
    text-align: left;
    max-width: 450px; /* 减小最大宽度 */
    margin: 1rem auto; /* 减少外边距 */
    padding: 0;
    list-style: none;
}

    .folder-list li[b-l6rr8pzioo] {
        background: rgba(255, 255, 255, 0.08);
        padding: 0.7rem 1rem; /* 减少内边距 */
        margin-bottom: 0.5rem; /* 减少下边距 */
        border-radius: 6px;
        border-left: 3px solid #FFD700;
        color: white;
        font-family: 'Consolas', monospace;
        transition: background 0.25s;
        font-size: 0.85rem; /* 减小字体 */
    }

        .folder-list li:hover[b-l6rr8pzioo] {
            background: rgba(255, 255, 255, 0.12);
        }

    .folder-list code[b-l6rr8pzioo] {
        background: rgba(255, 255, 255, 0.15);
        padding: 0.15rem 0.4rem; /* 减少内边距 */
        border-radius: 3px;
        font-size: 0.8rem; /* 减小字体 */
        color: white;
    }

/* ===== Responsive Design ===== */

/* Large Screen (Horizontal Side-by-Side) */
@media (min-width: 992px) {
    .partpicture-carousels-container[b-l6rr8pzioo] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem; /* 减少间距 */
    }

    .partpicture-title[b-l6rr8pzioo] {
        font-size: 2rem; /* 大屏幕稍微增大字体 */
    }

    /* 大屏幕上进一步优化按钮 */
    .carousel-btn[b-l6rr8pzioo] {
        min-width: 70px;
    }
}

/* Medium Screen */
@media (max-width: 991px) and (min-width: 768px) {
    .partpicture-carousels-container[b-l6rr8pzioo] {
        grid-template-columns: 1fr;
        max-width: 750px; /* 减小最大宽度 */
    }

    .partpicture-title[b-l6rr8pzioo] {
        font-size: 1.7rem;
    }

    .aspect-ratio-container[b-l6rr8pzioo] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Tablet Devices */
@media (max-width: 767px) and (min-width: 576px) {
    .partpicture-container[b-l6rr8pzioo] {
        padding: 1rem 0.5rem 1rem 0.5rem; /* 保持最小内边距 */
    }

    .partpicture-title[b-l6rr8pzioo] {
        font-size: 1.6rem;
    }

    .carousel-title[b-l6rr8pzioo] {
        font-size: 1.1rem;
    }

    .carousel-header[b-l6rr8pzioo] {
        padding: 0.6rem 0.8rem; /* 减少内边距 */
    }

    .carousel-btn[b-l6rr8pzioo] {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
        min-width: 60px; /* 减小最小宽度 */
    }

    .btn-text[b-l6rr8pzioo] {
        font-size: 0.7rem;
    }

    .image-name-display[b-l6rr8pzioo] {
        padding: 0.5rem 0.6rem;
        min-height: 38px;
    }

    .image-name-text[b-l6rr8pzioo] {
        font-size: 0.85rem;
    }

    .thumbnail[b-l6rr8pzioo] {
        width: 50px;
        height: 35px;
    }

    .aspect-ratio-container[b-l6rr8pzioo] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Mobile Devices */
@media (max-width: 575px) {
    .partpicture-container[b-l6rr8pzioo] {
        padding: 0.8rem 0.3rem 0.8rem 0.3rem; /* 更小的内边距 */
    }

    .partpicture-title[b-l6rr8pzioo] {
        font-size: 1.4rem;
        padding: 0 0.3rem;
        margin-bottom: 0.1rem;
    }

    .carousel-header[b-l6rr8pzioo] {
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;
        padding: 0.6rem 0.7rem;
    }

    .carousel-title[b-l6rr8pzioo] {
        justify-content: center;
        text-align: center;
        font-size: 1rem; /* 减小字体 */
    }

    .carousel-nav[b-l6rr8pzioo] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .nav-indicator[b-l6rr8pzioo] {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 0.3rem;
        font-size: 0.8rem; /* 减小字体 */
    }

    .carousel-btn[b-l6rr8pzioo] {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        min-width: 55px; /* 减小最小宽度 */
    }

    .btn-text[b-l6rr8pzioo] {
        font-size: 0.65rem;
    }

    .image-name-display[b-l6rr8pzioo] {
        padding: 0.4rem 0.5rem;
        min-height: 36px;
    }

    .image-name-text[b-l6rr8pzioo] {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }

    .thumbnail[b-l6rr8pzioo] {
        width: 45px;
        height: 32px;
    }

    .aspect-ratio-container[b-l6rr8pzioo] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Extra Small Mobile */
@media (max-width: 374px) {
    .partpicture-title[b-l6rr8pzioo] {
        font-size: 1.3rem;
    }

    .carousel-title[b-l6rr8pzioo] {
        font-size: 0.95rem;
    }

    .nav-indicator[b-l6rr8pzioo] {
        font-size: 0.75rem;
    }

    .thumbnail[b-l6rr8pzioo] {
        width: 40px;
        height: 28px;
    }

    .btn-text[b-l6rr8pzioo] {
        font-size: 0.6rem;
    }

    .image-name-text[b-l6rr8pzioo] {
        font-size: 0.75rem;
    }

    .aspect-ratio-container[b-l6rr8pzioo] {
        padding-top: 56.25%; /* 保持16:9比例 */
    }
}

/* Animations */
@keyframes fadeIn-b-l6rr8pzioo {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-l6rr8pzioo {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-b-l6rr8pzioo {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation for carousel wrappers */
.carousel-wrapper[b-l6rr8pzioo] {
    animation: fadeIn-b-l6rr8pzioo 0.5s ease-out;
}

/* Large screen animations */
@media (min-width: 992px) {
    .china-carousel[b-l6rr8pzioo] {
        animation: slideInLeft-b-l6rr8pzioo 0.5s ease-out;
    }

    .foreign-carousel[b-l6rr8pzioo] {
        animation: slideInRight-b-l6rr8pzioo 0.5s ease-out;
    }
}

/* Ensure 16:9 aspect ratio is maintained across all screen sizes */
.aspect-ratio-container[b-l6rr8pzioo] {
    aspect-ratio: 16/9; /* 现代浏览器支持 */
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16/9) {
    .aspect-ratio-container[b-l6rr8pzioo] {
        /* 保持原有的padding-top方法作为回退 */
        padding-top: 56.25%;
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartProduct.razor.rz.scp.css */
/* === PartProduct组件专用样式 - 使用partproduct-前缀 === */
/* 定义根字体大小，用于rem单位计算 */
:root[b-94y5gjzwcm] {
    --partproduct-h4-font-size: 1.4rem;
    --partproduct-tagline-font-size: 1.2rem;
    --partproduct-li-font-size: 1.0rem;
    --partproduct-cta-font-size: 1.1rem;
}

/* 产品家族容器 */
.partproduct-product-family[b-94y5gjzwcm] {
    background: #0f1419;
    padding: 1.0rem 0 1.0rem 0;
    width: 100%;
    box-sizing: border-box;
}

.partproduct-container[b-94y5gjzwcm] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.partproduct-section-title[b-94y5gjzwcm] {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: white;
}

    .partproduct-section-title span[b-94y5gjzwcm] {
        color: #2ed573;
    }

.partproduct-section-subtitle[b-94y5gjzwcm] {
    text-align: center;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 产品网格布局 */
.partproduct-product-hex-grid[b-94y5gjzwcm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* 产品卡片 */
.partproduct-hex-card[b-94y5gjzwcm] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 20px;
    padding: 1.3rem 1.2rem 0.8rem 1.2rem; /* 进一步减少上下内边距 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    border-top: 6px solid var(--partproduct-h-color);
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 340px; /* 进一步减少最小高度 */
    box-sizing: border-box;
}

    .partproduct-hex-card:hover[b-94y5gjzwcm] {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--partproduct-h-color);
    }

/* 卡片内部 */
.partproduct-hex-inner[b-94y5gjzwcm] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 卡片头部区域：图标、标题、标语 */
.partproduct-hex-header[b-94y5gjzwcm] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.7rem; /* 减少与下方内容的间距 */
    flex-wrap: nowrap;
    gap: 0.8rem;
}

/* 图标 */
.partproduct-hex-icon[b-94y5gjzwcm] {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--partproduct-h-color), color-mix(in srgb, var(--partproduct-h-color) 80%, black));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 标题包装器 */
.partproduct-hex-title-wrapper[b-94y5gjzwcm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 标题 - 使用根变量，大屏幕适当增大 */
.partproduct-hex-card h4[b-94y5gjzwcm] {
    color: white;
    font-size: var(--partproduct-h4-font-size);
    margin-bottom: 0.3rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标语 - 使用根变量，增大字体 */
.partproduct-hex-tagline[b-94y5gjzwcm] {
    color: var(--partproduct-h-color);
    font-weight: 700;
    font-size: var(--partproduct-tagline-font-size);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 特征列表 */
.partproduct-hex-card ul[b-94y5gjzwcm] {
    list-style: none;
    padding-left: 0;
    font-size: var(--partproduct-li-font-size); /* 使用根变量 */
    color: #cbd5e1;
    margin-bottom: 0.8rem; /* 减少与CTA的间距 */
    flex-grow: 1;
    box-sizing: border-box;
}

.partproduct-hex-card li[b-94y5gjzwcm] {
    margin-bottom: 0.6rem;
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
}

    .partproduct-hex-card li[b-94y5gjzwcm]::before {
        content: '▸';
        position: absolute;
        left: 0;
        color: var(--partproduct-h-color);
        font-weight: bold;
    }

/* CTA包装器 */
.partproduct-hex-cta-wrapper[b-94y5gjzwcm] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 0rem; /* 进一步减少与上方内容的间距 */
}

/* 行动按钮 */
.partproduct-hex-cta[b-94y5gjzwcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--partproduct-h-color);
    color: white;
    padding: 0.5rem 1.3rem; /* 减少上下内边距 */
    border-radius: 30px;
    font-weight: 800;
    font-size: var(--partproduct-cta-font-size); /* 使用根变量 */
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    min-width: 140px;
    box-sizing: border-box;
}

    .partproduct-hex-cta:hover[b-94y5gjzwcm] {
        background: color-mix(in srgb, var(--partproduct-h-color) 90%, white);
        padding-right: 1.5rem;
        transform: translateY(-2px);
    }

/* ===== 响应式设计 ===== */

/* 大屏幕 (1200px以上) */
@media (min-width: 1200px) {
    .partproduct-product-hex-grid[b-94y5gjzwcm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 中等屏幕 (992px-1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .partproduct-section-title[b-94y5gjzwcm] {
        font-size: 2rem;
    }

    .partproduct-hex-card[b-94y5gjzwcm] {
        min-height: 340px;
    }
}

/* 小屏幕 (768px-991px) */
@media (max-width: 991px) {
    .partproduct-product-family[b-94y5gjzwcm] {
        padding: 1.2rem 0;
    }

    .partproduct-section-title[b-94y5gjzwcm] {
        font-size: 1.8rem;
    }

    .partproduct-section-subtitle[b-94y5gjzwcm] {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .partproduct-hex-card[b-94y5gjzwcm] {
        padding: 1.2rem 1rem;
        min-height: 330px;
    }

    .partproduct-hex-header[b-94y5gjzwcm] {
        margin-bottom: 0.7rem;
        gap: 0.6rem;
    }

    .partproduct-hex-icon[b-94y5gjzwcm] {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 1.2rem;
    }


    .partproduct-hex-cta[b-94y5gjzwcm] {
        padding: 0.5rem 1.2rem;
    }
}

/* 平板及以下 (768px及以下) */
@media (max-width: 768px) {
    .partproduct-product-hex-grid[b-94y5gjzwcm] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }

    .partproduct-section-title[b-94y5gjzwcm] {
        font-size: 1.6rem;
    }

    .partproduct-hex-card[b-94y5gjzwcm] {
        padding: 1.1rem;
        min-height: auto;
    }

        .partproduct-hex-card h4[b-94y5gjzwcm] {
            white-space: normal;
        }

    .partproduct-hex-tagline[b-94y5gjzwcm] {
        white-space: normal;
    }
}

/* 小手机 (480px及以下) */
@media (max-width: 480px) {
    .partproduct-product-family[b-94y5gjzwcm] {
        padding: 1rem 0;
    }

    .partproduct-section-title[b-94y5gjzwcm] {
        font-size: 1.3rem;
    }

    .partproduct-section-subtitle[b-94y5gjzwcm] {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }

    .partproduct-hex-card[b-94y5gjzwcm] {
        padding: 1rem;
    }

    .partproduct-hex-header[b-94y5gjzwcm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .partproduct-hex-icon[b-94y5gjzwcm] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }
    /* 小手机字体保持不变，确保可读性 */
    :root[b-94y5gjzwcm] {
        --partproduct-h4-font-size: 1.4rem;
        --partproduct-tagline-font-size: 1.0rem;
        --partproduct-li-font-size: 0.9rem;
        --partproduct-cta-font-size: 0.9rem;
    }

    .partproduct-hex-card h4[b-94y5gjzwcm] {
        white-space: normal;
    }

    .partproduct-hex-tagline[b-94y5gjzwcm] {
        white-space: normal;
    }

    .partproduct-hex-card li[b-94y5gjzwcm] {
        line-height: 1.4;
    }

    .partproduct-hex-cta[b-94y5gjzwcm] {
        padding: 0.4rem 1rem;
        min-width: 120px;
    }
}

/* 超小手机 (360px及以下) */
@media (max-width: 360px) {
    .partproduct-section-title[b-94y5gjzwcm] {
        font-size: 1.2rem;
    }

    .partproduct-container[b-94y5gjzwcm] {
        padding: 0 15px;
    }

    .partproduct-product-hex-grid[b-94y5gjzwcm] {
        padding: 0;
    }

    .partproduct-hex-card[b-94y5gjzwcm] {
        padding: 0.9rem;
    }
    /* 超小手机字体保持不变 */
    :root[b-94y5gjzwcm] {
        --partproduct-h4-font-size: 1.2rem;
        --partproduct-tagline-font-size: 0.85rem;
        --partproduct-li-font-size: 0.85rem;
        --partproduct-cta-font-size: 0.85rem;
    }

    .partproduct-hex-card ul[b-94y5gjzwcm] {
        font-size: var(--partproduct-li-font-size);
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartProductEN.razor.rz.scp.css */
/* === PartProduct组件专用样式 - 使用partproduct-前缀 === */
/* 定义根字体大小，用于rem单位计算 */
:root[b-yqmayqmjcn] {
    --partproduct-h4-font-size: 1.4rem;
    --partproduct-tagline-font-size: 1.2rem;
    --partproduct-li-font-size: 1.0rem;
    --partproduct-cta-font-size: 1.1rem;
}

/* 产品家族容器 */
.partproduct-product-family[b-yqmayqmjcn] {
    background: #0f1419;
    padding: 1.0rem 0 1.0rem 0;
    width: 100%;
    box-sizing: border-box;
}

.partproduct-container[b-yqmayqmjcn] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 标题区域 */
.partproduct-section-title[b-yqmayqmjcn] {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: white;
}

    .partproduct-section-title span[b-yqmayqmjcn] {
        color: #2ed573;
    }

.partproduct-section-subtitle[b-yqmayqmjcn] {
    text-align: center;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 产品网格布局 */
.partproduct-product-hex-grid[b-yqmayqmjcn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* 产品卡片 */
.partproduct-hex-card[b-yqmayqmjcn] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 20px;
    padding: 1.3rem 1.2rem 0.8rem 1.2rem; /* 进一步减少上下内边距 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    border-top: 6px solid var(--partproduct-h-color);
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 340px; /* 进一步减少最小高度 */
    box-sizing: border-box;
}

    .partproduct-hex-card:hover[b-yqmayqmjcn] {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--partproduct-h-color);
    }

/* 卡片内部 */
.partproduct-hex-inner[b-yqmayqmjcn] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 卡片头部区域：图标、标题、标语 */
.partproduct-hex-header[b-yqmayqmjcn] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.7rem; /* 减少与下方内容的间距 */
    flex-wrap: nowrap;
    gap: 0.8rem;
}

/* 图标 */
.partproduct-hex-icon[b-yqmayqmjcn] {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--partproduct-h-color), color-mix(in srgb, var(--partproduct-h-color) 80%, black));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 标题包装器 */
.partproduct-hex-title-wrapper[b-yqmayqmjcn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* 标题 - 使用根变量，大屏幕适当增大 */
.partproduct-hex-card h4[b-yqmayqmjcn] {
    color: white;
    font-size: var(--partproduct-h4-font-size);
    margin-bottom: 0.3rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标语 - 使用根变量，增大字体 */
.partproduct-hex-tagline[b-yqmayqmjcn] {
    color: var(--partproduct-h-color);
    font-weight: 700;
    font-size: var(--partproduct-tagline-font-size);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 特征列表 */
.partproduct-hex-card ul[b-yqmayqmjcn] {
    list-style: none;
    padding-left: 0;
    font-size: var(--partproduct-li-font-size); /* 使用根变量 */
    color: #cbd5e1;
    margin-bottom: 0.8rem; /* 减少与CTA的间距 */
    flex-grow: 1;
    box-sizing: border-box;
}

.partproduct-hex-card li[b-yqmayqmjcn] {
    margin-bottom: 0.6rem;
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
}

    .partproduct-hex-card li[b-yqmayqmjcn]::before {
        content: '▸';
        position: absolute;
        left: 0;
        color: var(--partproduct-h-color);
        font-weight: bold;
    }

/* CTA包装器 */
.partproduct-hex-cta-wrapper[b-yqmayqmjcn] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 0rem; /* 进一步减少与上方内容的间距 */
}

/* 行动按钮 */
.partproduct-hex-cta[b-yqmayqmjcn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--partproduct-h-color);
    color: white;
    padding: 0.5rem 1.3rem; /* 减少上下内边距 */
    border-radius: 30px;
    font-weight: 800;
    font-size: var(--partproduct-cta-font-size); /* 使用根变量 */
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    min-width: 140px;
    box-sizing: border-box;
}

    .partproduct-hex-cta:hover[b-yqmayqmjcn] {
        background: color-mix(in srgb, var(--partproduct-h-color) 90%, white);
        padding-right: 1.5rem;
        transform: translateY(-2px);
    }

/* ===== 响应式设计 ===== */

/* 大屏幕 (1200px以上) */
@media (min-width: 1200px) {
    .partproduct-product-hex-grid[b-yqmayqmjcn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 中等屏幕 (992px-1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .partproduct-section-title[b-yqmayqmjcn] {
        font-size: 2rem;
    }

    .partproduct-hex-card[b-yqmayqmjcn] {
        min-height: 340px;
    }
}

/* 小屏幕 (768px-991px) */
@media (max-width: 991px) {
    .partproduct-product-family[b-yqmayqmjcn] {
        padding: 1.2rem 0;
    }

    .partproduct-section-title[b-yqmayqmjcn] {
        font-size: 1.8rem;
    }

    .partproduct-section-subtitle[b-yqmayqmjcn] {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .partproduct-hex-card[b-yqmayqmjcn] {
        padding: 1.2rem 1rem;
        min-height: 330px;
    }

    .partproduct-hex-header[b-yqmayqmjcn] {
        margin-bottom: 0.7rem;
        gap: 0.6rem;
    }

    .partproduct-hex-icon[b-yqmayqmjcn] {
        width: 45px;
        height: 45px;
        min-width: 45px;
        font-size: 1.2rem;
    }


    .partproduct-hex-cta[b-yqmayqmjcn] {
        padding: 0.5rem 1.2rem;
    }
}

/* 平板及以下 (768px及以下) */
@media (max-width: 768px) {
    .partproduct-product-hex-grid[b-yqmayqmjcn] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }

    .partproduct-section-title[b-yqmayqmjcn] {
        font-size: 1.6rem;
    }

    .partproduct-hex-card[b-yqmayqmjcn] {
        padding: 1.1rem;
        min-height: auto;
    }

        .partproduct-hex-card h4[b-yqmayqmjcn] {
            white-space: normal;
        }

    .partproduct-hex-tagline[b-yqmayqmjcn] {
        white-space: normal;
    }
}

/* 小手机 (480px及以下) */
@media (max-width: 480px) {
    .partproduct-product-family[b-yqmayqmjcn] {
        padding: 1rem 0;
    }

    .partproduct-section-title[b-yqmayqmjcn] {
        font-size: 1.3rem;
    }

    .partproduct-section-subtitle[b-yqmayqmjcn] {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }

    .partproduct-hex-card[b-yqmayqmjcn] {
        padding: 1rem;
    }

    .partproduct-hex-header[b-yqmayqmjcn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .partproduct-hex-icon[b-yqmayqmjcn] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }
    /* 小手机字体保持不变，确保可读性 */
    :root[b-yqmayqmjcn] {
        --partproduct-h4-font-size: 1.4rem;
        --partproduct-tagline-font-size: 1.0rem;
        --partproduct-li-font-size: 0.9rem;
        --partproduct-cta-font-size: 0.9rem;
    }

    .partproduct-hex-card h4[b-yqmayqmjcn] {
        white-space: normal;
    }

    .partproduct-hex-tagline[b-yqmayqmjcn] {
        white-space: normal;
    }

    .partproduct-hex-card li[b-yqmayqmjcn] {
        line-height: 1.4;
    }

    .partproduct-hex-cta[b-yqmayqmjcn] {
        padding: 0.4rem 1rem;
        min-width: 120px;
    }
}

/* 超小手机 (360px及以下) */
@media (max-width: 360px) {
    .partproduct-section-title[b-yqmayqmjcn] {
        font-size: 1.2rem;
    }

    .partproduct-container[b-yqmayqmjcn] {
        padding: 0 15px;
    }

    .partproduct-product-hex-grid[b-yqmayqmjcn] {
        padding: 0;
    }

    .partproduct-hex-card[b-yqmayqmjcn] {
        padding: 0.9rem;
    }
    /* 超小手机字体保持不变 */
    :root[b-yqmayqmjcn] {
        --partproduct-h4-font-size: 1.2rem;
        --partproduct-tagline-font-size: 0.85rem;
        --partproduct-li-font-size: 0.85rem;
        --partproduct-cta-font-size: 0.85rem;
    }

    .partproduct-hex-card ul[b-yqmayqmjcn] {
        font-size: var(--partproduct-li-font-size);
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartTitle.razor.rz.scp.css */
/* === PartTitle组件专用样式 - 使用parttitle-前缀 === */
/* 基础重置与容器 */
.parttitle-hero-leaf-compact[b-vaik0mji2z] {
    position: relative;
    background: linear-gradient(145deg, #0a3d1c, #0f2b1a);
    color: white;
    padding: 0.8rem 0 0.5rem 0;
    text-align: center;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.parttitle-container[b-vaik0mji2z] {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
}

.parttitle-hero-content-compact[b-vaik0mji2z] {
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 树叶浮动动画 */
.parttitle-leaf-animation-container[b-vaik0mji2z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.parttitle-floating-leaf[b-vaik0mji2z] {
    position: absolute;
    color: rgba(102, 255, 102, 0.4);
    opacity: 0.8;
    animation: parttitle-float-gently-b-vaik0mji2z 16s infinite ease-in-out;
}

.parttitle-leaf-svg[b-vaik0mji2z] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

@keyframes parttitle-float-gently-b-vaik0mji2z {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(6deg);
    }

    50% {
        transform: translateY(15px) rotate(-4deg);
    }

    75% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* ===== 描述段落 ===== */
.parttitle-lead-container[b-vaik0mji2z] {
    width: 100%;
    margin: 0 auto 0.6rem;
    box-sizing: border-box;
}

.parttitle-lead-text[b-vaik0mji2z] {
    /* 基础字体大小 - 大屏幕 */
    font-size: 1.5rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    word-break: keep-all;
    white-space: normal;
    box-sizing: border-box;
}

    .parttitle-lead-text strong[b-vaik0mji2z] {
        color: #FFC107;
        font-weight: 700;
    }

/* ===== 标签区域 ===== */
.parttitle-tags-container[b-vaik0mji2z] {
    width: 100%;
    overflow-x: visible;
    margin-top: 0.2rem;
    margin-bottom: 0;
    box-sizing: border-box;
}

.parttitle-tags-inner[b-vaik0mji2z] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    padding: 0.15rem 0.9rem;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.parttitle-tag[b-vaik0mji2z] {
    padding: 0.25rem 0.8rem;
    border-radius: 30px;
    font-weight: 700;
    /* 基础字体大小 - 大屏幕 */
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

    .parttitle-tag:hover[b-vaik0mji2z] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .parttitle-tag i[b-vaik0mji2z] {
        font-size: 0.8rem;
    }

/* 标签颜色 */
.parttitle-tag-1[b-vaik0mji2z] {
    background: linear-gradient(135deg, #8B0000, #B22222);
}

.parttitle-tag-2[b-vaik0mji2z] {
    background: linear-gradient(135deg, #00008B, #1E90FF);
}

.parttitle-tag-3[b-vaik0mji2z] {
    background: linear-gradient(135deg, #2F2F2F, #4A4A4A);
}

.parttitle-tag-4[b-vaik0mji2z] {
    background: linear-gradient(135deg, #4B0082, #8A2BE2);
}

/* ===== 响应式设计 - 简化版 ===== */

/* 大屏幕 (1200px以上) - 保持原有样式 */
@media (min-width: 1200px) {
    .parttitle-lead-text[b-vaik0mji2z] {
        font-size: 1.5rem;
        padding: 0 20px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
    }
}

/* 平板屏幕 (768px-1199px) - 字体缩小到70% */
@media (max-width: 1199px) and (min-width: 768px) {
    .parttitle-lead-text[b-vaik0mji2z] {
        font-size: 1.05rem; /* 1.5rem * 0.7 = 1.05rem */
        line-height: 1.3;
        padding: 0 15px;
    }

    .parttitle-tag[b-vaik0mji2z] {
        font-size: 0.77rem; /* 1.1rem * 0.7 = 0.77rem */
        padding: 0.2rem 0.7rem;
    }

    .parttitle-tags-inner[b-vaik0mji2z] {
        gap: 0.3rem;
        padding: 0.1rem 0.7rem;
    }

    .parttitle-floating-leaf[b-vaik0mji2z] {
        opacity: 0.6; /* 稍微降低不透明度以适应小屏幕 */
    }
}

/* 手机屏幕 (767px及以下) - 字体缩小到70%，标签可滚动 */
@media (max-width: 767px) {
    .parttitle-lead-text[b-vaik0mji2z] {
        font-size: 1.05rem; /* 1.5rem * 0.7 = 1.05rem */
        line-height: 1.2;
        padding: 0 5px;
        margin-bottom: 0.3rem;
        white-space: normal;
    }

    .parttitle-tag[b-vaik0mji2z] {
        font-size: 0.77rem; /* 1.1rem * 0.7 = 0.77rem */
        padding: 0.15rem 0.6rem;
    }

    .parttitle-tags-inner[b-vaik0mji2z] {
        gap: 0.2rem;
        padding: 0.1rem 0.6rem;
    }

    .parttitle-floating-leaf[b-vaik0mji2z] {
        opacity: 0.25; /* 进一步降低不透明度，减少干扰 */
    }

    .parttitle-tags-container[b-vaik0mji2z] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1px;
    }

    .parttitle-tags-inner[b-vaik0mji2z] {
        justify-content: flex-start;
        min-width: min-content;
    }

    .parttitle-tags-container[b-vaik0mji2z]::-webkit-scrollbar {
        height: 1px;
    }

    .parttitle-tags-container[b-vaik0mji2z]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 1px;
    }
}
/* _content/LEAFBlazorApp25/Components/WebHome/PartIntroduce/PartTitleEN.razor.rz.scp.css */
/* === PartTitle组件专用样式 - 使用parttitle-前缀 === */
/* 基础重置与容器 */
.parttitle-hero-leaf-compact[b-116uan467z] {
    position: relative;
    background: linear-gradient(145deg, #0a3d1c, #0f2b1a);
    color: white;
    padding: 0.8rem 0 0.5rem 0;
    text-align: center;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.parttitle-container[b-116uan467z] {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
}

.parttitle-hero-content-compact[b-116uan467z] {
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%; /* 确保内容容器占满宽度 */
}

/* 树叶浮动动画 */
.parttitle-leaf-animation-container[b-116uan467z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.parttitle-floating-leaf[b-116uan467z] {
    position: absolute;
    color: rgba(102, 255, 102, 0.4);
    opacity: 0.8;
    animation: parttitle-float-gently-b-116uan467z 16s infinite ease-in-out;
}

.parttitle-leaf-svg[b-116uan467z] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

@keyframes parttitle-float-gently-b-116uan467z {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(6deg);
    }

    50% {
        transform: translateY(15px) rotate(-4deg);
    }

    75% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* ===== 描述段落 ===== */
.parttitle-lead-container[b-116uan467z] {
    width: 100%;
    margin: 0 auto 0.6rem;
    box-sizing: border-box;
}

.parttitle-lead-text[b-116uan467z] {
    /* 基础字体大小 - 大屏幕 */
    font-size: 1.5rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    word-break: normal;
    white-space: normal;
    box-sizing: border-box;
    text-align: center;
    width: 100%; /* 确保占满宽度 */
    display: block;
}

    .parttitle-lead-text strong[b-116uan467z] {
        color: #FFC107;
        font-weight: 700;
    }

/* ===== 标签区域 ===== */
.parttitle-tags-container[b-116uan467z] {
    width: 100%;
    overflow-x: visible;
    margin-top: 0.2rem;
    margin-bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* 确保标签容器居中 */
}

.parttitle-tags-inner[b-116uan467z] {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    padding: 0.15rem 0.9rem;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.parttitle-tag[b-116uan467z] {
    padding: 0.25rem 0.8rem;
    border-radius: 30px;
    font-weight: 700;
    /* 基础字体大小 - 大屏幕 */
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

    .parttitle-tag:hover[b-116uan467z] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .parttitle-tag i[b-116uan467z] {
        font-size: 0.8rem;
    }

/* 标签颜色 */
.parttitle-tag-1[b-116uan467z] {
    background: linear-gradient(135deg, #8B0000, #B22222);
}

.parttitle-tag-2[b-116uan467z] {
    background: linear-gradient(135deg, #00008B, #1E90FF);
}

.parttitle-tag-3[b-116uan467z] {
    background: linear-gradient(135deg, #2F2F2F, #4A4A4A);
}

.parttitle-tag-4[b-116uan467z] {
    background: linear-gradient(135deg, #4B0082, #8A2BE2);
}

/* ===== 响应式设计 - 简化版 ===== */

/* 大屏幕 (1200px以上) - 保持原有样式 */
@media (min-width: 1200px) {
    .parttitle-lead-text[b-116uan467z] {
        font-size: 1.5rem;
        padding: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        /* 为了确保英文文本占满宽度，可以适当增加letter-spacing */
        letter-spacing: 0.2px;
    }

    /* 确保标签在大屏幕上居中 */
    .parttitle-tags-inner[b-116uan467z] {
        gap: 0.6rem;
        padding: 0.2rem 1rem;
    }
}

/* 平板屏幕 (768px-1199px) - 字体缩小到70% */
@media (max-width: 1199px) and (min-width: 768px) {
    .parttitle-lead-text[b-116uan467z] {
        font-size: 1.2rem; /* 稍微调整，使文本更容易占满宽度 */
        line-height: 1.3;
        padding: 0 10px; /* 增加一些内边距避免贴边 */
        width: 100%;
        max-width: 100%;
    }

    .parttitle-tag[b-116uan467z] {
        font-size: 0.9rem; /* 调整为0.9rem，比0.77rem稍大 */
        padding: 0.2rem 0.7rem;
    }

    .parttitle-tags-inner[b-116uan467z] {
        gap: 0.4rem;
        padding: 0.15rem 0.8rem;
    }

    .parttitle-floating-leaf[b-116uan467z] {
        opacity: 0.6; /* 稍微降低不透明度以适应小屏幕 */
    }
}

/* 手机屏幕 (767px及以下) - 字体缩小到70%，标签可滚动 */
@media (max-width: 767px) {
    .parttitle-lead-text[b-116uan467z] {
        font-size: 1.1rem; /* 调整为1.1rem，比1.05rem稍大 */
        line-height: 1.25;
        padding: 0 5px;
        margin-bottom: 0.3rem;
        white-space: normal;
        width: 100%;
        max-width: 100%;
        letter-spacing: 0.1px; /* 轻微字母间距帮助占满宽度 */
    }

    .parttitle-tag[b-116uan467z] {
        font-size: 0.9rem; /* 调整为0.9rem */
        padding: 0.18rem 0.65rem;
    }

    .parttitle-tags-inner[b-116uan467z] {
        gap: 0.3rem;
        padding: 0.12rem 0.7rem;
    }

    .parttitle-floating-leaf[b-116uan467z] {
        opacity: 0.25; /* 进一步降低不透明度，减少干扰 */
    }

    .parttitle-tags-container[b-116uan467z] {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1px;
        justify-content: flex-start; /* 手机屏幕允许横向滚动 */
    }

    .parttitle-tags-inner[b-116uan467z] {
        justify-content: flex-start;
        min-width: min-content;
        flex-wrap: nowrap;
    }

    .parttitle-tags-container[b-116uan467z]::-webkit-scrollbar {
        height: 1px;
    }

    .parttitle-tags-container[b-116uan467z]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 1px;
    }
}

/* 超小手机屏幕 (480px及以下) */
@media (max-width: 480px) {
    .parttitle-lead-text[b-116uan467z] {
        font-size: 1.0rem;
        line-height: 1.2;
        padding: 0 3px;
    }

    .parttitle-tag[b-116uan467z] {
        font-size: 0.85rem;
        padding: 0.15rem 0.6rem;
    }

    .parttitle-tags-inner[b-116uan467z] {
        gap: 0.25rem;
        padding: 0.1rem 0.6rem;
    }
}
/* _content/LEAFBlazorApp25/Components/WeChatSenparc/Pages/WeChatAuth.razor.rz.scp.css */
/* WeChatAuth.razor.css - 微信认证组件样式 */
.modal-overlay[b-c5dpvjh0fj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-c5dpvjh0fj] {
    background: white;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.wechat-auth-container[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 400px;
    max-width: 600px;
    margin: 20px auto;
    position: relative;
}

.auth-header[b-c5dpvjh0fj] {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.auth-title[b-c5dpvjh0fj] {
    color: #333;
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-wechat[b-c5dpvjh0fj] {
    color: #07c160;
    font-size: 1.8rem;
}

.btn-close[b-c5dpvjh0fj] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
}

    .btn-close:hover[b-c5dpvjh0fj] {
        color: #ff4444;
    }

.auth-content[b-c5dpvjh0fj] {
    background: white;
    padding: 30px;
}

/* 状态指示器 */
.status-indicator[b-c5dpvjh0fj] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    gap: 10px;
}

.status-step[b-c5dpvjh0fj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-number[b-c5dpvjh0fj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.status-step.active .step-number[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step-label[b-c5dpvjh0fj] {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

.status-line[b-c5dpvjh0fj] {
    width: 80px;
    height: 2px;
    background: #e0e0e0;
    margin: 0 10px;
    transition: all 0.3s ease;
}

    .status-line.active[b-c5dpvjh0fj] {
        background: linear-gradient(90deg, #764ba2, #667eea);
    }

/* 步骤内容 */
.step-content[b-c5dpvjh0fj] {
    min-height: 300px;
}

.step-title[b-c5dpvjh0fj] {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.step-description[b-c5dpvjh0fj] {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* 表单组 */
.form-group[b-c5dpvjh0fj] {
    margin-bottom: 25px;
}

.form-label[b-c5dpvjh0fj] {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.radio-group[b-c5dpvjh0fj] {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
}

.radio-label[b-c5dpvjh0fj] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .radio-label input[type="radio"][b-c5dpvjh0fj] {
        margin: 0;
    }

.form-text[b-c5dpvjh0fj] {
    color: #888;
    font-size: 0.9rem;
    margin-top: 5px;
    display: block;
}

/* 按钮 */
.auth-buttons[b-c5dpvjh0fj] {
    display: flex;
    gap: 15px;
    margin: 30px 0;
}

.btn-auth[b-c5dpvjh0fj] {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-primary[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

    .btn-primary:hover[b-c5dpvjh0fj] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

.btn-secondary[b-c5dpvjh0fj] {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

    .btn-secondary:hover[b-c5dpvjh0fj] {
        background: #e8e8e8;
    }

/* 二维码容器 */
.qr-code-container[b-c5dpvjh0fj] {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.qr-code[b-c5dpvjh0fj] {
    margin: 20px auto;
    padding: 10px;
    background: white;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .qr-code img[b-c5dpvjh0fj] {
        width: 200px;
        height: 200px;
    }

.qr-tip[b-c5dpvjh0fj] {
    color: #666;
    margin: 10px 0;
    font-size: 0.9rem;
}

.btn-copy[b-c5dpvjh0fj] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto;
}

    .btn-copy:hover[b-c5dpvjh0fj] {
        background: #45a049;
    }

/* JSSDK配置 */
.jssdk-config[b-c5dpvjh0fj] {
    background: #f0f8ff;
    border: 1px solid #cce7ff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.config-info[b-c5dpvjh0fj] {
    background: white;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.config-item[b-c5dpvjh0fj] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .config-item:last-child[b-c5dpvjh0fj] {
        border-bottom: none;
        margin-bottom: 0;
    }

.item-label[b-c5dpvjh0fj] {
    min-width: 120px;
    color: #333;
    font-weight: 500;
}

.item-value[b-c5dpvjh0fj] {
    flex: 1;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    word-break: break-all;
}

.truncate[b-c5dpvjh0fj] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 用户信息卡片 */
.user-info-card[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 25px;
    color: white;
    margin: 30px 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.user-avatar[b-c5dpvjh0fj] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

    .user-avatar img[b-c5dpvjh0fj] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.user-details[b-c5dpvjh0fj] {
    flex: 1;
}

.user-name[b-c5dpvjh0fj] {
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gender[b-c5dpvjh0fj] {
    font-size: 1.2rem;
    opacity: 0.8;
}

    .gender.male[b-c5dpvjh0fj] {
        color: #4dabf7;
    }

    .gender.female[b-c5dpvjh0fj] {
        color: #f783ac;
    }

.user-id[b-c5dpvjh0fj] {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.id-label[b-c5dpvjh0fj] {
    opacity: 0.9;
}

.id-value[b-c5dpvjh0fj] {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.user-location[b-c5dpvjh0fj] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.icon-location[b-c5dpvjh0fj] {
    font-size: 1rem;
}

/* 特权列表 */
.privileges[b-c5dpvjh0fj] {
    margin-top: 30px;
}

.privilege-list[b-c5dpvjh0fj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.privilege-badge[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.no-privilege[b-c5dpvjh0fj] {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 15px;
}

/* 空状态 */
.user-info-empty[b-c5dpvjh0fj] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

    .user-info-empty .icon-user[b-c5dpvjh0fj] {
        font-size: 4rem;
        color: #ccc;
        margin-bottom: 20px;
        display: block;
    }

/* 步骤操作按钮 */
.step-actions[b-c5dpvjh0fj] {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.btn-prev[b-c5dpvjh0fj], .btn-next[b-c5dpvjh0fj] {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-prev[b-c5dpvjh0fj] {
    background: #f5f5f5;
    color: #333;
}

    .btn-prev:hover[b-c5dpvjh0fj] {
        background: #e8e8e8;
    }

.btn-next[b-c5dpvjh0fj] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

    .btn-next:hover:not(:disabled)[b-c5dpvjh0fj] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    .btn-next:disabled[b-c5dpvjh0fj] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* 成功消息 */
.success-message[b-c5dpvjh0fj] {
    text-align: center;
    padding: 40px 20px;
}

.icon-success[b-c5dpvjh0fj] {
    font-size: 5rem;
    color: #4CAF50;
    margin-bottom: 20px;
    display: block;
}

.success-actions[b-c5dpvjh0fj] {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 40px;
}

    .success-actions button[b-c5dpvjh0fj] {
        padding: 12px 30px;
        min-width: 150px;
    }

/* 错误消息 */
.error-message[b-c5dpvjh0fj] {
    background: #ffebee;
    color: #c62828;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #c62828;
}

.icon-error[b-c5dpvjh0fj] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-close-error[b-c5dpvjh0fj] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #c62828;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

/* 加载遮罩 */
.loading-overlay[b-c5dpvjh0fj] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}

.loading-spinner[b-c5dpvjh0fj] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin-b-c5dpvjh0fj 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-c5dpvjh0fj {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 图标字体（简单示例，实际可使用图标库） */
.icon-wechat[b-c5dpvjh0fj]::before {
    content: "W";
}

.icon-qrcode[b-c5dpvjh0fj]::before {
    content: "Q";
}

.icon-js[b-c5dpvjh0fj]::before {
    content: "JS";
}

.icon-copy[b-c5dpvjh0fj]::before {
    content: "C";
}

.icon-arrow-right[b-c5dpvjh0fj]::before {
    content: "→";
}

.icon-arrow-left[b-c5dpvjh0fj]::before {
    content: "←";
}

.icon-check[b-c5dpvjh0fj]::before {
    content: "✓";
}

.icon-home[b-c5dpvjh0fj]::before {
    content: "H";
}

.icon-refresh[b-c5dpvjh0fj]::before {
    content: "↻";
}

.icon-user[b-c5dpvjh0fj]::before {
    content: "U";
}

.icon-location[b-c5dpvjh0fj]::before {
    content: "📍";
}

.icon-success[b-c5dpvjh0fj]::before {
    content: "✓";
}

.icon-error[b-c5dpvjh0fj]::before {
    content: "!";
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wechat-auth-container[b-c5dpvjh0fj] {
        margin: 10px;
        min-width: auto;
    }

    .auth-content[b-c5dpvjh0fj] {
        padding: 20px;
    }

    .auth-buttons[b-c5dpvjh0fj] {
        flex-direction: column;
    }

    .user-info-card[b-c5dpvjh0fj] {
        flex-direction: column;
        text-align: center;
    }

    .step-actions[b-c5dpvjh0fj] {
        flex-direction: column;
        gap: 15px;
    }

    .success-actions[b-c5dpvjh0fj] {
        flex-direction: column;
    }
}
/* _content/LEAFBlazorApp25/Components/WeChatSenparc/Pages/WeChatMessage.razor.rz.scp.css */
/* WeChatMessage.razor.css - 微信消息组件样式 */
.modal-overlay[b-sptqkvofbc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

    .modal-overlay > *[b-sptqkvofbc] {
        max-width: 90%;
        max-height: 90%;
        overflow: auto;
    }

.wechat-message-container[b-sptqkvofbc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    min-width: 500px;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.message-header[b-sptqkvofbc] {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.message-title[b-sptqkvofbc] {
    color: #764ba2;
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-message[b-sptqkvofbc] {
    color: #07c160;
    font-size: 1.8rem;
}

.btn-close[b-sptqkvofbc] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
}

    .btn-close:hover[b-sptqkvofbc] {
        color: #ff4444;
    }

.message-content[b-sptqkvofbc] {
    background: #f8fafc;
    padding: 30px;
    min-height: 600px;
}

/* 消息发送 */
.message-send-section[b-sptqkvofbc] {
    margin-bottom: 30px;
}

.section-title[b-sptqkvofbc] {
    color: #764ba2;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.message-type-tabs[b-sptqkvofbc] {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tabs-header[b-sptqkvofbc] {
    display: flex;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.tab[b-sptqkvofbc] {
    flex: 1;
    padding: 15px 20px;
    background: none;
    border: none;
    border-right: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #64748b;
    transition: all 0.3s ease;
}

    .tab:last-child[b-sptqkvofbc] {
        border-right: none;
    }

    .tab:hover[b-sptqkvofbc] {
        background: #e2e8f0;
        color: #475569;
    }

    .tab.active[b-sptqkvofbc] {
        background: white;
        color: #764ba2;
        font-weight: 500;
        border-bottom: 2px solid #764ba2;
    }

.tabs-content[b-sptqkvofbc] {
    padding: 25px;
}

/* 文本消息表单 */
.text-message-form .form-group[b-sptqkvofbc] {
    margin-bottom: 20px;
}

.form-label[b-sptqkvofbc] {
    display: block;
    margin-bottom: 8px;
    color: #4a5568;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control[b-sptqkvofbc] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

    .form-control:focus[b-sptqkvofbc] {
        outline: none;
        border-color: #764ba2;
        box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
    }

.char-count[b-sptqkvofbc] {
    text-align: right;
    margin-top: 5px;
    color: #64748b;
    font-size: 0.85rem;
}

.form-actions[b-sptqkvofbc] {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.btn-primary[b-sptqkvofbc] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

    .btn-primary:hover:not(:disabled)[b-sptqkvofbc] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:disabled[b-sptqkvofbc] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* 模板消息表单 */
.form-row[b-sptqkvofbc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.template-select[b-sptqkvofbc] {
    display: flex;
    gap: 10px;
}

    .template-select .form-control[b-sptqkvofbc] {
        flex: 1;
    }

.btn-secondary[b-sptqkvofbc] {
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #cbd5e0;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-secondary:hover[b-sptqkvofbc] {
        background: #e2e8f0;
    }

.template-data-editor[b-sptqkvofbc] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 15px;
}

.data-items[b-sptqkvofbc] {
    margin-bottom: 15px;
}

.data-item[b-sptqkvofbc] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

    .data-item .form-control[b-sptqkvofbc] {
        flex: 1;
    }

.color-picker[b-sptqkvofbc] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-remove[b-sptqkvofbc] {
    background: #fed7d7;
    color: #c53030;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-remove:hover[b-sptqkvofbc] {
        background: #feb2b2;
    }

.btn-add[b-sptqkvofbc] {
    background: #c6f6d5;
    color: #22543d;
    border: 1px solid #9ae6b4;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .btn-add:hover[b-sptqkvofbc] {
        background: #9ae6b4;
    }

/* 素材上传 */
.media-upload-section[b-sptqkvofbc] {
    text-align: center;
}

.upload-area[b-sptqkvofbc] {
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 40px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
}

    .upload-area:hover[b-sptqkvofbc], .upload-area.drag-over[b-sptqkvofbc] {
        border-color: #764ba2;
        background: rgba(118, 75, 162, 0.05);
    }

.upload-icon[b-sptqkvofbc] {
    font-size: 3rem;
    color: #a0aec0;
    margin-bottom: 15px;
}

.upload-area h5[b-sptqkvofbc] {
    margin: 0 0 10px 0;
    color: #4a5568;
}

.upload-area p[b-sptqkvofbc] {
    margin: 0 0 20px 0;
    color: #718096;
}

.file-input[b-sptqkvofbc] {
    display: none;
}

.media-type-select[b-sptqkvofbc] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}

    .media-type-select .form-control[b-sptqkvofbc] {
        width: 200px;
    }

.upload-result[b-sptqkvofbc] {
    background: #c6f6d5;
    border: 1px solid #9ae6b4;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: left;
}

.result-success[b-sptqkvofbc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #22543d;
}

.media-info[b-sptqkvofbc] {
    background: white;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.info-item[b-sptqkvofbc] {
    display: flex;
    margin-bottom: 10px;
}

    .info-item:last-child[b-sptqkvofbc] {
        margin-bottom: 0;
    }

    .info-item span:first-child[b-sptqkvofbc] {
        min-width: 80px;
        color: #4a5568;
        font-weight: 500;
    }

.btn-copy[b-sptqkvofbc] {
    background: #4a5568;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .btn-copy:hover[b-sptqkvofbc] {
        background: #2d3748;
    }

/* 消息记录 */
.message-history-section[b-sptqkvofbc] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-list[b-sptqkvofbc] {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.empty-state[b-sptqkvofbc] {
    text-align: center;
    padding: 40px 20px;
    color: #a0aec0;
}

    .empty-state .icon-history[b-sptqkvofbc] {
        font-size: 3rem;
        margin-bottom: 15px;
        display: block;
    }

.message-item[b-sptqkvofbc] {
    background: #f8fafc;
    border-left: 4px solid #07c160;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
}

    .message-item.error[b-sptqkvofbc] {
        border-left-color: #e53e3e;
    }

.message-header[b-sptqkvofbc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.message-type[b-sptqkvofbc] {
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

.message-time[b-sptqkvofbc] {
    color: #718096;
    font-size: 0.85rem;
}

.message-status[b-sptqkvofbc] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

    .message-status.success[b-sptqkvofbc] {
        background: #c6f6d5;
        color: #22543d;
    }

    .message-status.error[b-sptqkvofbc] {
        background: #fed7d7;
        color: #c53030;
    }

.content-preview[b-sptqkvofbc] {
    margin-bottom: 10px;
    color: #4a5568;
    line-height: 1.5;
}

.message-recipient[b-sptqkvofbc] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.message-error[b-sptqkvofbc] {
    background: #fed7d7;
    color: #c53030;
    padding: 8px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.9rem;
}

/* 错误提示 */
.error-message-global[b-sptqkvofbc] {
    background: #fed7d7;
    color: #c53030;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #c53030;
}

.btn-close-error[b-sptqkvofbc] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #c53030;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

/* 加载遮罩 */
.loading-overlay[b-sptqkvofbc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}

.loading-spinner[b-sptqkvofbc] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #764ba2;
    border-radius: 50%;
    animation: spin-b-sptqkvofbc 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-sptqkvofbc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 图标字体 */
.icon-message[b-sptqkvofbc]::before {
    content: "💬";
}

.icon-text[b-sptqkvofbc]::before {
    content: "📝";
}

.icon-template[b-sptqkvofbc]::before {
    content: "📄";
}

.icon-media[b-sptqkvofbc]::before {
    content: "🖼️";
}

.icon-send[b-sptqkvofbc]::before {
    content: "📤";
}

.icon-plus[b-sptqkvofbc]::before {
    content: "➕";
}

.icon-upload[b-sptqkvofbc]::before {
    content: "📎";
}

.icon-success[b-sptqkvofbc]::before {
    content: "✅";
}

.icon-error[b-sptqkvofbc]::before {
    content: "❌";
}

.icon-history[b-sptqkvofbc]::before {
    content: "📋";
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wechat-message-container[b-sptqkvofbc] {
        margin: 10px;
        min-width: auto;
    }

    .message-content[b-sptqkvofbc] {
        padding: 20px;
    }

    .tabs-header[b-sptqkvofbc] {
        flex-direction: column;
    }

    .tab[b-sptqkvofbc] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .form-row[b-sptqkvofbc] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .template-select[b-sptqkvofbc] {
        flex-direction: column;
    }

    .data-item[b-sptqkvofbc] {
        flex-direction: column;
        align-items: stretch;
    }

    .color-picker[b-sptqkvofbc] {
        align-self: flex-start;
    }

    .message-header[b-sptqkvofbc] {
        flex-wrap: wrap;
        gap: 5px;
    }
}
/* _content/LEAFBlazorApp25/Components/WeChatSenparc/Pages/WeChatPay.razor.rz.scp.css */
/* WeChatPay.razor.css - 微信支付组件样式 */
.modal-overlay[b-i9xgwdvl1u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

    .modal-overlay > *[b-i9xgwdvl1u] {
        max-width: 90%;
        max-height: 90%;
        overflow: auto;
    }

.wechat-pay-container[b-i9xgwdvl1u] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    min-width: 500px;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.pay-header[b-i9xgwdvl1u] {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pay-title[b-i9xgwdvl1u] {
    color: #2a5298;
    margin: 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-payment[b-i9xgwdvl1u] {
    color: #07c160;
    font-size: 1.8rem;
}

.btn-close[b-i9xgwdvl1u] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
}

    .btn-close:hover[b-i9xgwdvl1u] {
        color: #ff4444;
    }

.pay-content[b-i9xgwdvl1u] {
    background: #f8fafc;
    padding: 30px;
    min-height: 600px;
}

/* 支付方式选择 */
.pay-method-section[b-i9xgwdvl1u] {
    margin-bottom: 30px;
}

.section-title[b-i9xgwdvl1u] {
    color: #2a5298;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.method-cards[b-i9xgwdvl1u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.method-card[b-i9xgwdvl1u] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .method-card:hover[b-i9xgwdvl1u] {
        border-color: #cbd5e0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .method-card.active[b-i9xgwdvl1u] {
        border-color: #07c160;
        background: linear-gradient(135deg, #07c16015, #07c16005);
        box-shadow: 0 4px 12px rgba(7, 193, 96, 0.2);
    }

.method-icon[b-i9xgwdvl1u] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

    .method-icon.jsapi[b-i9xgwdvl1u] {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }

    .method-icon.native[b-i9xgwdvl1u] {
        background: linear-gradient(135deg, #f093fb, #f5576c);
        color: white;
    }

    .method-icon.mweb[b-i9xgwdvl1u] {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
        color: white;
    }

.method-info h5[b-i9xgwdvl1u] {
    margin: 0 0 5px 0;
    color: #2d3748;
    font-size: 1rem;
}

.method-info p[b-i9xgwdvl1u] {
    margin: 0;
    color: #718096;
    font-size: 0.85rem;
}

/* 支付表单 */
.pay-form-section[b-i9xgwdvl1u] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-grid[b-i9xgwdvl1u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.form-group[b-i9xgwdvl1u] {
    margin-bottom: 0;
}

    .form-group.full-width[b-i9xgwdvl1u] {
        grid-column: 1 / -1;
    }

.form-label[b-i9xgwdvl1u] {
    display: block;
    margin-bottom: 8px;
    color: #4a5568;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control[b-i9xgwdvl1u] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

    .form-control:focus[b-i9xgwdvl1u] {
        outline: none;
        border-color: #07c160;
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
    }

.amount-input[b-i9xgwdvl1u] {
    position: relative;
}

    .amount-input .currency[b-i9xgwdvl1u] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #718096;
        font-weight: 500;
    }

    .amount-input .form-control[b-i9xgwdvl1u] {
        padding-left: 30px;
    }

.order-number-input[b-i9xgwdvl1u] {
    display: flex;
    gap: 10px;
}

    .order-number-input .form-control[b-i9xgwdvl1u] {
        flex: 1;
    }

.btn-custom[b-i9xgwdvl1u] {
    background: #edf2f7;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 0 15px;
    font-size: 0.9rem;
    color: #4a5568;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-custom:hover[b-i9xgwdvl1u] {
        background: #e2e8f0;
    }

textarea.form-control[b-i9xgwdvl1u] {
    resize: vertical;
    min-height: 80px;
}

.form-actions[b-i9xgwdvl1u] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.btn-primary[b-i9xgwdvl1u], .btn-secondary[b-i9xgwdvl1u] {
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-primary[b-i9xgwdvl1u] {
    background: linear-gradient(135deg, #07c160, #059848);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-i9xgwdvl1u] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
    }

    .btn-primary:disabled[b-i9xgwdvl1u] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-secondary[b-i9xgwdvl1u] {
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #cbd5e0;
}

    .btn-secondary:hover[b-i9xgwdvl1u] {
        background: #e2e8f0;
    }

/* 支付结果 */
.pay-result-section[b-i9xgwdvl1u] {
    margin-bottom: 30px;
}

.result-card[b-i9xgwdvl1u] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #07c160;
}

    .result-card.error[b-i9xgwdvl1u] {
        border-left-color: #e53e3e;
    }

.result-header[b-i9xgwdvl1u] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.result-icon[b-i9xgwdvl1u] {
    font-size: 2rem;
}

.icon-success[b-i9xgwdvl1u] {
    color: #07c160;
}

.icon-error[b-i9xgwdvl1u] {
    color: #e53e3e;
}

.result-header h5[b-i9xgwdvl1u] {
    margin: 0;
    font-size: 1.1rem;
    color: #2d3748;
}

.result-details[b-i9xgwdvl1u] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.detail-row[b-i9xgwdvl1u] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

    .detail-row:last-child[b-i9xgwdvl1u] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.detail-label[b-i9xgwdvl1u] {
    min-width: 100px;
    color: #4a5568;
    font-weight: 500;
}

.detail-value[b-i9xgwdvl1u] {
    flex: 1;
    color: #2d3748;
    font-weight: 500;
}

code[b-i9xgwdvl1u] {
    background: #edf2f7;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.result-actions[b-i9xgwdvl1u] {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.qr-container[b-i9xgwdvl1u], .jsapi-params[b-i9xgwdvl1u], .mweb-container[b-i9xgwdvl1u] {
    margin-bottom: 20px;
}

    .qr-container h6[b-i9xgwdvl1u], .jsapi-params h6[b-i9xgwdvl1u], .mweb-container h6[b-i9xgwdvl1u] {
        margin: 0 0 15px 0;
        color: #4a5568;
        font-size: 1rem;
    }

.qr-code[b-i9xgwdvl1u] {
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

    .qr-code img[b-i9xgwdvl1u] {
        width: 200px;
        height: 200px;
        display: block;
    }

.param-list[b-i9xgwdvl1u] {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.param-item[b-i9xgwdvl1u] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

    .param-item:last-child[b-i9xgwdvl1u] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .param-item span[b-i9xgwdvl1u] {
        min-width: 80px;
        color: #4a5568;
        font-weight: 500;
    }

    .param-item code[b-i9xgwdvl1u] {
        flex: 1;
        margin-left: 10px;
        word-break: break-all;
    }

.truncate[b-i9xgwdvl1u] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mweb-link[b-i9xgwdvl1u] {
    background: white;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-bottom: 15px;
    word-break: break-all;
}

    .mweb-link a[b-i9xgwdvl1u] {
        color: #07c160;
        text-decoration: none;
    }

        .mweb-link a:hover[b-i9xgwdvl1u] {
            text-decoration: underline;
        }

.btn-copy[b-i9xgwdvl1u] {
    background: #4a5568;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .btn-copy:hover[b-i9xgwdvl1u] {
        background: #2d3748;
    }

.result-footer[b-i9xgwdvl1u] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.error-message[b-i9xgwdvl1u] {
    background: #fed7d7;
    color: #c53030;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

/* 订单查询 */
.order-query-section[b-i9xgwdvl1u] {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.query-form[b-i9xgwdvl1u] {
    margin-top: 20px;
}

.query-input[b-i9xgwdvl1u] {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

    .query-input .form-control[b-i9xgwdvl1u] {
        flex: 1;
    }

.btn-query[b-i9xgwdvl1u] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-query:hover:not(:disabled)[b-i9xgwdvl1u] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

    .btn-query:disabled[b-i9xgwdvl1u] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.query-result[b-i9xgwdvl1u] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
}

.result-status[b-i9xgwdvl1u] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.status-label[b-i9xgwdvl1u] {
    font-weight: 500;
    color: #4a5568;
}

.status-value[b-i9xgwdvl1u] {
    font-weight: 600;
    color: #07c160;
    margin-left: 10px;
}

.result-status.error .status-value[b-i9xgwdvl1u] {
    color: #e53e3e;
}

.detail-grid[b-i9xgwdvl1u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.detail-item[b-i9xgwdvl1u] {
    display: flex;
    flex-direction: column;
}

.item-label[b-i9xgwdvl1u] {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.item-value[b-i9xgwdvl1u] {
    color: #2d3748;
    font-weight: 500;
}

/* 错误提示 */
.error-message-global[b-i9xgwdvl1u] {
    background: #fed7d7;
    color: #c53030;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #c53030;
}

.btn-close-error[b-i9xgwdvl1u] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #c53030;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

/* 加载遮罩 */
.loading-overlay[b-i9xgwdvl1u] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}

.loading-spinner[b-i9xgwdvl1u] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #07c160;
    border-radius: 50%;
    animation: spin-b-i9xgwdvl1u 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-i9xgwdvl1u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 图标字体 */
.icon-payment[b-i9xgwdvl1u]::before {
    content: "💰";
}

.icon-mobile[b-i9xgwdvl1u]::before {
    content: "📱";
}

.icon-qrcode[b-i9xgwdvl1u]::before {
    content: "📷";
}

.icon-web[b-i9xgwdvl1u]::before {
    content: "🌐";
}

.icon-refresh[b-i9xgwdvl1u]::before {
    content: "🔄";
}

.icon-search[b-i9xgwdvl1u]::before {
    content: "🔍";
}

.icon-plus[b-i9xgwdvl1u]::before {
    content: "➕";
}

.icon-error[b-i9xgwdvl1u]::before {
    content: "❌";
}

.icon-success[b-i9xgwdvl1u]::before {
    content: "✅";
}

/* 响应式设计 */
@media (max-width: 768px) {
    .wechat-pay-container[b-i9xgwdvl1u] {
        margin: 10px;
        min-width: auto;
    }

    .pay-content[b-i9xgwdvl1u] {
        padding: 20px;
    }

    .method-cards[b-i9xgwdvl1u] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-grid[b-i9xgwdvl1u] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .order-number-input[b-i9xgwdvl1u] {
        flex-direction: column;
    }

    .btn-custom[b-i9xgwdvl1u] {
        margin-top: 10px;
        width: 100%;
    }

    .form-actions[b-i9xgwdvl1u], .result-footer[b-i9xgwdvl1u] {
        flex-direction: column;
    }

    .detail-grid[b-i9xgwdvl1u] {
        grid-template-columns: 1fr;
    }

    .qr-code img[b-i9xgwdvl1u] {
        width: 150px;
        height: 150px;
    }
}
/* _content/LEAFBlazorApp25/Components/WeChat/QrCode/QrCodeGenerator.razor.rz.scp.css */
/* QrCodeGenerator.razor.css - 二维码生成器组件样式 */

/* 主容器样式 */
.qr-generator-container[b-338i15c8br] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: #f8f9fa;
    min-height: 100%;
    padding:0px,0px,10px,0px;
    margin-bottom:10px;
}

/* 卡片样式优化 - 减少间距 */
.qr-card[b-338i15c8br] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .qr-card:hover[b-338i15c8br] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-1px);
    }

/* 标题区域 - 减少内边距 */
.qr-title-section[b-338i15c8br] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px 8px 0 0;
    padding: 0.75rem;
    color: white;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.qr-title[b-338i15c8br] {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.qr-subtitle[b-338i15c8br] {
    opacity: 0.9;
    font-size: 0.8rem;
    font-weight: 300;
}

/* 配置区域 - 减少内边距 */
.qr-config-section[b-338i15c8br] {
    padding: 1rem;
    background: white;
}

/* 配置行包装器 */
.config-row-wrapper[b-338i15c8br] {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* 配置行样式 */
.config-row[b-338i15c8br] {
    margin-bottom: 0.25rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.config-label[b-338i15c8br] {
    min-width: 80px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.config-input[b-338i15c8br] {
    flex-grow: 1;
    min-width: 0;
    width: 100%;
}

/* 输入组样式优化 */
.form-control[b-338i15c8br], .form-select[b-338i15c8br] {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
}

    .form-control:focus[b-338i15c8br], .form-select:focus[b-338i15c8br] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }



/* 标签样式 */
.form-label[b-338i15c8br] {
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Logo配置区域样式 */
.logo-config-section[b-338i15c8br] {
    border-left: 3px solid #667eea;
    padding-left: 0.75rem;
    margin-top: 0.5rem;
}

.logo-upload-section[b-338i15c8br] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
    border: 1px solid #e0e7ff !important;
    padding: 0.75rem !important;
}

/* Logo预览区域 */
.logo-preview-section[b-338i15c8br] {
    height: 100%;
}

.logo-preview-content[b-338i15c8br] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 清除按钮悬停效果 */
.clear-logo-btn[b-338i15c8br] {
    transition: all 0.3s ease;
    border-width: 1px;
}

.clear-logo-btn:hover[b-338i15c8br] {
    background-color: #e74c3c !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

.logo-image-container[b-338i15c8br] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.logo-preview-img[b-338i15c8br] {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.logo-preview-placeholder[b-338i15c8br] {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
}

/* 开关样式增强 */
.form-check-input:checked[b-338i15c8br] {
    background-color: #667eea;
    border-color: #667eea;
}

.form-check-input:focus[b-338i15c8br] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* 开关放大效果 */
.switch-lg[b-338i15c8br] {
    transform: scale(1.3); /* 放大30% */
    margin-right: 10px; /* 增加右边距避免与文字重叠 */
}

/* 是否包含网址勾选项 */
.include-url-section[b-338i15c8br] {
    margin-top: 0.5rem;
}

    .include-url-section .form-check-input[b-338i15c8br] {
        transform: scale(1.2);
        margin-right: 8px;
    }

    .include-url-section .form-check-label[b-338i15c8br] {
        font-size: 1rem;
    }

.form-check-inline[b-338i15c8br] {
    margin-right: 0;
}

.form-check-label[b-338i15c8br] {
    font-size: 0.8rem;
    color: #6c757d;
}


/* logo在二维码中占比 滚动条：范围滑块样式 */

/* 滚动条样式修复 - 确保可拖动 */
.form-range[b-338i15c8br] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    height: 1.5rem;
    padding: 0;
    width: 100%;
    background: transparent;
}

    /* WebKit浏览器滑块 */
    .form-range[b-338i15c8br]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 1.5rem;
        width: 1.5rem;
        background: #667eea;
        border: 2px solid white;
        border-radius: 50%;
        cursor: grab;
        margin-top: -0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

        .form-range[b-338i15c8br]::-webkit-slider-thumb:active {
            cursor: grabbing;
            background: #5a67d8;
        }

    /* Firefox滑块 */
    .form-range[b-338i15c8br]::-moz-range-thumb {
        height: 1.5rem;
        width: 1.5rem;
        background: #667eea;
        border: 2px solid white;
        border-radius: 50%;
        cursor: grab;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

        .form-range[b-338i15c8br]::-moz-range-thumb:active {
            cursor: grabbing;
            background: #5a67d8;
        }

    /* 轨道样式 */
    .form-range[b-338i15c8br]::-webkit-slider-track {
        background-color: #dee2e6;
        height: 0.5rem;
        border-radius: 0.25rem;
        width: 100%;
    }

    .form-range[b-338i15c8br]::-moz-range-track {
        background-color: #dee2e6;
        height: 0.5rem;
        border-radius: 0.25rem;
        width: 100%;
    }

/* 确保滚动条区域可点击且不受其他元素遮挡 */
.logo-config-section .form-range[b-338i15c8br] {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
}

/* 滚动条容器确保有足够空间 */
.logo-upload-section .mb-2[b-338i15c8br] {
    position: relative;
    z-index: 5;
}

/* 防止父元素遮挡滚动条 */
.logo-config-section[b-338i15c8br] {
    position: relative;
    z-index: 1;
}


/* 按钮样式优化 */
.btn[b-338i15c8br] {
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.btn-primary[b-338i15c8br] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    color: white;
}

    .btn-primary:hover[b-338i15c8br] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-338i15c8br] {
        background: #6c757d;
        transform: none;
        box-shadow: none;
        opacity: 0.6;
    }

.btn-outline-primary[b-338i15c8br], .btn-outline-secondary[b-338i15c8br], .btn-outline-success[b-338i15c8br] {
    border: 1px solid;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
    font-size: 0.8rem;
}

.btn-outline-primary[b-338i15c8br] {
    border-color: #667eea;
    color: #667eea;
}

    .btn-outline-primary:hover[b-338i15c8br] {
        background: #667eea;
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-secondary[b-338i15c8br] {
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-outline-secondary:hover[b-338i15c8br] {
        background: #6c757d;
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-success[b-338i15c8br] {
    border-color: #198754;
    color: #198754;
}

    .btn-outline-success:hover[b-338i15c8br] {
        background: #198754;
        color: white;
        transform: translateY(-1px);
    }

/* 按钮组间距 */
.btn-group[b-338i15c8br] {
    display: flex;
    gap: 0.25rem;
}

    .btn-group .btn[b-338i15c8br] {
        margin-right: 0;
        border-radius: 6px;
        white-space: nowrap;
    }

/* 固定宽度按钮 */
.fixed-width-btn[b-338i15c8br] {
    min-width: 120px;
    flex-shrink: 0;
}

/* 移动端按钮组 */
.mobile-btn-group[b-338i15c8br] {
    justify-content: flex-end;
    gap:10px;
}

.mobile-btn[b-338i15c8br] {
    font-size: 0.95rem !important;
    padding: 0.15rem 0.15rem !important;
}

/* 预览区域样式 - 减少内边距 */
.qr-preview-section[b-338i15c8br] {
    padding: 1rem;
    background: white;
}

.qr-display-container[b-338i15c8br] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e0e7ff;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

    .qr-display-container[b-338i15c8br]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.qr-image-wrapper[b-338i15c8br] {
    background: white;
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid #e0e7ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 0.5rem;
}

.qr-image[b-338i15c8br] {
    border-radius: 4px;
    display: block;
    max-width: 100%;
    height: auto;
}

/* 文字描述区域 */
.qr-description[b-338i15c8br] {
    background: white;
    border-radius: 4px;
    padding: 0.5rem 0.5rem;
    border-left: 2px solid #667eea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 0.5rem;
}

/* 描述图标样式 */
.description-icon[b-338i15c8br] {
    font-weight: 900 !important;
    font-size: 1.2em;
}

/* 确保主色调图标有正确颜色和粗细 */
.text-primary .description-icon[b-338i15c8br] {
    color: inherit !important;
    font-weight: 900 !important;
}

/* 可选：添加微妙的阴影增强视觉效果 */
.qr-description-text .description-icon[b-338i15c8br] {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.qr-description-text[b-338i15c8br] {
    color: #495057;
    font-size: 1.0rem;
    line-height: 1.3;
    margin: 0;
}

/* 介绍输入区域 */
.description-input-section[b-338i15c8br] {
    margin-top: 0.75rem;
}

.description-textarea[b-338i15c8br] {
    border-radius: 6px;
    resize: vertical;
    min-height: 50px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
    color:darkred;
}

    .description-textarea:focus[b-338i15c8br] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
        outline: none;
    }

/* 空状态样式 */
.qr-empty-state[b-338i15c8br] {
    background: linear-gradient(135deg, #f8f9ff 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.qr-empty-icon[b-338i15c8br] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* 下载说明区域 */
.download-info[b-338i15c8br] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

    .download-info small[b-338i15c8br] {
        font-size: 0.75rem;
        line-height: 1.3;
    }

/* 图标样式 */
.fas[b-338i15c8br] {
    opacity: 0.8;
    font-size: 0.9em;
}

/* 加载动画 */
.spinner-border-sm[b-338i15c8br] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.1em;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .qr-config-section[b-338i15c8br], .qr-preview-section[b-338i15c8br] {
        padding: 0.75rem;
    }

    .qr-title-section[b-338i15c8br] {
        padding: 0.5rem;
    }

    .qr-display-container[b-338i15c8br] {
        padding: 0.75rem;
    }

    .config-row[b-338i15c8br] {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .config-label[b-338i15c8br] {
        min-width: 70px;
        margin-right: 0.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        font-size: 0.8rem;
    }

    .config-input[b-338i15c8br] {
        flex-grow: 1;
        width: auto;
        min-width: 0;
    }

    .form-control[b-338i15c8br], .form-select[b-338i15c8br] {
        width: 100%;
        max-width: 100%;
        font-size: 0.8rem;
    }

    .logo-upload-section .row[b-338i15c8br] {
        flex-direction: column;
    }

    .logo-upload-section .col-md-8[b-338i15c8br],
    .logo-upload-section .col-md-4[b-338i15c8br] {
        width: 100%;
    }

    .logo-preview-section[b-338i15c8br] {
        margin-top: 0.5rem;
    }

    .btn-group[b-338i15c8br] {
        flex-direction: row;
        width: auto;
    }

        .btn-group .btn[b-338i15c8br] {
            flex: none;
            margin-bottom: 0;
            font-size: 0.75rem !important;
        }

    .fixed-width-btn[b-338i15c8br] {
        min-width: 100px;
    }

    .mobile-btn-group[b-338i15c8br] {
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    .qr-title[b-338i15c8br] {
        font-size: 1.1rem;
    }

    .qr-subtitle[b-338i15c8br] {
        font-size: 0.75rem;
    }

    .container[b-338i15c8br] {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 576px) {
    .qr-config-section[b-338i15c8br], .qr-preview-section[b-338i15c8br] {
        padding: 0.5rem;
    }

    .qr-title-section[b-338i15c8br] {
        padding: 0.5rem;
    }

    .qr-display-container[b-338i15c8br] {
        padding: 0.5rem;
    }

    .qr-image-wrapper[b-338i15c8br] {
        padding: 0.5rem;
    }

    .btn[b-338i15c8br] {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .mobile-btn-group[b-338i15c8br] {
        gap: 0.25rem;
    }

    .mobile-btn[b-338i15c8br] {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .fixed-width-btn[b-338i15c8br] {
        min-width: 90px;
    }

    .config-label[b-338i15c8br] {
        min-width: 60px;
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }

    .config-input[b-338i15c8br] {
        font-size: 0.75rem;
    }

    .form-control[b-338i15c8br], .form-select[b-338i15c8br] {
        width: 100%;
        max-width: none;
        font-size: 0.75rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 400px) {
    .config-label[b-338i15c8br] {
        min-width: 55px;
        margin-right: 0.2rem;
        font-size: 0.7rem;
    }

    .config-input[b-338i15c8br] {
        font-size: 0.7rem;
    }

    .fixed-width-btn[b-338i15c8br] {
        min-width: 80px;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
}

/* 全屏打印样式优化 */
@media print {
    .no-print[b-338i15c8br],
    .btn-group[b-338i15c8br],
    .download-info[b-338i15c8br],
    .include-url-section[b-338i15c8br] {
        display: none !important;
    }

    body[b-338i15c8br] {
        background: white !important;
        font-size: 12px;
        line-height: 1.3;
    }

    .qr-generator-container[b-338i15c8br] {
        background: white !important;
        min-height: auto;
        padding: 0 !important;
    }

    .container[b-338i15c8br] {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .row[b-338i15c8br] {
        margin: 0 !important;
    }

    .col-12[b-338i15c8br] {
        padding: 0 !important;
    }

    .qr-card[b-338i15c8br] {
        border: 1px solid #333 !important;
        box-shadow: none !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .qr-title-section[b-338i15c8br] {
        background: #f8f9fa !important;
        color: #333 !important;
        border-bottom: 1px solid #333;
        text-shadow: none;
        padding: 0.5rem !important;
    }

    .qr-config-section[b-338i15c8br],
    .qr-preview-section[b-338i15c8br] {
        background: white !important;
        padding: 10px !important;
    }

    .qr-display-container[b-338i15c8br] {
        background: white !important;
        border: 1px solid #333 !important;
        padding: 15px !important;
        margin: 5px 0 !important;
    }

    .qr-image-wrapper[b-338i15c8br] {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        padding: 10px !important;
    }

    .qr-image[b-338i15c8br] {
        filter: contrast(1.1) brightness(1.05) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .qr-title[b-338i15c8br],
    .qr-subtitle[b-338i15c8br],
    .form-label[b-338i15c8br],
    .text-muted[b-338i15c8br],
    .qr-description-text[b-338i15c8br] {
        color: #000 !important;
    }

    .qr-description[b-338i15c8br] {
        background: #f8f9fa !important;
        border-left: 2px solid #333 !important;
    }

    .form-control[b-338i15c8br],
    .form-select[b-338i15c8br],
    .description-textarea[b-338i15c8br] {
        background: #f8f9fa !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }

    .input-group-text[b-338i15c8br] {
        background: #e9ecef !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }

    *[b-338i15c8br] {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .qr-card[b-338i15c8br] {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    @page {
        margin: 0.5cm;
        size: A4;
    }
}

/* 动画效果 */
@keyframes fadeIn-b-338i15c8br {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-card[b-338i15c8br] {
    animation: fadeIn-b-338i15c8br 0.3s ease-out;
}

/* 表单文本样式 */
.form-text[b-338i15c8br] {
    font-size: 0.75rem;
}

/* 自定义滚动条 */
[b-338i15c8br]::-webkit-scrollbar {
    width: 4px;
}

[b-338i15c8br]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

[b-338i15c8br]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

    [b-338i15c8br]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .qr-card[b-338i15c8br] {
        border-color: #000;
    }

    .qr-title-section[b-338i15c8br] {
        background: #000;
        color: #fff;
    }

    .btn-primary[b-338i15c8br] {
        background: #000;
        color: #fff;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .qr-card[b-338i15c8br], .btn[b-338i15c8br], .form-control[b-338i15c8br], .form-select[b-338i15c8br] {
        transition: none;
    }

        .qr-card:hover[b-338i15c8br] {
            transform: none;
        }
}
/* _content/LEAFBlazorApp25/Components/WeChat/QrCode/QrCodeGenerator1.razor.rz.scp.css */
/* QrCodeGenerator.razor.css - 二维码生成器组件样式 */

/* 主容器样式 */
.qr-generator-container[b-joy8x2lb9o] {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background-color: #f8f9fa;
    min-height: 100%;
    padding:0px,0px,10px,0px;
    margin-bottom:10px;
}

/* 卡片样式优化 - 减少间距 */
.qr-card[b-joy8x2lb9o] {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

    .qr-card:hover[b-joy8x2lb9o] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-1px);
    }

/* 标题区域 - 减少内边距 */
.qr-title-section[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px 8px 0 0;
    padding: 0.75rem;
    color: white;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.qr-title[b-joy8x2lb9o] {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.qr-subtitle[b-joy8x2lb9o] {
    opacity: 0.9;
    font-size: 0.8rem;
    font-weight: 300;
}

/* 配置区域 - 减少内边距 */
.qr-config-section[b-joy8x2lb9o] {
    padding: 1rem;
    background: white;
}

/* 配置行包装器 */
.config-row-wrapper[b-joy8x2lb9o] {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* 配置行样式 */
.config-row[b-joy8x2lb9o] {
    margin-bottom: 0.25rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.config-label[b-joy8x2lb9o] {
    min-width: 80px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 0.85rem;
}

.config-input[b-joy8x2lb9o] {
    flex-grow: 1;
    min-width: 0;
    width: 100%;
}

/* 输入组样式优化 */
.form-control[b-joy8x2lb9o], .form-select[b-joy8x2lb9o] {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
}

    .form-control:focus[b-joy8x2lb9o], .form-select:focus[b-joy8x2lb9o] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }



/* 标签样式 */
.form-label[b-joy8x2lb9o] {
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Logo配置区域样式 */
.logo-config-section[b-joy8x2lb9o] {
    border-left: 3px solid #667eea;
    padding-left: 0.75rem;
    margin-top: 0.5rem;
}

.logo-upload-section[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
    border: 1px solid #e0e7ff !important;
    padding: 0.75rem !important;
}

/* Logo预览区域 */
.logo-preview-section[b-joy8x2lb9o] {
    height: 100%;
}

.logo-preview-content[b-joy8x2lb9o] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 清除按钮悬停效果 */
.clear-logo-btn[b-joy8x2lb9o] {
    transition: all 0.3s ease;
    border-width: 1px;
}

.clear-logo-btn:hover[b-joy8x2lb9o] {
    background-color: #e74c3c !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

.logo-image-container[b-joy8x2lb9o] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.logo-preview-img[b-joy8x2lb9o] {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.logo-preview-placeholder[b-joy8x2lb9o] {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #dee2e6;
    border-radius: 6px;
}

/* 开关样式增强 */
.form-check-input:checked[b-joy8x2lb9o] {
    background-color: #667eea;
    border-color: #667eea;
}

.form-check-input:focus[b-joy8x2lb9o] {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* 开关放大效果 */
.switch-lg[b-joy8x2lb9o] {
    transform: scale(1.3); /* 放大30% */
    margin-right: 10px; /* 增加右边距避免与文字重叠 */
}

/* 是否包含网址勾选项 */
.include-url-section[b-joy8x2lb9o] {
    margin-top: 0.5rem;
}

    .include-url-section .form-check-input[b-joy8x2lb9o] {
        transform: scale(1.2);
        margin-right: 8px;
    }

    .include-url-section .form-check-label[b-joy8x2lb9o] {
        font-size: 1rem;
    }

.form-check-inline[b-joy8x2lb9o] {
    margin-right: 0;
}

.form-check-label[b-joy8x2lb9o] {
    font-size: 0.8rem;
    color: #6c757d;
}


/* logo在二维码中占比 滚动条：范围滑块样式 */

/* 滚动条样式修复 - 确保可拖动 */
.form-range[b-joy8x2lb9o] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    height: 1.5rem;
    padding: 0;
    width: 100%;
    background: transparent;
}

    /* WebKit浏览器滑块 */
    .form-range[b-joy8x2lb9o]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 1.5rem;
        width: 1.5rem;
        background: #667eea;
        border: 2px solid white;
        border-radius: 50%;
        cursor: grab;
        margin-top: -0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

        .form-range[b-joy8x2lb9o]::-webkit-slider-thumb:active {
            cursor: grabbing;
            background: #5a67d8;
        }

    /* Firefox滑块 */
    .form-range[b-joy8x2lb9o]::-moz-range-thumb {
        height: 1.5rem;
        width: 1.5rem;
        background: #667eea;
        border: 2px solid white;
        border-radius: 50%;
        cursor: grab;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

        .form-range[b-joy8x2lb9o]::-moz-range-thumb:active {
            cursor: grabbing;
            background: #5a67d8;
        }

    /* 轨道样式 */
    .form-range[b-joy8x2lb9o]::-webkit-slider-track {
        background-color: #dee2e6;
        height: 0.5rem;
        border-radius: 0.25rem;
        width: 100%;
    }

    .form-range[b-joy8x2lb9o]::-moz-range-track {
        background-color: #dee2e6;
        height: 0.5rem;
        border-radius: 0.25rem;
        width: 100%;
    }

/* 确保滚动条区域可点击 */
.logo-config-section .form-range[b-joy8x2lb9o] {
    position: relative;
    z-index: 5;
}


/* 按钮样式优化 */
.btn[b-joy8x2lb9o] {
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.btn-primary[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    color: white;
}

    .btn-primary:hover[b-joy8x2lb9o] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-joy8x2lb9o] {
        background: #6c757d;
        transform: none;
        box-shadow: none;
        opacity: 0.6;
    }

.btn-outline-primary[b-joy8x2lb9o], .btn-outline-secondary[b-joy8x2lb9o], .btn-outline-success[b-joy8x2lb9o] {
    border: 1px solid;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
    font-size: 0.8rem;
}

.btn-outline-primary[b-joy8x2lb9o] {
    border-color: #667eea;
    color: #667eea;
}

    .btn-outline-primary:hover[b-joy8x2lb9o] {
        background: #667eea;
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-secondary[b-joy8x2lb9o] {
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-outline-secondary:hover[b-joy8x2lb9o] {
        background: #6c757d;
        color: white;
        transform: translateY(-1px);
    }

.btn-outline-success[b-joy8x2lb9o] {
    border-color: #198754;
    color: #198754;
}

    .btn-outline-success:hover[b-joy8x2lb9o] {
        background: #198754;
        color: white;
        transform: translateY(-1px);
    }

/* 按钮组间距 */
.btn-group[b-joy8x2lb9o] {
    display: flex;
    gap: 0.25rem;
}

    .btn-group .btn[b-joy8x2lb9o] {
        margin-right: 0;
        border-radius: 6px;
        white-space: nowrap;
    }

/* 固定宽度按钮 */
.fixed-width-btn[b-joy8x2lb9o] {
    min-width: 120px;
    flex-shrink: 0;
}

/* 移动端按钮组 */
.mobile-btn-group[b-joy8x2lb9o] {
    justify-content: flex-end;
    gap:10px;
}

.mobile-btn[b-joy8x2lb9o] {
    font-size: 0.95rem !important;
    padding: 0.15rem 0.15rem !important;
}

/* 预览区域样式 - 减少内边距 */
.qr-preview-section[b-joy8x2lb9o] {
    padding: 1rem;
    background: white;
}

.qr-display-container[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e0e7ff;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

    .qr-display-container[b-joy8x2lb9o]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

.qr-image-wrapper[b-joy8x2lb9o] {
    background: white;
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid #e0e7ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 0.5rem;
}

.qr-image[b-joy8x2lb9o] {
    border-radius: 4px;
    display: block;
    max-width: 100%;
    height: auto;
}

/* 文字描述区域 */
.qr-description[b-joy8x2lb9o] {
    background: white;
    border-radius: 4px;
    padding: 0.5rem 0.5rem;
    border-left: 2px solid #667eea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 0.5rem;
}

/* 描述图标样式 */
.description-icon[b-joy8x2lb9o] {
    font-weight: 900 !important;
    font-size: 1.2em;
}

/* 确保主色调图标有正确颜色和粗细 */
.text-primary .description-icon[b-joy8x2lb9o] {
    color: inherit !important;
    font-weight: 900 !important;
}

/* 可选：添加微妙的阴影增强视觉效果 */
.qr-description-text .description-icon[b-joy8x2lb9o] {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.qr-description-text[b-joy8x2lb9o] {
    color: #495057;
    font-size: 1.0rem;
    line-height: 1.3;
    margin: 0;
}

/* 介绍输入区域 */
.description-input-section[b-joy8x2lb9o] {
    margin-top: 0.75rem;
}

.description-textarea[b-joy8x2lb9o] {
    border-radius: 6px;
    resize: vertical;
    min-height: 50px;
    border: 1px solid #ced4da;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
    color:darkred;
}

    .description-textarea:focus[b-joy8x2lb9o] {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.1);
        outline: none;
    }

/* 空状态样式 */
.qr-empty-state[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #f8f9ff 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.qr-empty-icon[b-joy8x2lb9o] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* 下载说明区域 */
.download-info[b-joy8x2lb9o] {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

    .download-info small[b-joy8x2lb9o] {
        font-size: 0.75rem;
        line-height: 1.3;
    }

/* 图标样式 */
.fas[b-joy8x2lb9o] {
    opacity: 0.8;
    font-size: 0.9em;
}

/* 加载动画 */
.spinner-border-sm[b-joy8x2lb9o] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.1em;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .qr-config-section[b-joy8x2lb9o], .qr-preview-section[b-joy8x2lb9o] {
        padding: 0.75rem;
    }

    .qr-title-section[b-joy8x2lb9o] {
        padding: 0.5rem;
    }

    .qr-display-container[b-joy8x2lb9o] {
        padding: 0.75rem;
    }

    .config-row[b-joy8x2lb9o] {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .config-label[b-joy8x2lb9o] {
        min-width: 70px;
        margin-right: 0.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        font-size: 0.8rem;
    }

    .config-input[b-joy8x2lb9o] {
        flex-grow: 1;
        width: auto;
        min-width: 0;
    }

    .form-control[b-joy8x2lb9o], .form-select[b-joy8x2lb9o] {
        width: 100%;
        max-width: 100%;
        font-size: 0.8rem;
    }

    .logo-upload-section .row[b-joy8x2lb9o] {
        flex-direction: column;
    }

    .logo-upload-section .col-md-8[b-joy8x2lb9o],
    .logo-upload-section .col-md-4[b-joy8x2lb9o] {
        width: 100%;
    }

    .logo-preview-section[b-joy8x2lb9o] {
        margin-top: 0.5rem;
    }

    .btn-group[b-joy8x2lb9o] {
        flex-direction: row;
        width: auto;
    }

        .btn-group .btn[b-joy8x2lb9o] {
            flex: none;
            margin-bottom: 0;
            font-size: 0.75rem !important;
        }

    .fixed-width-btn[b-joy8x2lb9o] {
        min-width: 100px;
    }

    .mobile-btn-group[b-joy8x2lb9o] {
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    .qr-title[b-joy8x2lb9o] {
        font-size: 1.1rem;
    }

    .qr-subtitle[b-joy8x2lb9o] {
        font-size: 0.75rem;
    }

    .container[b-joy8x2lb9o] {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 576px) {
    .qr-config-section[b-joy8x2lb9o], .qr-preview-section[b-joy8x2lb9o] {
        padding: 0.5rem;
    }

    .qr-title-section[b-joy8x2lb9o] {
        padding: 0.5rem;
    }

    .qr-display-container[b-joy8x2lb9o] {
        padding: 0.5rem;
    }

    .qr-image-wrapper[b-joy8x2lb9o] {
        padding: 0.5rem;
    }

    .btn[b-joy8x2lb9o] {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .mobile-btn-group[b-joy8x2lb9o] {
        gap: 0.25rem;
    }

    .mobile-btn[b-joy8x2lb9o] {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .fixed-width-btn[b-joy8x2lb9o] {
        min-width: 90px;
    }

    .config-label[b-joy8x2lb9o] {
        min-width: 60px;
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }

    .config-input[b-joy8x2lb9o] {
        font-size: 0.75rem;
    }

    .form-control[b-joy8x2lb9o], .form-select[b-joy8x2lb9o] {
        width: 100%;
        max-width: none;
        font-size: 0.75rem;
    }
}

/* 超小屏幕优化 */
@media (max-width: 400px) {
    .config-label[b-joy8x2lb9o] {
        min-width: 55px;
        margin-right: 0.2rem;
        font-size: 0.7rem;
    }

    .config-input[b-joy8x2lb9o] {
        font-size: 0.7rem;
    }

    .fixed-width-btn[b-joy8x2lb9o] {
        min-width: 80px;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
}

/* 全屏打印样式优化 */
@media print {
    .no-print[b-joy8x2lb9o],
    .btn-group[b-joy8x2lb9o],
    .download-info[b-joy8x2lb9o],
    .include-url-section[b-joy8x2lb9o] {
        display: none !important;
    }

    body[b-joy8x2lb9o] {
        background: white !important;
        font-size: 12px;
        line-height: 1.3;
    }

    .qr-generator-container[b-joy8x2lb9o] {
        background: white !important;
        min-height: auto;
        padding: 0 !important;
    }

    .container[b-joy8x2lb9o] {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .row[b-joy8x2lb9o] {
        margin: 0 !important;
    }

    .col-12[b-joy8x2lb9o] {
        padding: 0 !important;
    }

    .qr-card[b-joy8x2lb9o] {
        border: 1px solid #333 !important;
        box-shadow: none !important;
        margin-bottom: 10px !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .qr-title-section[b-joy8x2lb9o] {
        background: #f8f9fa !important;
        color: #333 !important;
        border-bottom: 1px solid #333;
        text-shadow: none;
        padding: 0.5rem !important;
    }

    .qr-config-section[b-joy8x2lb9o],
    .qr-preview-section[b-joy8x2lb9o] {
        background: white !important;
        padding: 10px !important;
    }

    .qr-display-container[b-joy8x2lb9o] {
        background: white !important;
        border: 1px solid #333 !important;
        padding: 15px !important;
        margin: 5px 0 !important;
    }

    .qr-image-wrapper[b-joy8x2lb9o] {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        padding: 10px !important;
    }

    .qr-image[b-joy8x2lb9o] {
        filter: contrast(1.1) brightness(1.05) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .qr-title[b-joy8x2lb9o],
    .qr-subtitle[b-joy8x2lb9o],
    .form-label[b-joy8x2lb9o],
    .text-muted[b-joy8x2lb9o],
    .qr-description-text[b-joy8x2lb9o] {
        color: #000 !important;
    }

    .qr-description[b-joy8x2lb9o] {
        background: #f8f9fa !important;
        border-left: 2px solid #333 !important;
    }

    .form-control[b-joy8x2lb9o],
    .form-select[b-joy8x2lb9o],
    .description-textarea[b-joy8x2lb9o] {
        background: #f8f9fa !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }

    .input-group-text[b-joy8x2lb9o] {
        background: #e9ecef !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }

    *[b-joy8x2lb9o] {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .qr-card[b-joy8x2lb9o] {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    @page {
        margin: 0.5cm;
        size: A4;
    }
}

/* 动画效果 */
@keyframes fadeIn-b-joy8x2lb9o {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-card[b-joy8x2lb9o] {
    animation: fadeIn-b-joy8x2lb9o 0.3s ease-out;
}

/* 表单文本样式 */
.form-text[b-joy8x2lb9o] {
    font-size: 0.75rem;
}

/* 自定义滚动条 */
[b-joy8x2lb9o]::-webkit-scrollbar {
    width: 4px;
}

[b-joy8x2lb9o]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

[b-joy8x2lb9o]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

    [b-joy8x2lb9o]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .qr-card[b-joy8x2lb9o] {
        border-color: #000;
    }

    .qr-title-section[b-joy8x2lb9o] {
        background: #000;
        color: #fff;
    }

    .btn-primary[b-joy8x2lb9o] {
        background: #000;
        color: #fff;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .qr-card[b-joy8x2lb9o], .btn[b-joy8x2lb9o], .form-control[b-joy8x2lb9o], .form-select[b-joy8x2lb9o] {
        transition: none;
    }

        .qr-card:hover[b-joy8x2lb9o] {
            transform: none;
        }
}
/* _content/LEAFBlazorApp25/Components/WeChat/Test/TestWeChatLogin.razor.rz.scp.css */
/* TestWeChatLogin.razor.css */
.test-container[b-agz0cp52tm] {
    max-width: 1200px;
    max-height: 100%;
    margin: 0.5rem auto;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.test-header[b-agz0cp52tm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .test-header h3[b-agz0cp52tm] {
        font-size: 1.3rem; /* 加大标题字号 */
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .test-header h3 i[b-agz0cp52tm] {
            font-size: 1.2rem; /* 标题图标稍大 */
        }

    .test-header .mode-switch[b-agz0cp52tm] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .test-header .badge[b-agz0cp52tm] {
        font-size: 0.875rem; /* 加大徽章字号 */
        padding: 0.3rem 0.6rem;
    }

    .test-header button[b-agz0cp52tm] {
        padding: 0.25rem 0.6rem;
        font-size: 0.875rem; /* 加大按钮字号 */
    }

hr[b-agz0cp52tm] {
    margin: 0.5rem 0;
}

.step-navigation[b-agz0cp52tm] {
    margin-bottom: 0.5rem;
}

.step-indicator[b-agz0cp52tm] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.step-item[b-agz0cp52tm] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 增加图标和文本间距 */
    padding: 0.75rem; /* 增加内边距 */
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    min-width: 110px;
}

    .step-item.active[b-agz0cp52tm] {
        border-color: #0d6efd;
        background: #e7f1ff;
    }

    .step-item.completed[b-agz0cp52tm] {
        border-color: #198754;
        background: #d1e7dd;
    }

.step-number[b-agz0cp52tm] {
    width: 36px; /* 加大步骤数字圆圈 */
    height: 36px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.125rem; /* 加大步骤数字字号 */
    flex-shrink: 0;
}

.step-item.active .step-number[b-agz0cp52tm] {
    background: #0d6efd;
}

.step-item.completed .step-number[b-agz0cp52tm] {
    background: #198754;
}

.step-label[b-agz0cp52tm] {
    font-size: 0.95rem; /* 加大步骤标签字号 */
    font-weight: 500;
    line-height: 1.3;
}

.step-content-area[b-agz0cp52tm] {
    background: white;
    min-height: 280px; /* 稍微增加高度以适应更大字体 */
    padding: 0.875rem !important; /* 稍微增加内边距 */
    margin-bottom: 0.875rem;
    border-radius: 6px;
}

.control-buttons[b-agz0cp52tm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}

    .control-buttons button[b-agz0cp52tm] {
        padding: 0.375rem 0.875rem; /* 加大按钮内边距 */
        font-size: 1rem; /* 加大按钮字号为四号字 */
    }

        .control-buttons button i[b-agz0cp52tm] {
            font-size: 1rem; /* 按钮图标与文本同大 */
        }

    .control-buttons span[b-agz0cp52tm] {
        font-size: 0.95rem;
    }

.monitor-panel[b-agz0cp52tm] {
    margin-top: 0.875rem;
}

.accordion-item[b-agz0cp52tm] {
    margin-bottom: 0.25rem;
}

.accordion-button[b-agz0cp52tm] {
    padding: 0.625rem 1rem; /* 增加内边距 */
    font-size: 0.95rem; /* 加大字号 */
}

    .accordion-button i[b-agz0cp52tm] {
        margin-right: 0.5rem;
        font-size: 0.9rem; /* 监控面板图标稍小 */
    }

.accordion-body[b-agz0cp52tm] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem !important;
    font-size: 0.875rem; /* 报告内容使用小四号字 */
    line-height: 1.4;
}

    .accordion-body i[b-agz0cp52tm] {
        font-size: 0.8rem; /* 报告内容图标更小 */
    }

/* 响应式设计 */
@media (max-width: 768px) {
    .test-container[b-agz0cp52tm] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .test-header h3[b-agz0cp52tm] {
        font-size: 1.1rem;
    }

    .step-indicator[b-agz0cp52tm] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .step-item[b-agz0cp52tm] {
        flex-shrink: 0;
        min-width: 90px;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .step-number[b-agz0cp52tm] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .step-label[b-agz0cp52tm] {
        font-size: 0.85rem;
    }

    .control-buttons[b-agz0cp52tm] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        .control-buttons button[b-agz0cp52tm] {
            padding: 0.3rem 0.75rem;
            font-size: 0.9rem;
        }
}

/* 图标与文本同行样式 */
.icon-text-inline[b-agz0cp52tm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* 稍微增加间距 */
    margin: 0;
    padding: 0;
}

/* 紧凑表格和列表 */
.compact-list[b-agz0cp52tm] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .compact-list li[b-agz0cp52tm] {
        padding: 0.125rem 0;
        font-size: 0.875rem; /* 小四号字 */
    }

/* 小标题样式 */
.small-title[b-agz0cp52tm] {
    font-size: 0.95rem; /* 接近小四号字 */
    margin: 0.25rem 0;
    font-weight: 600;
}

/* 小按钮样式 */
.small-button[b-agz0cp52tm] {
    padding: 0.25rem 0.5rem !important; /* 增加内边距 */
    font-size: 0.875rem !important; /* 小四号字 */
}
/* _content/LEAFBlazorApp25/Components/WeChat/Test/TestWeChatLogin2.razor.rz.scp.css */
/* TestWeChatLogin.razor.css */
.test-container[b-53320d9twi] {
    max-width: 1200px;
    margin: 0.5rem auto;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.test-header[b-53320d9twi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .test-header h3[b-53320d9twi] {
        font-size: 1.1rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .test-header .mode-switch[b-53320d9twi] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .test-header .badge[b-53320d9twi] {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .test-header button[b-53320d9twi] {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }

hr[b-53320d9twi] {
    margin: 0.5rem 0;
}

.step-navigation[b-53320d9twi] {
    margin-bottom: 0.5rem;
}

.step-indicator[b-53320d9twi] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.step-item[b-53320d9twi] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    min-width: 100px;
}

    .step-item.active[b-53320d9twi] {
        border-color: #0d6efd;
        background: #e7f1ff;
    }

    .step-item.completed[b-53320d9twi] {
        border-color: #198754;
        background: #d1e7dd;
    }

.step-number[b-53320d9twi] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.step-item.active .step-number[b-53320d9twi] {
    background: #0d6efd;
}

.step-item.completed .step-number[b-53320d9twi] {
    background: #198754;
}

.step-label[b-53320d9twi] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.step-content-area[b-53320d9twi] {
    background: white;
    min-height: 250px;
    padding: 0.75rem !important;
    margin-bottom: 0.75rem;
    border-radius: 6px;
}

.control-buttons[b-53320d9twi] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

    .control-buttons button[b-53320d9twi] {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }

    .control-buttons span[b-53320d9twi] {
        font-size: 0.875rem;
    }

.monitor-panel[b-53320d9twi] {
    margin-top: 0.75rem;
}

.accordion-item[b-53320d9twi] {
    margin-bottom: 0.25rem;
}

.accordion-button[b-53320d9twi] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

    .accordion-button i[b-53320d9twi] {
        margin-right: 0.5rem;
    }

.accordion-body[b-53320d9twi] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem !important;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .test-container[b-53320d9twi] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .step-indicator[b-53320d9twi] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .step-item[b-53320d9twi] {
        flex-shrink: 0;
        min-width: 80px;
    }

    .step-label[b-53320d9twi] {
        font-size: 0.75rem;
    }

    .control-buttons[b-53320d9twi] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 图标与文本同行样式 */
.icon-text-inline[b-53320d9twi] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

/* 紧凑表格和列表 */
.compact-list[b-53320d9twi] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .compact-list li[b-53320d9twi] {
        padding: 0.125rem 0;
        font-size: 0.8rem;
    }

/* 小标题样式 */
.small-title[b-53320d9twi] {
    font-size: 0.9rem;
    margin: 0.25rem 0;
    font-weight: 600;
}

/* 小按钮样式 */
.small-button[b-53320d9twi] {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.75rem !important;
}
/* _content/LEAFBlazorApp25/Components/WeChat/Test/TestWeChatPay.razor.rz.scp.css */
/* TestWeChatPay.razor.css */
.test-container[b-xzzh0z2j0p] {
    max-width: 1200px;
    max-height: 100%;
    margin: 0.5rem auto;
    padding: 1.0rem;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.test-header[b-xzzh0z2j0p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .test-header h3[b-xzzh0z2j0p] {
        font-size: 1.3rem; /* 加大标题字号 */
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .test-header h3 i[b-xzzh0z2j0p] {
            font-size: 1.2rem; /* 标题图标稍大 */
        }

    .test-header .mode-switch[b-xzzh0z2j0p] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .test-header .badge[b-xzzh0z2j0p] {
        font-size: 0.875rem; /* 加大徽章字号 */
        padding: 0.3rem 0.6rem;
    }

    .test-header button[b-xzzh0z2j0p] {
        padding: 0.25rem 0.6rem;
        font-size: 0.875rem; /* 加大按钮字号 */
    }

hr[b-xzzh0z2j0p] {
    margin: 0.5rem 0;
}

.payment-config[b-xzzh0z2j0p] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    padding: 0.875rem !important; /* 增加内边距 */
    margin-bottom: 0.875rem;
    border: 1px solid #dee2e6;
}

    .payment-config h5[b-xzzh0z2j0p] {
        font-size: 1rem; /* 四号字 */
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .payment-config h5 i[b-xzzh0z2j0p] {
            font-size: 0.95rem; /* 配置标题图标稍小 */
        }

    .payment-config .row[b-xzzh0z2j0p] {
        margin: 0;
    }

    .payment-config .col-md-4[b-xzzh0z2j0p],
    .payment-config .col-md-3[b-xzzh0z2j0p],
    .payment-config .col-md-5[b-xzzh0z2j0p] {
        padding: 0.25rem;
    }

    .payment-config .form-label[b-xzzh0z2j0p] {
        font-size: 0.875rem; /* 小四号字 */
        margin-bottom: 0.125rem;
    }

    .payment-config .form-control[b-xzzh0z2j0p],
    .payment-config .input-group-text[b-xzzh0z2j0p] {
        padding: 0.375rem 0.75rem; /* 增加内边距 */
        font-size: 0.875rem; /* 小四号字 */
        line-height: 1.4;
    }

    .payment-config .input-group-text[b-xzzh0z2j0p] {
        font-size: 0.875rem; /* 小四号字 */
    }

    .payment-config .mt-2[b-xzzh0z2j0p] {
        margin-top: 0.5rem !important;
    }

.step-navigation[b-xzzh0z2j0p] {
    margin-bottom: 0.5rem;
}

.step-indicator[b-xzzh0z2j0p] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.step-item[b-xzzh0z2j0p] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 增加图标和文本间距 */
    padding: 0.75rem; /* 增加内边距 */
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    min-width: 110px;
}

    .step-item.active[b-xzzh0z2j0p] {
        border-color: #0d6efd;
        background: #e7f1ff;
    }

    .step-item.completed[b-xzzh0z2j0p] {
        border-color: #198754;
        background: #d1e7dd;
    }

.step-number[b-xzzh0z2j0p] {
    width: 36px; /* 加大步骤数字圆圈 */
    height: 36px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.125rem; /* 加大步骤数字字号 */
    flex-shrink: 0;
}

.step-item.active .step-number[b-xzzh0z2j0p] {
    background: #0d6efd;
}

.step-item.completed .step-number[b-xzzh0z2j0p] {
    background: #198754;
}

.step-label[b-xzzh0z2j0p] {
    font-size: 0.95rem; /* 加大步骤标签字号 */
    font-weight: 500;
    line-height: 1.3;
}

.step-content-area[b-xzzh0z2j0p] {
    background: white;
    min-height: 280px; /* 稍微增加高度以适应更大字体 */
    padding: 0.875rem !important; /* 增加内边距 */
    margin-bottom: 0.875rem;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.payment-status[b-xzzh0z2j0p] {
    margin-bottom: 0.875rem;
}

    .payment-status .card[b-xzzh0z2j0p] {
        border: 1px solid #dee2e6;
    }

    .payment-status .card-header[b-xzzh0z2j0p] {
        padding: 0.625rem 0.875rem; /* 增加内边距 */
        font-size: 1rem; /* 四号字 */
        background: #f8f9fa;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .payment-status .card-header i[b-xzzh0z2j0p] {
            font-size: 0.95rem; /* 状态图标稍小 */
        }

    .payment-status .card-body[b-xzzh0z2j0p] {
        padding: 0.875rem;
    }

    .payment-status .row[b-xzzh0z2j0p] {
        margin: 0;
        align-items: center;
    }

    .payment-status .col-md-3[b-xzzh0z2j0p],
    .payment-status .col-md-2[b-xzzh0z2j0p],
    .payment-status .col-md-4[b-xzzh0z2j0p] {
        padding: 0.25rem;
        font-size: 0.875rem; /* 小四号字 */
        line-height: 1.4;
    }

    .payment-status strong[b-xzzh0z2j0p] {
        font-weight: 600;
        color: #495057;
    }

    .payment-status .badge[b-xzzh0z2j0p] {
        font-size: 0.875rem; /* 小四号字 */
        padding: 0.3rem 0.6rem;
        line-height: 1;
    }

.control-buttons[b-xzzh0z2j0p] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

    .control-buttons button[b-xzzh0z2j0p] {
        padding: 0.375rem 0.875rem; /* 增加内边距 */
        font-size: 1rem; /* 四号字 */
    }

        .control-buttons button i[b-xzzh0z2j0p] {
            font-size: 1rem; /* 按钮图标与文本同大 */
        }

    .control-buttons span[b-xzzh0z2j0p] {
        font-size: 0.95rem;
    }

.monitor-panel[b-xzzh0z2j0p] {
    margin-top: 0.875rem;
}

.accordion-item[b-xzzh0z2j0p] {
    margin-bottom: 0.25rem;
    border: 1px solid #dee2e6;
}

.accordion-button[b-xzzh0z2j0p] {
    padding: 0.625rem 1rem; /* 增加内边距 */
    font-size: 0.95rem; /* 加大字号 */
}

    .accordion-button i[b-xzzh0z2j0p] {
        margin-right: 0.5rem;
        font-size: 0.9rem; /* 监控面板图标稍小 */
    }

    .accordion-button:not(.collapsed)[b-xzzh0z2j0p] {
        background-color: #f8f9fa;
        color: #495057;
    }

.accordion-body[b-xzzh0z2j0p] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem !important;
    font-size: 0.875rem; /* 报告内容使用小四号字 */
    line-height: 1.4;
}

    .accordion-body i[b-xzzh0z2j0p] {
        font-size: 0.8rem; /* 报告内容图标更小 */
    }

/* 紧凑按钮样式 */
.small-button[b-xzzh0z2j0p] {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important; /* 小四号字 */
    line-height: 1.2;
}

    .small-button i[b-xzzh0z2j0p] {
        font-size: 0.875rem; /* 小按钮图标小四号字 */
    }

/* 图标文本同行 */
.icon-text-inline[b-xzzh0z2j0p] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* 稍微增加间距 */
    margin: 0;
    padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .test-container[b-xzzh0z2j0p] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .test-header h3[b-xzzh0z2j0p] {
        font-size: 1.1rem;
    }

    .payment-config .col-md-4[b-xzzh0z2j0p],
    .payment-config .col-md-3[b-xzzh0z2j0p],
    .payment-config .col-md-5[b-xzzh0z2j0p] {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0.125rem;
    }

    .payment-config .form-control[b-xzzh0z2j0p],
    .payment-config .input-group-text[b-xzzh0z2j0p] {
        padding: 0.3rem 0.6rem;
    }

    .step-indicator[b-xzzh0z2j0p] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .step-item[b-xzzh0z2j0p] {
        flex-shrink: 0;
        min-width: 90px;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .step-number[b-xzzh0z2j0p] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .step-label[b-xzzh0z2j0p] {
        font-size: 0.85rem;
    }

    .payment-status .row > div[b-xzzh0z2j0p] {
        margin-bottom: 0.5rem;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .control-buttons[b-xzzh0z2j0p] {
        gap: 0.5rem;
    }

        .control-buttons button[b-xzzh0z2j0p] {
            padding: 0.3rem 0.75rem;
            font-size: 0.9rem;
        }
}

/* 状态徽章颜色 */
.status-badge-secondary[b-xzzh0z2j0p] {
    background-color: #6c757d !important;
}

.status-badge-primary[b-xzzh0z2j0p] {
    background-color: #0d6efd !important;
}

.status-badge-info[b-xzzh0z2j0p] {
    background-color: #0dcaf0 !important;
}

.status-badge-warning[b-xzzh0z2j0p] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.status-badge-success[b-xzzh0z2j0p] {
    background-color: #198754 !important;
}

.status-badge-danger[b-xzzh0z2j0p] {
    background-color: #dc3545 !important;
}
/* _content/LEAFBlazorApp25/Components/WeChat/Test/TestWeChatPay2.razor.rz.scp.css */
/* TestWeChatPay.razor.css */
.test-container[b-4cl3gbw5kq] {
    max-width: 1200px;
    margin: 0.5rem auto;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.test-header[b-4cl3gbw5kq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

    .test-header h3[b-4cl3gbw5kq] {
        font-size: 1.1rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .test-header .mode-switch[b-4cl3gbw5kq] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .test-header .badge[b-4cl3gbw5kq] {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .test-header button[b-4cl3gbw5kq] {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }

hr[b-4cl3gbw5kq] {
    margin: 0.5rem 0;
}

.payment-config[b-4cl3gbw5kq] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    padding: 0.75rem !important;
    margin-bottom: 0.75rem;
    border: 1px solid #dee2e6;
}

    .payment-config h5[b-4cl3gbw5kq] {
        font-size: 0.9rem;
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .payment-config .row[b-4cl3gbw5kq] {
        margin: 0;
    }

    .payment-config .col-md-4[b-4cl3gbw5kq],
    .payment-config .col-md-3[b-4cl3gbw5kq],
    .payment-config .col-md-5[b-4cl3gbw5kq] {
        padding: 0.25rem;
    }

    .payment-config .form-label[b-4cl3gbw5kq] {
        font-size: 0.8rem;
        margin-bottom: 0.125rem;
    }

    .payment-config .form-control[b-4cl3gbw5kq],
    .payment-config .input-group-text[b-4cl3gbw5kq] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .payment-config .input-group-text[b-4cl3gbw5kq] {
        font-size: 0.75rem;
    }

    .payment-config .mt-2[b-4cl3gbw5kq] {
        margin-top: 0.5rem !important;
    }

.step-navigation[b-4cl3gbw5kq] {
    margin-bottom: 0.5rem;
}

.step-indicator[b-4cl3gbw5kq] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.step-item[b-4cl3gbw5kq] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    min-width: 100px;
}

    .step-item.active[b-4cl3gbw5kq] {
        border-color: #0d6efd;
        background: #e7f1ff;
    }

    .step-item.completed[b-4cl3gbw5kq] {
        border-color: #198754;
        background: #d1e7dd;
    }

.step-number[b-4cl3gbw5kq] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.step-item.active .step-number[b-4cl3gbw5kq] {
    background: #0d6efd;
}

.step-item.completed .step-number[b-4cl3gbw5kq] {
    background: #198754;
}

.step-label[b-4cl3gbw5kq] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.step-content-area[b-4cl3gbw5kq] {
    background: white;
    min-height: 250px;
    padding: 0.75rem !important;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.payment-status[b-4cl3gbw5kq] {
    margin-bottom: 0.75rem;
}

    .payment-status .card[b-4cl3gbw5kq] {
        border: 1px solid #dee2e6;
    }

    .payment-status .card-header[b-4cl3gbw5kq] {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        background: #f8f9fa;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .payment-status .card-body[b-4cl3gbw5kq] {
        padding: 0.75rem;
    }

    .payment-status .row[b-4cl3gbw5kq] {
        margin: 0;
        align-items: center;
    }

    .payment-status .col-md-3[b-4cl3gbw5kq],
    .payment-status .col-md-2[b-4cl3gbw5kq],
    .payment-status .col-md-4[b-4cl3gbw5kq] {
        padding: 0.25rem;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .payment-status strong[b-4cl3gbw5kq] {
        font-weight: 600;
        color: #495057;
    }

    .payment-status .badge[b-4cl3gbw5kq] {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
        line-height: 1;
    }

.control-buttons[b-4cl3gbw5kq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

    .control-buttons button[b-4cl3gbw5kq] {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }

    .control-buttons span[b-4cl3gbw5kq] {
        font-size: 0.875rem;
    }

.monitor-panel[b-4cl3gbw5kq] {
    margin-top: 0.75rem;
}

.accordion-item[b-4cl3gbw5kq] {
    margin-bottom: 0.25rem;
    border: 1px solid #dee2e6;
}

.accordion-button[b-4cl3gbw5kq] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

    .accordion-button i[b-4cl3gbw5kq] {
        margin-right: 0.5rem;
    }

    .accordion-button:not(.collapsed)[b-4cl3gbw5kq] {
        background-color: #f8f9fa;
        color: #495057;
    }

.accordion-body[b-4cl3gbw5kq] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem !important;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* 紧凑按钮样式 */
.small-button[b-4cl3gbw5kq] {
    padding: 0.125rem 0.375rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2;
}

/* 图标文本同行 */
.icon-text-inline[b-4cl3gbw5kq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .test-container[b-4cl3gbw5kq] {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    .payment-config .col-md-4[b-4cl3gbw5kq],
    .payment-config .col-md-3[b-4cl3gbw5kq],
    .payment-config .col-md-5[b-4cl3gbw5kq] {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0.125rem;
    }

    .step-indicator[b-4cl3gbw5kq] {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .step-item[b-4cl3gbw5kq] {
        flex-shrink: 0;
        min-width: 80px;
    }

    .step-label[b-4cl3gbw5kq] {
        font-size: 0.75rem;
    }

    .payment-status .row > div[b-4cl3gbw5kq] {
        margin-bottom: 0.5rem;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .control-buttons[b-4cl3gbw5kq] {
        gap: 0.5rem;
    }

        .control-buttons button[b-4cl3gbw5kq] {
            padding: 0.2rem 0.5rem;
            font-size: 0.8rem;
        }
}

/* 状态徽章颜色 */
.status-badge-secondary[b-4cl3gbw5kq] {
    background-color: #6c757d !important;
}

.status-badge-primary[b-4cl3gbw5kq] {
    background-color: #0d6efd !important;
}

.status-badge-info[b-4cl3gbw5kq] {
    background-color: #0dcaf0 !important;
}

.status-badge-warning[b-4cl3gbw5kq] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.status-badge-success[b-4cl3gbw5kq] {
    background-color: #198754 !important;
}

.status-badge-danger[b-4cl3gbw5kq] {
    background-color: #dc3545 !important;
}