/* ScaffoldPath 设计基线
   参照 SIBI 风格分析（本地存档）的简化版：
   大色块分区、超大粗标题、暖橙点缀、克制圆角、无渐变无阴影堆砌。
   配色：苔绿 + 暖白（ASD 友好的低感官负荷）；行动色为深橙。
   字体：系统字体栈，零外部请求。 */

:root {
  --color-bg: #faf8f2;
  --color-surface: #ffffff;
  --color-text: #21312b;
  --color-text-muted: #4f5f58;
  --color-primary: #2e5e4e;
  --color-primary-strong: #21453a;
  --color-on-primary: #ffffff;
  --color-action: #b04f1a;
  --color-action-strong: #93400f;
  --color-soft-green: #e9f2ec;
  --color-soft-peach: #f7ecdd;
  --color-deep: #1e3a30;
  --color-on-deep: #f4f1e9;
  --color-on-deep-muted: #b8c8bd;
  --color-border: #e2dccf;
  --color-ok: #2e7d4f;
  --color-danger: #a8321f;
  --radius: 10px;
  --space: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 防御：hidden 属性不被组件的 display 规则（grid/flex）意外覆盖 */
[hidden] {
  display: none !important;
}

main {
  flex: 1;
}

.container {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--space);
}

.skip-link {
  position: absolute;
  left: var(--space);
  top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 10;
}

.skip-link:focus-visible {
  top: 0;
}

/* ---------- 头部 ---------- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  padding-block: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.header-inner nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 窄屏顶栏拥挤：Try Demo → Demo，品牌与按钮同步收紧，避免导航折行 */
.btn-short {
  display: none;
}

@media (max-width: 480px) {
  .site-header .container {
    padding-inline: 0.75rem;
  }

  .header-inner {
    gap: 0.25rem 0.5rem;
  }

  .site-header .brand {
    font-size: 1.125rem;
    gap: 0.375rem;
  }

  .site-header .brand-mark {
    height: 1.375rem;
  }

  .site-header .brand-wordmark {
    height: 1rem;
  }

  .site-header .btn {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    font-size: 0.9375rem;
  }

  .btn-full {
    display: none;
  }

  .btn-short {
    display: inline;
  }
}

.brand {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* 品牌图标与字母标：浅底用 logo-icon.svg / logo-wordmark.svg，
   深底（侧栏/页脚）用对应的 -light 版 */
.brand-mark {
  height: 1.625rem;
  width: auto;
  display: block;
  border-radius: 5px;
}

/* 字母标：画布已收紧到字形边缘，height 即视觉字高 */
.brand-wordmark {
  height: 1.125rem;
  width: auto;
  display: block;
}

.tagline {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ---------- 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-action);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--color-action-strong);
}

.btn-ghost {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--color-soft-green);
}

/* 危险区入口钮：ghost 形态 + 红描边红字（详情页 Lifecycle & gates 入口） */
.btn-danger-ghost {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: transparent;
}

.btn-danger-ghost:hover {
  background: var(--color-soft-peach);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--color-soft-green);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 2.5rem;
}

.kicker {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-action);
}

.kicker .squiggle {
  display: block;
  margin-top: 0.25rem;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.3vw, 2.65rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary-strong);
}

h2 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  color: var(--color-primary-strong);
}

.lede {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.hero-art {
  width: 100%;
  height: auto;
}

/* ---------- 内容区块 ---------- */

.section {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.section-soft {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.section-soft .step {
  background: var(--color-bg);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.step-head h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-primary-strong);
}

.step-number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.step p {
  margin: 0;
  color: var(--color-text-muted);
}

/* How-it-works 闭环图（首页）：手绘 SVG 三层图，满幅面对齐容器 */
.how-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.75rem 0 0;
}

/* ---------- 入口卡片 ---------- */

.entry-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.entry {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  height: 100%;
}

a.entry {
  color: inherit;
  text-decoration: none;
}

a.entry:hover {
  border-color: var(--color-primary);
}

.entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.entry-top strong {
  font-size: 1.0625rem;
  color: var(--color-primary-strong);
}

.entry-desc {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.badge {
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-soft-green);
  color: var(--color-text-muted);
}

.badge-live {
  background: var(--color-ok);
  color: #ffffff;
}

.entry.is-soon {
  opacity: 0.72;
}

/* ---------- 权威依据带 ---------- */

.authority-band {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  /* 与其他区块（.section / .cta-band）保持一致的垂直节奏 */
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.authority-band .kicker {
  margin-bottom: 1rem;
}

.authority-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.authority-list strong {
  display: block;
  font-size: 1.125rem;
  color: var(--color-primary-strong);
  margin-bottom: 0.125rem;
}

.authority-name {
  font-size: 0.8125rem;
  color: #6b7a72;
  line-height: 1.45;
  display: block;
}

.authority-use {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
  display: block;
  margin-top: 0.375rem;
}

.authority-note {
  margin: 1.75rem 0 0;
  font-size: 0.8125rem;
  color: #6b7a72; /* 比 text-muted 更浅的灰绿，仍满足 WCAG AA（≈4.6:1） */
}

/* ---------- CTA 横幅 ---------- */

.cta-band {
  background: var(--color-soft-peach);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.cta-inner h2 {
  margin-bottom: 0.5rem;
}

.cta-inner p {
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

/* ---------- 页脚 ---------- */

.site-footer {
  background: var(--color-deep);
  color: var(--color-on-deep);
  padding-block: 2rem 1.5rem;
}

.site-footer .brand {
  color: var(--color-on-deep);
}

.site-footer .tagline {
  color: var(--color-on-deep-muted);
}

.site-footer .footer-contact {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--color-on-deep-muted);
}

.site-footer .footer-contact a {
  color: var(--color-on-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(244, 241, 233, 0.2);
  margin-bottom: 1.25rem;
}

.footer-heading {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-deep-muted);
  margin: 0 0 0.5rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.footer-links a {
  color: var(--color-on-deep);
}

.disclaimer {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-on-deep-muted);
}

.disclaimer a {
  color: var(--color-on-deep);
}

/* ---------- Today 页状态卡 ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* app 页面里直接相邻的卡片之间留间隙——/today、/plan 的间距来自 grid 容器
   （.checkin-list/.plan-grid 的 gap），/review、/rewards 等卡片直挂 .app-main
   的页面由这条兄弟规则兜底。管理台（.admin-main）自有版式，不受影响。 */
.app-main:not(.admin-main) > .card + .card {
  margin-top: 1rem;
}

.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

output[data-state="ok"] {
  color: var(--color-ok);
  font-weight: 600;
}

output[data-state="error"] {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---------- 认证表单 ---------- */

.auth-main {
  display: flex;
  justify-content: center;
  /* 卡片高度贴合内容，不被 stretch 拉满主区（登录页字段少时下方留白） */
  align-items: flex-start;
  padding-block: clamp(1.25rem, 4vh, 2.5rem);
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.auth-sub {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.25rem;
}

.field {
  margin-bottom: 0.75rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
}

.field input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.125rem 0 0;
}

.field-check label {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-weight: 400;
  cursor: pointer;
}

.field-check input[type="checkbox"] {
  min-height: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--color-primary);
}

.form-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.auth-actions {
  margin: 0;
}

.auth-actions .btn {
  width: 100%;
}

.auth-actions .btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.auth-switch {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
}

/* 忘记密码链接：密码框下方右对齐小字 */
.auth-forgot {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  text-align: right;
}

.signin-line {
  font-size: 0.8125rem;
  color: var(--color-on-deep-muted);
  margin: 0 0 0.75rem;
}

.signin-line a {
  color: var(--color-on-deep);
}

.auth-checking {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  padding-block: 2rem;
}

/* ---------- /onboarding 向导 ---------- */

.wizard-wrap {
  display: flex;
  justify-content: center;
  padding-block: clamp(1.25rem, 4vh, 2.5rem);
}

.wizard-card {
  width: 100%;
  max-width: 36rem;
}

.step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 0.375rem;
}

.progress-track {
  height: 6px;
  background: var(--color-soft-green);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.2s ease-out;
}

.question-block {
  border: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.question-title {
  font-weight: 700;
  color: var(--color-primary-strong);
  margin-bottom: 0.5rem;
  padding: 0;
}

.question-block input[type="text"],
.question-block textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  font: inherit;
}

.question-block textarea {
  resize: vertical;
  line-height: 1.5;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
  font-size: 0.9375rem;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--color-primary);
}

.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}

