*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f1117;--color-surface: #1a1d27;--color-surface-hover: #1f2335;--color-border: #2e3148;--color-accent: #6c63ff;--color-accent-hover: #7c73ff;--color-valid: #22c55e;--color-valid-bg: rgba(34, 197, 94, .1);--color-invalid: #ef4444;--color-invalid-bg: rgba(239, 68, 68, .1);--color-text-primary: #e2e8f0;--color-text-muted: #64748b;--color-text-code: #a9b1d6;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius: 8px;--radius-lg: 12px}html,body{height:100%}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}.app{max-width:1100px;margin:0 auto;padding:40px 24px;width:100%}.header{margin-bottom:36px;text-align:center}.header h1{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--color-text-primary)}.header p{margin-top:6px;color:var(--color-text-muted);font-size:14px}.main-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}@media(max-width:768px){.main-panel{grid-template-columns:1fr}}.panel-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.panel-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);padding:12px 16px;border-bottom:1px solid var(--color-border);background:#ffffff05}.json-editor{width:100%;min-height:380px;background:transparent;border:none;outline:none;color:var(--color-text-code);font-family:var(--font-mono);font-size:13px;line-height:1.7;padding:16px;resize:vertical}.json-editor::placeholder{color:var(--color-text-muted);font-style:italic}.mode-selector{display:flex;gap:4px;margin-bottom:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:4px;width:fit-content}.mode-tab{padding:6px 20px;border-radius:calc(var(--radius) - 2px);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--color-text-muted);transition:background .15s,color .15s}.mode-tab:hover{color:var(--color-text-primary)}.mode-tab.active{background:var(--color-accent);color:#fff}.action-bar{display:flex;gap:10px;padding:16px 0;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:var(--radius);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:background .15s,opacity .15s,transform .1s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-validate{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-validate:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-accent)}.btn-beautify{background:var(--color-accent);color:#fff}.btn-beautify:hover:not(:disabled){background:var(--color-accent-hover)}.btn-convert{background:transparent;color:var(--color-text-primary);border:1px solid var(--color-accent);color:var(--color-accent)}.btn-convert:hover:not(:disabled){background:#6c63ff1a}.btn-copy{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);padding:6px 14px;font-size:12px}.btn-copy:hover:not(:disabled){color:var(--color-text-primary);border-color:var(--color-text-muted)}.btn-copy.copied{color:var(--color-valid);border-color:var(--color-valid)}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-size:12px;font-weight:500}.status-badge.valid{background:var(--color-valid-bg);color:var(--color-valid);border:1px solid rgba(34,197,94,.25)}.status-badge.invalid{background:var(--color-invalid-bg);color:var(--color-invalid);border:1px solid rgba(239,68,68,.25)}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-badge.valid .status-dot{background:var(--color-valid)}.status-badge.invalid .status-dot{background:var(--color-invalid)}.error-message{margin-top:10px;padding:10px 14px;background:var(--color-invalid-bg);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius);color:var(--color-invalid);font-family:var(--font-mono);font-size:12px;line-height:1.5;word-break:break-word}.result-panel{display:flex;flex-direction:column}.result-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--color-border);background:#ffffff05}.result-header .panel-label{padding:0;border:none;background:none}.result-code{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--color-text-code);padding:16px;white-space:pre;overflow-x:auto;min-height:380px}.result-empty{display:flex;align-items:center;justify-content:center;min-height:380px;color:var(--color-text-muted);font-size:13px}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}.btn-validate .spinner{border-color:#64748b4d;border-top-color:var(--color-text-primary)}@keyframes spin{to{transform:rotate(360deg)}}