/**
 * JSON 格式化工具样式
 */

/* JSON 查看器 */
.json-viewer {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 13px;
    line-height: 1.8;
    padding: 8px 0;
}

.json-row {
    padding: 1px 8px;
    border-radius: 3px;
    transition: background 0.1s;
    white-space: nowrap;
}

.json-row:hover {
    background: rgba(59, 130, 246, 0.06);
}

.json-block {
    /* 容器块 */
}

.json-header {
    /* 头部行 */
}

.json-footer {
    /* 底部行 */
}

.json-key {
    color: #2563eb;
    font-weight: 500;
}

.json-colon {
    color: #6b7280;
}

.json-value {
    font-weight: 500;
}

.json-string {
    color: #059669;
}

.json-number {
    color: #ea580c;
}

.json-boolean {
    color: #dc2626;
}

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

.json-bracket {
    color: #64748b;
    font-weight: 600;
}

/* 彩虹括号 - 不同层级不同颜色 */
.json-bracket.bracket-color-1 { color: #f59e0b; } /* 橙色 */
.json-bracket.bracket-color-2 { color: #10b981; } /* 绿色 */
.json-bracket.bracket-color-3 { color: #3b82f6; } /* 蓝色 */
.json-bracket.bracket-color-4 { color: #8b5cf6; } /* 紫色 */
.json-bracket.bracket-color-5 { color: #ec4899; } /* 粉色 */
.json-bracket.bracket-color-6 { color: #06b6d4; } /* 青色 */

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

.json-toggle {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    margin-right: 4px;
    font-size: 10px;
    color: #6b7280;
    cursor: pointer;
    border-radius: 3px;
    background: #f3f4f6;
    transition: all 0.15s;
    user-select: none;
    vertical-align: middle;
}

.json-toggle:hover {
    background: #dbeafe;
    color: #2563eb;
}

.json-toggle.collapsed {
    background: #e0f2fe;
    color: #0284c7;
}

.json-preview {
    display: none;
    color: #9ca3af;
    font-style: italic;
    margin-left: 4px;
}

.json-content {
    /* 内容区域 */
}

.json-placeholder {
    color: #9ca3af;
    padding: 40px 20px;
    text-align: center;
}

.json-error {
    color: #dc2626;
    padding: 16px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.json-raw {
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 8px;
}