/* 
 * JSON巴巴 - 工具样式文件
 * 各个工具的专用样式
 */

/* 工具容器通用样式 */
.tool-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    height: 100%;
}

.editor-section {
    display: flex;
    gap: var(--spacing-md);
    flex: 1;
    min-height: 300px;
}

.editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid var(--border-color);
}

.editor-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.editor-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.editor-content {
    flex: 1;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-top: none;
}

.code-editor {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.code-editor:focus {
    background-color: var(--bg-primary);
}

/* 工具栏样式 */
.toolbar {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    margin: 0 var(--spacing-sm);
}

/* JSON格式化工具样式 */
.json-formatter {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* JSON控制面板 */
.json-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.json-control-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.json-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.json-option input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent-blue);
}

.json-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* 搜索框样式 */
.json-search-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
}

.json-search {
    width: 200px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.json-search:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.json-search-buttons {
    display: flex;
    gap: 2px;
}

.json-search-buttons .btn {
    min-width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.75rem;
}

.json-search-info {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    z-index: 10;
    margin-top: 2px;
}

/* 示例按钮区域 */
.json-examples {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.json-examples label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.example-buttons {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* 工作区布局 */
.json-workspace {
    display: flex;
    flex: 1;
    min-height: 400px;
    position: relative;
    height: 100%;
}

/* JSON工具横向控制面板样式 */
.json-tool-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-right: var(--spacing-sm);
    padding: 1px 0;
}

.json-control-horizontal {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 1px 8px;
    background-color: transparent;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--border-rgb, 229, 231, 235), 0.5);
    box-shadow: none;
}

.json-control-horizontal .btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    min-height: 26px;
}

.json-control-horizontal .btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    transform: none;
    box-shadow: none;
}

.json-control-horizontal .btn.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: none;
}

.json-control-horizontal .btn.btn-primary:hover {
    background-color: #1e40af;
    transform: none;
    box-shadow: none;
}

.json-control-horizontal .btn.btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}

.json-control-horizontal .btn.btn-secondary:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.json-control-horizontal .btn .btn-icon {
    font-size: 0.875rem;
    transition: none;
}

.json-control-horizontal .btn:hover .btn-icon {
    transform: none;
}

.json-control-horizontal .btn .btn-text {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
}

.control-checkbox-horizontal {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-secondary);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background-color: transparent;
    min-height: 26px;
}

.control-checkbox-horizontal:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.control-checkbox-horizontal input[type="checkbox"] {
    margin: 0;
    width: 12px;
    height: 12px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.control-checkbox-horizontal input[type="checkbox"]:checked {
    background-color: var(--accent-blue);
}

.control-checkbox-horizontal .control-text {
    user-select: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* 功能分组分隔符 */
.control-separator {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    margin: 0 6px;
    opacity: 0.4;
}

/* 深色主题下的分隔符 */
.dark-theme .control-separator {
    background-color: var(--border-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .json-tool-controls {
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
        padding: 1px 0;
    }
    
    .json-control-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3px;
        padding: 1px 6px;
        justify-content: flex-start;
    }
    
    .json-control-horizontal .btn {
        padding: 3px 6px;
        font-size: 0.7rem;
        min-width: auto;
        min-height: 24px;
    }
    
    .json-control-horizontal .btn .btn-text {
        font-size: 0.7rem;
    }
    
    .json-control-horizontal .btn .btn-icon {
        font-size: 0.8rem;
    }
    
    .control-checkbox-horizontal {
        padding: 3px 5px;
        font-size: 0.7rem;
        min-height: 24px;
    }
}

@media (max-width: 480px) {
    .json-control-horizontal {
        padding: 1px 4px;
        gap: 2px;
    }
    
    .json-control-horizontal .btn {
        padding: 3px 5px;
        min-width: 28px;
        gap: 1px;
        min-height: 22px;
    }
    
    .json-control-horizontal .btn .btn-text {
        display: none;
    }
    
    .json-control-horizontal .btn .btn-icon {
        font-size: 0.8rem;
    }
    
    .control-checkbox-horizontal {
        padding: 3px 4px;
        font-size: 0.65rem;
        min-height: 22px;
    }
    
    .control-checkbox-horizontal .control-text {
        font-size: 0.65rem;
    }
    
    .control-checkbox-horizontal input[type="checkbox"] {
        width: 10px;
        height: 10px;
    }
    
    /* 小屏幕上隐藏分隔符 */
    .control-separator {
        display: none;
    }
    
    /* 小屏幕上调整分隔条 */
    .json-resizer {
        width: 6px;
    }
    
    .resizer-handle {
        height: 40px;
    }
    
    .json-resizer:hover .resizer-handle {
        height: 50px;
    }
    
    /* 小屏幕上调整面板最小宽度 */
    .json-input-section,
    .json-output-section {
        min-width: 150px;
        max-width: calc(100% - 190px);
    }
}

/* 中间控制面板样式 - 已废弃，移到标题栏 */
.json-control-panel {
    display: none; /* 隐藏原来的中间控制面板 */
}

.control-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.control-group .btn {
    width: 100%;
    margin-bottom: var(--spacing-xs);
    text-align: center;
    font-size: 0.7rem;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-radius: var(--radius-sm);
}

.btn-icon {
    font-size: 0.9rem;
}

.btn-text {
    font-size: 0.65rem;
    font-weight: 500;
}

.control-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    font-size: 0.75rem;
    cursor: pointer;
}

.control-checkbox input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
}

