/**
 * BsConnect 主题层 —— 蓝白灰
 *
 * 全站视觉的根：设计变量 + 基础样式 + 通用组件。
 * 色彩基调：白底 + 浅灰蓝面 + 蓝色点缀，其余保持灰阶，长时间看眼不累。
 *
 * 变量一律用「语义名」（primary / alt / success …），不跟色相绑定 ——
 * 换配色只改 :root 这一段，页面样式一行都不用动。
 * （这套变量已经经历过两次整体换色：粉紫 → 暗色赛博 → 蓝白灰。）
 *
 * 引入顺序：layui.css → bs-theme.css → bs-toast.css / bs-layer.css → 页面级 css
 *
 * layui 必须排在**前面**：它自带 a{color:#333} 这类元素级重置，
 * 若排在主题之后，会把我们的链接色、文字色整片盖掉。
 */

/* ══════════════════════════ 1. 设计变量 ══════════════════════════ */

:root {
    /* ── 蓝：主色（页面唯一的高饱和色，其余全是灰阶）── */
    --bs-primary-50:  #f5f9ff;
    --bs-primary-100: #e8f1fe;
    --bs-primary-200: #d3e4fd;
    --bs-primary-300: #aecdfa;
    --bs-primary-400: #6ba1f5;
    --bs-primary-500: #3b7ef0;
    --bs-primary-600: #2563d4;

    /* ── 灰蓝：辅色（中性面、次要标签）── */
    --bs-alt-100: #f1f4f8;
    --bs-alt-200: #e4e9f0;
    --bs-alt-300: #cbd4e0;
    --bs-alt-400: #94a3b8;
    --bs-alt-500: #64748b;

    /* ── 状态色：均为「浅底 + 深字」的成对搭配 ── */
    --bs-success-300: #d8f0e5;
    --bs-success-400: #0f7a56;
    --bs-info-300:    #d6e7fb;
    --bs-info-400:    #1a6fbc;
    --bs-warn-300:    #fdeecb;
    --bs-warn-400:    #9a6510;
    --bs-danger-400:  #cf3a52;

    /* ── 文字：三级都按 WCAG AA（≥4.5:1）核定过，白卡片与灰底上都够看 ── */
    --bs-text:   #1f2a37;   /* 14.5:1 / 13.4:1 */
    --bs-text-2: #526175;   /*  6.3:1 /  5.8:1 */
    --bs-text-3: #5f6c7e;   /*  5.3:1 /  4.9:1 */

    /* ── 表面与线条 ── */
    --bs-bg:           #f4f6f9;
    --bs-bg-deep:      #ffffff;   /* 输入框等内凹面：浅色主题下用纯白更干净 */
    --bs-surface:      #ffffff;
    --bs-surface-2:    #f7f9fc;
    --bs-surface-3:    #eef2f7;
    --bs-line:         #e6eaf0;
    --bs-line-strong:  #d3dae4;

    /* ── 圆角 ── */
    --bs-radius:      10px;
    --bs-radius-sm:   8px;
    --bs-radius-xs:   6px;
    --bs-radius-pill: 999px;

    /* ── 阴影：浅色主题靠投影分层，不用发光 ── */
    --bs-shadow-sm: 0 1px 3px rgba(24, 42, 72, .06), 0 1px 2px rgba(24, 42, 72, .04);
    --bs-shadow:    0 6px 20px -8px rgba(24, 42, 72, .16);
    --bs-shadow-lg: 0 16px 42px -16px rgba(24, 42, 72, .22);
    /* 带蓝调的浮起阴影，用于主按钮与卡片悬停 —— 不是发光 */
    --bs-glow:        0 6px 16px -6px rgba(37, 99, 212, .45);
    --bs-glow-strong: 0 10px 24px -8px rgba(37, 99, 212, .55);

    /* ── 渐变 ── */
    --bs-grad:      linear-gradient(118deg, #4a8af4 0%, #3b7ef0 45%, #2563d4 100%);
    --bs-grad-soft: linear-gradient(118deg, #eef4ff 0%, #f5f8fd 100%);

    /* ── 动效 ── */
    --bs-ease: cubic-bezier(.22, .61, .36, 1);
    --bs-dur:  .22s;
}

/* ══════════════════════════ 2. 基础 ══════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bs-text);
    background-color: var(--bs-bg);
    /* 顶部一层极淡的蓝，让大片浅灰不至于发平 */
    background-image: radial-gradient(1000px 480px at 50% -14%, rgba(59, 126, 240, .07), transparent 62%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--bs-primary-500); text-decoration: none; transition: color var(--bs-dur) var(--bs-ease); }
a:hover { color: var(--bs-primary-600); }

img { max-width: 100%; display: block; }

/* 选中态：浅蓝底配深字 —— 白字压在浅蓝上会看不清 */
::selection { background: var(--bs-primary-200); color: var(--bs-text); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--bs-alt-300);
    border-radius: var(--bs-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--bs-alt-400); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--bs-alt-300) transparent; }

