body { font-family: Helvetica, Arial, sans-serif; }
.sidebar-btn.active { background-color: #eff6ff; border-left: 3px solid #3b82f6; }
.json-key  { color: #7c3aed; font-weight: 600; }
.json-str  { color: #15803d; }
.json-num  { color: #1d4ed8; }
.json-bool { color: #c2410c; }
.json-null { color: #9ca3af; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Form fields ── */
.fld { display: flex; flex-direction: column; gap: 3px; }
.fld label {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8;
}
.fld label .tag {
    display: inline-block; padding: 1px 4px; border-radius: 3px;
    font-size: 8px; font-weight: 800; line-height: 1.4;
}
.fld input, .fld select {
    width: 100%; border: 1.5px solid #e2e8f0; border-radius: 6px;
    padding: 5px 8px; font-size: 11px; background: #fff; color: #1e293b;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.fld input:hover, .fld select:hover { border-color: #94a3b8; }
.fld input:focus, .fld select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.fld-date input  { border-left: 3px solid #3b82f6; }
.fld-time input  { border-left: 3px solid #6366f1; }
.fld-number input { border-left: 3px solid #10b981; text-align: right; }
.fld-select select { border-left: 3px solid #8b5cf6; cursor: pointer; }
.fld-password input { border-left: 3px solid #f59e0b; letter-spacing: .08em; }
.fld-text input  { border-left: 3px solid #64748b; }