/* =============================================================
   Kakao 提链 — 设计系统
   参考图 2 的视觉方向：暖米底 + 深墨绿卡片 + 柠檬黄强调。
   刻意避开「深色仪表盘 + 电光蓝」的通用 AI 配色，
   让它看起来像个有主张的产品，而不是模板套出来的。
   ============================================================= */

:root {
  /* 底色：暖米，比纯白柔和，长时间盯着不刺眼 */
  --bg: #f2f0e9;
  --bg-sunk: #e8e5db;
  --surface: #ffffff;
  --surface-ink: #14261c;   /* 深墨绿：状态面板/主按钮 */
  --surface-ink-2: #1d3327;

  /* 文字 */
  --text: #16211b;
  --text-soft: #5c6b62;
  --text-faint: #8a978f;
  --text-on-ink: #f4f2ea;
  --text-on-ink-soft: #a8b8ae;

  /* 强调色 */
  --accent: #f2c53d;        /* 柠檬黄：品牌色/焦点环 */
  --accent-deep: #d9a916;
  --brand: #2f5d43;         /* 墨绿：主按钮 */
  --brand-hover: #264c37;

  /* 语义色 */
  --ok: #4c9f6a;
  --ok-soft: #e3f2e8;
  --warn: #d99022;
  --warn-soft: #fbf0da;
  --err: #c8553d;
  --err-soft: #f9e6e1;
  --info: #4a7fa8;
  --info-soft: #e4eef5;

  --line: #dcd8cb;
  --line-strong: #c5c0ae;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* 阴影克制：靠边框和色块分层，而不是到处糊模糊阴影 */
  --shadow-sm: 0 1px 2px rgba(20, 38, 28, .06);
  --shadow-md: 0 4px 16px rgba(20, 38, 28, .08);
  --shadow-lg: 0 18px 44px rgba(20, 38, 28, .14);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 顶部品牌条：细黄线，作为整站的视觉签名 */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep) 60%, var(--brand));
  z-index: 100;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 排版 ─────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow-on-ink { color: var(--accent); }

.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); font-size: 13px; }
.mono  { font-family: var(--mono); }

/* ── 布局 ─────────────────────────────────────── */

