/* ==========================================================================
   Harmon AI · 全站唯一样式表
   所有页面共用这一份，改这里整站生效。颜色统一走 CSS 变量。
   ========================================================================== */

:root {
  color-scheme: dark;
  font-family: system-ui, "Microsoft YaHei", sans-serif;

  --bg: #0b1421;
  --bg-top: #0d1927;
  --bg-bottom: #0a1220;
  --panel: #101a2a;
  --panel-2: #0e1929;
  --panel-3: #0d1826;

  --line: #202c3e;
  --line-input: #263c57;
  --line-soft: #1f2c3e;
  --line-chip: #243d56;

  --text: #e7eef9;
  --text-strong: #f1f5fb;
  --muted: #8caac9;
  --muted-2: #71849d;
  --muted-3: #61758f;
  --dim: #4a5b73;

  --accent: #55a2ff;
  --accent-2: #3d9af1;
  --accent-3: #2075c5;
  --accent-soft: #1b3553;
  --accent-line: #469cf5;

  --mint: #37c9a8;
  --mint-soft: #a8d1c8;

  --danger: #ff8792;
  --star: #fa7182;

  --ok: #37c9a8;
  --warn: #f6c452;

  --radius-card: 29px;
  --radius-input: 14px;
  --shadow-card: 0 22px 55px #0003;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 5% 25%, #12323a88, transparent 42%),
    radial-gradient(ellipse at 95% 70%, #18395955, transparent 48%),
    linear-gradient(135deg, var(--bg-top), var(--bg-bottom));
  background-attachment: fixed;
  color: var(--text);
}

a { color: inherit; }

code {
  font-family: ui-monospace, Consolas, monospace;
  border: 1px solid var(--line-input);
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--panel-2);
  color: #9fc6f5;
}

/* ---------------------------------------------------------------- 布局 ---- */
.wrap {
  width: min(1110px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 26px;
}

/* ---------------------------------------------------------------- 头部 ---- */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #21454c;
  border-radius: 28px;
  padding: 8px 13px;
  color: var(--mint-soft);
  text-decoration: none;
  font-weight: 700;
}

.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #24404c;
  color: var(--mint-soft);
}

.hero h1 {
  font-size: clamp(43px, 7vw, 72px);
  letter-spacing: -3px;
  margin: 20px 0 2px;
  line-height: 1.1;
}

.hero h1 em {
  font-style: normal;
  color: var(--mint);
}

.tagline {
  font: 600 20px Georgia, serif;
  color: #b5c9bf;
  margin: 12px 0 0;
}

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 225px;
}

.hero-side:empty { display: none; }

.hero-side span,
.hero-side a {
  border: 1px solid var(--line-chip);
  border-radius: 24px;
  padding: 12px 16px;
  text-align: center;
  color: #80b8ff;
  font-weight: 650;
  text-decoration: none;
}

.hero-side a {
  align-self: flex-end;
  border-radius: 10px;
}

.hero-side a:hover { border-color: var(--accent-line); }

/* ------------------------------------------------------------ 步骤条 ---- */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 43px 0 28px;
  color: var(--muted-2);
  font-weight: 700;
  font-size: 17px;
}

.steps span,
.steps a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #2b405a;
  border-radius: 50%;
  font-size: 14px;
}

.steps .active { color: var(--accent); }
.steps .active b {
  border-color: var(--accent-line);
  background: var(--accent-line);
  color: white;
  box-shadow: 0 5px 18px #308cea55;
}

