:root {
      --primary: #f59e0b;
      --primary-dark: #d97706;
      --accent: #ef4444;
      --glow-primary: rgba(245,158,11,0.18);
      --glow-accent:  rgba(239,68,68,0.12);
      --divider-hover: #1e2028;
      --divider-drag:  #181a20;
    }
    :root.theme-light {
      --primary: #d97706;
      --primary-dark: #b45309;
      --accent: #dc2626;
      --glow-primary: rgba(217,119,6,0.12);
      --glow-accent:  rgba(220,38,38,0.08);
      --divider-hover: #ede5d0;
      --divider-drag:  #e4d8be;
    }
    :root.theme-light .jk { color: #b45309; }
    :root.theme-light .jk:hover { background: rgba(180,83,9,.08); }
    :root.theme-light .js { color: #2e7d32; }
    :root.theme-light .jn { color: #b71c1c; }
    :root.theme-light .jb { color: #7c3aed; }
    :root.theme-light .jl { color: #78634a; }
    :root.theme-light .jp { color: #78634a; }
    :root.theme-light .jse { color: #2e7d32; border-bottom-color: rgba(46,125,50,.4); }
    :root.theme-light .jse:hover { background: rgba(46,125,50,.08); }
    :root.theme-light .jse-modified { color: #ea580c; border-bottom-color: rgba(234,88,12,.4); }


    .indent-group { display: flex; gap: 6px; margin-bottom: 14px; }
    .indent-opt {
      flex: 1; text-align: center; padding: 5px 0;
      border-radius: 6px; border: 1px solid var(--border);
      background: transparent; color: var(--text-muted);
      cursor: pointer; font-size: 12px; font-weight: 500;
      transition: background 0.12s, color 0.12s, border-color 0.12s; user-select: none;
    }
    .indent-opt:hover { background: var(--border); color: var(--text); }
    .indent-opt.sel { background: var(--glow-primary); color: var(--primary); border-color: var(--primary); }

    .divider {
      width: 68px;
      flex-shrink: 0;
      background: var(--surface2);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      cursor: col-resize;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
      transition: background 0.15s;
      overflow: hidden;
    }
    .divider:hover { background: var(--divider-hover); }
    .divider.dragging { background: var(--divider-drag); cursor: col-resize; }

    .divider-grip {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 3px;
      pointer-events: none;
      opacity: 0.3;
      transition: opacity 0.15s;
    }
    .divider:hover .divider-grip,
    .divider.dragging .divider-grip { opacity: 0.8; }
    .grip-line {
      width: 20px; height: 1.5px;
      background: var(--text-muted);
      border-radius: 2px;
    }

    .divider-log {
      width: 100%;
      flex: 1;
      position: relative;  overflow: hidden;
    }

    .fold-btn {
      position: absolute;
      right: 3px;
      width: 28px;           height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      transform: translateY(-50%);
      transition: background 0.12s, opacity 0.12s;
      opacity: 0.45;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1;
    }
    .fold-btn:hover {
      background: rgba(245,158,11,.15);
      color: var(--primary);
      opacity: 1;
    }
    .fold-btn.folded {
      opacity: 0.85;
      color: var(--primary);
      background: rgba(245,158,11,.12);
    }
    .fold-btn.folded:hover { background: rgba(245,158,11,.22); }
    :root.theme-light .fold-btn:hover,
    :root.theme-light .fold-btn.folded { color: var(--primary); }

    .log-tag {
      position: absolute;
      left: 3px;
      width: 30px;           display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 3px 2px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s, top 0.2s;
      transform: translateY(-50%);  user-select: none;
    }
    .log-tag:hover { background: rgba(245,158,11,.12); }
    .log-tag-count {
      font-size: 11px;
      font-weight: 700;
      color: var(--warning);
      background: rgba(245,166,35,.15);
      border-radius: 10px;
      padding: 2px 5px;
      min-width: 20px;
      text-align: center;
      line-height: 1.4;
    }
    .log-tag:hover .log-tag-count {
      background: rgba(245,166,35,.28);
    }

    .divider-title { display: none; }

    .dot-blue  { background: var(--primary); box-shadow: 0 0 5px var(--glow-primary); }
    .dot-green { background: var(--success); box-shadow: 0 0 5px rgba(52,200,138,.5); }

    .input-wrap {
      flex: 1;
      position: relative;
      overflow: hidden;  background: var(--surface);
      min-height: 0;     }

    .input-highlight {
      position: absolute;
      inset: 0;
      pointer-events: none;
      padding: 16px;
      font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; tab-size: 2;
      white-space: pre-wrap;
      word-break: break-word;
      overflow: hidden;
      color: transparent;
      z-index: 0;
    }

    .err-char {
      background: rgba(224, 92, 92, 0.45);
      border-radius: 2px;
      outline: 1px solid rgba(224, 92, 92, 0.8);
    }

    textarea {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      background: transparent;
      color: #a8b8cc;           caret-color: #a8b8cc;
      border: none; outline: none; resize: none; padding: 16px;
      font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; tab-size: 2;
      z-index: 1;
      white-space: pre-wrap;
      word-break: break-word;
    }
    textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

    textarea::-webkit-scrollbar { width: 7px; height: 7px; }
    textarea::-webkit-scrollbar-track { background: transparent; }
    textarea::-webkit-scrollbar-thumb {
      background: rgba(120, 135, 165, 0.25);
      border-radius: 4px;
      transition: background 0.15s;
    }
    textarea::-webkit-scrollbar-thumb:hover  { background: rgba(120, 135, 165, 0.45); }
    textarea::-webkit-scrollbar-thumb:active { background: rgba(120, 135, 165, 0.65); }
    textarea { scrollbar-width: thin; scrollbar-color: rgba(120,135,165,.25) transparent; }

    :root.theme-light textarea {
      color: #2e3d52;           caret-color: #2e3d52;
    }
    :root.theme-light textarea::-webkit-scrollbar-thumb { background: rgba(100,116,139,.2); }
    :root.theme-light textarea::-webkit-scrollbar-thumb:hover  { background: rgba(100,116,139,.38); }
    :root.theme-light textarea::-webkit-scrollbar-thumb:active { background: rgba(100,116,139,.55); }
    :root.theme-light textarea { scrollbar-color: rgba(100,116,139,.2) transparent; }

    .output-wrap { flex: 1; overflow: auto; background: var(--surface); position: relative; }

    .output-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
    .output-wrap::-webkit-scrollbar-track { background: transparent; }
    .output-wrap::-webkit-scrollbar-thumb {
      background: rgba(120, 135, 165, 0.25);
      border-radius: 4px;
      transition: background 0.15s;
    }
    .output-wrap::-webkit-scrollbar-thumb:hover  { background: rgba(120, 135, 165, 0.45); }
    .output-wrap::-webkit-scrollbar-thumb:active { background: rgba(120, 135, 165, 0.65); }
    .output-wrap { scrollbar-width: thin; scrollbar-color: rgba(120,135,165,.25) transparent; }

    :root.theme-light .output-wrap::-webkit-scrollbar-thumb { background: rgba(100,116,139,.2); }
    :root.theme-light .output-wrap::-webkit-scrollbar-thumb:hover  { background: rgba(100,116,139,.38); }
    :root.theme-light .output-wrap::-webkit-scrollbar-thumb:active { background: rgba(100,116,139,.55); }
    :root.theme-light .output-wrap { scrollbar-color: rgba(100,116,139,.2) transparent; }

    #output {
      padding: 16px; font-family: var(--font-mono); font-size: 13.5px;
      line-height: 1.65; white-space: pre; word-break: break-all;
      min-height: 100%;
      color: #a8b8cc;           caret-color: #a8b8cc;
      outline: none;
    }
    :root.theme-light #output {
      color: #2e3d52;           caret-color: #2e3d52;
    }
    #output.wrap { white-space: pre-wrap; }
    #input:focus {
      box-shadow: inset 0 0 0 1.5px rgba(245,158,11,.4), inset 0 0 20px rgba(245,158,11,.04);
    }
    :root.theme-light #input:focus {
      box-shadow: inset 0 0 0 1.5px rgba(217,119,6,.35);
    }
    .output-wrap:focus-within {
      box-shadow: inset 0 0 0 1.5px rgba(245,158,11,.4), inset 0 0 20px rgba(245,158,11,.04);
    }
    :root.theme-light .output-wrap:focus-within {
      box-shadow: inset 0 0 0 1.5px rgba(217,119,6,.35);
    }
    #output:focus { box-shadow: none; }

    .jk { color: #fbbf24; }
    .jk:hover { background: rgba(251,191,36,.08); border-radius: 3px; }
    .js { color: #86efac; }
    .jn { color: #f87171; }
    .jb { color: #c4b5fd; }
    .jl { color: #7a7060; }
    .jp { color: #7a7060; }

    .jse {
      color: #86efac;
      border-bottom: 1px dashed rgba(134,239,172,.4);
      transition: background 0.12s;
    }
    .jse:hover { background: rgba(134,239,172,.08); border-radius: 3px; }
    .jse-modified {
      color: #fbbf24;
      border-bottom: 1px dashed rgba(251,191,36,.5);
    }

    .badge { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; }
    .badge-ok   { background: rgba(52,200,138,.15); color: var(--success); }
    .badge-err  { background: rgba(239,68,68,.15);  color: var(--danger); }
    .badge-info { background: rgba(245,158,11,.15); color: var(--primary); }

    .fold-ellipsis {
      font-style: italic;
      opacity: 0.55;
      font-size: 12px;
    }

    .log-tag-tip {
      position: fixed;
      background: #1a1510;
      color: #e8dfc8;
      font-size: 11px;
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid rgba(245,158,11,.3);
      box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 10px rgba(245,158,11,.12);
      pointer-events: none;
      z-index: 500;
      max-width: 220px;
      word-break: break-all;
      display: none;
    }
    :root.theme-light .log-tag-tip {
      background: #2a1f0e;
      color: #faf6ee;
      border-color: rgba(217,119,6,.35);
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
    }

    .timestamp-tip {
      position: fixed;
      background: #1a1510;
      color: #86efac;
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid rgba(52,200,138,.4);
      box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 10px rgba(52,200,138,.15);
      pointer-events: none;
      z-index: 500;
      white-space: nowrap;
      display: none;
    }
    :root.theme-light .timestamp-tip {
      background: #f0fdf4;
      color: #15803d;
      border-color: rgba(22,163,74,.4);
      box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 0 8px rgba(22,163,74,.1);
    }