/* /Pages/CompetitorResearch.cshtml.rz.scp.css */
/* Domain comparison page (/competitor-research).
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

/* Domain comparison: show only the fields the chosen Ahrefs tool uses. */
.competitor-form:has(option[value="rating"]:checked, option[value="compare"]:checked) .competitor-field[data-for="top"][b-f3ol9dbmf5],
[b-f3ol9dbmf5] .competitor-form:has(option[value="rating"]:checked, option[value="compare"]:checked) .competitor-field[data-for="top"],
.competitor-form:has(option[value="top"]:checked) .competitor-field[data-for="domains"][b-f3ol9dbmf5],
[b-f3ol9dbmf5] .competitor-form:has(option[value="top"]:checked) .competitor-field[data-for="domains"],
.competitor-form:has(option[value="ips"]:checked, option[value="ranges"]:checked) .competitor-field[b-f3ol9dbmf5],
[b-f3ol9dbmf5] .competitor-form:has(option[value="ips"]:checked, option[value="ranges"]:checked) .competitor-field {
    display: none;
}
/* /Pages/FAQ.cshtml.rz.scp.css */
/* FAQ page styles. ASP.NET CSS isolation scopes every selector here to elements written in FAQ.cshtml and
   bundles the result into SeoPlatform.Web.styles.css, which _Layout.cshtml links.
   Colors come from the site tokens in site.css, so the dark theme follows automatically.
   Answers are injected with Html.Raw and are not scoped, so anything inside .faq-body needs ::deep. */

/* Hero */
.faq-hero[b-55ws2kvi9e] {
    max-width: 760px;
    padding: 48px 0 44px;
}

    .faq-hero h1[b-55ws2kvi9e] {
        max-width: 20ch;
        margin: 18px 0 16px;
        font-size: clamp(36px, 5vw, 52px);
        line-height: 1.1;
        letter-spacing: -2px;
    }

    .faq-hero p[b-55ws2kvi9e] {
        max-width: 54ch;
        margin: 0;
        font-size: 18px;
        line-height: 1.65;
    }

/* Topic rail beside the questions on wide screens, wrapping chips on narrow ones */
.faq-layout[b-55ws2kvi9e] {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.faq-rail[b-55ws2kvi9e] {
    position: sticky;
    top: 24px;
}

    .faq-rail ul[b-55ws2kvi9e] {
        margin: 0;
        padding: 0;
        list-style: none;
        border-left: 1px solid var(--color-border);
    }

    .faq-rail a[b-55ws2kvi9e] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-left: -1px;
        padding: 8px 14px;
        border-left: 2px solid transparent;
        color: var(--color-text-secondary);
        font-size: 15px;
        font-weight: 550;
        text-decoration: none;
    }

        .faq-rail a:hover[b-55ws2kvi9e] {
            border-left-color: var(--color-primary);
            color: var(--color-primary);
        }

    .faq-rail span[b-55ws2kvi9e] {
        color: var(--color-text-muted);
        font-variant-numeric: tabular-nums;
    }

/* Topic groups: one bordered list per topic, rows split by hairlines */
.faq-main[b-55ws2kvi9e] {
    max-width: 780px;
}

.faq-group[b-55ws2kvi9e] {
    scroll-margin-top: 24px;
}

    .faq-group + .faq-group[b-55ws2kvi9e] {
        margin-top: 56px;
    }

    .faq-group header[b-55ws2kvi9e] {
        margin-bottom: 18px;
    }

    .faq-group h2[b-55ws2kvi9e] {
        margin: 0 0 6px;
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -.6px;
    }

    .faq-group header p[b-55ws2kvi9e] {
        margin: 0;
        color: var(--color-text-muted);
    }

.faq-list[b-55ws2kvi9e] {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

/* Explicit resets: site.css styles bare details, summary and details p elements */
.faq-item[b-55ws2kvi9e] {
    padding: 0;
    border-bottom: 0;
}

    .faq-item + .faq-item[b-55ws2kvi9e] {
        border-top: 1px solid var(--color-border);
    }

    /* The bar marks the question that is open */
    .faq-item[open][b-55ws2kvi9e] {
        box-shadow: inset 3px 0 0 var(--color-primary);
    }

.faq-q[b-55ws2kvi9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
}

    .faq-q[b-55ws2kvi9e]::-webkit-details-marker {
        display: none;
    }

    .faq-q:hover[b-55ws2kvi9e] {
        background: var(--color-surface-secondary);
    }

    .faq-q:focus-visible[b-55ws2kvi9e] {
        outline-offset: -3px;
    }

    .faq-q h3[b-55ws2kvi9e] {
        margin: 0;
        scroll-margin-top: 24px;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -.15px;
    }

    .faq-q[b-55ws2kvi9e]::after {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        margin-right: 4px;
        border-right: 2px solid var(--color-text-muted);
        border-bottom: 2px solid var(--color-text-muted);
        transform: translateY(-2px) rotate(45deg);
        transition: transform .15s;
    }

.faq-item[open] > .faq-q[b-55ws2kvi9e]::after {
    transform: translateY(2px) rotate(225deg);
}

/* Smooth open and close where the browser can animate to height: auto */
@supports (interpolate-size: allow-keywords) {
    .faq-item[b-55ws2kvi9e] {
        interpolate-size: allow-keywords;
    }

        .faq-item[b-55ws2kvi9e]::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size .2s ease, content-visibility .2s allow-discrete;
        }

        .faq-item[open][b-55ws2kvi9e]::details-content {
            block-size: auto;
        }
}

/* Answer: the verdict leads, then detail, then any caveat */
.faq-a[b-55ws2kvi9e] {
    padding: 0 56px 24px 20px;
}

