:root {
      --bg: #121212;
      --card: #1b1b1b;
      --line: #343434;
      --muted: #a8a8a8;
      --text: #e9e9e9;
      --ok: #85d48b;
      --err: #f48f8f;
      --btn: #2c2c2c;
      --primary: #355fcf;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }
    .wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 14px;
    }
    .top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff9800;
    }
    .dot.ok { background: #4caf50; }

    .tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .tab {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 6px 12px;
      cursor: pointer;
      opacity: 0.75;
      user-select: none;
    }
    .tab.active {
      opacity: 1;
      background: #3a3a3a;
    }

    .panel { display: none; }
    .panel.active { display: block; }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
    }
    .row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .col {
      flex: 1;
      min-width: 230px;
    }
    label {
      display: block;
      margin-bottom: 4px;
      color: #d0d0d0;
      font-size: 13px;
    }
    input, select, textarea {
      width: 100%;
      background: #111;
      color: #efefef;
      border: 1px solid #444;
      border-radius: 6px;
      padding: 7px 8px;
    }
    textarea {
      min-height: 110px;
      resize: vertical;
    }
    .hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 3px;
    }
    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .btn {
      border: 1px solid #4a4a4a;
      border-radius: 6px;
      background: var(--btn);
      color: #fff;
      padding: 6px 10px;
      cursor: pointer;
    }
    .btn.primary {
      border-color: var(--primary);
      background: var(--primary);
    }
    .status {
      min-height: 18px;
      font-size: 12px;
      margin-top: 8px;
      white-space: pre-wrap;
      color: var(--ok);
    }
    .status.error { color: var(--err); }

    .prompt-block {
      border: 1px solid #404040;
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 8px;
    }
    .prompt-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .prompt-head-left {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      flex: 1;
      min-width: 280px;
    }

    .log-list {
      max-height: 62vh;
      overflow: auto;
    }
    .log-item {
      border-bottom: 1px solid #2f2f2f;
      padding: 8px 0;
    }
    .log-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--muted);
      gap: 8px;
    }
    .log-error {
      margin: 5px 0;
      color: var(--err);
      font-size: 12px;
      white-space: pre-wrap;
    }
    .log-pre {
      margin-top: 6px;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 12px;
      background: #0f0f0f;
      border: 1px solid #2f2f2f;
      border-radius: 6px;
      padding: 8px;
      max-height: 260px;
      overflow: auto;
    }