/* json-validator — generated by scripts/tools-v2/build-tool-css.js from
   views/v1-backup/tools-json-validator.ejs. DO NOT EDIT BY HAND: npm run test:tools-page-v2
   regenerates it and fails if this file has drifted.

   The shared vocabulary (.btn-primary, .form-input, .tool-card, .badge-*,
   .toast-*, #map, headings) is NOT here — public/css/tools-page-v2.css
   declares it once for every tool page. What is left is this tool's own,
   with its colour literals resolved to theme tokens and every selector
   scoped to the tool body so nothing reaches the shared header. */

.tpv2-body .highlight-line {
  background-color: var(--sk-info-soft) !important;
  animation: highlight-fade 2s ease-out;
}

@keyframes highlight-fade {
  0% { background-color: var(--sk-info-soft) !important; }
  100% { background-color: var(--sk-info-soft) !important; }
}

.tpv2-body .CodeMirror {
  border: 2px solid var(--sk-border-2);
  border-radius: 0.5rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.tpv2-body .CodeMirror-focused {
  border-color: var(--sk-info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-info) 10%, transparent);
}

.tpv2-body .CodeMirror-gutters {
  background-color: var(--sk-surface);
  border-right: 1px solid var(--sk-border-2);
}

@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.tpv2-body #progressBar {
  animation: progress-pulse 2s infinite;
}

.tpv2-body .cursor-pointer:hover {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
.tpv2-body .grid-cols-4 {
  grid-template-columns: repeat(2, 1fr);
}

.tpv2-body .lg\:grid-cols-4 {
  grid-template-columns: repeat(1, 1fr);
}

.tpv2-body .lg\:grid-cols-5 {
  grid-template-columns: repeat(1, 1fr);
}
}

.tpv2-body #codeContext pre {
  background: var(--sk-bg);
  border-radius: 0.5rem;
}

.tpv2-body .fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.tpv2-body input[type="file"] {
  padding: 0.75rem;
  background: var(--sk-surface);
}

.tpv2-body input[type="file"]:hover {
  background-color: var(--sk-surface);
}

.tpv2-body #jsonTree {
  white-space: pre-wrap;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.tpv2-body #errorList,
.tpv2-body #warningList,
.tpv2-body #infoList,
.tpv2-body #jsonTree {
  scrollbar-width: thin;
  scrollbar-color: var(--sk-border) var(--sk-border);
}

.tpv2-body #errorList::-webkit-scrollbar,
.tpv2-body #warningList::-webkit-scrollbar,
.tpv2-body #infoList::-webkit-scrollbar,
.tpv2-body #jsonTree::-webkit-scrollbar {
  width: 8px;
}

.tpv2-body #errorList::-webkit-scrollbar-track,
.tpv2-body #warningList::-webkit-scrollbar-track,
.tpv2-body #infoList::-webkit-scrollbar-track,
.tpv2-body #jsonTree::-webkit-scrollbar-track {
  background-color: var(--sk-surface);
  border-radius: 4px;
}

.tpv2-body #errorList::-webkit-scrollbar-thumb,
.tpv2-body #warningList::-webkit-scrollbar-thumb,
.tpv2-body #infoList::-webkit-scrollbar-thumb,
.tpv2-body #jsonTree::-webkit-scrollbar-thumb {
  background: var(--sk-border);
  border-radius: 4px;
}

.tpv2-body #errorList::-webkit-scrollbar-thumb:hover,
.tpv2-body #warningList::-webkit-scrollbar-thumb:hover,
.tpv2-body #infoList::-webkit-scrollbar-thumb:hover,
.tpv2-body #jsonTree::-webkit-scrollbar-thumb:hover {
  background: var(--sk-border);
}

.tpv2-body .group:hover .group-hover\:block {
  display: block !important;
}

.tpv2-body button {
  transition: all 0.2s ease-in-out;
}

.tpv2-body button:hover {
  transform: translateY(-1px);
}

.tpv2-body button:active {
  transform: translateY(0);
}

.tpv2-body button:focus,
.tpv2-body input:focus,
.tpv2-body .CodeMirror-focused {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-info) 10%, transparent);
}

.tpv2-body #shareModal {
  backdrop-filter: blur(4px);
}

.tpv2-body .fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tpv2-body #progressBar {
  background: linear-gradient(90deg, var(--sk-info), var(--sk-primary));
  background-size: 200% 100%;
  animation: progress-gradient 2s ease-in-out infinite;
}

@keyframes progress-gradient {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tpv2-body .grid > div:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-in-out;
}

.tpv2-body .space-y-3 > * + * {
  margin-top: 0.75rem;
}

.tpv2-body .rounded-lg {
  border-radius: 0.5rem;
}

.tpv2-body .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.tpv2-body .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}