/* ══════════════════════════ 3. 布局 ══════════════════════════ */

.bs-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.bs-container--narrow { max-width: 760px; }

.bs-row { display: flex; }
.bs-row--between { justify-content: space-between; }
.bs-row--center { align-items: center; }
.bs-row--wrap { flex-wrap: wrap; }
.bs-gap-8 { gap: 8px; }
.bs-gap-12 { gap: 12px; }
.bs-gap-16 { gap: 16px; }
.bs-gap-20 { gap: 20px; }

.bs-grid { display: grid; gap: 22px; }
.bs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bs-mt-0  { margin-top: 0; }
.bs-mt-8  { margin-top: 8px; }
.bs-mt-16 { margin-top: 16px; }
.bs-mt-24 { margin-top: 24px; }
.bs-mb-0  { margin-bottom: 0; }
.bs-mb-8  { margin-bottom: 8px; }
.bs-mb-16 { margin-bottom: 16px; }
.bs-mb-24 { margin-bottom: 24px; }

.bs-text-center { text-align: center; }
.bs-text-muted  { color: var(--bs-text-3); }
.bs-text-sm     { font-size: 13px; }
.bs-text-xs     { font-size: 12px; }
.bs-hidden      { display: none !important; }

/* 状态文字：额度告急 / 已过期这类需要一眼看见的提示 */
.bs-text-ok     { color: var(--bs-success-400); }
.bs-text-warn   { color: var(--bs-warn-400); }
.bs-text-danger { color: var(--bs-danger-400); }

/* ══════════════════════════ 4. 导航 ══════════════════════════ */

/* 导航不描边：半透明毛玻璃 + 一道很轻的下投影，滚动时自然和内容分开 */
.bs-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .03), 0 8px 22px -18px rgba(24, 42, 72, .35);
}

.bs-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }

.bs-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--bs-text); letter-spacing: .5px; }

.bs-brand__mark {
    width: 36px; height: 36px; flex: none;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-grad);
    color: #e8edf4; font-size: 17px;
    box-shadow: var(--bs-glow);
}
.bs-brand__mark img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }

.bs-nav__menu { display: flex; align-items: center; gap: 4px; }
.bs-nav__form { display: inline-flex; }

.bs-nav__link {
    position: relative;
    padding: 8px 15px;
    border-radius: var(--bs-radius-sm);
    color: var(--bs-text-2);
    font-size: 14px;
    transition: all var(--bs-dur) var(--bs-ease);
}
/* 导航项不加底色：选中只靠文字变色 + 下方一条指示线，页头更干净 */
.bs-nav__link:hover { color: var(--bs-primary-500); }
.bs-nav__link.is-active { color: var(--bs-primary-500); font-weight: 700; }
/* 选中项下面一小段指示线（居中，20×3） */
.bs-nav__link.is-active::after {
    content: "";
    position: absolute; left: 50%; bottom: 3px;
    transform: translateX(-50%);
    width: 20px; height: 3px;
    border-radius: 2px;
    background: var(--bs-primary-500);
}

.bs-nav__toggle {
    display: none;
    width: 40px; height: 40px;
    border: 0; background: none; cursor: pointer;
    flex-direction: column; justify-content: center; gap: 5px; padding: 9px;
}
.bs-nav__toggle span { display: block; height: 2px; border-radius: 2px; background: var(--bs-text-2); transition: all var(--bs-dur) var(--bs-ease); }

