a{
    color:var(--color-primary);
    opacity: 0.8;
}
a:hover{
    opacity: 1 !important;
}
a:focus{
    outline: none;
}
.row{
    margin:0;
    overflow: hidden;
}
.row>div{
    padding:0;
    margin-bottom: 10px;
}
/* ============================================
   方案一：统一微调所有按钮颜色变体
   ============================================ */
/*---------- 统一样式 ----------*/
.btn:focus{
    outline: none!important;
}
/* ---------- 主按钮 (Primary) ---------- */
.btn-primary {
    background-color: #4A6CF7 ;
    opacity: 1;
    border-color: #4A6CF7;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(74, 108, 247, 0.3);
    transition: all 0.2s ease;
}
.btn-primary:hover {
    background-color: #3651d4;
    border-color: #3651d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 108, 247, 0.4);
}
.btn-primary:active {
    transform: translateY(0px) !important; /* 点击时回弹 */
}

/* ---------- 成功按钮 (Success) ---------- */
.btn-success {
    background-color: #2ECC71;
    border-color: #2ECC71;
    border-radius: 6px;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3);
    transition: all 0.2s ease;
}
.btn-success:hover {
    background-color: #27AE60;
    border-color: #27AE60;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}
.btn-success:active {
    transform: translateY(0px) !important;
}

/* ---------- 信息按钮 (Info) ---------- */
.btn-info {
    opacity: 1;
    background-color: #95a5a6;      /* 中性灰 */
    border-color: #95a5a6;
    border-radius: 6px;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(149, 165, 166, 0.3);
    transition: all 0.2s ease;
}

.btn-info:hover {
    background-color: #7f8c8d;      /* 悬停加深 */
    border-color: #7f8c8d;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(149, 165, 166, 0.4);
}

.btn-info:active {
    transform: translateY(0px) !important;
}

.btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus {
    color: #ffffff;
    background-color: #7f8c8d;
    border-color: #6b7a7b;
    outline: none;
}

/* 禁用状态 */
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info {
    background-color: #bdc3c7;      /* 更浅的灰 */
    border-color: #bdc3c7;
    box-shadow: none;
    opacity: 0.65;
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- 警告按钮 (Warning) ---------- */
.btn-warning {
    opacity: 1;
    background-color: #F1C40F;
    border-color: #F1C40F;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(241, 196, 15, 0.3);
    transition: all 0.2s ease;
    color: #333; /* 黄色背景上深色文字更清晰 */
}
.btn-warning:hover {
    background-color: #D4AC0D;
    border-color: #D4AC0D;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.4);
}
.btn-warning:active {
    transform: translateY(0px) !important;
}

/* ---------- 危险按钮 (Danger) ---------- */
.btn-danger {
    opacity: 1;
    background-color: #E74C3C;
    border-color: #E74C3C;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
    transition: all 0.2s ease;
}
.btn-danger:hover {
    background-color: #C0392B;
    border-color: #C0392B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
.btn-danger:active {
    transform: translateY(0px) !important;
}

/* ---------- 默认按钮 (Default) 也顺带优化一下 ---------- */
.btn-default {
    background-color: #f5f5f5;
    border-color: #ddd;
    border-radius: 6px;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}
.btn-default:hover {
    background-color: #e8e8e8;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-default:active {
    transform: translateY(0px) !important;
}

/* ============================================
   表单样式优化 - 配套方案一风格
   ============================================ */

/* ---------- form-group 优化 ---------- */
.form-group {
    margin-bottom: 22px; /* 稍微增加间距，让表单更透气 */
}
.form-inline{
    display: flex;
    flex-wrap: wrap;
}
.form-inline .form-group{
    display: flex;
    align-items: center;
}
.form-inline .form-group label{
    display: block;
    width:auto;
    margin-right: 5px;
    margin-bottom: 0;
}
/* 带错误/成功状态反馈的form-group保持间距 */
.form-group.has-error,
.form-group.has-success,
.form-group.has-warning {
    margin-bottom: 22px;
}

/* ---------- form-control 核心优化 ---------- */

.form-control {
    /* 尺寸与圆角 */
    height: 34px; /* 比默认(34px)更高，更易点击 */
    min-width:150px;
    padding: 5px 8px;
    font-size: 15px;
    border-radius: 6px; /* 与按钮圆角统一 */

    /* 边框与背景 */
    border: 1.5px solid #dce1e8; /* 更柔和的边框色 */
    background-color: #fafbfc;
    color: #2c3e50;

    /* 阴影 - 极淡内阴影，增加层次 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);

    /* 过渡动画 */
    transition: all 0.25s ease;
}

/* ---------- 聚焦状态 (Focused) ---------- */
.form-control:focus {
    border-color: #4A6CF7; /* 与主按钮主色一致 */
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.12), /* 外发光，取代默认的粗边框 */
    inset 0 1px 3px rgba(0, 0, 0, 0.04);
    outline: none;
}

/* ---------- 禁用状态 (Disabled) ---------- */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #f0f2f5;
    opacity: 0.7;
    cursor: not-allowed;
}

/* ---------- 占位符 (Placeholder) 颜色 ---------- */
.form-control::-webkit-input-placeholder { color: #aab3c0; }
.form-control::-moz-placeholder { color: #aab3c0; }
.form-control:-ms-input-placeholder { color: #aab3c0; }

/* ---------- 不同尺寸适配 ---------- */
/* 大尺寸 (如 search 或大表单) */
.form-control.input-lg {
    height: 40px;
    padding: 10px 18px;
    font-size: 17px;
    border-radius: 8px;
}

/* 小尺寸 (如内联表单) */
.form-control.input-sm {
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
}

/* ---------- 静态文本 (form-control-static) ---------- */
.form-control-static {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
    color: #2c3e50;
}

/* ---------- 验证状态 (与按钮配色统一) ---------- */

/* 成功状态 */
.has-success .form-control {
    border-color: #2ECC71;
}
.has-success .form-control:focus {
    border-color: #2ECC71;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.12),
    inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
    color: #27AE60;
}

/* 警告状态 */
.has-warning .form-control {
    border-color: #F1C40F;
}
.has-warning .form-control:focus {
    border-color: #F1C40F;
    box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
    color: #D4AC0D;
}

/* 错误状态 */
.has-error .form-control {
    border-color: #E74C3C;
}
.has-error .form-control:focus {
    border-color: #E74C3C;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.12),
    inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
    color: #C0392B;
}

/* 验证图标微调 (如果有使用 glyphicon) */
.has-feedback .form-control {
    padding-right: 42px; /* 给反馈图标留空间 */
}
.has-feedback .form-control-feedback {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    color: #aab3c0;
}
.has-feedback.input-lg .form-control-feedback {
    width: 52px;
    height: 52px;
    line-height: 52px;
}
.has-feedback.input-sm .form-control-feedback {
    width: 34px;
    height: 34px;
    line-height: 34px;
}

/* ---------- 帮助文字 (help-block) ---------- */
.help-block {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 13px;
    color: #7f8c8d;
}

/* ---------- 表单布局微调 ---------- */

/* 水平表单中的 label */
.form-horizontal .control-label {
    padding-top: 12px; /* 与 input 高度(44px)垂直对齐 */
    font-weight: 600;
    color: #34495e;
}

/* 内联表单间距 */
.form-inline .form-group {
    margin-right: 12px;
}
@media (max-width: 768px) {
    .form-inline .form-group {
        margin-right: 0;
    }
}

/* ============================================
   option 专项优化 - 方案一风格
   ============================================ */

/* ---------- option 基础样式 ---------- */
.form-control option,
select.form-control option {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: normal;
    color: #2c3e50;
    background-color: #ffffff;

    /* 部分浏览器支持 */
    transition: all 0.15s ease;
}

/* ---------- option 悬停/选中状态 (部分浏览器支持) ---------- */
.form-control option:hover,
select.form-control option:hover,
.form-control option:checked,
select.form-control option:checked {
    background-color: #4A6CF7 !important;
    color: #ffffff !important;
}

/* ---------- option 禁用状态 ---------- */
.form-control option[disabled],
select.form-control option[disabled] {
    color: #b0b8c4;
    background-color: #f5f6f8;
    cursor: not-allowed;
}

/* ---------- optgroup 分组标题优化 ---------- */
.form-control optgroup,
select.form-control optgroup {
    font-weight: 700;
    color: #4A6CF7;
    background-color: #f8f9fb;
    padding: 6px 12px;
}

.form-control optgroup option,
select.form-control optgroup option {
    padding-left: 24px; /* 分组下的选项缩进 */
}

/* ---------- 针对不同尺寸适配 ---------- */
select.form-control.input-lg option {
    padding: 10px 20px;
    font-size: 17px;
}

select.form-control.input-sm option {
    padding: 5px 12px;
    font-size: 13px;
}

/* ---------- 多选模式 (multiple) 下的 option ---------- */
select.form-control[multiple] option {
    padding: 10px 16px;
    border-radius: 4px;
    margin: 2px 0; /* 选项之间留间隙 */
}

select.form-control[multiple] option:checked {
    background-color: #4A6CF7 !important;
    color: #ffffff !important;
}



/* ---------- 选中值的显示 (触发 select 后显示在 input 区域) ---------- */
select.form-control:focus option:checked,
select.form-control option:checked {
    background: #4A6CF7 linear-gradient(0deg, #4A6CF7 0%, #4A6CF7 100%);
}


/* ============================================
   table 表格优化 - 方案一风格
   ============================================ */

/* ---------- 基础表格 ---------- */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    border-collapse: separate;      /* 允许圆角 */
    border-spacing: 0;              /* 去除单元格间隙 */
    border-radius: 8px;             /* 整体圆角 */
    overflow: hidden;               /* 配合圆角裁切溢出 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 极淡投影 */
}

/* ---------- 表头 ---------- */
.table > thead > tr > th {
    padding: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;      /* 大写，更干练 */
    letter-spacing: 0.5px;
    color: #666;
    background-color: #f4f6f9;      /* 浅灰蓝背景 */
    border-bottom: 1px solid #ebeef5;
    vertical-align: bottom;
}

/* ---------- 表头排序指示器 (如果有) ---------- */
.table > thead > tr > th.sorting {
    cursor: pointer;
}
.table > thead > tr > th.sorting:hover {
    background-color: #e8ecf2;
}

/* ---------- 表格单元格 ---------- */
.table > tbody > tr > td {
    padding: 6px;
    font-size: 14px;
    color: #232323;
    vertical-align: middle;
    border-top: 1px solid #ebeef5;  /* 极浅分割线 */
    background-color: #ffffff;
}

/* ---------- 底部 (tfoot) ---------- */
.table > tfoot > tr > td {
    padding: 6px 9px;
    font-size: 14px;
    background-color: #f8f9fb;
    border-top: 2px solid #ebeef5;
    font-weight: 600;
    color: #2c3e50;
}

/* ---------- 行悬停效果 (配合 .table-hover) ---------- */
.table > tbody > tr:hover > td {
    background-color: #f0f4ff;      /* 极浅蓝色 */
    transition: background-color 0.15s ease;
}

/* ---------- 紧凑表格 ---------- */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 4px 7px;
    font-size: 13px;
}

/* ---------- 边框表格 (table-bordered) ---------- */
.table-bordered {
    border: 1px solid #e2e7ed;
    border-radius: 8px;
    overflow: hidden;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #ebeef5;
}

.table-bordered > thead > tr > th {
    border-bottom-width: 2px;
}

/* ---------- 条纹表格 (table-striped) ---------- */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #f8fafc;      /* 极浅灰，比默认更柔和 */
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background-color: #f0f4ff;      /* 悬停覆盖条纹 */
}

/* ---------- 行状态 (与配色统一) ---------- */

/* 成功行 */
.table > tbody > tr.success > td {
    background-color: #eafaf1;
    color: #1e8449;
}
.table > tbody > tr.success:hover > td {
    background-color: #d5f5e3;
}

/* 警告行 */
.table > tbody > tr.warning > td {
    background-color: #fef9e7;
    color: #9a7d0a;
}
.table > tbody > tr.warning:hover > td {
    background-color: #fdebd0;
}

/* 错误行 */
.table > tbody > tr.danger > td {
    background-color: #fdedec;
    color: #922b21;
}
.table > tbody > tr.danger:hover > td {
    background-color: #fadbd8;
}

/* 信息行 (灰色) */
.table > tbody > tr.info > td {
    background-color: #f0f2f5;
    color: #5d6d7e;
}
.table > tbody > tr.info:hover > td {
    background-color: #e5e8ec;
}

/* ---------- 表格响应式 (table-responsive) ---------- */
.table-responsive {
    border-radius: 8px;
    border: 1px solid #e2e7ed;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    border-radius: 0;              /* 内部表格取消圆角，由容器控制 */
    margin-bottom: 0;
    box-shadow: none;
}

.table-responsive > .table-bordered {
    border: 0;
}

/* ---------- 斑马条纹 + 悬停组合 ---------- */
.table-striped.table-hover > tbody > tr:nth-of-type(odd):hover > td {
    background-color: #e8edf8;
}

/* ---------- 选中行 (自定义扩展) ---------- */
.table > tbody > tr.active > td {
    background-color: #e8edf8;
}
.table > tbody > tr.active:hover > td {
    background-color: #dce3f0;
}

/* ============================================
   nav-tabs 优化 - 方案一风格
   ============================================ */

/* ---------- 基础容器 ---------- */
.nav-tabs {
    border-bottom: 2px solid #e2e7ed;  /* 加粗底边，更稳重 */
}

/* ---------- 每个标签项 ---------- */
.nav-tabs > li {
    margin-bottom: -2px;               /* 与底部边框重叠 */
}

/* ---------- 标签链接 ---------- */
.nav-tabs > li > a {
    padding: 12px 22px;
    font-size: 15px;
    color: #666;                   /* 非激活状态灰色 */
    background-color: transparent;
    border: none;                     /* 去掉默认边框，改用底部指示器 */
    border-radius: 6px 6px 0 0;
    transition: all 0.25s ease;
    margin-right: 4px;
    position: relative;
}

/* ---------- 标签链接悬停 ---------- */
.nav-tabs > li > a:hover {
    color: #4A6CF7;                   /* 主色 */
    background-color: #f4f6fa;
    border: none;
    outline: none !important;
}

/* ---------- 激活状态 ---------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #4A6CF7;                   /* 主色 */
    background-color: transparent;
    border: none;
    outline: none !important;
    font-weight: 700;
    position: relative;
}

