:root {
    --lj-bg: #f4f9ff;
    --lj-surface: #ffffff;
    --lj-primary: #2f7bf0;
    --lj-primary-deep: #1f5fd1;
    --lj-primary-soft: #6ba7f7;
    --lj-primary-pale: #a9cdfb;
    --lj-primary-ghost: #eff6ff;
    --lj-primary-rgb: 47, 123, 240;
    --lj-primary-gradient: linear-gradient(130deg, #2f7bf0 0%, #6ba7f7 48%, #a9cdfb 100%);
    --lj-text: #1a355d;
    --lj-text-soft: #5f7392;
    --lj-line: #dbe7f7;
    --lj-shadow-soft: 0 12px 28px rgba(25, 58, 118, 0.12);
    --lj-radius-sm: 8px;
    --lj-radius-md: 12px;
    --lj-radius-pill: 999px;
}

.lj-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--lj-radius-pill);
    padding: 9px 16px;
    font-size: 13px;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

.lj-pill-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
}

.lj-title-line {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0 18px;
}

.lj-title-line::before,
.lj-title-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 240px;
    height: 1px;
    background: #d7e5f7;
}

.lj-title-line::before { right: 100%; }
.lj-title-line::after { left: 100%; }

@media (max-width: 1024px) {
    .lj-title-line::before,
    .lj-title-line::after {
        display: none;
    }
}