/*!
 * 前台通用 UI 组件（插件页共用）
 */
.sa-page-banner {
    position: relative;
    padding: 36px 0 28px;
    background:
        radial-gradient(800px 200px at 10% 0%, rgba(24, 144, 255, 0.12), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
    border-bottom: 1px solid var(--sa-line, #e8eaef);
}
.sa-page-banner h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    color: var(--sa-text-title, #0f172a);
    letter-spacing: -0.02em;
}
.sa-page-banner p {
    margin: 0;
    font-size: 14px;
    color: var(--sa-muted, #64748b);
    max-width: 640px;
    line-height: 1.6;
}
.sa-main {
    padding: 24px 0 48px;
}
.sa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}
@media (max-width: 960px) {
    .sa-grid-2 { grid-template-columns: 1fr; }
}
.sa-side-card,
.sa-content-card {
    background: var(--sa-card, #fff);
    border: 1px solid var(--sa-line, #e8eaef);
    border-radius: var(--sa-radius, 10px);
    box-shadow: var(--sa-shadow);
    padding: 18px 20px;
}
.sa-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--sa-brand-soft, #e6f7ff);
    color: var(--sa-brand-active, #096dd9);
    font-weight: 600;
}