/* 顶部留白：品牌行已删，加 padding-top 让状态面板和页面顶边（含 body::before 品牌线）拉开距离 */
.shell { max-width: 1180px; margin: 0 auto; padding: 28px 20px 72px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 22px;
}
.logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--surface-ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px;
  flex: none;
}
.topbar-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.topbar-sub { font-size: 12px; color: var(--text-soft); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.grid-2 {
  display: grid;
  /* V1 工作台风：左表单 5 / 右任务 7，右侧更宽给任务详情 */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── 卡片 ─────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card-ink {
  background: var(--surface-ink);
  border-color: var(--surface-ink-2);
  color: var(--text-on-ink);
  border-radius: var(--r-xl);
  padding: 26px;
}
.card-ink .muted { color: var(--text-on-ink-soft); }
.card-head { margin-bottom: 18px; }
.card-head h2 { margin-top: 4px; }

/* ── 状态面板（LIVE STATUS，V1 横向单行）────────── */

.status-bar {
  background: var(--surface-ink);
  border: 1px solid var(--surface-ink-2);
  color: var(--text-on-ink);
  border-radius: var(--r-xl);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: var(--shadow-md);
}
.status-bar .muted { color: var(--text-on-ink-soft); }

/* 左：成功率大数字 */
.status-rate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}
.status-rate .rate {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.status-rate-sub { font-size: 12px; }

/* 中：数据块，竖线分隔 */
.status-stats {
  display: flex;
  gap: 0;
  flex: none;
}
.stat-cell {
  padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.stat-cell:first-child { border-left: none; padding-left: 0; }
.stat-cell .k {
  font-size: 11px;
  color: var(--text-on-ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stat-cell .v {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* 右：竖条 sparkline，占满剩余宽度 */
.spark {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  min-width: 120px;
  opacity: .85;
}
.spark i {
  flex: 1;
  min-width: 3px;
  max-width: 8px;
  height: 40%;   /* 默认矮，有状态的拔高 */
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.spark i.s-success { background: #6bbf85; height: 100%; }
.spark i.s-failed  { background: #d4705d; height: 45%; }
.spark i.s-running { background: #7d8f85; height: 70%; }
.spark i.s-queued  { background: var(--accent); height: 80%; }

@media (max-width: 820px) {
  .status-bar { flex-wrap: wrap; gap: 16px; }
  .spark { flex-basis: 100%; }
}

/* ── 表单 ─────────────────────────────────────── */

.field { margin-bottom: 16px; }
.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.input, .textarea, .select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 132px; resize: vertical; font-family: var(--mono); font-size: 13px; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  /* 焦点环用实心描边而非细边框：键盘用户能一眼看到焦点在哪 */
  box-shadow: 0 0 0 3px rgba(47, 93, 67, .16);
}
.input.mono { font-family: var(--mono); letter-spacing: .06em; }

.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; }

/* ── 按钮 ─────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s, background .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid rgba(47, 93, 67, .35); outline-offset: 2px; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #264c37; }

.btn-accent { background: var(--accent); color: var(--surface-ink); }
.btn-accent:hover:not(:disabled) { background: var(--accent-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-sunk); }

.btn-danger { background: var(--err); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ── 徽章 ─────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-ok      { background: var(--ok-soft);   color: #2f6b45; }
.badge-err     { background: var(--err-soft);  color: #a13a25; }
.badge-warn    { background: var(--warn-soft); color: #8a5a09; }
.badge-info    { background: var(--info-soft); color: #2d5c7d; }
.badge-neutral { background: var(--bg-sunk);   color: var(--text-soft); }

/* ── 表格 ─────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:hover { background: rgba(242, 197, 61, .07); }
.table .num { font-variant-numeric: tabular-nums; }

.empty {
  padding: 52px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* ── 提示条 ───────────────────────────────────── */

.alert {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 长英文报文（含无空格的 error code / URL）必须换行，否则顶破容器 */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
/* 失败原因框改纵向排列（主句在上、详情在下），覆盖 .alert 的 flex 横排 */
.alert-err { flex-direction: column; }

/* 失败原因里的「查看详情」折叠 */
.fail-detail { margin-top: 8px; }
.fail-detail > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  list-style: none;
}
.fail-detail > summary::-webkit-details-marker { display: none; }
.fail-detail > summary::before { content: "▸ "; }
.fail-detail[open] > summary::before { content: "▾ "; }
.fail-detail-body {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 140px;
  overflow-y: auto;
}

.alert-ok   { background: var(--ok-soft);   border-color: #bfe0cb; color: #2f6b45; }
.alert-err  { background: var(--err-soft);  border-color: #eec4b9; color: #a13a25; }
.alert-warn { background: var(--warn-soft); border-color: #ecd6a6; color: #8a5a09; }
.alert-info { background: var(--info-soft); border-color: #c2d9e8; color: #2d5c7d; }

/* ── 提炼方式选择器 ───────────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 560px) { .method-grid { grid-template-columns: repeat(2, 1fr); } }

.method-card {
  position: relative;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s, transform .08s;
  user-select: none;
}
.method-card:hover:not(.is-disabled):not(.is-active) {
  border-color: var(--brand);
  background: rgba(47, 93, 67, .04);
}
.method-card:active:not(.is-disabled) { transform: translateY(1px); }
.method-card .m-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.method-card .m-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
}
/* 选中态：品牌墨绿实心（对应参考图里的高亮块） */
.method-card.is-active {
  background: var(--brand);
  border-color: var(--brand);
}
.method-card.is-active .m-name { color: #fff; }
.method-card.is-active .m-sub { color: rgba(255,255,255,.72); }
/* 未启用：灰掉、禁点 */
.method-card.is-disabled {
  cursor: not-allowed;
  opacity: .55;
  background: var(--bg-sunk);
}
.method-card.is-disabled .m-name { color: var(--text-faint); }
/* 扣次数角标 */
.method-card .m-cost {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-deep);
}
.method-card.is-active .m-cost { color: var(--accent); }

/* ── 结果链接 ─────────────────────────────────── */
/* 上下结构：链接完整展示在上（可换行、不滚动），操作按钮在下方一行。
   避免了旧版「链接框内横向滚动 + 深底深字按钮看不清」两个问题。 */

.link-box {
  background: var(--surface-ink);
  color: var(--text-on-ink);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.link-box .url {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  /* 长链接整段换行完整展示，不出滚动条 */
  word-break: break-all;
  overflow-wrap: anywhere;
  /* 微弱内衬块，和背景区分开，视觉上更像「可复制的一段文本」 */
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: #e9f1ec;
  user-select: all;   /* 单击即可全选，方便手动复制 */
}
.link-box .link-actions {
  display: flex;
  gap: 8px;
}
/* 深色框内的按钮：必须用在深底上看得清的配色 */
.link-box .btn-accent { background: var(--accent); color: var(--surface-ink); }
.link-box .btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--text-on-ink);
}
.link-box .btn-outline-light:hover:not(:disabled) {
  background: rgba(255, 255, 255, .1);
}

/* ── 任务历史区（内部滚动，不撑长整个页面）──────── */

.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.history-scroll {
  /* 高度跟着视口走：历史区吃掉视口的剩余空间，历史条数再多也在框内滚，
     不把整个页面撑出竖直滚动条。
     减去的值 = 历史区上方所有内容（品牌条+状态面板+任务卡头部+进行中区+页面留白）
     的实测高度，让历史区底部刚好落在视口内。 */
  max-height: calc(100vh - 600px);
  min-height: 120px;   /* 再矮也保证能看到一条 */
  overflow-y: auto;
  padding-right: 4px;
}

/* 矮屏幕：横向状态条本就很矮，这里只需收紧卡片留白 + 缩 token 框，
   给任务区腾空间，避免整页出现竖直滚动条。 */
@media (max-height: 1080px) {
  .shell { padding-top: 20px; padding-bottom: 20px; }
  .status-bar { padding: 14px 20px; }
  .status-rate .rate { font-size: 34px; }
  .card { padding: 20px; }
  .field { margin-bottom: 12px; }
  .textarea { min-height: 96px; }
  .method-card { padding: 11px 10px; }
  .history-scroll { max-height: calc(100vh - 560px); }
}
/* 细滚动条，别抢视觉 */
.history-scroll::-webkit-scrollbar { width: 8px; }
.history-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}
.history-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── 标签页 ───────────────────────────────────── */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand); border-bottom-color: var(--accent); }

/* ── 加载态 ───────────────────────────────────── */

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
.spinner-dark { border-color: rgba(20, 38, 28, .2); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 尊重「减少动态效果」的系统偏好：前庭障碍用户会因动画不适 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── 其他 ─────────────────────────────────────── */

.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 12px; }
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.hidden { display: none !important; }
.center { text-align: center; }

.code-list {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.8;
}

.login-wrap {
  min-height: 78vh;
  display: grid;
  place-items: center;
}
.login-card { width: 100%; max-width: 380px; }