.control-text {
    color: var(--text-secondary);
    user-select: none;
}

.control-select {
    width: 100%;
    padding: var(--spacing-xs);
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.json-input-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: calc(100% - 240px); /* 确保右侧至少有200px + 分隔条宽度 */
}

.json-output-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: calc(100% - 240px); /* 确保左侧至少有200px + 分隔条宽度 */
}

/* 可拖拽分隔条样式 */
.json-resizer {
    width: 8px;
    background-color: transparent;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.json-resizer:hover {
    background-color: var(--bg-tertiary);
}

.json-resizer:active {
    background-color: var(--accent-blue);
}

.resizer-handle {
    width: 2px;
    height: 60px;
    background-color: var(--border-color);
    border-radius: 1px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.json-resizer:hover .resizer-handle {
    opacity: 1;
    background-color: var(--accent-blue);
    height: 80px;
}

.json-resizer:active .resizer-handle {
    background-color: white;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* 拖拽时的全局cursor */
.resizing {
    cursor: col-resize !important;
    user-select: none;
}

.resizing * {
    cursor: col-resize !important;
    user-select: none;
}

.json-input-header,
.json-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 1px solid var(--border-color);
    min-height: 32px;
}

.json-input-header h4,
.json-output-header h4 {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.json-input-actions,
.json-output-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

/* JSON工具按钮样式 - 简洁版 */
.json-input-actions .btn-action,
.json-output-actions .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    transition: opacity 0.2s ease;
}

.json-input-actions .btn-action .btn-icon,
.json-output-actions .btn-action .btn-icon {
    font-size: 0.875rem;
}

.json-input-actions .btn-action .btn-text,
.json-output-actions .btn-action .btn-text {
    font-size: 0.75rem;
}

.json-input-actions .btn-action:hover,
.json-output-actions .btn-action:hover {
    opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .json-input-actions .btn-action .btn-text,
    .json-output-actions .btn-action .btn-text {
        display: none;
    }
    
    .json-input-actions .btn-action,
    .json-output-actions .btn-action {
        padding: 6px 8px;
        min-width: 36px;
    }
    
    .json-input-actions .btn-action .btn-icon,
    .json-output-actions .btn-action .btn-icon {
        margin-right: 0;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .json-input-actions,
    .json-output-actions {
        gap: 2px;
    }
    
    .json-input-actions .btn-action,
    .json-output-actions .btn-action {
        padding: 4px 6px;
        min-width: 32px;
    }
}

/* 简单的成功反馈效果 */
.btn-success-animation {
    opacity: 0.7 !important;
}

/* 编辑器容器 */
.json-editor {
    flex: 1;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
    background-color: var(--bg-primary);
}

.json-editor-container {
    display: flex;
    height: 100%;
    position: relative;
}

.json-editor-container.show-line-numbers {
    padding-left: 0;
}

/* 确保显示行号时的正确布局 */
.json-editor-container.show-line-numbers .json-line-numbers {
    display: block;
}

/* 行号样式 */
.json-line-numbers {
    width: 50px;
    background-color: var(--bg-tertiary);
    border-right: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
    text-align: right;
    display: block; /* 默认显示行号 */
}

/* 当编辑器容器没有 show-line-numbers 类时，隐藏行号 */
.json-editor-container:not(.show-line-numbers) .json-line-numbers {
    display: none;
}

.json-line-numbers .line-number {
    height: 21px; /* 匹配textarea行高 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-xs);
}

.json-line-numbers .line-number:hover {
    background-color: rgba(37, 99, 235, 0.1);
}

.json-line-numbers .line-number.highlighted {
    background-color: var(--accent-yellow);
    color: #333;
    font-weight: 600;
}

#json-input {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: var(--spacing-md);
    /* background-color: var(--bg-primary);*/
    /* color: var(--text-primary);*/
    border: none;
    font-family: var(--font-mono);
    font-size: 0.90rem;
    line-height: 1.5;
    resize: none;
    outline: none;
    background: #fcfdfd;
    color: #333333 !important;
    white-space: pre;    /* 禁止自动换行 */
    overflow: auto;      /* 出现滚动条 */
}

/* 输入状态栏 */
.json-input-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 0.75rem;
}

.status-indicator {
    font-size: 1rem;
    margin-right: var(--spacing-sm);
}

.status-success { color: var(--accent-green); }
.status-warning { color: var(--accent-yellow); }
.status-error { color: var(--accent-red); }

/* 输出区域 */
.json-output {
    flex: 1;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    /* background-color: var(--bg-primary);*/
    background: #fcfdfd;
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    overflow: scroll;
    min-height: 600px;
    /*white-space: pre;*/
    word-wrap: break-word;
}

.json-placeholder {
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-xl);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    white-space: pre-wrap;
}

.json-error-display {
    color: var(--accent-red);
    text-align: center;
    padding: var(--spacing-xl);
    background-color: rgba(239, 68, 68, 0.1);
    margin: var(--spacing-md);
    border-radius: var(--radius-md);
}

/* 输出统计信息 */
.json-output-stats {
  /*  padding: var(--spacing-sm) var(--spacing-md);*/
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 0.75rem;
}

.json-statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-sm);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs);
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.stat-item label {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.stat-item span {
    color: var(--accent-blue);
    font-weight: 600;
}

/* 增强错误显示样式 */
.json-error-details {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
    overflow: hidden;
}

.error-header {
    background-color: rgba(239, 68, 68, 0.2);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--accent-red);
}

