/*!
 * 前台 Layui 主题覆盖
 * 将 Layui 默认青绿统一为品牌主色 #1890ff
 * 须在 layui.css 之后、业务 CSS 之前加载
 */
/* ---- Button ---- */
.layui-btn {
    background-color: var(--sa-brand);
    border-radius: var(--sa-radius-sm);
}
.layui-btn:hover {
    opacity: 0.9;
    color: #fff;
}
.layui-btn-primary {
    border-color: var(--sa-border);
    background: transparent;
    color: var(--sa-muted);
}
.layui-btn-primary:hover {
    border-color: var(--sa-brand);
    color: var(--sa-brand);
}
.layui-btn-normal {
    background-color: var(--sa-brand);
}
.layui-btn-warm {
    background-color: var(--sa-warning);
}
.layui-btn-danger {
    background-color: var(--sa-orange);
}
.layui-btn-checked {
    background-color: var(--sa-brand);
}
.layui-btn-disabled,
.layui-btn-disabled:active,
.layui-btn-disabled:hover {
    border-color: #eee !important;
    background-color: #fbfbfb !important;
    color: #d2d2d2 !important;
    cursor: not-allowed !important;
    opacity: 1;
}

/* ---- Form ---- */
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
    border-color: var(--sa-brand) !important;
    box-shadow: 0 0 0 2px rgba(var(--sa-brand-rgb), 0.12);
}
.layui-form-checked[lay-skin="primary"] i,
.layui-form-checked span,
.layui-form-checked:hover span {
    border-color: var(--sa-brand) !important;
}
.layui-form-checked[lay-skin="primary"] i {
    background-color: var(--sa-brand);
    border-color: var(--sa-brand) !important;
    color: #fff;
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: var(--sa-brand);
}
.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate {
    border-color: var(--sa-brand);
    background-color: var(--sa-brand);
}
.layui-form-onswitch {
    border-color: var(--sa-brand);
    background-color: var(--sa-brand);
}
.layui-form-radioed > i,
.layui-form-radio > i:hover {
    color: var(--sa-brand);
}
.layui-form-select dl dd.layui-this {
    background-color: var(--sa-brand);
    color: #fff;
}
.layui-form-checked i,
.layui-form-checked:hover i {
    color: var(--sa-brand);
}
.layui-form-danger,
.layui-form-danger:focus {
    border-color: var(--sa-danger) !important;
}

/* ---- Tab / Nav ---- */
.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--sa-brand);
}
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: var(--sa-brand);
}
.layui-tab-title .layui-this {
    color: var(--sa-brand);
}
.layui-nav .layui-this:after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed:after {
    background-color: var(--sa-brand);
}
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover {
    background-color: var(--sa-brand);
}
.layui-breadcrumb a:hover {
    color: var(--sa-brand) !important;
}

/* ---- Badge / Progress / Quote ---- */
.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
    background-color: var(--sa-brand);
}
.layui-bg-blue {
    background-color: var(--sa-brand) !important;
}
.layui-bg-green {
    background-color: var(--sa-success) !important;
}
.layui-font-blue {
    color: var(--sa-brand) !important;
}
.layui-progress-bar {
    background-color: var(--sa-brand);
}
.layui-elem-quote {
    border-left-color: var(--sa-brand);
}
.layui-timeline-axis {
    color: var(--sa-brand);
}
.layui-slider-input-btn i:hover,
.layui-slider-wrap-btn,
.layui-slider-bar {
    background-color: var(--sa-brand) !important;
    border-color: var(--sa-brand) !important;
}

/* ---- Page / Table / Link ---- */
.layui-laypage a:hover {
    color: var(--sa-brand);
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--sa-brand);
}
.layui-laypage input:focus,
.layui-laypage select:focus {
    border-color: var(--sa-brand) !important;
}
.layui-table-click,
.layui-table-hover,
.layui-table[lay-even] tbody tr:nth-child(even) {
    background-color: #fafcff;
}
.layui-table-view .layui-form-checked[lay-skin="primary"] i {
    border-color: var(--sa-brand) !important;
    background-color: var(--sa-brand);
}
.layui-table-tool .layui-inline[lay-event]:hover {
    border-color: var(--sa-brand);
}
.layui-text a:not(.layui-btn) {
    color: var(--sa-brand);
}
.layui-link {
    color: var(--sa-brand) !important;
}

/* ---- Layer / Transfer ---- */
.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--sa-brand);
    background-color: var(--sa-brand);
    color: #fff;
}
.layui-transfer-active .layui-btn {
    background-color: var(--sa-brand);
    border-color: var(--sa-brand);
}

