*{margin:0;padding:0;box-sizing:border-box}.json-key{color:#b45d09}.json-string{color:#159957;word-break:break-all;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.json-number{color:#007bff}.json-boolean{color:#d63384;font-weight:bold}.json-null{color:#6c757d;font-style:italic}.json-undefined{color:#adb5bd;font-style:italic}.json-brace{color:#666}.json-array{color:#0a7b83}.json-collapsible{position:relative}.header-title-link{color:#fff;text-decoration:none;font-weight:700;font-size:26px}.json-toggle{display:inline-block;width:14px;height:14px;cursor:pointer;user-select:none;margin-right:6px;font-size:12px;line-height:14px;text-align:center;color:#666;background:rgba(0,0,0,0);border:none;vertical-align:middle;transition:all .2s ease}.json-toggle:hover{color:#007bff;transform:scale(1.2)}.json-toggle.expanded::before{content:"▼"}.json-toggle.collapsed::before{content:"▶"}.json-content{display:block}.json-content.collapsed{display:none}.json-line{position:relative;white-space:pre-wrap;line-height:21px}.json-indent{display:inline-block}.json-summary{color:#999;font-style:italic;margin-left:8px}#jsonOutput{white-space:pre-wrap;word-wrap:break-word;font-family:"Monaco","Menlo","Ubuntu Mono",monospace}.json-string{word-wrap:break-word;overflow-wrap:break-word}.xml-tag{color:#06c;font-weight:bold}.xml-attr-name{color:#c60;font-weight:500}.xml-attr-value{color:#090;font-weight:normal}.xml-text{color:#333}.xml-comment{color:#999;font-style:italic;background:#f9f9f9}.xml-cdata{color:#639;background:#f0f0ff;padding:1px 3px;border-radius:2px}.xml-declaration{color:#c06;font-weight:bold;background:#fff0f5}.xml-namespace{color:#f60;font-weight:500}.xml-bracket{color:#000;font-weight:bold}.xml-equals{color:#c00;font-weight:bold}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f5f5;height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{background:#2c3e50;color:#fff;padding:15px 20px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center;gap:20px}.header h1{font-size:20px;font-weight:600;margin:0}.header-about-link{color:#ecf0f1;text-decoration:none;font-size:14px;padding:6px 12px;border:1px solid #34495e;border-radius:4px;transition:all .2s ease}.header-about-link:hover{background:#34495e;border-color:#4a5f7a;color:#fff;text-decoration:none}.language-selector{display:flex;align-items:center;gap:8px}.language-selector label{font-size:14px;color:#ecf0f1}.language-selector select{padding:4px 8px;border:1px solid #34495e;border-radius:4px;background:#34495e;color:#fff;font-size:13px;cursor:pointer;transition:all .2s ease}.language-selector select:hover{background:#4a5f7a;border-color:#5a6f8a}.language-selector select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.language-selector option{background:#2c3e50;color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}input[type=checkbox]:focus,select:focus,button:focus,textarea:focus{outline:none}h1{font-size:20px;font-weight:600;margin:0}h2{font-size:18px;font-weight:500;margin:0}.error-message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#dc3545;color:#fff;padding:12px 20px;border-radius:4px;display:none;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.15)}.json-toggle,.btn{will-change:transform}@media print{.header,.toolbar,.panel-controls,.status-bar,.language-selector{display:none}.output-area{display:block !important}body{background:#fff}}@media(max-width: 768px){h1{font-size:18px}h2{font-size:16px}}.toolbar{background:#fff;border-bottom:1px solid #e0e0e0;padding:12px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn{padding:2px 13px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.btn:hover{background:#f8f9fa;border-color:#ddd}.container{flex:1;display:flex;height:calc(100vh - 100px)}.panel{flex:1;width:50%;background:#fff;border:1px solid #e0e0e0;display:flex;flex-direction:column}.left-panel{margin-right:1px}.panel-header{background:#f8f9fa;padding:12px 20px;border-bottom:1px solid #e0e0e0;font-weight:500;font-size:14px;display:flex;justify-content:space-between;align-items:center}.panel-controls{display:flex;flex-direction:column;gap:6px}.control-row{display:flex;align-items:center;gap:8px}.panel-content{flex:1;display:flex;flex-direction:column;overflow:auto}.input-container,.output-container{flex:1;display:flex;position:relative;overflow:auto}.line-numbers{background:#f8f9fa;border-right:1px solid #e0e0e0;padding:10px 8px;font-family:"Monaco","Menlo","Ubuntu Mono",monospace;font-size:12px;line-height:21px;color:#666;user-select:none;white-space:pre;overflow:hidden;min-width:50px;text-align:right}.input-area,.output-area{flex:1;padding:10px 10px 30px 10px;border:none;outline:none;font-family:"Monaco","Menlo","Ubuntu Mono",monospace;font-size:12px;line-height:21px;resize:none;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;overflow:auto}.input-area{background:#fff}.output-area{background:#f8f9fa;color:#333}.status-bar{background:#f8f9fa;border-top:1px solid #e0e0e0;padding:8px 20px;font-size:12px;color:#666;display:flex;justify-content:space-between}.error-message{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;padding:12px;margin:10px 20px;border-radius:4px;display:none}.icon-btn{width:24px;height:24px;border:none;background:none;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#666}.icon-btn:hover{background:#f0f0f0}.breadcrumb-container{background:#f8f9fa;border-bottom:1px solid #e0e0e0;padding:8px 20px;font-size:12px;color:#666}.breadcrumb-content{display:flex;align-items:center;gap:8px}.breadcrumb-label{font-weight:500;color:#333}.breadcrumb-path{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.breadcrumb-item{padding:2px 6px;background:#e9ecef;border-radius:3px;color:#495057;font-family:"Monaco","Menlo","Ubuntu Mono",monospace;font-size:11px;white-space:nowrap}.breadcrumb-item.root{background:#0056b3;color:#fff;font-weight:500}.breadcrumb-item.current{background:#28a745;color:#fff;font-weight:500}.breadcrumb-arrow{font-size:10px;color:#6c757d}.escape-option{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}.escape-option input[type=checkbox]{cursor:pointer}.escape-option label{cursor:pointer;font-size:13px;color:#666}.language-select-container{position:relative;display:flex;align-items:center;gap:8px}.language-loading{display:none;align-items:center;gap:4px;font-size:12px;color:#666}.loading-spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #007bff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@media screen and (max-width: 768px) {
  body {
    height: auto;
    overflow-y: auto;
    flex-direction: column;
  }

  /* Header Optimization */
  .header {
    flex-direction: column;
    padding: 10px 15px;
    gap: 10px;
  }

  .header-left {
    width: 100%;
    justify-content: space-between;
  }

  .header h1 {
    font-size: 18px;
  }

  .header-about-link {
    font-size: 12px;
    padding: 4px 8px;
  }

  .language-selector {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
  }
  
  .language-selector label {
    display: none;
  }
  
  .language-select-container {
    width: 100%;
  }

  .language-selector select {
    width: 100%;
    padding: 6px 10px;
  }

  /* Main Content Layout */
  .container {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    height: auto;
  }

  .panel {
    width: 100% !important;
    height: 60vh !important; /* Give each panel reasonable height on mobile */
    min-height: 400px;
    margin-bottom: 20px;
  }

  .panel.left-panel {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  /* Toolbar Optimization */
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    padding: 10px;
  }

  .panel-controls {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
  }

  .control-row {
    display: flex;
    gap: 8px;
  }

  .btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Editor Area */
  .input-container, .output-container {
    height: calc(100% - 80px); /* Adjust based on new header height */
  }

  .line-numbers {
    width: 30px;
    font-size: 11px;
    padding: 10px 2px;
  }

  .input-area, .output-area {
    padding: 10px;
    font-size: 13px; /* Prevent iOS zoom on focus */
    margin-left: 30px; /* Match line-numbers width */
    width: calc(100% - 30px);
  }

  /* Touch Targets */
  button, 
  select, 
  .json-toggle,
  .escape-option label {
    min-height: 44px; /* Minimum touch target size */
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .json-toggle {
    width: 20px; /* Slightly larger for touch */
  }

  /* Status Bar */
  .status-bar {
    position: relative;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    padding: 8px;
  }
}

@media screen and (max-width: 480px) {
  .header h1 {
    font-size: 16px;
  }
  
  .panel {
    height: 50vh !important;
  }
  
  .btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}