/* 下单管理台 · 移动优先 */
:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --ink: #1c1917;
  --ink-2: #6b6560;
  --ink-3: #a8a29e;
  --line: #e7e2dc;
  --accent: #d9480f;       /* 淘宝橙加深，保对比度 */
  --accent-soft: #fff0e6;
  --ok: #2b8a3e;
  --warn: #b8860b;
  --bad: #c92a2a;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --shadow: 0 1px 2px rgb(28 25 23 / 4%), 0 4px 16px rgb(28 25 23 / 6%);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
a { color: var(--accent); text-decoration: none; }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a {
  color: var(--ink-2); padding: 6px 12px; border-radius: var(--radius-s); font-size: 14px;
}
.topbar nav a.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

/* 指标行 */
.stats { display: flex; gap: 10px; margin: 16px 0; }
.stat {
  flex: 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 12px 14px; display: flex;
  flex-direction: column; gap: 2px; box-shadow: var(--shadow);
}
.stat .label { font-size: 12px; color: var(--ink-3); }
.stat .num { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.stat .hint { font-size: 11px; color: var(--ink-3); }
.stat.primary { background: var(--accent-soft); border-color: #ffd9c2; }
.stat.primary .num { color: var(--accent); }
.agent-state { display: flex; align-items: center; gap: 6px; }
.agent-state i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.agent-state.on i { background: var(--ok); box-shadow: 0 0 0 3px rgb(43 138 62 / 15%); }
.agent-state.off i { background: var(--ink-3); }
.agent-state.on { color: var(--ok); }
.agent-state.off { color: var(--ink-3); }

/* 面板 */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 18px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }

/* 表单 */
.newtask textarea, .newtask input, .newtask select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 10px; font: inherit; color: var(--ink); background: #fff;
}
.newtask textarea { resize: vertical; margin-bottom: 10px; }
.newtask .row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.newtask label { flex: 1; min-width: 130px; font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.newtask label.grow { flex: 1 1 100%; }
.newtask .checks { gap: 16px; }
.newtask .check { flex: 0 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.cta {
  width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-m);
  padding: 12px; font: inherit; font-weight: 650; cursor: pointer;
}
.cta:active { transform: translateY(1px); }

/* 任务表 */
.tasks { width: 100%; border-collapse: collapse; font-size: 14px; }
.tasks th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 500; padding: 4px 8px 8px 0; }
.tasks td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.tasks td.kw a { color: var(--ink); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink-3); vertical-align: 1px; }
.dot.success { background: var(--ok); }
.dot.running { background: var(--warn); animation: pulse 1.5s infinite; }
.dot.queued { background: #5f7cd9; }
.dot.failed, .dot.aborted_price, .dot.aborted_notfound, .dot.aborted_captcha { background: var(--bad); }
.dot.canceled { background: var(--ink-3); }
@keyframes pulse { 50% { opacity: 0.4; } }
.empty { color: var(--ink-3); font-size: 14px; margin: 8px 0; }

/* 任务详情 */
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 12px; }
.meta div { display: flex; gap: 8px; font-size: 13px; }
.meta dt { color: var(--ink-3); min-width: 44px; }
.meta dd { margin: 0; }
.conclusion { background: var(--bg); border-radius: var(--radius-s); padding: 10px 12px; font-size: 14px; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--bg); padding: 10px; border-radius: var(--radius-s); font-size: 12px; }
details summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.cashier-tip { font-size: 13px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { padding: 10px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.step-head { display: flex; align-items: baseline; gap: 10px; }
.step-idx { color: var(--ink-3); font-size: 12px; }
.step-action { font-weight: 600; font-size: 14px; }
.step-ts { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.step-result { margin: 4px 0 6px; font-size: 13px; color: var(--ink-2); word-break: break-all; }
.shot { max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s); }

/* 付款台 */
.pay { text-align: center; }
.pay h2 { text-align: left; }
.pay .amount { font-size: 44px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pay .amount small { font-size: 16px; color: var(--ink-2); }
.pay .title { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }
.cashier-shot { width: 100%; max-width: 420px; border-radius: var(--radius-m); border: 1px solid var(--line); }
.paid-ok { color: var(--ok); font-weight: 650; }
.paid-wait { color: var(--warn); font-size: 14px; }
.status-line { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 14px; }

/* 登录 */
.login-wrap { min-height: 90vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow); padding: 32px 28px; width: min(360px, 92vw);
}
.login-card h1 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.login-card .sub { color: var(--ink-2); font-size: 13px; margin: 6px 0 18px; }
.login-card .err { color: var(--bad); font-size: 13px; margin: 0 0 10px; }
.login-card input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 11px 12px; font: inherit; margin-bottom: 12px;
}
@media (min-width: 640px) {
  .stats { gap: 14px; }
  .newtask .row { flex-wrap: nowrap; }
}