/* 官网样式（Q391，风格 A：跟 App 一致）。设计值取自 design/contue-tokens.css。 */
:root {
  --canvas: rgb(242, 244, 246);
  --card: rgb(255, 255, 255);
  --card-hover: rgb(248, 250, 252);
  --ink: rgb(38, 46, 56);
  --ink-muted: rgb(107, 115, 128);
  --ink-secondary: rgb(51, 65, 85);
  --ink-faint: rgb(148, 163, 184);
  --line: rgb(219, 222, 224);
  --line-subtle: rgb(235, 237, 240);
  --primary: rgb(79, 69, 227);
  --primary-hover: rgb(67, 57, 210);
  --primary-light: rgb(238, 242, 255);
  --primary-border: rgb(199, 209, 252);
  --emerald: rgb(16, 185, 129);
  --amber: rgb(245, 158, 11);
  --amber-light: rgb(254, 248, 233);
  --amber-border: rgb(253, 230, 138);
  --defect: rgb(251, 113, 133);
  --defect-light: rgb(255, 241, 242);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow: 0 24px 60px rgba(30, 30, 60, .10);
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans", ui-sans-serif, system-ui, sans-serif;
  --font-news: "New York", "Iowan Old Style", "Songti SC", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: rgb(22, 22, 22);
    --card: rgb(31, 31, 31);
    --card-hover: rgb(42, 42, 42);
    --ink: rgb(230, 230, 230);
    --ink-muted: rgb(153, 153, 153);
    --ink-secondary: rgb(199, 199, 199);
    --ink-faint: rgb(128, 128, 128);
    --line: rgb(50, 50, 50);
    --line-subtle: rgb(37, 37, 37);
    --primary: rgb(99, 166, 250);
    --primary-hover: rgb(130, 185, 252);
    --primary-light: rgba(59, 130, 246, .15);
    --primary-border: rgba(59, 130, 246, .35);
    --amber-light: rgba(251, 191, 36, .15);
    --amber-border: rgba(251, 191, 36, .35);
    --defect-light: rgba(251, 113, 133, .15);
    --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.6 var(--font);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
main { flex: 1; }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.narrow { width: min(720px, 100% - 32px); margin: 0 auto; }

/* 顶栏 */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line-subtle); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--font-display); color: var(--ink); }
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.nav { display: flex; gap: 22px; font-size: 14px; color: var(--ink-muted); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-muted); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: var(--card); }
.lang .menu { position: absolute; right: 0; top: 36px; min-width: 120px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.lang .menu a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink); }
.lang .menu a:hover { background: var(--primary-light); color: var(--primary); }
.lang .menu a[aria-current="true"] { color: var(--primary); font-weight: 600; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--radius-md); background: var(--primary); color: #fff; font: 600 14px/1 var(--font); border: 1px solid transparent; cursor: pointer; transition: background .14s ease-in-out; }
.btn:hover { background: var(--primary-hover); color: #fff; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--card-hover); color: var(--ink); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 文字 */
h1 { margin: 0 0 14px; font: 700 40px/1.1 var(--font-display); letter-spacing: -.02em; }
h2 { margin: 0 0 10px; font: 650 20px/1.3 var(--font-display); }
.lede { margin: 0 0 28px; color: var(--ink-muted); font-size: 17px; max-width: 34em; }
.page-head { padding: 56px 0 28px; }
.banner { display: inline-block; margin: 0 0 20px; padding: 6px 12px; border-radius: 999px; background: var(--amber-light); border: 1px solid var(--amber-border); color: var(--ink-secondary); font-size: 13px; }
.note { color: var(--ink-muted); font-size: 14px; }
code, .mono { font-family: var(--mono); font-size: .92em; }
code { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line-subtle); }

/* 卡片和栅格 */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid3 .panel p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.grid3 .panel p.note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-subtle); font-size: 13px; color: var(--ink-faint); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid2 .panel p { margin: 0; color: var(--ink-muted); font-size: 14px; }

/* 首页首屏 */
.hero { padding: 72px 0 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 48px; line-height: 1.08; }
.shot { border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.shot .bar { height: 30px; border-bottom: 1px solid var(--line-subtle); display: flex; gap: 6px; align-items: center; padding: 0 12px; }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.shot .rows { padding: 10px; }
.shot .item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); font-size: 13px; }
.shot .item.sel { background: var(--primary-light); }
.shot .q { font: 600 11px/1 var(--mono); color: var(--primary); }
.shot .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.shot .t { flex: 1; }
.shot .who { font-size: 11px; color: var(--ink-faint); }
.section { padding: 24px 0 56px; }