.faq-verdict[b-55ws2kvi9e] {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.5;
}

.faq-body[b-55ws2kvi9e] {
    max-width: 64ch;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

    .faq-body[b-55ws2kvi9e]  p,
    .faq-body[b-55ws2kvi9e]  dl {
        margin: 0 0 12px;
        font-size: 16px;
    }

    .faq-body[b-55ws2kvi9e]  a {
        color: var(--color-primary);
        font-weight: 550;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

        .faq-body[b-55ws2kvi9e]  a:hover {
            text-decoration-thickness: 2px;
        }

    /* Term and detail rows, used where an answer is really a list of facts */
    .faq-body[b-55ws2kvi9e]  dl {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 0 24px;
        margin-top: 4px;
        border-top: 1px solid var(--color-border);
    }

    .faq-body[b-55ws2kvi9e]  dt,
    .faq-body[b-55ws2kvi9e]  dd {
        margin: 0;
        padding: 10px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .faq-body[b-55ws2kvi9e]  dt {
        color: var(--color-text-primary);
        font-weight: 600;
    }

    .faq-body[b-55ws2kvi9e]  :last-child {
        margin-bottom: 0;
    }

.faq-limit[b-55ws2kvi9e] {
    max-width: 64ch;
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--color-tint-blue);
    border-left: 3px solid var(--color-data-blue);
    border-radius: 0 8px 8px 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

    .faq-limit strong[b-55ws2kvi9e] {
        color: var(--color-text-primary);
    }

/* Closing help panel */
.faq-help[b-55ws2kvi9e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 72px 0 80px;
    scroll-margin-top: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.faq-help-col[b-55ws2kvi9e] {
    padding: 32px 36px;
}

    .faq-help-col + .faq-help-col[b-55ws2kvi9e] {
        border-left: 1px solid var(--color-border);
    }

    .faq-help-col h2[b-55ws2kvi9e] {
        margin: 0 0 8px;
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -.4px;
    }

    .faq-help-col p[b-55ws2kvi9e] {
        max-width: 42ch;
        margin: 0 0 20px;
    }

        .faq-help-col p.faq-help-alt[b-55ws2kvi9e] {
            margin: 8px 0 0;
            font-size: 15px;
        }

.faq-mail[b-55ws2kvi9e] {
    font-size: 18px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.faq-help-actions[b-55ws2kvi9e] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 991px) {
    .faq-layout[b-55ws2kvi9e] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .faq-rail[b-55ws2kvi9e] {
        position: static;
    }

        .faq-rail ul[b-55ws2kvi9e] {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            border-left: 0;
        }

        .faq-rail a[b-55ws2kvi9e] {
            margin: 0;
            padding: 6px 14px;
            gap: 8px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 999px;
            font-size: 14px;
        }

            .faq-rail a:hover[b-55ws2kvi9e] {
                border-color: var(--color-primary);
            }
}

@media (max-width: 899px) {
    .faq-help[b-55ws2kvi9e] {
        grid-template-columns: 1fr;
    }

    .faq-help-col + .faq-help-col[b-55ws2kvi9e] {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .faq-hero[b-55ws2kvi9e] {
        padding: 32px 0 28px;
    }

        .faq-hero p[b-55ws2kvi9e] {
            font-size: 16px;
        }

    .faq-group h2[b-55ws2kvi9e] {
        font-size: 24px;
    }

    .faq-q[b-55ws2kvi9e] {
        padding: 16px;
    }

        .faq-q h3[b-55ws2kvi9e] {
            font-size: 16px;
        }

    .faq-a[b-55ws2kvi9e] {
        padding: 0 16px 20px;
    }

    .faq-body[b-55ws2kvi9e]  dl {
        grid-template-columns: 1fr;
    }

    .faq-body[b-55ws2kvi9e]  dt {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .faq-body[b-55ws2kvi9e]  dd {
        padding-top: 2px;
    }

    .faq-help[b-55ws2kvi9e] {
        margin: 56px 0 56px;
    }

    .faq-help-col[b-55ws2kvi9e] {
        padding: 24px 20px;
    }
}

@media print {
    .faq-rail[b-55ws2kvi9e],
    .faq-help[b-55ws2kvi9e] {
        display: none;
    }

    .faq-layout[b-55ws2kvi9e] {
        display: block;
    }
}
/* /Pages/Index.cshtml.rz.scp.css */
/* Home page (/): hero, tool cards and the FAQ teaser.
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Rules moved from site.css are written twice, "S, ::deep S": the first form
   matches elements written in this page, the second anything inside them, including markup from partials
   and elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens
   stay in wwwroot/css/site.css. */

.tools-section[b-nytyftzsua] {
    margin-bottom: 60px;
}

/* Question rows need at least a 24px touch target; the site-wide summary has no padding. */
.faq-section summary[b-nytyftzsua] {
    padding: 12px 0;
}

.hero[b-nytyftzsua],
[b-nytyftzsua] .hero {
    text-align: center;
    padding: 74px 0 65px
}

.dot[b-nytyftzsua],
[b-nytyftzsua] .dot {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%
}

.hero p[b-nytyftzsua],
[b-nytyftzsua] .hero p {
    font-size: 17px;
    line-height: 1.8
}

.card-top[b-nytyftzsua],
[b-nytyftzsua] .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.tool-icon[b-nytyftzsua],
[b-nytyftzsua] .tool-icon {
    color: var(--color-primary);
    font-size: 28px;
    line-height: 1
}

.audit-outline[b-nytyftzsua],
[b-nytyftzsua] .audit-outline {
    margin-top: 10px;
    padding: 15px 20px;
    background: var(--color-background);
    border-radius: 7px;
    font-size: 13px;
    min-height: 156px
}

    .audit-outline ul[b-nytyftzsua],
    [b-nytyftzsua] .audit-outline ul {
        padding-left: 20px;
        line-height: 2;
        color: var(--color-text-secondary)
    }

.faq-section[b-nytyftzsua],
[b-nytyftzsua] .faq-section {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    padding: 64px 0 80px
}

    .faq-section a[b-nytyftzsua],
    [b-nytyftzsua] .faq-section a {
        font-size: 13px
    }

.release-label[b-nytyftzsua],
[b-nytyftzsua] .release-label,
.tag[b-nytyftzsua],
[b-nytyftzsua] .tag {
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-surface-secondary);
    padding: 4px 10px;
    border-radius: 5px
}

.audit .tool-icon[b-nytyftzsua],
[b-nytyftzsua] .audit .tool-icon {
    color: var(--color-data-blue)
}

@media(max-width:600px) {
    .desktop-break[b-nytyftzsua],
    [b-nytyftzsua] .desktop-break {
            display: none
        }
}

@media(max-width:600px) {
    .faq-section[b-nytyftzsua],
    [b-nytyftzsua] .faq-section {
            grid-template-columns: 1fr
        }
}

@media(max-width:600px) {
    .release-label[b-nytyftzsua],
    [b-nytyftzsua] .release-label {
            max-width: 95px
        }
}

@media(max-width:600px) {
    .faq-section[b-nytyftzsua],
    [b-nytyftzsua] .faq-section {
            gap: 16px;
            padding: 40px 0
        }
}

.hero > .eyebrow[b-nytyftzsua],
[b-nytyftzsua] .hero > .eyebrow {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 7px 12px;
    border-radius: 24px;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

@media(max-width:600px) {
    .hero[b-nytyftzsua],
    [b-nytyftzsua] .hero {
            padding: 44px 0
        }
}

@media(max-width:600px) {
    .hero p[b-nytyftzsua],
    [b-nytyftzsua] .hero p {
            font-size: 15px
        }
}
/* /Pages/KeywordGenerator.cshtml.rz.scp.css */
/* Keyword generator page (/keyword-generator): form, intent tabs, filters and the results table
   (rows are built by Scripts/keyword-generator.js).
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

.kwg-panel[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-panel {
    margin-bottom: 20px;
}

.kwg-panel-head[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .kwg-panel-head h2[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-panel-head h2 {
        margin: 0 0 4px;
        font-size: 21px;
    }

.kwg-form-toggle[aria-expanded="false"] svg[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-form-toggle[aria-expanded="false"] svg {
    transform: rotate(180deg);
}

.kwg-form[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-form {
    margin-top: 10px;
}

.kwg-status[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-status {
    margin: 10px 0 0;
}

    .kwg-status:empty[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-status:empty {
        display: none;
    }

.kwg-form-foot[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.kwg-results[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-results {
    margin: 0 0 48px;
    scroll-margin-top: 16px;
}

.kwg-grid[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-grid {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.kwg-toolbar[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-toolbar {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
}

.kwg-tabs[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kwg-tab[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .kwg-tab span[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-tab span {
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
    }

        .kwg-tab span[b-du9bxldzjn]::before,
        [b-du9bxldzjn] .kwg-tab span::before {
            content: "(";
        }

        .kwg-tab span[b-du9bxldzjn]::after,
        [b-du9bxldzjn] .kwg-tab span::after {
            content: ")";
        }

    .kwg-tab:hover[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-tab:hover {
        border-color: var(--color-border-strong);
        color: var(--color-text-primary);
    }

    .kwg-tab[aria-pressed="true"][b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-tab[aria-pressed="true"] {
        background: var(--color-tint-emerald);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

        .kwg-tab[aria-pressed="true"] span[b-du9bxldzjn],
        [b-du9bxldzjn] .kwg-tab[aria-pressed="true"] span {
            color: inherit;
        }

/* Filters: one tidy row on wide screens, two columns on tablets, one on phones. */
.kwg-filters[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

    .kwg-filters input[type="search"][b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-filters input[type="search"],
    .kwg-filters select[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-filters select {
        width: 100%;
        min-height: 38px;
        padding: 7px 11px;
    }

.kwg-filter-extras[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-filter-extras {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Selection summary on the left, output actions on the right. */
.kwg-actions-row[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.kwg-actions[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .kwg-actions select[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-actions select {
        width: auto;
        min-height: 38px;
        padding: 7px 10px;
    }

@media(max-width:1100px) {
    .kwg-filters[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kwg-filter-extras[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-filter-extras {
        grid-column: 1 / -1;
    }
}

@media(max-width:560px) {
    .kwg-filters[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-filters {
        grid-template-columns: 1fr;
    }

    .kwg-actions[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-actions,
    .kwg-actions > *[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-actions > *,
    .kwg-actions select[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-actions select {
        width: 100%;
    }
}

.kwg-check[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.kwg-check input[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-check input,
.kwg-table input[type="checkbox"][b-du9bxldzjn],
[b-du9bxldzjn] .kwg-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
}

.kwg-link[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-link {
    padding: 4px 6px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .kwg-link:hover:not(:disabled)[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-link:hover:not(:disabled) {
        color: var(--color-primary);
        text-decoration: underline;
    }

.kwg-selection[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-selection {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    font-size: 12.5px;
}

    .kwg-selection strong[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-selection strong {
        font-weight: 650;
        color: var(--color-text-primary);
    }

        .kwg-selection strong.is-over[b-du9bxldzjn],
        [b-du9bxldzjn] .kwg-selection strong.is-over {
            color: var(--color-warning);
        }

.kwg-table-wrap[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-table-wrap {
    overflow-x: auto;
}

.kwg-table[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .kwg-table thead th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table thead th {
        padding: 10px 16px;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        font-size: 11px;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

    /* Reset the site-wide table cell look (grey header cells, 95px minimum width) for this grid. */
    .kwg-table th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table th,
    .kwg-table td[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td {
        min-width: 0;
        max-width: none;
        background: none;
    }

    .kwg-table tbody th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table tbody th,
    .kwg-table td[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td {
        padding: 9px 16px;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        vertical-align: middle;
    }

    .kwg-table tbody th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table tbody th {
        font-weight: 450;
        color: var(--color-text-primary);
        overflow-wrap: anywhere;
    }

    .kwg-table tbody tr:last-child > *[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table tbody tr:last-child > * {
        border-bottom: 0;
    }

    .kwg-table tbody tr:hover[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table tbody tr:hover {
        background: var(--color-background);
    }

    .kwg-table .kwg-col-check[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table .kwg-col-check {
        width: 48px;
    }

    .kwg-table .kwg-col-num[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table .kwg-col-num,
    .kwg-table td:nth-child(4)[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td:nth-child(4) {
        width: 84px;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .kwg-table .kwg-col-google[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table .kwg-col-google,
    .kwg-table td:last-child[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td:last-child {
        width: 84px;
        text-align: center;
    }

.kwg-empty[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-empty {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
}

.kwg-pager[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

    .kwg-pager p[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-pager p {
        margin: 0;
        font-size: 12.5px;
    }

    .kwg-pager > div[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-pager > div {
        display: flex;
        gap: 8px;
    }

.kwg-toast[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-toast {
    position: fixed;
    z-index: 40;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--color-navy);
    color: var(--color-surface);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(15,23,42,.25);
}

    .kwg .button svg[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg .button svg {
        flex: none;
        width: 16px;
        height: 16px;
    }

    .kwg-panel-head .help[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-panel-head .help {
        margin: 0;
    }

    .kwg-form-foot .help[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-form-foot .help {
        margin: 0;
    }

    .kwg-pager .button.small[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-pager .button.small {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 13px;
    }

.kwg .button[b-du9bxldzjn],
[b-du9bxldzjn] .kwg .button {
    gap: 8px;
}

.kwg-actions .button.small[b-du9bxldzjn],
[b-du9bxldzjn] .kwg-actions .button.small {
    min-height: 38px;
    padding: 7px 14px;
    font-size: 13px;
}

@media(max-width:640px) {
    .kwg-panel-head[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-panel-head {
            flex-wrap: wrap;
        }
}

@media(max-width:640px) {
    .kwg-actions[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-actions {
            width: 100%;
            margin-left: 0;
        }
}

@media(max-width:640px) {
    .kwg-table thead th:nth-child(3)[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table thead th:nth-child(3),
    .kwg-table td:nth-child(3)[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td:nth-child(3) {
            display: none;
        }
}

@media(max-width:640px) {
    .kwg-table tbody th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table tbody th,
    .kwg-table td[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table td,
    .kwg-table thead th[b-du9bxldzjn],
    [b-du9bxldzjn] .kwg-table thead th {
            padding-left: 10px;
            padding-right: 10px;
        }
}
/* /Pages/KeywordResearch.cshtml.rz.scp.css */
/* Keyword research tabs (/keyword-research, /keyword-finder, /location-matrix): the keyword toolbar,
   the Generate-from-seed modal, the finder's research types, the results grid colours and the summary.
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

/* Wrapper around the whole page, so partials (finder form, summary, results) sit inside a scoped
   element and ::deep rules reach them. It adds no box of its own. */
.keyword-page[b-vc8hwm2cgg] {
    display: contents;
}

.metric-cpc[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .metric-cpc {
    color: var(--color-cpc);
    font-weight: 650
}

.metric-opportunity[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .metric-opportunity {
    color: var(--color-primary);
    font-weight: 750
}

.growth-positive[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .growth-positive {
    color: var(--color-success);
    font-weight: 650
}

.growth-negative[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .growth-negative {
    color: var(--color-danger);
    font-weight: 650
}

/* Direction arrows come from CSS, so they never end up in copied text, search or the CSV export. The
   second `content` (with an empty alternative) keeps screen readers from announcing the triangle; the
   number already carries its sign. */
.growth-positive[b-vc8hwm2cgg]::before,
[b-vc8hwm2cgg] .growth-positive::before,
.growth-negative[b-vc8hwm2cgg]::before,
[b-vc8hwm2cgg] .growth-negative::before {
    margin-right: .3em;
    font-size: .7em;
    vertical-align: .1em
}

.growth-positive[b-vc8hwm2cgg]::before,
[b-vc8hwm2cgg] .growth-positive::before {
    content: "\25B2";
    content: "\25B2" / ""
}

.growth-negative[b-vc8hwm2cgg]::before,
[b-vc8hwm2cgg] .growth-negative::before {
    content: "\25BC";
    content: "\25BC" / ""
}

/* Keyword research: "Generate from seed" / "Import file" toolbar above the Keywords textarea, and the
   live keyword counter below it. */
.keyword-toolbar[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .keyword-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-content[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .modal-content {
    box-shadow: 0 24px 64px rgba(15,23,42,.3);
}

.modal-header[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .modal-header {
    align-items: flex-start;
    gap: 16px;
}

.modal-title[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .modal-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: -.3px;
}

.modal-body > label:first-child[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .modal-body > label:first-child {
    margin-top: 0;
}

.seed-modal-more[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-modal-more {
    margin-right: auto !important;
    font-size: 13px;
    font-weight: 600;
}

/* Generated-keyword review: a filter box, a "select all" toggle, and a scrollable table — everything
   Google returned stays visible and selectable rather than being silently capped before you see it. */
.seed-results[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-results {
    margin-top: 8px;
}

.seed-results-toolbar[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 10px;
}

    .seed-results-toolbar label[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-toolbar label {
        margin: 0;
        font-size: 12px;
        font-weight: 650;
        color: var(--color-text-secondary);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .seed-results-toolbar input[type="search"][b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-toolbar input[type="search"] {
        min-height: 38px;
        width: 15rem;
        max-width: 100%;
    }

    .seed-results-toolbar input[type="checkbox"][b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-toolbar input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

.seed-results-scroll[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-results-scroll {
    max-height: 34vh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: .6rem;
}

.seed-results-table[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .seed-results-table th[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table th,
    .seed-results-table td[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table td {
        min-width: 0;
        max-width: none;
    }

    .seed-results-table td:first-child[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table td:first-child {
        width: 36px;
    }

    .seed-results-table thead th:nth-child(4)[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table thead th:nth-child(4),
    .seed-results-table td:nth-child(4)[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table td:nth-child(4) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .seed-results-table td:last-child[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table td:last-child {
        width: 44px;
        text-align: center;
    }

    .seed-results-table thead th[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table thead th {
        position: sticky;
        top: 0;
        background: var(--color-surface-secondary);
        color: var(--color-text-secondary);
        text-align: left;
        padding: 8px 10px;
        font-size: 11px;
        font-weight: 750;
        letter-spacing: .02em;
        border-bottom: 1px solid var(--color-border-strong);
    }

    .seed-results-table td[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    .seed-results-table tr:last-child td[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table tr:last-child td {
        border-bottom: 0;
    }

    .seed-results-table tr[hidden][b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table tr[hidden] {
        display: none;
    }

    .seed-results-table tbody tr:hover[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table tbody tr:hover {
        background: var(--color-background);
    }

    .seed-results-table input[type="checkbox"][b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-results-table input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
    }

.seed-results-empty[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-results-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Keywords label + "Generate from seed" / "Import file" row, with room before the textarea. */
.keyword-field-head[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .keyword-field-head {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 4px 0 12px;
}

    .keyword-field-head label[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .keyword-field-head label {
        margin: 0;
    }

/* Location / Language / Network on one row. */
.targeting-row[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .targeting-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media(max-width:900px) {
    .targeting-row[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .targeting-row {
        grid-template-columns: 1fr 1fr;
    }

        .targeting-row > :last-child[b-vc8hwm2cgg],
        [b-vc8hwm2cgg] .targeting-row > :last-child {
            grid-column: 1 / -1;
        }
}

/* A bordered box around an on/off option and its explanation. */
.option-box[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .option-box {
    margin: 20px 0 4px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-background);
}

.seed-types[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
}

    .seed-types legend[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-types legend {
        float: left;
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 0 2px;
        padding: 0;
        font-size: 12px;
        font-weight: 650;
    }

.seed-type[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .seed-type:hover[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-type:hover {
        border-color: var(--color-border-strong);
        background: var(--color-background);
    }

    /* The radio stays in the form (and keyboard reachable) but is drawn as the whole card. */
    .seed-type input[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-type input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .seed-type:has(input:checked)[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-type:has(input:checked) {
        border-color: var(--color-primary);
        background: var(--color-tint-emerald);
        box-shadow: 0 0 0 1px var(--color-primary);
    }

    .seed-type:has(input:focus-visible)[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-type:has(input:focus-visible) {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

.seed-type-icon[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

    .seed-type-icon svg[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-type-icon svg {
        width: 18px;
        height: 18px;
    }

.seed-type:has(input:checked) .seed-type-icon[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type:has(input:checked) .seed-type-icon {
    background: var(--color-primary);
    color: var(--color-surface);
}

.seed-type-text strong[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type-text strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
    color: var(--color-text-primary);
}

.seed-type-text small[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* Only the input for the checked research type shows (CSS only, so it also works without JavaScript). */
.finder-form:has(#seed-type-keyword:checked) .finder-field:not([data-seed-field="Keyword"])[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-form:has(#seed-type-keyword:checked) .finder-field:not([data-seed-field="Keyword"]),
.finder-form:has(#seed-type-url:checked) .finder-field:not([data-seed-field="PageUrl"])[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-form:has(#seed-type-url:checked) .finder-field:not([data-seed-field="PageUrl"]),
.finder-form:has(#seed-type-site:checked) .finder-field:not([data-seed-field="Site"])[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-form:has(#seed-type-site:checked) .finder-field:not([data-seed-field="Site"]) {
    display: none;
}

.finder-field[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-field {
    margin-top: 18px;
}

    .finder-field label[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .finder-field label {
        margin-top: 0;
    }

.finder-foot[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.finder-actions[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Keyword research tabs: panel heading with "Show form / Hide form", folded away after a search. */
.panel-head-row[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .panel-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.form-toggle[aria-expanded="false"] svg[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .form-toggle[aria-expanded="false"] svg {
    transform: rotate(180deg);
}

.matrix-location[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .matrix-location {
    margin-top: 32px;
}

    .keyword-toolbar .button[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .keyword-toolbar .button {
        gap: 8px
    }

    .keyword-toolbar .button svg[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .keyword-toolbar .button svg {
        width: 16px;
        height: 16px;
        flex: none
    }

    .modal-header .help[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .modal-header .help {
        margin: 6px 0 0;
    }

.modal-footer .button.small[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .modal-footer .button.small {
    min-height: 40px;
    padding: 8px 16px;
}

    .option-box .switch small[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .option-box .switch small {
        margin-top: 3px;
        line-height: 1.55;
    }

.finder-field .help[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .finder-field .help {
    margin: 6px 0 0;
}

    .finder-actions .button[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .finder-actions .button {
        gap: 8px;
    }

        .finder-actions .button svg[b-vc8hwm2cgg],
        [b-vc8hwm2cgg] .finder-actions .button svg {
            flex: none;
            width: 16px;
            height: 16px;
        }

@media(max-width:700px) {
    .seed-types[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .seed-types {
        grid-template-columns: 1fr;
    }

    .finder-actions[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .finder-actions,
    .finder-actions .button[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .finder-actions .button {
        width: 100%;
    }
}

@media(max-width:600px) {
    .targeting-row[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .targeting-row {
            grid-template-columns: 1fr;
        }
}

.form-toggle[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .form-toggle {
    gap: 8px;
}

.form-toggle svg[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .form-toggle svg {
        flex: none;
        width: 16px;
        height: 16px;
    }

@media(max-width:600px) {
    .panel-head-row[b-vc8hwm2cgg],
    [b-vc8hwm2cgg] .panel-head-row {
            flex-wrap: wrap;
        }
}

.seed-type:has(input:checked) .seed-type-icon[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .seed-type:has(input:checked) .seed-type-icon {
    background-image: var(--gradient-primary, none);
}

.research-summary + .results[b-vc8hwm2cgg],
[b-vc8hwm2cgg] .research-summary + .results {
    margin-top: 8px;
}
/* /Pages/MetaLengthChecker.cshtml.rz.scp.css */
/* Meta length checker page (/meta-length-checker): two-column layout and the length meters.
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

/* Meta Length Checker: side-by-side desktop layout — controls on the left, live preview + guidance
   on the right, so the preview updates without scrolling away from the fields being typed into. */
.meta-checker-layout[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-checker-layout {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 24px;
    align-items: start;
    margin-bottom: 64px
}

.meta-checker-side[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-checker-side {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media(max-width:900px) {
    .meta-checker-layout[b-k4wfdv6vrh],
    [b-k4wfdv6vrh] .meta-checker-layout {
        grid-template-columns: 1fr
    }
}

.meta-meter[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px
}

.meta-meter-label[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-meter-label {
    flex: none;
    width: 56px;
    font-size: 12px;
    font-weight: 650;
    color: var(--color-text-secondary)
}

.meta-meter-bar[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-meter-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--color-surface-secondary);
    overflow: hidden
}

.meta-meter-stats[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-meter-stats {
    flex: none;
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--color-text-muted);
    min-width: 150px;
    justify-content: flex-end
}

.meta-length-warning[b-k4wfdv6vrh],
[b-k4wfdv6vrh] .meta-length-warning {
    margin: -8px 0 16px;
    color: var(--color-danger);
    font-size: 12px;
    font-weight: 650;
}

@media(max-width:480px) {
    .meta-meter[b-k4wfdv6vrh],
    [b-k4wfdv6vrh] .meta-meter {
        flex-wrap: wrap
    }

    .meta-meter-stats[b-k4wfdv6vrh],
    [b-k4wfdv6vrh] .meta-meter-stats {
        min-width: 0;
        justify-content: flex-start;
        width: 100%
    }
}

    .meta-checker-layout .content-panel[b-k4wfdv6vrh],
    [b-k4wfdv6vrh] .meta-checker-layout .content-panel {
        margin: 0
    }
/* /Pages/PageSpeed.cshtml.rz.scp.css */
/* PageSpeed & Core Web Vitals page (/pagespeed-checker): category sections, filmstrip and audit rows
   (rendered by the _PageSpeed* partials).
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

/* Quick-nav pills: click one to jump down to its full section (all sections stay on the page at
   once — nothing here hides or replaces another, matching PageSpeed Insights' own layout). */
.pagespeed-quicknav[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    justify-content: center
}

.pagespeed-navlink[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-navlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit
}

    .pagespeed-navlink span[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-navlink span {
        font-size: 13px;
        font-weight: 650;
        color: var(--color-text-secondary)
    }

    .pagespeed-navlink:hover span[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-navlink:hover span {
        color: var(--color-primary)
    }

/* One full, always-visible report section per Lighthouse category (Performance, Accessibility, ...) */
.pagespeed-category-section[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-category-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 2px solid var(--color-border);
    scroll-margin-top: 24px
}

    .pagespeed-category-section:first-of-type[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-category-section:first-of-type {
        margin-top: 32px;
        padding-top: 0;
        border-top: 0
    }

.pagespeed-category-header[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-category-header {
    display: flex;
    align-items: center;
    gap: 20px
}

.pagespeed-category-band[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-category-band {
    margin: 4px 0 0;
    font-weight: 650
}

.pagespeed-category-section h4[b-szt1fhyf5c],
[b-szt1fhyf5c] .pagespeed-category-section h4 {
    margin: 28px 0 0
}

    .pagespeed-category-section h4 small[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-category-section h4 small {
        display: block;
        font-weight: 400;
        font-size: 12px;
        color: var(--color-text-muted)
    }

/* Loading filmstrip, shown inside the Performance category */
.filmstrip[b-szt1fhyf5c],
[b-szt1fhyf5c] .filmstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px
}

.filmstrip-thumbs[b-szt1fhyf5c],
[b-szt1fhyf5c] .filmstrip-thumbs {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px
}

    .filmstrip-thumbs figure[b-szt1fhyf5c],
    [b-szt1fhyf5c] .filmstrip-thumbs figure {
        margin: 0;
        text-align: center
    }

    .filmstrip-thumbs img[b-szt1fhyf5c],
    [b-szt1fhyf5c] .filmstrip-thumbs img {
        width: 60px;
        height: auto;
        border: 1px solid var(--color-border);
        border-radius: 4px
    }

    .filmstrip-thumbs figcaption[b-szt1fhyf5c],
    [b-szt1fhyf5c] .filmstrip-thumbs figcaption {
        font-size: 10px;
        color: var(--color-text-muted)
    }

.filmstrip-final[b-szt1fhyf5c],
[b-szt1fhyf5c] .filmstrip-final {
    max-width: 180px;
    border: 1px solid var(--color-border);
    border-radius: 6px
}

/* Individual audit rows within a category (needs improvement / good to know). The whole list sits in
   one bordered box so it's clear where the group starts and ends; an opened row pops out as its own
   bordered card (matching PageSpeed Insights' own look) instead of blending into the flat list. */
.audit-list[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden
}

    .audit-list li:last-child .audit-row-details:not([open]) .audit-row-summary[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-list li:last-child .audit-row-details:not([open]) .audit-row-summary {
        border-bottom: 0
    }

.audit-row-details[open][b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-details[open] {
    margin: 0px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding-top: 0px;
}

.audit-row-details .chevron[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-details .chevron {
    color: var(--color-text-muted);
    transition: transform .15s
}

.audit-row-details[open] .chevron[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-details[open] .chevron {
    transform: rotate(180deg)
}

/* Header (always shaded, whether the row is open or not) and body (only shown when open) get distinct
   backgrounds, so an accordion item visually reads as header-then-content rather than one flat block. */
.audit-row-summary[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border);
    list-style: none
}

    .audit-row-summary[b-szt1fhyf5c]::-webkit-details-marker,
    [b-szt1fhyf5c] .audit-row-summary::-webkit-details-marker {
        display: none
    }

.audit-row-body[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-body {
    padding: 14px 16px;
    background: var(--color-surface)
}

    .audit-row-body p[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-row-body p {
        margin: 0 0 14px;
        font-size: 13px;
        color: var(--color-text-secondary)
    }

        .audit-row-body p:last-child[b-szt1fhyf5c],
        [b-szt1fhyf5c] .audit-row-body p:last-child {
            margin-bottom: 0
        }

.audit-row-title[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-row-title {
    flex: 1
}

.audit-icon[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-icon {
    flex: none;
    width: 18px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center
}

    .audit-icon.severity-high[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-icon.severity-high {
        color: var(--color-danger)
    }

    .audit-icon.severity-medium[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-icon.severity-medium {
        color: var(--color-warning)
    }

    .audit-icon.severity-info[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-icon.severity-info {
        color: var(--color-text-muted)
    }

    .audit-icon.severity-passed[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-icon.severity-passed {
        color: var(--color-success);
        margin-right: 6px
    }

.audit-savings.severity-high[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-savings.severity-high {
    color: var(--color-danger)
}

.audit-savings.severity-medium[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-savings.severity-medium {
    color: var(--color-warning)
}

.audit-table[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table {
    margin: 0
}

.audit-table-detail-row td[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table-detail-row td {
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-background)
}

.audit-table-detail-row code[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table-detail-row code {
    display: block
}

.audit-table-thumb[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table-thumb {
    display: block;
    max-width: 150px;
    max-height: 150px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    object-fit: cover
}

.audit-table th.num[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table th.num,
.audit-table td.num[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-table td.num {
    text-align: right;
    white-space: nowrap
}

/* Narrative "list" detail (e.g. the network dependency tree) */
.audit-list-detail[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-list-detail {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary)
}

.audit-list-section[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-list-section {
    margin-top: 16px
}

    .audit-list-section h5[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-list-section h5 {
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 650;
        text-transform: uppercase;
        color: var(--color-text-muted)
    }

.dep-node[b-szt1fhyf5c],
[b-szt1fhyf5c] .dep-node {
    padding: 4px 0;
    font-size: 13px;
    overflow-wrap: anywhere
}

    .dep-node.longest .dep-url[b-szt1fhyf5c],
    [b-szt1fhyf5c] .dep-node.longest .dep-url,
    .dep-node.longest .dep-meta[b-szt1fhyf5c],
    [b-szt1fhyf5c] .dep-node.longest .dep-meta {
        color: var(--color-danger);
        font-weight: 650
    }

.dep-url[b-szt1fhyf5c],
[b-szt1fhyf5c] .dep-url {
    color: var(--color-text-primary)
}

.dep-meta[b-szt1fhyf5c],
[b-szt1fhyf5c] .dep-meta {
    color: var(--color-text-muted);
    font-size: 12px
}

.dep-children[b-szt1fhyf5c],
[b-szt1fhyf5c] .dep-children {
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px solid var(--color-border)
}

.audit-group[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-group {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    color: var(--color-text-muted)
}

.audit-sublist[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-sublist {
    margin-top: 16px;
    border-bottom: 0;
    padding: 0
}

    .audit-sublist summary[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-sublist summary {
        font-size: 13px
    }

.audit-list-flat[b-szt1fhyf5c],
[b-szt1fhyf5c] .audit-list-flat {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px
}

    .audit-list-flat li[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-list-flat li {
        padding: 6px 0;
        border-bottom: 1px solid var(--color-border)
    }

        .audit-list-flat li:last-child[b-szt1fhyf5c],
        [b-szt1fhyf5c] .audit-list-flat li:last-child {
            border-bottom: 0
        }

    .audit-list-flat p[b-szt1fhyf5c],
    [b-szt1fhyf5c] .audit-list-flat p {
        margin: 4px 0 0;
        color: var(--color-text-secondary);
        font-size: 12px
    }

@media(max-width:430px) {
    .pagespeed-category-header[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-category-header {
        flex-direction: column;
        text-align: center
    }
}

    .pagespeed-category-section .preserve[b-szt1fhyf5c],
    [b-szt1fhyf5c] .pagespeed-category-section .preserve {
        white-space: unset;
    }
/* /Pages/SeoTools.cshtml.rz.scp.css */
/* SEO tools index page (/seo-tools).
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

.tool-links[b-4a7ue5o3p1],
[b-4a7ue5o3p1] .tool-links {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

    .tool-links a[b-4a7ue5o3p1],
    [b-4a7ue5o3p1] .tool-links a {
        display: block;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 22px;
        text-decoration: none;
        background: var(--color-surface)
    }

@media(max-width:768px) {
    .tool-links[b-4a7ue5o3p1],
    [b-4a7ue5o3p1] .tool-links {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:430px) {
    .metric-grid[b-4a7ue5o3p1],
    [b-4a7ue5o3p1] .metric-grid,
    .tool-links[b-4a7ue5o3p1],
    [b-4a7ue5o3p1] .tool-links {
        grid-template-columns: 1fr
    }
}
/* /Pages/SiteCrawl.cshtml.rz.scp.css */
/* Site crawl page (/site-crawl): the form grid, crawl status and action row.
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

/* Site crawl: full-width sections, a three-field form row and evenly spaced action buttons. */
.crawl-form-grid[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.crawl-actions[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 20px 0 8px;
}

    .crawl-actions form[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-actions form {
        margin: 0;
    }

.crawl-coverage[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-coverage {
    margin-top: 16px;
}

.crawl-status-head h2[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-status-head h2 {
    margin: 8px 0 4px;
    font-size: 22px;
    overflow-wrap: anywhere;
}

.crawl-status-head p[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-status-head p {
    margin: 0;
}

.crawl-state[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-state {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

    .crawl-state.state-completed[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-completed {
        background: var(--color-tint-emerald);
        color: var(--color-primary);
    }

    .crawl-state.state-running[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-running,
    .crawl-state.state-queued[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-queued {
        background: var(--color-tint-blue);
        color: var(--color-data-blue);
    }

    .crawl-state.state-failed[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-failed,
    .crawl-state.state-interrupted[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-interrupted,
    .crawl-state.state-cancelled[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-state.state-cancelled {
        background: color-mix(in srgb, var(--color-danger) 10%, transparent);
        color: var(--color-danger);
    }

.crawl-stats[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-stats {
    margin: 20px 0 4px;
}

.crawl-panel[b-qu5tsssopm],
[b-qu5tsssopm] .crawl-panel {
    margin-bottom: 24px;
}

@media(max-width:800px) {
    .crawl-form-grid[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .crawl-form-url[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-form-url {
        grid-column: 1 / -1;
    }
}

@media(max-width:480px) {
    .crawl-form-grid[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-form-grid {
        grid-template-columns: 1fr;
    }

    .crawl-actions > *[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-actions > *,
    .crawl-actions .button[b-qu5tsssopm],
    [b-qu5tsssopm] .crawl-actions .button {
        width: 100%;
    }
}
/* /Pages/WebsiteAudit.cshtml.rz.scp.css */
/* Website audit page (/website-audit): score breakdown, category modals and the heading outline.
   ASP.NET CSS isolation scopes these rules to this page and bundles them into SeoPlatform.Web.styles.css
   (linked from _Layout.cshtml). Each selector is written twice, "S, ::deep S": the first form matches
   elements written in this page, the second anything inside them, including markup from partials and
   elements added by JavaScript, which carry no scope attribute. Shared styles and the colour tokens stay
   in wwwroot/css/site.css. */

.input-action[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .input-action {
    display: flex;
    gap: 12px;
    align-items: center
}

    .input-action input[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .input-action input {
        flex: 1
    }

.score-panel[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: 22px 0 6px
}

.score-summary[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-summary {
    min-width: 220px;
    flex: 1
}

.score-tagline[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
    font-weight: 650;
    color: var(--color-primary);
    font-size: 15px
}

    .score-tagline svg[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .score-tagline svg {
        width: 17px;
        height: 17px;
        flex: none
    }

.score-breakdown[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    gap: 10px;
    margin-top: 16px
}

.score-breakdown-item[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-height: 0;
    text-align: left
}

    .score-breakdown-item:hover[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .score-breakdown-item:hover {
        border-color: var(--color-primary);
        background: var(--color-background)
    }

.score-breakdown .score-pill[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .score-breakdown .score-pill {
    font-weight: 750;
    font-size: 14px
}

/* Category "how to improve" modal, opened from a score-breakdown button */
.audit-modal[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .audit-modal {
    width: min(760px,90vw);
    max-height: 85vh;
    padding: 24px;
    border: 0;
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text-primary)
}

    .audit-modal[b-lnjkdh2vt0]::backdrop,
    [b-lnjkdh2vt0] .audit-modal::backdrop {
        background: rgba(0,0,0,.5)
    }

.audit-modal-header[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .audit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

    .audit-modal-header h3[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .audit-modal-header h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px
    }

.audit-modal-actions[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .audit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px
}

.heading-outline[b-lnjkdh2vt0],
[b-lnjkdh2vt0] .heading-outline {
    list-style: none;
    padding: 0;
    overflow-wrap: anywhere;
}

    .heading-outline li[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .heading-outline li {
        padding-block: .35rem;
    }

@media(max-width:768px) {
    .input-action[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .input-action {
            flex-direction: column;
            align-items: stretch
        }
}

@media(max-width:600px) {
    .score-panel[b-lnjkdh2vt0],
    [b-lnjkdh2vt0] .score-panel {
            gap: 20px
        }
}