/* ============================================================
   安全教育培训平台 - 全局样式
   前台设计参考 EduSoho 课程大厅风格（es- 前缀为前台样式）
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
    --es-primary: #6d5dfc;
    --es-primary-dark: #5b3fe0;
    --es-primary-light: #f1eeff;
    --es-pink: #ff5c8a;
    --es-pink-light: #ffeef4;
    --es-green: #3ec88f;
    --es-green-light: #e6f9f1;
    --es-orange: #ff6a3c;
    --es-yellow: #ffab29;
    --es-text: #2c3644;
    --es-text-sub: #6b7787;
    --es-bg: #f5f7fa;
    --es-border: #e8edf3;
    --es-radius: 12px;
    --es-shadow: 0 2px 12px rgba(90, 70, 200, .08);
    --es-shadow-hover: 0 12px 32px rgba(90, 70, 200, .18);
}

body {
    padding-top: 3.5rem;
    font-size: .9rem;
}

/* ---------- 字体（全站：中文思源黑体 Noto Sans SC + 英文/数字 Outfit） ---------- */
body {
    font-family: "Outfit", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

body.es-front {
    padding-top: 0;
    background: var(--es-bg);
    color: var(--es-text);
}

/* 标题微调：中文黑体加一点字距更有呼吸感 */
h1, h2, h3, h4, h5, h6,
.es-section-title, .es-gradient-text {
    letter-spacing: .012em;
}

/* 数字场景（价格/分数/统计）：等宽数字，科技感更规整 */
.es-num,
.es-wallet-value,
.es-score-chip,
.es-course-price,
.badge {
    font-variant-numeric: tabular-nums;
}

body.es-front main[role="main"] {
    min-height: calc(100vh - 4rem);
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

/* ---------- 前台顶部导航 ---------- */
.es-topbar {
    background: #fff;
    box-shadow: 0 1px 0 var(--es-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 60px;
}

.es-topbar .navbar-brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--es-text);
    padding: .5rem 1rem .5rem 0;
}

.es-topbar .navbar-brand:hover { color: var(--es-primary); }

.es-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #8b7bff 0%, #5b3fe0 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .55rem;
    font-size: 1rem;
    box-shadow: 0 3px 8px rgba(109, 93, 252, .35);
}

.es-topbar .nav-link {
    color: #4a5568;
    font-weight: 500;
    padding: .5rem .85rem !important;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

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

/* 当前选中菜单：持续高亮（主色 + 浅底 + 底部小横条） */
.es-topbar .nav-link.es-nav-active {
    color: var(--es-primary);
    background: var(--es-primary-light);
    font-weight: 600;
    position: relative;
}
.es-topbar .nav-link.es-nav-active::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--es-primary);
}

.es-topbar .dropdown-toggle,
.es-topbar .show > .nav-link {
    color: var(--es-text);
}

.es-topbar .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: var(--es-shadow-hover);
    padding: .4rem;
    margin-top: .35rem;
}

.es-topbar .dropdown-item {
    border-radius: 7px;
    padding: .45rem .85rem;
    color: #4a5568;
}

.es-topbar .dropdown-item:hover {
    background: var(--es-primary-light);
    color: var(--es-primary);
}

/* 下拉子项：当前所在页高亮（与顶层 es-nav-active 同一主题色系） */
.es-topbar .dropdown-item.es-dd-active {
    background: var(--es-primary-light);
    color: var(--es-primary);
    font-weight: 600;
}

.es-topbar .dropdown-item.es-dd-active .fa {
    color: var(--es-primary);
}

/* 用户头像 */
.es-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b7bff, #6fbcff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    margin-right: .4rem;
}

/* 顶栏按钮：登录/注册成对胶囊按钮 */
.es-btn-login,
.es-btn-register {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .32rem 1.05rem;
    border-radius: 20px;
    transition: all .18s ease;
}

.es-btn-login {
    color: var(--es-primary) !important;
    border: 1.5px solid var(--es-primary);
    background: transparent;
}

.es-btn-login:hover {
    color: var(--es-primary-dark) !important;
    border-color: var(--es-primary-dark);
    background: var(--es-primary-light);
}

.es-btn-register {
    background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark));
    color: #fff !important;
    border: 1.5px solid transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.es-btn-register:hover {
    color: #fff !important;
    filter: brightness(1.08);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

.es-btn-admin {
    background: rgba(109, 93, 252, .10);
    color: var(--es-primary) !important;
    font-weight: 600;
    padding: .4rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(109, 93, 252, .35);
    transition: all .2s ease;
}

.es-btn-admin:hover {
    background: var(--es-primary);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(109, 93, 252, .35);
}

/* ---------- Hero 横幅（课程大厅） ---------- */
.es-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #5b3fe0 0%, #7c5cff 45%, #ff5c8a 100%);
    border-radius: var(--es-radius);
    color: #fff;
    /* 与视频大厅 vh-hero 统一：高度（内边距）与标题字号保持一致 */
    padding: 34px 36px 30px;
    margin-bottom: 22px;
    box-shadow: 0 8px 30px rgba(109, 93, 252, .28);
}

.es-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -110px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.es-hero::before {
    content: "";
    position: absolute;
    right: 120px;
    bottom: -140px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.es-hero h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: normal;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.es-hero .es-hero-sub {
    opacity: .92;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.es-search {
    position: relative;
    z-index: 1;
    /* 与视频大厅 vh-search 一致：仅靠副标题的 1rem 下边距，不再额外加间距 */
    margin-top: 0;
    max-width: 560px;
    display: flex;
    background: #fff;
    border-radius: 28px;
    padding: 5px;
    box-shadow: 0 6px 20px rgba(13, 50, 110, .28);
}

.es-search input {
    border: none;
    outline: none;
    flex: 1;
    padding: .5rem 1.1rem;
    font-size: .92rem;
    background: transparent;
    color: var(--es-text);
}

.es-search input::placeholder { color: #a4b1c2; }

.es-search button {
    border: none;
    background: linear-gradient(135deg, #ffb03a, #ff8a2b);
    color: #fff;
    font-weight: 600;
    border-radius: 24px;
    padding: .45rem 1.6rem;
    min-width: 92px;
    cursor: pointer;
    transition: filter .15s ease;
}

.es-search button:hover { filter: brightness(1.06); }

/* ---------- 版块标题 ---------- */
.es-section-title {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--es-text);
    margin: 1.5rem 0 1rem;
}

.es-section-title::before {
    content: "";
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, #8b7bff, #5b3fe0);
    margin-right: .6rem;
}

.es-section-title .es-count {
    font-size: .82rem;
    font-weight: 500;
    color: var(--es-text-sub);
    margin-left: .6rem;
}

/* ---------- 课程卡片 ---------- */
.course-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--es-shadow-hover);
    border-color: transparent;
}

.course-card .cover {
    position: relative;
    display: block;
    padding-top: 56.25%;
    background: linear-gradient(135deg, #e9f1fd, #dcebfc);
    overflow: hidden;
}

.course-card .cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.course-card:hover .cover img { transform: scale(1.06); }

.course-card .cover .cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9db8dd;
    font-size: 2.6rem;
    background: linear-gradient(135deg, #eef5ff, #dbeafe);
}

.course-card .body {
    padding: .9rem 1rem .2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card .title {
    font-size: .98rem;
    font-weight: 600;
    color: var(--es-text);
    line-height: 1.45;
    height: 2.9em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: .4rem;
}

.course-card .title a { color: inherit; }
.course-card .title a:hover { color: var(--es-primary); }

.course-card .summary {
    font-size: .8rem;
    color: var(--es-text-sub);
    height: 2.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: .4rem;
}

.course-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: #8a95a6;
    margin-top: auto;
    padding-bottom: .75rem;
    border-bottom: 1px dashed var(--es-border);
}

.course-card .meta i { margin-right: .25rem; }

.course-card .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem .85rem;
}

.es-price { color: var(--es-orange); font-weight: 700; font-size: 1.05rem; }
.es-price small { font-size: .75rem; font-weight: 500; }

.es-free {
    color: var(--es-green);
    font-weight: 700;
    background: var(--es-green-light);
    padding: .15rem .65rem;
    border-radius: 20px;
    font-size: .85rem;
}

.es-btn-go {
    display: inline-block;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem 1.2rem;
    border-radius: 20px;
    transition: box-shadow .15s ease, filter .15s ease;
}

.es-btn-go:hover {
    color: #fff;
    box-shadow: 0 5px 14px rgba(109, 93, 252, .45);
    filter: brightness(1.05);
    text-decoration: none;
}

.es-btn-continue {
    display: inline-block;
    border: 1.5px solid var(--es-green);
    color: var(--es-green);
    font-weight: 600;
    font-size: .85rem;
    padding: .34rem 1.1rem;
    border-radius: 20px;
    background: var(--es-green-light);
}

.es-btn-continue:hover {
    background: var(--es-green);
    color: #fff;
    text-decoration: none;
}

/* ---------- 课程大厅卡片（EduSoho 风格） ---------- */
.es-course-card {
    position: relative;
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.es-course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.es-course-card .cover {
    position: relative;
    display: block;
    padding-top: 56.25%;
    background: linear-gradient(135deg, #e9f1fd, #dcebfc);
    overflow: hidden;
}

.es-course-card .cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.es-course-card:hover .cover img { transform: scale(1.06); }

.es-course-card .cover .cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9db8dd;
    font-size: 2.6rem;
    background: linear-gradient(135deg, #eef5ff, #dbeafe);
}

.es-course-card .badge-joined {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: rgba(62, 200, 143, .92);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 20px;
    z-index: 1;
}

.es-course-card .body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.es-course-card .title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    line-height: 1.45;
    height: 1.45em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: .35rem;
}

.es-course-card .title a { color: inherit; transition: color .15s ease; }
.es-course-card .title a:hover { color: var(--es-primary); text-decoration: none; }

.es-course-card .summary {
    font-size: .78rem;
    color: #999;
    height: 1.55em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: .65rem;
}

.es-course-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    font-size: .78rem;
    color: #999;
}

.es-course-card .meta-left span {
    display: inline-flex;
    align-items: center;
    margin-right: .75rem;
}

.es-course-card .meta-left i { margin-right: .25rem; font-size: .8rem; }

.es-course-card .meta-right .es-price {
    color: #ff4d4f;
    font-weight: 700;
    font-size: .95rem;
}

.es-course-card .meta-right .es-price small { font-size: .7rem; font-weight: 500; }

.es-course-card .meta-right .es-free {
    color: #52c41a;

    font-weight: 700;
    font-size: .85rem;
    background: #f6ffed;
    padding: .1rem .55rem;
    border-radius: 20px;
}

/* ---------- 课程大厅卡片：紧凑版（每行 5 个时使用） ---------- */
/* 用 CSS Grid 而非 Bootstrap 栅格：12 栅格表达不出 5 列（col-3=4列、col-2=6列） */
.course-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    margin: 0;
}

.course-grid-item {
    min-width: 0;
}

.course-grid .es-course-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.course-grid .es-course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

/* 封面压扁，卡片整体更矮 */
.course-grid .es-course-card .cover {
    padding-top: 42%;
}

.course-grid .es-course-card .cover .cover-ph {
    font-size: 1.9rem;
}

.course-grid .es-course-card .badge-joined {
    top: .4rem;
    right: .4rem;
    font-size: .65rem;
    padding: .1rem .4rem;
}

/* 正文区收紧 */
.course-grid .es-course-card .body {
    padding: .7rem .75rem;
}

.course-grid .es-course-card .title {
    font-size: .9rem;
    margin-bottom: .25rem;
}

.course-grid .es-course-card .summary {
    font-size: .72rem;
    margin-bottom: .45rem;
}

.course-grid .es-course-card .meta {
    font-size: .72rem;
}

.course-grid .es-course-card .meta-left span {
    margin-right: .5rem;
}

.course-grid .es-course-card .meta-left i {
    margin-right: .15rem;
    font-size: .72rem;
}

.course-grid .es-course-card .meta-right .es-price {
    font-size: .85rem;
}

.course-grid .es-course-card .meta-right .es-free {
    font-size: .75rem;
    padding: .05rem .45rem;
}

/* 响应式降列：≥992px 一律 5 列（与上一版 4 列的生效区间保持一致），窄屏逐级降列 */
@media (max-width: 991.98px) {
    .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 窄屏回到 2 列时恢复稍大的观感 */
@media (max-width: 767.98px) {
    .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-grid .es-course-card .cover { padding-top: 56.25%; }
    .course-grid .es-course-card .body { padding: 1rem; }
    .course-grid .es-course-card .title { font-size: 1rem; }
    .course-grid .es-course-card .summary { font-size: .78rem; }
    .course-grid .es-course-card .meta { font-size: .78rem; }
}

/* 空状态 */
.es-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--es-text-sub);
}

.es-empty .icon {
    font-size: 3rem;
    margin-bottom: .8rem;
    opacity: .6;
}

/* ---------- 分页 ---------- */
body.es-front .pagination .page-link {
    border: none;
    color: var(--es-text-sub);
    margin: 0 3px;
    border-radius: 8px !important;
    min-width: 36px;
    text-align: center;
    font-weight: 500;
}

body.es-front .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff;
    box-shadow: 0 3px 10px rgba(109, 93, 252, .35);
}

body.es-front .pagination .page-link:hover { background: var(--es-primary-light); color: var(--es-primary); }

/* ---------- 课程详情页头部 ---------- */
.es-course-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--es-radius);
    background: linear-gradient(120deg, #40209e 0%, #7c5cff 58%, #ff5c8a 100%);
    color: #fff;
    padding: 2rem 2rem;
    box-shadow: 0 8px 30px rgba(96, 53, 200, .3);
}

.es-course-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.es-course-hero h2 { font-weight: 700; position: relative; z-index: 1; }
.es-course-hero .sub { opacity: .85; position: relative; z-index: 1; }
.es-course-hero .chips { position: relative; z-index: 1; }

.es-course-hero .chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: .22rem .8rem;
    font-size: .8rem;
    margin-right: .5rem;
    margin-bottom: .4rem;
}

.es-course-hero .cover-wrap {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.es-course-hero .cover-ph {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, #eef5ff, #dbeafe);
    color: #9db8dd;
}

.es-course-hero .price-tag { font-size: 1.9rem; font-weight: 800; }

/* 通用卡片 */
.es-panel {
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow);
}

.es-panel .es-panel-head {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--es-border);
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.es-panel .es-panel-body { padding: 1.25rem; }

/* 面包屑 */
body.es-front .breadcrumb { background: transparent; padding-left: 0; margin-bottom: .5rem; }
body.es-front .breadcrumb-item a { color: var(--es-text-sub); }
body.es-front .breadcrumb-item a:hover { color: var(--es-primary); }
body.es-front .breadcrumb-item.active { color: var(--es-text); font-weight: 500; }

/* 章节目录 */
.es-chapter .card { border: 1px solid var(--es-border); border-radius: var(--es-radius); box-shadow: var(--es-shadow); }
.es-chapter .card-header {
    background: #fff;
    border-bottom: 1px solid var(--es-border);
    border-radius: var(--es-radius) var(--es-radius) 0 0 !important;
    padding: .85rem 1.25rem;
    font-weight: 700;
}
.es-chapter .list-group-item { border-color: var(--es-border); transition: background .15s ease; }
.es-chapter .list-group-item:hover { background: #f7faff; }

/* ---------- 页脚 ---------- */
.es-footer {
    background: #212b3b;
    color: #9aa7b8;
    padding: 2.6rem 0 0;
    font-size: .88rem;
    margin-top: auto;
}

.es-footer h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: .95rem;
}

.es-footer a { color: #9aa7b8; transition: color .15s ease; }
.es-footer a:hover { color: #fff; text-decoration: none; }

.es-footer .es-footer-links li { margin-bottom: .55rem; }

.es-footer .es-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 2rem;
    padding: 1.1rem 0;
    text-align: center;
    font-size: .82rem;
}

.es-footer .es-brand-mark { margin-right: .5rem; }

/* ---------- 响应式微调 ---------- */
@media (max-width: 767.98px) {
    .es-hero { padding: 2rem 1.4rem; }
    .es-search { flex-direction: column; border-radius: 14px; }
    .es-search button { margin-top: .5rem; width: 100%; }
}

/* ============================================================
   通用组件美化（作用域 body.es-front；后台与登录页复用部分全局规则）
   ============================================================ */

/* 卡片 */
body.es-front .card {
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow);
    overflow: hidden;
}

body.es-front .card-header {
    background: #fff;
    border-bottom: 1px solid var(--es-border);
    font-weight: 600;
    padding: .9rem 1.25rem;
    border-radius: var(--es-radius) var(--es-radius) 0 0 !important;
}

