/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #2A2E39;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
}

.pt-safe {
    padding-top: env(safe-area-inset-top);
}

/* Syntax Highlighting */
.json-key {
    color: #86efac;
}

/* Emerald */
.json-string {
    color: #93c5fd;
}

/* Blue */
.json-number {
    color: #fca5a5;
}

/* Red */
.json-boolean {
    color: #fcd34d;
    font-weight: 500;
}

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

/* Muted */
.json-punct {
    color: #d1d5db;
}

/* Gray */

/* Token Visualizer */
.token-header {
    color: #F59E0B;
}

.token-payload {
    color: #A78BFA;
}

.token-sig {
    color: #34D399;
}

.token-dot {
    color: #6B7280;
    font-weight: bold;
}

/* Status Badges */
.badge-valid {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-expired {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.badge-invalid {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Textarea color matching */
textarea {
    color: #F3F4F6 !important;
}