.app{width: min(1280px, calc(100% - 32px));margin: 22px auto 20px;background:#fffdf8;border:1px solid #e2d8c8;border-radius:14px;box-shadow:0 8px 30px rgba(20,30,50,.08);display:flex;flex-direction:column;overflow:hidden}
.top{padding:16px 18px 12px;border-bottom:1px solid #e5e9f0}
h1{font-size:20px;margin:0 0 5px}
.sub{font-size:13px;color:#697386}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items: center;}
button,.file-label{border:1px solid #d5dbe5;background:#fff;border-radius:7px;font-size:13px;cursor:pointer;color:#263246;margin:0;}
button{padding:7px 11px;}
.file-label{padding:6px 11px;}
button:hover,.file-label:hover{background:#f1f4f8}
.primary{background:#1f2937;color:#fff;border-color:#1f2937}.primary:hover{background:#111827}
.danger{color:#b42318}
.status{margin-left:auto;font-size:12px;align-self:center;color:#667085}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr}
.panel{min-width:0;display:flex;flex-direction:column;border:0;border-radius: 0;}
.panel+.panel{border-left:1px solid #e5e9f0}
.panel-head{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #e5e9f0;background:#fafbfc;font-size:13px;font-weight:600}
.panel-tools{display:flex;gap:5px}
.editor-wrap{position:relative;flex:1;min-height:0}
.editor-with-lines{display:flex;overflow:hidden}
.line-numbers{flex:0 0 52px;padding:16px 10px 16px 0;text-align:right;overflow:hidden;user-select:none;color:#98a2b3;background:#f8fafc;border-right:1px solid #e5e9f0;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre}
textarea{width:100%;height:100%;resize:none;border:0;outline:0;padding:16px 18px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#172033;background:#fff;tab-size:2}
.editor-with-lines textarea{flex:1;min-width:0;overflow:auto}
pre{height:100%;margin:0;padding:16px 18px;overflow:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre-wrap;word-break:break-word;background:#fbfcfe}
.error{padding:12px 14px;background:#fff2f0;color:#b42318;border-bottom:1px solid #ffd8d2;font:12px/1.5 ui-monospace,monospace;display:none}
.tree{height:100%;overflow:auto;padding:10px 14px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.node{margin-left:18px}.row{cursor:pointer;user-select:none}.row:hover{background:#f1f4f8}
.toggle{display:inline-block;width:18px;color:#667085}.key{color:#075985}.str{color:#067647}.num{color:#9a6700}.bool{color:#6941c6}.null{color:#667085}
.footer{padding:8px 12px;border-top:1px solid #e5e9f0;font-size:11px;color:#667085;display:flex;gap:18px}
input[type=file]{display:none}
@media(max-width:850px){body{padding:0}.app{height:100vh;border-radius:0}.workspace{grid-template-columns:1fr}.panel+.panel{border-left:0;border-top:1px solid #e5e9f0}.panel{height:50%}.status{width:100%;margin:0}.toolbar{margin-bottom:2px}}

@media (max-width: 768px) {
  .container { gap: 10px !important; }
  .editor-grid { gap: 10px !important; }
  .panel { margin-bottom: 0 !important; }
  .panel + .panel { margin-top: 0 !important; }
  .panel-header { padding: 10px 12px !important; }
  .editor-with-lines textarea,
  #output,
  #tree {
    min-height: 220px !important;
    height: 220px !important;
  }
  .editor-with-lines { margin-bottom: 0 !important; }
  .toolbar { margin: 8px 0 !important; }
}

@media (max-width: 768px) {
  .container,
  .editor-grid {
    gap: 0 !important;
  }
  .editor-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .editor-grid > .panel {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .editor-grid > .panel:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .editor-grid > .panel + .panel {
    margin-top: 0 !important;
  }
}

/* Mobile: remove the large vertical gap between Input and Result.
   The original .panel { height:50% } was making each panel half the viewport. */
@media (max-width: 850px) {
  .workspace {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
  }

  .workspace > .panel {
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }

  .workspace > .panel + .panel {
    border-top: 1px solid #e5e9f0 !important;
  }

  .workspace .editor-wrap {
    height: 220px !important;
    min-height: 220px !important;
    flex: none !important;
  }

  .workspace .footer {
    flex: none !important;
  }

  .app {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
}