/* ══════════════════════════ 5. 按钮 ══════════════════════════ */

.bs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--bs-radius-sm);
    font-size: 14px; font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease), background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease), border-color var(--bs-dur) var(--bs-ease);
    -webkit-user-select: none; user-select: none;
}

.bs-btn--primary {
    color: #ffffff;
    background: var(--bs-grad);
    background-size: 160% 100%;
    box-shadow: var(--bs-glow);
}
.bs-btn--primary:hover {
    color: #ffffff;
    transform: translateY(-1px);
    background-position: 100% 0;
    box-shadow: var(--bs-glow-strong);
}

.bs-btn--ghost {
    color: var(--bs-primary-500);
    background: transparent;
    border-color: var(--bs-primary-300);
}
.bs-btn--ghost:hover { color: var(--bs-primary-600); background: var(--bs-primary-100); border-color: var(--bs-primary-400); }

.bs-btn--soft {
    color: var(--bs-alt-500);
    background: var(--bs-alt-100);
    border-color: var(--bs-alt-200);
}
.bs-btn--soft:hover { color: #f4f6f9; background: var(--bs-alt-400); border-color: var(--bs-alt-400); }

.bs-btn--plain { color: var(--bs-text-2); background: transparent; border-color: var(--bs-line-strong); }
.bs-btn--plain:hover { color: var(--bs-primary-500); background: var(--bs-surface-2); border-color: var(--bs-primary-300); }

.bs-btn--danger { color: #ffffff; background: linear-gradient(118deg, #e05a72, #cf3a52); box-shadow: 0 4px 12px -5px rgba(207, 58, 82, .35); }
.bs-btn--danger:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(207, 58, 82, .55); }

.bs-btn--sm { padding: 6px 15px; font-size: 13px; }
.bs-btn--lg { padding: 13px 32px; font-size: 15px; }
.bs-btn--block { width: 100%; }

.bs-btn:disabled, .bs-btn.is-disabled {
    opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* ══════════════════════════ 6. 表单 ══════════════════════════ */

.bs-field { margin-bottom: 20px; }

.bs-label {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 8px;
    font-size: 14px; font-weight: 700; color: var(--bs-text);
}
.bs-label__required { color: var(--bs-primary-500); font-size: 15px; line-height: 1; }

.bs-input, .bs-select, .bs-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    color: var(--bs-text);
    background: var(--bs-bg-deep);
    border: 1.5px solid var(--bs-line-strong);
    border-radius: var(--bs-radius-sm);
    outline: none;
    transition: border-color var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease), background var(--bs-dur) var(--bs-ease);
    -webkit-appearance: none; appearance: none;
}
.bs-input::placeholder, .bs-textarea::placeholder { color: var(--bs-text-3); }
.bs-input:hover, .bs-select:hover, .bs-textarea:hover { border-color: var(--bs-primary-300); }
.bs-input:focus, .bs-select:focus, .bs-textarea:focus {
    border-color: var(--bs-primary-500);
    background: var(--bs-surface);
    box-shadow: 0 0 0 3px rgba(59, 126, 240, .16);
}
.bs-input:disabled { opacity: .6; cursor: not-allowed; }
.bs-textarea { min-height: 110px; resize: vertical; line-height: 1.75; }

.bs-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
    padding-right: 42px;
}
.bs-select option { background: var(--bs-surface-2); color: var(--bs-text); }

/* 紧凑版下拉：表格单元格里用 */
.bs-select--sm {
    padding: 7px 34px 7px 12px;
    font-size: 13px;
    background-size: 15px;
    background-position: right 11px center;
}

.bs-input-group { display: flex; gap: 10px; }
.bs-input-group .bs-input { flex: 1 1 auto; min-width: 0; }
.bs-input-group .bs-btn { flex: none; }

.bs-hint { margin-top: 7px; font-size: 12.5px; color: var(--bs-text-3); line-height: 1.65; }
.bs-hint i { color: var(--bs-primary-400); margin-right: 4px; }

