.stanloop-ffaq,
.stanloop-ffaq-manage {
    --ffaq-green: #3cae19;
    --ffaq-green-dark: #237e0e;
    --ffaq-green-soft: #eef9e9;
    --ffaq-orange: #ff7a1a;
    --ffaq-orange-soft: #fff4e8;
    --ffaq-ink: #0f172a;
    --ffaq-muted: #526078;
    --ffaq-border: #dce6d7;
    margin: 0;
    color: var(--ffaq-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.stanloop-ffaq__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.stanloop-ffaq__header h2 {
    margin: 0 0 5px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.stanloop-ffaq__header p {
    margin: 0;
    color: var(--ffaq-muted);
    font-size: 15px;
}

.stanloop-ffaq__create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 17px;
    border: 1px solid #2d9413;
    border-radius: 11px;
    background: linear-gradient(135deg, #49bd20, #319d12);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(60, 174, 25, 0.18);
}

.stanloop-ffaq__create:hover,
.stanloop-ffaq__create:focus {
    background: var(--ffaq-green-dark);
    color: #fff !important;
}

.stanloop-ffaq__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--ffaq-border);
    border-radius: 15px;
    background: linear-gradient(135deg, #fbfff8, #fffaf3);
}

.stanloop-ffaq__search input,
.stanloop-ffaq__filter select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #ced9c8;
    border-radius: 11px;
    background: #fff;
    color: var(--ffaq-ink);
    font: inherit;
}

.stanloop-ffaq__search input:focus,
.stanloop-ffaq__filter select:focus {
    outline: 3px solid rgba(60, 174, 25, 0.15);
    border-color: var(--ffaq-green);
}

.stanloop-ffaq__list {
    display: grid;
    gap: 14px;
}

.stanloop-ffaq-card {
    border: 1px solid #dfe6dc;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
}

.stanloop-ffaq-card[hidden] {
    display: none !important;
}

.stanloop-ffaq-card.is-open {
    border-color: #b8d9ad;
    box-shadow: 0 12px 28px rgba(60, 174, 25, 0.08);
}

.stanloop-ffaq-card__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    background: #fff;
    color: var(--ffaq-ink);
    text-align: left;
    cursor: pointer;
}

