/* 关键词作战表 · 前台共用样式
 *
 * 施工依据：项目根目录 DESIGN.md（由 npx getdesign@latest add notion 生成的 Notion 设计规范）。
 * 落地口径见 docs/03「2026-09-25 阶段 7 前台骨架定案」：只取 Notion 的底子——
 * 暖白纸底、近黑正文、1px 细线卡片、8px 间距体系、Inter 字体，
 * 以及那一个 Notion 蓝只用在提交按钮与链接上；报告表格原有配色不动。
 *
 * 不引任何外链 CDN 与网络字体（原文任务书：别引国内不稳的外链 CDN）。
 * Inter 装了就用，没装就回落到系统字体——DESIGN.md 明说 NotionInter 可直接用 Inter 替代。
 */

:root {
  /* 颜色（DESIGN.md · Colors） */
  --primary: #0075de;
  --primary-active: #005bab;
  --on-primary: #ffffff;
  --canvas: #ffffff;
  --canvas-soft: #f6f5f4;   /* 签名色：暖白纸底 */
  --surface: #ffffff;
  --ink: rgba(0, 0, 0, 0.95);
  --ink-secondary: #31302e;
  --ink-muted: #615d59;
  --ink-faint: #a39e98;
  --hairline: #e6e6e6;
  --input-border: #dddddd;
  /* 语义色：DESIGN.md 说 Notion 自身没有专门的语义色阶，状态由贴纸色板承担。
     这里从贴纸色板里取，绿=成功、橙=进行中、红用于失败（贴纸色板没有红，
     取 accent-orange-deep 的同族深色，保证对比度 ≥ 4.5:1）。 */
  --ok: #1aae39;
  --ok-soft: #eaf7ed;
  --warn: #dd5b00;
  --warn-soft: #fdf0e7;
  --bad: #b3261e;
  --bad-soft: #fbeceb;
  --info-soft: #e7f1fb;

  /* 装饰用色：Notion 蓝的浅深阶（2026-09-25 用户定）。
     第一版用了 DESIGN.md 的贴纸色板（紫/粉/橙）加深靛蓝夜色带 #213183，
     用户看过预览后指出两个问题：夜色带「太沉」，且它与按钮的 Notion 蓝不同色相、互相打架；
     贴纸色与那个底色也不协调。改法：装饰一律用 primary 同一色相的浅深阶，
     同族配色不可能打架；「结构性强调色只有 Notion 蓝、只用在按钮与链接」那条仍然不破，
     这几档只出现在装饰图形与细带上。 */
  --blue-200: #c7e0f7;
  --blue-300: #9dc9ef;
  --blue-400: #6fb2ea;
  --blue-500: #3d90e0;
  /* 青：小节色标用，与蓝相邻不跳色（DESIGN.md 贴纸色板 accent-teal） */
  --sticker-teal: #2a9d99;

  /* 间距（DESIGN.md · Spacing System，基准 8px） */
  --xxs: 4px;
  --xs: 8px;
  --sm: 12px;
  --md: 16px;
  --lg: 24px;
  --xl: 28px;
  --xxl: 32px;

  /* 圆角（DESIGN.md · Border Radius Scale） */
  --r-xs: 4px;    /* 表单字段 */
  --r-sm: 5px;    /* 列表行、状态药丸 */
  --r-md: 8px;    /* 工具按钮、小卡片 */
  --r-lg: 12px;   /* 内容卡片 */
  --r-full: 9999px;

  /* 阴影（DESIGN.md · Elevation Level 1：多层近透明，若有似无） */
  --shadow-1:
    rgba(0, 0, 0, 0.01) 0 0.175px 1.041px,
    rgba(0, 0, 0, 0.02) 0 0.8px 2.925px,
    rgba(0, 0, 0, 0.027) 0 2.025px 7.847px,
    rgba(0, 0, 0, 0.04) 0 4px 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas-soft);
  color: var(--ink);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  font-size: 16px;      /* body-md */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 页头（DESIGN.md · nav-bar：白底、细线、slim sticky） ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--sm) var(--lg);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.nav .wordmark {
  font-size: 20px;        /* title */
  font-weight: 600;
  letter-spacing: -0.125px;
}
.nav .who {
  font-size: 14px;        /* caption */
  color: var(--ink-muted);
  margin-right: var(--xs);
}

/* ---------- 版心 ---------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--lg);
}
.wrap-narrow {
  max-width: 420px;
  margin: 0 auto;
  padding: 56px var(--lg) var(--lg);
}

/* ---------- 标题层级（DESIGN.md · Typography Hierarchy） ---------- */
h1 { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; margin: 0 0 var(--xs); }
h2 { font-size: 26px; font-weight: 700; line-height: 1.23; letter-spacing: -0.625px; margin: 0 0 var(--sm); }
h3 { font-size: 22px; font-weight: 700; line-height: 1.27; letter-spacing: -0.25px; margin: 0 0 var(--xs); }
.lead { color: var(--ink-muted); font-size: 15px; margin: 0 0 var(--lg); }
.caption { font-size: 14px; line-height: 1.43; color: var(--ink-muted); }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  color: var(--ink-muted);
  text-transform: none;
}