/* 价格 */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { display: flex; flex-direction: column; gap: 10px; }
.plan.featured { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-light); }
.plan .name { font: 700 20px/1.2 var(--font-display); }
.plan .space { color: var(--ink-muted); font-size: 14px; }
.plan .price { font: 700 30px/1 var(--font-display); margin-top: 6px; }
.plan .price small { font: 500 13px/1 var(--font); color: var(--ink-muted); }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-secondary); }
.plan li { padding: 4px 0 4px 20px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-border); }
.quota-explain { margin: 16px 0 0; line-height: 1.6; }
.plans.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.plan.local { background: var(--canvas); border-style: dashed; }
.plan .sub { margin-top: -6px; font-size: 12px; color: var(--ink-muted); min-height: 18px; }
.plan .space { font: 700 28px/1.1 var(--font-display); color: var(--ink); margin-top: 6px; }
.plan .fit { margin-top: -6px; font-size: 12px; line-height: 1.5; color: var(--primary); min-height: 36px; }
.plan .alt { margin-top: -4px; font-size: 12px; color: var(--ink-muted); min-height: 36px; line-height: 1.5; }
.plan .cta { margin-top: auto; padding-top: 14px; }
.plan .cta .btn { width: 100%; white-space: nowrap; padding: 0 8px; }
.plans.five .price { font-size: 26px; white-space: nowrap; }
.plans.five .price small { font-size: 12px; }
.page-head .team { display: inline-block; margin: 0 0 20px 8px; padding: 6px 12px; border-radius: 999px; background: var(--primary-light); border: 1px solid var(--primary-border); color: var(--primary); font-size: 13px; }
.space-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.space-info h3 { margin: 0 0 12px; font: 650 16px/1.3 var(--font-display); }
.space-info .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-subtle); font-size: 14px; }
.space-info .row:last-of-type { border-bottom: 0; }
.space-info .row span:last-child { color: var(--ink-muted); text-align: right; }
.space-info .note { margin: 12px 0 0; font-size: 12px; color: var(--ink-faint); }
.est { display: flex; gap: 12px; }
.est div { flex: 1; padding: 14px; border-radius: var(--radius-md); background: var(--primary-light); font-size: 12px; color: var(--ink-secondary); }
.est b { display: block; font: 700 22px/1.3 var(--font-display); color: var(--primary); }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.perks .panel { padding: 16px 18px; }
.perks h3 { margin: 0 0 6px; font: 650 15px/1.3 var(--font-display); }
.perks p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.together { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.together .tag { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); }

/* 接入说明 */
.steps { counter-reset: s; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.step::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 13px; }
.step p { margin: 2px 0 0; color: var(--ink-muted); font-size: 14px; }

/* 更新日志：报纸 */
.news { padding: 28px 32px; }
.masthead { text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 12px; margin-bottom: 8px; }
.masthead .title { font: 800 42px/1 var(--font-news); letter-spacing: .02em; }
.masthead .sub { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.issue { padding: 20px 0; border-bottom: 1px solid var(--line); }
.issue:last-child { border-bottom: 0; }
.issue .dateline { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.issue h2 { font: 700 28px/1.15 var(--font-news); margin: 6px 0 10px; }
.issue p { margin: 0 0 8px; color: var(--ink-secondary); }

/* 政策页 */
.legal { padding: 8px 0 32px; }
.legal h1 { font-size: 34px; }
.legal h2 { margin-top: 28px; font-size: 18px; }
.legal p, .legal li { color: var(--ink-secondary); }
.legal .updated { color: var(--ink-faint); font-size: 13px; }
.legal a { color: var(--primary); }

/* 登录和账号页（由 contue-cloud 出页面，共用本样式） */
.auth { display: grid; place-items: center; padding: 56px 0 72px; }
.auth .panel { width: min(420px, 100%); padding: 36px 32px 32px; border-radius: 16px; box-shadow: var(--shadow); }
.auth h1 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.01em; text-align: center; }
label { display: block; margin: 0 0 6px; color: var(--ink-muted); font-size: 13px; }
input[type=email], input[type=text], select { width: 100%; height: 40px; margin: 0 0 16px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); font: inherit; outline: none; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.msg { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; }
.msg.err { color: var(--defect); background: var(--defect-light); }
.msg.ok { color: var(--ink-secondary); background: var(--primary-light); }
.msg.wait { color: var(--ink-secondary); background: var(--amber-light); }
.account { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 40px 0 56px; }
.side { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.side a { padding: 8px 10px; border-radius: var(--radius-md); color: var(--ink-muted); }
.side a:hover { background: var(--card); color: var(--ink); }
.side .who { padding: 0 10px 12px; color: var(--ink-faint); font-size: 13px; word-break: break-all; }
.account .panel { margin-bottom: 16px; }
.account h2 { font-size: 15px; margin-bottom: 14px; }
.plan-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plan-line .name { font: 700 26px/1 var(--font-display); }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); }
.meter { height: 8px; border-radius: 999px; background: var(--line-subtle); margin: 18px 0 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); }
.meter.over i { background: var(--defect); }
.meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-muted); }
.list .li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-subtle); font-size: 14px; }
.list .li:first-of-type { border-top: 0; }
.list .li form { margin: 0; flex: none; }
.list .li span:last-child { color: var(--ink-faint); font-size: 13px; white-space: nowrap; }
.empty { color: var(--ink-faint); font-size: 14px; }