/* ---- Card 微调 ---- */
.layui-card {
    border-radius: var(--sa-radius-sm);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid var(--sa-line-soft);
}
.layui-card-header {
    color: var(--sa-text);
    border-bottom-color: var(--sa-line-soft);
}

/* ---- 通用工具类 ---- */
.text-primary,
.sa-text-brand { color: var(--sa-brand) !important; }
.bg-primary,
.sa-bg-brand { background-color: var(--sa-brand) !important; color: #fff !important; }
.sa-bg-soft { background-color: var(--sa-brand-soft) !important; }
.border-primary { border-color: var(--sa-brand) !important; }

/* ========== 全站页头图（浅色大气 · 对齐首页 hero） ========== */
.sa-page-banner,
.sa-page-banner--hero {
    position: relative;
    margin: 0;
    /* 导航 absolute 叠在头图上时，用足够顶距避免文案/画面被遮挡 */
    padding: calc(var(--sa-header, 112px) + 48px) 0 48px;
    min-height: max(300px, calc(var(--sa-header, 112px) + 200px));
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--sa-text-title);
    width: 100%;
    background: #f8fafc;
    border-bottom: 1px solid var(--sa-line);
    z-index: 1;
}
.sa-page-banner.has-image {
    background-position: center top;
}
.sa-page-banner--cms,
.sa-page-banner--ask,
.sa-page-banner--docs,
.sa-page-banner--product,
.sa-page-banner--release,
.sa-page-banner--video,
.sa-page-banner--cases,
.sa-page-banner--supply,
.sa-page-banner--apigate,
.sa-page-banner--sitepage,
.sa-page-banner--skgauth,
.sa-page-banner--auth,
.sa-page-banner--default {
    min-height: 260px;
}
.sa-page-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(900px 420px at 10% -12%, rgba(var(--sa-brand-rgb), .14), transparent 60%),
        radial-gradient(720px 380px at 94% 0%, rgba(99, 102, 241, .08), transparent 56%),
        linear-gradient(180deg, rgba(var(--sa-brand-rgb), .05) 0%, #f8fafc 46%, var(--sa-bg) 100%);
    pointer-events: none;
}
.sa-page-banner.has-image .sa-page-banner-bg {
    background-image: var(--sa-banner-image);
    background-color: #0b1f3a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.02);
}
.sa-page-banner-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .28;
    background-image:
        linear-gradient(rgba(var(--sa-brand-rgb), .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sa-brand-rgb), .07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 75%);
    pointer-events: none;
}
.sa-page-banner.has-image .sa-page-banner-grid { opacity: .1; }
.sa-page-banner-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    pointer-events: none;
}
.sa-page-banner.has-image .sa-page-banner-mask {
    /* 顶部略深保导航可读，整体更浅让头图更明显 */
    background: linear-gradient(
        180deg,
        rgba(7, 21, 38, .40) 0%,
        rgba(7, 21, 38, .18) 38%,
        rgba(7, 21, 38, .24) 100%
    );
}
.sa-page-banner-inner {
    position: relative;
    z-index: 2;
    width: min(var(--sa-wrap, 1160px), calc(100% - 32px));
    margin: 0 auto;
    padding-bottom: 4px;
}
/* 非授权插件：与 CMS 一致的居中标题排版 */
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--sa-header, 112px) + 72px) 24px 56px;
    min-height: max(320px, calc(var(--sa-header, 112px) + 240px));
}
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-inner {
    width: min(720px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
}
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-title {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: .02em;
}
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--sa-brand, #1890ff);
}
.sa-page-banner--hero.has-image:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-title::after {
    background: rgba(255, 255, 255, .85);
}
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-sub {
    max-width: 520px;
}
.sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-actions {
    margin-top: 22px;
}
.sa-page-banner--hero.has-image:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) .sa-page-banner-btn {
    background: #fff;
    color: var(--sa-brand, #1890ff);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}
.sa-page-banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    margin-bottom: 14px;
    border-radius: var(--sa-radius-pill, 999px);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(var(--sa-brand-rgb), .18);
    color: var(--sa-brand);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.sa-page-banner-kicker .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sa-brand);
    box-shadow: 0 0 0 4px rgba(var(--sa-brand-rgb), .18);
}
.sa-page-banner-title {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.22;
    color: var(--sa-text-title);
    text-shadow: none;
}
.sa-page-banner-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--sa-brand), #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sa-page-banner-sub {
    margin: 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--sa-muted);
}
.sa-page-banner-notice {
    margin: 16px 0 0;
    max-width: 640px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(var(--sa-brand-rgb), .16);
    color: var(--sa-brand-dark);
    font-size: 13px;
    line-height: 1.65;
    backdrop-filter: blur(6px);
}
.sa-page-banner-actions { margin-top: 20px; }
.sa-page-banner-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    border-radius: var(--sa-radius-sm, 6px);
    background: var(--sa-brand);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(var(--sa-brand-rgb), .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sa-page-banner-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    color: #fff;
}
/* 自定义头图时恢复浅色字 */
.sa-page-banner.has-image,
.sa-page-banner.has-image .sa-page-banner-title,
.sa-page-banner.has-image .sa-page-banner-sub { color: #fff; }
.sa-page-banner.has-image .sa-page-banner-title { text-shadow: 0 2px 14px rgba(0,0,0,.28); }
.sa-page-banner.has-image .sa-page-banner-title em {
    background: linear-gradient(90deg, #fff, #bae7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sa-page-banner.has-image .sa-page-banner-kicker {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}
.sa-page-banner.has-image .sa-page-banner-kicker .dot {
    background: #69c0ff;
    box-shadow: 0 0 0 4px rgba(105, 192, 255, .25);
}
.sa-page-banner.has-image .sa-page-banner-notice {
    background: rgba(255,255,255,.9);
    color: var(--sa-brand-dark);
}
.sa-page-banner.has-image .sa-page-banner-btn {
    background: #fff;
    color: var(--sa-brand);
}
@media (max-width: 900px) {
    .sa-page-banner,
    .sa-page-banner--hero,
    .sa-page-banner--cms,
    .sa-page-banner--ask,
    .sa-page-banner--docs,
    .sa-page-banner--product,
    .sa-page-banner--release,
    .sa-page-banner--video,
    .sa-page-banner--cases,
    .sa-page-banner--supply,
    .sa-page-banner--apigate,
    .sa-page-banner--sitepage,
    .sa-page-banner--skgauth,
    .sa-page-banner--auth,
    .sa-page-banner--default {
        padding: calc(var(--sa-header, 56px) + 22px) 0 28px;
        min-height: 190px;
    }
    .sa-page-banner--hero:not(.sa-page-banner--skgauth):not(.sa-page-banner--auth) {
        padding: calc(var(--sa-header, 56px) + 36px) 16px 32px;
        min-height: 220px;
    }
    .sa-page-banner-title { font-size: 24px; }
    .sa-page-banner-sub { font-size: 13px; }
}

/* 统一内容区壳层 */
.sa-page-main {
    padding: 28px 0 72px;
}
.sa-page-card {
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow);
}
/* 有 Banner 时隐藏各插件旧版标题 Hero（分类条/列表保留） */
body.has-page-banner .cms-hero,
body.has-page-banner .dl-hero,
body.has-page-banner .sa-doc-hero-legacy,
body.has-page-banner .sa-doc-hero,
body.has-page-banner .pc-install-header h2 {
    /* 文档/CMS/下载旧 hero 整块隐藏 */
}
body.has-page-banner .cms-hero,
body.has-page-banner .dl-hero,
body.has-page-banner .sa-doc-hero-legacy,
body.has-page-banner .sa-doc-hero {
    display: none !important;
}
body.has-page-banner .pc-install-header { padding-top: 8px; margin-bottom: 8px; }
body.has-page-banner .pc-install-header h2 { display: none !important; }
/* 视频：保留分类按钮，仅隐藏大标题与右侧插图区的重复信息 */
body.has-page-banner .vd-hero-text h1,
body.has-page-banner .vd-hero-text > p:first-of-type,
body.has-page-banner .vd-hero-image { display: none !important; }
body.has-page-banner .sa-doc-cat-bar { padding: 16px 0 8px; }
body.has-page-banner .sa-doc-cat-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- 现代化表单控件（对齐 Layui 表单设计器气质） ---- */
.layui-input,
.layui-textarea,
.layui-select {
    border-radius: var(--sa-radius-sm, 6px) !important;
    border-color: var(--sa-line) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.layui-input:hover,
.layui-textarea:hover {
    border-color: #c0c4cc !important;
}
.layui-form-label {
    color: var(--sa-text-secondary);
}
.layui-form-checked[lay-skin=primary] i,
.layui-form-checked[lay-skin=primary]:hover i {
    border-color: var(--sa-brand) !important;
    background-color: var(--sa-brand);
}
.layui-form-radioed > i,
.layui-form-radio > i:hover {
    color: var(--sa-brand);
}
.layui-form-onswitch {
    border-color: var(--sa-brand);
    background-color: var(--sa-brand);
}
.layui-card {
    border-radius: var(--sa-radius, 10px);
    box-shadow: var(--sa-shadow);
    border: 1px solid var(--sa-line);
}
.layui-table {
    border-radius: var(--sa-radius-sm, 6px);
    overflow: hidden;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--sa-brand);
}
.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--sa-brand);
}
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: var(--sa-brand);
}