.bs-error-text { margin-top: 7px; font-size: 12.5px; color: var(--bs-danger-400); }

.bs-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--bs-text-2); }
.bs-check input { width: 16px; height: 16px; accent-color: var(--bs-primary-500); cursor: pointer; }

/* ── 跨页面共用：输入框内嵌按钮（密码可见性切换等）──
   放在主题层而不是某个页面样式表里：它被登录页、注册页、个人资料、
   后台登录、系统设置、上游表单等多个布局下的页面共用，
   放进任何单个页面级文件里，别的布局都会丢样式。 */

.bs-input-icon { position: relative; }
.bs-input-icon .bs-input { padding-right: 46px; }
.bs-input-icon__toggle {
    position: absolute; top: 50%; right: 10px;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--bs-text-3); font-size: 15px;
    border-radius: 6px;
    transition: color var(--bs-dur) var(--bs-ease), background var(--bs-dur) var(--bs-ease);
}
.bs-input-icon__toggle:hover { color: var(--bs-primary-500); background: var(--bs-surface-3); }
.bs-input-icon__toggle.is-on { color: var(--bs-primary-500); }

/* ── 跨页面共用：选项卡 ── */

/* 代码语言切换 */
.bs-tabs { display: inline-flex; gap: 5px; padding: 4px; background: var(--bs-primary-50); border-radius: var(--bs-radius-pill); margin-bottom: 12px; }
.bs-tabs__item {
    padding: 7px 18px;
    border-radius: var(--bs-radius-pill);
    border: 0; background: transparent;
    color: var(--bs-text-3);
    font-size: 12.5px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--bs-dur) var(--bs-ease);
}
.bs-tabs__item:hover { color: var(--bs-primary-500); }
.bs-tabs__item.is-active { color: #ffffff; background: var(--bs-grad); box-shadow: 0 8px 16px -9px rgba(37, 99, 212, .45); }

/* 竖向变体：左侧导航 + 右侧内容，用于「分版块」的长表单（如后台系统设置）。
   窄屏下由页面样式收成横向一行（见 bs-admin.css）。 */
.bs-tabs--vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 12px 28px -18px rgba(24, 42, 72, .3);
    margin-bottom: 0;
}
.bs-tabs--vertical .bs-tabs__item {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 13px;
    border-radius: var(--bs-radius-sm);
    text-align: left;
    font-size: 13.5px;
}
.bs-tabs--vertical .bs-tabs__item i { width: 16px; text-align: center; color: var(--bs-text-3); transition: color var(--bs-dur) var(--bs-ease); }
.bs-tabs--vertical .bs-tabs__item:hover { background: var(--bs-surface-2); color: var(--bs-primary-500); }
.bs-tabs--vertical .bs-tabs__item.is-active {
    background: var(--bs-primary-50);
    color: var(--bs-primary-500);
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--bs-primary-500);
}
.bs-tabs--vertical .bs-tabs__item.is-active i { color: var(--bs-primary-500); }
/* ── 跨页面共用：页头（标题 + 副标题 + 右侧操作）──
   前台文档页、个人中心、后台都用到，放在任何单个页面样式表里都会漏。 */

/* ══════════════ 页头 ══════════════ */

.bs-page-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.bs-page-head__title { margin: 0; font-size: 21px; font-weight: 900; color: var(--bs-text); letter-spacing: .3px; }
.bs-page-head__desc { margin: 5px 0 0; font-size: 13px; color: var(--bs-text-3); }
.bs-page-head__actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ══════════════════════════ 7. 卡片 ══════════════════════════ */

/**
 * 卡片不画描边
 *
 * 一层浅色描边在白底上几乎看不见，却让整片界面显得很碎。
 * 改成纯阴影托起来：白底 + 投影本身就是「浮在上面」的意思，不需要再框一圈。
 * 分区靠底色深浅，不靠线 —— 底部那一圈稍重的阴影负责把卡片从背景里拎出来。
 */
.bs-card {
    position: relative;
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 12px 28px -18px rgba(24, 42, 72, .3);
    overflow: hidden;
}