.error-header h4 {
    margin: 0;
    color: var(--accent-red);
    font-size: 0.875rem;
}

.error-location {
    background-color: var(--accent-red);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.error-content {
    padding: var(--spacing-md);
}

.error-description {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.error-context {
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
}

.context-display {
    background-color: var(--bg-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
    border-left: 3px solid var(--accent-red);
    overflow-x: auto;
}

.context-before {
    color: var(--text-secondary);
}

.context-error {
    background-color: var(--accent-red);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 600;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.7; }
}

.context-after {
    color: var(--text-secondary);
}

.error-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* 部分解析结果样式 */
.json-partial-result {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--accent-yellow);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.partial-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-yellow);
}

.partial-section h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--accent-yellow);
    font-size: 0.875rem;
    font-weight: 600;
}

.partial-array {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.fixed-suggestion {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--accent-green);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

.json-suggestion {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    margin: var(--spacing-sm) 0;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
}

.apply-fix-btn {
    background-color: var(--accent-green) !important;
    color: white !important;
    border: none !important;
}

.apply-fix-btn:hover {
    background-color: #059669 !important;
}

/* 错误指示器样式 */
.json-error-indicator {
    background-color: var(--accent-red);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
    animation: errorBlink 2s infinite;
}

@keyframes errorBlink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

/* 错误结果样式 */
.json-error-result {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.json-error-result h4 {
    color: var(--accent-red);
    margin-bottom: var(--spacing-md);
}

/* 修复成功显示样式 */
.json-fixed-result {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--accent-green);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.fix-success-warning {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-weight: 600;
}

.fix-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.fix-before, .fix-after {
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

.fix-before {
    border-left: 3px solid var(--accent-red);
}

.fix-after {
    border-left: 3px solid var(--accent-green);
}

.fix-before h4, .fix-after h4 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.875rem;
}

.error-json, .fixed-json {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    margin: var(--spacing-sm) 0;
    overflow-x: auto;
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* 结构化错误显示样式 */
.json-structured-error {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--accent-yellow);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.error-summary {
    background-color: rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.summary-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-sm);
}

.summary-info {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.main-issues {
    margin-top: var(--spacing-md);
}

.main-issues h5 {
    color: var(--accent-red);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.main-issues ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--text-primary);
}

.main-issues li {
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
}

/* 逐行分析样式 */
.line-by-line-analysis {
    margin-top: var(--spacing-md);
}

.line-by-line-analysis h4 {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}

.lines-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 300px;
    overflow-y: auto;
}

.line-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
}

