/* ==========================================================================
   问渠营销层共享组件 ·「活水」板块（浅色 · 对齐现网 token）
   依赖页面内联 :root（--brand/--brand-deep/--brand-bg/--ink/--ink2/--ink3/--bg/--card/--line）
   前缀 wk- 避免与页面既有样式冲突；无外链资源、无 color-mix、X5 可降级
   ========================================================================== */

/* —— 首屏诗句 eyebrow —— */
.wk-poem { margin: 0 0 10px; font-size: 12px; letter-spacing: .2em; color: var(--ink3); }
.wk-poem::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--brand); margin-right: 10px; vertical-align: 4px; }

/* —— 写给学生提示卡（麦黄 · 首屏下方通栏）—— */
.wk-hero-note { margin: 0 0 8px; background: #FFF7E8; border: 1px solid #F0C36D; border-left: 3px solid #FFC53D; border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #8A5A00; line-height: 1.85; }
.wk-hero-note b { color: #6B4400; }

/* ==========================================================================
   渠台（首屏可交互对话 · 签名组件）
   ========================================================================== */
.wk-dock { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 10px 28px rgba(23,24,28,.06); }
.wk-dock-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wk-dock-head .t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.wk-dock-head .s { font-size: 11.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.wk-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.wk-tab { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink2); cursor: pointer; font-family: inherit; min-height: 44px; }
.wk-tab small { font-size: 10.5px; color: var(--ink3); margin-left: 4px; }
.wk-tab[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-bg); }
.wk-chat { display: flex; flex-direction: column; gap: 10px; min-height: 230px; max-height: 320px; overflow-y: auto; padding: 2px; }
.wk-msg { max-width: 88%; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.75; }
.wk-msg .wk-who { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 3px; }
.wk-msg-coach { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 4px 13px 13px 13px; }
.wk-msg-coach .wk-who { color: var(--brand-deep); }
.wk-msg-me { align-self: flex-end; background: var(--brand-bg); border-radius: 13px 4px 13px 13px; }
.wk-msg-me .wk-who { color: var(--brand-deep); text-align: right; }
.wk-msg-sol { align-self: stretch; max-width: 100%; background: #FFFDF6; border: 1px dashed var(--brand); border-radius: 12px; }
.wk-msg-sol .wk-who { color: var(--brand-deep); }
.wk-msg-sol ol { margin: 4px 0 2px; padding-left: 1.25em; }
.wk-msg-sol .wk-refold { margin-top: 6px; padding-top: 6px; border-top: 1px dotted #E3DDC9; font-size: 11.5px; color: #8A7A50; }
.wk-choices { display: grid; gap: 8px; margin-top: 12px; }
.wk-choice { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; min-height: 44px; padding: 9px 13px; border-radius: 12px; border: 1.5px solid var(--line); background: #F7F8FA; color: var(--ink); font-size: 13.5px; font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.wk-choice:hover { border-color: var(--brand); background: var(--brand-bg); }
.wk-choice .cnt { font-size: 11px; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-choice.is-solution { border-style: dashed; color: var(--brand-deep); }
.wk-choice.is-giveup { border-color: #F0C9CB; }
.wk-end { margin-top: 12px; background: var(--brand-bg); border: 1px solid rgba(23,131,110,.3); border-radius: 16px; padding: 16px; font-size: 13.5px; }
.wk-end h4 { font-size: 15.5px; margin: 0 0 6px; color: var(--brand-deep); }
.wk-end ul { margin: 8px 0 12px; padding-left: 1.2em; color: var(--ink2); line-height: 1.9; }
.wk-end ul li::marker { color: var(--brand); }
.wk-end-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wk-end-actions a { display: inline-block; text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 11px; }
.wk-end-actions .a1 { background: var(--brand); color: #fff; }
.wk-end-actions .a2 { background: #fff; color: var(--brand-deep); border: 1.5px solid var(--brand); }
.wk-dock-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink3); line-height: 1.75; }

/* —— 活水渠进度（横向 · 五节点）—— */
.wk-channel { --fill: 12%; padding-top: 14px; }
.wk-channel-track { position: relative; height: 8px; border-radius: 99px; background: #E9EBEE; overflow: hidden; }
.wk-channel-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: 99px; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); transition: width .7s cubic-bezier(.22,1,.36,1); }
.wk-channel.is-flow .wk-channel-fill { background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-deep)); background-size: 200% 100%; animation: wk-flow 2.2s linear infinite; }
@keyframes wk-flow { to { background-position: -200% 0; } }
.wk-channel-nodes { list-style: none; display: flex; margin: 8px 0 0; padding: 0; }
.wk-channel-nodes li { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.wk-channel-nodes .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #C6CBD2; background: #fff; transition: background .3s, border-color .3s, box-shadow .3s; }
.wk-channel-nodes .t { font-size: 12px; font-weight: 600; color: var(--ink3); }
.wk-channel-nodes .d { display: none; font-size: 11px; color: var(--ink3); line-height: 1.5; max-width: 8.5em; margin: 0 auto; min-height: 33px; }
.wk-channel.wk-annotated .wk-channel-nodes .d { display: block; }
.wk-channel-nodes li.is-done .dot { background: var(--brand); border-color: var(--brand); }
.wk-channel-nodes li.is-done .t { color: var(--brand-deep); }
.wk-channel-nodes li.is-active .dot { background: #FFC53D; border-color: #E4A800; box-shadow: 0 0 0 4px rgba(255,197,61,.28); }
.wk-channel-nodes li.is-active .t { color: #8A5A00; }
.wk-channel-nodes li.n-stuck.is-active .dot { background: #E5484D; border-color: #C13236; box-shadow: 0 0 0 4px rgba(229,72,77,.18); }
.wk-channel-nodes li.n-stuck.is-active .t { color: #B3272F; }
@media (max-width:560px) { .wk-channel-nodes .d { display: none !important; } }

/* —— 机制三步（带序号）—— */
.wk-steps { list-style: none; counter-reset: wks; margin: 0; padding: 0; display: grid; gap: 12px; }
.wk-steps li { counter-increment: wks; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px 14px 54px; }
.wk-steps li::before { content: counter(wks, decimal-leading-zero); position: absolute; left: 16px; top: 15px; font-size: 14px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.wk-steps b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.wk-steps span { font-size: 13px; color: var(--ink2); line-height: 1.8; }
.wk-grid2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; }
.wk-grid2 .wk-vcenter { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { .wk-grid2 { grid-template-columns: 1fr; } }

/* —— 样题卡（课内/拓展）—— */
.wk-samples { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.wk-sample { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; }
.wk-sample .lv { font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-bottom: 8px; }
.wk-sample .lv.in { color: var(--brand-deep); }
.wk-sample .lv.ext { color: #B3272F; }
.wk-sample h3 { font-size: 15.5px; margin: 0 0 6px; }
.wk-sample p { font-size: 12.5px; color: var(--ink2); line-height: 1.8; margin: 0 0 12px; flex: 1; }
.wk-sample a { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; }
@media (max-width: 860px) { .wk-samples { grid-template-columns: 1fr; } }

/* —— 进步看得见：统计 + 知识树 —— */
.wk-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0; }
.wk-stat { background: #FAFAFB; border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; text-align: center; }
.wk-stat .v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-stat .k { font-size: 11.5px; color: var(--ink3); }
.wk-stat .v.warn { color: #B3272F; } .wk-stat .v.ok { color: var(--brand-deep); } .wk-stat .v.streak { color: #8A5A00; }
.wk-tree { display: grid; gap: 12px; }
.wk-tree-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; }
.wk-tree-row .lb { font-size: 12px; font-weight: 700; color: var(--ink3); padding-top: 7px; }
.wk-tree-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-node { font-size: 12.5px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); background: #FAFAFB; color: var(--ink2); }
.wk-node.ph { border-left: 3px solid var(--brand); }
.wk-node.ch { border-left: 3px solid #2E65A8; }
.wk-node.weak { border: 1px solid #F0C9CB; background: #FDF3F3; color: #B3272F; font-weight: 600; }
@media (max-width: 560px) { .wk-stats { grid-template-columns: repeat(3,1fr); } .wk-tree-row { grid-template-columns: 40px 1fr; } }

/* —— 周报 mini（浅青面板）—— */
.wk-weekly { background: var(--brand-bg); border: 1px solid rgba(23,131,110,.22); border-radius: 16px; padding: 18px; }
.wk-weekly h3 { font-size: 15px; margin: 0 0 4px; }
.wk-weekly .tag { font-size: 11.5px; color: var(--ink3); }
.wk-bars { display: grid; gap: 8px; margin-top: 12px; }
.wk-bar { display: grid; grid-template-columns: 84px 1fr 30px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink2); }
.wk-bar .tr { height: 7px; border-radius: 99px; background: rgba(23,131,110,.16); overflow: hidden; }
.wk-bar .fl { height: 100%; border-radius: 99px; background: var(--brand); }
.wk-bar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink3); }
.wk-privacy { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(23,131,110,.3); font-size: 12px; color: var(--ink2); line-height: 1.85; }

/* —— 家长 30 秒三卡 —— */
.wk-parent30 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.wk-p3 { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.wk-p3 .k { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--brand); margin-bottom: 8px; }
.wk-p3 h3 { font-size: 15px; margin: 0 0 6px; line-height: 1.55; }
.wk-p3 p { font-size: 12.5px; color: var(--ink2); line-height: 1.85; margin: 0; }
@media (max-width: 860px) { .wk-parent30 { grid-template-columns: 1fr; } }

/* —— 费用小票 —— */
.wk-receipt-wrap { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .wk-receipt-wrap { grid-template-columns: 1fr; } }
.wk-receipt { font-family: "SF Mono", Menlo, Consolas, ui-monospace, monospace; background: #FFFDF6; color: var(--ink); border: 1px dashed #C9CDD3; border-radius: 6px; padding: 18px 18px 14px; max-width: 430px; font-size: 12.5px; line-height: 2; box-shadow: 0 8px 20px rgba(23,24,28,.06); }
.wk-receipt h3 { font-family: -apple-system, "PingFang SC", sans-serif; text-align: center; letter-spacing: .18em; font-size: 14px; margin: 0 0 8px; }
.wk-receipt .cut { border-top: 1px dashed #D9DBDF; margin: 6px 0; }
.wk-receipt .row { display: flex; justify-content: space-between; gap: 14px; }
.wk-receipt .row .free { color: var(--brand-deep); font-weight: 700; }
.wk-receipt .row .none { color: #B3272F; font-weight: 700; }
.wk-receipt .total { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 8px; font-weight: 700; }
.wk-receipt .foot { text-align: center; font-family: -apple-system, "PingFang SC", sans-serif; font-size: 11px; color: var(--ink3); margin: 8px 0 0; }
.wk-facts { list-style: none; margin: 0; padding: 0; }
.wk-facts li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink2); line-height: 1.8; }
.wk-facts li:last-child { border-bottom: 0; }
.wk-facts b { font-size: 12.5px; color: var(--brand-deep); padding-top: 2px; }
@media (max-width: 560px) { .wk-facts li { grid-template-columns: 1fr; gap: 2px; } }

/* —— 段落标头复用（h2.sec/p.sec-sub 由页面内联提供）—— */
.wk-section { margin-top: 52px; }

/* —— 追问实况（课内/拓展 静态对话卡）—— */
.wk-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.wk-duel > .wk-dock { box-shadow: none; display: flex; flex-direction: column; }
.wk-duel-tag { display: inline-block; width: fit-content; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.wk-duel-tag.in { color: var(--brand-deep); background: var(--brand-bg); }
.wk-duel-tag.ext { color: #B3272F; background: #FDF3F3; }
.wk-chat-static { min-height: 0; max-height: none; overflow: visible; padding: 0; }
.wk-duel-foot { margin-top: auto; padding-top: 12px; }
.wk-duel-foot a { font-size: 13.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
@media (max-width: 860px) { .wk-duel { grid-template-columns: 1fr; } }

/* —— 手机端首屏重排：按钮后紧跟渠台（证据够得着）—— */
@media (max-width: 900px) {
  .hero .hero-left { display: contents; }
  .hero .hero-left > * { order: 10; }
  .hero .hero-left .pos { order: 1; }
  .hero .hero-left h1 { order: 2; }
  .hero .hero-left .hero-sub { order: 3; }
  .hero .hero-left .btn-trial { order: 4; }
  .hero .hero-left .cta-note { order: 6; }
  .hero .hero-left .alt-links { order: 7; }
  .hero > .wk-dock { order: 5; }
}

/* —— 手机端渠台减密（收内边距与聊天区高度）—— */
@media (max-width: 560px) {
  .wk-dock { padding: 14px 14px 12px; }
  .wk-chat { min-height: 190px; max-height: 280px; }
  .wk-tabs { gap: 6px; }
  .wk-tab { padding: 8px 12px; font-size: 13px; }
  .wk-duel > .wk-dock { padding: 14px 14px 12px; }
}

/* —— 数字等宽（指标/进度计数统一）—— */
.wk-stat .v, .wk-bar .n, .wk-dock-head .s, .wk-choice .cnt { font-variant-numeric: tabular-nums; }

/* —— 跳转主内容（键盘可达）—— */
.wk-skip { position: absolute; left: 12px; top: -52px; z-index: 99; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 8px; text-decoration: none; transition: top .15s ease; }
.wk-skip:focus { top: 12px; }

/* —— 三端直达（首页转化末步：扫码 + 直装）—— */
.wk-dl { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.wk-dl > img { width: 84px; height: 84px; border-radius: 10px; }
.wk-dl-rows { display: grid; gap: 10px; }
.wk-dl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink2); }
.wk-dl-row > b.k { flex: 0 0 96px; font-size: 13px; color: var(--ink); }
.wk-dl-row a.act { font-weight: 700; color: var(--brand-deep); text-decoration: none; }
.wk-dl-row a.btn-apk { background: var(--brand); color: #fff; border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(23,131,110,.22); }
.wk-dl-row a.btn-apk:active { background: var(--brand-deep); }
.wk-dl-note { font-size: 11.5px; color: var(--ink3); line-height: 1.7; }
@media (max-width: 560px) {
  .wk-dl { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wk-dl-row { justify-content: center; }
  .wk-dl-row > b.k { flex: none; }
}

/* —— 减动效 —— */
@media (prefers-reduced-motion: reduce) {
  .wk-channel-fill { transition: none; }
  .wk-channel.is-flow .wk-channel-fill { animation: none; }
  .wk-choice { transition: none; }
}