.bs-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 22px;
    background: var(--bs-surface-2);
}
.bs-card__title { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 800; color: var(--bs-text); margin: 0; }
.bs-card__title i { color: var(--bs-primary-500); }
.bs-card__body { padding: 22px 22px; }
.bs-card__foot { padding: 16px 22px; background: var(--bs-surface-2); }

.bs-card--hover { transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease); }
.bs-card--hover:hover { transform: translateY(-3px); box-shadow: 0 4px 10px -6px rgba(24, 42, 72, .12), 0 22px 44px -20px rgba(24, 42, 72, .34); }

/* ══════════════════════════ 8. 标签 / 徽章 / 登录方式圆片 ══════════════════════════ */

.bs-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--bs-radius-xs);
    font-size: 12px; font-weight: 700;
    background: var(--bs-primary-100); color: var(--bs-primary-500);
    border: 1px solid var(--bs-primary-200);
}
.bs-tag--lav  { background: var(--bs-alt-100); color: var(--bs-alt-500); border-color: var(--bs-alt-200); }
.bs-tag--mint { background: var(--bs-success-300); color: var(--bs-success-400); border-color: var(--bs-success-300); }
.bs-tag--sky  { background: var(--bs-info-300); color: var(--bs-info-400); border-color: var(--bs-info-300); }
.bs-tag--sun  { background: var(--bs-warn-300); color: var(--bs-warn-400); border-color: var(--bs-warn-300); }
.bs-tag--gray { background: var(--bs-surface-2); color: var(--bs-text-3); border-color: var(--bs-line-strong); }

.bs-provider {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--provider-color, #6a7789);
    color: #e8edf4;
    font-size: 12px; font-weight: 700;
    line-height: 1;
    flex: none;
    box-shadow: 0 2px 6px -2px var(--provider-color, #6a7789);
    transition: transform var(--bs-dur) var(--bs-ease);
}
.bs-provider:hover { transform: translateY(-2px) scale(1.06); }
.bs-provider i { font-size: 13px; }

.bs-provider--full {
    width: auto; height: auto;
    padding: 5px 13px 5px 8px;
    border-radius: var(--bs-radius-pill);
    gap: 6px;
}
.bs-provider--full em { font-style: normal; font-size: 12.5px; font-weight: 700; }

/* 登录方式圆片的排列容器：默认右对齐（套餐卡片里用），
   左侧对齐的场景由调用方用行内样式覆盖 */
/* 默认靠左。登录方式的圆片都跟在标题或数值后面，靠右会让它们飘到格子另一头，
   和左边的内容脱节。原先默认 flex-end，各处调用再逐个用行内样式改回来，
   只有个人中心漏了 —— 索性把默认值定成实际想要的那个。 */
.bs-provider-list { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }

/* 「+N」折叠标记：悬停时由 JS 弹出完整列表（见 bs-user.js） */
.bs-provider-more {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px;
    padding: 0 7px;
    border-radius: var(--bs-radius-pill);
    background: var(--bs-surface-3);
    color: var(--bs-text-3);
    font-size: 11.5px; font-weight: 700;
    cursor: default;
    transition: all var(--bs-dur) var(--bs-ease);
}
.bs-provider-more:hover {
    color: var(--bs-primary-500);
    background: var(--bs-primary-100);
}

/* ══════════════════════════ 9. 提示条 ══════════════════════════ */

/* 提示条靠底色和文字颜色区分类型，同样不描边 */
.bs-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px;
    border-radius: var(--bs-radius-sm);
    font-size: 13.5px;
    line-height: 1.7;
}
.bs-alert i { margin-top: 3px; }
.bs-alert--info { background: var(--bs-primary-100); color: var(--bs-primary-600); }
.bs-alert--ok   { background: var(--bs-success-300); color: var(--bs-success-400); }
.bs-alert--warn { background: var(--bs-warn-300);    color: var(--bs-warn-400); }
.bs-alert--err  { background: #fdeaee;               color: var(--bs-danger-400); }

/* ══════════════════════════ 10. 表格 ══════════════════════════ */

.bs-table-wrap { width: 100%; overflow-x: auto; }

/**
 * 表格直接充当承载面（外面不再套一层白卡片）
 *
 * 白卡片里再放白底表格 = 两层白色，视觉上多余。
 * 这里让表格自己就是那一层白 —— 少一层嵌套，也少一圈内边距。
 */
.bs-table-plain {
    background: var(--bs-surface);
    border-radius: var(--bs-radius);
    box-shadow: 0 1px 2px rgba(24, 42, 72, .04), 0 12px 28px -18px rgba(24, 42, 72, .3);
}

/* 容器圆角会裁掉表头，所以表头的首尾单元格要跟着圆 */
.bs-table-plain .bs-table th:first-child { border-radius: calc(var(--bs-radius) - 1px) 0 0 0; }
.bs-table-plain .bs-table th:last-child  { border-radius: 0 calc(var(--bs-radius) - 1px) 0 0; }

.bs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.bs-table th {
    padding: 11px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--bs-text-2);
    background: var(--bs-surface-2);
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-line-strong);
}
.bs-table th:first-child { border-radius: var(--bs-radius-xs) 0 0 0; }
.bs-table th:last-child  { border-radius: 0 var(--bs-radius-xs) 0 0; }
.bs-table td { padding: 12px 16px; border-bottom: 1px solid var(--bs-line); color: var(--bs-text-2); vertical-align: middle; }
.bs-table tbody tr { transition: background var(--bs-dur) var(--bs-ease); }
.bs-table tbody tr:hover td { background: var(--bs-primary-50); }
.bs-table tbody tr:last-child td { border-bottom: 0; }