/* ---------- 激活底部指示条 (下划线动画) ---------- */
.nav-tabs > li.active > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #4A6CF7;
    border-radius: 3px 3px 0 0;
    animation: navTabSlide 0.3s ease;
}

/* 下划线滑入动画 */
@keyframes navTabSlide {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ---------- 禁用状态 ---------- */
.nav-tabs > li.disabled > a {
    color: #bdc3c7;
    cursor: not-allowed;
}
.nav-tabs > li.disabled > a:hover {
    color: #bdc3c7;
    background-color: transparent;
    cursor: not-allowed;
}

/* ---------- 带图标标签 ---------- */
.nav-tabs > li > a > i {
    margin-right: 8px;
    font-size: 16px;
}

/* ---------- 垂直 tabs (nav-stacked) ---------- */
.nav-tabs.nav-stacked {
    border-bottom: none;
}
.nav-tabs.nav-stacked > li {
    margin-bottom: 4px;
}
.nav-tabs.nav-stacked > li > a {
    border-radius: 6px;
    padding: 12px 20px;
}
.nav-tabs.nav-stacked > li.active > a::after {
    display: none;                   /* 垂直模式不用下划线 */
}
.nav-tabs.nav-stacked > li.active > a {
    background-color: #4A6CF7;
    color: #ffffff;
}
.nav-tabs.nav-stacked > li.active > a:hover {
    background-color: #3651d4;
    color: #ffffff;
}
.nav-tabs.nav-stacked > li > a:hover {
    background-color: #f4f6fa;
}

/* ---------- 可关闭标签 (带关闭按钮) ---------- */
.nav-tabs > li > a .close-tab {
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    color: #bdc3c7;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-tabs > li:hover > a .close-tab {
    opacity: 1;
}
.nav-tabs > li > a .close-tab:hover {
    color: #E74C3C;
}

/* ---------- 标签内容面板 (tab-content) ---------- */
.tab-content {
    padding: 4px 4px 4px 4px;
    color: #34495e;
    font-size: 15px;
    line-height: 1.7;
}

.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}

/* 面板淡入动画 */
@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 响应式适配 ---------- */
@media (max-width: 768px) {
    .nav-tabs > li {
        float: none;
        display: block;
    }
    .nav-tabs > li > a {
        border-radius: 6px;
        margin-bottom: 2px;
    }
    .nav-tabs > li.active > a::after {
        display: none;
    }
    .nav-tabs > li.active > a {
        background-color: #4A6CF7;
        color: #ffffff;
    }
    .nav-tabs > li.active > a:hover {
        background-color: #3651d4;
        color: #ffffff;
    }
    .nav-tabs {
        border-bottom: none;
    }
}