:root {
    --sidebar-w: 260px;
    --sidebar-collapsed-w: 72px;
}

body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.sidebar {
    width: var(--sidebar-w);
    transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: var(--sidebar-w);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-w);
    min-width: var(--sidebar-collapsed-w);
}

.content {
    transition: margin-left 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.breadcrumb>li+li::before {
    content: '›';
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.45);
}

.json-key {
    color: #60a5fa;
}

.json-value {
    color: #f472b6;
}

.json-boolean {
    color: #fbbf24;
}

.json-null {
    color: #9ca3af;
}

.loader {
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top: 4px solid #3b82f6;
    border-radius: 9999px;
    width: 36px;
    height: 36px;
    animation: spin 0.85s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

.btn-ghost {
    background: 0 0;
    border: none;
    color: inherit;
}