.bs-mono {
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: .3px;
}

/* ══════════════════════════ 11. 分页 ══════════════════════════ */

.bs-pager { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 22px; }
.bs-pager__item {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 11px;
    border-radius: var(--bs-radius-sm);
    border: 1px solid var(--bs-line-strong);
    background: var(--bs-surface-2);
    color: var(--bs-text-2);
    font-size: 13px; font-weight: 600;
    transition: all var(--bs-dur) var(--bs-ease);
}
.bs-pager__item:hover { color: var(--bs-primary-500); border-color: var(--bs-primary-400); background: var(--bs-primary-100); }
.bs-pager__item.is-active { color: #ffffff; background: var(--bs-grad); border-color: transparent; box-shadow: var(--bs-glow); }
.bs-pager__item.is-disabled { opacity: .4; pointer-events: none; }

/* ══════════════════════════ 12. 空状态 ══════════════════════════ */

.bs-empty { padding: 50px 20px; text-align: center; }
.bs-empty__art { width: 132px; margin: 0 auto 16px; }
.bs-empty__title { font-size: 15px; font-weight: 700; color: var(--bs-text-2); margin-bottom: 6px; }
.bs-empty__desc { font-size: 13px; color: var(--bs-text-3); }

/* ══════════════════════════ 13. 复制框 ══════════════════════════ */

.bs-copy {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    background: var(--bs-bg-deep);
    border: 1px dashed var(--bs-primary-300);
    border-radius: var(--bs-radius-sm);
}
.bs-copy__value {
    flex: 1 1 auto; min-width: 0;
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 13px;
    color: var(--bs-primary-500);
    word-break: break-all;
    -webkit-user-select: all; user-select: all;
}
.bs-copy__btn {
    flex: none;
    padding: 5px 13px;
    border-radius: var(--bs-radius-xs);
    border: 1px solid var(--bs-primary-300);
    background: transparent;
    color: var(--bs-primary-500);
    font-size: 12.5px; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--bs-dur) var(--bs-ease);
}
.bs-copy__btn:hover { background: var(--bs-primary-500); color: #ffffff; border-color: var(--bs-primary-500); box-shadow: var(--bs-glow); }

/* ══════════════════════════ 13.5 可点击复制的文字 ══════════════════════════ */

/**
 * 直接点文字就复制（配合全局的 [data-copy] 事件委托）。
 * 虚线下划线是「能点」的视觉暗示 —— 没有它用户会以为是普通文本。
 */
.bs-copytext {
    cursor: pointer;
    border-bottom: 1px dashed var(--bs-line-strong);
    transition: color var(--bs-dur) var(--bs-ease), border-color var(--bs-dur) var(--bs-ease);
}
.bs-copytext:hover {
    color: var(--bs-primary-500);
    border-bottom-color: var(--bs-primary-300);
}

/* ══════════════════════════ 14. 语言切换 ══════════════════════════ */

.bs-lang { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--bs-surface-2); border: 1px solid var(--bs-line-strong); border-radius: var(--bs-radius-pill); }
.bs-lang__item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: var(--bs-radius-pill);
    font-size: 12.5px; font-weight: 600;
    color: var(--bs-text-3);
    transition: all var(--bs-dur) var(--bs-ease);
}
.bs-lang__item img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; }
.bs-lang__item:hover { color: var(--bs-primary-500); }
.bs-lang__item.is-active { color: #ffffff; background: var(--bs-primary-500); }

/* ══════════════════════════ 15. 加载动画 ══════════════════════════ */

.bs-dots { display: inline-flex; gap: 5px; align-items: center; }
.bs-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bs-primary-500);
    animation: bs-bounce 1.15s infinite var(--bs-ease);
}
.bs-dots span:nth-child(2) { animation-delay: .16s; background: var(--bs-alt-500); }
.bs-dots span:nth-child(3) { animation-delay: .32s; background: var(--bs-warn-400); }