.line-item:last-child {
    border-bottom: none;
}

.line-item.has-error {
    background-color: rgba(239, 68, 68, 0.05);
    border-left: 3px solid var(--accent-red);
}

.line-item.no-error {
    background-color: rgba(16, 185, 129, 0.05);
}

.line-number {
    min-width: 40px;
    text-align: right;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
    padding-right: var(--spacing-xs);
    border-right: 1px solid var(--border-subtle);
}

.line-content {
    flex: 1;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.line-errors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.error-badge {
    background-color: var(--accent-red);
    color: white;
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

/* 修复建议区域样式 */
.fix-all-section {
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.fix-all-section h4 {
    color: var(--accent-blue);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.fix-all-section p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
}

.fix-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.fix-buttons .btn {
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .fix-comparison {
        grid-template-columns: 1fr;
    }
    
    .summary-info {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .fix-buttons {
        flex-direction: column;
    }
    
    .fix-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .line-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .line-number {
        min-width: auto;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: var(--spacing-xs);
    }
}

.json-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--accent-red);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
    border-radius: var(--radius-sm);
}

.json-success {
    background-color: rgba(16, 185, 129, 0.1);
    height: fit-content;
    /*border-left: 4px solid var(--accent-green);*/
    /*padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;*/
   /* border-radius: var(--radius-sm);*/
}

/* 树形视图容器 */
.json-tree-container {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow: auto;
    max-height: 600px;
}

/* 带行号的树形视图容器 */
.json-tree-container.with-line-numbers {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.json-tree-with-numbers {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 右侧树形行号样式 */
.json-tree-line-numbers {
    width: 50px;
    background-color: var(--bg-tertiary);
    border-right: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-y: auto;
    flex-shrink: 0;
    user-select: none;
    text-align: right;
}

.tree-line-number {
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-xs);
    cursor: pointer;
}

.tree-line-number:hover {
    background-color: rgba(37, 99, 235, 0.1);
}

/* JSON行样式 */
.json-line {
    min-height: 21px;
    display: flex;
    align-items: center;
    padding: 1px var(--spacing-md);
    cursor: pointer;
}

.json-line:hover {
    background-color: rgba(37, 99, 235, 0.05);
}

.json-indent {
    white-space: pre;
    color: transparent;
}

/* 调整带行号的树形容器样式 */
.json-tree-container.with-line-numbers .json-tree {
    padding: var(--spacing-sm) 0;
    overflow-y: auto;
    flex: 1;
}

/* 点击高亮效果 */
.tree-line-number.clicked,
.json-line.clicked {
    background-color: var(--accent-blue) !important;
    color: white !important;
}

/* 部分解析警告 */
.partial-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    text-align: center;
}

/* 基础树形样式 */
.json-tree {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* 切换图标 */
.json-toggle {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border-radius: 3px;
    margin-right: var(--spacing-sm);
    transition: all 0.2s ease;
    user-select: none;
    font-size: 0.75rem;
}

.json-toggle:hover {
    background-color: var(--accent-blue);
    color: white;
    transform: scale(1.1);
}

/* JSON值类型样式 */
.json-string {
    color: #a5c261;
}

.json-number {
    color: #6897bb;
}

.json-boolean {
    color: #cc7832;
}

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

.json-key {
    color: #6fb3d2;
    font-weight: 500;
}

.json-colon {
    color: var(--text-secondary);
    margin: 0 var(--spacing-xs);
}

.json-comma {
    color: var(--text-secondary);
}

.json-bracket {
    color: var(--text-primary);
    font-weight: 600;
}

.json-length {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: var(--spacing-sm);
}

.json-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* 对象样式 */
.json-object {
    margin: 2px 0;
}

.json-object.expanded .json-object-content {
    display: block;
    margin-left: var(--spacing-lg);
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.json-object-item {
    margin: var(--spacing-xs) 0;
    padding: 2px 0;
}

.json-object-item:hover {
    background-color: rgba(37, 99, 235, 0.05);
    border-radius: 3px;
    padding: 2px var(--spacing-xs);
    margin: var(--spacing-xs) calc(-1 * var(--spacing-xs));
}

/* 数组样式 */
.json-array {
    margin: 2px 0;
}

.json-array.expanded .json-array-content {
    display: block;
    margin-left: var(--spacing-lg);
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.json-array-item {
    margin: var(--spacing-xs) 0;
    padding: 2px 0;
}

.json-array-item:hover {
    background-color: rgba(37, 99, 235, 0.05);
    border-radius: 3px;
    padding: 2px var(--spacing-xs);
    margin: var(--spacing-xs) calc(-1 * var(--spacing-xs));
}

.json-index {
    color: var(--accent-blue);
    margin-right: var(--spacing-sm);
    min-width: 30px;
    display: inline-block;
    font-weight: 500;
}

/* 错误和警告面板样式 */
.error-panel {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    display: none;
}

.warning-panel {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--accent-yellow);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    display: none;
}

.error-panel.show,
.warning-panel.show {
    display: block;
}

.fixed-error {
    color: var(--accent-yellow);
}

.json-error-detail {
    color: var(--accent-red);
}

.error-type {
    font-weight: 600;
    color: var(--accent-red);
}

.error-suggestion {
    color: var(--text-secondary);
    font-style: italic;
    display: block;
    margin-top: var(--spacing-xs);
}

/* 压缩JSON样式 */
.json-minified {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* XML输出样式 */
.xml-output {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
    white-space: pre;
    color: var(--text-primary);
}

/* 展开/折叠动画 */
.json-object-content,
.json-array-content {
    animation: expandIn 0.2s ease-out;
}

@keyframes expandIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 双击选择保护 */
.json-tree * {
    user-select: text;
}

.json-toggle,
.json-bracket {
    user-select: none;
}

/* 容错解析结果样式 */
.json-tolerant-result {
    padding: 0;
    background: transparent;
}

/* 容错树形结构样式 */
.tolerant-tree-root {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.8;
}

.tree-line {
    display: flex;
    align-items: center;
    
    padding: 2px 0;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
    cursor: pointer;
}

.tree-line:hover {
    background: rgba(37, 99, 235, 0.05);
}

.tree-line.valid {
    color: var(--text-primary);
}

.tree-line.error {
    background: rgba(239, 68, 68, 0.08);
    border-left: 2px solid var(--accent-red);
    padding-left: var(--spacing-sm);
    margin: 2px 0;
}

.tree-line.error:hover {
    background: rgba(239, 68, 68, 0.12);
}

.line-indent {
    color: transparent;
    user-select: none;
}

.json-toggle {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 2px;
    margin-right: var(--spacing-xs);
    font-size: 0.75rem;
    line-height: 16px;
    transition: all 0.2s ease;
    user-select: none;
    transform: rotate(0deg);
}

.json-toggle:hover {
    background: var(--accent-blue);
    color: white;
}

.json-toggle::before {
    content: '▼';
    display: block;
}

.tree-content {
    display: block;
}

/* 容错树形结构的展开/折叠状态 */
.tree-line.expandable.collapsed .json-toggle {
    transform: rotate(-90deg);
}

.tree-line.expandable.collapsed + .tree-content {
    display: none;
}

/* 原有JSON树形结构的展开/折叠状态 */
.json-object.collapsed .json-toggle,
.json-array.collapsed .json-toggle {
    transform: rotate(-90deg);
}

.json-object.collapsed .json-object-content,
.json-array.collapsed .json-array-content {
    display: none;
}

/* 错误行样式 */
.error-icon {
    margin-right: var(--spacing-xs);
    font-size: 0.75rem;
}

.error-content {
    color: var(--text-secondary);
    font-style: italic;
    margin-right: var(--spacing-sm);
}

.error-hint {
    color: var(--accent-red);
    font-size: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    margin-left: auto;
}

/* JSON值类型样式增强 */
.json-array-preview,
.json-object-preview {
    color: var(--text-secondary);
    font-style: italic;
}

/* 树形结构行号样式 */
.tree-line-number {
    display: inline-block;
    width: 35px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-right: var(--spacing-sm);
    padding: 2px 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    font-family: var(--font-mono);
    user-select: none;
}

.tree-line-number.error-line-number {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    font-weight: 600;
}

/* 搜索高亮样式 */
.json-search-highlight {
    background: #ffeb3b;
    color: #333;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}

mark.json-search-highlight {
    background: #ffeb3b;
    color: #333;
}

/* 左右联动点击效果 */
.tree-line[data-line]:hover {
    background: rgba(37, 99, 235, 0.1);
    cursor: pointer;
}

.tree-line.clicked {
    background: rgba(37, 99, 235, 0.2);
}

/* 正则表达式工具样式 */
.regex-tester {
    height: 100%;
}

.regex-input {
    position: relative;
}

.regex-flags {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.flag-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
}

.flag-checkbox input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

.regex-matches {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
}

.match-highlight {
    background-color: rgba(37, 99, 235, 0.3);
    padding: 2px 4px;
    border-radius: 2px;
}

.match-details {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.match-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

/* JWT解析器样式 */
.jwt-parser {
    height: 100%;
}

.jwt-sections {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.jwt-section {
    flex: 1;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.jwt-section h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--accent-blue);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.jwt-section pre {
    background-color: var(--bg-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
}

.jwt-expired {
    color: var(--accent-red);
    font-weight: 600;
}

.jwt-valid {
    color: var(--accent-green);
    font-weight: 600;
}

/* Base64编解码工具样式 */
.base64-tool {
    height: 100%;
}

.file-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: var(--spacing-md);
}

.file-drop-zone:hover,
.file-drop-zone.dragover {
    border-color: var(--accent-blue);
    background-color: rgba(37, 99, 235, 0.05);
}

.file-drop-zone.dragover {
    background-color: rgba(37, 99, 235, 0.1);
}

.file-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* 时间戳转换工具样式 */
.timestamp-converter {
    height: 100%;
}

.timestamp-input-group {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.timestamp-input-group .input {
    flex: 1;
}

.timestamp-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.timestamp-result-item {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.timestamp-result-item h5 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.timestamp-result-item .value {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-primary);
}

/* 颜色转换器样式 */
.color-converter {
    height: 100%;
}

.color-preview-section {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.color-preview {
    width: 200px;
    height: 150px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.color-preview-main {
    width: 100%;
    height: 70%;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        transparent 25%, 
        transparent 75%, 
        rgba(255, 255, 255, 0.1) 75%),
        linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        transparent 25%, 
        transparent 75%, 
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.color-preview-info {
    padding: var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.75rem;
    text-align: center;
}

.color-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.color-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.color-input-group label {
    min-width: 60px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.color-slider {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    appearance: none;
}

.color-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
}

.color-value {
    min-width: 60px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* 加密解密工具样式 */
.encrypt-tool {
    height: 100%;
}

.crypto-options {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.crypto-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.crypto-option-group label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.radio-group {
    display: flex;
    gap: var(--spacing-md);
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.radio-group input[type="radio"] {
    accent-color: var(--accent-blue);
}

.key-section {
    margin-bottom: var(--spacing-lg);
}

.key-input-group {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.key-input {
    flex: 1;
}

.generate-key-btn {
    white-space: nowrap;
}

/* 进制转换器样式 */
.radix-converter {
    height: 100%;
}

.radix-input-section {
    margin-bottom: var(--spacing-lg);
}

.radix-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.radix-result-item {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.radix-result-item h5 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.radix-result-item .value {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--text-primary);
    word-break: break-all;
}

.bit-operations {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
}

.bit-operations h4 {
    margin-bottom: var(--spacing-md);
    color: var(--accent-blue);
}

.bit-op-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Linux命令速查表样式 */
.linux-commands {
    height: 100%;
}

.command-search {
    margin-bottom: var(--spacing-lg);
}

.command-categories {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.category-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.category-btn:hover,
.category-btn.active {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.commands-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    height: calc(100% - 120px);
    overflow: hidden;
}

.commands-list {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow-y: auto;
}

.command-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.command-item:hover,
.command-item.active {
    background-color: var(--bg-elevated);
}

.command-item:last-child {
    border-bottom: none;
}

.command-name {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: var(--spacing-xs);
}

.command-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.command-detail {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.command-detail h3 {
    color: var(--accent-blue);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-mono);
}

.command-detail h4 {
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.command-detail pre {
    background-color: var(--bg-primary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    overflow-x: auto;
    margin: var(--spacing-sm) 0;
}

.command-detail table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.command-detail th,
.command-detail td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
}

.command-detail th {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: 600;
}

/* 错误和提示样式 */
.error-panel {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    display: none;
}

.error-panel.show {
    display: block;
}

.error-panel .error-icon {
    color: var(--accent-red);
    margin-right: var(--spacing-sm);
}

.success-panel {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--accent-green);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    display: none;
}

.success-panel.show {
    display: block;
}

.success-panel .success-icon {
    color: var(--accent-green);
    margin-right: var(--spacing-sm);
}

/* 选择框和输入框增强样式 */
.select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.input {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.input-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 80px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .editor-section {
        flex-direction: column;
    }
    
    /* JSON工具响应式 */
    .json-controls {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .json-control-group {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .json-search-wrapper {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .json-search {
        width: 100%;
    }
    
    .json-workspace {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .json-editor-container.show-line-numbers .json-line-numbers {
        width: 40px;
    }
    
    .json-statistics {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    
    .timestamp-results {
        grid-template-columns: 1fr;
    }
    
    .color-preview-section {
        flex-direction: column;
    }
    
    .color-preview {
        width: 100%;
        height: 120px;
    }
    
    .radix-results {
        grid-template-columns: 1fr;
    }
    
    .commands-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    
    .crypto-options {
        flex-direction: column;
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar-group {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .jwt-sections {
        flex-direction: column;
    }
    
    .color-input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .color-input-group label {
        min-width: auto;
    }
    
    .timestamp-input-group {
        flex-direction: column;
    }
    
    .key-input-group {
        flex-direction: column;
    }
    
    .bit-op-buttons {
        justify-content: center;
    }
    
    .command-categories {
        justify-content: center;
    }
}

/* 确保行号和内容对齐 */
.json-tree-line-numbers,
.json-tree {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 21px;
}

/* 滚动同步 */
.json-tree-with-numbers .json-tree::-webkit-scrollbar {
    width: 8px;
}

.json-tree-with-numbers .json-tree::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.json-tree-with-numbers .json-tree::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.json-tree-with-numbers .json-tree::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* JSON行的切换按钮样式调整 */
.json-line .json-toggle {
    margin-left: var(--spacing-xs);
}

/* 控制右侧行号显示/隐藏 */
.json-tree-container:not(.with-line-numbers) .json-tree-line-numbers {
    display: none !important;
}

.json-tree-container.with-line-numbers .json-tree-line-numbers {
    display: block;
}

/* 验证和操作结果样式 */
.json-success,
.json-error {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.json-success {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.json-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.json-success h4 {
    color: var(--accent-green);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1rem;
}

.json-error h4 {
    color: var(--accent-red);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1rem;
}

/* 新的简洁验证错误样式 */
.json-validation-error {
    position: relative;
    padding: 15px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 6px;
    margin: 10px 0;
}

/* 错误提示行号容器 */
.json-validation-error.with-line-numbers {
    padding-left: 50px;
}

.json-error-line-numbers {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    padding: 15px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-right: 1px solid var(--border-color);
    border-radius: 6px 0 0 6px;
    overflow-y: hidden;
    user-select: none;
}

.json-error-line-numbers .line-number {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--text-muted);
    padding-right: var(--spacing-xs);
}

.json-error-line-numbers .line-number:hover {
    color: var(--text-primary);
}

.json-validation-error .error-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.json-validation-error .error-icon {
    font-size: 1.2rem;
}

.json-validation-error .error-title {
    color: var(--accent-red);
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
}

.json-validation-error .error-location {
    background-color: var(--accent-red);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.json-validation-error .error-message {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: rgba(239, 68, 68, 0.05);
    border-radius: var(--radius-sm);
    border-left: 2px solid rgba(239, 68, 68, 0.3);
}

.json-validation-error .error-preview {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    word-break: break-all;
}

.json-validation-error .context-before {
    color: var(--text-secondary);
}

.json-validation-error .context-error {
    background-color: var(--accent-red);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 600;
    animation: errorBlink 1.5s infinite;
}

.json-validation-error .context-after {
    color: var(--text-secondary);
}

.json-validation-error .error-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.json-validation-error .error-actions .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
}

@keyframes errorBlink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.7; }
}

.validation-success {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.validation-success p {
    margin: 0;
}

.validation-success .json-basic-stats {
    margin: 0;
}

.validation-success .validation-actions {
    margin-top: var(--spacing-sm);
}

.json-basic-stats,
.error-summary {
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin: var(--spacing-sm) 0;
}

.json-basic-stats .stat-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 0.875rem;
}

.json-basic-stats .stat-item label {
    color: var(--text-secondary);
    font-weight: 500;
}

.json-basic-stats .stat-item span {
    color: var(--text-primary);
    font-weight: 600;
}

.error-summary p {
    margin: var(--spacing-xs) 0;
    font-size: 0.875rem;
}

.error-context {
    margin: var(--spacing-md) 0;
}

.error-context h5 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 var(--spacing-xs) 0;
}

.error-context-display {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    white-space: pre-wrap;
}

.error-suggestions {
    margin: var(--spacing-md) 0;
}

.error-suggestions h5 {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 var(--spacing-xs) 0;
}

.error-suggestions ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.error-suggestions li {
    margin: var(--spacing-xs) 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.validation-actions,
.result-actions {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.json-result {
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.4;
    border: 1px solid var(--border-color);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
}

/* JSON输出消息样式 */
.json-output-message {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    border-left: 3px solid;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-out;
}

.json-output-message-success {
    border-left-color: #22c55e;
    background-color: rgba(34, 197, 94, 0.1);
    color: #166534;
}

.json-output-message-error {
    border-left-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.json-output-message-warning {
    border-left-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.json-output-message-info {
    border-left-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    color: #1e40af;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.json-tree-container.with-line-numbers .tree-line-number-inline {
    display: none;
}

/* 占位切换图标（无内容折叠时保持对齐） */
.json-empty-toggle {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    visibility: hidden; /* 不显示但占位 */
}

/* 原始字符树折叠状态 */
.json-line.collapsed .json-toggle {
    transform: rotate(-90deg);
}

/* 解决 .json-output 设为 white-space: pre 导致验证信息出现大量空白的问题 */
/*
.json-output .json-success,
.json-output .json-error,
.json-output .json-validation-error,
.json-output .validation-success,
.json-output .validation-error {
    white-space: normal;   !* 恢复正常折叠 *!
} */

/* =============================
   JSON 输出区域增强
   ============================= */
.output-wrapper {
    flex: 1;                /* 填满父列高度 */
    min-width: 0;           /* 关键：允许在 flex 布局中收缩，而不是撑宽 */
    display: flex;
    flex-direction: column; /* 保证内部 CodeMirror 填充 */
    overflow: hidden;       /* 滚动由内部组件处理 */
}

/* CodeMirror 在输出区域内的尺寸约束 */
.output-wrapper .CodeMirror {
    flex: 1;
    width: 100% !important; /* 始终跟随父容器宽度 */
    min-width: 0;
}