/* ---------- 卡片（DESIGN.md · feature-card：白底 12px 圆角 24px 内边距，默认只有细线） ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--lg);
}
.card + .card { margin-top: var(--lg); }
.card-raised { box-shadow: var(--shadow-1); }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
  margin-bottom: var(--md);
}

/* ---------- 表单（DESIGN.md · text-input：白底、1px #ddd、4px 圆角、聚焦加 Level-1 阴影） ---------- */
.field { display: flex; flex-direction: column; gap: var(--xxs); }
.field > label { font-size: 14px; font-weight: 600; color: var(--ink-secondary); }
.field .hint { font-size: 12px; color: var(--ink-faint); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;            /* body-sm */
  border: 1px solid var(--input-border);
  border-radius: var(--r-xs);
  padding: 8px 10px;
}
input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-1);
}
input[aria-invalid="true"] { border-color: var(--bad); }

/* 一排平铺：ASIN + 目标线 + 盈亏线（docs/03 2026-09-25 定：与 ASIN 平铺同一排） */
.row-inline {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--md);
  align-items: start;
}

/* 文件选择：原生 input 太丑且各浏览器不一，包一层细线盒子 */
.filebox {
  display: flex;
  align-items: center;
  gap: var(--sm);
  border: 1px dashed var(--input-border);
  border-radius: var(--r-md);
  padding: var(--sm);
  background: var(--canvas);
}
.filebox .name { font-size: 14px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 按钮（DESIGN.md · button-primary 药丸；button-utility 8px 圆角细线） ---------- */
.btn {
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  padding: 10px 22px;
  cursor: pointer;
  transition: background-color .12s ease, transform .08s ease;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-utility {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 5px 14px;
  cursor: pointer;
}
.btn-utility:active { background: var(--canvas-soft); }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* ---------- 提示条 ---------- */
.notice {
  border-radius: var(--r-md);
  padding: var(--sm) var(--md);
  font-size: 14px;
  line-height: 1.43;
  margin-bottom: var(--md);
}
.notice-bad { background: var(--bad-soft); color: var(--bad); }
.notice-ok { background: var(--ok-soft); color: #14701f; }
.notice-warn { background: var(--warn-soft); color: #8a3a00; }
.notice-info { background: var(--info-soft); color: #0a4f96; }
.notice[hidden] { display: none; }

/* 字段级错误：说人话，不显示英文错误码 */
.err { font-size: 12px; color: var(--bad); min-height: 16px; }
.soft { font-size: 12px; color: var(--warn); min-height: 16px; }

/* ---------- 任务列表 ---------- */
/* 一屏看到 5 条（docs/03 2026-09-25 用户定）：列表高度按 5 行算，超出滚动。
   行高 48px 是 2026-09-25 在浏览器里实测的（12px 上下内边距 + 15px×1.5 行高 + 1px 分隔线），
   不是估的——原来按 64px 估，6 条总共才 287px、320px 的框全塞得下，一条都不用滚，
   「一屏 5 条」这条底线等于没生效。
   已知局限：失败原因很长而折行的那种行会更高，那时一屏就只看得到 4 条多一点。 */
.tasklist { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--canvas); }
.tasklist-scroll { max-height: calc(5 * 48px); overflow-y: auto; }
.trow {
  display: grid;
  grid-template-columns: 170px 150px 110px 1fr auto;
  gap: var(--sm);
  align-items: center;
  padding: var(--sm) var(--md);
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.trow:last-child { border-bottom: none; }
.trow-head {
  background: var(--canvas-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
}
.trow .asin { font-variant-numeric: tabular-nums; }
.trow .reason { color: var(--bad); font-size: 13px; }
.empty { padding: var(--xxl) var(--md); text-align: center; color: var(--ink-faint); font-size: 15px; }

/* 状态药丸（DESIGN.md · rounded.sm 5px，列表行/状态药丸那一档） */
.pill {
  display: inline-block;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
}
.pill-done { background: var(--ok-soft); color: #14701f; }
.pill-doing { background: var(--info-soft); color: #0a4f96; }
.pill-wait { background: var(--canvas-soft); color: var(--ink-muted); }
.pill-fail { background: var(--bad-soft); color: var(--bad); }

/* ---------- 登录页标语（用户 2026-09-25 定：主副调换，标语当大标题） ----------
 * 只设字距与间距，**故意不设 font-size**：让它继承 h1，这样手机那条
 * `h1{font-size:30px}` 才管得住它，不用在两处各写一遍字号。
 * DESIGN.md 的 heading-1 带 −1px 负字距，那是给拉丁字母调的，中文用会挤，放宽到 −0.3px。 */
.tagline {
  letter-spacing: -0.3px;
  /* 下面原本还有一条短线与一段小字，用户 2026-09-25 要求都去掉，只留标语本身。
     它们让出来的留白改由这里补：标语与增长柱子之间留一个 --lg。 */
  margin: 0;
}

/* 白卡片里的「登录／注册」小标题 */
.cardtitle {
  margin: 0 0 var(--md);
}

/* ---------- 报告页：报告正文放 iframe 里，与前台样式完全隔离 ---------- */
.reportframe {
  display: block;
  width: 100%;
  /* 撑满余下的视口：页头约 52px、标题行与提示约 90px、页脚约 70px */
  height: calc(100vh - 212px);
  min-height: 420px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
.reportframe[hidden] { display: none; }
@media (max-width: 720px) {
  .reportframe { height: calc(100vh - 240px); min-height: 320px; }
}

/* ---------- 页脚（DESIGN.md · footer：暖白底、caption 字号） ---------- */
.foot {
  margin-top: var(--xxl);
  padding: var(--lg);
  background: var(--canvas-soft);
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 14px;
  color: var(--ink-secondary);
}
.foot a { color: var(--ink-secondary); }

/* ---------- 手机 ---------- */
@media (max-width: 720px) {
  .wrap { padding: var(--md); }
  .row-inline { grid-template-columns: 1fr; }
  .trow { grid-template-columns: 1fr auto; row-gap: var(--xxs); }
  .trow .when { order: 1; font-size: 13px; color: var(--ink-muted); }
  .trow .status { order: 2; justify-self: end; }
  .trow .asin { order: 3; font-weight: 600; }
  .trow .reason { order: 4; grid-column: 1 / -1; }
  .trow .act { order: 5; grid-column: 1 / -1; }
  .trow-head { display: none; }
  .tasklist-scroll { max-height: none; }
  h1 { font-size: 30px; letter-spacing: -0.5px; }
}


/* ============================================================
 * 装饰性配色（2026-09-25 用户定「两页都治」）
 * 依据 DESIGN.md：hero-band 夜色带 + decorative sticker palette。
 * 三条底线不破：① 贴纸色只做装饰，按钮与链接仍只用 Notion 蓝；
 * ② 夜色带整站只出现一次（登录页）；③ 报告表格的配色一个字不动。
 * ============================================================ */

/* ---------- 页头识别块：增长图标（三根递增的柱子），放在站点名前 ----------
 * 用户 2026-09-25 定：「kelcy 左边的 logo 可以试试用增长图标」。
 * 用内联 SVG 而不是背景图：颜色能直接写进标记、看得懂、不引任何外部文件。 */
.brandmark {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  vertical-align: -4px;
}
.brandmark .b1 { fill: var(--blue-300); }
.brandmark .b2 { fill: var(--blue-500); }
.brandmark .b3 { fill: var(--primary); }

/* ---------- 登录页顶区：浅蓝渐隐到纸底（2026-09-25 用户定，取代深靛蓝夜色带） ----------
 * 用户原话：背景色「有点太沉，跟下方的登录页蓝色不协调」。
 * 改成 Notion 蓝最浅的一档渐变到暖白纸底 canvas-soft，与页面底色无缝相接，
 * 文字回到近黑。DESIGN.md 那个「唯一暗色岛」的手法本轮不用了。 */
.hero {
  background: linear-gradient(180deg, #e9f2fc 0%, #f1f6fa 55%, var(--canvas-soft) 100%);
  color: var(--ink);
  padding: 48px var(--lg) 88px;
  text-align: center;
}
.hero h1 { color: var(--ink); }
/* 增长图形：五根递增的柱子，取代原来五个无含义的彩色方格（用户 2026-09-25 定）。
   配色是 primary 的浅深阶，与登录按钮同族。纯装饰，对读屏器只报一句说明。 */
.growth {
  display: block;
  width: 200px;
  max-width: 62%;
  height: auto;
  margin: var(--lg) auto 0;
}
/* 柱子的颜色统一由这里给，标记里不写死 hex，色阶只有一个出处 */
.growth .b1 { fill: var(--blue-200); }
.growth .b2 { fill: var(--blue-300); }
.growth .b3 { fill: var(--blue-400); }
.growth .b4 { fill: var(--blue-500); }
.growth .b5 { fill: var(--primary); }

/* 白卡片压在夜色带下沿：Notion 官网那个「浮起的白药丸」的做法 */
.wrap-narrow.lifted {
  margin-top: -64px;
  padding-top: 0;
}

/* ---------- 卡片顶部彩带 ---------- */
.card-stripe {
  position: relative;
  overflow: hidden;
}
.card-stripe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--blue-300), var(--blue-500), var(--primary));
}

/* ---------- 小节色标：放在 h2 前，一个小节一色 ---------- */
.sicon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: var(--xs);
  vertical-align: 2px;
}
.sicon-blue { background: var(--primary); }
.sicon-teal { background: var(--sticker-teal); }

/* ---------- 手机：夜色带与压边都要收一收 ---------- */
@media (max-width: 720px) {
  .hero { padding: var(--xxl) var(--md) 72px; }
  .wrap-narrow.lifted { margin-top: -56px; padding-left: var(--md); padding-right: var(--md); }
  .growth { width: 168px; max-width: 70%; }
  .nav .wordmark { font-size: 17px; }
  .brandmark { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
}