@keyframes bs-bounce {
    0%, 70%, 100% { transform: translateY(0) scale(1); opacity: .55; }
    35%           { transform: translateY(-7px) scale(1.15); opacity: 1; }
}

@keyframes bs-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bs-rise { animation: bs-rise .5s var(--bs-ease) both; }

/* ══════════════════════════ 16. 页脚 ══════════════════════════ */

/**
 * 内容不足一屏时，页脚也要贴在视口底部。
 * 用 flex 列把中间那块撑开，页脚自然被顶下去 ——
 * 否则短页面（比如只有一行数据）的页脚会停在内容后面、悬在半空。
 *
 * 只作用于带 .bs-layout-main 的页面（前台主布局与个人中心）；
 * 登录页、后台各有自己的整屏布局，不受影响。
 */
body.bs-layout-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 顶部导航与页脚之外的部分一律撑满 ——
   前台主布局是 .bs-main，个人中心是 .bs-container.bs-user，
   用 :not() 一并覆盖，以后加新布局也不用再改这里 */
body.bs-layout-main > :not(.bs-nav):not(.bs-footer) { flex: 1 1 auto; }

/* 页脚用一块深一档的底色和正文分开，不画分割线；
   上外边距去掉，免得首页最后一个白版块和页脚之间夹出一条底色缝 */
.bs-footer {
    padding: 34px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--bs-text-3);
    background: var(--bs-surface-3);
}

/* ══════════════════════════ 17. 响应式 ══════════════════════════ */

@media (max-width: 991px) {
    .bs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bs-nav__toggle { display: flex; }
    .bs-nav__menu {
        position: absolute;
        top: 66px; left: 14px; right: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 14px;
        background: var(--bs-surface);
        border: 1px solid var(--bs-line-strong);
        border-radius: 0 0 var(--bs-radius) var(--bs-radius);
        box-shadow: var(--bs-shadow-lg);
        display: none;
    }
    .bs-nav__menu.is-open { display: flex; }
    .bs-nav__link { width: 100%; padding: 12px 16px; }
    /* 竖排菜单里下划线不合适，改成左侧一条指示条 */
    .bs-nav__link.is-active::after {
        left: 0; right: auto; bottom: auto; top: 50%;
        transform: translateY(-50%);
        width: 3px; height: 18px;
        border-radius: 0 3px 3px 0;
    }
    .bs-nav__form { display: block; margin-top: 6px; }
    .bs-nav__form .bs-btn { width: 100%; }
    .bs-nav__link--hide-mobile { display: none; }
}

@media (max-width: 560px) {
    .bs-page-head__title { font-size: 18px; }
}

@media (max-width: 767px) {
    .bs-grid--3, .bs-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .bs-card__body { padding: 18px 16px; }
    .bs-card__head { padding: 14px 16px; }
    .bs-container { padding: 0 14px; }
    .bs-input-group { flex-wrap: wrap; }
    .bs-input-group .bs-btn { width: 100%; }
}

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