body.es-front .card-body { padding: 1.25rem; }
body.es-front .card-footer { background: #fff; }

/* 按钮 */
body.es-front .btn { border-radius: 8px; font-weight: 500; }
body.es-front .btn-primary { background: linear-gradient(135deg, #8b7bff, #5b3fe0); border-color: transparent; box-shadow: 0 3px 10px rgba(109, 93, 252, .3); }
body.es-front .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 5px 14px rgba(109, 93, 252, .42); }
body.es-front .btn-outline-primary { color: var(--es-primary); border-color: var(--es-primary); }
body.es-front .btn-outline-primary:hover { background: var(--es-primary); border-color: var(--es-primary); color: #fff; }
body.es-front .btn-success { background: linear-gradient(135deg, #46d39a, #2fb47e); border-color: transparent; }
body.es-front .btn-success:hover { filter: brightness(1.05); }
body.es-front .btn-danger { background: linear-gradient(135deg, #ff7a59, #ff5b3a); border-color: transparent; }
body.es-front .btn-danger:hover { filter: brightness(1.05); }
body.es-front .btn-outline-success { color: var(--es-green); border-color: var(--es-green); }
body.es-front .btn-outline-success:hover { background: var(--es-green); border-color: var(--es-green); color: #fff; }
body.es-front .btn-outline-secondary { color: #7a8699; border-color: #ced6e0; }
body.es-front .btn-outline-secondary:hover { background: #f1f4f8; color: #4a5568; }
body.es-front .btn-sm { border-radius: 7px; }

/* 表格 */
body.es-front .table { background: #fff; margin-bottom: 0; }
body.es-front .table thead th {
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
    border-top: none;
    border-bottom: 1px solid var(--es-border);
    font-weight: 600;
}
body.es-front .table td, body.es-front .table th { vertical-align: middle; }
body.es-front .table-bordered { border-color: var(--es-border); }
body.es-front .table-bordered td, body.es-front .table-bordered th { border-color: var(--es-border); }
body.es-front .table-hover tbody tr:hover { background: #f7faff; }

/* 徽章 */
body.es-front .badge { font-weight: 500; }
body.es-front .badge-primary { background: var(--es-primary); }
body.es-front .badge-success { background: var(--es-green); }
body.es-front .badge-danger { background: #ff6a3c; }
body.es-front .badge-warning { background: var(--es-yellow); color: #7a4f00; }
body.es-front .badge-info { background: #4fb9f5; }
body.es-front .badge-secondary { background: #aab4c2; }

/* 表单 */
body.es-front .form-control, body.es-front .form-control-sm, body.es-front .custom-select {
    border-color: #dfe5ee;
    border-radius: 8px;
}
body.es-front .form-control:focus, body.es-front .form-control-sm:focus {
    border-color: var(--es-primary);
    box-shadow: 0 0 0 .2rem rgba(109, 93, 252, .15);
}
body.es-front label { color: #4a5568; }

/* 标签页 */
body.es-front .nav-tabs { border-bottom: 2px solid var(--es-border); }
body.es-front .nav-tabs .nav-link {
    border: none;
    color: var(--es-text-sub);
    font-weight: 600;
    padding: .55rem 1.1rem;
    border-radius: 8px 8px 0 0;
}
body.es-front .nav-tabs .nav-link.active {
    color: var(--es-primary);
    background: #fff;
    border-bottom: 2px solid var(--es-primary);
    margin-bottom: -2px;
}
body.es-front .nav-pills .nav-link { color: var(--es-text-sub); font-weight: 500; }
body.es-front .nav-pills .nav-link.active { background: var(--es-primary); }

/* 进度条 */
body.es-front .progress { background: #e9eef6; border-radius: 10px; }

/* 警告提示 */
body.es-front .alert { border: none; border-radius: 10px; }
body.es-front .alert-info { background: var(--es-primary-light); color: var(--es-primary-dark); }
body.es-front .alert-success { background: var(--es-green-light); color: #1f8a5f; }

/* 列表组 */
body.es-front .list-group-item { border-color: var(--es-border); }

/* 模态框 */
body.es-front .modal-content { border: none; border-radius: var(--es-radius); }

/* 通用标题辅助 */
body.es-front .es-block-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--es-text);
    margin: 1.4rem 0 .9rem;
    padding-left: .7rem;
    border-left: 4px solid var(--es-primary);
}

/* 通用空状态（全局可用） */
.es-empty-box {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--es-text-sub);
    background: #fff;
    border: 1px dashed var(--es-border);
    border-radius: var(--es-radius);
}
.es-empty-box .icon { font-size: 2.8rem; opacity: .5; margin-bottom: .6rem; }

/* 通用信息列表（键值对） */
.es-info-list { list-style: none; padding: 0; margin: 0; }
.es-info-list li { display: flex; padding: .6rem 0; border-bottom: 1px solid var(--es-border); }
.es-info-list li:last-child { border-bottom: none; }
.es-info-list .k { width: 120px; flex: none; color: var(--es-text-sub); }
.es-info-list .v { color: var(--es-text); font-weight: 500; }

/* ============================================================
   管理后台 / 登录页 配套优化
   ============================================================ */

/* 后台顶栏（fixed navbar）现代化蓝色渐变 */
body .navbar.bg-primary.fixed-top {
    background: linear-gradient(90deg, #5b3fe0 0%, #6d5dfc 100%) !important;
    height: 3.5rem;
}
body .navbar.bg-primary .navbar-brand { font-weight: 700; }

/* 后台侧边栏活跃项 */
.sidebar .nav-link.active {
    background: var(--es-primary-light);
    border-radius: 8px;
    font-weight: 600;
    color: var(--es-primary) !important;
}

/* 全局表格/按钮一致性（前后台通用） */
.table thead th { background: #f2f6fb; border-top: none; font-weight: 600; color: #3a4658; }

/* ===== 全站表格去圆角（直角） =====
   表格圆角来自三处，必须一起清掉，否则只清表头会在"卡片包裹 + 斑马纹"场景下仍露出弧线：
     1) .table / .thead         —— Bootstrap4 默认 border-radius:.25rem
     2) .table-responsive       —— 本项目自定义了 12px 圆角（见 es-admin / es-front 两处）
     3) 包裹表格的 .card        —— 卡片圆角会从表格四角透出来
   下面用一条全局规则把 table 及其所有子元素的圆角清零。 */
.table,
.table thead,
.table thead th,
.table thead th:first-child,
.table thead th:last-child,
.table tbody,
.table tbody td,
.table tbody th,
.table tfoot,
.table tfoot td,
.table tfoot th,
.table tr,
.table-responsive,
.table-responsive > .table {
    border-radius: 0 !important;
}

/* 表格所在卡片也去圆角：否则卡片背景色的圆角会透过表格四角显示出来。
   用 :has() 做精确匹配——只影响"直接包含表格"的卡片，页面上其他卡片（表单、统计块）保持圆角不变。 */
.card:has(> .card-body > .table-responsive > .table),
.card:has(> .card-body > .table),
.card:has(> .table-responsive > .table),
.card:has(> .table) {
    border-radius: 0 !important;
}

/* 兜底：不支持 :has() 的浏览器（如 360、部分国产内核）。
   代价是表单卡片也被拉成直角，但用户要求"整个平台所有表格都直角"，
   在没有 :has() 的环境下宁可多去几个圆角，也不要让表格带弧线。
   支持 :has() 的浏览器会走上一条精确规则，不受这里影响。 */
@supports not selector(:has(*)) {
    .card-body > .table-responsive,
    .card-body > .table {
        border-radius: 0 !important;
    }
}
.table-hover tbody tr:hover { background: #f7faff; }

/* 后台表格统一横线风格（隐患类别表格同款：纯横线分隔 + 悬停浅蓝，无斑马纹/无竖线） */
.hc-table { border-collapse: collapse; }
.hc-table thead th { border-bottom: 2px solid #c8ced3; }
.hc-table td, .hc-table th { border-top: 1px solid #e4e7eb; border-bottom: 1px solid #e4e7eb; }
.hc-table tbody tr:hover td { background-color: #f2f6fb; }
.hc-table tbody tr:last-child td { border-bottom: 1px solid #c8ced3; }

/* 操作列按钮保持同一行不换行：单元格内含按钮时禁止折行（自动布局会把该列撑宽） */
.hc-table td:has(.btn), .hc-table th:has(.btn) { white-space: nowrap; }
.hc-table td .btn, .hc-table th .btn { white-space: nowrap; }

.btn-primary { background: linear-gradient(135deg, #8b7bff, #5b3fe0); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-success { background: linear-gradient(135deg, #46d39a, #2fb47e); border-color: transparent; }

/* 登录/注册页细化 */
.login-body .login-wrapper .card { border-radius: 14px; }
.login-body .card-body { padding: 2rem 1.8rem; }
.login-body .form-control { padding: .6rem .9rem; border-radius: 9px; }
.login-body .btn-primary { width: 100%; padding: .6rem; font-weight: 600; border-radius: 9px; }
.login-body .es-brand-mark { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 12px; margin: 0 auto 1rem; }

/* ============================================================
   以下为原有后台 / 通用样式（保留，供管理后台与登录页使用）
   ============================================================ */

/* 侧边栏 */
.sidebar {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    overflow-y: auto;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    padding-top: .75rem;
    padding-bottom: 2rem;
    height: calc(100vh - 3.5rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    padding: .35rem 1rem;
}

.sidebar .nav-link:hover {
    color: #007bff;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/* 主内容区 */
main[role="main"] {
    min-height: calc(100vh - 4rem);
}

/* 登录页 —— 科技极光 */
.login-body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(60% 60% at 16% 20%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(55% 55% at 86% 74%, rgba(255, 43, 214, .16), transparent 62%),
        linear-gradient(100deg, #061524 0%, #0b1d3a 32%, #1a1c4e 58%, #2b134d 80%, #33104a 100%);
    background-attachment: fixed;
    position: relative;
    /* 整页禁止滚动：不允许出现竖向滚动条（横竖都裁剪）。
       注册页内容高时由面板内部隐式滚动兜底（.login-box-compact，滚动条视觉隐藏）；
       两个 oversize 极光装饰层为 fixed 定位，不会撑出滚动区域。 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-top: 0;
}
.login-body::before {
    content: "";
    position: fixed; /* fixed 不产生滚动区域：原 absolute + inset:-35% 会把滚动区撑大 */
    inset: -35%;
    background: radial-gradient(40% 40% at 50% 50%, rgba(34, 211, 238, .10), transparent 70%);
    animation: es-aurora 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.login-wrapper .card {
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 1rem 2.4rem rgba(4, 6, 12, .40), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}

/* 表格辅助 */
.table td, .table th {
    vertical-align: middle;
}

/* 工作台统计卡片 */
.stat-card .display-4 {
    font-size: 2.2rem;
}

.stat-card {
    transition: box-shadow .2s ease;
}

.stat-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
}

/* 分页居中 */
.pagination {
    margin-bottom: 0;
}

/* 模态框表格内表单紧凑 */
.modal .form-control-sm {
    margin-bottom: .25rem;
}

/* ============================================================
   小组详情 / 错题本 / 考试答题页 专用样式
   ============================================================ */

/* ---------- 小组详情页 ---------- */
/* 话题列表项 */
body.es-front .es-thread-item {
    transition: background .15s ease, border-color .15s ease;
    border-left: 3px solid transparent;
}
body.es-front .es-thread-item:hover {
    background: var(--es-primary-light);
    border-left-color: var(--es-primary);
}
body.es-front .es-thread-item a {
    color: var(--es-text);
    font-weight: 600;
}
body.es-front .es-thread-item a:hover { color: var(--es-primary); }
.es-thread-meta { color: var(--es-text-sub); font-size: .82rem; }
.es-thread-meta .dot { margin: 0 .4rem; color: #cfd7e2; }

/* 成员头像 */
.es-member-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b7bff, #6fbcff);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem;
    flex: none;
}
.es-member-avatar.is-owner { background: linear-gradient(135deg, #ff9a3c, #ff6a3c); }
.es-member-avatar.is-admin { background: linear-gradient(135deg, #a78bfa, #ff5c8a); }

/* 排序筛选 pill */
.es-filter-pill {
    border-radius: 20px !important;
    padding: .3rem .9rem !important;
    font-weight: 600 !important;
}
.es-filter-pill.active {
    background: var(--es-primary) !important;
    border-color: var(--es-primary) !important;
    color: #fff !important;
}

/* 小组头部统计 chip（复用 es-hero 渐变背景上的浅色徽章） */
.es-group-hero .stat-chip {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-radius: 20px;
    padding: .25rem .85rem;
    font-size: .82rem;
    margin-right: .5rem;
}
.es-group-hero .action-bar .btn { min-width: 108px; font-weight: 600; }

/* ---------- 错题本统计卡 ---------- */
.es-mini-stat {
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    padding: 1.05rem 1.25rem;
    box-shadow: var(--es-shadow);
    display: flex;
    align-items: center;
    gap: .95rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.es-mini-stat:hover { transform: translateY(-3px); box-shadow: var(--es-shadow-hover); }
.es-mini-stat .ic {
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: #fff;
    flex: none;
}
.es-mini-stat .num { font-size: 1.55rem; font-weight: 800; line-height: 1; color: var(--es-text); }
.es-mini-stat .lbl { color: var(--es-text-sub); font-size: .82rem; margin-top: .2rem; }

/* ---------- 考试答题页 ---------- */
.es-exam-meta {
    display: flex; flex-wrap: wrap; gap: .8rem;
}
.es-exam-meta .item {
    flex: 1; min-width: 92px;
    background: var(--es-primary-light);
    border-radius: 10px;
    padding: .75rem .5rem;
    text-align: center;
}
.es-exam-meta .item .v { font-size: 1.2rem; font-weight: 800; color: var(--es-primary-dark); }
.es-exam-meta .item .k { font-size: .76rem; color: var(--es-text-sub); margin-top: .2rem; }

/* 题目卡片 */
.es-question {
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius) !important;
    box-shadow: var(--es-shadow) !important;
    scroll-margin-top: 80px;
}
.es-q-head {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: .9rem;
    padding-bottom: .7rem;
    border-bottom: 1px dashed var(--es-border);
}
.es-q-seq {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    flex: none;
}
.es-q-stem {
    font-size: 1rem; line-height: 1.75;
    margin-bottom: 1rem; color: var(--es-text);
}
.es-q-stem img { max-width: 100%; border-radius: 8px; }

/* 选项卡片（整行可点） */
body.es-front .es-option {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .95rem;
    border: 1px solid var(--es-border);
    border-radius: 10px;
    margin-bottom: .6rem;
    cursor: pointer;
    transition: all .15s ease;
    background: #fff;
}
body.es-front .es-option:hover {
    border-color: var(--es-primary);
    background: var(--es-primary-light);
}
body.es-front .es-option.is-checked {
    border-color: var(--es-primary);
    background: var(--es-primary-light);
    box-shadow: 0 0 0 2px rgba(47,125,246,.18);
}
body.es-front .es-option input { margin-top: .22rem; flex: none; }
body.es-front .es-option .opt-label { color: var(--es-text); line-height: 1.6; }

/* 答题卡 */
.es-answer-card { position: sticky; top: 80px; }
.es-answer-card .ac-title {
    font-weight: 700; font-size: .95rem; margin-bottom: .8rem;
    display: flex; align-items: center; gap: .4rem;
}
.es-answer-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
}
.es-answer-grid a {
    display: flex; align-items: center; justify-content: center;
    height: 38px; border-radius: 8px;
    background: #f1f4f8; color: var(--es-text-sub);
    font-weight: 600; font-size: .85rem;
    text-decoration: none; transition: all .15s ease;
}
.es-answer-grid a:hover { background: var(--es-primary-light); color: var(--es-primary); }
.es-answer-grid a.answered { background: var(--es-green-light); color: var(--es-green); }
.es-answer-grid a.is-current { outline: 2px solid var(--es-primary); outline-offset: 1px; }
.es-answer-legend {
    display: flex; gap: 1rem; margin-top: 1rem;
    font-size: .78rem; color: var(--es-text-sub);
}
.es-answer-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }

/* 底部提交栏（吸底） */
.es-exam-footer {
    position: sticky; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--es-border);
    box-shadow: 0 -4px 18px rgba(30,60,120,.08);
    padding: .9rem 0;
    margin-top: 1rem;
    z-index: 50;
}
.es-timer {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; color: var(--es-orange);
    background: #fff3ee; padding: .35rem .85rem; border-radius: 20px;
    font-size: .92rem;
}

/* ============================================================
   视觉升级 v2 —— 设计令牌补充 / 微动效 / 移动端响应式
   业务方向：安全教育培训平台（教育蓝为主、活力橙强调、专业稳重）
   ============================================================ */

:root {
    --es-primary-50: #eef5ff;
    --es-primary-100: #dbeafe;
    --es-primary-200: #bfe0ff;
    --es-primary-600: #2566d9;
    --es-primary-700: #1e57c4;
    --es-cyan: #20c5d6;
    --es-cyan-light: #e3fafc;
    --es-surface: #ffffff;
    --es-surface-2: #f7f9fc;
    --es-radius-sm: 10px;
    --es-radius-lg: 16px;
    --es-shadow-sm: 0 1px 3px rgba(90, 70, 200, .06);
    --es-shadow-md: 0 6px 20px rgba(90, 70, 200, .1);
    --es-ring: 0 0 0 3px rgba(109, 93, 252, .14);
    --es-space: 1.25rem;
}

html { scroll-behavior: smooth; }
body.es-front ::selection { background: var(--es-primary-light); color: var(--es-primary-dark); }

/* 滚动条美化（webkit） */
body.es-front ::-webkit-scrollbar { width: 10px; height: 10px; }
body.es-front ::-webkit-scrollbar-thumb { background: #cdd8e6; border-radius: 8px; border: 2px solid var(--es-bg); }
body.es-front ::-webkit-scrollbar-thumb:hover { background: #b3c2d6; }
body.es-front ::-webkit-scrollbar-track { background: transparent; }

/* 链接与焦点统一过渡 */
body.es-front a { transition: color .15s ease; }
body.es-front *:focus-visible { outline: none; }

/* 全局卡片 hover 微动效（已精修卡片也受益） */
body.es-front .card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.es-front .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--es-shadow-hover);
    border-color: transparent;
}
body.es-front .es-panel { transition: box-shadow .18s ease, transform .18s ease; }
body.es-front .es-panel:hover { box-shadow: var(--es-shadow-hover); }

/* 主按钮动效 */
body.es-front .btn { transition: all .18s ease; }
body.es-front .btn-primary:hover,
body.es-front .btn-success:hover,
body.es-front .btn-danger:hover { transform: translateY(-1px); }

/* ---------- 统计卡（dashboard / 学习中心 / 资产概览） ---------- */
.es-stat-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-lg);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--es-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.es-stat-card:hover { transform: translateY(-5px); box-shadow: var(--es-shadow-hover); }
.es-stat-card .es-stat-ic {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    flex: none;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    box-shadow: 0 6px 14px rgba(109, 93, 252, .3);
}
.es-stat-card.is-green .es-stat-ic { background: linear-gradient(135deg, #46d39a, #2fb47e); box-shadow: 0 6px 14px rgba(47, 196, 143, .3); }
.es-stat-card.is-orange .es-stat-ic { background: linear-gradient(135deg, #ff9a3c, #ff6a3c); box-shadow: 0 6px 14px rgba(255, 106, 60, .3); }
.es-stat-card.is-cyan .es-stat-ic { background: linear-gradient(135deg, #36d3e0, #1ba7c4); box-shadow: 0 6px 14px rgba(32, 197, 214, .3); }
.es-stat-card .es-stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--es-text); }
.es-stat-card .es-stat-lbl { color: var(--es-text-sub); font-size: .85rem; margin-top: .25rem; }
.es-stat-card .es-stat-sub { font-size: .76rem; color: #9aa7b8; margin-top: .35rem; }

/* ---------- 响应式卡片网格工具类 ---------- */
.es-grid {
    display: grid;
    gap: var(--es-space);
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.es-grid-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.es-grid-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- 列表行卡片化（消息/通知/订单条目） ---------- */
.es-list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    margin-bottom: .75rem;
    box-shadow: var(--es-shadow-sm);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.es-list-row:hover { background: var(--es-surface-2); border-color: var(--es-primary-200); transform: translateY(-2px); }
.es-list-row .es-lr-ic {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
}
.es-list-row .es-lr-main { flex: 1; min-width: 0; }
.es-list-row .es-lr-title { font-weight: 600; color: var(--es-text); }
.es-list-row .es-lr-sub { font-size: .82rem; color: var(--es-text-sub); margin-top: .15rem; }
.es-list-row .es-lr-time { font-size: .76rem; color: #9aa7b8; flex: none; }

/* ---------- 标签 / 胶囊 ---------- */
.es-tag {
    display: inline-flex; align-items: center;
    padding: .15rem .6rem;
    border-radius: 20px;
    font-size: .76rem; font-weight: 600;
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
}
.es-tag.is-green { background: var(--es-green-light); color: #1f8a5f; }
.es-tag.is-orange { background: #fff3ee; color: #e0521f; }
.es-tag.is-gray { background: #eef1f5; color: #7a8699; }
.es-tag.is-cyan { background: var(--es-cyan-light); color: #118294; }

/* ---------- 成绩/评分环 ---------- */
.es-score-chip {
    display: inline-flex; align-items: baseline; gap: .15rem;
    font-weight: 800; font-size: 1.25rem;
}
.es-score-chip small { font-size: .75rem; font-weight: 600; color: var(--es-text-sub); }

/* ---------- 表格容器圆角 & 横向滚动 ---------- */
body.es-front .table-responsive {
    border-radius: var(--es-radius);
    border: 1px solid var(--es-border);
    box-shadow: var(--es-shadow);
    overflow: hidden;
}
body.es-front .table-responsive .table { border-radius: 0; box-shadow: none; }
body.es-front .table .badge { font-size: .78rem; padding: .35em .7em; border-radius: 20px; }

/* ---------- 移动端导航 toggle ---------- */
.es-topbar .navbar-toggler { border: none; padding: .35rem .5rem; color: var(--es-primary); }
.es-topbar .navbar-toggler:focus { outline: none; box-shadow: none; }
.es-topbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(47,125,246,0.85)' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   响应式断点
   ============================================================ */
@media (max-width: 1199.98px) {
    .es-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* 平板 */
@media (max-width: 991.98px) {
    .es-hero { padding: 2.4rem 1.8rem; }
    .es-course-hero { padding: 1.6rem 1.4rem; }
    .es-answer-card { position: static; margin-top: 1.25rem; }
}

/* 手机 */
@media (max-width: 767.98px) {
    body.es-front main[role="main"] { padding-top: 1rem; padding-bottom: 1.5rem; }
    .es-grid, .es-grid-lg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; }
    .es-grid-sm { grid-template-columns: 1fr 1fr; }
    .es-hero { padding: 1.8rem 1.2rem; }
    .es-hero h1 { font-size: 1.5rem; }
    .es-section-title { font-size: 1.05rem; margin: 1.1rem 0 .8rem; }
    .es-course-hero { padding: 1.3rem 1.1rem; }
    .es-course-hero .price-tag { font-size: 1.5rem; }
    .es-footer .row > div { margin-bottom: 1.5rem; }
    .es-mini-stat { padding: .9rem 1rem; }
    .es-mini-stat .ic { width: 42px; height: 42px; font-size: 1.15rem; }
    .es-stat-card { padding: 1rem 1.1rem; }
    .es-q-head { flex-wrap: wrap; }
    .es-exam-meta .item { min-width: 70px; }
}

/* 小手机 */
@media (max-width: 575.98px) {
    body.es-front { font-size: .86rem; }
    .es-grid, .es-grid-lg, .es-grid-sm { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .es-hero { border-radius: 12px; padding: 1.5rem 1rem; }
    .es-hero .es-hero-sub { font-size: .9rem; }
    .es-search { max-width: 100%; }
    .es-list-row { padding: .85rem .9rem; gap: .7rem; }
    .es-list-row .es-lr-ic { width: 36px; height: 36px; font-size: .95rem; }
    .es-answer-grid { grid-template-columns: repeat(5, 1fr); }
    .es-exam-footer .container { padding: 0 .5rem; }
    .es-course-hero .cover-wrap { margin-top: 1rem; }
}

/* ---------- 课程学习页：学习舞台 ---------- */
.es-learn-stage {
    border-radius: var(--es-radius-lg);
    background: linear-gradient(135deg, #eef5ff 0%, #e3eefc 100%);
    border: 1px dashed var(--es-primary-200);
    padding: 3rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    transition: background .2s ease;
}
.es-learn-stage:hover { background: linear-gradient(135deg, #e9f2ff, #dceafd); }
.es-learn-stage .es-stage-ic {
    width: 96px; height: 96px; border-radius: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 3rem; margin-bottom: 1rem;
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff; box-shadow: 0 12px 28px rgba(109, 93, 252, .32);
}
.es-learn-stage .es-stage-tip { color: var(--es-text-sub); margin-bottom: 1.2rem; font-size: .95rem; }
.es-learn-stage .btn { min-width: 150px; }

/* 课时目录激活项 */
body.es-front .es-chapter .list-group-item.active {
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    border-color: transparent;
    color: #fff;
}
body.es-front .es-chapter .list-group-item.active a { color: #fff; }

/* ---------- 资产钱包卡（余额 / 积分概览） ---------- */
.es-wallet {
    border: none;
    border-radius: var(--es-radius-lg);
    background: linear-gradient(135deg, #7c5cff 0%, #ff6a9e 100%);
    color: #fff;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 12px 30px rgba(109, 93, 252, .28);
}
.es-wallet.is-point { background: linear-gradient(135deg, #ff9a3c 0%, #ff6a3c 100%); box-shadow: 0 12px 30px rgba(255, 106, 60, .28); }
.es-wallet .es-wallet-label { opacity: .9; font-size: .88rem; }
.es-wallet .es-wallet-num { font-size: 2.1rem; font-weight: 800; line-height: 1.2; margin: .5rem 0 1rem; }
.es-wallet .btn-light { background: #fff; color: var(--es-primary-dark); border: none; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.es-wallet .btn-light:hover { filter: brightness(.96); }
.es-wallet .btn-outline-light { border-color: rgba(255, 255, 255, .6); color: #fff; }
.es-wallet .btn-outline-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- 积分商城商品封面占位 ---------- */
.es-mall-cover {
    height: 132px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: #fff;
    background: linear-gradient(135deg, #ff9a3c 0%, #ff6a3c 100%);
    box-shadow: 0 8px 18px rgba(255, 106, 60, .25);
}

/* ---------- 正文排版（资讯 / 话题） ---------- */
.es-prose { line-height: 1.85; color: var(--es-text); font-size: .95rem; }
.es-prose p { margin-bottom: 1rem; }
.es-prose img { max-width: 100%; border-radius: 10px; margin: .5rem 0; }
.es-prose h2, .es-prose h3, .es-prose h4 { margin: 1.2rem 0 .6rem; font-weight: 700; color: var(--es-text); }
.es-prose blockquote {
    border-left: 4px solid var(--es-primary);
    background: var(--es-primary-light);
    border-radius: 0 8px 8px 0;
    padding: .6rem 1rem;
    color: var(--es-text-sub);
    margin: 1rem 0;
}

/* ---------- 优惠券票券 ---------- */
.es-coupon {
    display: flex;
    border-radius: var(--es-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--es-border);
    box-shadow: var(--es-shadow);
    min-height: 112px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.es-coupon:hover { transform: translateY(-3px); box-shadow: var(--es-shadow-hover); }
.es-coupon .es-coupon-amt {
    width: 132px;
    flex: none;
    color: #fff;
    background: linear-gradient(135deg, #ff9a3c, #ff6a3c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.es-coupon.is-disabled .es-coupon-amt { background: linear-gradient(135deg, #aab4c2, #8a95a6); }
.es-coupon .es-coupon-amt .num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.es-coupon .es-coupon-amt .lbl { font-size: .72rem; opacity: .92; margin-top: .25rem; }
.es-coupon .es-coupon-body {
    flex: 1;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.es-coupon .es-coupon-body .title { font-weight: 700; color: var(--es-text); }

/* ---------- 私信聊天气泡 ---------- */
.es-chat-box {
    max-height: 440px;
    overflow-y: auto;
    padding: 1.1rem 1.25rem;
    background: var(--es-surface-2);
    border-radius: 0 0 var(--es-radius) var(--es-radius);
}
.es-chat-bubble {
    padding: .6rem .95rem;
    border-radius: 14px;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: var(--es-shadow-sm);
    font-size: .92rem;
}
.es-chat-ours {
    background: linear-gradient(135deg, #8b7bff, #5b3fe0);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.es-chat-theirs {
    background: #fff;
    color: var(--es-text);
    border: 1px solid var(--es-border);
    border-bottom-left-radius: 4px;
}

/* ============================================================
   科技美学 v3 —— 以美为主，兼具科技感
   极光网格背景 / 玻璃态顶栏 / 流光顶饰 / 辉光 / 渐变文字 / 滚动渐显
   ============================================================ */

/* ---------- 科技设计令牌 ---------- */
:root {
    --es-tech-blue: #6d5dfc;
    --es-tech-cyan: #22d3ee;
    --es-tech-violet: #7c5cff;
    --es-tech-grad: linear-gradient(120deg, #6d5dfc 0%, #22d3ee 45%, #ff5c8a 100%);
    --es-tech-grad-soft: linear-gradient(120deg, #8b7bff, #22d3ee 55%, #7c5cff);
    --es-glow-blue: 0 0 0 3px rgba(109, 93, 252, .14), 0 10px 30px rgba(109, 93, 252, .28);
    --es-glow-cyan: 0 0 0 3px rgba(34, 211, 238, .16), 0 10px 30px rgba(34, 211, 238, .30);
    --es-glass-bg: rgba(255, 255, 255, .72);
    --es-glass-brd: rgba(255, 255, 255, .6);
    --es-radius-xl: 22px;
}

/* 关键帧 */
@keyframes es-flow {
    to { background-position: 300% 0; }
}
@keyframes es-aurora {
    0% { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.1); }
}
@keyframes es-mark {
    to { background-position: 200% 200%; }
}
@keyframes es-sheen {
    to { transform: translateX(130%); }
}
@keyframes es-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 全站极光网格背景（轻量、护眼） ---------- */
body.es-front {
    background-color: var(--es-bg);
    background-image:
        radial-gradient(58% 50% at 6% 0%, rgba(109, 93, 252, .10), transparent 60%),
        radial-gradient(48% 44% at 100% 6%, rgba(255, 92, 138, .07), transparent 60%),
        radial-gradient(55% 50% at 50% 102%, rgba(34, 211, 238, .07), transparent 60%),
        radial-gradient(rgba(109, 93, 252, .05) 1px, transparent 1.6px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px;
    background-attachment: fixed, fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* ---------- 玻璃态顶栏 + 顶部流光渐变条 + 品牌辉光 ---------- */
.es-topbar {
    background: var(--es-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--es-glass-brd);
    box-shadow: 0 4px 26px rgba(30, 60, 120, .10);
}
.es-topbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #6d5dfc, #22d3ee, #ff5c8a, #6d5dfc);
    background-size: 300% 100%;
    animation: es-flow 6s linear infinite;
}
.es-topbar .navbar-brand { letter-spacing: .3px; }
.es-brand-mark {
    background: linear-gradient(135deg, #8b7bff, #22d3ee, #7c5cff, #8b7bff);
    background-size: 220% 220%;
    animation: es-mark 7s ease infinite;
    box-shadow: 0 3px 10px rgba(109, 93, 252, .42);
}

/* ---------- 渐变文字工具类 ---------- */
.es-gradient-text {
    background: var(--es-tech-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* ---------- 玻璃卡片工具类 ---------- */
.es-glass {
    background: var(--es-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--es-glass-brd);
}

/* ---------- 极光区块（可独立用于页面 banner） ---------- */
.es-aurora {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: var(--es-radius-lg);
    background: var(--es-tech-grad);
    box-shadow: 0 18px 44px rgba(109, 93, 252, .30);
}
.es-aurora::before {
    content: "";
    position: absolute;
    inset: -45% -15% -15% -15%;
    background:
        radial-gradient(55% 55% at 18% 22%, rgba(255, 255, 255, .28), transparent 60%),
        radial-gradient(50% 50% at 82% 28%, rgba(34, 211, 238, .55), transparent 62%),
        radial-gradient(52% 52% at 62% 82%, rgba(124, 92, 255, .5), transparent 62%);
    filter: blur(6px);
    animation: es-aurora 12s ease-in-out infinite alternate;
    pointer-events: none;
}
.es-aurora > * { position: relative; z-index: 1; }

/* ---------- Hero 极光流动升级 ---------- */
.es-hero {
    background:
        radial-gradient(120% 150% at 14% 10%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(120deg, #5b3fe0 0%, #7c5cff 38%, #22d3ee 70%, #ff5c8a 100%);
    background-size: 100% 100%, 220% 220%;
    box-shadow: 0 18px 46px rgba(109, 93, 252, .34);
    animation: es-hero-shift 14s ease-in-out infinite alternate;
}
@keyframes es-hero-shift {
    to { background-position: 0 0, 100% 50%; }
}
.es-hero::after {
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 0 60px rgba(255, 255, 255, .25);
}
.es-hero h1 {
    background: linear-gradient(120deg, #ffffff, #e6f6ff 60%, #d8f4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 2px 20px rgba(20, 60, 130, .25);
}
.es-hero .es-hero-sub { text-shadow: 0 1px 10px rgba(20, 60, 130, .2); }

/* 课程详情 Hero 辉光 */
.es-course-hero {
    box-shadow: 0 18px 46px rgba(109, 93, 252, .30);
}
.es-course-hero::after {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .14), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(34, 211, 238, .22), transparent 60%);
}

/* ---------- 版块标题：发光强调条 ---------- */
.es-section-title { position: relative; letter-spacing: .2px; }
.es-section-title::before {
    background: linear-gradient(180deg, #8b7bff, #22d3ee);
    box-shadow: 0 0 10px rgba(109, 93, 252, .5);
}
.es-section-title .es-count {
    padding: .1rem .55rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(109, 93, 252, .1), rgba(34, 211, 238, .12));
    color: var(--es-primary-dark);
}

/* ---------- 科技胶囊（小标签） ---------- */
.es-pill-tech {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .7rem;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--es-primary-dark);
    background: linear-gradient(135deg, rgba(109, 93, 252, .12), rgba(34, 211, 238, .14));
    border: 1px solid rgba(109, 93, 252, .18);
}
.es-pill-tech::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--es-tech-grad);
    box-shadow: 0 0 8px rgba(109, 93, 252, .6);
}

/* ---------- 主按钮：辉光 + 悬停扫光 ---------- */
body.es-front .btn-primary,
body.es-front .btn-success {
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(109, 93, 252, .30);
}
body.es-front .btn-success { box-shadow: 0 6px 18px rgba(62, 200, 143, .30); }
body.es-front .btn-primary { background: linear-gradient(135deg, #8b7bff, #2566d9); }
body.es-front .btn-success { background: linear-gradient(135deg, #46d39a, #2fb47e); }
body.es-front .btn-primary::after,
body.es-front .btn-success::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
    transform: translateX(-130%);
}
body.es-front .btn-primary:hover,
body.es-front .btn-success:hover {
    transform: translateY(-1px);
}
body.es-front .btn-primary:hover { box-shadow: 0 10px 26px rgba(109, 93, 252, .44); }
body.es-front .btn-success:hover { box-shadow: 0 10px 26px rgba(62, 200, 143, .44); }
body.es-front .btn-primary:hover::after,
body.es-front .btn-success:hover::after { animation: es-sheen .85s ease; }
body.es-front .btn-danger {
    border: none;
    box-shadow: 0 6px 18px rgba(239, 88, 88, .28);
}
body.es-front .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(239, 88, 88, .42); }

/* ---------- 面板 / 卡片：悬浮辉光环 + 顶部渐变线 ---------- */
body.es-front .es-panel { position: relative; }
body.es-front .es-panel::before {
    content: "";
    position: absolute;
    left: 20px; right: 20px; top: 0;
    height: 3px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, transparent, rgba(109, 93, 252, .55), transparent);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
body.es-front .es-panel:hover::before { opacity: 1; }
body.es-front .es-panel:hover,
body.es-front .es-stat-card:hover,
body.es-front .card:hover {
    box-shadow: var(--es-shadow-hover), 0 0 0 3px rgba(109, 93, 252, .12);
}
body.es-front .es-stat-card { position: relative; }
body.es-front .es-stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(109, 93, 252, .06), rgba(34, 211, 238, .05));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
body.es-front .es-stat-card:hover::after { opacity: 1; }

/* ---------- 统计卡图标辉光呼吸 ---------- */
body.es-front .es-stat-card .es-stat-ic {
    box-shadow: 0 6px 14px rgba(109, 93, 252, .3), 0 0 0 0 rgba(109, 93, 252, 0);
    transition: box-shadow .3s ease;
}
body.es-front .es-stat-card:hover .es-stat-ic {
    box-shadow: 0 8px 18px rgba(109, 93, 252, .4), 0 0 16px rgba(109, 93, 252, .35);
}

/* ---------- 列表行悬浮辉光 ---------- */
body.es-front .es-list-row:hover {
    box-shadow: var(--es-shadow), 0 0 0 3px rgba(109, 93, 252, .1);
}

/* ---------- 优惠券悬浮辉光 ---------- */
body.es-front .es-coupon:hover {
    box-shadow: var(--es-shadow-hover), 0 0 0 3px rgba(255, 106, 60, .12);
}

/* ---------- 页脚顶部科技渐变线 ---------- */
.es-footer { position: relative; }
.es-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6d5dfc, #22d3ee, #7c5cff);
    opacity: .85;
}

/* ---------- 滚动渐显（仅支持 scroll-driven 动画的浏览器） ---------- */
@supports (animation-timeline: view()) {
    body.es-front .es-panel,
    body.es-front .es-stat-card,
    body.es-front .card,
    body.es-front .es-list-row,
    body.es-front .es-coupon,
    body.es-front .es-hero,
    body.es-front .es-course-hero {
        animation: es-rise .7s ease both;
        animation-timeline: view();
        animation-range: entry 0% cover 26%;
    }
}

/* ---------- 移动端降级：关闭 fixed 背景与流光动画以保流畅 ---------- */
@media (max-width: 767.98px) {
    body.es-front {
        background-attachment: scroll, scroll, scroll, scroll;
    }
    .es-topbar::before,
    .es-brand-mark,
    .es-hero { animation: none; }
}

/* ============================================================
   登录页 V4 · 高端分屏重设计
   左：深蓝品牌展示区（极光+网格+卖点） 右：磨砂登录卡
   ============================================================ */
.login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    /* 固定一屏：左侧装饰内容（AI 关系图等）在矮视口下按高度分级压缩，
       仍放不下时底部裁剪——绝不把页面撑出竖向滚动条 */
    height: 100vh;
    overflow: hidden;
    width: 100%;
    /* 整页一条横向连续渐变：深青蓝 → 靛蓝 → 深品红，左右同属一张底图 */
    background: linear-gradient(100deg, #061524 0%, #0b1d3a 32%, #1a1c4e 58%, #2b134d 80%, #33104a 100%);
}
/* 整页统一底图：彩色极光光晕（左右共享，避免"两张底图"割裂感） */
.login-shell::before {
    content: "";
    position: fixed; /* fixed 不产生滚动区域：原 absolute + inset:-30% 会在面板高于视口时撑出滚动 */
    inset: -30%;
    background:
        radial-gradient(36% 44% at 16% 22%, rgba(34, 211, 238, .30), transparent 70%),
        radial-gradient(30% 40% at 50% 46%, rgba(99, 102, 241, .30), transparent 75%),
        radial-gradient(38% 46% at 84% 74%, rgba(255, 43, 214, .26), transparent 72%);
    animation: es-aurora 16s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
/* 整页统一底图：科技网格（径向淡出） */
.login-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 211, 238, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 43, 214, .065) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 78% at 50% 45%, #000 30%, transparent 100%);
    mask-image: radial-gradient(80% 78% at 50% 45%, #000 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---- 左侧品牌区 ---- */
.login-side {
    flex: 0 0 46%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 2.8rem 3.2rem 2.2rem;
    color: #fff;
    /* 同色系轻压暗且向右渐隐：不再是"蓝黑贴片"，只是左侧文字的局部衬暗 */
    background: linear-gradient(100deg, rgba(5, 16, 32, .42) 0%, rgba(10, 22, 48, .28) 45%, rgba(26, 24, 62, .10) 72%, rgba(43, 19, 77, 0) 100%);
    overflow: visible;
}
/* 左侧不再自带光晕/网格，统一由 .login-shell 提供 */
.ls-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
}
.login-body .ls-mark {
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #22d3ee 0%, #e935c1 100%);
    animation: none;
    box-shadow: 0 6px 18px rgba(34, 211, 238, .45);
}
.ls-name {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.ls-sub {
    font-size: .68rem;
    opacity: .6;
    letter-spacing: .24em;
    text-transform: uppercase;
}
/* 中段：左侧品牌文案 + 右侧 AI 关系图并排（关系图移到箭头所指的页面中部偏右区域） */
.ls-middle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem;
    flex: 1 1 auto;
    margin-top: 1.6rem;
    min-height: 0;
}
.ls-hero {
    position: relative;
    flex: 0 1 235px;
    min-width: 215px;
    margin: 0;
    padding: 0;
}
.ls-emblem {
    display: block;
    width: 126px;
    height: 126px;
    margin: 0 0 1.2rem;
    filter: drop-shadow(0 10px 24px rgba(34, 211, 238, .45));
}
.ls-title {
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: .01em;
    background: linear-gradient(96deg, #ffffff 28%, #a5f3fc 64%, #f9a8d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ls-desc {
    margin-top: 1.1rem;
    font-size: .98rem;
    line-height: 1.85;
    opacity: .78;
}
/* ---- AI 应用中心辐射关系图：hub 居中 + 8 模块环绕 + 发光连线 ---- */
.ls-map {
    position: relative;
    height: 330px;
    /* 占据 .ls-middle 的剩余宽度（文案右侧），随宽度自适应缩放 */
    flex: 1 1 400px;
    min-width: 330px;
    /* 与左侧文案拉开距离：关系图整体右移少许 */
    margin: 0 0 0 1rem;
}
.ls-map-lines {
    position: absolute;
    inset: 0 0 30px 0; /* 底部留出 caption 高度，坐标才与节点对位 */
    width: calc(100% - 0px);
    height: calc(100% - 30px);
    overflow: visible;
}
.ls-map-lines line {
    stroke: url(#lsLinkG);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 4 5;
    opacity: .5;
    animation: lsDash 1.8s linear infinite;
}
@keyframes lsDash {
    to { stroke-dashoffset: -18; }
}
.ls-map-hub {
    position: absolute;
    left: 50%;
    top: calc(50% - 13px);
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 122px;
    height: 122px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(34, 211, 238, .92) 0%, #6366f1 55%, rgba(233, 53, 193, .92) 100%);
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 6px rgba(34, 211, 238, .10), 0 12px 30px rgba(34, 211, 238, .35), 0 12px 30px rgba(233, 53, 193, .22);
    color: #fff;
}
/* hub 外圈呼吸光环 */
.ls-map-hub::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, .5);
    animation: lsPulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes lsPulse {
    0%   { transform: scale(.86); opacity: .9; }
    70%  { transform: scale(1.22); opacity: 0; }
    100% { transform: scale(1.22); opacity: 0; }
}
.ls-map-hub-icon {
    font-size: 1.45rem;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.ls-map-hub-name {
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.ls-map-node {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgba(255, 255, 255, .94);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .58rem 1.05rem .58rem .62rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ls-map-node:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(34, 211, 238, .55);
    transform: translateY(-2px);
}
.ls-map-node i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #67e8f9;
    background: rgba(34, 211, 238, .14);
    border: 1px solid rgba(34, 211, 238, .32);
}
/* 环绕定位（连线端点与之对位）：左右各 4 行 */
.ls-map-node.n-l1 { left: 2%;  top: 7%;  transform: translateY(-50%); }
.ls-map-node.n-l2 { left: 0;   top: 32%; transform: translateY(-50%); }
.ls-map-node.n-l3 { left: 0;   top: 57%; transform: translateY(-50%); }
.ls-map-node.n-l4 { left: 2%;  top: 82%; transform: translateY(-50%); }
.ls-map-node.n-r1 { right: 2%; top: 7%;  transform: translateY(-50%); }
.ls-map-node.n-r2 { right: 0;  top: 32%; transform: translateY(-50%); }
.ls-map-node.n-r3 { right: 0;  top: 57%; transform: translateY(-50%); }
.ls-map-node.n-r4 { right: 2%; top: 82%; transform: translateY(-50%); }
.ls-map-node:hover { transform: translateY(calc(-50% - 2px)); }
.ls-map-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: .78rem;
    letter-spacing: .18em;
    opacity: .6;
}
.ls-foot {
    position: relative;
    font-size: .74rem;
    opacity: .5;
    letter-spacing: .03em;
}
/* ---- 矮视口分级压缩左侧装饰区（保证一屏内完整呈现，不出现页面滚动条） ---- */
@media (max-height: 940px) {
    .login-side { padding: 1.6rem 2.4rem 1.1rem; }
    .ls-middle { margin-top: .8rem; gap: 1rem; }
    .ls-emblem { width: 96px; height: 96px; margin-bottom: .8rem; }
    .ls-title { font-size: 1.6rem; }
    .ls-desc { margin-top: .6rem; font-size: .88rem; line-height: 1.6; }
    .ls-map { height: 250px; }
}
@media (max-height: 660px) {
    .login-side { padding: 1rem 2rem .8rem; }
    .ls-emblem { width: 78px; height: 78px; margin-bottom: .55rem; }
    .ls-title { font-size: 1.32rem; }
    .ls-desc { margin-top: .4rem; font-size: .8rem; line-height: 1.5; }
    .ls-map { height: 200px; margin-left: .6rem; }
    .ls-map-node { font-size: .85rem; padding: .42rem .8rem .42rem .5rem; }
    .ls-map-node i { width: 28px; height: 28px; font-size: .78rem; }
    .ls-map-hub { width: 96px; height: 96px; }
    .ls-map-hub-icon { font-size: 1.15rem; }
    .ls-map-hub-name { font-size: .82rem; }
    .ls-map-cap { font-size: .68rem; }
    .ls-foot { margin-top: .5rem; }
}

/* ---- 右侧表单区 ---- */
.login-main {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    /* 不用 align-items:center：面板高于视口时会上下同时溢出，把左侧页脚顶出屏幕。
       改用子项 auto margin 安全居中——放得下时垂直居中，放不下时自动顶部对齐+滚动。 */
    align-items: stretch;
    justify-content: center;
    padding: 2.2rem 1.5rem 2rem;
}
.login-box {
    width: 100%;
    max-width: 440px;
    position: relative;
    margin: auto 0; /* 安全垂直居中：空间不足时归零，面板贴顶不再裁切 */
    overflow: hidden;
    background: rgba(255, 255, 255, .97);
    border-radius: 22px;
    padding: 2.6rem 2.4rem 2.2rem;
    box-shadow: 0 1.4rem 3.4rem rgba(4, 6, 12, .40), 0 .3rem 1rem rgba(4, 6, 12, .18);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}
.login-box.is-in {
    opacity: 1;
    transform: none;
}
.login-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22d3ee, #ff2bd6, #22d3ee, #ff2bd6);
    background-size: 220% 100%;
    animation: es-flow 7s linear infinite;
}
.auth-brand-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.6rem;
    font-weight: 700;
    color: var(--es-text);
}
.auth-brand-sm .ls-mark {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    border-radius: 11px;
    margin: 0;
}
.auth-head h1 {
    font-size: 1.72rem;
    font-weight: 800;
    color: var(--es-text);
    letter-spacing: .01em;
    margin-bottom: .45rem;
}
.auth-head p {
    color: #77839a;
    font-size: .92rem;
    margin-bottom: 1.7rem;
}
.auth-field { margin-bottom: 1.05rem; }
/* 注册页紧凑模式：字段多、面板高——两列网格 + 收紧行距让面板一屏放下，
   页面级永不出现竖向滚动条；极矮视口时面板内部隐式滚动兜底（滚动条隐藏） */
.login-box.login-box-compact {
    padding: 1.2rem 2.2rem .95rem;
    /* 注册面板整体往上提升：基础 .login-box 用 align-items:stretch + margin:auto 0
       会垂直居中且随内容增高；这里 align-self:flex-start 关掉拉伸、贴顶对齐，
       再配合 max-height 内部滚动，面板更高也只内部滚，绝不把底部页脚顶出视口 */
    align-self: flex-start;
    /* 面板高度兜底：内容超高一律在面板内部滚动（滚动条视觉隐藏，滚轮仍可用） */
    max-height: calc(100vh - 4.4rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.login-box.login-box-compact::-webkit-scrollbar { display: none; width: 0; height: 0; }
.login-box-compact .auth-head h1 { font-size: 1.4rem; margin-bottom: .22rem; }
.login-box-compact .auth-head p { margin-bottom: .6rem; }
.login-box-compact .auth-field { margin-bottom: .36rem; }
.login-box-compact .field-hint { margin-top: .14rem; min-height: .7rem; }
.login-box-compact .auth-captcha-tip { margin-top: .15rem; }
/* 紧凑模式再收一档：输入框/按钮内边距、页脚间距（选择器带 .login-body 压过基础规则） */
.login-body .login-box-compact .auth-input .form-control { padding-top: .5rem; padding-bottom: .5rem; }
.login-box-compact .auth-captcha-img { height: 40px; }
.login-body .login-box-compact .es-auth-btn { padding-top: .52rem; padding-bottom: .52rem; }
.login-box-compact .auth-alt { margin-top: .6rem; padding-top: .55rem; }
/* 注册表单两列网格：公司 / 邮箱 / 手机号 / 确认密码 / 图形验证码 独占整行，
   仅 昵称|密码 自动两两配对。纯 CSS 实现，Razor 结构零改动；
   用 :has 按输入框 id 定位，不受校验摘要是否渲染、子元素序号偏移影响 */
.login-box-compact .auth-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: .75rem;
    align-items: start;
}
.login-box-compact .auth-form > * { grid-column: 1 / -1; }
.login-box-compact .auth-form > .auth-field { grid-column: auto; }
.login-box-compact .auth-form > .auth-field:has(#CompanyName),
.login-box-compact .auth-form > .auth-field:has(#Email),
.login-box-compact .auth-form > .auth-field:has(#Mobile),
.login-box-compact .auth-form > .auth-field:has(#ConfirmPassword),
.login-box-compact .auth-form > .auth-field:has(.auth-captcha) { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
    /* 窄屏回退单列：网格变一列后 auto 摆放自然逐行堆叠 */
    .login-box-compact .auth-form { grid-template-columns: 1fr; }
}
@media (max-height: 640px) {
    /* 极矮视口：压缩外层留白，面板限额同步放宽 */
    .login-main { padding: .8rem 1.5rem; }
    .login-box.login-box-compact { max-height: calc(100vh - 1.6rem); }
}
/* 注册字段实时校验提示（失焦即查：绿勾可用 / 红叉不可用 / 转圈校验中） */
.field-hint { display: block; margin-top: .32rem; min-height: 1rem; line-height: 1.25; font-size: .76rem; }
.field-hint.is-ok { color: #16a34a; }
.field-hint.is-err { color: #dc2626; }
.field-hint.is-loading { color: #6b7280; }
.field-hint i { margin-right: .25rem; }
/* 校验不通过时输入框描边变红 */
.auth-field.has-err .form-control { border-color: #dc2626 !important; }
.auth-field > label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #51607a;
    margin-bottom: .38rem;
}
.auth-input {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input > i {
    position: absolute;
    left: 1.05rem;
    z-index: 2;
    color: #9aa8bf;
    font-size: .95rem;
    transition: color .2s ease;
    pointer-events: none;
}
.auth-input:focus-within > i { color: var(--es-primary); }
.login-body .auth-input .form-control {
    padding: .78rem 2.9rem .78rem 2.75rem;
    height: auto;
    border: 1.5px solid #e3e9f2;
    border-radius: 12px;
    background: #f8fafd;
    font-size: .95rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.login-body .auth-input .form-control:focus {
    background: #fff;
    border-color: #22d3ee;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .18);
}
.auth-eye {
    position: absolute;
    right: .45rem;
    z-index: 3;
    border: none;
    background: transparent;
    color: #9aa8bf;
    padding: .45rem .65rem;
    border-radius: 9px;
    cursor: pointer;
    transition: color .2s ease;
}
.auth-eye:hover { color: #51607a; }
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .2rem 0 1.2rem;
}
.auth-row .form-check-label {
    font-size: .88rem;
    color: #51607a;
    cursor: pointer;
}
/* 图形验证码：输入框 + 图片并排，点击图片换一张（登录 / 注册 共用） */
.auth-captcha { display: flex; align-items: stretch; gap: .6rem; }
.auth-captcha .auth-input { flex: 1 1 auto; }
.auth-captcha .auth-input .form-control { text-transform: uppercase; letter-spacing: .12em; }
.auth-captcha-img {
    flex: 0 0 auto;
    width: 130px; height: 46px;
    border-radius: 12px;
    border: 1.5px solid #e3e9f2;
    background: #f8fafd;
    cursor: pointer;
    object-fit: cover;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-captcha-img:hover { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .16); }
.auth-captcha-tip { display: block; margin-top: .32rem; font-size: .72rem; color: #95a3ba; }
@media (max-width: 380px) {
    .auth-captcha-img { width: 108px; }
}
.login-box .es-auth-btn {
    padding: .82rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .06em;
    box-shadow: 0 10px 24px rgba(34, 211, 238, .45);
}
.login-box .es-auth-btn i { transition: transform .25s ease; }
.login-box .es-auth-btn:hover i { transform: translateX(4px); }
/* 登录页主按钮：赛博霓虹青渐变（覆盖全局紫色主色，仅作用于登录/注册等 auth 页面） */
.login-body .btn-primary {
    background: linear-gradient(135deg, #0891b2, #d6249f);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(34, 211, 238, .45);
}
.auth-alt {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #e3e9f2;
    font-size: .9rem;
    color: #77839a;
}
.auth-alt a {
    font-weight: 600;
    color: var(--es-primary);
}
.auth-alt a:hover { text-decoration: none; color: var(--es-primary-dark); }
/* 登录页主色协调：链接与输入图标改为赛博青 */
.login-body .auth-alt a { color: #06b6d4; }
.login-body .auth-alt a:hover { color: #0891b2; }
.login-body .auth-input:focus-within > i { color: #0891b2; }

/* ---- 登录页响应式 ---- */
@media (max-width: 991.98px) {
    .login-side { display: none; }
    .login-main { padding: 2rem 1.2rem; }
    .login-box {
        padding: 2.2rem 1.7rem 1.9rem;
        box-shadow: 0 1.4rem 3.4rem rgba(4, 6, 12, .48);
    }
}
@media (max-width: 575.98px) {
    .login-box { padding: 1.9rem 1.3rem 1.6rem; border-radius: 18px; }
    .auth-head h1 { font-size: 1.5rem; }
}

/* ============================================================
   管理后台 V4 · 深色分层侧栏 + 渐变顶栏 + 整页美化
   ============================================================ */
body.es-admin {
    padding-top: 0;
    background: linear-gradient(180deg, #f4f7fc 0%, #eef2f9 100%);
    min-height: 100vh;
}

/* ---- 顶栏 ---- */
.es-adm-topbar {
    position: sticky;
    top: 0;
    z-index: 1035;
    display: flex;
    align-items: center;
    height: 58px;
    padding: 0 1.3rem 0 1.15rem;
    color: #fff;
    background: linear-gradient(92deg, #1c1140 0%, #46209e 55%, #9333ea 100%);
    box-shadow: 0 10px 26px rgba(40, 20, 90, .30);
}
.es-adm-topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #6d5dfc, #22d3ee, #ff5c8a, #6d5dfc);
    background-size: 220% 100%;
    animation: es-flow 8s linear infinite;
}
.adm-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    min-width: 0;
}
.adm-brand:hover { color: #fff; text-decoration: none; }
.es-adm-topbar .es-brand-mark {
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(34, 211, 238, .38);
}
.adm-brand-name { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

/* ---------- 租户自定义 Logo（各布局品牌位） ---------- */
.es-brand-logo {
    display: inline-block;
    object-fit: contain;
    border-radius: 9px;
    background: #fff;
    flex-shrink: 0;
}
.es-adm-topbar .es-brand-logo { width: 36px; height: 36px; border-radius: 10px; }
.navbar-brand .es-brand-logo { width: 34px; height: 34px; }
.es-brand-logo-lg { width: 40px; height: 40px; }
.login-body .es-brand-logo.ls-mark { width: 46px; height: 46px; border-radius: 12px; margin: 0; }
.auth-brand-sm .es-brand-logo { width: 24px; height: 24px; border-radius: 6px; margin-right: .35rem; }
.adm-brand-sub {
    font-size: .68rem;
    padding: .16rem .55rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    white-space: nowrap;
}
.adm-user .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    padding: .35rem .65rem;
    border-radius: 10px;
    transition: background .18s ease;
}
.adm-user .nav-link:hover { background: rgba(255, 255, 255, .14); }
.adm-front-link {
    display: inline-flex;
    align-items: center;
    margin-right: 1.1rem;
    padding: .34rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .30);
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.adm-front-link:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .28);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.adm-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    background: linear-gradient(135deg, #36d3e0, #6d5dfc);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ---- 侧栏（炫酷版：深空极光 + 玻璃拟态 + 流光高亮） ---- */
/* ---- 侧栏菜单搜索框（深色玻璃拟态，跟随侧栏配色） ---- */
.adm-menu-search { position: relative; margin: .15rem 0 .7rem; }
.adm-menu-search > i.fa-search {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, .42); font-size: .78rem; pointer-events: none;
}
#admMenuSearch {
    width: 100%; height: 32px;
    padding: 0 1.9rem 0 2.05rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 13px; outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#admMenuSearch::placeholder { color: rgba(255, 255, 255, .38); }
#admMenuSearch:focus {
    border-color: rgba(139, 123, 255, .65);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(109, 93, 252, .22);
}
#admMenuSearch::-webkit-search-cancel-button { display: none; }
.adm-menu-search .es-ms-clear {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    color: rgba(255, 255, 255, .5); cursor: pointer; border-radius: 50%;
    font-size: .72rem;
    transition: color .15s ease, background .15s ease;
}
.adm-menu-search .es-ms-clear:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.adm-menu-nomatch {
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    padding: .15rem .35rem .55rem;
}
/* 搜索态下组标题与折叠容器照常显示，只隐藏未命中的菜单项/组 */

body.es-admin .sidebar {
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
    background: linear-gradient(180deg, #1c1152 0%, #120a35 48%, #0a0524 100%);
    padding: 1rem .8rem 2.2rem !important;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
/* 深空极光氛围光斑 */
body.es-admin .sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(420px 260px at 88% -6%, rgba(109, 93, 252, .38), transparent 65%),
        radial-gradient(380px 260px at -25% 28%, rgba(34, 211, 238, .20), transparent 62%),
        radial-gradient(460px 320px at 55% 108%, rgba(255, 92, 138, .16), transparent 65%);
}
/* 细网格纹理（向下渐隐，营造科技感） */
body.es-admin .sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 68%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 68%);
}
body.es-admin .sidebar::-webkit-scrollbar { width: 6px; }
body.es-admin .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px;
}
body.es-admin .sidebar::-webkit-scrollbar-track { background: transparent; }
body.es-admin .sidebar .sidebar-sticky {
    position: relative;
    z-index: 1;
    height: auto;
    padding: 0;
    overflow: visible;
}
/* 分组标题 —— 一级目录：霓虹玻璃卡片（与二级菜单同风格但更醒目）
   注：sidebar-sticky 前 2 个 div 是搜索框/无匹配提示，.adm-group 从第 3 个 div 开始，故色轮偏移 +2 */
body.es-admin .sidebar .adm-group { --gc: 34, 211, 238; }
body.es-admin .sidebar .adm-group:nth-of-type(6n+3) { --gc: 34, 211, 238; }   /* 青 */
body.es-admin .sidebar .adm-group:nth-of-type(6n+4) { --gc: 167, 139, 250; }  /* 紫 */
body.es-admin .sidebar .adm-group:nth-of-type(6n+5) { --gc: 255, 92, 138; }   /* 粉 */
body.es-admin .sidebar .adm-group:nth-of-type(6n+6) { --gc: 251, 146, 60; }   /* 橙 */
body.es-admin .sidebar .adm-group:nth-of-type(6n+1) { --gc: 52, 211, 153; }   /* 绿（第5组） */
body.es-admin .sidebar .adm-group:nth-of-type(6n+2) { --gc: 96, 165, 250; }   /* 蓝（第6组） */
/* 一级菜单 = 分类标题带：保留霓虹光条/芯片/渐变字，但做成“标题”而非“可点按钮”
   —— 去掉圆角卡片的位移感，改用底部色线分隔，与二级的紧凑卡片形成层级对比 */
body.es-admin .sidebar .sidebar-heading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.6rem .3rem .5rem;
    padding: .58rem .9rem .58rem .85rem;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .95);
    border-radius: 8px;
    background: linear-gradient(115deg, rgba(var(--gc, 34, 211, 238), .18), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .02));
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background .18s ease, box-shadow .18s ease;
}
/* 标题文字：冰蓝渐变 */
body.es-admin .sidebar .sidebar-heading > span {
    background: linear-gradient(90deg, #f0f9ff, #dbe6ff 60%, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* 左侧霓虹光条 */
body.es-admin .sidebar .sidebar-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 3px;
    border-radius: 3px;
    background: rgb(var(--gc, 34, 211, 238));
    box-shadow: 0 0 10px rgba(var(--gc, 34, 211, 238), .85);
    transition: box-shadow .18s ease, top .18s ease, bottom .18s ease;
}
/* 图标：同色芯片底座 */
body.es-admin .sidebar .sidebar-heading i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    color: rgb(var(--gc, 34, 211, 238));
    background: rgba(var(--gc, 34, 211, 238), .12);
    border: 1px solid rgba(var(--gc, 34, 211, 238), .30);
    box-shadow: inset 0 0 12px rgba(var(--gc, 34, 211, 238), .10);
    transition: all .18s ease;
}
/* 右侧细线：随组色渐隐 */
body.es-admin .sidebar .sidebar-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gc, 34, 211, 238), .40), transparent);
}
/* 悬浮：组色辉光增强（不位移，保持“标题”语义） */
body.es-admin .sidebar .sidebar-heading:hover {
    background: linear-gradient(115deg, rgba(var(--gc, 34, 211, 238), .30), rgba(255, 255, 255, .09) 60%, rgba(255, 255, 255, .04));
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--gc, 34, 211, 238), .28);
}
body.es-admin .sidebar .sidebar-heading:hover > span {
    background: linear-gradient(90deg, #ffffff, #e4edff 60%, #d4dcff);
    -webkit-background-clip: text;
    background-clip: text;
}
body.es-admin .sidebar .sidebar-heading:hover i {
    color: #fff;
    background: rgba(var(--gc, 34, 211, 238), .32);
    box-shadow: 0 0 14px rgba(var(--gc, 34, 211, 238), .60);
}
body.es-admin .sidebar .sidebar-heading:hover::before {
    top: 10%;
    bottom: 10%;
    box-shadow: 0 0 16px rgba(var(--gc, 34, 211, 238), 1);
}
/* 展开态：边框与光晕增强，标识当前组 */
body.es-admin .sidebar .sidebar-heading[aria-expanded="true"] {
    box-shadow: 0 6px 18px rgba(var(--gc, 34, 211, 238), .18);
}
/* 扁平细线箭头：隐藏 FA 实心字形，改由 ::after 手绘 1.5px 细线 V 形 */
body.es-admin .sidebar .sidebar-heading .toggle-icon {
    position: absolute;
    right: .1rem;
    top: 50%;
    width: .46rem;
    height: .46rem;
    margin-top: -.23rem;
    font-size: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
body.es-admin .sidebar .sidebar-heading .toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: 1.5px solid rgba(255, 255, 255, .62);
    border-bottom: 1.5px solid rgba(255, 255, 255, .62);
    border-radius: 1px;
    transform: translateY(-32%) rotate(45deg);   /* 展开态：朝下 */
    transition: transform .25s ease, border-color .18s ease, filter .18s ease;
}
body.es-admin .sidebar .sidebar-heading[aria-expanded="false"] .toggle-icon::after {
    transform: translateY(-32%) rotate(-45deg);  /* 折叠态：朝右 */
}
body.es-admin .sidebar .sidebar-heading:hover .toggle-icon::after {
    border-color: #67e8f9;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, .85));
}
/* 二级菜单容器：左缩进 + 虚线引导线，体现从属一级标题 */
body.es-admin .sidebar .adm-group .collapse {
    margin-left: .6rem;
    padding-left: .55rem;
    border-left: 1px dashed rgba(var(--gc, 34, 211, 238), .28);
}
body.es-admin .sidebar .adm-group .collapse .nav.flex-column {
    padding-left: .15rem;
}
/* 二级菜单项：更紧凑、更透，明显小于一级标题带 */
body.es-admin .sidebar .adm-group .collapse .nav-link {
    margin-bottom: 6px;
    padding: .52rem .8rem;
    font-size: .82rem;
    font-weight: 500;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .05);
}
body.es-admin .sidebar .adm-group .collapse .nav-link > i {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: .72rem;
}
/* 七彩循环：每个菜单项的图标底色按 6 色轮换（青/紫/粉/橙/绿/蓝），挂在 li 上供子元素取用 */
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+1) { --ic: 34, 211, 238; }
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+2) { --ic: 167, 139, 250; }
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+3) { --ic: 255, 92, 138; }
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+4) { --ic: 251, 146, 60; }
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+5) { --ic: 52, 211, 153; }
body.es-admin .sidebar .nav.flex-column > li:nth-child(6n+6) { --ic: 96, 165, 250; }
/* 菜单项 —— 玻璃拟态卡片 */
body.es-admin .sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .85rem;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .045);
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    font-weight: 500;
    position: relative;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.es-admin .sidebar .nav-link > i {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: rgb(var(--ic, 148, 163, 184));
    background: rgba(var(--ic, 148, 163, 184), .10);
    border: 1px solid rgba(var(--ic, 148, 163, 184), .28);
    box-shadow: inset 0 0 12px rgba(var(--ic, 148, 163, 184), .08);
    transition: all .18s ease;
}
body.es-admin .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(var(--ic, 148, 163, 184), .38);
    color: #fff;
    transform: translateX(3px);
    box-shadow: 0 8px 20px rgba(var(--ic, 148, 163, 184), .16);
}
body.es-admin .sidebar .nav-link:hover > i {
    color: #fff;
    background: rgba(var(--ic, 148, 163, 184), .28);
    box-shadow: 0 0 14px rgba(var(--ic, 148, 163, 184), .55);
}
/* 激活态：流动渐变描边 + 扫光 + 左侧光条 */
body.es-admin .sidebar .nav-link.active {
    border: 1px solid transparent;
    background:
        linear-gradient(115deg, rgba(43, 22, 110, .96), rgba(23, 11, 66, .96)) padding-box,
        linear-gradient(90deg, #22d3ee, #6d5dfc, #ff5c8a, #22d3ee) border-box;
    background-size: auto, 200% 200%;
    animation: esNavFlow 5s linear infinite;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(109, 93, 252, .48);
}
@keyframes esNavFlow {
    0% { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 200% 50%; }
}
body.es-admin .sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, .95);
}
/* 扫光：一道高光斜扫过激活项 */
body.es-admin .sidebar .nav-link.active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .30), transparent);
    transform: skewX(-18deg);
    animation: esNavShine 3.4s ease-in-out infinite;
}
@keyframes esNavShine {
    0% { left: -70%; }
    55% { left: 135%; }
    100% { left: 135%; }
}
body.es-admin .sidebar .nav-link.active > i {
    background: rgba(255, 255, 255, .20);
    border-color: rgba(255, 255, 255, .30);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .25);
}
/* 首个独立项（如"工作台"）：渐变图标底座，突出层级 */
body.es-admin .sidebar > .sidebar-sticky > ul.nav.flex-column > li:first-child .nav-link > i {
    background: linear-gradient(135deg, #22d3ee, #6d5dfc);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(109, 93, 252, .50);
}
/* 弱动效偏好：关闭流光/扫光动画 */
@media (prefers-reduced-motion: reduce) {
    body.es-admin .sidebar .nav-link.active,
    body.es-admin .sidebar .nav-link.active::after {
        animation: none;
    }
}

/* ---- 主内容区 ---- */
body.es-admin .adm-body { min-height: calc(100vh - 58px); }
body.es-admin main[role="main"] {
    min-height: calc(100vh - 58px);
    padding: 1.7rem 1.7rem 2.6rem;
    background: #f7f9fc;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    box-shadow: -8px 0 30px rgba(16, 32, 80, .10);
}
/* 面板/进度条/提示美化（后台范围） */
body.es-admin .es-panel { position: relative; transition: box-shadow .18s ease, transform .18s ease; }
body.es-admin .es-panel:hover { box-shadow: var(--es-shadow-hover); transform: translateY(-2px); }
body.es-admin .progress { border-radius: 99px; background: #e9eef7; }
body.es-admin .progress-bar { border-radius: 99px; }
body.es-admin .progress-bar.bg-primary { background: linear-gradient(90deg, #6d5dfc, #22d3ee); }
body.es-admin .progress-bar.bg-success { background: linear-gradient(90deg, #2fb47e, #46d39a); }
body.es-admin .alert { border-radius: 12px; }
body.es-admin .table-responsive { border-radius: 12px; }

/* 全站数据表：数据行统一白底（只保留表头的浅蓝底），去掉斑马纹。
   行级语义色（tr.table-primary / tr.table-light / tr.table-success …）保持原样，不覆盖。 */
.table > tbody > tr:not([class*="table-"]),
.table-striped > tbody > tr:nth-of-type(odd):not([class*="table-"]),
.table-striped > tbody > tr:nth-of-type(odd):not([class*="table-"]) > td,
.table-striped > tbody > tr:nth-of-type(odd):not([class*="table-"]) > th {
    background-color: #fff;
}
/* 悬停高亮保留。必须放在上一条之后，并且补足权重
   （否则奇数行的白底会把悬停高亮压掉） */
.table-hover > tbody > tr:hover:not([class*="table-"]),
.table-hover > tbody > tr:hover:not([class*="table-"]) > td,
.table-striped > tbody > tr:nth-of-type(odd):hover:not([class*="table-"]) {
    background-color: #f7faff;
}

/* ===== 后台所有表格统一为「岗位管理」列表样式 =====
   目标规格（Areas/Admin/Views/Post/Index）：
   白色卡片容器 + 表头 #f2f6fb + 数据行白底 + 悬停 #f7faff + 仅横向分隔线。
   斑马纹/表头/悬停已由上方全局规则统一，这里补齐两处剩余差异：
   ① 裸 .table-responsive（未包在 .card 里的列表，如 角色/课程/题库/现金 等）
      直接渲染成卡片外观，避免"表格浮在灰色页面上"，与卡片式列表不一致；
   ② .card 内的 .table-responsive 还原为透明无边框（卡片自身已提供外观）；
   ③ .table-bordered（各类 Details/配置表）去掉竖向边框，只留横向分隔线。 */

/* ① 裸容器卡片化（外观对齐 BS4 .card） */
body.es-admin .table-responsive {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}
/* ② 卡片内还原：卡片已经有底色和边框，容器自身不再画一圈 */
body.es-admin .card .table-responsive,
body.es-admin .card-body .table-responsive {
    background: transparent;
    border: 0;
}

/* ③ 全边框表格 → 只留横向分隔线（后台 + 弹窗） */
body.es-admin .table-bordered,
body.es-modal .table-bordered {
    border: 0;
}
body.es-admin .table-bordered th,
body.es-admin .table-bordered td,
body.es-modal .table-bordered th,
body.es-modal .table-bordered td {
    border: 0;
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 991.98px) {
    body.es-admin main[role="main"] { padding: 1.2rem 1rem 2.2rem; }
}

/* ---- 快捷入口磁贴 ---- */
.adm-quick {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    height: 100%;
    padding: 1.15rem 1.2rem;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 14px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.adm-quick::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6d5dfc, #22d3ee);
    opacity: 0;
    transition: opacity .2s ease;
}
.adm-quick:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(13, 40, 90, .14);
    border-color: transparent;
    text-decoration: none;
}
.adm-quick:hover::after { opacity: 1; }
.adm-quick .aq-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #8b7bff, #6d5dfc);
    box-shadow: 0 6px 14px rgba(109, 93, 252, .28);
    margin-bottom: .35rem;
}
.adm-quick.is-cyan .aq-ic { background: linear-gradient(135deg, #36d3e0, #1ba7c4); box-shadow: 0 6px 14px rgba(32, 197, 214, .28); }
.adm-quick.is-green .aq-ic { background: linear-gradient(135deg, #46d39a, #2fb47e); box-shadow: 0 6px 14px rgba(47, 196, 143, .28); }
.adm-quick.is-orange .aq-ic { background: linear-gradient(135deg, #ff9a3c, #ff6a3c); box-shadow: 0 6px 14px rgba(255, 106, 60, .28); }
.adm-quick.is-violet .aq-ic { background: linear-gradient(135deg, #9d7bff, #7c5cff); box-shadow: 0 6px 14px rgba(124, 92, 255, .28); }
.adm-quick .aq-name { font-weight: 700; color: var(--es-text); font-size: .95rem; }
.adm-quick .aq-sub { font-size: .78rem; color: #93a1b8; }

/* ===== 文档文库 ===== */
.es-doc-card { transition: box-shadow .15s ease, transform .15s ease; }
.es-doc-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important; transform: translateY(-2px); }
.es-doc-card .card-title a { color: #232733; }
.es-doc-card .card-title a:hover { color: #6d5dfc; }
.es-doc-preview-frame { width: 100%; height: 72vh; border: 0; background: #f7f8fa; }
@media (max-width: 768px) { .es-doc-preview-frame { height: 60vh; } }

/* ===== 课程管理 - 标签云 ===== */
.es-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .55rem .85rem;
    background: #f7f8fb;
    border: 1px solid #eef0f4;
    border-radius: .5rem;
}
.es-tag-cloud .es-tag-pill {
    display: inline-block;
    padding: .25rem .65rem;
    margin: .15rem .25rem .15rem 0;
    font-size: .8rem;
    line-height: 1.4;
    color: #5b6472;
    background: #ffffff;
    border: 1px solid #e3e6ec;
    border-radius: 999px;
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
    user-select: none;
}
.es-tag-cloud .es-tag-pill:hover {
    color: #6d5dfc;
    border-color: #c8befc;
    background: #f1eefe;
    text-decoration: none;
}
.es-tag-cloud .es-tag-pill.active {
    color: #fff;
    background: linear-gradient(135deg, #8b7bff, #6d5dfc);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(109, 93, 252, .25);
}
.es-tag-cloud .es-tag-pill.clear {
    color: #d9534f;
    border-color: #f3c6c4;
    background: #fdf3f3;
}
.es-tag-cloud .es-tag-pill.clear:hover {
    color: #fff;
    background: #d9534f;
    border-color: #d9534f;
}

/* ===== 课程大厅 - 横向分类条（课程列表从下一行开始） ===== */
.es-course-sidebar {
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: .75rem;
    padding: .85rem 1.1rem;
    box-shadow: var(--es-shadow);
}
.es-course-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
}
.es-course-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .9rem;
    gap: .35rem;
    flex-shrink: 0;
}
.es-course-breadcrumb .text-muted {
    color: #8a94a6;
}
.es-course-crumb-name {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    font-size: .85rem;
    color: #d6336c;
    background: #fde7ef;
    border: 1px solid #f5c4d4;
    border-radius: 999px;
    font-weight: 500;
}
.es-course-crumb-name i {
    font-size: .65rem;
    opacity: .8;
}
.es-course-cats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    min-width: 0;
}
.es-course-cats-title {
    color: #8a94a6;
    font-size: .85rem;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.es-course-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.es-course-cats-list li {
    position: relative;
    margin-bottom: 0;
}
.es-course-cats-list li a {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    color: #4a5568;
    font-size: .9rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: 999px;
    transition: all .15s ease;
    white-space: nowrap;
}
.es-course-cats-list li a:hover {
    color: var(--es-green);
    border-color: var(--es-green);
    background: var(--es-green-light);
}
.es-course-cats-list li.active a {
    color: #fff;
    background: var(--es-green);
    border-color: var(--es-green);
    font-weight: 600;
}
.es-course-cats-list li.active a::before {
    display: none;
}
.es-course-cats-list .es-cat-dot {
    font-size: .5rem;
    margin-right: .45rem;
    opacity: .55;
    color: var(--es-green);
}
.es-course-cats-list li.active .es-cat-dot {
    opacity: 1;
    color: #fff;
}
.es-course-cats-count {
    margin-left: .35rem;
    padding: 0 .45rem;
    font-size: .72rem;
    line-height: 1.5;
    color: #8a94a6;
    background: #f3f4f6;
    border-radius: 999px;
    font-weight: 500;
}
.es-course-cats-list li.active .es-course-cats-count {
    color: var(--es-green);
    background: #fff;
}

/* ===== 人脸采集/识别 - 摄像头引导框 =====
   真实人脸为竖向椭圆（上宽下窄、下巴略收），故引导框使用 50% x 76% 的
   蛋形/椭圆，而非正圆；配合四周暗影提示用户把脸放进框内。 */
.es-face-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
}
.es-face-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.es-face-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 84%;
    border: 2px dashed rgba(255,255,255,.45);
    border-radius: 50% / 45%;
    box-shadow: 0 0 0 999px rgba(10, 20, 40, .45);
    pointer-events: none;
}
.es-face-tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    pointer-events: none;
}
.es-face-status {
    min-height: 20px;
    text-align: center;
    margin-top: .5rem;
}

/* ===== 活体动作核验（眨眼 / 张嘴 / 摇头） ===== */
.es-live-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}
.es-live-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem .28rem .35rem;
    font-size: .82rem;
    border-radius: 999px;
    border: 1px solid var(--es-border);
    color: #6b7280;
    background: #f8fafc;
    transition: all .18s ease;
}
.es-live-chip .es-live-no {
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: .7rem;
}
.es-live-chip.active {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
    font-weight: 500;
}
.es-live-chip.active .es-live-no { background: #2563eb; color: #fff; }
.es-live-chip.done {
    border-color: #16a34a;
    color: #16a34a;
    background: #f0fdf4;
}
.es-live-chip.done .es-live-no { background: #16a34a; color: #fff; }
.es-live-chip.done .es-live-no::after { content: '\2713'; font-size: .72rem; }
.es-live-chip.done .es-live-no span { display: none; }

.es-live-prompt {
    margin-top: .5rem;
    min-height: 1.5rem;
    font-size: .9rem;
    color: #2563eb;
    text-align: center;
}
.es-live-prompt.is-error { color: #dc2626; }
.es-live-prompt.is-ok { color: #16a34a; }

/* 动作进行中：虚线框按动作变色 + 轻微呼吸动画 */
.es-face-mask.es-live-blink { border-color: #60a5fa; }
.es-face-mask.es-live-mouth { border-color: #fb923c; }
.es-face-mask.es-live-shake { border-color: #a78bfa; }
@keyframes esLivePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.035); }
}
.es-face-mask.es-live-active {
    animation: esLivePulse 1.5s ease-in-out infinite;
}

/* ===== 试卷编辑：题目配置矩阵（题型 × 难度步进器） ===== */
.es-txcfg {
    background: #fff;
    border: 1px solid var(--es-border);
}
.es-txcfg thead th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 500;
    font-size: .82rem;
    border-bottom: 1px solid var(--es-border);
    padding: .55rem .5rem;
    vertical-align: middle;
}
.es-txcfg .es-diff-head {
    letter-spacing: .05em;
}
.es-txcfg .es-star {
    color: #f59e0b;
    font-size: .78rem;
}
.es-txcfg .es-tx-name {
    font-weight: 600;
    color: #334155;
    min-width: 96px;
}
.es-txcfg tbody td {
    vertical-align: middle;
    padding: .6rem .5rem;
}
.es-txcfg tfoot td {
    background: #f8fafc;
    color: #475569;
    font-size: .88rem;
    padding: .6rem .5rem;
    border-top: 1px solid var(--es-border);
}
/* 步进器：− 输入 ＋ */
.es-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.es-stepper .es-step-btn {
    width: 24px;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    font-size: .9rem;
    line-height: 1;
    padding: .28rem 0;
    cursor: pointer;
    user-select: none;
}
.es-stepper .es-step-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.es-stepper .es-step-input {
    width: 52px;
    border: 0;
    text-align: center;
    font-size: .88rem;
    color: #1e293b;
    padding: .28rem 0;
    -moz-appearance: textfield;
}
.es-stepper .es-step-input::-webkit-outer-spin-button,
.es-stepper .es-step-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.es-stepper .es-step-input:focus {
    outline: none;
    background: #f8fafc;
}
.es-stepper .es-step-input.border-danger {
    box-shadow: inset 0 0 0 1px #dc3545;
}
/* 单元格下方提示：共N题 / 占比反算 */
.es-txcfg .es-cell-hint {
    margin-top: .3rem;
    font-size: .72rem;
    color: #94a3b8;
    line-height: 1.2;
    min-height: 1em;
}
.es-txcfg .es-pct-cell .form-control {
    width: 68px;
    margin: 0 auto;
}
.es-txcfg .es-stock-cell .badge {
    font-weight: 500;
}

/* ===== 试卷编辑页整页缩小字体（与题目配置矩阵一致） ===== */
.es-paper-compact {
    font-size: .88rem;
}
.es-paper-compact h5 {
    font-size: 1.05rem;
}
.es-paper-compact h6 {
    font-size: .9rem;
}
.es-paper-compact label {
    font-size: .82rem;
    margin-bottom: .25rem;
}
.es-paper-compact .form-control {
    font-size: .88rem;
    padding: .25rem .5rem;
}
.es-paper-compact textarea.form-control {
    font-size: .85rem;
}
.es-paper-compact .btn {
    font-size: .85rem;
    padding: .28rem .85rem;
}
.es-paper-compact small,
.es-paper-compact .small,
.es-paper-compact .text-muted.small {
    font-size: .76rem;
}
.es-paper-compact .form-group {
    margin-bottom: .85rem;
}
.es-paper-compact hr {
    margin: .9rem 0;
}

/* ===== 试卷列表「管理」下拉菜单 ===== */
/* ⚠️ .table-responsive 的 overflow-x:auto 会把内部 Bootstrap dropdown 裁掉
   （overflow-x 非 visible 时 overflow-y 计算为 auto → 菜单被截 + 滚动条）。
   theme-switcher.css 的 body.es-admin .table-responsive 又加了 overflow:hidden（裁首末行圆角），
   特异性 (0,2,1) 更高，故此处必须 !important 才能稳定放开裁剪（问卷管理页同样适用）。
   含下拉菜单的表格容器显式放开裁剪；表格列数少，横向溢出风险可忽略。 */
.table-responsive.es-dropdown-table {
    overflow: visible !important;
}
.es-paper-menu {
    min-width: 132px;
    font-size: .88rem;
}
.es-paper-menu .dropdown-item {
    padding: .42rem 1rem;
}
.es-paper-menu button.dropdown-item {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

/* ===== 考试管理弹窗内表格行距统一（与考生管理一致） ===== */
.es-roomy-rows th,
.es-roomy-rows td {
    padding-top: .6rem;
    padding-bottom: .6rem;
    vertical-align: middle;
}

/* ============================================================
   后台表格统一美化（2026-10-23 补充：同时覆盖弹窗/iframe 内表格）
   作用于所有后台 Bootstrap 表格（.table），跟随主题变量；
   既作用于主页面（body.es-admin，变量由 theme-switcher.css 的 [data-accent] 覆盖），
   也作用于弹窗/iframe 内页面（body.es-modal，仅加载 site.css，变量回退到 :root 默认强调色）。
   设计：卡片化容器 + 强调色表头 + 柔和 hover（首列左侧高亮条）+ 圆角 + 美化分页器。
   ============================================================ */

/* 1) 容器卡片化：白底 / 圆角 / 轻阴影 / 细边框（弹窗内更收敛的阴影） */
body.es-admin .table-responsive,
body.es-modal .table-responsive {
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    box-shadow: var(--es-shadow);
}
body.es-modal .table-responsive {
    box-shadow: 0 1px 6px rgba(40, 50, 90, .06); /* 弹窗内更轻，避免双层阴影 */
}

/* 2) 表格基础：透明底、分离边框以便圆角、去掉自带外框 */
body.es-admin table.table,
body.es-modal table.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    border: none;
    color: var(--es-text);
}

/* 3) 表头：强调色浅底 + 强调色字 + 底部 2px 强调色分隔线 */
body.es-admin table.table thead th,
body.es-modal table.table thead th {
    background: var(--es-primary-light);
    color: var(--es-primary);
    font-weight: 600;
    border-top: none;
    border-bottom: 2px solid var(--es-primary);
    white-space: nowrap;
    vertical-align: middle;
    padding: .6rem .75rem;
}

/* 4) 单元格：垂直居中、柔和分隔线 */
body.es-admin table.table td,
body.es-modal table.table td {
    vertical-align: middle;
    border-top: 1px solid var(--es-border);
    padding: .55rem .75rem;
}

/* 5) 首行圆角：贴合容器左上/右上 */
body.es-admin table.table thead th:first-child,
body.es-modal table.table thead th:first-child { border-top-left-radius: var(--es-radius); }
body.es-admin table.table thead th:last-child,
body.es-modal table.table thead th:last-child  { border-top-right-radius: var(--es-radius); }

/* 6) hover：强调色浅底 + 首列左侧高亮条 */
body.es-admin table.table.table-hover tbody tr:hover,
body.es-modal table.table.table-hover tbody tr:hover {
    background: var(--es-primary-light);
}
body.es-admin table.table.table-hover tbody tr:hover td:first-child,
body.es-modal table.table.table-hover tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--es-primary);
}

/* 7) 柔和斑马纹（hover 优先覆盖） */
body.es-admin table.table tbody tr:nth-child(even),
body.es-modal table.table tbody tr:nth-child(even) {
    background: rgba(20, 30, 60, .025);
}

/* 8) 操作列按钮不换行 */
body.es-admin table.table td .btn,
body.es-modal table.table td .btn { white-space: nowrap; }

/* 9) 分页器：active 用强调色渐变、圆角、留白 */
body.es-admin .pagination .page-link,
body.es-modal .pagination .page-link {
    color: var(--es-primary);
    border-color: var(--es-border);
    border-radius: 8px;
    margin: 0 2px;
}
body.es-admin .pagination .page-link:hover,
body.es-modal .pagination .page-link:hover {
    background: var(--es-primary-light);
    color: var(--es-primary-dark);
}
body.es-admin .pagination .page-item.active .page-link,
body.es-modal .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark));
    border-color: var(--es-primary-dark);
    color: #fff;
    box-shadow: 0 3px 8px rgba(90, 70, 200, .25);
}

/* 10) 紧凑密度（data-density=compact）仍保持紧凑，不被上面覆盖 */
[data-density="compact"] body.es-admin table.table td,
[data-density="compact"] body.es-admin table.table th {
    padding: .3rem .5rem;
}

/* 11) 暗黑模式适配（主后台；弹窗固定浅色，无需单独适配） */
[data-mode="dark"] body.es-admin .table-responsive {
    background: var(--es-surface, #161d27);
    border-color: var(--es-border);
}
[data-mode="dark"] body.es-admin table.table thead th {
    background: #1c2530;
    color: #cdd5df;
    border-bottom-color: var(--es-primary);
}
[data-mode="dark"] body.es-admin table.table td {
    border-top-color: var(--es-border);
}
[data-mode="dark"] body.es-admin table.table.table-hover tbody tr:hover {
    background: #1b2530;
}
[data-mode="dark"] body.es-admin table.table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .025);
}
[data-mode="dark"] body.es-admin .pagination .page-link {
    background: #161d27;
    color: #c7d0db;
    border-color: #2a3441;
}
[data-mode="dark"] body.es-admin .pagination .page-link:hover {
    background: var(--es-primary-light);
    color: var(--es-primary);
}

/* ============================================================
   开关（Switch）：二元设置项（系统设置「用户能否同时在线」等）
   用法：<label class="switch"><input type="checkbox"><span class="slider"></span></label>
   ⚠️ 背景色用 !important：部分视图曾在 span 上写内联 background:#ccc，
      内联样式优先级高于普通 CSS 规则，会把 :checked 的高亮色吃掉，
      导致「开启/关闭」看起来完全一样（视觉无反馈）。
   ============================================================ */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    vertical-align: middle;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #cbd2d9 !important;
    border-radius: 24px;
    transition: .2s;
}
.switch .slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: .2s;
}
.switch input:checked + .slider {
    background: #6d5dfc !important;
}
.switch input:checked + .slider:before {
    transform: translateX(22px);
}
.switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(109, 93, 252, .35);
}
/* 关闭态轨道压暗一档，与开启态（紫色）拉开对比 */
.switch input:not(:checked) + .slider {
    background: #cbd2d9 !important;
}

/* ---------- 在线考试：可参加考试卡片（沿用培训中心课程卡片版式） ---------- */
.es-exam-card .cover {
    padding-top: 0;          /* 考试无封面图，改为固定高度的图标区 */
    height: 96px;
    background: linear-gradient(135deg, #e9f1fd, #dcebfc);
}

.es-exam-card .cover .cover-ph {
    font-size: 2.2rem;
    color: #9db8dd;
}

.es-exam-card .badge-joined.badge-ongoing { background: rgba(255, 176, 32, .95); }
.es-exam-card .badge-joined.badge-used { background: rgba(120, 130, 145, .92); }

.es-exam-card .summary {
    height: 2.9em;          /* 时间窗两行 */
    -webkit-line-clamp: 2;
    font-size: .76rem;
    line-height: 1.45em;
}

.es-exam-card .meta-left i { color: #b6c2d2; }

/* 5 列时卡片较窄：右侧次数保持单行，避免「剩余 3 / 次」被挤成两行 */
.es-exam-card .meta { font-size: .74rem; }
.es-exam-card .meta-left span { margin-right: .5rem; }
.es-exam-card .meta-right {
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: .3rem;
}

.es-exam-card .meta-right .es-remain {
    color: var(--es-primary);
    font-weight: 700;
    font-size: .85rem;
}

.es-exam-card .meta-right .es-used {
    color: #999;
    font-weight: 600;
    font-size: .8rem;
}

.es-exam-actions {
    margin-top: .8rem;
    display: flex;
}

.es-exam-actions .btn { width: 100%; }

/* 考试卡片：最多每行 5 个（与培训中心课程卡片一致），容器变窄时自动降到 4/3/2/1 列。
   下限取 max(最小可读宽度 170px, 五等分列宽) —— 宽屏锁定 5 列，窄屏由 auto-fill 自动减列并让卡片放大；
   用 auto-fill 而非 auto-fit，保证考试数量不足 5 场时仍保留 5 列轨道、单张卡片不会撑满整行。 */
.es-exam-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - 4rem) / 5)), 1fr));
}

@media (max-width: 420px) {
    .es-exam-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 考试 / 问卷 筛选栏：两页共用同一套控件尺寸 ----------
   /ExamCenter/Index 的两排筛选栏与 /ExamDrill/Questionnaire 的筛选栏都挂 .es-exam-filter，
   保证输入框、下拉、日期、按钮同宽同距，视觉逐像素对齐。 */
.es-exam-filter .input-group { width: 175px; }
.es-exam-filter .input-group > .form-control { width: 100%; }
.es-exam-filter select.form-control { width: 150px; max-width: 150px; }
.es-exam-filter input[type="date"].form-control { width: 150px; }
.es-exam-filter .btn { min-width: 52px; }

/* ============ 自动任务 · 检查项清单 / 已上报隐患（与 H5 端同款版式） ============ */
.ck-task, .ck-card {
    position: relative; overflow: hidden; background: #fff;
    border: 1px solid #e9eef5; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.ck-task { padding: 18px 20px 16px; margin-bottom: 16px; }
.ck-task::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #2f6bff, #7c5cff 55%, #33c6b1);
}
.ck-task-top { display: flex; align-items: flex-start; gap: 10px; }
.ck-task-top h4 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: #1e293b; }
.ck-level-badge {
    flex: 0 0 auto; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #f26d6d, #e04848);
    box-shadow: 0 2px 8px rgba(224, 72, 72, .28);
}
.ck-task-date { margin: 8px 0 0; font-size: 13px; color: #64748b; }
.ck-task-sum {
    display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed #e2e8f0; font-size: 13px; color: #64748b;
}
.ck-task-sum span { display: flex; align-items: baseline; gap: 5px; }
.ck-task-sum b { font-size: 22px; font-weight: 800; color: #3b7bff; line-height: 1; }
.ck-task-sum i { width: 1px; height: 18px; background: #e2e8f0; }

.ck-bar {
    display: inline-block; width: 4px; height: 16px; border-radius: 3px; flex: 0 0 auto;
    background: linear-gradient(180deg, #3b7bff, #7c5cff);
    box-shadow: 0 2px 6px rgba(59, 123, 255, .35);
}
.ck-card { padding: 16px 18px 12px; margin-bottom: 16px; }
.ck-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ck-head h5 { margin: 0; font-size: 15.5px; font-weight: 700; color: #1e293b; }
.ck-count {
    padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: #3b7bff; background: #eef4ff; border: 1px solid #dbe8ff; white-space: nowrap;
}
.ck-batch-btn {
    flex: 0 0 auto; margin-left: 8px; padding: 6px 14px; border: none; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #f26d6d, #e04848);
    box-shadow: 0 3px 10px rgba(224, 72, 72, .3); white-space: nowrap;
}
.ck-batch-btn:hover { filter: brightness(1.05); }
.ck-progress { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #e2e8f0; }
.ck-progress-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #64748b; }
.ck-progress-top b { font-size: 13.5px; font-weight: 700; color: #0e9f6e; }
.ck-progress-track { height: 8px; margin: 9px 0 10px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.ck-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #12a875, #37c99c); transition: width .4s ease; }
.ck-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12.5px; color: #64748b; }
.ck-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ck-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ck-dot-done { background: #12a875; }
.ck-dot-todo { background: #dfe6ef; }
.ck-legend-warn {
    margin-left: auto; padding: 2px 9px; border-radius: 8px;
    color: #c2701a; background: #fff5e7; border: 1px solid #ffe2b8; font-weight: 600;
}
.ck-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 10px; }
.ck-chip {
    padding: 6px 16px; border-radius: 999px; border: 1px solid #e2e8f0;
    background: #f8fafc; color: #64748b; font-size: 13px; cursor: pointer; transition: all .15s ease;
}
.ck-chip b { font-weight: 700; }
.ck-chip:hover { border-color: #b9c9e8; }
.ck-chip.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #4a7dff, #6f63f5);
    box-shadow: 0 3px 8px rgba(74, 125, 255, .22);
}
.ck-select-all {
    margin-left: 6px; display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: #64748b; cursor: pointer; user-select: none;
}
.ck-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px 11px 12px; margin-bottom: 8px;
    border: 1px solid #e9eef5; border-left: 3px solid #dfe6ef;
    border-radius: 10px; background: #fff;
}
/* 检查项清单按作业单元分组：组头 + 组内行 */
.ck-group { margin-bottom: 14px; border: 1px solid #e9eef5; border-radius: 12px; overflow: hidden; background: #fff; }
.ck-group:last-child { margin-bottom: 0; }
.ck-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; background: linear-gradient(90deg, #f4f8ff 0%, #fafbff 100%);
    border-bottom: 1px solid #eceff5;
}
.ck-group-ico {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #3b7bff; background: #e8f1ff; font-size: 12px;
}
.ck-group-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: #16233a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-group-count { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #64748b; background: #eef2f8; border: 1px solid #e2e8f1; padding: 2px 9px; border-radius: 999px; }
.ck-group-body { padding: 10px 12px 4px; }
.ck-group-body .ck-row { margin-bottom: 8px; }
.ck-group-body .ck-row:last-child { margin-bottom: 4px; }
.ck-row-main { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.ck-row-main .point-check { margin-top: 5px; flex: 0 0 auto; cursor: pointer; }
.ck-no {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #4a7dff, #8163ff);
}
.ck-row-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; color: #1e293b; }
.ck-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ck-row-title { font-weight: 600; }
.ck-type-badge {
    flex: 0 0 auto; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: #2f6bc4; background: #eef4ff; border: 1px solid #dbe8ff;
}
.ck-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 6px; }
.ck-state { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.ck-state.ok { color: #0e8f63; background: #e6f8f0; border-color: #bdebd8; }
.ck-state.todo { color: #94a3b8; background: #f2f5f9; border-color: #e6ebf2; }
.ck-risk { font-size: 12.5px; color: #94a3b8; }
.ck-risk b { font-size: 13px; }
.ck-risk.has { color: #e05a52; font-weight: 600; }
.ck-risk.has b { font-size: 15px; font-weight: 800; }
.ck-row-ops { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-top: 2px; }
.ck-op {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
    border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
    color: #3b7bff; background: #f2f7ff; border: 1px solid #dbe8ff;
    cursor: pointer; white-space: nowrap; transition: all .12s ease;
}
.ck-op:hover { color: #2c5fd6; border-color: #b9d0f5; background: #e9f1ff; text-decoration: none; }
.ck-op i { font-size: 12px; }
.ck-op-red { color: #e05a52; background: #fff4f3; border-color: #ffdcd9; }
.ck-op-red:hover { color: #c8453d; background: #ffecec; }
.ck-op-info { color: #0e9f8a; background: #effbf8; border-color: #c9efe6; }
.ck-op-info:hover { color: #0b8474; background: #e2f6f1; }
.ck-row-done {
    background: linear-gradient(90deg, #ecfaf3 0%, #f7fdfa 60%, #fff 100%);
    border-color: #d6f0e4; border-left-color: #12a875;
}
.ck-row-done .ck-no { background: linear-gradient(135deg, #12a875, #0e9aa4); }
.ck-empty {
    padding: 18px; text-align: center; border-radius: 10px; margin-bottom: 8px;
    color: #94a3b8; font-size: 13.5px;
    background: #f8fafc; border: 1px dashed #dbe4f0;
}
/* 操作结果提示条（弹窗态 TempData 反馈） */
.ck-flash {
    display: flex; align-items: center; gap: 8px;
    margin: 0 2px 14px; padding: 10px 14px; border-radius: 10px;
    font-size: 13px; line-height: 1.6;
}
.ck-flash i { font-size: 14px; }
.ck-flash-ok {
    color: #0e7a56; background: #ecfaf3; border: 1px solid #c8edda;
}
.ck-flash-err {
    color: #b43c3c; background: #fff1f1; border: 1px solid #ffd6d6;
}
.ck-tip {
    margin: 0 2px 18px; padding: 11px 14px; border-radius: 10px;
    background: #f6f9ff; border: 1px solid #e7efff;
    font-size: 13px; line-height: 1.7; color: #64748b;
}
.ck-tip strong { color: #3b7bff; font-weight: 700; }
.ck-unmatched { color: #c2701a; }
.ck-section-head { display: flex; align-items: center; padding: 0 3px 12px; }
.ck-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1e293b; }
.ck-section-title .ck-count { margin-left: 2px; }
.ck-section-sub { margin-left: auto; font-size: 12px; color: #9aa8ba; }
.ck-empty-big {
    padding: 34px 18px; text-align: center; border-radius: 14px; margin-bottom: 16px;
    background: linear-gradient(160deg, #fff, #f7faff); border: 1px dashed #d9e4f5;
}
.ck-empty-big-ico {
    width: 50px; height: 50px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
    background: linear-gradient(135deg, #5b8cff, #8a6bff); box-shadow: 0 6px 16px rgba(91, 140, 255, .3);
}
.ck-empty-big h4 { margin: 0 0 6px; font-size: 15px; color: #1e293b; }
.ck-empty-big p { margin: 0; font-size: 13px; line-height: 1.6; color: #64748b; }
.ck-detail {
    background: #fff; border-radius: 12px; padding: 15px 17px 13px; margin-bottom: 12px;
    border: 1px solid #e9eef5;
    box-shadow: 0 4px 14px rgba(30, 64, 140, .06), 0 1px 2px rgba(30, 64, 140, .04);
}
.ck-detail-top { display: flex; align-items: center; gap: 8px; }
.ck-detail .ck-no { width: 26px; height: 26px; font-size: 12.5px; }
.ck-status { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ck-status.warn { color: #c2701a; background: #fff5e7; border: 1px solid #ffe2b8; }
.ck-status.ok { color: #128a63; background: #eafaf3; border: 1px solid #c3efdd; }
.ck-time { margin-left: auto; font-size: 12px; color: #9aa8ba; }
.ck-desc { margin: 11px 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.55; color: #1e293b; word-break: break-all; }
.ck-meta { font-size: 13px; color: #64748b; line-height: 1.65; }
.ck-meta i { font-style: normal; margin: 0 5px; color: #cbd5e1; }
.ck-more { margin-top: 10px; border-radius: 9px; background: #f7f9fc; border: 1px solid #eef2f7; }
.ck-more summary { padding: 9px 12px; font-size: 13px; font-weight: 600; color: #3b7bff; cursor: pointer; list-style: none; }
.ck-more summary::-webkit-details-marker { display: none; }
.ck-more summary::before { content: "＋ "; font-weight: 700; }
.ck-more[open] summary::before { content: "－ "; }
.ck-more[open] { padding-bottom: 6px; }
.ck-kv { padding: 4px 12px; }
.ck-kv span { display: block; font-size: 12px; color: #94a3b8; }
.ck-kv p { margin: 3px 0 2px; font-size: 13.5px; line-height: 1.65; color: #475569; word-break: break-all; }
.ck-media-block { margin-top: 12px; }
.ck-media-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.ck-media-label.hazard { color: #e05a52; }
.ck-media-label.fix { color: #12a875; }
.ck-media-label b {
    min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px;
    font-size: 11.5px; color: #fff; background: currentColor; opacity: .85;
}
.ck-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 9px; }
.ck-photo, .ck-video {
    width: 100%; height: 110px; object-fit: cover; border-radius: 9px;
    background: #eef2f7; border: 1px solid #e8edf4; display: block; cursor: zoom-in;
}
/* 现场录音：网格内嵌音频播放器，高度与图片磁贴对齐 */
.ck-photos .ck-audio {
    width: 100%; height: 110px; border-radius: 9px; background: #eef2f7;
    border: 1px solid #e8edf4; display: block; align-self: center;
}
.ck-video { cursor: default; }
.ck-photo-tip { margin-top: 7px; font-size: 12px; color: #9aa8ba; }
.ck-nophoto {
    margin-top: 9px; padding: 14px; border-radius: 9px; text-align: center;
    font-size: 13px; color: #a6b2c2; background: #f8fafc; border: 1px dashed #e2e8f0;
}
.ck-detail-ops {
    display: flex; gap: 8px; justify-content: flex-start;
    margin-top: 11px; padding-top: 11px; border-top: 1px dashed #e2e8f0;
}
.ck-lb {
    position: fixed; inset: 0; z-index: 99999; display: none;
    align-items: center; justify-content: center; flex-direction: column;
    background: rgba(9, 14, 26, .94); backdrop-filter: blur(6px);
}
.ck-lb.show { display: flex; }
.ck-lb img { max-width: 88vw; max-height: 74vh; object-fit: contain; border-radius: 8px; }
.ck-lb-close {
    position: absolute; top: 18px; right: 22px; width: 36px; height: 36px; line-height: 33px;
    text-align: center; border-radius: 50%; font-size: 26px; color: #fff;
    background: rgba(255,255,255,.14); cursor: pointer;
}
.ck-lb-caption { margin-top: 12px; color: rgba(255,255,255,.85); font-size: 13px; }
.ck-lb-caption.fix { color: #7fe3c0; }
.ck-lb-bar { display: flex; align-items: center; gap: 26px; margin-top: 12px; color: #fff; font-size: 13px; }
.ck-lb-bar button {
    width: 38px; height: 34px; border: none; border-radius: 8px; font-size: 22px; color: #fff;
    background: rgba(255,255,255,.14); cursor: pointer;
}
.ck-lb-bar button:hover { background: rgba(255,255,255,.26); }

/* ============ 文件上传控件美化（es-upload）：自动包裹 input[type=file] ============ */
.es-upload-native {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    margin: 0; padding: 0; border: 0; overflow: hidden;
}
.es-upload {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; margin: 6px 0 2px;
    border: 1.6px dashed #bcd3f5; border-radius: 12px;
    background: linear-gradient(160deg, #f6faff, #fdfbff);
    cursor: pointer; transition: all .15s ease; position: relative;
    user-select: none; max-width: 100%;
}
.es-upload:hover, .es-upload:active { border-color: #3b7bff; background: #f0f6ff; }
.es-upload-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, #2f7fe0, #1f6fd6 60%, #7b5ce0);
    box-shadow: 0 3px 10px rgba(31, 111, 214, .3);
}
.es-upload-ico svg { width: 24px; height: 24px; }
.es-upload-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.es-upload-t { font-size: 14px; font-weight: 600; color: #1e293b; }
.es-upload-sub { font-size: 12px; color: #64748b; }
.es-upload-badge {
    flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #12a875, #37c99c);
    box-shadow: 0 2px 8px rgba(18, 168, 117, .3);
}
.es-upload.has-files { border-style: solid; border-color: #bdebd8; background: #f2fbf7; }
.es-upload.has-files .es-upload-t { color: #0e8f63; }

/* 随手拍上报：表单控件继承页面正文字体。
   Bootstrap 的 .form-control 未设置 font-family，textarea 会回退成浏览器默认等宽/衬线字体。 */
.snap-form .form-control,
.snap-form .form-control:focus,
.snap-form #snapAiState,
.snap-form #snapAiDetail { font-family: inherit; }

/* 随手拍：照片分析结论清单（默认常驻，未选图时显示待命提示） */
.snap-form #snapAi .card-body { padding-top: .7rem; padding-bottom: .7rem; }
.snap-form #snapAiState { line-height: 1.6; }
.snap-form #snapAiDetail { line-height: 1.7; word-break: break-word; }
.snap-form #snapAiDetail:empty { display: none; }
.snap-form #snapAiDetail > div + div { margin-top: 2px; padding-top: 2px; border-top: 1px dashed #edf0f7; }

/* 随手拍文件上传控件：虚线框 + 蓝色渐变相机图标（与 H5 端风格一致） */
.snap-upload-native {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    margin: 0; padding: 0; border: 0; overflow: hidden;
}
.snap-upload {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; margin: 6px 0 2px;
    border: 1.6px dashed #bcd3f5; border-radius: 12px;
    background: linear-gradient(160deg, #f6faff, #fdfbff);
    cursor: pointer; transition: all .15s ease; position: relative;
    user-select: none;
}
.snap-upload:hover, .snap-upload:active { border-color: #3b7bff; background: #f0f6ff; }
.snap-upload:active { transform: scale(.99); }
.snap-upload-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, #19b5c8, #1f6fd6 60%, #7b5ce0);
    box-shadow: 0 3px 10px rgba(31, 111, 214, .3); font-size: 20px;
}
.snap-upload-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.snap-upload-t { font-size: 14px; font-weight: 600; color: #2b3a55; }
.snap-upload-sub { font-size: 12px; color: #8fa3bf; }
.snap-upload-badge {
    flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #12a875, #37c99c);
    box-shadow: 0 2px 8px rgba(18, 168, 117, .3);
}
.snap-upload.has-files { border-style: solid; border-color: #bdebd8; background: #f2fbf7; }
.snap-upload.has-files .snap-upload-t { color: #0e8f63; }

/* ============================================================
   后台表格行内下拉菜单（用户管理「更多」等）：不再被卡片裁剪 / 被后续行按钮压住
   ⚠️ theme-switcher.css 的 body.es-admin .card 带 overflow:hidden（表格圆角用）。
      .table-responsive.es-dropdown-table 已放开自身裁剪，但外层 .card 仍在裁：
      最后一行的菜单向下展开时会被切掉一截，下半部分点击穿透、菜单项点不到。
      另外打开态 .dropdown 默认 z-index:auto，后续表格行的按钮可能绘制在菜单之上。
   处理：① 放开含下拉表格的卡片裁剪；② 打开态下拉抬升层叠；③ 菜单实底 + 阴影，视觉明确浮起。
   仅作用于带 .es-dropdown-table 的表格，其他卡片不受影响。
   ============================================================ */
@supports selector(:has(*)) {
    body.es-admin .card:has(.es-dropdown-table),
    body.es-modal .card:has(.es-dropdown-table) {
        overflow: visible !important;
    }
}
/* 不支持 :has() 的浏览器：统一放开后台卡片裁剪（表头自带圆角，不受影响） */
@supports not selector(:has(*)) {
    body.es-admin .card,
    body.es-modal .card {
        overflow: visible !important;
    }
}
body.es-admin .es-dropdown-table .dropdown.show,
body.es-modal .es-dropdown-table .dropdown.show {
    position: relative;
    z-index: 1040;
}
body.es-admin .es-dropdown-table .dropdown-menu.show,
body.es-modal .es-dropdown-table .dropdown-menu.show {
    z-index: 1041;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .22);
    white-space: nowrap;
}
[data-mode="dark"] body.es-admin .es-dropdown-table .dropdown-menu.show,
[data-mode="dark"] body.es-modal .es-dropdown-table .dropdown-menu.show {
    background: #161d27;
    border-color: #26303d;
}

/* SaaS 工作台：必备模块徽标 */
.aq-core {
    display: inline-block;
    margin-left: .35rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(124, 92, 255, .14);
    color: #7c5cff;
    font-size: .68rem;
    font-style: normal;
    font-weight: 600;
    vertical-align: middle;
    line-height: 1.5;
}
[data-mode="dark"] .aq-core {
    color: #b6a4ff;
    background: rgba(124, 92, 255, .22);
}

/* ============================================================
   SaaS 工作台（Web /Home/Index）视觉升级
   全部 .wb- 前缀，作用域隔离；兼容 html[data-mode] / [data-accent] /
   [data-density]。视图与样式成对修改，勿单独删除。
   ============================================================ */
:root {
    --wb-surface: #ffffff;
    --wb-surface-2: #f7f9fc;
    --wb-text: #22303f;
    --wb-sub: #7a8798;
    --wb-line: #e6ecf5;
    --wb-shadow: 0 8px 26px rgba(24, 54, 104, .07);
    --wb-shadow-lg: 0 18px 40px rgba(24, 54, 104, .15);
    --wb-accent: linear-gradient(135deg, var(--es-primary), var(--es-primary-dark));
    --wb-blue: linear-gradient(135deg, #7c8cff, #5b3fe0);
    --wb-cyan: linear-gradient(135deg, #36d3e0, #1ba7c4);
    --wb-green: linear-gradient(135deg, #46d39a, #2fb47e);
    --wb-orange: linear-gradient(135deg, #ff9a3c, #ff6a3c);
    --wb-violet: linear-gradient(135deg, #9d7bff, #7c5cff);
}
[data-mode="dark"] {
    --wb-surface: #161d27;
    --wb-surface-2: #1b2530;
    --wb-text: #dbe2ea;
    --wb-sub: #8b97a6;
    --wb-line: #26303d;
    --wb-shadow: 0 8px 26px rgba(0, 0, 0, .32);
    --wb-shadow-lg: 0 18px 40px rgba(0, 0, 0, .48);
}

/* ---------- Hero ---------- */
.wb-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    padding: 2.1rem 2.4rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    background: var(--es-tech-grad, linear-gradient(115deg, #2b2a72 0%, #5b3fe0 42%, #3b82d6 74%, #22d3ee 100%));
    box-shadow: 0 22px 48px rgba(70, 60, 180, .26);
}
.wb-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(16, 18, 64, .46) 0%, rgba(16, 18, 64, .10) 52%, rgba(8, 34, 72, .30) 100%);
}
.wb-hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .7), transparent 80%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .7), transparent 80%);
}
.wb-hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.wb-hero-glow-a { width: 360px; height: 360px; right: -70px; top: -170px; background: rgba(255, 255, 255, .22); animation: wb-float 10s ease-in-out infinite alternate; }
.wb-hero-glow-b { width: 300px; height: 300px; right: 170px; bottom: -200px; background: rgba(34, 211, 238, .32); }
@keyframes wb-float { to { transform: translate(-18px, 14px) scale(1.08); } }
.wb-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wb-hero-copy { min-width: 0; }
.wb-hero-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .32rem .8rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wb-hero-pill em { font-style: normal; font-size: .66rem; letter-spacing: .12em; opacity: .72; margin-left: .25rem; }
.wb-hero-title { font-size: 1.85rem; font-weight: 800; letter-spacing: -.5px; margin: .85rem 0 .5rem; text-shadow: 0 4px 22px rgba(20, 30, 90, .22); }
.wb-hero-title span {
    background: linear-gradient(120deg, #ffffff, #d9f6ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.wb-hero-sub { margin: 0; font-size: .92rem; opacity: .94; }
.wb-hero-sub strong { font-size: 1.05rem; }
.wb-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.wb-hero-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border-radius: 10px; font-size: .78rem;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wb-hero-chip i { opacity: .8; }
.wb-hero-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.15rem; font-size: .76rem; opacity: .82; }
.wb-hero-foot i.fa { margin-right: .3rem; }
.wb-hero-sep { display: inline-block; width: 1px; height: 12px; background: rgba(255, 255, 255, .4); }

/* 右侧装饰数据环（数值为真实已开通模块数） */
.wb-hero-visual { position: relative; flex: none; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; }
.wb-orbit { position: absolute; border-radius: 50%; }
.wb-orbit-outer { inset: 0; border: 1px dashed rgba(255, 255, 255, .45); animation: wb-spin 26s linear infinite; }
.wb-orbit-inner { inset: 22px; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 0 34px rgba(255, 255, 255, .12); }
.wb-orbit-core {
    position: relative; width: 118px; height: 118px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 0 40px rgba(255, 255, 255, .22), inset 0 0 30px rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.wb-orbit-core strong { font-size: 2.5rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.wb-orbit-core small { font-size: .7rem; opacity: .85; margin-top: .35rem; letter-spacing: .08em; }
.wb-orbit-dot {
    position: absolute; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; color: #5b3fe0; background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.wb-orbit-dot-1 { top: 2px; left: 50%; transform: translateX(-50%); }
.wb-orbit-dot-2 { bottom: 20px; left: 6px; }
.wb-orbit-dot-3 { bottom: 20px; right: 6px; }
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ---------- 筛选工具条（注意：不可加 overflow:hidden，会裁掉机构下拉） ---------- */
.wb-toolbar {
    position: relative;
    display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.4rem;
    padding: .9rem 1.2rem; margin-bottom: .35rem;
    background: var(--wb-surface); border: 1px solid var(--wb-line);
    border-radius: 14px; box-shadow: var(--wb-shadow);
}
.wb-toolbar-lead { display: flex; align-items: center; gap: .65rem; padding-right: 1.2rem; border-right: 1px solid var(--wb-line); }
.wb-toolbar-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--wb-accent); box-shadow: 0 6px 14px rgba(91, 63, 224, .24); }
.wb-toolbar-lead-tx { display: flex; flex-direction: column; line-height: 1.3; }
.wb-toolbar-lead-tx strong { font-size: .9rem; color: var(--wb-text); }
.wb-toolbar-lead-tx small { font-size: .72rem; color: var(--wb-sub); }
.wb-toolbar-fields { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.wb-toolbar-label { font-size: .8rem; color: var(--wb-sub); margin: 0; white-space: nowrap; }
.wb-toolbar .es-org-select { margin-right: 0 !important; margin-bottom: 0 !important; }
.wb-toolbar .es-org-select .form-control { height: 32px; border-radius: 9px; border-color: var(--wb-line); font-family: inherit; font-size: .82rem; }
.wb-toolbar .es-org-select .form-control:focus { border-color: var(--es-primary); box-shadow: 0 0 0 3px rgba(109, 93, 252, .13); }
.wb-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 32px; padding: 0 .85rem; border-radius: 9px;
    font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap;
    background: var(--wb-accent); border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.wb-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(91, 63, 224, .28); }
.wb-btn-ghost { background: transparent; color: var(--wb-sub); border-color: var(--wb-line); }
.wb-btn-ghost:hover { color: var(--es-primary); border-color: var(--es-primary); background: transparent; box-shadow: none; }
.wb-toolbar-note { flex-basis: 100%; margin: 0; font-size: .74rem; line-height: 1.5; color: var(--wb-sub); }
.wb-toolbar-note i { margin-right: .3rem; color: var(--es-primary); }

/* ---------- 版块标题 ---------- */
.wb-section { display: flex; align-items: center; gap: .65rem; margin: 2rem 0 1rem; }
.wb-section-bar { width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--es-primary), #22d3ee); box-shadow: 0 0 12px rgba(109, 93, 252, .35); }
.wb-section h2, .wb-section-h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: .2px; color: var(--wb-text); }
.wb-section-en { padding: .15rem .5rem; border-radius: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; color: var(--es-primary); background: rgba(109, 93, 252, .09); }
.wb-section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--wb-line), transparent); }
.wb-section-note { font-size: .76rem; color: var(--wb-sub); white-space: nowrap; }
.wb-section-note i { margin-right: .3rem; }

/* ---------- 统计卡 ---------- */
.wb-stats { display: grid; gap: 1rem; grid-template-columns: repeat(var(--wb-stat-cols, 4), minmax(0, 1fr)); }
.wb-stat {
    --wb-tone: var(--wb-accent); --wb-tone-color: var(--es-primary);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    min-height: 142px; padding: 1.1rem 1.2rem 1rem;
    background: var(--wb-surface); border: 1px solid var(--wb-line);
    border-radius: 16px; box-shadow: var(--wb-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wb-stat.is-violet { --wb-tone: var(--wb-violet); --wb-tone-color: #7c5cff; }
.wb-stat.is-cyan { --wb-tone: var(--wb-cyan); --wb-tone-color: #1ba7c4; }
.wb-stat.is-green { --wb-tone: var(--wb-green); --wb-tone-color: #2fb47e; }
.wb-stat.is-orange { --wb-tone: var(--wb-orange); --wb-tone-color: #ff6a3c; }
.wb-stat-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wb-tone); }
.wb-stat-wm { position: absolute; right: -12px; bottom: -22px; font-size: 5.6rem; color: var(--wb-tone-color); opacity: .035; transform: rotate(-12deg); pointer-events: none; }
.wb-stat-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; }
.wb-stat-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; background: var(--wb-tone); box-shadow: 0 7px 16px rgba(60, 60, 140, .16); }
.wb-stat-lbl { font-size: .82rem; font-weight: 600; color: var(--wb-sub); }
.wb-stat-num { position: relative; z-index: 1; margin-top: .7rem; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.5px; color: var(--wb-text); font-variant-numeric: tabular-nums; }
.wb-stat-foot { position: relative; z-index: 1; margin-top: auto; padding-top: .55rem; min-height: 1.1rem; border-top: 1px dashed var(--wb-line); font-size: .72rem; color: var(--wb-sub); }
.wb-stat:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--wb-shadow-lg); }

/* ---------- 功能模块磁贴 ---------- */
.wb-modules { display: grid; gap: 1rem; grid-template-columns: repeat(var(--wb-mod-cols, 4), minmax(0, 1fr)); }
.wb-mod {
    --wb-tone: var(--wb-accent); --wb-tone-color: var(--es-primary);
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .28rem;
    min-height: 134px; padding: 1.05rem 1.1rem;
    background: var(--wb-surface); border: 1px solid var(--wb-line);
    border-radius: 15px; text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wb-mod.is-cyan { --wb-tone: var(--wb-cyan); --wb-tone-color: #1ba7c4; }
.wb-mod.is-green { --wb-tone: var(--wb-green); --wb-tone-color: #2fb47e; }
.wb-mod.is-orange { --wb-tone: var(--wb-orange); --wb-tone-color: #ff6a3c; }
.wb-mod.is-violet { --wb-tone: var(--wb-violet); --wb-tone-color: #7c5cff; }
.wb-mod::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(109, 93, 252, .06), transparent 62%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.wb-mod::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wb-tone); opacity: 0; transition: opacity .22s ease; }
.wb-mod:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--wb-shadow-lg); text-decoration: none; }
.wb-mod:hover::before, .wb-mod:hover::after { opacity: 1; }
.wb-mod-no { position: absolute; top: .85rem; right: 1rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--wb-sub); opacity: .5; }
.wb-mod-arrow { position: absolute; right: 1rem; bottom: 1rem; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--wb-tone-color); background: rgba(109, 93, 252, .08); opacity: 0; transform: translateX(-6px); transition: opacity .22s ease, transform .22s ease; }
.wb-mod:hover .wb-mod-arrow { opacity: 1; transform: translateX(0); }
.wb-mod-ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: .25rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; background: var(--wb-tone); box-shadow: 0 7px 16px rgba(60, 60, 140, .16); }
.wb-mod-name { font-size: .92rem; font-weight: 700; color: var(--wb-text); }
.wb-mod-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 1.8rem; font-size: .74rem; line-height: 1.45; color: var(--wb-sub); }
.wb-mod-core { display: inline-block; margin-left: .35rem; padding: 1px 6px; border-radius: 999px; font-size: .66rem; font-style: normal; font-weight: 600; color: var(--es-primary); background: rgba(109, 93, 252, .1); vertical-align: middle; }

/* ---------- 趋势图 ---------- */
.wb-charts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.wb-chart { overflow: hidden; background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: 16px; box-shadow: var(--wb-shadow); }
.wb-chart-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--wb-line); }
.wb-chart-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.wb-chart-ic.is-blue { background: var(--wb-blue); box-shadow: 0 7px 16px rgba(91, 63, 224, .22); }
.wb-chart-ic.is-green { background: var(--wb-green); box-shadow: 0 7px 16px rgba(47, 196, 143, .22); }
.wb-chart-title { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wb-chart-title strong { font-size: .9rem; color: var(--wb-text); }
.wb-chart-title small { font-size: .64rem; letter-spacing: .12em; color: var(--wb-sub); }
.wb-chart-kpi { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.wb-chart-kpi strong { font-size: 1.35rem; font-weight: 800; color: var(--es-primary); font-variant-numeric: tabular-nums; }
.wb-chart-kpi small { font-size: .68rem; color: var(--wb-sub); }
.wb-chart-body { padding: 1.1rem 1.2rem 1rem; }
.wb-bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 172px; padding-top: 18px; }
.wb-bars::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 126px; background: repeating-linear-gradient(to top, var(--wb-line) 0 1px, transparent 1px 42px); opacity: .75; pointer-events: none; }
.wb-bar-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.wb-bar-track { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
/* 0 值日期也保留浅色柱槽，避免稀疏数据下只剩一条彩色虚线 */
.wb-bar-track::before { content: ""; position: absolute; bottom: 0; left: 11%; width: 78%; max-width: 26px; height: 100%; box-sizing: border-box; border-radius: 6px; background: var(--wb-line); opacity: .5; }
.wb-bar-fill { position: relative; display: block; width: 78%; max-width: 26px; min-height: 3px; border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: wb-rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--wb-i, 0) * 32ms); transition: filter .2s ease, box-shadow .2s ease; }
.wb-bar-fill.is-blue { background: linear-gradient(180deg, #7c8cff, #5b3fe0); box-shadow: 0 4px 12px rgba(91, 63, 224, .22); }
.wb-bar-fill.is-green { background: linear-gradient(180deg, #46d39a, #2fb47e); box-shadow: 0 4px 12px rgba(47, 196, 143, .22); }
.wb-bar-col:hover .wb-bar-fill { filter: brightness(1.12); }
.wb-bar-val { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 6px; font-size: .68rem; font-weight: 700; white-space: nowrap; color: var(--wb-text); background: var(--wb-surface); border: 1px solid var(--wb-line); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.wb-bar-col:hover .wb-bar-val { opacity: 1; }
.wb-bar-day { margin-top: .45rem; font-size: .62rem; white-space: nowrap; color: var(--wb-sub); visibility: hidden; }
.wb-bar-col:nth-child(4n+1) .wb-bar-day { visibility: visible; }
@keyframes wb-rise { from { transform: scaleY(.02); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
.wb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; height: 172px; color: var(--wb-sub); }
.wb-empty i { font-size: 2rem; opacity: .4; }
.wb-empty span { font-size: .85rem; font-weight: 600; }
.wb-empty small { font-size: .72rem; opacity: .75; }

/* ---------- 主题 / 密度 / 响应式 ---------- */
/* 既有主题切换器只改了 body，漏了后台 main 的浅灰底 → 暗色下工作台白底突兀 */
[data-mode="dark"] body.es-admin main[role="main"] { background: #0f141b; }
[data-mode="dark"] .wb-hero { box-shadow: 0 22px 48px rgba(0, 0, 0, .42); }
[data-mode="dark"] .wb-hero-pill, [data-mode="dark"] .wb-hero-chip { background: rgba(255, 255, 255, .1); }
[data-density="compact"] .wb-section { margin: 1.2rem 0 .7rem; }
[data-density="compact"] .wb-stat { min-height: 120px; padding: .85rem 1rem; }
[data-density="compact"] .wb-mod { min-height: 116px; padding: .85rem .95rem; }
@media (max-width: 991.98px) {
    .wb-hero { padding: 1.6rem 1.4rem; }
    .wb-hero-title { font-size: 1.6rem; }
    .wb-hero-visual { display: none; }
    .wb-toolbar-lead { padding-right: 0; border-right: 0; }
    .wb-stats, .wb-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .wb-hero-title { font-size: 1.4rem; }
    .wb-hero-foot { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .wb-hero-sep { display: none; }
    .wb-stats, .wb-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wb-charts { grid-template-columns: 1fr; }
    .wb-section-note { display: none; }
}
@media (min-width: 1600px) { .wb-bar-day { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
    .wb-hero-glow-a, .wb-orbit-outer, .wb-bar-fill { animation: none !important; }
    .wb-stat, .wb-mod, .wb-btn { transition: none !important; }
}

/* ============================================================
   风险监盘 /Admin/RiskMonitor 九宫格卡片（左指标 + 右累计曲线）
   独立 .rm- 命名空间，避开 body.es-admin .card 等全局卡片规则。
   🔴 全局 13px!important 规则已在 theme-switcher.css 排除 [class*="rm-"]。
   ============================================================ */
.rm-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .9rem;
}
.rm-title-wrap { display: flex; align-items: center; gap: .5rem; }
.rm-title-bar {
    width: 4px; height: 19px; border-radius: 4px; flex: none;
    background: var(--es-tech-grad, linear-gradient(180deg, #6d5dfc, #22d3ee));
    box-shadow: 0 0 10px rgba(109, 93, 252, .45);
}
.rm-title-sub {
    font-size: 10px; letter-spacing: .16em; font-weight: 700;
    color: #a9b6c6; padding-left: .1rem;
}
.rm-page-note {
    color: #7c8a9c; font-size: 12px;
    background: rgba(148, 163, 184, .10);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 999px; padding: .25rem .7rem;
}

/* 风险监盘 · 查询栏：组织机构（可输入下拉）+ 作业单元名称（模糊搜索） */
.rm-filter {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: .7rem;
    padding: .75rem .9rem; margin-bottom: 1rem;
    background: linear-gradient(161deg, #ffffff 0%, #fcfdff 55%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 12px;
    box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .35);
}
.rm-filter-item { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rm-filter-item-org { flex: 0 1 250px; }
.rm-filter-item-name { flex: 0 1 230px; }
.rm-filter-item label { font-size: 11px; font-weight: 600; color: #64748b; }
.rm-filter-input {
    width: 100%; height: 32px; padding: 0 .65rem;
    font-family: inherit; font-size: 12px; color: #0f1f33;
    background: #fff; border: 1px solid rgba(148, 163, 184, .38);
    border-radius: 8px; outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.rm-filter-input::placeholder { color: #a3b0c0; }
.rm-filter-input:focus { border-color: #6d5dfc; box-shadow: 0 0 0 3px rgba(109, 93, 252, .12); }
.rm-filter-btns { display: flex; gap: .45rem; padding-bottom: 1px; }
.rm-filter-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    height: 32px; padding: 0 .9rem; border-radius: 8px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: transform .16s, box-shadow .16s, background .16s;
}
.rm-filter-btn:hover { transform: translateY(-1px); text-decoration: none; }
.rm-filter-btn-primary {
    color: #fff; background: linear-gradient(135deg, #6d5dfc, #4a7dff);
    box-shadow: 0 4px 12px -4px rgba(109, 93, 252, .6);
}
.rm-filter-btn-primary:hover { color: #fff; box-shadow: 0 6px 16px -4px rgba(109, 93, 252, .7); }
.rm-filter-btn-ghost { color: #475569; background: #fff; border-color: rgba(148, 163, 184, .4); }
.rm-filter-btn-ghost:hover { color: #0f1f33; background: #f8fafc; }
.rm-filter-count { margin-left: auto; padding-bottom: .35rem; font-size: 11px; color: #7c8a9c; }
.rm-filter-count b { color: #0f1f33; font-size: 13px; }

/* 组织机构：自绘下拉面板。原生 datalist 由浏览器绘制，深色系统主题下会变成
   不可控的黑底浮层且带原生小箭头，与查询栏风格不一致，故仅用其 option 作数据源。 */
.rm-filter { position: relative; z-index: 5; }
.rm-combo { position: relative; width: 100%; }
.rm-combo-input { padding-right: 1.9rem; }
.rm-combo-toggle {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 26px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; outline: none; cursor: pointer;
    background: transparent; color: #8493a6; border-radius: 0 7px 7px 0;
}
.rm-combo-toggle:hover { color: #6d5dfc; background: rgba(109, 93, 252, .08); }
.rm-combo-toggle .fa { font-size: 14px; transition: transform .18s ease; }
.rm-combo.is-open .rm-combo-toggle .fa { transform: rotate(180deg); }
.rm-combo.is-open .rm-combo-input { border-color: #6d5dfc; box-shadow: 0 0 0 3px rgba(109, 93, 252, .12); }
.rm-combo-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    width: 100%; min-width: 240px; max-width: min(360px, 88vw); z-index: 1200;
    background: #fff; border: 1px solid rgba(148, 163, 184, .32);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 16px 38px -14px rgba(15, 23, 42, .38);
}
.rm-combo.is-open .rm-combo-panel { display: block; }
.rm-combo-hint {
    padding: .42rem .7rem; font-size: 10px; color: #94a3b8;
    background: #f8fafc; border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.rm-combo-list { list-style: none; margin: 0; padding: .3rem; max-height: 220px; overflow-y: auto; }
.rm-combo-list::-webkit-scrollbar { width: 6px; }
.rm-combo-list::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .5); border-radius: 3px; }
.rm-combo-option {
    display: flex; align-items: center; gap: .4rem;
    padding: .44rem .55rem; border-radius: 7px; cursor: pointer;
    font-size: 12px; line-height: 1.35; color: #334155;
}
.rm-combo-option-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-combo-check { color: #6d5dfc; font-size: 11px; }
.rm-combo-option:hover, .rm-combo-option.is-active { background: rgba(109, 93, 252, .10); color: #4c3fd6; }
.rm-combo-option.is-selected { font-weight: 600; color: #4c3fd6; }
.rm-combo-empty { display: none; padding: .9rem .6rem; text-align: center; font-size: 11px; color: #94a3b8; }
/* 后台 .card 带 overflow:hidden（表格圆角用），放开含本查询栏的卡片，避免下拉面板被裁 */
@supports selector(:has(*)) {
    body.es-admin .card:has(.rm-filter),
    body.es-modal .card:has(.rm-filter) { overflow: visible !important; }
}

/* 卡片外壳：等级色光晕 + 实心渐变图标 + 白底细描边，等级色由 .rm-low/mid/high 提供 */
.rm-card {
    position: relative;
    isolation: isolate;
    height: 100%;
    background: linear-gradient(161deg, #ffffff 0%, #fcfdff 55%, #f8fafc 100%);
    border: 1px solid rgba(100, 116, 139, .16);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -16px rgba(15, 23, 42, .22), inset 0 1px 0 #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.rm-card:hover {
    transform: translateY(-4px);
    border-color: var(--rm-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 44px -18px rgba(15, 23, 42, .30), 0 0 0 3px var(--rm-tint);
}
.rm-low  { --rm-accent: #0f9d76; --rm-accent-2: #4ade80; --rm-tint: rgba(16, 185, 129, .10); --rm-soft: #e7f8f1; --rm-line: rgba(15, 157, 118, .32); }
.rm-mid  { --rm-accent: #e08c0b; --rm-accent-2: #fbbf24; --rm-tint: rgba(224, 140, 11, .10); --rm-soft: #fff4e0; --rm-line: rgba(224, 140, 11, .34); }
.rm-high { --rm-accent: #e11d48; --rm-accent-2: #fb7185; --rm-tint: rgba(225, 29, 72, .10); --rm-soft: #ffedf1; --rm-line: rgba(225, 29, 72, .34); }

/* 顶部渐变光条 + hover 扫光 */
.rm-rail {
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg, var(--rm-accent), var(--rm-accent-2) 46%, transparent 92%);
    overflow: hidden;
}
.rm-rail::after {
    content: ""; position: absolute; top: 0; left: -45%; width: 42%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    transform: skewX(-22deg); transition: left .7s ease;
}
.rm-card:hover .rm-rail::after { left: 115%; }
/* 右上角同心圆雷达装饰 */
.rm-halo {
    position: absolute; top: -72px; right: -72px; width: 184px; height: 184px; z-index: 0;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at center, var(--rm-tint) 0%, var(--rm-tint) 42%, transparent 70%);
}
/* 九宫格依次入场（作用在外层 col 上，避免覆盖卡片自身 hover 的 transform） */
.rm-col { animation: rmIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.rm-col:nth-child(1) { animation-delay: .02s; }
.rm-col:nth-child(2) { animation-delay: .06s; }
.rm-col:nth-child(3) { animation-delay: .10s; }
.rm-col:nth-child(4) { animation-delay: .14s; }
.rm-col:nth-child(5) { animation-delay: .18s; }
.rm-col:nth-child(6) { animation-delay: .22s; }
.rm-col:nth-child(7) { animation-delay: .26s; }
.rm-col:nth-child(8) { animation-delay: .30s; }
.rm-col:nth-child(9) { animation-delay: .34s; }
@keyframes rmIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@keyframes rmPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.65); }
}

/* 头部：等级色玻璃图标 + 名称 + 状态徽标 */
.rm-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: .55rem;
    padding: .7rem .8rem .5rem;
}
.rm-head::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 1px;
    background: linear-gradient(90deg, var(--rm-line), transparent 82%);
}
.rm-icon {
    flex: none; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #fff;
    background: linear-gradient(145deg, var(--rm-accent), var(--rm-accent-2));
    box-shadow: 0 4px 12px var(--rm-tint), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.rm-id { flex: 1; min-width: 0; }
.rm-name-wrap { display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
.rm-name-label { flex: none; font-size: 11px; color: #a3b0c0; }
.rm-name {
    font-size: 15px; font-weight: 800; color: #0f1f33;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-sub { display: block; font-size: 10px; color: #a9b6c6; letter-spacing: .05em; margin-top: 1px; }
.rm-badge {
    flex: none; display: inline-flex; align-items: center; gap: .3rem;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    color: var(--rm-accent); background: var(--rm-soft);
    border: 1px solid var(--rm-line); border-radius: 999px; padding: .2rem .55rem;
    box-shadow: 0 2px 8px -2px var(--rm-tint);
}
.rm-badge .fa { font-size: 6px; animation: rmPulse 2.2s ease-in-out infinite; }

/* 主体：左指标 / 右图表 */
.rm-body {
    position: relative; z-index: 1;
    display: flex; gap: .55rem; flex: 1;
    padding: 0 .75rem .75rem; min-height: 158px;
}
.rm-metrics { flex: 0 0 54%; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }

/* 风险值高亮面板 + 环形刻度 */
.rm-hero {
    position: relative; min-height: 56px; flex: none;
    display: flex; flex-direction: column; justify-content: center;
    padding: .35rem .65rem; border-radius: 12px; overflow: hidden;
    background: linear-gradient(100deg, var(--rm-soft) 0%, #ffffff 72%);
    border: 1px solid var(--rm-line);
}
.rm-hero::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--rm-accent), var(--rm-accent-2));
}
.rm-hero-txt { display: flex; align-items: baseline; gap: .4rem; }
.rm-hero-label { font-size: 12px; font-weight: 700; color: #475569; }
.rm-hero-en { font-size: 9px; letter-spacing: .12em; color: #b0bccb; }
.rm-hero-bottom { display: flex; align-items: baseline; gap: .22rem; margin-top: -1px; }
.rm-big {
    font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
    color: var(--rm-accent);
    font-variant-numeric: tabular-nums;
}
.rm-hero-unit { font-size: 11px; color: #94a3b8; }
.rm-gauge {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--rm-accent) 0 var(--rm-pct), rgba(148, 163, 184, .20) var(--rm-pct) 100%);
    filter: drop-shadow(0 2px 6px var(--rm-tint));
}
.rm-gauge::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.rm-gauge .fa { position: relative; font-size: 14px; color: var(--rm-accent); }

/* 6 项指标：2×3 小数据块 */
.rm-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.rm-cell {
    display: flex; flex-direction: column; justify-content: center; gap: .12rem;
    padding: .28rem .5rem; border-radius: 10px;
    background: #fff; border: 1px solid rgba(100, 116, 139, .12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rm-card:hover .rm-cell { border-color: var(--rm-line); box-shadow: 0 3px 10px -4px var(--rm-tint); }
.rm-cell-top { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.rm-dot { font-size: 6px; color: #94a3b8; }
.rm-dot-slate { color: #64748b; }
.rm-dot-blue { color: #3b82f6; }
.rm-dot-red { color: #e11d48; }
.rm-dot-orange { color: #ea580c; }
.rm-dot-green { color: #16a34a; }
.rm-dot-primary { color: var(--es-primary, #6d5dfc); }
.rm-label { font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; }
.rm-num {
    font-size: 18px; font-weight: 800; line-height: 1.05; color: #0f1f33;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rm-num em { font-size: 10px; font-weight: 400; font-style: normal; color: #94a3b8; margin-left: 2px; }
.rm-num-red { color: #e11d48; }
.rm-num-orange { color: #ea580c; }
.rm-num-green { color: #16a34a; }
.rm-num-primary { color: var(--es-primary, #6d5dfc); }

/* 风险点分级 + 固有风险值 */
.rm-levels {
    flex: none; display: flex; flex-direction: column; gap: .28rem;
    padding: .4rem .55rem; border-radius: 10px;
    background: #fff; border: 1px solid rgba(100, 116, 139, .12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rm-card:hover .rm-levels { border-color: var(--rm-line); box-shadow: 0 3px 10px -4px var(--rm-tint); }
.rm-levels-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.rm-levels-title { font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: .02em; }
.rm-intrinsic { font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; }
.rm-intrinsic b {
    font-size: 15px; font-weight: 800; color: var(--rm-accent); margin-left: .25rem;
    font-variant-numeric: tabular-nums;
}
.rm-level-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.rm-lvl {
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .3rem .1rem; border-radius: 8px;
    background: rgba(248, 250, 252, .7); border: 1px solid rgba(100, 116, 139, .10);
}
.rm-lvl i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rm-lvl span { font-size: 10px; color: #94a3b8; }
.rm-lvl b {
    font-size: 16px; font-weight: 800; color: #0f1f33; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rm-lvl-a i { background: #e11d48; }
.rm-lvl-b i { background: #f59e0b; }
.rm-lvl-c i { background: #3b82f6; }
.rm-lvl-d i { background: #16a34a; }

/* 图表面板 */
.rm-chart-wrap {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    padding: .45rem .5rem .3rem; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, var(--rm-tint) 0%, rgba(248, 250, 252, .55) 100%);
    border: 1px solid var(--rm-line);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rm-card:hover .rm-chart-wrap { border-color: var(--rm-accent); box-shadow: 0 3px 12px -6px var(--rm-tint); }
.rm-chart-title { display: flex; align-items: center; gap: .28rem; font-size: 11px; color: #7c8a9c; }
.rm-chart-title .fa { color: var(--rm-accent); font-size: 10px; }
.rm-chart-tag {
    margin-left: auto; font-size: 10px; padding: .05rem .32rem; border-radius: 5px;
    background: var(--rm-soft); color: var(--rm-accent); border: 1px solid var(--rm-tint);
}
.rm-chart { flex: 1; width: 100%; min-height: 100px; }
.rm-chart-foot { font-size: 10px; color: #a9b6c6; text-align: right; }
.rm-chart-foot .fa { font-size: 9px; margin-right: 2px; color: var(--rm-accent); }

/* 暗色主题 */
[data-mode="dark"] .rm-card {
    background: linear-gradient(161deg, #1b2531 0%, #161f2b 58%, #131a24 100%);
    border-color: #2a3441;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
[data-mode="dark"] .rm-card:hover { box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6), 0 0 0 3px var(--rm-tint); }
[data-mode="dark"] .rm-halo { background: radial-gradient(circle at center, var(--rm-tint) 0%, var(--rm-tint) 42%, transparent 70%); }
/* 全局 h4:not(...) 规则特异性更高，会把标题压成深色，这里显式拉回亮色 */
[data-mode="dark"] .rm-page-head h4 { color: #e2e8f0 !important; }
[data-mode="dark"] .rm-page-note { color: #8b97a6; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
[data-mode="dark"] .rm-title-sub { color: #71809a; }
[data-mode="dark"] .rm-filter {
    background: linear-gradient(161deg, #18212e 0%, #141c27 100%);
    border-color: rgba(255, 255, 255, .08); box-shadow: none;
}
[data-mode="dark"] .rm-filter-item label { color: #8b97a6; }
[data-mode="dark"] .rm-filter-input {
    background: rgba(255, 255, 255, .04); color: #e6edf5;
    border-color: rgba(255, 255, 255, .12);
}
[data-mode="dark"] .rm-filter-input::placeholder { color: #6b7a8d; }
[data-mode="dark"] .rm-filter-input:focus { border-color: #6d5dfc; }
[data-mode="dark"] .rm-filter-btn-ghost {
    color: #c7d0db; background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .14);
}
[data-mode="dark"] .rm-filter-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .09); }
[data-mode="dark"] .rm-filter-count { color: #8b97a6; }
[data-mode="dark"] .rm-filter-count b { color: #e6edf5; }
[data-mode="dark"] .rm-combo-toggle { color: #8b97a6; }
[data-mode="dark"] .rm-combo-panel {
    background: #1b2531; border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 18px 42px -14px rgba(0, 0, 0, .65);
}
[data-mode="dark"] .rm-combo-hint {
    background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); color: #8b97a6;
}
[data-mode="dark"] .rm-combo-option { color: #c7d0db; }
[data-mode="dark"] .rm-combo-option:hover,
[data-mode="dark"] .rm-combo-option.is-active { background: rgba(109, 93, 252, .22); color: #fff; }
[data-mode="dark"] .rm-combo-option.is-selected { color: #b9aeff; }
[data-mode="dark"] .rm-combo-empty { color: #8b97a6; }
[data-mode="dark"] .rm-name { color: #e6edf5; }
[data-mode="dark"] .rm-sub,
[data-mode="dark"] .rm-name-label { color: #7c8b9d; }
[data-mode="dark"] .rm-icon { background: linear-gradient(145deg, var(--rm-accent), var(--rm-accent-2)); color: #fff; }
[data-mode="dark"] .rm-head::after { background: linear-gradient(90deg, var(--rm-line), transparent 82%); }
[data-mode="dark"] .rm-hero { background: linear-gradient(100deg, var(--rm-soft) 0%, rgba(255, 255, 255, .03) 72%); border-color: var(--rm-line); }
[data-mode="dark"] .rm-hero-label { color: #c7d0db; }
[data-mode="dark"] .rm-hero-en, [data-mode="dark"] .rm-hero-unit { color: #7c8b9d; }
[data-mode="dark"] .rm-gauge::before { background: #18212e; }
[data-mode="dark"] .rm-cell { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
[data-mode="dark"] .rm-card:hover .rm-cell { border-color: var(--rm-line); box-shadow: 0 3px 10px -4px var(--rm-tint); }
[data-mode="dark"] .rm-label { color: #8b97a6; }
[data-mode="dark"] .rm-num { color: #e6edf5; }
[data-mode="dark"] .rm-num-red { color: #fb7185; }
[data-mode="dark"] .rm-num-orange { color: #fb923c; }
[data-mode="dark"] .rm-num-green { color: #4ade80; }
[data-mode="dark"] .rm-num-primary { color: var(--es-primary, #8b7dff); }
[data-mode="dark"] .rm-num em { color: #77869a; }
[data-mode="dark"] .rm-chart-wrap { background: linear-gradient(180deg, var(--rm-tint) 0%, rgba(255, 255, 255, .03) 100%); border-color: var(--rm-line); }
[data-mode="dark"] .rm-chart-title, [data-mode="dark"] .rm-chart-foot { color: #8b97a6; }
[data-mode="dark"] .rm-levels { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
[data-mode="dark"] .rm-card:hover .rm-levels { border-color: var(--rm-line); box-shadow: 0 3px 10px -4px var(--rm-tint); }
[data-mode="dark"] .rm-levels-title { color: #8b97a6; }
[data-mode="dark"] .rm-intrinsic { color: #8b97a6; }
[data-mode="dark"] .rm-intrinsic b { color: var(--rm-accent); }
[data-mode="dark"] .rm-lvl { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
[data-mode="dark"] .rm-lvl span { color: #77869a; }
[data-mode="dark"] .rm-lvl b { color: #e6edf5; }

@media (max-width: 520px) {
    .rm-metrics { flex-basis: 57%; }
    .rm-grid { gap: .25rem; }
    .rm-label { font-size: 10px; }
    .rm-num { font-size: 16px; }
    .rm-big { font-size: 25px; }
    .rm-gauge { width: 34px; height: 34px; }
    .rm-title-sub { display: none; }
    .rm-filter-item-org, .rm-filter-item-name { flex: 1 1 100%; }
    .rm-combo-panel { min-width: 0; max-width: 100%; }
    .rm-filter-count { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rm-col, .rm-badge .fa { animation: none !important; }
    .rm-card, .rm-cell, .rm-rail::after { transition: none !important; }
}

/* ============================================================
   风险监盘 · 点击卡片曲线图弹出的「三类隐患明细」弹窗
   自包含实现（不依赖 Bootstrap），浅/暗双主题。
   ============================================================ */
.rm-modal { position: fixed; inset: 0; z-index: 1080; display: none; }
.rm-modal.is-open { display: block; }
.rm-modal-backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: rmFade .2s ease both;
}
.rm-modal-dialog {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(880px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
    background: linear-gradient(160deg, #ffffff 0%, #fbfcfe 100%);
    border: 1px solid rgba(100, 116, 139, .18); border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45);
    animation: rmPop .22s cubic-bezier(.2, .8, .2, 1) both;
}
.rm-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid rgba(100, 116, 139, .12);
}
.rm-modal-title { font-size: 16px; font-weight: 800; color: #0f1f33; }
.rm-modal-sub { display: block; font-size: 11px; color: #7c8a9c; margin-top: 2px; }
.rm-modal-close {
    flex: none; width: 32px; height: 32px; border: none; border-radius: 9px;
    background: rgba(148, 163, 184, .12); color: #475569; cursor: pointer; font-size: 15px;
    transition: background .2s ease, color .2s ease;
}
.rm-modal-close:hover { background: rgba(225, 29, 72, .12); color: #e11d48; }
.rm-modal-body { padding: .8rem 1.1rem 1.1rem; overflow: auto; }
.rm-modal-chart { width: 100%; height: 420px; }
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmPop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
[data-mode="dark"] .rm-modal-dialog { background: linear-gradient(160deg, #1b2531 0%, #131a24 100%); border-color: #2a3441; }
[data-mode="dark"] .rm-modal-title { color: #e6edf5; }
[data-mode="dark"] .rm-modal-sub { color: #8b97a6; }
[data-mode="dark"] .rm-modal-head { border-color: rgba(255, 255, 255, .08); }
[data-mode="dark"] .rm-modal-close { background: rgba(255, 255, 255, .08); color: #c7d0db; }
[data-mode="dark"] .rm-modal-close:hover { background: rgba(225, 29, 72, .2); color: #fb7185; }