/* Jr Labs RC14 — JSON Formatter */

.json-formatter-content{
  width:min(1460px,calc(100% - 48px))!important;
  padding-bottom:64px;
}
.json-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:16px 0 20px;
}
.json-kicker{
  display:block;
  margin-bottom:8px;
  color:#6d28d9;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.json-hero h2{
  margin:0;
  color:#101827;
  font-size:42px;
  line-height:1.06;
  letter-spacing:-.055em;
}
.json-hero p{
  max-width:760px;
  margin:9px 0 0;
  color:#66758a;
  font-size:13.5px;
  line-height:1.6;
}
.json-privacy-pill{
  min-width:265px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}
.json-privacy-pill > span{
  width:28px;height:28px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:9px;
  background:#eefbf3;
  color:#16803a;
  font-weight:950;
}
.json-privacy-pill b,
.json-privacy-pill small{display:block}
.json-privacy-pill b{color:#334155;font-size:10.5px}
.json-privacy-pill small{margin-top:2px;color:#8a96a8;font-size:9.5px}

.json-workbench{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:16px;
  align-items:start;
}
.json-panel{
  min-width:0;
  border:1px solid #e1e6ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.035);
  overflow:hidden;
}
.json-panel-head{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid #edf0f4;
}
.json-panel-head h3{margin:0;color:#172033;font-size:14px}
.json-panel-head p{margin:4px 0 0;color:#8b97a8;font-size:10px}
.json-head-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.json-drop-zone{
  position:relative;
  margin:14px;
  border:1px solid #e1e6ed;
  border-radius:15px;
  background:#fbfcfe;
  overflow:hidden;
}
#jsonInput{
  width:100%;
  min-height:430px;
  display:block;
  resize:vertical;
  padding:16px;
  border:0;
  outline:0;
  background:transparent;
  color:#1f2937;
  font:12.5px/1.62 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  tab-size:2;
}
#jsonInput::placeholder{color:#a5afbd}
.json-drop-zone.is-dragging{
  border-color:#a5b4fc;
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}
.json-drop-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:5px;
  background:rgba(248,250,252,.94);
  color:#64748b;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
}
.json-drop-zone.is-dragging .json-drop-overlay{opacity:1}
.json-drop-overlay strong{color:#334155;font-size:13px}
.json-drop-overlay span{font-size:10px}

.json-input-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px 13px;
}
.json-file-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #dde3eb;
  border-radius:10px;
  background:#fff;
  color:#334155;
  font-size:10.5px;
  font-weight:900;
  cursor:pointer;
}
.json-indent-control{
  display:flex;
  align-items:center;
  gap:8px;
  color:#66758a;
  font-size:10px;
  font-weight:800;
}
.json-indent-control select{
  min-height:36px;
  padding:0 30px 0 10px;
  border:1px solid #dde3eb;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font-size:10.5px;
  font-weight:800;
}
.json-primary-actions{
  display:grid;
  grid-template-columns:1.15fr repeat(3,1fr);
  gap:7px;
  padding:0 14px 14px;
}
.json-primary-actions button{min-height:42px}

.json-repair-note{
  margin:0 14px 14px;
  padding:11px 12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid #eee7dc;
  border-radius:11px;
  background:#fffaf3;
}
.json-repair-note b{flex:0 0 auto;color:#76552f;font-size:9.5px}
.json-repair-note span{color:#8a745c;font-size:9.5px;line-height:1.45}

.json-output-panel{min-height:650px}
.json-status{
  margin:14px 14px 10px;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid #e5e9ef;
  border-radius:13px;
  background:#f8fafc;
}
.json-status-icon{
  width:28px;height:28px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:9px;
  background:#eef2f7;
  color:#64748b;
  font-size:14px;
  font-weight:950;
}
.json-status strong,.json-status small{display:block}
.json-status strong{color:#334155;font-size:11px}
.json-status small{margin-top:3px;color:#8491a3;font-size:9.5px;line-height:1.45}
.json-status[data-state="valid"]{border-color:#dcecdf;background:#f8fcf9}
.json-status[data-state="valid"] .json-status-icon{background:#eaf8ee;color:#16803a}
.json-status[data-state="error"]{border-color:#f0d9dc;background:#fff9f9}
.json-status[data-state="error"] .json-status-icon{background:#fcebed;color:#b4232c}
.json-status[data-state="fixed"]{border-color:#e1def3;background:#fbfaff}
.json-status[data-state="fixed"] .json-status-icon{background:#efedff;color:#5b45c6}

.json-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin:0 14px 10px;
}
.json-stats > div{
  min-width:0;
  padding:9px 10px;
  border:1px solid #edf0f4;
  border-radius:10px;
  background:#fff;
}
.json-stats span{display:block;color:#94a3b8;font-size:8.5px;font-weight:850;text-transform:uppercase}
.json-stats strong{display:block;margin-top:3px;color:#334155;font-size:12px;overflow:hidden;text-overflow:ellipsis}

.json-view-switch{
  display:inline-flex;
  margin:0 14px 10px;
  padding:3px;
  border:1px solid #e5e9ef;
  border-radius:10px;
  background:#f8fafc;
}
.json-view-switch button{
  min-height:31px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#7a8798;
  font-size:9.5px;
  font-weight:900;
  cursor:pointer;
}
.json-view-switch button.active{
  background:#fff;
  color:#334155;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.json-output-view{display:none;margin:0 14px 14px}
.json-output-view.active{display:block}
#jsonOutput{
  width:100%;
  min-height:430px;
  display:block;
  resize:vertical;
  padding:16px;
  border:1px solid #e1e6ed;
  border-radius:14px;
  outline:0;
  background:#fbfcfe;
  color:#1f2937;
  font:12.5px/1.62 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  tab-size:2;
}
#jsonOutput:focus{border-color:#c5cfea}

.json-tree-toolbar{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.json-tree-toolbar > span{color:#7b8798;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.json-tree-toolbar > div{display:flex;gap:6px}
.json-tree{
  min-height:430px;
  max-height:600px;
  overflow:auto;
  padding:12px;
  border:1px solid #e1e6ed;
  border-radius:14px;
  background:#fbfcfe;
  color:#334155;
  font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.json-tree details{margin-left:15px}
.json-tree > details{margin-left:0}
.json-tree summary{
  cursor:pointer;
  user-select:none;
  color:#475569;
}
.json-tree summary::marker{color:#94a3b8}
.json-tree-row{
  display:flex;
  gap:5px;
  align-items:flex-start;
  margin:2px 0 2px 17px;
  overflow-wrap:anywhere;
}
.json-tree-key{color:#5b45c6}
.json-tree-string{color:#147a55}
.json-tree-number{color:#a45319}
.json-tree-boolean{color:#1d5da8}
.json-tree-null{color:#8a5b99}
.json-tree-meta{color:#9aa5b4;font-size:9.5px}
.json-tree-empty{
  min-height:370px;
  display:grid;
  place-items:center;
  color:#9aa5b4;
  text-align:center;
  padding:25px;
}
.json-tree-limit{
  margin:8px 0;
  padding:10px;
  border:1px solid #eee3cb;
  border-radius:10px;
  background:#fffaf0;
  color:#8a6b3f;
  font:10px/1.5 ui-sans-serif,system-ui,sans-serif;
}

@media(max-width:1100px){
  .json-workbench{grid-template-columns:1fr}
  .json-output-panel{min-height:0}
  .json-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  #jsonInput,#jsonOutput{min-height:360px}
}
@media(max-width:720px){
  .json-formatter-content{width:calc(100% - 22px)!important}
  .json-hero{align-items:flex-start;flex-direction:column}
  .json-hero h2{font-size:34px}
  .json-privacy-pill{width:100%;min-width:0}
  .json-panel-head{align-items:flex-start;flex-direction:column}
  .json-head-actions{width:100%}
  .json-head-actions .mini-btn{flex:1}
  .json-primary-actions{grid-template-columns:1fr 1fr}
  .json-input-footer{align-items:stretch;flex-direction:column}
  .json-file-btn{width:100%}
  .json-indent-control{justify-content:space-between}
  .json-indent-control select{flex:0 0 145px}
  .json-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  .json-primary-actions{grid-template-columns:1fr}
  .json-repair-note{flex-direction:column}
  #jsonInput,#jsonOutput{min-height:320px;font-size:11.5px}
}