/* ===== JSON Formatter Layout ===== */
.json-layout { display:flex; flex-direction:column; gap:0; }
.json-tabs { display:flex; gap:0; border-bottom:3px solid var(--border); margin-bottom:1.25rem; }
.json-tab { flex:1; padding:0.75rem 1rem; font-size:0.925rem; font-weight:600; border:none; background:var(--bg-alt); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; border-radius:var(--radius-sm) var(--radius-sm) 0 0; position:relative; bottom:-3px; border:3px solid transparent; border-bottom:none; }
.json-tab:hover { background:var(--bg-card); color:var(--text); }
.json-tab.active { background:var(--bg-card); color:var(--accent); border-color:var(--border); border-bottom-color:var(--bg-card); z-index:1; }
.json-tab:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.json-panel { display:flex; flex-direction:column; gap:0.75rem; }
.json-textarea { width:100%; height:200px; resize:vertical; min-height:140px; max-height:500px; padding:0.75rem 0.875rem; font-family:'Courier New',Courier,monospace; font-size:0.85rem; line-height:1.55; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); transition:border-color 0.15s,box-shadow 0.15s; outline:none; box-sizing:border-box; tab-size:2; }
.json-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.json-textarea[readonly] { background:var(--bg-alt); cursor:default; opacity:0.95; }
.json-textarea[aria-invalid="true"] { border-color:#e53935; box-shadow:0 0 0 3px rgba(229,57,53,0.15); }
.json-output-area { position:relative; }
.json-line-numbers { position:absolute; left:0; top:0; bottom:0; width:48px; background:var(--bg); border-right:1px solid var(--border); border-radius:var(--radius-sm) 0 0 var(--radius-sm); padding:0.75rem 0; overflow:hidden; text-align:right; font-family:'Courier New',Courier,monospace; font-size:0.8rem; line-height:1.55; color:var(--text-tertiary); pointer-events:none; user-select:none; display:none; }
.json-line-numbers.show { display:block; }
.json-line-numbers span { display:block; padding-right:8px; }
.json-textarea.with-lines { padding-left:60px; }
.json-textarea-footer { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; margin-top:0.25rem; }
.char-count { font-size:0.75rem; color:var(--text-tertiary); font-weight:500; }
.char-count.warning { color:#e65100; font-weight:600; }
.json-textarea-actions { display:flex; gap:0.375rem; }
.btn-sm { padding:0.35rem 0.65rem; font-size:0.775rem; font-weight:600; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.btn-sm:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.json-options { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:0.625rem 0.875rem; background:var(--bg-alt); border:2px solid var(--border); border-radius:var(--radius-sm); }
.option-group { display:flex; align-items:center; gap:0.5rem; }
.option-group label { font-size:0.8rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.option-group select { padding:0.35rem 0.5rem; font-size:0.8rem; font-weight:500; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); cursor:pointer; outline:none; }
.option-group select:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }
.checkbox-label { cursor:pointer; user-select:none; display:flex !important; align-items:center; gap:0.4rem; }
.checkbox-label input[type="checkbox"] { width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.checkbox-label span { font-size:0.8rem; font-weight:500; color:var(--text); }
.json-error-box { display:none; padding:0.75rem 1rem; background:#FFF3F0; border:2px solid #E53935; border-radius:var(--radius-sm); margin-bottom:0.5rem; }
[data-theme="dark"] .json-error-box { background:rgba(229,57,53,0.1); }
.json-error-box.show { display:block; }
.json-error-title { font-weight:700; color:#C62828; font-size:0.85rem; margin-bottom:0.25rem; }
[data-theme="dark"] .json-error-title { color:#EF9A9A; }
.json-error-detail { font-size:0.8rem; color:#5A5A7A; font-family:'Courier New',monospace; }
[data-theme="dark"] .json-error-detail { color:#9898B0; }
.json-tree { display:none; padding:1rem; background:var(--bg-alt); border:2px solid var(--border); border-radius:var(--radius-sm); max-height:500px; overflow-y:auto; font-family:'Courier New',Courier,monospace; font-size:0.8rem; line-height:1.6; }
.json-tree.show { display:block; }
.json-tree-node { padding-left:1.25rem; position:relative; }
.json-tree-toggle { cursor:pointer; user-select:none; display:inline-block; width:1rem; text-align:center; color:var(--accent); font-weight:700; margin-right:0.25rem; transition:transform 0.15s; }
.json-tree-toggle.collapsed { transform:rotate(-90deg); }
.json-tree-key { color:var(--accent-2); font-weight:600; }
[data-theme="dark"] .json-tree-key { color:#A78BFA; }
.json-tree-string { color:#2E7D32; }
[data-theme="dark"] .json-tree-string { color:#66BB6A; }
.json-tree-number { color:#1565C0; }
[data-theme="dark"] .json-tree-number { color:#64B5F6; }
.json-tree-boolean { color:#6A1B9A; }
[data-theme="dark"] .json-tree-boolean { color:#CE93D8; }
.json-tree-null { color:#757575; font-style:italic; }
[data-theme="dark"] .json-tree-null { color:#9E9E9E; }
.json-tree-bracket { color:var(--text-tertiary); font-weight:700; }
.json-tree-count { font-size:0.7rem; color:var(--text-tertiary); margin-left:0.5rem; }
.json-stats { display:flex; flex-wrap:wrap; gap:1rem; padding:0.625rem 0.875rem; background:var(--bg-alt); border:2px solid var(--border); border-radius:var(--radius-sm); margin-top:0.5rem; }
.json-stat-item { display:flex; align-items:center; gap:0.35rem; }
.json-stat-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); }
.json-stat-value { font-size:0.85rem; font-weight:700; color:var(--text); font-family:'Courier New',monospace; }
.json-dropzone { border:3px dashed var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; transition:all 0.2s; cursor:pointer; background:var(--bg-alt); margin-bottom:0.5rem; }
.json-dropzone.dragover { border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 20px var(--accent-glow); }
.json-dropzone-text { font-size:0.9rem; color:var(--text-secondary); font-weight:500; }
.json-dropzone-icon { font-size:2rem; display:block; margin-bottom:0.5rem; }
.json-file-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#btnProcess.format-mode { background:#1b5e20; border:2px solid #2e7d32; box-shadow:0 4px 16px rgba(27,94,32,0.35); }
#btnProcess.format-mode:hover:not(:disabled) { box-shadow:0 6px 24px rgba(27,94,32,0.5); }
#btnProcess.validate-mode { background:var(--accent); border:2px solid var(--accent); box-shadow:0 4px 16px var(--accent-glow); }
#btnProcess.collapse-mode { background:#1565C0; border:2px solid #1976D2; box-shadow:0 4px 16px rgba(21,101,192,0.35); }
#btnProcess.collapse-mode:hover:not(:disabled) { box-shadow:0 6px 24px rgba(21,101,192,0.5); }
.processing-spinner { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.5rem; font-size:0.85rem; font-weight:600; color:var(--accent); min-height:40px; }
.processing-spinner .spinner-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:json-bounce 0.5s ease-in-out infinite alternate; }
.processing-spinner .spinner-dot:nth-child(2) { animation-delay:0.15s; }
.processing-spinner .spinner-dot:nth-child(3) { animation-delay:0.3s; }
@keyframes json-bounce { from { transform:translateY(0); opacity:0.4; } to { transform:translateY(-8px); opacity:1; } }
.json-validate-success { display:none; padding:0.75rem 1rem; background:#E8F5E9; border:2px solid #4CAF50; border-radius:var(--radius-sm); margin-bottom:0.5rem; }
[data-theme="dark"] .json-validate-success { background:rgba(76,175,80,0.1); }
.json-validate-success.show { display:block; }
.json-validate-success-title { font-weight:700; color:#2E7D32; font-size:0.85rem; }
[data-theme="dark"] .json-validate-success-title { color:#81C784; }
@media (max-width:800px) { .json-tab { font-size:0.85rem; padding:0.6rem 0.75rem; } .json-textarea { font-size:0.8rem; height:150px; min-height:110px; } .json-options { flex-direction:column; align-items:flex-start; } }
@media (max-width:480px) { .json-tab { font-size:0.78rem; padding:0.45rem 0.5rem; } .json-textarea-footer { flex-direction:column; align-items:flex-start; } .btn-sm { font-size:0.72rem; padding:0.3rem 0.5rem; } .json-options { padding:0.5rem 0.625rem; } .option-group select { font-size:0.75rem; } .checkbox-label span { font-size:0.75rem; } .json-stats { gap:0.5rem; } .json-line-numbers { width:36px; } .json-textarea.with-lines { padding-left:46px; } }