.stanloop-ffaq-card__question:hover,
.stanloop-ffaq-card__question:focus {
    background: linear-gradient(90deg, #fbfff8, #fffaf3);
}

.stanloop-ffaq-card__question-copy {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex-wrap: wrap;
}

.stanloop-ffaq-card__topic {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid #cae6c1;
    border-radius: 999px;
    background: var(--ffaq-green-soft);
    color: var(--ffaq-green-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.stanloop-ffaq-card__title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.stanloop-ffaq-card__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    background: var(--ffaq-green-soft);
    color: var(--ffaq-green-dark);
    font-size: 22px;
    transition: transform 0.2s ease;
}

.stanloop-ffaq-card__question[aria-expanded="true"] .stanloop-ffaq-card__chevron {
    transform: rotate(180deg);
}

.stanloop-ffaq-card__answer {
    padding: 0 22px 22px;
    border-top: 1px solid #edf2ea;
    color: #253047;
    font-size: 16px;
    line-height: 1.72;
}

.stanloop-ffaq-card__answer[hidden] {
    display: none !important;
}

.stanloop-ffaq-answer-blocks {
    display: grid;
    gap: 16px;
    padding-top: 20px;
}

.stanloop-ffaq-answer-block {
    min-width: 0;
}

.stanloop-ffaq-answer-block p,
.stanloop-ffaq-answer-block ul,
.stanloop-ffaq-answer-block ol,
.stanloop-ffaq-answer-block figure,
.stanloop-ffaq-answer-block table,
.stanloop-ffaq-answer-block hr {
    margin-top: 0;
    margin-bottom: 0;
}

.stanloop-ffaq-answer-block h2,
.stanloop-ffaq-answer-block h3,
.stanloop-ffaq-answer-block h4 {
    margin: 3px 0 0;
    color: var(--ffaq-ink);
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.stanloop-ffaq-answer-block h2 { font-size: 25px; }
.stanloop-ffaq-answer-block h3 { font-size: 21px; }
.stanloop-ffaq-answer-block h4 { font-size: 18px; }

.stanloop-ffaq-answer-block ul,
.stanloop-ffaq-answer-block ol {
    padding-left: 24px;
}

.stanloop-ffaq-answer-block li {
    margin: 7px 0;
    padding-left: 3px;
}

.stanloop-ffaq-answer-block--steps ol {
    counter-reset: ffaq-step;
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 10px;
}

.stanloop-ffaq-answer-block--steps li {
    counter-increment: ffaq-step;
    position: relative;
    margin: 0;
    padding: 12px 14px 12px 48px;
    border: 1px solid #dce7d8;
    border-radius: 12px;
    background: #fbfef9;
}

.stanloop-ffaq-answer-block--steps li::before {
    content: counter(ffaq-step);
    position: absolute;
    left: 12px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: var(--ffaq-green);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.stanloop-ffaq-highlight {
    padding: 16px 17px;
    border: 1px solid #f2d3a9;
    border-left: 5px solid var(--ffaq-orange);
    border-radius: 13px;
    background: var(--ffaq-orange-soft);
}

.stanloop-ffaq-highlight strong {
    display: block;
    margin-bottom: 5px;
    color: #9a4308;
}

.stanloop-ffaq-highlight p {
    margin: 0;
}

.stanloop-ffaq-media {
    overflow: hidden;
    border: 1px solid #dce5d8;
    border-radius: 15px;
    background: #f8faf7;
}

.stanloop-ffaq-media img,
.stanloop-ffaq-media iframe,
.stanloop-ffaq-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.stanloop-ffaq-media--video iframe {
    aspect-ratio: 16 / 9;
}

.stanloop-ffaq-media figcaption {
    padding: 10px 13px;
    color: var(--ffaq-muted);
    font-size: 13px;
}

.stanloop-ffaq-link-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stanloop-ffaq-link-block p {
    color: var(--ffaq-muted);
    font-size: 14px;
}

.stanloop-ffaq-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 10px;
    background: var(--ffaq-ink);
    color: #fff !important;
    font-weight: 800;
    text-decoration: none !important;
}

.stanloop-ffaq-text-link {
    color: var(--ffaq-green-dark) !important;
    font-weight: 800;
    text-underline-offset: 3px;
}

.stanloop-ffaq-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #dce5d8;
    border-radius: 13px;
}

.stanloop-ffaq-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: #fff;
}

.stanloop-ffaq-table th,
.stanloop-ffaq-table td {
    padding: 11px 13px;
    border-bottom: 1px solid #e7eee4;
    border-right: 1px solid #e7eee4;
    text-align: left;
    vertical-align: top;
}

.stanloop-ffaq-table th {
    background: var(--ffaq-green-soft);
    color: var(--ffaq-green-dark);
    font-size: 13px;
    font-weight: 850;
}

.stanloop-ffaq-tabs {
    border: 1px solid #dce5d8;
    border-radius: 14px;
    overflow: hidden;
}

.stanloop-ffaq-tabs__nav {
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    background: #f7fbf4;
    border-bottom: 1px solid #dce5d8;
}

.stanloop-ffaq-tabs__nav button {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ffaq-muted);
    font-weight: 800;
    cursor: pointer;
}

.stanloop-ffaq-tabs__nav button.is-active {
    border-color: #bcdcb1;
    background: #fff;
    color: var(--ffaq-green-dark);
}

.stanloop-ffaq-tabs__panel {
    padding: 15px;
}

.stanloop-ffaq-answer-block hr {
    border: 0;
    border-top: 1px solid #dfe8dc;
}

.stanloop-ffaq-card__owner-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e7eee4;
}

.stanloop-ffaq-card__owner-actions a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #f0bb8d;
    border-radius: 9px;
    background: var(--ffaq-orange-soft);
    color: #a64608 !important;
    font-weight: 800;
    text-decoration: none !important;
}

.stanloop-ffaq__empty {
    padding: 50px 24px;
    border: 1px dashed #bfd7b6;
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fff3, #fff8ef);
    text-align: center;
}

.stanloop-ffaq__empty > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: var(--ffaq-green-soft);
    color: var(--ffaq-green-dark);
    font-size: 24px;
    font-weight: 900;
}

.stanloop-ffaq__empty h3 {
    margin: 0 0 7px;
    font-size: 23px;
}

.stanloop-ffaq__empty p {
    margin: 0 0 17px;
    color: var(--ffaq-muted);
}

.stanloop-ffaq__no-results {
    padding: 24px;
    color: var(--ffaq-muted);
    text-align: center;
}

