:root {
        --bg: #1e1e1e;
        --top: #2d2d2d;
        --panel: #111;
        --text: #eee;
        --muted: #aaa;
        --accent: #ff9933;
        --result: #000;
        --border: #444;
        --btn: #333;
        --btn-text: #fff;
        --good: #22c55e;
        --bad: #ef4444;
      }
      body.light {
        --bg: #fff8ed;
        --top: #ffe0b8;
        --panel: #fffaf2;
        --text: #1f2937;
        --muted: #6b7280;
        --accent: #d97706;
        --result: #fff;
        --border: #f2c27b;
        --btn: #fff3df;
        --btn-text: #1f2937;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        background: var(--bg);
        color: var(--text);
      }
      .vs-titlebar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background: var(--top);
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
      }
      .title {
        font-weight: 900;
      }
      .brand-mark {
        display: inline-grid;
        place-items: center;
        min-width: 42px;
        height: 28px;
        padding: 0 7px;
        border-radius: 7px;
        background: var(--accent);
        color: #111;
        font-size: 12px;
        font-weight: 900;
      }
      .editor-label {
        display: block;
        margin: 12px 0 6px;
        font-weight: 800;
      }
      .title-actions,
      .row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
      }
      button {
        margin: 5px;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--btn);
        color: var(--btn-text);
        font-weight: 700;
      }
      button:hover {
        border-color: var(--accent);
      }
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
      }
      button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      #runBtn {
        background: var(--accent);
        color: #111;
        border-color: var(--accent);
      }
      textarea {
        width: 100%;
        height: 160px;
        background: var(--panel);
        color: var(--text);
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        font-family: Consolas, monospace;
        font-size: 15px;
      }
      input[type="text"],
      input[type="file"] {
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--text);
      }
      input[type="text"] {
        width: 170px;
      }
      #result {
        margin-top: 10px;
        background: var(--result);
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: auto;
        min-height: 80px;
      }
      th,
      td {
        padding: 8px 10px;
        border: 1px solid var(--border);
        text-align: left;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      .chip {
        font-size: 13px;
      }
      .hint {
        color: var(--muted);
        font-size: 13px;
        margin: 8px 0;
        line-height: 1.5;
      }
      .panel {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: rgba(255, 153, 51, 0.08);
      }
      .panel b {
        display: block;
        margin-bottom: 8px;
      }
      .ok {
        color: var(--good);
        font-weight: 800;
      }
      .bad {
        color: var(--bad);
        font-weight: 800;
      }
      .history-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
      .history-tab.active { background:var(--accent); color:#111; border-color:var(--accent); }
      .history-list { display:grid; gap:10px; max-height:340px; overflow:auto; }
      .history-item { padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--panel); }
      .history-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; }
      .history-item pre { margin:8px 0; white-space:pre-wrap; word-break:break-word; }
      .history-error { color:var(--bad); font-size:13px; margin-bottom:6px; }
      @media (max-width: 640px) {
        input[type="text"] {
          width: 100%;
        }
        .title-actions button {
          flex: 1;
        }
      }