:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background-color:#f3f4f6}body,html,#root{margin:0;padding:0;height:100%}.page-root{min-height:100vh;display:flex;flex-direction:column}.page-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #e5e7eb;background:#fff}.page-header h1{margin:0;font-size:20px}.header-subtitle{margin:4px 0 0;font-size:13px;color:#6b7280}.badge{padding:2px 8px;border-radius:999px;border:1px solid #d1d5db;font-size:11px}.page-main{flex:1;padding:8px 16px 12px;display:flex;flex-direction:column;gap:8px}.top-nav{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.nav-link{font-size:12px;padding:4px 8px;border-radius:999px;text-decoration:none;color:#374151;border:1px solid transparent}.nav-link-active{background:#111827;color:#f9fafb;border-color:#111827}.page-content{flex:1;margin-top:4px}.page-footer{padding:8px 16px 12px;font-size:12px;color:#6b7280;border-top:1px solid #e5e7eb;background:#f9fafb}.hero{margin-bottom:8px;padding:10px 12px;border-radius:10px;background:#eef2ff;border:1px solid #e5e7eb}.hero h2{margin:0 0 4px;font-size:18px}.hero p{margin:0;font-size:13px;color:#4b5563}.app-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;height:calc(100vh - 270px)}.panel{display:flex;flex-direction:column;border-radius:10px;background:#fff;border:1px solid #e5e7eb;overflow:hidden}.panel-header{padding:8px 10px;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;align-items:center}.panel-body{padding:8px;flex:1;overflow:auto;font-size:13px}.panel-actions button,.tabs .tab{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid #d1d5db;background:#f3f4f6;cursor:pointer}.tabs{display:flex;gap:4px}.tab-active{background:#111827;color:#fff;border-color:#111827}.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 6px;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6;background:#f9fafb}.editor-toolbar button,.editor-toolbar .toolbar-button{font-size:12px;padding:3px 8px;border-radius:4px;border:1px solid #d1d5db;background:#fff;cursor:pointer}.editor-toolbar button:hover,.editor-toolbar .toolbar-button:hover{background:#f3f4f6}.file-input-hidden{display:none}.editor-textarea{flex:1;border:none;border-top:1px solid #f3f4f6;padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;resize:none;outline:none}.editor-textarea.small{height:200px}.status-pill{margin-left:8px;font-size:11px;padding:2px 6px;border-radius:999px}.status-ok{background:#dcfce7;color:#166534}.status-error{background:#fee2e2;color:#b91c1c}.status-parsing{background:#e0f2fe;color:#0369a1}.error-text{font-size:11px;color:#b91c1c;margin-top:4px}.pretty-container{display:flex;flex-direction:column;height:100%}.pretty-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.pretty-pre{flex:1;margin:0;padding:8px;background:#f9fafb;border-radius:6px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.pretty-pre.small{max-height:260px}.hint-text{font-size:11px;color:#6b7280}.info-text{font-size:12px;color:#4b5563}.tree-root{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px}.tree-node-label{cursor:default;white-space:nowrap}.collapse-toggle{display:inline-block;width:14px;margin-right:4px;cursor:pointer}.node-key{color:#2563eb}.node-value-string{color:#15803d}.node-value-number,.node-value-boolean{color:#b91c1c}.node-value-null{color:#6b7280}.tree-children{margin-left:12px}.convert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.convert-footer{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin-top:4px}.radio-label{font-size:12px;display:flex;align-items:center;gap:4px}.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.single-grid{display:block}.vertical-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}.split-column{display:flex;flex-direction:column;gap:6px}.field-label{font-size:12px;font-weight:500;color:#4b5563}.text-input,.select-input{border-radius:6px;border:1px solid #d1d5db;padding:6px 8px;font-size:13px}.paths-list{max-height:260px;overflow:auto;border-radius:6px;border:1px solid #e5e7eb;padding:4px 6px;background:#f9fafb}.path-row{display:flex;justify-content:space-between;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;padding:2px 0}.inline-button{font-size:11px;padding:2px 6px;border-radius:999px;border:1px solid #d1d5db;background:#fff;cursor:pointer}.log-filters{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.log-table-wrapper{max-height:220px;overflow:auto;border-radius:6px;border:1px solid #e5e7eb}.log-table{width:100%;border-collapse:collapse;font-size:12px}.log-table th,.log-table td{padding:4px 6px;border-bottom:1px solid #e5e7eb}.log-message-cell{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-table tr:hover{background:#f3f4f6}.tokens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.button-row{display:flex;gap:6px;margin:4px 0}.uuid-section{display:flex;flex-direction:column;gap:8px}.ml10{margin-left:10px}@media(max-width:960px){.app-grid,.convert-grid,.diff-grid,.vertical-split,.tokens-grid{grid-template-columns:minmax(0,1fr);height:auto}}