.faq-page {
    /* background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(54, 193, 255, 0.08), transparent 22%),
        linear-gradient(180deg, #fbfcff 0%, #f5f8ff 100%); */
}

.faq-page__breadcrumb {
    margin-bottom: 1.5rem;
}

.faq-page__hero {
    margin-bottom: 1.75rem;
    padding: 1rem;
    border: 1px solid #e2eaff;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #f6f3ff 48%, #f5fbff 100%);
    /* box-shadow: 0 18px 44px rgba(30, 64, 175, 0.08); */
}

.faq-page__hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ede9fe, #eff6ff);
    color: #5b34d6;
    font-weight: 700;
    margin-bottom: 1rem;
}

.faq-page__title {
    margin: 0;
    font-size: 25px;
    line-height: 1.08;
    color: #14284a;
    font-weight: 600;
}

.faq-page__summary {
    margin: 1rem 0 0;
    max-width: 780px;
    color: #5f7190;
    font-size: 1.025rem;
    line-height: 1.7;
}

.faq-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
    gap: 1.5rem;
    align-items: start;
}

.faq-page__content-card,
.faq-page__sidebar-card {
    border: none;
    border-radius: 6px;
    background: transparent;
    /* box-shadow: 0 16px 40px rgba(17, 46, 94, 0.07); */
}

.faq-page__content-card {
    padding: 0;
}

.faq-page__sidebar {
    position: sticky;
    top: 108px;
}

.faq-page__sidebar-card {
    padding: 1.25rem;
    box-shadow: 0 16px 40px rgba(17, 46, 94, 0.07);
}

.faq-page__sidebar-head {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    color: #3657c8;
    font-weight: 700;
    margin-bottom: 1rem;
}

.faq-page__related-list {
    display: grid;
    gap: 0.75rem;
}

.faq-page__related-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 10px;
    border: 1px solid #e7ecff;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    color: #183158;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .faq-page__related-link:hover,
    .faq-page__related-link:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(124, 58, 237, 0.26);
        box-shadow: 0 14px 28px rgba(124, 58, 237, 0.08);
        color: #4f2cc7;
    }

    .faq-page__related-link i {
        flex: 0 0 auto;
        color: #7c3aed;
    }

.faq-page__content {
    color: #1d2f4d;
    font-size: 1.05rem;
    line-height: 1.86;
}

    .faq-page__content > :first-child {
        margin-top: 0;
    }

    .faq-page__content h2,
    .faq-page__content h3,
    .faq-page__content h4 {
        color: #16315d;
        font-weight: 800;
        line-height: 1.3;
        margin-top: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .faq-page__content h2 {
        font-size: 1.6rem;
    }

    .faq-page__content h3 {
        font-size: 1.3rem;
    }

    .faq-page__content p,
    .faq-page__content ul,
    .faq-page__content ol {
        margin-bottom: 1rem;
    }

    .faq-page__content ul,
    .faq-page__content ol {
        padding-left: 1.3rem;
    }

    .faq-page__content strong {
        color: #102445;
    }

    .faq-page__content a {
        color: #3458c5;
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: rgba(52, 88, 197, 0.28);
        text-underline-offset: 3px;
    }

    .faq-page__content hr {
        margin: 1.6rem 0;
        border: 0;
        border-top: 1px solid #e6ecfb;
    }

    .faq-page__content blockquote {
        margin: 1.4rem 0;
        padding: 1rem 1.15rem 1rem 1.25rem;
        border-left: 4px solid #7c3aed;
        border-radius: 0 16px 16px 0;
        background: linear-gradient(135deg, #f7f3ff, #f8fbff);
        color: #33415f;
    }

        .faq-page__content blockquote > :last-child {
            margin-bottom: 0;
        }

    .faq-page__content pre {
        margin: 1.4rem 0;
        padding: 1rem 1.1rem;
        border: 1px solid #e3e9fb;
        border-radius: 18px;
        background: #13213d;
        color: #eef4ff;
        overflow-x: auto;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .faq-page__content code {
        padding: 0.12rem 0.4rem;
        border-radius: 8px;
        background: #eef3ff;
        color: #2847a4;
        font-size: 0.92em;
    }

    .faq-page__content pre code {
        padding: 0;
        background: transparent;
        color: inherit;
    }

    .faq-page__content table {
        width: 100%;
        margin: 1.5rem 0;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #e3eafb;
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
        font-size: 0.98rem;
    }

    .faq-page__content thead th {
        background: linear-gradient(135deg, #eef4ff, #f7faff);
        color: #183158;
        font-weight: 700;
    }

    .faq-page__content th,
    .faq-page__content td {
        padding: 0.85rem 1rem;
        border-right: 1px solid #edf2ff;
        border-bottom: 1px solid #edf2ff;
        text-align: left;
        vertical-align: top;
    }

    .faq-page__content tr:last-child td {
        border-bottom: 0;
    }

    .faq-page__content th:last-child,
    .faq-page__content td:last-child {
        border-right: 0;
    }

    .faq-page__content tbody tr:nth-child(even) td {
        background: #fbfcff;
    }

    .faq-page__content ul li::marker,
    .faq-page__content ol li::marker {
        color: #5b34d6;
        font-weight: 700;
    }

    .faq-page__content ul {
        list-style: disc;
    }

        .faq-page__content ul ul,
        .faq-page__content ol ol,
        .faq-page__content ul ol,
        .faq-page__content ol ul {
            margin-top: 0.65rem;
        }

        .faq-page__content ul li,
        .faq-page__content ol li {
            margin-bottom: 0.55rem;
            padding-left: 0.2rem;
        }

            .faq-page__content ul li:has(input[type="checkbox"]),
            .faq-page__content ol li:has(input[type="checkbox"]) {
                list-style: none;
                padding-left: 0;
            }

    .faq-page__content li > input[type="checkbox"] {
        margin-right: 0.65rem;
        accent-color: #5b34d6;
    }

    .faq-page__content .callout,
    .faq-page__content .info-box,
    .faq-page__content .notice,
    .faq-page__content .alert,
    .faq-page__content .warning,
    .faq-page__content .tip {
        margin: 1.4rem 0;
        padding: 1rem 1.1rem;
        border: 1px solid #dae7ff;
        border-radius: 18px;
        background: linear-gradient(135deg, #eff6ff, #f8fbff);
        color: #244165;
    }

    .faq-page__content .warning {
        border-color: #ffd9b5;
        background: linear-gradient(135deg, #fff4e8, #fffaf4);
        color: #8a4d07;
    }

    .faq-page__content .tip {
        border-color: #cdeedc;
        background: linear-gradient(135deg, #edfdf4, #f7fff9);
        color: #17603f;
    }

    .faq-page__content img {
        max-width: 100%;
        height: auto;
        margin: 1.25rem 0;
        border-radius: 18px;
        display: block;
    }

    .faq-page__content figure {
        margin: 1.5rem 0;
    }

    .faq-page__content figcaption {
        margin-top: 0.65rem;
        color: #70809d;
        font-size: 0.93rem;
        text-align: center;
    }

.faq-page__empty {
    margin: 0;
    color: #6b7a96;
}

.faq-page__empty--sidebar {
    padding: 0.75rem 0.25rem 0.25rem;
}

@media (max-width: 991.98px) {
    .faq-page__hero,
    .faq-page__content-card {
        padding: 1.5rem;
    }

    .faq-page__grid {
        grid-template-columns: 1fr;
    }

    .faq-page__sidebar {
        position: static;
    }
}