.highlighted-result-container{display:flex;flex-direction:column;gap:1rem}.test-result-output.highlighted{background:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;font-family:Courier New,Monaco,Menlo,monospace;font-size:14px;line-height:1.5}.json-container{display:flex;flex-direction:column;min-height:120px;background:#1a1a1a}.json-line{display:flex;align-items:flex-start;min-height:1.5em;border-bottom:1px solid rgba(255,255,255,.05)}.json-line:hover{background:#ffffff05}.line-number{background:#2a2a2a;color:#666;padding:0 12px;min-width:40px;text-align:right;border-right:1px solid #333;user-select:none;font-size:12px;display:flex;align-items:center;justify-content:center}.json-content{flex:1;color:#e4e4e4;white-space:pre}.text-content{padding:16px;color:#e4e4e4;white-space:pre-wrap;word-break:break-word}.highlighted-value{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:2px 6px;border-radius:4px;cursor:help;position:relative;font-weight:600;box-shadow:0 2px 4px #4f46e54d;transition:all .2s ease;border:1px solid rgba(255,255,255,.1)}.highlighted-value:hover{background:linear-gradient(135deg,#5b52e6,#8b47ed);transform:translateY(-1px);box-shadow:0 4px 12px #4f46e566;z-index:10}.highlighted-value:before{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#2d2d2d;color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;border:1px solid #4a4a4a;box-shadow:0 4px 12px #0000004d;z-index:1000;margin-bottom:5px;font-weight:400}.highlighted-value:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#2d2d2d;opacity:0;visibility:hidden;transition:all .2s ease;z-index:1000}.highlighted-value:hover:before,.highlighted-value:hover:after{opacity:1;visibility:visible}.replacement-legend{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:16px;font-size:14px}.legend-title{font-weight:600;color:#495057;margin-bottom:12px;display:flex;align-items:center;gap:8px}.legend-title:before{content:"🎨";font-size:16px}.legend-items{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;padding:8px;background:#fff;border:1px solid #e9ecef;border-radius:6px;transition:all .2s ease}.legend-item:hover{background:#f8f9fa;border-color:#dee2e6;transform:translate(2px)}.legend-color{width:16px;height:16px;border-radius:3px;flex-shrink:0}.legend-text{display:flex;align-items:center;gap:4px;flex:1}.legend-text code{background:#e9ecef;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:12px;color:#495057}.legend-text strong{color:#4f46e5;font-weight:600}.legend-text small{color:#6c757d;font-style:italic}@media (prefers-color-scheme: dark){.replacement-legend{background:#2d2d2d;border-color:#4a4a4a;color:#e4e4e4}.legend-title{color:#e4e4e4}.legend-item{background:#3a3a3a;border-color:#4a4a4a;color:#e4e4e4}.legend-item:hover{background:#404040;border-color:#555}.legend-text code{background:#4a4a4a;color:#e4e4e4}.legend-text strong{color:#8b5cf6}.legend-text small{color:#9ca3af}}@media (max-width: 768px){.json-line{font-size:12px}.line-number{min-width:35px;padding:0 8px;font-size:11px}.highlighted-value{padding:1px 4px;font-size:12px}.highlighted-value:before{font-size:11px;padding:6px 10px}.replacement-legend{padding:12px;font-size:13px}.legend-items{gap:6px}.legend-item{padding:6px;flex-direction:column;align-items:flex-start;gap:4px}}@keyframes highlight-pulse{0%{box-shadow:0 2px 4px #4f46e54d}50%{box-shadow:0 4px 12px #4f46e580}to{box-shadow:0 2px 4px #4f46e54d}}.highlighted-value{animation:highlight-pulse 2s ease-in-out}.highlighted-result-container.loading{opacity:.7;pointer-events:none}.highlighted-result-container.loading:after{content:"";position:absolute;inset:0;background:#ffffff1a;display:flex;align-items:center;justify-content:center}.highlighted-value:focus{outline:2px solid #4f46e5;outline-offset:2px}.legend-item:focus-within{outline:2px solid #4f46e5;outline-offset:2px}.json-content::-webkit-scrollbar{height:6px}.json-content::-webkit-scrollbar-track{background:#2a2a2a}.json-content::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:3px}.json-content::-webkit-scrollbar-thumb:hover{background:#5a5a5a}
