:root{
      --bg: #f6f8fa;
      --panel: #ffffff;
      --muted: #6b7280;
      --primary: #2563eb;
      --accent: #7c3aed;
      --success: #16a34a;
      --danger: #dc2626;
      --shadow: 0 6px 20px rgba(16,24,40,0.08);
      --radius: 12px;
      --text: #0f172a;
      --editor-bg: #f8fafc;
      --toolbar-bg: rgba(255,255,255,0.85);
    }

    [data-theme="dark"]{
      --bg: #0b1220;
      --panel: #0f1724;
      --muted: #9aa4b2;
      --primary: #60a5fa;
      --accent: #a78bfa;
      --success: #4ade80;
      --danger: #fb7185;
      --shadow: 0 6px 20px rgba(2,6,23,0.8);
      --text: #e6eef8;
      --editor-bg: #071020;
      --toolbar-bg: rgba(15,23,36,0.7);
    }

    html,body{
      height:100%;
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 85%, transparent));
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      transition: background .25s ease, color .25s ease;
    }

    .app{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      gap:20px;
      padding:20px;
      box-sizing:border-box;
    }

    .toolbar{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      background:var(--toolbar-bg);
      padding:12px;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter: blur(6px) saturate(120%);
      border: 1px solid rgba(0,0,0,0.04);
      transition: background .18s ease, color .18s ease;
    }

    .toolbar .left,
    .toolbar .right{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .btn{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      border: none;
      padding:8px 12px;
      border-radius:10px;
      cursor:pointer;
      color:var(--text);
      font-weight:600;
      display:inline-flex;
      gap:8px;
      align-items:center;
      transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
      user-select:none;
    }
    .btn:active{ transform:translateY(1px); }
    .btn.primary{
      background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(37,99,235,0.06));
      color:var(--primary);
      border:1px solid rgba(37,99,235,0.12);
    }
    .btn.small{ padding:6px 8px; font-size:14px; }
    .btn.icon{ padding:8px; width:40px; height:40px; justify-content:center; }

    .file-input{ display:none; }

    .panes{
      display:flex;
      gap:18px;
      flex:1 1 auto;
      min-height: 60vh;
    }
    .pane{
      flex:1 1 0;
      display:flex;
      flex-direction:column;
      background:var(--panel);
      border-radius:var(--radius);
      padding:14px;
      box-shadow:var(--shadow);
      min-width:0;
      border:1px solid rgba(0,0,0,0.04);
    }

    .pane .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:8px;
    }
    .pane h3{ margin:0; font-size:15px; color:var(--text); font-weight:700; }

    .subtle{ color:var(--muted); font-weight:600; font-size:13px; }

    textarea.editor{
      width:100%;
      height:100%;
      min-height:220px;
      resize:none;
      border:1px dashed rgba(0,0,0,0.04);
      border-radius:10px;
      padding:14px;
      background:var(--editor-bg);
      color:var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:13px;
      line-height:1.5;
      box-sizing:border-box;
      outline:none;
      transition:box-shadow .12s ease, border-color .12s ease, background .12s ease;
    }
    textarea.editor:focus{
      box-shadow:0 10px 30px rgba(37,99,235,0.08);
      border-color: rgba(37,99,235,0.18);
    }

    .viewer{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:13px;
      line-height:1.4;
      overflow:auto;
      padding:10px;
      border-radius:8px;
      background: linear-gradient(180deg, rgba(0,0,0,0.015), transparent);
      border: 1px solid rgba(0,0,0,0.03);
      min-height:220px;
    }
    .json-item{ white-space:pre; }
    .node{ margin-left:8px; }
    .toggle{ cursor:pointer; display:inline-block; width:18px; text-align:center; color:var(--muted); }
    .key{ color:var(--accent); }
    .json-string{ color: #16a085; }
    .json-number{ color: #d97706; }
    .json-boolean{ color: #db2777; }
    .json-null{ color: var(--muted); font-style:italic; }
    .bracket{ color:var(--muted); }
    .collapsed > .children{ display:none; opacity:0; height:0; overflow:hidden; }
    .child-row{ display:flex; gap:6px; padding:2px 0; align-items:flex-start; }

    .pane-controls{ display:flex; gap:8px; align-items:center; }

    .toast{
      position:fixed;
      right:20px;
      bottom:20px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      border-radius:10px;
      padding:12px 16px;
      color:var(--text);
      box-shadow:0 10px 30px rgba(2,6,23,0.12);
      border:1px solid rgba(0,0,0,0.06);
      display:flex;
      gap:8px;
      align-items:center;
      transform:translateY(20px);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
      z-index:9999;
    }
    .toast.show{ transform:translateY(0); opacity:1; pointer-events:auto; }

    .muted{ color:var(--muted); font-weight:600; font-size:13px; }
    .flex{ display:flex; align-items:center; gap:8px; }
    .spacer{ flex:1 1 auto; text-align:center; }

    @media (max-width:900px){
      .panes{ flex-direction:column; }
      .toolbar{ flex-direction:column; align-items:stretch; }
      .toolbar .left, .toolbar .right{ width:100%; justify-content:flex-start; }
    }