.stanloop-notice {
    margin: 12px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.stanloop-ffaq-profile-tab {
    width: 100%;
}

@media (max-width: 760px) {
    .stanloop-ffaq__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stanloop-ffaq__tools {
        grid-template-columns: 1fr;
    }

    .stanloop-ffaq__create {
        width: 100%;
    }

    .stanloop-ffaq-card__question {
        padding: 16px;
    }

    .stanloop-ffaq-card__answer {
        padding: 0 16px 18px;
        font-size: 15px;
    }

    .stanloop-ffaq-card__question-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

.stanloop-ffaq__drafts {
    display: grid;
    grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
    padding: 15px;
    border: 1px solid #f1c99f;
    border-radius: 14px;
    background: #fff8ef;
}

.stanloop-ffaq__drafts h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.stanloop-ffaq__drafts p {
    margin: 0;
    color: var(--ffaq-muted);
    font-size: 13px;
}

.stanloop-ffaq__draft-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stanloop-ffaq__draft-list a {
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 9px 11px;
    border: 1px solid #efc496;
    border-radius: 10px;
    background: #fff;
    color: var(--ffaq-ink) !important;
    text-decoration: none !important;
}

.stanloop-ffaq__draft-list strong {
    font-size: 13px;
}

.stanloop-ffaq__draft-list span {
    color: #a64608;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 760px) {
    .stanloop-ffaq__drafts {
        grid-template-columns: 1fr;
    }

    .stanloop-ffaq__draft-list a {
        width: 100%;
    }
}


/* v0.2.23: compact video frame and creator-selectable bullet icons. */
.stanloop-ffaq-media--video {
    width: min(100%, 720px);
    margin-right: auto !important;
    margin-left: auto !important;
}

.stanloop-ffaq-media--video iframe,
.stanloop-ffaq-media--video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.stanloop-ffaq-bullet-list {
    --ffaq-bullet: "•";
    display: grid;
    gap: 9px;
    padding-left: 0 !important;
    list-style: none !important;
}

.stanloop-ffaq-bullet-list > li {
    position: relative;
    margin: 0;
    padding-left: 31px;
}

.stanloop-ffaq-bullet-list > li::before {
    content: var(--ffaq-bullet);
    position: absolute;
    top: 0.04em;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    min-height: 1.45em;
    color: var(--ffaq-green-dark);
    font-size: 0.98em;
    font-weight: 900;
    line-height: 1.35;
}

.stanloop-ffaq-bullet-list--disc { --ffaq-bullet: "•"; }
.stanloop-ffaq-bullet-list--circle { --ffaq-bullet: "○"; }
.stanloop-ffaq-bullet-list--square { --ffaq-bullet: "■"; }
.stanloop-ffaq-bullet-list--diamond { --ffaq-bullet: "◆"; }
.stanloop-ffaq-bullet-list--check { --ffaq-bullet: "✓"; }
.stanloop-ffaq-bullet-list--check-circle { --ffaq-bullet: "✔"; }
.stanloop-ffaq-bullet-list--arrow { --ffaq-bullet: "→"; }
.stanloop-ffaq-bullet-list--chevron { --ffaq-bullet: "›"; }
.stanloop-ffaq-bullet-list--star { --ffaq-bullet: "★"; }
.stanloop-ffaq-bullet-list--sparkle { --ffaq-bullet: "✦"; }
.stanloop-ffaq-bullet-list--heart { --ffaq-bullet: "♥"; }
.stanloop-ffaq-bullet-list--bolt { --ffaq-bullet: "⚡"; }
.stanloop-ffaq-bullet-list--flame { --ffaq-bullet: "🔥"; }
.stanloop-ffaq-bullet-list--leaf { --ffaq-bullet: "🍃"; }
.stanloop-ffaq-bullet-list--seedling { --ffaq-bullet: "🌱"; }
.stanloop-ffaq-bullet-list--lightbulb { --ffaq-bullet: "💡"; }
.stanloop-ffaq-bullet-list--book { --ffaq-bullet: "📘"; }
.stanloop-ffaq-bullet-list--play { --ffaq-bullet: "▶"; }
.stanloop-ffaq-bullet-list--pin { --ffaq-bullet: "📌"; }
.stanloop-ffaq-bullet-list--tool { --ffaq-bullet: "🛠"; }
.stanloop-ffaq-bullet-list--camera { --ffaq-bullet: "📷"; }
.stanloop-ffaq-bullet-list--dumbbell { --ffaq-bullet: "🏋"; }
.stanloop-ffaq-bullet-list--money { --ffaq-bullet: "💰"; }
.stanloop-ffaq-bullet-list--globe { --ffaq-bullet: "🌐"; }
.stanloop-ffaq-bullet-list--clock { --ffaq-bullet: "⏱"; }
.stanloop-ffaq-bullet-list--warning { --ffaq-bullet: "⚠"; }
.stanloop-ffaq-bullet-list--plus { --ffaq-bullet: "+"; }
.stanloop-ffaq-bullet-list--flower { --ffaq-bullet: "✿"; }

@media (max-width: 760px) {
    .stanloop-ffaq-media--video {
        width: 100%;
    }
}