.raw-json-card {
    border: 1px solid #dee2e6;
    overflow: hidden;
}

.raw-json-summary {
    background-color: #0d6efd;
    color: #fff;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.75rem 1.25rem;
}

.raw-json-summary::-webkit-details-marker {
    display: none;
}

.raw-json-summary::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.15s ease;
    font-size: 0.75rem;
}

details[open] > .raw-json-summary::before {
    transform: rotate(90deg);
}

details:not([open]) > .raw-json-summary .raw-json-toggle::after {
    content: "Click to expand";
}

details[open] > .raw-json-summary .raw-json-toggle::after {
    content: "Click to collapse";
}

.raw-json-body {
    position: relative;
}

.raw-json-copy {
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;
    z-index: 2;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #ffffff;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.raw-json-copy:hover {
    background-color: #f1f3f5;
    color: #212529;
    border-color: #adb5bd;
}

.raw-json-copy:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.raw-json-copy.copied {
    background-color: #198754;
    color: #fff;
    border-color: #198754;
}

.raw-json-pre {
    background-color: #f8f9fa;
    color: #212529;
    padding: 1rem;
    margin: 0;
    overflow: auto;
    max-height: 600px;
    font-size: 0.85rem;
    line-height: 1.45;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.raw-json .json-key    { color: #0d6efd; font-weight: 600; }
.raw-json .json-string { color: #198754; }
.raw-json .json-number { color: #b5651d; }
.raw-json .json-bool   { color: #6f42c1; font-weight: 600; }
.raw-json .json-null   { color: #6c757d; font-style: italic; }