/* 页脚 */
.foot { margin-top: 32px; padding: 40px 0 28px; border-top: 1px solid var(--line-subtle); }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; font-size: 14px; }
.foot h5 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.foot a { display: block; color: var(--ink-muted); margin: 6px 0; }
.foot a:hover { color: var(--primary); }
.foot a.brand { display: flex; margin: 0; color: var(--ink); }
.foot .base { margin-top: 28px; font-size: 12px; color: var(--ink-faint); }

@media (max-width: 1100px) {
  .plans.five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero, .account, .grid3 { grid-template-columns: 1fr; }
  /* 手机上页尾：品牌单占一行，三组链接并排，不再竖着排成一长列（Q525） */
  .foot { padding: 28px 0 20px; }
  .foot .cols { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; font-size: 13px; }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .foot a { margin: 4px 0; }
  .foot .base { margin-top: 18px; }
  .plans, .plans.five { grid-template-columns: 1fr 1fr; }
  .space-info { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .hero h1 { font-size: 36px; }
  h1 { font-size: 32px; }
}
@media (max-width: 520px) {
  .plans, .plans.five, .perks { grid-template-columns: 1fr; }
  .est { flex-direction: column; }
  .top .right .signin { display: none; }
}

/* 首页（Q396 口径） */
.eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--primary); }
.sec-title { font-size: 28px; margin: 0 0 8px; }
.sec-lede { margin: 0 0 24px; color: var(--ink-muted); max-width: 40em; }
.issue-mock { padding: 16px 18px; }
.issue-mock .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.issue-mock .title { font-weight: 650; font-size: 14px; }
.issue-mock .part { border-top: 1px solid var(--line-subtle); padding: 10px 0 8px; }
.issue-mock .label { font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.issue-mock .entry { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; color: var(--ink-secondary); }
.issue-mock .by { flex: none; width: 54px; font-size: 11px; font-weight: 600; color: var(--primary); padding-top: 2px; }
.issue-mock .muted { color: var(--ink-faint); }
.issue-mock .ok { color: var(--emerald); font-weight: 600; }
.relay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 0; margin: 0; list-style: none; }
.relay-step { position: relative; min-width: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.relay-step:not(:last-child)::after { content: "→"; position: absolute; right: -23px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 21px; }
.relay-no { display: block; margin-bottom: 10px; color: var(--primary); font: 600 12px/1 var(--mono); }
.relay .tool { display: block; color: var(--ink-faint); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.relay strong { display: block; margin: 12px 0 8px; color: var(--ink); font-size: 16px; }
.relay p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.cloud-relay, .privacy-brief { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; align-items: start; border-top: 1px solid var(--line); }
.cloud-relay h2, .privacy-brief h2 { margin: 8px 0 0; font-size: 24px; }
.cloud-relay p, .privacy-brief p { margin: 0; color: var(--ink-secondary); line-height: 1.7; }
/* 图标（Q595）：线框、跟随主色，放在浅色底的圆角方块里 */
.ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; background: var(--primary-light); color: var(--primary); }
.ico svg, .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.ico.sm { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 8px; }
.ico.sm svg { width: 18px; height: 18px; }
.feat-head { display: flex; align-items: center; gap: 10px; }
.feat-head .ico { width: 34px; height: 34px; margin: 0; }
.feat-head .ico svg { width: 19px; height: 19px; }
.feat-head .eyebrow { margin: 0; }
.conn-item { display: flex; gap: 14px; align-items: flex-start; }
.conn-item + .conn-item { margin-top: 18px; }
.conn p.fine { margin-top: 20px; }
.conn p b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 650; }
.conn p.fine { font-size: 14px; color: var(--ink-muted); }
.conn p.fine a { color: var(--primary); }
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.parts .panel h3 { margin: 0 0 6px; font-size: 16px; }
.parts .panel p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line-subtle); vertical-align: top; }
.compare thead th { border-top: 0; font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.compare td:first-child { color: var(--ink-muted); width: 22%; }
.compare td:last-child { color: var(--ink); font-weight: 500; }
.closing { text-align: center; padding: 56px 0 24px; }
.closing h2 { font-size: 30px; }
.closing p { color: var(--ink-muted); margin: 0 0 24px; }
@media (max-width: 860px) {
  .grid2, .relay, .parts, .cloud-relay, .privacy-brief { grid-template-columns: 1fr; }
  .relay { gap: 20px; }
  .relay-step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
  .cloud-relay, .privacy-brief { gap: 14px; }
  .compare td:first-child { width: auto; }
}

/* AI 授权页（ContueCloudOAuth.htmlPage）沿用的旧写法：button / .secondary / .actions / .err .ok .wait */
.auth .panel > p { color: var(--ink-muted); margin: 0 0 18px; }
.auth .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.auth button { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: var(--radius-md); background: var(--primary); color: #fff; font: 600 14px/1 var(--font); border: 1px solid transparent; cursor: pointer; }
.auth button:hover { background: var(--primary-hover); }
.auth button.secondary, .auth button.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.auth button.secondary:hover, .auth button.ghost:hover { background: var(--card-hover); }
.auth button:disabled { opacity: .55; cursor: not-allowed; }
.auth .err, .auth .ok, .auth .wait { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; }
.auth .err { color: var(--defect); background: var(--defect-light); }
.auth .ok { color: var(--ink-secondary); background: var(--primary-light); }
.auth .wait { color: var(--ink-secondary); background: var(--amber-light); }
.auth .hint { font-size: 13px; color: var(--ink-muted); }

/* 第三方一键登录（Q408） */
.auth .or { display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; font-size: 13px; color: var(--ink-faint); }
.auth .or::before, .auth .or::after { content: ""; flex: 1; border-top: 1px solid var(--line-subtle); }
.auth .providers { display: flex; flex-direction: column; gap: 10px; }
.auth .providers .provider { width: 100%; text-decoration: none; gap: 10px; }
.auth .provider svg { width: 18px; height: 18px; flex: none; }

/* 登录、授权页的统一外观（Q591） */
.auth-mark { display: block; width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 10px; }
.auth .panel > p.auth-lede { margin: 0 0 24px; text-align: center; font-size: 14px; }
.auth input[type=email], .auth input[type=text], .auth select { height: 44px; }
.auth .btn, .auth button.btn { height: 44px; }
.auth form .row { flex-wrap: nowrap; margin-top: 4px; }
.auth form .row .btn { flex: 1; }
.auth form .row.stack { flex-direction: column; }
.auth form .row.stack .btn { width: 100%; flex: none; }
.auth .btn.quiet { background: none; border-color: transparent; color: var(--ink-muted); font-weight: 500; }
.auth .btn.quiet:hover { background: var(--card-hover); color: var(--ink); }
.auth .status { text-align: center; }
.auth .status p { color: var(--ink-muted); }
.auth-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; font-size: 22px; font-weight: 700; line-height: 1; }
.auth-icon.is-ok { background: rgba(16, 185, 129, .14); color: var(--emerald); }
.auth-icon.is-no { background: var(--defect-light); color: var(--defect); }
.auth-icon.is-warn { background: var(--amber-light); color: var(--amber); }
.auth .scope { margin: 0 0 20px; padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }
.auth .scope li { padding: 8px 0; border-top: 1px solid var(--line-subtle); }
.auth .scope b { color: var(--ink); font-weight: 600; }
.auth .code-input { font-family: var(--mono); font-size: 18px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.field { position: relative; margin: 0 0 16px; }
.field input { margin: 0 !important; }
.suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.suggest[hidden] { display: none; }
.suggest li { padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.suggest li.on, .suggest li:hover { background: var(--primary-light); color: var(--primary); }
.top.lean .wrap { gap: 16px; }
.foot.lean { padding: 20px 0; text-align: center; }
.foot.lean .base { margin: 0; }
.foot.lean .base a { display: inline; margin: 0 8px; }

/* 账号页套餐折叠（原先没有样式，露出系统三角） */
.usage-fold summary { list-style: none; cursor: pointer; position: relative; padding-right: 24px; }
.usage-fold summary::-webkit-details-marker { display: none; }
.usage-fold summary::after { content: "›"; position: absolute; right: 4px; top: 2px; color: var(--ink-faint); font-size: 20px; line-height: 1; transition: transform .14s ease-in-out; }
.usage-fold[open] summary::after { transform: rotate(90deg); }
.usage-fold .list { margin-top: 10px; }

/* 首页交接对比图：团队 Issue vs 一个人带 Agent 接力 */
.cmp { margin-top: 16px; padding: 32px 28px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cmp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.5fr); gap: 28px; }
.cmp-rule { background: var(--line-subtle); }
.cmp h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--line-subtle); font: 700 22px/1.3 var(--font-display); }
.cmp-cols > div:last-child h3 { color: var(--primary); border-bottom-color: var(--primary-border); }
.cmp-lead { margin: 0; font: 650 16px/1.4 var(--font-display); color: var(--ink); }
.cmp-sub { margin: 4px 0 18px; color: var(--ink-muted); font-size: 14px; }
.cmp-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.cmp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-subtle); font-weight: 650; font-size: 14px; }
.cmp-q { font: 600 12px/1 var(--mono); color: var(--ink-muted); background: var(--canvas); border-radius: var(--radius-sm); padding: 4px 7px; }
.cmp-label { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.cmp-t { font: 12px/1.4 var(--mono); color: var(--ink-faint); }
.cmp-who { color: var(--ink-muted); }
.cmp-c { display: grid; grid-template-columns: 42px 72px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; font-size: 13px; color: var(--ink-secondary); border-bottom: 1px dashed var(--line-subtle); }
.cmp-old { color: var(--ink-faint); }
.cmp-bot { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink); font-size: 12px; font-weight: 600; }
.cmp-assign { padding: 6px 0 6px 50px; font-size: 12px; color: var(--ink-faint); border-bottom: 1px dashed var(--line-subtle); }
.cmp-note, .cmp-pack { margin-top: 14px; padding: 10px 14px; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 13px; line-height: 1.6; }
.cmp-note { border-left: 3px solid var(--line); background: var(--canvas); color: var(--ink-secondary); }
.cmp-pack { border-left: 3px solid var(--primary); background: var(--primary-light); color: var(--primary); }
.cmp-brief { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--primary-border); border-radius: var(--radius-md); background: var(--primary-light); }
.cmp-brief div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--primary); }
.cmp-brief p { margin: 0; font-size: 14px; color: var(--ink); }
.cmp-group { position: relative; padding-right: 104px; }
.cmp-e { display: grid; grid-template-columns: 40px 84px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius-md); font-size: 13px; color: var(--ink-secondary); }
.cmp-e.done, .cmp-e.done .cmp-who, .cmp-e.hist, .cmp-e.hist .cmp-who { color: var(--ink-faint); }
.cmp-e.hist > span:nth-child(3) { font-style: italic; }
.cmp-e.new { margin: 3px 0; background: var(--card); border: 1px solid var(--primary-border); }
.cmp-pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.cmp-pill.done { background: var(--canvas); color: var(--ink-faint); }
.cmp-pill.new { background: var(--primary); color: #fff; }
.cmp-pill.hist { border: 1px dashed var(--line); color: var(--ink-faint); }
.cmp-aside { position: absolute; right: 0; top: 0; bottom: 0; width: 92px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: 12px; line-height: 1.5; }
.cmp-aside::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 6px; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 6px 6px 0; }
.cmp-aside.skip { color: var(--ink-faint); }
.cmp-aside.read { color: var(--primary); font-weight: 600; }
.cmp-aside.read span { color: var(--ink-faint); font-weight: 400; }
.cmp-divider { display: flex; align-items: center; gap: 10px; margin: 8px 104px 8px 0; font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.cmp-divider::before, .cmp-divider::after { content: ""; flex: 1; border-top: 1.5px dashed var(--primary-border); }
.cmp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
.cmp-chain b { padding: 3px 9px; border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); font-weight: 600; }
.cmp-chain b.next { background: var(--card); border: 1px dashed var(--primary-border); color: var(--primary); }
.cmp-chain i { font-style: normal; color: var(--ink-faint); }
.cmp-foot { margin-top: 28px; text-align: center; }
.cmp-big { margin: 0; font: 650 18px/1.4 var(--font-display); color: var(--ink); }
.cmp-small { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
.cmp-auto { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 860px) {
  .cmp { padding: 22px 16px; }
  .cmp-cols { grid-template-columns: 1fr; gap: 28px; }
  .cmp-rule { display: none; }
  .cmp-group { padding-right: 0; }
  .cmp-aside { position: static; width: auto; padding: 4px 8px; }
  .cmp-aside::before { display: none; }
  .cmp-divider { margin-right: 0; }
  .cmp-c { grid-template-columns: 40px 64px minmax(0, 1fr); }
  .cmp-e { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cmp-e .cmp-who { display: none; }
}
/* 首页产品亮点（Q595）：逐个讲，左文右图，不套文字框 */
.parts .panel { background: none; border: 0; border-top: 2px solid var(--line); border-radius: 0; padding: 18px 0 0; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.points > div { padding-top: 18px; border-top: 2px solid var(--line); }
.points h3 { margin: 0 0 6px; font: 650 17px/1.3 var(--font-display); }
.points p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); }
.feature.rev .feature-text { order: 2; }
.feature-text h2 { margin: 8px 0 12px; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.feature-text p { margin: 0 0 14px; color: var(--ink-secondary); line-height: 1.7; }
.feature-text .eg { padding-left: 14px; border-left: 3px solid var(--primary-border); color: var(--ink-muted); font-size: 14px; }
.feature-text .eg b { color: var(--ink); font-weight: 600; }
.feature-text .note { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); }
.feature-text .feat-list { margin: 0 0 16px; padding: 0; list-style: none; }
.feature-text .feat-list li { position: relative; padding: 5px 0 5px 24px; color: var(--ink); font-weight: 600; }
.feature-text .feat-list li::before { content: "✓"; position: absolute; left: 2px; top: 5px; color: var(--primary); font-weight: 700; }
.demo { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; color: var(--ink-secondary); }
.demo-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin-bottom: 8px; border: 1px solid var(--primary-border); border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); }
.demo-search::before { content: "⌕"; color: var(--primary); font-size: 16px; }
.demo-hit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-subtle); }
.demo-hit:first-of-type { border-top: 0; }
.demo-hit .q { font: 600 11px/1 var(--mono); color: var(--primary); }
.demo-hit .snip { grid-column: 2 / -1; color: var(--ink-muted); font-size: 12px; line-height: 1.55; }
.demo-hit.sess { grid-template-columns: 1fr; }
.demo-hit.sess .snip { grid-column: auto; font-size: 13px; color: var(--ink-secondary); }
.demo-tag { padding: 2px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.demo-tag.plain { background: var(--canvas); color: var(--ink-faint); }
.demo-flow { display: grid; }
.demo-step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0 0 16px; }
.demo-step:last-child { padding-bottom: 0; }
.demo-step:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: 2px; border-left: 1.5px dashed var(--primary-border); }
.demo-step i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font: 600 11px/24px var(--mono); text-align: center; font-style: normal; }
.demo-step span { padding-top: 3px; line-height: 1.5; }
.demo-step b { color: var(--ink); font-weight: 600; }
.demo-img { position: relative; height: 132px; padding: 16px; border-radius: var(--radius-md); background: var(--canvas); border: 1px solid var(--line-subtle); }
.demo-img s { display: block; height: 8px; margin-bottom: 10px; border-radius: 4px; background: var(--line); text-decoration: none; }
.demo-img s:nth-child(2) { width: 70%; }
.demo-img s:nth-child(4) { width: 55%; }
.demo-img em { position: absolute; left: 12px; right: 30%; top: 44px; height: 30px; border: 2px solid var(--defect); border-radius: 6px; }
.demo-img em::after { content: attr(data-label); position: absolute; left: 0; top: 36px; padding: 2px 8px; border-radius: 6px; background: var(--defect-light); color: var(--defect); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.demo-arrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.demo-arrow::before { content: "↓"; color: var(--primary); font-size: 18px; }
@media (max-width: 860px) {
  .points { grid-template-columns: 1fr; gap: 20px; }
  .feature { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .feature.rev .feature-text { order: 0; }
  .feature-text h2 { font-size: 24px; }
}

#agents ol, #agents ul { margin: 12px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
#agents li { margin: 0 0 10px; }
#agents pre { margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; border-radius: var(--radius-md); background: var(--canvas); border: 1px solid var(--line-subtle); font-size: 12.5px; line-height: 1.5; }
#agents pre code { background: none; padding: 0; white-space: pre; }