.custom-add {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.custom-add input {
  flex: 1;
}

.btn-small {
  min-height: 44px;
  padding: 0.25rem 1rem;
}

.wizard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* 主按钮（Next / Start / Save）永远右对齐，Back/Skip 靠左 */
.wizard-nav .btn-primary {
  margin-left: auto;
}

.review-list {
  margin: 0;
  display: grid;
  gap: 0.25rem 1rem;
}

.review-list dt {
  font-weight: 700;
  color: var(--color-primary-strong);
  font-size: 0.875rem;
}

.review-list dd {
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

/* ---------- 无障碍基线（PRD §15） ---------- */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.site-footer :focus-visible {
  outline-color: var(--color-on-deep);
}

button,
[role="button"],
input,
select,
textarea {
  min-height: 44px;
  font: inherit;
}

@media (max-width: 720px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-art {
    max-width: 22rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Plan 页 ---------- */

.plan-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}

.plan-grid {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
  /* 2026-09-11 起（AI 措辞层批 2）取消桌面 1fr 1fr 双列：卡内改为循证/AI 双区布局，
     需要全宽；单列全宽卡，每卡自身高度不变。 */
}

.plan-card h3 {
  margin: 0;
}

.plan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.plan-meta {
  margin: 0.375rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.plan-steps {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

/* Why this? 改成小 ghost 钮形态 + 旋转 chevron：可点性一眼可见（原来只是加粗文字） */
.plan-why summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-strong);
  list-style: none;
}

.plan-why summary::-webkit-details-marker {
  display: none;
}

.plan-why summary::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2321453a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}

.plan-why[open] > summary::after {
  transform: rotate(180deg);
}

.plan-why summary:hover {
  background: var(--color-soft-green);
}

.plan-why summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .plan-why summary::after {
    transition: none;
  }
}

.plan-why ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.5rem;
}

/* ---------- 受限 AI 措辞区（AI_WORDING_PROGRAM §3.1，批 2 2026-09-11） ----------
   卡内双区：左=循证原文（人工批准，白底），右=AI 措辞区；
   桌面（≥1100px）左右分栏（竖线分隔），窄屏上下叠放（横线分隔）——
   对应关系靠同一卡盒表达，跨卡不看串。AI 永不改写左栏内容。 */

