.record-checker-main {
    width:
        min(
            1120px,
            calc(100% - 32px)
        );

    margin:
        0 auto;
}


.record-checker-hero {
    max-width:
        820px;

    margin:
        68px auto 28px;

    text-align:
        center;
}


.record-checker-hero h1 {
    margin:
        10px 0 14px;

    font-size:
        clamp(
            34px,
            6vw,
            58px
        );

    line-height:
        1.05;
}


.record-checker-hero p {
    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.65;
}


.record-tool-tabs {
    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-bottom:
        18px;
}


.record-tool-tabs a {
    padding:
        9px 14px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface);

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;
}


.record-tool-tabs a:hover,
.record-tool-tabs a.active {
    color:
        var(--text);

    border-color:
        var(--primary);

    background:
        var(--surface-2);
}


.record-checker-card {
    max-width:
        900px;

    margin:
        0 auto 28px;

    padding:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.record-mode-switch {
    display:
        inline-flex;

    padding:
        4px;

    margin-bottom:
        18px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--bg-soft);
}


.record-mode-button {
    appearance:
        none;

    border:
        0;

    padding:
        9px 14px;

    border-radius:
        9px;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;

    font-weight:
        800;
}


.record-mode-button.active {
    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary, #6c63ff),
            var(--primary-2, #8c65ff)
        );
}


.record-mode-panel label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        850;
}


.record-mode-panel input,
.record-mode-panel textarea {
    width:
        100%;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    outline:
        none;

    background:
        var(--bg-soft);

    color:
        var(--text);

    font-family:
        inherit;
}


.record-mode-panel input {
    min-height:
        48px;

    padding:
        0 13px;
}


.record-mode-panel textarea {
    min-height:
        190px;

    resize:
        vertical;

    padding:
        13px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        12px;

    line-height:
        1.55;
}


.record-mode-panel input:focus,
.record-mode-panel textarea:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(
            108,
            99,
            255,
            .12
        );
}


.record-selector-wrap {
    margin-top:
        15px;
}


.field-help {
    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


.record-checker-actions {
    display:
        flex;

    gap:
        9px;

    flex-wrap:
        wrap;

    margin-top:
        16px;
}


.record-checker-results {
    margin:
        0 auto 30px;
}


.record-summary {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

    margin-bottom:
        18px;
}


.record-summary-card {
    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        var(--surface);
}


.record-summary-card span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.record-summary-card strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    font-size:
        14px;
}


.record-status {
    display:
        inline-flex !important;

    width:
        fit-content;

    padding:
        5px 9px;

    border-radius:
        999px;

    font-size:
        11px !important;

    text-transform:
        uppercase;
}


.record-status.pass {
    color:
        var(--success);
}


.record-status.warning {
    color:
        var(--warning);
}


.record-status.fail,
.record-status.error {
    color:
        var(--danger, #ff6b6b);
}


.record-status.neutral,
.record-status.unknown {
    color:
        var(--muted);
}


.record-output-block {
    position:
        relative;
}


.record-output-block pre {
    margin:
        0;

    padding:
        14px 110px 14px 14px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--bg-soft);

    color:
        var(--text);

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        12px;

    line-height:
        1.55;
}


.record-mini-button {
    position:
        absolute;

    top:
        9px;

    right:
        9px;

    appearance:
        none;

    padding:
        6px 9px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--text);

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        800;
}


.record-result-columns {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        15px;
}


.record-message-list {
    display:
        grid;

    gap:
        8px;
}


.record-warning-item,
.record-error-item,
.record-good-item {
    padding:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface-2);

    font-size:
        12px;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.record-warning-item {
    color:
        var(--warning);
}


.record-error-item {
    color:
        var(--danger, #ff6b6b);
}


.record-good-item {
    color:
        var(--success);
}


.record-structured-details {
    display:
        grid;

    gap:
        9px;

    margin-top:
        14px;
}


.record-json-section {
    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    overflow:
        hidden;

    background:
        var(--surface-2);
}


.record-json-title {
    padding:
        9px 11px;

    border-bottom:
        1px solid
        var(--border);

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.record-json-section pre {
    margin:
        0;

    padding:
        11px;

    color:
        var(--text);

    background:
        transparent;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        11px;

    line-height:
        1.55;
}


.record-related-section {
    margin:
        55px auto 80px;
}


.record-related-section h2 {
    margin:
        8px 0 18px;
}


.record-related-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        11px;
}


.record-related-card {
    display:
        block;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface);

    color:
        var(--text);

    text-decoration:
        none;
}


.record-related-card:hover {
    border-color:
        var(--primary);

    transform:
        translateY(-1px);
}


.record-related-card strong {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        13px;
}


.record-related-card span {
    display:
        block;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


@media (
    max-width:
    820px
) {

    .record-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .record-result-columns {
        grid-template-columns:
            1fr;
    }


    .record-related-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


@media (
    max-width:
    560px
) {

    .record-checker-main {
        width:
            min(
                100% - 20px,
                1120px
            );
    }


    .record-checker-hero {
        margin-top:
            42px;
    }


    .record-summary,
    .record-related-grid {
        grid-template-columns:
            1fr;
    }


    .record-checker-actions
    .primary-button,
    .record-checker-actions
    .secondary-button {
        width:
            100%;
    }


    .record-mode-switch {
        width:
            100%;
    }


    .record-mode-button {
        flex:
            1;
    }


    .record-output-block pre {
        padding:
            50px 12px 12px;
    }


    .record-mini-button {
        left:
            9px;

        right:
            auto;
    }
}