.steps a:hover { color: #8fb8ee; }
.steps a.locked { color: var(--dim); cursor: not-allowed; }
.steps a.locked b { border-color: #22334a; }
.steps a.locked:hover { color: var(--dim); }

.steps i {
  width: 34px;
  border-top: 2px solid #253a52;
}

/* ---------------------------------------------------------------- 卡片 ---- */
.card {
  padding: clamp(28px, 5vw, 58px) clamp(22px, 6vw, 66px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.pill {
  display: inline-block;
  border-radius: 20px;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: #75b5ff;
  font-weight: 700;
}

.card h2 {
  font: 700 clamp(30px, 4vw, 42px) Georgia, "Microsoft YaHei", serif;
  margin: 16px 0 8px;
}

.sub {
  font: 17px Georgia, "Microsoft YaHei", serif;
  color: var(--muted);
  margin: 0 0 34px;
}

/* ---------------------------------------------------------------- 表单 ---- */
label {
  display: block;
  color: #9fb4ce;
  font: 700 17px Georgia, "Microsoft YaHei", serif;
  margin: 17px 0 10px;
}

label strong {
  color: var(--star);
  margin-right: 8px;
}

input {
  width: 100%;
  height: 60px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-input);
  background: var(--panel-2);
  color: var(--text-strong);
  padding: 0 19px;
  font: 600 18px ui-monospace, Consolas, monospace;
  outline: none;
}

input::placeholder { color: var(--muted-3); }

input:focus {
  border-color: #479df5;
  box-shadow: 0 0 0 3px #479df522;
}

input[readonly] {
  color: var(--muted);
  background: var(--panel-3);
  cursor: default;
}

textarea {
  width: 100%;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-input);
  background: var(--panel-2);
  color: var(--text-strong);
  padding: 15px 19px;
  font: 600 15px ui-monospace, Consolas, monospace;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}

textarea::placeholder { color: var(--muted-3); }

textarea:focus {
  border-color: #479df5;
  box-shadow: 0 0 0 3px #479df522;
}

.field-hint {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.8;
}

.primary {
  margin-top: 20px;
  border: 0;
  border-radius: 11px;
  padding: 16px 25px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: white;
  font: 700 18px Georgia, "Microsoft YaHei", serif;
  cursor: pointer;
}

.primary:hover { filter: brightness(1.08); }

.primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.secondary {
  display: block;
  margin-top: 29px;
  border: 1px solid var(--line-input);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.secondary:hover { border-color: var(--accent-line); }
.secondary span { margin-left: 5px; }

.privacy {
  margin: 18px 0 0;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.7;
}

.message {
  min-height: 0;
  color: var(--danger);
  font: 14px Georgia, "Microsoft YaHei", serif;
  margin: 10px 0 0;
}

.message:not(:empty) { min-height: 20px; }
.message.ok { color: #7fe0c0; }
.message.busy { color: var(--muted); }

/* ------------------------------------------------------ 结果 / 信息面板 ---- */
.result {
  margin-top: 34px;
  border: 1px solid var(--line-input);
  border-radius: 16px;
  padding: 26px;
  background: var(--panel-3);
}

.result[hidden] { display: none; }

.result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.result-title {
  margin: 0;
  font: 700 22px Georgia, "Microsoft YaHei", serif;
}

.result-note {
  margin: 0 0 18px;
  color: var(--muted-2);
  font-size: 13px;
}

.kv {
  display: grid;
  grid-template-columns: minmax(132px, auto) 1fr;
  margin: 0 0 26px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-input);
  overflow: hidden;
}

.kv dt {
  padding: 15px 19px;
  background: var(--panel-3);
  color: #9fb4ce;
  font: 700 15px Georgia, "Microsoft YaHei", serif;
  border-bottom: 1px solid #1c2a3d;
}

.kv dd {
  margin: 0;
  padding: 15px 19px;
  color: var(--text);
  font: 600 16px ui-monospace, Consolas, monospace;
  word-break: break-all;
  border-bottom: 1px solid #1c2a3d;
}

.kv dt:nth-last-of-type(1),
.kv dd:nth-last-of-type(1) { border-bottom: 0; }

.badge {
  display: inline-block;
  border: 1px solid #2b405a;
  border-radius: 999px;
  padding: 4px 12px;
  color: #9fb4ce;
  font: 700 13px Georgia, "Microsoft YaHei", serif;
}

.badge[data-status="unused"],
.badge[data-status="done"] {
  border-color: #2f6f5c; color: #7fe0c0; background: #0f211d;
}

.badge[data-status="used"],
.badge[data-status="queued"],
.badge[data-status="confirmed"] {
  border-color: #3a4a6b; color: #9fc6f5; background: #111c2e;
}

.badge[data-status="created"] {
  border-color: #4a5b73; color: #b6c8de; background: #131d2c;
}

.badge[data-status="processing"] {
  border-color: #6d5a2b; color: var(--warn); background: #211c0f;
}

.badge[data-status="failed"],
.badge[data-status="disabled"] {
  border-color: #6f3038; color: #ff9aa5; background: #241014;
}

.bar {
  height: 9px;
  margin: 6px 0 24px;
  border-radius: 999px;
  background: #16233a;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--accent-2));
  transition: width 0.4s ease;
}

/* -------------------------------------------------------------- 时间线 ---- */
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  padding: 0 0 26px 34px;
  color: var(--muted-2);
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: #22364d;
}

.timeline li:last-child::before { display: none; }

.timeline li::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 3px solid #2b405a;
  border-radius: 50%;
  background: var(--bg);
}

.timeline li b {
  display: block;
  margin-bottom: 4px;
  color: #cfe0f2;
  font: 700 17px Georgia, "Microsoft YaHei", serif;
}

.timeline li span { font-size: 14px; }

.timeline li.done::after {
  border-color: var(--mint);
  background: #12271f;
}

.timeline li.active::after {
  border-color: var(--accent-line);
  background: var(--accent-line);
  box-shadow: 0 0 0 4px #469cf522;
}

.timeline li.active b { color: #8fc4ff; }

/* ---------------------------------------------------------- 任务列表 ---- */
.tasks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tasks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 13px 16px;
  background: var(--panel-2);
}

.tasks .t-url {
  color: #cfe0f2;
  font: 600 15px ui-monospace, Consolas, monospace;
  word-break: break-all;
}

.tasks .t-meta {
  margin-top: 4px;
  color: var(--muted-3);
  font-size: 12.5px;
}

/* -------------------------------------------------------------- 页脚 ---- */
footer {
  margin: 48px 0 0;
  text-align: center;
  color: var(--muted-3);
  font-weight: 650;
}

footer span { padding: 0 12px; color: #3f546f; }

.foot-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 16px;
}

.foot-nav a {
  color: var(--muted-3);
  text-decoration: none;
}

.foot-nav a:hover { color: #8fb8ee; }

/* ------------------------------------------------------------- Toast ---- */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(340px, calc(100vw - 40px));
}

.toast {
  border: 1px solid var(--line-input);
  border-radius: 12px;
  padding: 13px 16px;
  background: var(--panel);
  color: #cfe0f2;
  font: 600 15px Georgia, "Microsoft YaHei", serif;
  box-shadow: 0 12px 30px #0006;
  animation: toast-in 0.22s ease;
}

.toast.ok { border-color: #2f6f5c; color: #8fe3c6; }
.toast.err { border-color: #6f3038; color: #ffa7b0; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 响应式 ---- */
@media (max-width: 650px) {
  .wrap { width: calc(100% - 28px); padding-top: 24px; }

  .hero { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-side { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .hero-side a { grid-column: 1 / -1; justify-self: end; }
  .hero h1 { font-size: 48px; }

  .steps {
    justify-content: flex-start;
    gap: 7px;
    overflow: auto;
    margin: 28px 0 18px;
    font-size: 13px;
  }
  .steps b { width: 28px; height: 28px; }
  .steps i { width: 16px; flex: none; }

  .card { border-radius: 20px; }
  .card h2 { font-size: 30px; }
  .sub { font-size: 15px; }

  .kv { grid-template-columns: 1fr; }
  .kv dt { border-bottom: 0; padding-bottom: 6px; }
  .kv dd { padding-top: 6px; }

  .tasks li { flex-direction: column; align-items: flex-start; }
}

/* ============================================================== 后台总表 ==== */
.brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-entry {
  border: 1px solid var(--line-chip);
  border-radius: 28px;
  padding: 8px 15px;
  color: var(--warn);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}

.admin-entry:hover { border-color: var(--warn); color: #ffd98a; }

.warn-banner {
  margin: 0 0 22px;
  border: 1px solid #6a5320;
  border-radius: 12px;
  padding: 13px 17px;
  background: #2a2410;
  color: #f0cf84;
  font-size: 13.5px;
  line-height: 1.75;
}

.warn-banner code { color: #ffe6a8; border-color: #6a5320; background: #201c0d; }

.gate { margin-top: 6px; }
.gate[hidden] { display: none; }
.gate .primary { margin-top: 18px; }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid var(--line-input);
  border-radius: 11px;
  padding: 9px 15px;
  background: var(--panel-3);
  color: var(--muted-2);
  font-size: 13.5px;
}

.stat b {
  color: var(--text-strong);
  font: 700 19px ui-monospace, Consolas, monospace;
}

.stat.ok b { color: var(--ok); }
.stat.err b { color: var(--danger); }
.stat.warn b { color: var(--warn); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar input[type="search"] {
  flex: 1 1 260px;
  width: auto;
  height: 46px;
  padding: 0 15px;
  font: 500 15px ui-monospace, Consolas, monospace;
}

.toolbar .secondary,
.toolbar .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: 0;
  border-radius: 11px;
  padding: 0 20px;
  background: transparent;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.toolbar .secondary { color: var(--accent); }
.toolbar .secondary:hover { border-color: var(--accent-line); }

.toolbar .ghost {
  border: 1px solid var(--line-input);
  color: var(--muted-2);
}

.toolbar .ghost:hover { border-color: #6f3038; color: var(--danger); }
.toolbar .ghost[hidden] { display: none; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-input);
  border-radius: 14px;
  background: var(--panel-3);
}

.data-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 14px;
  background: #13203a;
  border-bottom: 1px solid var(--line-input);
  color: #9fb4ce;
  font: 700 14px Georgia, "Microsoft YaHei", serif;
  text-align: left;
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #1a2739;
  color: var(--text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #121e30; }
.data-table .empty {
  padding: 44px 14px;
  color: var(--muted-3);
  text-align: center;
}

.col-label { min-width: 200px; }
.col-flag {
  width: 84px;
  color: var(--ok);
  font: 700 15px ui-monospace, Consolas, monospace;
  text-align: center;
}
.col-copy { max-width: 270px; }
.col-url { max-width: 250px; }

.col-label small {
  display: block;
  margin-top: 4px;
  color: var(--muted-3);
  font: 500 11.5px ui-monospace, Consolas, monospace;
  word-break: break-all;
}

.label-btn {
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  padding: 0;
  color: var(--text-strong);
  font: 700 15px Georgia, "Microsoft YaHei", serif;
  text-align: left;
  cursor: pointer;
}

.label-btn:hover { color: var(--accent); border-bottom-color: var(--accent-line); }

.approve-select {
  height: 36px;
  border: 1px solid var(--line-input);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text-strong);
  padding: 0 9px;
  font: 600 14px Georgia, "Microsoft YaHei", serif;
  cursor: pointer;
  outline: none;
}

.approve-select[data-approved="yes"] { border-color: #2f6f5c; color: #8fe3c6; }
.approve-select[data-approved="no"] { border-color: #6f3038; color: #ffa7b0; }
.approve-select:focus { box-shadow: 0 0 0 3px #479df522; }
.approve-select[disabled] { opacity: 0.6; cursor: progress; }

.copy-btn {
  max-width: 100%;
  border: 0;
  border-bottom: 1px dashed #33506f;
  background: none;
  padding: 0;
  color: #9fc6f5;
  font: 500 13px ui-monospace, Consolas, monospace;
  text-align: left;
  word-break: break-all;
  cursor: pointer;
}

.copy-btn:hover { color: #cfe4ff; border-bottom-color: var(--accent-line); }
.copy-btn.secret { color: var(--warn); border-bottom-color: #6a5320; }
.copy-btn.secret:hover { color: #ffe0a0; }

.mini {
  margin-left: 7px;
  border: 1px solid var(--line-input);
  border-radius: 7px;
  background: transparent;
  color: var(--muted-2);
  padding: 3px 8px;
  font-size: 11.5px;
  vertical-align: middle;
  cursor: pointer;
}

.mini:hover { border-color: var(--accent-line); color: var(--accent); }

.col-url a {
  color: #80b8ff;
  text-decoration: none;
  word-break: break-all;
}

.col-url a:hover { text-decoration: underline; }

@media (max-width: 650px) {
  .admin-entry { padding: 6px 12px; font-size: 13px; }
  .toolbar input[type="search"] { flex-basis: 100%; }
  .stat { padding: 7px 12px; font-size: 12.5px; }
}

/* ====================================================== 提交通道切换 ==== */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.mode-opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line-input);
  border-radius: 15px;
  padding: 15px 17px;
  background: var(--panel-3);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.mode-opt b {
  color: var(--text-strong);
  font: 700 16px Georgia, "Microsoft YaHei", serif;
}

.mode-opt span { font-size: 12.5px; line-height: 1.6; }

.mode-opt:hover { border-color: var(--line-chip); }

.mode-opt.active {
  border-color: var(--accent-line);
  background: linear-gradient(160deg, #16304c, #12233a);
}

.mode-opt.active b { color: #a9d2ff; }

.field-label {
  display: block;
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 14.5px;
}

.field-label strong { color: var(--star); margin-right: 4px; }

/* ======================================================== 文件拖放区 ==== */
.dropzone {
  border: 1.5px dashed var(--line-chip);
  border-radius: 16px;
  padding: 26px 20px;
  background: var(--panel-3);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--accent-line);
  outline: none;
}

.dropzone.over {
  border-color: var(--accent-line);
  background: #14273d;
}

.dropzone.filled {
  border-style: solid;
  border-color: #2f6f5c;
  background: #10261f;
}

.dropzone.disabled { opacity: 0.5; cursor: not-allowed; }

.dropzone-icon {
  display: block;
  color: var(--accent);
  font-size: 26px;
  line-height: 1.2;
}

.dropzone-title {
  margin: 10px 0 5px;
  color: var(--text-strong);
  font-size: 15px;
  word-break: break-all;
}

.dropzone-hint {
  margin: 0;
  color: var(--muted-3);
  font-size: 12.5px;
}

/* =========================================================== 上传结果 ==== */
.upload-result {
  margin-top: 24px;
  border: 1px solid #2f6f5c;
  border-radius: 16px;
  padding: 20px 22px;
  background: #0f231d;
}

.upload-result[hidden] { display: none; }

.upload-result h3 {
  margin: 0 0 14px;
  color: #8fe3c6;
  font: 700 17px Georgia, "Microsoft YaHei", serif;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.result-actions .secondary { margin-top: 0; }

/* ========================================================= 后台分区 ==== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
}

.tab {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 9px 20px;
  background: transparent;
  color: var(--muted);
  font: 700 15px Georgia, "Microsoft YaHei", serif;
  cursor: pointer;
}

.tab:hover { color: var(--text-strong); }

.tab.active {
  border-color: var(--line-chip);
  background: var(--panel-3);
  color: #a9d2ff;
}

section[role="tabpanel"][hidden] { display: none; }

.badge[data-kind="ok"] { border-color: #2f6f5c; color: #8fe3c6; }
.badge[data-kind="err"] { border-color: #6f3038; color: #ffa7b0; }
.badge[data-kind="warn"] { border-color: #6a5320; color: #f0cf84; }

.source-tag {
  display: block;
  margin-top: 3px;
  color: var(--muted-3);
  font: 500 11px "Microsoft YaHei", sans-serif;
}

.err-text {
  display: block;
  margin-top: 5px;
  max-width: 260px;
  color: #ff9aa5;
  font: 500 11.5px ui-monospace, Consolas, monospace;
  line-height: 1.55;
  word-break: break-all;
}

.col-file { min-width: 190px; }
.col-file small {
  display: block;
  margin-top: 4px;
  color: var(--muted-3);
  font: 500 11.5px ui-monospace, Consolas, monospace;
}
.col-status { min-width: 130px; }
.col-time {
  min-width: 150px;
  color: var(--muted-2);
  font: 500 12.5px ui-monospace, Consolas, monospace;
  white-space: nowrap;
}
.col-ops { white-space: nowrap; }

.col-ops .mini { margin-left: 0; margin-right: 6px; }

.mini.danger { border-color: #54262d; color: #d98b94; }
.mini.danger:hover { border-color: #6f3038; color: var(--danger); }
.mini[disabled] { opacity: 0.5; cursor: progress; }

/* ======================================================= 内容查看弹窗 ==== */
.content-dialog {
  width: min(780px, 92vw);
  max-height: 84vh;
  border: 1px solid var(--line-input);
  border-radius: 16px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
}

.content-dialog::backdrop { background: #04080ecc; }

.content-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 18px;
}

.content-dialog header strong {
  color: var(--text-strong);
  font: 700 15px Georgia, "Microsoft YaHei", serif;
  word-break: break-all;
}

.content-dialog pre {
  margin: 0;
  max-height: 62vh;
  overflow: auto;
  padding: 16px 18px;
  color: #cfe0f5;
  font: 500 13px/1.75 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 650px) {
  .mode-switch { grid-template-columns: 1fr; }
  .col-time { min-width: 120px; }
}


/* ==========================================================================
   本轮新增：提交教程 / 结果徽标 / 排队动画 / 对方回执 / 发券面板
   ========================================================================== */

/* ---- 提交教程 ---- */
.guide {
  margin: 26px 0 6px;
  padding: 20px 22px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-input);
  background: var(--panel-2);
}
.guide h3 { margin: 0 0 14px; font-size: 15px; color: var(--text-strong); }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.guide-steps li {
  position: relative;
  padding: 0 0 16px 40px;
  counter-increment: guide;
}
.guide-steps li:last-child { padding-bottom: 0; }
.guide-steps li::before {
  content: counter(guide);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-chip);
  background: var(--accent-soft);
  color: #cfe4ff;
  font-size: 13px; font-weight: 600;
}
.guide-steps b { display: block; margin-bottom: 4px; color: var(--text-strong); font-size: 14px; }
.guide-steps span { display: block; color: var(--muted); font-size: 13px; line-height: 1.75; }
.guide-steps a { color: var(--accent); word-break: break-all; }
.guide-steps code,
.field-hint code {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-chip);
  background: #0b1827;
  color: #bcd9ff;
  font-size: 12px;
}

/* ---- 结果徽标：排队中是转动的环 ---- */
.result-badge {
  width: 54px; height: 54px;
  margin: 4px 0 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-input);
  background: #0d1826;
  color: var(--muted);
  font-size: 26px; font-weight: 700;
}
.result-badge.ok   { border-color: #2b6b5c; background: #102a25; color: var(--ok); }
.result-badge.err  { border-color: #6d3a42; background: #2a1418; color: var(--danger); }
.result-badge.warn { border-color: #6d5a2b; background: #241d0e; color: var(--warn); }
.result-badge.spinning { border-color: transparent; background: transparent; }
.result-badge.spinning::after {
  content: '';
  width: 42px; height: 42px;
  border: 3px solid rgba(55, 201, 168, .22);
  border-top-color: var(--ok);
  border-radius: 50%;
  animation: badge-spin .9s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .result-badge.spinning::after { animation-duration: 2.6s; }
}

.upload-result { border-left: 3px solid var(--line-input); padding-left: 18px; }
.upload-result[data-tone="ok"]   { border-left-color: var(--ok); }
.upload-result[data-tone="err"]  { border-left-color: var(--danger); }
.upload-result[data-tone="warn"] { border-left-color: var(--warn); }

/* ---- 对方回执原文（折叠） ---- */
.bot-reply {
  margin: 14px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--line-input);
  border-radius: 12px;
  background: var(--panel-3);
}
.bot-reply summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.bot-reply pre {
  margin: 10px 0 4px;
  white-space: pre-wrap; word-break: break-word;
  color: var(--text); font-size: 13px; line-height: 1.7;
}

/* ---- 发券面板 ---- */
.mini-input {
  width: 78px; padding: 9px 10px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--line-input);
  background: #0b1827;
  color: var(--text);
  font-size: 14px;
}
.gen-result {
  margin: 14px 0 6px;
  padding: 14px 16px;
  border: 1px solid #2b6b5c;
  border-radius: 12px;
  background: #0f1f1c;
}
.gen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gen-head strong { flex: 1; color: var(--text-strong); font-size: 14px; }
.gen-result pre {
  margin: 0 0 8px;
  padding: 12px;
  white-space: pre-wrap; word-break: break-all;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px; line-height: 1.9; letter-spacing: .5px;
  color: #a8f0d8;
  background: #0a1622;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

/* 后台列表里回执原文的缩略行 */
.bot-line {
  display: block;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

/* ==========================================================================
   大发授权系统接入：状态横幅 / 套餐下拉 / 卡密出处标记
   ========================================================================== */

/* 配置就绪时的横幅：跟警告条同形，换成「通过」色 */
.warn-banner.ok-banner {
  border-color: #2b6b5c;
  background: #102a25;
  color: #93e7cd;
}
.warn-banner.ok-banner code { color: #b6f2e0; border-color: #2b6b5c; background: #0b1f1b; }

/* 工具栏里的套餐下拉：和 .mini-input 同一视觉规格，别让工具栏看起来散架 */
.mini-select {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-input);
  background: #0b1827;
  color: var(--text);
  font-size: 13.5px;
  max-width: 230px;
}
.mini-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 编号下方那行「大发 · 批次 66」 */
.cdk-origin {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 11.5px;
  letter-spacing: .2px;
}