.plan-card-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.plan-card-body {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

@media (min-width: 1100px) {
  .plan-card-body {
    /* minmax(0,1fr)：防左栏长词撑爆网格（第十七话 rewards 币条同款教训）。
       21→24rem（2026-09-12 老王真机反馈）：预览态 Keep it/Try again/Discard 三钮
       实测 ≈330px，21rem 内容宽 320px 差一点换行；24rem 内容宽 368px 稳排一排。 */
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: start;
  }
  .ai-zone {
    border-left: 1px solid var(--color-border);
    padding-left: 1rem;
  }
}

@media (max-width: 1099.98px) {
  .ai-zone {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
  }
}

.ai-zone.off {
  display: none; /* 未配 DEEPSEEK_API_KEY 的环境整区不渲染（ai_enabled=false） */
}

/* 卡头 ✦ 状态点：默认隐藏，.on 点亮（JS 按"已 Keep"切换；纯装饰 aria-hidden） */
.ai-dot {
  display: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.ai-dot.on {
  display: inline-block;
}

.ai-zone-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* 失败态：温和灰字（不红字不弹窗——验证不过就当它不存在，原文卡面完整） */
.ai-zone-fail {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.ai-zone-fail + button {
  margin-top: 0.5rem;
}

/* AI 文案盒：稳态浅绿底（与 lib-fading 同家族）；预览态白底虚线（not saved yet 的视觉信号） */
.ai-note {
  background: var(--color-soft-green);
  border: 1px solid #cfe0d6;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.ai-note-preview {
  background: var(--color-surface);
  border: 1px dashed var(--color-primary);
}

.ai-note-label {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ai-note-label strong {
  color: var(--color-primary-strong);
  font-weight: 700;
}

.ai-note-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ai-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

/* 反馈框（✎ Not quite right?）：summary 链接式（比 plan-why 的钮式轻一档，
   44px 触控目标不缩水）；告知小字陈述事实不规劝（"输入自由+告知充分"） */
.ai-feedback {
  margin-top: 0.75rem;
}

.ai-feedback summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--color-primary-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.ai-feedback summary::-webkit-details-marker {
  display: none;
}

.ai-feedback summary:hover {
  text-decoration: underline;
}

.ai-feedback summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ai-feedback-body {
  display: grid;
  gap: 0.5rem;
}

.ai-feedback-lead {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ai-feedback-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}

.ai-feedback-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ai-feedback-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}


.badge-ev-established {
  background: var(--color-ok);
  color: #ffffff;
}

.badge-ev-supported {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

.badge-ev-emerging {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ---------- /today app shell（dashboard 骨架，低感官密度） ---------- */

.app-shell {
  display: grid;
  /* minmax(0,1fr) 防 1fr 被 min-content 撑爆（2026-09-12 rewards 币条撑屏真根因）：
     1fr 默认 = minmax(auto,1fr)，auto 最小值 = 内容 min-content——币条金币"单行排开"
     的 min-content 会把整列（进而整页）撑出横向滚动。minmax(0,…) 让列可缩到内容以下，
     币条自己的 flex-wrap 才有机会折行。 */
  grid-template-columns: 13.5rem minmax(0, 1fr);
  flex: 1;
}

.app-nav {
  background: var(--color-deep);
  color: var(--color-on-deep);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  /* PC：侧栏吸顶不随滚动，导航恒定可见（空间锚点）；移动端媒体查询里解除 */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  overflow-y: auto;
}

.app-nav .brand {
  color: var(--color-on-deep);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.app-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.app-nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--color-on-deep-muted);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

a.app-nav-link:hover {
  background: rgba(244, 241, 233, 0.1);
  color: var(--color-on-deep);
}

.app-nav-link[aria-current='page'] {
  background: rgba(244, 241, 233, 0.16);
  color: var(--color-on-deep);
}

.app-nav-link.is-soon {
  opacity: 0.55;
}

.nav-soon-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 0.375rem;
}

.app-nav-foot {
  margin: auto 0 0;
  font-size: 0.8125rem;
  color: var(--color-on-deep-muted);
  overflow-wrap: anywhere;
}

.app-nav-foot a {
  color: var(--color-on-deep);
}

.app-nav :focus-visible {
  outline-color: var(--color-on-deep);
}

.app-main {
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 0;
  display: flex;
  flex-direction: column;
}

/* flex 子项 min-width 归零（2026-09-12 rewards 币条撑屏修复，老王手机报：4 枚正常
   7 枚超宽）：flex item 默认 min-width:auto = min-content，而 flex-wrap 容器的
   min-content 是"全部金币单行排开"的宽——币条的 flex-wrap 根本没机会折行，卡片
   先被 min-content 撑破、整页横向溢出。归零后子项可被压到容器宽，wrap 真正生效。 */
.app-main > * {
  min-width: 0;
}

.today-head h1 {
  margin: 0;
}

.today-date {
  margin: 0.125rem 0 0;
  color: var(--color-text-muted);
}

.app-footer {
  margin-top: auto;
  padding-block: 0.625rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

.app-footer p + p {
  margin-top: 0.5rem;
}

.app-footer p:not(.app-foot-account) {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ---------- 顶部摘要条：进度环 + 本周点阵 ---------- */

.today-strip {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 真机定案：代币收纳为顶部第三卡（环 | 本周 | 代币） */
  gap: 1rem;
  margin: 1.25rem 0 1rem;
}

.strip-ring {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.strip-caption {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.strip-week h2 {
  margin: 0;
  font-size: 1rem;
}

.ring {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
}

.ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--color-soft-green);
  stroke-width: 7;
}

.ring-fill {
  fill: none;
  stroke: var(--color-action);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.ring-num strong {
  font-size: 1.25rem;
  color: var(--color-primary-strong);
}

.week-strip {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0.75rem 0 0;
  flex-wrap: wrap;
  justify-content: space-between; /* 宽屏下 7 天均匀铺满卡片 */
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 2.25rem;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
}

.week-day[aria-current='date'] {
  background: var(--color-soft-green);
}

.week-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.week-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--color-border);
}

.week-day[data-hit='true'] .week-dot {
  background: var(--color-ok);
}

/* ---------- 代币条（P0-3） ---------- */

/* 紧凑第三卡：左块（标题+币行+提示）+ 右侧 Get reward 按钮（真机定案：
   整行代币块 + 奖励按钮排收纳为顶部一卡） */
.token-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.token-card h2 {
  margin: 0 0 0.375rem;
  font-size: 1rem;
}

.token-card .token-main {
  flex: 1;
}

.token-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* 币圈放大（22 → 48，用户两轮定：32 再放大 1.5×）：代币条的主视觉；
   空心槽同源同放大；行宽不够时 flex-wrap 折行（既定行为） */
.token-row .token-coin,
.token-row .token-coin-empty {
  width: 3rem;
  height: 3rem;
}

.token-coin,
.token-coin-empty {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.token-coin {
  color: var(--color-ok);
}

.token-coin-empty {
  color: var(--color-text-muted);
  opacity: 0.55;
}

.token-count {
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--color-deep);
}

.token-more {
  margin-left: 0.25rem;
  font-weight: 600;
  color: var(--color-ok);
}

.token-hint {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  /* 高度恒定（预留两行）：earned/规则/确认句长短不一，无固定高度时换句会撑高
     卡片、推动下方内容——用户实测"币圈反复跳"而数字稳定，即此视觉层问题 */
  min-height: 2.7em;
}

/* 紧凑第三卡里的币圈示意缩小（48px 大币是整行时代的拍板；收纳进第三卡后改 20px，
   数字为主——真机定案）。兑换弹窗里的大金币不受影响（.redeem-coins 有自己的规则） */
.token-card .token-row .token-coin,
.token-card .token-row .token-coin-empty {
  width: 1.25rem;
  height: 1.25rem;
}

/* Get reward 弹窗视图1：奖励选择列表 */
.reward-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.75rem 0;
  max-height: 40vh;
  overflow-y: auto; /* 奖励多时列表内滚（弹窗本体不滚） */
  text-align: left;
}
.reward-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.reward-pick-row:focus-visible,
.order-pick-row:focus-visible {
  outline: none; /* 焦点指示 = 边框变色（同 hover），替代全局 outline——弹窗内更安静 */
  border-color: var(--color-primary);
}

.reward-pick-row:hover:not(:disabled) {
  border-color: var(--color-primary);
}
.reward-pick-row:disabled {
  opacity: 0.55;
  cursor: default;
}
.reward-pick-label {
  font-weight: 600;
}
.reward-pick-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.reward-pick-cost .token-coin {
  width: 1.25rem;
  height: 1.25rem;
}

/* 兑换确认弹窗（原生 <dialog>）：内容极小（标题+币圈排+一句+两钮），移动端经典
   弹窗坑（100vh/键盘顶起/滚动穿透）均不触及；居中由 dialog UA 样式的 margin:auto 提供 */
.redeem-dialog {
  /* 视口居中：fixed + inset 0 + margin auto + 固定宽（原 position:relative 会把弹窗钉在
     文档流位置——页面滚动后打开，弹窗在视口外上方，真机验收钓出）。fixed 本身即
     positioned 祖先，右上角 X（.modal-x absolute）的锚定不受影响 */
  position: fixed;
  inset: 0;
  height: fit-content;
  margin: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  /* 固定宽（不再 fit-content 由内容撑）：按钮 flex:1 平分后足够宽，
     文字不换行、按钮高度稳定 44px；金币加大也不改变弹窗宽度 */
  width: min(24rem, calc(100vw - 2rem));
}

.redeem-dialog::backdrop {
  background: rgba(30, 58, 48, 0.35); /* --color-deep 35% */
}

.redeem-dialog h3 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
}

.redeem-coins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 金币排居中（1 枚/2 枚/3 枚都居中） */
  gap: 0.375rem;
  margin: 0.75rem 0;
}

/* 代价可视化加大（22 → 68）：弹窗的主视觉，家长/孩子一眼看清要花几枚 */
.redeem-coins svg {
  width: 4.25rem;
  height: 4.25rem;
}

.redeem-dialog p {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.redeem-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* 两按钮等宽平分 + 禁止换行（按钮高度稳定在 44px，不被文字行数撑高） */
.redeem-actions .btn {
  flex: 1;
  white-space: nowrap;
}

/* 焦点环改内描边：Not now 是 autofocus（安全默认），全局焦点环外扩 5px 会让它
   看起来比 Redeem 大一圈（用户实测"Not now 比 Redeem 大"）；画在边缘内侧
   视觉零外扩，键盘用户焦点可见性不受损（PRD §15 无障碍保留）。
   :focus 与 :focus-visible 都覆盖——Safari 对聚焦按钮显示环的启发式更激进
   （autofocus/点击后即显示），只挂 :focus-visible 在 Safari 下仍会外扩 */
.redeem-actions .btn:focus,
.redeem-actions .btn:focus-visible {
  outline-offset: -3px;
}

/* Not now 走安静的次级动作（用户定：不要描边外框）——透明边框占住布局位、
   hover 柔绿底，与管理台 modal-x 的 hover 语言一致；主动作只有 Redeem 一个 */
.redeem-actions .btn-ghost {
  border-color: transparent;
  color: var(--color-text-muted);
}

.redeem-actions .btn-ghost:hover {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

/* Profile 页奖励菜单编辑卡 */

.token-editor h2 {
  margin-top: 0;
}

.token-explainer {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.token-enable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin: 0.75rem 0 1rem;
}

.token-enable input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  accent-color: var(--color-primary);
}

.token-menu-row {
  display: flex;
  /* wrap 防窄屏溢出（2026-09-12 rewards 手机撑屏修复第三层）：label/cost/Remove
     三件套在 ≤375px 放不下一行，Remove 曾被挤出屏 48px；折行后 Remove 落第二行。 */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.token-menu-row input[type='text'] {
  flex: 1;
  /* 折行保底：至少留出可用的 label 输入宽度，避免被 cost/Remove 挤到无法输入 */
  min-width: 9rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  background: #ffffff;
  color: inherit;
}

/* 数字输入框隐藏原生 spinner（2026-09-12 老王：44px 行高配原生小箭头不匹配；
   Chrome 的原生三角 UA 限制不可放大）。调数走键盘 ↑↓ / 滚轮 / 直接输入——
   全站仅两处 number：rewards 的 cost 与 today 先后板的计时分钟，都是少量数字
   场景，点箭头逐格调本就不实用。 */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 向导导航按钮不换行（2026-09-12 老王真机报确认按钮长文案换行）：文案已缩短
   （Building your plan…），nowrap 双保险防极窄视口折行。 */
.wizard-nav .btn {
  white-space: nowrap;
}

.token-menu-row input[type='number'] {
  width: 5.5rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  background: #ffffff;
  color: inherit;
}

/* 窄屏一行化（2026-09-12 老王定案：不要两行，缩宽度保一行）：cost 数字框 88→64px
   （放得下 3 位数），label 允许收缩到内容区剩余宽——三件套恒一行，Remove 不折行。
   桌面（>640px）宽度充裕不受影响。 */
@media (max-width: 640px) {
  .token-menu-row input[type='text'] {
    min-width: 0;
  }
  .token-menu-row input[type='number'] {
    width: 4rem;
  }
}

/* /rewards 账本历史 */

.token-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.token-history-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.token-history-row:last-child {
  border-bottom: none;
}

.token-history-meta {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ---------- 打卡卡 ---------- */

.checkin-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
  .checkin-list {
    grid-template-columns: 1fr 1fr;
    align-items: start; /* 展开的 done 卡不拉伸同行的另一张 */
  }
}

.checkin-card h3 {
  margin: 0;
}

.checkin-action {
  margin: 0.25rem 0 0.75rem;
  color: var(--color-text-muted);
}

.checkin-card.is-done {
  background: var(--color-soft-green);
  border-color: var(--color-ok);
}

.done-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.done-check {
  color: var(--color-ok);
  font-weight: 700;
}

.rate-hint {
  margin: 0.75rem 0 0.125rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.rate-row {
  margin-top: 0.375rem;
}

.rate-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.rate-chips {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.rate-anchor {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.rate-chip {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.rate-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.rate-chip[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* ---------- 移动端顶栏：品牌 + 汉堡菜单；账号区移到页脚 ---------- */

.nav-burger {
  display: none; /* 桌面端不显示汉堡 */
}

/* 汉堡加 "Menu" 文字（2026-09-12 漏斗修复，老王拍板）：纯三条杠图标对部分家长用户
   认知门槛过高（两位流失用户疑似卡在导航发现）。文字随 currentColor 自动适配
   学生端深底/管理台浅底；aria-label 保留（accessible name 优先，读屏不重复读）。 */
.nav-burger::after {
  content: 'Menu';
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 0.375rem;
}

.app-foot-account {
  display: none; /* 桌面端账号区在侧栏底部，页脚不重复 */
}

@media (max-width: 720px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr); /* 同桌面：防 min-content 撑爆 */
  }

  .app-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    /* 移动端解除吸顶：顶栏随内容滚走，把纵向空间还给内容 */
    position: static;
    height: auto;
    overflow: visible;
  }

  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-on-deep);
    cursor: pointer;
  }

  .app-nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 0.75rem;
  }

  .app-nav-links.open {
    display: flex;
  }

  .app-nav-foot {
    display: none; /* 移动端账号区改在页脚展示 */
  }

  .app-foot-account {
    display: block;
    margin: 0 0 0.5rem;
  }

  .today-strip {
    grid-template-columns: 1fr;
  }

  /* 窄屏本周点阵：收紧格宽与间距，三字母 7 天也能一行放下 */
  .week-strip {
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .week-day {
    min-width: 1.75rem;
    padding: 0.375rem 0.125rem;
  }
}

/* ---------- Progress 页：统计条 + 手绘折线图 ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.progress-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 1rem;
}

@media (max-width: 640px) {
  .progress-strip {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* 图标块高度对齐右侧两排文字：stat-num 2.1rem + 间距 0.125rem + label 1.3rem ≈ 3.5rem；
   内部图标四周留 3px 边 */
.stat-icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-soft-green);
  color: var(--color-primary);
}

.stat-icon svg {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

.stat-num {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary-strong);
  line-height: 1.2;
}

.stat-of {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.stat-label {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.chart-card {
  background: none; /* 与页面底色同色，只留圆角描边框 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0.5rem 0 1.5rem;
}

.chart-card h2 {
  margin: 0;
  font-size: 1.125rem;
}

.chart-sub {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.chart-tick {
  font-size: 11px;
  fill: var(--color-text-muted);
}

.chart-ref {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.chart-ref-label {
  font-size: 10.5px;
  fill: var(--color-text-muted);
}

.chart-area {
  opacity: 0.12;
}

.chart-line {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-bridge {
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}

.chart-note {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.chart-hit {
  cursor: pointer;
  outline: none;
}

.chart-hit:focus-visible {
  stroke: var(--color-primary);
  stroke-width: 2;
}

.chart-plot {
  position: relative;
}

.chart-tip {
  position: absolute;
  transform: translate(-50%, -115%);
  background: var(--color-deep);
  color: var(--color-on-deep);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.chart-tip[data-below='true'] {
  transform: translate(-50%, 0.625rem);
}

/* ---------- Review 页：周节奏条 + 提议卡 + 反思 ---------- */

.review-h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.weeks-strip {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0.25rem 0 0;
}

.week-col {
  flex: 1;
  max-width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.week-bar-track {
  height: 4rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.week-bar {
  display: block;
  width: 100%;
  background: var(--color-primary);
  border-radius: 6px 6px 3px 3px;
}

.week-bar[data-partial='true'] {
  background: var(--color-soft-green);
  border: 1px dashed var(--color-primary);
}

.week-col-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.feeling-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

.feeling-chip {
  width: auto;
  padding: 0 1rem;
  font-size: 0.9375rem;
}

.review-note {
  margin-top: 0.25rem;
}

.proposal-reason {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary-strong);
}

.proposal-change {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-soft-peach);
  border-radius: 8px;
}

.proposal-evidence {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.proposal-evidence summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.history-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}

.history-when {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  flex: none;
}

/* ---------- /demo 页 ---------- */

.demo-banner {
  background: var(--color-deep);
  color: var(--color-on-deep);
  padding: 0.875rem 0;
  border-bottom: 3px solid var(--color-action);
}

.demo-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-tag {
  flex: none;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 0.25rem 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.demo-banner strong {
  display: block;
  font-size: 1.0625rem;
}

.demo-banner p {
  margin: 0.125rem 0 0;
  color: var(--color-on-deep-muted);
  font-size: 0.9375rem;
}

.persona-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 0.75rem;
}

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  cursor: pointer;
}

.persona-card:hover {
  border-color: var(--color-primary);
}

.persona-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.persona-card[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-soft-green);
}

.persona-card:disabled {
  cursor: wait;
}

.badge-demo {
  background: var(--color-soft-peach);
  color: var(--color-action-strong);
}

.persona-title {
  font-weight: 700;
}

.persona-blurb {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.signals-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.signals-row {
  margin: 0.25rem 0 0.75rem;
}

.signals-row:last-child {
  margin-bottom: 0.25rem;
}

.signals-row h3 {
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.signals-grade {
  margin: 0;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tag-chip {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.demo-preview {
  margin-top: 0.75rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.demo-hello-sub {
  margin: 0; /* 原两行结构（demo-hello + sub）删首行后独立成行 */
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.demo-foot {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.rank-num {
  color: var(--color-primary);
  font-weight: 800;
}

.factors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
}

.factors-lead {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.factor {
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.0625rem 0.375rem;
  color: var(--color-text-muted);
}

.factor-hit {
  background: var(--color-soft-green);
  border-color: transparent;
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* ---------- Admin console（/admin*：浅底侧栏与学生端深青侧栏对置；数据维护台） ---------- */

.app-nav--admin {
  background: var(--color-surface);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
}

.app-nav--admin .app-nav-link {
  color: var(--color-text-muted);
}

.app-nav--admin a.app-nav-link:hover {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

.app-nav--admin .app-nav-link[aria-current='page'] {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

.app-nav--admin .app-nav-foot {
  color: var(--color-text-muted);
}

.app-nav--admin .app-nav-foot a {
  color: var(--color-primary);
}

.app-nav--admin :focus-visible {
  outline-color: var(--color-primary);
}

/* 移动端汉堡：白图标（on-deep，为学生端深青底设计）在 admin 浅底上隐身
   （2026-09-12 老王手机报"和背景太接近难发现"）——admin 用品牌深绿，浅底上醒目 */
.app-nav--admin .nav-burger {
  color: var(--color-primary-strong);
}

.admin-tag {
  align-self: flex-start;
  margin: 0;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--color-action);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group-label {
  margin: 1rem 0 0.125rem;
  padding: 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.app-nav--admin .is-soon {
  cursor: default;
}

.admin-back-link {
  font-weight: 600;
}

/* 学生端侧栏/页脚的管理台入口（仅 admin 可见，由 shell-user.js 注入） */
/* 学生端侧栏/移动端账号区的管理台入口：管理台身份橙药丸（与 ADMIN tag、
   Users 页 admin 徽章同色系），深青侧栏上一眼可见 */
.admin-entry {
  display: inline-block;
  margin: 0 0 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-action);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
}

.admin-entry:hover {
  filter: brightness(1.08);
}

.admin-entry:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 移动端浅色页脚（.app-foot-account）里的实例：白描边在浅底上不可见，改用深青；
   触控目标补足 44px（inline-flex + align-items 保持药丸视觉居中，不改侧栏深底实例外观） */
.app-foot-account .admin-entry {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.app-foot-account .admin-entry:focus-visible {
  outline-color: var(--color-deep);
}

/* 总览统计卡 */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.stat-card {
  margin: 0;
}

.stat-card .stat-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-strong);
}

.stat-card .stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* 固定校验面板 */
.check-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.check-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.check-pill {
  flex: none;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.125rem;
}

.check-pass .check-pill {
  background: var(--color-ok);
  color: #ffffff;
}

.check-warn .check-pill {
  background: var(--color-action);
  color: #ffffff;
}

.check-fail .check-pill {
  background: var(--color-danger);
  color: #ffffff;
}

.check-body {
  margin: 0;
  min-width: 0;
}

.check-body strong {
  display: block;
}

.check-detail {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.check-items {
  margin: 0.375rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* 列表页工具条与表格 */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}

.admin-search {
  flex: 1 1 16rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
}

.admin-search:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* 下拉框与输入框同规格：去掉原生 menulist 外观（macOS 自带箭头+内边距显得挤），
   自绘 chevron、右侧留位 */
select.admin-search,
.field-block select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234f5f58' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.875rem;
  padding-right: 2.25rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.admin-table-wrap {
  flex: 1; /* app-main 是 flex 列：撑满页首/筛选行之下的剩余高度 */
  min-height: 0; /* flex 子项默认 min-height:auto 拒绝收缩——置 0 才能触发盒内滚 */
  margin-bottom: 1.25rem; /* wrap 底与页脚分割线的距离 = 筛选行与表格上缘的间隙，上下对称 */
  overflow-x: auto;
  overflow-y: auto; /* 盒内滚 + 表头 sticky */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.admin-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.admin-table tbody tr {
  cursor: pointer;
}

.admin-table tbody tr:hover {
  background: var(--color-soft-green);
}

.admin-table .cell-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* 行内编辑的表格行不可点击（默认 tbody tr 是 pointer） */
.admin-table--static tbody tr {
  cursor: default;
}

/* 行内未保存高亮：与详情页 .is-changed 同一视觉（橙边 + 暖底） */
.admin-table tr.is-changed input,
.admin-table tr.is-changed select {
  border-color: var(--color-action);
  background: #fdf6ee;
}

/* 浮条按钮在批量保存进行中临时禁用 */
.unsaved-bar .btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.badge-ev-negative,
.badge-ev-insufficient {
  background: var(--color-soft-peach);
  color: var(--color-danger);
}

/* Lifecycle & gates 状态药丸：配色沿用档位徽章体系——
   approved≈supported 柔绿、published≈established 实心绿（最后一道 gate 最强），
   draft / not published≈emerging 中性描边（待办态）。 */
.badge-state-approved {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

.badge-state-published {
  background: var(--color-ok);
  color: #ffffff;
}

.badge-state-neutral {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.tier-badge {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 详情页编辑 */
.edit-section {
  margin-top: 1.5rem;
}

.edit-section > h2 {
  margin: 0 0 0.25rem;
}

.edit-section .section-note {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.ghost-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* ghost 框内的排距收一口：框自带 padding，最后一排不再额外留底距 */
.ghost-block .field-row:last-child {
  margin-bottom: 0;
}

/* 生命周期闸门区：危险区视觉（红左脊），三行闸门行间细分隔 */
.lifecycle-block {
  border-left: 3px solid var(--color-danger);
}

.lifecycle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
}

.lifecycle-row:first-child {
  padding-top: 0;
}

.lifecycle-row:last-child {
  padding-bottom: 0;
}

.lifecycle-row + .lifecycle-row {
  border-top: 1px solid var(--color-border);
}

.lifecycle-state {
  margin: 0.125rem 0 0;
}

.lifecycle-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lifecycle-action .field-note {
  margin: 0;
  flex-basis: 100%;
  text-align: right;
}

.field-block {
  margin: 0 0 1rem;
}

.field-block > .field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.field-block textarea,
.field-block input[type="text"],
.field-block input[type="number"],
.field-block select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
}

.field-block textarea {
  min-height: 5rem;
  resize: vertical;
}

.field-block textarea:focus-visible,
.field-block input:focus-visible,
.field-block select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.field-block.is-changed textarea,
.field-block.is-changed input,
.field-block.is-changed .chip-group {
  border-color: var(--color-action);
  background: #fdf6ee;
}

.field-block.is-changed > .field-label::after {
  content: " •";
  color: var(--color-action);
}

.field-note {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.field-error {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-danger);
}

.field-block.is-invalid input {
  border-color: var(--color-danger);
}

/* 未保存浮条 */
.unsaved-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem calc(-1 * clamp(1rem, 4vw, 2.5rem)) 0;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  background: var(--color-deep);
  color: var(--color-on-deep);
}

.unsaved-bar p {
  margin: 0;
  flex: 1;
  font-size: 0.9375rem;
}

.unsaved-bar :focus-visible {
  outline-color: var(--color-on-deep);
}

/* 深青浮条上的 ghost 钮反色：默认白字浅描边，hover 填浅底深字 */
.unsaved-bar .btn-ghost {
  border-color: rgba(244, 241, 233, 0.55);
  color: var(--color-on-deep);
  background: transparent;
}

.unsaved-bar .btn-ghost:hover {
  background: var(--color-on-deep);
  color: var(--color-deep);
}

/* diff 确认弹层 */
.diff-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(33, 49, 43, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.diff-modal {
  position: relative; /* 锚住右上角 X 关闭钮 */
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 40rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.diff-modal h2 {
  margin-top: 0;
}

/* Lifecycle & gates 弹层：内容天生偏高（长说明 + 三行闸门 + confirm 视图的影响预览表）。
   加宽到 46rem 让段落与闸门行变矮、放到 90vh 提高余量，整弹层不出滚动条；
   影响预览表（可能含全库档案的 before→after）自己内滚，不把弹层顶爆。 */
.life-modal {
  max-width: 46rem;
  max-height: 90vh;
}

.life-modal #life-impact {
  max-height: 34vh;
  overflow-y: auto;
}

/* 弹层右上角 X 关闭钮：图标 close.svg（currentColor，由 admin-shell.js 内联注入才能吃色）。
   hover 出柔绿圆角矩形底，X 变深绿——与状态药丸同色系。 */
.modal-x {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem; /* 44×44 正方形——与全局 button min-height 44px 触控规范对齐，hover 底为正方形 */
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.modal-x svg {
  width: 1.6875rem; /* X 图标 1.5×（1.125 → 1.6875rem） */
  height: 1.6875rem;
  display: block;
}

.modal-x:hover {
  background: var(--color-soft-green);
  color: var(--color-primary-strong);
}

.modal-x:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- /admin-audit 审计查看器（时间线主体复用 .timeline 族） ---------- */

.audit-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}

/* /admin-users 操作列：三态按钮（Make/Remove/current user）按最宽文案等宽对齐 */
.user-action {
  min-width: 9rem;
  justify-content: center;
}

.user-action[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* 事件类型徽章：中性描边（与 emerging 档徽章同克制），类型文字即区分 */
.audit-type {
  flex: none;
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin-right: 0.375rem;
}

/* JSONB 原文：限高内滚（同 life-impact 模式），换行不撑爆 */
.audit-json {
  max-height: 30vh;
  overflow-y: auto;
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- /admin-users ---------- */

/* 角色徽章：admin 用管理台身份橙（与侧栏 ADMIN tag 同源），student 中性描边 */
.badge-role-admin {
  background: var(--color-action);
  color: #ffffff;
}

.badge-role-student {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* 分页条：居中 Prev/Next + 区间计数；上距由表 wrap 的 margin-bottom 提供，
   下距 1.25rem 与分割线间隔——正好居于表下缘与页脚分割线中间 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.pager .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* 管理台数据表表头：品牌深青底白字（结构元素），盒内滚动时钉在盒顶 */
.admin-table--headed th {
  background: var(--color-deep);
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 管理台页脚：钉底收薄——分割线 → 5px → 文字 → 5px → 页底（app-main 底 padding 为 0）。
   margin-top 不写 = 基类 auto 钉底生效 */
.admin-foot {
  padding-block: 5px;
}

/* 管理台整页应用式布局：shell 高度锁视口（不被内容撑开）、main 内滚（长内容页
   详情/audit 也在盒内滚、页脚恒钉视口底）、表格 wrap 得以 flex:1 撑到分割线上方 5px */
.app-shell--admin {
  height: 100vh;
}

.admin-main {
  overflow-y: auto;
}

/* Audit 查看器行距收紧：条目 padding 减半 + summary 触控高降为 2rem
   （详情页 Version history / Audit trail 保持原节奏；管理台 PC 鼠标环境） */
.timeline--tight .timeline-item {
  padding-block: 0.375rem;
}

.timeline--tight .timeline-item summary {
  min-height: 2rem;
}

/* Audit 行 hover：与数据表行同款浅绿反馈 */
.timeline--tight .timeline-item:hover {
  background: var(--color-soft-green);
}

/* Users 表：单元格垂直居中——行高由 44px 操作按钮撑起，文字顶对齐会偏上 */
.admin-table--mid td {
  vertical-align: middle;
}

/* 文本按钮（登录页"邮箱链接登录"入口）：与正文链接同观感的裸按钮 */
.link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* /delete-account 的删什么/留什么说明清单 */
.del-facts {
  margin: 1rem 0;
  padding-left: 1.125rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.del-facts li + li {
  margin-top: 0.375rem;
}

/* Profile 页右下角的删号入口：危险区低调灰（业界惯例：设置页底部灰色小链接），
   右对齐。本页 footer 关掉基类的 margin-top:auto（见 .onboarding-foot），
   剩余空隙全部由这里的 auto 吃掉 → 链接钉死在分割线正上方，不随卡片高度浮动 */
.profile-danger {
  margin: auto 0 0.75rem;
  text-align: right;
}

/* onboarding 页 footer 不吃空隙（否则与 profile-danger 的 auto 平分，链接悬空） */
.onboarding-foot {
  margin-top: 0;
}

.profile-danger .del-entry {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0.75rem 0;
  table-layout: fixed; /* Field 列固定比例，不被长内容挤没 */
}

.diff-table th:nth-child(1),
.diff-table td:nth-child(1) {
  width: 30%;
}

.diff-table th,
.diff-table td {
  text-align: left;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.diff-old {
  color: var(--color-danger);
}

.diff-new {
  color: var(--color-ok);
}

/* 实质变化提示条（/today 与 /plan 共用）：暖桃底 + 动作钮 */
.stale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--color-soft-peach);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.stale-actions {
  display: flex;
  gap: 0.5rem;
}

/* toast */
.admin-toast {
  position: fixed;
  left: 50%;  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--color-primary-strong);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}

/* 版本历史时间线 */
.timeline {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.timeline-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg); /* 只读条目与 Core content 只读块同色，不用白 */
  padding: 0.75rem 1rem;
}

.timeline-item summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.timeline-item .tl-meta {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Audit trail 条目与 Version history 同款：内容加粗 + " · 时间" 灰字同行 */
.audit-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
}

.audit-label {
  font-weight: 600;
}

/* 详情页字段排：连续 inline 字段同排——2 个对半（pair）、3 个 1:1:2（trio）；
   排内 textarea flex 拉平，两框等高；手机收单列 */
.field-row {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.field-row--trio {
  grid-template-columns: 1fr 1fr 2fr;
}

.field-row--pair {
  grid-template-columns: 1fr 1fr;
}

.field-row .field-block {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.field-row .field-block textarea {
  min-height: 5rem;
}

/* 编辑区文本框：随内容自适应高度（JS autoGrow），不出滚动条、无拖拽柄 */
#ev-fields textarea,
#meta-fields textarea {
  resize: none;
  overflow-y: hidden;
}

@media (max-width: 900px) {
  .field-row--trio,
  .field-row--pair {
    grid-template-columns: 1fr;
  }
}

/* chips 选项组：整块（标签+选项）成白底分组卡，在大 ghost 灰底上显出分组 */
.chips-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

/* Delivery metadata 双列：左列两项纵叠、右列一项（选项多）；两列等高、左列两项均分 */
.meta-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: stretch;
}

.meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.meta-col .field-block {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .meta-duo {
    grid-template-columns: 1fr;
  }
}

/* evidence 行编辑：双列网格排列（两行以上自动换排），手机单列 */
#evidence-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

/* 每个 evidence 条目 = 灰底上的组标题（来源名 + Primary 徽标）+ 白卡内可编辑区 */
.evidence-entry-head {
  margin: 0 0 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.primary-tag {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.evidence-entry.is-deleted .evidence-entry-head {
  opacity: 0.5;
}

.evidence-entry.is-deleted .evidence-row {
  opacity: 0.5;
  border-style: dashed;
}

.evidence-row {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  background: var(--color-surface);
}

/* evidence 行内文本框：与 .field-block 控件同规格（圆角），自适应加高不出滚动条 */
.evidence-row textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
  resize: none;
  overflow-y: hidden;
}

.evidence-row textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  #evidence-rows {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-toast {
    transition: none;
  }
}

/* Overview：tiers 与 checks 同处一个大内容区（单张卡），区内共享行轨道——
   每行 [tier 条目 | check 条目] 高度取两者较高者，天然逐行对齐；
   display:contents 让条目穿过包装层直接进行轨。 */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* dense：列钉住的条目从头扫描空位，右列 check 项才能与左列逐行对位 */
  grid-auto-flow: dense;
  column-gap: 1rem;
  row-gap: 0.625rem;
}

.duo-grid .tier-grid,
.duo-grid .check-list {
  display: contents;
}

.duo-grid h2,
.duo-grid .form-hint {
  margin: 0;
}

.duo-t-h { grid-column: 1; grid-row: 1; }
.duo-t-sub { grid-column: 1; grid-row: 2; }
.duo-c-h { grid-column: 2; grid-row: 1; }
.duo-c-sub { grid-column: 2; grid-row: 2; }
.duo-grid .tier-item { grid-column: 1; }
.duo-grid .check-item { grid-column: 2; }
.duo-c-foot { grid-column: 2; margin: 0; align-self: end; text-align: right; }

.tier-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.tier-item-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tier-item-blurb {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
  .duo-grid {
    display: block;
  }
  .duo-grid .tier-grid {
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0;
  }
  .duo-grid .check-list {
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0;
  }
}

/* ---------- /library 公开策略库浏览页 ---------- */
.lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}

.lib-filters input.admin-search {
  flex: 1 1 20rem;
}

.lib-filters select.admin-search {
  flex: 0 1 13rem;
}

.lib-count,
.lib-empty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.lib-empty {
  margin: 0 0 1rem;
}

/* 计数放列表右下角 */
.lib-count {
  margin: 0.75rem 0 0;
  text-align: right;
}

/* 策略卡直列通栏：不分组不加标题，默认顺序与控制台列表一致（domain,name） */
#lib-groups {
  display: grid;
  gap: 0.75rem;
  align-items: start;
}

/* hero 文本块放开到信息流（container 64rem）全宽；内容少，高度收紧 */
.lib-hero {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.lib-hero .lede {
  max-width: none;
}

/* 同行卡片拉伸到最高那张的高度（与 .plan-grid 同款：grid 默认 stretch，不要压成 start） */
.lib-neg-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.lib-card,
.lib-neg-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.lib-neg-card {
  background: var(--color-surface);
}

/* 标题区白底、内容区透明：展开后仍能一眼找到白底标题区来点折叠 */
.lib-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
}

.lib-card[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
}

.lib-card > summary::-webkit-details-marker {
  display: none;
}

.lib-card > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.lib-card-main {
  flex: 1;
  display: grid;
  gap: 0.25rem;
}

/* 卡头按 inline 文本流排：徽章作句首标签、域名缀句尾，窄屏随句子自然换行 */
.lib-card-title {
  display: block;
  margin: 0;
}

.lib-card-title .tier-badge {
  margin-right: 0.375rem;
}

.lib-neg-card .lib-card-title .tier-badge {
  margin: 0 0 0 0.375rem;
}

.lib-card-dom {
  margin-left: 0.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.lib-card-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

.lib-chevron {
  flex: none;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.lib-card[open] .lib-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .lib-chevron {
    transition: none;
  }
}

.lib-card-body {
  border-top: 1px solid var(--color-border);
  padding: 1rem;
  display: grid;
  gap: 0.875rem;
  /* 暖奶油底（比页底深半阶）：标题区白、内容区暖、内盒绿，三层互不混 */
  background: var(--color-on-deep);
  border-radius: 0 0 var(--radius) var(--radius);
}

.lib-card-body > p,
.lib-card-body ol,
.lib-card-body dl {
  margin: 0;
}

.lib-card-body ol {
  padding-left: 1.25rem;
}

.lib-label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-deep);
}

/* meta 表格（4+1 两盒：应用四项一表，Outcome domains 单独一盒）：表头下一条细线，
   100% 宽自适应、无 min-width——移动端不横向滚动 */
.lib-meta-box {
  overflow-x: auto;
}

.lib-meta-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.lib-meta-table th {
  padding: 0 0.75rem 0.375rem 0;
  border-bottom: 1px solid rgba(46, 94, 78, 0.18);
  text-align: left;
  vertical-align: bottom;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-deep);
}

.lib-meta-table td {
  padding: 0.5rem 0.75rem 0 0;
  vertical-align: top;
}

.lib-meta-table th:last-child,
.lib-meta-table td:last-child {
  padding-right: 0;
}

.lib-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* 药丸：颜色无语义（全是同一绿），改透明底 + 淡绿描边，与盒子描边同色 */
.lib-pill {
  padding: 0.125rem 0.625rem;
  border: 1px solid #cfe0d6;
  border-radius: 999px;
  color: var(--color-primary-strong);
  font-size: 0.8125rem;
}

.lib-fading,
.lib-box {
  /* 75% 白：透一点暖奶油底，与纯白标题区拉开（描边仍定界） */
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #cfe0d6;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

/* 盒内标题下细分割线（绿底上用绿色调淡线，不用暖灰 border 色） */
.lib-box .lib-label,
.lib-fading .lib-label {
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid rgba(46, 94, 78, 0.18);
}

.lib-box > p:last-child {
  margin: 0;
}

.lib-fading p:last-child {
  margin: 0;
}

.lib-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.lib-src-detail {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.lib-primary {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--color-soft-peach);
  color: var(--color-action-strong);
  font-size: 0.75rem;
  font-weight: 600;
}

.lib-negative {
  background: var(--color-soft-peach);
}

.lib-neg-intro {
  max-width: 46rem;
}

.lib-neg-card {
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.lib-neg-card > p {
  margin: 0;
}

.lib-neg-why p:last-child {
  margin: 0;
}

.lib-neg-srcs {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* 正文内联链接（/library 与 /algorithm 引言段首次用到）：品牌深青 + 连续下划线
   （skip-ink: none——默认 auto 会绕开 p/y 等下延字母，把下划线切成几段） */
.lede a,
.section p a:not(.btn) {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: none;
}

.lede a:hover,
.section p a:not(.btn):hover {
  color: var(--color-action-strong);
}

.lede a:focus-visible,
.section p a:not(.btn):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* CTA 带（浅桃底）上的内联链接（/library → /algorithm 回链）：与正文内容链接同款 */
.cta-inner a:not(.btn) {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: none;
}

.cta-inner a:not(.btn):hover {
  color: var(--color-action-strong);
}

.cta-inner a:not(.btn):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 隐藏元素：PDF 生成器的页首数据源（姓名/日期/条数），屏幕不显示 */
.print-head {
  display: none;
}

/* /plan 标题栏右上 Save as PDF 按钮，窄屏回落为文档流 */
.today-head {
  position: relative;
}

.plan-head-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .plan-head-actions {
    position: static;
    margin: 0.5rem 0;
  }
}

/* /plan 卡内的 fading 提示块（复用 .lib-fading/.lib-label）：留出上下间距 */
.plan-card .lib-fading {
  margin: 0.75rem 0;
}

/* ---------- 先后板（First-Then board，执行支架包）+ 当日排序入口 ---------- */

/* 卡头 flex 化：标题 + 配置入口同行 */
.checkin-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ft-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.5rem 0 0; /* 与打卡区的间距统一交给分割线两侧（见 .has-ft .checkin-todo） */
}

/* 先后板与打卡区之间的贯通分割线：上下各留默认间隙，两区视觉分界
   （真机验收：挤在一起太乱）。todo（Mark done 态）与 done（Undo + 量表态）
   是同位置的两块（hidden 切换），规则两块同给 */
.checkin-card.has-ft .checkin-todo,
.checkin-card.has-ft .checkin-done {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.ft-cell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 88px; /* 两格等高、结构可预测（无障碍红线） */
}

.ft-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ft-text {
  font-weight: 600;
  color: var(--color-text);
}

.ft-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Then 格初始灰（未解锁）；完成打卡后点亮——纯颜色/明度变化，零动画（reduced-motion 无负担） */
.ft-then {
  background: var(--color-bg);
}
.ft-then .ft-text {
  color: var(--color-text-muted);
}
.checkin-card.is-done .ft-first {
  opacity: 0.55;
  border-color: var(--color-primary); /* 与 Then 格一致：完成后卡片底变绿，浅米边线失去反差（真机验收钓出） */
}
.checkin-card.is-done .ft-first .ft-label::after {
  content: ' ✓';
  color: var(--color-ok);
}
.checkin-card.is-done .ft-then {
  background: var(--color-soft-green);
  border-color: var(--color-primary);
}
.checkin-card.is-done .ft-then .ft-text {
  color: var(--color-primary-strong);
}



/* 计时药丸（真机验收迭代：SVG 环 → 药丸进度条）。按钮透明占 44px 触控（无障碍红线），
   视觉药丸 36px；色带即进度：未开始无色带，点击瞬间满色带出现（开始的即时反馈），
   随时间消退；预警变琥珀/橙——色带 + 文字双通道，不单靠颜色传达 */
.ft-timer {
  margin-top: auto;
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}
.ft-timer-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}
.ft-timer-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(33, 69, 58, 0.16); /* primary-strong 16%：底色全程浅，深色文字全程可读 */
}
.ft-timer.is-running .ft-timer-pill {
  border-color: var(--color-primary);
}
.ft-timer-label {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 0.75rem;
  white-space: nowrap;
}
.ft-timer:hover .ft-timer-pill {
  border-color: var(--color-primary);
}
.ft-timer:focus-visible {
  outline: none;
}
.ft-timer:focus-visible .ft-timer-pill {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.ft-timer.is-near .ft-timer-fill {
  background: rgba(176, 120, 24, 0.24);
}
.ft-timer.is-near .ft-timer-label {
  color: #8a5c0f;
}
.ft-timer.is-last .ft-timer-fill,
.ft-timer.is-up .ft-timer-fill {
  background: rgba(176, 79, 26, 0.26);
}
.ft-timer.is-last .ft-timer-label,
.ft-timer.is-up .ft-timer-label {
  color: var(--color-action-strong);
  font-weight: 600;
}

/* 完成态（is-now）：药丸收尾为 "Now: {reward}" 提示（真机定案：直接显示在药丸里）；
   First 格的完成淡化不波及药丸 */
.ft-timer.is-now .ft-timer-pill {
  background: var(--color-soft-green);
  border-color: var(--color-primary);
}
.ft-timer.is-now .ft-timer-label {
  color: var(--color-primary-strong);
  font-weight: 700;
}
.checkin-card.is-done .ft-first .ft-timer {
  opacity: 1;
}

/* 卡头配置入口（低频家长操作，视觉安静但触控目标 44px） */
.ft-edit-link {
  margin-left: auto;
  white-space: nowrap; /* 单行（2026-09-12 老王真机报换行）：链接被 flex 压缩后文字会折行 */
  flex-shrink: 0;      /* 不被策略名挤压——放不下时整链接掉行，不折字 */
  background: none;
  border: none;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.ft-edit-link:hover {
  color: var(--color-primary);
}

/* 配置弹窗字段（弹窗壳复用 .redeem-dialog） */
.ft-dialog-intro {
  color: var(--color-text-muted);
}
.ft-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.75rem 0;
  text-align: left;
}
.ft-field-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.ft-field select,
.ft-field input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 0.65rem;
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
/* 下拉统一外观：原生 select（macOS）与文本框天然不同高——去原生外观 + 自绘箭头，双框严格同规格 */
.ft-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%234f5f58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}
.ft-field-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.ft-error {
  color: var(--color-danger);
  font-size: 0.9rem;
  margin: 0.25rem 0;
}
.ft-off-link {
  margin-top: 0.75rem;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.ft-off-link:hover {
  color: var(--color-danger);
}

/* 当日排序（选择入口）：右上角按钮 + 弹窗点选列表 */
.order-btn {
  position: absolute;
  top: 0;
  right: 0;
}
/* 窄屏回落为文档流（2026-09-12 手机压标题修复）：绝对定位在窄屏会盖住长问候语
   （375px 实测 "Good morning, Casey" 重叠 127px），≤640px 换行到标题下方——
   与 /plan 的 plan-head-actions 同款先例 */
@media (max-width: 640px) {
  .order-btn {
    position: static;
    margin: 0.5rem 0 0;
  }
}
.order-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.75rem 0;
  max-height: 40vh;
  overflow-y: auto; /* 任务多时列表内滚（弹窗本体不滚） */
  text-align: left;
}
.order-pick-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.order-pick-row:hover {
  border-color: var(--color-primary);
}
.order-pick-row[aria-pressed='true'] {
  background: var(--color-soft-green);
  border-color: var(--color-primary);
}
.order-pick-num {
  flex: none;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-pick-row[aria-pressed='false'] .order-pick-num {
  border: 1px dashed #8f8674; /* 空槽：纯虚线圆不填充；比 --color-border 深（白底上可辨，真机验收） */
  background: none;
}
.order-pick-title {
  font-weight: 600;
}

/* 窄屏：两格竖排（First 上 Then 下，本就是先后语义） */
@media (max-width: 480px) {
  .ft-board {
    grid-template-columns: 1fr;
  }
}


/* ---------- 社交故事 /stories（交互执行层·社交故事） ---------- */

/* 头部按钮组（模板库 + 自写）：右上角 */
.story-head-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
}
/* 窄屏回落为文档流（2026-09-12 手机压标题修复，同 order-btn/plan-head-actions 规格）：
   两按钮比单按钮更宽、压得更狠；DOM 序已正确（按钮在标题后），回落即显示在标题下方。
   flex-wrap 防极窄视口（≤320px）两按钮放不下。 */
@media (max-width: 640px) {
  .story-head-actions {
    position: static;
    margin: 0.5rem 0 0;
    flex-wrap: wrap;
  }
  /* read/editor 沉浸视图收起列表级入口（2026-09-12 老王方案 2；editor 同款冗余同日扩入）：
     阅读或编辑时只留 "Back to stories"，两按钮折行挤屏的问题随之消失；返回列表自动回来。 */
  body[data-view='read'] .story-head-actions,
  body[data-view='editor'] .story-head-actions {
    display: none;
  }
}

.story-section-title {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

/* 故事列表双排（真机定案；窄屏回落单排）。卡片按钮组 flex-wrap 自适应半宽 */
.story-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  align-items: start;
}

@media (max-width: 720px) {
  .story-list {
    grid-template-columns: 1fr;
  }
}

.story-card {
  padding: 0.875rem 1rem;
}

.story-card.is-archived {
  opacity: 0.75;
}

.story-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.story-badge {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--color-soft-green);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.story-card-title h3 {
  margin: 0;
  font-size: 1rem;
}

.story-meta {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.story-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.625rem;
}

/* 空态完整使用说明框（圆角矩形框线；有活跃故事即隐藏——含全部归档后的回归） */
.story-guide {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  margin: 0.5rem 0 0.75rem;
}

.story-guide h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.story-guide p {
  margin: 0.375rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.story-guide ol {
  margin: 0.625rem 0;
  padding-left: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.story-guide-cta {
  font-weight: 600;
  color: var(--color-primary-strong);
}

/* 模板库弹窗：紧凑列表行 + 预览行 */
.library-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.75rem 0;
  max-height: 40vh;
  overflow-y: auto;
  text-align: left;
}
.library-pick-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.library-pick-row:hover {
  border-color: var(--color-primary);
}
.library-pick-row:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}
.library-pick-row .story-badge {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}
.library-pick-title {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.library-pick-name {
  font-weight: 600;
}
.library-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
  max-height: 40vh;
  overflow-y: auto;
  text-align: left;
}
.library-line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.archived-box {
  margin-top: 1.5rem;
}

.archived-box summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 阅读视图：大字、宽行距（核心体验） */
.story-back {
  margin-bottom: 0.75rem;
}

.story-read-title {
  margin: 0;
}

.story-read-sub {
  margin: 0.25rem 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.story-read-lines {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0.75rem 0;
}

.story-line {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.7;
}

/* 挖空槽：词退场后的空位（点状占位，安静） */
.story-blank {
  display: inline-block;
  min-width: 4.5rem;
  border-bottom: 2px dotted var(--color-text-muted);
  text-align: center;
  color: transparent;
  margin: 0 0.125rem;
}

/* prompt-only：句子淡化，关键词 chip 醒目 */
.story-line.is-prompt {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.story-line-dim {
  opacity: 0.4;
}

.story-key-chips {
  display: inline-flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.story-key {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-soft-green);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.story-graduate {
  border: 1px solid var(--color-primary);
  background: var(--color-soft-green);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.story-graduate p {
  margin: 0 0 0.625rem;
  font-weight: 600;
  color: var(--color-primary-strong);
}

.story-read-done {
  margin: 0.75rem 0 0;
  min-height: 48px;
}

.story-feedback {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.875rem;
  background: var(--color-soft-green);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 编辑器 */
.story-edit-warn {
  color: var(--color-action-strong);
  font-size: 0.875rem;
}

.story-edit-lines {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.75rem 0;
}

.story-edit-line {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.story-edit-line input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
}

@media (max-width: 720px) {
  /* 窄屏两行制卡片（2026-09-12 老王：编辑行竖排三件散乱）：
     句子独占一行，关键词与 Remove 结伴第二行；整行加边框框成一张卡——
     "这三件属于同一句"的归属感立起来。PC（>720px）三列一行不变。 */
  .story-edit-line {
    grid-template-columns: 1fr auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem;
  }
  .story-edit-line input:first-child {
    grid-column: 1 / -1;
  }
}