:root {
  --shell: #f5f7fb;
  --card: #ffffff;
  --soft: #f8fafc;
  --input: #ffffff;
  --border: #d8e0eb;
  --text: #111827;
  --muted: #64748b;
  --muted2: #94a3b8;
  --accent: #2563eb;
  --accent2: #0f766e;
  --warn: #b45309;
  --danger: #dc2626;
  --progress: #e2e8f0;
  --font-ui: system-ui, -apple-system, "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  --shell: #0b1220;
  --card: #111827;
  --soft: #182235;
  --input: #0f172a;
  --border: #334155;
  --text: #f8fafc;
  --muted: #a3b2c7;
  --muted2: #718096;
  --progress: #334155;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--shell); color: var(--text); font-family: var(--font-ui); font-size: 13px; }

.shell { min-height: 100vh; max-width: 1480px; margin: 0 auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.header { display: flex; align-items: center; gap: 14px; }
.logo { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.title-stack { flex: 1; min-width: 0; }
.title-row { display: flex; align-items: flex-end; gap: 8px; }
.title { font-size: 25px; line-height: 1.1; font-weight: 900; letter-spacing: 0; }
.version-badge { color: var(--accent); background: var(--soft); border: 1px solid var(--border); border-radius: 8px; padding: 2px 7px; font-size: 11px; font-weight: 900; margin-bottom: 3px; }
.subtitle { color: var(--muted); font-size: 14px; margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 10px; }
.theme-btn { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; padding: 0; cursor: pointer; }
.theme-btn img { width: 22px; height: 22px; }
.status-pill { min-width: 88px; text-align: center; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; color: var(--muted); background: var(--soft); font-weight: 900; }
.status-pill[data-mode="running"] { color: var(--accent); border-color: #93c5fd; background: #eff6ff; }
.status-pill[data-mode="done"] { color: #15803d; border-color: #86efac; background: #f0fdf4; }
.status-pill[data-mode="warning"] { color: var(--warn); border-color: #facc15; background: #fffbeb; }
.status-pill[data-mode="failed"] { color: var(--danger); border-color: #fca5a5; background: #fef2f2; }
[data-theme="dark"] .status-pill[data-mode="running"] { background: #14213d; }
[data-theme="dark"] .status-pill[data-mode="done"] { background: #12351f; }
[data-theme="dark"] .status-pill[data-mode="warning"] { background: #332608; }
[data-theme="dark"] .status-pill[data-mode="failed"] { background: #3b1111; }

.content { flex: 1; min-height: 0; display: flex; gap: 14px; }
.left-col { flex: 7 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.right-col { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.top-row { flex: 1; min-height: 0; display: flex; gap: 12px; }
.input-card { flex: 62 1 0; }
.settings-card { flex: 38 1 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; }
.section-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.section-icon { width: 20px; height: 20px; }
.section-title { font-size: 17px; font-weight: 900; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; }

.source-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.source-pill { flex: 1; min-height: 30px; display: flex; align-items: center; border-radius: 8px; padding: 0 10px; color: var(--muted); background: var(--soft); border: 1px solid var(--border); font-size: 12px; font-weight: 800; }
.mini-btn { min-height: 30px; padding: 0 10px; border-radius: 8px; color: var(--muted); background: var(--soft); border: 1px solid var(--border); font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.mini-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mini-btn:disabled { opacity: .6; cursor: default; }
.paste-box { flex: 1; min-height: 260px; width: 100%; resize: none; border-radius: 8px; padding: 10px; color: var(--text); background: var(--input); border: 1px solid var(--accent); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.paste-box:focus { outline: 2px solid rgba(37, 99, 235, .14); }
.paste-box::placeholder { color: var(--muted2); }

.auto-settings { display: flex; flex-direction: column; gap: 9px; }
.auto-row { min-height: 42px; display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 10px; background: var(--soft); border: 1px solid var(--border); }
.auto-row span { flex: 0 0 64px; color: var(--muted); font-size: 12px; font-weight: 800; }
.auto-row strong { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; word-break: break-word; }

.run-card { gap: 10px; flex: 0 0 auto; }
.progress-row { display: flex; align-items: center; gap: 8px; }
.progress { flex: 1; height: 9px; border-radius: 5px; background: var(--progress); overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s ease; }
.percent { color: var(--accent); font-weight: 900; min-width: 38px; text-align: right; }
.stats-row { display: flex; gap: 10px; }
.stat { flex: 1; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 10px; background: var(--soft); border: 1px solid var(--border); border-radius: 8px; }
.stat img { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 8px; }
.stat span { color: var(--muted); font-size: 11px; font-weight: 700; }
.stat strong { font-size: 20px; line-height: 1.1; }
.button-row { display: flex; gap: 10px; }
.btn-primary, .btn-secondary { min-height: 42px; border-radius: 8px; font-weight: 900; font-family: inherit; cursor: pointer; }
.btn-primary { flex: 2; color: #fff; border: 1px solid var(--accent); background: var(--accent); font-size: 14px; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary { flex: 1; color: var(--text); background: var(--soft); border: 1px solid var(--border); font-size: 13px; }
.btn-secondary:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.btn-primary:disabled, .btn-secondary:disabled { color: var(--muted2); background: var(--progress); border-color: var(--border); cursor: default; }

.output-card { flex: 0 0 auto; }
.output-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.output-row { min-height: 50px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; gap: 8px; padding: 0 8px 0 10px; background: var(--soft); border: 1px solid var(--border); border-radius: 8px; }
.output-row span { height: 26px; display: grid; place-items: center; color: #fff; background: var(--accent2); border-radius: 7px; font-size: 10px; font-weight: 900; }
.output-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.output-row button { height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: 7px; font-size: 11px; font-weight: 900; cursor: pointer; }
.output-row button:hover { color: var(--accent); background: var(--card); }

.log-card { flex: 1; min-height: 0; }
.log-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.log-box { flex: 1; min-height: 180px; overflow: auto; border-radius: 8px; border: 1px solid var(--border); background: var(--soft); color: var(--muted); padding: 11px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.log-line { color: var(--muted); }
.log-line.error { color: var(--danger); font-weight: 700; }
.log-line.success { color: #15803d; font-weight: 700; }

@media (max-width: 1080px) {
  .content, .top-row { flex-direction: column; }
  .right-col { flex: none; }
}

@media (max-width: 620px) {
  .shell { padding: 14px; }
  .title { font-size: 22px; }
  .stats-row, .button-row { flex-wrap: wrap; }
  .stat { flex: 1 1 42%; }
  .auto-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .auto-row span { flex: none; }
}